From bb05320d65879df76fa60ab1206ee460ce60b2b5 Mon Sep 17 00:00:00 2001
From: Viet An <tiktaktictac269@gmail.com>
Date: Tue, 9 Jun 2026 11:43:27 +0700
Subject: [PATCH] changes

---
 app/components/TopMenu.vue                    |  14 +-
 app/components/common/CountdownTimer.vue      |  42 +-
 .../format => common}/FormatDate.vue          |   0
 .../format => common}/FormatNumber.vue        |   0
 app/components/common/Phone.vue               | 125 ++--
 app/components/customer/CustomerForm.vue      | 620 +++++++-----------
 app/components/datatable/DataModel.vue        | 314 ---------
 app/components/datatable/DataTable.vue        |   9 +
 .../{common => datatable}/ViewList.vue        |   0
 .../marketing/email/dataGmail/EmailSent.vue   |   2 -
 app/components/media/ChipImage.vue            |  20 +-
 app/components/media/FileActions.vue          |  27 +-
 app/components/media/FileShow.vue             |  36 +-
 app/components/menu/MenuAccount.vue           |  62 --
 app/components/menu/MenuCollab.vue            |  35 -
 app/components/menu/MenuPayment.vue           |  30 -
 app/components/pos/ChooseIMEIModal.vue        |   2 +-
 app/plugins/00-datatable.js                   |   4 +-
 app/plugins/04-components.js                  |  84 +--
 19 files changed, 418 insertions(+), 1008 deletions(-)
 rename app/components/{datatable/format => common}/FormatDate.vue (100%)
 rename app/components/{datatable/format => common}/FormatNumber.vue (100%)
 delete mode 100644 app/components/datatable/DataModel.vue
 rename app/components/{common => datatable}/ViewList.vue (100%)
 delete mode 100644 app/components/menu/MenuAccount.vue
 delete mode 100644 app/components/menu/MenuCollab.vue
 delete mode 100644 app/components/menu/MenuPayment.vue

diff --git a/app/components/TopMenu.vue b/app/components/TopMenu.vue
index d18858e..8cbadfe 100644
--- a/app/components/TopMenu.vue
+++ b/app/components/TopMenu.vue
@@ -121,12 +121,12 @@
 </template>
 <script setup>
 import Avatarbox from "~/components/common/Avatarbox.vue";
-import { watch } from "vue";
+
 const router = useRouter();
 const route = useRoute();
 const emit = defineEmits(["changeTab"]);
 const { $find, $filter, $store, $snackbar } = useNuxtApp();
-const lang = ref($store.lang);
+const lang = computed(() => $store.lang);
 const menu = $filter($store.common, { category: "topmenu" });
 // if($store.rights.length>0) {
 //   menu = menu.filter(v=>$findIndex($store.rights, {setting: v.id})>=0)
@@ -148,7 +148,7 @@ const currentTab = ref(leftmenu[0]);
 const subTab = ref();
 const tabConfig = $find(menu, { code: "configuration" });
 const avatar = ref();
