diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index b7c69d7a..b2e6a88a 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -1532,6 +1532,7 @@ watch(
                             @click.stop="
                               () => {
                                 employeeFormState.drawerModal = true;
+                                employeeFormState.isEmployeeEdit = true;
                                 employeeFormStore.assignFormDataEmployee(
                                   props.row.id,
                                 );
@@ -2351,6 +2352,7 @@ watch(
           @save="
             (index) => {
               employeeFormState.currentIndex = index;
+              notify('create', $t('success'));
             }
           "
           @undo="
@@ -2528,16 +2530,33 @@ watch(
         if (employeeFormState.currentTab === 'healthCheck') {
           await employeeFormStore.submitHealthCheck();
         }
+
+        if (employeeFormState.currentTab === 'workHistory') {
+          await employeeFormStore.submitWorkHistory();
+        }
+
+        if (employeeFormState.currentTab === 'other') {
+          await employeeFormStore.submitOther();
+        }
         await fetchListEmployee();
 
         employeeFormState.isEmployeeEdit = false;
       }
     "
-    :close="
+    :show="
       () => {
         employeeFormStore.resetFormDataEmployee(true);
       }
     "
+    :before-close="
+      () => {
+        if (employeeFormStore.isFormDataDifferent()) {
+          employeeConfirmUnsave();
+          return true;
+        }
+        return false;
+      }
+    "
   >
     <div class="full-height full-width column">
       <div class="q-mx-lg q-mt-lg">
@@ -2641,7 +2660,9 @@ watch(
                 notify('create', $t('success'));
               }
             "
-            @delete="() => console.log('asd')"
+            @delete="
+              () => deleteEmployeeById({ id: currentFromDataEmployee.id })
+            "
           />
           <FormPerson
             id="form-personal"
@@ -2728,7 +2749,6 @@ watch(
             prefix-id="form-employee"
             dense
             outlined
-            :readonly="!employeeFormState.isEmployeeEdit"
             v-model:employeeCheckup="currentFromDataEmployee.employeeCheckup"
             v-model:checkupTypeOption="optionStore.globalOption.insurancePlace"
             v-model:medicalBenefitOption="
@@ -2745,7 +2765,6 @@ watch(
             "
             @edit="
               (index) => {
-                employeeFormState.isEmployeeEdit = true;
                 if (
                   currentFromDataEmployee.employeeCheckup?.[index].statusSave
                 ) {
@@ -2755,9 +2774,20 @@ watch(
               }
             "
             @undo="
-              () => {
-                employeeFormStore.resetFormDataEmployee();
-                employeeFormState.isEmployeeEdit = false;
+              (index) => {
+                if (
+                  currentFromDataEmployee.employeeCheckup?.[index].statusSave
+                ) {
+                  currentFromDataEmployee.employeeCheckup[index].statusSave =
+                    false;
+                  employeeFormStore.resetFormDataEmployee();
+                }
+              }
+            "
+            @delete="
+              (index) => {
+                employeeFormState.currentIndex = index;
+                deleteEmployeeById({ type: 'healthCheck' });
               }
             "
           />
@@ -2767,13 +2797,39 @@ watch(
             prefix-id="form-employee"
             dense
             outlined
-            :readonly="!employeeFormState.isEmployeeEdit"
             v-model:employee-work="currentFromDataEmployee.employeeWork"
             v-model:position-name-option="optionStore.globalOption.position"
             v-model:job-type-option="optionStore.globalOption.businessType"
             v-model:workplace-option="optionStore.globalOption.area"
-            @edit="employeeFormState.isEmployeeEdit = true"
-            @undo="employeeFormState.isEmployeeEdit = false"
+            @delete="
+              (index) => {
+                employeeFormState.currentIndex = index;
+                deleteEmployeeById({ type: 'work' });
+              }
+            "
+            @save="
+              (index) => {
+                employeeFormState.currentIndex = index;
+              }
+            "
+            @undo="
+              (index) => {
+                if (
+                  currentFromDataEmployee.employeeWork?.[index].statusSave ===
+                  false
+                ) {
+                  currentFromDataEmployee.employeeWork[index].statusSave = true;
+                }
+              }
+            "
+            @edit="
+              (index) => {
+                if (currentFromDataEmployee.employeeWork?.[index].statusSave) {
+                  currentFromDataEmployee.employeeWork[index].statusSave =
+                    false;
+                }
+              }
+            "
           />
           <FormEmployeeOther
             v-if="employeeFormState.currentTab === 'other'"
@@ -2782,6 +2838,23 @@ watch(
             dense
             outlined
             v-model:employee-other="currentFromDataEmployee.employeeOtherInfo"
+            @undo="
+              () => {
+                if (
+                  currentFromDataEmployee.employeeOtherInfo?.statusSave ===
+                  false
+                ) {
+                  currentFromDataEmployee.employeeOtherInfo.statusSave = true;
+                }
+              }
+            "
+            @edit="
+              () => {
+                if (currentFromDataEmployee.employeeOtherInfo?.statusSave) {
+                  currentFromDataEmployee.employeeOtherInfo.statusSave = false;
+                }
+              }
+            "
           />
         </div>
       </div>