changes

2026-06-18 16:22:37 +07:00
parent 8b07ab4e65
commit 667832078d
23 changed files with 395 additions and 412 deletions
--- a/app/components/Modal.vue
+++ b/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,
 });
--- a/app/components/SearchBox.vue
+++ b/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">
--- a/app/components/datatable/ContextMenu.vue
+++ b/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 () {
--- a/app/components/datatable/TableSetting.vue
+++ b/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);
-  background-color: var(--bulma-grey-95);
+  border: 1px solid var(--bulma-grey-90);
+  background-color: var(--bulma-grey-100);
  height: 100%;
 }
 </style>
--- a/app/components/imports/EditProductButton.vue
+++ b/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 },
  };
--- a/app/components/imports/Products.vue
+++ b/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',
      },
    }"
  />
--- a/app/components/orders/InvoiceRow.vue
+++ b/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,
    },
--- a/app/components/orders/OrderDeliveryTab.vue
+++ b/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>
--- a/app/components/orders/OrderPaymentTab.vue
+++ b/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">
--- a/app/components/orders/OrderProductTab.vue
+++ b/app/components/orders/OrderProductTab.vue
@@ -27,12 +27,21 @@ const invoiceProducts = computed(() => {
      <div
        v-for="product in invoiceProducts"
        :key="product.id"
-        class="p-3 has-background-white-95 rounded-md"
+        class="p-3 has-background-white-ter rounded-md"
      >
        <div class="is-flex is-justify-content-space-between is-align-items-flex-end">
          <div>
-            <p class="font-semibold">{{ product.variant__product__name }}</p>
-            <div class="is-flex is-gap-8 fs-13 has-text-grey-30 mt-1">
+            <p class="font-semibold">
+              {{ product.variant__product__name }}
+            </p>
+            <p class="fs-13 has-text-grey-40">
+              <span>{{ product.variant__internal_storage__code }}</span>
+              <span> - </span>
+              <span>{{ product.variant__ram__code }} RAM</span>
+              <span> - </span>
+              <span>{{ product.variant__color__name }}</span>
+            </p>
+            <div class="is-flex is-gap-8 fs-13 has-text-grey-30 mt-2">
              <p>SL: {{ product.amount }}</p>
              <p>Đơn giá: {{ $formatNum(product.price, { hasUnit: true }) }}</p>
            </div>
--- a/app/components/orders/OrderReceiptTab.vue
+++ b/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>
--- a/app/components/orders/Orders.vue
+++ b/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>
--- a/app/components/orders/OrdersTable.vue
+++ b/app/components/orders/OrdersTable.vue
@@ -7,7 +7,7 @@ const props = defineProps({
  viewMode: String,
 });

-const { $dayjs } = useNuxtApp();
+const { $getdata, $dayjs } = useNuxtApp();
 const { invoices } = inject("orders");

 const statuses = [
@@ -51,16 +51,11 @@ const paymentStatuses = [
  },
 ];

-const employees = [
-  {
-    id: 1,
-    name: "Trần Thị B",
-  },
-  {
-    id: 5,
-    name: "Hoàng Văn E",
-  },
-];
+const employees = ref([]);
+
+onMounted(async () => {
+  employees.value = await $getdata("Staff");
+});

 const input = ref();
 const dateRange = ref({
@@ -99,7 +94,7 @@ const filteredInvoices = computed(() => {
  const filteredByDates = filteredByEmployees.filter((order) => {
    if (!dateRange.value) return true;
    const from = $dayjs(dateRange.value.from || 0);
-    const to = $dayjs(dateRange.value.to || undefined);
+    const to = $dayjs(dateRange.value.to || undefined).endOf("day");
    const createTime = $dayjs(order.create_time);
    return createTime.isSameOrAfter(from) && createTime.isSameOrBefore(to);
  });
@@ -123,10 +118,7 @@ function toggleStatus(id) {
 </script>
 <template>
  <div>
-    <div
-      v-if="true"
-      class="card"
-    >
+    <div class="card">
      <div class="card-content">
        <div class="is-flex is-gap-2 is-align-items-center">
          <div class="field is-flex-grow-1 m-0">
@@ -167,7 +159,7 @@ function toggleStatus(id) {
          </div>
          <div class="select">
            <select v-model="selectedPaymentStatus">
-              <option :value="undefined">Phương thức thanh toán</option>
+              <option :value="undefined">Thanh toán</option>
              <option
                v-for="paymentStatus in paymentStatuses"
                :key="paymentStatus.id"
@@ -185,7 +177,7 @@ function toggleStatus(id) {
                :key="employee.id"
                :value="employee.id"
              >
-                {{ employee.name }}
+                {{ employee.fullname }}
              </option>
            </select>
          </div>
--- a/app/components/pos/Address.vue
+++ b/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>
--- a/app/components/pos/AddressForm.vue
+++ b/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) {
-    // edit
-    return !isEqual(props.address, addressRef);
-  } else {
-    return true;
-    // create
-    // true if
-  }
+  if (props.address) return !isEqual(props.address, addressRef.value);
+  return true;
 });
 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"
-          @click="updateAddress"
+          :disabled="address ? !isDirty || !isValid : !isValid"
+          @click="submitAddress"
        >
          <span class="icon">
            <Icon
--- a/app/components/pos/CartTabs.vue
+++ b/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>
--- a/app/components/pos/ConfirmOrder.vue
+++ b/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", {
--- a/app/components/pos/POS.vue
+++ b/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 />
-    <div class="fixed-grid has-1-cols-mobile has-12-cols has-background-white is-clipped">
-      <div
-        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="card-content">
-              <div class="block is-flex is-justify-content-space-between">
-                <p class="icon-text fs-16 font-semibold mb-4">
-                  <span class="icon">
-                    <Icon
-                      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"
+    <template v-if="activeCartId && carts?.length > 0">
+      <CartTabs />
+      <div class="fixed-grid has-1-cols-mobile has-12-cols has-background-white is-clipped">
+        <div
+          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="card-content">
+                <div class="block is-flex is-justify-content-space-between">
+                  <p class="icon-text fs-16 font-semibold mb-4">
+                    <span class="icon">
+                      <Icon
+                        name="material-symbols:shopping-cart-outline-rounded"
+                        :size="18"
                      />
-                    </div>
-                    <div
-                      v-else
-                      class="has-text-centered"
+                    </span>
+                    <span>Giỏ hàng</span>
+                    <span
+                      v-if="isPending"
+                      class="icon"
                    >
-                      <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>
+                      <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="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="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 :class="['cell sidebar', store.viewport < 3 ? 'is-col-span-12' : 'is-col-span-4']">
+            <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: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"
+              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"