From ce2e341401dc36b70cf9d2d5409cfcc64b3ffba1 Mon Sep 17 00:00:00 2001
From: Viet An <tiktaktictac269@gmail.com>
Date: Fri, 5 Jun 2026 23:21:54 +0700
Subject: [PATCH] changes

---
 app/assets/styles/overrides-components.scss  |   5 +
 app/assets/styles/utils.scss                 |   3 +
 app/components/SearchBox.vue                 |   5 +-
 app/components/inventory/SelectedInvItem.vue |   2 +-
 app/components/pos/Address.vue               |  87 +++++
 app/components/pos/ChooseIMEIModal.vue       |   2 +-
 app/components/pos/EditAddress.vue           | 125 +++++++
 app/components/pos/POS.vue                   | 350 ++++++++++++-------
 app/plugins/02-connection.js                 |   6 +
 app/plugins/04-components.js                 |   2 +
 10 files changed, 452 insertions(+), 135 deletions(-)
 create mode 100644 app/components/pos/Address.vue
 create mode 100644 app/components/pos/EditAddress.vue

diff --git a/app/assets/styles/overrides-components.scss b/app/assets/styles/overrides-components.scss
index 489b1b5..4b20f97 100644
--- a/app/assets/styles/overrides-components.scss
+++ b/app/assets/styles/overrides-components.scss
@@ -1,5 +1,10 @@
 @use "bulma/sass/utilities/initial-variables.scss" as *;
 
