From e9e4fbe24fba90944adcbcb982c2ed3af3da16b5 Mon Sep 17 00:00:00 2001
From: Viet An <tiktaktictac269@gmail.com>
Date: Tue, 30 Jun 2026 15:12:04 +0700
Subject: [PATCH] changes

---
 app/components/datatable/NewField.vue         |  2 +-
 app/components/datepicker/PickDay.vue         |  2 +-
 app/components/inventory/InventoryRow.vue     |  8 +-
 app/components/inventory/InventoryTable.vue   |  8 +-
 app/components/inventory/SelectedInvItem.vue  |  8 +-
 app/components/orders/OrdersKanban.vue        |  2 +-
 app/components/pos/CartItem.vue               |  6 +-
 app/components/pos/CartTabs.vue               | 10 ++-
 app/components/pos/ChooseIMEIModal.vue        |  7 +-
 app/components/pos/ConfirmOrder.vue           | 18 ++--
 app/components/pos/POS.vue                    | 42 ++--------
 app/components/pos/VietQR.vue                 |  2 +-
 .../pos/composables/useActiveCart.js          | 22 +----
 app/components/pos/composables/useCartData.js | 22 -----
 app/components/pos/composables/useCustomer.js | 24 ------
 .../pos/composables/useOrderInfo.js           | 19 ++---
 .../pos/composables/usePlaceOrder.js          | 23 +++---
 app/stores/usePosStore.js                     | 82 +++++++++++++++++++
 18 files changed, 149 insertions(+), 158 deletions(-)
 delete mode 100644 app/components/pos/composables/useCartData.js
 delete mode 100644 app/components/pos/composables/useCustomer.js
 create mode 100644 app/stores/usePosStore.js

diff --git a/app/components/datatable/NewField.vue b/app/components/datatable/NewField.vue
index 3c478d2..a023d45 100644
--- a/app/components/datatable/NewField.vue
+++ b/app/components/datatable/NewField.vue
@@ -30,7 +30,7 @@
         {{ v.name }}
       </label>
     </div>
-    <div class="has-background-white-100 mt-3 p-3 rounded-md">
+    <div class="has-background-grey-100 mt-3 p-3 rounded-md">
       <div
         class="tags mb-0"
         v-if="choice === 'function'"
diff --git a/app/components/datepicker/PickDay.vue b/app/components/datepicker/PickDay.vue
index 354ddf8..0a46efd 100644
--- a/app/components/datepicker/PickDay.vue
+++ b/app/components/datepicker/PickDay.vue
@@ -68,7 +68,7 @@
       </div>
     </div>
     <div v-if="type === 'days'">
-      <div class="fixed-grid has-7-cols mb-1 fs-12 font-medium has-background-white-100 has-text-grey rounded-full">
+      <div class="fixed-grid has-7-cols mb-1 fs-12 font-medium has-background-grey-100 has-text-grey rounded-full">
         <div class="grid is-gap-0">
           <p
             v-for="(m, h) in dateOfWeek"
diff --git a/app/components/inventory/InventoryRow.vue b/app/components/inventory/InventoryRow.vue
index 8440bd0..298803f 100644
--- a/app/components/inventory/InventoryRow.vue
+++ b/app/components/inventory/InventoryRow.vue
@@ -19,16 +19,16 @@ const { $dayjs } = useNuxtApp();
         <p class="fs-12 has-text-grey">{{ invItem.category }}</p>
       </div>
     </td>
-    <td class="is-family-monospace fs-12">{{ invItem.sku }}</td>
+    <!-- <td class="is-family-monospace fs-12">{{ invItem.sku }}</td>
     <td>{{ invItem.storage }}</td>
-    <td class="is-family-monospace fs-12">{{ invItem.storage__position }}</td>
+    <td class="is-family-monospace fs-12">{{ invItem.storage__position }}</td> -->
     <td class="has-text-right">{{ invItem.stock }}</td>
     <td class="has-text-right">{{ invItem.preorder }}</td>
     <td :class="['has-text-right', invItem.status === 'OK' ? 'has-text-success-30' : 'has-text-warning-30']">
       {{ invItem.available }}
     </td>
