diff --git a/src/pages/03_customer-management/components/employer/EmployerFormBranch.vue b/src/pages/03_customer-management/components/employer/EmployerFormBranch.vue
index 947ea1b3..66b66b9a 100644
--- a/src/pages/03_customer-management/components/employer/EmployerFormBranch.vue
+++ b/src/pages/03_customer-management/components/employer/EmployerFormBranch.vue
@@ -7,12 +7,14 @@ import { CustomerCreate } from 'stores/customer/types';
 import EmployerFormAbout from './EmployerFormAbout.vue';
 import EmployerFormAuthorized from './EmployerFormAuthorized.vue';
 import { useCustomerForm } from 'src/pages/03_customer-management/form';
-
+import { waitAll } from 'src/stores/utils';
 const customerFormStore = useCustomerForm();
 import { FormCitizen } from 'components/upload-file/';
 
 import useOcrStore from 'stores/ocr';
+import useCustomerStore from 'stores/customer';
 
+const customerStore = useCustomerStore();
 const ocrStore = useOcrStore();
 import {
   SaveButton,
@@ -20,8 +22,8 @@ import {
   DeleteButton,
   UndoButton,
 } from 'components/button';
-import UploadFile from 'src/components/upload-file/UploadFile.vue';
-import { uploadFileListCustomer } from '../../constant';
+import { UploadFileGroup } from 'src/components/upload-file/';
+import { uploadFileListCustomer, columnsAttachment } from '../../constant';
 
 const statusOcr = ref(false);
 
@@ -211,100 +213,190 @@ withDefaults(
           />
         </q-tab-panel>
         <q-tab-panel name="attachment">
-          <UploadFile
+          <UploadFileGroup
+            v-model:current-id="item.id"
+            v-model="item.file"
             hide-action
-            :readonly="readonly"
-            :dropdown-list="uploadFileListCustomer"
-            v-model:status-ocr="statusOcr"
-            v-model:file="item.file"
-            :tree-file="
-              Object.values(
-                item.file?.reduce<
-                  Record<string, { label: string; file: { label: string }[] }>
-                >((a, c) => {
-                  const _group = c.group || 'other';
-
-                  if (!a[_group]) {
-                    a[_group] = {
-                      label: $t(
-                        uploadFileListCustomer.find((v) => v.value === _group)
-                          ?.label || _group,
-                      ),
-                      file: [
-                        {
-                          label:
-                            c.name ||
-                            `${c.group}-${c.file?.name || Date.now()}`,
-                        },
-                      ],
-                    };
-                  } else {
-                    a[_group].file.push({
-                      label:
-                        c.name || `${c.group}-${c.file?.name || Date.now()}`,
-                    });
-                  }
-                  return a;
-                }, {}) || {},
-              )
+            :menu="uploadFileListCustomer"
+            :columns="columnsAttachment"
+            :auto-save="item.id !== ''"
+            :download="
+              (obj) => {
+                customerStore.getFile({
+                  parentId: item.id || '',
+                  group: obj.group,
+                  fileId: obj._meta.id,
+                  download: true,
+                });
+              }
             "
-            @send-ocr="
-              async (group: any, file: any) => {
-                const res = await ocrStore.sendOcr({
-                  file: file,
-                  category: group,
+            :delete-item="
+              async (obj) => {
+                const res = await customerStore.delMeta({
+                  parentId: item.id || '',
+                  group: obj.group,
+                  metaId: obj._meta.id,
                 });
 
                 if (res) {
-                  const map = res.fields.reduce<Record<string, string>>(
-                    (a, c) => {
-                      a[c.name] = c.value;
-                      return a;
-                    },
-                    {},
-                  );
-                  if (!item.citizenId) item.citizenId = map['citizen_id'] || '';
-                  if (!item.address) item.address = map['address'] || '';
-                  if (!customer.firstName)
-                    customer.firstName = map['firstname'] || '';
-                  if (!customer.lastName)
-                    customer.lastName = map['lastname'] || '';
-                  if (!customer.firstNameEN)
-                    customer.firstNameEN = map['firstname_en'] || '';
-                  if (!customer.lastNameEN)
-                    customer.lastNameEN = map['lastname_en'] || '';
-                  if (!customer.birthDate)
-                    customer.birthDate = new Date(map['birth_date'] || '');
+                  return true;
                 }
-
-                statusOcr = false;
+                return false;
               }
             "
-            @delete-file="
-              (filename) => {
-                if (!item.id) return;
+            :save="
+              async (
+                group:
+                  | 'citizen'
+                  | 'house-registration'
+                  | 'commercial-registration'
+                  | 'vat-registration'
+                  | 'power-of-attorney',
+                _meta: any,
+                file: File | undefined,
+              ) => {
+                if (file !== undefined && item.id) {
+                  const res = await customerStore.postMeta({
+                    parentId: item.id || '',
+                    group,
+                    meta: _meta,
+                    file,
+                  });
 
-                customerFormStore.deleteAttachment(
-                  { branchId: item.id, customerId: item.customerId },
-                  filename,
-                );
+                  if (res) {
+                    return true;
+                  }
+                } else {
+                  const {
+                    customerBranchId,
+                    id,
+                    employeeId,
+                    createdAt,
+                    updatedAt,
+                    middleName,
+                    middleNameEN,
+
+                    ...payload
+                  } = _meta;
+                  const res = await customerStore.putMeta({
+                    parentId: item.id || '',
+                    group,
+                    metaId: _meta.id,
+                    meta: payload,
+                    file,
+                  });
+                  if (res) {
+                    return true;
+                  }
+                }
+
+                return false;
+              }
+            "
+            :get-file-list="
+              async (
+                group:
+                  | 'citizen'
+                  | 'house-registration'
+                  | 'commercial-registration'
+                  | 'vat-registration'
+                  | 'power-of-attorney',
+              ) => {
+                if (!!item.id) {
+                  const resMeta = await customerStore.getMetaList({
+                    parentId: item.id,
+                    group,
+                  });
+
+                  const tempValue = resMeta.map(async (v: any) => {
+                    return {
+                      _meta: { ...v },
+                      name: v.id || '',
+                      group: group,
+                      url: await customerStore.getFile({
+                        parentId: item.id || '',
+                        group,
+                        fileId: v.id,
+                      }),
+                      file: undefined,
+                    };
+                  });
+
+                  return await waitAll(tempValue);
+                }
+                return [];
               }
             "
           >
-            <template #form="{ mode }">
+            <template #form="{ mode, meta, isEdit }">
               <FormCitizen
-                v-if="mode === 'citizenId'"
+                v-if="mode === 'citizen' && meta"
                 orc
-                v-model:citizen-id="item.citizenId"
-                v-model:birth-date="customer.birthDate"
-                v-model:first-name="customer.firstName"
-                v-model:first-name-en="customer.firstNameEN"
-                v-model:last-name="customer.lastName"
-                v-model:last-name-en="customer.lastNameEN"
-                v-model:address="item.address"
+                ra
+                :readonly="!isEdit"
+                v-model:name-prefix="meta.namePrefix"
+                v-model:citizen-id="meta.citizenId"
+                v-model:birth-date="meta.birthDate"
+                v-model:first-name="meta.firstName"
+                v-model:first-name-en="meta.firstNameEN"
+                v-model:last-name="meta.lastName"
+                v-model:last-name-en="meta.lastNameEN"
+                v-model:gender="meta.gender"
+                v-model:religion="meta.religion"
+                v-model:nationality="meta.nationality"
+                v-model:expire-date="meta.expireDate"
+                v-model:issue-date="meta.issueDate"
+                v-model:homeCode="meta.homeCode"
+                v-model:employmentOffice="meta.employmentOffice"
+                v-model:employmentOfficeEN="meta.employmentOfficeEN"
+                v-model:address="meta.address"
+                v-model:addressEN="meta.addressEN"
+                v-model:street="meta.street"
+                v-model:streetEN="meta.streetEN"
+                v-model:moo="meta.moo"
+                v-model:mooEN="meta.mooEN"
+                v-model:soi="meta.soi"
+                v-model:soiEN="meta.soiEN"
+                v-model:province-id="meta.provinceId"
+                v-model:district-id="meta.districtId"
+                v-model:sub-district-id="meta.subDistrictId"
+                v-model:middle-name="meta.middleName"
+                v-model:middle-name-en="meta.middleNameEN"
+              />
+              <FormEmployeePassport
+                v-if="mode === 'passport' && meta"
+                prefix-id="drawer-info-employee"
+                id="form-passport"
+                dense
+                outlined
+                separator
+                ocr
+                :title="$t('customerEmployee.form.group.passport')"
+                :readonly="!isEdit"
+                v-model:passport-type="meta.type"
+                v-model:passport-number="meta.number"
+                v-model:passport-issue-date="meta.issueDate"
+                v-model:passport-expiry-date="meta.expireDate"
+                v-model:passport-issuing-place="meta.issuePlace"
+                v-model:passport-issuing-country="meta.issueCountry"
+              />
+              <FormEmployeeVisa
+                v-if="mode === 'visa' && meta"
+                prefix-id="drawer-info-employee"
+                id="form-visa"
+                ocr
+                dense
+                outlined
+                title="customerEmployee.form.group.visa"
+                :readonly="!isEdit"
+                v-model:visa-type="meta.type"
+                v-model:visa-number="meta.number"
+                v-model:visa-issue-date="meta.issueDate"
+                v-model:visa-expiry-date="meta.expireDate"
+                v-model:visa-issuing-place="meta.issuePlace"
               />
             </template>
-          </UploadFile>
+          </UploadFileGroup>
 
           <!-- <EmployerFormAttachment
             :readonly="readonly"