changes

app/components/Modal.vue

@@ -16,6 +16,7 @@
         :style="{
           width: $store.viewport <= 1 ? 'calc(100% - 2rem)' : width,
           height,
+          // maxHeight: 'calc(100vh - var(--bulma-modal-card-spacing))',
         }"
       >
         <header
@@ -84,7 +85,7 @@ const { $store } = useNuxtApp();
 const props = defineProps({
   component: String,
   width: { type: String, default: "60%" },
-  height: { type: String, default: "750px" },
+  height: String,
   vbind: Object,
   title: String,
 });

app/components/SearchBox.vue

@@ -28,6 +28,7 @@
               @keyup.esc="lostFocus"
               @input="debouncedGetSuggestions($event.target.value)"
               v-model="value"
+              :title="value"
               :placeholder="placeholder"
             />
             <span class="icon is-left">

app/components/datatable/ContextMenu.vue

@@ -552,7 +552,6 @@ function tableOption() {
     vbind: { pagename: props.pagename },
     title: "Tùy chọn bảng",
     width: "50%",
-    height: "400px",
   };
 }
 const getFields = function () {

app/components/datatable/TableSetting.vue

@@ -237,8 +237,8 @@ input[type="color"]::-webkit-color-swatch {
 
 .box {
   box-shadow: none;
-  border: 1px solid var(--bulma-grey-85);
+  border: 1px solid var(--bulma-grey-90);
-  background-color: var(--bulma-grey-95);
+  background-color: var(--bulma-grey-100);
   height: 100%;
 }
 </style>

app/components/imports/EditProductButton.vue

@@ -9,7 +9,6 @@ function displayModal() {
   showModal.value = {
     title: "Cập nhật sản phẩm",
     width: "90%",
-    height: "400px",
     component: "imports/EditProduct",
     vbind: { variant: props.variant },
   };

app/components/imports/Products.vue

@@ -18,7 +18,7 @@ import DataView from "~/components/datatable/DataView.vue";
         component: 'imports/AddProduct',
         title: 'Tạo sản phẩm',
         width: '90%',
-        height: '450px',
+        height: '600px',
       },
     }"
   />

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>
+            <p class="font-semibold">
-            <div class="is-flex is-gap-8 fs-13 has-text-grey-30 mt-1">
+              {{ 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 = [
+const employees = ref([]);
-  {
+
-    id: 1,
+onMounted(async () => {
-    name: "Trần Thị B",
+  employees.value = await $getdata("Staff");
-  },
+});
-  {
-    id: 5,
-    name: "Hoàng Văn E",
-  },
-];
 
 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
+    <div class="card">
-      v-if="true"
-      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>

app/components/pos/Address.vue

@@ -8,7 +8,7 @@ const showModal = ref(false);
 
 function openEditModal() {
   showModal.value = {
-    component: "pos/EditAddress",
+    component: "pos/AddressForm",
     title: "Cập nhật địa chỉ",
     width: "50%",
     height: "auto",
@@ -68,7 +68,7 @@ function openEditModal() {
       v-if="showModal"
       v-bind="showModal"
       @close="showModal = null"
-      @update="$emit('update')"
+      @submit="$emit('submit')"
     />
   </div>
 </template>

app/components/pos/AddressForm.vue

@@ -7,25 +7,22 @@ const props = defineProps({
 
 const emit = defineEmits(["modalevent"]);
 
-const { $patchapi } = useNuxtApp();
+const { $insertapi, $patchapi } = useNuxtApp();
 const addressRef = ref({ ...props.address });
 const isLoading = ref(false);
-async function updateAddress() {
+
+async function submitAddress() {
   isLoading.value = true;
-  const updated = await $patchapi("Customer_Address", addressRef.value);
+  const res = props.address
+    ? await $patchapi("Customer_Address", addressRef.value)
+    : await $insertapi("Customer_Address", addressRef.value);
   isLoading.value = false;
-  emit("modalevent", { name: "update" });
+  emit("modalevent", { name: "submit" });
 }
 
 const isDirty = computed(() => {
-  if (props.address) {
+  if (props.address) return !isEqual(props.address, addressRef.value);
-    // edit
+  return true;
-    return !isEqual(props.address, addressRef);
-  } else {
-    return true;
-    // create
-    // true if
-  }
 });
 const isValid = computed(() => {
   if (!addressRef.value.city) return false;
@@ -112,9 +109,6 @@ const isValid = computed(() => {
         </label>
       </div>
     </div>
-    <pre>address: {{ address }}</pre>
-    <pre>addressRef: {{ addressRef }}</pre>
-    <pre>isDirty: {{ isDirty.toString() }}</pre>
     <div class="field is-grouped is-grouped-right">
       <div class="control">
         <button
@@ -129,8 +123,8 @@ const isValid = computed(() => {
         <button
           type="button"
           :class="['button is-link', isLoading && 'is-loading']"
-          :disabled="!isDirty || !isValid"
+          :disabled="address ? !isDirty || !isValid : !isValid"
-          @click="updateAddress"
+          @click="submitAddress"
         >
           <span class="icon">
             <Icon

app/components/pos/CartTabs.vue

@@ -26,13 +26,14 @@ async function removeCart(cartId) {
   if (cartId === activeCartId.value) {
     if (carts.value.length === 1) {
       activeCartId.value = undefined;
-    }
-    const deletedCartIndex = carts.value.findIndex((c) => c.id === cartId);
-
-    if (deletedCartIndex === 0) {
-      activeCartId.value = carts.value[deletedCartIndex + 1].id;
     } else {
-      activeCartId.value = carts.value[deletedCartIndex - 1].id;
+      const deletedCartIndex = carts.value.findIndex((c) => c.id === cartId);
+
+      if (deletedCartIndex === 0) {
+        activeCartId.value = carts.value[deletedCartIndex + 1].id;
+      } else {
+        activeCartId.value = carts.value[deletedCartIndex - 1].id;
+      }
     }
   }
   getCarts();
@@ -74,6 +75,7 @@ async function removeCart(cartId) {
           <span
             @click.stop="removeCart(cart.id)"
             class="close ml-auto icon rounded-full"
+            title="Xoá giỏ hàng"
           >
             <Icon name="material-symbols:close-rounded" />
           </span>

app/components/pos/ConfirmOrder.vue

@@ -31,6 +31,7 @@ async function createOrder() {
         final_amount: subtotal.value,
         order_type: "pos",
         status: "pending",
+        staff: 1,
         ordered_at: new Date(),
         paid_at: null,
         delivery_method: orderInfo.value.deliveryMethod.id,
@@ -77,6 +78,7 @@ async function createOrder() {
         carrier: orderInfo.value.deliveryMethod.id,
         tracking_code: $id(),
         status: "pending",
+        staff: 1,
       };
 
       const deliveryInfo = await $insertapi("Delivery_Info", {

app/components/pos/POS.vue

@@ -9,7 +9,7 @@ import useOrderInfo from "~/components/pos/composables/useOrderInfo";
 import SearchBox from "~/components/SearchBox.vue";
 
 const store = useStore();
-const { $formatNum } = useNuxtApp();
+const { $insertapi, $formatNum } = useNuxtApp();
 
 const { carts, cartItems, customers, getCarts, isPending } = useCartData();
 
@@ -36,8 +36,8 @@ function openProductSelectionModal() {
     component: "pos/ProductSelection",
     title: "Chọn sản phẩm",
     width: "85%",
-    height: "500px",
   };
+  console.log("hey");
 }
 
 function openConfirmModal() {
@@ -45,13 +45,12 @@ function openConfirmModal() {
     component: "pos/ConfirmOrder",
     title: "Xác nhận đơn hàng",
     width: "60%",
-    height: "400px",
   };
 }
 
 function openAddAddressModal() {
   showModal.value = {
-    component: "pos/EditAddress",
+    component: "pos/AddressForm",
     title: "Thêm địa chỉ",
     width: "50%",
     height: "auto",
@@ -69,7 +68,7 @@ provide("pos", {
 </script>
 
 <template>
-  <div>
+  <div class="is-flex-grow-1 is-flex is-flex-direction-column">
     <!-- <div class="fs-11">
       <pre>customerIdsWithNoCart: {{ customerIdsWithNoCart }}</pre>
       <pre>{{ customerIdsWithNoCart }}</pre>
@@ -79,262 +78,317 @@ provide("pos", {
       <pre>activeCart?.customer: {{ JSON.stringify(activeCart?.customer) }}</pre>
       <pre>{{ orderInfo }}</pre>
     </div> -->
-    <CartTabs />
+    <template v-if="activeCartId && carts?.length > 0">
-    <div class="fixed-grid has-1-cols-mobile has-12-cols has-background-white is-clipped">
+      <CartTabs />
-      <div
+      <div class="fixed-grid has-1-cols-mobile has-12-cols has-background-white is-clipped">
-        class="grid"
+        <div
-        style="row-gap: 0"
+          class="grid"
-      >
+          style="row-gap: 0"
-        <div :class="['cell', store.viewport < 3 ? 'is-col-span-12' : 'is-col-span-8']">
+        >
-          <div class="card">
+          <div :class="['cell', store.viewport < 3 ? 'is-col-span-12' : 'is-col-span-8']">
-            <div class="card-content">
+            <div class="card">
-              <div class="block is-flex is-justify-content-space-between">
+              <div class="card-content">
-                <p class="icon-text fs-16 font-semibold mb-4">
+                <div class="block is-flex is-justify-content-space-between">
-                  <span class="icon">
+                  <p class="icon-text fs-16 font-semibold mb-4">
-                    <Icon
+                    <span class="icon">
-                      name="material-symbols:shopping-cart-outline-rounded"
+                      <Icon
-                      :size="18"
+                        name="material-symbols:shopping-cart-outline-rounded"
-                    />
+                        :size="18"
-                  </span>
-                  <span>Giỏ hàng</span>
-                  <span
-                    v-if="isPending"
-                    class="icon"
-                  >
-                    <Icon
-                      name="svg-spinners:180-ring-with-bg"
-                      :size="18"
-                      class="has-text-primary"
-                    />
-                  </span>
-                </p>
-                <button
-                  @click="openProductSelectionModal"
-                  class="button is-primary"
-                >
-                  <span class="icon">
-                    <Icon
-                      name="material-symbols:add-rounded"
-                      :size="20"
-                    />
-                  </span>
-                  <span>Thêm sản phẩm</span>
-                </button>
-              </div>
-              <div
-                v-if="activeCartItems?.length > 0"
-                class="is-flex is-flex-direction-column is-gap-1"
-              >
-                <CartItem
-                  v-for="cartItem in activeCartItems"
-                  :key="cartItem.id"
-                  :cartItem="cartItem"
-                  deleteable
-                />
-              </div>
-              <p
-                v-else
-                class="py-4 fs-16 has-text-centered has-text-grey"
-              >
-                Chưa có sản phẩm nào trong giỏ hàng.
-              </p>
-            </div>
-          </div>
-        </div>
-        <div :class="['cell sidebar', store.viewport < 3 ? 'is-col-span-12' : 'is-col-span-4']">
-          <div class="card">
-            <div class="card-content">
-              <p class="icon-text fs-16 font-semibold mb-4">
-                <span class="icon">
-                  <Icon
-                    name="material-symbols:supervisor-account-outline-rounded"
-                    :size="18"
-                  />
-                </span>
-                <span>Khách hàng</span>
-              </p>
-              <div>
-                <SearchBox
-                  v-bind="{
-                    api: 'customer',
-                    // filter: { id__in: [...customerIdsWithNoCart, activeCart?.customer] },
-                    field: 'label',
-                    column: ['label'],
-                    first: true,
-                    placeholder: 'Khách hàng',
-                    optionid: activeCart?.customer,
-                    onOption: (e) => {
-                      if (e?.id !== activeCart?.customer) changeCustomer(e?.id || null);
-                    },
-                    addon: {
-                      component: 'customer/CustomerQuickAdd',
-                      width: '50%',
-                      height: 'auto',
-                      title: 'Tạo khách hàng',
-                    },
-                  }"
-                />
-              </div>
-            </div>
-          </div>
-          <div class="card">
-            <div class="card-content">
-              <p class="icon-text fs-16 font-semibold mb-4">
-                <span class="icon">
-                  <Icon
-                    name="material-symbols:delivery-truck-speed-outline-rounded"
-                    :size="18"
-                  />
-                </span>
-                <span>Giao hàng</span>
-              </p>
-              <div class="block">
-                <SearchBox
-                  v-bind="{
-                    api: 'Delivery_Method',
-                    field: 'name',
-                    column: ['name'],
-                    first: true,
-                    placeholder: 'Phương thức giao hàng',
-                    disabled: !activeCart?.customer,
-                    optionid: orderInfo.deliveryMethod?.id,
-                    onOption: (e) => (orderInfo.deliveryMethod = e),
-                  }"
-                />
-              </div>
-              <template v-if="orderInfo.deliveryMethod?.code === 'HOME_DELIVERY'">
-                <div v-if="activeCart.customer">
-                  <div class="block">
-                    <p class="mb-2">Thông tin người nhận</p>
-                    <div v-if="activeCart.customer">
-                      <div class="field">
-                        <label class="label is-small">Tên</label>
-                        <p class="control">
-                          <input
-                            class="input is-small"
-                            type="email"
-                            :value="activeCart.customer__fullname"
-                            placeholder="Name"
-                            disabled
-                          />
-                        </p>
-                      </div>
-                      <div>
-                        <label class="label is-small">SĐT</label>
-                        <p class="control">
-                          <input
-                            class="input is-small"
-                            type="email"
-                            :value="activeCart.customer__phone"
-                            placeholder="Phone"
-                            disabled
-                          />
-                        </p>
-                      </div>
-                    </div>
-                  </div>
-                  <hr />
-                  <div class="block">
-                    <p class="mb-2">Địa chỉ giao hàng</p>
-                    <div v-if="addresses.length > 0">
-                      <Address
-                        v-for="address in addresses"
-                        :key="address"
-                        :address="address"
-                        :selected="orderInfo.address?.id === address.id"
-                        @selectAddress="orderInfo.address = $event"
-                        @update="getAddresses"
                       />
-                    </div>
+                    </span>
-                    <div
+                    <span>Giỏ hàng</span>
-                      v-else
+                    <span
-                      class="has-text-centered"
+                      v-if="isPending"
+                      class="icon"
                     >
-                      <p class="has-text-grey p-4">Khách hàng chưa có địa chỉ</p>
+                      <Icon
-                      <button
+                        name="svg-spinners:180-ring-with-bg"
-                        @click="openAddAddressModal"
+                        :size="18"
-                        class="button is-light is-primary"
+                        class="has-text-primary"
-                      >
+                      />
-                        <span class="icon">
+                    </span>
-                          <Icon
+                  </p>
-                            name="material-symbols:add-home-work-outline-rounded"
+                  <button
-                            :size="18"
+                    @click="openProductSelectionModal"
-                          />
+                    class="button is-primary"
-                        </span>
+                  >
-                        <span>Thêm địa chỉ</span>
+                    <span class="icon">
-                      </button>
+                      <Icon
-                    </div>
+                        name="material-symbols:add-rounded"
-                  </div>
+                        :size="20"
+                      />
+                    </span>
+                    <span>Thêm sản phẩm</span>
+                  </button>
+                </div>
+                <div
+                  v-if="activeCartItems?.length > 0"
+                  class="is-flex is-flex-direction-column is-gap-1"
+                >
+                  <CartItem
+                    v-for="cartItem in activeCartItems"
+                    :key="cartItem.id"
+                    :cartItem="cartItem"
+                    deleteable
+                  />
                 </div>
                 <p
                   v-else
-                  class="has-text-grey-70 py-4 has-text-centered"
+                  class="py-4 fs-16 has-text-centered has-text-grey"
                 >
-                  Chưa chọn khách hàng
+                  Chưa có sản phẩm nào trong giỏ hàng.
                 </p>
-              </template>
-            </div>
-          </div>
-          <div class="card">
-            <div class="card-content">
-              <p class="icon-text fs-16 font-semibold mb-4">
-                <span class="icon">
-                  <Icon
-                    name="material-symbols:credit-card-outline"
-                    :size="18"
-                  />
-                </span>
-                <span>Thanh toán</span>
-              </p>
-              <div>
-                <SearchBox
-                  v-bind="{
-                    api: 'Payment_Method',
-                    field: 'name',
-                    column: ['name'],
-                    first: true,
-                    placeholder: 'Phương thức thanh toán',
-                    disabled: !activeCart?.customer,
-                    optionid: orderInfo.paymentMethod?.id,
-                    onOption: (e) => (orderInfo.paymentMethod = e),
-                  }"
-                />
               </div>
             </div>
           </div>
-          <div class="card">
+          <div :class="['cell sidebar', store.viewport < 3 ? 'is-col-span-12' : 'is-col-span-4']">
-            <div class="card-content">
+            <div
-              <p class="icon-text fs-16 font-semibold mb-4">Tổng cộng</p>
+              class="card"
-              <div>
+              style="border-bottom: 1px solid var(--bulma-border)"
-                <table class="table is-fullwidth fs-13">
+            >
-                  <tbody>
+              <div class="card-content">
-                    <tr>
+                <p class="icon-text fs-16 font-semibold mb-4">
-                      <td>
+                  <span class="icon">
-                        <span>Tạm tính</span>
+                    <Icon
-                        <span> ({{ activeCartItems?.length || 0 }} sản phẩm)</span>
+                      name="material-symbols:supervisor-account-outline-rounded"
-                      </td>
+                      :size="18"
-                      <td class="has-text-right">{{ $formatNum(subtotal, { hasUnit: true }) }}</td>
+                    />
-                    </tr>
+                  </span>
-                    <tr>
+                  <span>Khách hàng</span>
-                      <td class="font-bold fs-14">Tổng cộng</td>
+                </p>
-                      <td class="has-text-right has-text-success-35 font-bold fs-17">
+                <div>
-                        {{ $formatNum(subtotal, { hasUnit: true }) }}
+                  <SearchBox
-                      </td>
+                    v-bind="{
-                    </tr>
+                      api: 'customer',
-                  </tbody>
+                      // filter: { id__in: [...customerIdsWithNoCart, activeCart?.customer] },
-                </table>
+                      field: 'label',
-                <button
+                      column: ['label'],
-                  @click="openConfirmModal"
+                      first: true,
-                  :disabled="!isOrderValid"
+                      placeholder: 'Khách hàng',
-                  class="button is-fullwidth is-success"
+                      optionid: activeCart?.customer,
-                >
+                      onOption: (e) => {
-                  Thanh toán
+                        if (e?.id !== activeCart?.customer) changeCustomer(e?.id || null);
-                </button>
+                      },
+                      addon: {
+                        component: 'customer/CustomerQuickAdd',
+                        width: '50%',
+                        height: 'auto',
+                        title: 'Tạo khách hàng',
+                      },
+                    }"
+                  />
+                </div>
+              </div>
+            </div>
+            <div
+              class="card"
+              style="border-bottom: 1px solid var(--bulma-border)"
+            >
+              <div class="card-content">
+                <p class="icon-text fs-16 font-semibold mb-4">
+                  <span class="icon">
+                    <Icon
+                      name="material-symbols:delivery-truck-speed-outline-rounded"
+                      :size="18"
+                    />
+                  </span>
+                  <span>Giao hàng</span>
+                </p>
+                <div class="block">
+                  <SearchBox
+                    v-bind="{
+                      api: 'Delivery_Method',
+                      field: 'name',
+                      column: ['name'],
+                      first: true,
+                      placeholder: 'Phương thức giao hàng',
+                      disabled: !activeCart?.customer,
+                      optionid: orderInfo.deliveryMethod?.id,
+                      onOption: (e) => (orderInfo.deliveryMethod = e),
+                    }"
+                  />
+                </div>
+                <template v-if="orderInfo.deliveryMethod?.code === 'HOME_DELIVERY'">
+                  <div v-if="activeCart.customer">
+                    <div class="block">
+                      <p class="mb-2">Thông tin người nhận</p>
+                      <div v-if="activeCart.customer">
+                        <div class="field">
+                          <label class="label is-small">Tên</label>
+                          <p class="control">
+                            <input
+                              class="input is-small"
+                              type="email"
+                              :value="activeCart.customer__fullname"
+                              placeholder="Name"
+                              disabled
+                            />
+                          </p>
+                        </div>
+                        <div>
+                          <label class="label is-small">SĐT</label>
+                          <p class="control">
+                            <input
+                              class="input is-small"
+                              type="email"
+                              :value="activeCart.customer__phone"
+                              placeholder="Phone"
+                              disabled
+                            />
+                          </p>
+                        </div>
+                      </div>
+                    </div>
+                    <hr />
+                    <div class="block">
+                      <p class="mb-2">Địa chỉ giao hàng</p>
+                      <div v-if="addresses.length > 0">
+                        <Address
+                          v-for="address in addresses"
+                          :key="address"
+                          :address="address"
+                          :selected="orderInfo.address?.id === address.id"
+                          @selectAddress="orderInfo.address = $event"
+                          @submit="getAddresses"
+                        />
+                      </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"
+                        >
+                          <span class="icon">
+                            <Icon
+                              name="material-symbols:add-home-work-outline-rounded"
+                              :size="18"
+                            />
+                          </span>
+                          <span>Thêm địa chỉ</span>
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                  <p
+                    v-else
+                    class="has-text-grey-70 py-4 has-text-centered"
+                  >
+                    Chưa chọn khách hàng
+                  </p>
+                </template>
+              </div>
+            </div>
+            <div
+              class="card"
+              style="border-bottom: 1px solid var(--bulma-border)"
+            >
+              <div class="card-content">
+                <p class="icon-text fs-16 font-semibold mb-4">
+                  <span class="icon">
+                    <Icon
+                      name="material-symbols:credit-card-outline"
+                      :size="18"
+                    />
+                  </span>
+                  <span>Thanh toán</span>
+                </p>
+                <div>
+                  <SearchBox
+                    v-bind="{
+                      api: 'Payment_Method',
+                      field: 'name',
+                      column: ['name'],
+                      first: true,
+                      placeholder: 'Phương thức thanh toán',
+                      disabled: !activeCart?.customer,
+                      optionid: orderInfo.paymentMethod?.id,
+                      onOption: (e) => (orderInfo.paymentMethod = e),
+                    }"
+                  />
+                </div>
+              </div>
+            </div>
+            <div class="card">
+              <div class="card-content">
+                <p class="icon-text fs-16 font-semibold mb-4">Tổng cộng</p>
+                <div>
+                  <table class="table is-fullwidth fs-13">
+                    <tbody>
+                      <tr>
+                        <td>
+                          <span>Tạm tính</span>
+                          <span> ({{ activeCartItems?.length || 0 }} sản phẩm)</span>
+                        </td>
+                        <td class="has-text-right">{{ $formatNum(subtotal, { hasUnit: true }) }}</td>
+                      </tr>
+                      <tr>
+                        <td class="font-bold fs-14">Tổng cộng</td>
+                        <td class="has-text-right has-text-success-35 font-bold fs-17">
+                          {{ $formatNum(subtotal, { hasUnit: true }) }}
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                  <button
+                    @click="openConfirmModal"
+                    :disabled="!isOrderValid"
+                    class="button is-fullwidth is-success"
+                  >
+                    Thanh toán
+                  </button>
+                </div>
               </div>
             </div>
           </div>
         </div>
       </div>
+    </template>
+    <div
+      v-else
+      class="is-flex-grow-1 is-flex is-justify-content-center"
+    >
+      <div
+        v-if="isPending"
+        class="is-flex is-justify-content-center is-align-items-center"
+      >
+        <Icon
+          name="svg-spinners:180-ring-with-bg"
+          :size="30"
+          class="has-text-primary"
+        />
+      </div>
+      <div
+        v-else
+        class="is-flex is-flex-direction-column is-align-items-center is-gap-2 mt-40"
+      >
+        <Icon
+          name="material-symbols:shopping-cart-outline-rounded"
+          :size="40"
+          class="has-text-grey-80"
+        />
+        <p class="has-text-grey-60 fs-17">Chưa có giỏ hàng nào</p>
+        <button
+          @click="
+            async () => {
+              const newCart = await $insertapi('Cart', { notify: false });
+              activeCartId = newCart.id;
+              getCarts();
+            }
+          "
+          class="button is-primary"
+        >
+          <span class="icon">
+            <Icon
+              name="material-symbols:add-rounded"
+              :size="18"
+            />
+          </span>
+          <span>Tạo giỏ hàng</span>
+        </button>
+      </div>
     </div>
     <Modal
       v-if="showModal"

app/pages/index.vue

@@ -4,7 +4,7 @@
   </Transition>
   <ClientOnly v-if="$store.ready">
     <TopMenu @changeTab="changeTab" />
-    <main>
+    <main class="is-flex-grow-1 is-flex is-flex-direction-column">
       <div
         class="mb-2 is-flex is-justify-content-space-between is-align-items-center is-gap-1"
         v-if="tab"

app/plugins/01-common.js

@@ -530,102 +530,6 @@ export default defineNuxtPlugin((nuxtApp) => {
     return result;
   };
 
-  const numberToVietnameseCurrency = (amount) => {
-    if (amount === null || amount === undefined || amount === "") return "";
-
-    amount = Number(amount);
-    if (isNaN(amount)) return "";
-
-    const units = ["", "một", "hai", "ba", "bốn", "năm", "sáu", "bảy", "tám", "chín"];
-    const scales = ["", "nghìn", "triệu", "tỷ"];
-
-    function readThreeDigits(num) {
-      let result = "";
-      const hundred = Math.floor(num / 100);
-      const ten = Math.floor((num % 100) / 10);
-      const unit = num % 10;
-
-      if (hundred > 0) {
-        result += units[hundred] + " trăm";
-        if (ten === 0 && unit > 0) result += " lẻ";
-      }
-
-      if (ten > 1) {
-        result += " " + units[ten] + " mươi";
-        if (unit === 1) result += " mốt";
-        else if (unit === 5) result += " lăm";
-        else if (unit > 0) result += " " + units[unit];
-      } else if (ten === 1) {
-        result += " mười";
-        if (unit === 5) result += " lăm";
-        else if (unit > 0) result += " " + units[unit];
-      } else if (ten === 0 && unit > 0 && hundred === 0) {
-        result += units[unit];
-      }
-
-      return result.trim();
-    }
-
-    let text = "";
-    let scaleIndex = 0;
-
-    while (amount > 0) {
-      const chunk = amount % 1000;
-      if (chunk > 0) {
-        text = `${readThreeDigits(chunk)} ${scales[scaleIndex]} ${text}`;
-      }
-      amount = Math.floor(amount / 1000);
-      scaleIndex++;
-    }
-
-    text = text.trim();
-    text = text.charAt(0).toUpperCase() + text.slice(1);
-
-    return text;
-  };
-
-  const getFirstAndLastName = (fullName, showDots) => {
-    if (!fullName) return "";
-
-    var parts = fullName.trim().replace(/\s+/g, " ").split(" ");
-
-    if (parts.length === 1) return parts[0];
-
-    var first = parts[0];
-    var last = parts[parts.length - 1];
-
-    return showDots ? first + "..." + last : first + " " + last;
-  };
-
-  const paymentQR = (content = "", bankCode = "MB", amount = 0) => {
-    const listBanks = [
-      {
-        bank: {
-          code: "MB",
-          name: "MB Bank",
-        },
-        account: {
-          number: "146768686868",
-          name: "CONG TY CO PHAN BAT DONG SAN UTOPIA",
-        },
-        content: "Thanh toán hóa đơn",
-      },
-    ];
-
-    let bankInfo = listBanks.find(
-      (item) => item.bank.code && bankCode && item.bank.code.toLowerCase() === bankCode.toLowerCase(),
-    );
-
-    if (!bankInfo) return;
-
-    const params = new URLSearchParams({
-      addInfo: content || bankInfo.content,
-      accountName: bankInfo.account.name || "",
-      amount: amount || 0,
-    });
-    return `https://img.vietqr.io/image/${bankInfo.bank.code}-${bankInfo.account.number}-print.png?${params.toString()}`;
-  };
-
   function shortenCurrency(amount) {
     return new Intl.NumberFormat("en", { notation: "compact" }).format(Number(amount));
   }
@@ -654,10 +558,7 @@ export default defineNuxtPlugin((nuxtApp) => {
       lang,
       formatFileSize,
       numberToVietnamese,
-      numberToVietnameseCurrency,
       formatDateVN,
-      getFirstAndLastName,
-      paymentQR,
       shortenCurrency,
     },
   };

app/plugins/04-components.js

@@ -36,7 +36,7 @@ import Inventory from "~/components/inventory/Inventory.vue";
 import Rights from "~/components/rights/Rights.vue";
 import POS from "~/components/pos/POS.vue";
 import ChooseIMEIButton from "~/components/pos/ChooseIMEIButton.vue";
-import EditAddress from "~/components/pos/EditAddress.vue";
+import AddressForm from "~/components/pos/AddressForm.vue";
 import CreateReceipts from "~/components/receipts/CreateReceipts.vue";
 import Return from "~/components/receipts/Return.vue";
 import Imports from "~/components/imports/Imports.vue";
@@ -111,7 +111,7 @@ const components = {
   Rights,
   POS,
   ChooseIMEIButton,
-  EditAddress,
+  AddressForm,
   CreateReceipts,
   Return,
   Imports,

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__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__code,imei_sold,price,status,note,deleted,create_time,update_time",
     },
   },
   {
@@ -648,6 +648,12 @@ export default /** @type {const} */ ([
     url_detail: "data-detail/Payment_Method/",
     params: {},
   },
+  {
+    name: "Payment_Record",
+    url: "data/Payment_Record/",
+    url_detail: "data-detail/Payment_Record/",
+    params: {},
+  },
   {
     name: "Customer_Address",
     url: "data/Customer_Address/",
@@ -685,6 +691,12 @@ export default /** @type {const} */ ([
         "id,code,cart,imei,quantity,status,total_price,deleted,create_time,update_time,imei__code,imei__imei,imei__variant,imei__variant,imei__variant__code,imei__variant__product,imei__variant__product__code,imei__variant__product__name,imei__variant__product__manufacturer,imei__variant__product__os,imei__variant__product__battery,imei__variant__product__screen,imei__variant__product__cpu,imei__variant__product__gpu,imei__variant__product__camera_system,imei__variant__product__sim,imei__variant__product__network_technology,imei__variant__product__charging_technology,imei__variant__product__external_storage,imei__variant__product__ip_rating,imei__variant__product__design,imei__variant__product__creator,imei__variant__product__updater,imei__variant__product__deleted,imei__variant__color,imei__variant__color__code,imei__variant__color__name,imei__variant__color__hex_code,imei__variant__color__deleted,imei__variant__ram,imei__variant__ram__code,imei__variant__ram__capacity,imei__variant__ram__deleted,imei__variant__internal_storage,imei__variant__internal_storage__code,imei__variant__internal_storage__capacity,imei__variant__internal_storage__deleted,imei__variant__image,imei__variant__image__code,imei__variant__image__name,imei__variant__image__path,imei__variant__image__is_active,imei__variant__image__deleted,imei__variant__image__create_time,imei__variant__price,imei__variant__note,imei__variant__creator,imei__variant__updater,imei__variant__deleted,imei__variant__create_time,imei__variant__update_time,imei__deleted,imei__create_time,imei__update_time",
     },
   },
+  {
+    name: "Staff",
+    url: "data/Staff/",
+    url_detail: "data-detail/Staff/",
+    params: {},
+  },
 ]);
 
 /**

nuxt.config.ts

@@ -11,9 +11,12 @@ export default defineNuxtConfig({
       script: [{ src: "/js/html2pdf.bundle.min.js" }, { src: "/js/html2canvas.min.js" }],
       htmlAttrs: {
         lang: "vi",
-        class: "theme-light has-background-blue-100 min-h-dvh",
+        class: "theme-light has-background-blue-100",
       },
     },
+    rootAttrs: {
+      class: 'min-h-dvh is-flex is-flex-direction-column'
+    }
   },
   modules: ["@pinia/nuxt", "pinia-plugin-persistedstate/nuxt", "@nuxt/image", "nuxt-qrcode", "@nuxt/icon"],
   compatibilityDate: "2026-06-01",