-    <td class="is-family-monospace fs-12">{{ invItem.batch }}</td>
-    <td>{{ $dayjs(invItem.expired).format("L") }}</td>
+    <!-- <td class="is-family-monospace fs-12">{{ invItem.batch }}</td>
+    <td>{{ $dayjs(invItem.expired).format("L") }}</td> -->
     <td>
       <span
         :class="[
diff --git a/app/components/inventory/InventoryTable.vue b/app/components/inventory/InventoryTable.vue
index 3a99cd7..beef978 100644
--- a/app/components/inventory/InventoryTable.vue
+++ b/app/components/inventory/InventoryTable.vue
@@ -527,14 +527,14 @@ const selectedInvItem = ref(null);
               <thead>
                 <tr>
                   <th class="font-semibold">Sản phẩm</th>
-                  <th class="font-semibold">SKU</th>
+                  <!-- <th class="font-semibold">SKU</th>
                   <th class="font-semibold">Kho</th>
-                  <th class="font-semibold">Vị trí</th>
+                  <th class="font-semibold">Vị trí</th> -->
                   <th class="font-semibold has-text-right">Tồn</th>
                   <th class="font-semibold has-text-right">Đặt trước</th>
                   <th class="font-semibold has-text-right">Khả dụng</th>
-                  <th class="font-semibold">Batch</th>
-                  <th class="font-semibold">Hạn sử dụng</th>
+                  <!-- <th class="font-semibold">Batch</th>
+                  <th class="font-semibold">Hạn sử dụng</th> -->
                   <th class="font-semibold">Trạng thái</th>
                 </tr>
               </thead>
diff --git a/app/components/inventory/SelectedInvItem.vue b/app/components/inventory/SelectedInvItem.vue
index 2eef2a6..2ef3aa1 100644
--- a/app/components/inventory/SelectedInvItem.vue
+++ b/app/components/inventory/SelectedInvItem.vue
@@ -89,7 +89,7 @@ const emit = defineEmits("unselect");
             </div>
             <div class="mt-6">
               <p class="fs-15 font-semibold mb-4">Vị trí lưu kho</p>
-              <div class="p-4 rounded-md has-background-white-100">
+              <div class="p-4 rounded-md has-background-grey-100">
                 <div class="is-flex is-gap-1">
                   <Icon
                     name="material-symbols:location-on-outline-rounded"
@@ -106,11 +106,11 @@ const emit = defineEmits("unselect");
             </div>
             <div class="mt-6">
               <p class="fs-15 font-semibold mb-4">Thông tin lô hàng</p>
-              <div class="p-4 rounded-md has-background-white-100">
+              <div class="p-4 rounded-md has-background-grey-100">
                 <p class="fs-13 has-text-grey">Mã lô</p>
                 <p class="mt-1 is-family-monospace">{{ invItem.batch }}</p>
               </div>
-              <div class="p-4 mt-4 rounded-md has-background-white-100">
+              <div class="p-4 mt-4 rounded-md has-background-grey-100">
                 <div class="is-flex is-gap-1 is-align-items-center">
                   <Icon
                     name="material-symbols:calendar-today-outline-rounded"
@@ -127,7 +127,7 @@ const emit = defineEmits("unselect");
               <div
                 v-for="move in invItem.moveHistory"
                 :key="move.id"
-                class="p-4 mb-4 rounded-md has-background-white-100 has-text-grey fs-12"
+                class="p-4 mb-4 rounded-md has-background-grey-100 has-text-grey fs-12"
               >
                 <div class="is-flex is-justify-content-space-between mb-1">
                   <div class="is-flex is-gap-1 is-align-items-center">