-const isAdmin = ref();
+const isAdmin = computed(() => $store.login.type__code === "admin");
 
 function toggleBurger() {
   const target = document.getElementById("burger");
@@ -174,8 +174,8 @@ function changeTab(tab, subtab) {
   subTab.value = subtab;
   emit("changeTab", tab, subtab);
   closeMenu();
-  let query = subtab ? { tab: tab.code, subtab: subtab.code } : { tab: tab.code };
-  router.push({ query: query });
+  const query = subtab ? { tab: tab.code, subtab: subtab.code } : { tab: tab.code };
+  router.push({ query });
 }
 function openProfile() {
   $store.commit("showmodal", {
@@ -187,6 +187,7 @@ function openProfile() {
 }
 const found = route.query.tab && $find(menu, { code: route.query.tab });
 if (found || currentTab.value) changeTab(found || currentTab.value);
+
 onMounted(() => {
   if (!$store.login) return;
   avatar.value = {
@@ -195,7 +196,6 @@ onMounted(() => {
     size: "two",
     type: "findata",
   };
-  isAdmin.value = $store.login.type__code === "admin";
 });
 watch(
   () => $store.login,
@@ -207,8 +207,6 @@ watch(
       size: "two",
       type: "findata",
     };
-    isAdmin.value = $store.login.type__code === "admin";
-    lang.value = $store.lang;
   },
 );
 </script>
diff --git a/app/components/common/CountdownTimer.vue b/app/components/common/CountdownTimer.vue
index 92b57d3..d45463c 100644
--- a/app/components/common/CountdownTimer.vue
+++ b/app/components/common/CountdownTimer.vue
@@ -1,26 +1,4 @@
-<!-- CountdownTimer.vue -->
-<template>
-  <div class="countdown-wrapper">
-    <span
-      v-if="isExpired"
-      class="tag is-danger"
-    >
-      {{ isVietnamese ? "Hết giờ" : "Expired" }}
-    </span>
-    <span
-      v-else
-      class="tag"
-      :class="tagClass"
-    >
-      <span class="countdown-text">{{ formattedTime }}</span>
-    </span>
-  </div>
-</template>
-
 <script setup>
-import { ref, computed, watch, onMounted, onBeforeUnmount } from "vue";
-import { useStore } from "~/stores/index";
-
 const props = defineProps({
   dateValue: {
     type: [String, Date],
@@ -48,6 +26,8 @@ let intervalId = null;
 const isVietnamese = computed(() => store.lang === "vi");
 
 const tagClass = computed(() => {
+  if (isExpired) return "is-danger";
+
   const totalSeconds =
     timeRemaining.value.days * 86400 +
     timeRemaining.value.hours * 3600 +
@@ -123,19 +103,15 @@ watch(
   { deep: true },
 );
 
-onMounted(() => {
-  startCountdown();
-});
+onMounted(startCountdown);
 
 onBeforeUnmount(() => {
-  if (intervalId) {
-    clearInterval(intervalId);
-  }
+  clearInterval(intervalId);
 });
 </script>
 
-<style scoped>
-.countdown-wrapper {
-  display: inline-block;
-}
-</style>
+<template>
+  <span :class="['tag', tagClass]">
+    {{ isExpired ? (isVietnamese ? "Hết giờ" : "Expired") : formattedTime }}
+  </span>
+</template>
diff --git a/app/components/datatable/format/FormatDate.vue b/app/components/common/FormatDate.vue
similarity index 100%
rename from app/components/datatable/format/FormatDate.vue
rename to app/components/common/FormatDate.vue
diff --git a/app/components/datatable/format/FormatNumber.vue b/app/components/common/FormatNumber.vue
similarity index 100%
rename from app/components/datatable/format/FormatNumber.vue
rename to app/components/common/FormatNumber.vue
diff --git a/app/components/common/Phone.vue b/app/components/common/Phone.vue
index 3b70db1..4d41b64 100644
--- a/app/components/common/Phone.vue
+++ b/app/components/common/Phone.vue
@@ -1,82 +1,85 @@
+<script setup>
+const props = defineProps(["row", "pagename"]);
+const { $copyToClipboard } = useNuxtApp();
+
+const phone = props.row.customer__phone || props.row.party__phone || props.row.phone;
+const format = (s) => `${s.slice(0, 3)} ${s.slice(3, 6)} ${s.slice(6, 20)}`;
+const text = format(phone);
+const showmodal = ref();
+
+function call() {
+  window.open(`tel:${phone}`);
+}
+function sms() {
+  window.open(`sms:${phone}`);
+}
+function openZalo() {
+  window.open(`https://zalo.me/${phone}`, "_blank");
+}
+
+function sendSms() {
+  showmodal.value = {
+    component: "user/Sms",
+    title: "Nhắn tin SMS",
+    width: "50%",
+    height: "400px",
+    vbind: {
+      row: props.row,
+      pagename: props.pagename,
+      api: "customersms",
+    },
+  };
+}
+</script>
+
 <template>
   <div>
-    <p class="fsb-30">
-      {{ text }}
-      <a
-        class="ml-3"
-        @click="copy()"
+    <p class="is-flex is-gap-1 is-align-items-center">
+      <span class="is-size-4 font-bold">
+        {{ text }}
+      </span>
+      <button
+        class="button is-small is-light is-primary rounded-full"
+        @click="$copyToClipboard(phone)"
       >
-        <SvgIcon v-bind="{ name: 'copy.svg', type: 'primary', size: 24 }"></SvgIcon>
-      </a>
+        <span class="icon">
+          <Icon
+            name="material-symbols:content-copy-outline-rounded"
+            :size="17"
+          />
+        </span>
+      </button>
     </p>
-    <p class="buttons mt-4">
+    <p class="buttons are-small mt-2">
       <button
         class="button is-primary"
-        @click="call()"
+        @click="call"
       >
-        Call
+        <span class="icon">
+          <Icon
+            name="material-symbols:call-outline-rounded"
+            :size="18"
+          />
+        </span>
+        <span>Call</span>
       </button>
       <button
-        class="button is-primary"
-        @click="sms()"
+        class="button"
+        @click="sms"
       >
         SMS
       </button>
       <button
-        class="button is-primary"
-        @click="openZalo()"
+        class="button"
+        @click="openZalo"
       >
         Zalo
       </button>
     </p>
     <Modal
-      @close="showmodal = undefined"
-      v-bind="showmodal"
       v-if="showmodal"
-    ></Modal>
+      v-bind="showmodal"
+      @close="showmodal = undefined"
+    />
   </div>
 </template>
-<script>
-export default {
-  props: ["row", "pagename"],
-  data() {
-    return {
-      text: undefined,
-      phone: this.row.customer__phone || this.row.party__phone || this.row.phone,
-      showmodal: undefined,
-    };
-  },
-  created() {
-    var format = function (s) {
-      return `${s.slice(0, 3)} ${s.slice(3, 6)} ${s.slice(6, 20)}`;
-    };
-    this.text = format(this.phone);
-  },
-  methods: {
-    call() {
-      window.open(`tel:${this.phone}`);
-    },
-    sms() {
-      window.open(`sms:${this.phone}`);
-    },
-    sendSms() {
-      let api = this.row.code.indexOf("CN") >= 0 ? "customersms" : undefined;
-      if (this.row.code.indexOf("LN") >= 0) api = "loansms";
-      else if (this.row.code.indexOf("TS") >= 0) api = "collateralsms";
-      this.showmodal = {
-        component: "user/Sms",
-        title: "Nhắn tin SMS",
-        width: "50%",
-        height: "400px",
-        vbind: { row: this.row, pagename: this.pagename, api: api },
-      };
-    },
-    copy() {
-      this.$copyToClipboard(this.phone);
-    },
-    openZalo() {
-      window.open(`https://zalo.me/${this.phone}`, "_blank");
-    },
-  },
-};
-</script>
diff --git a/app/components/customer/CustomerForm.vue b/app/components/customer/CustomerForm.vue
index 671b722..ad7d4e3 100644
--- a/app/components/customer/CustomerForm.vue
+++ b/app/components/customer/CustomerForm.vue
@@ -1,405 +1,251 @@
 <template>
-  <div
-    v-if="!selectedCustomerType && isNewCustomer && !props.customerType"
-    class="p-5"
-  >
-    <h3 class="title is-4 mb-5 has-text-centered">
-      {{ isVietnamese ? "Chọn loại khách hàng" : "Select Customer Type" }}
-    </h3>
+  <div v-if="isLoaded && record">
+    <div class="columns is-multiline">
+      <div class="column is-4">
+        <div class="field">
+          <label class="label"
+            >{{ isIndividual ? "Họ và tên" : "Tên tổ chức" }}<b class="ml-1 has-text-danger">*</b></label
+          >
+          <div class="control">
+            <input
+              class="input"
+              type="text"
+              v-model="record.fullname"
+            />
+          </div>
+          <p
+            class="help is-danger"
+            v-if="errors.fullname"
+          >
+            {{ errors.fullname }}
+          </p>
+        </div>
+      </div>
+      <div class="column is-4">
+        <div class="field">
+          <label class="label"
+            >{{ dataLang && findFieldName("phone_number")[lang] }}<b class="ml-1 has-text-danger">*</b></label
+          >
+          <InputPhone
+            :record="record"
+            attr="phone"
+            @phone="selected('phone', $event)"
+          />
+          <p
+            class="help is-danger"
+            v-if="errors.phone"
+          >
+            {{ errors.phone }}
+            <a
+              class="has-text-primary"
+              v-if="existedCustomer"
+              @click="showCustomer()"
+              >Chi tiết</a
+            >
+          </p>
+        </div>
+      </div>
+      <div class="column is-4">
+        <div class="field">
+          <label class="label">Email</label>
+          <InputEmail
+            :record="record"
+            attr="email"
+            @email="selected('email', $event)"
+          />
+          <p
+            class="help is-danger"
+            v-if="errors.email"
+          >
+            {{ errors.email }}
+          </p>
+        </div>
+      </div>
+    </div>
     <div class="columns is-multiline">
       <div class="column is-6">
-        <button
-          :disabled="!$getEditRights('edit', { code: 'individual', category: 'submenu' })"
-          class="button is-large is-fullwidth"
-          style="height: 120px"
-          @click="selectCustomerType(1)"
-        >
-          <div class="has-text-centered">
-            <div>
-              <SvgIcon v-bind="{ name: 'user.svg', type: 'black', size: 40 }"></SvgIcon>
-            </div>
-            <div class="title is-5 mb-0">
-              {{ isVietnamese ? "Cá nhân" : "Individual" }}
-            </div>
-          </div>
-        </button>
-      </div>
-      <div class="column is-6">
-        <button
-          :disabled="!$getEditRights('edit', { code: 'org', category: 'submenu' })"
-          class="button is-large is-fullwidth"
-          style="height: 120px"
-          @click="selectCustomerType(2)"
-        >
-          <div class="has-text-centered">
-            <div>
-              <SvgIcon v-bind="{ name: 'building.svg', type: 'black', size: 40 }"></SvgIcon>
-            </div>
-            <div class="title is-5 mb-0">
-              {{ isVietnamese ? "Tổ chức" : "Organization" }}
-            </div>
-          </div>
-        </button>
-      </div>
-    </div>
-  </div>
-
-  <template v-else-if="isLoaded">
-    <div v-if="record && isLoaded">
-      <div class="columns is-multiline">
-        <div class="column is-4">
-          <div class="field">
-            <label class="label"
-              >{{ isIndividual ? "Họ và tên" : "Tên tổ chức" }}<b class="ml-1 has-text-danger">*</b></label
-            >
-            <div class="control">
-              <input
-                class="input"
-                type="text"
-                v-model="record.fullname"
-              />
-            </div>
-            <p
-              class="help is-danger"
-              v-if="errors.fullname"
-            >
-              {{ errors.fullname }}
-            </p>
-          </div>
-        </div>
-        <div class="column is-4">
-          <div class="field">
-            <label class="label"
-              >{{ dataLang && findFieldName("phone_number")[lang] }}<b class="ml-1 has-text-danger">*</b></label
-            >
-            <InputPhone
-              v-bind="{ record: record, attr: 'phone' }"
-              @phone="selected('phone', $event)"
-            ></InputPhone>
-            <p
-              class="help is-danger"
-              v-if="errors.phone"
-            >
-              {{ errors.phone }}
-              <a
-                class="has-text-primary"
-                v-if="existedCustomer"
-                @click="showCustomer()"
-                >Chi tiết</a
-              >
-            </p>
-          </div>
-        </div>
-        <div class="column is-4">
-          <div class="field">
-            <label class="label">Email</label>
-            <InputEmail
-              v-bind="{ record: record, attr: 'email' }"
-              @email="selected('email', $event)"
-            ></InputEmail>
-            <p
-              class="help is-danger"
-              v-if="errors.email"
-            >
-              {{ errors.email }}
-            </p>
-          </div>
-        </div>
-      </div>
-      <div class="columns is-multiline">
-        <div class="column is-6">
-          <div class="field">
-            <label class="label">Địa chỉ liên hệ</label>
-            <input
-              class="input"
-              type="text"
-              v-model="record.contact_address"
-            />
-          </div>
-        </div>
-        <div class="column is-6">
-          <div class="field">
-            <label class="label">{{ isIndividual ? "Địa chỉ thường trú" : "Địa chỉ đăng ký" }}</label>
-            <input
-              class="input"
-              type="text"
-              v-model="record.address"
-            />
-          </div>
-        </div>
-      </div>
-
-      <div
-        v-if="isOrganization"
-        class="columns is-multiline"
-      >
-        <div class="column is-6">
-          <div class="field">
-            <label class="label">Tài khoản ngân hàng</label>
-            <input
-              class="input"
-              type="text"
-              v-model="organizationData.bank_account"
-            />
-          </div>
-        </div>
-        <div class="column is-6">
-          <div class="field">
-            <label class="label">Tên ngân hàng</label>
-            <input
-              class="input"
-              type="text"
-              v-model="organizationData.bank_name"
-            />
-          </div>
-        </div>
-      </div>
-
-      <div class="columns is-multiline">
-        <div class="column is-3">
-          <div class="field">
-            <label class="label"
-              >{{ isIndividual ? "Giấy tờ tùy thân" : "Giấy tờ" }}<b class="ml-1 has-text-danger">*</b></label
-            >
-            <SearchBox
-              v-bind="{
-                vdata: filteredLegalTypes,
-                api: 'legaltype',
-                field: isVietnamese ? 'name' : 'en',
-                column: ['name', 'en'],
-                first: true,
-                optionid: record.legal_type,
-              }"
-              @option="selected('legal_type', $event)"
-            ></SearchBox>
-          </div>
-        </div>
-        <div class="column is-3">
-          <div class="field">
-            <label class="label"
-              >{{ dataLang && findFieldName("idnum")[lang] }}<b class="ml-1 has-text-danger">*</b></label
-            >
-            <input
-              class="input"
-              type="text"
-              v-model="record.legal_code"
-            />
-            <p
-              class="help is-danger"
-              v-if="errors.legal_code"
-            >
-              {{ errors.legal_code }}
-            </p>
-          </div>
-        </div>
-        <div class="column is-3">
-          <div class="field">
-            <label class="label"
-              >{{ dataLang && findFieldName("issued_date")[lang] }}<b class="ml-1 has-text-danger">*</b></label
-            >
-            <Datepicker
-              v-bind="{
-                record: record,
-                attr: 'issued_date',
-                maxdate: new Date(),
-              }"
-              @date="selected('issued_date', $event)"
-            ></Datepicker>
-            <p
-              class="help is-danger"
-              v-if="errors.issued_date"
-            >
-              {{ errors.issued_date }}
-            </p>
-          </div>
-        </div>
-        <div class="column is-3">
-          <div class="field">
-            <label class="label">{{ dataLang && findFieldName("issued_place")[lang] }}</label>
-            <SearchBox
-              v-bind="{
-                api: 'issuedplace',
-                field: 'name',
-                column: ['name'],
-                first: true,
-                position: 'is-bottom-right',
-                optionid: record.issued_place,
-                filter: { id__in: isIndividual ? [2, 3] : [4, 5] },
-              }"
-              @option="selected('issued_place', $event)"
-            ></SearchBox>
-          </div>
-        </div>
-      </div>
-
-      <div
-        class="columns is-multiline"
-        v-if="isIndividual"
-      >
-        <div class="column is-3">
-          <div class="field">
-            <label class="label">{{ dataLang && findFieldName("gender")[lang] }}</label>
-            <SearchBox
-              v-bind="{
-                vdata: store.sex,
-                api: 'sex',
-                field: isVietnamese ? 'name' : 'en',
-                column: ['name', 'en'],
-                first: true,
-                optionid: individualData.sex,
-              }"
-              @option="selectedIndividual('sex', $event)"
-            ></SearchBox>
-          </div>
-        </div>
-        <div class="column is-3">
-          <div class="field">
-            <label class="label">{{ dataLang && findFieldName("birth_date")[lang] }}</label>
-            <Datepicker
-              v-bind="{
-                record: individualData,
-                attr: 'dob',
-                maxdate: new Date(),
-              }"
-              @date="selectedIndividual('dob', $event)"
-            ></Datepicker>
-            <p
-              class="help is-danger"
-              v-if="errors.dob"
-            >
-              {{ errors.dob }}
-            </p>
-          </div>
-        </div>
-      </div>
-
-      <div class="columns is-multiline">
-        <div class="column is-12">
-          <div class="field">
-            <label class="label">{{ dataLang && findFieldName("note")[lang] }}</label>
-            <textarea
-              class="textarea"
-              v-model="record.note"
-              rows="2"
-            ></textarea>
-          </div>
-        </div>
-      </div>
-
-      <div class="mt-5 mb-4">
-        <h4 class="title is-6 has-text-warning">
-          {{ isIndividual ? "Người liên quan" : "Người đại diện pháp luật" }}
-        </h4>
-      </div>
-      <div
-        class="columns is-multiline mb-0 is-2"
-        v-for="(v, i) in localPeople"
-        :key="i"
-      >
-        <div class="column">
-          <label
-            class="label"
-            v-if="i === 0"
-            >{{ findFieldName("select")[lang] }}</label
-          >
-          <SearchBox
-            v-bind="{
-              api: 'people',
-              field: 'label',
-              column: ['code', 'fullname', 'phone'],
-              first: true,
-              optionid: v.people,
-              position: 'is-top-left',
-              addon: peopleAddon,
-              viewaddon: peopleviewAddon,
-            }"
-            @option="selectPeople($event, v, i)"
-          ></SearchBox>
-        </div>
-        <div class="column is-4">
-          <label
-            class="label"
-            v-if="i === 0"
-            >{{ isIndividual ? "Quan hệ" : "Chức vụ" }}</label
-          >
-          <SearchBox
-            v-bind="{
-              api: 'relation',
-              field: store.lang === 'en' ? 'en' : 'name',
-              column: ['code', 'name', 'en'],
-              first: true,
-              optionid: v.relation,
-              position: 'is-top-left',
-              filter: {
-                id__in: isIndividual ? [1, 2, 3, 4, 5, 6, 7, 8] : [9, 10, 11, 12],
-              },
-            }"
-            @option="selectRelation($event, v, i)"
+        <div class="field">
+          <label class="label">Địa chỉ liên hệ</label>
+          <input
+            class="input"
+            type="text"
+            v-model="record.contact_address"
           />
         </div>
-        <div class="column is-narrow">
-          <label
-            class="label"
-            v-if="i === 0"
-            >&nbsp;</label
-          >
-          <div
-            class="buttons is-gap-0.5 is-flex-wrap-nowrap are-small"
-            style="height: 40px"
-          >
-            <button
-              class="button is-dark"
-              @click="add()"
-            >
-              <span class="icon">
-                <SvgIcon v-bind="{ name: 'add4.svg', type: 'white', size: 20 }"></SvgIcon>
-              </span>
-            </button>
-            <button
-              class="button is-dark"
-              @click="remove(v, i)"
-            >
-              <span class="icon">
-                <SvgIcon v-bind="{ name: 'bin1.svg', type: 'white', size: 20 }"></SvgIcon>
-              </span>
-            </button>
-          </div>
+      </div>
+      <div class="column is-6">
+        <div class="field">
+          <label class="label">{{ isIndividual ? "Địa chỉ thường trú" : "Địa chỉ đăng ký" }}</label>
+          <input
+            class="input"
+            type="text"
+            v-model="record.address"
+          />
         </div>
       </div>
-
-      <div class="mt-5 buttons is-right">
-        <button
-          class="button"
-          @click="emit('close')"
-        >
-          {{ isVietnamese ? "Hủy" : "Cancel" }}
-        </button>
-        <button
-          class="button is-primary"
-          @click="update()"
-        >
-          {{ isVietnamese ? "Lưu lại" : "Save" }}
-        </button>
-      </div>
-
-      <Modal
-        @close="showmodal = undefined"
-        v-bind="showmodal"
-        v-if="showmodal"
-      ></Modal>
     </div>
-  </template>
+
+    <div class="columns is-multiline">
+      <div class="column is-3">
+        <div class="field">
+          <label class="label"
+            >{{ isIndividual ? "Giấy tờ tùy thân" : "Giấy tờ" }}<b class="ml-1 has-text-danger">*</b></label
+          >
+          <SearchBox
+            v-bind="{
+              vdata: filteredLegalTypes,
+              api: 'legaltype',
+              field: isVietnamese ? 'name' : 'en',
+              column: ['name', 'en'],
+              first: true,
+              optionid: record.legal_type,
+            }"
+            @option="selected('legal_type', $event)"
+          ></SearchBox>
+        </div>
+      </div>
+      <div class="column is-3">
+        <div class="field">
+          <label class="label"
+            >{{ dataLang && findFieldName("idnum")[lang] }}<b class="ml-1 has-text-danger">*</b></label
+          >
+          <input
+            class="input"
+            type="text"
+            v-model="record.legal_code"
+          />
+          <p
+            class="help is-danger"
+            v-if="errors.legal_code"
+          >
+            {{ errors.legal_code }}
+          </p>
+        </div>
+      </div>
+      <div class="column is-3">
+        <div class="field">
+          <label class="label"
+            >{{ dataLang && findFieldName("issued_date")[lang] }}<b class="ml-1 has-text-danger">*</b></label
+          >
+          <Datepicker
+            v-bind="{
+              record: record,
+              attr: 'issued_date',
+              maxdate: new Date(),
+            }"
+            @date="selected('issued_date', $event)"
+          ></Datepicker>
+          <p
+            class="help is-danger"
+            v-if="errors.issued_date"
+          >
+            {{ errors.issued_date }}
+          </p>
+        </div>
+      </div>
+      <div class="column is-3">
+        <div class="field">
+          <label class="label">{{ dataLang && findFieldName("issued_place")[lang] }}</label>
+          <SearchBox
+            v-bind="{
+              api: 'issuedplace',
+              field: 'name',
+              column: ['name'],
+              first: true,
+              position: 'is-bottom-right',
+              optionid: record.issued_place,
+              filter: { id__in: isIndividual ? [2, 3] : [4, 5] },
+            }"
+            @option="selected('issued_place', $event)"
+          ></SearchBox>
+        </div>
+      </div>
+    </div>
+
+    <div
+      class="columns is-multiline"
+      v-if="isIndividual"
+    >
+      <div class="column is-3">
+        <div class="field">
+          <label class="label">{{ dataLang && findFieldName("gender")[lang] }}</label>
+          <SearchBox
+            v-bind="{
+              vdata: store.sex,
+              api: 'sex',
+              field: isVietnamese ? 'name' : 'en',
+              column: ['name', 'en'],
+              first: true,
+              optionid: individualData.sex,
+            }"
+            @option="selectedIndividual('sex', $event)"
+          ></SearchBox>
+        </div>
+      </div>
+      <div class="column is-3">
+        <div class="field">
+          <label class="label">{{ dataLang && findFieldName("birth_date")[lang] }}</label>
+          <Datepicker
+            v-bind="{
+              record: individualData,
+              attr: 'dob',
+              maxdate: new Date(),
+            }"
+            @date="selectedIndividual('dob', $event)"
+          ></Datepicker>
+          <p
+            class="help is-danger"
+            v-if="errors.dob"
+          >
+            {{ errors.dob }}
+          </p>
+        </div>
+      </div>
+    </div>
+
+    <div class="columns is-multiline">
+      <div class="column is-12">
+        <div class="field">
+          <label class="label">{{ dataLang && findFieldName("note")[lang] }}</label>
+          <textarea
+            class="textarea"
+            v-model="record.note"
+            rows="2"
+          ></textarea>
+        </div>
+      </div>
+    </div>
+
+    <div class="mt-5 buttons is-right">
+      <button
+        class="button"
+        @click="emit('close')"
+      >
+        {{ isVietnamese ? "Hủy" : "Cancel" }}
+      </button>
+      <button
+        class="button is-primary"
+        @click="update()"
+      >
+        {{ isVietnamese ? "Lưu lại" : "Save" }}
+      </button>
+    </div>
+
+    <Modal
+      v-if="showmodal"
+      v-bind="showmodal"
+      @close="showmodal = undefined"
+    />
+  </div>
 </template>
 
 <script setup>
