changes

app/components/orders/InvoiceRow.vue

@@ -3,14 +3,25 @@ const props = defineProps({
   invoice: Object,
 });
 
-const { $dayjs, $shortenCurrency } = useNuxtApp();
+const { $getdata, $dayjs, $shortenCurrency } = useNuxtApp();
+const paymentRecords = ref([]);
+onMounted(async () => {
+  paymentRecords.value = await $getdata("Payment_Record", {
+    filter: { invoice: props.invoice.id },
+  });
+});
+
+/* 
+
+ */
+/* invoice.total_amount */
 const showModal = ref();
 
 function openModal() {
   showModal.value = {
     component: "orders/SelectedOrder",
     title: "Chi tiết đơn hàng",
-    width: "75%",
+    width: "min(700px, 75%)",
     vbind: {
       invoice: props.invoice,
     },

app/components/orders/OrderDeliveryTab.vue

@@ -16,7 +16,7 @@ const props = defineProps({
         <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"
+            class="button is-ghost is-small p-0 rounded-full"
             @click="$copyToClipboard(invoice.delivery__tracking_code)"
           >
             <span class="icon">
@@ -28,7 +28,7 @@ const props = defineProps({
           </button>
         </p>
       </div>
-      <p class="fs-16 font-medium has-text-primary-50">
+      <p class="font-medium has-text-primary-50">
         {{ capitalize(invoice.delivery__status) }}
       </p>
     </div>

app/components/orders/OrderPaymentTab.vue

@@ -8,15 +8,15 @@ const { $formatNum } = useNuxtApp();
 <template>
   <div>
     <div class="is-flex is-gap-2">
-      <div class="is-flex-grow-1 p-3 rounded-md has-background-white-100">
+      <div class="is-flex-grow-1 p-3 rounded-md has-background-white-ter">
         <p class="fs-13 has-text-grey">Tổng tiền</p>
         <p class="font-bold">
-          {{ $formatNum(invoice.total, { hasUnit: true }) }}
+          {{ $formatNum(invoice.final_amount, { hasUnit: true }) }}
         </p>
       </div>
       <div class="is-flex-grow-1 p-3 rounded-md has-background-success-95">
         <p class="fs-13 has-text-success-40">Đã thanh toán</p>
-        <p class="font-bold has-text-success-30">0 đ</p>
+        <p class="font-bold has-text-success-30">{{ $formatNum(null) }}</p>
       </div>
     </div>
     <div class="p-4 mt-4 rounded-md has-background-danger-95">

app/components/orders/OrderProductTab.vue

@@ -27,12 +27,21 @@ const invoiceProducts = computed(() => {
       <div
         v-for="product in invoiceProducts"
         :key="product.id"
-        class="p-3 has-background-white-95 rounded-md"
+        class="p-3 has-background-white-ter rounded-md"
       >
         <div class="is-flex is-justify-content-space-between is-align-items-flex-end">
           <div>
-            <p class="font-semibold">{{ product.variant__product__name }}</p>
-            <div class="is-flex is-gap-8 fs-13 has-text-grey-30 mt-1">
+            <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 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>

app/components/orders/OrderReceiptTab.vue

@@ -9,7 +9,7 @@ const props = defineProps({
     <Icon
       name="material-symbols:receipt-long-outline-rounded"
       :size="50"
-      class="has-text-grey-70"
+      class="has-text-grey-90"
     />
     <p>Chưa có hoá đơn</p>
     <button class="button is-purple">Tạo hoá đơn</button>

app/components/orders/Orders.vue

@@ -90,7 +90,10 @@ provide("orders", {
         </button>
       </div>
     </Teleport>
-    <!-- <div class="fixed-grid has-2-cols-mobile has-5-cols">
+    <div
+      v-if="false"
+      class="fixed-grid has-2-cols-mobile has-5-cols"
+    >
       <div class="grid">
         <OrderHighlightCard
           v-for="highlight in highlights"
@@ -99,7 +102,7 @@ provide("orders", {
         />
       </div>
     </div>
-    <OrderPipeline /> -->
+    <OrderPipeline />
     <OrdersTable :viewMode="viewMode" />
   </div>
 </template>

app/components/orders/OrdersTable.vue

@@ -7,7 +7,7 @@ const props = defineProps({
   viewMode: String,
 });
 
-const { $dayjs } = useNuxtApp();
+const { $getdata, $dayjs } = useNuxtApp();
 const { invoices } = inject("orders");
 
 const statuses = [
@@ -51,16 +51,11 @@ const paymentStatuses = [
   },
 ];
 
-const employees = [
-  {
-    id: 1,
-    name: "Trần Thị B",
-  },
-  {
-    id: 5,
-    name: "Hoàng Văn E",
-  },
-];
+const employees = ref([]);
+
+onMounted(async () => {
+  employees.value = await $getdata("Staff");
+});
 
 const input = ref();
 const dateRange = ref({
@@ -99,7 +94,7 @@ const filteredInvoices = computed(() => {
   const filteredByDates = filteredByEmployees.filter((order) => {
     if (!dateRange.value) return true;
     const from = $dayjs(dateRange.value.from || 0);
-    const to = $dayjs(dateRange.value.to || undefined);
+    const to = $dayjs(dateRange.value.to || undefined).endOf("day");
     const createTime = $dayjs(order.create_time);
     return createTime.isSameOrAfter(from) && createTime.isSameOrBefore(to);
   });
@@ -123,10 +118,7 @@ function toggleStatus(id) {
 </script>
 <template>
   <div>
-    <div
-      v-if="true"
-      class="card"
-    >
+    <div class="card">
       <div class="card-content">
         <div class="is-flex is-gap-2 is-align-items-center">
           <div class="field is-flex-grow-1 m-0">
@@ -167,7 +159,7 @@ function toggleStatus(id) {
           </div>
           <div class="select">
             <select v-model="selectedPaymentStatus">
-              <option :value="undefined">Phương thức thanh toán</option>
+              <option :value="undefined">Thanh toán</option>
               <option
                 v-for="paymentStatus in paymentStatuses"
                 :key="paymentStatus.id"
@@ -185,7 +177,7 @@ function toggleStatus(id) {
                 :key="employee.id"
                 :value="employee.id"
               >
-                {{ employee.name }}
+                {{ employee.fullname }}
               </option>
             </select>
           </div>