changes

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

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"
     >

app/components/orders/OrderProductTab.vue

@@ -27,9 +27,16 @@ 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>
             <div>
               <p class="font-semibold">
                 {{ product.variant__product__name }}
@@ -41,17 +48,18 @@ const invoiceProducts = computed(() => {
                 <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>
+        </div>
         <p class="font-semibold">
           {{ $formatNum(product.subtotal, { hasUnit: true }) }}
         </p>
       </div>
     </div>
-    </div>
     <hr />
     <table class="table is-fullwidth is-bordered fs-14 mb-8">
       <tbody class="has-text-right">

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">

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">

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",
     },
   },
   {