-import { ref, computed, onMounted, watch } from "vue";
-import { useNuxtApp } from "#app";
+import { isEqual, pick } from "es-toolkit";
+import { useStore } from "~/stores/index";
 import InputPhone from "~/components/common/InputPhone";
 import InputEmail from "~/components/common/InputEmail";
 import SearchBox from "~/components/SearchBox";
 import Datepicker from "~/components/datepicker/Datepicker";
-import { useStore } from "~/stores/index";
-import { isEqual, pick } from "es-toolkit";
 
 const emit = defineEmits(["close", "update", "modalevent"]);
 const { $getdata, $patchapi, $insertapi, $deleteapi, $empty, $errPhone, $resetNull, $snackbar, $copy } = useNuxtApp();
diff --git a/app/components/datatable/DataModel.vue b/app/components/datatable/DataModel.vue
deleted file mode 100644
index 33bf547..0000000
--- a/app/components/datatable/DataModel.vue
+++ /dev/null
@@ -1,314 +0,0 @@
-<template>
-  <div class="columns mx-0">
-    <div class="column is-2">
-      <Caption
-        class="mb-2"
-        v-bind="{ title: 'Tên model (bảng)', type: 'has-text-warning' }"
-      ></Caption>
-      <div class="mb-2">
-        <input
-          class="input"
-          v-model="text"
-          placeholder="Tìm model"
-          @change="findModel()"
-        />
-      </div>
-      <div style="max-height: 80vh; overflow: auto">
-        <div
-          :class="`py-1 border-bottom is-clickable ${current.model === v.model ? 'has-background-primary has-text-white' : ''}`"
-          v-for="v in displayData"
-          @click="changeMenu(v)"
-        >
-          {{ v.model }}
-        </div>
-      </div>
-    </div>
-    <div class="column is-10 py-0 px-0">
-      <div class="tabs mb-3">
-        <ul>
-          <li
-            :class="`${v.code === tab ? 'is-active has-text-weight-bold fs-18' : 'fs-18'}`"
-            v-for="v in tabs"
-          >
-            <a @click="changeTab(v)">{{ v.name }}</a>
-          </li>
-        </ul>
-      </div>
-      <div v-if="tab === 'datatype'">
-        <Caption
-          class="mb-2"
-          v-bind="{ title: 'Kiểu dữ liệu (type)', type: 'has-text-warning' }"
-        ></Caption>
-        <div style="max-height: 75vh; overflow-y: auto">
-          <div
-            class="py-1 border-bottom is-clickable"
-            v-for="x in current.fields"
-          >
-            {{ x.name }}
-            <span class="ml-6 has-text-grey">{{ x.type }}</span>
-            <a
-              class="ml-6 has-text-primary"
-              v-if="x.model"
-              @click="openModel(x)"
-              >{{ x.model }}</a
-            >
-          </div>
-        </div>
-      </div>
-      <template v-else-if="tab === 'table'">
-        <div class="columns mx-0 mb-0 pb-0">
-          <div class="column is-5">
-            <Caption
-              class="mb-1"
-              v-bind="{ title: 'Values', type: 'has-text-warning' }"
-            ></Caption>
-            <input
-              class="input"
-              rows="1"
-              v-model="values"
-              placeholder="Tên trường không chứa dấu cách, vd: code,name"
-            />
-          </div>
-          <div class="column is-4">
-            <Caption
-              class="mb-1"
-              v-bind="{ title: 'Filter', type: 'has-text-warning' }"
-            ></Caption>
-            <input
-              class="input"
-              rows="1"
-              v-model="filter"
-              placeholder="{'code': 'xyz'}"
-            />
-          </div>
-          <div class="column is-2">
-            <Caption
-              class="mb-1"
-              v-bind="{ title: 'Sort', type: 'has-text-warning' }"
-            ></Caption>
-            <input
-              class="input"
-              rows="1"
-              v-model="sort"
-              placeholder="vd: -code,name"
-            />
-          </div>
-          <div class="column is-1">
-            <Caption
-              class="mb-1"
-              v-bind="{ title: 'Load', type: 'has-text-warning' }"
-            ></Caption>
-            <div>
-              <button
-                class="button is-primary has-text-white"
-                @click="loadData()"
-              >
-                Load
-              </button>
-            </div>
-          </div>
-        </div>
-        <Caption
-          class="mb-1"
-          v-bind="{ title: 'Query', type: 'has-text-warning' }"
-        ></Caption>
-        <div class="mb-2">
-          {{ query }}
-          <a
-            class="has-text-primary ml-5"
-            @click="copy()"
-            >copy</a
-          >
-          <p>
-            {{ apiUrl }}
-            <a
-              class="has-text-primary ml-5"
-              @click="$copyToClipboard(apiUrl)"
-              >copy</a
-            >
-            <a
-              class="has-text-primary ml-5"
-              target="_blank"
-              :href="apiUrl"
-              >open</a
-            >
-          </p>
-        </div>
-        <div>
-          <DataTable
-            v-bind="{ pagename: pagename }"
-            v-if="pagedata"
-          />
-        </div>
-      </template>
-      <div v-else>
-        <img
-          id="image"
-          :src="filePath"
-          alt=""
-        />
-        <p class="pl-5">
-          <a
-            class="mr-5"
-            @click="downloadFile()"
-          >
-            <SvgIcon v-bind="{ name: 'download.svg', type: 'black', size: 24 }"></SvgIcon>
-          </a>
-          <a
-            target="_blank"
-            :href="filePath"
-          >
-            <SvgIcon v-bind="{ name: 'open.svg', type: 'black', size: 24 }"></SvgIcon>
-          </a>
-        </p>
-      </div>
-    </div>
-  </div>
-  <Modal
-    @close="showmodal = undefined"
-    v-bind="showmodal"
-    v-if="showmodal"
-  ></Modal>
-</template>
-<script setup>
-import { useStore } from "~/stores/index";
-const {
-  $getdata,
-  $getapi,
-  $createField,
-  $clone,
-  $getpage,
-  $empty,
-  $copyToClipboard,
-  $find,
-  $multiSort,
-  $download,
-  $getpath,
-} = useNuxtApp();
-const store = useStore();
-var pagename = "pagedata3";
-var pagedata = ref();
-pagedata.value = $getpage();
-pagedata.value.perPage = 10;
-store.commit(pagename, pagedata);
-let list = ["LogEntry", "Permission", "ContentType", "Session", "Group"];
-var data = (await $getdata("getmodel")).filter((v) => list.findIndex((x) => x === v.model) < 0);
-data = $multiSort(data, { model: "asc" });
-var current = ref({ fields: [] });
-var tabs = [
-  { code: "datatype", name: "Kiểu dữ liệu" },
-  { code: "table", name: "Dữ liệu" },
-  { code: "datamodel", name: "Data model" },
-];
-var tab = ref("datatype");
-var datatable = ref();
-var query = ref();
-var values, filter;
-var apiUrl = ref();
-var showmodal = ref();
-var text = null;
-var displayData = ref(data);
-var filePath = `${$getpath()}static/files/datamodel.png`;
-var sort = "-id";
-current.value = data[0];
-function changeMenu(v) {
-  values = undefined;
-  filter = undefined;
-  sort = undefined;
-  current.value = v;
-  if (tab.value === "table") loadData();
-}
-async function changeTab(v) {
-  tab.value = v.code;
-  if (v.code === "table") loadData();
-}
-async function loadData() {
-  let vfilter = filter ? filter.trim() : undefined;
-  if (vfilter) {
-    try {
-      vfilter = JSON.parse(vfilter);
-    } catch (error) {
-      alert("Cấu trúc filter có lỗi");
-      vfilter = undefined;
-    }
-  }
-  let params = {
-    values: $empty(values) ? undefined : values.trim(),
-    filter: filter,
-    sort: $empty(sort) ? undefined : sort.trim(),
-  };
-  let modelName = current.value.model;
-  let found = {
-    name: modelName.toLowerCase().replace("_", ""),
-    url: `data/${modelName}/`,
-    url_detail: `data-detail/${modelName}/`,
-    params: params,
-  };
-  query.value = $clone(found);
-  let rs = await $getapi([found]);
-  if (rs === "error") return alert("Đã xảy ra lỗi, hãy xem lại câu lệnh.");
-  datatable.value = rs[0].data.rows;
-  showData();
-
-  // api query
-  const baseUrl = $getpath() + `${query.value.url}`;
-  apiUrl.value = baseUrl;
-  let vparams = !$empty(values) ? { values: values } : null;
-  if (!$empty(filter)) {
-    vparams = vparams ? { values: values, filter: filter } : { filter: filter };
-  }
-  if (!$empty(sort)) {
-    if (vparams) {
-      vparams.sort = sort.trim();
-    } else {
-      vparams = { sort: sort.trim() };
-    }
-  }
-  if (vparams) {
-    let url = new URL(baseUrl);
-    let searchParams = new URLSearchParams(vparams);
-    url.search = searchParams.toString();
-    apiUrl.value = baseUrl + url.search;
-  }
-}
-function showData() {
-  let arr = [];
-  if (!$empty(values)) {
-    let arr1 = values.trim().split(",");
-    arr1.map((v) => {
-      let val = v.trim();
-      let field = $createField(val, val, "string", true);
-      arr.push(field);
-    });
-  } else {
-    current.value.fields.map((v) => {
-      let field = $createField(v.name, v.name, "string", true);
-      arr.push(field);
-    });
-  }
-  let clone = $clone(pagedata.value);
-  clone.fields = arr;
-  clone.data = datatable.value;
-  pagedata.value = undefined;
-  setTimeout(() => (pagedata.value = clone));
-}
-function copy() {
-  $copyToClipboard(JSON.stringify(query.value));
-}
-function openModel(x) {
-  showmodal.value = {
-    component: "datatable/ModelInfo",
-    title: x.model,
-    width: "70%",
-    height: "600px",
-    vbind: { data: data, info: $find(data, { model: x.model }) },
-  };
-}
-function downloadFile() {
-  $download(`${$getpath()}download/?name=datamodel.png&type=file`, "datamodel.png");
-}
-function findModel() {
-  if ($empty(text)) return (displayData.value = data);
-  displayData.value = data.filter((v) => v.model.toLowerCase().indexOf(text.toLowerCase()) >= 0);
-}
-</script>
diff --git a/app/components/datatable/DataTable.vue b/app/components/datatable/DataTable.vue
index 7ce9448..56972db 100644
--- a/app/components/datatable/DataTable.vue
+++ b/app/components/datatable/DataTable.vue
@@ -87,6 +87,7 @@
       </thead>
       <tbody>
         <tr
