diff --git a/app/components/SearchBox.vue b/app/components/SearchBox.vue
index 6bae37e..6359716 100644
--- a/app/components/SearchBox.vue
+++ b/app/components/SearchBox.vue
@@ -196,7 +196,10 @@ if (props.first) {
     }
   }
 } else if (props.optionid) {
-  selected.value = await $getdata(props.api, { id: props.optionid }, undefined, true);
+  selected.value = await $getdata(props.api, {
+    filter: { id: props.optionid },
+    first: true,
+  });
 }
 if (selected.value) doSelect(selected.value);
 
@@ -282,7 +285,7 @@ function findObject(val) {
 async function getData() {
   isLoading.value = true;
   params.value.filter = props.filter;
-  const data = await $getdata(props.api, undefined, params.value);
+  const data = await $getdata(props.api, { params: params.value });
   isLoading.value = false;
   return data;
 }
@@ -301,7 +304,7 @@ async function getSuggestions(val) {
   params.value.filter_or = filter_or;
   if (props.filter) params.value.filter = $copy(props.filter);
   isLoading.value = true;
-  suggestions.value = await $getdata(props.api, undefined, params.value);
+  suggestions.value = await $getdata(props.api, { params: params.value });
   isLoading.value = false;
 }
 
diff --git a/app/components/common/ActionInfo.vue b/app/components/common/ActionInfo.vue
index 8e162d8..d8ce46a 100644
--- a/app/components/common/ActionInfo.vue
+++ b/app/components/common/ActionInfo.vue
@@ -249,7 +249,10 @@ var image = ref();
 var file = ref();
 var link = ref();
 var tab = ref("message");
-var record = await $getdata("useraction", { user: 1, action: props.row.id }, undefined, true);
+var record = await $getdata("useraction", {
+  first: true,
+  filter: { user: 1, action: props.row.id },
+});
 var option = ref(record ? "your" : "system");
 function getValue() {
   if (option.value === "your") {
diff --git a/app/components/common/Note.vue b/app/components/common/Note.vue
index ae43652..78f2c47 100644
--- a/app/components/common/Note.vue
+++ b/app/components/common/Note.vue
@@ -26,10 +26,16 @@ const props = defineProps({
   row: Object,
   pagename: String,
 });
-var record = await $getdata("application", { id: props.row.id }, undefined, true);
+let record = await $getdata("application", {
+  filter: { id: props.row.id },
+  first: true,
+});
 async function save() {
   await $updateapi("application", record);
-  record = await $getdata("application", { id: props.row.id }, undefined, true);
+  record = await $getdata("application", {
+    filter: { id: props.row.id },
+    first: true,
+  });
   $updatepage(props.pagename, record);
   emit("close");
 }
diff --git a/app/components/common/NoteInfo.vue b/app/components/common/NoteInfo.vue
index 6c175bb..85afcd7 100644
--- a/app/components/common/NoteInfo.vue
+++ b/app/components/common/NoteInfo.vue
@@ -95,7 +95,7 @@ export default {
   },
   async created() {
     if (!this.row) return;
-    this.data = await this.$getdata(this.api, { ref: this.row.id });
+    this.data = await this.$getdata(this.api, { filter: { ref: this.row.id } });
   },
   computed: {
     login: {
diff --git a/app/components/customer/Company.vue b/app/components/customer/Company.vue
index 9db3fbf..b8b43b8 100644
--- a/app/components/customer/Company.vue
+++ b/app/components/customer/Company.vue
@@ -256,7 +256,10 @@ async function update() {
   if (checkError()) return;
   if (!record.value.id) {
     if (record.value.phone) record.value.phone = record.value.phone.trim();
-    let obj = await $getdata("company", { phone: record.value.phone }, undefined, true);
+    const obj = await $getdata("company", {
+      first: true,
+      filter: { phone: record.value.phone },
+    });
     if (obj) {
       existedCustomer = obj;
       errors.phone = "Số điện thoại đã tồn tại trong hệ thống.";
@@ -271,7 +274,10 @@ async function update() {
   if (rs === "error") return;
   if (!record.value.id) $snackbar(`Khách hàng đã được khởi tạo với mã <b>${rs.code}</b>`, "Success");
   record.value.id = rs.id;
-  let ele = await $getdata("company", { id: rs.id }, null, true);
+  let ele = await $getdata("company", {
+    first: true,
+    filter: { id: rs.id },
+  });
   emit("update", ele);
   emit("modalevent", { name: "dataevent", data: ele });
 }
diff --git a/app/components/customer/CustomerInfo.vue b/app/components/customer/CustomerInfo.vue
index 4848138..df17c4e 100644
--- a/app/components/customer/CustomerInfo.vue
+++ b/app/components/customer/CustomerInfo.vue
@@ -1,229 +1,169 @@
-<template v-if="isLoaded">
-  <div v-if="record && isLoaded">
-    <div class="columns is-multiline mx-0">
-      <div :class="`column is-2 px-0 ${viewport === 1 ? 'px-0 pb-1' : ''}`">
-        <div class="field">
-          <label class="label"
-            >{{ dataLang && findFieldName("custcode")[lang] }}<b class="ml-1 has-text-danger">*</b></label
-          >
-          <div class="control">
-            <input
-              class="input has-text-black"
-              disabled
-              type="text"
-              placeholder=""
-            />
+<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 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>
-          <p
-            class="help is-danger"
-            v-if="errors.code"
-          >
-            {{ errors.code }}
-          </p>
-        </div>
+        </button>
       </div>
-      <div :class="`column is-4 ${viewport === 1 ? 'px-0 pb-1' : ''}`">
-        <div class="field">
-          <label class="label"
-            >{{ dataLang && findFieldName("name")[lang] }}<b class="ml-1 has-text-danger">*</b></label
-          >
-          <div class="control">
-            <input
-              class="input"
-              type="text"
-              placeholder=""
-            />
+      <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>
-          <p
-            class="help is-danger"
-            v-if="errors.fullname"
-          >
-            {{ errors.fullname }}
-          </p>
-        </div>
+        </button>
       </div>
-      <div :class="`column is-3 px-0 ${viewport === 1 ? 'px-0 pb-1' : ''}`">
-        <div class="field">
-          <label class="label"
-            >{{ dataLang && findFieldName("phone_number")[lang] }}<b class="ml-1 has-text-danger">*</b></label
-          >
-          <div class="control">
+    </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', placeholder: '' }"
+              v-bind="{ record: record, attr: 'phone' }"
               @phone="selected('phone', $event)"
+            ></InputPhone>
+            <p
+              class="help is-danger"
+              v-if="errors.phone"
             >
-            </InputPhone>
+              {{ errors.phone }}
+              <a
+                class="has-text-primary"
+                v-if="existedCustomer"
+                @click="showCustomer()"
+                >Chi tiết</a
+              >
+            </p>
           </div>
-          <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-3  ${viewport === 1 ? 'px-0 pb-1' : ''}`">
-        <div class="field">
-          <label class="label">Email</label>
-          <div class="control">
+        <div class="column is-4">
+          <div class="field">
+            <label class="label">Email</label>
             <InputEmail
-              v-bind="{ record: record, attr: 'email', placeholder: '' }"
+              v-bind="{ record: record, attr: 'email' }"
               @email="selected('email', $event)"
+            ></InputEmail>
+            <p
+              class="help is-danger"
+              v-if="errors.email"
             >
-            </InputEmail>
-          </div>
-          <p
-            class="help is-danger"
-            v-if="errors.email"
-          >
-            {{ errors.email }}
-          </p>
-        </div>
-      </div>
-      <div :class="`column is-3 px-0 ${viewport === 1 ? 'px-0 pb-1' : ''}`">
-        <div class="field">
-          <label class="label"
-            >{{ dataLang && findFieldName("gender")[lang] }}<b class="ml-1 has-text-danger">*</b></label
-          >
-          <div class="control">
-            <SearchBox
-              v-bind="{
-                vdata: store.sex,
-                api: 'sex',
-                field: isVietnamese ? 'name' : 'en',
-                column: ['name', 'en'],
-                first: true,
-                optionid: record.sex,
-              }"
-              @option="selected('sex', $event)"
-            ></SearchBox>
+              {{ errors.email }}
+            </p>
           </div>
         </div>
       </div>
-      <div :class="`column is-3 ${viewport === 1 ? 'px-0 pb-1' : ''}`">
-        <div class="field">
-          <label class="label"
-            >{{ dataLang && findFieldName("birth_date")[lang] }}<b class="ml-1 has-text-danger">*</b></label
-          >
-          <div class="control">
-            <Datepicker
-              v-bind="{ record: record, attr: 'dob', maxdate: new Date() }"
-              @date="selected('dob', $event)"
-            >
-            </Datepicker>
-          </div>
-          <p
-            class="help is-danger"
-            v-if="errors.dob"
-          >
-            {{ errors.dob }}
-          </p>
-        </div>
-      </div>
-      <div :class="`column is-3 px-0 ${viewport === 1 ? 'px-0 pb-1' : ''}`">
-        <div class="field">
-          <label class="label"
-            >{{ dataLang && findFieldName("country")[lang] }}<b class="ml-1 has-text-danger">*</b></label
-          >
-          <div class="control">
-            <SearchBox
-              v-bind="{
-                vdata: store.country,
-                api: 'country',
-                field: isVietnamese ? 'name' : 'en',
-                column: ['name', 'en'],
-                first: true,
-                optionid: record.country,
-              }"
-              @option="selected('country', $event)"
-            ></SearchBox>
-          </div>
-        </div>
-      </div>
-      <div :class="`column is-3  ${viewport === 1 ? 'px-0 pb-1' : ''}`">
-        <div class="field">
-          <label class="label"
-            >{{ dataLang && findFieldName("province")[lang] }}<b class="ml-1 has-text-danger">*</b></label
-          >
-          <div class="control">
+      <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"
-              placeholder=""
-              v-model="record.province"
+              v-model="record.contact_address"
             />
           </div>
         </div>
-      </div>
-      <div :class="`column is-3 px-0 ${viewport === 1 ? 'px-0 pb-1' : ''}`">
-        <div class="field">
-          <label class="label"
-            >{{ dataLang && findFieldName("district")[lang] }}<b class="ml-1 has-text-danger">*</b></label
-          >
-          <div class="control">
+        <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"
-              placeholder=""
-              v-model="record.district"
-            />
-          </div>
-        </div>
-      </div>
-      <div :class="`column is-4 ${viewport === 1 ? 'px-0 pb-1' : ''}`">
-        <div class="field">
-          <label class="label"
-            >{{ dataLang && findFieldName("address")[lang] }}<b class="ml-1 has-text-danger">*</b></label
-          >
-          <div class="control">
-            <input
-              class="input"
-              type="text"
-              placeholder=""
               v-model="record.address"
             />
           </div>
-          <p
-            class="help is-danger"
-            v-if="errors.address"
-          ></p>
-        </div>
-      </div>
-      <div :class="`column is-5 px-0 ${viewport === 1 ? 'px-0 pb-1' : ''}`">
-        <div class="field">
-          <label class="label">{{ dataLang && findFieldName("company")[lang] }}</label>
-          <div class="control">
-            <SearchBox
-              v-bind="{
-                api: 'company',
-                field: 'fullname',
-                column: ['fullname'],
-                first: true,
-                optionid: record.company,
-                addon: companyAddon,
-                viewaddon: companyviewAddon,
-              }"
-              @option="selected('company', $event)"
-            ></SearchBox>
-          </div>
         </div>
       </div>
 
-      <div :class="`column is-3 px-0 ${viewport === 1 ? 'px-0 pb-1' : ''}`">
-        <div class="field">
-          <label class="label"
-            >{{ dataLang && findFieldName("personal_id")[lang] }}<b class="ml-1 has-text-danger">*</b></label
-          >
-          <div class="control">
+      <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: store.legaltype,
+                vdata: filteredLegalTypes,
                 api: 'legaltype',
                 field: isVietnamese ? 'name' : 'en',
                 column: ['name', 'en'],
@@ -234,331 +174,304 @@
             ></SearchBox>
           </div>
         </div>
-      </div>
-      <div :class="`column is-3 ${viewport === 1 ? 'px-0 pb-1' : ''}`">
-        <div class="field">
-          <label class="label"
-            >{{ dataLang && findFieldName("idnum")[lang] }} <b class="ml-1 has-text-danger">*</b></label
-          >
-          <div class="control">
+        <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"
-              placeholder=""
               v-model="record.legal_code"
             />
+            <p
+              class="help is-danger"
+              v-if="errors.legal_code"
+            >
+              {{ errors.legal_code }}
+            </p>
           </div>
-          <p
-            class="help is-danger"
-            v-if="errors.legal_code"
-          >
-            {{ errors.legal_code }}
-          </p>
         </div>
-      </div>
-      <div :class="`column is-2 px-0 ${viewport === 1 ? 'px-0 pb-1' : ''}`">
-        <div class="field">
-          <label class="label"
-            >{{ dataLang && findFieldName("issued_date")[lang] }} <b class="ml-1 has-text-danger">*</b></label
-          >
-          <div class="control">
+        <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(),
-                position: 'is-top-left',
               }"
               @date="selected('issued_date', $event)"
             ></Datepicker>
-          </div>
-          <p
-            class="help is-danger"
-            v-if="errors.issued_date"
-          >
-            {{ errors.issued_date }}
-          </p>
-        </div>
-      </div>
-      <div :class="`column is-4 ${viewport === 1 ? 'px-0 pb-1' : ''}`">
-        <div class="field">
-          <label class="label"
-            >{{ dataLang && findFieldName("issued_place")[lang] }} <b class="ml-1 has-text-danger">*</b></label
-          >
-          <div class="control">
-            <input
-              class="input"
-              type="text"
-              placeholder=""
-              v-model="record.issued_place"
-            />
-          </div>
-          <p
-            class="help is-danger"
-            v-if="errors.issued_place"
-          ></p>
-        </div>
-      </div>
-      <div :class="`column is-3 px-0 ${viewport === 1 ? 'px-0 pb-1' : ''}`">
-        <div class="field">
-          <label class="label">Zalo</label>
-          <div class="control">
-            <input
-              class="input"
-              type="text"
-              placeholder=""
-              v-model="record.zalo"
-            />
+            <p
+              class="help is-danger"
+              v-if="errors.issued_date"
+            >
+              {{ errors.issued_date }}
+            </p>
           </div>
         </div>
-      </div>
-      <div :class="`column is-3 ${viewport === 1 ? 'px-0 pb-1' : ''}`">
-        <div class="field">
-          <label class="label">Facebook</label>
-          <div class="control">
-            <input
-              class="input"
-              type="text"
-              placeholder=""
-              v-model="record.facebook"
-            />
+        <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="`column px-0 is-6 ${viewport === 1 ? 'px-0 pb-1' : ''}`">
-        <div class="field">
-          <label class="label">{{ dataLang && findFieldName("note")[lang] }}</label>
-          <div class="control">
-            <textarea
-              class="textarea"
-              :placeholder="isVietnamese ? 'Nhập ghi chú...' : 'Enter note...'"
-              v-model="record.note"
-              rows="1"
-            ></textarea>
+      <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>
-          <p
-            class="help is-danger"
-            v-if="errors.note"
-          >
-            {{ errors.note }}
-          </p>
         </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>
+        <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>
+
+      <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>
-  </div>
-  <div class="mb-4 mt-5">
-    <Caption
-      v-bind="{
-        title: findFieldName('related_person')[lang],
-        type: 'has-text-warning',
-      }"
-    ></Caption>
-  </div>
-  <div
-    class="columns mb-0 mx-0"
-    v-for="(v, i) in people"
-  >
-    <div :class="`column is-7 ${viewport === 1 ? 'px-0 pb-1' : ''}`">
-      <label
-        class="label"
-        v-if="i === 0"
-        >{{ findFieldName("select")[lang] }}<b class="ml-1 has-text-danger">*</b></label
-      >
-      <SearchBox
-        v-bind="{
-          position: 'top',
-          api: 'people',
-          field: 'label',
-          column: ['code', 'fullname', 'phone'],
-          first: true,
-          optionid: v.people,
-          addon: peopleAddon,
-          viewaddon: peopleviewAddon,
-          position: 'is-top-left',
-        }"
-        @option="selectPeople($event, v, i)"
-      >
-      </SearchBox>
-      <p
-        class="help is-danger"
-        v-if="v.error"
-      >
-        {{ v.error }}
-      </p>
-    </div>
-    <div :class="`column is-3 ${viewport === 1 ? 'px-0 pb-1' : ''}`">
-      <label
-        class="label"
-        v-if="i === 0"
-        >{{ findFieldName("relationship")[lang] }}<b class="ml-1 has-text-danger">*</b></label
-      >
-      <SearchBox
-        v-bind="{
-          vdata: store.relation,
-          position: 'top',
-          api: 'relation',
-          field: store.lang === 'en' ? 'en' : 'name',
-          column: ['code', 'name', 'en'],
-          first: true,
-          optionid: v.relation,
-          position: 'is-top-left',
-        }"
-        @option="selectRelation($event, v, i)"
-      >
-      </SearchBox>
-    </div>
-    <div :class="`column ${viewport === 1 ? 'px-0 pb-1' : ''}`">
-      <label
-        class="label"
-        v-if="i === 0"
-        >{{ findFieldName("addmore")[lang] }}...</label
-      >
-      <button
-        class="button px-2 is-dark mr-3"
-        @click="add()"
-      >
-        <SvgIcon v-bind="{ name: 'add1.png', type: 'white', size: 20 }"></SvgIcon>
-      </button>
-      <button
-        class="button px-2 is-warning"
-        @click="remove(v, i)"
-      >
-        <SvgIcon v-bind="{ name: 'bin1.svg', type: 'white', size: 20 }"></SvgIcon>
-      </button>
-    </div>
-  </div>
-  <div class="mt-2">
-    <button
-      class="button is-primary has-text-white"
-      @click="update()"
-    >
-      {{ store.lang === "en" ? "Save" : "Lưu lại" }}
-    </button>
-  </div>
-  <Modal
-    @close="showmodal = undefined"
-    v-bind="showmodal"
-    v-if="showmodal"
-  ></Modal>
+  </template>
 </template>
+
 <script setup>
-import { ref, computed, onMounted, defineEmits } from "vue";
+import { ref, computed, onMounted, watch } from "vue";
 import { useNuxtApp } from "#app";
 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";
-const emit = defineEmits(["close", "update"]);
-const nuxtApp = useNuxtApp();
-const { $getdata, $updateapi, $insertapi, $empty, $errPhone, $resetNull, $snackbar, $copy, $dayjs } = nuxtApp;
-var props = defineProps({
+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();
+
+const props = defineProps({
   pagename: String,
   row: Object,
   application: Object,
+  customerType: Number,
 });
 
-console.log("props", props);
-
 const store = useStore();
 const lang = computed(() => store.lang);
 const isVietnamese = computed(() => lang.value === "vi");
 const dataLang = ref(store.common);
-var viewport = store.viewport;
-var errors = ref({});
-var record = ref({});
+
+const errors = ref({});
+const record = ref({});
+const individualData = ref({});
+const organizationData = ref({});
 const isLoaded = ref(false);
-const dataCustomer = ref(props.row);
+const isNewCustomer = ref(true);
+const selectedCustomerType = ref(null);
+const showmodal = ref();
+const existedCustomer = ref(undefined);
+const people = ref([]);
+const localPeople = ref([]); // { id?: number; people: number; relation: number }[]
 
-if (!props.row && props.application) {
-  //create customer by copying information form application
-  let copy = $copy(props.application);
-  let image = await $getdata("applicationfile", {
-    ref: copy.id,
-    file__doc_type__code__in: ["cccd-mt", "cccd-ms", "avatar"],
-  });
-  copy.image = image.map((v) => v.file);
-  delete copy.id;
-  dataCustomer.value = copy;
-}
+const isIndividual = computed(() => selectedCustomerType.value === 1);
+const isOrganization = computed(() => selectedCustomerType.value === 2);
 
-// const formData = ref({
-//   // fullname: dataCustomer.value.fullname || "",
-//   phone: dataCustomer.value.phone || "",
-//   email: dataCustomer.value.email || "",
-//   dob: dataCustomer.value.dob || null,
-//   country: dataCustomer.value.country || 1,
-//   province: dataCustomer.value.province || null,
-//   district: dataCustomer.value.district || "",
-//   address: dataCustomer.value.address || "",
-//   sex: dataCustomer.value.sex || 1,
-//   note: dataCustomer.value.note || "",
-//   legal_type: dataCustomer.value.legal_type || null,
-//   legal_code: dataCustomer.value.legal_code || "",
-//   issued_date: dataCustomer.value.issue_date || null,
-//   issued_place: dataCustomer.value.issue_place || "",
-//   branch: dataCustomer.value.branch || null,
-//   user: dataCustomer.value.user || null,
-//   collaborator: dataCustomer.value.collaborator || null,
-//   updater: dataCustomer.value.updater || store.login.id,
-//   creator: store.login.id,
-//   image: dataCustomer.value.image || null,
-// });
+const filteredLegalTypes = computed(() => {
+  if (!store.legaltype) return [];
+  return isOrganization.value
+    ? store.legaltype.filter((lt) => lt.id === 4)
+    : store.legaltype.filter((lt) => lt.id !== 4);
+});
 
-var showmodal = ref();
-var existedCustomer = undefined;
-var people = ref([]);
-var peopleAddon = {
-  component: "people/People",
-  with: "65%",
-  height: "600px",
-  title: store.lang === "en" ? "Related persion" : "Người liên quan",
-};
-var peopleviewAddon = {
+const peopleAddon = {
   component: "people/People",
   width: "65%",
-  height: "600px",
+  height: "500px",
   title: store.lang === "en" ? "Related person" : "Người liên quan",
 };
-var companyAddon = {
-  component: "customer/Company",
-  with: "55%",
-  height: "400px",
-  title: store.lang === "en" ? "Company" : "Công ty",
-};
-var companyviewAddon = {
-  component: "customer/Company",
-  width: "55%",
-  height: "400px",
-  title: store.lang === "en" ? "Company" : "Công ty",
-};
+const peopleviewAddon = { ...peopleAddon };
 
-async function initData() {
-  try {
-    if (dataCustomer.value.customer) {
-      record.value = { ...dataCustomer.value.customer, ...formData.value };
-      people.value = [{}];
-    } else if (dataCustomer.value.id) {
-      record.value = props.row;
-      let rows = await $getdata("customerpeople", {
-        customer: dataCustomer.value.id,
-      });
-      people.value = rows.length > 0 ? rows : [{}];
-    } else {
-      const customerCode = await $getdata("getcodeCustomer");
-      record.value = { ...formData.value, code: customerCode };
-      isLoaded.value = true;
-      people.value = [{}];
-    }
-  } catch (error) {
-    console.log("Error in initData:", error);
+function selectCustomerType(type) {
+  const typeNum = Number(type);
+  selectedCustomerType.value = typeNum;
+  record.value = {
+    fullname: "",
+    phone: "",
+    email: "",
+    country: 1,
+    type: typeNum,
+    legal_type: typeNum === 2 ? 4 : null,
+    creator: store.login.id,
+    updater: store.login.id,
+  };
+  if (typeNum === 1) {
+    individualData.value = { dob: null, sex: 1 };
+    organizationData.value = {};
+  } else {
+    individualData.value = {};
+    organizationData.value = { established_date: null };
   }
+  people.value = [{}];
+  isLoaded.value = true;
 }
 
 function findFieldName(code) {
-  const field = dataLang.value.find((item) => item.code === code);
-  return field || { vi: "Không tìm thấy trường", en: "Field not found" };
+  return dataLang.value.find((item) => item.code === code) || { vi: code, en: code };
 }
 
 function showCustomer() {
@@ -566,207 +479,227 @@ function showCustomer() {
     component: "customer/CustomerView",
     width: "60%",
     height: "600px",
-    title: store.lang === "en" ? "Customer" : "Khách hàng",
-    vbind: { row: existedCustomer },
+    title: "Khách hàng",
+    vbind: { row: existedCustomer.value },
   };
 }
 
-const selected = (fieldName, value) => {
-  const finalValue = value !== null && typeof value === "object" ? value.id || value.index : value;
-  record.value[fieldName] = finalValue;
-
-  if (errors.value[fieldName]) {
-    delete errors.value[fieldName];
-  }
+const selected = (f, v) => {
+  record.value[f] = v && typeof v === "object" ? v.id : v;
+  if (errors.value[f]) delete errors.value[f];
 };
+const selectedIndividual = (f, v) => {
+  individualData.value[f] = v && typeof v === "object" ? v.id : v;
+};
+const selectedOrg = (f, v) => {
+  organizationData.value[f] = v && typeof v === "object" ? v.id : v;
+};
+const selectPeople = (opt, _v, i) => {
+  localPeople.value[i].people = opt.id;
+};
+const selectRelation = (opt, _v, i) => {
+  localPeople.value[i].relation = opt ? opt.id : null;
+};
+const add = () => localPeople.value.push({});
+const remove = (_v, i) => {
+  localPeople.value.splice(i, 1);
+  if (localPeople.value.length === 0) localPeople.value = [{}];
+};
+
+watch(
+  people,
+  (val) => {
+    localPeople.value = val.map((cp) => pick(cp, ["id", "people", "relation"]));
+  },
+  { deep: true },
+);
 
 function checkError() {
   errors.value = {};
-
-  if ($empty(record.value.fullname)) {
-    errors.value.fullname = "Họ tên không được bỏ trống";
-  }
-
+  if ($empty(record.value.fullname))
+    errors.value.fullname = isVietnamese.value ? "Họ tên không được bỏ trống" : "Full name is required";
   if ($empty(record.value.phone)) {
-    errors.value.phone = "Số điện thoại không được bỏ trống";
+    errors.value.phone = isVietnamese.value ? "Số điện thoại không được bỏ trống" : "Phone is required";
   } else {
-    let text = $errPhone(record.value.phone);
+    const text = $errPhone(record.value.phone);
     if (text) errors.value.phone = text;
   }
+  if ($empty(record.value.legal_code))
+    errors.value.legal_code = isVietnamese.value ? "Mã số không được bỏ trống" : "Legal code is required";
+  if ($empty(record.value.issued_date)) errors.value.issued_date = "Ngày cấp không được bỏ trống";
 
-  if ($empty(record.value.dob)) {
-    errors.value.dob = isVietnamese.value ? "Ngày sinh không được bỏ trống" : "Date of birth cannot be empty";
-  } else {
-    if (record.value.dob > new Date()) {
-      errors.value.dob = isVietnamese.value
-        ? "Ngày sinh không được lớn hơn ngày hiện tại"
-        : "Date of birth cannot be greater than the current date";
-    }
-    if ($dayjs(new Date()).diff(new Date(record.value.dob), "year") < 18) {
-      errors.value.dob = isVietnamese.value
-        ? "Khách hàng phải đủ 18 tuổi trở lên"
-        : "Customer must be at least 18 years old";
-    }
-  }
-
-  if ($empty(record.value.legal_code)) {
-    errors.value.legal_code = isVietnamese.value ? "Mã số không được bỏ trống" : "Legal code cannot be empty";
-  }
-
-  if ($empty(record.value.issued_date)) {
-    errors.value.issued_date = isVietnamese.value ? "Ngày cấp không được bỏ trống" : "Date of issue cannot be empty";
-  }
-
-  if ($empty(record.value.issued_place)) {
-    errors.value.issued_place = isVietnamese.value ? "Nơi cấp không được bỏ trống" : "Place of issue cannot be empty";
-  }
   return Object.keys(errors.value).length > 0;
 }
-function selectPeople(option, v, i) {
-  let copy = $copy(v);
-  copy.people = option.id;
-  people.value[i] = copy;
-  people.value = $copy(people.value);
-}
-function selectRelation(option, v, i) {
-  let copy = $copy(v);
-  copy.relation = option ? option.id : null;
-  people.value[i] = copy;
-  people.value = $copy(people.value);
-}
-function add() {
-  people.value.push({});
-}
-async function remove(v, i) {
-  if (v.id) await $deleteapi("customerpeople", v.id);
-  people.value.splice(i, 1);
-  if (people.value.length === 0) {
-    setTimeout(() => (people.value = [{}]));
-  }
-}
+
 async function update() {
   try {
     if (checkError()) return;
 
-    var isNewCustomer =
-      !dataCustomer.value?.customer ||
-      dataCustomer.value.customer === null ||
-      dataCustomer.value.customer === undefined ||
-      !record.value.id;
-    if (record.value.id) isNewCustomer = false;
-    if (isNewCustomer) {
-      try {
-        if (record.value.phone) {
-          record.value.phone = record.value.phone.trim();
-          let phoneCheck = await $getdata("customer", { phone: record.value.phone }, undefined, true);
-          if (phoneCheck) {
-            existedCustomer = phoneCheck;
-            errors.value.phone = isVietnamese.value ? "Số điện thoại đã tồn tại." : "Phone number already exists.";
-            return;
-          }
+    if (isNewCustomer.value) {
+      if (record.value.phone) {
+        const phoneCheck = await $getdata("customer", {
+          first: true,
+          filter: { phone: record.value.phone.trim() },
+        });
+        if (phoneCheck) {
+          existedCustomer.value = phoneCheck;
+          errors.value.phone = isVietnamese.value ? "Số điện thoại đã tồn tại." : "Phone already exists.";
+          return;
         }
-
-        // Kiểm tra email
-        if (record.value.email && record.value.email.trim() !== "") {
-          let emailCheck = await $getdata("customer", { email: record.value.email.trim() }, undefined, true);
-          if (emailCheck) {
-            errors.value.email = isVietnamese.value ? "Email đã tồn tại." : "Email already exists.";
-            return;
-          }
+      }
+      if (record.value.email) {
+        const emailCheck = await $getdata("customer", {
+          first: true,
+          filter: { email: record.value.email.trim() },
+        });
+        if (emailCheck) {
+          existedCustomer.value = emailCheck;
+          errors.value.email = isVietnamese.value ? "Email đã tồn tại." : "Email already exists.";
+          return;
         }
-
-        // Kiểm tra legal_code
-        if (record.value.legal_code) {
-          let legalCheck = await $getdata("customer", { legal_code: record.value.legal_code }, undefined, true);
-          if (legalCheck) {
-            errors.value.legal_code = isVietnamese.value
-              ? "Số CMND/CCCD đã tồn tại."
-              : "ID card number already exists.";
-            return;
-          }
+      }
+      if (record.value.legal_code) {
+        const legalCheck = await $getdata("customer", { first: true, filter: { legal_code: record.value.legal_code } });
+        if (legalCheck) {
+          errors.value.legal_code = "Số CMND/CCCD đã tồn tại.";
+          return;
         }
-      } catch (error) {
-        console.log("Error checking duplicates:", error);
       }
     }
 
-    let dataToSend = $resetNull({ ...record.value });
+    let customerData = $resetNull({ ...record.value });
+    customerData.type = selectedCustomerType.value;
+    customerData.updater = store.login.id;
+    customerData.update_time = new Date();
 
-    if (isNewCustomer) {
-      delete dataToSend.id;
-    }
+    let res = isNewCustomer.value
+      ? await $insertapi("customer", customerData, undefined, false)
+      : await $patchapi("customer", customerData, undefined, false);
+    if (!res || res === "error") return;
 
-    if (!dataToSend.note || dataToSend.note.trim() === "") {
-      dataToSend.note = null;
-    }
+    const customerId = res.id;
+    let organizationId = organizationData.value?.id;
 
-    if (!dataToSend.creator) dataToSend.creator = store.login.id;
-    dataToSend.updater = store.login.id;
-    dataToSend.update_time = new Date();
-
-    let rs;
-    if (isNewCustomer) {
-      rs = await $insertapi("customer", dataToSend, undefined, false);
-    } else {
-      rs = await $updateapi("customer", dataToSend);
-    }
-
-    if (rs === "error") {
-      $snackbar("Có lỗi xảy ra khi lưu dữ liệu", "Error");
-      return;
-    }
-    record.value.id = rs.id;
-    const customerData = await $getdata("customer", { id: rs.id }, undefined, true);
-
-    if (isNewCustomer) {
-      // link user=customer
-      await $getdata("linkusercustomer", undefined, { phone: rs.phone });
-      $snackbar(
-        `${
-          isVietnamese.value ? "Khách hàng đã được khởi tạo với mã" : "Customer has been created with code"
-        } <b>${rs.code}</b>`,
-        "Success",
-      );
-    } else {
-      $snackbar(
-        `${
-          isVietnamese.value ? "Khách hàng đã được cập nhật với mã" : "Customer has been updated with code"
-        } <b>${rs.code}</b>`,
-        "Success",
-      );
-    }
-
-    record.value = { ...record.value, ...customerData };
-    emit("update", customerData);
-
-    //Xử lý people relationships nếu có
-    if (people.value && people.value.length > 0) {
-      let filter = people.value.filter((v) => v.people);
-      if (filter.length > 0) {
-        filter.map((v) => (v.customer = rs.id));
-        await $insertapi("customerpeople", filter);
+    if (isIndividual.value) {
+      let indPayload = $resetNull({ ...individualData.value });
+      indPayload.customer = customerId;
+      if (individualData.value.id)
+        await $patchapi("individual", { ...indPayload, id: individualData.value.id }, undefined, false);
+      else await $insertapi("individual", indPayload, undefined, false);
+    } else if (isOrganization.value) {
+      let orgPayload = $resetNull({ ...organizationData.value });
+      orgPayload.customer = customerId;
+      let orgRes;
+      if (organizationData.value.id) {
+        orgRes = await $patchapi("organization", { ...orgPayload, id: organizationData.value.id }, undefined, false);
+      } else {
+        orgRes = await $insertapi("organization", orgPayload, undefined, false);
+      }
+      if (orgRes && orgRes.id) {
+        organizationId = orgRes.id;
       }
     }
 
-    //Xử lý file uploads nếu có
+    // Người liên quan / Người đại diện
+    const apiName = isIndividual.value ? "customerpeople" : "legalrep";
+    let commonPayload = {};
+    if (isIndividual.value) {
+      commonPayload = { customer: customerId };
+    }
+    if (isOrganization.value && organizationId) {
+      commonPayload = { organization: organizationId };
+    }
+
+    const validLocalPeople = localPeople.value.filter((lp) => lp.people && lp.relation).map((lp) => toRaw(lp));
+    const peopleKeys = people.value.map((p) => pick(p, ["id", "people", "relation"]));
+
+    // 1. check existing ids, if people or relation changes -> patch
+    const existingLocalPeople = validLocalPeople.filter((cp) => Boolean(cp.id));
+    existingLocalPeople.forEach((lp) => {
+      const match = peopleKeys.find((p) => isEqual(p, lp));
+      const payload = { ...lp, ...commonPayload };
+
+      if (!match) {
+        $patchapi(apiName, payload);
+      }
+    });
+
+    // 2. if localPeople has and people doesn't -> insert
+    validLocalPeople.forEach((lp) => {
+      if (!lp.id) {
+        const payload = { ...lp, ...commonPayload };
+        $insertapi(apiName, payload);
+      }
+    });
+
+    // 3. if people has and localPeople doesn't -> delete
+    if (peopleKeys.length !== 0 && validLocalPeople.length !== 0) {
+      peopleKeys.forEach((cp) => {
+        const match = validLocalPeople.find((lp) => cp.id === lp.id);
+        if (!match) {
+          $deleteapi(apiName, cp.id);
+        }
+      });
+    }
+
+    // Ảnh
     if (record.value.image && record.value.image.length > 0) {
-      let arr = [];
-      record.value.image.map((v) => arr.push({ ref: record.value.id, file: v }));
-      await $insertapi("customerfile", arr, undefined, false);
+      await $insertapi(
+        "customerfile",
+        record.value.image.map((v) => ({ ref: customerId, file: v })),
+        undefined,
+        false,
+      );
     }
-    emit("update", customerData);
-    emit("close");
-  } catch (error) {
-    console.error("Error in update:", error);
+
+    const completeData = await $getdata("customer", { first: true, filter: { id: customerId } });
+
+    $snackbar(`Khách hàng đã được ${isNewCustomer.value ? "khởi tạo" : "cập nhật"} thành công`, "Thành công");
+
+    emit("modalevent", { name: "dataevent", data: completeData });
+    emit("update", completeData);
+    setTimeout(() => emit("close"), 100);
+  } catch (e) {
+    console.error(e);
   }
 }
 
-onMounted(async () => {
-  try {
-    await initData();
+async function initData() {
+  if (props.row && props.row.id) {
+    isNewCustomer.value = false;
+    selectedCustomerType.value = Number(props.row.type);
+    record.value = { ...props.row };
+    if (isIndividual.value) {
+      const ind = await $getdata("individual", { first: true, filter: { customer: props.row.id } });
+      individualData.value = ind || { dob: null, sex: 1 };
+      const rows = await $getdata("customerpeople", { filter: { customer: props.row.id } });
+      people.value = rows.length > 0 ? rows : [{}];
+    } else {
+      const org = await $getdata("organization", { first: true, filter: { customer: props.row.id } });
+      organizationData.value = org || { established_date: null };
+      if (org && org.id) {
+        const rows = await $getdata("legalrep", { filter: { organization: org.id } });
+        people.value = rows.length > 0 ? rows : [{}];
+      } else {
+        people.value = [{}];
+      }
+    }
     isLoaded.value = true;
-  } catch (error) {
-    console.error("Error loading data:", error);
+  } else if (props.application && props.application.id) {
+    const copyData = $copy(props.application);
+    const type = props.customerType || copyData.type || 1;
+    selectCustomerType(type);
+    record.value = {
+      ...record.value,
+      ...copyData,
+      id: undefined,
+      code: undefined,
+    };
+    individualData.value = { ...individualData.value, ...copyData };
+  } else if (props.customerType) {
+    selectCustomerType(props.customerType);
   }
-});
+}
+
+onMounted(() => initData());
 </script>
diff --git a/app/components/customer/CustomerInfo2.vue b/app/components/customer/CustomerInfo2.vue
deleted file mode 100644
index 819190b..0000000
--- a/app/components/customer/CustomerInfo2.vue
+++ /dev/null
@@ -1,699 +0,0 @@
-<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 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>
-        <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>
-
-      <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>
-</template>
-
-<script setup>
-import { ref, computed, onMounted, watch } from "vue";
-import { useNuxtApp } from "#app";
-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();
-
-const props = defineProps({
-  pagename: String,
-  row: Object,
-  application: Object,
-  customerType: Number,
-});
-
-const store = useStore();
-const lang = computed(() => store.lang);
-const isVietnamese = computed(() => lang.value === "vi");
-const dataLang = ref(store.common);
-
-const errors = ref({});
-const record = ref({});
-const individualData = ref({});
-const organizationData = ref({});
-const isLoaded = ref(false);
-const isNewCustomer = ref(true);
-const selectedCustomerType = ref(null);
-const showmodal = ref();
-const existedCustomer = ref(undefined);
-const people = ref([]);
-const localPeople = ref([]); // { id?: number; people: number; relation: number }[]
-
-const isIndividual = computed(() => selectedCustomerType.value === 1);
-const isOrganization = computed(() => selectedCustomerType.value === 2);
-
-const filteredLegalTypes = computed(() => {
-  if (!store.legaltype) return [];
-  return isOrganization.value
-    ? store.legaltype.filter((lt) => lt.id === 4)
-    : store.legaltype.filter((lt) => lt.id !== 4);
-});
-
-const peopleAddon = {
-  component: "people/People",
-  width: "65%",
-  height: "500px",
-  title: store.lang === "en" ? "Related person" : "Người liên quan",
-};
-const peopleviewAddon = { ...peopleAddon };
-
-function selectCustomerType(type) {
-  const typeNum = Number(type);
-  selectedCustomerType.value = typeNum;
-  record.value = {
-    fullname: "",
-    phone: "",
-    email: "",
-    country: 1,
-    type: typeNum,
-    legal_type: typeNum === 2 ? 4 : null,
-    creator: store.login.id,
-    updater: store.login.id,
-  };
-  if (typeNum === 1) {
-    individualData.value = { dob: null, sex: 1 };
-    organizationData.value = {};
-  } else {
-    individualData.value = {};
-    organizationData.value = { established_date: null };
-  }
-  people.value = [{}];
-  isLoaded.value = true;
-}
-
-function findFieldName(code) {
-  return dataLang.value.find((item) => item.code === code) || { vi: code, en: code };
-}
-
-function showCustomer() {
-  showmodal.value = {
-    component: "customer/CustomerView",
-    width: "60%",
-    height: "600px",
-    title: "Khách hàng",
-    vbind: { row: existedCustomer.value },
-  };
-}
-
-const selected = (f, v) => {
-  record.value[f] = v && typeof v === "object" ? v.id : v;
-  if (errors.value[f]) delete errors.value[f];
-};
-const selectedIndividual = (f, v) => {
-  individualData.value[f] = v && typeof v === "object" ? v.id : v;
-};
-const selectedOrg = (f, v) => {
-  organizationData.value[f] = v && typeof v === "object" ? v.id : v;
-};
-const selectPeople = (opt, _v, i) => {
-  localPeople.value[i].people = opt.id;
-};
-const selectRelation = (opt, _v, i) => {
-  localPeople.value[i].relation = opt ? opt.id : null;
-};
-const add = () => localPeople.value.push({});
-const remove = (_v, i) => {
-  localPeople.value.splice(i, 1);
-  if (localPeople.value.length === 0) localPeople.value = [{}];
-};
-
-watch(
-  people,
-  (val) => {
-    localPeople.value = val.map((cp) => pick(cp, ["id", "people", "relation"]));
-  },
-  { deep: true },
-);
-
-function checkError() {
-  errors.value = {};
-  if ($empty(record.value.fullname))
-    errors.value.fullname = isVietnamese.value ? "Họ tên không được bỏ trống" : "Full name is required";
-  if ($empty(record.value.phone)) {
-    errors.value.phone = isVietnamese.value ? "Số điện thoại không được bỏ trống" : "Phone is required";
-  } else {
-    const text = $errPhone(record.value.phone);
-    if (text) errors.value.phone = text;
-  }
-  if ($empty(record.value.legal_code))
-    errors.value.legal_code = isVietnamese.value ? "Mã số không được bỏ trống" : "Legal code is required";
-  if ($empty(record.value.issued_date)) errors.value.issued_date = "Ngày cấp không được bỏ trống";
-
-  return Object.keys(errors.value).length > 0;
-}
-
-async function update() {
-  try {
-    if (checkError()) return;
-
-    if (isNewCustomer.value) {
-      if (record.value.phone) {
-        const phoneCheck = await $getdata("customer", { phone: record.value.phone.trim() }, undefined, true);
-        if (phoneCheck) {
-          existedCustomer.value = phoneCheck;
-          errors.value.phone = isVietnamese.value ? "Số điện thoại đã tồn tại." : "Phone already exists.";
-          return;
-        }
-      }
-      if (record.value.email) {
-        const emailCheck = await $getdata("customer", { email: record.value.email.trim() }, undefined, true);
-        if (emailCheck) {
-          existedCustomer.value = emailCheck;
-          errors.value.email = isVietnamese.value ? "Email đã tồn tại." : "Email already exists.";
-          return;
-        }
-      }
-      if (record.value.legal_code) {
-        const legalCheck = await $getdata("customer", { legal_code: record.value.legal_code }, undefined, true);
-        if (legalCheck) {
-          errors.value.legal_code = "Số CMND/CCCD đã tồn tại.";
-          return;
-        }
-      }
-    }
-
-    let customerData = $resetNull({ ...record.value });
-    customerData.type = selectedCustomerType.value;
-    customerData.updater = store.login.id;
-    customerData.update_time = new Date();
-
-    let res = isNewCustomer.value
-      ? await $insertapi("customer", customerData, undefined, false)
-      : await $patchapi("customer", customerData, undefined, false);
-    if (!res || res === "error") return;
-
-    const customerId = res.id;
-    let organizationId = organizationData.value?.id;
-
-    if (isIndividual.value) {
-      let indPayload = $resetNull({ ...individualData.value });
-      indPayload.customer = customerId;
-      if (individualData.value.id)
-        await $patchapi("individual", { ...indPayload, id: individualData.value.id }, undefined, false);
-      else await $insertapi("individual", indPayload, undefined, false);
-    } else if (isOrganization.value) {
-      let orgPayload = $resetNull({ ...organizationData.value });
-      orgPayload.customer = customerId;
-      let orgRes;
-      if (organizationData.value.id) {
-        orgRes = await $patchapi("organization", { ...orgPayload, id: organizationData.value.id }, undefined, false);
-      } else {
-        orgRes = await $insertapi("organization", orgPayload, undefined, false);
-      }
-      if (orgRes && orgRes.id) {
-        organizationId = orgRes.id;
-      }
-    }
-
-    // Người liên quan / Người đại diện
-    const apiName = isIndividual.value ? "customerpeople" : "legalrep";
-    let commonPayload = {};
-    if (isIndividual.value) {
-      commonPayload = { customer: customerId };
-    }
-    if (isOrganization.value && organizationId) {
-      commonPayload = { organization: organizationId };
-    }
-
-    const validLocalPeople = localPeople.value.filter((lp) => lp.people && lp.relation).map((lp) => toRaw(lp));
-    const peopleKeys = people.value.map((p) => pick(p, ["id", "people", "relation"]));
-
-    // 1. check existing ids, if people or relation changes -> patch
-    const existingLocalPeople = validLocalPeople.filter((cp) => Boolean(cp.id));
-    existingLocalPeople.forEach((lp) => {
-      const match = peopleKeys.find((p) => isEqual(p, lp));
-      const payload = { ...lp, ...commonPayload };
-
-      if (!match) {
-        $patchapi(apiName, payload);
-      }
-    });
-
-    // 2. if localPeople has and people doesn't -> insert
-    validLocalPeople.forEach((lp) => {
-      if (!lp.id) {
-        const payload = { ...lp, ...commonPayload };
-        $insertapi(apiName, payload);
-      }
-    });
-
-    // 3. if people has and localPeople doesn't -> delete
-    if (peopleKeys.length !== 0 && validLocalPeople.length !== 0) {
-      peopleKeys.forEach((cp) => {
-        const match = validLocalPeople.find((lp) => cp.id === lp.id);
-        if (!match) {
-          $deleteapi(apiName, cp.id);
-        }
-      });
-    }
-
-    // Ảnh
-    if (record.value.image && record.value.image.length > 0) {
-      await $insertapi(
-        "customerfile",
-        record.value.image.map((v) => ({ ref: customerId, file: v })),
-        undefined,
-        false,
-      );
-    }
-
-    const completeData = await $getdata("customer", { id: customerId }, undefined, true);
-
-    $snackbar(`Khách hàng đã được ${isNewCustomer.value ? "khởi tạo" : "cập nhật"} thành công`, "Thành công");
-
-    emit("modalevent", { name: "dataevent", data: completeData });
-    emit("update", completeData);
-    setTimeout(() => emit("close"), 100);
-  } catch (e) {
-    console.error(e);
-  }
-}
-
-async function initData() {
-  if (props.row && props.row.id) {
-    isNewCustomer.value = false;
-    selectedCustomerType.value = Number(props.row.type);
-    record.value = { ...props.row };
-    if (isIndividual.value) {
-      const ind = await $getdata("individual", { customer: props.row.id }, undefined, true);
-      individualData.value = ind || { dob: null, sex: 1 };
-      const rows = await $getdata("customerpeople", { customer: props.row.id });
-      people.value = rows.length > 0 ? rows : [{}];
-    } else {
-      const org = await $getdata("organization", { customer: props.row.id }, undefined, true);
-      organizationData.value = org || { established_date: null };
-      if (org && org.id) {
-        const rows = await $getdata("legalrep", { organization: org.id });
-        people.value = rows.length > 0 ? rows : [{}];
-      } else {
-        people.value = [{}];
-      }
-    }
-    isLoaded.value = true;
-  } else if (props.application && props.application.id) {
-    const copyData = $copy(props.application);
-    const type = props.customerType || copyData.type || 1;
-    selectCustomerType(type);
-    record.value = {
-      ...record.value,
-      ...copyData,
-      id: undefined,
-      code: undefined,
-    };
-    individualData.value = { ...individualData.value, ...copyData };
-  } else if (props.customerType) {
-    selectCustomerType(props.customerType);
-  }
-}
-
-onMounted(() => initData());
-</script>
diff --git a/app/components/customer/CustomerView.vue b/app/components/customer/CustomerView.vue
index 5a1598c..15ab255 100644
--- a/app/components/customer/CustomerView.vue
+++ b/app/components/customer/CustomerView.vue
@@ -326,15 +326,22 @@ export default {
     },
   },
   async created() {
-    this.record = await this.$getdata("customer", { id: this.row.customer || this.row.id }, undefined, true);
+    this.record = await this.$getdata("customer", { first: true, filter: { id: this.row.customer || this.row.id } });
     if (this.isIndividual) {
       this.relatedPeople = await this.$getdata("customerpeople", {
-        customer: this.row.customer || this.row.id,
+        filter: {
+          customer: this.row.customer || this.row.id,
+        },
       });
     } else {
-      const org = await this.$getdata("organization", { customer: this.row.customer || this.row.id }, undefined, true);
+      const org = await this.$getdata("organization", {
+        first: true,
+        filter: { customer: this.row.customer || this.row.id },
+      });
       this.relatedPeople = await this.$getdata("legalrep", {
-        organization: org.id,
+        filter: {
+          organization: org.id,
+        },
       });
     }
   },
@@ -373,17 +380,19 @@ export default {
       // refetch relatedPeople
       if (this.isIndividual) {
         this.relatedPeople = await this.$getdata("customerpeople", {
-          customer: this.row.customer || this.row.id,
+          filter: {
+            customer: this.row.customer || this.row.id,
+          },
         });
       } else {
-        const org = await this.$getdata(
-          "organization",
-          { customer: this.row.customer || this.row.id },
-          undefined,
-          true,
-        );
+        const org = await this.$getdata("organization", {
+          first: true,
+          filter: { customer: this.row.customer || this.row.id },
+        });
         this.relatedPeople = await this.$getdata("legalrep", {
-          organization: org.id,
+          filter: {
+            organization: org.id,
+          },
         });
       }
     },
@@ -398,7 +407,10 @@ export default {
       };
     },
     async openRelatedPerson(peopleId) {
-      const peopleRow = await this.$getdata("people", { id: peopleId }, undefined, true);
+      const peopleRow = await this.$getdata("people", {
+        first: true,
+        filter: { id: peopleId },
+      });
       this.showmodal = {
         component: "people/PeopleView",
         vbind: { row: peopleRow },
diff --git a/app/components/datepicker/EventDetail.vue b/app/components/datepicker/EventDetail.vue
index 38d3967..6f51a2f 100644
--- a/app/components/datepicker/EventDetail.vue
+++ b/app/components/datepicker/EventDetail.vue
@@ -145,7 +145,10 @@ export default {
   },
   methods: {
     async openEvent(event) {
-      let row = await this.$getdata("sale", { id: event.sale }, undefined, true);
+      let row = await this.$getdata("sale", {
+        first: true,
+        filter: { id: event.sale },
+      });
       this.showmodal = {
         title: "Bán hàng",
         height: "500px",
diff --git a/app/components/dialog/ApprovalCode.vue b/app/components/dialog/ApprovalCode.vue
index 4b4f4cb..dbbab87 100644
--- a/app/components/dialog/ApprovalCode.vue
+++ b/app/components/dialog/ApprovalCode.vue
@@ -34,7 +34,10 @@ export default {
     if (!this.approvalcode && this.$store.state.login.approval_code)
       this.approvalcode = this.$store.state.login.approval_code;
     if (!this.approvalcode) {
-      let user = await this.$getdata("user", { id: this.$store.state.login.id }, undefined, true);
+      const user = await this.$getdata("user", {
+        first: true,
+        filter: { id: this.$store.state.login.id },
+      });
       this.approvalcode = user.approval_code;
     }
   },
diff --git a/app/components/dialog/Delete.vue b/app/components/dialog/Delete.vue
index d221ffe..adc8a60 100644
--- a/app/components/dialog/Delete.vue
+++ b/app/components/dialog/Delete.vue
@@ -43,7 +43,7 @@ export default {
       let id = this.vbind.row.id;
       let result;
       if (this.setdeleted) {
-        let record = await this.$getdata(name, { id: id }, undefined, true);
+        let record = await this.$getdata(name, { first: true, filter: { id } });
         record.deleted = 1;
         result = await this.$updateapi(name, record);
       } else result = await this.$deleteapi(name, id);
diff --git a/app/components/imports/Imports.vue b/app/components/imports/Imports.vue
index b79b321..7f29009 100644
--- a/app/components/imports/Imports.vue
+++ b/app/components/imports/Imports.vue
@@ -1,31 +1,9 @@
 <script setup>
 import Products from "@/components/imports/Products.vue";
-const { $snackbar } = useNuxtApp();
 </script>
 <template>
   <div class="fixed-grid has-12-cols">
     <div class="grid">
-      <div class="cell is-col-span-12">
-        <button @click="$snackbar('heyo', 'Success')">click</button>
-        <hr />
-        <div class="is-flex">
-          <div class="size-16 has-background-black"></div>
-          <div class="size-16 has-background-black-bis"></div>
-          <div class="size-16 has-background-black-ter"></div>
-          <div class="size-16 has-background-grey-darker"></div>
-          <div class="size-16 has-background-grey-dark"></div>
-          <div class="size-16 has-background-grey"></div>
-          <div class="size-16 has-background-grey-light"></div>
-          <div class="size-16 has-background-grey-lighter"></div>
-          <div class="size-16 has-background-grey-lightest"></div>
-          <div class="size-16 has-background-white-ter"></div>
-          <div class="size-16 has-background-white-bis"></div>
-          <div class="size-16 has-background-white"></div>
-        </div>
-        <div class="is-flex">
-          <div class="size-16 has-background-grey"></div>
-        </div>
-      </div>
       <div class="cell is-col-span-12">
         <Products />
       </div>
diff --git a/app/components/imports/ProductForm.vue b/app/components/imports/ProductForm.vue
index 26a0b37..73b0b0d 100644
--- a/app/components/imports/ProductForm.vue
+++ b/app/components/imports/ProductForm.vue
@@ -30,16 +30,14 @@ const body = ref($copy(defaultBody.value));
 const productVariant = ref();
 onMounted(async () => {
   if (props.variantId) {
-    const variant = await $getdata(
-      "Product_Variant",
-      undefined,
-      {
+    const variant = await $getdata("Product_Variant", {
+      first: true,
+      params: {
         filter: { id: props.variantId },
         values:
           "id,code,product,product__name,product__os,product__manufacturer,product__battery,product__screen,product__cpu,product__gpu,product__camera_system,product__sim,product__network_technology,product__charging_technology,product__external_storage,product__ip_rating,product__design,color,color__code,color__name,color__hex_code,ram,ram__code,ram__capacity,internal_storage,internal_storage__code,internal_storage__capacity,image,image__path,price,note,create_time,update_time",
       },
-      true,
-    );
+    });
 
     productVariant.value = variant;
 
@@ -64,6 +62,10 @@ onMounted(async () => {
   }
 });
 
+watch(body, (newVal) => {
+  console.dir("body changed", newVal);
+});
+
 const isDirty = computed(() => !isEqual(body.value, defaultBody.value));
 
 function selected(field, data) {
diff --git a/app/components/imports/ProductVariantForm.vue b/app/components/imports/ProductVariantForm.vue
index 79903de..f9a840e 100644
--- a/app/components/imports/ProductVariantForm.vue
+++ b/app/components/imports/ProductVariantForm.vue
@@ -27,16 +27,14 @@ const productVariant = ref();
 onMounted(async () => {
   // if props.variant (edit), fetch data to fill in body
   if (props.variantId) {
-    const variant = await $getdata(
-      "Product_Variant",
-      undefined,
-      {
+    const variant = await $getdata("Product_Variant", {
+      first: true,
+      params: {
         filter: { id: props.variantId },
         values:
           "id,code,product,product__name,product__os,product__manufacturer,product__battery,product__screen,product__cpu,product__gpu,product__camera_system,product__sim,product__network_technology,product__charging_technology,product__external_storage,product__ip_rating,product__design,color,color__code,color__name,color__hex_code,ram,ram__code,ram__capacity,internal_storage,internal_storage__code,internal_storage__capacity,image,image__path,price,note,create_time,update_time",
       },
-      true,
-    );
+    });
 
     productVariant.value = variant;
 
diff --git a/app/components/marketing/email/viewEmail/ViewEmail.vue b/app/components/marketing/email/viewEmail/ViewEmail.vue
index 4ad4dbb..5c2b6b5 100644
--- a/app/components/marketing/email/viewEmail/ViewEmail.vue
+++ b/app/components/marketing/email/viewEmail/ViewEmail.vue
@@ -55,7 +55,7 @@ const isVietnamese = computed(() => $store.lang.toLowerCase() === "vi");
 const paymentScheduleItem = ref(null);
 const contentPaymentQR = ref("");
 
-const emailTemplate = await $getdata("emailtemplate", { id: props.idEmailTemplate }, undefined, false);
+const emailTemplate = await $getdata("emailtemplate", { filter: { id: props.idEmailTemplate }, first: true });
 
 templateEmailContent.value = emailTemplate[0] ?? null;
 
diff --git a/app/components/media/FileCount.vue b/app/components/media/FileCount.vue
index 067a80a..174db10 100644
--- a/app/components/media/FileCount.vue
+++ b/app/components/media/FileCount.vue
@@ -18,8 +18,10 @@ export default {
       let obj;
       if (this.attr === "image_count") {
         let rs = await this.$getdata(this.api, {
-          ref: this.row.id,
-          file__type: 2,
+          filter: {
+            ref: this.row.id,
+            file__type: 2,
+          },
         });
         if (rs.length > 0) {
           obj = {
diff --git a/app/components/media/FileGallery.vue b/app/components/media/FileGallery.vue
index 30ad17b..3b53a29 100644
--- a/app/components/media/FileGallery.vue
+++ b/app/components/media/FileGallery.vue
@@ -40,8 +40,10 @@ export default {
   },
   async created() {
     this.files = await this.$getdata(this.api, {
-      ref: this.row.id,
-      file__type: 1,
+      filter: {
+        ref: this.row.id,
+        file__type: 1,
+      },
     });
     if (this.files.length > 0)
       this.vbind = {
diff --git a/app/components/media/FileInfo.vue b/app/components/media/FileInfo.vue
index b5c70d3..7efe144 100644
--- a/app/components/media/FileInfo.vue
+++ b/app/components/media/FileInfo.vue
@@ -41,7 +41,7 @@ export default {
     };
   },
   async created() {
-    this.record = await this.$getdata("file", { id: this.row.file || this.row.id }, undefined, true);
+    this.record = await this.$getdata("file", { filter: { id: this.row.file || this.row.id }, first: true });
   },
   methods: {
     async save() {
diff --git a/app/components/media/FileList.vue b/app/components/media/FileList.vue
index 15b54a4..0f057d9 100644
--- a/app/components/media/FileList.vue
+++ b/app/components/media/FileList.vue
@@ -23,8 +23,10 @@ export default {
   async created() {
     this.pagedata = this.$getpage();
     this.files = await this.$getdata(this.api, {
-      ref: this.row.id,
-      file__type: 1,
+      filter: {
+        ref: this.row.id,
+        file__type: 1,
+      },
     });
     this.vbind = {
       pagename: this.pagename1,
@@ -62,7 +64,7 @@ export default {
       });
       if (this.pagename) {
         let vapi = this.api.replace("file", "");
-        let ele = await this.$getdata(vapi, { id: this.row.id }, undefined, true);
+        let ele = await this.$getdata(vapi, { filter: { id: this.row.id }, first: true });
         this.$updatepage(this.pagename, ele);
       }
     },
diff --git a/app/components/media/ImageGallery.vue b/app/components/media/ImageGallery.vue
index 4f48bac..b2c155a 100644
--- a/app/components/media/ImageGallery.vue
+++ b/app/components/media/ImageGallery.vue
@@ -67,7 +67,7 @@ export default {
     },
   },
   async created() {
-    this.files = await this.$getdata(this.api, { ref: this.row.id }); //file__type: 2
+    this.files = await this.$getdata(this.api, { filter: { ref: this.row.id } }); //file__type: 2
   },
   methods: {
     async remove(v, i) {
@@ -85,7 +85,7 @@ export default {
       this.files = this.files.concat(rs);
       if (this.pagename) {
         let vapi = this.vapi ? this.vapi : this.api.replace("file", "");
-        let ele = await this.$getdata(vapi, { id: this.row.id }, undefined, true);
+        let ele = await this.$getdata(vapi, { filter: { id: this.row.id }, first: true });
         this.$updatepage(this.pagename, ele);
       }
     },
diff --git a/app/components/media/ImageLayout.vue b/app/components/media/ImageLayout.vue
index 6e0b21f..50c5c29 100644
--- a/app/components/media/ImageLayout.vue
+++ b/app/components/media/ImageLayout.vue
@@ -206,10 +206,12 @@ const layoutMode = ref(layoutModes.GRID);
 const convertToWebp = ref(false);
 const webpQuality = ref(80);
 
-const project = await $getdata("project", { id: props.projectId }, undefined, true);
+const project = await $getdata("project", { filter: { id: props.projectId }, first: true });
 const images = ref([]);
 const isForProduct = computed(() => props.productId !== undefined);
-const product = isForProduct.value ? await $getdata("product", { id: props.productId }, undefined, true) : undefined;
+const product = isForProduct.value
+  ? await $getdata("product", { filter: { id: props.productId }, first: true })
+  : undefined;
 const showmodal = ref();
 const imgshow = ref([]);
 const hashtag = ref();
@@ -219,17 +221,21 @@ async function loadImages() {
   const values =
     "id,file__hashtag,file__code,file,create_time,file__code,file__type,file__doc_type,file__name,file__file,file__size,file__caption,file__user__fullname,";
 
-  const projectImages = await $getdata("projectfile", undefined, {
-    filter: { project: project.id, file__type: 2 },
-    values: values + "project",
-    sort: "-create_time",
+  const projectImages = await $getdata("projectfile", {
+    params: {
+      filter: { project: project.id, file__type: 2 },
+      values: values + "project",
+      sort: "-create_time",
+    },
   });
 
   if (isForProduct.value) {
     const productImages = await $getdata("productfile", undefined, {
-      filter: { product: props.productId, file__type: 2 },
-      values: values + "product",
-      sort: "-create_time",
+      params: {
+        filter: { product: props.productId, file__type: 2 },
+        values: values + "product",
+        sort: "-create_time",
+      },
     });
 
     const sameTemplateImages = projectImages.filter((img) => img.file__name.startsWith(product.template_name));
diff --git a/app/components/media/ImageShow.vue b/app/components/media/ImageShow.vue
index 6505b19..49e73d7 100644
--- a/app/components/media/ImageShow.vue
+++ b/app/components/media/ImageShow.vue
@@ -63,7 +63,7 @@ export default {
   },
   async created() {
     let arr = [];
-    let files = await this.$getdata("file", { file__in: this.image });
+    let files = await this.$getdata("file", { filter: { file__in: this.image } });
     this.image.map((v) => {
       let found = this.$find(files, { file: v });
       arr.push({ image: `${this.$getpath()}download/?name=${v}`, file: found });
diff --git a/app/components/media/Imagebox.vue b/app/components/media/Imagebox.vue
index 7b611e6..a5c5df2 100644
--- a/app/components/media/Imagebox.vue
+++ b/app/components/media/Imagebox.vue
@@ -298,9 +298,9 @@ export default {
       this.timer = setTimeout(() => this.startSearch(e.target.value), 150);
     },
     async startSearch(value) {
-      let filter = { user: this.login.id };
+      const filter = { user: this.login.id };
       if (!this.$empty(value)) filter.name__icontains = value.toLowerCase();
-      this.data = await this.$getdata("file", filter);
+      this.data = await this.$getdata("file", { filter });
     },
     displayInput() {
       this.showUrl = true;
diff --git a/app/components/menu/MenuCollab.vue b/app/components/menu/MenuCollab.vue
index 3f71371..2cdea42 100644
--- a/app/components/menu/MenuCollab.vue
+++ b/app/components/menu/MenuCollab.vue
@@ -15,7 +15,10 @@ const props = defineProps({
   row: Object,
 });
 async function open() {
-  let record = await $getdata("collaborator", { code: props.row.collaborator__code }, undefined, true);
+  const record = await $getdata("collaborator", {
+    first: true,
+    filter: { code: props.row.collaborator__code },
+  });
   emit("clickevent", {
     name: "dataevent",
     data: {
diff --git a/app/components/modal/InternalEntry.vue b/app/components/modal/InternalEntry.vue
index 8f5e8d7..625e6a5 100644
--- a/app/components/modal/InternalEntry.vue
+++ b/app/components/modal/InternalEntry.vue
@@ -319,7 +319,10 @@ export default {
 
           if (parsedItem && parsedItem.code) {
             try {
-              const entryData = await $getdata("internalentry", { code: parsedItem.code }, undefined, true);
+              const entryData = await $getdata("internalentry", {
+                first: true,
+                filter: { code: parsedItem.code },
+              });
               if (entryData) {
                 this.entries.push(entryData);
               }
diff --git a/app/components/modal/Reservation.vue b/app/components/modal/Reservation.vue
index 826fc56..3b04be4 100644
--- a/app/components/modal/Reservation.vue
+++ b/app/components/modal/Reservation.vue
@@ -154,12 +154,10 @@ var contractData = ref(null);
 const loadContract = async () => {
   if (record.value.transaction__code) {
     try {
-      contractData.value = await $getdata(
-        "contract",
-        { transaction__code: record.value.transaction__code },
-        undefined,
-        true,
-      );
+      contractData.value = await $getdata("contract", {
+        first: true,
+        filter: { transaction__code: record.value.transaction__code },
+      });
     } catch (error) {
       console.error("Error loading contract:", error);
       contractData.value = null;
diff --git a/app/components/parameter/AllocationRules.vue b/app/components/parameter/AllocationRules.vue
deleted file mode 100644
index da7bcb4..0000000
--- a/app/components/parameter/AllocationRules.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<template>
-  <div>
-    <div class="fixed-grid has-3-cols">
-      <div class="grid">
-        <div
-          class="cell"
-          v-for="rule in recordRules"
-          :key="rule.code"
-        >
-          <label class="radio">
-            <input
-              type="radio"
-              name="answer"
-              :value="rule.code"
-              v-model="recordCurrent"
-            />
-            {{ isVietnamese ? rule.vi : rule.en }}
-          </label>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script setup>
-const { $updateapi, $snackbar, $getdata, $store } = useNuxtApp();
-var props = defineProps({
-  api: String,
-  pagename: String,
-  row: Object,
-  prefix: String,
-});
-
-const isVietnamese = computed(() => $store.lang.toLowerCase() === "vi");
-
-const recordRules = ref([]);
-const recordCurrent = ref({});
-let current = {};
-
-let foundCurrent = await $getdata(props.api, {
-  category: "system",
-  classify: "current",
-  code: "rule",
-});
-
-if (foundCurrent !== "error" && foundCurrent.length > 0) {
-  recordCurrent.value = foundCurrent[0].detail;
-  current.value = foundCurrent[0];
-}
-
-let foundRules = await $getdata(props.api, {
-  category: "system",
-  classify: "rules",
-});
-if (foundRules !== "error" && foundRules.length > 0) {
-  recordRules.value = foundRules;
-}
-
-watch(recordCurrent, async (newVal) => {
-  current.value.detail = newVal;
-  let rs = await $updateapi(props.api, current.value, null);
-  if (rs === "error") return $snackbar(rs);
-});
-</script>
diff --git a/app/components/parameter/Dealer.vue b/app/components/parameter/Dealer.vue
deleted file mode 100644
index 84ff3e5..0000000
--- a/app/components/parameter/Dealer.vue
+++ /dev/null
@@ -1,107 +0,0 @@
-<template>
-  <div>
-    <div class="field is-horizontal">
-      <div class="field-body">
-        <div class="field is-narrow">
-          <label class="label">Mã <span class="has-text-danger"> * </span> </label>
-          <p class="control">
-            <input
-              class="input"
-              type="text"
-              placeholder=""
-              v-model="record.code"
-              id="code"
-            />
-          </p>
-        </div>
-        <div class="field">
-          <label class="label">Tên <span class="has-text-danger"> * </span> </label>
-          <p class="control">
-            <input
-              class="input"
-              type="text"
-              placeholder=""
-              v-model="record.name"
-            />
-          </p>
-        </div>
-      </div>
-    </div>
-    <div class="field is-horizontal mt-5">
-      <div class="field-body">
-        <div class="field is-narrow">
-          <label class="label">Điện thoại <span class="has-text-danger"> * </span> </label>
-          <p class="control">
-            <input
-              class="input"
-              type="text"
-              placeholder=""
-              v-model="record.phone"
-              id="code"
-            />
-          </p>
-        </div>
-        <div class="field">
-          <label class="label">Email <span class="has-text-danger"> * </span> </label>
-          <p class="control">
-            <input
-              class="input"
-              type="text"
-              placeholder=""
-              v-model="record.email"
-            />
-          </p>
-        </div>
-      </div>
-    </div>
-    <div class="field is-horizontal mt-5">
-      <div class="field-body">
-        <div class="field">
-          <label class="label">Địa chỉ <span class="has-text-danger"> * </span> </label>
-          <p class="control">
-            <input
-              class="input"
-              type="text"
-              placeholder=""
-              v-model="record.address"
-              id="code"
-            />
-          </p>
-        </div>
-      </div>
-    </div>
-    <div class="mt-5">
-      <button
-        class="button is-primary has-text-white"
-        @click="update()"
-      >
-        Lưu lại
-      </button>
-    </div>
-  </div>
-</template>
-<script setup>
-import { onMounted } from "vue";
-const { $copy, $resetNull, $insertrow, $updaterow, $snackbar, $updatepage } = useNuxtApp();
-var props = defineProps({
-  api: String,
-  pagename: String,
-  row: Object,
-  prefix: String,
-});
-const emit = defineEmits(["close", "modalevent"]);
-var record = $copy(props.row || {});
-async function update() {
-  let data = $resetNull(record);
-  let rs = data.id
-    ? await $updaterow(props.api, data, undefined, props.pagename)
-    : await $insertrow(props.api, data, undefined, props.pagename);
-  $updatepage(props.pagename, rs);
-  if (rs === "error") return $snackbar(rs);
-  emit("modalevent", { name: "dataevent", data: rs });
-  emit("close");
-}
-onMounted(() => {
-  document.getElementById("code").focus();
-});
-</script>
diff --git a/app/components/parameter/DeleteCart.vue b/app/components/parameter/DeleteCart.vue
deleted file mode 100644
index cadac15..0000000
--- a/app/components/parameter/DeleteCart.vue
+++ /dev/null
@@ -1,62 +0,0 @@
-<template>
-  <div class="content-delete-cart">
-    <div class="container is-fluid px-4">
-      <div v-if="productRes.length">
-        <p>
-          Không thể thực hiện thao tác vì giỏ hàng vẫn còn sản phẩm. Vui lòng xóa toàn bộ sản phẩm trong giỏ hàng trước
-          khi tiếp tục.
-        </p>
-      </div>
-      <div v-else>
-        <p>
-          Bạn có chắc chắn muốn xóa giỏ hàng [{{ props.row.code.toUpperCase() }} – {{ props.row.name.toUpperCase() }}]
-          không?
-        </p>
-        <div class="action mt-3">
-          <button
-            class="button is-light"
-            @click="handleCancel"
-          >
-            Hủy
-          </button>
-          <button
-            class="button is-primary"
-            @click="handleDeleteCart"
-          >
-            Đồng ý
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-const { $snackbar, $getdata, $deleteapi, $copy } = useNuxtApp();
-
-const emit = defineEmits(["close"]);
-const props = defineProps({
-  row: Object,
-});
-
-const productRes = await $getdata("product", { cart: props.row.id });
-const cartRes = await $getdata("cart");
-$copy("cart", cartRes);
-const handleDeleteCart = async () => {
-  const res = await $deleteapi("cart", props.row.id);
-  if (res) {
-    emit("close");
-    $snackbar("Xóa giỏ hàng thành công");
-  }
-};
-
-const handleCancel = () => {
-  emit("close");
-};
-</script>
-
-<style>
-.content-delete-cart .action .button + .button {
-  margin-left: 20px;
-}
-</style>
diff --git a/app/components/parameter/DeletePayable.vue b/app/components/parameter/DeletePayable.vue
deleted file mode 100644
index cbd5be5..0000000
--- a/app/components/parameter/DeletePayable.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<template>
-  <div class="content-delete-cart">
-    <div class="container is-fluid px-4">
-      <div>
-        <p>
-          Bạn có chắc chắn muốn xóa lịch công nợ thời gian:
-          {{ detail.time }} ngày - mẫu: [{{ detail.name?.toUpperCase() }}] không?
-        </p>
-        <div class="action mt-3">
-          <button
-            class="button is-light"
-            @click="handleCancel"
-          >
-            Hủy
-          </button>
-          <button
-            class="button is-primary"
-            @click="handleDeleteCart"
-          >
-            Đồng ý
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-const { $snackbar, $deleteapi } = useNuxtApp();
-
-const emit = defineEmits(["close"]);
-const props = defineProps({
-  row: Object,
-});
-
-const detail = JSON.parse(props.row?.detail || null);
-
-const handleDeleteCart = async () => {
-  const res = await $deleteapi("bizsetting", props.row.id);
-  if (res) {
-    emit("close");
-    $snackbar("Xóa lịch công nợ thành công");
-  }
-};
-
-const handleCancel = () => {
-  emit("close");
-};
-</script>
-
-<style>
-.content-delete-cart .action .button + .button {
-  margin-left: 20px;
-}
-</style>
diff --git a/app/components/parameter/DiscountType.vue b/app/components/parameter/DiscountType.vue
deleted file mode 100644
index 97ab846..0000000
--- a/app/components/parameter/DiscountType.vue
+++ /dev/null
@@ -1,114 +0,0 @@
-<template>
-  <div>
-    <div class="field is-horizontal">
-      <div class="field-body">
-        <div class="field is-narrow">
-          <label class="label">Mã chiết khấu <span class="has-text-danger"> * </span> </label>
-          <p class="control">
-            <input
-              class="input"
-              type="text"
-              placeholder=""
-              v-model="record.code"
-              id="code"
-              autocomplete="off"
-            />
-          </p>
-        </div>
-        <div class="field">
-          <label class="label">Tên chiết khấu<span class="has-text-danger"> * </span> </label>
-          <p class="control">
-            <input
-              class="input"
-              type="text"
-              placeholder=""
-              v-model="record.name"
-              autocomplete="off"
-            />
-          </p>
-        </div>
-      </div>
-    </div>
-    <div class="mt-5 columns">
-      <div class="column">
-        <label class="label">Giá trị chiết khấu <span class="has-text-danger"> * </span> </label>
-        <p class="control">
-          <input
-            class="input"
-            type="text"
-            placeholder=""
-            v-model="record.value"
-            autocomplete="off"
-          />
-        </p>
-      </div>
-      <div class="column">
-        <label class="label">Loại chiết khấu <span class="has-text-danger"> * </span> </label>
-        <SearchBox
-          v-bind="{
-            api: 'valuetype',
-            field: 'name',
-            column: ['name'],
-            first: true,
-            optionid: record.type,
-          }"
-          :disabled="record.type"
-          @option="documentSelected('type', $event)"
-        ></SearchBox>
-      </div>
-      <div class="column">
-        <label class="label">Phương thức chiết khấu<span class="has-text-danger"> * </span> </label>
-        <SearchBox
-          v-bind="{
-            api: 'discountmethod',
-            field: 'name',
-            column: ['name'],
-            first: true,
-            optionid: record.method,
-          }"
-          :disabled="record.method"
-          @option="documentSelected('method', $event)"
-        ></SearchBox>
-      </div>
-    </div>
-
-    <div class="mt-5">
-      <button
-        class="button is-primary has-text-white"
-        @click="update()"
-      >
-        {{ record.id ? "Cập nhật" : "Tạo mới" }}
-      </button>
-    </div>
-  </div>
-</template>
-<script setup>
-import { onMounted } from "vue";
-const { $copy, $resetNull, $insertrow, $updaterow, $snackbar, $getdata } = useNuxtApp();
-var props = defineProps({
-  api: String,
-  pagename: String,
-  row: Object,
-  prefix: String,
-});
-const emit = defineEmits(["close", "modalevent"]);
-
-var record = $copy(props.row || {});
-console.log("record", record);
-function documentSelected(attr, obj, v) {
-  record[attr] = obj.id;
-}
-
-async function update() {
-  let data = $resetNull(record);
-  let rs = data.id
-    ? await $updaterow(props.api, data, undefined, props.pagename)
-    : await $insertrow(props.api, data, undefined, props.pagename);
-  if (rs === "error") return $snackbar(rs);
-  emit("modalevent", { name: "dataevent", data: rs });
-  emit("close");
-}
-onMounted(() => {
-  document.getElementById("code").focus();
-});
-</script>
diff --git a/app/components/parameter/DuePayables.vue b/app/components/parameter/DuePayables.vue
deleted file mode 100644
index 66f8775..0000000
--- a/app/components/parameter/DuePayables.vue
+++ /dev/null
@@ -1,111 +0,0 @@
-<template>
-  <div class="due-payable">
-    <div class="mt-5 columns">
-      <div class="column is-2">
-        <label class="label"
-          >{{ isVietnamese ? "Thời gian (ngày)" : "Duration (Days)" }}
-          <span class="has-text-danger"> * </span>
-        </label>
-        <p class="control">
-          <input
-            class="input"
-            type="number"
-            placeholder="15,30,60"
-            v-model="record.time"
-            autocomplete="off"
-          />
-        </p>
-      </div>
-      <div class="column is-2">
-        <label class="label"
-          >{{ isVietnamese ? "So sánh" : "Lookup Field" }}
-          <span class="has-text-danger"> * </span>
-        </label>
-        <p class="control">
-          <input
-            class="input"
-            placeholder="gt,lt,gte,lte"
-            v-model="record.lookup"
-            autocomplete="off"
-          />
-        </p>
-      </div>
-      <div class="column">
-        <label class="label"
-          >{{ isVietnamese ? "Mẫu email" : "Email Template" }}
-          <span class="has-text-danger"> * </span>
-        </label>
-        <SearchBox
-          v-bind="{
-            api: 'Email_Template',
-            field: 'name',
-            column: ['name'],
-            first: true,
-            optionid: Number(record.emailTemplate),
-          }"
-          @option="documentSelected('emailTemplate', $event)"
-        ></SearchBox>
-      </div>
-    </div>
-    <div class="mt-5">
-      <button
-        class="button is-primary has-text-white"
-        @click="update()"
-      >
-        {{ dataTemp.id ? "Cập nhật" : "Tạo mới" }}
-      </button>
-    </div>
-  </div>
-</template>
-<script setup>
-const { $copy, $insertrow, $updaterow, $snackbar, $store } = useNuxtApp();
-
-const isVietnamese = computed(() => $store.lang.toLowerCase() === "vi");
-
-var props = defineProps({
-  api: String,
-  pagename: String,
-  row: Object,
-  prefix: String,
-});
-const emit = defineEmits(["close", "modalevent"]);
-const dataTemp = $copy(props.row || {});
-let record = $copy(props.row?.detail || {});
-
-function documentSelected(attr, obj, v) {
-  record[attr] = obj.id;
-  record.name = obj.name;
-}
-
-async function update() {
-  const detail = record;
-  let rs;
-  if (dataTemp.id) {
-    const dataUpdate = {
-      ...dataTemp,
-      detail,
-    };
-
-    console.log("detail", detail);
-    console.log("dataTemp", dataTemp);
-    console.log("dataUpdate", dataUpdate);
-    rs = await $updaterow(props.api, dataUpdate, undefined, props.pagename);
-  } else {
-    const dataInsert = {
-      detail,
-      category: "system",
-      classify: "duepayables",
-      code: `due-${record.lookup}-${record.time}d-${record.emailTemplate}`,
-      vi: "Lịch đến hạn thanh toán",
-    };
-    rs = await $insertrow(props.api, dataInsert, undefined, props.pagename);
-  }
-
-  if (rs === "error") return $snackbar(rs);
-  emit("modalevent", { name: "dataevent", data: rs });
-  emit("close");
-}
-</script>
-
-<!-- <div>{{ row.detail ? JSON.parse(row.detail)?.time : '' }}</div>
-<div>{{ await $getdata('Email_Template', {id:JSON.parse(row.detail)?.emailTemplate})}}</div> -->
diff --git a/app/components/parameter/GiftType.vue b/app/components/parameter/GiftType.vue
deleted file mode 100644
index d46c6fd..0000000
--- a/app/components/parameter/GiftType.vue
+++ /dev/null
@@ -1,82 +0,0 @@
-<template>
-  <div>
-    <div class="field is-horizontal">
-      <div class="field-body">
-        <div class="field is-narrow">
-          <label class="label">Mã quà tặng <span class="has-text-danger"> * </span> </label>
-          <p class="control">
-            <input
-              class="input"
-              type="text"
-              placeholder=""
-              v-model="record.code"
-              id="code"
-              autocomplete="off"
-            />
-          </p>
-        </div>
-        <div class="field">
-          <label class="label">Tên quà tặng<span class="has-text-danger"> * </span> </label>
-          <p class="control">
-            <input
-              class="input"
-              type="text"
-              placeholder=""
-              v-model="record.name"
-              autocomplete="off"
-            />
-          </p>
-        </div>
-      </div>
-    </div>
-    <div class="mt-5 columns">
-      <div class="column">
-        <label class="label">Chi tiết quà tặng<span class="has-text-danger"> * </span> </label>
-        <p class="control">
-          <input
-            class="input"
-            type="text"
-            placeholder=""
-            v-model="record.detail"
-            autocomplete="off"
-          />
-        </p>
-      </div>
-    </div>
-
-    <div class="mt-5">
-      <button
-        class="button is-primary has-text-white"
-        @click="update()"
-      >
-        {{ record.id ? "Cập nhật" : "Tạo mới" }}
-      </button>
-    </div>
-  </div>
-</template>
-<script setup>
-import { onMounted } from "vue";
-const { $copy, $resetNull, $insertrow, $updaterow, $snackbar, $getdata } = useNuxtApp();
-var props = defineProps({
-  api: String,
-  pagename: String,
-  row: Object,
-  prefix: String,
-});
-const emit = defineEmits(["close", "modalevent"]);
-
-var record = $copy(props.row || {});
-
-async function update() {
-  let data = $resetNull(record);
-  let rs = data.id
-    ? await $updaterow(props.api, data, undefined, props.pagename)
-    : await $insertrow(props.api, data, undefined, props.pagename);
-  if (rs === "error") return $snackbar(rs);
-  emit("modalevent", { name: "dataevent", data: rs });
-  emit("close");
-}
-onMounted(() => {
-  document.getElementById("code").focus();
-});
-</script>
diff --git a/app/components/parameter/ImportData.vue b/app/components/parameter/ImportData.vue
index 6382509..ac39bfb 100644
--- a/app/components/parameter/ImportData.vue
+++ b/app/components/parameter/ImportData.vue
@@ -163,7 +163,7 @@ export default {
     };
   },
   async created() {
-    this.setting = await this.$getdata("importsetting", { code: this.code }, undefined, true);
+    this.setting = await this.$getdata("importsetting", { first: true, filter: { code: this.code } });
     this.requireFields = this.setting.detail;
   },
   beforeUnmount() {
diff --git a/app/components/parameter/NewCart.vue b/app/components/parameter/NewCart.vue
deleted file mode 100644
index 2130477..0000000
--- a/app/components/parameter/NewCart.vue
+++ /dev/null
@@ -1,168 +0,0 @@
-<template>
-  <div class="container is-fluid px-4">
-    <div class="field is-horizontal">
-      <div class="field-body">
-        <!-- Mã giỏ hàng -->
-        <div class="field is-narrow">
-          <label class="label"> Mã <span class="has-text-danger">*</span> </label>
-          <div class="control">
-            <input
-              class="input"
-              type="text"
-              placeholder="Nhập mã"
-              v-model="record.code"
-              id="code"
-            />
-          </div>
-        </div>
-
-        <!-- Tên giỏ hàng -->
-        <div class="field">
-          <label class="label"> Tên giỏ hàng <span class="has-text-danger">*</span> </label>
-          <div class="control">
-            <input
-              class="input"
-              type="text"
-              placeholder="Nhập tên giỏ hàng"
-              v-model="record.name"
-            />
-          </div>
-        </div>
-
-        <!-- Index -->
-        <div
-          class="field"
-          style="width: 120px"
-        >
-          <label class="label"> Index <span class="has-text-danger">*</span> </label>
-          <div class="control">
-            <input
-              class="input"
-              type="number"
-              placeholder="0"
-              v-model.number="record.index"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Đại lý -->
-    <div class="field mt-5">
-      <label class="label">Đại lý</label>
-      <div class="control">
-        <SearchBox
-          v-bind="{
-            api: 'dealer',
-            field: 'code',
-            column: 'code',
-            optionid: record.dealer || null,
-            first: true,
-            viewaddon: viewAddon,
-            addon: newAddon,
-          }"
-          @option="dealerSelected"
-        />
-      </div>
-    </div>
-
-    <!-- Nút lưu -->
-    <div class="field is-grouped is-grouped-right mt-6">
-      <div class="control">
-        <button
-          class="button is-primary has-text-white"
-          @click="update"
-        >
-          {{ record.id ? "Cập nhật" : "Thêm mới" }}
-        </button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted, nextTick } from "vue";
-const { $copy, $resetNull, $snackbar, $getdata, $insertapi, $updateapi } = useNuxtApp();
-
-// Chỉ nhận id (không nhận row)
-const props = defineProps({
-  prefix: String,
-  id: [Number, String, null],
-});
-
-const emit = defineEmits(["close", "modalevent"]);
-
-const record = ref({
-  code: "",
-  name: "",
-  index: 0,
-  dealer: null,
-});
-
-const viewAddon = {};
-const newAddon = {};
-
-function dealerSelected(obj) {
-  record.value.dealer = obj ? obj.id : null;
-}
-
-async function loadCart() {
-  if (!props.id) {
-    record.value = {
-      code: "",
-      name: "",
-      index: 0,
-      dealer: null,
-    };
-    return;
-  }
-
-  try {
-    const row = await $getdata("cart", { id: props.id }, null, true);
-
-    if (row) {
-      record.value = $copy(row);
-    } else {
-      $snackbar("Không tìm thấy giỏ hàng này");
-      emit("close");
-    }
-  } catch (error) {
-    console.error("Lỗi khi tải dữ liệu giỏ hàng:", error);
-    $snackbar("Lỗi tải dữ liệu");
-    emit("close");
-  }
-}
-
-// Lưu dữ liệu
-async function update() {
-  const data = $resetNull(record.value);
-
-  try {
-    let rs;
-    if (data.id) {
-      rs = await $updateapi("cart", data);
-    } else {
-      rs = await $insertapi("cart", data);
-    }
-
-    if (rs === "error") {
-      $snackbar("Lỗi khi lưu dữ liệu");
-      return;
-    }
-
-    $snackbar("Lưu thành công!");
-    emit("modalevent", { name: "dataevent", data: rs });
-    emit("close");
-  } catch (err) {
-    $snackbar("Có lỗi xảy ra khi lưu");
-    console.error(err);
-  }
-}
-
-// Khởi tạo khi mở modal
-onMounted(async () => {
-  await loadCart();
-  await nextTick();
-  document.getElementById("code")?.focus();
-});
-</script>
diff --git a/app/components/parameter/OverduePayables.vue b/app/components/parameter/OverduePayables.vue
deleted file mode 100644
index 923d23d..0000000
--- a/app/components/parameter/OverduePayables.vue
+++ /dev/null
@@ -1,90 +0,0 @@
-<template>
-  <div class="over-due-payable">
-    <div class="mt-5 columns">
-      <div class="column">
-        <label class="label"
-          >{{ isVietnamese ? "Thời gian (ngày)" : "Duration (Days)" }}
-          <span class="has-text-danger"> * </span>
-        </label>
-        <p class="control">
-          <input
-            class="input"
-            type="number"
-            placeholder=""
-            v-model="record.time"
-            autocomplete="off"
-          />
-        </p>
-      </div>
-      <div class="column">
-        <label class="label"
-          >{{ isVietnamese ? "Mẫu email" : "Email Template" }}
-          <span class="has-text-danger"> * </span>
-        </label>
-        <SearchBox
-          v-bind="{
-            api: 'Email_Template',
-            field: 'name',
-            column: ['name'],
-            first: true,
-            optionid: Number(record.emailTemplate),
-          }"
-          @option="documentSelected('emailTemplate', $event)"
-        ></SearchBox>
-      </div>
-    </div>
-    <div class="mt-5">
-      <button
-        class="button is-primary has-text-white"
-        @click="update()"
-      >
-        {{ dataTemp.id ? "Cập nhật" : "Tạo mới" }}
-      </button>
-    </div>
-  </div>
-</template>
-<script setup>
-const { $copy, $insertrow, $updaterow, $snackbar, $store } = useNuxtApp();
-
-const isVietnamese = computed(() => $store.lang.toLowerCase() === "vi");
-
-var props = defineProps({
-  api: String,
-  pagename: String,
-  row: Object,
-  prefix: String,
-});
-const emit = defineEmits(["close", "modalevent"]);
-const dataTemp = $copy(props.row || {});
-let record = $copy(props.row?.detail || {});
-
-function documentSelected(attr, obj, v) {
-  record[attr] = obj.id;
-  record.name = obj.name;
-}
-
-async function update() {
-  const detail = record;
-  let rs;
-  if (dataTemp.id) {
-    const dataUpdate = {
-      ...dataTemp,
-      detail,
-    };
-    rs = await $updaterow(props.api, dataUpdate, undefined, props.pagename);
-  } else {
-    const dataInsert = {
-      detail,
-      category: "system",
-      classify: "overduepayables",
-      code: `overdue-${record.lookup}-${record.time}-${record.emailTemplate}`,
-      vi: "Lịch quá hạn thanh toán",
-    };
-    rs = await $insertrow(props.api, dataInsert, undefined, props.pagename);
-  }
-
-  if (rs === "error") return $snackbar(rs);
-  emit("modalevent", { name: "dataevent", data: rs });
-  emit("close");
-}
-</script>
diff --git a/app/components/parameter/SalePolicy.vue b/app/components/parameter/SalePolicy.vue
deleted file mode 100644
index 28f4558..0000000
--- a/app/components/parameter/SalePolicy.vue
+++ /dev/null
@@ -1,471 +0,0 @@
-<template>
-  <div>
-    <!-- Thông tin Sale Policy -->
-    <div class="m-0">
-      <Caption v-bind="{ title: 'Thông tin chính sách', type: 'has-text-warning' }"></Caption>
-    </div>
-
-    <div class="columns is-multiline">
-      <div class="column is-1">
-        <div class="field">
-          <label class="label">Thứ tự</label>
-          <div class="control">
-            <input
-              class="input"
-              type="number"
-              v-model.number="record.index"
-              placeholder="Thứ tự"
-            />
-          </div>
-        </div>
-      </div>
-
-      <div class="column is-5">
-        <div class="field">
-          <label class="label">Mã <span class="has-text-danger">*</span></label>
-          <div class="control">
-            <input
-              class="input"
-              type="text"
-              v-model="record.code"
-              id="code"
-              placeholder="Mã CS"
-            />
-          </div>
-          <p
-            class="help is-danger"
-            v-if="errors.code"
-          >
-            {{ errors.code }}
-          </p>
-        </div>
-      </div>
-
-      <div class="column is-6">
-        <div class="field">
-          <label class="label">Tên chính sách <span class="has-text-danger">*</span></label>
-          <div class="control">
-            <input
-              class="input"
-              type="text"
-              v-model="record.name"
-              placeholder="Tên"
-            />
-          </div>
-          <p
-            class="help is-danger"
-            v-if="errors.name"
-          >
-            {{ errors.name }}
-          </p>
-        </div>
-      </div>
-
-      <div class="column is-4">
-        <div class="field">
-          <label class="label">Đặt cọc <span class="has-text-danger">*</span></label>
-          <div class="control">
-            <InputNumber
-              v-bind="{
-                record: record,
-                attr: 'deposit',
-                defaultValue: true,
-              }"
-              @number="selected('deposit', $event)"
-            />
-          </div>
-          <p
-            class="help is-danger"
-            v-if="errors.deposit"
-          >
-            {{ errors.deposit }}
-          </p>
-        </div>
-      </div>
-
-      <div class="column is-4">
-        <div class="field">
-          <label class="label">PT thanh toán <span class="has-text-danger">*</span></label>
-          <div class="control">
-            <SearchBox
-              v-bind="{
-                api: 'paymentmethod',
-                field: 'name',
-                column: ['name'],
-                first: true,
-                optionid: record.method,
-              }"
-              @option="selected('method', $event)"
-            />
-          </div>
-          <p
-            class="help is-danger"
-            v-if="errors.method"
-          >
-            {{ errors.method }}
-          </p>
-        </div>
-      </div>
-
-      <div class="column is-3">
-        <div class="field">
-          <label class="label">% Phân bổ HĐ</label>
-          <div class="control">
-            <input
-              class="input"
-              type="number"
-              v-model.number="record.contract_allocation_percentage"
-              placeholder="%"
-              min="0"
-              max="100"
-            />
-          </div>
-        </div>
-      </div>
-
-      <div class="column is-1">
-        <div class="field">
-          <label class="label">
-            Kích hoạt
-            <span class="has-text-danger">*</span>
-          </label>
-          <div class="control">
-            <div
-              class="is-flex is-align-items-center is-clickable is-gap-2"
-              @click="record.enable = !record.enable"
-            >
-              <SvgIcon
-                v-bind="{
-                  name: record.enable ? 'checked.svg' : 'uncheck.svg',
-                  type: record.enable ? 'primary' : 'twitter',
-                  size: 22,
-                }"
-              />
-              <span>Cho phép</span>
-            </div>
-          </div>
-          <p
-            class="help is-danger"
-            v-if="errors.enable"
-          >
-            {{ errors.enable }}
-          </p>
-        </div>
-      </div>
-    </div>
-
-    <!-- Payment Plan -->
-    <div class="m-0">
-      <Caption v-bind="{ title: 'Kế hoạch thanh toán', type: 'has-text-warning' }"></Caption>
-    </div>
-
-    <div
-      class="p-3"
-      v-for="(plan, i) in paymentPlans"
-      :key="i"
-      style="position: relative"
-    >
-      <a
-        v-if="paymentPlans.length > 1"
-        class="has-text-danger is-size-7"
-        style="position: absolute; top: 0.5rem; right: 0.75rem; cursor: pointer"
-        @click="removePlan(plan, i)"
-      >
-        Xóa
-      </a>
-      <div
-        class="columns is-multiline is-mobile mb-0"
-        style="border-top: 1px solid #dbdbdb"
-      >
-        <!-- Đợt -->
-        <div class="column is-3-desktop is-2-mobile pb-0">
-          <div class="field">
-            <label class="label">Đợt</label>
-            <div class="control">
-              <input
-                class="input has-text-centered has-text-weight-bold"
-                type="text"
-                :value="i + 1"
-                disabled
-                style="background-color: #f5f5f5"
-              />
-            </div>
-          </div>
-        </div>
-
-        <!-- Value -->
-        <div class="column is-3-desktop is-5-mobile pb-0">
-          <div class="field">
-            <label class="label">Giá trị <span class="has-text-danger">*</span></label>
-            <div class="control">
-              <input
-                class="input"
-                type="number"
-                v-model.number="plan.value"
-                placeholder="Giá trị"
-                min="0"
-                step="0.01"
-              />
-            </div>
-          </div>
-        </div>
-
-        <!-- Type -->
-        <div class="column is-3-desktop is-5-mobile pb-0">
-          <div class="field">
-            <label class="label">Loại <span class="has-text-danger">*</span></label>
-            <div class="control">
-              <SearchBox
-                v-bind="{
-                  api: 'valuetype',
-                  field: 'name',
-                  column: ['name'],
-                  first: true,
-                  optionid: plan.type,
-                }"
-                @option="planSelected('type', $event, plan)"
-              />
-            </div>
-          </div>
-        </div>
-
-        <!-- Days -->
-        <div class="column is-3-desktop is-4-mobile pb-0">
-          <div class="field">
-            <label class="label">Số ngày</label>
-            <div class="control">
-              <input
-                class="input"
-                type="number"
-                v-model.number="plan.days"
-                placeholder="Ngày"
-                min="0"
-              />
-            </div>
-          </div>
-        </div>
-
-        <!-- Payment Note -->
-        <div class="column is-6-desktop is-6-mobile pb-0">
-          <div class="field">
-            <label class="label">Ghi chú TT</label>
-            <div class="control">
-              <input
-                class="input"
-                type="text"
-                v-model="plan.payment_note"
-                placeholder="Ghi chú thanh toán"
-              />
-            </div>
-          </div>
-        </div>
-
-        <!-- Due Note -->
-        <div class="column is-6-desktop is-10-mobile pb-0">
-          <div class="field mb-0">
-            <label class="label">Ghi chú hạn</label>
-            <div class="control">
-              <input
-                class="input"
-                type="text"
-                v-model="plan.due_note"
-                placeholder="Ghi chú hạn thanh toán"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Nút thêm -->
-    <button
-      class="button is-pulled-right is-info is-light mb-4"
-      @click="addPlan"
-    >
-      <span class="icon">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          height="12"
-          width="12"
-          viewBox="0 0 448 512"
-        >
-          <path
-            d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 144L48 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l144 0 0 144c0 17.7 14.3 32 32 32s32-14.3 32-32l0-144 144 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-144 0 0-144z"
-          />
-        </svg>
-      </span>
-    </button>
-
-    <!-- Action buttons -->
-    <div class="buttons">
-      <button
-        :class="`button has-text-white is-primary  ${isSubmitting ? 'is-loading' : ''}`"
-        @click="update()"
-        :disabled="isSubmitting"
-      >
-        <span>Lưu</span>
-      </button>
-
-      <button
-        class="button has-text-white is-danger"
-        @click="emit('close')"
-        :disabled="isSubmitting"
-      >
-        <span>Hủy</span>
-      </button>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from "vue";
-
-const { $getdata, $copy, $resetNull, $insertapi, $updateapi, $snackbar, $remove, $deleteapi, $empty } = useNuxtApp();
-
-const props = defineProps({
-  api: String,
-  pagename: String,
-  row: Object,
-  prefix: String,
-});
-
-const emit = defineEmits(["close", "modalevent"]);
-
-const record = ref($copy(props.row || { enable: true }));
-const paymentPlans = ref([{}]);
-const errors = ref({});
-const isSubmitting = ref(false);
-
-if (props.row?.id) {
-  const plans = await $getdata("paymentplan", { policy: props.row.id });
-  if (plans && plans.length > 0) {
-    paymentPlans.value = plans;
-  }
-}
-
-function validateForm() {
-  errors.value = {};
-
-  if ($empty(record.value.code)) {
-    errors.value.code = "Mã không được để trống";
-  }
-
-  if ($empty(record.value.name)) {
-    errors.value.name = "Tên không được để trống";
-  }
-
-  if ($empty(record.value.deposit)) {
-    errors.value.deposit = "Tiền đặt cọc không được để trống";
-  }
-
-  if ($empty(record.value.method)) {
-    errors.value.method = "Phương thức thanh toán không được để trống";
-  }
-
-  return Object.keys(errors.value).length === 0;
-}
-
-async function update() {
-  if (isSubmitting.value) return;
-
-  if (!validateForm()) {
-    $snackbar("Vui lòng kiểm tra lại dữ liệu");
-    return;
-  }
-
-  try {
-    isSubmitting.value = true;
-
-    let policyData = $resetNull(record.value);
-    if (policyData.method && typeof policyData.method === "object") {
-      policyData.method = policyData.method.id;
-    }
-
-    const policyResult = policyData.id
-      ? await $updateapi("salepolicy", policyData, undefined, false)
-      : await $insertapi("salepolicy", policyData, undefined, false);
-
-    if (policyResult === "error") {
-      throw new Error("Failed to save policy");
-    }
-
-    const plans = paymentPlans.value.filter((v) => {
-      return !$empty(v.value) && !$empty(v.type);
-    });
-
-    plans.forEach((plan, index) => {
-      plan.policy = policyResult.id;
-      plan.cycle = index + 1;
-      if (plan.type) {
-        plan.type = Number(plan.type);
-      }
-    });
-
-    if (plans.length > 0) {
-      if (props.row?.id) {
-        const oldPlans = await $getdata("paymentplan", {
-          policy: policyResult.id,
-        });
-
-        if (oldPlans && oldPlans.length > 0) {
-          for (const oldPlan of oldPlans) {
-            await $deleteapi("paymentplan", oldPlan.id);
-          }
-        }
-      }
-
-      await $insertapi("paymentplan", plans, undefined, false);
-    }
-
-    $snackbar("Lưu dữ liệu thành công!");
-
-    emit("modalevent", { name: "dataevent", data: policyResult });
-    emit("close");
-  } catch (error) {
-    $snackbar("Lưu dữ liệu thất bại");
-  } finally {
-    isSubmitting.value = false;
-  }
-}
-
-function selected(attr, obj) {
-  if (obj !== null && typeof obj === "object") {
-    record.value[attr] = obj.id || obj;
-  } else {
-    record.value[attr] = obj;
-  }
-}
-
-function planSelected(attr, obj, plan) {
-  if (attr === "type") {
-    if (obj && typeof obj === "object") {
-      plan.type = obj.id;
-      plan._type = obj;
-    } else {
-      plan.type = obj;
-    }
-  } else if (attr === "value") {
-    plan.value = Number(obj);
-  } else {
-    plan[attr] = obj;
-  }
-}
-
-function addPlan() {
-  paymentPlans.value.push({});
-}
-
-async function removePlan(plan, index) {
-  if (plan.id) {
-    await $deleteapi("paymentplan", plan.id);
-  }
-  $remove(paymentPlans.value, index);
-  if (paymentPlans.value.length === 0) {
-    paymentPlans.value = [{}];
-  }
-}
-
-onMounted(() => {
-  document.getElementById("code")?.focus();
-});
-</script>
diff --git a/app/components/parameter/TransactionPhase.vue b/app/components/parameter/TransactionPhase.vue
deleted file mode 100644
index 63b3d71..0000000
--- a/app/components/parameter/TransactionPhase.vue
+++ /dev/null
@@ -1,120 +0,0 @@
-<template>
-  <div>
-    <div class="field is-horizontal mt-6 pt-4">
-      <div class="field-body">
-        <div class="field is-narrow">
-          <label class="label">Code <span class="has-text-danger"> * </span> </label>
-          <p class="control">
-            <input
-              class="input"
-              type="text"
-              placeholder=""
-              v-model="record.code"
-              id="code"
-            />
-          </p>
-        </div>
-        <div class="field is-narrow">
-          <label class="label">Name <span class="has-text-danger"> * </span> </label>
-          <p class="control">
-            <input
-              class="input"
-              type="text"
-              placeholder=""
-              v-model="record.name"
-              id="code"
-            />
-          </p>
-        </div>
-      </div>
-    </div>
-    <div class="columns mx-0">
-      <div class="column is-8">
-        <div class="mt-5 mb-3">
-          <Caption v-bind="{ title: 'Required documents', type: 'has-text-primary' }"></Caption>
-        </div>
-        <div
-          class="field is-grouped"
-          v-for="(v, i) in array"
-        >
-          <div class="control">
-            <SearchBox
-              v-bind="{
-                api: 'documenttype',
-                field: 'name',
-                column: ['name'],
-                first: true,
-                optionid: v.doctype,
-                position: 'is-top-left',
-              }"
-              @option="documentSelected('_doctype', $event, v)"
-            ></SearchBox>
-          </div>
-          <div class="control pl-5">
-            <a
-              class="mr-4"
-              @click="add()"
-            >
-              <SvgIcon v-bind="{ name: 'add1.png', type: 'dark', size: 20 }"></SvgIcon>
-            </a>
-            <a @click="remove(v, i)">
-              <SvgIcon v-bind="{ name: 'bin1.svg', type: 'dark', size: 20 }"></SvgIcon>
-            </a>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="mt-5">
-      <button
-        class="button is-primary has-text-white"
-        @click="update()"
-      >
-        Save
-      </button>
-    </div>
-  </div>
-</template>
-<script setup>
-import { onMounted } from "vue";
-const { $getdata, $copy, $resetNull, $insertrow, $updaterow, $snackbar, $remove, $deleteapi } = useNuxtApp();
-var props = defineProps({
-  api: String,
-  pagename: String,
-  row: Object,
-  prefix: String,
-});
-const emit = defineEmits(["close", "modalevent"]);
-var array = ref([{}]);
-var record = $copy(props.row || {});
-if (props.row) {
-  let arr = await $getdata("phasedoctype", { phase: props.row.id });
-  if (arr.length > 0) array.value = arr;
-}
-async function update() {
-  let data = $resetNull(record);
-  let rs = data.id
-    ? await $updaterow(props.api, data, undefined, props.pagename)
-    : await $insertrow(props.api, data, undefined, props.pagename);
-  if (rs === "error") return $snackbar(rs);
-  let arr = array.value.filter((v) => v.doctype);
-  arr.map((v) => (v.phase = rs.id));
-  await $insertrow("phasedoctype", arr);
-  emit("modalevent", { name: "dataevent", data: rs });
-  emit("close");
-}
-function documentSelected(attr, obj, v) {
-  v[attr] = obj;
-  if (obj) v.doctype = obj.id;
-}
-function add() {
-  array.value.push({});
-}
-async function remove(v, i) {
-  if (v.id) await $deleteapi("phasedoctype", v.id);
-  $remove(array.value, i);
-  if (array.value.length === 0) array.value = [{}];
-}
-onMounted(() => {
-  document.getElementById("code").focus();
-});
-</script>
diff --git a/app/components/people/PeopleInfo.vue b/app/components/people/PeopleInfo.vue
index b54d3a4..b70724b 100644
--- a/app/components/people/PeopleInfo.vue
+++ b/app/components/people/PeopleInfo.vue
@@ -339,7 +339,10 @@ async function update() {
   if (!record.value.id) {
     if (record.value.phone) {
       record.value.phone = record.value.phone.trim();
-      let obj = await $getdata("people", { phone: record.value.phone }, undefined, true);
+      let obj = await $getdata("people", {
+        first: true,
+        filter: { phone: record.value.phone },
+      });
       if (obj) {
         existedPeople = obj;
         errors.value.phone = "Số điện thoại đã tồn tại.";
@@ -368,7 +371,7 @@ async function update() {
     record.image.map((v) => arr.push({ ref: record.value.id, file: v }));
     await $insertapi("customerfile", arr, undefined, false);
   }
-  let ele = await $getdata("people", { id: rs.id }, undefined, true);
+  let ele = await $getdata("people", { first: true, filter: { id: rs.id } });
   emit("update", ele);
   emit("modalevent", { name: "dataevent", data: ele });
   if (props.pagename) $updatepage(props.pagename, ele);
diff --git a/app/components/people/PeopleView.vue b/app/components/people/PeopleView.vue
index f20f157..e579dd7 100644
--- a/app/components/people/PeopleView.vue
+++ b/app/components/people/PeopleView.vue
@@ -194,7 +194,10 @@ export default {
     };
   },
   async created() {
-    this.record = await this.$getdata("people", { id: this.row.people || this.row.id }, undefined, true);
+    this.record = await this.$getdata("people", {
+      first: true,
+      filter: { id: this.row.people || this.row.id },
+    });
   },
   methods: {
     findLang(code) {
diff --git a/app/components/user/ConfirmCode.vue b/app/components/user/ConfirmCode.vue
index 23d67fd..10d60e9 100644
--- a/app/components/user/ConfirmCode.vue
+++ b/app/components/user/ConfirmCode.vue
@@ -51,7 +51,7 @@ export default {
   methods: {
     async confirm() {
       if (this.checkError()) return this.$snackbar("Mã phê duyệt gồm 4 số từ 0-9");
-      let user = await this.$getdata("user", undefined, { filter: { id: this.$store.state.login.id } }, true);
+      let user = await this.$getdata("user", { first: true, filter: { id: this.$store.state.login.id } });
       user.approval_code = this.code;
       await this.$updateapi("user", user);
     },
diff --git a/app/components/user/EditUser.vue b/app/components/user/EditUser.vue
index d4d6a4b..d1fb48a 100644
--- a/app/components/user/EditUser.vue
+++ b/app/components/user/EditUser.vue
@@ -117,7 +117,10 @@ export default {
     };
   },
   async created() {
-    this.record = await this.$getdata("user", undefined, { filter: { id: this.row.id } }, true);
+    this.record = await this.$getdata("user", {
+      first: true,
+      filter: { id: this.row.id },
+    });
     this.radioBlocked = this.record.blocked ? 1 : 0;
   },
   methods: {
@@ -158,12 +161,14 @@ export default {
       this.$set(this.check, v.code, this.check[v.code] ? false : true);
     },
     async setTokenExpiry() {
-      let rows = await this.$getdata("token", {
-        user: this.record.id,
-        expiry: 0,
+      const rows = await this.$getdata("token", {
+        filter: {
+          user: this.record.id,
+          expiry: 0,
+        },
       });
       if (rows.length === 0) return;
-      rows.map((v) => (v.expiry = 1));
+      rows.forEach((v) => (v.expiry = 1));
       this.$insertapi("token", rows, undefined, true);
     },
   },
diff --git a/app/components/user/NewUser.vue b/app/components/user/NewUser.vue
index 1257a7a..5065f69 100644
--- a/app/components/user/NewUser.vue
+++ b/app/components/user/NewUser.vue
@@ -321,7 +321,7 @@ export default {
       if (this.checkError()) return;
       let rs = await this.$insertapi("gethash", { text: this.password });
       this.hash = rs.rows[0];
-      let data = await this.$getdata("user", { username: this.username }, undefined, true);
+      let data = await this.$getdata("user", { first: true, filter: { username: this.username } });
       if (data) {
         return this.errors.push({
           name: "username",
diff --git a/app/components/user/SetPassword.vue b/app/components/user/SetPassword.vue
index 42c501c..a68aa42 100644
--- a/app/components/user/SetPassword.vue
+++ b/app/components/user/SetPassword.vue
@@ -104,7 +104,10 @@ export default {
   methods: {
     async changePassword() {
       if (!this.checkPassword()) return;
-      let user = await this.$getdata("user", undefined, { filter: { id: this.row.id } }, true);
+      let user = await this.$getdata("user", {
+        first: true,
+        params: { filter: { id: this.row.id } },
+      });
       let rs = await this.$insertapi("gethash", { text: this.password });
       user.password = rs.rows[0];
       let rs1 = await this.$updateapi("user", user);
diff --git a/app/components/user/UserInfo.vue b/app/components/user/UserInfo.vue
index 4c454e0..8b5ccb2 100644
--- a/app/components/user/UserInfo.vue
+++ b/app/components/user/UserInfo.vue
@@ -64,15 +64,13 @@ export default {
     };
   },
   async created() {
-    this.record = await this.$getdata(
-      "user",
-      undefined,
-      {
+    this.record = await this.$getdata("user", {
+      first: true,
+      params: {
         filter: { id: this.userId || this.store.login.id },
         values: "id,username,fullname,type,type__name,create_time",
       },
-      true,
-    );
+    });
   },
 };
 </script>
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index 336a239..2b17cdb 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -57,15 +57,13 @@ function getViewport() {
 
 async function checkRedirect() {
   if (route.query.username && route.query.token) {
-    let row = await $getdata(
-      "user",
-      null,
-      {
+    let row = await $getdata("user", {
+      first: true,
+      params: {
         filter: { username: route.query.username },
         values: "id,avatar,username,fullname,type,type__code,type__name,is_admin",
       },
-      true,
-    );
+    });
     if (row === "error" || row === undefined) return; /* $requestLogin(); */
     else {
       row.token = route.query.token;
@@ -77,8 +75,8 @@ async function checkRedirect() {
 
 async function checkLogin() {
   if ($store.login ? $store.login.token : false) {
-    $store.commit("rights", await $getdata("grouprights", { group: $store.login.type }));
-    let authtoken = await $getdata("token", { token: $store.login.token }, undefined, true);
+    $store.commit("rights", await $getdata("grouprights", { filter: { group: $store.login.type } }));
+    let authtoken = await $getdata("token", { first: true, filter: { token: $store.login.token } });
     if (authtoken ? authtoken.expiry : true) return; /* $requestLogin(); */
     authorized.value = true;
   }
diff --git a/app/plugins/02-connection.js b/app/plugins/02-connection.js
index 053603f..5839a14 100644
--- a/app/plugins/02-connection.js
+++ b/app/plugins/02-connection.js
@@ -1169,9 +1169,9 @@ export default defineNuxtPlugin((nuxtApp) => {
   // get data
   const getapi = async function (list) {
     try {
-      let arr = list.map((v) => {
-        let found = apis.find((api) => api.name === v.name);
-        let url = (v.path ? paths.find((x) => x.name === v.path).url : path) + (v.url ? v.url : found.url);
+      const arr = list.map((v) => {
+        const found = apis.find((api) => api.name === v.name);
+        const url = (v.path ? paths.find((x) => x.name === v.path).url : path) + (v.url ? v.url : found.url);
         let params = v.params ? v.params : found.params === undefined ? {} : found.params;
         params.login = $store.login ? $store.login.id : undefined;
         return { url, params };
@@ -1365,21 +1365,21 @@ export default defineNuxtPlugin((nuxtApp) => {
     return copy;
   };
 
-  const getdata = async function (name, filter, params, first) {
-    let found = findapi(name);
+  const getdata = async function (name, { filter, params, first = false } = {}) {
+    const found = findapi(name);
     if (params) found.params = params;
     else if (filter) found.params.filter = filter;
-    let rs = await getapi([found]);
-    let data = rs[0].data;
+    const rs = await getapi([found]);
+    const { data } = rs[0];
     if (data) {
       if (data.rows) {
-        return first ? (data.rows.length > 0 ? data.rows[0] : undefined) : data.rows;
+        return first ? data.rows[0] : data.rows;
       } else {
-        let rows = Array.isArray(data) ? data : [data];
+        const rows = Array.isArray(data) ? data : [data];
         return first ? (rows.length > 0 ? rows[0] : data) : data;
       }
     } else {
-      let rows = Array.isArray(data) ? data : [data];
+      const rows = Array.isArray(data) ? data : [data];
       return first ? (rows.length > 0 ? rows[0] : data) : data;
     }
   };
diff --git a/app/plugins/04-components.js b/app/plugins/04-components.js
index 02de6f6..d8e93a2 100644
--- a/app/plugins/04-components.js
+++ b/app/plugins/04-components.js
@@ -87,12 +87,12 @@ import MenuAccount from "@/components/menu/MenuAccount.vue";
 import ImageLayout from "@/components/media/ImageLayout.vue";
 
 import CountdownTimer from "@/components/common/CountdownTimer.vue";
-import CustomerInfo2 from "@/components/customer/CustomerInfo2.vue";
+import CustomerInfo from "@/components/customer/CustomerInfo.vue";
 import MenuFile from "@/components/menu/MenuFile.vue";
 
 const components = {
   PivotDataView,
-  CustomerInfo2,
+  CustomerInfo,
   CountdownTimer,
   InternalEntry,
   ViewList,