+[data-theme="light"],
+.theme-light {
+  --bulma-block-spacing: 1rem;
+}
+
 .card {
   --bulma-card-shadow: none;
   border: 1px solid $grey-lighter;
diff --git a/app/assets/styles/utils.scss b/app/assets/styles/utils.scss
index 823a24f..cf745b9 100644
--- a/app/assets/styles/utils.scss
+++ b/app/assets/styles/utils.scss
@@ -49,6 +49,9 @@
 .rounded-sm {
   border-radius: 0.25rem;
 }
+.rounded {
+  border-radius: 0.25rem;
+}
 .rounded-md {
   border-radius: 0.375rem;
 }
diff --git a/app/components/SearchBox.vue b/app/components/SearchBox.vue
index 2cad4e1..9e3bfdb 100644
--- a/app/components/SearchBox.vue
+++ b/app/components/SearchBox.vue
@@ -140,7 +140,10 @@ import ScrollBox from "@/components/datatable/ScrollBox.vue";
 import { debounce } from "es-toolkit";
 
 const props = defineProps({
-  api: String,
+  api: {
+    type: String,
+    required: true,
+  },
   field: String,
   column: Array,
   first: Boolean,
diff --git a/app/components/inventory/SelectedInvItem.vue b/app/components/inventory/SelectedInvItem.vue
index 6cb6d20..38962d9 100644
--- a/app/components/inventory/SelectedInvItem.vue
+++ b/app/components/inventory/SelectedInvItem.vue
@@ -133,7 +133,7 @@ const emit = defineEmits("unselect");
                   <div class="is-flex is-gap-1 is-align-items-center">
                     <div
                       :class="[
-                        'p-1 rounded-sm is-flex is-align-items-center',
+                        'p-1 rounded is-flex is-align-items-center',
                         `has-background-${move.delta > 0 ? 'success' : 'danger'}-soft`,
                       ]"
                     >
diff --git a/app/components/pos/Address.vue b/app/components/pos/Address.vue
new file mode 100644
index 0000000..9d9d853
--- /dev/null
+++ b/app/components/pos/Address.vue
@@ -0,0 +1,87 @@
+<script setup>
+const props = defineProps({
+  address: Object,
+  selected: Boolean,
+});
+
+const showModal = ref(false);
+
+function openEditModal() {
+  showModal.value = {
+    component: "pos/EditAddress",
+    title: "Cập nhật địa chỉ",
+    width: "50%",
+    height: "auto",
+    vbind: { address: props.address },
+  };
+}
+</script>
+
+<template>
+  <div
+    :class="['card is-clickable', selected && 'selected']"
+    @click="$emit('selectAddress', address.id)"
+  >
+    <div class="card-content is-flex is-justify-content-space-between">
+      <div>
+        <div class="fs-14 is-flex is-gap-1 is-align-items-center">
+          <p>{{ address.address_detail }}</p>
+          <span
+            v-if="address.is_default"
+            class="tag is-primary is-light"
+          >
+            Mặc định</span
+          >
+          <button
+            @click.stop="openEditModal"
+            class="button is-small is-white rounded-full p-0 size-7"
+          >
+            <span class="icon">
+              <Icon
+                name="material-symbols:edit-outline-rounded"
+                :size="16"
+                class="has-text-primary"
+              />
+            </span>
+          </button>
+        </div>
+        <p class="has-text-grey is-size-7">
+          <span>Phường {{ address.ward }}</span>
+          <span>, </span>
+          <span>Quận {{ address.district }}</span>
+          <span>, </span>
+          <span>{{ address.city }}</span>
+        </p>
+      </div>
+      <span
+        v-if="selected"
+        class="icon has-background-primary-95 rounded-full"
+      >
+        <Icon
+          name="material-symbols:check-rounded"
+          :size="18"
+          class="has-text-primary"
+        />
+      </span>
+    </div>
+    <Modal
+      v-if="showModal"
+      v-bind="showModal"
+      @close="showModal = null"
+      @update="$emit('update')"
+    />
+  </div>
+</template>
+<style scoped>
+.card {
+  &:hover {
+    border-color: var(--bulma-primary);
+  }
+  &.selected {
+    border-color: var(--bulma-primary);
+  }
+}
+.card-content {
+  --bulma-card-content-padding: 1rem;
+}
+</style>
diff --git a/app/components/pos/ChooseIMEIModal.vue b/app/components/pos/ChooseIMEIModal.vue
index 79796bd..ba6479e 100644
--- a/app/components/pos/ChooseIMEIModal.vue
+++ b/app/components/pos/ChooseIMEIModal.vue
@@ -55,7 +55,7 @@ onMounted(fetchImeis);
     />
   </div>
   <div v-else-if="imeis.length === 0">
-    <p class="mt-6 mb-8 has-text-centered">Sản phẩm không có IMEI nào.</p>
+    <p class="mt-6 mb-8 has-text-centered">Sản phẩm không có IMEI có sẵn nào.</p>
     <div class="block">
       <AddIMEIForm
         :variant="variant"
diff --git a/app/components/pos/EditAddress.vue b/app/components/pos/EditAddress.vue
new file mode 100644
index 0000000..a342c34
--- /dev/null
+++ b/app/components/pos/EditAddress.vue
@@ -0,0 +1,125 @@
+<script setup>
+import { isEqual } from "es-toolkit";
+
+const props = defineProps({
+  address: Object,
+});
+
+const emit = defineEmits(["modalevent"]);
+
+const { $patchapi } = useNuxtApp();
+const addressRef = ref({ ...props.address });
+const isLoading = ref(false);
+async function updateAddress() {
+  isLoading.value = true;
+  const updated = await $patchapi("Customer_Address", addressRef.value);
+  isLoading.value = false;
+  emit("modalevent", { name: "update" });
+}
+</script>
+
+<template>
+  <form>
+    <div class="field">
+      <label class="label">Địa chỉ</label>
+      <div class="control">
+        <input
+          v-model="addressRef.address_detail"
+          class="input"
+          type="text"
+          placeholder="Địa chỉ"
+        />
+      </div>
+    </div>
+    <div class="fixed-grid has-12-cols">
+      <div class="grid">
+        <div class="cell is-col-span-4">
+          <div class="field">
+            <label class="label">Phường</label>
+            <div class="control">
+              <input
+                v-model="addressRef.ward"
+                class="input"
+                type="text"
+                placeholder="Text input"
+              />
+            </div>
+          </div>
+        </div>
+        <div class="cell is-col-span-4">
+          <div class="field">
+            <label class="label">Quận</label>
+            <div class="control">
+              <input
+                v-model="addressRef.district"
+                class="input"
+                type="text"
+                placeholder="Text input"
+              />
+            </div>
+          </div>
+        </div>
+        <div class="cell is-col-span-4">
+          <div class="field">
+            <label class="label">Thành phố</label>
+            <div class="control">
+              <input
+                v-model="addressRef.city"
+                class="input"
+                type="text"
+                placeholder="Text input"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="field">
+      <div class="control">
+        <label class="checkbox is-flex is-gap-0.5 is-align-items-center">
+          <Icon
+            :name="
+              addressRef.is_default ? 'material-symbols:check-box-rounded' : 'material-symbols:check-box-outline-blank'
+            "
+            :class="['is-clickable', addressRef.is_default ? 'has-text-primary' : 'has-text-grey-light']"
+            :size="24"
+            @click="addressRef.is_default = !addressRef.is_default"
+          />
+          <span>Địa chỉ mặc định</span>
+          <input
+            type="checkbox"
+            class="is-sr-only"
+            v-model="addressRef.is_default"
+          />
+        </label>
+      </div>
+    </div>
+    <div class="field is-grouped is-grouped-right">
+      <div class="control">
+        <button
+          type="button"
+          class="button is-white"
+          @click="$emit('close')"
+        >
+          Huỷ
+        </button>
+      </div>
+      <div class="control">
+        <button
+          type="button"
+          :class="['button is-link', isLoading && 'is-loading']"
+          :disabled="isEqual(address, addressRef)"
+          @click="updateAddress"
+        >
+          <span class="icon">
+            <Icon
+              name="material-symbols:edit-outline-rounded"
+              :size="16"
+            />
+          </span>
+          <span>Cập nhật</span>
+        </button>
+      </div>
+    </div>
+  </form>
+</template>
diff --git a/app/components/pos/POS.vue b/app/components/pos/POS.vue
index a5684b5..7b6f0f7 100644
--- a/app/components/pos/POS.vue
+++ b/app/components/pos/POS.vue
@@ -1,9 +1,11 @@
 <script setup>
+import Address from "@/components/pos/Address.vue";
 import ProductCard from "@/components/pos/ProductCard.vue";
 import SearchBox from "@/components/SearchBox.vue";
+import { isNil } from "es-toolkit";
 
 const store = useStore();
-const { $numtoString } = useNuxtApp();
+const { $getdata, $numtoString } = useNuxtApp();
 
 function openModal() {
   store.showmodal = {
@@ -14,147 +16,231 @@ function openModal() {
   };
 }
 
-const record = ref({
+const orderInfo = ref({
   customer: null,
+  address: null,
   paymentMethod: null,
 });
+const addresses = ref([]);
 const subtotal = computed(() => {
   return store.selectedImeis.reduce((prev, curr) => prev + curr.variant__price, 0);
 });
+
+async function getAddresses() {
+  addresses.value = await $getdata("Customer_Address", {
+    filter: { customer: orderInfo.value.customer.id },
+  });
+}
+
+watch(
+  () => orderInfo.value.customer,
+  async (newVal, oldVal) => {
+    if (newVal) {
+      await getAddresses();
+      if (oldVal === null || oldVal.id !== newVal.id) {
+        const defaultAddress = addresses.value.find((add) => add.is_default);
+        orderInfo.value.address = defaultAddress?.id;
+      }
+    } else {
+      addresses.value = null;
+      orderInfo.value.address = null;
+    }
+  },
+);
 </script>
 
 <template>
-  <div class="block">
-    <button
-      @click="openModal"
-      class="button is-primary"
-    >
-      <span class="icon">
-        <Icon
-          name="material-symbols:add-rounded"
-          :size="20"
-        />
-      </span>
-      <span>Chọn sản phẩm</span>
-    </button>
-  </div>
-  <div class="fixed-grid has-1-cols-mobile has-12-cols">
-    <div class="grid">
-      <div class="cell is-col-span-8">
-        <div class="card">
-          <div class="card-content">
-            <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>
-            </p>
-            <div
-              v-if="store.selectedImeis.length > 0"
-              class="is-flex is-flex-direction-column is-gap-1"
-            >
-              <ProductCard
-                v-for="imei in store.selectedImeis"
-                :key="imei.id"
-                :imei="imei"
-              />
-            </div>
-            <p
-              v-else
-              class="py-4 fs-16 has-text-grey has-text-centered"
-            >
-              Không có sản phẩm nào trong giỏ hàng
-            </p>
-          </div>
-        </div>
-      </div>
-      <div class="cell is-col-span-4">
-        <div class="card mb-3">
-          <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',
-                  field: 'label',
-                  column: ['label'],
-                  first: true,
-                  placeholder: 'Khách hàng',
-                  addon: {
-                    component: 'customer/CustomerQuickAdd',
-                    width: '50%',
-                    height: 'auto',
-                    title: 'Tạo khách hàng',
-                  },
-                  onOption: (e) => (record.customer = e),
-                }"
-              />
-            </div>
-          </div>
-        </div>
-        <div class="card mb-3">
-          <div class="card-content">
-            <p class="icon-text fs-17 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',
-                  onOption: (e) => (record.paymentMethod = e),
-                }"
-              />
-            </div>
-          </div>
-        </div>
-        <div class="card mb-3">
-          <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> ({{ store.selectedImeis.length }} sản phẩm)</span>
-                    </td>
-                    <td class="has-text-right">{{ $numtoString(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">
-                      {{ $numtoString(subtotal, { hasUnit: true }) }}
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-              <button
-                class="button is-fullwidth is-success"
-                :disabled="!record.customer || !record.paymentMethod"
+  <div>
+    <div class="block">
+      <button
+        @click="openModal"
+        class="button is-primary"
+      >
+        <span class="icon">
+          <Icon
+            name="material-symbols:add-rounded"
+            :size="20"
+          />
+        </span>
+        <span>Chọn sản phẩm</span>
+      </button>
+    </div>
+    <div class="fixed-grid has-1-cols-mobile has-12-cols">
+      <div class="grid">
+        <div :class="['cell', store.viewport < 4 ? 'is-col-span-12' : 'is-col-span-8']">
+          <div class="card">
+            <div class="card-content">
+              <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>
+              </p>
+              <div
+                v-if="store.selectedImeis.length > 0"
+                class="is-flex is-flex-direction-column is-gap-1"
               >
-                Thanh toán
-              </button>
+                <ProductCard
+                  v-for="imei in store.selectedImeis"
+                  :key="imei.id"
+                  :imei="imei"
+                />
+              </div>
+              <p
+                v-else
+                class="py-4 fs-16 has-text-grey has-text-centered"
+              >
+                Không có sản phẩm nào trong giỏ hàng
+              </p>
+            </div>
+          </div>
+        </div>
+        <div :class="['cell', store.viewport < 4 ? 'is-col-span-12' : 'is-col-span-4']">
+          <div class="card mb-3">
+            <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',
+                    field: 'label',
+                    column: ['label'],
+                    first: true,
+                    placeholder: 'Khách hàng',
+                    onOption: (e) => (orderInfo.customer = e),
+                    addon: {
+                      component: 'customer/CustomerQuickAdd',
+                      width: '50%',
+                      height: 'auto',
+                      title: 'Tạo khách hàng',
+                    },
+                  }"
+                />
+              </div>
+            </div>
+          </div>
+          <div class="card mb-3">
+            <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>
+                <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>
+                <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 === address.id"
+                      @selectAddress="orderInfo.address = $event"
+                      @update="getAddresses"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="card mb-3">
+            <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',
+                    onOption: (e) => (orderInfo.paymentMethod = e),
+                  }"
+                />
+              </div>
+            </div>
+          </div>
+          <div class="card mb-3">
+            <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> ({{ store.selectedImeis.length }} sản phẩm)</span>
+                      </td>
+                      <td class="has-text-right">{{ $numtoString(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">
+                        {{ $numtoString(subtotal, { hasUnit: true }) }}
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+                <button
+                  class="button is-fullwidth is-success"
+                  :disabled="Object.values(orderInfo).some(isNil)"
+                >
+                  Thanh toán
+                </button>
+              </div>
             </div>
           </div>
         </div>
diff --git a/app/plugins/02-connection.js b/app/plugins/02-connection.js
index 3f2eb94..f7d0e08 100644
--- a/app/plugins/02-connection.js
+++ b/app/plugins/02-connection.js
@@ -1094,6 +1094,12 @@ export default defineNuxtPlugin((nuxtApp) => {
       url_detail: "data-detail/Payment_Method/",
       params: {},
     },
+    {
+      name: "Customer_Address",
+      url: "data/Customer_Address/",
+      url_detail: "data-detail/Customer_Address/",
+      params: {},
+    },
   ];
   const { $copy, $clone, $updateSeriesFields, $snackbar, $store, $remove, $dialog } = nuxtApp;
 
diff --git a/app/plugins/04-components.js b/app/plugins/04-components.js
index 4b92b3a..7ee1a27 100644
--- a/app/plugins/04-components.js
+++ b/app/plugins/04-components.js
@@ -5,6 +5,7 @@ import Inventory from "@/components/inventory/Inventory.vue";
 import Rights from "@/components/rights/Rights.vue";
 import POS from "@/components/pos/POS.vue";
 import ChooseIMEIButton from "@/components/pos/ChooseIMEIButton.vue";
+import EditAddress from "@/components/pos/EditAddress.vue";
 import CreateReceipts from "@/components/receipts/CreateReceipts.vue";
 import Return from "@/components/receipts/Return.vue";
 import Imports from "@/components/imports/Imports.vue";
@@ -139,6 +140,7 @@ const components = {
   Rights,
   POS,
   ChooseIMEIButton,
+  EditAddress,
   CreateReceipts,
   Return,
   Imports,