+          v-if="displayData.length"
           v-for="(v, i) in displayData"
           :key="i"
         >
@@ -107,6 +108,14 @@
             <span v-else>{{ v[field.name] }}</span>
           </td>
         </tr>
+        <tr v-else>
+          <td
+            :colspan="displayFields.length"
+            class="fs-14 has-text-centered has-text-grey py-4"
+          >
+            Không tìm thấy kết quả
+          </td>
+        </tr>
       </tbody>
     </table>
     <DatatablePagination
diff --git a/app/components/common/ViewList.vue b/app/components/datatable/ViewList.vue
similarity index 100%
rename from app/components/common/ViewList.vue
rename to app/components/datatable/ViewList.vue
diff --git a/app/components/marketing/email/dataGmail/EmailSent.vue b/app/components/marketing/email/dataGmail/EmailSent.vue
index de18350..2ac9873 100644
--- a/app/components/marketing/email/dataGmail/EmailSent.vue
+++ b/app/components/marketing/email/dataGmail/EmailSent.vue
@@ -248,9 +248,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
 import axios from "axios";
-import { useNuxtApp } from "nuxt/app";
 import { apiUrl } from "~/components/marketing/email/Email.utils";
 import type dayjs from "dayjs";
 
diff --git a/app/components/media/ChipImage.vue b/app/components/media/ChipImage.vue
index 4dc41e2..310d91d 100644
--- a/app/components/media/ChipImage.vue
+++ b/app/components/media/ChipImage.vue
@@ -12,7 +12,10 @@
         class="p-2 is-flex is-justify-content-center is-align-items-center"
         style="min-height: 120px"
       >