diff --git a/app/components/orders/OrdersKanban.vue b/app/components/orders/OrdersKanban.vue
index baab935..d2427bc 100644
--- a/app/components/orders/OrdersKanban.vue
+++ b/app/components/orders/OrdersKanban.vue
@@ -34,7 +34,7 @@ const emit = defineEmits(["selectOrder", "unselect"]);
             </p>
           </div>
           <hr class="m-0 has-background-grey-85" />
-          <div class="has-background-white-100 p-4">
+          <div class="has-background-grey-100 p-4">
             <OrderKanbanCard
               v-if="orders.filter((o) => o.status === status.id).length > 0"
               v-for="order in orders.filter((o) => o.status === status.id)"
diff --git a/app/components/pos/CartItem.vue b/app/components/pos/CartItem.vue
index 981440b..283a60a 100644
--- a/app/components/pos/CartItem.vue
+++ b/app/components/pos/CartItem.vue
@@ -5,7 +5,7 @@ const props = defineProps({
   invalid: Boolean,
 });
 const { $deleteapi, $formatNum, $snackbar } = useNuxtApp();
-const { getCarts } = inject("pos");
+const posStore = usePosStore();
 const showConfirmModal = ref();
 const isDeleting = ref(false);
 
@@ -26,7 +26,7 @@ async function removeFromCart() {
   await $deleteapi("Cart_Item", props.cartItem.id);
   isDeleting.value = false;
   $snackbar("Đã xoá sản phẩm khỏi giỏ hàng", "Success");
-  getCarts();
+  posStore.getCarts();
 }
 </script>
 
@@ -69,7 +69,7 @@ async function removeFromCart() {
         </p>
       </div>
       <button
-        v-if="deleteable"
+        v-if="deleteable || invalid"
         @click="openConfirmModal"
         :class="['button is-danger is-light', isDeleting && 'is-loading']"
       >
diff --git a/app/components/pos/CartTabs.vue b/app/components/pos/CartTabs.vue
index effbbcc..7512b12 100644
--- a/app/components/pos/CartTabs.vue
+++ b/app/components/pos/CartTabs.vue
@@ -1,5 +1,9 @@
 <script setup>
-const { carts, activeCartId, activeCartItems, isChangingCus, getCarts } = inject("pos");
+import useActiveCart from "~/components/pos/composables/useActiveCart";
+
+const posStore = usePosStore();
+const { carts, activeCartId, isChangingCus } = storeToRefs(posStore);
+const { activeCartItems } = useActiveCart();
 
 const { $insertapi, $deleteapi } = useNuxtApp();
 const isAddingCart = ref(false);
@@ -9,7 +13,7 @@ async function addCart() {
   const newCart = await $insertapi("Cart", { notify: false });
   activeCartId.value = newCart.id;
   isAddingCart.value = false;
-  getCarts();
+  posStore.getCarts();
 }
 
 const isDeletingCart = ref();
@@ -36,7 +40,7 @@ async function removeCart(cartId) {
       }
     }
   }
-  getCarts();
+  posStore.getCarts();
 }
 </script>
 
diff --git a/app/components/pos/ChooseIMEIModal.vue b/app/components/pos/ChooseIMEIModal.vue
index 315d602..63193f3 100644
--- a/app/components/pos/ChooseIMEIModal.vue
+++ b/app/components/pos/ChooseIMEIModal.vue
@@ -2,11 +2,11 @@
 import AddIMEIForm from "~/components/imports/AddIMEIForm.vue";
 import ImportData from "~/components/parameter/ImportData.vue";
 import { remove } from "es-toolkit";
+import useActiveCart from "~/components/pos/composables/useActiveCart";
 
 const props = defineProps({
   variant: Object,
 });
-const store = useStore();
 const { $getdata, $insertapi, $snackbar } = useNuxtApp();
 const emit = defineEmits(["close"]);
 
@@ -22,7 +22,8 @@ function toggleSelected(imeiRec) {
   }
 }
 
