changes

app/components/TopMenu.vue

@@ -13,7 +13,7 @@
         @click="changeTab(leftmenu[0])"
       >
         <svg
-          style="max-height: none; width: 44px"
+          style="max-height: none; width: 40px"
           width="80"
           height="80"
           viewBox="0 0 80 80"

app/components/datatable/ContextMenu.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="toolbar field has-addons is-justify-content-center">
+  <div class="is-flex is-flex-direction-column max-h-full">
+    <div class="is-flex-shrink-0 toolbar field has-addons is-justify-content-center">
       <!-- <div class="control">
         <button
           class="button is-light is-primary"
@@ -238,7 +239,7 @@
         </p>
       </div>
     </div>
-  <div class="tabs">
+    <div class="is-flex-shrink-0 tabs">
       <ul>
         <li
           v-for="(v, i) in getMenu().filter((x) =>
@@ -261,7 +262,7 @@
         <span class="font-semibold">Tên trường:</span>
         <span>{{ currentField.name }}</span>
         <button
-        class="button is-small size-8 is-primary is-light is-rounded"
+          class="button is-small size-8 is-primary is-light rounded-full p-0"
           @click="$copyToClipboard(currentField.name)"
         >
           <span class="icon">
@@ -397,7 +398,9 @@
             >
               <span class="icon">
                 <Icon
-                :name="currentField.template ? 'material-symbols:edit-outline-rounded' : 'material-symbols:add-rounded'"
+                  :name="
+                    currentField.template ? 'material-symbols:edit-outline-rounded' : 'material-symbols:add-rounded'
+                  "
                   :size="17"
                 />
               </span>
@@ -407,18 +410,16 @@
         </div>
       </div>
     </div>
-  <div v-else-if="currentTab === 'value'">
     <ScrollBox
+      v-else-if="currentTab === 'value'"
       v-bind="{
-        data: props.filterData,
+        data: filterData,
-        name: props.field.name,
+        name: field.name,
-        maxHeight: '380px',
         perpage: 20,
         inContext: true,
       }"
       @selected="doSelect"
     />
-  </div>
     <Modal
       v-bind="showmodal"
       v-if="showmodal"
@@ -426,6 +427,7 @@
       @updatefields="updateFields"
       @close="close"
     />
+  </div>
 </template>
 <script setup>
 import ScrollBox from "~/components/datatable/ScrollBox.vue";

app/components/datatable/CreateTemplate.vue

@@ -122,7 +122,7 @@
         <li
           v-for="(v, i) in tabs"
           :key="i"
-          :class="tab.code === v.code && 'is-active'"
+          :class="['fs-14', tab.code === v.code && 'is-active']"
           @click="changeTab(v)"
         >
           <a class="has-text-inherit">{{ v.name }}</a>

app/components/datatable/MenuSave.vue

@@ -13,7 +13,7 @@
       <span class="icon">
         <Icon
           name="material-symbols:content-copy-outline-rounded"
-          :size="14"
+          :size="16"
         />
       </span>
     </button>
@@ -102,7 +102,13 @@
         :class="['button is-primary', isLoading && 'is-loading']"
         @click="saveSetting"
       >
-        Lưu lại
+        <span class="icon">
+          <Icon
+            name="material-symbols:check-rounded"
+            :size="18"
+          />
+        </span>
+        <span>Lưu lại</span>
       </button>
     </p>
   </div>

app/components/orders/OrderDeliveryTab.vue

@@ -9,7 +9,10 @@ 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 is-flex is-justify-content-space-between is-align-items-center"
+      v-if="invoice.delivery"
+      class="p-4 rounded-md is-flex is-justify-content-space-between is-align-items-center"
+      :class="`has-background-${invoice.delivery__delivery_status__color}-95`"
+      :style="{ border: `1px solid var(--bulma-${invoice.delivery__delivery_status__color}-80)` }"
     >
       <div>
         <p class="fs-14 has-text-grey-40">Mã giao hàng</p>
