diff --git a/src/interface/request/main/main.ts b/src/interface/request/main/main.ts
index f3f39af82..377179b8d 100644
--- a/src/interface/request/main/main.ts
+++ b/src/interface/request/main/main.ts
@@ -193,6 +193,12 @@ const menuList = readonly<any[]>([
         path: "Orderplacement",
         role: "placement",
       },
+      {
+        key: 6.3,
+        label: "การทดลองงาน" /* การทดลองงาน */,
+        path: "probation",
+        role: "probation",
+      },
     ],
   },
   {
diff --git a/src/modules/03_recruiting/views/01_compete/DetailEx.vue b/src/modules/03_recruiting/views/01_compete/DetailEx.vue
index 06fb879e3..6319215b0 100644
--- a/src/modules/03_recruiting/views/01_compete/DetailEx.vue
+++ b/src/modules/03_recruiting/views/01_compete/DetailEx.vue
@@ -2,7 +2,7 @@
 <template>
   <div class="toptitle text-dark col-12 row items-center">
     <q-btn
-      icon="mdi-arrow-"
+      icon="mdi-arrow-left"
       unelevated
       round
       dense
diff --git a/src/modules/03_recruiting/views/01_compete/PeriodAdd.vue b/src/modules/03_recruiting/views/01_compete/PeriodAdd.vue
index 9fe708ead..ec41e4b9a 100644
--- a/src/modules/03_recruiting/views/01_compete/PeriodAdd.vue
+++ b/src/modules/03_recruiting/views/01_compete/PeriodAdd.vue
@@ -111,7 +111,7 @@
                 <q-input
                   outlined
                   dense
-                  class="full-width datepicker q-mb-md"
+                  class="full-width datepicker q-mb-sm"
                   :model-value="dateExam != null ? date2Thai(dateExam) : null"
                   :label="`${'วันที่สอบ'}`"
                   :rules="[(val) => !!val || `${'กรุณาเลือกวันที่สอบ'}`]"
@@ -149,7 +149,7 @@
                 <q-input
                   outlined
                   dense
-                  class="full-width datepicker q-mb-md"
+                  class="full-width datepicker q-mb-sm"
                   :model-value="
                     dateAnnouncement != null
                       ? dateThaiRange(dateAnnouncement)
@@ -191,7 +191,7 @@
                 <q-input
                   outlined
                   dense
-                  class="full-width datepicker q-mb-md"
+                  class="full-width datepicker q-mb-sm"
                   :model-value="
                     dateRegister != null ? dateThaiRange(dateRegister) : null
                   "
@@ -231,7 +231,7 @@
                 <q-input
                   outlined
                   dense
-                  class="full-width datepicker q-mb-md"
+                  class="full-width datepicker q-mb-sm"
                   :model-value="
                     datePayment != null ? dateThaiRange(datePayment) : null
                   "
@@ -271,7 +271,7 @@
                 <q-input
                   outlined
                   dense
-                  class="full-width datepicker q-mb-md"
+                  class="full-width datepicker q-mb-sm"
                   :model-value="
                     dateAnnounce != null ? date2Thai(dateAnnounce) : null
                   "
diff --git a/src/modules/04_registry/components/Assessment.vue b/src/modules/04_registry/components/Assessment.vue
index c93364503..5f171a8d6 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 84089f940..b30a37c71 100644
--- a/src/modules/04_registry/components/Coin.vue
+++ b/src/modules/04_registry/components/Coin.vue
@@ -244,7 +244,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[]>([]);
@@ -360,29 +362,31 @@ 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),
-          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),
+            createdAt: new Date(e.createdAt),
+            createdFullName: e.createdFullName,
+          });
         });
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        loaderPage(false);
       });
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      loaderPage(false);
-    });
+  }
 };
 
 /**
@@ -467,24 +471,26 @@ 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),
-    })
-    .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),
+      })
+      .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 f4f0e8fd2..5571ad3fa 100644
--- a/src/modules/04_registry/components/Discipline.vue
+++ b/src/modules/04_registry/components/Discipline.vue
@@ -363,7 +363,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[]>([]);
@@ -545,31 +547,33 @@ 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,
-          refCommandNo: e.refCommandNo,
-          refCommandDate: 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,
+            refCommandNo: e.refCommandNo,
+            refCommandDate: 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);
-    });
+  }
 };
 
 /**
@@ -656,26 +660,28 @@ 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,
-      refCommandNo: refCommandNo.value,
-      refCommandDate: 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,
+        refCommandNo: refCommandNo.value,
+        refCommandDate: 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..0a9e74270 100644
--- a/src/modules/04_registry/components/Document.vue
+++ b/src/modules/04_registry/components/Document.vue
@@ -8,6 +8,7 @@
       :changeBtn="changeBtn"
       :disable="statusEdit"
       :save="uploadData"
+      :addEmployee="statusAdd()"
     />
     <div class="row col-12 q-pt-sm">
       <q-card bordered flat class="full-width">
@@ -153,6 +154,10 @@ const props = defineProps({
     type: Function,
     default: () => console.log("not function"),
   },
+  statusAdd: {
+    type: Boolean,
+    default: false,
+  },
 });
 const emit = defineEmits(["update:statusEdit"]);
 
@@ -162,7 +167,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>([]);
@@ -171,22 +178,37 @@ const name = ref<string>("");
 
 onMounted(async () => {
   await getData();
+  defaultAdd();
 });
 
 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 statusAdd = () => props.statusAdd;
+
+const defaultAdd = () => {
+  if (props.statusAdd) {
+    edit.value = props.statusAdd;
+    name.value = "";
+    if (uploader.value) {
+      uploader.value.reset();
+    }
+  }
 };
 
 const deleteData = async (id: string) => {
@@ -206,31 +228,33 @@ 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 !== "") {
+      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();
+        });
+    }
   } else {
     // modalError(
     //   $q,
diff --git a/src/modules/04_registry/components/Education.vue b/src/modules/04_registry/components/Education.vue
index c73e11aa6..83e947985 100644
--- a/src/modules/04_registry/components/Education.vue
+++ b/src/modules/04_registry/components/Education.vue
@@ -506,7 +506,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[]>([]);
@@ -960,42 +962,44 @@ 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,
-          positionPathId: e.positionPathId,
-          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,
-          finishDate: new Date(e.finishDate),
-          startDate: new Date(e.startDate).getFullYear(),
-          endDate: new Date(e.endDate).getFullYear(),
-          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,
+            positionPathId: e.positionPathId,
+            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,
+            finishDate: new Date(e.finishDate),
+            startDate: new Date(e.startDate).getFullYear(),
+            endDate: new Date(e.endDate).getFullYear(),
+            createdFullName: e.createdFullName,
+            createdAt: new Date(e.createdAt),
+          });
         });
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        loaderPage(false);
       });
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      loaderPage(false);
-    });
+  }
 };
 
 /**
@@ -1090,43 +1094,46 @@ const clickSave = async () => {
 /**
  * บันทึกเพิ่มข้อมูล
  */
