diff --git a/src/modules/04_registry/components/Assessment.vue b/src/modules/04_registry/components/Assessment.vue
index c93364503..5d42ad985 100644
--- a/src/modules/04_registry/components/Assessment.vue
+++ b/src/modules/04_registry/components/Assessment.vue
@@ -366,7 +366,9 @@ const tittleHistory = ref<string>("ประวัติแก้ไขผลก
 const filterHistory = ref<string>(""); //search data table history
 const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
 const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
-const profileId = ref<string>(route.params.id.toString());
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
 const rows = ref<RequestItemsObject[]>([]);
 const filter = ref<string>(""); //search data table
 const visibleColumns = ref<String[]>([]);
@@ -595,34 +597,36 @@ onMounted(async () => {
 });
 
 const fetchData = async () => {
-  loaderPage(true);
-  await http
-    .get(config.API.profileAssessmentId(profileId.value))
-    .then((res) => {
-      let data = res.data.result;
-      rows.value = [];
-      data.map((e: ResponseObject) => {
-        rows.value.push({
-          id: e.id,
-          name: e.name,
-          point1Total: e.point1Total,
-          point1: e.point1,
-          point2Total: e.point2Total,
-          point2: e.point2,
-          pointSumTotal: e.pointSumTotal,
-          pointSum: e.pointSum,
-          date: new Date(e.date),
-          createdAt: new Date(e.createdAt),
-          createdFullName: e.createdFullName,
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .get(config.API.profileAssessmentId(profileId.value))
+      .then((res) => {
+        let data = res.data.result;
+        rows.value = [];
+        data.map((e: ResponseObject) => {
+          rows.value.push({
+            id: e.id,
+            name: e.name,
+            point1Total: e.point1Total,
+            point1: e.point1,
+            point2Total: e.point2Total,
+            point2: e.point2,
+            pointSumTotal: e.pointSumTotal,
+            pointSum: e.pointSum,
+            date: new Date(e.date),
+            createdAt: new Date(e.createdAt),
+            createdFullName: e.createdFullName,
+          });
         });
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        loaderPage(false);
       });
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      loaderPage(false);
-    });
+  }
 };
 
 /**
@@ -712,29 +716,31 @@ const clickSave = async () => {
  * บันทึกเพิ่มข้อมูล
  */
 const saveData = async () => {
-  loaderPage(true);
-  await http
-    .post(config.API.profileAssessmentId(profileId.value), {
-      id: id.value,
-      name: name.value,
-      point1Total: point1Total.value,
-      point1: point1.value,
-      point2Total: point2Total.value,
-      point2: point2.value,
-      pointSumTotal: pointSumTotal.value,
-      pointSum: pointSum.value,
-      date: dateToISO(date.value),
-    })
-    .then((res) => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
-      modal.value = false;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await fetchData();
-    });
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .post(config.API.profileAssessmentId(profileId.value), {
+        id: id.value,
+        name: name.value,
+        point1Total: point1Total.value,
+        point1: point1.value,
+        point2Total: point2Total.value,
+        point2: point2.value,
+        pointSumTotal: pointSumTotal.value,
+        pointSum: pointSum.value,
+        date: dateToISO(date.value),
+      })
+      .then((res) => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        modal.value = false;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await fetchData();
+      });
+  }
 };
 
 /**
diff --git a/src/modules/04_registry/components/Coin.vue b/src/modules/04_registry/components/Coin.vue
index 122508ea6..a478b85b7 100644
--- a/src/modules/04_registry/components/Coin.vue
+++ b/src/modules/04_registry/components/Coin.vue
@@ -319,7 +319,9 @@ const tittleHistory = ref<string>("ประวัติแก้ไขประ
 const filterHistory = ref<string>(""); //search data table history
 const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
 const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
-const profileId = ref<string>(route.params.id.toString());
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
 const rows = ref<RequestItemsObject[]>([]);
 const filter = ref<string>(""); //search data table
 const visibleColumns = ref<String[]>([]);
@@ -487,32 +489,34 @@ onMounted(async () => {
 });
 
 const fetchData = async () => {
-  loaderPage(true);
-  await http
-    .get(config.API.profileHonorId(profileId.value))
-    .then((res) => {
-      let data = res.data.result;
-      rows.value = [];
-      data.map((e: ResponseObject) => {
-        rows.value.push({
-          id: e.id,
-          issuer: e.issuer,
-          detail: e.detail,
-          issueDate: new Date(e.issueDate),
-          refCommandNo: e.refCommandNo,
-          refCommandDate:
-            e.refCommandDate == null ? null : new Date(e.refCommandDate),
-          createdAt: new Date(e.createdAt),
-          createdFullName: e.createdFullName,
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .get(config.API.profileHonorId(profileId.value))
+      .then((res) => {
+        let data = res.data.result;
+        rows.value = [];
+        data.map((e: ResponseObject) => {
+          rows.value.push({
+            id: e.id,
+            issuer: e.issuer,
+            detail: e.detail,
+            issueDate: new Date(e.issueDate),
+            refCommandNo: e.refCommandNo,
+            refCommandDate:
+              e.refCommandDate == null ? null : new Date(e.refCommandDate),
+            createdAt: new Date(e.createdAt),
+            createdFullName: e.createdFullName,
+          });
         });
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        loaderPage(false);
       });
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      loaderPage(false);
-    });
+  }
 };
 
 /**
@@ -599,27 +603,29 @@ const clickSave = async () => {
  * บันทึกเพิ่มข้อมูล
  */
 const saveData = async () => {
-  loaderPage(true);
-  await http
-    .post(config.API.profileHonorId(profileId.value), {
-      id: id.value,
-      issuer: issuer.value,
-      detail: detail.value,
-      issueDate: dateToISO(issueDate.value),
-      refCommandNo: refCommandNo.value,
-      refCommandDate:
-        refCommandDate.value == null ? null : dateToISO(refCommandDate.value),
-    })
-    .then((res) => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
-      modal.value = false;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await fetchData();
-    });
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .post(config.API.profileHonorId(profileId.value), {
+        id: id.value,
+        issuer: issuer.value,
+        detail: detail.value,
+        issueDate: dateToISO(issueDate.value),
+        refCommandNo: refCommandNo.value,
+        refCommandDate:
+          refCommandDate.value == null ? null : dateToISO(refCommandDate.value),
+      })
+      .then((res) => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        modal.value = false;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await fetchData();
+      });
+  }
 };
 
 /**
diff --git a/src/modules/04_registry/components/Discipline.vue b/src/modules/04_registry/components/Discipline.vue
index 2299c82ab..ae43a8383 100644
--- a/src/modules/04_registry/components/Discipline.vue
+++ b/src/modules/04_registry/components/Discipline.vue
@@ -381,7 +381,9 @@ const tittleHistory = ref<string>("ประวัติแก้ไขวิน
 const filterHistory = ref<string>(""); //search data table history
 const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
 const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
-const profileId = ref<string>(route.params.id.toString());
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
 const rows = ref<RequestItemsObject[]>([]);
 const filter = ref<string>(""); //search data table
 const visibleColumns = ref<String[]>([]);
@@ -587,33 +589,35 @@ const filterSelector = (val: string, update: Function, refData: string) => {
 };
 
 const fetchData = async () => {
-  loaderPage(true);
-  await http
-    .get(config.API.profileDisId(profileId.value))
-    .then((res) => {
-      let data = res.data.result;
-      rows.value = [];
-      data.map((e: ResponseObject) => {
-        rows.value.push({
-          id: e.id,
-          level: e.level,
-          detail: e.detail,
-          unStigma: e.unStigma,
-          refCommandNo: e.refCommandNo,
-          refCommandDate:
-            e.refCommandDate == null ? null : new Date(e.refCommandDate),
-          date: new Date(e.date),
-          createdFullName: e.createdFullName,
-          createdAt: new Date(e.createdAt),
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .get(config.API.profileDisId(profileId.value))
+      .then((res) => {
+        let data = res.data.result;
+        rows.value = [];
+        data.map((e: ResponseObject) => {
+          rows.value.push({
+            id: e.id,
+            level: e.level,
+            detail: e.detail,
+            unStigma: e.unStigma,
+            refCommandNo: e.refCommandNo,
+            refCommandDate:
+              e.refCommandDate == null ? null : new Date(e.refCommandDate),
+            date: new Date(e.date),
+            createdFullName: e.createdFullName,
+            createdAt: new Date(e.createdAt),
+          });
         });
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        loaderPage(false);
       });
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      loaderPage(false);
-    });
+  }
 };
 
 /**
@@ -701,28 +705,30 @@ const clickSave = async () => {
  * บันทึกเพิ่มข้อมูล
  */
 const saveData = async () => {
-  loaderPage(true);
-  await http
-    .post(config.API.profileDisId(profileId.value), {
-      id: id.value,
-      level: level.value,
-      detail: detail.value,
-      unStigma: unStigma.value,
-      refCommandNo: refCommandNo.value,
-      refCommandDate:
-        refCommandDate.value == null ? null : dateToISO(refCommandDate.value),
-      date: dateToISO(date.value),
-    })
-    .then((res) => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
-      modal.value = false;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await fetchData();
-    });
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .post(config.API.profileDisId(profileId.value), {
+        id: id.value,
+        level: level.value,
+        detail: detail.value,
+        unStigma: unStigma.value,
+        refCommandNo: refCommandNo.value,
+        refCommandDate:
+          refCommandDate.value == null ? null : dateToISO(refCommandDate.value),
+        date: dateToISO(date.value),
+      })
+      .then((res) => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        modal.value = false;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await fetchData();
+      });
+  }
 };
 
 /**
diff --git a/src/modules/04_registry/components/Document.vue b/src/modules/04_registry/components/Document.vue
index f539f31d9..4b6bfe21b 100644
--- a/src/modules/04_registry/components/Document.vue
+++ b/src/modules/04_registry/components/Document.vue
@@ -162,7 +162,9 @@ const $q = useQuasar(); // show dialog
 const mixin = useCounterMixin();
 const route = useRoute();
 const { success, messageError } = mixin;
-const profileId = ref<string>(route.params.id.toString());
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
 const edit = ref<boolean>(false);
 const uploader = ref<any>();
 const files = ref<any>([]);
@@ -174,19 +176,21 @@ onMounted(async () => {
 });
 
 const getData = async () => {
-  loaderPage(true);
-  await http
-    .get(config.API.profilePaperId(profileId.value))
-    .then((res) => {
-      const data = res.data.result;
-      files.value = data;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      loaderPage(false);
-    });
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .get(config.API.profilePaperId(profileId.value))
+      .then((res) => {
+        const data = res.data.result;
+        files.value = data;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        loaderPage(false);
+      });
+  }
 };
 
 const deleteData = async (id: string) => {
@@ -205,39 +209,41 @@ const deleteData = async (id: string) => {
 };
 
 const uploadData = async () => {
-  if (file.value.length > 0) {
-    const blob = file.value.slice(0, file.value[0].size);
-    const newFile = new File(blob, name.value, {
-      type: file.value[0].type,
-    });
-    const formData = new FormData();
-    formData.append("avatar", newFile);
-    formData.append("moss", "newFile");
-    console.log(formData);
-    loaderPage(true);
-    await http
-      .post(config.API.profilePaperId(profileId.value), formData)
-      .then((res) => {
-        const data = res.data.result;
-        success($q, "บันทึกข้อมูลสำเร็จ");
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(async () => {
-        uploader.value.reset();
-        name.value = "";
-        edit.value = false;
-        emit("update:statusEdit", false);
-        await getData();
+  if (profileId.value) {
+    if (file.value.length > 0) {
+      const blob = file.value.slice(0, file.value[0].size);
+      const newFile = new File(blob, name.value, {
+        type: file.value[0].type,
       });
-  } else {
-    // modalError(
-    //   $q,
-    //   "ไม่สามารถอัปโหลดไฟล์ได้",
-    //   "กรุณาเลือกไฟล์ที่ต้องการอัปโหลด"
-    // );
-    getData();
+      const formData = new FormData();
+      formData.append("avatar", newFile);
+      formData.append("moss", "newFile");
+      console.log(formData);
+      loaderPage(true);
+      await http
+        .post(config.API.profilePaperId(profileId.value), formData)
+        .then((res) => {
+          const data = res.data.result;
+          success($q, "บันทึกข้อมูลสำเร็จ");
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(async () => {
+          uploader.value.reset();
+          name.value = "";
+          edit.value = false;
+          emit("update:statusEdit", false);
+          await getData();
+        });
+    } else {
+      // modalError(
+      //   $q,
+      //   "ไม่สามารถอัปโหลดไฟล์ได้",
+      //   "กรุณาเลือกไฟล์ที่ต้องการอัปโหลด"
+      // );
+      getData();
+    }
   }
 };
 
diff --git a/src/modules/04_registry/components/Education.vue b/src/modules/04_registry/components/Education.vue
index ed081db6f..b5956d931 100644
--- a/src/modules/04_registry/components/Education.vue
+++ b/src/modules/04_registry/components/Education.vue
@@ -655,7 +655,9 @@ const tittleHistory = ref<string>("ประวัติแก้ไขประ
 const filterHistory = ref<string>(""); //search data table history
 const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
 const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
-const profileId = ref<string>(route.params.id.toString());
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
 const rows = ref<RequestItemsObject[]>([]);
 const filter = ref<string>(""); //search data table
 const visibleColumns = ref<String[]>([]);
@@ -1110,45 +1112,47 @@ const filterSelector = (val: any, update: Function, refData: string) => {
 };
 
 const fetchData = async () => {
-  loaderPage(true);
-  await http
-    .get(config.API.profileEduId(profileId.value))
-    .then((res) => {
-      let data = res.data.result;
-      rows.value = [];
-      data.map((e: ResponseObject) => {
-        rows.value.push({
-          id: e.id,
-          level: e.educationLevel,
-          levelId: e.educationLevelId,
-          positionPath: e.positionPath,
-          isEducation: e.isEducation,
-          institute: e.institute,
-          degree: e.degree,
-          field: e.field,
-          gpa: e.gpa,
-          country: e.country,
-          duration: e.duration,
-          durationYear: e.durationYear,
-          other: e.other,
-          fundName: e.fundName,
-          isDate: e.isDate.toString(),
-          finishDate: new Date(e.finishDate),
-          startDate: new Date(e.startDate).getFullYear(),
-          endDate: new Date(e.endDate).getFullYear(),
-          startDate2: new Date(e.startDate),
-          endDate2: new Date(e.endDate),
-          createdFullName: e.createdFullName,
-          createdAt: new Date(e.createdAt),
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .get(config.API.profileEduId(profileId.value))
+      .then((res) => {
+        let data = res.data.result;
+        rows.value = [];
+        data.map((e: ResponseObject) => {
+          rows.value.push({
+            id: e.id,
+            level: e.educationLevel,
+            levelId: e.educationLevelId,
+            positionPath: e.positionPath,
+            isEducation: e.isEducation,
+            institute: e.institute,
+            degree: e.degree,
+            field: e.field,
+            gpa: e.gpa,
+            country: e.country,
+            duration: e.duration,
+            durationYear: e.durationYear,
+            other: e.other,
+            fundName: e.fundName,
+            isDate: e.isDate.toString(),
+            finishDate: new Date(e.finishDate),
+            startDate: new Date(e.startDate).getFullYear(),
+            endDate: new Date(e.endDate).getFullYear(),
+            startDate2: new Date(e.startDate),
+            endDate2: new Date(e.endDate),
+            createdFullName: e.createdFullName,
+            createdAt: new Date(e.createdAt),
+          });
         });
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        loaderPage(false);
       });
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      loaderPage(false);
-    });
+  }
 };
 
 /**
@@ -1253,43 +1257,45 @@ const saveData = async () => {
   //   const filterPositionPath = OpsFilter.value.positionPathOptions.filter(
   //     (r: any) => r.id == isEducation.value
   //   );
-  loaderPage(true);
-  await http
-    .post(config.API.profileEduId(profileId.value), {
-      id: id.value,
-      //   educationLevel: filter[0].name,
-      educationLevelId: levelId.value,
-      isEducation: isEducation.value,
-      institute: institute.value,
-      degree: degree.value,
-      field: field.value,
-      gpa: gpa.value,
-      country: country.value,
-      duration: duration.value,
-      durationYear: durationYear.value,
-      other: other.value,
-      fundName: fundName.value,
-      isDate: isDate.value == "true" ? true : false,
-      finishDate: dateToISO(finishDate.value),
-      startDate:
-        isDate.value == "true"
-          ? dateToISO(startDate2.value)
-          : new Date(`${startDate.value}-01-01`),
-      endDate:
-        isDate.value == "true"
-          ? dateToISO(endDate2.value)
-          : new Date(`${endDate.value}-01-01`),
-    })
-    .then((res) => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
-      modal.value = false;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await fetchData();
-    });
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .post(config.API.profileEduId(profileId.value), {
+        id: id.value,
+        //   educationLevel: filter[0].name,
+        educationLevelId: levelId.value,
+        isEducation: isEducation.value,
+        institute: institute.value,
+        degree: degree.value,
+        field: field.value,
+        gpa: gpa.value,
+        country: country.value,
+        duration: duration.value,
+        durationYear: durationYear.value,
+        other: other.value,
+        fundName: fundName.value,
+        isDate: isDate.value == "true" ? true : false,
+        finishDate: dateToISO(finishDate.value),
+        startDate:
+          isDate.value == "true"
+            ? dateToISO(startDate2.value)
+            : new Date(`${startDate.value}-01-01`),
+        endDate:
+          isDate.value == "true"
+            ? dateToISO(endDate2.value)
+            : new Date(`${endDate.value}-01-01`),
+      })
+      .then((res) => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        modal.value = false;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await fetchData();
+      });
+  }
 };
 
 /**
diff --git a/src/modules/04_registry/components/Information/Address.vue b/src/modules/04_registry/components/Information/Address.vue
index 64f63ecf4..8b8ffbf67 100644
--- a/src/modules/04_registry/components/Information/Address.vue
+++ b/src/modules/04_registry/components/Information/Address.vue
@@ -5,11 +5,12 @@
       header="ข้อมูลที่อยู่"
       icon="mdi-map-marker"
       :save="saveData"
-      :history="true"
+      :history="!statusAdd()"
       :changeBtn="changeBtn"
       :disable="statusEdit"
       :cancel="refreshData"
       :historyClick="clickHistory"
+      :addEmployee="statusAdd()"
     />
     <q-form ref="myform">
       <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
@@ -311,6 +312,10 @@ const props = defineProps({
     type: Boolean,
     required: true,
   },
+  statusAdd: {
+    type: Boolean,
+    default: false,
+  },
 });
 const emit = defineEmits(["update:statusEdit"]);
 
@@ -507,8 +512,28 @@ const visibleColumnsHistory = ref<String[]>([
 onMounted(async () => {
   await getNewData();
   emit("update:statusEdit", false);
+  defaultAdd();
 });
 
+const statusAdd = () => props.statusAdd;
+
+const defaultAdd = () => {
+  if (props.statusAdd) {
+    edit.value = props.statusAdd;
+    addressData.value = {
+      address: null,
+      provinceId: null,
+      districtId: null,
+      subdistrictId: null,
+      addressC: null,
+      provinceIdC: null,
+      districtIdC: null,
+      subdistrictIdC: null,
+      same: "0",
+    };
+  }
+};
+
 const filterSelector = (val: any, update: Function, refData: string) => {
   switch (refData) {
     case "provinceOps":
@@ -606,27 +631,29 @@ const getNewData = async () => {
 };
 
 const fetchData = async () => {
-  loaderPage(true);
-  await http
-    .get(config.API.profileAdrsId(route.params.id.toString()))
-    .then((res) => {
-      const data: ResponseObject = res.data.result;
-      addressData.value.address = data.registrationAddress;
-      addressData.value.addressC = data.currentAddress;
-      addressData.value.districtId = data.registrationDistrictId;
-      addressData.value.districtIdC = data.currentDistrictId;
-      addressData.value.provinceId = data.registrationProvinceId;
-      addressData.value.provinceIdC = data.currentProvinceId;
-      addressData.value.subdistrictId = data.registrationSubDistrictId;
-      addressData.value.subdistrictIdC = data.currentSubDistrictId;
-      addressData.value.same = data.registrationSame ? "1" : "0";
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      loaderPage(false);
-    });
+  if (route.params.id) {
+    loaderPage(true);
+    await http
+      .get(config.API.profileAdrsId(route.params.id.toString()))
+      .then((res) => {
+        const data: ResponseObject = res.data.result;
+        addressData.value.address = data.registrationAddress;
+        addressData.value.addressC = data.currentAddress;
+        addressData.value.districtId = data.registrationDistrictId;
+        addressData.value.districtIdC = data.currentDistrictId;
+        addressData.value.provinceId = data.registrationProvinceId;
+        addressData.value.provinceIdC = data.currentProvinceId;
+        addressData.value.subdistrictId = data.registrationSubDistrictId;
+        addressData.value.subdistrictIdC = data.currentSubDistrictId;
+        addressData.value.same = data.registrationSame ? "1" : "0";
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        loaderPage(false);
+      });
+  }
 };
 
 const editData = async () => {
@@ -673,10 +700,32 @@ const editData = async () => {
     });
 };
 
+const addData = async () => {
+  //     loaderPage(true);
+  //   await http
+  //     .put(config.API.profileInforId(route.params.id.toString()), body)
+  //     .then((res) => {
+  //       success($q, "บันทึกข้อมูลสำเร็จ");
+  //     })
+  //     .catch((e) => {
+  //       messageError($q, e);
+  //     })
+  //     .finally(async () => {
+  //       edit.value = false;
+  //       emit("update:statusEdit", false);
+  //       await fetchData();
+  //       await changeBirth(informaData.value.birthDate ?? new Date());
+  //     });
+};
+
 const saveData = async () => {
   await myform.value.validate().then(async (success: boolean) => {
     if (success) {
-      await editData();
+      if (props.statusAdd) {
+        await addData();
+      } else {
+        await editData();
+      }
     } else {
     }
   });
diff --git a/src/modules/04_registry/components/Information/Certicate.vue b/src/modules/04_registry/components/Information/Certicate.vue
index 721bf17c0..d08e8c3b2 100644
--- a/src/modules/04_registry/components/Information/Certicate.vue
+++ b/src/modules/04_registry/components/Information/Certicate.vue
@@ -316,7 +316,9 @@ const tittleHistory = ref<string>("ประวัติแก้ไขใบอ
 const filterHistory = ref<string>(""); //search data table history
 const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
 const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
-const profileId = ref<string>(route.params.id.toString());
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
 const rows = ref<RequestItemsObject[]>([]);
 const filter = ref<string>(""); //search data table
 const visibleColumns = ref<String[]>([]);
@@ -484,31 +486,33 @@ onMounted(async () => {
 });
 
 const fetchData = async () => {
-  loaderPage(true);
-  await http
-    .get(config.API.profileCertId(profileId.value))
-    .then((res) => {
-      let data = res.data.result;
-      rows.value = [];
-      data.map((e: ResponseObject) => {
-        rows.value.push({
-          id: e.id,
-          certificateNo: e.certificateNo,
-          issuer: e.issuer,
-          issueDate: new Date(e.issueDate),
-          expireDate: new Date(e.expireDate),
-          certificateType: e.certificateType,
-          createdFullName: e.createdFullName,
-          createdAt: new Date(e.createdAt),
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .get(config.API.profileCertId(profileId.value))
+      .then((res) => {
+        let data = res.data.result;
+        rows.value = [];
+        data.map((e: ResponseObject) => {
+          rows.value.push({
+            id: e.id,
+            certificateNo: e.certificateNo,
+            issuer: e.issuer,
+            issueDate: new Date(e.issueDate),
+            expireDate: new Date(e.expireDate),
+            certificateType: e.certificateType,
+            createdFullName: e.createdFullName,
+            createdAt: new Date(e.createdAt),
+          });
         });
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        loaderPage(false);
       });
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      loaderPage(false);
-    });
+  }
 };
 
 /**
diff --git a/src/modules/04_registry/components/Information/Family.vue b/src/modules/04_registry/components/Information/Family.vue
index 6c49531e0..8b9eaf90c 100644
--- a/src/modules/04_registry/components/Information/Family.vue
+++ b/src/modules/04_registry/components/Information/Family.vue
@@ -5,11 +5,12 @@
       header="ข้อมูลครอบครัว"
       icon="mdi-account-group"
       :save="saveData"
-      :history="true"
+      :history="!statusAdd()"
       :changeBtn="changeBtn"
       :disable="statusEdit"
       :cancel="refreshData"
       :historyClick="historyData"
+      :addEmployee="statusAdd()"
     />
     <q-form ref="myform" class="col-12">
       <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
@@ -1114,6 +1115,10 @@ const props = defineProps({
     type: Function,
     default: () => console.log("not function"),
   },
+  statusAdd: {
+    type: Boolean,
+    default: false,
+  },
 });
 const emit = defineEmits(["update:statusEdit"]);
 
@@ -1171,8 +1176,43 @@ onMounted(async () => {
   await fetchPrefix();
   await fetchData();
   emit("update:statusEdit", false);
+  defaultAdd();
 });
 
+const statusAdd = () => props.statusAdd;
+
+const defaultAdd = () => {
+  if (props.statusAdd) {
+    edit.value = props.statusAdd;
+    familyData.value = {
+      prefixC: null,
+      prefixIdC: null,
+      firstnameC: null,
+      lastnameC: null,
+      lastnameCOld: null,
+      occupationC: null,
+      citizenIdC: null,
+      liveC: null,
+      prefixM: null,
+      prefixIdM: null,
+      firstnameM: null,
+      lastnameM: null,
+      occupationM: null,
+      citizenIdM: null,
+      liveM: null,
+      prefixF: null,
+      prefixIdF: null,
+      firstnameF: null,
+      lastnameF: null,
+      occupationF: null,
+      citizenIdF: null,
+      liveF: null,
+      same: "0",
+      childrens: [],
+    };
+  }
+};
+
 const historyData = async () => {
   await fetchHistory();
 };
@@ -1299,61 +1339,63 @@ const fetchHistory = async () => {
 };
 
 const fetchData = async () => {
-  loaderPage(true);
-  await http
-    .get(config.API.profileFamiId(route.params.id.toString()))
-    .then((res) => {
-      const data: ResponseObject = res.data.result;
-      familyData.value.prefixC = "";
-      familyData.value.prefixIdC = data.couplePrefixId;
-      familyData.value.firstnameC = data.coupleFirstName;
-      familyData.value.lastnameC = data.coupleLastName;
-      familyData.value.lastnameCOld = data.coupleLastNameOld;
-      familyData.value.occupationC = data.coupleCareer;
-      familyData.value.liveC = data.coupleLive ? "1" : "0";
-      familyData.value.citizenIdC = data.coupleCitizenId;
+  if (route.params.id) {
+    loaderPage(true);
+    await http
+      .get(config.API.profileFamiId(route.params.id.toString()))
+      .then((res) => {
+        const data: ResponseObject = res.data.result;
+        familyData.value.prefixC = "";
+        familyData.value.prefixIdC = data.couplePrefixId;
+        familyData.value.firstnameC = data.coupleFirstName;
+        familyData.value.lastnameC = data.coupleLastName;
+        familyData.value.lastnameCOld = data.coupleLastNameOld;
+        familyData.value.occupationC = data.coupleCareer;
+        familyData.value.liveC = data.coupleLive ? "1" : "0";
+        familyData.value.citizenIdC = data.coupleCitizenId;
 
-      familyData.value.prefixM = "";
-      familyData.value.prefixIdM = data.fatherPrefixId;
-      familyData.value.firstnameM = data.fatherFirstName;
-      familyData.value.lastnameM = data.fatherLastName;
-      familyData.value.occupationM = data.fatherCareer;
-      familyData.value.liveM = data.fatherLive ? "1" : "0";
-      familyData.value.citizenIdM = data.fatherCitizenId;
+        familyData.value.prefixM = "";
+        familyData.value.prefixIdM = data.fatherPrefixId;
+        familyData.value.firstnameM = data.fatherFirstName;
+        familyData.value.lastnameM = data.fatherLastName;
+        familyData.value.occupationM = data.fatherCareer;
+        familyData.value.liveM = data.fatherLive ? "1" : "0";
+        familyData.value.citizenIdM = data.fatherCitizenId;
 
-      familyData.value.prefixF = "";
-      familyData.value.prefixIdF = data.motherPrefixId;
-      familyData.value.firstnameF = data.motherFirstName;
-      familyData.value.lastnameF = data.motherLastName;
-      familyData.value.occupationF = data.motherCareer;
-      familyData.value.liveF = data.motherLive ? "1" : "0";
-      familyData.value.citizenIdF = data.motherCitizenId;
-      familyData.value.same = data.couple ? "1" : "0";
+        familyData.value.prefixF = "";
+        familyData.value.prefixIdF = data.motherPrefixId;
+        familyData.value.firstnameF = data.motherFirstName;
+        familyData.value.lastnameF = data.motherLastName;
+        familyData.value.occupationF = data.motherCareer;
+        familyData.value.liveF = data.motherLive ? "1" : "0";
+        familyData.value.citizenIdF = data.motherCitizenId;
+        familyData.value.same = data.couple ? "1" : "0";
 
-      if (data.childrens.length > 0) {
-        let dataChild: childrenFamily[] = [];
-        data.childrens.map((row: childrenFamily, index: number) => {
-          dataChild.push({
-            id: `${index + 1}`,
-            childrenPrefixId: row.childrenPrefixId,
-            childrenFirstName: row.childrenFirstName,
-            childrenLastName: row.childrenLastName,
-            childrenCareer: row.childrenCareer,
-            childrenLive: row.childrenLive,
-            childrenCitizenId: row.childrenCitizenId,
+        if (data.childrens.length > 0) {
+          let dataChild: childrenFamily[] = [];
+          data.childrens.map((row: childrenFamily, index: number) => {
+            dataChild.push({
+              id: `${index + 1}`,
+              childrenPrefixId: row.childrenPrefixId,
+              childrenFirstName: row.childrenFirstName,
+              childrenLastName: row.childrenLastName,
+              childrenCareer: row.childrenCareer,
+              childrenLive: row.childrenLive,
+              childrenCitizenId: row.childrenCitizenId,
+            });
           });
-        });
-        familyData.value.childrens = dataChild;
-      } else {
-        familyData.value.childrens = [];
-      }
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      loaderPage(false);
-    });
+          familyData.value.childrens = dataChild;
+        } else {
+          familyData.value.childrens = [];
+        }
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        loaderPage(false);
+      });
+  }
 };
 
 const editData = async () => {
@@ -1398,10 +1440,32 @@ const editData = async () => {
     });
 };
 
+const addData = async () => {
+  //     loaderPage(true);
+  //   await http
+  //     .put(config.API.profileInforId(route.params.id.toString()), body)
+  //     .then((res) => {
+  //       success($q, "บันทึกข้อมูลสำเร็จ");
+  //     })
+  //     .catch((e) => {
+  //       messageError($q, e);
+  //     })
+  //     .finally(async () => {
+  //       edit.value = false;
+  //       emit("update:statusEdit", false);
+  //       await fetchData();
+  //       await changeBirth(informaData.value.birthDate ?? new Date());
+  //     });
+};
+
 const saveData = async () => {
   await myform.value?.validate().then(async (success: boolean) => {
     if (success) {
-      await editData();
+      if (props.statusAdd) {
+        await addData();
+      } else {
+        await editData();
+      }
     } else {
     }
   });
diff --git a/src/modules/04_registry/components/Information/Information.vue b/src/modules/04_registry/components/Information/Information.vue
index ad6287718..ec7a1440b 100644
--- a/src/modules/04_registry/components/Information/Information.vue
+++ b/src/modules/04_registry/components/Information/Information.vue
@@ -5,11 +5,12 @@
       header="ข้อมูลส่วนตัว"
       icon="mdi-account"
       :save="saveData"
-      :history="true"
+      :history="!statusAdd()"
       :changeBtn="changeBtn"
       :disable="statusEdit"
       :cancel="onCancel"
       :historyClick="clickHistory"
+      :addEmployee="statusAdd()"
     />
     <q-form ref="myform" class="col-12">
       <div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-sm">
@@ -439,6 +440,10 @@ const props = defineProps({
     type: Function,
     default: () => console.log("not function"),
   },
+  statusAdd: {
+    type: Boolean,
+    default: false,
+  },
 });
 const emit = defineEmits(["update:statusEdit"]);
 
@@ -693,8 +698,36 @@ onMounted(async () => {
   await fetchPerson();
   await fetchData();
   emit("update:statusEdit", false);
+  defaultAdd();
 });
 
+const statusAdd = () => props.statusAdd;
+
+const defaultAdd = () => {
+  if (props.statusAdd) {
+    edit.value = props.statusAdd;
+    informaData.value = {
+      cardid: null,
+      age: null,
+      prefix: null,
+      prefixId: null,
+      firstname: null,
+      lastname: null,
+      birthDate: new Date(),
+      genderId: null,
+      bloodId: null,
+      nationality: null,
+      ethnicity: null,
+      statusId: null,
+      religionId: null,
+      tel: null,
+      employeeType: null,
+      employeeClass: null,
+      profileType: null,
+    };
+  }
+};
+
 const onCancel = async () => {
   if (myform.value != null) {
     myform.value.reset();
@@ -962,44 +995,49 @@ const calRetire = async (birth: Date) => {
 };
 
 const fetchData = async () => {
-  loaderPage(true);
-  await http
-    .get(config.API.profileInforId(route.params.id.toString()))
-    .then(async (res: any) => {
-      const data: ResponseObject = res.data.result;
-      defaultCitizenData.value = data.citizenId;
-      informaData.value.cardid = data.citizenId;
-      informaData.value.prefix = "";
-      informaData.value.prefixId = data.prefixId;
-      informaData.value.firstname = data.firstName;
-      informaData.value.lastname = data.lastName;
-      informaData.value.birthDate = new Date(data.birthDate);
-      informaData.value.genderId = data.genderId;
-      informaData.value.bloodId = data.bloodGroupId;
-      informaData.value.nationality = data.nationality;
-      informaData.value.ethnicity = data.race;
-      informaData.value.statusId = data.relationshipId;
-      informaData.value.religionId = data.religionId;
-      informaData.value.tel = data.telephoneNumber;
-      informaData.value.age = data.age;
-      informaData.value.employeeType = data.employeeType;
-      informaData.value.employeeClass = data.employeeClass;
-      informaData.value.profileType = data.profileType;
-      dateBefore.value = new Date(data.birthDate);
-      same.value = data.changeName == true ? "1" : "0";
-      await calRetire(new Date(dateToISO(new Date(data.birthDate))));
-      if (data.profileType == "officer" && columnsHistory.value.length >= 15) {
-        columnsHistory.value.splice(13, 1);
-        columnsHistory.value.splice(12, 1);
-      }
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      //   loaderPage(false);
-      await props.fetchDataProfile();
-    });
+  if (route.params.id) {
+    loaderPage(true);
+    await http
+      .get(config.API.profileInforId(route.params.id.toString()))
+      .then(async (res: any) => {
+        const data: ResponseObject = res.data.result;
+        defaultCitizenData.value = data.citizenId;
+        informaData.value.cardid = data.citizenId;
+        informaData.value.prefix = "";
+        informaData.value.prefixId = data.prefixId;
+        informaData.value.firstname = data.firstName;
+        informaData.value.lastname = data.lastName;
+        informaData.value.birthDate = new Date(data.birthDate);
+        informaData.value.genderId = data.genderId;
+        informaData.value.bloodId = data.bloodGroupId;
+        informaData.value.nationality = data.nationality;
+        informaData.value.ethnicity = data.race;
+        informaData.value.statusId = data.relationshipId;
+        informaData.value.religionId = data.religionId;
+        informaData.value.tel = data.telephoneNumber;
+        informaData.value.age = data.age;
+        informaData.value.employeeType = data.employeeType;
+        informaData.value.employeeClass = data.employeeClass;
+        informaData.value.profileType = data.profileType;
+        dateBefore.value = new Date(data.birthDate);
+        same.value = data.changeName == true ? "1" : "0";
+        await calRetire(new Date(dateToISO(new Date(data.birthDate))));
+        if (
+          data.profileType == "officer" &&
+          columnsHistory.value.length >= 15
+        ) {
+          columnsHistory.value.splice(13, 1);
+          columnsHistory.value.splice(12, 1);
+        }
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        //   loaderPage(false);
+        await props.fetchDataProfile();
+      });
+  }
 };
 
 const editData = async () => {
@@ -1040,11 +1078,33 @@ const editData = async () => {
     });
 };
 
+const addData = async () => {
+  //     loaderPage(true);
+  //   await http
+  //     .put(config.API.profileInforId(route.params.id.toString()), body)
+  //     .then((res) => {
+  //       success($q, "บันทึกข้อมูลสำเร็จ");
+  //     })
+  //     .catch((e) => {
+  //       messageError($q, e);
+  //     })
+  //     .finally(async () => {
+  //       edit.value = false;
+  //       emit("update:statusEdit", false);
+  //       await fetchData();
+  //       await changeBirth(informaData.value.birthDate ?? new Date());
+  //     });
+};
+
 const saveData = async () => {
   if (myform.value != null) {
     await myform.value.validate().then(async (success: boolean) => {
       if (success) {
-        await editData();
+        if (props.statusAdd) {
+          await addData();
+        } else {
+          await editData();
+        }
       } else {
       }
     });
diff --git a/src/modules/04_registry/components/Information/top.vue b/src/modules/04_registry/components/Information/top.vue
index 2a8221cf9..416a8f049 100644
--- a/src/modules/04_registry/components/Information/top.vue
+++ b/src/modules/04_registry/components/Information/top.vue
@@ -43,7 +43,7 @@
         size="12px"
         flat
         round
-        v-if="edit"
+        v-if="edit && !addEmployee"
         :color="!edit ? 'grey-7' : 'red'"
         @click="ClickCancel"
         icon="mdi-undo"
@@ -157,6 +157,10 @@ const props = defineProps({
     type: Function,
     default: () => console.log("not function"),
   },
+  addEmployee: {
+    type: Boolean,
+    defualt: false,
+  },
 });
 
 const emit = defineEmits(["update:edit"]);
diff --git a/src/modules/04_registry/components/Insignia.vue b/src/modules/04_registry/components/Insignia.vue
index b3ebf22ec..fb97d8513 100644
--- a/src/modules/04_registry/components/Insignia.vue
+++ b/src/modules/04_registry/components/Insignia.vue
@@ -527,7 +527,9 @@ const tittleHistory = ref<string>("ประวัติแก้ไขเคร
 const filterHistory = ref<string>(""); //search data table history
 const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
 const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
-const profileId = ref<string>(route.params.id.toString());
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
 const rows = ref<RequestItemsObject[]>([]);
 const filter = ref<string>(""); //search data table
 const visibleColumns = ref<String[]>([]);
@@ -937,41 +939,43 @@ const fetchInsignia = async () => {
 };
 
 const fetchData = async () => {
-  loaderPage(true);
-  await http
-    .get(config.API.profileInsignId(profileId.value))
-    .then((res) => {
-      let data = res.data.result;
-      rows.value = [];
-      data.map((e: ResponseObject) => {
-        rows.value.push({
-          id: e.id,
-          insignia: e.insignia,
-          insigniaId: e.insigniaId,
-          insigniaType: e.insigniaType,
-          year: e.year,
-          no: e.no,
-          issue: e.issue,
-          volumeNo: e.volumeNo,
-          volume: e.volume,
-          section: e.section,
-          page: e.page,
-          receiveDate: new Date(e.receiveDate),
-          dateAnnounce: new Date(e.dateAnnounce),
-          refCommandNo: e.refCommandNo,
-          refCommandDate:
-            e.refCommandDate == null ? null : new Date(e.refCommandDate),
-          createdFullName: e.createdFullName,
-          createdAt: new Date(e.createdAt),
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .get(config.API.profileInsignId(profileId.value))
+      .then((res) => {
+        let data = res.data.result;
+        rows.value = [];
+        data.map((e: ResponseObject) => {
+          rows.value.push({
+            id: e.id,
+            insignia: e.insignia,
+            insigniaId: e.insigniaId,
+            insigniaType: e.insigniaType,
+            year: e.year,
+            no: e.no,
+            issue: e.issue,
+            volumeNo: e.volumeNo,
+            volume: e.volume,
+            section: e.section,
+            page: e.page,
+            receiveDate: new Date(e.receiveDate),
+            dateAnnounce: new Date(e.dateAnnounce),
+            refCommandNo: e.refCommandNo,
+            refCommandDate:
+              e.refCommandDate == null ? null : new Date(e.refCommandDate),
+            createdFullName: e.createdFullName,
+            createdAt: new Date(e.createdAt),
+          });
         });
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        loaderPage(false);
       });
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      loaderPage(false);
-    });
+  }
 };
 
 /**
@@ -1066,35 +1070,37 @@ const clickSave = async () => {
  * บันทึกเพิ่มข้อมูล
  */
 const saveData = async () => {
-  loaderPage(true);
-  await http
-    .post(config.API.profileInsignId(profileId.value), {
-      id: id.value,
-      insigniaId: insigniaId.value,
-      insigniaType: insigniaType.value,
-      year: year.value,
-      no: no.value,
-      issue: issue.value,
-      volumeNo: volumeNo.value,
-      volume: volume.value,
-      section: section.value,
-      page: page.value,
-      receiveDate: dateToISO(receiveDate.value),
-      dateAnnounce: dateToISO(dateAnnounce.value),
-      refCommandNo: refCommandNo.value,
-      refCommandDate:
-        refCommandDate.value == null ? null : dateToISO(refCommandDate.value),
-    })
-    .then((res) => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
-      modal.value = false;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await fetchData();
-    });
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .post(config.API.profileInsignId(profileId.value), {
+        id: id.value,
+        insigniaId: insigniaId.value,
+        insigniaType: insigniaType.value,
+        year: year.value,
+        no: no.value,
+        issue: issue.value,
+        volumeNo: volumeNo.value,
+        volume: volume.value,
+        section: section.value,
+        page: page.value,
+        receiveDate: dateToISO(receiveDate.value),
+        dateAnnounce: dateToISO(dateAnnounce.value),
+        refCommandNo: refCommandNo.value,
+        refCommandDate:
+          refCommandDate.value == null ? null : dateToISO(refCommandDate.value),
+      })
+      .then((res) => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        modal.value = false;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await fetchData();
+      });
+  }
 };
 
 /**
diff --git a/src/modules/04_registry/components/Leave.vue b/src/modules/04_registry/components/Leave.vue
index fc4d1ae29..1c3ecf5fe 100644
--- a/src/modules/04_registry/components/Leave.vue
+++ b/src/modules/04_registry/components/Leave.vue
@@ -444,7 +444,9 @@ const tittleHistory = ref<string>("ประวัติแก้ไขการ
 const filterHistory = ref<string>(""); //search data table history
 const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
 const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
-const profileId = ref<string>(route.params.id.toString());
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
 const rows = ref<RequestItemsObject[]>([]);
 const filterTotal = ref<string>("");
 const rowsTotal = ref<RequestItemsTotalObject[]>([]); //select data history
@@ -715,33 +717,35 @@ onMounted(async () => {
 
 const fetchData = async () => {
   rows.value = [];
-  loaderPage(true);
-  await http
-    .get(config.API.profileLeaveId(profileId.value))
-    .then((res) => {
-      const data = res.data.result;
-      //   console.log(data);
-      data.map((e: ResponseObject) => {
-        rows.value.push({
-          id: e.id,
-          typeLeave: e.typeLeave,
-          dateStartLeave: new Date(e.dateStartLeave),
-          dateEndLeave: new Date(e.dateEndLeave),
-          numLeave: e.numLeave,
-          sumLeave: e.sumLeave,
-          totalLeave: e.totalLeave,
-          status: e.status,
-          reason: e.reason,
-          typeLeaveId: e.typeLeaveId,
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .get(config.API.profileLeaveId(profileId.value))
+      .then((res) => {
+        const data = res.data.result;
+        //   console.log(data);
+        data.map((e: ResponseObject) => {
+          rows.value.push({
+            id: e.id,
+            typeLeave: e.typeLeave,
+            dateStartLeave: new Date(e.dateStartLeave),
+            dateEndLeave: new Date(e.dateEndLeave),
+            numLeave: e.numLeave,
+            sumLeave: e.sumLeave,
+            totalLeave: e.totalLeave,
+            status: e.status,
+            reason: e.reason,
+            typeLeaveId: e.typeLeaveId,
+          });
         });
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        loaderPage(false);
       });
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      loaderPage(false);
-    });
+  }
 };
 
 const filterSelector = (val: any, update: Function, filtername: string) => {
@@ -964,28 +968,30 @@ const clickSave = async () => {
 const saveData = async () => {
   const sum = Number(numLeave.value) + Number(numUsedLeave.value);
 
-  loaderPage(true);
-  await http
-    .post(config.API.profileLeaveId(profileId.value), {
-      dateStartLeave: dateToISO(dateRange.value[0]),
-      dateEndLeave: dateToISO(dateRange.value[1]),
-      numLeave: numLeave.value,
-      sumLeave: numUsedLeave.value,
-      totalLeave: sum,
-      status: statLeave.value,
-      reason: reason.value,
-      typeLeaveId: typeLeave.value,
-    })
-    .then((res) => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
-      modalAdd.value = false;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await fetchData();
-    });
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .post(config.API.profileLeaveId(profileId.value), {
+        dateStartLeave: dateToISO(dateRange.value[0]),
+        dateEndLeave: dateToISO(dateRange.value[1]),
+        numLeave: numLeave.value,
+        sumLeave: numUsedLeave.value,
+        totalLeave: sum,
+        status: statLeave.value,
+        reason: reason.value,
+        typeLeaveId: typeLeave.value,
+      })
+      .then((res) => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        modalAdd.value = false;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await fetchData();
+      });
+  }
 };
 
 // /**
@@ -1185,27 +1191,29 @@ const addData = async () => {
  */
 const clickTotal = async () => {
   rowsTotal.value = [];
-  loaderPage(true);
-  await http
-    .get(config.API.profileLeaveTotalId(profileId.value))
-    .then((res) => {
-      let data = res.data.result;
-      data.map((e: ResponseTotalObject) => {
-        rowsTotal.value.push({
-          typeLeaveId: e.typeLeaveId,
-          totalLeave: e.totalLeave,
-          limitLeave: e.limitLeave,
-          remainLeave: e.remainLeave,
-          typeLeave: e.typeLeave,
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .get(config.API.profileLeaveTotalId(profileId.value))
+      .then((res) => {
+        let data = res.data.result;
+        data.map((e: ResponseTotalObject) => {
+          rowsTotal.value.push({
+            typeLeaveId: e.typeLeaveId,
+            totalLeave: e.totalLeave,
+            limitLeave: e.limitLeave,
+            remainLeave: e.remainLeave,
+            typeLeave: e.typeLeave,
+          });
         });
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        loaderPage(false);
       });
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      loaderPage(false);
-    });
+  }
 };
 
 // /**
diff --git a/src/modules/04_registry/components/Other.vue b/src/modules/04_registry/components/Other.vue
index 9dd6f1094..715ce6256 100644
--- a/src/modules/04_registry/components/Other.vue
+++ b/src/modules/04_registry/components/Other.vue
@@ -213,7 +213,9 @@ const tittleHistory = ref<string>("ประวัติแก้ไขอื่
 const filterHistory = ref<string>(""); //search data table history
 const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
 const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
-const profileId = ref<string>(route.params.id.toString());
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
 const rows = ref<RequestItemsObject[]>([]);
 const filter = ref<string>(""); //search data table
 const visibleColumns = ref<String[]>([]);
@@ -302,28 +304,30 @@ onMounted(async () => {
 });
 
 const fetchData = async () => {
-  loaderPage(true);
-  await http
-    .get(config.API.profileOtherId(profileId.value))
-    .then((res) => {
-      let data = res.data.result;
-      rows.value = [];
-      data.map((e: ResponseObject) => {
-        rows.value.push({
-          id: e.id,
-          date: new Date(e.date),
-          detail: e.detail,
-          createdFullName: e.createdFullName,
-          createdAt: new Date(e.createdAt),
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .get(config.API.profileOtherId(profileId.value))
+      .then((res) => {
+        let data = res.data.result;
+        rows.value = [];
+        data.map((e: ResponseObject) => {
+          rows.value.push({
+            id: e.id,
+            date: new Date(e.date),
+            detail: e.detail,
+            createdFullName: e.createdFullName,
+            createdAt: new Date(e.createdAt),
+          });
         });
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        loaderPage(false);
       });
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      loaderPage(false);
-    });
+  }
 };
 
 /**
@@ -407,23 +411,25 @@ const clickSave = async () => {
  * บันทึกเพิ่มข้อมูล
  */
 const saveData = async () => {
-  loaderPage(true);
-  await http
-    .post(config.API.profileOtherId(profileId.value), {
-      id: id.value,
-      date: date.value,
-      detail: detail.value,
-    })
-    .then((res) => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
-      modal.value = false;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await fetchData();
-    });
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .post(config.API.profileOtherId(profileId.value), {
+        id: id.value,
+        date: date.value,
+        detail: detail.value,
+      })
+      .then((res) => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        modal.value = false;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await fetchData();
+      });
+  }
 };
 
 /**
diff --git a/src/modules/04_registry/components/Record.vue b/src/modules/04_registry/components/Record.vue
index 4eac4635c..a32e0f07f 100644
--- a/src/modules/04_registry/components/Record.vue
+++ b/src/modules/04_registry/components/Record.vue
@@ -309,7 +309,9 @@ const tittleHistory = ref<string>(
 );
 const filterHistory = ref<string>(""); //search data table history
 const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
-const profileId = ref<string>(route.params.id.toString());
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
 const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
 const rows = ref<RequestItemsObject[]>([]);
 const filter = ref<string>(""); //search data table
@@ -478,32 +480,34 @@ onMounted(async () => {
 });
 
 const fetchData = async () => {
-  loaderPage(true);
-  await http
-    .get(config.API.profileNopaidId(profileId.value))
-    .then((res) => {
-      let data = res.data.result;
-      rows.value = [];
-      data.map((e: ResponseObject) => {
-        rows.value.push({
-          id: e.id,
-          date: new Date(e.date),
-          detail: e.detail,
-          reference: e.reference,
-          refCommandNo: e.refCommandNo,
-          refCommandDate:
-            e.refCommandDate == null ? null : new Date(e.refCommandDate),
-          createdFullName: e.createdFullName,
-          createdAt: new Date(e.createdAt),
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .get(config.API.profileNopaidId(profileId.value))
+      .then((res) => {
+        let data = res.data.result;
+        rows.value = [];
+        data.map((e: ResponseObject) => {
+          rows.value.push({
+            id: e.id,
+            date: new Date(e.date),
+            detail: e.detail,
+            reference: e.reference,
+            refCommandNo: e.refCommandNo,
+            refCommandDate:
+              e.refCommandDate == null ? null : new Date(e.refCommandDate),
+            createdFullName: e.createdFullName,
+            createdAt: new Date(e.createdAt),
+          });
         });
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        loaderPage(false);
       });
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      loaderPage(false);
-    });
+  }
 };
 
 /**
@@ -590,27 +594,29 @@ const clickSave = async () => {
  * บันทึกเพิ่มข้อมูล
  */
 const saveData = async () => {
-  loaderPage(true);
-  await http
-    .post(config.API.profileNopaidId(profileId.value), {
-      id: id.value,
-      date: dateToISO(date.value),
-      detail: detail.value,
-      reference: reference.value,
-      refCommandNo: refCommandNo.value,
-      refCommandDate:
-        refCommandDate.value == null ? null : dateToISO(refCommandDate.value),
-    })
-    .then((res) => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
-      modal.value = false;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await fetchData();
-    });
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .post(config.API.profileNopaidId(profileId.value), {
+        id: id.value,
+        date: dateToISO(date.value),
+        detail: detail.value,
+        reference: reference.value,
+        refCommandNo: refCommandNo.value,
+        refCommandDate:
+          refCommandDate.value == null ? null : dateToISO(refCommandDate.value),
+      })
+      .then((res) => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        modal.value = false;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await fetchData();
+      });
+  }
 };
 
 /**
diff --git a/src/modules/04_registry/components/Salary.vue b/src/modules/04_registry/components/Salary.vue
index e1e324155..1f2a9c562 100644
--- a/src/modules/04_registry/components/Salary.vue
+++ b/src/modules/04_registry/components/Salary.vue
@@ -909,7 +909,9 @@ const tittleHistory = ref<string>("ประวัติแก้ไขตำแ
 const filterHistory = ref<string>(""); //search data table history
 const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
 const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
-const profileId = ref<string>(route.params.id.toString());
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
 const rows = ref<RequestItemsObject[]>([]);
 const filter = ref<string>(""); //search data table
 const visibleColumns = ref<String[]>([]);
@@ -1512,51 +1514,53 @@ const fetchPosition = async () => {
 };
 
 const fetchData = async () => {
-  loaderPage(true);
-  await http
-    .get(config.API.profileSalaryId(profileId.value))
-    .then((res) => {
-      let data = res.data.result;
-      rows.value = [];
-      data.map((e: ResponseObject) => {
-        rows.value.push({
-          id: e.id,
-          date: new Date(e.date),
-          amount: e.amount,
-          positionSalaryAmount: e.positionSalaryAmount,
-          mouthSalaryAmount: e.mouthSalaryAmount,
-          oc: e.oc,
-          ocId: e.ocId,
-          position: e.position,
-          positionId: e.positionId,
-          posNo: e.posNo,
-          posNoId: e.posNoId,
-          positionLine: e.positionLine,
-          positionLineId: e.positionLineId,
-          positionPathSide: e.positionPathSide,
-          positionPathSideId: e.positionPathSideId,
-          positionType: e.positionType,
-          positionTypeId: e.positionTypeId,
-          positionLevel: e.positionLevel,
-          positionLevelId: e.positionLevelId,
-          positionExecutive: e.positionExecutive,
-          positionExecutiveId: e.positionExecutiveId,
-          positionExecutiveSide: e.positionExecutiveSide,
-          positionExecutiveSideId: e.positionExecutiveSideId,
-          salaryClass: e.salaryClass,
-          salaryRef: e.salaryRef,
-          refCommandNo: e.refCommandNo,
-          createdFullName: e.createdFullName,
-          createdAt: new Date(e.createdAt),
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .get(config.API.profileSalaryId(profileId.value))
+      .then((res) => {
+        let data = res.data.result;
+        rows.value = [];
+        data.map((e: ResponseObject) => {
+          rows.value.push({
+            id: e.id,
+            date: new Date(e.date),
+            amount: e.amount,
+            positionSalaryAmount: e.positionSalaryAmount,
+            mouthSalaryAmount: e.mouthSalaryAmount,
+            oc: e.oc,
+            ocId: e.ocId,
+            position: e.position,
+            positionId: e.positionId,
+            posNo: e.posNo,
+            posNoId: e.posNoId,
+            positionLine: e.positionLine,
+            positionLineId: e.positionLineId,
+            positionPathSide: e.positionPathSide,
+            positionPathSideId: e.positionPathSideId,
+            positionType: e.positionType,
+            positionTypeId: e.positionTypeId,
+            positionLevel: e.positionLevel,
+            positionLevelId: e.positionLevelId,
+            positionExecutive: e.positionExecutive,
+            positionExecutiveId: e.positionExecutiveId,
+            positionExecutiveSide: e.positionExecutiveSide,
+            positionExecutiveSideId: e.positionExecutiveSideId,
+            salaryClass: e.salaryClass,
+            salaryRef: e.salaryRef,
+            refCommandNo: e.refCommandNo,
+            createdFullName: e.createdFullName,
+            createdAt: new Date(e.createdAt),
+          });
         });
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        loaderPage(false);
       });
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      loaderPage(false);
-    });
+  }
 };
 
 const onSelected = async (id: string) => {
@@ -1762,36 +1766,38 @@ const clickSave = async () => {
  * บันทึกเพิ่มข้อมูล
  */
 const saveData = async () => {
-  loaderPage(true);
-  await http
-    .post(config.API.profileSalaryId(profileId.value), {
-      date: dateToISO(date.value),
-      amount: amount.value,
-      positionSalaryAmount: positionSalaryAmount.value,
-      mouthSalaryAmount: mouthSalaryAmount.value,
-      ocId: selected.value,
-      positionId: positionId.value,
-      posNoId: posNoId.value,
-      positionLineId: positionLineId.value,
-      positionPathSideId: positionPathSideId.value,
-      positionTypeId: positionTypeId.value,
-      positionLevelId: positionLevelId.value,
-      positionExecutiveId: positionExecutiveId.value,
-      positionExecutiveSideId: positionExecutiveSideId.value,
-      salaryClass: salaryClass.value,
-      salaryRef: salaryRef.value,
-      refCommandNo: refCommandNo.value,
-    })
-    .then((res) => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
-      modal.value = false;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await fetchData();
-    });
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .post(config.API.profileSalaryId(profileId.value), {
+        date: dateToISO(date.value),
+        amount: amount.value,
+        positionSalaryAmount: positionSalaryAmount.value,
+        mouthSalaryAmount: mouthSalaryAmount.value,
+        ocId: selected.value,
+        positionId: positionId.value,
+        posNoId: posNoId.value,
+        positionLineId: positionLineId.value,
+        positionPathSideId: positionPathSideId.value,
+        positionTypeId: positionTypeId.value,
+        positionLevelId: positionLevelId.value,
+        positionExecutiveId: positionExecutiveId.value,
+        positionExecutiveSideId: positionExecutiveSideId.value,
+        salaryClass: salaryClass.value,
+        salaryRef: salaryRef.value,
+        refCommandNo: refCommandNo.value,
+      })
+      .then((res) => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        modal.value = false;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await fetchData();
+      });
+  }
 };
 
 /**
diff --git a/src/modules/04_registry/components/SalaryEmployee.vue b/src/modules/04_registry/components/SalaryEmployee.vue
index f85c2e02a..b38af4d3d 100644
--- a/src/modules/04_registry/components/SalaryEmployee.vue
+++ b/src/modules/04_registry/components/SalaryEmployee.vue
@@ -918,7 +918,9 @@ const tittleHistory = ref<string>("ประวัติแก้ไขตำแ
 const filterHistory = ref<string>(""); //search data table history
 const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
 const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
-const profileId = ref<string>(route.params.id.toString());
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
 const rows = ref<ResponseObjectEmployee[]>([]);
 const filter = ref<string>(""); //search data table
 const visibleColumns = ref<String[]>([]);
@@ -1466,48 +1468,50 @@ const filterSelector = (val: any, update: Function, filtername: string) => {
 };
 
 const fetchData = async () => {
-  loaderPage(true);
-  await http
-    .get(config.API.profileSalaryEmployeeId(profileId.value))
-    .then((res) => {
-      const data = res.data.result;
-      //   console.log(data);
-      rows.value = [];
-      data.map((e: ResponseObjectEmployee) => {
-        rows.value.push({
-          id: e.id,
-          date: new Date(e.date),
-          amount: e.amount,
-          positionSalaryAmount: e.positionSalaryAmount,
-          mouthSalaryAmount: e.mouthSalaryAmount,
-          oc: e.oc,
-          ocId: e.ocId,
-          posNo: e.posNo,
-          posNoId: e.posNoId,
-          posNoEmployee: e.posNoEmployee,
-          positionEmployeeGroup: e.positionEmployeeGroup,
-          positionEmployeeGroupId: e.positionEmployeeGroupId,
-          positionEmployeeLevel: e.positionEmployeeLevel,
-          positionEmployeeLevelId: e.positionEmployeeLevelId,
-          positionEmployeePosition: e.positionEmployeePosition,
-          positionEmployeePositionId: e.positionEmployeePositionId,
-          positionEmployeePositionSide: e.positionEmployeePositionSide,
-          positionEmployeePositionSideId: e.positionEmployeePositionSideId,
-          salaryClass: e.salaryClass,
-          salaryRef: e.salaryRef,
-          refCommandNo: e.refCommandNo,
-          //   refCommandDate: new Date(e.refCommandDate),
-          createdFullName: e.createdFullName,
-          createdAt: new Date(e.createdAt),
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .get(config.API.profileSalaryEmployeeId(profileId.value))
+      .then((res) => {
+        const data = res.data.result;
+        //   console.log(data);
+        rows.value = [];
+        data.map((e: ResponseObjectEmployee) => {
+          rows.value.push({
+            id: e.id,
+            date: new Date(e.date),
+            amount: e.amount,
+            positionSalaryAmount: e.positionSalaryAmount,
+            mouthSalaryAmount: e.mouthSalaryAmount,
+            oc: e.oc,
+            ocId: e.ocId,
+            posNo: e.posNo,
+            posNoId: e.posNoId,
+            posNoEmployee: e.posNoEmployee,
+            positionEmployeeGroup: e.positionEmployeeGroup,
+            positionEmployeeGroupId: e.positionEmployeeGroupId,
+            positionEmployeeLevel: e.positionEmployeeLevel,
+            positionEmployeeLevelId: e.positionEmployeeLevelId,
+            positionEmployeePosition: e.positionEmployeePosition,
+            positionEmployeePositionId: e.positionEmployeePositionId,
+            positionEmployeePositionSide: e.positionEmployeePositionSide,
+            positionEmployeePositionSideId: e.positionEmployeePositionSideId,
+            salaryClass: e.salaryClass,
+            salaryRef: e.salaryRef,
+            refCommandNo: e.refCommandNo,
+            //   refCommandDate: new Date(e.refCommandDate),
+            createdFullName: e.createdFullName,
+            createdAt: new Date(e.createdAt),
+          });
         });
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        loaderPage(false);
       });
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      loaderPage(false);
-    });
+  }
 };
 
 const fetchPositionNumber = async (id: string) => {
@@ -1691,34 +1695,36 @@ const clickSave = async () => {
  * บันทึกเพิ่มข้อมูล
  */
 const saveData = async () => {
-  loaderPage(true);
-  await http
-    .post(config.API.profileSalaryEmployeeId(profileId.value), {
-      amount: amount.value,
-      date: dateToISO(date.value),
-      positionSalaryAmount: positionSalaryAmount.value,
-      mouthSalaryAmount: mouthSalaryAmount.value,
-      ocId: agencyId.value,
-      //   posNoId: posNoId.value,
-      posNoEmployee: posNoEmployee.value,
-      positionEmployeeGroupId: employeeGroupId.value,
-      positionEmployeeLevelId: employeeLevelId.value,
-      positionEmployeePositionId: employeePositionId.value,
-      positionEmployeePositionSideId: employeePositionSideId.value,
-      salaryClass: salaryClass.value,
-      salaryRef: salaryRef.value,
-      refCommandNo: refCommandNo.value,
-    })
-    .then((res) => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
-      modal.value = false;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await fetchData();
-    });
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .post(config.API.profileSalaryEmployeeId(profileId.value), {
+        amount: amount.value,
+        date: dateToISO(date.value),
+        positionSalaryAmount: positionSalaryAmount.value,
+        mouthSalaryAmount: mouthSalaryAmount.value,
+        ocId: agencyId.value,
+        //   posNoId: posNoId.value,
+        posNoEmployee: posNoEmployee.value,
+        positionEmployeeGroupId: employeeGroupId.value,
+        positionEmployeeLevelId: employeeLevelId.value,
+        positionEmployeePositionId: employeePositionId.value,
+        positionEmployeePositionSideId: employeePositionSideId.value,
+        salaryClass: salaryClass.value,
+        salaryRef: salaryRef.value,
+        refCommandNo: refCommandNo.value,
+      })
+      .then((res) => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        modal.value = false;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await fetchData();
+      });
+  }
 };
 
 /**
diff --git a/src/modules/04_registry/components/SalaryEmployeeTemp.vue b/src/modules/04_registry/components/SalaryEmployeeTemp.vue
index 64bc1f4de..f3cda3a29 100644
--- a/src/modules/04_registry/components/SalaryEmployeeTemp.vue
+++ b/src/modules/04_registry/components/SalaryEmployeeTemp.vue
@@ -1,197 +1,175 @@
 <!-- card ตำแหน่ง/ค่าจ้าง -->
 <template>
-	<q-card flat bordered class="col-12 q-px-lg q-py-md">
-		<q-form ref="myForm">
-			<ProfileTable
-				:rows="rows"
-				:columns="columns"
-				:filter="filter"
-				:visible-columns="visibleColumns"
-				v-model:inputfilter="filter"
-				v-model:inputvisible="visibleColumns"
-				:add="clickAdd"
-				name="ตำแหน่ง/ค่าจ้าง"
-				icon="mdi-cash"
-				:statusEdit="statusEdit"
-			>
-				<template #columns="props">
-					<q-tr :props="props">
-						<q-td
-							v-for="col in props.cols"
-							:key="col.name"
-							:props="props"
-							@click="selectData(props)"
-							class="cursor-pointer"
-						>
-							<div
-								v-if="col.name == 'date'"
-								class="table_ellipsis"
-							>
-								{{ date2Thai(col.value) }}
-							</div>
-							<div
-								v-else-if="
-									col.name == 'positionSalaryAmount' ||
-									col.name == 'mouthSalaryAmount' ||
-									col.name == 'amount'
-								"
-								class="table_ellipsis"
-							>
-								{{
-									col.value == null
-										? ""
-										: col.value.toLocaleString("en-US")
-								}}
-							</div>
-							<div v-else class="table_ellipsis">
-								{{ col.value }}
-							</div>
-						</q-td>
-						<q-td auto-width>
-							<q-btn
-								color="info"
-								flat
-								dense
-								round
-								size="14px"
-								icon="mdi-history"
-								@click="clickHistory(props.row)"
-							/>
-						</q-td>
-					</q-tr>
-				</template>
-			</ProfileTable>
-		</q-form>
-	</q-card>
-	<!-- popup Edit window-->
-	<q-dialog v-model="modal" persistent>
-		<q-card style="width: 60vw; max-width: 80vw">
-			<q-form ref="myForm">
-				<DialogHeader tittle="ตำแหน่ง/ค่าจ้าง" :close="clickClose" />
-				<q-separator />
-				<q-card-section class="q-pa-sm bg-grey-1">
-					<div class="row col-12 q-col-gutter-sm">
-						<div class="col-xs-12 col-sm-5 row">
-							<q-card flat bordered class="fit q-pa-sm">
-								<q-scroll-area visible style="height: 70vh">
-									<q-input
-										outlined
-										dense
-										v-model="search"
-										placeholder="ค้นหา"
-										class="q-mb-sm"
-									>
-										<template v-slot:append>
-											<q-icon name="mdi-magnify" />
-										</template>
-									</q-input>
-									<q-tree
-										v-if="edit"
-										:nodes="nodesTree"
-										dense
-										node-key="id"
-										v-model:selected="agencyId"
-										v-model:expanded="expanded"
-										no-selection-unset
-										selected-color="primary"
-										@update:selected="onSelected"
-										default-expand-all
-									/>
-									<q-tree
-										v-else
-										:nodes="nodesTree"
-										dense
-										node-key="id"
-										v-model:expanded="expanded"
-										no-selection-unset
-										selected-color="primary"
-										@update:selected="onSelected"
-										default-expand-all
-									>
-										<template v-slot:default-header="prop">
-											<div class="row items-center">
-												<div
-													class="text-primary"
-													v-if="
-														selected == prop.node.id
-													"
-												>
-													{{ prop.node.label }}
-												</div>
-												<div v-else>
-													{{ prop.node.label }}
-												</div>
-											</div>
-										</template>
-									</q-tree>
-								</q-scroll-area>
-							</q-card>
-						</div>
-						<div class="col-xs-12 col-sm-7">
-							<q-card class="fit q-pa-sm">
-								<q-scroll-area visible style="height: 60vh">
-									<div class="row col-12 q-col-gutter-xs">
-										<div class="col-xs-6 col-sm-6 col-md-6">
-											<datepicker
-												menu-class-name="modalfix"
-												:readonly="!edit"
-												v-model="date"
-												:locale="'th'"
-												autoApply
-												:enableTimePicker="false"
-												@update:modelValue="
-													clickEditRow
-												"
-												week-start="0"
-											>
-												<template #year="{ year }">{{
-													year + 543
-												}}</template>
-												<template
-													#year-overlay-value="{
-														value,
-													}"
-													>{{
-														parseInt(value + 543)
-													}}</template
-												>
-												<template #trigger>
-													<q-input
-														:class="getClass(edit)"
-														:outlined="edit"
-														dense
-														lazy-rules
-														:borderless="!edit"
-														:model-value="
-															date2Thai(date)
-														"
-														:rules="[
+  <q-card flat bordered class="col-12 q-px-lg q-py-md">
+    <q-form ref="myForm">
+      <ProfileTable
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :add="clickAdd"
+        name="ตำแหน่ง/ค่าจ้าง"
+        icon="mdi-cash"
+        :statusEdit="statusEdit"
+      >
+        <template #columns="props">
+          <q-tr :props="props">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="selectData(props)"
+              class="cursor-pointer"
+            >
+              <div v-if="col.name == 'date'" class="table_ellipsis">
+                {{ date2Thai(col.value) }}
+              </div>
+              <div
+                v-else-if="
+                  col.name == 'positionSalaryAmount' ||
+                  col.name == 'mouthSalaryAmount' ||
+                  col.name == 'amount'
+                "
+                class="table_ellipsis"
+              >
+                {{ col.value == null ? "" : col.value.toLocaleString("en-US") }}
+              </div>
+              <div v-else class="table_ellipsis">
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-history"
+                @click="clickHistory(props.row)"
+              />
+            </q-td>
+          </q-tr>
+        </template>
+      </ProfileTable>
+    </q-form>
+  </q-card>
+  <!-- popup Edit window-->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 60vw; max-width: 80vw">
+      <q-form ref="myForm">
+        <DialogHeader tittle="ตำแหน่ง/ค่าจ้าง" :close="clickClose" />
+        <q-separator />
+        <q-card-section class="q-pa-sm bg-grey-1">
+          <div class="row col-12 q-col-gutter-sm">
+            <div class="col-xs-12 col-sm-5 row">
+              <q-card flat bordered class="fit q-pa-sm">
+                <q-scroll-area visible style="height: 70vh">
+                  <q-input
+                    outlined
+                    dense
+                    v-model="search"
+                    placeholder="ค้นหา"
+                    class="q-mb-sm"
+                  >
+                    <template v-slot:append>
+                      <q-icon name="mdi-magnify" />
+                    </template>
+                  </q-input>
+                  <q-tree
+                    v-if="edit"
+                    :nodes="nodesTree"
+                    dense
+                    node-key="id"
+                    v-model:selected="agencyId"
+                    v-model:expanded="expanded"
+                    no-selection-unset
+                    selected-color="primary"
+                    @update:selected="onSelected"
+                    default-expand-all
+                  />
+                  <q-tree
+                    v-else
+                    :nodes="nodesTree"
+                    dense
+                    node-key="id"
+                    v-model:expanded="expanded"
+                    no-selection-unset
+                    selected-color="primary"
+                    @update:selected="onSelected"
+                    default-expand-all
+                  >
+                    <template v-slot:default-header="prop">
+                      <div class="row items-center">
+                        <div
+                          class="text-primary"
+                          v-if="selected == prop.node.id"
+                        >
+                          {{ prop.node.label }}
+                        </div>
+                        <div v-else>
+                          {{ prop.node.label }}
+                        </div>
+                      </div>
+                    </template>
+                  </q-tree>
+                </q-scroll-area>
+              </q-card>
+            </div>
+            <div class="col-xs-12 col-sm-7">
+              <q-card class="fit q-pa-sm">
+                <q-scroll-area visible style="height: 60vh">
+                  <div class="row col-12 q-col-gutter-xs">
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <datepicker
+                        menu-class-name="modalfix"
+                        :readonly="!edit"
+                        v-model="date"
+                        :locale="'th'"
+                        autoApply
+                        :enableTimePicker="false"
+                        @update:modelValue="clickEditRow"
+                        week-start="0"
+                      >
+                        <template #year="{ year }">{{ year + 543 }}</template>
+                        <template #year-overlay-value="{ value }">{{
+                          parseInt(value + 543)
+                        }}</template>
+                        <template #trigger>
+                          <q-input
+                            :class="getClass(edit)"
+                            :outlined="edit"
+                            dense
+                            lazy-rules
+                            :borderless="!edit"
+                            :model-value="date2Thai(date)"
+                            :rules="[
                                 (val:string) =>
                                   !!val ||
                                   `${'กรุณาเลือกวัน เดือน ปี จ้างและแต่งตั้ง'}`,
                               ]"
-														:label="`${'วัน เดือน ปี จ้างและแต่งตั้ง'}`"
-														hide-bottom-space
-													>
-														<template
-															v-slot:prepend
-														>
-															<q-icon
-																name="event"
-																class="cursor-pointer"
-																:style="
-																	edit
-																		? 'color: var(--q-primary)'
-																		: 'color: var(--q-grey)'
-																"
-															>
-															</q-icon>
-														</template>
-													</q-input>
-												</template>
-											</datepicker>
-										</div>
-										<!-- <div class="col-xs-6 col-sm-6 col-md-6">
+                            :label="`${'วัน เดือน ปี จ้างและแต่งตั้ง'}`"
+                            hide-bottom-space
+                          >
+                            <template v-slot:prepend>
+                              <q-icon
+                                name="event"
+                                class="cursor-pointer"
+                                :style="
+                                  edit
+                                    ? 'color: var(--q-primary)'
+                                    : 'color: var(--q-grey)'
+                                "
+                              >
+                              </q-icon>
+                            </template>
+                          </q-input>
+                        </template>
+                      </datepicker>
+                    </div>
+                    <!-- <div class="col-xs-6 col-sm-6 col-md-6">
                       <q-input
                         :class="getClass(edit)"
                         :outlined="edit"
@@ -206,64 +184,56 @@
                         autogrow
                       />
                     </div> -->
-										<div class="col-xs-6 col-sm-6 col-md-6">
-											<selector
-												:class="getClass(edit)"
-												:outlined="edit"
-												dense
-												lazy-rules
-												:readonly="!edit"
-												:borderless="!edit"
-												v-model="employeePositionId"
-												:rules="[(val:string) => !!val || `${'กรุณาเลือกตำแหน่ง'}`]"
-												:label="`${'ตำแหน่ง'}`"
-												@update:modelValue="
-													clickEditRow
-												"
-												emit-value
-												map-options
-												option-label="name"
-												:options="
-													employeePositionOptions
-												"
-												option-value="id"
-												hide-bottom-space
-												use-input
-												input-debounce="0"
-												@filter="(inputValue:any,
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="employeePositionId"
+                        :rules="[(val:string) => !!val || `${'กรุณาเลือกตำแหน่ง'}`]"
+                        :label="`${'ตำแหน่ง'}`"
+                        @update:modelValue="clickEditRow"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        :options="employeePositionOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue:any,
                         doneFn:Function) => filterSelector(inputValue, doneFn,'employeePosition'
                         ) "
-											/>
-										</div>
-										<div class="col-xs-6 col-sm-6 col-md-6">
-											<selector
-												:class="getClass(edit)"
-												:outlined="edit"
-												dense
-												lazy-rules
-												:readonly="!edit"
-												:borderless="!edit"
-												v-model="employeePositionSideId"
-												:label="`${'ด้านของตำแหน่ง'}`"
-												@update:modelValue="
-													clickEditRow
-												"
-												emit-value
-												map-options
-												option-label="name"
-												:options="
-													employeePositionSideOptions
-												"
-												option-value="id"
-												hide-bottom-space
-												use-input
-												input-debounce="0"
-												@filter="(inputValue:any,
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="employeePositionSideId"
+                        :label="`${'ด้านของตำแหน่ง'}`"
+                        @update:modelValue="clickEditRow"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        :options="employeePositionSideOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue:any,
                         doneFn:Function) => filterSelector(inputValue, doneFn,'employeePositionSide'
                         ) "
-											/>
-										</div>
-										<!-- <div class="col-xs-6 col-sm-6 col-md-6">
+                      />
+                    </div>
+                    <!-- <div class="col-xs-6 col-sm-6 col-md-6">
                       <selector
                         :class="getClass(edit)"
                         :outlined="edit"
@@ -287,33 +257,31 @@
                         ) "
                       />
                     </div> -->
-										<div class="col-xs-6 col-sm-6 col-md-6">
-											<selector
-												:class="getClass(edit)"
-												:outlined="edit"
-												dense
-												lazy-rules
-												:readonly="!edit"
-												:borderless="!edit"
-												v-model="employeeGroupId"
-												:label="`${'กลุ่มงาน'}`"
-												@update:modelValue="
-													clickEditRow
-												"
-												emit-value
-												map-options
-												option-label="name"
-												:options="employeeGroupOptions"
-												option-value="id"
-												hide-bottom-space
-												use-input
-												input-debounce="0"
-												@filter="(inputValue:any,
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="employeeGroupId"
+                        :label="`${'กลุ่มงาน'}`"
+                        @update:modelValue="clickEditRow"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        :options="employeeGroupOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue:any,
                         doneFn:Function) => filterSelector(inputValue, doneFn,'employeeGroup'
                         ) "
-											/>
-										</div>
-										<!-- <div class="col-xs-12">
+                      />
+                    </div>
+                    <!-- <div class="col-xs-12">
                       <selector
                         :class="getClass(edit)"
                         :outlined="edit"
@@ -337,49 +305,45 @@
                         ) "
                       />
                     </div> -->
-										<div class="col-xs-6 col-sm-6 col-md-6">
-											<q-input
-												:class="getClass(edit)"
-												:outlined="edit"
-												dense
-												lazy-rules
-												:readonly="!edit"
-												:borderless="!edit"
-												v-model="amount"
-												:label="`${'ค่าจ้าง'}`"
-												@update:modelValue="
-													clickEditRow
-												"
-												type="number"
-												hide-bottom-space
-											/>
-										</div>
-										<div class="col-xs-6 col-sm-6 col-md-6">
-											<q-input
-												:class="getClass(edit)"
-												:outlined="edit"
-												dense
-												lazy-rules
-												:readonly="!edit"
-												:borderless="!edit"
-												v-model="refCommandNo"
-												hide-bottom-space
-												:label="`${'เลขที่คำสั่ง'}`"
-												:rules="[(val:string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]"
-												@update:modelValue="
-													clickEditRow
-												"
-											>
-												<template v-slot:append>
-													<q-icon
-														name="mdi-file"
-														class="cursor-pointer"
-														@click="resetFilter"
-													/>
-												</template>
-											</q-input>
-										</div>
-										<!-- <div class="col-xs-4 col-sm-4 col-md-4">
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <q-input
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="amount"
+                        :label="`${'ค่าจ้าง'}`"
+                        @update:modelValue="clickEditRow"
+                        type="number"
+                        hide-bottom-space
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <q-input
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="refCommandNo"
+                        hide-bottom-space
+                        :label="`${'เลขที่คำสั่ง'}`"
+                        :rules="[(val:string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]"
+                        @update:modelValue="clickEditRow"
+                      >
+                        <template v-slot:append>
+                          <q-icon
+                            name="mdi-file"
+                            class="cursor-pointer"
+                            @click="resetFilter"
+                          />
+                        </template>
+                      </q-input>
+                    </div>
+                    <!-- <div class="col-xs-4 col-sm-4 col-md-4">
                     <q-input
                       :class="getClass(edit)"
                       :outlined="edit"
@@ -409,7 +373,7 @@
                       hide-bottom-space
                     />
                   </div> -->
-										<!-- <div class="col-xs-6 col-sm-6 col-md-6">
+                    <!-- <div class="col-xs-6 col-sm-6 col-md-6">
                     <q-input
                       :class="getClass(edit)"
                       :outlined="edit"
@@ -426,52 +390,44 @@
                     </q-input>
                   </div> -->
 
-										<div
-											class="row col-xs-12 col-sm-12 col-md-12"
-										>
-											<selector
-												:class="getClass(edit)"
-												:outlined="edit"
-												dense
-												lazy-rules
-												:readonly="!edit"
-												:borderless="!edit"
-												v-model="refSelected"
-												:label="`${'ต้นแบบ (template) เอกสารอ้างอิง'}`"
-												@update:modelValue="
-													clickEditRowRef
-												"
-												option-label="name"
-												:options="refOptions"
-												option-value="id"
-												hide-bottom-space
-												use-input
-												input-debounce="0"
-												@filter="(inputValue:any,
+                    <div class="row col-xs-12 col-sm-12 col-md-12">
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="refSelected"
+                        :label="`${'ต้นแบบ (template) เอกสารอ้างอิง'}`"
+                        @update:modelValue="clickEditRowRef"
+                        option-label="name"
+                        :options="refOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue:any,
                         doneFn:Function) => filterSelector(inputValue, doneFn,'ref'
                         ) "
-											/>
-										</div>
-										<div
-											class="col-xs-12 col-sm-12 col-md-12"
-										>
-											<q-input
-												:class="getClass(edit)"
-												:outlined="edit"
-												dense
-												lazy-rules
-												:readonly="!edit"
-												:borderless="!edit"
-												v-model="salaryRef"
-												:label="`${'เอกสารอ้างอิง'}`"
-												@update:modelValue="
-													clickEditRow
-												"
-												type="textarea"
-												hide-bottom-space
-											/>
-										</div>
-										<!-- <div class="col-xs-6 col-sm-6 col-md-6">
+                      />
+                    </div>
+                    <div class="col-xs-12 col-sm-12 col-md-12">
+                      <q-input
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="salaryRef"
+                        :label="`${'เอกสารอ้างอิง'}`"
+                        @update:modelValue="clickEditRow"
+                        type="textarea"
+                        hide-bottom-space
+                      />
+                    </div>
+                    <!-- <div class="col-xs-6 col-sm-6 col-md-6">
                     <datepicker
                       menu-class-name="modalfix"
                       :readonly="!edit"
@@ -517,69 +473,65 @@
                       </template>
                     </datepicker>
                   </div> -->
-									</div>
-								</q-scroll-area>
-							</q-card>
-						</div>
-					</div>
-				</q-card-section>
-				<q-separator />
-				<DialogFooter
-					:cancel="clickCancel"
-					:edit="clickEdit"
-					:save="clickSave"
-					:validate="validateData"
-					:clickNext="clickNext"
-					:clickPrevious="clickPrevious"
-					:clickDelete="clickDelete"
-					v-model:editvisible="edit"
-					v-model:next="next"
-					v-model:previous="previous"
-					v-model:modalEdit="modalEdit"
-				/>
-			</q-form>
-		</q-card>
-	</q-dialog>
-	<HistoryTable
-		:rows="rowsHistory"
-		:columns="columnsHistory"
-		:filter="filterHistory"
-		:visible-columns="visibleColumnsHistory"
-		v-model:modal="modalHistory"
-		v-model:inputfilter="filterHistory"
-		v-model:inputvisible="visibleColumnsHistory"
-		v-model:tittle="tittleHistory"
-	>
-		<template #columns="props">
-			<q-tr :props="props">
-				<q-td v-for="col in props.cols" :key="col.name" :props="props">
-					<div
-						v-if="col.name == 'date' || col.name == 'createdAt'"
-						class="table_ellipsis"
-					>
-						{{ date2Thai(col.value) }}
-					</div>
-					<div
-						v-else-if="
-							col.name == 'positionSalaryAmount' ||
-							col.name == 'mouthSalaryAmount' ||
-							col.name == 'amount'
-						"
-						class="table_ellipsis"
-					>
-						{{
-							col.value == null
-								? ""
-								: col.value.toLocaleString("en-US")
-						}}
-					</div>
-					<div v-else class="table_ellipsis">
-						{{ col.value }}
-					</div>
-				</q-td>
-			</q-tr>
-		</template>
-	</HistoryTable>
+                  </div>
+                </q-scroll-area>
+              </q-card>
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :cancel="clickCancel"
+          :edit="clickEdit"
+          :save="clickSave"
+          :validate="validateData"
+          :clickNext="clickNext"
+          :clickPrevious="clickPrevious"
+          :clickDelete="clickDelete"
+          v-model:editvisible="edit"
+          v-model:next="next"
+          v-model:previous="previous"
+          v-model:modalEdit="modalEdit"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div
+            v-if="col.name == 'date' || col.name == 'createdAt'"
+            class="table_ellipsis"
+          >
+            {{ date2Thai(col.value) }}
+          </div>
+          <div
+            v-else-if="
+              col.name == 'positionSalaryAmount' ||
+              col.name == 'mouthSalaryAmount' ||
+              col.name == 'amount'
+            "
+            class="table_ellipsis"
+          >
+            {{ col.value == null ? "" : col.value.toLocaleString("en-US") }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
 </template>
 <script setup lang="ts">
 import { onMounted, ref, watch } from "vue";
@@ -592,13 +544,13 @@ import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
 import DialogFooter from "@/modules/04_registry/components/DialogFooter.vue";
 import { useQuasar } from "quasar";
 import type {
-	RequestItemsEmployee,
-	DataPropsEmployee,
+  RequestItemsEmployee,
+  DataPropsEmployee,
 } from "@/modules/04_registry/interface/request/Salary";
 import type { ResponseObjectEmployee } from "@/modules/04_registry/interface/response/Salary";
 import type {
-	DataOption,
-	treeTab,
+  DataOption,
+  treeTab,
 } from "@/modules/04_registry/interface/index/Main";
 import HistoryTable from "@/components/TableHistory.vue";
 import http from "@/plugins/http";
@@ -606,10 +558,10 @@ import config from "@/app.config";
 import type { QTableProps } from "quasar";
 
 const props = defineProps({
-	statusEdit: {
-		type: Boolean,
-		required: true,
-	},
+  statusEdit: {
+    type: Boolean,
+    required: true,
+  },
 });
 
 const $q = useQuasar();
@@ -658,272 +610,272 @@ const agencyOptionsFilter = ref<DataOption[]>([]);
 
 const refSelected = ref<DataOption | null>(null);
 const refOptions = ref<DataOption[]>([
-	{
-		id: "17",
-		name: "****************  ข้าราชการสามัญ  **********************",
-		disable: true,
-	},
-	{
-		id: "18",
-		name: "รักษาการในตำแหน่ง {ตำแหน่ง} ตั้งแต่ {วัน} {เดือน} {พ.ศ.} ถึงวันที่ {วัน} {เดือน} {พ.ศ.} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-	},
-	{
-		id: "19",
-		name: "ช่วยราชการ หน่วนงาน {สังกัด} ตั้งแต่ {วัน} {เดือน} {พ.ศ.} ถึงวันที่ {วัน} {เดือน} {พ.ศ.} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-	},
-	{
-		id: "20",
-		name: "รับโอน {ตำแหน่งประเภท} จากตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} ค่าจ้าง {ค่าจ้าง} เป็นตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} ค่าจ้าง {ค่าจ้าง} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-	},
-	{
-		id: "21",
-		name: "เลื่อนระดับ {ประเภทตำแหน่ง} จาก ตำแหน่งเลขที่ {ตำแหน่งเลขที่เดิม} ตำแหน่ง {ตำแหน่งเดิม} ระดับ {ระดับเดิม} {สำนักเดิม} เงินเดือน {เงินเดือนเดิม} เป็น ตำแหน่งเลขที่ {ตำแหน่งเลขที่ใหม่} ตำแหน่ง {ตำแหน่งใหม่} ระดับ {ระดับใหม่} {สำนักใหม่} เงินเดือน {เงินเดือนใหม่} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-	},
-	{
-		id: "0",
-		name: "****************  ครู  **********************",
-		disable: true,
-	},
-	{
-		id: "1",
-		name: "บรรจุและแต่งตั้งผู้ผ่านการคัดเลือกได้วุฒิ  {วุฒิ} คำสั่ง กทม. ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-	},
-	{
-		id: "2",
-		name: "เลื่อนค่าจ้าง (1 ขั้น) คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-	},
-	{ id: "3", name: "ปรับอัตราค่าจ้างครู บัญชีใหม่ {พ.ศ.}" },
-	{
-		id: "4",
-		name: "ปรับให้เข้าระดับและขั้นค่าจ้างตามบัญชีอัตราค่าจ้างข้าราชการพลเรือน บัญชี ก. ท้ายพระราชบัญญัติระเบียบข้าราชการพลเรือน(ฉบับที่6) พ.ศ.{ปี}",
-	},
-	{
-		id: "5",
-		name: "ปรับอัตราค่าจ้าง ตามบัญชี ข. ท้าย พ.ร.บ.ระเบียบข้าราชการพลเรือน(ฉบับที่ ) พ.ศ.{ปี}",
-	},
-	{
-		id: "6",
-		name: "ปรับค่าจ้างตาม พ.ร.บ.ค่าจ้างฯ (ฉบับที่ ) {พ.ศ.} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-	},
-	{
-		id: "7",
-		name: "ปรับค่าจ้างตาม พ.ร.ฎ.การปรับค่าจ้างขั้นต่ำขั้นสูงของข้าราชการสามัญฯ {พ.ศ.}  คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-	},
-	{
-		id: "8",
-		name: "ปรับอัตราค่าจ้างตามพระราชกฤษฎีกา การปรับอัตราค่าจ้างของข้าราชการ {พ.ศ.}",
-	},
-	{
-		id: "9",
-		name: "ปรับอัตราค่าจ้างตามหนังสือ ก.ค.ศ.ด่วนมาก ที่ / ลว. 4 ธ.ค. 2555 (ปรับตามคุณวุฒิ) คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-	},
-	{
-		id: "10",
-		name: "แต่งตั้งข้าราชการ คำสั่ง คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-	},
-	{
-		id: "11",
-		name: "การแต่งตั้งข้าราชการสามัญ กทม.ฯ ตาม พรฎ.ระเบียบข้าราชการสามัญ กทม. พ.ศ. ดำรงตำแหน่งฯ ตาม พรบ.ระเบียบข้าราชการกทม.ฯ พ.ศ. คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-	},
-	{
-		id: "12",
-		name: "แต่งตั้งครูผู้ช่วยให้ดำรงตำแหน่งครู คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-	},
-	{
-		id: "13",
-		name: "ได้รับค่าจ้างสูงกว่าหรือต่ำกว่าขั้นต่ำฯ คำสั่ง กทม. ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-	},
-	{
-		id: "14",
-		name: "ได้รับค่าจ้างสูงกว่าขั้นสูงของอันดับและเลื่อนขั้นค่าจ้าง คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-	},
-	{
-		id: "15",
-		name: "ให้ข้าราชการสามัญ กทม. มีวิทยฐานะ {วิทยฐานะ} และรับค่าจ้างอันดับ {คศ.} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-	},
-	{ id: "16", name: "มาตรา 9 แห่ง พรฎ.ระเบียบข้าราชการสามัญ กทม. {พ.ศ}" },
-	{
-		id: "21",
-		name: "****************  ลูกจ้าง  **********************",
-		disable: true,
-	},
-	{
-		id: "22",
-		name: "จ้างและแต่งตั้งลูกจ้างประจำ คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-	},
-	{
-		id: "23",
-		name: "เลื่อนค่าจ้างตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-	},
-	{
-		id: "24",
-		name: "ได้รับอัตราค่าจ้างสูงกว่าอัตราค่าจ้างขั้นสูงของตำแหน่งที่ได้รับแต่งตั้งในแต่ละระดับ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-	},
-	{
-		id: "25",
-		name: "แก้ไขคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-	},
-	{
-		id: "26",
-		name: "ยกเลิกคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-	},
-	{
-		id: "27",
-		name: "แต่งตั้งลูกจ้างประจำตามมาตรฐานกำหนดตำแหน่งฯ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-	},
-	{
-		id: "28",
-		name: "แต่งตั้งลูกจ้างประจำ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-	},
-	{ id: "29", name: "ไม่เลื่อนขั้นค่าจ้าง เนื่องจาก" },
-	{
-		id: "30",
-		name: "ได้รับเงินตอบแทนพิเศษร้อยละ {} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-	},
-	{
-		id: "31",
-		name: "ปรับอัตราค่าจ้างลูกจ้างประจำกรุงเทพมหานคร ตามข้อบังคับกรุงเทพมหานครว่าด้วยการกำหนดอัตราค่าจ้างขั้นต่ำสุดและสูงสุดของลูกจ้าง พ.ศ. 2557",
-	},
-	{
-		id: "32",
-		name: "ปรับอัตราค่าจ้างลูกจ้างประจำกรุงเทพมหานครตามข้อบังคับกรุงเทพมหานครว่าด้วยการกำหนดอัตราค่าจ้างขั้นต่ำสุดและสูงสุดของลูกจ้าง (ฉบับที่ {}) พ.ศ. 2557",
-	},
-	{
-		id: "33",
-		name: "ปรับอัตราค่าจ้าง ตามหนังสือกระทรวงการคลังฯ ที่ กค 0428/ว 47 ลว. 29 พ.ค. 2558 และข้อบังคับ กทม. ว่าด้วยการกำหนดอัตราค่าจ้างฯ ตั้งแต่วันที่ 1 ธ.ค. 2557 ข้อ {} ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-	},
+  {
+    id: "17",
+    name: "****************  ข้าราชการสามัญ  **********************",
+    disable: true,
+  },
+  {
+    id: "18",
+    name: "รักษาการในตำแหน่ง {ตำแหน่ง} ตั้งแต่ {วัน} {เดือน} {พ.ศ.} ถึงวันที่ {วัน} {เดือน} {พ.ศ.} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "19",
+    name: "ช่วยราชการ หน่วนงาน {สังกัด} ตั้งแต่ {วัน} {เดือน} {พ.ศ.} ถึงวันที่ {วัน} {เดือน} {พ.ศ.} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "20",
+    name: "รับโอน {ตำแหน่งประเภท} จากตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} ค่าจ้าง {ค่าจ้าง} เป็นตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} ค่าจ้าง {ค่าจ้าง} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "21",
+    name: "เลื่อนระดับ {ประเภทตำแหน่ง} จาก ตำแหน่งเลขที่ {ตำแหน่งเลขที่เดิม} ตำแหน่ง {ตำแหน่งเดิม} ระดับ {ระดับเดิม} {สำนักเดิม} เงินเดือน {เงินเดือนเดิม} เป็น ตำแหน่งเลขที่ {ตำแหน่งเลขที่ใหม่} ตำแหน่ง {ตำแหน่งใหม่} ระดับ {ระดับใหม่} {สำนักใหม่} เงินเดือน {เงินเดือนใหม่} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "0",
+    name: "****************  ครู  **********************",
+    disable: true,
+  },
+  {
+    id: "1",
+    name: "บรรจุและแต่งตั้งผู้ผ่านการคัดเลือกได้วุฒิ  {วุฒิ} คำสั่ง กทม. ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "2",
+    name: "เลื่อนค่าจ้าง (1 ขั้น) คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  { id: "3", name: "ปรับอัตราค่าจ้างครู บัญชีใหม่ {พ.ศ.}" },
+  {
+    id: "4",
+    name: "ปรับให้เข้าระดับและขั้นค่าจ้างตามบัญชีอัตราค่าจ้างข้าราชการพลเรือน บัญชี ก. ท้ายพระราชบัญญัติระเบียบข้าราชการพลเรือน(ฉบับที่6) พ.ศ.{ปี}",
+  },
+  {
+    id: "5",
+    name: "ปรับอัตราค่าจ้าง ตามบัญชี ข. ท้าย พ.ร.บ.ระเบียบข้าราชการพลเรือน(ฉบับที่ ) พ.ศ.{ปี}",
+  },
+  {
+    id: "6",
+    name: "ปรับค่าจ้างตาม พ.ร.บ.ค่าจ้างฯ (ฉบับที่ ) {พ.ศ.} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "7",
+    name: "ปรับค่าจ้างตาม พ.ร.ฎ.การปรับค่าจ้างขั้นต่ำขั้นสูงของข้าราชการสามัญฯ {พ.ศ.}  คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "8",
+    name: "ปรับอัตราค่าจ้างตามพระราชกฤษฎีกา การปรับอัตราค่าจ้างของข้าราชการ {พ.ศ.}",
+  },
+  {
+    id: "9",
+    name: "ปรับอัตราค่าจ้างตามหนังสือ ก.ค.ศ.ด่วนมาก ที่ / ลว. 4 ธ.ค. 2555 (ปรับตามคุณวุฒิ) คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "10",
+    name: "แต่งตั้งข้าราชการ คำสั่ง คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "11",
+    name: "การแต่งตั้งข้าราชการสามัญ กทม.ฯ ตาม พรฎ.ระเบียบข้าราชการสามัญ กทม. พ.ศ. ดำรงตำแหน่งฯ ตาม พรบ.ระเบียบข้าราชการกทม.ฯ พ.ศ. คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "12",
+    name: "แต่งตั้งครูผู้ช่วยให้ดำรงตำแหน่งครู คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "13",
+    name: "ได้รับค่าจ้างสูงกว่าหรือต่ำกว่าขั้นต่ำฯ คำสั่ง กทม. ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "14",
+    name: "ได้รับค่าจ้างสูงกว่าขั้นสูงของอันดับและเลื่อนขั้นค่าจ้าง คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "15",
+    name: "ให้ข้าราชการสามัญ กทม. มีวิทยฐานะ {วิทยฐานะ} และรับค่าจ้างอันดับ {คศ.} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  { id: "16", name: "มาตรา 9 แห่ง พรฎ.ระเบียบข้าราชการสามัญ กทม. {พ.ศ}" },
+  {
+    id: "21",
+    name: "****************  ลูกจ้าง  **********************",
+    disable: true,
+  },
+  {
+    id: "22",
+    name: "จ้างและแต่งตั้งลูกจ้างประจำ คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "23",
+    name: "เลื่อนค่าจ้างตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "24",
+    name: "ได้รับอัตราค่าจ้างสูงกว่าอัตราค่าจ้างขั้นสูงของตำแหน่งที่ได้รับแต่งตั้งในแต่ละระดับ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "25",
+    name: "แก้ไขคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "26",
+    name: "ยกเลิกคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "27",
+    name: "แต่งตั้งลูกจ้างประจำตามมาตรฐานกำหนดตำแหน่งฯ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "28",
+    name: "แต่งตั้งลูกจ้างประจำ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  { id: "29", name: "ไม่เลื่อนขั้นค่าจ้าง เนื่องจาก" },
+  {
+    id: "30",
+    name: "ได้รับเงินตอบแทนพิเศษร้อยละ {} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "31",
+    name: "ปรับอัตราค่าจ้างลูกจ้างประจำกรุงเทพมหานคร ตามข้อบังคับกรุงเทพมหานครว่าด้วยการกำหนดอัตราค่าจ้างขั้นต่ำสุดและสูงสุดของลูกจ้าง พ.ศ. 2557",
+  },
+  {
+    id: "32",
+    name: "ปรับอัตราค่าจ้างลูกจ้างประจำกรุงเทพมหานครตามข้อบังคับกรุงเทพมหานครว่าด้วยการกำหนดอัตราค่าจ้างขั้นต่ำสุดและสูงสุดของลูกจ้าง (ฉบับที่ {}) พ.ศ. 2557",
+  },
+  {
+    id: "33",
+    name: "ปรับอัตราค่าจ้าง ตามหนังสือกระทรวงการคลังฯ ที่ กค 0428/ว 47 ลว. 29 พ.ค. 2558 และข้อบังคับ กทม. ว่าด้วยการกำหนดอัตราค่าจ้างฯ ตั้งแต่วันที่ 1 ธ.ค. 2557 ข้อ {} ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
 ]);
 const refOptionsFilter = ref<DataOption[]>([
-	{
-		id: "17",
-		name: "****************  ข้าราชการสามัญ  **********************",
-		disable: true,
-	},
-	{
-		id: "18",
-		name: "รักษาการในตำแหน่ง {ตำแหน่ง} ตั้งแต่ {วัน} {เดือน} {พ.ศ.} ถึงวันที่ {วัน} {เดือน} {พ.ศ.} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-	},
-	{
-		id: "19",
-		name: "ช่วยราชการ หน่วนงาน {สังกัด} ตั้งแต่ {วัน} {เดือน} {พ.ศ.} ถึงวันที่ {วัน} {เดือน} {พ.ศ.} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-	},
-	{
-		id: "20",
-		name: "รับโอน {ตำแหน่งประเภท} จากตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} ค่าจ้าง {ค่าจ้าง} เป็นตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} ค่าจ้าง {ค่าจ้าง} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-	},
-	{
-		id: "0",
-		name: "****************  ครู  **********************",
-		disable: true,
-	},
-	{
-		id: "1",
-		name: "บรรจุและแต่งตั้งผู้ผ่านการคัดเลือกได้วุฒิ  {วุฒิ} คำสั่ง กทม. ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-	},
-	{
-		id: "2",
-		name: "เลื่อนค่าจ้าง (1 ขั้น) คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-	},
-	{ id: "3", name: "ปรับอัตราค่าจ้างครู บัญชีใหม่ {พ.ศ.}" },
-	{
-		id: "4",
-		name: "ปรับให้เข้าระดับและขั้นค่าจ้างตามบัญชีอัตราค่าจ้างข้าราชการพลเรือน บัญชี ก. ท้ายพระราชบัญญัติระเบียบข้าราชการพลเรือน(ฉบับที่6) พ.ศ.{ปี}",
-	},
-	{
-		id: "5",
-		name: "ปรับอัตราค่าจ้าง ตามบัญชี ข. ท้าย พ.ร.บ.ระเบียบข้าราชการพลเรือน(ฉบับที่ ) พ.ศ.{ปี}",
-	},
-	{
-		id: "6",
-		name: "ปรับค่าจ้างตาม พ.ร.บ.ค่าจ้างฯ (ฉบับที่ ) {พ.ศ.} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-	},
-	{
-		id: "7",
-		name: "ปรับค่าจ้างตาม พ.ร.ฎ.การปรับค่าจ้างขั้นต่ำขั้นสูงของข้าราชการสามัญฯ {พ.ศ.}  คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-	},
-	{
-		id: "8",
-		name: "ปรับอัตราค่าจ้างตามพระราชกฤษฎีกา การปรับอัตราค่าจ้างของข้าราชการ {พ.ศ.}",
-	},
-	{
-		id: "9",
-		name: "ปรับอัตราค่าจ้างตามหนังสือ ก.ค.ศ.ด่วนมาก ที่ / ลว. 4 ธ.ค. 2555 (ปรับตามคุณวุฒิ) คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-	},
-	{
-		id: "10",
-		name: "แต่งตั้งข้าราชการ คำสั่ง คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-	},
-	{
-		id: "11",
-		name: "การแต่งตั้งข้าราชการสามัญ กทม.ฯ ตาม พรฎ.ระเบียบข้าราชการสามัญ กทม. พ.ศ. ดำรงตำแหน่งฯ ตาม พรบ.ระเบียบข้าราชการกทม.ฯ พ.ศ. คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-	},
-	{
-		id: "12",
-		name: "แต่งตั้งครูผู้ช่วยให้ดำรงตำแหน่งครู คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-	},
-	{
-		id: "13",
-		name: "ได้รับค่าจ้างสูงกว่าหรือต่ำกว่าขั้นต่ำฯ คำสั่ง กทม. ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-	},
-	{
-		id: "14",
-		name: "ได้รับค่าจ้างสูงกว่าขั้นสูงของอันดับและเลื่อนขั้นค่าจ้าง คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-	},
-	{
-		id: "15",
-		name: "ให้ข้าราชการสามัญ กทม. มีวิทยฐานะ {วิทยฐานะ} และรับค่าจ้างอันดับ {คศ.} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-	},
-	{ id: "16", name: "มาตรา 9 แห่ง พรฎ.ระเบียบข้าราชการสามัญ กทม. {พ.ศ}" },
-	{
-		id: "21",
-		name: "****************  ลูกจ้าง  **********************",
-		disable: true,
-	},
-	{
-		id: "22",
-		name: "จ้างและแต่งตั้งลูกจ้างประจำ คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-	},
-	{
-		id: "23",
-		name: "เลื่อนค่าจ้างตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-	},
-	{
-		id: "24",
-		name: "ได้รับอัตราค่าจ้างสูงกว่าอัตราค่าจ้างขั้นสูงของตำแหน่งที่ได้รับแต่งตั้งในแต่ละระดับ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-	},
-	{
-		id: "25",
-		name: "แก้ไขคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-	},
-	{
-		id: "26",
-		name: "ยกเลิกคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-	},
-	{
-		id: "27",
-		name: "แต่งตั้งลูกจ้างประจำตามมาตรฐานกำหนดตำแหน่งฯ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-	},
-	{
-		id: "28",
-		name: "แต่งตั้งลูกจ้างประจำ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-	},
-	{ id: "29", name: "ไม่เลื่อนขั้นค่าจ้าง เนื่องจาก" },
-	{
-		id: "30",
-		name: "ได้รับเงินตอบแทนพิเศษร้อยละ {} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-	},
-	{
-		id: "31",
-		name: "ปรับอัตราค่าจ้างลูกจ้างประจำกรุงเทพมหานคร ตามข้อบังคับกรุงเทพมหานครว่าด้วยการกำหนดอัตราค่าจ้างขั้นต่ำสุดและสูงสุดของลูกจ้าง พ.ศ. 2557",
-	},
-	{
-		id: "32",
-		name: "ปรับอัตราค่าจ้างลูกจ้างประจำกรุงเทพมหานครตามข้อบังคับกรุงเทพมหานครว่าด้วยการกำหนดอัตราค่าจ้างขั้นต่ำสุดและสูงสุดของลูกจ้าง (ฉบับที่ {}) พ.ศ. 2557",
-	},
-	{
-		id: "33",
-		name: "ปรับอัตราค่าจ้าง ตามหนังสือกระทรวงการคลังฯ ที่ กค 0428/ว 47 ลว. 29 พ.ค. 2558 และข้อบังคับ กทม. ว่าด้วยการกำหนดอัตราค่าจ้างฯ ตั้งแต่วันที่ 1 ธ.ค. 2557 ข้อ {} ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-	},
+  {
+    id: "17",
+    name: "****************  ข้าราชการสามัญ  **********************",
+    disable: true,
+  },
+  {
+    id: "18",
+    name: "รักษาการในตำแหน่ง {ตำแหน่ง} ตั้งแต่ {วัน} {เดือน} {พ.ศ.} ถึงวันที่ {วัน} {เดือน} {พ.ศ.} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "19",
+    name: "ช่วยราชการ หน่วนงาน {สังกัด} ตั้งแต่ {วัน} {เดือน} {พ.ศ.} ถึงวันที่ {วัน} {เดือน} {พ.ศ.} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "20",
+    name: "รับโอน {ตำแหน่งประเภท} จากตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} ค่าจ้าง {ค่าจ้าง} เป็นตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} ค่าจ้าง {ค่าจ้าง} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "0",
+    name: "****************  ครู  **********************",
+    disable: true,
+  },
+  {
+    id: "1",
+    name: "บรรจุและแต่งตั้งผู้ผ่านการคัดเลือกได้วุฒิ  {วุฒิ} คำสั่ง กทม. ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "2",
+    name: "เลื่อนค่าจ้าง (1 ขั้น) คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  { id: "3", name: "ปรับอัตราค่าจ้างครู บัญชีใหม่ {พ.ศ.}" },
+  {
+    id: "4",
+    name: "ปรับให้เข้าระดับและขั้นค่าจ้างตามบัญชีอัตราค่าจ้างข้าราชการพลเรือน บัญชี ก. ท้ายพระราชบัญญัติระเบียบข้าราชการพลเรือน(ฉบับที่6) พ.ศ.{ปี}",
+  },
+  {
+    id: "5",
+    name: "ปรับอัตราค่าจ้าง ตามบัญชี ข. ท้าย พ.ร.บ.ระเบียบข้าราชการพลเรือน(ฉบับที่ ) พ.ศ.{ปี}",
+  },
+  {
+    id: "6",
+    name: "ปรับค่าจ้างตาม พ.ร.บ.ค่าจ้างฯ (ฉบับที่ ) {พ.ศ.} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "7",
+    name: "ปรับค่าจ้างตาม พ.ร.ฎ.การปรับค่าจ้างขั้นต่ำขั้นสูงของข้าราชการสามัญฯ {พ.ศ.}  คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "8",
+    name: "ปรับอัตราค่าจ้างตามพระราชกฤษฎีกา การปรับอัตราค่าจ้างของข้าราชการ {พ.ศ.}",
+  },
+  {
+    id: "9",
+    name: "ปรับอัตราค่าจ้างตามหนังสือ ก.ค.ศ.ด่วนมาก ที่ / ลว. 4 ธ.ค. 2555 (ปรับตามคุณวุฒิ) คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "10",
+    name: "แต่งตั้งข้าราชการ คำสั่ง คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "11",
+    name: "การแต่งตั้งข้าราชการสามัญ กทม.ฯ ตาม พรฎ.ระเบียบข้าราชการสามัญ กทม. พ.ศ. ดำรงตำแหน่งฯ ตาม พรบ.ระเบียบข้าราชการกทม.ฯ พ.ศ. คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "12",
+    name: "แต่งตั้งครูผู้ช่วยให้ดำรงตำแหน่งครู คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "13",
+    name: "ได้รับค่าจ้างสูงกว่าหรือต่ำกว่าขั้นต่ำฯ คำสั่ง กทม. ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "14",
+    name: "ได้รับค่าจ้างสูงกว่าขั้นสูงของอันดับและเลื่อนขั้นค่าจ้าง คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "15",
+    name: "ให้ข้าราชการสามัญ กทม. มีวิทยฐานะ {วิทยฐานะ} และรับค่าจ้างอันดับ {คศ.} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  { id: "16", name: "มาตรา 9 แห่ง พรฎ.ระเบียบข้าราชการสามัญ กทม. {พ.ศ}" },
+  {
+    id: "21",
+    name: "****************  ลูกจ้าง  **********************",
+    disable: true,
+  },
+  {
+    id: "22",
+    name: "จ้างและแต่งตั้งลูกจ้างประจำ คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "23",
+    name: "เลื่อนค่าจ้างตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "24",
+    name: "ได้รับอัตราค่าจ้างสูงกว่าอัตราค่าจ้างขั้นสูงของตำแหน่งที่ได้รับแต่งตั้งในแต่ละระดับ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "25",
+    name: "แก้ไขคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "26",
+    name: "ยกเลิกคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "27",
+    name: "แต่งตั้งลูกจ้างประจำตามมาตรฐานกำหนดตำแหน่งฯ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "28",
+    name: "แต่งตั้งลูกจ้างประจำ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  { id: "29", name: "ไม่เลื่อนขั้นค่าจ้าง เนื่องจาก" },
+  {
+    id: "30",
+    name: "ได้รับเงินตอบแทนพิเศษร้อยละ {} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "31",
+    name: "ปรับอัตราค่าจ้างลูกจ้างประจำกรุงเทพมหานคร ตามข้อบังคับกรุงเทพมหานครว่าด้วยการกำหนดอัตราค่าจ้างขั้นต่ำสุดและสูงสุดของลูกจ้าง พ.ศ. 2557",
+  },
+  {
+    id: "32",
+    name: "ปรับอัตราค่าจ้างลูกจ้างประจำกรุงเทพมหานครตามข้อบังคับกรุงเทพมหานครว่าด้วยการกำหนดอัตราค่าจ้างขั้นต่ำสุดและสูงสุดของลูกจ้าง (ฉบับที่ {}) พ.ศ. 2557",
+  },
+  {
+    id: "33",
+    name: "ปรับอัตราค่าจ้าง ตามหนังสือกระทรวงการคลังฯ ที่ กค 0428/ว 47 ลว. 29 พ.ค. 2558 และข้อบังคับ กทม. ว่าด้วยการกำหนดอัตราค่าจ้างฯ ตั้งแต่วันที่ 1 ธ.ค. 2557 ข้อ {} ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
 ]);
 const salaryClass = ref<string>();
 const salaryRef = ref<string>();
@@ -941,962 +893,964 @@ const tittleHistory = ref<string>("ประวัติแก้ไขตำแ
 const filterHistory = ref<string>(""); //search data table history
 const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
 const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
-const profileId = ref<string>(route.params.id.toString());
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
 const rows = ref<ResponseObjectEmployee[]>([]);
 const filter = ref<string>(""); //search data table
 const visibleColumns = ref<String[]>([]);
 profileData.salary.columns.length == 0
-	? (visibleColumns.value = [
-			"date",
-			"amount",
-			"positionSalaryAmount",
-			"mouthSalaryAmount",
-			"oc",
-			"positionEmployeePosition",
-			"posNo",
-			"positionEmployeePositionSide",
-			"positionEmployeeLevel",
-			"positionEmployeeGroup",
-			//   "salaryClass",
-			"salaryRef",
-			"refCommandNo",
-	  ])
-	: (visibleColumns.value = profileData.salary.columns);
+  ? (visibleColumns.value = [
+      "date",
+      "amount",
+      "positionSalaryAmount",
+      "mouthSalaryAmount",
+      "oc",
+      "positionEmployeePosition",
+      "posNo",
+      "positionEmployeePositionSide",
+      "positionEmployeeLevel",
+      "positionEmployeeGroup",
+      //   "salaryClass",
+      "salaryRef",
+      "refCommandNo",
+    ])
+  : (visibleColumns.value = profileData.salary.columns);
 const columns = ref<QTableProps["columns"]>([
-	{
-		name: "date",
-		align: "left",
-		label: "วัน เดือน ปี จ้างและแต่งตั้ง",
-		sortable: true,
-		field: "date",
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px",
-		sort: (a: string, b: string) =>
-			a.localeCompare(b, undefined, {
-				numeric: true,
-				sensitivity: "base",
-			}),
-	},
-	{
-		name: "amount",
-		align: "left",
-		label: "ค่าจ้าง",
-		sortable: true,
-		field: "amount",
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px",
-		sort: (a: string, b: string) =>
-			a.localeCompare(b, undefined, {
-				numeric: true,
-				sensitivity: "base",
-			}),
-	},
-	//   {
-	//     name: "positionSalaryAmount",
-	//     align: "left",
-	//     label: "เงินประจำตำแหน่ง",
-	//     sortable: true,
-	//     field: "positionSalaryAmount",
-	//     headerStyle: "font-size: 14px",
-	//     style: "font-size: 14px",
-	//     sort: (a: string, b: string) =>
-	//       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-	//   },
-	//   {
-	//     name: "mouthSalaryAmount",
-	//     align: "left",
-	//     label: "เงินค่าตอบแทนรายเดือน",
-	//     sortable: true,
-	//     field: "mouthSalaryAmount",
-	//     headerStyle: "font-size: 14px",
-	//     style: "font-size: 14px",
-	//     sort: (a: string, b: string) =>
-	//       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-	//   },
-	{
-		name: "oc",
-		align: "left",
-		label: "สังกัด",
-		sortable: true,
-		field: "oc",
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px",
-		sort: (a: string, b: string) =>
-			a.localeCompare(b, undefined, {
-				numeric: true,
-				sensitivity: "base",
-			}),
-	},
-	{
-		name: "positionEmployeePosition",
-		align: "left",
-		label: "ตำแหน่ง",
-		sortable: true,
-		field: "positionEmployeePosition",
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px",
-		sort: (a: string, b: string) =>
-			a.localeCompare(b, undefined, {
-				numeric: true,
-				sensitivity: "base",
-			}),
-	},
-	//   {
-	//     name: "posNo",
-	//     align: "left",
-	//     label: "ตำแหน่งเลขที่",
-	//     sortable: true,
-	//     field: "posNo",
-	//     headerStyle: "font-size: 14px",
-	//     style: "font-size: 14px",
-	//     sort: (a: string, b: string) =>
-	//       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-	//   },
-	{
-		name: "positionEmployeePositionSide",
-		align: "left",
-		label: "ด้านของตำแหน่ง",
-		sortable: true,
-		field: "positionEmployeePositionSide",
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px",
-		sort: (a: string, b: string) =>
-			a.localeCompare(b, undefined, {
-				numeric: true,
-				sensitivity: "base",
-			}),
-	},
-	//   {
-	//     name: "positionEmployeeLevel",
-	//     align: "left",
-	//     label: "ระดับ",
-	//     sortable: true,
-	//     field: "positionEmployeeLevel",
-	//     headerStyle: "font-size: 14px",
-	//     style: "font-size: 14px",
-	//     sort: (a: string, b: string) =>
-	//       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-	//   },
-	{
-		name: "positionEmployeeGroup",
-		align: "left",
-		label: "กลุ่มงาน",
-		sortable: true,
-		field: "positionEmployeeGroup",
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px",
-		sort: (a: string, b: string) =>
-			a.localeCompare(b, undefined, {
-				numeric: true,
-				sensitivity: "base",
-			}),
-	},
-	//   {
-	//     name: "salaryClass",
-	//     align: "left",
-	//     label: "ตำแหน่ง (รายละเอียด)",
-	//     sortable: true,
-	//     field: "salaryClass",
-	//     headerStyle: "font-size: 14px",
-	//     style: "font-size: 14px",
-	//     sort: (a: string, b: string) =>
-	//       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-	//   },
-	{
-		name: "salaryRef",
-		align: "left",
-		label: "เอกสารอ้างอิง",
-		sortable: true,
-		field: "salaryRef",
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px",
-		sort: (a: string, b: string) =>
-			a.localeCompare(b, undefined, {
-				numeric: true,
-				sensitivity: "base",
-			}),
-	},
-	{
-		name: "refCommandNo",
-		align: "left",
-		label: "เลขที่คำสั่ง",
-		sortable: true,
-		field: "refCommandNo",
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px",
-		sort: (a: string, b: string) =>
-			a.localeCompare(b, undefined, {
-				numeric: true,
-				sensitivity: "base",
-			}),
-	},
+  {
+    name: "date",
+    align: "left",
+    label: "วัน เดือน ปี จ้างและแต่งตั้ง",
+    sortable: true,
+    field: "date",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "amount",
+    align: "left",
+    label: "ค่าจ้าง",
+    sortable: true,
+    field: "amount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  //   {
+  //     name: "positionSalaryAmount",
+  //     align: "left",
+  //     label: "เงินประจำตำแหน่ง",
+  //     sortable: true,
+  //     field: "positionSalaryAmount",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //     sort: (a: string, b: string) =>
+  //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  //   },
+  //   {
+  //     name: "mouthSalaryAmount",
+  //     align: "left",
+  //     label: "เงินค่าตอบแทนรายเดือน",
+  //     sortable: true,
+  //     field: "mouthSalaryAmount",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //     sort: (a: string, b: string) =>
+  //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  //   },
+  {
+    name: "oc",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "oc",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "positionEmployeePosition",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "positionEmployeePosition",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  //   {
+  //     name: "posNo",
+  //     align: "left",
+  //     label: "ตำแหน่งเลขที่",
+  //     sortable: true,
+  //     field: "posNo",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //     sort: (a: string, b: string) =>
+  //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  //   },
+  {
+    name: "positionEmployeePositionSide",
+    align: "left",
+    label: "ด้านของตำแหน่ง",
+    sortable: true,
+    field: "positionEmployeePositionSide",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  //   {
+  //     name: "positionEmployeeLevel",
+  //     align: "left",
+  //     label: "ระดับ",
+  //     sortable: true,
+  //     field: "positionEmployeeLevel",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //     sort: (a: string, b: string) =>
+  //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  //   },
+  {
+    name: "positionEmployeeGroup",
+    align: "left",
+    label: "กลุ่มงาน",
+    sortable: true,
+    field: "positionEmployeeGroup",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  //   {
+  //     name: "salaryClass",
+  //     align: "left",
+  //     label: "ตำแหน่ง (รายละเอียด)",
+  //     sortable: true,
+  //     field: "salaryClass",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //     sort: (a: string, b: string) =>
+  //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  //   },
+  {
+    name: "salaryRef",
+    align: "left",
+    label: "เอกสารอ้างอิง",
+    sortable: true,
+    field: "salaryRef",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
 ]);
 const columnsHistory = ref<QTableProps["columns"]>([
-	{
-		name: "date",
-		align: "left",
-		label: "วัน เดือน ปี จ้างและแต่งตั้ง",
-		sortable: true,
-		field: "date",
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px",
-		sort: (a: string, b: string) =>
-			a.localeCompare(b, undefined, {
-				numeric: true,
-				sensitivity: "base",
-			}),
-	},
-	{
-		name: "amount",
-		align: "left",
-		label: "ค่าจ้าง",
-		sortable: true,
-		field: "amount",
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px",
-		sort: (a: string, b: string) =>
-			a.localeCompare(b, undefined, {
-				numeric: true,
-				sensitivity: "base",
-			}),
-	},
-	//   {
-	//     name: "positionSalaryAmount",
-	//     align: "left",
-	//     label: "เงินประจำตำแหน่ง",
-	//     sortable: true,
-	//     field: "positionSalaryAmount",
-	//     headerStyle: "font-size: 14px",
-	//     style: "font-size: 14px",
-	//     sort: (a: string, b: string) =>
-	//       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-	//   },
-	//   {
-	//     name: "mouthSalaryAmount",
-	//     align: "left",
-	//     label: "เงินค่าตอบแทนรายเดือน",
-	//     sortable: true,
-	//     field: "mouthSalaryAmount",
-	//     headerStyle: "font-size: 14px",
-	//     style: "font-size: 14px",
-	//     sort: (a: string, b: string) =>
-	//       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-	//   },
-	{
-		name: "oc",
-		align: "left",
-		label: "สังกัด",
-		sortable: true,
-		field: "oc",
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px",
-		sort: (a: string, b: string) =>
-			a.localeCompare(b, undefined, {
-				numeric: true,
-				sensitivity: "base",
-			}),
-	},
-	{
-		name: "positionEmployeePosition",
-		align: "left",
-		label: "ตำแหน่ง",
-		sortable: true,
-		field: "positionEmployeePosition",
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px",
-		sort: (a: string, b: string) =>
-			a.localeCompare(b, undefined, {
-				numeric: true,
-				sensitivity: "base",
-			}),
-	},
-	//   {
-	//     name: "posNo",
-	//     align: "left",
-	//     label: "ตำแหน่งเลขที่",
-	//     sortable: true,
-	//     field: "posNo",
-	//     headerStyle: "font-size: 14px",
-	//     style: "font-size: 14px",
-	//     sort: (a: string, b: string) =>
-	//       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-	//   },
-	{
-		name: "positionEmployeePositionSide",
-		align: "left",
-		label: "ด้านของตำแหน่ง",
-		sortable: true,
-		field: "positionEmployeePositionSide",
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px",
-		sort: (a: string, b: string) =>
-			a.localeCompare(b, undefined, {
-				numeric: true,
-				sensitivity: "base",
-			}),
-	},
-	//   {
-	//     name: "positionEmployeeLevel",
-	//     align: "left",
-	//     label: "ระดับ",
-	//     sortable: true,
-	//     field: "positionEmployeeLevel",
-	//     headerStyle: "font-size: 14px",
-	//     style: "font-size: 14px",
-	//     sort: (a: string, b: string) =>
-	//       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-	//   },
-	{
-		name: "positionEmployeeGroup",
-		align: "left",
-		label: "กลุ่มงาน",
-		sortable: true,
-		field: "positionEmployeeGroup",
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px",
-		sort: (a: string, b: string) =>
-			a.localeCompare(b, undefined, {
-				numeric: true,
-				sensitivity: "base",
-			}),
-	},
-	//   {
-	//     name: "salaryClass",
-	//     align: "left",
-	//     label: "ตำแหน่ง (รายละเอียด)",
-	//     sortable: true,
-	//     field: "salaryClass",
-	//     headerStyle: "font-size: 14px",
-	//     style: "font-size: 14px",
-	//     sort: (a: string, b: string) =>
-	//       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-	//   },
-	{
-		name: "salaryRef",
-		align: "left",
-		label: "เอกสารอ้างอิง",
-		sortable: true,
-		field: "salaryRef",
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px",
-		sort: (a: string, b: string) =>
-			a.localeCompare(b, undefined, {
-				numeric: true,
-				sensitivity: "base",
-			}),
-	},
-	{
-		name: "refCommandNo",
-		align: "left",
-		label: "เลขที่คำสั่ง",
-		sortable: true,
-		field: "refCommandNo",
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px",
-		sort: (a: string, b: string) =>
-			a.localeCompare(b, undefined, {
-				numeric: true,
-				sensitivity: "base",
-			}),
-	},
-	{
-		name: "createdFullName",
-		align: "left",
-		label: "ผู้ดำเนินการ",
-		sortable: true,
-		field: "createdFullName",
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px",
-		sort: (a: string, b: string) =>
-			a.localeCompare(b, undefined, {
-				numeric: true,
-				sensitivity: "base",
-			}),
-	},
-	{
-		name: "createdAt",
-		align: "left",
-		label: "วันที่แก้ไข",
-		sortable: true,
-		field: "createdAt",
-		headerStyle: "font-size: 14px",
-		style: "font-size: 14px",
-		sort: (a: string, b: string) =>
-			a.localeCompare(b, undefined, {
-				numeric: true,
-				sensitivity: "base",
-			}),
-	},
+  {
+    name: "date",
+    align: "left",
+    label: "วัน เดือน ปี จ้างและแต่งตั้ง",
+    sortable: true,
+    field: "date",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "amount",
+    align: "left",
+    label: "ค่าจ้าง",
+    sortable: true,
+    field: "amount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  //   {
+  //     name: "positionSalaryAmount",
+  //     align: "left",
+  //     label: "เงินประจำตำแหน่ง",
+  //     sortable: true,
+  //     field: "positionSalaryAmount",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //     sort: (a: string, b: string) =>
+  //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  //   },
+  //   {
+  //     name: "mouthSalaryAmount",
+  //     align: "left",
+  //     label: "เงินค่าตอบแทนรายเดือน",
+  //     sortable: true,
+  //     field: "mouthSalaryAmount",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //     sort: (a: string, b: string) =>
+  //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  //   },
+  {
+    name: "oc",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "oc",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "positionEmployeePosition",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "positionEmployeePosition",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  //   {
+  //     name: "posNo",
+  //     align: "left",
+  //     label: "ตำแหน่งเลขที่",
+  //     sortable: true,
+  //     field: "posNo",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //     sort: (a: string, b: string) =>
+  //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  //   },
+  {
+    name: "positionEmployeePositionSide",
+    align: "left",
+    label: "ด้านของตำแหน่ง",
+    sortable: true,
+    field: "positionEmployeePositionSide",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  //   {
+  //     name: "positionEmployeeLevel",
+  //     align: "left",
+  //     label: "ระดับ",
+  //     sortable: true,
+  //     field: "positionEmployeeLevel",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //     sort: (a: string, b: string) =>
+  //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  //   },
+  {
+    name: "positionEmployeeGroup",
+    align: "left",
+    label: "กลุ่มงาน",
+    sortable: true,
+    field: "positionEmployeeGroup",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  //   {
+  //     name: "salaryClass",
+  //     align: "left",
+  //     label: "ตำแหน่ง (รายละเอียด)",
+  //     sortable: true,
+  //     field: "salaryClass",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //     sort: (a: string, b: string) =>
+  //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  //   },
+  {
+    name: "salaryRef",
+    align: "left",
+    label: "เอกสารอ้างอิง",
+    sortable: true,
+    field: "salaryRef",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "createdFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
 ]);
 const visibleColumnsHistory = ref<String[]>([
-	"date",
-	"amount",
-	"positionSalaryAmount",
-	"mouthSalaryAmount",
-	"oc",
-	"positionEmployeePosition",
-	"posNo",
-	"positionEmployeePositionSide",
-	"positionEmployeeLevel",
-	"positionEmployeeGroup",
-	//   "salaryClass",
-	"salaryRef",
-	"refCommandNo",
-	"createdFullName",
-	"createdAt",
+  "date",
+  "amount",
+  "positionSalaryAmount",
+  "mouthSalaryAmount",
+  "oc",
+  "positionEmployeePosition",
+  "posNo",
+  "positionEmployeePositionSide",
+  "positionEmployeeLevel",
+  "positionEmployeeGroup",
+  //   "salaryClass",
+  "salaryRef",
+  "refCommandNo",
+  "createdFullName",
+  "createdAt",
 ]);
 
 watch(visibleColumns, async (count: String[], prevCount: String[]) => {
-	await changeProfileColumns("salary", count);
+  await changeProfileColumns("salary", count);
 });
 
 onMounted(async () => {
-	await fetchData();
-	await fetchDataSelector();
+  await fetchData();
+  await fetchDataSelector();
 });
 
 const fetchDataSelector = async () => {
-	loaderPage(true);
-	await fetchEmployeePosition();
-	await fetchEmployeePositionSide();
-	await fetchEmployeeLevel();
-	await fetchEmployeeGroup();
-	await fetchAgency();
-	await nodeTree();
-	loaderPage(false);
+  loaderPage(true);
+  await fetchEmployeePosition();
+  await fetchEmployeePositionSide();
+  await fetchEmployeeLevel();
+  await fetchEmployeeGroup();
+  await fetchAgency();
+  await nodeTree();
+  loaderPage(false);
 };
 // ตำแหน่ง
 const fetchEmployeePosition = async () => {
-	await http
-		.get(config.API.positionEmployeePosition)
-		.then((res) => {
-			const data = res.data.result;
-			let option: DataOption[] = [];
-			data.map((r: DataOption) => {
-				option.push({ id: r.id.toString(), name: r.name.toString() });
-			});
+  await http
+    .get(config.API.positionEmployeePosition)
+    .then((res) => {
+      const data = res.data.result;
+      let option: DataOption[] = [];
+      data.map((r: DataOption) => {
+        option.push({ id: r.id.toString(), name: r.name.toString() });
+      });
 
-			employeePositionOptions.value = option;
-			employeePositionOptionsFilter.value = option;
-		})
-		.catch((e) => {
-			messageError($q, e);
-		});
+      employeePositionOptions.value = option;
+      employeePositionOptionsFilter.value = option;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
 };
 // ด้านของตำแหน่ง
 const fetchEmployeePositionSide = async () => {
-	await http
-		.get(config.API.positionEmployeePositionSide)
-		.then((res) => {
-			const data = res.data.result;
-			let option: DataOption[] = [];
-			data.map((r: DataOption) => {
-				option.push({ id: r.id.toString(), name: r.name.toString() });
-			});
+  await http
+    .get(config.API.positionEmployeePositionSide)
+    .then((res) => {
+      const data = res.data.result;
+      let option: DataOption[] = [];
+      data.map((r: DataOption) => {
+        option.push({ id: r.id.toString(), name: r.name.toString() });
+      });
 
-			employeePositionSideOptions.value = option;
-			employeePositionSideOptionsFilter.value = option;
-		})
-		.catch((e) => {
-			messageError($q, e);
-		});
+      employeePositionSideOptions.value = option;
+      employeePositionSideOptionsFilter.value = option;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
 };
 // ระดับ
 const fetchEmployeeLevel = async () => {
-	await http
-		.get(config.API.positionEmployeeLevel)
-		.then((res) => {
-			const data = res.data.result;
-			let option: DataOption[] = [];
-			data.map((r: DataOption) => {
-				option.push({ id: r.id.toString(), name: r.name.toString() });
-			});
+  await http
+    .get(config.API.positionEmployeeLevel)
+    .then((res) => {
+      const data = res.data.result;
+      let option: DataOption[] = [];
+      data.map((r: DataOption) => {
+        option.push({ id: r.id.toString(), name: r.name.toString() });
+      });
 
-			employeeLevelOptions.value = option;
-			employeeLevelOptionsFilter.value = option;
-		})
-		.catch((e) => {
-			messageError($q, e);
-		});
+      employeeLevelOptions.value = option;
+      employeeLevelOptionsFilter.value = option;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
 };
 // กลุ่มงาน
 const fetchEmployeeGroup = async () => {
-	await http
-		.get(config.API.positionEmployeeGroup)
-		.then((res) => {
-			const data = res.data.result;
-			let option: DataOption[] = [];
-			data.map((r: DataOption) => {
-				option.push({ id: r.id.toString(), name: r.name.toString() });
-			});
+  await http
+    .get(config.API.positionEmployeeGroup)
+    .then((res) => {
+      const data = res.data.result;
+      let option: DataOption[] = [];
+      data.map((r: DataOption) => {
+        option.push({ id: r.id.toString(), name: r.name.toString() });
+      });
 
-			employeeGroupOptions.value = option;
-			employeeGroupOptionsFilter.value = option;
-		})
-		.catch((e) => {
-			messageError($q, e);
-		});
+      employeeGroupOptions.value = option;
+      employeeGroupOptionsFilter.value = option;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
 };
 
 // สังกัด
 const fetchAgency = async () => {
-	await http
-		.get(config.API.organizationRoot)
-		.then((res) => {
-			const data = res.data.result;
-			let option: DataOption[] = [];
-			data.map((r: any) => {
-				option.push({ id: r.id.toString(), name: r.label.toString() });
-			});
+  await http
+    .get(config.API.organizationRoot)
+    .then((res) => {
+      const data = res.data.result;
+      let option: DataOption[] = [];
+      data.map((r: any) => {
+        option.push({ id: r.id.toString(), name: r.label.toString() });
+      });
 
-			agencyOptions.value = option;
-			agencyOptionsFilter.value = option;
-		})
-		.catch((e) => {
-			messageError($q, e);
-		});
+      agencyOptions.value = option;
+      agencyOptionsFilter.value = option;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
 };
 
 const nodeTree = async () => {
-	loaderPage(true);
-	await http
-		.get(config.API.profileOrganizRoot)
-		.then((res: any) => {
-			const data = res.data.result;
-			nodesTree.value = data;
-			if (data.length > 0) {
-				expanded.value = [data[0].id];
-			}
-		})
-		.catch((e) => {
-			messageError($q, e);
-		})
-		.finally(() => {
-			loaderPage(false);
-		});
+  loaderPage(true);
+  await http
+    .get(config.API.profileOrganizRoot)
+    .then((res: any) => {
+      const data = res.data.result;
+      nodesTree.value = data;
+      if (data.length > 0) {
+        expanded.value = [data[0].id];
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
 };
 
 const selectAgency = (val: string) => {
-	fetchPositionNumber(val);
-	clickEditRow();
+  fetchPositionNumber(val);
+  clickEditRow();
 };
 
 const filterSelector = (val: any, update: Function, filtername: string) => {
-	switch (filtername) {
-		case "posNo":
-			update(() => {
-				posNoOptions.value = posNoOptionsFilter.value.filter(
-					(v: DataOption) => v.name.indexOf(val) > -1
-				);
-			});
-			break;
-		case "employeePosition":
-			update(() => {
-				employeePositionOptions.value =
-					employeePositionOptionsFilter.value.filter(
-						(v: DataOption) => v.name.indexOf(val) > -1
-					);
-			});
-			break;
-		case "employeePositionSide":
-			update(() => {
-				employeePositionSideOptions.value =
-					employeePositionSideOptionsFilter.value.filter(
-						(v: DataOption) => v.name.indexOf(val) > -1
-					);
-			});
-			break;
-		case "employeeLevel":
-			update(() => {
-				employeeLevelOptions.value =
-					employeeLevelOptionsFilter.value.filter(
-						(v: DataOption) => v.name.indexOf(val) > -1
-					);
-			});
-			break;
+  switch (filtername) {
+    case "posNo":
+      update(() => {
+        posNoOptions.value = posNoOptionsFilter.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "employeePosition":
+      update(() => {
+        employeePositionOptions.value =
+          employeePositionOptionsFilter.value.filter(
+            (v: DataOption) => v.name.indexOf(val) > -1
+          );
+      });
+      break;
+    case "employeePositionSide":
+      update(() => {
+        employeePositionSideOptions.value =
+          employeePositionSideOptionsFilter.value.filter(
+            (v: DataOption) => v.name.indexOf(val) > -1
+          );
+      });
+      break;
+    case "employeeLevel":
+      update(() => {
+        employeeLevelOptions.value = employeeLevelOptionsFilter.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
 
-		case "employeeGroup":
-			update(() => {
-				employeeGroupOptions.value =
-					employeeGroupOptionsFilter.value.filter(
-						(v: DataOption) => v.name.indexOf(val) > -1
-					);
-			});
-			break;
-		case "agency":
-			update(() => {
-				agencyOptions.value = agencyOptionsFilter.value.filter(
-					(v: DataOption) => v.name.indexOf(val) > -1
-				);
-			});
-			break;
+    case "employeeGroup":
+      update(() => {
+        employeeGroupOptions.value = employeeGroupOptionsFilter.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "agency":
+      update(() => {
+        agencyOptions.value = agencyOptionsFilter.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
 
-		case "ref":
-			update(() => {
-				refOptions.value = refOptionsFilter.value.filter(
-					(v: DataOption) => v.name.indexOf(val) > -1
-				);
-			});
-			break;
+    case "ref":
+      update(() => {
+        refOptions.value = refOptionsFilter.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
 
-		default:
-			break;
-	}
+    default:
+      break;
+  }
 };
 
 const fetchData = async () => {
-	loaderPage(true);
-	await http
-		.get(config.API.profileSalaryEmployeeId(profileId.value))
-		.then((res) => {
-			const data = res.data.result;
-			//   console.log(data);
-			rows.value = [];
-			data.map((e: ResponseObjectEmployee) => {
-				rows.value.push({
-					id: e.id,
-					date: new Date(e.date),
-					amount: e.amount,
-					positionSalaryAmount: e.positionSalaryAmount,
-					mouthSalaryAmount: e.mouthSalaryAmount,
-					oc: e.oc,
-					ocId: e.ocId,
-					posNo: e.posNo,
-					posNoId: e.posNoId,
-					posNoEmployee: e.posNoEmployee,
-					positionEmployeeGroup: e.positionEmployeeGroup,
-					positionEmployeeGroupId: e.positionEmployeeGroupId,
-					positionEmployeeLevel: e.positionEmployeeLevel,
-					positionEmployeeLevelId: e.positionEmployeeLevelId,
-					positionEmployeePosition: e.positionEmployeePosition,
-					positionEmployeePositionId: e.positionEmployeePositionId,
-					positionEmployeePositionSide:
-						e.positionEmployeePositionSide,
-					positionEmployeePositionSideId:
-						e.positionEmployeePositionSideId,
-					salaryClass: e.salaryClass,
-					salaryRef: e.salaryRef,
-					refCommandNo: e.refCommandNo,
-					createdFullName: e.createdFullName,
-					createdAt: new Date(e.createdAt),
-				});
-			});
-		})
-		.catch((e) => {
-			messageError($q, e);
-		})
-		.finally(() => {
-			loaderPage(false);
-		});
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .get(config.API.profileSalaryEmployeeId(profileId.value))
+      .then((res) => {
+        const data = res.data.result;
+        //   console.log(data);
+        rows.value = [];
+        data.map((e: ResponseObjectEmployee) => {
+          rows.value.push({
+            id: e.id,
+            date: new Date(e.date),
+            amount: e.amount,
+            positionSalaryAmount: e.positionSalaryAmount,
+            mouthSalaryAmount: e.mouthSalaryAmount,
+            oc: e.oc,
+            ocId: e.ocId,
+            posNo: e.posNo,
+            posNoId: e.posNoId,
+            posNoEmployee: e.posNoEmployee,
+            positionEmployeeGroup: e.positionEmployeeGroup,
+            positionEmployeeGroupId: e.positionEmployeeGroupId,
+            positionEmployeeLevel: e.positionEmployeeLevel,
+            positionEmployeeLevelId: e.positionEmployeeLevelId,
+            positionEmployeePosition: e.positionEmployeePosition,
+            positionEmployeePositionId: e.positionEmployeePositionId,
+            positionEmployeePositionSide: e.positionEmployeePositionSide,
+            positionEmployeePositionSideId: e.positionEmployeePositionSideId,
+            salaryClass: e.salaryClass,
+            salaryRef: e.salaryRef,
+            refCommandNo: e.refCommandNo,
+            createdFullName: e.createdFullName,
+            createdAt: new Date(e.createdAt),
+          });
+        });
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        loaderPage(false);
+      });
+  }
 };
 
 const fetchPositionNumber = async (id: string) => {
-	//   loaderPage(true);
-	if (id == null || id == "") return;
-	await http
-		.get(config.API.getPositionNumberIdByOcId(id))
-		.then((res) => {
-			const data = res.data.result;
-			let option: DataOption[] = [];
-			data.map((r: DataOption) => {
-				option.push({ id: r.id.toString(), name: r.name.toString() });
-			});
-			posNoOptions.value = option;
-			posNoOptionsFilter.value = option;
-		})
-		.catch((e) => {
-			messageError($q, e);
-		})
-		.finally(() => {
-			loaderPage(false);
-		});
+  //   loaderPage(true);
+  if (id == null || id == "") return;
+  await http
+    .get(config.API.getPositionNumberIdByOcId(id))
+    .then((res) => {
+      const data = res.data.result;
+      let option: DataOption[] = [];
+      data.map((r: DataOption) => {
+        option.push({ id: r.id.toString(), name: r.name.toString() });
+      });
+      posNoOptions.value = option;
+      posNoOptionsFilter.value = option;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
 };
 
 /**
  * กดดูข้อมูลก่อนหน้า
  */
 const clickPrevious = async () => {
-	edit.value = false;
-	rowIndex.value -= 1;
-	await getData();
-	await checkRowPage();
+  edit.value = false;
+  rowIndex.value -= 1;
+  await getData();
+  await checkRowPage();
 };
 
 /**
  * กดดูข้อมูลต่อไป
  */
 const clickNext = async () => {
-	edit.value = false;
-	rowIndex.value += 1;
-	await getData();
-	await checkRowPage();
+  edit.value = false;
+  rowIndex.value += 1;
+  await getData();
+  await checkRowPage();
 };
 
 /**
  * กดดูข้อมูลต่อไป
  */
 const getData = async () => {
-	const row = rows.value[rowIndex.value];
-	date.value = row.date;
-	amount.value = row.amount;
-	positionSalaryAmount.value = row.positionSalaryAmount;
-	mouthSalaryAmount.value = row.mouthSalaryAmount;
-	selected.value = row.ocId;
-	//   positionId.value = row.positionId;
-	//   posNoId.value = row.posNoId;
-	//   positionLineId.value = row.positionLineId;
-	//   positionPathSideId.value = row.positionPathSideId;
-	//   positionTypeId.value = row.positionTypeId;
-	//   positionLevelId.value = row.positionLevelId;
-	//   positionExecutiveId.value = row.positionExecutiveId;
-	//   positionExecutiveSideId.value = row.positionExecutiveSideId;
-	posNoId.value = row.posNoId ?? "";
-	posNoEmployee.value = row.posNoEmployee ?? "";
-	employeePositionId.value = row.positionEmployeePositionId ?? "";
-	employeePositionSideId.value = row.positionEmployeePositionSideId ?? "";
-	employeeLevelId.value = row.positionEmployeeLevelId ?? "";
-	employeeGroupId.value = row.positionEmployeeGroupId ?? "";
-	agencyId.value = row.ocId ?? "";
+  const row = rows.value[rowIndex.value];
+  date.value = row.date;
+  amount.value = row.amount;
+  positionSalaryAmount.value = row.positionSalaryAmount;
+  mouthSalaryAmount.value = row.mouthSalaryAmount;
+  selected.value = row.ocId;
+  //   positionId.value = row.positionId;
+  //   posNoId.value = row.posNoId;
+  //   positionLineId.value = row.positionLineId;
+  //   positionPathSideId.value = row.positionPathSideId;
+  //   positionTypeId.value = row.positionTypeId;
+  //   positionLevelId.value = row.positionLevelId;
+  //   positionExecutiveId.value = row.positionExecutiveId;
+  //   positionExecutiveSideId.value = row.positionExecutiveSideId;
+  posNoId.value = row.posNoId ?? "";
+  posNoEmployee.value = row.posNoEmployee ?? "";
+  employeePositionId.value = row.positionEmployeePositionId ?? "";
+  employeePositionSideId.value = row.positionEmployeePositionSideId ?? "";
+  employeeLevelId.value = row.positionEmployeeLevelId ?? "";
+  employeeGroupId.value = row.positionEmployeeGroupId ?? "";
+  agencyId.value = row.ocId ?? "";
 
-	salaryClass.value = row.salaryClass ?? "";
-	salaryRef.value = row.salaryRef ?? "";
-	refCommandNo.value = row.refCommandNo ?? "";
-	id.value = row.id;
-	await fetchPositionNumber(row.ocId ?? "");
+  salaryClass.value = row.salaryClass ?? "";
+  salaryRef.value = row.salaryRef ?? "";
+  refCommandNo.value = row.refCommandNo ?? "";
+  id.value = row.id;
+  await fetchPositionNumber(row.ocId ?? "");
 };
 
 /**
  * เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
  */
 const checkRowPage = () => {
-	editRow.value = false;
-	next.value = true;
-	previous.value = true;
-	//   console.log(rowIndex.value);
-	if (rowIndex.value + 1 >= rows.value.length) {
-		next.value = false;
-	}
-	if (rowIndex.value - 1 < 0) {
-		previous.value = false;
-	}
+  editRow.value = false;
+  next.value = true;
+  previous.value = true;
+  //   console.log(rowIndex.value);
+  if (rowIndex.value + 1 >= rows.value.length) {
+    next.value = false;
+  }
+  if (rowIndex.value - 1 < 0) {
+    previous.value = false;
+  }
 };
 
 /**
  * กดปุ่มแก้ไขใน dialog
  */
 const clickEdit = () => {
-	editRow.value = false;
-	next.value = false;
-	previous.value = false;
+  editRow.value = false;
+  next.value = false;
+  previous.value = false;
 };
 
 /**
  * กดปุ่มเพิ่มด้านบน table
  */
 const clickAdd = async () => {
-	editRow.value = false;
-	await addData();
+  editRow.value = false;
+  await addData();
 };
 
 /**
  * gen ตำแหน่ง (รายละเอียด)
  */
 const templateDetail = async () => {
-	//   salaryClass.value = "";
-	//   if (ocId.value != "") {
-	//     salaryClass.value = salaryClass.value + `สังกัด${ocId.value} `;
-	//   }
-	//   const positionF = positionOptions.value.filter(
-	//     (r: DataOption) => r.id == positionId.value
-	//   );
-	//   if (positionF.length > 0) {
-	//     salaryClass.value = salaryClass.value + `ตำแหน่ง${positionF[0].name} `;
-	//   }
-	//   const posNoF = posNoOptions.value.filter(
-	//     (r: DataOption) => r.id == posNoId.value
-	//   );
-	//   if (posNoF.length > 0) {
-	//     salaryClass.value = salaryClass.value + `ตำแหน่งเลขที่${posNoF[0].name} `;
-	//   }
-	//   const positionLineF = positionLineOptions.value.filter(
-	//     (r: DataOption) => r.id == positionLineId.value
-	//   );
-	//   if (positionLineF.length > 0) {
-	//     salaryClass.value = salaryClass.value + `สายงาน${positionLineF[0].name} `;
-	//   }
-	//   const positionPathSideF = positionSideOptions.value.filter(
-	//     (r: DataOption) => r.id == positionPathSideId.value
-	//   );
-	//   if (positionPathSideF.length > 0) {
-	//     salaryClass.value =
-	//       salaryClass.value + `ด้าน/สาขา${positionPathSideF[0].name} `;
-	//   }
-	//   const positionTypeF = positionTypeOptions.value.filter(
-	//     (r: DataOption) => r.id == positionTypeId.value
-	//   );
-	//   if (positionTypeF.length > 0) {
-	//     salaryClass.value =
-	//       salaryClass.value + `ตำแหน่งประเภท${positionTypeF[0].name} `;
-	//   }
-	//   const positionLevelF = positionLevelOptions.value.filter(
-	//     (r: DataOption) => r.id == positionLevelId.value
-	//   );
-	//   if (positionLevelF.length > 0) {
-	//     salaryClass.value = salaryClass.value + `ระดับ${positionLevelF[0].name} `;
-	//   }
-	//   const positionExecutiveF = positionExecutiveOptions.value.filter(
-	//     (r: DataOption) => r.id == positionExecutiveId.value
-	//   );
-	//   if (positionExecutiveF.length > 0) {
-	//     salaryClass.value =
-	//       salaryClass.value + `ตำแหน่งทางการบริหาร${positionExecutiveF[0].name} `;
-	//   }
+  //   salaryClass.value = "";
+  //   if (ocId.value != "") {
+  //     salaryClass.value = salaryClass.value + `สังกัด${ocId.value} `;
+  //   }
+  //   const positionF = positionOptions.value.filter(
+  //     (r: DataOption) => r.id == positionId.value
+  //   );
+  //   if (positionF.length > 0) {
+  //     salaryClass.value = salaryClass.value + `ตำแหน่ง${positionF[0].name} `;
+  //   }
+  //   const posNoF = posNoOptions.value.filter(
+  //     (r: DataOption) => r.id == posNoId.value
+  //   );
+  //   if (posNoF.length > 0) {
+  //     salaryClass.value = salaryClass.value + `ตำแหน่งเลขที่${posNoF[0].name} `;
+  //   }
+  //   const positionLineF = positionLineOptions.value.filter(
+  //     (r: DataOption) => r.id == positionLineId.value
+  //   );
+  //   if (positionLineF.length > 0) {
+  //     salaryClass.value = salaryClass.value + `สายงาน${positionLineF[0].name} `;
+  //   }
+  //   const positionPathSideF = positionSideOptions.value.filter(
+  //     (r: DataOption) => r.id == positionPathSideId.value
+  //   );
+  //   if (positionPathSideF.length > 0) {
+  //     salaryClass.value =
+  //       salaryClass.value + `ด้าน/สาขา${positionPathSideF[0].name} `;
+  //   }
+  //   const positionTypeF = positionTypeOptions.value.filter(
+  //     (r: DataOption) => r.id == positionTypeId.value
+  //   );
+  //   if (positionTypeF.length > 0) {
+  //     salaryClass.value =
+  //       salaryClass.value + `ตำแหน่งประเภท${positionTypeF[0].name} `;
+  //   }
+  //   const positionLevelF = positionLevelOptions.value.filter(
+  //     (r: DataOption) => r.id == positionLevelId.value
+  //   );
+  //   if (positionLevelF.length > 0) {
+  //     salaryClass.value = salaryClass.value + `ระดับ${positionLevelF[0].name} `;
+  //   }
+  //   const positionExecutiveF = positionExecutiveOptions.value.filter(
+  //     (r: DataOption) => r.id == positionExecutiveId.value
+  //   );
+  //   if (positionExecutiveF.length > 0) {
+  //     salaryClass.value =
+  //       salaryClass.value + `ตำแหน่งทางการบริหาร${positionExecutiveF[0].name} `;
+  //   }
 };
 
 /**
  * กดบันทึกใน dialog
  */
 const clickSave = async () => {
-	myForm.value.validate().then(async (result: boolean) => {
-		if (result) {
-			if (modalEdit.value) {
-				await editData();
-			} else {
-				await saveData();
-			}
-		}
-	});
+  myForm.value.validate().then(async (result: boolean) => {
+    if (result) {
+      if (modalEdit.value) {
+        await editData();
+      } else {
+        await saveData();
+      }
+    }
+  });
 };
 
 /**
  * บันทึกเพิ่มข้อมูล
  */
 const saveData = async () => {
-	loaderPage(true);
-	await http
-		.post(config.API.profileSalaryEmployeeId(profileId.value), {
-			amount: amount.value,
-			date: dateToISO(date.value),
-			positionSalaryAmount: positionSalaryAmount.value,
-			mouthSalaryAmount: mouthSalaryAmount.value,
-			ocId: agencyId.value,
-			//   posNoId: posNoId.value,
-			posNoEmployee: posNoEmployee.value,
-			positionEmployeeGroupId: employeeGroupId.value,
-			positionEmployeeLevelId: employeeLevelId.value,
-			positionEmployeePositionId: employeePositionId.value,
-			positionEmployeePositionSideId: employeePositionSideId.value,
-			salaryClass: salaryClass.value,
-			salaryRef: salaryRef.value,
-			refCommandNo: refCommandNo.value,
-		})
-		.then((res) => {
-			success($q, "บันทึกข้อมูลสำเร็จ");
-			modal.value = false;
-		})
-		.catch((e) => {
-			messageError($q, e);
-		})
-		.finally(async () => {
-			await fetchData();
-		});
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .post(config.API.profileSalaryEmployeeId(profileId.value), {
+        amount: amount.value,
+        date: dateToISO(date.value),
+        positionSalaryAmount: positionSalaryAmount.value,
+        mouthSalaryAmount: mouthSalaryAmount.value,
+        ocId: agencyId.value,
+        //   posNoId: posNoId.value,
+        posNoEmployee: posNoEmployee.value,
+        positionEmployeeGroupId: employeeGroupId.value,
+        positionEmployeeLevelId: employeeLevelId.value,
+        positionEmployeePositionId: employeePositionId.value,
+        positionEmployeePositionSideId: employeePositionSideId.value,
+        salaryClass: salaryClass.value,
+        salaryRef: salaryRef.value,
+        refCommandNo: refCommandNo.value,
+      })
+      .then((res) => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        modal.value = false;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await fetchData();
+      });
+  }
 };
 
 /**
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-	loaderPage(true);
-	await http
-		.put(config.API.profileSalaryEmployeeId(id.value), {
-			amount: amount.value,
-			date: dateToISO(date.value),
-			positionSalaryAmount: positionSalaryAmount.value,
-			mouthSalaryAmount: mouthSalaryAmount.value,
-			ocId: agencyId.value,
-			//   posNoId: posNoId.value,
-			posNoEmployee: posNoEmployee.value,
-			positionEmployeeGroupId: employeeGroupId.value,
-			positionEmployeeLevelId: employeeLevelId.value,
-			positionEmployeePositionId: employeePositionId.value,
-			positionEmployeePositionSideId: employeePositionSideId.value,
-			salaryClass: salaryClass.value,
-			salaryRef: salaryRef.value,
-			refCommandNo: refCommandNo.value,
-		})
-		.then((res) => {
-			success($q, "บันทึกข้อมูลสำเร็จ");
-			modal.value = false;
-		})
-		.catch((e) => {
-			messageError($q, e);
-		})
-		.finally(async () => {
-			await fetchData();
-		});
+  loaderPage(true);
+  await http
+    .put(config.API.profileSalaryEmployeeId(id.value), {
+      amount: amount.value,
+      date: dateToISO(date.value),
+      positionSalaryAmount: positionSalaryAmount.value,
+      mouthSalaryAmount: mouthSalaryAmount.value,
+      ocId: agencyId.value,
+      //   posNoId: posNoId.value,
+      posNoEmployee: posNoEmployee.value,
+      positionEmployeeGroupId: employeeGroupId.value,
+      positionEmployeeLevelId: employeeLevelId.value,
+      positionEmployeePositionId: employeePositionId.value,
+      positionEmployeePositionSideId: employeePositionSideId.value,
+      salaryClass: salaryClass.value,
+      salaryRef: salaryRef.value,
+      refCommandNo: refCommandNo.value,
+    })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      modal.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
 };
 
 /**
  * ลบข้อมูล
  */
 const fetchDataDelete = async () => {
-	loaderPage(true);
-	await http
-		.delete(config.API.profileSalaryId(id.value))
-		.then((res) => {
-			success($q, "ลบข้อมูลสำเร็จ");
-			modal.value = false;
-		})
-		.catch((e) => {
-			messageError($q, e);
-		})
-		.finally(async () => {
-			await fetchData();
-		});
+  loaderPage(true);
+  await http
+    .delete(config.API.profileSalaryId(id.value))
+    .then((res) => {
+      success($q, "ลบข้อมูลสำเร็จ");
+      modal.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
 };
 
 /**
  *  dialog ลบข้อมูล
  */
 const clickDelete = async () => {
-	dialogMessage(
-		$q,
-		"ลบข้อมูล",
-		"ต้องการทำการลบข้อมูลนี้ใช่หรือไม่",
-		"delete",
-		"ยืนยัน",
-		"red",
-		async () => await fetchDataDelete(),
-		async () => await fetchData(),
-		false
-	);
+  dialogMessage(
+    $q,
+    "ลบข้อมูล",
+    "ต้องการทำการลบข้อมูลนี้ใช่หรือไม่",
+    "delete",
+    "ยืนยัน",
+    "red",
+    async () => await fetchDataDelete(),
+    async () => await fetchData(),
+    false
+  );
 };
 
 /**
  * กดปิด dialog
  */
 const clickClose = async () => {
-	if (editRow.value == true) {
-		dialogMessage(
-			$q,
-			"ข้อมูลมีการแก้ไข",
-			"ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?",
-			"info",
-			"ยืนยัน",
-			"primary",
-			async () => {
-				modal.value = false;
-				next.value = false;
-				previous.value = false;
-			},
-			undefined,
-			false
-		);
-	} else {
-		modal.value = false;
-		next.value = false;
-		previous.value = false;
-	}
+  if (editRow.value == true) {
+    dialogMessage(
+      $q,
+      "ข้อมูลมีการแก้ไข",
+      "ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?",
+      "info",
+      "ยืนยัน",
+      "primary",
+      async () => {
+        modal.value = false;
+        next.value = false;
+        previous.value = false;
+      },
+      undefined,
+      false
+    );
+  } else {
+    modal.value = false;
+    next.value = false;
+    previous.value = false;
+  }
 };
 
 /**
@@ -1904,105 +1858,104 @@ const clickClose = async () => {
  * @param props ค่า props ใน row ที่เลือก
  */
 const selectData = async (props: DataPropsEmployee) => {
-	//   console.log(props.row);
-	modalEdit.value = true;
-	modal.value = true;
-	edit.value = false;
-	rawItem.value = props.row;
-	rowIndex.value = props.rowIndex;
-	date.value = props.row.date;
-	amount.value = props.row.amount;
-	positionSalaryAmount.value = props.row.positionSalaryAmount;
-	mouthSalaryAmount.value = props.row.mouthSalaryAmount;
+  //   console.log(props.row);
+  modalEdit.value = true;
+  modal.value = true;
+  edit.value = false;
+  rawItem.value = props.row;
+  rowIndex.value = props.rowIndex;
+  date.value = props.row.date;
+  amount.value = props.row.amount;
+  positionSalaryAmount.value = props.row.positionSalaryAmount;
+  mouthSalaryAmount.value = props.row.mouthSalaryAmount;
 
-	posNoId.value = props.row.posNoId ?? "";
-	posNoEmployee.value = props.row.posNoEmployee ?? "";
-	employeePositionId.value = props.row.positionEmployeePositionId ?? "";
-	employeePositionSideId.value =
-		props.row.positionEmployeePositionSideId ?? "";
-	employeeLevelId.value = props.row.positionEmployeeLevelId ?? "";
-	employeeGroupId.value = props.row.positionEmployeeGroupId ?? "";
-	agencyId.value = props.row.ocId ?? "";
+  posNoId.value = props.row.posNoId ?? "";
+  posNoEmployee.value = props.row.posNoEmployee ?? "";
+  employeePositionId.value = props.row.positionEmployeePositionId ?? "";
+  employeePositionSideId.value = props.row.positionEmployeePositionSideId ?? "";
+  employeeLevelId.value = props.row.positionEmployeeLevelId ?? "";
+  employeeGroupId.value = props.row.positionEmployeeGroupId ?? "";
+  agencyId.value = props.row.ocId ?? "";
 
-	//   refSelected.value = props.row
-	salaryClass.value = props.row.salaryClass ?? "";
-	salaryRef.value = props.row.salaryRef ?? "";
-	refCommandNo.value = props.row.refCommandNo ?? "";
-	id.value = props.row.id;
-	await fetchPositionNumber(props.row.ocId ?? "");
-	await checkRowPage();
+  //   refSelected.value = props.row
+  salaryClass.value = props.row.salaryClass ?? "";
+  salaryRef.value = props.row.salaryRef ?? "";
+  refCommandNo.value = props.row.refCommandNo ?? "";
+  id.value = props.row.id;
+  await fetchPositionNumber(props.row.ocId ?? "");
+  await checkRowPage();
 };
 
 /**
  * กดปุ่มเพิ่มบน table
  */
 const addData = () => {
-	modalEdit.value = false;
-	modal.value = true;
-	edit.value = true;
-	date.value = new Date();
-	amount.value = null;
-	positionSalaryAmount.value = null;
-	mouthSalaryAmount.value = null;
+  modalEdit.value = false;
+  modal.value = true;
+  edit.value = true;
+  date.value = new Date();
+  amount.value = null;
+  positionSalaryAmount.value = null;
+  mouthSalaryAmount.value = null;
 
-	posNoId.value = "";
-	posNoEmployee.value = "";
-	employeePositionId.value = "";
-	employeePositionSideId.value = "";
-	employeeLevelId.value = "";
-	employeeGroupId.value = "";
-	agencyId.value = "";
-	agencyOptions.value = [];
+  posNoId.value = "";
+  posNoEmployee.value = "";
+  employeePositionId.value = "";
+  employeePositionSideId.value = "";
+  employeeLevelId.value = "";
+  employeeGroupId.value = "";
+  agencyId.value = "";
+  agencyOptions.value = [];
 
-	salaryClass.value = "";
-	refSelected.value = null;
-	salaryRef.value = "";
-	refCommandNo.value = "";
+  salaryClass.value = "";
+  refSelected.value = null;
+  salaryRef.value = "";
+  refCommandNo.value = "";
 };
 
 /**
  * ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
  */
 const clickCancel = async () => {
-	if (editRow.value == true) {
-		dialogMessage(
-			$q,
-			"ข้อมูลมีการแก้ไข",
-			"ยืนยันยกเลิกการแก้ไขใช่หรือไม่",
-			"info",
-			"ยืนยัน",
-			"primary",
-			async () => {
-				edit.value = false;
-				await checkRowPage();
-				await getData();
-			},
-			undefined,
-			false
-		);
-	} else {
-		edit.value = false;
-		await checkRowPage();
-	}
+  if (editRow.value == true) {
+    dialogMessage(
+      $q,
+      "ข้อมูลมีการแก้ไข",
+      "ยืนยันยกเลิกการแก้ไขใช่หรือไม่",
+      "info",
+      "ยืนยัน",
+      "primary",
+      async () => {
+        edit.value = false;
+        await checkRowPage();
+        await getData();
+      },
+      undefined,
+      false
+    );
+  } else {
+    edit.value = false;
+    await checkRowPage();
+  }
 };
 
 const onSelected = async (id: string) => {
-	await fetchPositionNumber(id);
+  await fetchPositionNumber(id);
 };
 
 /**
  * เช็คว่ามีการแก้ไขข้อมูล
  */
 const clickEditRow = () => {
-	editRow.value = true;
+  editRow.value = true;
 };
 
 /**
  * เช็คว่ามีการแก้ไขข้อมูล
  */
 const clickEditRowRef = () => {
-	editRow.value = true;
-	salaryRef.value = refSelected.value?.name;
+  editRow.value = true;
+  salaryRef.value = refSelected.value?.name;
 };
 
 /**
@@ -2010,62 +1963,60 @@ const clickEditRowRef = () => {
  * @param row ข้อมูล row ที่ดูประวัติการแก้ไข
  */
 const clickHistory = async (row: RequestItemsEmployee) => {
-	modalHistory.value = true;
-	loaderPage(true);
-	await http
-		.get(config.API.profileSalaryHisId(row.id))
-		.then((res) => {
-			const data = res.data.result;
-			//   console.log("clickHistory", data);
-			rowsHistory.value = [];
-			data.map((e: ResponseObjectEmployee) => {
-				rowsHistory.value.push({
-					id: e.id,
-					date: new Date(e.date),
-					amount: e.amount,
-					positionSalaryAmount: e.positionSalaryAmount,
-					mouthSalaryAmount: e.mouthSalaryAmount,
-					oc: e.oc,
-					ocId: e.ocId,
-					posNo: e.posNo,
-					posNoId: e.posNoId,
-					posNoEmployee: e.posNoEmployee,
-					positionEmployeeGroup: e.positionEmployeeGroup,
-					positionEmployeeGroupId: e.positionEmployeeGroupId,
-					positionEmployeeLevel: e.positionEmployeeLevel,
-					positionEmployeeLevelId: e.positionEmployeeLevelId,
-					positionEmployeePosition: e.positionEmployeePosition,
-					positionEmployeePositionId: e.positionEmployeePositionId,
-					positionEmployeePositionSide:
-						e.positionEmployeePositionSide,
-					positionEmployeePositionSideId:
-						e.positionEmployeePositionSideId,
-					salaryClass: e.salaryClass,
-					salaryRef: e.salaryRef,
-					refCommandNo: e.refCommandNo,
-					createdFullName: e.createdFullName,
-					createdAt: new Date(e.createdAt),
-				});
-			});
-		})
-		.catch((e) => {
-			messageError($q, e);
-		})
-		.finally(() => {
-			loaderPage(false);
-		});
+  modalHistory.value = true;
+  loaderPage(true);
+  await http
+    .get(config.API.profileSalaryHisId(row.id))
+    .then((res) => {
+      const data = res.data.result;
+      //   console.log("clickHistory", data);
+      rowsHistory.value = [];
+      data.map((e: ResponseObjectEmployee) => {
+        rowsHistory.value.push({
+          id: e.id,
+          date: new Date(e.date),
+          amount: e.amount,
+          positionSalaryAmount: e.positionSalaryAmount,
+          mouthSalaryAmount: e.mouthSalaryAmount,
+          oc: e.oc,
+          ocId: e.ocId,
+          posNo: e.posNo,
+          posNoId: e.posNoId,
+          posNoEmployee: e.posNoEmployee,
+          positionEmployeeGroup: e.positionEmployeeGroup,
+          positionEmployeeGroupId: e.positionEmployeeGroupId,
+          positionEmployeeLevel: e.positionEmployeeLevel,
+          positionEmployeeLevelId: e.positionEmployeeLevelId,
+          positionEmployeePosition: e.positionEmployeePosition,
+          positionEmployeePositionId: e.positionEmployeePositionId,
+          positionEmployeePositionSide: e.positionEmployeePositionSide,
+          positionEmployeePositionSideId: e.positionEmployeePositionSideId,
+          salaryClass: e.salaryClass,
+          salaryRef: e.salaryRef,
+          refCommandNo: e.refCommandNo,
+          createdFullName: e.createdFullName,
+          createdAt: new Date(e.createdAt),
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
 };
 
 /**
  * validate input ใน dialog
  */
 const validateData = async () => {
-	checkValidate.value = true;
-	await myForm.value.validate().then((result: boolean) => {
-		if (result == false) {
-			checkValidate.value = false;
-		}
-	});
+  checkValidate.value = true;
+  await myForm.value.validate().then((result: boolean) => {
+    if (result == false) {
+      checkValidate.value = false;
+    }
+  });
 };
 
 /**
@@ -2073,15 +2024,15 @@ const validateData = async () => {
  * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
  */
 const getClass = (val: boolean) => {
-	return {
-		"full-width inputgreen cursor-pointer": val,
-		"full-width cursor-pointer": !val,
-	};
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
 };
 const resetFilter = () => {};
 </script>
 <style lang="scss">
 .modalfix {
-	position: fixed !important;
+  position: fixed !important;
 }
 </style>
diff --git a/src/modules/04_registry/components/Talent.vue b/src/modules/04_registry/components/Talent.vue
index 4f4b981b0..c964bd194 100644
--- a/src/modules/04_registry/components/Talent.vue
+++ b/src/modules/04_registry/components/Talent.vue
@@ -213,7 +213,9 @@ const tittleHistory = ref<string>("ประวัติแก้ไขควา
 const filterHistory = ref<string>(""); //search data table history
 const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
 const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
-const profileId = ref<string>(route.params.id.toString());
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
 const rows = ref<RequestItemsObject[]>([]);
 const filter = ref<string>(""); //search data table
 const visibleColumns = ref<String[]>([]);
@@ -352,30 +354,32 @@ onMounted(async () => {
 });
 
 const fetchData = async () => {
-  loaderPage(true);
-  await http
-    .get(config.API.profileAbiliId(profileId.value))
-    .then((res) => {
-      let data = res.data.result;
-      rows.value = [];
-      data.map((e: ResponseObject) => {
-        rows.value.push({
-          id: e.id,
-          field: e.field,
-          detail: e.detail,
-          remark: e.remark,
-          reference: e.reference,
-          createdFullName: e.createdFullName,
-          createdAt: new Date(e.createdAt),
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .get(config.API.profileAbiliId(profileId.value))
+      .then((res) => {
+        let data = res.data.result;
+        rows.value = [];
+        data.map((e: ResponseObject) => {
+          rows.value.push({
+            id: e.id,
+            field: e.field,
+            detail: e.detail,
+            remark: e.remark,
+            reference: e.reference,
+            createdFullName: e.createdFullName,
+            createdAt: new Date(e.createdAt),
+          });
         });
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        loaderPage(false);
       });
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      loaderPage(false);
-    });
+  }
 };
 
 /**
@@ -461,25 +465,27 @@ const clickSave = async () => {
  * บันทึกเพิ่มข้อมูล
  */
 const saveData = async () => {
-  loaderPage(true);
-  await http
-    .post(config.API.profileAbiliId(profileId.value), {
-      id: id.value,
-      field: field.value,
-      detail: detail.value,
-      remark: remark.value,
-      reference: reference.value,
-    })
-    .then((res) => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
-      modal.value = false;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await fetchData();
-    });
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .post(config.API.profileAbiliId(profileId.value), {
+        id: id.value,
+        field: field.value,
+        detail: detail.value,
+        remark: remark.value,
+        reference: reference.value,
+      })
+      .then((res) => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        modal.value = false;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await fetchData();
+      });
+  }
 };
 
 /**
diff --git a/src/modules/04_registry/components/Train.vue b/src/modules/04_registry/components/Train.vue
index 822494e7b..284272588 100644
--- a/src/modules/04_registry/components/Train.vue
+++ b/src/modules/04_registry/components/Train.vue
@@ -459,7 +459,9 @@ const tittleHistory = ref<string>("ประวัติแก้ไขการ
 const filterHistory = ref<string>(""); //search data table history
 const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
 const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
-const profileId = ref<string>(route.params.id.toString());
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
 const rows = ref<RequestItemsObject[]>([]);
 const filter = ref<string>(""); //search data table
 const visibleColumns = ref<String[]>([]);
@@ -751,36 +753,38 @@ onMounted(async () => {
 });
 
 const fetchData = async () => {
-  loaderPage(true);
-  await http
-    .get(config.API.profileTrainId(profileId.value))
-    .then((res) => {
-      let data = res.data.result;
-      rows.value = [];
-      data.map((e: ResponseObject) => {
-        rows.value.push({
-          id: e.id,
-          name: e.name,
-          topic: e.topic,
-          yearly: e.yearly,
-          place: e.place,
-          duration: e.duration,
-          department: e.department,
-          numberOrder: e.numberOrder,
-          dateOrder: e.dateOrder,
-          startDate: new Date(e.startDate),
-          endDate: new Date(e.endDate),
-          createdFullName: e.createdFullName,
-          createdAt: new Date(e.createdAt),
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .get(config.API.profileTrainId(profileId.value))
+      .then((res) => {
+        let data = res.data.result;
+        rows.value = [];
+        data.map((e: ResponseObject) => {
+          rows.value.push({
+            id: e.id,
+            name: e.name,
+            topic: e.topic,
+            yearly: e.yearly,
+            place: e.place,
+            duration: e.duration,
+            department: e.department,
+            numberOrder: e.numberOrder,
+            dateOrder: e.dateOrder,
+            startDate: new Date(e.startDate),
+            endDate: new Date(e.endDate),
+            createdFullName: e.createdFullName,
+            createdAt: new Date(e.createdAt),
+          });
         });
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        loaderPage(false);
       });
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      loaderPage(false);
-    });
+  }
 };
 
 /**
@@ -872,31 +876,33 @@ const clickSave = async () => {
  * บันทึกเพิ่มข้อมูล
  */
 const saveData = async () => {
-  loaderPage(true);
-  await http
-    .post(config.API.profileTrainId(profileId.value), {
-      id: id.value,
-      name: name.value,
-      topic: topic.value,
-      yearly: yearly.value,
-      place: place.value,
-      duration: duration.value,
-      department: department.value,
-      numberOrder: numberOrder.value,
-      dateOrder: dateOrder.value,
-      startDate: dateToISO(startDate.value),
-      endDate: dateToISO(endDate.value),
-    })
-    .then((res) => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
-      modal.value = false;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await fetchData();
-    });
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .post(config.API.profileTrainId(profileId.value), {
+        id: id.value,
+        name: name.value,
+        topic: topic.value,
+        yearly: yearly.value,
+        place: place.value,
+        duration: duration.value,
+        department: department.value,
+        numberOrder: numberOrder.value,
+        dateOrder: dateOrder.value,
+        startDate: dateToISO(startDate.value),
+        endDate: dateToISO(endDate.value),
+      })
+      .then((res) => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        modal.value = false;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await fetchData();
+      });
+  }
 };
 
 /**
diff --git a/src/modules/04_registry/components/Work.vue b/src/modules/04_registry/components/Work.vue
index c474f0597..14f78c39b 100644
--- a/src/modules/04_registry/components/Work.vue
+++ b/src/modules/04_registry/components/Work.vue
@@ -356,7 +356,9 @@ const tittleHistory = ref<string>("ประวัติแก้ไขปฏิ
 const filterHistory = ref<string>(""); //search data table history
 const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
 const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
-const profileId = ref<string>(route.params.id.toString());
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
 const rows = ref<RequestItemsObject[]>([]);
 const filter = ref<string>(""); //search data table
 const visibleColumns = ref<String[]>([]);
@@ -552,33 +554,35 @@ onMounted(async () => {
 });
 
 const fetchData = async () => {
-  loaderPage(true);
-  await http
-    .get(config.API.profileDutyId(profileId.value))
-    .then((res) => {
-      let data = res.data.result;
-      rows.value = [];
-      data.map((e: ResponseObject) => {
-        rows.value.push({
-          id: e.id,
-          dateStart: new Date(e.dateStart),
-          dateEnd: new Date(e.dateEnd),
-          detail: e.detail,
-          reference: e.reference,
-          refCommandNo: e.refCommandNo,
-          refCommandDate:
-            e.refCommandDate == null ? null : new Date(e.refCommandDate),
-          createdFullName: e.createdFullName,
-          createdAt: new Date(e.createdAt),
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .get(config.API.profileDutyId(profileId.value))
+      .then((res) => {
+        let data = res.data.result;
+        rows.value = [];
+        data.map((e: ResponseObject) => {
+          rows.value.push({
+            id: e.id,
+            dateStart: new Date(e.dateStart),
+            dateEnd: new Date(e.dateEnd),
+            detail: e.detail,
+            reference: e.reference,
+            refCommandNo: e.refCommandNo,
+            refCommandDate:
+              e.refCommandDate == null ? null : new Date(e.refCommandDate),
+            createdFullName: e.createdFullName,
+            createdAt: new Date(e.createdAt),
+          });
         });
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        loaderPage(false);
       });
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      loaderPage(false);
-    });
+  }
 };
 
 /**
@@ -666,28 +670,30 @@ const clickSave = async () => {
  * บันทึกเพิ่มข้อมูล
  */
 const saveData = async () => {
-  loaderPage(true);
-  await http
-    .post(config.API.profileDutyId(profileId.value), {
-      id: id.value,
-      dateStart: dateToISO(dateStart.value),
-      dateEnd: dateToISO(dateEnd.value),
-      detail: detail.value,
-      reference: reference.value,
-      refCommandNo: refCommandNo.value,
-      refCommandDate:
-        refCommandDate.value == null ? null : dateToISO(refCommandDate.value),
-    })
-    .then((res) => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
-      modal.value = false;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await fetchData();
-    });
+  if (profileId.value) {
+    loaderPage(true);
+    await http
+      .post(config.API.profileDutyId(profileId.value), {
+        id: id.value,
+        dateStart: dateToISO(dateStart.value),
+        dateEnd: dateToISO(dateEnd.value),
+        detail: detail.value,
+        reference: reference.value,
+        refCommandNo: refCommandNo.value,
+        refCommandDate:
+          refCommandDate.value == null ? null : dateToISO(refCommandDate.value),
+      })
+      .then((res) => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        modal.value = false;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await fetchData();
+      });
+  }
 };
 
 /**