fix: style

bo/src/components/customer/Cart1.vue

@@ -9,21 +9,22 @@
 
       <div v-if="cartStore.items.length > 0" class="divide-y divide-(--border-light) dark:divide-(--border-dark)">
         <div v-for="item in cartStore.items" :key="item.id" class="flex items-center justify-between p-4 gap-4">
-          <div class="flex items-center gap-10 flex-1">
+          <div class="grid grid-cols-5 w-[100%]">
             <div
               class="w-20 bg-(--second-light) dark:bg-(--main-dark) rounded flex items-center justify-center overflow-hidden">
               <img v-if="item.image" :src="item.image" :alt="item.name" class="w-full h-full object-cover" />
               <UIcon v-else name="mdi:package-variant" class="text-xl text-gray-400" />
             </div>
-            <div class="flex-1 min-w-0">
+            <p class="text-black dark:text-white text-sm font-medium truncate">{{ item.name }}</p>
-              <p class="text-black dark:text-white text-sm font-medium truncate">{{ item.name }}</p>
+            <p class="text-black dark:text-white text-sm font-medium truncate">{{ item.product_number }}</p>
-              <p class="text-gray-500 dark:text-gray-400 text-sm">
-                {{ t('Qty') }}: {{ item.quantity }} × ${{ item.price.toFixed(2) }}
-              </p>
-            </div>
-          </div>
-          <div class="text-right flex-shrink-0">
             <p class="text-black dark:text-white font-medium">${{ (item.price * item.quantity).toFixed(2) }}</p>
+            <div class="flex items-center justify-end gap-10">
+              <UInputNumber v-model="item.quantity" class="text-gray-500 dark:text-gray-400 text-sm" />
+              <button size="sm" color="destructive" variant="outline" @click="confirmDelete(address.id)"
+                class="text-red-500 bg-red-100 dark:bg-red-900 dark:text-red-100 rounded transition-colors p-2">
+                <UIcon name="material-symbols:delete" class="text-[16px]" />
+              </button>
+            </div>
           </div>
         </div>
       </div>

bo/src/components/customer/PageAddresses.vue

@@ -161,14 +161,6 @@ function saveAddress() {
     }
     closeModal()
 }
-// const Lera = ref('')
-// function run (){
-//     if(Lera.value==='lera'){
-//         console.log('Leraa okokok')
-//     }else{
-//         console.log('LEra nonono')
-//     }
-// }
 function confirmDelete(id: number) {
     addressToDelete.value = id
     showDeleteConfirm.value = true

bo/src/components/customer/PageCart.vue

@@ -42,7 +42,7 @@
                   }}</span>
               </div>
               <div class="col-span-1 flex justify-center">
-                <button @click="removeItem(item.id)"
+                <button  @click="removeItem(item.id)"
                   class="p-2 text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded transition-colors"
                   :title="t('Remove')">
                   <UIcon name="material-symbols:delete" class="text-[20px]" />

bo/src/stores/cart.ts

@@ -8,6 +8,7 @@ export interface CartItem {
   image: string
   price: number
   quantity: number
+  product_number:string
 }
 
 export interface DeliveryMethod {
@@ -32,9 +33,9 @@ export const useCartStore = defineStore('cart', () => {
 
   function initMockData() {
     items.value = [
-      { id: 1, productId: 101, name: 'Premium Widget Pro', image: '/img/product-1.jpg', price: 129.99, quantity: 2 },
+      { id: 1, productId: 101, name: 'Premium Widget Pro', product_number: 'NC209/7000', image: '/img/product-1.jpg', price: 129.99, quantity: 2 },
-      { id: 2, productId: 102, name: 'Ultra Gadget X', image: '/img/product-2.jpg', price: 89.50, quantity: 1 },
+      { id: 2, productId: 102, name: 'Ultra Gadget X', product_number: 'NC234/6453', image: '/img/product-2.jpg', price: 89.50, quantity: 1 },
-      { id: 3, productId: 103, name: 'Mega Tool Set', image: '/img/product-3.jpg', price: 249.00, quantity: 3 }
+      { id: 3, productId: 103, name: 'Mega Tool Set', product_number: 'NC324/9030', image: '/img/product-3.jpg', price: 249.00, quantity: 3 }
     ]
   }