-const { activeCart, activeCartItems, getCarts } = inject("pos");
+const posStore = usePosStore();
+const { activeCart, activeCartItems } = useActiveCart();
 const isAdding = ref(false);
 
 async function addToCart() {
@@ -41,7 +42,7 @@ async function addToCart() {
     });
 
     $snackbar(`Đã thêm ${newCartItems.length} sản phẩm vào giỏ hàng`, "Success");
-    getCarts();
+    posStore.getCarts();
     emit("close");
   } catch (error) {
     console.error(error);
diff --git a/app/components/pos/ConfirmOrder.vue b/app/components/pos/ConfirmOrder.vue
index bb74f1e..809e72d 100644
--- a/app/components/pos/ConfirmOrder.vue
+++ b/app/components/pos/ConfirmOrder.vue
@@ -1,21 +1,16 @@
 <script setup>
 import CartItem from "~/components/pos/CartItem.vue";
+import useActiveCart from "~/components/pos/composables/useActiveCart";
+import useOrderInfo from "~/components/pos/composables/useOrderInfo";
 import usePlaceOrder from "~/components/pos/composables/usePlaceOrder";
 
 const id = "confirmOrderModal";
 const emit = defineEmits(["close"]);
-const { activeCart, activeCartItems, invalidCartItems, orderInfo, fullAddress, getCarts, subtotal, total } =
-  inject("pos");
-
+const posStore = usePosStore();
+const { orderInfo, invalidCartItems } = storeToRefs(posStore);
+const { activeCart, activeCartItems, subtotal } = useActiveCart();
+const { fullAddress, total } = useOrderInfo();
 const { isPending, showVietQRModal, placeOrder, testReturnPage } = usePlaceOrder({
-  activeCart,
-  activeCartItems,
-  invalidCartItems,
-  orderInfo,
-  fullAddress,
-  subtotal,
-  total,
-  getCarts,
   onSuccess: () => emit("close"),
 });
 </script>
@@ -144,6 +139,7 @@ const { isPending, showVietQRModal, placeOrder, testReturnPage } = usePlaceOrder
         <button
           @click="placeOrder"
           :class="['button is-success', isPending && 'is-loading']"
+          :disabled="invalidCartItems.length > 0 || activeCartItems.length === 0"
         >
           Đặt hàng
         </button>
diff --git a/app/components/pos/POS.vue b/app/components/pos/POS.vue
index 956030d..f80d0b2 100644
--- a/app/components/pos/POS.vue
+++ b/app/components/pos/POS.vue
@@ -3,32 +3,17 @@ import Address from "~/components/pos/Address.vue";
 import CartItem from "~/components/pos/CartItem.vue";
 import CartTabs from "~/components/pos/CartTabs.vue";
 import useActiveCart from "~/components/pos/composables/useActiveCart";
-import useCartData from "~/components/pos/composables/useCartData";
-import useCustomer from "~/components/pos/composables/useCustomer";
 import useOrderInfo from "~/components/pos/composables/useOrderInfo";
 import SearchBox from "~/components/SearchBox.vue";
 
 const store = useStore();
 const { $insertapi, $formatNum } = useNuxtApp();
 
-const { carts, cartItems, customers, getCarts, isPending } = useCartData();
+const posStore = usePosStore();
+const { carts, isPending, activeCartId, invalidCartItems, addresses, orderInfo } = storeToRefs(posStore);
 
-const { activeCartId, activeCart, activeCartItems, customerIdsWithNoCart, subtotal, invalidCartItems } = useActiveCart({
-  carts,
-  cartItems,
-  customers,
-});
-
-const { addresses, getAddresses, isChangingCus, changeCustomer } = useCustomer({ activeCart, getCarts });
-
-const { orderInfo, isOrderValid, fullAddress, total } = useOrderInfo({
-  activeCartId,
-  activeCart,
-  activeCartItems,
-  addresses,
-  getAddresses,
-  subtotal,
-});
+const { activeCart, activeCartItems, customerIdsWithNoCart, subtotal } = useActiveCart();
+const { isOrderValid, total } = useOrderInfo();
 
 const showModal = ref();
 
@@ -57,19 +42,6 @@ function openAddAddressModal() {
     height: "auto",
   };
 }