@@ -28,7 +31,10 @@ const props = defineProps({
           </button>
         </p>
       </div>
-      <p class="font-medium has-text-primary-50">
+      <p
+        class="font-medium"
+        :class="`has-text-${invoice.delivery__delivery_status__color}-40`"
+      >
         {{ capitalize(invoice.delivery__delivery_status__name) }}
       </p>
     </div>

app/components/orders/OrderProductTab.vue

@@ -27,7 +27,8 @@ const invoiceProducts = computed(() => {
       <div
         v-for="product in invoiceProducts"
         :key="product.id"
-        class="p-4 has-background-white-ter rounded-md is-flex is-gap-2 is-justify-content-space-between is-align-items-flex-end"
+        class="p-4 has-background-grey-100 rounded-md is-flex is-gap-2 is-justify-content-space-between is-align-items-flex-end"
+        style="border: 1px solid var(--bulma-grey-90)"
       >
         <div class="is-flex-grow-1 is-flex is-gap-2">
           <NuxtImg

app/components/orders/SelectedOrder.vue

@@ -45,12 +45,23 @@ const activeTab = ref(tabs[0]);
 <template>
   <div v-if="invoice">
     <div class="block">
-      <div class="is-flex is-gap-1.5 is-align-items-center">
+      <div class="is-flex is-align-items-center">
         <span class="fs-17 font-bold">{{ invoice.code }}</span>
+        <button
+          class="button size-7 ml-1.5 is-primary is-light is-small p-0 rounded-full"
+          @click="$copyToClipboard(invoice.code)"
+        >
+          <span class="icon">
+            <Icon
+              name="material-symbols:content-copy-outline-rounded"
+              :size="16"
+            />
+          </span>
+        </button>
         <span
           :class="[
-            'tag rounded-full',
+            'tag rounded-full ml-3',
-            `has-background-${invoice.invoice_status__color}-80 has-text-${invoice.invoice_status__color}-25`,
+            `has-background-${invoice.invoice_status__color}-90 has-text-${invoice.invoice_status__color}-25`,
           ]"
         >
           {{ invoice.invoice_status__name }}

app/components/pos/Address.vue

@@ -1,9 +1,12 @@
 <script setup>
+import useActiveCart from "~/components/pos/composables/useActiveCart";
+
 const props = defineProps({
   address: Object,
   selected: Boolean,
 });
 
+const { activeCart } = useActiveCart();
 const showModal = ref(false);
 
 function openEditModal() {
@@ -12,7 +15,10 @@ function openEditModal() {
     title: "Cập nhật địa chỉ",
     width: "50%",
     height: "auto",
-    vbind: { address: props.address },
+    vbind: {
+      customerId: activeCart.value.customer,
+      address: props.address,
+    },
   };
 }
 </script>

app/components/pos/AddressForm.vue

@@ -2,10 +2,11 @@
 import { isEqual } from "es-toolkit";
 
 const props = defineProps({
+  customerId: Number,
   address: Object,
 });
 
-const emit = defineEmits(["modalevent"]);
+const emit = defineEmits(["modalevent", "close"]);
 
 const { $insertapi, $patchapi } = useNuxtApp();
 const addressRef = ref({ ...props.address });
@@ -13,11 +14,16 @@ const isLoading = ref(false);
 
 async function submitAddress() {
   isLoading.value = true;
+  const payload = {
+    ...addressRef.value,
+    customer: props.customerId,
+  };
   const res = props.address
-    ? await $patchapi("Customer_Address", addressRef.value)
+    ? await $patchapi("Customer_Address", payload)
-    : await $insertapi("Customer_Address", addressRef.value);
+    : await $insertapi("Customer_Address", { data: payload });
   isLoading.value = false;
   emit("modalevent", { name: "submit" });
+  emit("close");
 }
 
 const isDirty = computed(() => {

app/components/pos/POS.vue

@@ -40,6 +40,10 @@ function openAddAddressModal() {
     title: "Thêm địa chỉ",
     width: "50%",
     height: "auto",
+    vbind: {
+      customerId: activeCart.value.customer,
+      address: undefined,
+    },
   };
 }
 </script>
@@ -214,25 +218,11 @@ function openAddAddressModal() {
                     </div>
                     <hr />
                     <div class="block">
-                      <p class="mb-2">Địa chỉ giao hàng</p>
+                      <div class="block is-flex is-justify-content-space-between is-align-items-center">
-                      <div v-if="addresses.length > 0">
+                        <p>Địa chỉ giao hàng</p>
-                        <Address
-                          v-for="address in addresses"
-                          :key="address"
-                          :address="address"
-                          :selected="orderInfo.address?.id === address.id"
-                          @selectAddress="orderInfo.address = $event"
-                          @submit="posStore.getAddresses(activeCart.customer)"
-                        />
-                      </div>
-                      <div
-                        v-else
-                        class="has-text-centered"
-                      >
-                        <p class="has-text-grey p-4">Khách hàng chưa có địa chỉ</p>
                         <button
                           @click="openAddAddressModal"
-                          class="button is-light is-primary"
+                          class="button is-small is-light is-primary"
                         >
                           <span class="icon">
                             <Icon
@@ -243,6 +233,21 @@ function openAddAddressModal() {
                           <span>Thêm địa chỉ</span>
                         </button>
                       </div>
+                      <Address
+                        v-if="addresses.length > 0"
+                        v-for="address in addresses"
+                        :key="address"
+                        :address="address"
+                        :selected="orderInfo.address?.id === address.id"
+                        @selectAddress="orderInfo.address = $event"
+                        @submit="posStore.getAddresses(activeCart.customer)"
+                      />
+                      <div
+                        v-else
+                        class="has-text-grey has-text-centered p-4"
+                      >
+                        Khách hàng chưa có địa chỉ
+                      </div>
                     </div>
                   </div>
                   <p
@@ -370,6 +375,7 @@ function openAddAddressModal() {
       v-if="showModal"
       v-bind="showModal"
       @close="showModal = undefined"
+      @submit="posStore.getAddresses(activeCart.customer)"
     />
   </div>
 </template>