diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index a72e30be..7718424a 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -6,6 +6,7 @@ import { useRoute, useRouter } from 'vue-router';
 import { getUserId, getRole } from 'src/services/keycloak';
 import { baseUrl, waitAll } from 'src/stores/utils';
 import { dateFormat } from 'src/utils/datetime';
+import { dialogCheckData } from 'stores/utils';
 
 import useOcrStore from 'stores/ocr';
 import useCustomerStore from 'stores/customer';
@@ -2659,6 +2660,100 @@ const emptyCreateDialog = ref(false);
                 :group-list="uploadFileListEmployee"
                 :menu="uploadFileListEmployee"
                 :columns="columnsAttachment"
+                @submit="
+                  async (group, allMeta) => {
+                    if (allMeta === undefined) return;
+
+                    if (group === 'passport') {
+                      const fullName = allMeta['full_name'].split(' ');
+                      let tempValue: {
+                        oldData: { filName: string; value: string }[];
+                        newData: { filName: string; value: string }[];
+                      } = { oldData: [], newData: [] };
+
+                      if (
+                        currentFromDataEmployee.gender !== '' &&
+                        currentFromDataEmployee.gender !== allMeta['sex']
+                      ) {
+                        tempValue.oldData.push({
+                          filName: $t('form.gender'),
+                          value: $t(
+                            `general.${currentFromDataEmployee.gender}`,
+                          ),
+                        });
+                        tempValue.newData.push({
+                          filName: $t('form.gender'),
+                          value: $t(`general.${allMeta['sex']}`),
+                        });
+                      }
+
+                      if (currentFromDataEmployee.firstName !== '') {
+                        tempValue.oldData.push({
+                          filName: $t('personnel.form.firstName'),
+                          value: currentFromDataEmployee.firstName,
+                        });
+                        tempValue.newData.push({
+                          filName: $t('personnel.form.firstName'),
+                          value: fullName[0],
+                        });
+                      }
+
+                      if (currentFromDataEmployee.lastName !== '') {
+                        tempValue.oldData.push({
+                          filName: $t('personnel.form.lastName'),
+                          value: currentFromDataEmployee.lastName,
+                        });
+                        tempValue.newData.push({
+                          filName: $t('personnel.form.lastName'),
+                          value: fullName[1],
+                        });
+                      }
+
+                      if (currentFromDataEmployee.nationality !== '') {
+                        tempValue.oldData.push({
+                          filName: $t('general.nationality'),
+                          value: currentFromDataEmployee.nationality || '',
+                        });
+                        tempValue.newData.push({
+                          filName: $t('general.nationality'),
+                          value: allMeta['nationality'],
+                        });
+                      }
+
+                      dialogCheckData({
+                        action: async () => {
+                          currentFromDataEmployee.gender = allMeta['sex'];
+                          currentFromDataEmployee.firstName = fullName[0];
+                          currentFromDataEmployee.lastName = fullName[1];
+                          currentFromDataEmployee.nationality =
+                            allMeta['nationality'];
+                        },
+                        checkData: () => {
+                          return tempValue;
+                        },
+                        cancel: () => {
+                          if (!currentFromDataEmployee.gender) {
+                            currentFromDataEmployee.gender = allMeta['gender'];
+                          }
+                          if (!currentFromDataEmployee.firstName) {
+                            currentFromDataEmployee.firstName = fullName[0];
+                          }
+                          if (!currentFromDataEmployee.firstName) {
+                            currentFromDataEmployee.firstName = fullName[0];
+                          }
+                          if (!currentFromDataEmployee.lastName) {
+                            currentFromDataEmployee.lastName = fullName[1];
+                          }
+
+                          if (!currentFromDataEmployee.nationality) {
+                            currentFromDataEmployee.nationality =
+                              allMeta['nationality'];
+                          }
+                        },
+                      });
+                    }
+                  }
+                "
                 :ocr="
                   async (group, file) => {
                     if (group === 'passport') {
@@ -2830,6 +2925,9 @@ const emptyCreateDialog = ref(false);
                     :readonly="!isEdit"
                     v-model:passport-type="meta.type"
                     v-model:passport-number="meta.number"
+                    v-model:gender="meta.gender"
+                    v-model:first-name="meta.firstName"
+                    v-model:last-name="meta.lastName"
                     v-model:passport-issue-date="meta.issueDate"
                     v-model:passport-expiry-date="meta.expireDate"
                     v-model:passport-issuing-place="meta.issuePlace"
@@ -4087,7 +4185,6 @@ const emptyCreateDialog = ref(false);
                   {{ $t(`general.uploadFile`) }}
                 </div>
               </div>
-
               <UploadFileGroup
                 v-model:current-id="currentFromDataEmployee.id"
                 v-model="currentFromDataEmployee.file"
@@ -4096,6 +4193,100 @@ const emptyCreateDialog = ref(false);
                 :group-list="uploadFileListEmployee"
                 :menu="uploadFileListEmployee"
                 :columns="columnsAttachment"
+                @submit="
+                  async (group, allMeta) => {
+                    if (allMeta === undefined) return;
+
+                    if (group === 'passport') {
+                      const fullName = allMeta['full_name'].split(' ');
+                      let tempValue: {
+                        oldData: { filName: string; value: string }[];
+                        newData: { filName: string; value: string }[];
+                      } = { oldData: [], newData: [] };
+
+                      if (
+                        currentFromDataEmployee.gender !== '' &&
+                        currentFromDataEmployee.gender !== allMeta['sex']
+                      ) {
+                        tempValue.oldData.push({
+                          filName: $t('form.gender'),
+                          value: $t(
+                            `general.${currentFromDataEmployee.gender}`,
+                          ),
+                        });
+                        tempValue.newData.push({
+                          filName: $t('form.gender'),
+                          value: $t(`general.${allMeta['sex']}`),
+                        });
+                      }
+
+                      if (currentFromDataEmployee.firstName !== '') {
+                        tempValue.oldData.push({
+                          filName: $t('personnel.form.firstName'),
+                          value: currentFromDataEmployee.firstName,
+                        });
+                        tempValue.newData.push({
+                          filName: $t('personnel.form.firstName'),
+                          value: fullName[0],
+                        });
+                      }
+
+                      if (currentFromDataEmployee.lastName !== '') {
+                        tempValue.oldData.push({
+                          filName: $t('personnel.form.lastName'),
+                          value: currentFromDataEmployee.lastName,
+                        });
+                        tempValue.newData.push({
+                          filName: $t('personnel.form.lastName'),
+                          value: fullName[1],
+                        });
+                      }
+
+                      if (currentFromDataEmployee.nationality !== '') {
+                        tempValue.oldData.push({
+                          filName: $t('general.nationality'),
+                          value: currentFromDataEmployee.nationality || '',
+                        });
+                        tempValue.newData.push({
+                          filName: $t('general.nationality'),
+                          value: allMeta['nationality'],
+                        });
+                      }
+
+                      dialogCheckData({
+                        action: async () => {
+                          currentFromDataEmployee.gender = allMeta['sex'];
+                          currentFromDataEmployee.firstName = fullName[0];
+                          currentFromDataEmployee.lastName = fullName[1];
+                          currentFromDataEmployee.nationality =
+                            allMeta['nationality'];
+                        },
+                        checkData: () => {
+                          return tempValue;
+                        },
+                        cancel: () => {
+                          if (!currentFromDataEmployee.gender) {
+                            currentFromDataEmployee.gender = allMeta['gender'];
+                          }
+                          if (!currentFromDataEmployee.firstName) {
+                            currentFromDataEmployee.firstName = fullName[0];
+                          }
+                          if (!currentFromDataEmployee.firstName) {
+                            currentFromDataEmployee.firstName = fullName[0];
+                          }
+                          if (!currentFromDataEmployee.lastName) {
+                            currentFromDataEmployee.lastName = fullName[1];
+                          }
+
+                          if (!currentFromDataEmployee.nationality) {
+                            currentFromDataEmployee.nationality =
+                              allMeta['nationality'];
+                          }
+                        },
+                      });
+                    }
+                  }
+                "
                 :ocr="
                   async (group, file) => {
                     if (group === 'passport') {
@@ -4266,6 +4457,9 @@ const emptyCreateDialog = ref(false);
                     :readonly="!isEdit"
                     v-model:passport-type="meta.type"
                     v-model:passport-number="meta.number"
+                    v-model:gender="meta.gender"
+                    v-model:first-name="meta.firstName"
+                    v-model:last-name="meta.lastName"
                     v-model:passport-issue-date="meta.issueDate"
                     v-model:passport-expiry-date="meta.expireDate"
                     v-model:passport-issuing-place="meta.issuePlace"