From da4c779bbe3273e3b89daf4ef2d26dad209ba779 Mon Sep 17 00:00:00 2001
From: Viet An <tiktaktictac269@gmail.com>
Date: Thu, 18 Jun 2026 17:02:58 +0700
Subject: [PATCH] changes

---
 app/components/Modal.vue                   |  1 -
 app/components/orders/OrderDeliveryTab.vue |  2 +-
 app/components/orders/OrderProductTab.vue  | 38 +++++++++++++---------
 app/components/orders/SelectedOrder.vue    |  5 ++-
 app/components/pos/POS.vue                 |  5 +--
 app/utils/apis.js                          |  2 +-
 6 files changed, 30 insertions(+), 23 deletions(-)

diff --git a/app/components/Modal.vue b/app/components/Modal.vue
index 74868d5..73dd32d 100644
--- a/app/components/Modal.vue
+++ b/app/components/Modal.vue
@@ -16,7 +16,6 @@
         :style="{
           width: $store.viewport <= 1 ? 'calc(100% - 2rem)' : width,
           height,
-          // maxHeight: 'calc(100vh - var(--bulma-modal-card-spacing))',
         }"
       >
         <header
diff --git a/app/components/orders/OrderDeliveryTab.vue b/app/components/orders/OrderDeliveryTab.vue
index 74c732b..a54ef20 100644
--- a/app/components/orders/OrderDeliveryTab.vue
+++ b/app/components/orders/OrderDeliveryTab.vue
@@ -7,7 +7,7 @@ const props = defineProps({
 </script>
 
 <template>
-  <div class="is-flex is-flex-direction-column is-gap-1">
+  <div class="is-flex is-flex-direction-column is-gap-2">
     <div
       class="p-4 rounded-md has-background-primary-95 is-flex is-justify-content-space-between is-align-items-center"
     >
diff --git a/app/components/orders/OrderProductTab.vue b/app/components/orders/OrderProductTab.vue
index 0bba8e6..0ae2599 100644
--- a/app/components/orders/OrderProductTab.vue
+++ b/app/components/orders/OrderProductTab.vue
@@ -27,29 +27,37 @@ const invoiceProducts = computed(() => {
       <div
         v-for="product in invoiceProducts"
         :key="product.id"
-        class="p-3 has-background-white-ter rounded-md"
+        class="p-4 has-background-white-ter rounded-md is-flex is-gap-2 is-justify-content-space-between is-align-items-flex-end"
       >
-        <div class="is-flex is-justify-content-space-between is-align-items-flex-end">
+        <div class="is-flex-grow-1 is-flex is-gap-2">
+          <NuxtImg
+            :src="product.variant__image__path"
+            width="45"
+            height="45"
+            style="align-self: flex-start"
+          />
           <div>
-            <p class="font-semibold">
-              {{ product.variant__product__name }}
-            </p>
-            <p class="fs-13 has-text-grey-40">
-              <span>{{ product.variant__internal_storage__code }}</span>
-              <span> - </span>
-              <span>{{ product.variant__ram__code }} RAM</span>
-              <span> - </span>
-              <span>{{ product.variant__color__name }}</span>
-            </p>
+            <div>
+              <p class="font-semibold">
+                {{ product.variant__product__name }}
+              </p>
+              <p class="fs-13 has-text-grey-40">
+                <span>{{ product.variant__internal_storage__code }}</span>
+                <span> - </span>
+                <span>{{ product.variant__ram__code }} RAM</span>
+                <span> - </span>
+                <span>{{ product.variant__color__name }}</span>
+              </p>
+            </div>
             <div class="is-flex is-gap-8 fs-13 has-text-grey-30 mt-2">
               <p>SL: {{ product.amount }}</p>
               <p>Đơn giá: {{ $formatNum(product.price, { hasUnit: true }) }}</p>
             </div>
           </div>
-          <p class="font-semibold">
-            {{ $formatNum(product.subtotal, { hasUnit: true }) }}
-          </p>
         </div>
+        <p class="font-semibold">
+          {{ $formatNum(product.subtotal, { hasUnit: true }) }}
+        </p>
       </div>
     </div>
     <hr />
diff --git a/app/components/orders/SelectedOrder.vue b/app/components/orders/SelectedOrder.vue
index 764f6c6..88bd3f3 100644
--- a/app/components/orders/SelectedOrder.vue
+++ b/app/components/orders/SelectedOrder.vue
@@ -63,6 +63,7 @@ const activeTab = ref(tabs[0]);
             <Icon
               name="material-symbols:person-outline-rounded"
               :size="18"
+              class="has-text-grey"
             />
           </span>
           <span>{{ invoice.customer_name }}</span>
@@ -72,6 +73,7 @@ const activeTab = ref(tabs[0]);
             <Icon
               name="material-symbols:call-outline-rounded"
               :size="18"
+              class="has-text-grey"
             />
           </span>
           <span>{{ invoice.customer_phone }}</span>
@@ -81,9 +83,10 @@ const activeTab = ref(tabs[0]);
             <Icon
               name="material-symbols:calendar-today-outline-rounded"
               :size="18"
+              class="has-text-grey"
             />
           </span>
-          <span>{{ $dayjs(invoice.create_time).format("LL") }}</span>
+          <span>{{ $dayjs(invoice.create_time).format("LT, LL") }}</span>
         </p>
       </div>
       <div class="px-6 py-4 has-background-primary-95 rounded-lg mt-6">
diff --git a/app/components/pos/POS.vue b/app/components/pos/POS.vue
index b1f29ba..8974e32 100644
--- a/app/components/pos/POS.vue
+++ b/app/components/pos/POS.vue
@@ -81,10 +81,7 @@ provide("pos", {
     <template v-if="activeCartId && carts?.length > 0">
       <CartTabs />
       <div class="fixed-grid has-1-cols-mobile has-12-cols has-background-white is-clipped">
-        <div
-          class="grid"
-          style="row-gap: 0"
-        >
+        <div class="grid is-gap-0">
           <div :class="['cell', store.viewport < 3 ? 'is-col-span-12' : 'is-col-span-8']">
             <div class="card">
               <div class="card-content">
diff --git a/app/utils/apis.js b/app/utils/apis.js
index 13c2ed6..61c5c18 100644
--- a/app/utils/apis.js
+++ b/app/utils/apis.js
@@ -497,7 +497,7 @@ export default /** @type {const} */ ([
     url_detail: "data-detail/Invoice_Detail/",
     params: {
       values:
-        "id,code,invoice,variant,variant__code,variant__product,variant__product__name,variant__color,variant__color__name,variant__ram__code,variant__ram__capacity,variant__internal_storage__code,variant__internal_storage__capacity,variant__price,variant__image__code,imei_sold,price,status,note,deleted,create_time,update_time",
+        "id,code,invoice,variant,variant__code,variant__product,variant__product__name,variant__color,variant__color__name,variant__ram__code,variant__ram__capacity,variant__internal_storage__code,variant__internal_storage__capacity,variant__price,variant__image__path,imei_sold,price,status,note,deleted,create_time,update_time",
     },
   },
   {