From 1b489306bf2eda8b16583cb33566dd11d93ab691 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Fri, 2 Aug 2024 13:58:44 +0700
Subject: [PATCH] chore: clean

---
 src/pages/03_customer-management/MainPage.vue | 2748 +----------------
 src/pages/03_customer-management/constant.ts  |  103 +
 src/pages/03_customer-management/form.ts      |  137 +
 3 files changed, 316 insertions(+), 2672 deletions(-)
 create mode 100644 src/pages/03_customer-management/constant.ts
 create mode 100644 src/pages/03_customer-management/form.ts

diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index ddd9a899..2b6216e9 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -1,66 +1,36 @@
 <script setup lang="ts">
-import { computed, ref, watch, toRaw } from 'vue';
-import { useQuasar, type QTableProps } from 'quasar';
-import { storeToRefs } from 'pinia';
+import { ref, watch } from 'vue';
+import { useQuasar } from 'quasar';
 import { getUserId, getRole } from 'src/services/keycloak';
-import { Status } from 'src/stores/types';
+import { Status } from 'stores/types';
 
-import useCustomerStore from 'src/stores/customer';
-import useEmployeeStore from 'src/stores/employee';
-import useOptionStore from 'src/stores/options';
-import useMyBranchStore from 'src/stores/my-branch';
+import useCustomerStore from 'stores/customer';
+import useEmployeeStore from 'stores/employee';
+import useMyBranchStore from 'stores/my-branch';
 
 import ButtonAddComponent from 'src/components/ButtonAddCompoent.vue';
 import PersonCard from 'components/home/PersonCard.vue';
-import UsersDetailCardComponent from 'src/components/UsersDetailCardComponent.vue';
 import StatCardComponent from 'components/StatCardComponent.vue';
 import TooltipComponent from 'components/TooltipComponent.vue';
 import AddButton from 'components/AddButton.vue';
-import AppBox from 'components/app/AppBox.vue';
-import ItemCard from 'src/components/ItemCard.vue';
-import FormDialog from 'src/components/FormDialog.vue';
-import ProfileUpload from 'src/components/ProfileUpload.vue';
-import BasicInformation from 'src/components/03_customer-management/BasicInformation.vue';
-import TabComponent from 'src/components/TabComponent.vue';
-import FormAddress from 'src/components/02_personnel-management/FormAddress.vue';
-import AboutComponent from 'src/components/03_customer-management/AboutComponent.vue';
-import ContactComponent from 'src/components/03_customer-management/ContactInformation.vue';
-import OtherInformation from 'src/components/03_customer-management/OtherInformation.vue';
-import FormBusiness from 'src/components/03_customer-management/FormBusiness.vue';
-import DrawerInfo from 'src/components/DrawerInfo.vue';
-import InfoForm from 'src/components/02_personnel-management/InfoForm.vue';
 import CustomerInfoComponent from 'src/components/03_customer-management/CustomerInfoComponent.vue';
 import NoData from 'components/NoData.vue';
-import HistoryEditComponent from 'src/components/03_customer-management/HistoryEditComponent.vue';
 import PaginationComponent from 'src/components/PaginationComponent.vue';
 
 import {
-  CustomerCreate,
   CustomerStats,
   Customer,
-  CustomerUpdate,
   CustomerBranch,
   CustomerType,
 } from 'stores/customer/types';
-import {
-  EmployeeCreate,
-  Employee,
-  EmployeeWork,
-  EmployeeCheckup,
-  EmployeeHistory,
-} from 'stores/employee/types';
+import { Employee, EmployeeHistory } from 'stores/employee/types';
 import { onMounted } from 'vue';
 
-import FormPerson from 'src/components/02_personnel-management/FormPerson.vue';
-import FormEmployeeHealthCheck from 'src/components/03_customer-management/FormEmployeeHealthCheck.vue';
-import FormEmployeeWorkHistory from 'src/components/03_customer-management/FormEmployeeWorkHistory.vue';
-import FormEmployeeOther from 'src/components/03_customer-management/FormEmployeeOther.vue';
-import FormEmployeePassport from 'src/components/03_customer-management/FormEmployeePassport.vue';
-import FormEmployeeVisa from 'src/components/03_customer-management/FormEmployeeVisa.vue';
-import useUtilsStore, { dialog } from 'src/stores/utils';
+import useUtilsStore, { dialog } from 'stores/utils';
 import { calculateAge, dateFormat } from 'src/utils/datetime';
 import { useI18n } from 'vue-i18n';
-import useFlowStore from 'src/stores/flow';
+import useFlowStore from 'stores/flow';
+import { columnsCustomer, columnsEmployee } from './constant';
 
 const $q = useQuasar();
 const { t, locale } = useI18n();
@@ -68,167 +38,10 @@ const utilsStore = useUtilsStore();
 const userCustomer = useCustomerStore();
 const userBranchStore = useMyBranchStore();
 
-const { currentMyBranch } = storeToRefs(userBranchStore);
-
-const columnsEmployee = [
-  {
-    name: 'firstName',
-    align: 'left',
-    label: 'nameEmployee',
-    field: 'firstName',
-    sortable: true,
-  },
-
-  {
-    name: 'formDialogInputNationality',
-    align: 'left',
-    label: 'formDialogInputNationality',
-    field: 'nationality',
-  },
-
-  {
-    name: 'formDialogInputPassportNo',
-    align: 'left',
-    label: 'formDialogInputPassportNo',
-    field: 'passportNumber',
-  },
-  {
-    name: 'formDialogInputAge',
-    align: 'left',
-    label: 'formDialogInputAge',
-    field: 'dateOfBirth',
-  },
-
-  {
-    name: 'passportExpiryDate',
-    align: 'left',
-    label: 'passportExpire',
-    field: 'passportExpiryDate',
-  },
-
-  {
-    name: 'formDialogEmployeeNRCNo',
-    align: 'left',
-    label: 'formDialogEmployeeNRCNo',
-    field: 'nrcNo',
-  },
-
-  {
-    name: 'branchLabel',
-    align: 'left',
-    label: 'branchLabel',
-    field: 'customerBranch',
-  },
-
-  {
-    name: 'type',
-    align: 'left',
-    label: 'type',
-    field: 'type',
-    sortable: true,
-  },
-
-  {
-    name: 'action',
-    label: '',
-    field: 'action',
-  },
-] satisfies QTableProps['columns'];
-
-const columnsCustomer = [
-  {
-    name: 'customerName',
-    align: 'left',
-    label: 'corporation',
-    field: 'customerName',
-    sortable: true,
-  },
-  {
-    name: 'type',
-    align: 'left',
-    label: 'type',
-    field: 'customerType',
-    sortable: true,
-  },
-  {
-    name: 'personName',
-    align: 'left',
-    label: 'name',
-    field: 'personName',
-  },
-
-  {
-    name: 'telephoneNo',
-    align: 'left',
-    label: 'telephone',
-    field: 'branch[0].telephoneNo',
-  },
-
-  {
-    name: 'branchEmail',
-    align: 'left',
-    label: 'formDialogInputEmail',
-    field: 'branch[0].email',
-  },
-] satisfies QTableProps['columns'];
-
-const {
-  create,
-  getStatsCustomer,
-  fetchList,
-  editById,
-  fetchListById,
-  createBranch,
-  editBranchById,
-  fetchListCustomeBranch,
-  fetchListCustomeBranchById,
-  deleteBranchById,
-} = userCustomer;
+const { getStatsCustomer, fetchList, editById } = userCustomer;
 const flowStore = useFlowStore();
 const employeeStore = useEmployeeStore();
-const optionStore = useOptionStore();
 const currentTab = ref('employer');