-        <SvgIcon v-bind="{ name: 'pdf.svg', type: 'primary', size: 32 }" />
+        <Icon
+          name="mdi:file-pdf-box"
+          :size="32"
+        />
       </div>
       <div
         v-else
@@ -45,7 +48,10 @@
           @click="this.$copyToClipboard(`${$getpath()}static/files/${file.file__file}`)"
         >
           <span class="icon">
-            <SvgIcon v-bind="{ name: 'copy.svg', type: 'primary', size: 18 }" />
+            <Icon
+              name="material-symbols:content-copy-outline-rounded"
+              :size="18"
+            />
           </span>
         </button>
         <button
@@ -53,7 +59,10 @@
           @click="download()"
         >
           <span class="icon">
-            <SvgIcon v-bind="{ name: 'download.svg', type: 'primary', size: 18 }" />
+            <Icon
+              name="material-symbols:download-rounded"
+              :size="18"
+            />
           </span>
         </button>
         <button
@@ -62,7 +71,10 @@
           @click="askConfirm()"
         >
           <span class="icon">
-            <SvgIcon v-bind="{ name: 'bin1.svg', type: 'primary', size: 18 }" />
+            <Icon
+              name="material-symbols:delete-outline-rounded"
+              :size="18"
+            />
           </span>
         </button>
       </div>
