changes

app/components/orders/OrderDeliveryTab.vue

@@ -1,4 +1,6 @@
 <script setup>
+import { capitalize } from "es-toolkit";
+
 const props = defineProps({
   invoice: Object,
 });
@@ -6,16 +8,40 @@ const props = defineProps({
 
 <template>
   <div class="is-flex is-flex-direction-column is-gap-2">
-    <div class="p-4 rounded-md has-background-primary-95">
+    <div
-      <p class="has-text-grey">Trạng thái</p>
+      class="p-4 rounded-md has-background-primary-95 is-flex is-justify-content-space-between is-align-items-center"
-      <p class="fs-17 mt-1 font-semibold has-text-primary-50">
+    >
-        {{ invoice.delivery_status__name }}
+      <div>
+        <p class="fs-14 has-text-grey-40">Mã giao hàng</p>
+        <p class="is-flex is-gap-1 is-align-items-center">
+          <span class="font-semibold">{{ invoice.delivery__tracking_code }}</span>
+          <button
+            class="button is-ghost is-small size-6 p-0 rounded-full"
+            @click="$copyToClipboard(invoice.delivery__tracking_code)"
+          >
+            <span class="icon">
+              <Icon
+                name="material-symbols:content-copy-outline-rounded"
+                :size="17"
+              />
+            </span>
+          </button>
         </p>
       </div>
-    <div class="p-4 rounded-md has-background-white-bis">
+      <p class="fs-16 font-medium has-text-primary-50">
-      <p class="has-text-grey">Địa chỉ giao hàng</p>
+        {{ capitalize(invoice.delivery__status) }}
-      <p class="mt-1 has-text-grey-darker">{{ invoice.customer__name }}</p>
+      </p>
-      <p class="has-text-grey-darker">{{ invoice.customer__phone }}</p>
+    </div>
+    <div class="rounded-md has-background-white-bis">
+      <div class="p-4">
+        <p class="fs-14 has-text-grey-40">Người nhận</p>
+        <p class="font-medium">{{ invoice.delivery__receiver_name }}</p>
+      </div>
+      <hr class="m-0" />
+      <div class="p-4">
+        <p class="fs-14 has-text-grey-40">Địa chỉ</p>
+        <p class="font-medium">{{ invoice.delivery__receiver_phone }}</p>
+      </div>
     </div>
   </div>
 </template>

app/components/orders/OrderProductTab.vue

@@ -1,4 +1,6 @@
 <script setup>
+import { groupBy } from "es-toolkit";
+
 const props = defineProps({
   invoice: Object,
 });
@@ -8,29 +10,35 @@ const invoiceDetails = ref([]);
 onMounted(async () => {
   invoiceDetails.value = await $getdata("Invoice_Detail", { filter: { invoice: props.invoice.id } });
 });
+
+const invoiceProducts = computed(() => {
+  const grouped = groupBy(invoiceDetails.value, (item) => item.variant__product__name);
+  return Object.values(grouped).map((group) => ({
+    ...group[0],
+    amount: group.length,
+    subtotal: group.length * group[0].price,
+  }));
+});
 </script>
 
 <template>
   <div>
-    <pre class="fs-12 max-h-40 mb-2">{{ invoiceDetails }}</pre>
+    <div class="is-flex is-flex-direction-column is-gap-1">
-    <div class="is-flex is-flex-direction-column is-gap-2">
       <div
-        v-for="invoiceDetail in invoiceDetails"
+        v-for="product in invoiceProducts"
-        :key="invoiceDetail.id"
+        :key="product.id"
         class="p-3 has-background-white-ter rounded-md"
       >
-        <div class="fs-15 is-flex is-justify-content-space-between">
+        <div class="is-flex is-justify-content-space-between is-align-items-flex-end">
-          <p>{{ invoiceDetail.variant__product__name }}</p>
+          <div>
-          <p class="font-semibold">
+            <p class="font-semibold">{{ product.variant__product__name }}</p>
-            {{ $formatNum(invoiceDetail.price, { hasUnit: true }) }}
-          </p>
-        </div>
             <div class="is-flex is-gap-8 fs-13 has-text-grey-dark mt-1">
-          <p>SL: {{ invoiceDetail.quantity }}</p>
+              <p>SL: {{ product.amount }}</p>
-          <p>Đơn giá: {{ $formatNum(invoiceDetail.price, { hasUnit: true }) }}</p>
+              <p>Đơn giá: {{ $formatNum(product.price, { hasUnit: true }) }}</p>
-          <p>
+            </div>
-            Giảm:
+          </div>
-            {{ new Intl.NumberFormat("vi-VN", { style: "percent" }).format(invoiceDetail.discount) }}
+          <p class="font-semibold">
+            {{ $formatNum(product.subtotal, { hasUnit: true }) }}
           </p>
         </div>
       </div>