-const formData = ref<CustomerCreate>({
-  status: 'CREATED',
-  personName: '',
-  customerType: 'CORP',
-  customerName: '',
-  customerNameEN: '',
-  taxNo: '',
-  registeredBranchId: currentMyBranch.value?.id || '',
-  customerBranch: [
-    {
-      code: '',
-      branchNo: 1,
-      address: '',
-      addressEN: '',
-      provinceId: '',
-      districtId: '',
-      subDistrictId: '',
-      zipCode: '',
-      email: '',
-      telephoneNo: '',
-      name: '',
-      status: 'CREATED',
-      taxNo: '',
-      nameEN: '',
-      legalPersonNo: '',
-      registerName: '',
-      registerDate: new Date(),
-      authorizedCapital: '',
-      employmentOffice: '',
-      bussinessType: '',
-      bussinessTypeEN: '',
-      jobPosition: '',
-      jobPositionEN: '',
-      jobDescription: '',
-      saleEmployee: '',
-      payDate: new Date(),
-      wageRate: 0,
-    },
-  ],
-  image: null,
-});
 
 const inputSearch = ref<string>();
 const fieldSelectedCustomer = ref<{ label: string; value: string }>({
@@ -236,36 +49,15 @@ const fieldSelectedCustomer = ref<{ label: string; value: string }>({
   value: 'all',
 });
 
-const fieldDisplayEmployer = ref<
-  {
-    label: string;
-    value: string;
-  }[]
->([
-  {
-    label: 'corporation',
-    value: 'customerName',
-  },
-
-  {
-    label: 'type',
-    value: 'type',
-  },
-
-  {
-    label: 'name',
-    value: 'personName',
-  },
-
+const fieldDisplayEmployer = ref<{ label: string; value: string }[]>([
+  { label: 'corporation', value: 'customerName' },
+  { label: 'type', value: 'type' },
+  { label: 'name', value: 'personName' },
   {
     label: 'telephone',
     value: 'telephoneNo',
   },
-
-  {
-    label: 'formDialogInputEmail',
-    value: 'branchEmail',
-  },
+  { label: 'formDialogInputEmail', value: 'branchEmail' },
 ]);
 
 const fieldDisplayEmployee = ref<
@@ -274,40 +66,17 @@ const fieldDisplayEmployee = ref<
     value: string;
   }[]
 >([
-  {
-    label: 'nameEmployee',
-    value: 'firstName',
-  },
-  {
-    label: 'formDialogInputNationality',
-    value: 'formDialogInputNationality',
-  },
-  {
-    label: 'formDialogInputPassportNo',
-    value: 'formDialogInputPassportNo',
-  },
-
-  {
-    label: 'formDialogInputAge',
-    value: 'formDialogInputAge',
-  },
-  {
-    label: 'passportExpire',
-    value: 'passportExpiryDate',
-  },
+  { label: 'nameEmployee', value: 'firstName' },
+  { label: 'formDialogInputNationality', value: 'formDialogInputNationality' },
+  { label: 'formDialogInputPassportNo', value: 'formDialogInputPassportNo' },
+  { label: 'formDialogInputAge', value: 'formDialogInputAge' },
+  { label: 'passportExpire', value: 'passportExpiryDate' },
   {
     label: 'formDialogEmployeeNRCNo',
     value: 'formDialogEmployeeNRCNo',
   },
-
-  {
-    label: 'branchLabel',
-    value: 'branchLabel',
-  },
-  {
-    label: 'type',
-    value: 'type',
-  },
+  { label: 'branchLabel', value: 'branchLabel' },
+  { label: 'type', value: 'type' },
 ]);
 
 const fieldSelected = ref<
@@ -344,129 +113,16 @@ const fieldSelected = ref<
 
 const splitterModel = ref(15);
 const modeView = ref(false);
-const currentEmployee = ref<Employee | undefined>();
-const currentEmployeeCode = ref('');
-const isEmployeeEdit = ref(false);
-const formDataEmployeeSameAddr = ref(true);
-const formDataEmployeeTab = ref('personalInfo');
-const infoDrawerEmployee = ref(false);
-const infoDrawerEmployeeEdit = ref(false);
-const infoEmployeePersonCard = ref<
-  {
-    id: string;
-    img: string;
-    name: string;
-    male: boolean;
-    female: boolean;
-    badge: string;
-    disabled: boolean;
-  }[]
->();
 const statsEmployee = ref(0);
 const statsEmployeeGender = ref<{ male: number; female: number }>({
   male: 0,
   female: 0,
 });
-const formDataEmployeeOwner = ref<{
-  id: string;
-  address: string;
-  addressEN: string;
-  provinceId: string;
-  districtId: string;
-  subDistrictId: string;
-  zipCode: string;
-}>();
-
-const currentEmployeeId = ref<string>('');
-const formDataEmployee = ref<EmployeeCreate>({
-  code: '',
-  image: null,
-  customerBranchId: '',
-  nrcNo: '',
-  dateOfBirth: null,
-  gender: '',
-  nationality: '',
-
-  firstName: '',
-  firstNameEN: '',
-  lastName: '',
-  lastNameEN: '',
-
-  addressEN: '',
-  address: '',
-  zipCode: '',
-
-  passportType: '',
-  passportNumber: '',
-  passportIssueDate: null,
-  passportExpiryDate: null,
-  passportIssuingCountry: '',
-  passportIssuingPlace: '',
-  previousPassportReference: '',
-
-  visaType: '',
-  visaNumber: '',
-  visaIssueDate: null,
-  visaExpiryDate: null,
-  visaIssuingPlace: '',
-  visaStayUntilDate: null,
-  tm6Number: '',
-  entryDate: null,
-  workerStatus: '',
-
-  subDistrictId: '',
-  districtId: '',
-  provinceId: '',
-
-  employeeWork: [
-    {
-      workEndDate: null,
-      workPermitExpireDate: null,
-      workPermitIssuDate: null,
-      workPermitNo: '',
-      workplace: '',
-      jobType: '',
-      positionName: '',
-      ownerName: '',
-      remark: '',
-    },
-  ],
-  employeeCheckup: [
-    {
-      coverageExpireDate: null,
-      coverageStartDate: null,
-      insuranceCompany: '',
-      medicalBenefitScheme: '',
-      remark: '',
-      hospitalName: '',
-      provinceId: '',
-      checkupResult: '',
-      checkupType: '',
-    },
-  ],
-  employeeOtherInfo: {
-    citizenId: '',
-    fatherFirstName: '',
-    fatherLastName: '',
-    fatherFirstNameEN: '',
-    fatherLastNameEN: '',
-    fatherBirthPlace: '',
-
-    motherFirstName: '',
-    motherLastName: '',
-    motherFirstNameEN: '',
-    motherLastNameEN: '',
-    motherBirthPlace: '',
-  },
-});
 
 const hideStat = ref(false);
 const branchOption = ref<{ id: string; name: string }[]>();
 const indexTab = ref<number>(0);
 const statusToggle = ref<boolean>(false);
-const profileSubmit = ref<boolean>(false);
-const profileFile = ref<File | undefined>(undefined);
-const profileUrl = ref<string | null>('');
 const infoDrawer = ref(false);
 const infoDrawerEdit = ref(false);
 const isMainPage = ref<boolean>(true);
@@ -474,8 +130,6 @@ const statsCustomerType = ref<CustomerStats>({
   CORP: 0,
   PERS: 0,
 });
-const hideTab = ref<boolean>(true);
-const hideBranch = ref<boolean>(true);
 const currentCustomerId = ref<string>('');
 const dialogInputCustomerBranchForm = ref<boolean>(false);
 const currentCustomer = ref<Customer>();
@@ -500,83 +154,14 @@ const currentCustomerName = ref<string>('');
 const currentCustomerUrlImage = ref<string | null>(null);
 const genderSelector = ref<string>('');
 
-const totalCustomer = ref<number>(0);
-
 const currentStatus = ref<Status | 'All'>('All');
 
-const inputFile = (() => {
-  const element = document.createElement('input');
-  element.type = 'file';
-  element.accept = 'image/*';
-
-  const reader = new FileReader();
-  reader.addEventListener('load', () => {
-    if (typeof reader.result === 'string') profileUrl.value = reader.result;
-
-    if (infoDrawerEdit.value && currentCustomer.value)
-      currentCustomer.value.imageUrl = profileUrl.value as string;
-
-    if (infoDrawerEmployeeEdit.value && infoEmployeePersonCard.value)
-      infoEmployeePersonCard.value[0].img = profileUrl.value as string;
-  });
-
-  element.addEventListener('change', () => {
-    profileFile.value = element.files?.[0];
-    if (profileFile.value) {
-      reader.readAsDataURL(profileFile.value);
-    }
-  });
-
-  return element;
-})();
-
 const listCustomer = ref<(Customer & { branch: CustomerBranch[] })[]>([]);
 const listEmployee = ref<Employee[]>([]);
 
-const itemCard = [
-  {
-    icon: 'mdi:office-building',
-    text: 'customerLegalEntity',
-    color: 'var(--purple-8)',
-  },
-  {
-    icon: 'heroicons:user-solid',
-    text: 'customerNaturalPerson',
-    color: 'var(--green-9)',
-  },
-];
-
 const customerStats = [
-  {
-    id: 1,
-    count: 2,
-    name: 'CORP',
-  },
-
-  {
-    id: 2,
-    count: 3,
-    name: 'PERS',
-  },
-];
-
-const employeeTab = [
-  {
-    name: 'personalInfo',
-    label: 'personalInfo',
-  },
-  {
-    name: 'healthCheck',
-    label: 'healthCheck',
-  },
-  {
-    name: 'workHistory',
-    label: 'workHistory',
-  },
-  {
-    name: 'other',
-    label: 'other',
-  },
+  { id: 1, count: 2, name: 'CORP' },
+  { id: 2, count: 3, name: 'PERS' },
 ];
 
 const fieldCustomer = ref([
@@ -585,26 +170,9 @@ const fieldCustomer = ref([
   'customerNaturalPerson',
 ]);
 
-const countStartsOne = ref<number>(1);
-const dialogCustomerType = ref<boolean>(false);
-const dialogInputForm = ref<boolean>(false);
-const dialogEmployee = ref<boolean>(false);
-
 const infoDrawerBranch = ref<boolean>(false);
 
 const selectorLabel = ref<string>('EMPLOYER');
-const selectorList = computed(() => [
-  {
-    label: 'EMPLOYER',
-    count:
-      (statsCustomerType.value?.CORP ?? 0) +
-      (statsCustomerType.value?.PERS ?? 0),
-  },
-  {
-    label: 'EMPLOYEE',
-    count: statsEmployee.value ?? 0,
-  },
-]);
 
 const customerType = ref<CustomerType>('CORP');
 
@@ -612,243 +180,7 @@ const employeeHistoryDialog = ref(false);
 const employeeHistory = ref<EmployeeHistory[]>();
 
 async function triggerCreate(type: CustomerType) {
-  countStartsOne.value = 1;
-  customerType.value = type;
-  await fetchListOfOptionBranch();
-  openDialogInputForm();
-  dialogCustomerType.value = false;
-}
-
-function openDialogCustomerType() {
-  if (selectorLabel.value === 'EMPLOYER') {
-    dialogCustomerType.value = true;
-  }
-
-  if (selectorLabel.value === 'EMPLOYEE') {
-    dialogEmployee.value = true;
-  }
-}
-
-async function openDialogInputForm(
-  action: 'FORM' | 'INFO' = 'FORM',
-  id?: string,
-  isPersonEdit: boolean = false,
-) {
-  if (action === 'INFO') {
-    if (!id) return;
-    if (selectorLabel.value === 'EMPLOYER') {
-      await fetchListOfOptionBranch();
-      infoDrawer.value = true;
-    }
-    if (selectorLabel.value === 'EMPLOYEE') {
-      await assignFormDataEmployee(id);
-      infoDrawerEmployee.value = true;
-      infoDrawerEmployeeEdit.value = isPersonEdit ? true : false;
-      const employee = currentEmployee.value;
-      infoEmployeePersonCard.value = employee
-        ? [
-            {
-              id: employee.id,
-              img: `${employee.profileImageUrl}`,
-              name:
-                locale.value === 'en-US'
-                  ? `${employee.firstNameEN} ${employee.lastNameEN}`
-                  : `${employee.firstName} ${employee.lastName}`,
-              male: employee.gender === 'male',
-              female: employee.gender === 'female',
-              badge: employee.code,
-              disabled: employee.status === 'INACTIVE',
-            },
-          ]
-        : [];
-
-      const code = currentEmployee.value?.code.split('-')[0];
-      const result = await fetchListCustomeBranch({
-        includeCustomer: true,
-        query: code,
-        pageSize: 30,
-      });
-      if (result) employeeStore.ownerOption = result.result;
-    }
-  } else {
-    if (selectorLabel.value === 'EMPLOYER') {
-      await fetchListOfOptionBranch();
-      dialogInputForm.value = true;
-    }
-    if (selectorLabel.value === 'EMPLOYEE') {
-      if (!id) return;
-      await assignFormDataEmployee(id);
-      const code = currentEmployee.value?.code.split('-')[0];
-
-      const result = await fetchListCustomeBranch({
-        includeCustomer: true,
-        query: code,
-        pageSize: 30,
-      });
-      if (result) employeeStore.ownerOption = result.result;
-      dialogEmployee.value = true;
-    }
-  }
-}
-
-function onClose() {
-  infoDrawer.value = false;
-  infoDrawerEdit.value = false;
-  dialogInputForm.value = false;
-  flowStore.rotate();
-  clearForm();
-}
-
-function onCloseBranch() {
-  infoDrawerBranch.value = false;
-  infoDrawerEdit.value = false;
-  dialogInputForm.value = false;
-  flowStore.rotate();
-  clearForm();
-}
-
-function clearForm() {
-  inputFile.value = '';
-  profileFile.value = undefined;
-  profileUrl.value = null;
-  hideBranch.value = true;
-
-  dialogInputForm.value = false;
-  formData.value = {
-    status: 'CREATED',
-    customerType: 'CORP',
-    customerName: '',
-    customerNameEN: '',
-    personName: '',
-    taxNo: '',
-    registeredBranchId: currentMyBranch.value?.id || '',
-    customerBranch: [
-      {
-        code: '',
-        branchNo: 1,
-        address: '',
-        addressEN: '',
-        provinceId: '',
-        districtId: '',
-        subDistrictId: '',
-        zipCode: '',
-        email: '',
-        telephoneNo: '',
-        name: '',
-        status: 'CREATED',
-        taxNo: '',
-        nameEN: '',
-        legalPersonNo: '',
-        registerName: '',
-        registerDate: new Date(),
-        authorizedCapital: '',
-        employmentOffice: '',
-        bussinessType: '',
-        bussinessTypeEN: '',
-        jobPosition: '',
-        jobPositionEN: '',
-        jobDescription: '',
-        saleEmployee: '',
-        payDate: new Date(),
-        wageRate: 0,
-      },
-    ],
-    image: null,
-  };
-}
-
-function clearFormEmployee() {
-  hideTab.value = true;
-
-  inputFile.value = '';
-  profileUrl.value = null;
-  profileSubmit.value = false;
-  dialogEmployee.value = false;
-  isEmployeeEdit.value = false;
-  infoDrawerEmployee.value = false;
-  infoDrawerEmployeeEdit.value = false;
-  formDataEmployeeSameAddr.value = true;
-  currentEmployeeCode.value = '';
-  formDataEmployeeTab.value = 'personalInfo';
-
-  currentEmployee.value = undefined;
-  formDataEmployeeOwner.value = undefined;
-
-  formDataEmployee.value = {
-    code: '',
-    image: null,
-    customerBranchId: '',
-    nrcNo: '',
-    dateOfBirth: null,
-    gender: '',
-    nationality: '',
-    firstName: '',
-    firstNameEN: '',
-    lastName: '',
-    lastNameEN: '',
-    addressEN: '',
-    address: '',
-    zipCode: '',
-    passportType: '',
-    passportNumber: '',
-    passportIssueDate: null,
-    passportExpiryDate: null,
-    passportIssuingCountry: '',
-    passportIssuingPlace: '',
-    previousPassportReference: '',
-    visaType: '',
-    visaNumber: '',
-    visaIssueDate: null,
-    visaExpiryDate: null,
-    visaIssuingPlace: '',
-    visaStayUntilDate: null,
-    tm6Number: '',
-    entryDate: null,
-    workerStatus: '',
-    subDistrictId: '',
-    districtId: '',
-    provinceId: '',
-    employeeWork: [
-      {
-        workEndDate: null,
-        workPermitExpireDate: null,
-        workPermitIssuDate: null,
-        workPermitNo: '',
-        workplace: '',
-        jobType: '',
-        positionName: '',
-        ownerName: '',
-        remark: '',
-      },
-    ],
-    employeeCheckup: [
-      {
-        coverageExpireDate: null,
-        coverageStartDate: null,
-        insuranceCompany: '',
-        medicalBenefitScheme: '',
-        remark: '',
-        hospitalName: '',
-        provinceId: '',
-        checkupResult: '',
-        checkupType: '',
-      },
-    ],
-    employeeOtherInfo: {
-      citizenId: '',
-      fatherFirstName: '',
-      fatherLastName: '',
-      fatherFirstNameEN: '',
-      fatherLastNameEN: '',
-      fatherBirthPlace: '',
-
-      motherFirstName: '',
-      motherLastName: '',
-      motherFirstNameEN: '',
-      motherLastNameEN: '',
-      motherBirthPlace: '',
-    },
-  };
+  // TODO: Create customer of type
 }
 
 function deleteCustomerById(id: string) {
@@ -872,272 +204,13 @@ function deleteCustomerById(id: string) {
   });
 }
 
-function deleteBranchId(id: string) {
-  dialog({
-    color: 'negative',
-    icon: 'mdi-alert',
-    title: t('deleteConfirmTitle'),
-    actionText: t('ok'),
-    persistent: true,
-    message: t('deleteConfirmMessage'),
-    action: async () => {
-      await userCustomer.deleteBranchById(id);
-
-      const result = await fetchListById(currentCustomerId.value);
-
-      if (result) branch.value = result.branch;
-      infoDrawerBranch.value = false;
-      flowStore.rotate();
-    },
-    cancel: () => {},
-  });
-}
-
-// async function onSubmit() {
-//   if (selectorLabel.value === 'EMPLOYER') {
-//     await create({
-//       ...formData.value,
-//       customerType: customerType.value === 'CORP' ? 'CORP' : 'PERS',
-//       image: profileSubmit.value ? profileFile.value ?? null : null,
-//     });
-//     clearForm();
-//     const resultList = await fetchList({ includeBranch: true });
-
-//     if (resultList) listCustomer.value = resultList.result;
-//   }
-
-//   if (selectorLabel.value === 'EMPLOYEE') {
-//     await employeeStore.create({
-//       ...formDataEmployee.value,
-//       image: profileSubmit.value ? profileFile.value ?? null : null,
-//     });
-//     const resultList = await employeeStore.fetchList();
-//     if (resultList) listEmployee.value = resultList.result;
-
-//     const resultStatsEmployee = await employeeStore.getStatsEmployee();
-//     if (resultStatsEmployee) statsEmployee.value = resultStatsEmployee;
-
-//     clearFormEmployee();
-//   }
-//   flowStore.rotate();
-// }
-
-async function deleteByIdCheckOrwork(
-  id: string,
-  type: 'healthCheck' | 'workHistory',
-  indexTab: number,
-) {
-  dialog({
-    color: 'info',
-    icon: 'mdi-alert',
-    title: t('saveConfirmTitle'),
-    actionText: t('ok'),
-    persistent: true,
-    message: t('saveConfirmMessage'),
-    action: async () => {
-      if (type === 'healthCheck') {
-        await employeeStore.deleteByIdCheckUp({
-          employeeId: currentEmployeeId.value,
-          checkUpId: id,
-        });
-
-        formDataEmployee.value.employeeCheckup?.splice(indexTab, 1);
-      }
-
-      if (type === 'workHistory') {
-        await employeeStore.deleteByIdWork({
-          employeeId: currentEmployeeId.value,
-          workId: id,
-        });
-
-        formDataEmployee.value.employeeWork?.splice(indexTab, 1);
-      }
-
-      flowStore.rotate();
-    },
-    cancel: () => {},
-  });
-}
-
-async function onSubmitEmployee(
-  type: 'personalInfo' | 'healthCheck' | 'workHistory' | 'other',
-  indexTab: number = 0,
-) {
-  dialog({
-    color: 'info',
-    icon: 'mdi-alert',
-    title: t('saveConfirmTitle'),
-    actionText: t('ok'),
-    persistent: true,
-    message: t('saveConfirmMessage'),
-    action: async () => {
-      if (type === 'personalInfo') {
-        const res = await employeeStore.create({
-          ...formDataEmployee.value,
-          employeeWork: [],
-          employeeCheckup: [],
-          employeeOtherInfo: {},
-          image: profileSubmit.value ? profileFile.value ?? null : null,
-        });
-
-        if (res) {
-          currentEmployeeId.value = res.id;
-          hideTab.value = false;
-        }
-
-        const resultList = await employeeStore.fetchList();
-        if (resultList) {
-          listEmployee.value = resultList.result;
-        }
-        const resultStatsEmployee = await employeeStore.getStatsEmployee();
-        if (resultStatsEmployee) statsEmployee.value = resultStatsEmployee;
-      }
-
-      if (
-        formDataEmployee.value.employeeCheckup?.[indexTab] &&
-        type === 'healthCheck'
-      ) {
-        const res = await employeeStore.createEmployeeCheckup(
-          currentEmployeeId.value,
-          {
-            ...formDataEmployee.value.employeeCheckup[indexTab],
-          },
-        );
-
-        if (res) {
-          formDataEmployee.value.employeeCheckup[indexTab].id = res.id;
-          formDataEmployee.value.employeeCheckup[indexTab].statusSave = true;
-        }
-      }
-
-      if (
-        formDataEmployee.value.employeeWork?.[indexTab] &&
-        type === 'workHistory'
-      ) {
-        const res = await employeeStore.createEmployeeWork(
-          currentEmployeeId.value,
-          {
-            ...formDataEmployee.value.employeeWork[indexTab],
-          },
-        );
-
-        if (res) {
-          formDataEmployee.value.employeeWork[indexTab].id = res.id;
-          formDataEmployee.value.employeeWork[indexTab].statusSave = true;
-        }
-      }
-
-      if (formDataEmployee.value.employeeOtherInfo && type === 'other') {
-        const res = await employeeStore.createEmployeeOtherInfo(
-          currentEmployeeId.value,
-          {
-            ...formDataEmployee.value.employeeOtherInfo,
-          },
-        );
-      }
-
-      flowStore.rotate();
-    },
-    cancel: () => {},
-  });
-}
-
-async function deleteByIdBranch(id: string, indexTab: number) {
-  dialog({
-    color: 'info',
-    icon: 'mdi-alert',
-    title: t('saveConfirmTitle'),
-    actionText: t('ok'),
-    persistent: true,
-    message: t('saveConfirmMessage'),
-    action: async () => {
-      await deleteBranchById(id);
-
-      formData.value.customerBranch?.splice(indexTab, 1);
-
-      flowStore.rotate();
-    },
-    cancel: () => {},
-  });
-}
-
-async function onSubmitBasicInformation() {
-  if (selectorLabel.value === 'EMPLOYER') {
-    dialog({
-      color: 'info',
-      icon: 'mdi-alert',
-      title: t('saveConfirmTitle'),
-      actionText: t('ok'),
-      persistent: true,
-      message: t('saveConfirmMessage'),
-      action: async () => {
-        const res = await create({
-          ...formData.value,
-          customerBranch: [],
-          customerType: customerType.value === 'CORP' ? 'CORP' : 'PERS',
-          image: profileSubmit.value ? profileFile.value ?? null : null,
-        });
-
-        if (res) {
-          currentCustomerId.value = res.id;
-          hideBranch.value = false;
-        }
-        const resultList = await fetchList({ includeBranch: true });
-        if (resultList) listCustomer.value = resultList.result;
-      },
-      cancel: () => {},
-    });
-  }
-
-  flowStore.rotate();
-}
-
-async function onSubmitCustomerBranch(opt: { isClearForm: boolean }) {
-  dialog({
-    color: 'info',
-    icon: 'mdi-alert',
-    title: t('saveConfirmTitle'),
-    actionText: t('ok'),
-    persistent: true,
-    message: t('saveConfirmMessage'),
-    action: async () => {
-      if (
-        formData.value.customerBranch !== undefined &&
-        formData.value.customerBranch[indexTab.value] !== undefined
-      ) {
-        const res = await createBranch({
-          ...formData.value.customerBranch[indexTab.value],
-          customerId: currentCustomerId.value,
-        });
-
-        if (res) {
-          formData.value.customerBranch[indexTab.value].id = res.id;
-          formData.value.customerBranch[indexTab.value].statusSave = true;
-        }
-      }
-    },
-    cancel: () => {},
-  });
-
-  if (opt.isClearForm) {
-    dialogInputCustomerBranchForm.value = false;
-    clearForm();
-  }
-  const result = await fetchListById(currentCustomerId.value);
-  if (result) {
-    currentCustomerName.value = result.customerName;
-    currentCustomerUrlImage.value = result.imageUrl;
-    branch.value = result.branch;
-    statBranchNo.value = result.branch.length;
-  }
-  flowStore.rotate();
-}
-
 async function fetchListOfOptionBranch() {
+  if (branchOption.value) return;
+
   const uid = getUserId();
   const role = getRole();
 
-  if (!uid) return;
+  if (!uid) return; // should not possible as the system require login to be able to access resource.
 
   if (role?.includes('system')) {
     const result = await userBranchStore.fetchListOptionBranch();
@@ -1147,7 +220,7 @@ async function fetchListOfOptionBranch() {
     if (result && result.total > 0) branchOption.value = result.result;
   }
 
-  formData.value.registeredBranchId = currentMyBranch.value?.id || '';
+  // TODO: Assign (first) branch of the user as register branch of the data
 }
 
 async function fetchListCustomer() {
@@ -1235,49 +308,6 @@ async function toggleStatusCustomer(id: string, status: boolean) {
   flowStore.rotate();
 }
 
-async function onSubmitEdit(id: string) {
-  if (selectorLabel.value === 'EMPLOYER') {
-    if (!formData.value) return;
-
-    const tempValue: CustomerUpdate = {
-      registeredBranchId: formData.value.registeredBranchId,
-      status: formData.value.status,
-      customerType: formData.value.customerType,
-      customerName: formData.value.customerName,
-      customerNameEN: formData.value.customerNameEN,
-      customerBranch: formData.value.customerBranch,
-      taxNo: formData.value.taxNo,
-      personName: formData.value.personName,
-      image: profileFile.value,
-    };
-
-    if (tempValue.status === 'CREATED') delete tempValue['status'];
-
-    await editById(id, tempValue);
-    infoDrawer.value = false;
-    fetchListCustomer();
-    clearForm();
-  }
-
-  if (selectorLabel.value === 'EMPLOYEE') {
-    const isOk = await checkEmployeeForm();
-    if (isOk) {
-      if (!formDataEmployee.value) return;
-
-      await employeeStore.editById(id, {
-        ...formDataEmployee.value,
-        image: profileSubmit.value ? profileFile.value ?? null : null,
-      });
-
-      const resultList = await employeeStore.fetchList();
-      if (resultList) listEmployee.value = resultList.result;
-
-      clearFormEmployee();
-    }
-  }
-  flowStore.rotate();
-}
-
 async function onDelete(id: string) {
   if (!id) return;
   dialog({
@@ -1291,366 +321,12 @@ async function onDelete(id: string) {
       await employeeStore.deleteById(id);
       const resultList = await employeeStore.fetchList();
       if (resultList) listEmployee.value = resultList.result;
-      clearFormEmployee();
       flowStore.rotate();
     },
     cancel: () => {},
   });
 }
 
-async function submitBranch() {
-  if (formData.value.customerBranch?.[indexTab.value]) {
-    delete formData.value.customerBranch[indexTab.value]['id'];
-
-    formData.value.customerBranch[indexTab.value].status = statusToggle.value
-      ? 'ACTIVE'
-      : 'INACTIVE';
-
-    await editBranchById(currentBranchId.value, {
-      ...formData.value.customerBranch[indexTab.value],
-      customerId: currentCustomerId.value,
-    });
-
-    const result = await fetchListById(currentCustomerId.value);
-
-    if (result) {
-      branch.value = result.branch;
-    }
-  }
-  infoDrawerBranch.value = false;
-
-  flowStore.rotate();
-  clearForm();
-}
-
-function undo() {
-  if (selectorLabel.value === 'EMPLOYER') {
-    formData.value = {
-      ...prevCustomer.value,
-    };
-    infoDrawerEdit.value = false;
-  }
-
-  if (selectorLabel.value === 'EMPLOYEE') {
-    if (!currentEmployee.value) return;
-    infoDrawerEmployeeEdit.value = false;
-    assignFormDataEmployee(currentEmployee.value.id);
-  }
-}
-
-async function employeeFilterOwnerBranch(
-  val: string,
-  update: (...args: unknown[]) => void,
-) {
-  update(async () => {
-    const result = await fetchListCustomeBranch({
-      includeCustomer: true,
-      query: val,
-      pageSize: 30,
-    });
-    if (result) employeeStore.ownerOption = result.result;
-  });
-}
-
-const prevCustomer = ref<CustomerCreate>({
-  status: 'CREATED',
-  customerType: 'CORP',
-  customerName: '',
-  customerNameEN: '',
-  personName: '',
-  taxNo: '',
-  customerBranch: [],
-  image: null,
-  registeredBranchId: '',
-});
-
-async function assignFormData(
-  customerId: string,
-  branch?: CustomerBranch,
-  tabNo: number = 0,
-) {
-  let data;
-  const res = await fetchListById(customerId);
-  if (res) {
-    data = res;
-  }
-
-  if (!data) return;
-
-  indexTab.value = tabNo;
-  countStartsOne.value = 1;
-
-  prevCustomer.value = {
-    registeredBranchId: data.registeredBranchId,
-    status: data.status,
-    customerType: data.customerType,
-    customerName: data.customerName,
-    customerNameEN: data.customerNameEN,
-    personName: data.personName,
-    taxNo: data.taxNo,
-    customerBranch: [],
-    image: null,
-  };
-
-  data.branch.forEach((v) => {
-    prevCustomer.value.customerBranch?.push({
-      code: v.code,
-      branchNo: v.branchNo,
-      id: v.id,
-      address: v.address,
-      addressEN: v.addressEN,
-      provinceId: v.province.id,
-      districtId: v.district.id,
-      subDistrictId: v.subDistrict.id,
-      zipCode: v.zipCode,
-      email: v.email,
-      telephoneNo: v.telephoneNo,
-      name: v.name,
-      status: undefined,
-      taxNo: v.taxNo,
-      nameEN: v.nameEN,
-      legalPersonNo: v.legalPersonNo,
-      registerName: v.registerName,
-      registerDate: new Date(v.registerDate),
-      authorizedCapital: v.authorizedCapital,
-      employmentOffice: v.employmentOffice,
-      bussinessType: v.bussinessType,
-      bussinessTypeEN: v.bussinessTypeEN,
-      jobPosition: v.jobPosition,
-      jobPositionEN: v.jobPositionEN,
-      jobDescription: v.jobDescription,
-      saleEmployee: v.saleEmployee,
-      payDate: new Date(v.payDate),
-      wageRate: v.wageRate,
-    });
-  });
-
-  cloneData();
-
-  if (formData.value.customerBranch?.length === 0) {
-    formData.value.customerBranch?.push({
-      code: '',
-      branchNo: 1,
-      address: '',
-      addressEN: '',
-      provinceId: '',
-      districtId: '',
-      subDistrictId: '',
-      zipCode: '',
-      email: '',
-      telephoneNo: '',
-      name: '',
-      status: 'CREATED',
-      taxNo: '',
-      nameEN: '',
-      legalPersonNo: '',
-      registerName: '',
-      registerDate: new Date(),
-      authorizedCapital: '',
-      employmentOffice: '',
-      bussinessType: '',
-      bussinessTypeEN: '',
-      jobPosition: '',
-      jobPositionEN: '',
-      jobDescription: '',
-      saleEmployee: '',
-      payDate: new Date(),
-      wageRate: 0,
-    });
-  }
-}
-function cloneData() {
-  formData.value = {
-    ...prevCustomer.value,
-    customerBranch: structuredClone(toRaw(prevCustomer.value.customerBranch)),
-  };
-}
-
-async function assignFormDataEmployee(id: string) {
-  if (!listEmployee.value) return;
-
-  currentEmployeeId.value = id;
-
-  const foundEmployee = listEmployee.value.find((x: Employee) => x.id === id);
-
-  if (foundEmployee) {
-    const fetchCheckup = await employeeStore.fetchCheckup(foundEmployee.id);
-    const fetchWork = await employeeStore.fetchWork(foundEmployee.id);
-    const fetchOther = await employeeStore.fetchOther(foundEmployee.id);
-
-    const employeeCheckup =
-      fetchCheckup &&
-      fetchCheckup.map((i: EmployeeCheckup) => ({
-        coverageExpireDate: i.coverageExpireDate,
-        coverageStartDate: i.coverageStartDate,
-        insuranceCompany: i.insuranceCompany,
-        medicalBenefitScheme: i.medicalBenefitScheme,
-        remark: i.remark,
-        hospitalName: i.hospitalName,
-        provinceId: i.provinceId,
-        checkupResult: i.checkupResult,
-        checkupType: i.checkupType,
-      }));
-
-    const employeeWork =
-      fetchWork &&
-      fetchWork.map((i: EmployeeWork) => ({
-        workEndDate: i.workEndDate,
-        workPermitExpireDate: i.workPermitExpireDate,
-        workPermitIssuDate: i.workPermitIssuDate,
-        workPermitNo: i.workPermitNo,
-        workplace: i.workplace,
-        jobType: i.jobType,
-        positionName: i.positionName,
-        ownerName: i.ownerName,
-        remark: i.remark,
-      }));
-
-    const employeeOther = fetchOther && {
-      motherBirthPlace: fetchOther.motherBirthPlace,
-      motherLastNameEN: fetchOther.motherLastNameEN,
-      motherFirstNameEN: fetchOther.motherFirstNameEN,
-      fatherLastNameEN: fetchOther.fatherLastNameEN,
-      fatherFirstNameEN: fetchOther.fatherFirstNameEN,
-      motherLastName: fetchOther.motherLastName,
-      motherFirstName: fetchOther.motherFirstName,
-      fatherLastName: fetchOther.fatherLastName,
-      fatherFirstName: fetchOther.fatherFirstName,
-      fatherBirthPlace: fetchOther.fatherBirthPlace,
-      citizenId: fetchOther.citizenId,
-    };
-
-    currentEmployeeCode.value = foundEmployee.code;
-    currentEmployee.value = foundEmployee;
-
-    profileUrl.value = foundEmployee.profileImageUrl;
-
-    foundEmployee.profileImageUrl
-      ? (profileSubmit.value = true)
-      : (profileSubmit.value = false);
-    isEmployeeEdit.value = true;
-
-    const foundBranch = await fetchListCustomeBranchById(
-      foundEmployee.customerBranchId,
-    );
-    formDataEmployeeOwner.value = {
-      id: foundBranch.id,
-      address: foundBranch.address,
-      addressEN: foundBranch.addressEN,
-      provinceId: foundBranch.provinceId,
-      districtId: foundBranch.districtId,
-      subDistrictId: foundBranch.subDistrictId,
-      zipCode: foundBranch.zipCode,
-    };
-
-    formDataEmployee.value = {
-      code: foundEmployee.code,
-      image: null,
-      customerBranchId: foundEmployee.customerBranchId,
-      nrcNo: foundEmployee.nrcNo,
-      dateOfBirth: foundEmployee.dateOfBirth,
-      gender: foundEmployee.gender,
-      nationality: foundEmployee.nationality,
-      firstName: foundEmployee.firstName,
-      firstNameEN: foundEmployee.firstNameEN,
-      lastName: foundEmployee.lastName,
-      lastNameEN: foundEmployee.lastNameEN,
-      addressEN: foundEmployee.addressEN,
-      address: foundEmployee.address,
-      zipCode: foundEmployee.zipCode,
-      passportType: foundEmployee.passportType,
-      passportNumber: foundEmployee.passportNumber,
-      passportIssueDate: foundEmployee.passportIssueDate,
-      passportExpiryDate: foundEmployee.passportExpiryDate,
-      passportIssuingCountry: foundEmployee.passportIssuingCountry,
-      passportIssuingPlace: foundEmployee.passportIssuingPlace,
-      previousPassportReference: foundEmployee.previousPassportReference,
-      visaType: foundEmployee.visaType,
-      visaNumber: foundEmployee.visaNumber,
-      visaIssueDate: foundEmployee.visaIssueDate,
-      visaExpiryDate: foundEmployee.visaExpiryDate,
-      visaIssuingPlace: foundEmployee.visaIssuingPlace,
-      visaStayUntilDate: foundEmployee.visaStayUntilDate,
-      tm6Number: foundEmployee.tm6Number,
-      entryDate: foundEmployee.entryDate,
-      workerStatus: foundEmployee.workerStatus,
-      subDistrictId: foundEmployee.subDistrictId,
-      districtId: foundEmployee.districtId,
-      provinceId: foundEmployee.provinceId,
-
-      employeeWork: employeeWork,
-      employeeCheckup: employeeCheckup,
-      employeeOtherInfo: employeeOther,
-    };
-
-    if (foundBranch.address === foundEmployee.address) {
-      formDataEmployeeSameAddr.value = true;
-    } else {
-      formDataEmployeeSameAddr.value = false;
-    }
-
-    if (infoEmployeePersonCard.value) {
-      infoEmployeePersonCard.value[0].img = foundEmployee.profileImageUrl || '';
-    }
-  }
-  flowStore.rotate();
-}
-
-async function checkEmployeeForm() {
-  const formData = formDataEmployee.value;
-  let forget = false;
-
-  for (const [key, val] of Object.entries(formData)) {
-    if (key === 'workerStatus') continue;
-    if (key === 'image') continue;
-
-    const validPersonalInfoKeys = [
-      'customerBranchId',
-      'firstName',
-      'firstNameEN',
-      'lastName',
-      'lastNameEN',
-      'dateOfBirth',
-      'gender',
-      'nationality',
-      'passportType',
-      'passportNumber',
-      'passportIssueDate',
-      'passportExpiryDate',
-      'passportIssuingCountry',
-      'passportIssuingPlace',
-    ];
-
-    if (validPersonalInfoKeys.includes(key) && (val === '' || val === null)) {
-      formDataEmployeeTab.value = 'personalInfo';
-      return;
-    }
-
-    if (val === '' || val === null) {
-      forget = true;
-    }
-  }
-
-  if (forget) {
-    return await new Promise((resolve) => {
-      dialog({
-        color: 'warning',
-        icon: 'mdi-alert',
-        title: t('warning'),
-        actionText: t('ok'),
-        persistent: true,
-        message: t('warningForgetInput'),
-        action: () => {
-          resolve(true);
-        },
-        cancel: () => {
-          resolve(false);
-        },
-      });
-    });
-  } else return true;
-}
-
 async function openHistory(id: string) {
   const res = await employeeStore.getEditHistory(id);
   employeeHistory.value = res.reverse();
@@ -1689,7 +365,6 @@ onMounted(async () => {
       handler: () => {
         isMainPage.value = true;
         currentCustomerUrlImage.value = null;
-        clearForm();
       },
     },
   ];
@@ -1703,10 +378,7 @@ onMounted(async () => {
     pageSize: pageSize.value,
   });
 
-  if (resultStats) {
-    statsCustomerType.value = resultStats;
-  }
-
+  if (resultStats) statsCustomerType.value = resultStats;
   if (resultList) listCustomer.value = resultList.result;
 
   if (
@@ -1750,60 +422,23 @@ watch(locale, () => {
 });
 
 watch(fieldSelectedCustomer, async () => {
-  let resultList;
+  const resultList = await fetchList({
+    includeBranch: true,
+    customerType: (
+      {
+        all: undefined,
+        cusomterLegalEnity: 'CORP',
+        customerNaturalPerson: 'PERS',
+      } as const
+    )[fieldSelectedCustomer.value.value],
+  });
 
-  if (fieldSelectedCustomer.value.value === 'all') {
-    resultList = await fetchList({ includeBranch: true });
-  }
+  if (resultList) listCustomer.value = resultList.result;
 
-  if (fieldSelectedCustomer.value.value === 'customerLegalEntity') {
-    resultList = await fetchList({ includeBranch: true, customerType: 'CORP' });
-  }
-
-  if (fieldSelectedCustomer.value.value === 'customerNaturalPerson') {
-    resultList = await fetchList({ includeBranch: true, customerType: 'PERS' });
-  }
-
-  if (resultList) {
-    listCustomer.value = resultList.result;
-  }
   flowStore.rotate();
 });
 
-watch(
-  () => formDataEmployeeOwner.value,
-  (e) => {
-    if (!e) return;
-    if (formDataEmployeeSameAddr.value) {
-      formDataEmployee.value.address = e.address;
-      formDataEmployee.value.addressEN = e.addressEN;
-      formDataEmployee.value.provinceId = e.provinceId;
-      formDataEmployee.value.districtId = e.districtId;
-      formDataEmployee.value.subDistrictId = e.subDistrictId;
-      formDataEmployee.value.zipCode = e.zipCode;
-    }
-    formDataEmployee.value.customerBranchId = e.id;
-  },
-);
-
-watch(
-  () => formDataEmployeeSameAddr.value,
-  (isSame) => {
-    if (!formDataEmployeeOwner.value) return;
-    if (isSame) {
-      formDataEmployee.value.address = formDataEmployeeOwner.value.address;
-      formDataEmployee.value.addressEN = formDataEmployeeOwner.value.addressEN;
-      formDataEmployee.value.provinceId =
-        formDataEmployeeOwner.value.provinceId;
-      formDataEmployee.value.districtId =
-        formDataEmployeeOwner.value.districtId;
-      formDataEmployee.value.subDistrictId =
-        formDataEmployeeOwner.value.subDistrictId;
-      formDataEmployee.value.zipCode = formDataEmployeeOwner.value.zipCode;
-    }
-    formDataEmployee.value.customerBranchId = formDataEmployeeOwner.value.id;
-  },
-);
+// TODO: When in employee form, if select address same as customer then auto fill
 
 watch(genderSelector, async () => {
   await fetchListEmployee();
@@ -1835,9 +470,7 @@ watch([inputSearch, currentStatus], async () => {
 
 watch(
   () => $q.screen.lt.md,
-  (v) => {
-    if (v) modeView.value = true;
-  },
+  () => $q.screen.lt.md && (modeView.value = true),
 );
 
 watch(isMainPage, () => {
@@ -1847,15 +480,13 @@ watch(isMainPage, () => {
       handler: () => {
         isMainPage.value = true;
         currentCustomerUrlImage.value = null;
-        clearForm();
+        // clearForm();
       },
     },
   ];
 
   if (isMainPage.value === false) {
-    tmp.push({
-      text: currentCustomerName.value || '',
-    });
+    tmp.push({ text: currentCustomerName.value || '' });
   }
 
   utilsStore.currentTitle.path = tmp;
@@ -1893,7 +524,7 @@ watch(isMainPage, () => {
         external-label
         id="add-employee"
         label-position="left"
-        @click="openDialogCustomerType()"
+        @click=""
         color="primary"
         padding="xs"
         icon="mdi-account-plus"
@@ -2303,8 +934,8 @@ watch(isMainPage, () => {
                         <q-td v-if="fieldSelected.includes('customerName')">
                           <div class="row items-center">
                             <div
+                              class="q-mr-sm"
                               style="
-                                width: 50px;
                                 display: flex;
                                 margin-bottom: var(--size-2);
                               "
@@ -2379,8 +1010,8 @@ watch(isMainPage, () => {
                                 currentCustomerId = props.row.id;
                                 customerType = props.row.customerType;
 
-                                assignFormData(props.row.id);
-                                openDialogInputForm('INFO', props.row.id);
+                                // assignFormData(props.row.id);
+                                // openDialogInputForm('INFO', props.row.id);
                               }
                             "
                           />
@@ -2406,8 +1037,8 @@ watch(isMainPage, () => {
 
                                       currentCustomerId = props.row.id;
                                       customerType = props.row.customerType;
-                                      assignFormData(props.row.id);
-                                      openDialogInputForm('INFO', props.row.id);
+                                      // assignFormData(props.row.id);
+                                      // openDialogInputForm('INFO', props.row.id);
                                     }
                                   "
                                   v-close-popup
@@ -2444,10 +1075,11 @@ watch(isMainPage, () => {
 
                                       currentCustomerId = props.row.id;
 
-                                      assignFormData(props.row.id);
+                                      // assignFormData(props.row.id);
 
                                       infoDrawerEdit = true;
-                                      openDialogInputForm('INFO', props.row.id);
+
+                                      // openDialogInputForm('INFO', props.row.id);
                                     }
                                   "
                                 >
@@ -2579,10 +1211,10 @@ watch(isMainPage, () => {
 
                               currentCustomerId = props.row.id;
 
-                              assignFormData(props.row.id);
+                              // assignFormData(props.row.id);
 
                               infoDrawerEdit = true;
-                              openDialogInputForm('INFO', props.row.id);
+                              // openDialogInputForm('INFO', props.row.id);
                             }
                           "
                           @enter-card="
@@ -2606,8 +1238,8 @@ watch(isMainPage, () => {
                               const { branch, ...payload } = props.row;
                               currentCustomer = payload;
                               currentCustomerId = props.row.id;
-                              assignFormData(props.row.id);
-                              openDialogInputForm('INFO', props.row.id);
+                              // assignFormData(props.row.id);
+                              // openDialogInputForm('INFO', props.row.id);
                             }
                           "
                           @delete-card="deleteCustomerById(props.row.id)"
@@ -2747,7 +1379,7 @@ watch(isMainPage, () => {
                         :id="`row-table-${props.row.firstNameEN}`"
                         @click="
                           () => {
-                            openDialogInputForm('INFO', props.row.id);
+                            // openDialogInputForm('INFO', props.row.id);
                           }
                         "
                       >
@@ -2877,7 +1509,7 @@ watch(isMainPage, () => {
                             flat
                             @click.stop="
                               () => {
-                                openDialogInputForm('INFO', props.row.id);
+                                // openDialogInputForm('INFO', props.row.id);
                               }
                             "
                           />
@@ -2898,7 +1530,7 @@ watch(isMainPage, () => {
                                   :id="`view-detail-btn-${props.row.name}-view`"
                                   @click.stop="
                                     () => {
-                                      openDialogInputForm('INFO', props.row.id);
+                                      // openDialogInputForm('INFO', props.row.id);
                                     }
                                   "
                                   clickable
@@ -2925,11 +1557,11 @@ watch(isMainPage, () => {
                                   style="white-space: nowrap"
                                   @click="
                                     () => {
-                                      openDialogInputForm(
-                                        'INFO',
-                                        props.row.id,
-                                        true,
-                                      );
+                                      // openDialogInputForm(
+                                      //   'INFO',
+                                      //   props.row.id,
+                                      //   true,
+                                      // );
                                     }
                                   "
                                 >
@@ -3042,14 +1674,8 @@ watch(isMainPage, () => {
                           ]"
                           :disabled="props.row.status === 'INACTIVE'"
                           @history="openHistory(props.row.id)"
-                          @update-card="
-                            (action) =>
-                              openDialogInputForm(action, props.row.id, true)
-                          "
-                          @enter-card="
-                            (action) =>
-                              openDialogInputForm(action, props.row.id)
-                          "
+                          @update-card=""
+                          @enter-card=""
                           @delete-card="onDelete(props.row.id)"
                           @toggle-status="
                             triggerChangeStatus(props.row.id, props.row.status)
@@ -3157,7 +1783,7 @@ watch(isMainPage, () => {
                         ? 'customerEmployerAdd'
                         : 'customerEmployeeAdd'
                     "
-                    @trigger="() => openDialogCustomerType()"
+                    @trigger="() => {}"
                   />
                 </div>
               </template>
@@ -3166,7 +1792,7 @@ watch(isMainPage, () => {
         </q-splitter>
       </div>
     </div>
-    <div class="col column surface-1" v-else>
+    <div class="col column" v-else>
       <CustomerInfoComponent
         :customer-type="customerType"
         :customer-id="currentCustomerId"
@@ -3177,11 +1803,11 @@ watch(isMainPage, () => {
             statBranchNo = 1;
             indexTab = 0;
             currentCustomerUrlImage = null;
-            clearForm();
+            // clearForm();
           }
         "
         @viewDetail="
-          async (v, i) => {
+          async (v) => {
             await fetchListOfOptionBranch();
             currentBranchId = v.id;
             statusToggle = v.status === 'INACTIVE' ? false : true;
@@ -3189,7 +1815,9 @@ watch(isMainPage, () => {
               name: v.name,
               code: v.code,
             };
-            if (currentCustomer) assignFormData(currentCustomer.id, v, i);
+            if (currentCustomer) {
+              // assignFormData(currentCustomer.id, v, i);
+            }
             infoDrawerBranch = true;
           }
         "
@@ -3199,1230 +1827,6 @@ watch(isMainPage, () => {
       />
     </div>
   </div>
-
-  <FormDialog
-    v-model:modal="dialogCustomerType"
-    :title="$t('customerCardUserType')"
-    no-footer
-    no-app-box
-    width="60vw"
-    height="50vh"
-    :close="
-      () => {
-        dialogCustomerType = false;
-      }
-    "
-  >
-    <div class="row full-width items-center">
-      <ItemCard
-        class="col q-mx-sm"
-        v-for="i in itemCard"
-        :key="i.text"
-        :icon="i.icon"
-        :text="i.text"
-        :color="i.color"
-        @trigger="
-          () => {
-            triggerCreate(i.text === 'customerLegalEntity' ? 'CORP' : 'PERS');
-          }
-        "
-      />
-    </div>
-  </FormDialog>
-
-  <FormDialog
-    v-model:modal="dialogInputForm"
-    :title="$t('customerEmployerAdd')"
-    :customer-label="customerType"
-    :hiddenBtnSave="false"
-    :submit="() => {}"
-    :close="
-      () => {
-        if (hideBranch && countStartsOne === 1) {
-          dialog({
-            color: 'warning',
-            icon: 'mdi-alert',
-            title: t('warning'),
-            actionText: t('ok'),
-            persistent: true,
-            message: t('notRecorded'),
-            action: async () => {
-              countStartsOne++;
-              clearForm();
-              dialogInputForm = false;
-            },
-            cancel: () => {},
-          });
-        } else {
-          clearForm();
-          dialogInputForm = false;
-        }
-      }
-    "
-  >
-    <template #prepend>
-      <ProfileUpload
-        prefix-id="form-dialog"
-        v-model:url-profile="profileUrl"
-        v-model:status-toggle="statusToggle"
-        v-model:profile-submit="profileSubmit"
-        @input-file="inputFile.click()"
-        @cancel-file="inputFile.value = ''"
-      />
-    </template>
-
-    <template #information>
-      <BasicInformation
-        dense
-        outlined
-        separator
-        prefix-id="form-dialog"
-        :type-customer="customerType"
-        v-model:options-branch="branchOption"
-        v-model:registered-branch-id="formData.registeredBranchId"
-        v-model:customer-name="formData.customerName"
-        v-model:customer-name-en="formData.customerNameEN"
-        v-model:person-name="formData.personName"
-        v-model:tax-no="formData.taxNo"
-        :show-btn-save="true"
-        @save="
-          async () => {
-            await onSubmitBasicInformation();
-            console.log('สร้าง');
-          }
-        "
-      />
-    </template>
-
-    <template #address>
-      <!-- <FormCustomerBranch separator dense outlined /> -->
-
-      <div v-if="!hideBranch">
-        <div class="col-3 app-text-muted">
-          • {{ $t('formDialogCustomerBranch') }}
-        </div>
-
-        <div class="col-12 row bordered q-pt-none rounded">
-          <TabComponent
-            prefix-id="form-dialog"
-            v-model:branch-no="statBranchNo"
-            v-model:stat-branch-no="statBranchNo"
-            v-model:customer-branch="formData.customerBranch"
-            v-model:tab-index="indexTab"
-            @save="() => onSubmitCustomerBranch({ isClearForm: false })"
-            @remove="(indexTab, id) => deleteByIdBranch(id, indexTab)"
-          >
-            <template #address>
-              <FormAddress
-                prefix-id="form-dialog"
-                :indexId="indexTab"
-                v-if="
-                  indexTab !== undefined && formData.customerBranch?.[indexTab]
-                "
-                v-model:address="formData.customerBranch[indexTab].address"
-                v-model:address-e-n="
-                  formData.customerBranch[indexTab].addressEN
-                "
-                v-model:province-id="
-                  formData.customerBranch[indexTab].provinceId
-                "
-                v-model:district-id="
-                  formData.customerBranch[indexTab].districtId
-                "
-                v-model:sub-district-id="
-                  formData.customerBranch[indexTab].subDistrictId
-                "
-                v-model:zip-code="formData.customerBranch[indexTab].zipCode"
-                :title="$t('formDialogTitleEmployerAddress')"
-                separator
-                dense
-                outlined
-              />
-            </template>
-
-            <template #businessInformation>
-              <FormBusiness
-                prefix-id="form-dialog"
-                v-if="
-                  indexTab !== undefined && formData.customerBranch?.[indexTab]
-                "
-                v-model:employment-office="
-                  formData.customerBranch[indexTab].employmentOffice
-                "
-                v-model:bussiness-type="
-                  formData.customerBranch[indexTab].bussinessType
-                "
-                v-model:bussiness-type-en="
-                  formData.customerBranch[indexTab].bussinessTypeEN
-                "
-                v-model:job-position="
-                  formData.customerBranch[indexTab].jobPosition
-                "
-                v-model:job-position-en="
-                  formData.customerBranch[indexTab].jobPositionEN
-                "
-                v-model:job-description="
-                  formData.customerBranch[indexTab].jobDescription
-                "
-                v-model:sale-employee="
-                  formData.customerBranch[indexTab].saleEmployee
-                "
-                v-model:pay-date="formData.customerBranch[indexTab].payDate"
-                v-model:wage-rate="formData.customerBranch[indexTab].wageRate"
-                separator
-                dense
-                outlined
-              />
-            </template>
-            <template #about>
-              <AboutComponent
-                v-if="
-                  indexTab !== undefined && formData.customerBranch?.[indexTab]
-                "
-                prefix-id="form-dialog"
-                :type-customer="customerType"
-                v-model:branch-no="formData.customerBranch[indexTab].branchNo"
-                v-model:tax-no="formData.customerBranch[indexTab].taxNo"
-                v-model:customer-name="formData.customerBranch[indexTab].name"
-                v-model:customer-english-name="
-                  formData.customerBranch[indexTab].nameEN
-                "
-                v-model:authorized-capital="
-                  formData.customerBranch[indexTab].authorizedCapital
-                "
-                v-model:register-name="
-                  formData.customerBranch[indexTab].registerName
-                "
-                v-model:register-date="
-                  formData.customerBranch[indexTab].registerDate
-                "
-                dense
-                outlined
-                separator
-              />
-            </template>
-            <template #contactInformation>
-              <ContactComponent
-                prefix-id="form-dialog"
-                v-if="
-                  indexTab !== undefined && formData.customerBranch?.[indexTab]
-                "
-                v-model:mail="formData.customerBranch[indexTab].email"
-                v-model:telephone="
-                  formData.customerBranch[indexTab].telephoneNo
-                "
-                dense
-                outlined
-                separator
-              />
-            </template>
-            <template #otherDocuments>
-              <OtherInformation
-                prefix-id="form-dialog"
-                v-if="
-                  indexTab !== undefined && formData.customerBranch?.[indexTab]
-                "
-                dense
-                outlined
-              />
-            </template>
-          </TabComponent>
-        </div>
-      </div>
-    </template>
-  </FormDialog>
-
-  <!-- Employee Form -->
-  <FormDialog
-    employee
-    disabledRule
-    :hiddenBtnSave="false"
-    addressSeparator
-    v-model:modal="dialogEmployee"
-    :noAddress="formDataEmployeeTab !== 'personalInfo'"
-    :noPaddingTab="
-      formDataEmployeeTab === 'healthCheck' ||
-      formDataEmployeeTab === 'workHistory'
-    "
-    :tabs-list="
-      employeeTab.filter((x) => {
-        if (hideTab) {
-          return x.name === 'personalInfo';
-        }
-        return true;
-      })
-    "
-    v-model:current-tab="formDataEmployeeTab"
-    v-model:same-with-employer="formDataEmployeeSameAddr"
-    v-model:address="formDataEmployee.address"
-    v-model:addressEN="formDataEmployee.addressEN"
-    v-model:provinceId="formDataEmployee.provinceId"
-    v-model:districtId="formDataEmployee.districtId"
-    v-model:subDistrictId="formDataEmployee.subDistrictId"
-    v-model:zipCode="formDataEmployee.zipCode"
-    :title="$t('customerEmployeeAdd')"
-    :submit="
-      () => {
-        // isEmployeeEdit
-        //   ? currentEmployee && onSubmitEdit(currentEmployee.id)
-        //   : onSubmit();
-      }
-    "
-    :close="
-      () => {
-        clearFormEmployee();
-      }
-    "
-  >
-    <template #prepend>
-      <ProfileUpload
-        prefix-id="form-dialog"
-        v-model:url-profile="profileUrl"
-        v-model:status-toggle="statusToggle"
-        v-model:profile-submit="profileSubmit"
-        @input-file="inputFile.click()"
-        @cancel-file="inputFile.value = ''"
-      />
-    </template>
-
-    <template #information>
-      <BasicInformation
-        prefix-id="form-dialog"
-        v-if="formDataEmployeeTab === 'personalInfo'"
-        employee
-        dense
-        outlined
-        separator
-        :employee-owner-option="employeeStore.ownerOption"
-        v-model:customer-branch="formDataEmployeeOwner"
-        v-model:employee-id="currentEmployeeCode"
-        v-model:nrc-no="formDataEmployee.nrcNo"
-        v-model:person-name="formData.personName"
-        @filter-owner-branch="employeeFilterOwnerBranch"
-      />
-    </template>
-
-    <template #person>
-      <FormPerson
-        prefix-id="form-dialog"
-        v-if="formDataEmployeeTab === 'personalInfo'"
-        dense
-        outlined
-        employee
-        separator
-        :title="$t('personalInfo')"
-        v-model:firstName="formDataEmployee.firstName"
-        v-model:lastName="formDataEmployee.lastName"
-        v-model:firstNameEN="formDataEmployee.firstNameEN"
-        v-model:lastNameEN="formDataEmployee.lastNameEN"
-        v-model:gender="formDataEmployee.gender"
-        v-model:birthDate="formDataEmployee.dateOfBirth"
-        v-model:nationality="formDataEmployee.nationality"
-      />
-
-      <FormEmployeeHealthCheck
-        prefix-id="form-dialog"
-        v-if="
-          formDataEmployeeTab === 'healthCheck' &&
-          formDataEmployee.employeeCheckup
-        "
-        show-btn-save
-        dense
-        outlined
-        v-model:employee-checkup="formDataEmployee.employeeCheckup"
-        v-model:checkup-type-option="optionStore.globalOption.nationality"
-        v-model:medical-benefit-option="optionStore.globalOption.typeInsurance"
-        v-model:insurance-company-option="
-          optionStore.globalOption.insurancePlace
-        "
-        @save="
-          (index) => {
-            onSubmitEmployee('healthCheck', index);
-          }
-        "
-        @remove="
-          (index) => {
-            deleteByIdCheckOrwork(
-              formDataEmployee.employeeCheckup?.[index].id || '',
-              'healthCheck',
-              index,
-            );
-          }
-        "
-      />
-      <FormEmployeeWorkHistory
-        prefix-id="form-dialog"
-        v-if="formDataEmployeeTab === 'workHistory'"
-        dense
-        outlined
-        v-model:employee-work="formDataEmployee.employeeWork"
-        v-model:position-name-option="optionStore.globalOption.position"
-        v-model:job-type-option="optionStore.globalOption.businessType"
-        v-model:workplace-option="optionStore.globalOption.area"
-        show-btn-save
-        @save="
-          (index) => {
-            onSubmitEmployee('workHistory', index);
-          }
-        "
-        @remove="
-          (index) => {
-            deleteByIdCheckOrwork(
-              formDataEmployee.employeeWork?.[index].id || '',
-              'healthCheck',
-              index,
-            );
-          }
-        "
-      />
-      <FormEmployeeOther
-        prefix-id="form-dialog"
-        v-if="
-          formDataEmployeeTab === 'other' && formDataEmployee.employeeOtherInfo
-        "
-        dense
-        outlined
-        v-model:employee-other="formDataEmployee.employeeOtherInfo"
-        show-btn-save
-        @save="() => onSubmitEmployee('other')"
-      />
-    </template>
-    <template #by-type>
-      <FormEmployeePassport
-        prefix-id="form-dialog"
-        v-if="formDataEmployeeTab === 'personalInfo'"
-        dense
-        outlined
-        separator
-        v-model:passport-type="formDataEmployee.passportType"
-        v-model:passport-number="formDataEmployee.passportNumber"
-        v-model:passport-issue-date="formDataEmployee.passportIssueDate"
-        v-model:passport-expiry-date="formDataEmployee.passportExpiryDate"
-        v-model:passport-issuing-place="formDataEmployee.passportIssuingPlace"
-        v-model:passport-issuing-country="
-          formDataEmployee.passportIssuingCountry
-        "
-        v-model:previous-passport-reference="
-          formDataEmployee.previousPassportReference
-        "
-        v-model:passport-type-option="optionStore.globalOption.nationality"
-        v-model:passport-issuing-country-option="
-          optionStore.globalOption.nationality
-        "
-      />
-      <FormEmployeeVisa
-        prefix-id="form-dialog"
-        v-if="formDataEmployeeTab === 'personalInfo'"
-        dense
-        outlined
-        v-model:visa-type="formDataEmployee.visaType"
-        v-model:visa-number="formDataEmployee.visaNumber"
-        v-model:visa-issue-date="formDataEmployee.visaIssueDate"
-        v-model:visa-expiry-date="formDataEmployee.visaExpiryDate"
-        v-model:visa-issuing-place="formDataEmployee.visaIssuingPlace"
-        v-model:visa-stay-until-date="formDataEmployee.visaStayUntilDate"
-        v-model:tm6-number="formDataEmployee.tm6Number"
-        v-model:entry-date="formDataEmployee.entryDate"
-        v-model:visa-type-option="optionStore.globalOption.nationality"
-        show-btn-save
-        @save="
-          () => {
-            onSubmitEmployee('personalInfo');
-          }
-        "
-      />
-    </template>
-  </FormDialog>
-
-  <FormDialog
-    v-model:modal="dialogInputCustomerBranchForm"
-    :title="$t('formDialogTitleCreateSubBranch')"
-    :submit="() => {}"
-    :close="
-      () => {
-        clearForm();
-        dialogInputCustomerBranchForm = false;
-      }
-    "
-  >
-    <template #address>
-      <!-- <FormCustomerBranch separator dense outlined /> -->
-
-      <div class="col-3 app-text-muted">
-        • {{ $t('formDialogCustomerBranch') }}
-      </div>
-
-      <div class="col-12 row bordered q-pt-none rounded">
-        <TabComponent
-          prefix-id="form-dialog"
-          :stat-branch-no="statBranchNo"
-          v-model:customer-branch="formData.customerBranch"
-          v-model:tab-index="indexTab"
-          @save="
-            () => {
-              onSubmitCustomerBranch({ isClearForm: true });
-            }
-          "
-        >
-          <template #address>
-            <FormAddress
-              prefix-id="form-dialog"
-              :indexId="indexTab"
-              v-if="
-                indexTab !== undefined && formData.customerBranch?.[indexTab]
-              "
-              v-model:address="formData.customerBranch[indexTab].address"
-              v-model:address-e-n="formData.customerBranch[indexTab].addressEN"
-              v-model:province-id="formData.customerBranch[indexTab].provinceId"
-              v-model:district-id="formData.customerBranch[indexTab].districtId"
-              v-model:sub-district-id="
-                formData.customerBranch[indexTab].subDistrictId
-              "
-              v-model:zip-code="formData.customerBranch[indexTab].zipCode"
-              separator
-              dense
-              outlined
-            />
-          </template>
-
-          <template #businessInformation>
-            <FormBusiness
-              prefix-id="form-dialog"
-              v-if="
-                indexTab !== undefined && formData.customerBranch?.[indexTab]
-              "
-              v-model:employment-office="
-                formData.customerBranch[indexTab].employmentOffice
-              "
-              v-model:bussiness-type="
-                formData.customerBranch[indexTab].bussinessType
-              "
-              v-model:bussiness-type-en="
-                formData.customerBranch[indexTab].bussinessTypeEN
-              "
-              v-model:job-position="
-                formData.customerBranch[indexTab].jobPosition
-              "
-              v-model:job-position-en="
-                formData.customerBranch[indexTab].jobPositionEN
-              "
-              v-model:job-description="
-                formData.customerBranch[indexTab].jobDescription
-              "
-              v-model:sale-employee="
-                formData.customerBranch[indexTab].saleEmployee
-              "
-              v-model:pay-date="formData.customerBranch[indexTab].payDate"
-              v-model:wage-rate="formData.customerBranch[indexTab].wageRate"
-              separator
-              dense
-              outlined
-            />
-          </template>
-          <template #about>
-            <AboutComponent
-              prefix-id="form-dialog"
-              v-if="
-                indexTab !== undefined && formData.customerBranch?.[indexTab]
-              "
-              :type-customer="customerType"
-              v-model:branch-no="formData.customerBranch[indexTab].branchNo"
-              v-model:tax-no="formData.customerBranch[indexTab].taxNo"
-              v-model:customer-name="formData.customerBranch[indexTab].name"
-              v-model:customer-english-name="
-                formData.customerBranch[indexTab].nameEN
-              "
-              v-model:authorized-capital="
-                formData.customerBranch[indexTab].authorizedCapital
-              "
-              v-model:register-name="
-                formData.customerBranch[indexTab].registerName
-              "
-              v-model:register-date="
-                formData.customerBranch[indexTab].registerDate
-              "
-              dense
-              outlined
-              separator
-            />
-          </template>
-          <template #contactInformation>
-            <ContactComponent
-              v-if="
-                indexTab !== undefined && formData.customerBranch?.[indexTab]
-              "
-              prefix-id="form-dialog"
-              v-model:mail="formData.customerBranch[indexTab].email"
-              v-model:telephone="formData.customerBranch[indexTab].telephoneNo"
-              dense
-              outlined
-              separator
-            />
-          </template>
-          <template #otherDocuments>
-            <OtherInformation
-              prefix-id="form-dialog"
-              v-if="
-                indexTab !== undefined && formData.customerBranch?.[indexTab]
-              "
-              dense
-              outlined
-            />
-          </template>
-        </TabComponent>
-      </div>
-    </template>
-  </FormDialog>
-
-  <!-- DRAWER INFO ของ นายจ้าง -->
-  <DrawerInfo
-    :title="
-      $t(
-        currentCustomer?.customerType === 'CORP'
-          ? 'formTitleCustomer'
-          : 'formTitleCustomerNaturalPerson',
-        { msg: currentCustomer?.customerName },
-      )
-    "
-    v-model:drawer-open="infoDrawer"
-    :badgeLabel="currentCustomer?.code"
-    :badgeClass="
-      currentCustomer?.customerType === 'CORP' ? 'app-bg-corp' : 'app-bg-pers'
-    "
-    :undo="() => undo()"
-    :isEdit="infoDrawerEdit"
-    :close="() => onClose()"
-    :editData="() => (infoDrawerEdit = true)"
-    :submit="() => onSubmitEdit(currentCustomerId)"
-    :deleteData="() => deleteCustomerById(currentCustomerId)"
-  >
-    <template #info>
-      <InfoForm>
-        <template #person-card>
-          <UsersDetailCardComponent
-            :can-edit-profile="infoDrawerEdit"
-            :hideButton="true"
-            v-if="!!currentCustomer"
-            no-bg
-            no-detail
-            no-hover
-            :color="
-              currentCustomer.customerType === 'CORP' ? 'purple' : 'green'
-            "
-            :metadata="{
-              id: '1',
-              disabled: currentCustomer.status === 'ACTIVE',
-            }"
-            :list="{
-              id: '1',
-              type: currentCustomer.customerType,
-              name: currentCustomer.customerName,
-              imageUrl: currentCustomer.imageUrl,
-              status: currentCustomer.status,
-              code: 'HQ006',
-            }"
-            @edit-profile="
-              () => {
-                inputFile.click();
-              }
-            "
-          />
-        </template>
-        <template #information>
-          <BasicInformation
-            prefix-id="drawer-info-customer"
-            dense
-            outlined
-            separator
-            :show-btn-save="true"
-            :readonly="!infoDrawerEdit"
-            :type-customer="customerType"
-            v-model:options-branch="branchOption"
-            v-model:registered-branch-id="formData.registeredBranchId"
-            v-model:customer-name="formData.customerName"
-            v-model:customer-name-en="formData.customerNameEN"
-            v-model:person-name="formData.personName"
-            v-model:tax-no="formData.taxNo"
-            @save="
-              () => {
-                console.log('แก้ไข');
-              }
-            "
-          />
-        </template>
-
-        <template #address>
-          <div class="col-3 app-text-muted">
-            • {{ $t('formDialogCustomerBranch') }}
-          </div>
-
-          <div class="col-12 row bordered q-pt-none rounded">
-            <TabComponent
-              prefix-id="drawer-info-customer"
-              :stat-branch-no="statBranchNo"
-              :readonly="!infoDrawerEdit"
-              v-model:customer-branch="formData.customerBranch"
-              v-model:tab-index="indexTab"
-              @save="() => onSubmitCustomerBranch({ isClearForm: false })"
-            >
-              <template #address>
-                <FormAddress
-                  prefix-id="drawer-info-customer"
-                  :indexId="indexTab"
-                  v-if="
-                    indexTab !== undefined &&
-                    formData.customerBranch?.[indexTab]
-                  "
-                  v-model:address="formData.customerBranch[indexTab].address"
-                  v-model:address-e-n="
-                    formData.customerBranch[indexTab].addressEN
-                  "
-                  v-model:province-id="
-                    formData.customerBranch[indexTab].provinceId
-                  "
-                  v-model:district-id="
-                    formData.customerBranch[indexTab].districtId
-                  "
-                  v-model:sub-district-id="
-                    formData.customerBranch[indexTab].subDistrictId
-                  "
-                  v-model:zip-code="formData.customerBranch[indexTab].zipCode"
-                  separator
-                  dense
-                  outlined
-                  :readonly="!infoDrawerEdit"
-                />
-              </template>
-
-              <template #businessInformation>
-                <FormBusiness
-                  prefix-id="drawer-info-customer"
-                  v-if="
-                    indexTab !== undefined &&
-                    formData.customerBranch?.[indexTab]
-                  "
-                  v-model:employment-office="
-                    formData.customerBranch[indexTab].employmentOffice
-                  "
-                  v-model:bussiness-type="
-                    formData.customerBranch[indexTab].bussinessType
-                  "
-                  v-model:bussiness-type-en="
-                    formData.customerBranch[indexTab].bussinessTypeEN
-                  "
-                  v-model:job-position="
-                    formData.customerBranch[indexTab].jobPosition
-                  "
-                  v-model:job-position-en="
-                    formData.customerBranch[indexTab].jobPositionEN
-                  "
-                  v-model:job-description="
-                    formData.customerBranch[indexTab].jobDescription
-                  "
-                  v-model:sale-employee="
-                    formData.customerBranch[indexTab].saleEmployee
-                  "
-                  v-model:pay-date="formData.customerBranch[indexTab].payDate"
-                  v-model:wage-rate="formData.customerBranch[indexTab].wageRate"
-                  separator
-                  dense
-                  outlined
-                  :readonly="!infoDrawerEdit"
-                />
-              </template>
-              <template #about>
-                <AboutComponent
-                  prefix-id="drawer-info-customer"
-                  v-if="
-                    indexTab !== undefined &&
-                    formData.customerBranch?.[indexTab]
-                  "
-                  :type-customer="customerType"
-                  v-model:legal-entity-code="
-                    formData.customerBranch[indexTab].legalPersonNo
-                  "
-                  v-model:tax-no="formData.customerBranch[indexTab].taxNo"
-                  v-model:branch-code="formData.customerBranch[indexTab].code"
-                  v-model:branch-no="formData.customerBranch[indexTab].branchNo"
-                  v-model:customer-name="formData.customerBranch[indexTab].name"
-                  v-model:customer-english-name="
-                    formData.customerBranch[indexTab].nameEN
-                  "
-                  v-model:authorized-capital="
-                    formData.customerBranch[indexTab].authorizedCapital
-                  "
-                  v-model:register-name="
-                    formData.customerBranch[indexTab].registerName
-                  "
-                  v-model:register-date="
-                    formData.customerBranch[indexTab].registerDate
-                  "
-                  dense
-                  outlined
-                  separator
-                  :readonly="!infoDrawerEdit"
-                />
-              </template>
-              <template #contactInformation>
-                <ContactComponent
-                  prefix-id="drawer-info-customer"
-                  v-if="
-                    indexTab !== undefined &&
-                    formData.customerBranch?.[indexTab]
-                  "
-                  v-model:mail="formData.customerBranch[indexTab].email"
-                  v-model:telephone="
-                    formData.customerBranch[indexTab].telephoneNo
-                  "
-                  dense
-                  outlined
-                  separator
-                  :readonly="!infoDrawerEdit"
-                />
-              </template>
-              <template #otherDocuments>
-                <OtherInformation
-                  prefix-id="drawer-info-customer"
-                  v-if="
-                    indexTab !== undefined &&
-                    formData.customerBranch?.[indexTab]
-                  "
-                  dense
-                  outlined
-                  :readonly="!infoDrawerEdit"
-                />
-              </template>
-            </TabComponent>
-          </div>
-        </template>
-      </InfoForm>
-    </template>
-  </DrawerInfo>
-
-  <!-- DRAWER INFO ของ สาขา -->
-  <DrawerInfo
-    :title="$t('formTitleBranch', { msg: currentBranch.name })"
-    v-model:drawer-open="infoDrawerBranch"
-    :badgeLabel="currentBranch.code"
-    :badgeClass="
-      currentCustomer?.customerType === 'CORP' ? 'app-bg-corp' : 'app-bg-pers'
-    "
-    :undo="
-      () => {
-        cloneData();
-        infoDrawerEdit = false;
-      }
-    "
-    :isEdit="infoDrawerEdit"
-    :close="() => onCloseBranch()"
-    :editData="() => (infoDrawerEdit = true)"
-    :deleteData="() => deleteBranchId(currentBranchId)"
-    :submit="
-      () => {
-        console.log(formData.customerBranch?.[indexTab]);
-        submitBranch();
-      }
-    "
-  >
-    <template #info>
-      <InfoForm>
-        <template #person-card>
-          <UsersDetailCardComponent
-            :hideButton="true"
-            v-if="!!currentCustomer"
-            no-bg
-            no-detail
-            no-hover
-            :color="
-              currentCustomer.customerType === 'CORP' ? 'purple' : 'green'
-            "
-            :metadata="{
-              id: '1',
-              disabled: currentCustomer.status === 'ACTIVE',
-            }"
-            :list="{
-              id: '1',
-              type: currentCustomer.customerType,
-              name: currentCustomer.customerName,
-              imageUrl: currentCustomer.imageUrl,
-              status: currentCustomer.status,
-              code: 'HQ006',
-            }"
-          />
-
-          <div class="text-left q-pt-md" v-if="infoDrawerEdit">
-            <q-toggle
-              id="toggle-status"
-              dense
-              size="md"
-              v-model="statusToggle"
-              padding="none"
-              class="q-pr-md"
-            />
-            <span>สถานะสาขา</span>
-          </div>
-        </template>
-        <template #information>
-          <BasicInformation
-            prefix-id="drawer-info-customer-branch"
-            dense
-            outlined
-            separator
-            :readonly="true"
-            :type-customer="customerType"
-            v-model:options-branch="branchOption"
-            v-model:registered-branch-id="formData.registeredBranchId"
-            v-model:customer-name="formData.customerName"
-            v-model:customer-name-en="formData.customerNameEN"
-            v-model:person-name="formData.personName"
-            v-model:tax-no="formData.taxNo"
-          />
-        </template>
-
-        <template #address>
-          <div class="col-3 app-text-muted">
-            • {{ $t('formDialogCustomerBranch') }}
-          </div>
-
-          <div class="col-12 row bordered q-pt-none rounded">
-            <TabComponent
-              :stat-branch-no="statBranchNo"
-              prefix-id="drawer-info-customer-branch"
-              :edit="infoDrawerEdit"
-              :readonly="!infoDrawerEdit"
-              v-model:customer-branch="formData.customerBranch"
-              v-model:tab-index="indexTab"
-            >
-              <template #address>
-                <FormAddress
-                  prefix-id="drawer-info-customer-branch"
-                  :indexId="indexTab"
-                  v-if="
-                    indexTab !== undefined &&
-                    formData.customerBranch?.[indexTab]
-                  "
-                  v-model:address="formData.customerBranch[indexTab].address"
-                  v-model:address-e-n="
-                    formData.customerBranch[indexTab].addressEN
-                  "
-                  v-model:province-id="
-                    formData.customerBranch[indexTab].provinceId
-                  "
-                  v-model:district-id="
-                    formData.customerBranch[indexTab].districtId
-                  "
-                  v-model:sub-district-id="
-                    formData.customerBranch[indexTab].subDistrictId
-                  "
-                  v-model:zip-code="formData.customerBranch[indexTab].zipCode"
-                  separator
-                  dense
-                  outlined
-                  :readonly="!infoDrawerEdit"
-                />
-              </template>
-
-              <template #businessInformation>
-                <FormBusiness
-                  prefix-id="drawer-info-customer-branch"
-                  v-if="
-                    indexTab !== undefined &&
-                    formData.customerBranch?.[indexTab]
-                  "
-                  v-model:employment-office="
-                    formData.customerBranch[indexTab].employmentOffice
-                  "
-                  v-model:bussiness-type="
-                    formData.customerBranch[indexTab].bussinessType
-                  "
-                  v-model:bussiness-type-en="
-                    formData.customerBranch[indexTab].bussinessTypeEN
-                  "
-                  v-model:job-position="
-                    formData.customerBranch[indexTab].jobPosition
-                  "
-                  v-model:job-position-en="
-                    formData.customerBranch[indexTab].jobPositionEN
-                  "
-                  v-model:job-description="
-                    formData.customerBranch[indexTab].jobDescription
-                  "
-                  v-model:sale-employee="
-                    formData.customerBranch[indexTab].saleEmployee
-                  "
-                  v-model:pay-date="formData.customerBranch[indexTab].payDate"
-                  v-model:wage-rate="formData.customerBranch[indexTab].wageRate"
-                  separator
-                  dense
-                  outlined
-                  :readonly="!infoDrawerEdit"
-                />
-              </template>
-              <template #about>
-                <AboutComponent
-                  prefix-id="drawer-info-customer-branch"
-                  v-if="formData.customerBranch?.[0]"
-                  :type-customer="customerType"
-                  v-model:branch-code="formData.customerBranch[indexTab].code"
-                  v-model:branch-no="formData.customerBranch[indexTab].branchNo"
-                  v-model:customer-name="formData.customerBranch[indexTab].name"
-                  v-model:customer-english-name="
-                    formData.customerBranch[indexTab].nameEN
-                  "
-                  v-model:authorized-capital="
-                    formData.customerBranch[indexTab].authorizedCapital
-                  "
-                  v-model:register-name="
-                    formData.customerBranch[indexTab].registerName
-                  "
-                  v-model:register-date="
-                    formData.customerBranch[indexTab].registerDate
-                  "
-                  dense
-                  outlined
-                  separator
-                  :readonly="!infoDrawerEdit"
-                />
-              </template>
-              <template #contactInformation>
-                <ContactComponent
-                  prefix-id="drawer-info-customer-branch"
-                  v-if="
-                    indexTab !== undefined &&
-                    formData.customerBranch?.[indexTab]
-                  "
-                  v-model:mail="formData.customerBranch[indexTab].email"
-                  v-model:telephone="
-                    formData.customerBranch[indexTab].telephoneNo
-                  "
-                  dense
-                  outlined
-                  separator
-                  :readonly="!infoDrawerEdit"
-                />
-              </template>
-              <template #otherDocuments>
-                <OtherInformation
-                  prefix-id="drawer-info-customer-branch"
-                  v-if="
-                    indexTab !== undefined &&
-                    formData.customerBranch?.[indexTab]
-                  "
-                  dense
-                  outlined
-                  :readonly="!infoDrawerEdit"
-                />
-              </template>
-            </TabComponent>
-          </div>
-        </template>
-      </InfoForm>
-    </template>
-  </DrawerInfo>
-
-  <!-- Employee Info -->
-  <DrawerInfo
-    :title="
-      currentEmployee
-        ? $i18n.locale === 'en-US'
-          ? `${currentEmployee.firstNameEN} ${currentEmployee.lastNameEN}`
-          : `${currentEmployee.firstName} ${currentEmployee.lastName}`
-        : '-'
-    "
-    v-model:drawer-open="infoDrawerEmployee"
-    :is-edit="infoDrawerEmployeeEdit"
-    :editData="() => (infoDrawerEmployeeEdit = true)"
-    :undo="undo"
-    :close="clearFormEmployee"
-    :deleteData="
-      () => {
-        currentEmployee && onDelete(currentEmployee.id);
-      }
-    "
-    :submit="
-      () => {
-        currentEmployee && onSubmitEdit(currentEmployee.id);
-      }
-    "
-    bg-color="surface-tab"
-  >
-    <InfoForm
-      v-if="optionStore.globalOption"
-      :readonly="!infoDrawerEmployeeEdit"
-      :noAddress="formDataEmployeeTab !== 'personalInfo'"
-      :noPaddingTab="
-        formDataEmployeeTab === 'healthCheck' ||
-        formDataEmployeeTab === 'workHistory'
-      "
-      v-model:same-with-employer="formDataEmployeeSameAddr"
-      :tabs-list="employeeTab"
-      v-model:employee-tab="formDataEmployeeTab"
-      v-model:address="formDataEmployee.address"
-      v-model:addressEN="formDataEmployee.addressEN"
-      v-model:provinceId="formDataEmployee.provinceId"
-      v-model:districtId="formDataEmployee.districtId"
-      v-model:subDistrictId="formDataEmployee.subDistrictId"
-      v-model:zipCode="formDataEmployee.zipCode"
-      disabledRule
-      employee
-    >
-      <template #person-card>
-        <PersonCard
-          :can-edit-profile="infoDrawerEmployeeEdit"
-          prefix-id="drawer-edit"
-          no-hover
-          no-action
-          no-detail
-          :data="{
-            name: formDataEmployee.firstName + ' ' + formDataEmployee.lastName,
-            code: formDataEmployee.code,
-            male: formDataEmployee.gender === 'male',
-            female: formDataEmployee.gender === 'female',
-            img: profileUrl || undefined,
-          }"
-          :list="infoEmployeePersonCard ? infoEmployeePersonCard : []"
-          :gridColumns="1"
-          @edit-profile="
-            () => {
-              inputFile.click();
-            }
-          "
-        />
-      </template>
-      <template #information>
-        <BasicInformation
-          prefix-id="drawer-info-employee"
-          v-if="formDataEmployeeTab === 'personalInfo'"
-          employee
-          dense
-          outlined
-          separator
-          :readonly="!infoDrawerEmployeeEdit"
-          :employee-owner-option="employeeStore.ownerOption"
-          v-model:customer-branch="formDataEmployeeOwner"
-          v-model:employee-id="currentEmployeeCode"
-          v-model:nrc-no="formDataEmployee.nrcNo"
-          v-model:person-name="formData.personName"
-          @filter-owner-branch="employeeFilterOwnerBranch"
-        />
-      </template>
-
-      <template #person>
-        <FormPerson
-          prefix-id="drawer-info-employee"
-          v-if="formDataEmployeeTab === 'personalInfo'"
-          dense
-          outlined
-          employee
-          separator
-          :title="$t('personalInfo')"
-          :readonly="!infoDrawerEmployeeEdit"
-          v-model:firstName="formDataEmployee.firstName"
-          v-model:lastName="formDataEmployee.lastName"
-          v-model:firstNameEN="formDataEmployee.firstNameEN"
-          v-model:lastNameEN="formDataEmployee.lastNameEN"
-          v-model:gender="formDataEmployee.gender"
-          v-model:birthDate="formDataEmployee.dateOfBirth"
-          v-model:nationality="formDataEmployee.nationality"
-        />
-
-        <FormEmployeeHealthCheck
-          prefix-id="drawer-info-employee"
-          v-if="
-            formDataEmployeeTab === 'healthCheck' &&
-            formDataEmployee.employeeCheckup
-          "
-          :readonly="!infoDrawerEmployeeEdit"
-          dense
-          outlined
-          v-model:employee-checkup="formDataEmployee.employeeCheckup"
-          v-model:checkup-type-option="optionStore.globalOption.nationality"
-          v-model:medical-benefit-option="
-            optionStore.globalOption.typeInsurance
-          "
-          v-model:insurance-company-option="
-            optionStore.globalOption.insurancePlace
-          "
-        />
-        <FormEmployeeWorkHistory
-          prefix-id="drawer-info-employee"
-          v-if="formDataEmployeeTab === 'workHistory'"
-          dense
-          outlined
-          :readonly="!infoDrawerEmployeeEdit"
-          v-model:employee-work="formDataEmployee.employeeWork"
-          v-model:position-name-option="optionStore.globalOption.position"
-          v-model:job-type-option="optionStore.globalOption.businessType"
-          v-model:workplace-option="optionStore.globalOption.area"
-        />
-        <FormEmployeeOther
-          prefix-id="drawer-info-employee"
-          v-if="
-            formDataEmployeeTab === 'other' &&
-            formDataEmployee.employeeOtherInfo
-          "
-          :readonly="!infoDrawerEmployeeEdit"
-          dense
-          outlined
-          v-model:employee-other="formDataEmployee.employeeOtherInfo"
-        />
-      </template>
-      <template #by-type>
-        <FormEmployeePassport
-          prefix-id="drawer-info-employee"
-          v-if="formDataEmployeeTab === 'personalInfo'"
-          dense
-          outlined
-          separator
-          :readonly="!infoDrawerEmployeeEdit"
-          v-model:passport-type="formDataEmployee.passportType"
-          v-model:passport-number="formDataEmployee.passportNumber"
-          v-model:passport-issue-date="formDataEmployee.passportIssueDate"
-          v-model:passport-expiry-date="formDataEmployee.passportExpiryDate"
-          v-model:passport-issuing-place="formDataEmployee.passportIssuingPlace"
-          v-model:passport-issuing-country="
-            formDataEmployee.passportIssuingCountry
-          "
-          v-model:previous-passport-reference="
-            formDataEmployee.previousPassportReference
-          "
-          v-model:passport-type-option="optionStore.globalOption.nationality"
-          v-model:passport-issuing-country-option="
-            optionStore.globalOption.nationality
-          "
-        />
-        <FormEmployeeVisa
-          prefix-id="drawer-info-employee"
-          v-if="formDataEmployeeTab === 'personalInfo'"
-          dense
-          outlined
-          :readonly="!infoDrawerEmployeeEdit"
-          v-model:visa-type="formDataEmployee.visaType"
-          v-model:visa-number="formDataEmployee.visaNumber"
-          v-model:visa-issue-date="formDataEmployee.visaIssueDate"
-          v-model:visa-expiry-date="formDataEmployee.visaExpiryDate"
-          v-model:visa-issuing-place="formDataEmployee.visaIssuingPlace"
-          v-model:visa-stay-until-date="formDataEmployee.visaStayUntilDate"
-          v-model:tm6-number="formDataEmployee.tm6Number"
-          v-model:entry-date="formDataEmployee.entryDate"
-          v-model:visa-type-option="optionStore.globalOption.nationality"
-        />
-      </template>
-    </InfoForm>
-  </DrawerInfo>
-
-  <!-- employee history -->
-  <FormDialog
-    no-address
-    no-app-box
-    no-footer
-    :title="$t('editHistory')"
-    v-model:modal="employeeHistoryDialog"
-    :close="() => (employeeHistoryDialog = false)"
-    v-if="employeeHistory"
-  >
-    <HistoryEditComponent v-model:history-list="employeeHistory" />
-  </FormDialog>
 </template>
 
 <style scoped>
diff --git a/src/pages/03_customer-management/constant.ts b/src/pages/03_customer-management/constant.ts
new file mode 100644
index 00000000..2389144c
--- /dev/null
+++ b/src/pages/03_customer-management/constant.ts
@@ -0,0 +1,103 @@
+import { QTableProps } from 'quasar';
+
+export const columnsEmployee = [
+  {
+    name: 'firstName',
+    align: 'left',
+    label: 'nameEmployee',
+    field: 'firstName',
+    sortable: true,
+  },
+
+  {
+    name: 'formDialogInputNationality',
+    align: 'left',
+    label: 'formDialogInputNationality',
+    field: 'nationality',
+  },
+
+  {
+    name: 'formDialogInputPassportNo',
+    align: 'left',
+    label: 'formDialogInputPassportNo',
+    field: 'passportNumber',
+  },
+  {
+    name: 'formDialogInputAge',
+    align: 'left',
+    label: 'formDialogInputAge',
+    field: 'dateOfBirth',
+  },
+
+  {
+    name: 'passportExpiryDate',
+    align: 'left',
+    label: 'passportExpire',
+    field: 'passportExpiryDate',
+  },
+
+  {
+    name: 'formDialogEmployeeNRCNo',
+    align: 'left',
+    label: 'formDialogEmployeeNRCNo',
+    field: 'nrcNo',
+  },
+
+  {
+    name: 'branchLabel',
+    align: 'left',
+    label: 'branchLabel',
+    field: 'customerBranch',
+  },
+
+  {
+    name: 'type',
+    align: 'left',
+    label: 'type',
+    field: 'type',
+    sortable: true,
+  },
+
+  {
+    name: 'action',
+    label: '',
+    field: 'action',
+  },
+] satisfies QTableProps['columns'];
+
+export const columnsCustomer = [
+  {
+    name: 'customerName',
+    align: 'left',
+    label: 'corporation',
+    field: 'customerName',
+    sortable: true,
+  },
+  {
+    name: 'type',
+    align: 'center',
+    label: 'type',
+    field: 'customerType',
+    sortable: true,
+  },
+  {
+    name: 'personName',
+    align: 'left',
+    label: 'name',
+    field: 'personName',
+  },
+
+  {
+    name: 'telephoneNo',
+    align: 'left',
+    label: 'telephone',
+    field: 'branch[0].telephoneNo',
+  },
+
+  {
+    name: 'branchEmail',
+    align: 'left',
+    label: 'formDialogInputEmail',
+    field: 'branch[0].email',
+  },
+] satisfies QTableProps['columns'];
diff --git a/src/pages/03_customer-management/form.ts b/src/pages/03_customer-management/form.ts
new file mode 100644
index 00000000..f34ca625
--- /dev/null
+++ b/src/pages/03_customer-management/form.ts
@@ -0,0 +1,137 @@
+import { ref } from 'vue';
+import { defineStore } from 'pinia';
+import { CustomerCreate } from 'src/stores/customer/types';
+import useMyBranch from 'src/stores/my-branch';
+import useCustomerStore from 'src/stores/customer';
+
+export const useCustomerForm = defineStore('form-customer', () => {
+  const customerStore = useCustomerStore();
+  const branchStore = useMyBranch();
+
+  let defaultFormData: CustomerCreate = {
+    status: 'CREATED',
+    personName: '',
+    customerType: 'CORP',
+    customerName: '',
+    customerNameEN: '',
+    taxNo: '',
+    registeredBranchId: branchStore.currentMyBranch?.id || '',
+    customerBranch: [
+      {
+        code: '',
+        branchNo: 1,
+        address: '',
+        addressEN: '',
+        provinceId: '',
+        districtId: '',
+        subDistrictId: '',
+        zipCode: '',
+        email: '',
+        telephoneNo: '',
+        name: '',
+        status: 'CREATED',
+        taxNo: '',
+        nameEN: '',
+        legalPersonNo: '',
+        registerName: '',
+        registerDate: new Date(),
+        authorizedCapital: '',
+        employmentOffice: '',
+        bussinessType: '',
+        bussinessTypeEN: '',
+        jobPosition: '',
+        jobPositionEN: '',
+        jobDescription: '',
+        saleEmployee: '',
+        payDate: new Date(),
+        wageRate: 0,
+      },
+    ],
+    image: null,
+  };
+  let resetCustomerData = structuredClone(defaultFormData);
+
+  const currentFormData = ref<CustomerCreate>(structuredClone(defaultFormData));
+  const state = ref<{
+    dialogType: 'info' | 'edit';
+    dialogOpen: boolean;
+    branchIndex: number;
+    customerType: 'CORP' | "PERS"
+  }>({
+    dialogType: 'info',
+    dialogOpen: false,
+    branchIndex: 0,
+    customerType: "CORP"
+  });
+
+  function isFormDataDifferent() {
+    return (
+      JSON.stringify(resetCustomerData) !==
+      JSON.stringify(currentFormData.value)
+    );
+  }
+
+  function resetFormData(cb?: (...args: any[]) => unknown) {
+    currentFormData.value = structuredClone(resetCustomerData);
+    cb?.();
+  }
+
+  async function assignFormData(id: string) {
+    const data = await customerStore.fetchById(id);
+
+    if (!data) return;
+
+    resetCustomerData.registeredBranchId = data.registeredBranchId;
+    resetCustomerData.status = data.status;
+    resetCustomerData.customerType = data.customerType;
+    resetCustomerData.customerName = data.customerName;
+    resetCustomerData.customerNameEN = data.customerNameEN;
+    resetCustomerData.personName = data.personName;
+    resetCustomerData.taxNo = data.taxNo;
+    resetCustomerData.image = null;
+    resetCustomerData.customerBranch = data.branch.map((v) => ({
+      id: v.id,
+      code: v.code,
+      branchNo: v.branchNo,
+      address: v.address,
+      addressEN: v.addressEN,
+      provinceId: v.province.id,
+      districtId: v.district.id,
+      subDistrictId: v.subDistrict.id,
+      zipCode: v.zipCode,
+      email: v.email,
+      telephoneNo: v.telephoneNo,
+      name: v.name,
+      status: undefined,
+      taxNo: v.taxNo,
+      nameEN: v.nameEN,
+      legalPersonNo: v.legalPersonNo,
+      registerName: v.registerName,
+      registerDate: new Date(v.registerDate),
+      authorizedCapital: v.authorizedCapital,
+      employmentOffice: v.employmentOffice,
+      bussinessType: v.bussinessType,
+      bussinessTypeEN: v.bussinessTypeEN,
+      jobPosition: v.jobPosition,
+      jobPositionEN: v.jobPositionEN,
+      jobDescription: v.jobDescription,
+      saleEmployee: v.saleEmployee,
+      payDate: new Date(v.payDate),
+      wageRate: v.wageRate,
+    }));
+
+    currentFormData.value = structuredClone(resetCustomerData);
+  }
+
+  return {
+    state,
+    currentFormData,
+    isFormDataDifferent,
+    resetFormData,
+    assignFormData,
+  };
+});
+
+export const useEmployeeForm = defineStore('form-employee', () => {
+  return {};
+});