-provide("pos", {
-  carts,
-  activeCartId,
-  activeCart,
-  activeCartItems,
-  invalidCartItems,
-  isChangingCus,
-  orderInfo,
-  fullAddress,
-  getCarts,
-  subtotal,
-  total,
-});
 </script>
 
 <template>
@@ -170,7 +142,7 @@ provide("pos", {
                       placeholder: 'Khách hàng',
                       optionid: activeCart?.customer,
                       onOption: (e) => {
-                        if (e?.id !== activeCart?.customer) changeCustomer(e?.id || null);
+                        if (e?.id !== activeCart?.customer) posStore.changeCustomer(e?.id || null);
                       },
                       addon: {
                         component: 'customer/CustomerQuickAdd',
@@ -250,7 +222,7 @@ provide("pos", {
                           :address="address"
                           :selected="orderInfo.address?.id === address.id"
                           @selectAddress="orderInfo.address = $event"
-                          @submit="getAddresses"
+                          @submit="posStore.getAddresses(activeCart.customer)"
                         />
                       </div>
                       <div
@@ -379,7 +351,7 @@ provide("pos", {
             async () => {
               const newCart = await $insertapi('Cart', { notify: false });
               activeCartId = newCart.id;
-              getCarts();
+              posStore.getCarts();
             }
           "
           class="button is-primary"
diff --git a/app/components/pos/VietQR.vue b/app/components/pos/VietQR.vue
index 1a38dec..8e027ce 100644
--- a/app/components/pos/VietQR.vue
+++ b/app/components/pos/VietQR.vue
@@ -3,7 +3,7 @@ const props = defineProps({
   invoiceId: Number,
   finalizeOrder: Function,
 });
-const { activeCartItems } = inject("pos");
+const { activeCartItems } = useActiveCart();
 const subtotal = computed(() => {
   return activeCartItems.value?.reduce((prev, curr) => prev + curr.imei__variant__price, 0);
 });
diff --git a/app/components/pos/composables/useActiveCart.js b/app/components/pos/composables/useActiveCart.js
index 026b45f..192a4a8 100644
--- a/app/components/pos/composables/useActiveCart.js
+++ b/app/components/pos/composables/useActiveCart.js
@@ -1,21 +1,12 @@
 import { without } from "es-toolkit";
 
-export default function useActiveCart({ carts, cartItems, customers }) {
-  const activeCartId = ref();
+export default function useActiveCart() {
+  const posStore = usePosStore();
+  const { carts, cartItems, customers, activeCartId } = storeToRefs(posStore);
 
   const activeCart = computed(() => carts.value.find((c) => c.id === activeCartId.value));
   const activeCartItems = computed(() => cartItems.value.filter((ci) => ci.cart === activeCartId.value));
 
-  watch(
-    carts,
-    (newVal) => {
-      if (!activeCartId.value && newVal.length) {
-        activeCartId.value = newVal[0].id;
-      }
-    },
-    { immediate: true },
-  );
-
   const customerIdsWithNoCart = computed(() => {
     const cusIds = customers.value.map((c) => c.id);
     const cusIdsWithCart = carts.value.filter((c) => c.customer).map((c) => c.customer);
@@ -27,10 +18,5 @@ export default function useActiveCart({ carts, cartItems, customers }) {
     return activeCartItems.value?.reduce((prev, curr) => prev + curr.imei__variant__price, 0);
   });
 
-  const invalidCartItems = ref([]);
-
-  watch(activeCartId, () => {
-    invalidCartItems.value = [];
-  });
-  return { activeCartId, activeCart, activeCartItems, customerIdsWithNoCart, subtotal, invalidCartItems };
+  return { activeCart, activeCartItems, customerIdsWithNoCart, subtotal };
 }
diff --git a/app/components/pos/composables/useCartData.js b/app/components/pos/composables/useCartData.js
deleted file mode 100644
index db78694..0000000
--- a/app/components/pos/composables/useCartData.js
+++ /dev/null
@@ -1,22 +0,0 @@
-export default function useCartData() {
-  const { $findapi, $getapi } = useNuxtApp();
-  const carts = ref([]);
-  const cartItems = ref([]);
-  const customers = ref([]);
-  const isPending = ref(false);
-
-  async function getCarts() {
-    isPending.value = true;
-    const apis = $findapi(["Cart", "Cart_Item", "customer"]);
-    const [cartsRes, cartItemsRes, customersRes] = await $getapi(apis);
-    isPending.value = false;
-
-    carts.value = cartsRes.data.rows || [];
-    cartItems.value = cartItemsRes.data.rows || [];
-    customers.value = customersRes.data.rows || [];
-  }
-
-  onMounted(getCarts);
-
-  return { carts, cartItems, customers, getCarts, isPending };
-}
diff --git a/app/components/pos/composables/useCustomer.js b/app/components/pos/composables/useCustomer.js
deleted file mode 100644
index 4b0e07c..0000000
--- a/app/components/pos/composables/useCustomer.js
+++ /dev/null
@@ -1,24 +0,0 @@
-export default function useCustomer({ activeCart, getCarts }) {
-  const { $getdata, $patchapi } = useNuxtApp();
-
-  const addresses = ref([]);
-  async function getAddresses() {
-    addresses.value =
-      (await $getdata("Customer_Address", {
-        filter: { customer: activeCart.value.customer },
-      })) || [];
-  }
-
-  const isChangingCus = ref(false);
-  async function changeCustomer(cusId) {
-    isChangingCus.value = true;
-    const updatedCart = await $patchapi("Cart", {
-      id: activeCart.value.id,
-      customer: cusId,
-    });
-    await getCarts();
-    isChangingCus.value = false;
-  }
-
-  return { addresses, getAddresses, isChangingCus, changeCustomer };
-}
diff --git a/app/components/pos/composables/useOrderInfo.js b/app/components/pos/composables/useOrderInfo.js
index 50ab13c..6657928 100644
--- a/app/components/pos/composables/useOrderInfo.js
+++ b/app/components/pos/composables/useOrderInfo.js
@@ -1,12 +1,9 @@
-export default function useOrderInfo({ activeCartId, activeCart, activeCartItems, addresses, getAddresses, subtotal }) {
-  const orderInfo = ref({
-    address: null,
-    receiver_name: null,
-    receiver_phone: null,
-    shipping_fee: null,
-    deliveryMethod: null,
-    paymentMethod: null,
-  });
+import useActiveCart from "~/components/pos/composables/useActiveCart";
+
+export default function useOrderInfo() {
+  const posStore = usePosStore();
+  const { activeCartId, addresses, orderInfo } = storeToRefs(posStore);
+  const { activeCart, activeCartItems, subtotal } = useActiveCart();
 
   const total = computed(() => subtotal.value + orderInfo.value.shipping_fee);
 
@@ -19,7 +16,7 @@ export default function useOrderInfo({ activeCartId, activeCart, activeCartItems
   watch(activeCart, async (newVal, oldVal) => {
     // set order info
     if (newVal?.customer) {
-      await getAddresses();
+      await posStore.getAddresses(newVal.customer);
       if (!oldVal || !oldVal.customer || oldVal.customer !== newVal.customer) {
         const defaultAddress = addresses.value.find((add) => add.is_default);
         orderInfo.value.address = defaultAddress;
@@ -59,5 +56,5 @@ export default function useOrderInfo({ activeCartId, activeCart, activeCartItems
     return `${orderInfo.value.address.address_detail}, ${orderInfo.value.address.ward}, ${orderInfo.value.address.district}, ${orderInfo.value.address.city}`;
   });
 
-  return { orderInfo, isOrderValid, fullAddress, total };
+  return { isOrderValid, fullAddress, total };
 }
diff --git a/app/components/pos/composables/usePlaceOrder.js b/app/components/pos/composables/usePlaceOrder.js
index b6b0252..190c179 100644
--- a/app/components/pos/composables/usePlaceOrder.js
+++ b/app/components/pos/composables/usePlaceOrder.js
@@ -1,15 +1,14 @@
-export default function usePlaceOrder({
-  activeCart,
-  activeCartItems,
-  invalidCartItems,
-  orderInfo,
-  fullAddress,
-  subtotal,
-  total,
-  getCarts,
-  onSuccess,
-}) {
+import useActiveCart from "~/components/pos/composables/useActiveCart";
+import useOrderInfo from "~/components/pos/composables/useOrderInfo";
+
+export default function usePlaceOrder({ onSuccess }) {
   const { $dayjs, $id, $getdata, $insertapi, $patchapi, $deleteapi, $snackbar } = useNuxtApp();
+
+  const posStore = usePosStore();
+  const { invalidCartItems, orderInfo } = storeToRefs(posStore);
+  const { activeCart, activeCartItems, subtotal } = useActiveCart();
+  const { fullAddress, total } = useOrderInfo();
+
   const isPending = ref(false);
   const paidPaymentStatus = ref();
   const invoice = ref();
@@ -206,7 +205,7 @@ export default function usePlaceOrder({
         customer: null,
       }),
     ]);
-    getCarts();
+    posStore.getCarts();
   }
 
   async function placeOrder() {
diff --git a/app/stores/usePosStore.js b/app/stores/usePosStore.js
new file mode 100644
index 0000000..5a647d3
--- /dev/null
+++ b/app/stores/usePosStore.js
@@ -0,0 +1,82 @@
+import { defineStore } from "pinia";
+
+export const usePosStore = defineStore("pos", () => {
+  const { $findapi, $getapi, $getdata, $patchapi } = useNuxtApp();
+
+  const carts = ref([]);
+  const cartItems = ref([]);
+  const customers = ref([]);
+  const isPending = ref(false);
+
+  const activeCartId = ref();
+  const invalidCartItems = ref([]);
+  const isChangingCus = ref(false);
+  const addresses = ref([]);
+  const orderInfo = ref({
+    address: null,
+    receiver_name: null,
+    receiver_phone: null,
+    shipping_fee: null,
+    deliveryMethod: null,
+    paymentMethod: null,
+  });
+
+  async function getCarts() {
+    isPending.value = true;
+    const apis = $findapi(["Cart", "Cart_Item", "customer"]);
+    const [cartsRes, cartItemsRes, customersRes] = await $getapi(apis);
+    isPending.value = false;
+
+    carts.value = cartsRes.data.rows || [];
+    cartItems.value = cartItemsRes.data.rows || [];
+    customers.value = customersRes.data.rows || [];
+  }
+
+  onMounted(getCarts);
+
+  async function changeCustomer(cusId) {
+    isChangingCus.value = true;
+    const updatedCart = await $patchapi("Cart", {
+      id: activeCartId.value,
+      customer: cusId,
+    });
+    await getCarts();
+    isChangingCus.value = false;
+  }
+
+  async function getAddresses(activeCartCustomerId) {
+    addresses.value =
+      (await $getdata("Customer_Address", {
+        filter: { customer: activeCartCustomerId },
+      })) || [];
+  }
+
+  watch(
+    carts,
+    (newVal) => {
+      if (!activeCartId.value && newVal.length) {
+        activeCartId.value = newVal[0].id;
+      }
+    },
+    { immediate: true },
+  );
+
+  watch(activeCartId, () => {
+    invalidCartItems.value = [];
+  });
+
+  return {
+    carts,
+    cartItems,
+    customers,
+    isPending,
+    getCarts,
+    getAddresses,
+    changeCustomer,
+    activeCartId,
+    invalidCartItems,
+    isChangingCus,
+    addresses,
+    orderInfo,
+  };
+});