+
 const saveData = async () => {
-  //   const filter = OpsFilter.value.levelOptions.filter(
-  //     (r: any) => r.id == levelId.value
-  //   );
-  //   const filterPositionPath = OpsFilter.value.positionPathOptions.filter(
-  //     (r: any) => r.id == positionPathId.value
-  //   );
-  loaderPage(true);
-  await http
-    .post(config.API.profileEduId(profileId.value), {
-      id: id.value,
-      //   educationLevel: filter[0].name,
-      educationLevelId: levelId.value,
-      positionPathId: positionPathId.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,
-      finishDate: dateToISO(finishDate.value),
-      startDate: new Date(`${startDate.value}-01-01`),
-      endDate: 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 !== "") {
+    //   const filter = OpsFilter.value.levelOptions.filter(
+    //     (r: any) => r.id == levelId.value
+    //   );
+    //   const filterPositionPath = OpsFilter.value.positionPathOptions.filter(
+    //     (r: any) => r.id == positionPathId.value
+    //   );
+    loaderPage(true);
+    await http
+      .post(config.API.profileEduId(profileId.value), {
+        id: id.value,
+        //   educationLevel: filter[0].name,
+        educationLevelId: levelId.value,
+        positionPathId: positionPathId.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,
+        finishDate: dateToISO(finishDate.value),
+        startDate: new Date(`${startDate.value}-01-01`),
+        endDate: 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..99192c26b 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":
@@ -556,37 +581,39 @@ const filterSelector = (val: any, update: Function, refData: string) => {
  * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
  */
 const clickHistory = async () => {
-  modalHistory.value = true;
-  loaderPage(true);
-  await http
-    .get(config.API.profileAdrsHisId(route.params.id.toString()))
-    .then((res) => {
-      let data = res.data.result;
-      rowsHistory.value = [];
-      data.map((e: RequestItemsHistoryObject) => {
-        rowsHistory.value.push({
-          currentAddress: e.currentAddress,
-          currentDistrict: e.currentDistrict,
-          currentProvince: e.currentProvince,
-          currentSubDistrict: e.currentSubDistrict,
-          currentZipCode: e.currentZipCode,
-          registrationSame: e.registrationSame,
-          registrationAddress: e.registrationAddress,
-          registrationDistrict: e.registrationDistrict,
-          registrationProvince: e.registrationProvince,
-          registrationSubDistrict: e.registrationSubDistrict,
-          registrationZipCode: e.registrationZipCode,
-          createdFullName: e.createdFullName,
-          createdAt: new Date(e.createdAt),
+  if (route.params.id) {
+    modalHistory.value = true;
+    loaderPage(true);
+    await http
+      .get(config.API.profileAdrsHisId(route.params.id.toString()))
+      .then((res) => {
+        let data = res.data.result;
+        rowsHistory.value = [];
+        data.map((e: RequestItemsHistoryObject) => {
+          rowsHistory.value.push({
+            currentAddress: e.currentAddress,
+            currentDistrict: e.currentDistrict,
+            currentProvince: e.currentProvince,
+            currentSubDistrict: e.currentSubDistrict,
+            currentZipCode: e.currentZipCode,
+            registrationSame: e.registrationSame,
+            registrationAddress: e.registrationAddress,
+            registrationDistrict: e.registrationDistrict,
+            registrationProvince: e.registrationProvince,
+            registrationSubDistrict: e.registrationSubDistrict,
+            registrationZipCode: e.registrationZipCode,
+            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 refreshData = async () => {
@@ -606,27 +633,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 () => {
@@ -676,12 +705,34 @@ const editData = async () => {
 const saveData = async () => {
   await myform.value.validate().then(async (success: boolean) => {
     if (success) {
-      await editData();
+      if (props.statusAdd) {
+        await addData();
+      } else {
+        await editData();
+      }
     } else {
     }
   });
 };
 
+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 selectProvince = async (e: string | null, name: string) => {
   if (e != null) {
     if (name == "1") {
diff --git a/src/modules/04_registry/components/Information/Certicate.vue b/src/modules/04_registry/components/Information/Certicate.vue
index 721bf17c0..a2025677f 100644
--- a/src/modules/04_registry/components/Information/Certicate.vue
+++ b/src/modules/04_registry/components/Information/Certicate.vue
@@ -285,6 +285,10 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  statusAdd: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const $q = useQuasar();
@@ -316,7 +320,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 +490,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);
-    });
+  }
 };
 
 /**
@@ -595,26 +603,28 @@ const clickSave = async () => {
  * บันทึกเพิ่มข้อมูล
  */
 const saveData = async () => {
-  loaderPage(true);
-  await http
-    .post(config.API.profileCertId(profileId.value), {
-      id: id.value,
-      certificateNo: certificateNo.value,
-      issuer: issuer.value,
-      issueDate: dateToISO(issueDate.value),
-      expireDate: dateToISO(expireDate.value),
-      certificateType: certificateType.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.profileCertId(profileId.value), {
+        id: id.value,
+        certificateNo: certificateNo.value,
+        issuer: issuer.value,
+        issueDate: dateToISO(issueDate.value),
+        expireDate: dateToISO(expireDate.value),
+        certificateType: certificateType.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/Information/Family.vue b/src/modules/04_registry/components/Information/Family.vue
index b80ff9ede..d07de77a7 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">
@@ -784,6 +785,10 @@ const props = defineProps({
     type: Function,
     default: () => console.log("not function"),
   },
+  statusAdd: {
+    type: Boolean,
+    default: false,
+  },
 });
 const emit = defineEmits(["update:statusEdit"]);
 
@@ -835,8 +840,37 @@ 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,
+      prefixM: null,
+      prefixIdM: null,
+      firstnameM: null,
+      lastnameM: null,
+      occupationM: null,
+      prefixF: null,
+      prefixIdF: null,
+      firstnameF: null,
+      lastnameF: null,
+      occupationF: null,
+      same: "0",
+      childrens: [],
+    };
+  }
+};
+
 const historyData = async () => {
   await fetchHistory();
 };
@@ -955,53 +989,55 @@ 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.prefixM = "";
-      familyData.value.prefixIdM = data.fatherPrefixId;
+  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.prefixM = "";
+        familyData.value.prefixIdM = data.fatherPrefixId;
 
-      familyData.value.firstnameM = data.fatherFirstName;
-      familyData.value.lastnameM = data.fatherLastName;
-      familyData.value.occupationM = data.fatherCareer;
-      familyData.value.prefixF = "";
-      familyData.value.prefixIdF = data.motherPrefixId;
+        familyData.value.firstnameM = data.fatherFirstName;
+        familyData.value.lastnameM = data.fatherLastName;
+        familyData.value.occupationM = data.fatherCareer;
+        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.same = data.couple ? "1" : "0";
+        familyData.value.firstnameF = data.motherFirstName;
+        familyData.value.lastnameF = data.motherLastName;
+        familyData.value.occupationF = data.motherCareer;
+        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,
+        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,
+            });
           });
-        });
-        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 () => {
@@ -1040,10 +1076,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 13d630bf8..94e30b6b2 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">
@@ -115,7 +116,11 @@
                 lazy-rules
                 :readonly="!edit"
                 :borderless="!edit"
-                :model-value="date2Thai(informaData.birthDate)"
+                :model-value="
+                  informaData.birthDate == null
+                    ? ''
+                    : date2Thai(informaData.birthDate)
+                "
                 :rules="[(val:string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
                 :label="`${'วัน/เดือน/ปี เกิด'}`"
               >
@@ -438,6 +443,10 @@ const props = defineProps({
     type: Function,
     default: () => console.log("not function"),
   },
+  statusAdd: {
+    type: Boolean,
+    default: false,
+  },
 });
 const emit = defineEmits(["update:statusEdit"]);
 
@@ -692,8 +701,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: null,
+      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();
@@ -821,50 +858,52 @@ const checkCitizen = async (id: string) => {
  * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
  */
 const clickHistory = async () => {
-  modalHistory.value = true;
-  loaderPage(true);
-  await http
-    .get(config.API.profileInforHisId(route.params.id.toString()))
-    .then((res) => {
-      let data = res.data.result;
-      rowsHistory.value = [];
-      data.map((e: RequestItemsHistoryObject) => {
-        rowsHistory.value.push({
-          citizenId: e.citizenId,
-          prefix: e.prefix,
-          firstName: e.firstName,
-          lastName: e.lastName,
-          birthDate: new Date(e.birthDate),
-          gender: e.gender,
-          relationship: e.relationship,
-          bloodGroup: e.bloodGroup,
-          nationality: e.nationality,
-          race: e.race,
-          religion: e.religion,
-          telephoneNumber: e.telephoneNumber,
-          employeeType:
-            e.employeeType == "gov"
-              ? "งบประมาณเงินอุดหนุนรัฐบาล"
-              : e.employeeType == "bkk"
-              ? "งบประมาณกรุงเทพมหานคร"
-              : "-",
-          employeeClass:
-            e.employeeClass == "perm"
-              ? "ลูกจ้างประจำ"
-              : e.employeeClass == "temp"
-              ? "ลูกจ้างชั่วคราว"
-              : "-",
-          createdFullName: e.createdFullName,
-          createdAt: new Date(e.createdAt),
+  if (route.params.id) {
+    modalHistory.value = true;
+    loaderPage(true);
+    await http
+      .get(config.API.profileInforHisId(route.params.id.toString()))
+      .then((res) => {
+        let data = res.data.result;
+        rowsHistory.value = [];
+        data.map((e: RequestItemsHistoryObject) => {
+          rowsHistory.value.push({
+            citizenId: e.citizenId,
+            prefix: e.prefix,
+            firstName: e.firstName,
+            lastName: e.lastName,
+            birthDate: new Date(e.birthDate),
+            gender: e.gender,
+            relationship: e.relationship,
+            bloodGroup: e.bloodGroup,
+            nationality: e.nationality,
+            race: e.race,
+            religion: e.religion,
+            telephoneNumber: e.telephoneNumber,
+            employeeType:
+              e.employeeType == "gov"
+                ? "งบประมาณเงินอุดหนุนรัฐบาล"
+                : e.employeeType == "bkk"
+                ? "งบประมาณกรุงเทพมหานคร"
+                : "-",
+            employeeClass:
+              e.employeeClass == "perm"
+                ? "ลูกจ้างประจำ"
+                : e.employeeClass == "temp"
+                ? "ลูกจ้างชั่วคราว"
+                : "-",
+            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 filterSelector = (val: any, update: Function, refData: string) => {
@@ -961,44 +1000,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 () => {
@@ -1011,7 +1055,10 @@ const editData = async () => {
     nationality: informaData.value.nationality,
     race: informaData.value.ethnicity,
     religionId: informaData.value.religionId,
-    birthDate: dateToISO(informaData.value.birthDate) ?? dateToISO(new Date()),
+    birthDate:
+      informaData.value.birthDate == null
+        ? dateToISO(new Date())
+        : dateToISO(informaData.value.birthDate),
     bloodGroupId: informaData.value.bloodId,
     relationshipId: informaData.value.statusId,
     telephoneNumber: informaData.value.tel,
@@ -1039,11 +1086,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/OldName.vue b/src/modules/04_registry/components/Information/OldName.vue
index f82dd50c4..62bf2056b 100644
--- a/src/modules/04_registry/components/Information/OldName.vue
+++ b/src/modules/04_registry/components/Information/OldName.vue
@@ -362,7 +362,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 file = ref<string | null>(null);
 const fileUpload = ref<any>([]);
 const rows = ref<RequestItemsObject[]>([]);
@@ -538,32 +540,34 @@ onMounted(async () => {
 });
 
 const fetchData = async () => {
-  loaderPage(true);
-  await http
-    .get(config.API.profileChangeNameId(profileId.value))
-    .then((res) => {
-      let data = res.data.result;
-      rows.value = [];
-      data.map((e: ResponseObject) => {
-        rows.value.push({
-          id: e.id,
-          prefix: e.prefix,
-          prefixId: e.prefixId,
-          firstName: e.firstName,
-          lastName: e.lastName,
-          status: e.status,
-          file: e.file,
-          createdFullName: e.createdFullName,
-          createdAt: new Date(e.createdAt),
+  if (profileId.value !== "") {
+    loaderPage(true);
+    await http
+      .get(config.API.profileChangeNameId(profileId.value))
+      .then((res) => {
+        let data = res.data.result;
+        rows.value = [];
+        data.map((e: ResponseObject) => {
+          rows.value.push({
+            id: e.id,
+            prefix: e.prefix,
+            prefixId: e.prefixId,
+            firstName: e.firstName,
+            lastName: e.lastName,
+            status: e.status,
+            file: e.file,
+            createdFullName: e.createdFullName,
+            createdAt: new Date(e.createdAt),
+          });
         });
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        loaderPage(false);
       });
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      loaderPage(false);
-    });
+  }
 };
 
 /**
@@ -665,44 +669,19 @@ const clickSave = async () => {
       if (modalEdit.value) {
         await editData();
       } else {
-        await saveData();
+        await checkSave();
       }
     }
   });
 };
 
-/**
- * บันทึกเพิ่มข้อมูล
- */
-const saveData = async () => {
+const checkSave = async () => {
   if (fileUpload.value.length > 0) {
-    const blob = fileUpload.value.slice(0, fileUpload.value[0].size);
-    const newFile = new File(blob, nameFile.value, {
-      type: fileUpload.value[0].type,
-    });
-    const formData = new FormData();
-    formData.append("", newFile);
-    if (prefixId.value != undefined)
-      formData.append("prefixId", prefixId.value);
-    if (firstName.value != undefined)
-      formData.append("firstName", firstName.value);
-    if (lastName.value != undefined)
-      formData.append("lastName", lastName.value);
-    if (status.value != undefined) formData.append("status", status.value);
-    loaderPage(true);
-    await http
-      .post(config.API.profileChangeNameId(profileId.value), formData)
-      .then((res) => {
-        success($q, "บันทึกข้อมูลสำเร็จ");
-        modal.value = false;
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(async () => {
-        await fetchData();
-        await props.fetchDataInformation();
-      });
+    if (profileId.value !== "") {
+      await saveData();
+    } else {
+      await saveDataEmployee();
+    }
   } else {
     dialogMessage(
       $q,
@@ -718,6 +697,41 @@ const saveData = async () => {
   }
 };
 
+/**
+ * บันทึกเพิ่มข้อมูล
+ */
+const saveData = async () => {
+  const blob = fileUpload.value.slice(0, fileUpload.value[0].size);
+  const newFile = new File(blob, nameFile.value, {
+    type: fileUpload.value[0].type,
+  });
+  const formData = new FormData();
+  formData.append("", newFile);
+  if (prefixId.value != undefined) formData.append("prefixId", prefixId.value);
+  if (firstName.value != undefined)
+    formData.append("firstName", firstName.value);
+  if (lastName.value != undefined) formData.append("lastName", lastName.value);
+  if (status.value != undefined) formData.append("status", status.value);
+  loaderPage(true);
+  await http
+    .post(config.API.profileChangeNameId(profileId.value), formData)
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      modal.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+      await props.fetchDataInformation();
+    });
+};
+
+const saveDataEmployee = async () => {
+  console.log("saveDataEmployee");
+};
+
 /**
  * บันทึกแก้ไขข้อมูล
  */
diff --git a/src/modules/04_registry/components/Information/top.vue b/src/modules/04_registry/components/Information/top.vue
index 2a8221cf9..157698119 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"
@@ -125,6 +125,7 @@ const props = defineProps({
     type: Boolean,
     defualt: false,
   },
+
   disable: {
     type: Boolean,
     defualt: false,
@@ -157,6 +158,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 641800865..a025efc25 100644
--- a/src/modules/04_registry/components/Insignia.vue
+++ b/src/modules/04_registry/components/Insignia.vue
@@ -454,7 +454,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[]>([]);
@@ -816,38 +818,40 @@ 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),
-          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),
+            createdFullName: e.createdFullName,
+            createdAt: new Date(e.createdAt),
+          });
         });
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        loaderPage(false);
       });
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      loaderPage(false);
-    });
+  }
 };
 
 /**
@@ -940,32 +944,34 @@ 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),
-    })
-    .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),
+      })
+      .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 aef5b92aa..37acb3bf6 100644
--- a/src/modules/04_registry/components/Leave.vue
+++ b/src/modules/04_registry/components/Leave.vue
@@ -263,11 +263,7 @@
           >
             <template #columns="props">
               <q-tr :props="props" class="cursor-pointer">
-                <q-td
-                  v-for="col in props.cols"
-                  :key="col.name"
-                  :props="props"
-                >
+                <q-td v-for="col in props.cols" :key="col.name" :props="props">
                   <div v-if="col.name == 'no'">
                     {{ props.rowIndex + 1 }}
                   </div>
@@ -280,9 +276,7 @@
                     class="table_ellipsis"
                   >
                     {{
-                      col.value == null
-                        ? ""
-                        : col.value.toLocaleString("en-US")
+                      col.value == null ? "" : col.value.toLocaleString("en-US")
                     }}
                   </div>
                   <div v-else>
@@ -442,7 +436,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
@@ -712,34 +708,36 @@ 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 !== "") {
+    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,
+          });
         });
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        loaderPage(false);
       });
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      loaderPage(false);
-    });
+  }
 };
 
 const filterSelector = (val: any, update: Function, filtername: string) => {
@@ -960,30 +958,31 @@ 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 !== "") {
+    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();
+      });
+  }
 };
 
 // /**
@@ -1182,28 +1181,30 @@ const addData = async () => {
  * @param row ข้อมูล row ที่ดูประวัติการแก้ไข
  */
 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 !== "") {
+    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,
+          });
         });
+      })
+      .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..433cd7843 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/Profile.vue b/src/modules/04_registry/components/Profile.vue
index 4a06fdaff..b85921f96 100644
--- a/src/modules/04_registry/components/Profile.vue
+++ b/src/modules/04_registry/components/Profile.vue
@@ -486,12 +486,8 @@
       </q-card-section>
       <q-separator />
       <q-card-actions align="right">
-        <q-btn
-          unelevated
-          label="บันทึก"
-          color="public"
-          @click="Retire"
-        ><!-- icon="mdi-content-save-outline"
+        <q-btn unelevated label="บันทึก" color="public" @click="Retire"
+          ><!-- icon="mdi-content-save-outline"
           <q-tooltip>บันทึก</q-tooltip> -->
         </q-btn>
       </q-card-actions>
@@ -500,35 +496,75 @@
   <full-loader :visibility="loader"></full-loader>
 </template>
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted, defineAsyncComponent } from "vue";
 import { useDataStore } from "@/stores/data";
 import { useRoute, useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
-import EducationVue from "@/modules/04_registry/components/Education.vue";
-import TrainVue from "@/modules/04_registry/components/Train.vue";
-import InsigniaVue from "@/modules/04_registry/components/Insignia.vue";
-import CoinedVue from "@/modules/04_registry/components/Coin.vue";
-import AssessmentVue from "@/modules/04_registry/components/Assessment.vue";
-import SalaryVue from "@/modules/04_registry/components/Salary.vue";
-import SalaryEmployeeVue from "@/modules/04_registry/components/SalaryEmployee.vue";
-import DisciplineVue from "@/modules/04_registry/components/Discipline.vue";
-import LeaveVue from "@/modules/04_registry/components/Leave.vue";
-import TalentVue from "@/modules/04_registry/components/Talent.vue";
-import WorkVue from "@/modules/04_registry/components/Work.vue";
-import RecordVue from "@/modules/04_registry/components/Record.vue";
-import OtherVue from "@/modules/04_registry/components/Other.vue";
-import DocumentVue from "@/modules/04_registry/components/Document.vue";
-import Certicate from "@/modules/04_registry/components/Information/Certicate.vue";
-import Information from "@/modules/04_registry/components/Information/Information.vue";
-import Government from "@/modules/04_registry/components/Information/Government.vue";
-import Address from "@/modules/04_registry/components/Information/Address.vue";
-import Family from "@/modules/04_registry/components/Information/Family.vue";
+
 import OldName from "@/modules/04_registry/components/Information/OldName.vue";
 import type { DataOption } from "@/modules/04_registry/interface/index/Main";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+const EducationVue = defineAsyncComponent(
+  () => import("@/modules/04_registry/components/Education.vue")
+);
+const TrainVue = defineAsyncComponent(
+  () => import("@/modules/04_registry/components/Train.vue")
+);
+const InsigniaVue = defineAsyncComponent(
+  () => import("@/modules/04_registry/components/Insignia.vue")
+);
+const CoinedVue = defineAsyncComponent(
+  () => import("@/modules/04_registry/components/Coin.vue")
+);
+const AssessmentVue = defineAsyncComponent(
+  () => import("@/modules/04_registry/components/Assessment.vue")
+);
+const SalaryVue = defineAsyncComponent(
+  () => import("@/modules/04_registry/components/Salary.vue")
+);
+const SalaryEmployeeVue = defineAsyncComponent(
+  () => import("@/modules/04_registry/components/SalaryEmployee.vue")
+);
+const DisciplineVue = defineAsyncComponent(
+  () => import("@/modules/04_registry/components/Discipline.vue")
+);
+const LeaveVue = defineAsyncComponent(
+  () => import("@/modules/04_registry/components/Leave.vue")
+);
+const TalentVue = defineAsyncComponent(
+  () => import("@/modules/04_registry/components/Talent.vue")
+);
+const WorkVue = defineAsyncComponent(
+  () => import("@/modules/04_registry/components/Work.vue")
+);
+const RecordVue = defineAsyncComponent(
+  () => import("@/modules/04_registry/components/Record.vue")
+);
+const OtherVue = defineAsyncComponent(
+  () => import("@/modules/04_registry/components/Other.vue")
+);
+const DocumentVue = defineAsyncComponent(
+  () => import("@/modules/04_registry/components/Document.vue")
+);
+const Certicate = defineAsyncComponent(
+  () => import("@/modules/04_registry/components/Information/Certicate.vue")
+);
+const Information = defineAsyncComponent(
+  () => import("@/modules/04_registry/components/Information/Information.vue")
+);
+const Government = defineAsyncComponent(
+  () => import("@/modules/04_registry/components/Information/Government.vue")
+);
+const Address = defineAsyncComponent(
+  () => import("@/modules/04_registry/components/Information/Address.vue")
+);
+const Family = defineAsyncComponent(
+  () => import("@/modules/04_registry/components/Information/Family.vue")
+);
+
 const $q = useQuasar();
 const store = useDataStore();
 const { changeTab, loaderPage } = store;
diff --git a/src/modules/04_registry/components/Record.vue b/src/modules/04_registry/components/Record.vue
index 326ebe953..86a53b0f7 100644
--- a/src/modules/04_registry/components/Record.vue
+++ b/src/modules/04_registry/components/Record.vue
@@ -234,7 +234,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
@@ -351,29 +353,31 @@ 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,
-          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,
+            createdFullName: e.createdFullName,
+            createdAt: new Date(e.createdAt),
+          });
         });
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        loaderPage(false);
       });
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      loaderPage(false);
-    });
+  }
 };
 
 /**
@@ -458,24 +462,26 @@ 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,
-    })
-    .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,
+      })
+      .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 b31a5ed35..4028695ba 100644
--- a/src/modules/04_registry/components/SalaryEmployee.vue
+++ b/src/modules/04_registry/components/SalaryEmployee.vue
@@ -500,6 +500,10 @@ const props = defineProps({
     type: Boolean,
     required: true,
   },
+  statusAdd: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const $q = useQuasar();
@@ -822,7 +826,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[]>([]);
@@ -1328,45 +1334,47 @@ 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,
-          createdFullName: e.createdFullName,
-          createdAt: new Date(e.createdAt),
+  if (profileId.value !== "") {
+    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,
+            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) => {
@@ -1548,33 +1556,35 @@ 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,
-    })
-    .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,
+      })
+      .then((res) => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        modal.value = false;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await fetchData();
+      });
+  }
 };
 
 /**
diff --git a/src/modules/04_registry/components/Talent.vue b/src/modules/04_registry/components/Talent.vue
index 7c3afca32..2c0ec3f84 100644
--- a/src/modules/04_registry/components/Talent.vue
+++ b/src/modules/04_registry/components/Talent.vue
@@ -314,7 +314,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[]>([]);
@@ -506,32 +508,34 @@ 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,
-          dateStart: new Date(e.dateStart),
-          dateEnd: new Date(e.dateEnd),
-          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,
+            dateStart: new Date(e.dateStart),
+            dateEnd: new Date(e.dateEnd),
+            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);
-    });
+  }
 };
 
 /**
@@ -619,27 +623,29 @@ 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,
-      dateStart: dateToISO(dateStart.value),
-      dateEnd: dateToISO(dateEnd.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,
+        dateStart: dateToISO(dateStart.value),
+        dateEnd: dateToISO(dateEnd.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..5b5bceb5c 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 52dac440d..9ce98bad0 100644
--- a/src/modules/04_registry/components/Work.vue
+++ b/src/modules/04_registry/components/Work.vue
@@ -283,7 +283,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[]>([]);
@@ -426,30 +428,32 @@ 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,
-          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,
+            createdFullName: e.createdFullName,
+            createdAt: new Date(e.createdAt),
+          });
         });
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        loaderPage(false);
       });
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      loaderPage(false);
-    });
+  }
 };
 
 /**
@@ -535,25 +539,27 @@ 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,
-    })
-    .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,
+      })
+      .then((res) => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        modal.value = false;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await fetchData();
+      });
+  }
 };
 
 /**
diff --git a/src/modules/04_registry/components/profileType.ts b/src/modules/04_registry/components/profileType.ts
index 8713fb8e7..85fe97d1e 100644
--- a/src/modules/04_registry/components/profileType.ts
+++ b/src/modules/04_registry/components/profileType.ts
@@ -14,7 +14,7 @@ interface Information {
   prefixId: string | null;
   firstname: string | null;
   lastname: string | null;
-  birthDate: Date;
+  birthDate: Date | null;
   genderId: string | null;
   bloodId: string | null;
   nationality: string | null;
diff --git a/src/modules/05_placement/components/Main.vue b/src/modules/05_placement/components/Main.vue
index a44c64441..09c125bce 100644
--- a/src/modules/05_placement/components/Main.vue
+++ b/src/modules/05_placement/components/Main.vue
@@ -315,7 +315,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
     รายการสอบแข่งขัน / คัดเลือก
   </div>
   <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
-    <div class="row q-col-gutter-md">
+    <div class="row q-col-gutter-sm">
       <div class="row col-12 q-col-gutter-sm">
         <q-select
           class="col-xs-12 col-sm-3 col-md-2"
diff --git a/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue b/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue
index 5c93f0fae..a63300ca2 100644
--- a/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue
+++ b/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue
@@ -2,7 +2,7 @@
   <div class="toptitle text-dark col-12 row items-center">ออกคำสั่ง</div>
   <div>
     <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
-      <div class="row q-col-gutter-md">
+      <div class="row q-col-gutter-sm">
         <div class="row col-12 q-col-gutter-sm">
           <q-select
             class="col-xs-12 col-sm-3 col-md-2"
diff --git a/src/modules/05_placement/components/OrderPlacement/step/step02.vue b/src/modules/05_placement/components/OrderPlacement/step/step02.vue
index afdb01b09..99ebb26cc 100644
--- a/src/modules/05_placement/components/OrderPlacement/step/step02.vue
+++ b/src/modules/05_placement/components/OrderPlacement/step/step02.vue
@@ -70,7 +70,7 @@
         </template>
 
         <template v-slot:body-selection="scope">
-          <q-checkbox
+          <!-- <q-checkbox
             keep-color
             color="primary"
             dense
@@ -83,6 +83,12 @@
                 );
               }
             "
+          /> -->
+          <q-checkbox
+            keep-color
+            color="primary"
+            dense
+            v-model="scope.selected"
           />
         </template>
 
@@ -175,6 +181,7 @@ import { ref } from "vue";
 import { useQuasar } from "quasar";
 import type { QInput } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
+import type { QTableProps } from "quasar";
 
 const props = defineProps({
   next: {
@@ -197,7 +204,7 @@ const $q = useQuasar();
 const filterRef = ref<QInput>();
 const filter = ref<string>("");
 const visibleColumns = ref<String[]>(["no", "idcard", "name", "educate"]);
-const columns = [
+const columns = ref<QTableProps["columns"]>([
   { name: "no", align: "left", label: "ลำดับ", field: "no", sortable: true },
   {
     name: "idcard",
@@ -220,7 +227,7 @@ const columns = [
     field: "educate",
     sortable: true,
   },
-];
+]);
 
 const rows = [
   {
diff --git a/src/modules/05_placement/components/OrderPlacement/step/step03.vue b/src/modules/05_placement/components/OrderPlacement/step/step03.vue
index 96a1ec94d..4c6568450 100644
--- a/src/modules/05_placement/components/OrderPlacement/step/step03.vue
+++ b/src/modules/05_placement/components/OrderPlacement/step/step03.vue
@@ -270,7 +270,7 @@
                 </template>
 
                 <template v-slot:body-selection="scope">
-                  <q-checkbox
+                  <!-- <q-checkbox
                     keep-color
                     color="primary"
                     dense
@@ -283,6 +283,12 @@
                         );
                       }
                     "
+                  /> -->
+                  <q-checkbox
+                    keep-color
+                    color="primary"
+                    dense
+                    v-model="scope.selected"
                   />
                 </template>
 
@@ -337,6 +343,7 @@ import type { QInput, QForm } from "quasar";
 import type { treeTab } from "@/modules/05_placement/interface/index/Main";
 import http from "@/plugins/http";
 import config from "@/app.config";
+import type { QTableProps } from "quasar";
 
 const props = defineProps({
   next: {
@@ -370,7 +377,7 @@ const selectedModal = ref([]);
 const test = ref([]);
 const filterModal = ref<string>("");
 const visibleColumnsModal = ref<String[]>(["no", "idcard", "name"]);
-const columnsModal = [
+const columnsModal = ref<QTableProps["columns"]>([
   { name: "no", align: "left", label: "ลำดับ", field: "no", sortable: true },
   {
     name: "idcard",
@@ -386,7 +393,7 @@ const columnsModal = [
     field: "name",
     sortable: true,
   },
-];
+]);
 
 const rowsModal = [
   {
@@ -482,7 +489,7 @@ const visibleColumns = ref<String[]>([
   "agency",
   "send",
 ]);
-const columns = [
+const columns = ref<QTableProps["columns"]>([
   { name: "no", align: "left", label: "ลำดับ", field: "no", sortable: true },
   {
     name: "idcard",
@@ -519,7 +526,7 @@ const columns = [
     field: "send",
     sortable: true,
   },
-];
+]);
 
 const rows = ref([
   {
diff --git a/src/modules/05_placement/components/PersonalDetail/Information/Certicate.vue b/src/modules/05_placement/components/PersonalDetail/Information/Certicate.vue
index 351cd071b..3082baed4 100644
--- a/src/modules/05_placement/components/PersonalDetail/Information/Certicate.vue
+++ b/src/modules/05_placement/components/PersonalDetail/Information/Certicate.vue
@@ -60,8 +60,10 @@ 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>('');
+// const profileId = ref<string>(
+//   route.params.id ? route.params.id.toString() : ""
+// );
+const profileId = ref<string>("");
 const rows = ref<RequestItemsObject[]>([]);
 const filter = ref<string>(""); //search data table
 const visibleColumns = ref<String[]>([]);
@@ -226,34 +228,39 @@ watch(visibleColumns, async (count: String[], prevCount: String[]) => {
 
 onMounted(async () => {
   // await fetchData();
+  if (route.params.id) {
+    profileId.value = route.params.id.toString();
+  }
 });
 
 const fetchData = async () => {
-  showLoader();
-  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 != "") {
+    showLoader();
+    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(() => {
+        hideLoader();
       });
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
+  }
 };
 
 /**
@@ -340,26 +347,28 @@ const clickSave = async () => {
  * บันทึกเพิ่มข้อมูล
  */
 const saveData = async () => {
-  showLoader();
-  await http
-    .post(config.API.profileCertId(profileId.value), {
-      id: id.value,
-      certificateNo: certificateNo.value,
-      issuer: issuer.value,
-      issueDate: dateToISO(issueDate.value),
-      expireDate: dateToISO(expireDate.value),
-      certificateType: certificateType.value,
-    })
-    .then((res) => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
-      modal.value = false;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await fetchData();
-    });
+  if (profileId.value !== "") {
+    showLoader();
+    await http
+      .post(config.API.profileCertId(profileId.value), {
+        id: id.value,
+        certificateNo: certificateNo.value,
+        issuer: issuer.value,
+        issueDate: dateToISO(issueDate.value),
+        expireDate: dateToISO(expireDate.value),
+        certificateType: certificateType.value,
+      })
+      .then((res) => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        modal.value = false;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await fetchData();
+      });
+  }
 };
 
 /**
diff --git a/src/modules/05_placement/components/probation/MainProbation.vue b/src/modules/05_placement/components/probation/MainProbation.vue
new file mode 100644
index 000000000..78ab58bc5
--- /dev/null
+++ b/src/modules/05_placement/components/probation/MainProbation.vue
@@ -0,0 +1,566 @@
+<template>
+    <div class="toptitle text-dark col-12 row items-center">รายการผู้ทดลองปฏิบัติหน้าที่ราชการ</div>
+		<q-card flat bordered class="col-12 q-mt-sm q-pa-md">
+			<div class="row q-col-gutter-sm">
+				<div class="row col-12 q-col-gutter-sm">
+					<div>
+						<q-btn @click="clickAdd()" size="12px" flat round color="add" icon="mdi-plus">
+							<q-tooltip>เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ</q-tooltip>
+						</q-btn>
+					</div>
+					<q-space />
+
+					<q-input
+						class="col-xs-12 col-sm-3 col-md-2"
+						standout
+						dense
+						v-model="filterKeyword"
+						ref="filterRef"
+						outlined
+						debounce="300"
+						placeholder="ค้นหา"
+					>
+						<template v-slot:append>
+							<q-icon v-if="filterKeyword == ''" name="search" />
+							<q-icon
+								v-if="filterKeyword !== ''"
+								name="clear"
+								class="cursor-pointer"
+								@click="resetFilter"
+							/>
+						</template>
+					</q-input>
+
+					<q-select
+						v-model="visibleColumns"
+						multiple
+						outlined
+						dense
+						options-dense
+						:display-value="$q.lang.table.columns"
+						emit-value
+						map-options
+						:options="columns"
+						option-value="name"
+						options-cover
+						style="min-width: 150px"
+						class="col-xs-12 col-sm-3 col-md-2"
+					/>
+				</div>
+				<div class="col-12">
+					<q-table
+						ref="table"
+						:columns="columns"
+						:rows="rows"
+						:filter="filterKeyword"
+						row-key="Order"
+						flat
+						bordered
+						:paging="true"
+						dense
+						class="custom-header-table"
+						v-bind="attrs"
+						:visible-columns="visibleColumns"
+						:pagination-label="paginationLabel"
+						v-model:pagination="pagination"
+					>
+						<template v-slot:header="props">
+							<q-tr :props="props">
+								<q-th v-for="col in props.cols" :key="col.name" :props="props">
+									<span class="text-weight-medium">{{ col.label }}</span>
+								</q-th>
+							</q-tr>
+						</template>
+						<template v-slot:body="props">
+							<q-tr :props="props" class="cursor-pointer" @click="router.push(`/probation/detail/${props.rowIndex + 1}`)">
+								<q-td
+									v-for="col in props.cols"
+									:key="col.name"
+									:props="props"
+								>
+									<div v-if="col.name == 'no'">
+										{{ props.rowIndex + 1 }}
+									</div>
+									<div v-else-if="col.name == 'status'">
+										<q-icon size="20px" v-if="props.row.status == 'อยู่ระหว่างการทดลองงาน'" name="mdi-timer-sand" color="deep-orange">
+											<q-tooltip>อยู่ระหว่างการทดลองงาน</q-tooltip>
+										</q-icon>
+										<q-icon size="20px" v-else-if="props.row.status == 'ไม่ผ่านการทดลอง'" name="mdi-close" color="red">
+											<q-tooltip>ไม่ผ่านการทดลอง</q-tooltip>
+										</q-icon>
+										<q-icon size="20px" v-else name="mdi-check" color="teal">
+											<q-tooltip>ผ่านการทดลองงาน</q-tooltip>
+										</q-icon>
+									</div>
+									<div v-else>
+										{{ col.value }}
+									</div>
+								</q-td>
+							</q-tr>
+						</template>
+						<template v-slot:pagination="scope">
+							<q-pagination
+								v-model="pagination.page"
+								active-color="primary"
+								color="dark"
+								:max="scope.pagesNumber"
+								:max-pages="5"
+								size="sm"
+								boundary-links
+								direction-links
+							></q-pagination>
+						</template>
+					</q-table>
+				</div>
+			</div>
+    </q-card>
+
+		<q-dialog v-model="modal" persistent>
+			<q-card style="width: 900px; max-width: 80vw;">
+				<q-form ref="myForm">
+					<DialogHeader tittle="เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ " :close="clickClose" />
+					<q-separator />
+					<q-card-section class="q-pa-md q-col-gutter-sm">
+						<q-input
+							class="col-12"
+							standout
+							dense
+							v-model="filterKeyword2"
+							ref="filterRef2"
+							outlined
+							debounce="300"
+							placeholder="ค้นหา"
+						>
+							<template v-slot:append>
+								<q-icon v-if="filterKeyword2 == ''" name="search" />
+								<q-icon
+									v-if="filterKeyword2 !== ''"
+									name="clear"
+									class="cursor-pointer"
+									@click="resetFilter2"
+								/>
+							</template>
+						</q-input>
+						<div class="col-12">
+							<q-table
+								ref="table2"
+								:columns="columns2"
+								:rows="rows2"
+								:filter="filterKeyword2"
+								row-key="Order"
+								flat
+								bordered
+								:paging="true"
+								dense
+								class="custom-header-table"
+								v-bind="attrs"
+								:visible-columns="visibleColumns2"
+								:pagination-label="paginationLabel"
+								v-model:pagination="pagination"
+							>
+								<template v-slot:header="props">
+									<q-tr :props="props">
+										<q-th v-for="col in props.cols" :key="col.name" :props="props">
+											<span class="text-weight-medium">{{ col.label }}</span>
+										</q-th>
+										<q-th auto-width />
+									</q-tr>
+								</template>
+								<template v-slot:body="props">
+									<q-tr :props="props" class="cursor-pointer">
+										<q-td
+											v-for="col in props.cols"
+											:key="col.name"
+											:props="props"
+										>
+											<div v-if="col.name == 'no'">
+												{{ props.rowIndex + 1 }}
+											</div>
+											<div v-else>
+												{{ col.value }}
+											</div>
+										</q-td>
+										<q-td auto-width>
+											<q-btn
+												dense
+												class="q-px-md"
+												outline
+												color="primary"
+												v-close-popup
+												label="เพิ่ม"
+											>
+											</q-btn>
+										</q-td>
+									</q-tr>
+								</template>
+								<template v-slot:pagination="scope">
+									<q-pagination
+										v-model="pagination.page"
+										active-color="primary"
+										color="dark"
+										:max="scope.pagesNumber"
+										:max-pages="5"
+										size="sm"
+										boundary-links
+										direction-links
+									></q-pagination>
+								</template>
+							</q-table>
+						</div>
+					</q-card-section>        
+				</q-form>
+			</q-card>
+  	</q-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, useAttrs } from "vue";
+import type { QTableProps } from "quasar";
+import type { FormMainProbation, FormMainProbation2 } from "@/modules/05_placement/interface/request/Main";
+import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
+import router from "@/router";
+import { useQuasar } from "quasar";
+
+const $q = useQuasar(); //ใช้ noti quasar
+const modal = ref<boolean>(false);
+const pagination = ref({
+  sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+
+const visibleColumns = ref<string[]>([
+  "no",
+  "name",
+	"position",
+  "level",
+  "institution",
+  "time",
+  "status",
+  "orderNum",
+]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+
+// หัวตาราง
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อ-สกุล",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+	{
+    name: "position",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+	{
+    name: "level",
+    align: "left",
+    label: "ระดับ",
+    sortable: true,
+    field: "level",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+	{
+    name: "institution",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "institution",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+	{
+    name: "time",
+    align: "center",
+    label: "ครั้งที่ทดลองงาน",
+    sortable: true,
+    field: "time",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+	{
+    name: "orderNum",
+    align: "center",
+    label: "เลขที่คําสั่งบรรจุแต่งตั้ง",
+    sortable: true,
+    field: "orderNum",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "status",
+    align: "center",
+    label: "สถานะทดลองงาน",
+    sortable: true,
+    field: "status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  }
+]);
+
+// ข้อมูลตาราง (จำลอง)
+const rows = ref<FormMainProbation[]>([
+	{
+		no:"1",
+		name: "นายสมคิด ยอดใจ ",
+		position: "นักวิชาการพัสดุ",
+		level: "ปฏิบัติการ",
+		institution: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
+		time: "1",
+		status: "อยู่ระหว่างการทดลองงาน",
+		orderNum: "11/2566",
+	},
+	{
+		no:"2",
+		name: "นายเกียรติศักดิ์ บัณฑิต",
+		position: "นักวิชาการพัสดุ",
+		level: "ปฏิบัติการ",
+		institution: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
+		time: "1",
+		status: "อยู่ระหว่างการทดลองงาน",
+		orderNum: "11/2566",
+	},
+	{
+		no:"3",
+		name: "นางสาวกัณฐิมา กาฬสินธุ์",
+		position: "นักจัดการงานทั่วไป",
+		level: "ปฏิบัติการ",
+		institution: "กลุ่มงานช่วยนักบริหาร",
+		time: "1",
+		status: "อยู่ระหว่างการทดลองงาน",
+		orderNum: "11/2566",
+	},
+	{
+		no:"4",
+		name: "นางสาวเมขลา กระจ่างมนตรี",
+		position: "นักจัดการงานทั่วไป",
+		level: "ปฏิบัติการ",
+		institution: "กลุ่มงานช่วยนักบริหาร",
+		time: "1",
+		status: "ไม่ผ่านการทดลอง",
+		orderNum: "11/2566",
+	},
+	{
+		no:"5",
+		name: "นางสาวฐิติรัตน์ พงษ์ศิริ",
+		position: "นักจัดการงานทั่วไป",
+		level: "ปฏิบัติการ",
+		institution: "กลุ่มงานช่วยนักบริหาร",
+		time: "1",
+		status: "ผ่านการทดลองงาน",
+		orderNum: "11/2566",
+	}
+]);
+
+const visibleColumns2 = ref<string[]>([
+  "no",
+  "name",
+	"position",
+  "level",
+  "institution"
+]);
+
+// หัวตาราง2
+const columns2 = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px"
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อ-สกุล",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+	{
+    name: "position",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+	{
+    name: "level",
+    align: "left",
+    label: "ระดับ",
+    sortable: true,
+    field: "level",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+	{
+    name: "institution",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "institution",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  }
+]);
+
+// ข้อมูลตาราง (จำลอง)
+const rows2 = ref<FormMainProbation2[]>([
+  {
+		no:"1",
+    name: "นายใจดี ยอดใจ ",
+		position: "นักวิชาการพัสดุ",
+		level: "ปฏิบัติการ",
+  	institution: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
+  },
+	{
+		no:"2",
+    name: "นายจักกริน บัณฑิต",
+		position: "นักวิชาการพัสดุ",
+		level: "ปฏิบัติการ",
+  	institution: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
+  },
+	{
+		no:"3",
+    name: "นางสาวกัณฐิมา กาฬสินธุ์",
+		position: "นักจัดการงานทั่วไป",
+		level: "ปฏิบัติการ",
+  	institution: "กลุ่มงานช่วยนักบริหาร",
+  },
+	{
+		no:"4",
+    name: "นางสาวเมขลา กระจ่างมนตรี",
+		position: "นักจัดการงานทั่วไป",
+		level: "ปฏิบัติการ",
+  	institution: "กลุ่มงานช่วยนักบริหาร",
+  },
+	{
+		no:"5",
+    name: "นางสาวฐิติรัตน์ พงษ์ศิริ",
+		position: "นักจัดการงานทั่วไป",
+		level: "ปฏิบัติการ",
+  	institution: "กลุ่มงานช่วยนักบริหาร",
+  }
+]);
+
+const clickDelete = (id: string) => {
+  $q.dialog({
+    title: "ยืนยันการลบข้อมูล",
+    message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
+    cancel: {
+      flat: true,
+      color: "negative",
+    },
+    persistent: true,
+  })
+    .onOk(async () => {
+    })
+    .onCancel(() => {})
+    .onDismiss(() => {});
+};
+
+
+const clickAdd = () => {
+	modal.value = true
+};
+const clickClose = async () => {
+  modal.value = false;
+};
+
+// ค้นหาในตาราง
+const filterKeyword = ref<string>("");
+const filterRef = ref<any>(null);
+const resetFilter = () => {
+  filterKeyword.value = "";
+  filterRef.value.focus();
+};
+
+const filterKeyword2 = ref<string>("");
+const filterRef2 = ref<any>(null);
+const resetFilter2 = () => {
+  filterKeyword2.value = "";
+  filterRef2.value.focus();
+};
+
+const attrs = ref<any>(useAttrs());
+
+const paging = ref<boolean>(true);
+const paginationLabel = (start: string, end: string, total: string) => {
+  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
+  else return start + "-" + end + " ใน " + total;
+};
+
+</script>
+
+<style lang="scss" scope>
+.filter-card {
+  background-color: #f1f1f1b0;
+}
+
+.toggle-expired-account {
+  font-size: 12px;
+  font-weight: 400;
+  font-size: 15px;
+  line-height: 150%;
+  color: #35373c;
+}
+
+.icon-color {
+  color: #4154b3;
+}
+
+.custom-header-table {
+  max-height: 64vh;
+
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+    z-index: 1;
+  }
+
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/modules/05_placement/components/probation/ProbationDetail.vue b/src/modules/05_placement/components/probation/ProbationDetail.vue
new file mode 100644
index 000000000..4a971e5a0
--- /dev/null
+++ b/src/modules/05_placement/components/probation/ProbationDetail.vue
@@ -0,0 +1,333 @@
+<template>
+    <div class="toptitle text-dark col-12 row items-center">
+        <q-btn
+            icon="mdi-arrow-left"
+            unelevated
+            round
+            dense
+            flat
+            color="primary"
+            class="q-mr-sm"
+            @click="router.go(-1)"
+        />
+        รายละเอียดงานที่ได้รับมอบหมายของ {{ name }}
+				
+    </div>
+    <q-card bordered class="row col-12 text-dark">
+			<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+				<div class="q-pl-sm text-weight-bold text-subtitle2">{{ name }}</div>
+				<q-space />
+				<q-btn outline color="blue" dense icon-right="mdi-open-in-new" class="q-px-sm" label="ดูข้อมูลทะเบียนประวัติ" />
+			</div>
+			<div class="col-12"><q-separator/></div>
+			<div class="row col-12 q-pa-md">
+				<div class="col-12 row bg-white q-col-gutter-md">
+					<div class="col-xs-3 col-sm-2 col-md-1 row ">
+						<q-img src="@/assets/avatar_user.jpg" />
+					</div>
+					<div class="col-xs-6 col-sm-3 row items-center">
+						<div class="col-12 q-pl-md">
+							<div class="col-12 text-top">ตำแหน่งในสายงาน</div>
+							<div class="col-12 text-detail">{{position}}</div>
+						</div>
+					</div>
+					<div class="col-xs-6 col-sm-2 row items-center">
+						<div class="col-12">
+							<div class="col-12 text-top">ระดับ</div>
+							<div class="col-12 text-detail">{{level}}</div>
+						</div>
+					</div>
+					<div class="col-xs-6 col-sm-3 row items-center">
+						<div class="col-12">
+							<div class="col-12 text-top">สังกัด</div>
+							<div class="col-12 text-detail">{{institution}}</div>
+						</div>
+					</div>
+					<div class="col-xs-6 col-sm-3 row items-center">
+						<div class="col-12">
+							<div class="col-12 text-top">สถานะการทดลองงาน</div>
+							<div class="col-12 text-detail">
+								<q-icon size="20px" v-if="status == 'อยู่ระหว่างการทดลองงาน'" name="mdi-timer-sand" color="deep-orange" />
+								<q-icon size="20px" v-else-if="status == 'ไม่ผ่านการทดลอง'" name="mdi-close" color="red" />
+								<q-icon size="20px" v-else name="mdi-check" color="teal" />
+								{{ status }}
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+    </q-card>
+  <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
+		<div class="row q-col-gutter-sm">
+			<div class="row col-12 q-col-gutter-sm">
+				<div>
+					<q-btn @click="clickAdd()" size="12px" flat round color="add" icon="mdi-plus">
+						<q-tooltip>เพิ่มงานที่ได้รับมอบหมาย</q-tooltip>
+					</q-btn>
+				</div>
+				<q-space />
+				<div>
+					<q-btn flat round color="blue" icon="mdi-file-download-outline">
+						<q-tooltip> ดาวน์โหลด .Docx</q-tooltip>
+					</q-btn>
+				</div>
+				<q-input
+					class="col-xs-12 col-sm-3 col-md-2"
+					standout
+					dense
+					v-model="filterKeyword"
+					ref="filterRef"
+					outlined
+					debounce="300"
+					placeholder="ค้นหา"
+				>
+					<template v-slot:append>
+						<q-icon v-if="filterKeyword == ''" name="search" />
+						<q-icon
+							v-if="filterKeyword !== ''"
+							name="clear"
+							class="cursor-pointer"
+							@click="resetFilter"
+						/>
+					</template>
+				</q-input>
+
+				<q-select
+					v-model="visibleColumns"
+					multiple
+					outlined
+					dense
+					options-dense
+					:display-value="$q.lang.table.columns"
+					emit-value
+					map-options
+					:options="columns"
+					option-value="name"
+					options-cover
+					style="min-width: 150px"
+					class="col-xs-12 col-sm-3 col-md-2"
+				/>
+			</div>
+			<div class="col-12">
+				<q-table
+					ref="table"
+					:columns="columns"
+					:rows="rows"
+					:filter="filterKeyword"
+					row-key="Order"
+					flat
+					bordered
+					:paging="true"
+					dense
+					class="custom-header-table"
+					v-bind="attrs"
+					:visible-columns="visibleColumns"
+					:pagination-label="paginationLabel"
+					v-model:pagination="pagination"
+				>
+					<template v-slot:header="props">
+						<q-tr :props="props">
+							<q-th v-for="col in props.cols" :key="col.name" :props="props">
+								<span class="text-weight-medium">{{ col.label }}</span>
+							</q-th>
+						</q-tr>
+					</template>
+					<template v-slot:body="props">
+						<q-tr :props="props" class="cursor-pointer">
+							<q-td
+								v-for="col in props.cols"
+								:key="col.name"
+								:props="props"
+							>
+								<div v-if="col.name == 'no'">
+									{{ props.rowIndex + 1 }}
+								</div>
+								<div v-else>
+									{{ col.value }}
+								</div>
+							</q-td>
+						</q-tr>
+					</template>
+					<template v-slot:pagination="scope">
+						<q-pagination
+							v-model="pagination.page"
+							active-color="primary"
+							color="dark"
+							:max="scope.pagesNumber"
+							:max-pages="5"
+							size="sm"
+							boundary-links
+							direction-links
+						></q-pagination>
+					</template>
+				</q-table>
+			</div>
+		</div>   
+  </q-card>    
+</template>
+<script setup lang="ts">
+import { useRouter } from "vue-router";
+import { ref, useAttrs } from "vue";
+import type { QTableProps } from "quasar";
+import type { FormProbationDetail } from "@/modules/05_placement/interface/request/Main";
+const router = useRouter();
+
+const name = ref<string>('นายสมคิด ยอดใจ')
+const position = ref<string>('นักจัดการงานทั่วไป')
+const level = ref<string>('ชำนาญการพิเศษ')
+const institution = ref<string>('ฝ่ายบริหารงานทั่วไป')
+const status = ref<string>('อยู่ระหว่างการทดลองงาน')
+
+const pagination = ref({
+  sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+
+const visibleColumns = ref<string[]>([
+  "no",
+  "startDate",
+	"endDete",
+  "intendant",
+  "commander",
+]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+
+// หัวตาราง
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "startDate",
+    align: "left",
+    label: "ตั้งแต่วันที่",
+    sortable: true,
+    field: "startDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+	{
+    name: "endDete",
+    align: "left",
+    label: "ถึงวันที่",
+    sortable: true,
+    field: "endDete",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+	{
+    name: "intendant",
+    align: "left",
+    label: "ผู้ดูแล",
+    sortable: true,
+    field: "intendant",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+	{
+    name: "commander",
+    align: "left",
+    label: "ผู้บังคับบัญชา",
+    sortable: true,
+    field: "commander",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  }
+]);
+
+// ข้อมูลตาราง (จำลอง)
+const rows = ref<FormProbationDetail[]>([
+  {
+		no: "1",
+		startDate: "09 ก.ย. 2566",
+		endDete: "20 ต.ค. 2566",
+  	intendant: "นางสาวรัชภรณ์ ภักดี",
+  	commander: "นายนภัทร  วันดี"
+	},
+	{
+		no: "2",
+		startDate: "09 ก.ย. 2566",
+		endDete: "20 ต.ค. 2566",
+  	intendant: "นางสาวทวิดา กมลเวชชี",
+  	commander: "นางพิศ โพธิ์ดำ"
+	},
+	{
+		no: "3",
+		startDate: "09 ก.ย. 2566",
+		endDete: "20 ต.ค. 2566",
+  	intendant: "นางสาวทวิดา กมลเวชชี",
+  	commander: "นายนภัทร  วันดี"
+	},
+]);
+
+const clickAdd = () => {
+};
+
+// ค้นหาในตาราง
+const filterKeyword = ref<string>("");
+const filterRef = ref<any>(null);
+const resetFilter = () => {
+  filterKeyword.value = "";
+  filterRef.value.focus();
+};
+
+const attrs = ref<any>(useAttrs());
+
+const paging = ref<boolean>(true);
+const paginationLabel = (start: string, end: string, total: string) => {
+  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
+  else return start + "-" + end + " ใน " + total;
+};
+</script>
+<style lang="scss" scope>
+.q-img {
+  border-radius: 5px;
+	height: 70px;
+}
+.text-top{
+	color: gray;
+	font-weight: 400;
+	padding-bottom: 3px;
+}
+.text-detail{
+	font-weight: 500;
+
+}
+.custom-header-table {
+  max-height: 64vh;
+
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+    z-index: 1;
+  }
+
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/modules/05_placement/interface/request/Main.ts b/src/modules/05_placement/interface/request/Main.ts
index a86e0dce2..84af7910f 100644
--- a/src/modules/05_placement/interface/request/Main.ts
+++ b/src/modules/05_placement/interface/request/Main.ts
@@ -23,5 +23,32 @@ interface FormOrderPlacementMainData {
   OrderType: string;
 }
 
+interface FormMainProbation {
+  no: string;
+  name: string;
+  position: string;
+  level: string;
+  institution: string;
+  time: string;
+  status: string;
+  orderNum: string;
+}
+interface FormMainProbation2 {
+  no: string;
+  name: string;
+  position: string;
+  level: string;
+  institution: string;
+}
+interface FormProbationDetail {
+  no: string;
+  startDate: string;
+  endDete: string;
+  intendant: string;
+  commander: string;
+}
 export type { FormPlacementMainData };
 export type { FormOrderPlacementMainData };
+export type { FormMainProbation };
+export type { FormMainProbation2 };
+export type { FormProbationDetail };
diff --git a/src/modules/05_placement/router.ts b/src/modules/05_placement/router.ts
index 6c3074a71..5beef4f59 100644
--- a/src/modules/05_placement/router.ts
+++ b/src/modules/05_placement/router.ts
@@ -20,7 +20,11 @@ const detailOrderReplace = () =>
   import(
     "@/modules/05_placement/components/OrderPlacement/detailOrderPlacement.vue"
   );
+const mainProbation = () =>
+  import("@/modules/05_placement/components/probation/MainProbation.vue");
 
+const probationDetail = () =>
+  import("@/modules/05_placement/components/probation/ProbationDetail.vue");
 export default [
   {
     path: "/placement",
@@ -82,4 +86,24 @@ export default [
       Role: "placement",
     },
   },
+  {
+    path: "/probation",
+    name: "probation",
+    component: mainProbation,
+    meta: {
+      Auth: true,
+      Key: [6.3],
+      Role: "placement",
+    },
+  },
+  {
+    path: "/probation/detail/:id",
+    name: "probationDetail",
+    component: probationDetail,
+    meta: {
+      Auth: true,
+      Key: [6.3],
+      Role: "placement",
+    },
+  },
 ];
diff --git a/src/modules/08_registryEmployee/router.ts b/src/modules/08_registryEmployee/router.ts
index 0c5f75453..198e2e745 100644
--- a/src/modules/08_registryEmployee/router.ts
+++ b/src/modules/08_registryEmployee/router.ts
@@ -1,10 +1,16 @@
 /**
  * Router ระบบทะเบียนประวัติลูกจ้าง (registryEmployee)
  */
+import { defineAsyncComponent } from "vue";
 
-const Main = () => import("@/modules/08_registryEmployee/views/Main.vue");
-// const Detail = () =>
-//   import("@/modules/08_registryEmployee/components/Profile.vue");
+// const Main = () => import("@/modules/08_registryEmployee/views/Main.vue");
+// const Detail = () => import("@/modules/08_registryEmployee/views/Detail.vue");
+const Main = defineAsyncComponent(
+  () => import("@/modules/08_registryEmployee/views/Main.vue")
+);
+const Detail = defineAsyncComponent(
+  () => import("@/modules/08_registryEmployee/views/Detail.vue")
+);
 
 export default [
   {
@@ -23,8 +29,18 @@ export default [
   //     component: Detail,
   //     meta: {
   //       Auth: true,
-  //       Key: [9],
+  //       Key: [10],
   //       Role: "registryEmployeeDetails",
   //     },
   //   },
+  {
+    path: "/registryEmployee/add",
+    name: "registryEmployeeAdd",
+    component: Detail,
+    meta: {
+      Auth: true,
+      Key: [11],
+      Role: "registryEmployee",
+    },
+  },
 ];
diff --git a/src/modules/08_registryEmployee/views/Detail.vue b/src/modules/08_registryEmployee/views/Detail.vue
new file mode 100644
index 000000000..38dc15279
--- /dev/null
+++ b/src/modules/08_registryEmployee/views/Detail.vue
@@ -0,0 +1,1012 @@
+<template>
+  <div class="col-12 row">
+    <div class="row col-12" style="padding-top: 80px">
+      <div id="information" name="1" class="row col-12 information q-mt-sm">
+        <!-- <Informationvue
+            v-model:statusEdit="statusEdit"
+            :profileType="profileType"
+          /> -->
+        <Information
+          v-model:statusEdit="statusEdit"
+          :fetchDataProfile="fetchData"
+          :statusAdd="true"
+        />
+      </div>
+      <div id="government" name="16" class="row col-12">
+        <!-- <Government v-model:statusEdit="statusEdit" :statusAdd="true" /> -->
+      </div>
+      <div id="address" name="17" class="row col-12">
+        <Address v-model:statusEdit="statusEdit" :statusAdd="true" />
+      </div>
+      <div id="family" name="18" class="row col-12">
+        <Family v-model:statusEdit="statusEdit" :statusAdd="true" />
+      </div>
+      <div id="certicate" name="15" class="row col-12">
+        <Certicate
+          v-model:statusEdit="statusEdit"
+          :statusAdd="true"
+          profileType="employee"
+        />
+      </div>
+      <div id="education" name="2" class="row col-12 q-mt-md">
+        <EducationVue v-model:statusEdit="statusEdit" :statusAdd="true" />
+      </div>
+      <div id="training" name="3" class="row col-12 q-mt-md">
+        <TrainVue v-model:statusEdit="statusEdit" :statusAdd="true" />
+      </div>
+      <div id="insignia" name="4" class="row col-12 q-mt-md">
+        <InsigniaVue v-model:statusEdit="statusEdit" :statusAdd="true" />
+      </div>
+      <div id="coined" name="5" class="row col-12 q-mt-md">
+        <CoinedVue
+          v-model:statusEdit="statusEdit"
+          :statusAdd="true"
+          profileType="employee"
+        />
+      </div>
+      <div id="assessment" name="6" class="row col-12 q-mt-md">
+        <AssessmentVue
+          v-model:statusEdit="statusEdit"
+          :statusAdd="true"
+          profileType="employee"
+        />
+      </div>
+      <div id="position" name="7" class="row col-12 q-mt-md">
+        <!-- <SalaryVue
+          v-model:statusEdit="statusEdit" :statusAdd="true"
+          v-if="profileType === 'officer'"
+        /> -->
+
+        <SalaryEmployeeVue v-model:statusEdit="statusEdit" :statusAdd="true" />
+      </div>
+      <div id="rule" name="8" class="row col-12 q-mt-md">
+        <DisciplineVue v-model:statusEdit="statusEdit" :statusAdd="true" />
+      </div>
+      <div id="leave" name="9" class="row col-12 q-mt-md">
+        <LeaveVue v-model:statusEdit="statusEdit" :statusAdd="true" />
+      </div>
+      <div id="talent" name="10" class="row col-12 q-mt-md">
+        <TalentVue v-model:statusEdit="statusEdit" :statusAdd="true" />
+      </div>
+      <div id="work" name="11" class="row col-12 q-mt-md">
+        <WorkVue v-model:statusEdit="statusEdit" :statusAdd="true" />
+      </div>
+      <div id="record" name="12" class="row col-12 q-mt-md">
+        <RecordVue v-model:statusEdit="statusEdit" :statusAdd="true" />
+      </div>
+      <div id="other" name="13" class="row col-12 q-mt-md">
+        <OtherVue v-model:statusEdit="statusEdit" :statusAdd="true" />
+      </div>
+      <div id="document" name="14" class="row col-12 q-my-md">
+        <DocumentVue v-model:statusEdit="statusEdit" :statusAdd="true" />
+      </div>
+    </div>
+    <q-page-sticky
+      position="top"
+      expand
+      class="bg-grey-2 text-white"
+      style="z-index: 99; padding: 0% 1% 0% 1%"
+    >
+      <div
+        class="row col-12 q-gutter-sm q-pb-sm text-dark no-wrap items-center"
+      >
+        <q-btn
+          flat
+          round
+          class="bg-teal-1 full-height"
+          color="primary"
+          icon="mdi-chevron-left"
+          dense
+          @click="router.go(-1)"
+        >
+        </q-btn>
+        <q-avatar
+          v-if="imageUrl == null"
+          size="65px"
+          rounded
+          class="containerimage"
+        >
+          <img
+            src="@/assets/avatar_user.jpg"
+            class="bg-grey-3"
+            style="object-fit: cover"
+          />
+          <div
+            class="overlay absolute-bottom text-subtitle2 text-center cursor-pointer"
+            @click="clickImage()"
+          >
+            <q-icon name="mdi-camera" size="18px" color="blue">
+              <q-tooltip>อัปเดตรูปภาพ</q-tooltip>
+            </q-icon>
+
+            <input
+              type="file"
+              style="display: none"
+              ref="inputImage"
+              accept="image/*"
+              @change="uploadImage"
+            />
+          </div>
+        </q-avatar>
+        <q-avatar v-else size="65px" rounded class="containerimage">
+          <img :src="imageUrl" class="bg-grey-3" style="object-fit: cover" />
+          <div
+            class="overlay absolute-bottom text-subtitle2 text-center cursor-pointer"
+            @click="clickImage()"
+          >
+            <q-icon name="mdi-camera" size="18px" color="blue">
+              <q-tooltip>อัปเดตรูปภาพ</q-tooltip>
+            </q-icon>
+
+            <input
+              type="file"
+              style="display: none"
+              ref="inputImage"
+              accept="image/*"
+              @change="uploadImage"
+            />
+          </div>
+        </q-avatar>
+        <div class="row items-center text-dark q-ml-md">
+          <div class="column">
+            <div class="text-bold q-pb-xs text-name">
+              {{ "เพิ่มข้อมูลทะเบียนประวัติ" }}
+            </div>
+            <div class="text-bold q-pb-xs text-sub">
+              {{ "ลูกจ้างชั่วคราว" }}
+            </div>
+          </div>
+        </div>
+        <q-space />
+        <!-- <q-btn
+          round
+          flat
+          :color="reasonStatus ? 'primary' : 'pink-5'"
+          @click="clickRetire()"
+          :icon="
+            reasonStatus ? 'mdi-home-import-outline' : 'mdi-home-export-outline'
+          "
+        >
+          <q-tooltip>{{
+            reasonStatus ? "กลับเข้าราชการ" : "ออกราชการ"
+          }}</q-tooltip>
+        </q-btn> -->
+
+        <!-- <q-btn icon="mdi-file-eye-outline" round color="primary" flat>
+          <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+          <q-menu>
+            <q-list style="min-width: 100px">
+              <q-item clickable v-close-popup @click="clickKp7()">
+                <q-item-section class="text-blue">ก.พ.7/ก.ก.1</q-item-section>
+              </q-item>
+              <q-item clickable v-close-popup @click="clickKp7Short()">
+                <q-item-section class="text-primary"
+                  >ประวัติแบบย่อ</q-item-section
+                >
+              </q-item>
+            </q-list>
+          </q-menu>
+        </q-btn> -->
+      </div>
+    </q-page-sticky>
+  </div>
+  <q-dialog v-model="dialog" persistent>
+    <q-card style="width: 90vw; max-width: 80vw">
+      <q-card-section class="row items-center q-pb-xs col-12">
+        <q-space />
+        <q-btn
+          @click="downloadKP7()"
+          unelevated
+          class="btn_purple q-mr-sm"
+          label="ดาวน์โหลด ก.พ.7/ก.ก.1"
+        ></q-btn>
+        <q-btn
+          icon="close"
+          unelevated
+          round
+          dense
+          @click="closeKp7"
+          style="color: #ff8080; background-color: #ffdede"
+        />
+      </q-card-section>
+      <q-card-section class="q-p-sm">
+        <!-- <viewpdf
+            :src="pdfSrc"
+            :currentpage="pdfCurrentPage"
+            :totalpage="pdfTotalPage"
+          ></viewpdf> -->
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+  <q-dialog v-model="dialogShort" persistent>
+    <q-card style="width: 90vw; max-width: 80vw">
+      <q-card-section class="row items-center q-pb-xs col-12">
+        <q-space />
+        <q-btn
+          @click="downloadKP7Short()"
+          unelevated
+          class="btn_purple q-mr-sm"
+          label="ดาวน์โหลด ประวัติแบบย่อ"
+        ></q-btn>
+        <q-btn
+          icon="close"
+          unelevated
+          round
+          dense
+          @click="closeKp7Short"
+          style="color: #ff8080; background-color: #ffdede"
+        />
+      </q-card-section>
+      <q-card-section class="q-p-sm">
+        <!-- <viewpdf
+            :src="pdfSrcShort"
+            :currentpage="pdfCurrentPageShort"
+            :totalpage="pdfTotalPageShort"
+          ></viewpdf> -->
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+  <!-- Dialog เลือก Image -->
+  <q-dialog v-model="dialogImage" persistent>
+    <q-card style="width: 100vw; max-width: 60vw">
+      <q-card-section class="q-py-sm row">
+        <div class="text-h6">เลือกรูปภาพ</div>
+        <q-space />
+        <q-btn
+          icon="close"
+          unelevated
+          round
+          dense
+          @click="closeImage"
+          style="color: #ff8080; background-color: #ffdede"
+        >
+          <q-tooltip>ปิดหน้านี้</q-tooltip>
+        </q-btn>
+      </q-card-section>
+      <q-separator />
+      <q-card-section class="col-12 row">
+        <div
+          class="row wrap items-start col-12 q-col-gutter-sm"
+          style="height: 320px; overflow: auto"
+        >
+          <div class="col-3" @click="addNewImage">
+            <div
+              style="
+                height: 160px;
+                max-width: 15vw;
+                display: flex !important;
+                justify-content: center;
+                align-items: center;
+              "
+              class="column rounded-borders cursor-pointer bg-active-image text-white"
+            >
+              <q-icon name="add" size="60px" color="white" />
+              <strong>อัปโหลดรูปภาพ</strong>
+            </div>
+          </div>
+          <div
+            v-for="n in images"
+            :key="n"
+            class="col-3"
+            @click="imageActive(n)"
+          >
+            <div :class="getClass(n)">
+              <q-img
+                v-if="n.avatar != null"
+                :src="n.avatar"
+                :class="imageClass(n)"
+              >
+                <!-- <div
+                    class="absolute-top bg-transparent cursor-pointer text-right"
+                    style="padding: 5px"
+                  >
+                    <q-btn
+                      icon="delete"
+                      unelevated
+                      round
+                      dense
+                      @click="deletePhoto"
+                      style="color: #ff8080"
+                    />
+                  </div> -->
+                <div
+                  class="absolute-bottom col-12 cursor-pointer flex justify-between items-center"
+                  style="padding: 5px"
+                >
+                  {{ date2Thai(n.createdDate) }}
+
+                  <q-btn
+                    v-if="!n.isActive"
+                    icon="delete"
+                    unelevated
+                    dense
+                    @click="deletePhoto(n.id)"
+                    class="bg-white"
+                    style="color: #ff8080"
+                  />
+                </div>
+              </q-img>
+            </div>
+          </div>
+        </div>
+      </q-card-section>
+      <q-separator />
+      <q-card-actions align="right">
+        <!-- <q-btn
+            flat
+            round
+            color="red"
+            @click="() => {}"
+            icon="mdi-delete-outline"
+          >
+            <q-tooltip>ลบรูปภาพ</q-tooltip>
+          </q-btn> -->
+        <q-btn
+          icon="check"
+          dense
+          flat
+          round
+          @click="selectAvatarHistory"
+          color="positive"
+        >
+          <q-tooltip>เลือกรูปภาพ</q-tooltip>
+        </q-btn>
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+  <!-- Dialog เลือก เกษียณ -->
+  <q-dialog v-model="dialogLeave" persistent>
+    <q-card style="width: 600px">
+      <q-toolbar>
+        <q-toolbar-title class="text-subtitle2 text-bold"
+          >ประเภทการพ้นราชการ
+        </q-toolbar-title>
+        <q-btn
+          icon="close"
+          unelevated
+          round
+          dense
+          @click="closeLeave"
+          style="color: #ff8080; background-color: #ffdede"
+        />
+      </q-toolbar>
+
+      <q-separator />
+      <q-card-section class="q-p-sm">
+        <div
+          class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
+        >
+          <div class="col-xs-6 col-sm-6 col-md-6">
+            <q-select
+              class="full-width inputgreen cursor-pointer"
+              outlined
+              dense
+              lazy-rules
+              v-model="reason"
+              :rules="[(val) => !!val || `${'กรุณาเลือกประเภทการพ้นราชการ'}`]"
+              hide-bottom-space
+              :label="`${'ประเภทการพ้นราชการ'}`"
+              emit-value
+              map-options
+              option-label="name"
+              :options="reasonOptions"
+              option-value="id"
+            />
+          </div>
+          <div class="col-xs-6 col-sm-6 col-md-6">
+            <datepicker
+              menu-class-name="modalfix"
+              v-model="leaveDate"
+              :locale="'th'"
+              autoApply
+              :enableTimePicker="false"
+              week-start="0"
+            >
+              <template #year="{ year }">{{ year + 543 }}</template>
+              <template #year-overlay-value="{ value }">{{
+                parseInt(value + 543)
+              }}</template>
+              <template #trigger>
+                <q-input
+                  class="full-width inputgreen cursor-pointer"
+                  outlined
+                  dense
+                  lazy-rules
+                  :model-value="date2Thai(leaveDate)"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกวันที่พ้นราชการ'}`]"
+                  hide-bottom-space
+                  :label="`${'วันที่พ้นราชการ'}`"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+          </div>
+          <div class="col-xs-6 col-sm-6 col-md-6">
+            <q-input
+              class="full-width inputgreen cursor-pointer"
+              outlined
+              dense
+              lazy-rules
+              autogrow
+              v-model="leaveDetail"
+              :rules="[
+                (val) =>
+                  !!val || `${'กรุณากรอกสาเหตุ/เหตุผลของการพ้นจากราชการ'}`,
+              ]"
+              hide-bottom-space
+              :label="`${'สาเหตุ/เหตุผลของการพ้นจากราชการ'}`"
+            />
+          </div>
+          <div class="col-xs-6 col-sm-6 col-md-6">
+            <q-input
+              class="full-width inputgreen cursor-pointer"
+              outlined
+              dense
+              lazy-rules
+              autogrow
+              v-model="leaveNumberOrder"
+              :rules="[(val) => !!val || `${'กรุณากรอกคำสั่ง/เอกสารอ้างอิง'}`]"
+              hide-bottom-space
+              :label="`${'คำสั่ง/เอกสารอ้างอิง'}`"
+            />
+          </div>
+          <div class="col-xs-6 col-sm-6 col-md-6">
+            <datepicker
+              menu-class-name="modalfix"
+              v-model="leaveDateOrder"
+              :locale="'th'"
+              autoApply
+              :enableTimePicker="false"
+              week-start="0"
+            >
+              <template #year="{ year }">{{ year + 543 }}</template>
+              <template #year-overlay-value="{ value }">{{
+                parseInt(value + 543)
+              }}</template>
+              <template #trigger>
+                <q-input
+                  class="full-width inputgreen cursor-pointer"
+                  outlined
+                  dense
+                  lazy-rules
+                  :model-value="date2Thai(leaveDateOrder)"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกวันที่ออกคำสั่ง'}`]"
+                  hide-bottom-space
+                  :label="`${'วันที่ออกคำสั่ง'}`"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+          </div>
+        </div>
+      </q-card-section>
+      <q-separator />
+      <q-card-actions align="right">
+        <q-btn unelevated label="บันทึก" color="public" @click="Retire"
+          ><!-- icon="mdi-content-save-outline"
+            <q-tooltip>บันทึก</q-tooltip> -->
+        </q-btn>
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useDataStore } from "@/stores/data";
+import { useRoute, useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import EducationVue from "@/modules/04_registry/components/Education.vue";
+import TrainVue from "@/modules/04_registry/components/Train.vue";
+import InsigniaVue from "@/modules/04_registry/components/Insignia.vue";
+import CoinedVue from "@/modules/04_registry/components/Coin.vue";
+import AssessmentVue from "@/modules/04_registry/components/Assessment.vue";
+import SalaryVue from "@/modules/04_registry/components/Salary.vue";
+import SalaryEmployeeVue from "@/modules/04_registry/components/SalaryEmployee.vue";
+import DisciplineVue from "@/modules/04_registry/components/Discipline.vue";
+import LeaveVue from "@/modules/04_registry/components/Leave.vue";
+import TalentVue from "@/modules/04_registry/components/Talent.vue";
+import WorkVue from "@/modules/04_registry/components/Work.vue";
+import RecordVue from "@/modules/04_registry/components/Record.vue";
+import OtherVue from "@/modules/04_registry/components/Other.vue";
+import DocumentVue from "@/modules/04_registry/components/Document.vue";
+import Certicate from "@/modules/04_registry/components/Information/Certicate.vue";
+import Information from "@/modules/04_registry/components/Information/Information.vue";
+import Government from "@/modules/04_registry/components/Information/Government.vue";
+import Address from "@/modules/04_registry/components/Information/Address.vue";
+import Family from "@/modules/04_registry/components/Information/Family.vue";
+import OldName from "@/modules/04_registry/components/Information/OldName.vue";
+import type { DataOption } from "@/modules/04_registry/interface/index/Main";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const $q = useQuasar();
+const store = useDataStore();
+const { changeTab, loaderPage } = store;
+const mixin = useCounterMixin();
+const { date2Thai, dateToISO, messageError, dialogMessage, success } = mixin;
+const route = useRoute();
+const router = useRouter();
+const imageUrl = ref<any>(null);
+const inputImage = ref<any>(null);
+const fullname = ref<string>("");
+const position = ref<string>("นักจัดการงานทั่วไป");
+const pdfSrc = ref<string>("");
+const pdfCurrentPage = ref<number>();
+const pdfTotalPage = ref<number>();
+const pdfSrcShort = ref<string>("");
+const pdfCurrentPageShort = ref<number>();
+const pdfTotalPageShort = ref<number>();
+const dialog = ref<boolean>(false);
+const dialogShort = ref<boolean>(false);
+const dialogLeave = ref<boolean>(false);
+const dialogImage = ref<boolean>(false);
+const loader = ref<boolean>(false); //รอโหลด
+const statusEdit = ref<boolean>(false);
+const activeImage = ref<any | null>(null);
+const images = ref<any>([]);
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
+// const profileId = ref<string>("");
+const profileType = ref<string>("");
+const leaveDate = ref<Date>(new Date());
+const leaveDetail = ref<string>("");
+const leaveNumberOrder = ref<string>("");
+const leaveDateOrder = ref<Date>(new Date());
+const reason = ref<string>("");
+const reasonStatus = ref<boolean>(false);
+const leaveReason = ref<string>("");
+const reasonOptions = ref<DataOption[]>([
+  {
+    id: "retire",
+    name: "เกษียณอายุราชการ",
+  },
+  {
+    id: "resign",
+    name: "ลาออก",
+  },
+  {
+    id: "transfer",
+    name: "ให้โอน",
+  },
+  {
+    id: "death",
+    name: "ถึงแก่กรรม",
+  },
+  {
+    id: "layoff",
+    name: "ให้ออก",
+  },
+  {
+    id: "discharge",
+    name: "ปลดออก",
+  },
+  {
+    id: "dismiss",
+    name: "ไล่ออก",
+  },
+  //   {
+  //     id: "change",
+  //     name: "เปลี่ยนประเภทข้าราชการ",
+  //   },
+  {
+    id: "other",
+    name: "อื่นๆ",
+  },
+]);
+
+onMounted(async () => {
+  //   await checkProfileData();
+  //   await fetchData();
+  //   await changeTab("information");
+});
+
+const fetchData = async () => {
+  if (profileId.value !== "") {
+    loaderPage(true);
+    await http
+      .get(config.API.profileAvatarId(profileId.value))
+      .then((res) => {
+        const data = res.data.result;
+
+        fullname.value = data.fullname;
+        imageUrl.value = data.avatar;
+        position.value = data.position;
+        profileType.value = data.profileType;
+        const reason = reasonOptions.value.filter(
+          (r: DataOption) => r.id == data.leaveReason
+        );
+        if (reason.length > 0) {
+          leaveReason.value = ` (พ้นจากราชการด้วยสาเหตุ: ${reason[0].name})`;
+        } else {
+          leaveReason.value = "";
+        }
+        reasonStatus.value = reason.length > 0 ? true : false;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        loaderPage(false);
+      });
+  }
+};
+
+const checkProfileData = async () => {
+  if (profileId.value !== "") {
+    loaderPage(true);
+    await http
+      .get(config.API.profileCheckId(profileId.value))
+      .then((res) => {
+        let data = res.data.result;
+        if (data == false) router.push("/registry");
+      })
+      .catch((e) => {
+        router.push("/registry");
+      })
+      .finally(() => {
+        loaderPage(false);
+      });
+  }
+};
+
+const fetchAvatarHistory = async () => {
+  if (profileId.value !== "") {
+    loaderPage(true);
+    await http
+      .get(config.API.profileAvatarHistoryId(profileId.value))
+      .then((res) => {
+        let data = res.data.result;
+        images.value = [];
+        data.map((e: any) => {
+          images.value.push({
+            id: e.id,
+            avatar: e.avatar,
+            avatarId: e.avatarId,
+            createdDate: new Date(e.createdDate),
+            isActive: e.isActive,
+          });
+        });
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        loaderPage(false);
+      });
+  }
+};
+
+const uploadImage = async (e: any) => {
+  if (profileId.value !== "") {
+    let input = e.target.files;
+    if (input.length > 0) {
+      const formData = new FormData();
+      formData.append("FileData", input[0]);
+      loaderPage(true);
+      await http
+        .post(config.API.profileAvatarId(profileId.value), formData)
+        .then((res) => {})
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(async () => {
+          await fetchData();
+          dialogImage.value = false;
+        });
+      return;
+    }
+  }
+};
+
+const fetchDataDelete = async (id: string) => {
+  loaderPage(true);
+  await http
+    .delete(config.API.profileAvatarHistoryId(id))
+    .then((res) => {
+      success($q, "ลบรูปภาพสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+      await clickImage();
+      //   dialogImage.value = false;
+    });
+};
+
+const deletePhoto = async (id: string) => {
+  dialogMessage(
+    $q,
+    "ลบข้อมูล",
+    "ต้องการทำการลบข้อมูลนี้ใช่หรือไม่",
+    "delete",
+    undefined,
+    "red",
+    () => fetchDataDelete(id),
+    undefined,
+    false
+  );
+};
+
+const selectAvatarHistory = async () => {
+  if (activeImage.value == null) {
+    dialogMessage(
+      $q,
+      "ไม่สามารถเปลี่ยนรูปได้",
+      "กรุณาเลือกรูปที่ต้องการเปลี่ยน",
+      "warning",
+      undefined,
+      "orange",
+      undefined,
+      undefined,
+      true
+    );
+    return;
+  }
+  if (profileId.value !== "") {
+    loaderPage(true);
+    await http
+      .put(config.API.profileAvatarId(profileId.value), {
+        avatar: activeImage.value.avatarId,
+      })
+      .then((res) => {
+        dialogImage.value = false;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await fetchData();
+      });
+  }
+};
+
+const imageActive = (n: any) => {
+  activeImage.value = n;
+};
+
+const imageClass = (n: any) => {
+  const val = n == activeImage.value;
+  return {
+    "rounded-borders bg-grey-2 image-size-default": val,
+    "rounded-borders bg-grey-2 image-size-full": !val,
+  };
+};
+
+const getClass = (n: any) => {
+  const val = n == activeImage.value;
+  return {
+    "rounded-borders border-green shadow-1": val,
+    "rounded-borders shadow-1": !val,
+  };
+};
+
+const addNewImage = async () => {
+  inputImage.value.click();
+  await imageActive(null);
+};
+
+const clickImage = async () => {
+  await fetchAvatarHistory();
+  dialogImage.value = true;
+};
+
+const closeImage = () => {
+  dialogImage.value = false;
+};
+
+const closeLeave = () => {
+  dialogLeave.value = false;
+};
+
+const closeKp7 = () => {
+  dialog.value = false;
+};
+
+const closeKp7Short = () => {
+  dialogShort.value = false;
+};
+
+const downloadKP7 = () => {};
+
+const downloadKP7Short = () => {};
+
+const clickKp7 = async () => {
+  if (profileId.value !== "") {
+    window.open(config.API.profileReportId(profileId.value));
+  }
+  //   loaderPage(true);
+  //   await http
+  //     .get(config.API.profileReportId(profileId.value))
+  //     .then((res) => {
+  //       if (res.data) {
+  //         pdfSrc.value = "data:application/pdf;base64," + res.data;
+  //         pdfCurrentPage.value = 1;
+  //         pdfTotalPage.value = 7;
+  //         dialog.value = true;
+  //       }
+  //     })
+  //     .catch((e) => {messageError($q, e);})
+  //     .finally(() => {
+  //       loaderPage(false);
+  //     });
+};
+
+const downloadFilePDF = async (res: string, fileName: string) => {
+  const link = document.createElement("a");
+  //   link.href = window.URL.createObjectURL(new Blob([res]));
+  link.href = window.URL.createObjectURL(
+    new Blob([res], {
+      type: "application/vnd.ms-excel",
+    })
+  );
+  link.setAttribute("download", fileName);
+  document.body.appendChild(link);
+  link.click();
+};
+
+const clickKp7Short = async () => {
+  if (profileId.value !== "") {
+    window.open(config.API.profileKp7ShortId(profileId.value));
+  }
+  //   loaderPage(true);
+  //   await http
+  //     .get(config.API.profileKp7ShortId(profileId.value))
+  //     .then((res) => {
+  //       if (res.data) {
+  //         pdfSrcShort.value = "g==";
+  //         pdfCurrentPageShort.value = 1;
+  //         pdfTotalPageShort.value = 7;
+  //         dialogShort.value = true;
+  //       }
+  //     })
+  //     .catch((e) => {messageError($q, e);})
+  //     .finally(() => {
+  //       loaderPage(false);
+  //     });
+};
+
+const clickRetire = async () => {
+  if (reasonStatus.value == true) {
+    dialogMessage(
+      $q,
+      "โปรดยืนยัน",
+      "ต้องการย้ายข้อมูลจากพ้นราชการไปถือครองใช่หรือไม่",
+      "info",
+      undefined,
+      "primary",
+      Retire,
+      undefined,
+      false
+    );
+  } else {
+    leaveDate.value = new Date();
+    leaveDetail.value = "";
+    leaveNumberOrder.value = "";
+    leaveDateOrder.value = new Date();
+    reason.value = "";
+    dialogLeave.value = true;
+  }
+};
+
+const Retire = async () => {
+  if (profileId.value !== "") {
+    if (reasonStatus.value == true) {
+      loaderPage(true);
+      await http
+        .put(config.API.profileReactive(profileId.value))
+        .then((res) => {
+          if (res.data) {
+            dialogLeave.value = false;
+          }
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          router.push("/registry");
+        });
+    } else {
+      loaderPage(true);
+      await http
+        .put(config.API.profileDeactive(profileId.value), {
+          leaveDate: dateToISO(leaveDate.value),
+          leaveDetail: leaveDetail.value,
+          leaveNumberOrder: leaveNumberOrder.value,
+          leaveDateOrder: dateToISO(leaveDateOrder.value),
+          reason: reason.value,
+        })
+        .then((res) => {
+          if (res.data) {
+            dialogLeave.value = false;
+          }
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          router.push("/registry");
+        });
+    }
+  }
+};
+</script>
+<style>
+.image-size-default {
+  height: 150px;
+  max-width: 15vw;
+}
+
+.image-size-full {
+  height: 160px;
+  max-width: 15vw;
+}
+
+.border-green {
+  border: 5px solid #52c688;
+}
+
+.area-div {
+  background-color: transparent;
+}
+
+.text-header {
+  font-size: 1.2em;
+}
+
+.containerimage {
+  position: relative;
+}
+
+.containerimage:hover .overlay {
+  opacity: 1;
+}
+
+.overlay {
+  background-color: #e4f2ffd2 !important;
+  opacity: 0;
+  padding: 2px !important;
+}
+
+.information:target {
+  padding-top: 84px;
+}
+
+.border-custom {
+  border: 0.5px solid #c3c3c3;
+}
+
+.bg-active-image {
+  background-color: #52c688;
+}
+
+.text-name {
+  font-size: 1.5em;
+  overflow: hidden;
+}
+
+.text-sub {
+  font-size: 1.5em;
+  overflow: hidden;
+  color: var(--q-primary);
+}
+</style>
diff --git a/src/modules/08_registryEmployee/views/Main.vue b/src/modules/08_registryEmployee/views/Main.vue
index 0ac9ee52d..fd930f818 100644
--- a/src/modules/08_registryEmployee/views/Main.vue
+++ b/src/modules/08_registryEmployee/views/Main.vue
@@ -166,10 +166,10 @@
 </template>
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
-import router from "@/router";
 import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import type { QInput, QForm } from "quasar";
+import { useRouter } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
@@ -188,6 +188,7 @@ const $q = useQuasar();
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
 const { dialogMessage, messageError, showLoader, hideLoader } = mixin;
 
+const router = useRouter();
 const myForm = ref<QForm>();
 const filterRef = ref<QInput>();
 const filter = ref<string>("");
@@ -489,6 +490,10 @@ onMounted(async () => {
   await nodeTree();
 });
 
+const next = (id: string) => {
+  router.push(`/registryEmployee/${id}`);
+};
+
 const paginationLabel = (start: number, end: number, total: number) => {
   //   if (props.paging == true)
   //     return " " + start + " ใน " + end + " จากจำนวน " + total + " รายการ";
@@ -529,7 +534,10 @@ const clickClose = async () => {
 };
 
 const clickAdd = () => {
-  router.push({ name: "" });
+  //   modal.value = true;
+
+  router.push(`/registryEmployee/add`);
+  //   router.push(`/placement/detail`);
 };
 
 const clickDelete = (id: string) => {
diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue
index f3794c327..270be3495 100644
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@@ -68,7 +68,7 @@ const options = ref<optionType[]>([
  * ให้แสดง แทปด้านขวา เมื่อเข้าหน้า รายละเอียดทะเบียนประวัติ
  */
 const tabScroll = () => {
-  return route.name == "registryDetail";
+  return route.name == "registryDetail" || route.name == "registryEmployeeAdd";
 };
 
 /**
@@ -96,8 +96,11 @@ const toggleBtnLeft = () => {
  */
 const onScroll = (scroll: ScrollType) => {
   const { position } = scroll;
-  updateScroll(position);
-  updateScrollPlacement(position);
+  if (route.name == "PlacementPersonalDetail") {
+    updateScrollPlacement(position);
+  } else {
+    updateScroll(position);
+  }
 };
 
 /**
@@ -154,7 +157,10 @@ const updateScroll = (position: number) => {
  * ให้แสดง แทปด้านขวา เมื่อเข้าหน้า รายละเอียดทะเบียนประวัติ และ rightActive เท่ากับ true
  */
 const activeBtn = () => {
-  return route.name == "registryDetail" && rightActive.value;
+  return (
+    (route.name == "registryDetail" || route.name == "registryEmployeeAdd") &&
+    rightActive.value
+  );
 };
 
 /**
@@ -218,6 +224,9 @@ const myEventHandler = (e: any, setSCroll: boolean) => {
  */
 const activeMenu = (path: string) => {
   if (path == "dashboard" && route.fullPath == "/") return true;
+
+  if (path == "registry" && route.fullPath.includes("registryEmployee"))
+    return false;
   const bool = route.fullPath.includes(path);
   return bool;
 };
@@ -780,9 +789,9 @@ if (keycloak.tokenParsed != null) {
               <!-- เมนูปกติ -->
               <q-item
                 class="text-weight-medium menu"
+                :active="activeMenu(menuItem.path)"
                 active-class="text-primary active-item text-weight-bold menuActive"
                 :to="{ name: `${menuItem.path}` }"
-                :active="activeMenu(menuItem.path)"
                 clickable
                 v-ripple
                 dense
@@ -898,7 +907,8 @@ if (keycloak.tokenParsed != null) {
 </template>
 
 <style>
-.menuSub .q-item__section--avatar, .menu .q-item__section--avatar{
+.menuSub .q-item__section--avatar,
+.menu .q-item__section--avatar {
   min-width: 0px;
 }
 .menu {
@@ -927,11 +937,11 @@ if (keycloak.tokenParsed != null) {
 /* .menuSubAct {
   background: #1e2529d9;
 } */
-.expan2 .menuSubHover{
+.expan2 .menuSubHover {
   padding-left: 30%;
   border-radius: 20px;
 }
-.menuSubHover{
+.menuSubHover {
   padding-left: 25%;
   border-radius: 20px;
 }
@@ -1005,7 +1015,7 @@ if (keycloak.tokenParsed != null) {
   background-color: #a8bbbf;
 }
 
-.q-card__actions .q-btn--rectangle{
+.q-card__actions .q-btn--rectangle {
   padding: 0 14px !important;
 }
 </style>