diff --git a/app/components/media/FileActions.vue b/app/components/media/FileActions.vue
index 229db6d..976eb91 100644
--- a/app/components/media/FileActions.vue
+++ b/app/components/media/FileActions.vue
@@ -1,5 +1,5 @@
 <script setup>
-const { $buildFileUrl, $copyToClipboard, $getEditRights } = useNuxtApp();
+const { $buildFileUrl, $copyToClipboard } = useNuxtApp();
 
 const props = defineProps({
   className: String,
@@ -12,24 +12,29 @@ const props = defineProps({
 const url = $buildFileUrl(props.image.file__file);
 </script>
 <template>
-  <div :class="['buttons is-gap-1', className]">
+  <div :class="['buttons has-addons', className]">
     <button
       class="button is-small is-white"
       @click="$copyToClipboard(url)"
       title="Sao chép link"
     >
       <span class="icon">
-        <SvgIcon v-bind="{ name: 'copy.svg', type: 'primary', size: 18 }" />
+        <Icon
+          name="material-symbols:content-copy-outline-rounded"
+          :size="18"
+        />
       </span>
     </button>
     <button
-      v-if="$getEditRights()"
       class="button is-small is-white"
       @click="editImage(image)"
       title="Sửa"
     >
       <span class="icon">
-        <SvgIcon v-bind="{ name: 'edit.svg', type: 'primary', size: 18 }" />
+        <Icon
+          name="material-symbols:edit-outline-rounded"
+          :size="18"
+        />
       </span>
     </button>
     <button
@@ -38,17 +43,23 @@ const url = $buildFileUrl(props.image.file__file);
       title="Tải xuống"
     >
       <span class="icon">
-        <SvgIcon v-bind="{ name: 'download.svg', type: 'success', size: 18 }" />
+        <Icon
+          name="material-symbols:download-rounded"
+          :size="18"
+        />
       </span>
     </button>
     <button
-      v-if="$getEditRights()"
       class="button is-small is-white"
       @click="openDeleteImageConfirm(image)"
       title="Xóa"
     >
       <span class="icon">
-        <SvgIcon v-bind="{ name: 'bin1.svg', type: 'primary', size: 18 }" />
+        <Icon
+          name="material-symbols:delete-outline-rounded"
+          :size="18"
+          class="has-text-danger"
+        />
       </span>
     </button>
   </div>
diff --git a/app/components/media/FileShow.vue b/app/components/media/FileShow.vue
index a733101..7310323 100644
--- a/app/components/media/FileShow.vue
+++ b/app/components/media/FileShow.vue
@@ -1,7 +1,7 @@
 <template>
   <p
-    class="py-1 border-bottom"
     v-for="(v, i) in vfiles"
+    class="py-1"
   >
     <a
       class="mr-4"
@@ -12,34 +12,44 @@
       class="mr-4"
       @click="download(v, i)"
     >
-      <SvgIcon v-bind="{ name: 'download1.svg', type: 'dark', size: 16 }"></SvgIcon>
+      <span class="icon">
+        <Icon
+          name="material-symbols:download-rounded"
+          :size="18"
+        />
+      </span>
     </a>
     <a
+      v-if="show?.delete"
       @click="remove(v, i)"
-      v-if="show ? show.delete : false"
     >
-      <SvgIcon v-bind="{ name: 'bin1.svg', type: 'dark', size: 16 }"></SvgIcon>
+      <span class="icon">
+        <Icon
+          name="material-symbols:delete-outline-rounded"
+          :size="18"
+        />
+      </span>
     </a>
   </p>
   <Modal
-    @close="showmodal = undefined"
-    v-bind="showmodal"
     v-if="showmodal"
-  ></Modal>
+    v-bind="showmodal"
+    @close="showmodal = undefined"
+  />
 </template>
 <script setup>
 const { $copy, $getpath, $download } = useNuxtApp();
 const emit = defineEmits(["remove", "close"]);
-var props = defineProps({
+const props = defineProps({
   files: Object,
   show: Object,
 });
-var showmodal = ref();
-var vfiles = ref($copy(props.files));
+const showmodal = ref();
+const vfiles = ref($copy(props.files));
 function remove(v, i) {
   vfiles.value.splice(i, 1);
-  emit("remove", { v: v, i: i });
-  emit("modalevent", { name: "removefile", data: { v: v, i: i } });
+  emit("remove", { v, i });
+  emit("modalevent", { name: "removefile", data: { v, i } });
   if (vfiles.value.length === 0) emit("close");
 }
 function open(v) {
@@ -62,7 +72,7 @@ function download(v) {
 }
 watch(
   () => props.files,
-  (newVal, oldVal) => {
+  () => {
     vfiles.value = props.files;
   },
 );
diff --git a/app/components/menu/MenuAccount.vue b/app/components/menu/MenuAccount.vue
deleted file mode 100644
index 82bb8f2..0000000
--- a/app/components/menu/MenuAccount.vue
+++ /dev/null
@@ -1,62 +0,0 @@
-<template>
-  <div>
-    <b-tooltip
-      label="Bút toán hạch toán"
-      position="is-left"
-      type="is-primary"
-    >
-      <a
-        class="mr-2"
-        @click="list()"
-      >
-        <SvgIcon v-bind="{ name: 'menu.png', type: 'gray', size: 16 }"></SvgIcon>
-      </a>
-    </b-tooltip>
-    <b-tooltip
-      v-if="$getEditRights()"
-      label="Hạch toán"
-      position="is-left"
-      type="is-primary"
-    >
-      <a
-        class="mr-2"
-        @click="entry()"
-      >
-        <SvgIcon v-bind="{ name: 'usd.png', type: 'gray', size: 16 }"></SvgIcon>
-      </a>
-    </b-tooltip>
-  </div>
-</template>
-<script>
-export default {
-  props: ["row", "api", "pagename"],
-  methods: {
-    list() {
-      let obj = {
-        component: "common/ViewList",
-        title: this.$lang("entry"),
-        width: "80%",
-        height: "400px",
-        vbind: {
-          vbind: {
-            api: "internalentry",
-            setting: "internal-entry-fields",
-            filter: { account__code: this.row.code },
-          },
-        },
-      };
-      this.$emit("open", { name: "dataevent", data: { modal: obj } });
-    },
-    entry() {
-      let obj = {
-        component: "accounting/InternalDeposit",
-        title: this.$lang("accounting-entry"),
-        width: "1000px",
-        height: "450px",
-        vbind: { row: this.row, api: this.api, pagename: this.pagename },
-      };
-      this.$emit("open", { name: "dataevent", data: { modal: obj } });
-    },
-  },
-};
-</script>
diff --git a/app/components/menu/MenuCollab.vue b/app/components/menu/MenuCollab.vue
deleted file mode 100644
index 6c8eccc..0000000
--- a/app/components/menu/MenuCollab.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-  <a
-    class="has-text-link"
-    @click="open"
-    >{{ row["collaborator__code"] }}</a
-  >
-</template>
-<script setup>
-import { useStore } from "~/stores/index";
-const store = useStore();
-const { $getdata } = useNuxtApp();
-
-const emit = defineEmits(["clickevent"]);
-const props = defineProps({
-  row: Object,
-});
-async function open() {
-  const record = await $getdata("collaborator", {
-    first: true,
-    filter: { code: props.row.collaborator__code },
-  });
-  emit("clickevent", {
-    name: "dataevent",
-    data: {
-      modal: {
-        title: store.lang === "en" ? "Collaborator" : "Cộng tác viên",
-        height: "400px",
-        width: "60%",
-        component: "collaborator/CollaboratorView",
-        vbind: { row: record },
-      },
-    },
-  });
-}
-</script>
diff --git a/app/components/menu/MenuPayment.vue b/app/components/menu/MenuPayment.vue
deleted file mode 100644
index 439703c..0000000
--- a/app/components/menu/MenuPayment.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<template>
-  <a
-    class="has-text-link"
-    @click="open"
-    >{{ row["payment_status__code"] }}</a
-  >
-</template>
-<script setup>
-const { $store } = useNuxtApp();
-const emit = defineEmits(["clickevent"]);
-const props = defineProps({
-  row: Object,
-  api: String,
-  pagename: String,
-});
-function open() {
-  emit("clickevent", {
-    name: "dataevent",
-    data: {
-      modal: {
-        title: $store.lang === "en" ? "Payment status" : "Trạng thái thanh toán",
-        height: "300px",
-        width: "600px",
-        component: "application/CommPayment",
-        vbind: { row: props.row, api: props.api, pagename: "pagedata5" },
-      },
-    },
-  });
-}
-</script>
diff --git a/app/components/pos/ChooseIMEIModal.vue b/app/components/pos/ChooseIMEIModal.vue
index 15c56c7..3c91dbf 100644
--- a/app/components/pos/ChooseIMEIModal.vue
+++ b/app/components/pos/ChooseIMEIModal.vue
@@ -54,7 +54,7 @@ onMounted(fetchImeis);
     <Icon
       name="svg-spinners:180-ring-with-bg"
       :size="26"
-      class="has-text-grey-light"
+      class="has-text-primary"
     />
   </div>
   <div v-else-if="imeis.length === 0">
diff --git a/app/plugins/00-datatable.js b/app/plugins/00-datatable.js
index 6fd4f66..b9f0602 100644
--- a/app/plugins/00-datatable.js
+++ b/app/plugins/00-datatable.js
@@ -12,7 +12,7 @@ export default defineNuxtPlugin(() => {
       }
     }
     const keys = Object.keys(obj);
-    let found = arr.find((v) => {
+    const found = arr.find((v) => {
       let valid = true;
       keys.map((key) => {
         let val = obj[key];
@@ -49,7 +49,7 @@ export default defineNuxtPlugin(() => {
       return [];
     }
 
-    let rows = arr.filter((v) => {
+    const rows = arr.filter((v) => {
       let valid = true;
       keys.map((key) => {
         let val = obj[key];
diff --git a/app/plugins/04-components.js b/app/plugins/04-components.js
index e0dd3f9..70d2a3a 100644
--- a/app/plugins/04-components.js
+++ b/app/plugins/04-components.js
@@ -1,3 +1,39 @@
+import SvgIcon from "~/components/SvgIcon.vue";
+import Datepicker from "~/components/datepicker/Datepicker.vue";
+
+import DataTable from "~/components/datatable/DataTable.vue";
+import DataView from "~/components/datatable/DataView.vue";
+import ViewList from "~/components/datatable/ViewList.vue";
+import PivotDataView from "~/components/datatable/PivotDataView.vue";
+
+import ImageGallery from "~/components/media/ImageGallery.vue";
+import FileGallery from "~/components/media/FileGallery.vue";
+import FileUpload from "~/components/media/FileUpload.vue";
+import FileShow from "~/components/media/FileShow.vue";
+import ChipImage from "~/components/media/ChipImage.vue";
+import ImageLayout from "~/components/media/ImageLayout.vue";
+import Email from "~/components/marketing/email/Email.vue";
+
+import Avatarbox from "~/components/common/Avatarbox.vue";
+import CountdownTimer from "~/components/common/CountdownTimer.vue";
+import FormatNumber from "~/components/common/FormatNumber.vue";
+import FormatDate from "~/components/common/FormatDate.vue";
+import InputNumber from "~/components/common/InputNumber.vue";
+import CountWithAdd from "~/components/common/CountWithAdd.vue";
+
+// menu
+import MenuAction from "~/components/menu/MenuAction.vue";
+import MenuApp from "~/components/menu/MenuApp.vue";
+import MenuCust from "~/components/menu/MenuCust.vue";
+import MenuPhone from "~/components/menu/MenuPhone.vue";
+import MenuParam from "~/components/menu/MenuParam.vue";
+import MenuAdd from "~/components/menu/MenuAdd.vue";
+import MenuNote from "~/components/menu/MenuNote.vue";
+import MenuFile from "~/components/menu/MenuFile.vue";
+
+import CustomerForm from "~/components/customer/CustomerForm.vue";
+import CustomerQuickAdd from "~/components/customer/CustomerQuickAdd.vue";
+
 import Dashboard from "~/components/dashboard/Dashboard.vue";
 import Orders from "~/components/orders/Orders.vue";
 import Inventory from "~/components/inventory/Inventory.vue";
@@ -46,47 +82,6 @@ import Customers from "~/components/report/Customers.vue";
 import Goods from "~/components/report/Goods.vue";
 import ReportCashBook from "~/components/report/CashBook.vue";
 import Finance from "~/components/report/Finance.vue";
-import SvgIcon from "~/components/SvgIcon.vue";
-import DataView from "~/components/datatable/DataView.vue";
-import PivotDataView from "~/components/datatable/PivotDataView.vue";
-import PickDay from "~/components/datepicker/PickDay.vue";
-import Datepicker from "~/components/datepicker/Datepicker.vue";
-import ImageGallery from "~/components/media/ImageGallery.vue";
-import FileGallery from "~/components/media/FileGallery.vue";
-import FileUpload from "~/components/media/FileUpload.vue";
-import FileShow from "~/components/media/FileShow.vue";
-import ChipImage from "~/components/media/ChipImage.vue";
-import Avatarbox from "~/components/common/Avatarbox.vue";
-import Email from "~/components/marketing/email/Email.vue";
-import ViewList from "~/components/common/ViewList.vue";
-import Configuration from "~/components/maintab/Configuration.vue";
-
-// format
-import FormatNumber from "~/components/datatable/format/FormatNumber.vue";
-import FormatDate from "~/components/datatable/format/FormatDate.vue";
-import DataTable from "~/components/datatable/DataTable.vue";
-import DataModel from "~/components/datatable/DataModel.vue";
-import InputNumber from "~/components/common/InputNumber.vue";
-
-// menu
-import MenuAction from "~/components/menu/MenuAction.vue";
-import MenuApp from "~/components/menu/MenuApp.vue";
-import MenuCust from "~/components/menu/MenuCust.vue";
-import MenuPhone from "~/components/menu/MenuPhone.vue";
-import MenuParam from "~/components/menu/MenuParam.vue";
-import MenuAdd from "~/components/menu/MenuAdd.vue";
-import MenuCollab from "~/components/menu/MenuCollab.vue";
-import MenuNote from "~/components/menu/MenuNote.vue";
-import MenuFile from "~/components/menu/MenuFile.vue";
-import MenuPayment from "~/components/menu/MenuPayment.vue";
-import ScrollBox from "~/components/datatable/ScrollBox.vue";
-import CountWithAdd from "~/components/common/CountWithAdd.vue";
-import MenuAccount from "~/components/menu/MenuAccount.vue";
-import ImageLayout from "~/components/media/ImageLayout.vue";
-
-import CountdownTimer from "~/components/common/CountdownTimer.vue";
-import CustomerForm from "~/components/customer/CustomerForm.vue";
-import CustomerQuickAdd from "~/components/customer/CustomerQuickAdd.vue";
 
 const components = {
   PivotDataView,
@@ -99,7 +94,6 @@ const components = {
   Email,
   SvgIcon,
   Datepicker,
-  PickDay,
   ImageGallery,
   FileGallery,
   FileUpload,
@@ -108,21 +102,15 @@ const components = {
   ChipImage,
   Avatarbox,
   DataTable,
-  Configuration,
   InputNumber,
   MenuPhone,
   MenuParam,
-  ScrollBox,
-  MenuPayment,
-  DataModel,
   FormatNumber,
   FormatDate,
   MenuApp,
   MenuCust,
   MenuAdd,
-  MenuCollab,
   MenuNote,
-  MenuAccount,
   ImageLayout,
   MenuFile,
   Dashboard,