diff --git a/src/main.ts b/src/main.ts
index 0595dce2e..df8024dbe 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -104,9 +104,4 @@ if (auth.token && auth.refresh_token) {
   // });
 }
 
-app.config.globalProperties.$checkPermission = function () {
-  console.log("This is a checkPermission");
-  return true;
-};
-
 app.mount("#app");
diff --git a/src/modules/04_registryPerson/components/detail/Achievement/01_ProfessionalLicense.vue b/src/modules/04_registryPerson/components/detail/Achievement/01_ProfessionalLicense.vue
index 934824ba7..3deba9a3d 100644
--- a/src/modules/04_registryPerson/components/detail/Achievement/01_ProfessionalLicense.vue
+++ b/src/modules/04_registryPerson/components/detail/Achievement/01_ProfessionalLicense.vue
@@ -216,28 +216,40 @@ const historyVisibleColumns = ref<string[]>([
   "lastUpdatedAt",
 ]);
 
-async function onSubmit() {
+/**
+ * ยืนยันการบันทึกข้อมูล
+ */
+function onSubmit() {
   dialogConfirm(
     $q,
-    async () => {
+    () => {
       dialogStatus.value === "create" ? addData() : editData(editId.value);
-      closeDialog();
     },
     "ยืนยันการบันทึกข้อมูล",
     "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
   );
 }
 
+/**
+ * ปิด form  ข้อมูลใบอนุญาตประกอบวิชาชีพ
+ */
 function closeDialog() {
   dialog.value = false;
 }
+
+/**
+ * ปิด popup ประวัติการแก้ไขข้อมูลใบอนุญาตประกอบวิชาชีพ
+ */
 function closeHistoryDialog() {
   historyDialog.value = false;
 }
 
-async function fetchData(id: string) {
+/**
+ * fetch ข้อมูลรายการใบอนุญาตประกอบวิชาชีพ
+ */
+function fetchData(id: string) {
   showLoader();
-  await http
+  http
     .get(config.API.profileNewCertificateByProfileId(id, empType.value))
     .then(async (res) => {
       rows.value = res.data.result;
@@ -250,6 +262,9 @@ async function fetchData(id: string) {
     });
 }
 
+/**
+ * เคลียร์ form ข้อมูลใบอนุญาตประกอบวิชาชีพ
+ */
 function clearForm() {
   profesLicenseData.expireDate = null;
   profesLicenseData.issueDate = new Date();
@@ -258,6 +273,10 @@ function clearForm() {
   profesLicenseData.issuer = "";
 }
 
+/**
+ * เปิด form แก้ไขข้อมูลใบอนุญาตประกอบวิชาชีพ
+ * @param row  ข้อมูลใบอนุญาตประกอบวิชาชีพ
+ */
 function editForm(row: any) {
   dialogStatus.value = "edit";
   editId.value = row.id;
@@ -269,16 +288,21 @@ function editForm(row: any) {
   dialog.value = true;
 }
 
-async function addData() {
-  await http
+/**
+ * เพิ่มรายการข้อมูลใบอนุญาตประกอบวิชาชีพ
+ */
+function addData() {
+  showLoader();
+  http
     .post(config.API.profileNewCertificate(empType.value), {
       ...profesLicenseData,
       profileId: empType.value === "" ? id.value : undefined,
       profileEmployeeId: empType.value !== "" ? id.value : undefined,
     })
-    .then(() => {
-      fetchData(id.value);
-      success($q, "บันทึกข้อมูลสำเร็จ");
+    .then(async () => {
+      await fetchData(id.value);
+      await success($q, "บันทึกข้อมูลสำเร็จ");
+      closeDialog();
     })
     .catch((err) => {
       messageError($q, err);
@@ -288,8 +312,13 @@ async function addData() {
     });
 }
 
-async function editData(idData: string) {
-  await http
+/**
+ * แก้ไขข้อมูลใบอนุญาตประกอบวิชาชีพ
+ * @param idData  รายการข้อมูลใบอนุญาตประกอบวิชาชีพ
+ */
+function editData(idData: string) {
+  showLoader();
+  http
     .patch(
       config.API.profileNewCertificateByCertificateId(idData, empType.value),
       {
@@ -297,9 +326,10 @@ async function editData(idData: string) {
         profileId: undefined,
       }
     )
-    .then(() => {
-      fetchData(id.value);
-      success($q, "บันทึกข้อมูลสำเร็จ");
+    .then(async () => {
+      await fetchData(id.value);
+      await success($q, "บันทึกข้อมูลสำเร็จ");
+      closeDialog();
     })
     .catch((err) => {
       messageError($q, err);
@@ -309,25 +339,12 @@ async function editData(idData: string) {
     });
 }
 
-// function deleteData(idData: string) {
-//   dialogRemove($q, () =>
-//     http
-//       .delete(config.API.profileNewCertificateByCertificateId(idData))
-//       .then(() => {
-//         fetchData(id.value);
-//       })
-//       .catch((err) => {
-//         messageError($q, err);
-//       })
-//       .finally(() => {
-//         hideLoader();
-//       })
-//   );
-// }
-
-async function fetchHistoryData(id: string) {
+/**
+ * fetch ข้อมูลประวัติการแก้ไขข้อมูลใบอนุญาตประกอบวิชาชีพ
+ */
+function fetchHistoryData(id: string) {
   showLoader();
-  await http
+  http
     .get(config.API.profileNewCertificateHisByCertificateId(id, empType.value))
     .then(async (res) => {
       historyRows.value = res.data.result;
@@ -340,8 +357,8 @@ async function fetchHistoryData(id: string) {
     });
 }
 
-onMounted(async () => {
-  await fetchData(id.value);
+onMounted(() => {
+  fetchData(id.value);
 });
 </script>
 
diff --git a/src/modules/04_registryPerson/components/detail/Achievement/02_Train.vue b/src/modules/04_registryPerson/components/detail/Achievement/02_Train.vue
index 66e70def4..2bec48419 100644
--- a/src/modules/04_registryPerson/components/detail/Achievement/02_Train.vue
+++ b/src/modules/04_registryPerson/components/detail/Achievement/02_Train.vue
@@ -353,18 +353,23 @@ const historyVisibleColumns = ref<string[]>([
   "lastUpdatedAt", // แก้ไขเมื่อวันที่
 ]);
 
-async function onSubmit() {
+/**
+ * ยืนยันการบันทึกข้อมูล
+ */
+function onSubmit() {
   dialogConfirm(
     $q,
-    async () => {
+    () => {
       dialogStatus.value === "create" ? addData() : editData(editId.value);
-      closeDialog();
     },
     "ยืนยันการบันทึกข้อมูล",
     "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
   );
 }
 
+/**
+ * เคลียร์ form ฝึกอบรม/ดูงาน
+ */
 function clearForm() {
   isDate.value = "false";
   trainData.name = "";
@@ -379,6 +384,9 @@ function clearForm() {
   trainData.endDate = new Date();
 }
 
+/**
+ * เปิด popoup แก้ไขข้อมูลฝึกอบรม/ดูงาน
+ */
 function editForm(row: any) {
   dialogStatus.value = "edit";
   editId.value = row.id;
@@ -398,8 +406,12 @@ function editForm(row: any) {
   dialog.value = true;
 }
 
-async function addData() {
-  await http
+/**
+ * เพิ่มข้อมูลการฝึกอบรม/ดูงาน
+ */
+function addData() {
+  showLoader();
+  http
     .post(config.API.profileNewTraining(empType.value), {
       ...trainData,
       startYear: undefined,
@@ -408,9 +420,10 @@ async function addData() {
       profileId: empType.value === "" ? id.value : undefined,
       profileEmployeeId: empType.value !== "" ? id.value : undefined,
     })
-    .then(() => {
-      fetchData(id.value);
-      success($q, "บันทึกข้อมูลสำเร็จ");
+    .then(async () => {
+      await fetchData(id.value);
+      closeDialog();
+      await success($q, "บันทึกข้อมูลสำเร็จ");
     })
     .catch((err) => {
       messageError($q, err);
@@ -420,8 +433,13 @@ async function addData() {
     });
 }
 
-async function editData(idData: string) {
-  await http
+/**
+ * แก้ไขข้อมูลการฝึกอบรม/ดูงาน
+ * @param idData  รายการฝึกอบรม/ดูงาน
+ */
+function editData(idData: string) {
+  showLoader();
+  http
     .patch(config.API.profileNewTrainingByTrainingId(idData, empType.value), {
       ...trainData,
       profileId: undefined,
@@ -429,9 +447,10 @@ async function editData(idData: string) {
       finishYear: undefined,
       isDate: isDate.value === "false" ? false : true,
     })
-    .then(() => {
-      fetchData(id.value);
-      success($q, "บันทึกข้อมูลสำเร็จ");
+    .then(async () => {
+      await fetchData(id.value);
+      closeDialog();
+      await success($q, "บันทึกข้อมูลสำเร็จ");
     })
     .catch((err) => {
       messageError($q, err);
@@ -441,36 +460,29 @@ async function editData(idData: string) {
     });
 }
 
-function deleteData(idData: string) {
-  dialogRemove($q, () =>
-    http
-      .delete(config.API.profileNewTrainingByTrainingId(idData, empType.value))
-      .then(() => {
-        fetchData(id.value);
-        success($q, "ลบข้อมูลสำเร็จ");
-      })
-      .catch((err) => {
-        messageError($q, err);
-      })
-      .finally(() => {
-        hideLoader();
-      })
-  );
+/**
+ * ปิด from การฝึกอบรม/ดูงาน
+ */
+function closeDialog() {
+  dialog.value = false;
+  clearForm();
 }
 
-function closeDialog() {
-  clearForm();
-  dialog.value = false;
-}
+/**
+ * ปิด ประวัติการแก่ไขการฝึกอบรม/ดูงาน
+ */
 function closeHistoryDialog() {
   historyDialog.value = false;
 }
 
-async function fetchData(id: string) {
+/**
+ * fetch รายการการฝึกอบรม/ดูงาน
+ */
+function fetchData(id: string) {
   showLoader();
-  await http
+  http
     .get(config.API.profileNewTrainingByProfileId(id, empType.value))
-    .then(async (res) => {
+    .then((res) => {
       rows.value = res.data.result;
     })
     .catch((err) => {
@@ -481,11 +493,14 @@ async function fetchData(id: string) {
     });
 }
 
-async function fetchHistoryData(id: string) {
+/**
+ * fetch ประวัติรายการแก้ไขการฝึกอบรม/ดูงาน
+ */
+function fetchHistoryData(id: string) {
   showLoader();
-  await http
+  http
     .get(config.API.profileNewTrainingHisByTrainingId(id, empType.value))
-    .then(async (res) => {
+    .then((res) => {
       historyRows.value = res.data.result;
     })
     .catch((err) => {
@@ -496,8 +511,8 @@ async function fetchHistoryData(id: string) {
     });
 }
 
-onMounted(async () => {
-  await fetchData(id.value);
+onMounted(() => {
+  fetchData(id.value);
 });
 </script>
 
diff --git a/src/modules/04_registryPerson/components/detail/Achievement/03_Insignia.vue b/src/modules/04_registryPerson/components/detail/Achievement/03_Insignia.vue
index 16df2dff7..d5baa51ea 100644
--- a/src/modules/04_registryPerson/components/detail/Achievement/03_Insignia.vue
+++ b/src/modules/04_registryPerson/components/detail/Achievement/03_Insignia.vue
@@ -444,9 +444,11 @@ const visibleColumnsHistory = ref<String[]>([
   "lastUpdatedAt",
 ]);
 
+/**
+ * fetch ข้อมูลรายการเครื่องราชอิสริยาภรณ์
+ */
 async function fetchData() {
   if (!profileId.value) return;
-
   showLoader();
   try {
     const res = await http.get(
@@ -460,6 +462,9 @@ async function fetchData() {
   }
 }
 
+/**
+ * fetch ข้อมูลเครื่องราชอิสริยาภรณ์
+ */
 async function fetchInsignia() {
   showLoader();
   try {
@@ -473,9 +478,13 @@ async function fetchInsignia() {
   }
 }
 
+/**
+ * บันทึกข้อมูลเครื่องราชอิสริยาภรณ์
+ * @param editStatus แก้ไข,เพิ่ม
+ */
 async function addEditData(editStatus: boolean = false) {
   if (!profileId.value) return;
-
+  showLoader();
   const url = editStatus
     ? config.API.profileNewInsignById(id.value, empType.value)
     : config.API.profileNewInsign(empType.value);
@@ -489,8 +498,9 @@ async function addEditData(editStatus: boolean = false) {
   };
   try {
     await http[method](url, reqBody);
-    success($q, "บันทึกข้อมูลสำเร็จ");
     await fetchData();
+    await success($q, "บันทึกข้อมูลสำเร็จ");
+    modal.value = false;
   } catch (e) {
     messageError($q, e);
   } finally {
@@ -498,6 +508,9 @@ async function addEditData(editStatus: boolean = false) {
   }
 }
 
+/**
+ * เปิด form ข้อมูลเครื่องราชอิสริยาภรณ์
+ */
 function onClickOpenDialog(editStatus: boolean = false, row?: ResponseObject) {
   modal.value = true;
   isEdit.value = editStatus;
@@ -523,15 +536,20 @@ function onClickOpenDialog(editStatus: boolean = false, row?: ResponseObject) {
   }
 }
 
-async function clickClose() {
+/**
+ * ปิด form ข้อมูลเครื่องราชอิสริยาภรณ์
+ */
+function clickClose() {
   clearData();
   modal.value = false;
 }
 
+/**
+ * fetch ช้อมูลประวัติการแก้ไขรายการข้อมูลเครื่องราชอิสริยาภรณ์
+ */
 async function clickHistory(row: ResponseObject) {
   modalHistory.value = true;
   filterSearch.value = "";
-
   showLoader();
   try {
     const res = await http.get(
@@ -545,18 +563,26 @@ async function clickHistory(row: ResponseObject) {
   }
 }
 
+/**
+ * ยืนยีนการบันทึกข้อมูล
+ */
 function onSubmit() {
   dialogConfirm(
     $q,
-    async () => {
+    () => {
       addEditData(isEdit.value);
-      modal.value = false;
     },
     "ยืนยันการบันทึกข้อมูล",
     "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
   );
 }
 
+/**
+ * ฟิลเตอร์ข้อมูลจาก input
+ * @param val ค่าที่ป้อนให้ input
+ * @param update function จาก quasar
+ * @param refData type ที่กำหนด ของ input นั้นๆ
+ */
 function filterSelector(val: string, update: Function, refData: string) {
   switch (refData) {
     case "insigniaOptions":
@@ -571,6 +597,9 @@ function filterSelector(val: string, update: Function, refData: string) {
   }
 }
 
+/**
+ * ค้นหาลำดับชั้น
+ */
 function insigniaTypeSelection() {
   const insigniaTypeFilter = Ops.value.insigniaOptions.filter(
     (r: DataOptionInsignia) => r.id === insigniaForm.insigniaId
@@ -580,6 +609,9 @@ function insigniaTypeSelection() {
   }
 }
 
+/**
+ * เคลียร์ formDฟta
+ */
 function clearData() {
   id.value = "";
   (insigniaType.value = ""), (insigniaForm.year = 0);
diff --git a/src/modules/04_registryPerson/components/detail/Achievement/04_DeclarationHonor.vue b/src/modules/04_registryPerson/components/detail/Achievement/04_DeclarationHonor.vue
index 37027aee8..fb6924a17 100644
--- a/src/modules/04_registryPerson/components/detail/Achievement/04_DeclarationHonor.vue
+++ b/src/modules/04_registryPerson/components/detail/Achievement/04_DeclarationHonor.vue
@@ -220,6 +220,9 @@ const historyPagination = ref({
   rowsPerPage: 10,
 });
 
+/**
+ * fetch รายการข้อมูลประกาศเกียรติคุณ
+ */
 async function fetchData() {
   if (!profileId.value) return;
 
@@ -236,9 +239,14 @@ async function fetchData() {
   }
 }
 
+/**
+ * บันทึกข้อมูลประกาศเกียรติคุณ
+ * @param editStatus แก่ไข,เพิ่ม
+ */
 async function addEditData(editStatus: boolean = false) {
   if (!profileId.value) return;
 
+  showLoader();
   const url = editStatus
     ? config.API.profileNewHonorById(id.value, empType.value)
     : config.API.profileNewHonor(empType.value);
@@ -258,8 +266,9 @@ async function addEditData(editStatus: boolean = false) {
 
   try {
     await http[method](url, reqBody);
-    success($q, "บันทึกข้อมูลสำเร็จ");
     await fetchData();
+    await success($q, "บันทึกข้อมูลสำเร็จ");
+    modal.value = false;
   } catch (e) {
     messageError($q, e);
   } finally {
@@ -267,6 +276,9 @@ async function addEditData(editStatus: boolean = false) {
   }
 }
 
+/**
+ * เปิด form ข้อมูลประกาศเกียรติคุณ
+ */
 function onClickOpenDialog(editStatus: boolean = false, row?: ResponseObject) {
   modal.value = true;
   isEdit.value = editStatus;
@@ -286,11 +298,17 @@ function onClickOpenDialog(editStatus: boolean = false, row?: ResponseObject) {
   }
 }
 
+/**
+ * ปิด form ข้อมูลประกาศเกียรติคุณ
+ */
 async function clickClose() {
   clearData();
   modal.value = false;
 }
 
+/**
+ * fetch ช้อมูลประวัติการแก้ไขรายการข้อมูลประกาศเกียรติคุณ
+ */
 async function clickHistory(row: ResponseObject) {
   modalHistory.value = true;
   filterSearch.value = "";
@@ -308,18 +326,23 @@ async function clickHistory(row: ResponseObject) {
   }
 }
 
+/**
+ * ยืนยีนการบันทึกข้อมูล
+ */
 function onSubmit() {
   dialogConfirm(
     $q,
     async () => {
       addEditData(isEdit.value);
-      modal.value = false;
     },
     "ยืนยันการบันทึกข้อมูล",
     "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
   );
 }
 
+/**
+ * เคลียร์ formDฟta
+ */
 function clearData() {
   id.value = "";
   issueDateYear.value = new Date().getFullYear();
@@ -331,8 +354,8 @@ function clearData() {
   declHonorForm.isDate = "false";
 }
 
-onMounted(async () => {
-  await fetchData();
+onMounted(() => {
+  fetchData();
 });
 </script>
 <template>
diff --git a/src/modules/04_registryPerson/components/detail/Achievement/05_ResultsPerformance.vue b/src/modules/04_registryPerson/components/detail/Achievement/05_ResultsPerformance.vue
index ca1578f5f..f2babbd7c 100644
--- a/src/modules/04_registryPerson/components/detail/Achievement/05_ResultsPerformance.vue
+++ b/src/modules/04_registryPerson/components/detail/Achievement/05_ResultsPerformance.vue
@@ -44,11 +44,6 @@ const resPerformForm = reactive<RequestItemsObject>({
   pointSum: 0,
   date: null,
 });
-
-const currentPage = ref<number>(1);
-const maxPage = ref<number>(1);
-const currentPageHistory = ref<number>(1);
-const maxPageHistory = ref<number>(1);
 const isEdit = ref<boolean>(false);
 const modal = ref<boolean>(false);
 const modeView = ref<string>("table");
@@ -292,6 +287,9 @@ const historyPagination = ref({
   rowsPerPage: 10,
 });
 
+/**
+ * fetch รายการข้อมูลผลการประเมินการปฏิบัติราชการ
+ */
 async function fetchData() {
   if (!profileId.value) return;
 
@@ -311,9 +309,14 @@ async function fetchData() {
   }
 }
 
+/**
+ * บันทึกข้อมูลผลการประเมินการปฏิบัติราชการ
+ * @param editStatus แก่ไข,เพิ่ม
+ */
 async function addEditData(editStatus: boolean = false) {
   if (!profileId.value) return;
 
+  showLoader();
   const url = editStatus
     ? config.API.profileNewAssessmentsById(id.value, empType.value)
     : config.API.profileNewAssessments(empType.value);
@@ -328,8 +331,9 @@ async function addEditData(editStatus: boolean = false) {
 
   try {
     await http[method](url, reqBody);
-    success($q, "บันทึกข้อมูลสำเร็จ");
     await fetchData();
+    await success($q, "บันทึกข้อมูลสำเร็จ");
+    modal.value = false;
   } catch (e) {
     messageError($q, e);
   } finally {
@@ -337,6 +341,9 @@ async function addEditData(editStatus: boolean = false) {
   }
 }
 
+/**
+ * เปิด form ข้อมูลผลการประเมินการปฏิบัติราชการ
+ */
 function onClickOpenDialog(editStatus: boolean = false, row?: ResponseObject) {
   modal.value = true;
   isEdit.value = editStatus;
@@ -356,11 +363,17 @@ function onClickOpenDialog(editStatus: boolean = false, row?: ResponseObject) {
   }
 }
 
+/**
+ * ปิด form ข้อมูลผลการประเมินการปฏิบัติราชการ
+ */
 async function clickClose() {
   clearData();
   modal.value = false;
 }
 
+/**
+ * fetch ช้อมูลประวัติการแก้ไขรายการข้อมูลผลการประเมินการปฏิบัติราชการ
+ */
 async function clickHistory(row: ResponseObject) {
   modalHistory.value = true;
   filterSearch.value = "";
@@ -379,18 +392,23 @@ async function clickHistory(row: ResponseObject) {
   }
 }
 
+/**
+ * ยืนยีนการบันทึกข้อมูล
+ */
 function onSubmit() {
   dialogConfirm(
     $q,
     async () => {
       addEditData(isEdit.value);
-      modal.value = false;
     },
     "ยืนยันการบันทึกข้อมูล",
     "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
   );
 }
 
+/**
+ * เคลียร์ formDฟta
+ */
 function clearData() {
   (id.value = ""),
     (resPerformForm.name = ""),
@@ -403,8 +421,8 @@ function clearData() {
     (resPerformForm.date = null);
 }
 
-onMounted(async () => {
-  await fetchData();
+onMounted(() => {
+  fetchData();
 });
 </script>
 <template>
diff --git a/src/modules/04_registryPerson/components/detail/Employee/01_DataEmployee.vue b/src/modules/04_registryPerson/components/detail/Employee/01_DataEmployee.vue
index 230ff4f78..ad174cacf 100644
--- a/src/modules/04_registryPerson/components/detail/Employee/01_DataEmployee.vue
+++ b/src/modules/04_registryPerson/components/detail/Employee/01_DataEmployee.vue
@@ -27,7 +27,6 @@ const {
   date2Thai,
   messageError,
   dialogConfirm,
-  dialogMessageNotify,
 } = useCounterMixin();
 
 const profileId = ref<string>(
@@ -124,9 +123,9 @@ function onSubmit() {
     showLoader();
     http
       .put(config.API.informationEmployee(profileId.value), formData)
-      .then(() => {
-        success($q, "บันทึกข้อมูลสำเร็จ");
-        fetchData();
+      .then(async () => {
+        await fetchData();
+        await success($q, "บันทึกข้อมูลสำเร็จ");
         onCloseDialog();
       })
       .catch((err) => {
@@ -386,7 +385,7 @@ onMounted(() => {
   </q-card>
 
   <!-- Dialog แก้ไขข้อมูลลูกจ้างชั่วคราว -->
-  <q-dialog v-model="modalEdit" persistent full-width>
+  <q-dialog v-model="modalEdit" persistent>
     <q-card>
       <q-form greedy @submit.prevent @validation-success="onSubmit">
         <DialogHeader
@@ -397,7 +396,7 @@ onMounted(() => {
         <q-separator />
         <q-card-section>
           <div class="row col-12 q-col-gutter-sm">
-            <div class="col-xs-6 col-sm-3 col-md-3">
+            <div class="col-xs-12 col-sm-6 col-md-6">
               <q-input
                 dense
                 outlined
@@ -409,7 +408,7 @@ onMounted(() => {
                 :rules="[(val: string) => !!val || `${'กรุณากรอกกลุ่มงาน'}`]"
               />
             </div>
-            <div class="col-xs-6 col-sm-3 col-md-3">
+            <div class="col-xs-12 col-sm-6 col-md-6">
               <q-input
                 dense
                 outlined
@@ -421,7 +420,7 @@ onMounted(() => {
                 :rules="[(val: string) => !!val || `${'กรุณากรอกสายงาน'}`]"
               />
             </div>
-            <div class="col-xs-6 col-sm-3 col-md-3">
+            <div class="col-xs-12 col-sm-6 col-md-6">
               <q-input
                 dense
                 outlined
@@ -433,7 +432,7 @@ onMounted(() => {
                 :rules="[(val: string) => !!val || `${'กรุณากรอกตำแหน่งทางสายงาน'}`]"
               />
             </div>
-            <div class="col-xs-6 col-sm-3 col-md-3">
+            <div class="col-xs-12 col-sm-6 col-md-6">
               <q-input
                 dense
                 outlined
@@ -446,7 +445,7 @@ onMounted(() => {
               <!-- :rules="[(val: string) => !!val || `${'กรุณากรอกสังกัด'}`]" -->
             </div>
 
-            <div class="col-xs-6 col-sm-3 col-md-3">
+            <div class="col-xs-12 col-sm-6 col-md-6">
               <q-input
                 dense
                 outlined
@@ -458,7 +457,7 @@ onMounted(() => {
               />
               <!-- :rules="[(val: string) => !!val || `${'กรุณากรอกประเภทบุคคล'}`]" -->
             </div>
-            <div class="col-xs-6 col-sm-3 col-md-3">
+            <div class="col-xs-12 col-sm-6 col-md-6">
               <q-input
                 dense
                 outlined
@@ -473,7 +472,7 @@ onMounted(() => {
               <!-- :rules="[(val: string) => !!val || `${'กรุณากรอกค่าจ้าง'}`]" -->
             </div>
 
-            <div class="col-xs-6 col-sm-3 col-md-3">
+            <div class="col-xs-12 col-sm-6 col-md-6">
               <q-input
                 dense
                 outlined
@@ -487,7 +486,7 @@ onMounted(() => {
               />
               <!-- :rules="[(val: string) => !!val || `${'กรุณากรอกเงินเพิ่มการครองชึพชั่วคราว'}`]" -->
             </div>
-            <div class="col-xs-6 col-sm-3 col-md-3">
+            <div class="col-xs-12 col-sm-6 col-md-6">
               <q-input
                 dense
                 outlined
@@ -501,7 +500,7 @@ onMounted(() => {
               />
               <!-- :rules="[(val: string) => !!val || `${'กรุณากรอกเงินช่วยเหลือการครองชึพชั่วคราว'}`]" -->
             </div>
-            <div class="col-xs-6 col-sm-3 col-md-3">
+            <div class="col-xs-12 col-sm-6 col-md-6">
               <q-input
                 dense
                 outlined
@@ -515,7 +514,7 @@ onMounted(() => {
               />
               <!-- :rules="[(val: string) => !!val || `${'กรุณากรอกเงินสมทบประกันสังคม(ลูกจ้าง)'}`]" -->
             </div>
-            <div class="col-xs-6 col-sm-3 col-md-3">
+            <div class="col-xs-12 col-sm-6 col-md-6">
               <q-input
                 dense
                 outlined
diff --git a/src/modules/04_registryPerson/components/detail/Employee/02_Employment.vue b/src/modules/04_registryPerson/components/detail/Employee/02_Employment.vue
index 79612f3ac..799dec715 100644
--- a/src/modules/04_registryPerson/components/detail/Employee/02_Employment.vue
+++ b/src/modules/04_registryPerson/components/detail/Employee/02_Employment.vue
@@ -156,9 +156,9 @@ function onSubmit() {
     const methods = isEdit.value ? "put" : "post";
     const id = isEdit.value ? employmentId.value : profileId.value;
     http[methods](config.API.employmentEmployee(id), formData)
-      .then(() => {
-        success($q, "บันทึกข้อมูลสำเร็จ");
-        fetchListEmployment();
+      .then(async () => {
+        await fetchListEmployment();
+        await success($q, "บันทึกข้อมูลสำเร็จ");
         onCloseDialog();
       })
       .catch((err) => {
diff --git a/src/modules/04_registryPerson/components/detail/Other/01_OtherInformation.vue b/src/modules/04_registryPerson/components/detail/Other/01_OtherInformation.vue
index 1dfd98d59..eb43b2aa0 100644
--- a/src/modules/04_registryPerson/components/detail/Other/01_OtherInformation.vue
+++ b/src/modules/04_registryPerson/components/detail/Other/01_OtherInformation.vue
@@ -23,7 +23,6 @@ const {
   hideLoader,
   success,
   messageError,
-  dialogRemove,
   dialogConfirm,
   pathRegistryEmp,
 } = mixin;
@@ -43,21 +42,6 @@ const mode = ref<string>("table");
 const filterKeyword = ref<string>("");
 const rows = ref<RowList[]>([]);
 
-const currentPage = ref<number>(1);
-const maxPage = ref<number>(1);
-const formFilter = reactive<FormFilter>({
-  page: 1,
-  pageSize: 12,
-  keyword: "",
-  type: "",
-  posType: "",
-  posLevel: "",
-  retireYear: "",
-  rangeYear: { min: 0, max: 60 },
-  isShowRetire: false,
-  isProbation: false,
-});
-
 /** modal */
 const modal = ref<boolean>(false);
 const edit = ref<boolean>(false);
@@ -66,13 +50,6 @@ const modalHistory = ref<boolean>(false);
 const date = ref<Date | null>(null);
 const detail = ref<string>();
 
-const dateRef = ref<object | null>(null);
-const detailRef = ref<object | null>(null);
-const objectRef: MyObjectRef = {
-  date: dateRef,
-  detail: detailRef,
-};
-
 const visibleColumns = ref<String[]>(["date", "detail"]);
 const columns = ref<QTableProps["columns"]>([
   {
@@ -134,7 +111,7 @@ function closeDialog() {
 function validateForm() {
   dialogConfirm(
     $q,
-    async () => {
+    () => {
       if (edit.value) {
         editData();
       } else {
@@ -149,18 +126,18 @@ function validateForm() {
 /**
  * บันทึกเพิ่มข้อมูล
  */
-async function saveData() {
+function saveData() {
   showLoader();
-  await http
+  http
     .post(config.API.profileNewOther(empType.value), {
       profileId: empType.value === "" ? profileId.value : undefined,
       profileEmployeeId: empType.value !== "" ? profileId.value : undefined,
       date: date.value,
       detail: detail.value,
     })
-    .then(() => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
-      getData();
+    .then(async () => {
+      await getData();
+      await success($q, "บันทึกข้อมูลสำเร็จ");
       closeDialog();
     })
     .catch((e) => {
@@ -174,16 +151,16 @@ async function saveData() {
 /**
  * บันทึกแก้ไขข้อมูล
  */
-async function editData() {
+function editData() {
   showLoader();
-  await http
+  http
     .patch(config.API.profileNewOtherById(id.value, empType.value), {
       date: date.value,
       detail: detail.value,
     })
-    .then((res) => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
-      getData();
+    .then(async () => {
+      await getData();
+      await success($q, "บันทึกข้อมูลสำเร็จ");
       closeDialog();
     })
     .catch((e) => {
@@ -194,9 +171,12 @@ async function editData() {
     });
 }
 
-async function getData() {
+/**
+ * fetch รายการข้อมูลอื่นๆ
+ */
+function getData() {
   showLoader();
-  await http
+  http
     .get(config.API.profileNewOtherByProfileId(profileId.value, empType.value))
     .then((res) => {
       rows.value = res.data.result;
@@ -467,15 +447,7 @@ onMounted(() => {
         </q-card-section>
         <q-separator />
         <q-card-actions align="right">
-          <q-btn
-            dense
-            unelevated
-            label="บันทึก"
-            id="onSubmit"
-            type="submit"
-            color="public"
-            class="q-px-md"
-          >
+          <q-btn label="บันทึก" id="onSubmit" type="submit" color="public">
             <q-tooltip>บันทึกข้อมูล</q-tooltip>
           </q-btn>
         </q-card-actions>
diff --git a/src/modules/04_registryPerson/components/detail/Other/02_Document.vue b/src/modules/04_registryPerson/components/detail/Other/02_Document.vue
index 0184aabf8..31093dff8 100644
--- a/src/modules/04_registryPerson/components/detail/Other/02_Document.vue
+++ b/src/modules/04_registryPerson/components/detail/Other/02_Document.vue
@@ -57,9 +57,9 @@ async function uploadFileDoc(uploadUrl: string, file: any) {
         "Content-Type": file.type,
       },
     })
-    .then((res) => {
+    .then(async () => {
+      await getData();
       success($q, "อัปโหลดไฟล์สำเร็จ");
-      getData();
     })
     .catch((e) => {
       messageError($q, e);
@@ -70,12 +70,12 @@ async function uploadFileDoc(uploadUrl: string, file: any) {
     });
 }
 
-async function clickUpload(file: any) {
+function clickUpload(file: any) {
   const fileName = { fileName: file.name };
-
   dialogConfirm(
     $q,
     async () => {
+      showLoader();
       const selectedFile = file;
       const formdata = new FormData();
       formdata.append("file", selectedFile);
@@ -152,17 +152,14 @@ function deleteFile(fileName: string) {
           fileName
         )
       )
-      .then((res) => {
-        success($q, `ลบไฟล์สำเร็จ`);
-        setTimeout(() => {
-          getData();
-          hideLoader();
-        }, 1000);
+      .then(async () => {
+        await setTimeout(async () => {
+          await getData();
+          await success($q, `ลบไฟล์สำเร็จ`);
+        }, 1500);
       })
       .catch((e) => {
         messageError($q, e);
-      })
-      .finally(() => {
         hideLoader();
       });
   });
diff --git a/src/plugins/keycloak.ts b/src/plugins/keycloak.ts
index b1ac26ca0..52bd62dbb 100644
--- a/src/plugins/keycloak.ts
+++ b/src/plugins/keycloak.ts
@@ -15,7 +15,7 @@ const keycloak = new Keycloak(keycloakConfig);
 async function kcAuthen(access_token: string, refresh_token: string) {
   await setCookie(ACCESS_TOKEN, access_token, 1);
   await setCookie(REFRESH_TOKEN, refresh_token, 1);
-  window.location.href = "/";
+  window.location.href = "/login";
 }
 
 async function kcLogout() {
diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue
index 242e5ea70..dbe2c21b4 100644
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@@ -427,11 +427,6 @@ if (keycloak.tokenParsed != null) {
   role.value = keycloak.tokenParsed.role;
 }
 
-const totalInbox = ref<number>(0);
-const totalNoti = ref<number>(0);
-const round = ref<number>(0);
-const page = ref<number>(0);
-
 const clickDelete = async (id: string, index: number) => {
   dialogRemove($q, async () => {
     showLoader();
@@ -441,7 +436,6 @@ const clickDelete = async (id: string, index: number) => {
         notiList.value.splice(index, 1);
         success($q, "ลบข้อมูลสำเร็จ");
         totalInbox.value--;
-        totalNoti.value--;
       })
       .catch((e) => {
         messageError($q, e);
@@ -453,6 +447,11 @@ const clickDelete = async (id: string, index: number) => {
   });
 };
 
+const totalInbox = ref<number>(0);
+const totalNoti = ref<number>(0);
+const round = ref<number>(0);
+const page = ref<number>(0);
+
 function onLoad(index: any, done: any) {
   if (
     notiList.value.length < totalInbox.value ||
diff --git a/src/views/login.vue b/src/views/login.vue
index 4aaadff17..d8119eebe 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -6,6 +6,7 @@ import keycloak, { keycloakConfig, kcAuthen } from "@/plugins/keycloak";
 import { useRouter } from "vue-router";
 import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
+import CustomComponent from "@/components/CustomDialog.vue";
 
 const router = useRouter();
 const mixin = useCounterMixin();
@@ -15,6 +16,10 @@ const { showLoader, hideLoader, messageError } = mixin;
 
 const username = ref<string>("");
 const password = ref<string>("");
+const isDisplay = ref<boolean>(true); // check display login page
+/**
+ * @description ฟังก์ชั่นเข้าสู่ระบบ
+ */
 async function onSubmit() {
   showLoader();
   const formdata = new URLSearchParams();
@@ -50,16 +55,38 @@ async function onSubmit() {
 }
 
 onMounted(() => {
+  // check authen keycloak and role of system
   if (keycloak.authenticated) {
-    console.log("authenticated", keycloak.authenticated);
+    isDisplay.value = false;
+    showLoader();
+    if (keycloak.tokenParsed) {
+      const checkRole = (element: string) => element === "STAFF";
 
-    router.push("/");
+      // ถ้าไม่มีสิทธิ์เข้าใช้งานระบบ แสดงข้อความแจ้งเตือน
+      if (keycloak.tokenParsed.role.findIndex(checkRole) === -1) {
+        $q.dialog({
+          component: CustomComponent,
+          componentProps: {
+            title: "พบข้อผิดพลาด",
+            message: "ขออภัยคุณไม่มีสิทธิ์เข้าใช้งานระบบนี้",
+            icon: "warning",
+            color: "red",
+            onlycancel: true,
+          },
+        });
+        hideLoader();
+        isDisplay.value = true;
+      } else {
+        // ถ้ามีสิทธิ์เข้าใช้งานระบบ พาไปหน้าหลัก
+        router.push("/");
+      }
+    }
   }
 });
 </script>
 
 <template>
-  <div class="bg-image">
+  <div v-if="isDisplay" class="bg-image">
     <div class="login-pf-page">
       <div id="kc-logo">
         <div id="myimage"></div>