diff --git a/src/components/upload-file/FormCitizen.vue b/src/components/upload-file/FormCitizen.vue
index f9fa325b..4814717a 100644
--- a/src/components/upload-file/FormCitizen.vue
+++ b/src/components/upload-file/FormCitizen.vue
@@ -66,7 +66,9 @@ const employmentOfficeEN = defineModel<string | null | undefined>(
 const optionStore = useOptionStore();
 const namePrefix = defineModel<string | null>('namePrefix');
 const birthDate = defineModel<Date | string | null>('birthDate');
-const gender = defineModel<string>('gender', { required: true });
+const gender = defineModel<string>('gender', {
+  required: true,
+});
 
 const address = defineModel<string>('address');
 const firstName = defineModel<string>('firstName', { required: true });
@@ -195,6 +197,7 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
             :id="`${prefixId}-input-birth-date`"
             :readonly="readonly"
             clearable
+            :rules="[(val: string) => !!val || $t('form.error.required')]"
           />
 
           <q-input
@@ -206,6 +209,7 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
             :label="$t('general.nationality')"
             for="input-nationality"
             v-model="nationality"
+            :rules="[(val: string) => !!val || $t('form.error.required')]"
           />
 
           <q-input
@@ -218,7 +222,6 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
             for="input-religion"
             v-model="religion"
           />
-
           <q-select
             outlined
             use-input
@@ -243,6 +246,7 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
               (v) => (typeof v === 'string' ? (gender = v) : '')
             "
             @clear="gender = ''"
+            :rules="[(val: string) => !!val || $t('form.error.required')]"
           >
             <template v-slot:no-option>
               <q-item>
@@ -281,6 +285,7 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
               }
             "
             @clear="namePrefix = ''"
+            :rules="[(val: string) => !!val || $t('form.error.required')]"
           >
             <template v-slot:no-option>
               <q-item>
@@ -379,6 +384,7 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
             :id="`${prefixId}-input-issue-date`"
             :readonly="readonly"
             clearable
+            :rules="[(val: string) => !!val || $t('form.error.required')]"
           />
 
           <DatePicker
@@ -388,6 +394,7 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
             :id="`${prefixId}-input-passport-expiry-date`"
             :readonly="readonly"
             clearable
+            :rules="[(val: string) => !!val || $t('form.error.required')]"
           />
         </div>
       </div>
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 1b62c211..3ede252d 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -2657,6 +2657,7 @@ const emptyCreateDialog = ref(false);
                       parentId: currentFromDataEmployee.id || '',
                       group: obj.group,
                       fileId: obj._meta.id,
+                      download: true,
                     });
                   }
                 "
@@ -3867,6 +3868,175 @@ const emptyCreateDialog = ref(false);
                   {{ $t(`general.uploadFile`) }}
                 </div>
               </div>
+              <UploadFileGroup
+                v-model:current-id="currentFromDataEmployee.id"
+                v-model="currentFromDataEmployee.file"
+                hide-action
+                :group-list="uploadFileListEmployee"
+                :menu="uploadFileListEmployee"
+                :columns="columnsAttachment"
+                :ocr="
+                  async (group, file) => {
+                    const res = await ocrStore.sendOcr({
+                      file: file,
+                      category: group,
+                    });
+
+                    if (res) {
+                      const tempValue = {
+                        status: true,
+                        group,
+                        meta: res.fields,
+                      };
+
+                      return tempValue;
+                    }
+                    return { status: false, group, meta: [] };
+                  }
+                "
+                :auto-save="currentFromDataEmployee.id !== ''"
+                :download="
+                  (obj) => {
+                    employeeStore.getFile({
+                      parentId: currentFromDataEmployee.id || '',
+                      group: obj.group,
+                      fileId: obj._meta.id,
+                      download: true,
+                    });
+                  }
+                "
+                :delete-item="
+                  async (obj) => {
+                    const res = await employeeStore.delMeta({
+                      parentId: currentFromDataEmployee.id || '',
+                      group: obj.group,
+                      metaId: obj._meta.id,
+                    });
+
+                    if (res) {
+                      return true;
+                    }
+                    return false;
+                  }
+                "
+                :save="
+                  async (
+                    group: 'passport' | 'visa',
+                    _meta: any,
+                    file: File | undefined,
+                  ) => {
+                    if (file !== undefined && currentFromDataEmployee.id) {
+                      const res = await employeeStore.postMeta({
+                        parentId: currentFromDataEmployee.id || '',
+                        group,
+                        meta: _meta,
+                        file,
+                      });
+
+                      if (res) {
+                        return true;
+                      }
+                    } else {
+                      const {
+                        id,
+                        employeeId,
+                        createdAt,
+                        updatedAt,
+                        ...payload
+                      } = _meta;
+                      const res = await employeeStore.putMeta({
+                        parentId: currentFromDataEmployee.id || '',
+                        group,
+                        metaId: _meta.id,
+                        meta: payload,
+                        file,
+                      });
+                      if (res) {
+                        return true;
+                      }
+                    }
+
+                    return false;
+                  }
+                "
+                :get-file-list="
+                  async (group: 'passport' | 'visa') => {
+                    if (!!currentFromDataEmployee.id) {
+                      const resMeta = await employeeStore.getMetaList({
+                        parentId: currentFromDataEmployee.id,
+                        group,
+                      });
+
+                      const tempValue = resMeta.map(async (i: any) => {
+                        return {
+                          _meta: { ...i },
+                          name: i.id || '',
+                          group: group,
+                          url: await employeeStore.getFile({
+                            parentId: currentFromDataEmployee.id || '',
+                            group,
+                            fileId: i.id,
+                          }),
+                          file: undefined,
+                        };
+                      });
+
+                      return await waitAll(tempValue);
+                    }
+                    return [];
+                  }
+                "
+              >
+                <template #form="{ mode, meta, isEdit }">
+                  <FormCitizen
+                    v-if="mode === 'citizen' && meta"
+                    orc
+                    ra
+                    :readonly="!isEdit"
+                    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:address="meta.address"
+                  />
+                  <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"
+                  />
+
+                  <noticeJobEmployment v-if="mode === 'noticeJobEmployment'" />
+                </template>
+              </UploadFileGroup>
             </template>
             <template v-if="employeeFormState.currentTab === 'healthCheck'">
               <FormEmployeeHealthCheck
diff --git a/src/pages/03_customer-management/components/employer/EmployerFormBranch.vue b/src/pages/03_customer-management/components/employer/EmployerFormBranch.vue
index 9399a25a..045a072b 100644
--- a/src/pages/03_customer-management/components/employer/EmployerFormBranch.vue
+++ b/src/pages/03_customer-management/components/employer/EmployerFormBranch.vue
@@ -355,7 +355,6 @@ withDefaults(
               <FormCitizen
                 v-if="mode === 'citizen' && meta"
                 orc
-                ra
                 :readonly="!isEdit"
                 v-model:name-prefix="meta.namePrefix"
                 v-model:citizen-id="meta.citizenId"