diff --git a/src/components/upload-file/UploadFileGroup.vue b/src/components/upload-file/UploadFileGroup.vue
index 2ccdc568..f112a784 100644
--- a/src/components/upload-file/UploadFileGroup.vue
+++ b/src/components/upload-file/UploadFileGroup.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
 import { QTableProps } from 'quasar';
-import { ref, toRaw } from 'vue';
+import { ref, toRaw, onMounted } from 'vue';
 import { dialog } from 'stores/utils';
 import { useI18n } from 'vue-i18n';
 import TableComponents from 'src/components/TableComponents.vue';
 import ShowAttachent from 'src/components/ShowAttachent.vue';
 import DialogForm from 'components/DialogForm.vue';
 
+const isEdit = ref(false);
 const { t } = useI18n();
 const obj = defineModel<
   {
@@ -30,6 +31,7 @@ const props = defineProps<{
   ocr?: (group: any, file: File) => void | Promise<void>;
   getFileList?: (group: any) => Promise<typeof obj.value>;
   deleteItem?: (obj: any) => void | Promise<boolean>;
+  download?: (obj: any) => void;
   save?: (
     group: any,
     meta: any,
@@ -138,6 +140,7 @@ defineEmits<{
               v-close-popup
               @click="
                 () => {
+                  isEdit = true;
                   selectedMenu = menu?.[i];
                   currentIndex = obj.length;
 
@@ -190,6 +193,11 @@ defineEmits<{
           <div class="full-height full-width q-pa-md">
             <TableComponents
               buttomDownload
+              @download="
+                (index) => {
+                  download?.(obj[index]);
+                }
+              "
               @delete="
                 async (index) => {
                   await triggerDelete(obj[index]);
@@ -197,6 +205,14 @@ defineEmits<{
               "
               @view="
                 (index) => {
+                  isEdit = false;
+                  currentIndex = index;
+                  modalDialog = true;
+                }
+              "
+              @edit="
+                (index) => {
+                  isEdit = true;
                   currentIndex = index;
                   modalDialog = true;
                 }
@@ -211,6 +227,7 @@ defineEmits<{
                   })
                   .map((v, index) => {
                     return {
+                      id: v._meta?.id,
                       branchNo: index + 1,
                       attachmentName: v.file?.name || v.name,
                       uploadDate: '',
@@ -225,6 +242,9 @@ defineEmits<{
     </div>
   </div>
   <DialogForm
+    edit
+    hideDelete
+    :is-edit="isEdit"
     style="position: absolute"
     height="100vh"
     weight="90%"
@@ -232,6 +252,16 @@ defineEmits<{
     title="ดูตัวอย่าง"
     hideCloseEvent
     v-if="obj.length > 0"
+    :undo="
+      () => {
+        isEdit = false;
+      }
+    "
+    :edit-data="
+      () => {
+        isEdit = !isEdit;
+      }
+    "
     :close="
       () => {
         if (!autoSave || !obj[currentIndex]?._meta?.hasOwnProperty('id')) {
@@ -244,7 +274,6 @@ defineEmits<{
       async () => {
         modalDialog = false;
         if (autoSave === true) {
-          console.log(autoSave);
           const statusSave = await save?.(
             obj[currentIndex].group,
             obj[currentIndex]._meta,
@@ -275,6 +304,7 @@ defineEmits<{
             name="form"
             :mode="obj[currentIndex].group"
             :meta="obj[currentIndex]._meta"
+            :isEdit="isEdit"
           />
         </div>
       </template>
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 81f30f94..a231d487 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -67,6 +67,8 @@ import FormEmployeeOther from 'components/03_customer-management/FormEmployeeOth
 import useOptionStore from 'stores/options';
 import { DialogContainer, DialogHeader } from 'components/dialog';
 import KebabAction from 'src/components/shared/KebabAction.vue';
+import { group } from 'node:console';
+import { readonly } from 'vue';
 
 const currentSelectedMenu = ref<{ label: string; value: string }>({
   label: '',
@@ -2499,6 +2501,15 @@ const emptyCreateDialog = ref(false);
                 :menu="uploadFileListEmployee"
                 :columns="columnsAttachment"
                 :auto-save="currentFromDataEmployee.id !== ''"
+                :download="
+                  (obj) => {
+                    employeeStore.getFile({
+                      parentId: currentFromDataEmployee.id || '',
+                      group: obj.group,
+                      fileId: obj._meta.id,
+                    });
+                  }
+                "
                 :delete-item="
                   async (obj) => {
                     const res = await employeeStore.delMeta({
@@ -2589,10 +2600,12 @@ const emptyCreateDialog = ref(false);
                   }
                 "
               >
-                <template #form="{ mode, meta }">
+                <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"
@@ -2610,7 +2623,7 @@ const emptyCreateDialog = ref(false);
                     separator
                     ocr
                     :title="$t('customerEmployee.form.group.passport')"
-                    :readonly="!employeeFormState.isEmployeeEdit"
+                    :readonly="!isEdit"
                     v-model:passport-type="meta.type"
                     v-model:passport-number="meta.number"
                     v-model:passport-issue-date="meta.issueDate"
@@ -2626,7 +2639,7 @@ const emptyCreateDialog = ref(false);
                     dense
                     outlined
                     title="customerEmployee.form.group.visa"
-                    :readonly="!employeeFormState.isEmployeeEdit"
+                    :readonly="!isEdit"
                     v-model:visa-type="meta.type"
                     v-model:visa-number="meta.number"
                     v-model:visa-issue-date="meta.issueDate"
@@ -3689,6 +3702,16 @@ const emptyCreateDialog = ref(false);
                   :menu="uploadFileListEmployee"
                   :columns="columnsAttachment"
                   auto-save
+                  :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({
@@ -3779,10 +3802,11 @@ const emptyCreateDialog = ref(false);
                     }
                   "
                 >
-                  <template #form="{ mode, meta }">
+                  <template #form="{ mode, meta, isEdit }">
                     <FormCitizen
                       v-if="mode === 'citizen' && meta"
                       orc
+                      :readonly="!isEdit"
                       v-model:citizen-id="meta.citizenId"
                       v-model:birth-date="meta.birthDate"
                       v-model:first-name="meta.firstName"
@@ -3800,7 +3824,7 @@ const emptyCreateDialog = ref(false);
                       separator
                       ocr
                       :title="$t('customerEmployee.form.group.passport')"
-                      :readonly="!employeeFormState.isEmployeeEdit"
+                      :readonly="!isEdit"
                       v-model:passport-type="meta.type"
                       v-model:passport-number="meta.number"
                       v-model:passport-issue-date="meta.issueDate"
@@ -3816,7 +3840,7 @@ const emptyCreateDialog = ref(false);
                       dense
                       outlined
                       title="customerEmployee.form.group.visa"
-                      :readonly="!employeeFormState.isEmployeeEdit"
+                      :readonly="!isEdit"
                       v-model:visa-type="meta.type"
                       v-model:visa-number="meta.number"
                       v-model:visa-issue-date="meta.issueDate"