From d0b12dc647236bd69aa1ca91a33ca64d9a4bd908 Mon Sep 17 00:00:00 2001
From: Viet An <tiktaktictac269@gmail.com>
Date: Wed, 10 Jun 2026 15:39:58 +0700
Subject: [PATCH] changes

---
 app/components/SearchBox.vue           |   2 +-
 app/components/datatable/DataTable.vue |   5 +-
 app/components/dialog/Confirm.vue      |   2 +-
 app/components/dialog/Error.vue        |  49 ++----
 app/components/pos/CartItem.vue        |   9 +-
 app/components/pos/ChooseIMEIModal.vue |   9 +-
 app/components/pos/ConfirmOrder.vue    | 154 ++++++++++++++-----
 app/components/pos/POS.vue             | 198 +++++++++++++++----------
 app/components/pos/ProductCard.vue     |  54 -------
 app/plugins/02-connection.js           |  17 ++-
 app/utils/apis.js                      |  89 +++--------
 11 files changed, 305 insertions(+), 283 deletions(-)
 delete mode 100644 app/components/pos/ProductCard.vue

diff --git a/app/components/SearchBox.vue b/app/components/SearchBox.vue
index 012db5f..67e3c2a 100644
--- a/app/components/SearchBox.vue
+++ b/app/components/SearchBox.vue
@@ -148,7 +148,7 @@ const props = defineProps({
   field: String,
   column: Array,
   first: Boolean,
-  optionid: String,
+  optionid: Number,
   filter: Object,
   addon: Object,
   viewaddon: Object,
diff --git a/app/components/datatable/DataTable.vue b/app/components/datatable/DataTable.vue
index 56972db..e405f4e 100644
--- a/app/components/datatable/DataTable.vue
+++ b/app/components/datatable/DataTable.vue
@@ -111,7 +111,7 @@
         <tr v-else>
           <td
             :colspan="displayFields.length"
-            class="fs-14 has-text-centered has-text-grey py-4"
+            class="emptyData fs-14 has-text-centered has-text-grey py-4"
           >
             Không tìm thấy kết quả
           </td>
@@ -685,4 +685,7 @@ setTimeout(() => updateShow(), 200);
 .header:hover a {
   opacity: 0.75;
 }
+.table tbody tr:hover .emptyData {
+  background-color: var(--bulma-table-cell-background-color);
+}
 </style>
diff --git a/app/components/dialog/Confirm.vue b/app/components/dialog/Confirm.vue
index 05c6213..3ea9264 100644
--- a/app/components/dialog/Confirm.vue
+++ b/app/components/dialog/Confirm.vue
@@ -20,7 +20,7 @@
           </button>
           <button
             ref="confirmBtn"
-            class="button is-primary has-text-white"
+            class="button is-primary"
             @click="confirm"
           >
             Đồng ý
diff --git a/app/components/dialog/Error.vue b/app/components/dialog/Error.vue
index d7b0edc..e68902f 100644
--- a/app/components/dialog/Error.vue
+++ b/app/components/dialog/Error.vue
@@ -1,3 +1,10 @@
+<script setup>
+const props = defineProps({
+  content: String,
+  duration: Number,
+});
+</script>
+
 <template>
   <div>
     <div class="field is-grouped">
@@ -5,45 +12,15 @@
         class="control is-expanded"
         v-html="content"
       ></div>
-      <div class="control">
-        <Icon
-          name="material-symbols:cancel-rounded"
-          :size="24"
-          class="has-text-danger"
-        />
-      </div>
     </div>
     <div class="mt-3 mb-5"></div>
-    <div class="field is-grouped">
-      <div class="control is-expanded">
-        <button
-          class="button is-danger"
-          @click="cancel()"
-        >
-          Đóng
-        </button>
-      </div>
-      <div
-        v-if="duration"
-        class="control"
+    <div class="buttons is-right">
+      <button
+        class="button is-light"
+        @click="$emit('close')"
       >
-        <CountDown
-          :duration="duration"
-          @close="cancel()"
-        />
-      </div>
+        Đóng
+      </button>
     </div>
   </div>
 </template>
-<script setup>
-const props = defineProps({
-  content: String,
-  duration: Number,
-});
-
-const emit = defineEmits(["close"]);
-
-function cancel() {
-  emit("close");
-}
-</script>
diff --git a/app/components/pos/CartItem.vue b/app/components/pos/CartItem.vue
index 9361c6c..48c581b 100644
--- a/app/components/pos/CartItem.vue
+++ b/app/components/pos/CartItem.vue
@@ -1,9 +1,12 @@
 <script setup>
 const props = defineProps({
   cartItem: Object,
+  deleteable: Boolean,
 });
 const { $deleteapi, $numtoString, $snackbar } = useNuxtApp();
+const { getCart } = inject("pos");
 const showConfirmModal = ref();
+const isDeleting = ref(false);
 
 function openConfirmModal() {
   showConfirmModal.value = {
@@ -17,9 +20,10 @@ function openConfirmModal() {
   };
 }
 
-const getCart = inject("getCart");
 async function removeFromCart() {
+  isDeleting.value = true;
   await $deleteapi("Cart_Item", props.cartItem.id);
+  isDeleting.value = false;
   $snackbar("Đã xoá sản phẩm khỏi giỏ hàng", "Success");
   getCart();
 }
@@ -51,8 +55,9 @@ async function removeFromCart() {
         </p>
       </div>
       <button
+        v-if="deleteable"
         @click="openConfirmModal"
-        class="button is-danger is-light"
+        :class="['button is-danger is-light', isDeleting && 'is-loading']"
       >
         <span class="icon">
           <Icon
diff --git a/app/components/pos/ChooseIMEIModal.vue b/app/components/pos/ChooseIMEIModal.vue
index 7a39790..380793d 100644
--- a/app/components/pos/ChooseIMEIModal.vue
+++ b/app/components/pos/ChooseIMEIModal.vue
@@ -22,8 +22,7 @@ function toggleSelected(imeiRec) {
   }
 }
 
-const cartItems = inject("cartItems");
-const getCart = inject("getCart");
+const { cartItems, getCart } = inject("pos");
 const isAdding = ref(false);
 async function addToCart() {
   try {
@@ -70,10 +69,12 @@ async function fetchImeis() {
   const imeisFetched = await $getdata("IMEI", {
     filter: { variant: props.variant.id },
   });
+  const imeisSoldFetched = await $getdata("IMEI_Sold");
 
   imeis.value = imeisFetched.filter((imeiRec) => {
-    const alreadyInCart = cartItems.value.find((cartItem) => cartItem.imei === imeiRec.id);
-    return !alreadyInCart;
+    const inCart = cartItems.value.find((cartItem) => cartItem.imei === imeiRec.id);
+    const sold = imeisSoldFetched.find((imeiSold) => imeiSold.imei === imeiRec.imei);
+    return !inCart && !sold;
   });
 
   isLoading.value = false;
diff --git a/app/components/pos/ConfirmOrder.vue b/app/components/pos/ConfirmOrder.vue
index 9f143a9..2cd83b8 100644
--- a/app/components/pos/ConfirmOrder.vue
+++ b/app/components/pos/ConfirmOrder.vue
@@ -1,33 +1,84 @@
 <script setup>
-import ProductCard from "~/components/pos/ProductCard.vue";
+import CartItem from "~/components/pos/CartItem.vue";
 
-const props = defineProps({
-  customer: Object,
-  address: Object,
-  paymentMethod: Object,
-});
-
-const { $insertapi } = useNuxtApp();
+const emit = defineEmits(["close"]);
+const { $patchapi, $deleteapi, $insertapi, $dayjs, $snackbar } = useNuxtApp();
 const id = "confirmOrder";
-const store = useStore();
+const isPending = ref(false);
+const { cartItems, orderInfo, getCart } = inject("pos");
+
 const subtotal = computed(() => {
-  return store.selectedImeis.reduce((prev, curr) => prev + curr.variant__price, 0);
+  return cartItems.value?.reduce((prev, curr) => prev + curr.imei__variant__price, 0);
 });
 const shipping_address = computed(() => {
-  return `${props.address.address_detail}, ${props.address.ward}, ${props.address.district}, ${props.address.city}`;
+  return `${orderInfo.value.address.address_detail}, ${orderInfo.value.address.ward}, ${orderInfo.value.address.district}, ${orderInfo.value.address.city}`;
 });
 
 async function createOrder() {
-  const order = await $insertapi("Invoice", {
-    data: {
-      customer: props.customer.id,
-      customer_name: props.customer.fullname,
-      customer_phone: props.customer.phone,
-      customer_email: props.customer.email,
-      shipping_address,
-      product_amount: store.selectedImeis.length,
-    },
-  });
+  try {
+    isPending.value = true;
+    const invoice = await $insertapi("Invoice", {
+      data: {
+        customer: orderInfo.value.customer.id,
+        customer_name: orderInfo.value.customer.fullname,
+        customer_phone: orderInfo.value.customer.phone,
+        customer_email: orderInfo.value.customer.email,
+        shipping_address: shipping_address.value,
+        product_amount: cartItems.value.length,
+        shipping_fee: 0,
+        total_amount: subtotal.value,
+        discount_amount: 0,
+        final_amount: subtotal.value,
+        order_type: "pos",
+        status: "pending",
+        ordered_at: new Date(),
+        paid_at: new Date(),
+        delivery_method: orderInfo.value.deliveryMethod.id,
+      },
+      notify: false,
+    });
+
+    const imeisSoldPayload = cartItems.value.map((cartItem) => ({
+      imei: cartItem.imei__imei,
+      variant: cartItem.imei__variant,
+      sold_date: $dayjs().format("YYYY-MM-DD"),
+    }));
+
+    const imeisSold = await $insertapi("IMEI_Sold", {
+      data: imeisSoldPayload,
+      notify: false,
+    });
+
+    const invoiceDetailPayload = cartItems.value.map((cartItem) => {
+      const imeiSold = imeisSold.find((imeiSold) => imeiSold.imei === cartItem.imei__imei);
+      return {
+        invoice: invoice.id,
+        variant: cartItem.imei__variant,
+        imei_sold: imeiSold.id,
+        price: cartItem.imei__variant__price,
+      };
+    });
+
+    const invoiceDetails = await $insertapi("Invoice_Detail", {
+      data: invoiceDetailPayload,
+      notify: false,
+    });
+
+    $snackbar("Tạo đơn hàng thành công", "Success");
+
+    await Promise.all(cartItems.value.map(({ id }) => $deleteapi("Cart_Item", id)));
+    await $patchapi("Cart", {
+      id: cartItems.value[0].cart,
+      customer: null,
+    });
+    getCart();
+    emit("close");
+  } catch (error) {
+    console.error(error);
+    $snackbar("Tạo đơn hàng không thành công", "Error");
+  } finally {
+    isPending.value = false;
+  }
 }
 </script>
 
@@ -45,11 +96,11 @@ async function createOrder() {
           <span>Khách hàng</span>
         </p>
         <div>
-          <p>{{ props.customer.fullname }}</p>
+          <p>{{ orderInfo.customer.fullname }}</p>
           <p class="is-size-7 has-text-grey">
-            {{ props.customer.phone }}
+            {{ orderInfo.customer.phone }}
             •
-            {{ props.customer.email }}
+            {{ orderInfo.customer.email }}
           </p>
         </div>
       </div>
@@ -63,17 +114,43 @@ async function createOrder() {
               :size="18"
             />
           </span>
-          <span>{{ store.selectedImeis.length }} sản phẩm</span>
+          <span>{{ cartItems.length }} sản phẩm</span>
         </p>
         <div class="is-flex is-flex-direction-column is-gap-1">
-          <ProductCard
-            v-for="imei in store.selectedImeis"
-            :key="imei.id"
-            :imei="imei"
+          <CartItem
+            v-for="cartItem in cartItems"
+            :key="cartItem.id"
+            :cartItem="cartItem"
           />
         </div>
       </div>
     </div>
+    <div class="card">
+      <div class="card-content has-background-primary-100">
+        <p class="icon-text 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>
+          <div v-if="orderInfo.deliveryMethod.code === 'INSTORE_PICKUP'">
+            <p>Nhận tại cửa hàng</p>
+          </div>
+          <div v-else>
+            <p class="font-medium fs-16 mb-0.5">{{ shipping_address }}</p>
+            <p class="has-text-grey">
+              <span>{{ orderInfo.customer.fullname }}</span>
+              <span> • </span>
+              <span>{{ orderInfo.customer.phone }}</span>
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
     <div class="card">
       <div class="card-content has-background-primary-100">
         <p class="icon-text font-semibold mb-2">
@@ -88,14 +165,14 @@ async function createOrder() {
         <div>
           <div class="block is-flex is-justify-content-space-between">
             <span>Phương thức thanh toán</span>
-            <span>{{ props.paymentMethod.name }}</span>
+            <span>{{ orderInfo.paymentMethod.name }}</span>
           </div>
           <table class="table is-fullwidth fs-13">
             <tbody>
               <tr>
                 <td>
                   <span>Tạm tính</span>
-                  <span> ({{ store.selectedImeis.length }} sản phẩm)</span>
+                  <span> ({{ cartItems.length }} sản phẩm)</span>
                 </td>
                 <td class="has-text-right">{{ $numtoString(subtotal, { hasUnit: true }) }}</td>
               </tr>
@@ -110,7 +187,6 @@ async function createOrder() {
         </div>
       </div>
     </div>
-    <pre>{{ props }}</pre>
     <Teleport
       defer
       :to="`.modal-card:has(#${id}) .modal-card-foot`"
@@ -122,11 +198,23 @@ async function createOrder() {
         >
           Huỷ
         </button>
-        <button class="button is-success">Đặt hàng</button>
+        <button
+          @click="createOrder"
+          :class="['button is-success', isPending && 'is-loading']"
+        >
+          <span class="icon">
+            <Icon
+              name="material-symbols:check-rounded"
+              :size="18"
+            />
+          </span>
+          <span>Đặt hàng</span>
+        </button>
       </div>
     </Teleport>
   </div>
 </template>
+
 <style scoped>
 .table {
   background-color: transparent;
diff --git a/app/components/pos/POS.vue b/app/components/pos/POS.vue
index ac917d0..7cc1422 100644
--- a/app/components/pos/POS.vue
+++ b/app/components/pos/POS.vue
@@ -1,35 +1,35 @@
 <script setup>
-import { isNil } from "es-toolkit";
 import Address from "~/components/pos/Address.vue";
 import CartItem from "~/components/pos/CartItem.vue";
 import SearchBox from "~/components/SearchBox.vue";
 
 const store = useStore();
-const { $getdata, $numtoString } = useNuxtApp();
+const { $getdata, $patchapi, $numtoString } = useNuxtApp();
 const cart = ref();
 const cartItems = ref();
+const isUpdating = ref(false);
 
 async function getCart() {
-  console.count("getCart");
-  const cartFetched = await $getdata("Cart", {
-    filter: { customer: store.customer },
-    first: true,
-  });
-  cart.value = cartFetched;
+  try {
+    isUpdating.value = true;
+    const cartFetched = await $getdata("Cart", {
+      first: true,
+    });
+    cart.value = cartFetched;
 
-  const cartItemsFetched = await $getdata("Cart_Item", {
-    filter: {
-      cart: cartFetched.id,
-    },
-  });
-  cartItems.value = cartItemsFetched;
-
-  console.log("cartFetched", cartFetched);
-  console.log("cartItemsFetched", cartItemsFetched);
+    const cartItemsFetched = await $getdata("Cart_Item", {
+      filter: {
+        cart: cartFetched.id,
+      },
+    });
+    cartItems.value = cartItemsFetched;
+  } catch (error) {
+    console.error(error);
+  } finally {
+    isUpdating.value = false;
+  }
 }
 
-provide("cartItems", cartItems);
-provide("getCart", getCart);
 onMounted(getCart);
 
 const showProductSelectionModal = ref();
@@ -50,8 +50,7 @@ const orderInfo = ref({
 });
 const addresses = ref([]);
 const subtotal = computed(() => {
-  return 0;
-  // return store.selectedImeis.reduce((prev, curr) => prev + curr.variant__price, 0);
+  return cartItems.value?.reduce((prev, curr) => prev + curr.imei__variant__price, 0);
 });
 
 async function getAddresses() {
@@ -63,6 +62,12 @@ async function getAddresses() {
 watch(
   () => orderInfo.value.customer,
   async (newVal, oldVal) => {
+    const updatedCart = await $patchapi("Cart", {
+      id: cart.value.id,
+      customer: newVal?.id,
+    });
+    getCart();
+
     if (newVal) {
       await getAddresses();
       if (oldVal === null || oldVal.id !== newVal.id) {
@@ -76,16 +81,41 @@ watch(
   },
 );
 
+watch(
+  () => orderInfo.value.deliveryMethod,
+  (newVal) => {
+    if (newVal?.code === "HOME_DELIVERY") {
+      const defaultAddress = addresses.value.find((add) => add.is_default);
+      orderInfo.value.address = defaultAddress;
+    }
+  },
+);
+
+const isOrderValid = computed(() => {
+  if (cartItems.value?.length === 0) return false;
+  if (!orderInfo.value.customer) return false;
+  if (!orderInfo.value.deliveryMethod) return false;
+  if (!orderInfo.value.paymentMethod) return false;
+  if (orderInfo.value.deliveryMethod.code === "HOME_DELIVERY" && !orderInfo.value.address) return false;
+
+  return true;
+});
+
 const showConfirmModal = ref();
 function openConfirmModal() {
   showConfirmModal.value = {
     component: "pos/ConfirmOrder",
     title: "Xác nhận đơn hàng",
     width: "60%",
-    height: "auto",
-    vbind: orderInfo.value,
+    height: "400px",
   };
 }
+
+provide("pos", {
+  cartItems,
+  orderInfo,
+  getCart,
+});
 </script>
 
 <template>
@@ -104,6 +134,16 @@ function openConfirmModal() {
                     />
                   </span>
                   <span>Giỏ hàng</span>
+                  <span
+                    v-if="isUpdating"
+                    class="icon"
+                  >
+                    <Icon
+                      name="svg-spinners:180-ring-with-bg"
+                      :size="18"
+                      class="has-text-primary"
+                    />
+                  </span>
                 </p>
                 <button
                   @click="openProductSelectionModal"
@@ -119,20 +159,21 @@ function openConfirmModal() {
                 </button>
               </div>
               <div
-                v-if="cartItems"
+                v-if="cartItems?.length > 0"
                 class="is-flex is-flex-direction-column is-gap-1"
               >
                 <CartItem
                   v-for="cartItem in cartItems"
                   :key="cartItem.id"
                   :cartItem="cartItem"
+                  deleteable
                 />
               </div>
               <p
                 v-else
                 class="py-4 fs-16 has-text-centered has-text-grey"
               >
-                Không có sản phẩm nào trong giỏ hàng
+                Không có sản phẩm nào trong giỏ hàng.
               </p>
             </div>
           </div>
@@ -156,6 +197,7 @@ function openConfirmModal() {
                     field: 'label',
                     column: ['label'],
                     first: true,
+                    optionid: cart?.customer,
                     placeholder: 'Khách hàng',
                     onOption: (e) => (orderInfo.customer = e),
                     addon: {
@@ -180,7 +222,7 @@ function openConfirmModal() {
                 </span>
                 <span>Giao hàng</span>
               </p>
-              <div>
+              <div class="block">
                 <SearchBox
                   v-bind="{
                     api: 'Delivery_Method',
@@ -192,57 +234,62 @@ function openConfirmModal() {
                   }"
                 />
               </div>
-              <div v-if="orderInfo.customer">
-                <div class="block">
-                  <p class="mb-2">Thông tin người nhận</p>
-                  <div v-if="orderInfo.customer">
-                    <div class="field">
-                      <label class="label is-small">Tên</label>
-                      <p class="control">
-                        <input
-                          class="input is-small"
-                          type="email"
-                          :value="orderInfo.customer.fullname"
-                          placeholder="Name"
-                          disabled
-                        />
-                      </p>
+              <template v-if="orderInfo.deliveryMethod?.code === 'HOME_DELIVERY'">
+                <div v-if="orderInfo.customer">
+                  <div class="block">
+                    <p class="mb-2">Thông tin người nhận</p>
+                    <div v-if="orderInfo.customer">
+                      <div class="field">
+                        <label class="label is-small">Tên</label>
+                        <p class="control">
+                          <input
+                            class="input is-small"
+                            type="email"
+                            :value="orderInfo.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="orderInfo.customer?.phone"
+                            placeholder="Phone"
+                            disabled
+                          />
+                        </p>
+                      </div>
                     </div>
-                    <div>
-                      <label class="label is-small">SĐT</label>
-                      <p class="control">
-                        <input
-                          class="input is-small"
-                          type="email"
-                          :value="orderInfo.customer?.phone"
-                          placeholder="Phone"
-                          disabled
-                        />
-                      </p>
+                  </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>
+                    <div v-else>
+                      <p class="has-text-grey has-text-centered p-4">Khách hàng chưa có địa chỉ</p>
                     </div>
                   </div>
                 </div>
-                <hr />
-                <div class="block">
-                  <p class="mb-2">Địa chỉ giao hàng</p>
-                  <div>
-                    <Address
-                      v-for="address in addresses"
-                      :key="address"
-                      :address="address"
-                      :selected="orderInfo.address?.id === address.id"
-                      @selectAddress="orderInfo.address = $event"
-                      @update="getAddresses"
-                    />
-                  </div>
-                </div>
-              </div>
-              <p
-                v-else-if="orderInfo.deliveryMethod?.code === 'HOME_DELIVERY'"
-                class="has-text-grey-light py-4 has-text-centered"
-              >
-                Chưa chọn khách hàng
-              </p>
+                <p
+                  v-else
+                  class="has-text-grey-light py-4 has-text-centered"
+                >
+                  Chưa chọn khách hàng
+                </p>
+              </template>
             </div>
           </div>
           <div class="card">
@@ -279,8 +326,7 @@ function openConfirmModal() {
                     <tr>
                       <td>
                         <span>Tạm tính</span>
-                        <span> ({{ 0 }} sản phẩm)</span>
-                        <!-- <span> ({{ store.selectedImeis.length }} sản phẩm)</span> -->
+                        <span> ({{ cartItems?.length || 0 }} sản phẩm)</span>
                       </td>
                       <td class="has-text-right">{{ $numtoString(subtotal, { hasUnit: true }) }}</td>
                     </tr>
@@ -294,8 +340,8 @@ function openConfirmModal() {
                 </table>
                 <button
                   @click="openConfirmModal"
+                  :disabled="!isOrderValid"
                   class="button is-fullwidth is-success"
-                  :disabled="Object.values(orderInfo).some(isNil)"
                 >
                   Thanh toán
                 </button>
diff --git a/app/components/pos/ProductCard.vue b/app/components/pos/ProductCard.vue
deleted file mode 100644
index 9edee3f..0000000
--- a/app/components/pos/ProductCard.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<script setup>
-import { remove } from "es-toolkit";
-
-const props = defineProps({
-  imei: Object,
-  deleteable: Boolean,
-});
-const { $numtoString, $snackbar } = useNuxtApp();
-const store = useStore();
-function removeFromCart() {
-  remove(store.selectedImeis, (imeiRec) => imeiRec.id === props.imei.id);
-  $snackbar("Đã xoá sản phẩm khỏi giỏ hàng", "Success");
-}
-</script>
-
-<template>
-  <div class="card m-0">
-    <div class="card-content p-4 is-flex is-gap-2 is-justify-content-space-between is-align-items-center">
-      <div class="is-flex is-gap-4 is-justify-content-space-between is-align-items-center is-flex-grow-1">
-        <div class="media m-0">
-          <div class="media-left">
-            <figure class="image is-48x48">
-              <img :src="imei.variant__image__path" />
-            </figure>
-          </div>
-          <div class="media-content">
-            <p class="font-semibold fs-15">{{ imei.variant__product__name }}</p>
-            <p class="fs-13 has-text-grey">
-              <span>{{ imei.variant__ram__code }}</span>
-              <span> • </span>
-              <span>{{ imei.variant__internal_storage__code }}</span>
-              <span> • </span>
-              <span>{{ imei.variant__color__name }}</span>
-            </p>
-          </div>
-        </div>
-        <p class="has-text-primary-50 font-medium">{{ $numtoString(imei.variant__price, { hasUnit: true }) }}</p>
-      </div>
-      <div v-if="deleteable">
-        <button
-          @click="removeFromCart"
-          class="button is-danger is-light"
-        >
-          <span class="icon">
-            <Icon
-              name="material-symbols:delete-outline-rounded"
-              :size="18"
-            />
-          </span>
-        </button>
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/app/plugins/02-connection.js b/app/plugins/02-connection.js
index d341625..eb27c64 100644
--- a/app/plugins/02-connection.js
+++ b/app/plugins/02-connection.js
@@ -21,7 +21,7 @@ export default defineNuxtPlugin((nuxtApp) => {
   };
 
   /**
-   * @param {ApiName | ApiName[]} apiNames
+   * @param {ApiName | ApiName[]} name
    */
   const findapi = function (name) {
     const result = Array.isArray(name)
@@ -322,19 +322,20 @@ export default defineNuxtPlugin((nuxtApp) => {
    */
   const deleteapi = async function (name, id) {
     try {
-      const found = findapi(name);
+      const api = findapi(name);
       let rs;
       if (!Array.isArray(id)) {
-        rs = await $fetch(`${path}${found.url_detail}${id}`, {
+        rs = await $fetch(`${path}${api.url_detail}${id}`, {
           method: "delete",
         });
       } else {
-        rs = await $fetch(`${path}import-data/${found.url.substring(5, found.url.length - 1)}/`, id, {
+        rs = await $fetch(`${path}import-data/${api.url.substring(5, api.url.length - 1)}/`, {
           params: { action: "delete" },
+          body: id.map((id) => ({ id })),
         });
       }
-      if (found.commit) {
-        const copy = $copy($store[found.commit]);
+      if (api.commit) {
+        const copy = $copy($store[api.commit]);
         if (!Array.isArray(id)) {
           const index = copy.findIndex((v) => v.id === id);
           if (index >= 0) $remove(copy, index);
@@ -344,13 +345,13 @@ export default defineNuxtPlugin((nuxtApp) => {
             if (index >= 0) $remove(copy, index);
           });
         }
-        $store.commit(found.name, copy);
+        $store.commit(api.name, copy);
       }
       return id;
     } catch (err) {
       console.error(err);
       if (err.response) {
-        let content = `<span>Đã xảy ra lỗi, xóa dữ liệu không thành công</span>`;
+        let content = `<p>Đã xảy ra lỗi, xóa dữ liệu không thành công.</p>`;
         if (err.response.data)
           content += `<p class="mt-2 has-text-grey-dark"> 
           <sapn class="icon-text">Chi tiết<SvgIcon class="ml-1" v-bind="{name: 'right.svg', type: 'dark', size: 20}"></SvgIcon></span></p>
diff --git a/app/utils/apis.js b/app/utils/apis.js
index 4bb168e..ba1494f 100644
--- a/app/utils/apis.js
+++ b/app/utils/apis.js
@@ -1,17 +1,21 @@
 export default /** @type {const} */ ([
   { name: "sendemail", url: "send-email/" },
-  { name: "deleteentry", url: "delete-entry/" },
-  { name: "emailpreview", url: "email-preview/" },
+  { name: "sendemail", url: "send-email/", path: "etl", params: {} },
+  { name: "sendemailnow", url: "send-email-now/", path: "etl", params: {} },
+  { name: "findkey", url: "find-key/", params: {} },
   { name: "workflow", url: "workflow/execute/" },
-  { name: "accountentry", url: "account-entry/", params: {} },
-  { name: "accountmultientry", url: "account-multi-entry/", params: {} },
+  { name: "emailpreview", url: "email-preview/" },
   { name: "modelfields", url: "model-fields/", params: {} },
   { name: "readexcel", url: "read-excel/", params: {} },
-  { name: "findkey", url: "find-key/", params: {} },
+  { name: "exportcsv", url: "exportcsv/", params: {} },
+  { name: "authtoken", url: "auth-token/", params: {} },
+  { name: "upload", url: "upload/", params: {} },
   { name: "getcodeCustomer", url: "increment/Customer/KH/", params: {} },
   { name: "getcodepeople", url: "increment/People/RE/", params: {} },
   { name: "getcodecompany", url: "increment/Company/CP/", params: {} },
-  { name: "exportcsv", url: "exportcsv/", params: {} },
+  { name: "deleteentry", url: "delete-entry/" },
+  { name: "accountentry", url: "account-entry/", params: {} },
+  { name: "accountmultientry", url: "account-multi-entry/", params: {} },
   {
     name: "importsetting",
     url: "data/Import_Setting/",
@@ -44,21 +48,6 @@ export default /** @type {const} */ ([
       values: "id,code,name,create_time",
     },
   },
-  {
-    name: "people",
-    url: "data/People/",
-    url_detail: "data-detail/People/",
-    params: {
-      sort: "-id",
-      values:
-        "id,issued_place,issued_place__code,issued_place__name,contact_address,address,country__name,company__fullname,legal_code,company,country,email,creator,code,fullname,dob,sex,legal_code,sex__name,phone,issued_date,legal_type,legal_type__name,address,note,updater,updater__fullname,create_time,update_time",
-      distinct_values: {
-        label: { type: "Concat", field: ["code", "fullname", "phone"] },
-        order: { type: "RowNumber" },
-      },
-      summary: "annotate",
-    },
-  },
   {
     name: "currency",
     url: "data/Currency/",
@@ -150,7 +139,6 @@ export default /** @type {const} */ ([
       sort: "-id",
     },
   },
-  { name: "authtoken", url: "auth-token/", params: {} },
   {
     name: "notification",
     commit: "updateNotification",
@@ -168,29 +156,6 @@ export default /** @type {const} */ ([
     url_detail: "data-detail/Common/",
     params: { sort: "index" },
   },
-  { name: "upload", url: "upload/", params: {} },
-  {
-    name: "paymentstatus",
-    url: "data/Payment_Status/",
-    url_detail: "data-detail/Payment_Status/",
-    params: {
-      values: "id,code,name,en,index,create_time",
-    },
-  },
-  {
-    name: "paymenttype",
-    url: "data/Payment_Type/",
-    url_detail: "data-detail/Payment_Type/",
-    params: {
-      values: "id,code,name,en,index,create_time",
-    },
-  },
-  {
-    name: "paymentmethod",
-    url: "data/Payment_Method/",
-    url_detail: "data-detail/Payment_Method/",
-    params: {},
-  },
   {
     name: "request",
     url: "data/Request/",
@@ -203,8 +168,6 @@ export default /** @type {const} */ ([
     url_detail: "data-detail/Register/",
     params: {},
   },
-  { name: "sendemail", url: "send-email/", path: "etl", params: {} },
-  { name: "sendemailnow", url: "send-email-now/", path: "etl", params: {} },
   {
     name: "usersession",
     url: "data/User_Session/",
@@ -223,7 +186,6 @@ export default /** @type {const} */ ([
     url_detail: "data-detail/User_Setting/",
     params: {},
   },
-  { name: "account-entry", url: "/account-entry/", params: {} },
   {
     name: "valuetype",
     url: "data/Value_Type/",
@@ -456,12 +418,6 @@ export default /** @type {const} */ ([
     url_detail: "data-detail/Customer_Type/",
     params: { values: "id,code,name,create_time" },
   },
-  {
-    name: "peoplefile",
-    url: "data/People_File/",
-    url_detail: "data-detail/People_File/",
-    params: { values: "id,ref,file,file__name,file__file" },
-  },
   {
     name: "relation",
     commit: "relation",
@@ -519,12 +475,6 @@ export default /** @type {const} */ ([
     url_detail: "data-detail/Discount_Method/",
     params: { sort: "-id" },
   },
-  {
-    name: "emailtemplate",
-    url: "data/Email_Template/",
-    url_detail: "data-detail/Email_Template/",
-    params: { values: "id,name,content,create_time,update_time" },
-  },
   {
     name: "gift",
     commit: "gift",
@@ -532,19 +482,18 @@ export default /** @type {const} */ ([
     url_detail: "data-detail/Gift/",
     params: { sort: "-id" },
   },
-  {
-    name: "transactiongift",
-    commit: "transactiongift",
-    url: "data/Transaction_Gift/",
-    url_detail: "data-detail/Transaction_Gift/",
-    params: {},
-  },
   {
     name: "Invoice",
     url: "data/Invoice/",
     url_detail: "data-detail/Invoice/",
     params: {},
   },
+  {
+    name: "Invoice_Detail",
+    url: "data/Invoice_Detail/",
+    url_detail: "data-detail/Invoice_Detail/",
+    params: {},
+  },
   {
     name: "Manufacturer",
     url: "data/Manufacturer/",
@@ -675,6 +624,12 @@ export default /** @type {const} */ ([
         "id,code,imei,variant,variant,variant__code,variant__product,variant__product__code,variant__product__name,variant__product__manufacturer,variant__product__os,variant__product__battery,variant__product__screen,variant__product__cpu,variant__product__gpu,variant__product__camera_system,variant__product__sim,variant__product__network_technology,variant__product__charging_technology,variant__product__external_storage,variant__product__ip_rating,variant__product__design,variant__product__creator,variant__product__updater,variant__product__deleted,variant__color,variant__color__code,variant__color__name,variant__color__hex_code,variant__color__deleted,variant__ram,variant__ram__code,variant__ram__capacity,variant__ram__deleted,variant__internal_storage,variant__internal_storage__code,variant__internal_storage__capacity,variant__internal_storage__deleted,variant__image,variant__image__code,variant__image__name,variant__image__path,variant__image__is_active,variant__image__deleted,variant__image__create_time,variant__price,variant__note,variant__creator,variant__updater,variant__deleted,variant__create_time,variant__update_time,deleted,create_time,update_time",
     },
   },
+  {
+    name: "IMEI_Sold",
+    url: "data/IMEI_Sold/",
+    url_detail: "data-detail/IMEI_Sold/",
+    params: {},
+  },
   {
     name: "Product_Image",
     url: "data/Product_Image/",