diff --git a/src/api/05_placement/api.probation.ts b/src/api/05_placement/api.probation.ts
index 351a6685a..b774f3e36 100644
--- a/src/api/05_placement/api.probation.ts
+++ b/src/api/05_placement/api.probation.ts
@@ -1,6 +1,8 @@
 import env from "../index";
 const dataOptions = `${env.API_PROBATION_URI}/data-options`;
 const personal = `${env.API_PROBATION_URI}/personal`;
+const calculate = `${env.API_PROBATION_URI}/calculate`;
+const finish = `${env.API_PROBATION_URI}/assign`;
 
 export default {
   competencyOptions: () => `${dataOptions}/competency`,
@@ -8,7 +10,11 @@ export default {
   knowledgeOptions: () => `${dataOptions}/knowledge`,
   skillOptions: () => `${dataOptions}/skill`,
   lawOptions: () => `${dataOptions}/law`,
-
+  personalList: () => `${personal}/list`,
+  personal: (personalId:string) => `${personal}?personal_id=${personalId}`,
+  newAssign: (personalId:string) => `${dataOptions}/new-assign?personal_id=${personalId}`,
+  calculateDate: () => `${calculate}/assign-finish`,
+  saveFinish: (personalId:string) => `${finish}/probation-assign?personal_id=${personalId}`,
   personalAdd: () => `${personal}/add`,
   // clearPosition: (personalId:string) => `${placement}/position/clear/${personalId}`
 };
diff --git a/src/modules/05_placement/components/probation/FormAssign.vue b/src/modules/05_placement/components/probation/FormAssign.vue
index e719eea9b..bc24c0b4c 100644
--- a/src/modules/05_placement/components/probation/FormAssign.vue
+++ b/src/modules/05_placement/components/probation/FormAssign.vue
@@ -67,6 +67,7 @@
                     dense
                     borderless
                     option-label="label"
+                    option-value="value"
                     :outlined="routeName === 'probationWorkAdd'"
                     v-model="monthSelect"
                     :label="`ระยะเวลากี่เดือน`"
@@ -154,6 +155,7 @@
               <div class="col-12 row q-col-gutter-md">
                 <q-select
                   :rules="[(val) => !!val || 'กรุณาเลือกผู้ดูเเล']"
+                  option-value="personal_id"
                   :options="OPcaretaker"
                   class="col-xs-12 col-sm-6"
                   :readonly="routeName != 'probationWorkAdd'"
@@ -163,10 +165,13 @@
                   :outlined="routeName == 'probationWorkAdd'"
                   v-model="caretaker1"
                   :label="`ผู้ดูแลคนที่ 1`"
+                  option-label="name"
                 />
                 <q-select
                   :rules="[(val) => !!val || 'กรุณาเลือกผู้ดูเเล']"
                   :options="OPcaretaker"
+                  option-value="personal_id"
+                  option-label="name"
                   hide-bottom-space
                   class="col-xs-12 col-sm-6"
                   :readonly="routeName != 'probationWorkAdd'"
@@ -552,10 +557,18 @@
                           :outlined="routeName == 'probationWorkAdd'"
                           v-model="skill"
                           label="ด้านที่ 1"
-                        />
+                        >
+                          <template v-slot:selected-item="scope">
+                            <div class="ellipsis-2-lines">
+                              {{ scope.opt.title }} -
+                              {{ scope.opt.level_description }}
+                            </div>
+                          </template></q-select
+                        >
                       </div>
                       <div class="col-xs-12 col-sm-6">
                         <q-select
+                          ellipsis-2-lines
                           :option-label="
                             (item) =>
                               `${item.title} - ${item.level_description}`
@@ -573,7 +586,14 @@
                           :outlined="routeName == 'probationWorkAdd'"
                           v-model="skill2"
                           label="ด้านที่ 2"
-                        />
+                        >
+                          <template v-slot:selected-item="scope">
+                            <div class="ellipsis-2-lines">
+                              {{ scope.opt.title }} -
+                              {{ scope.opt.level_description }}
+                            </div>
+                          </template></q-select
+                        >
                       </div>
                       <div class="col-xs-12 col-sm-6">
                         <q-select
@@ -594,7 +614,14 @@
                           :outlined="routeName == 'probationWorkAdd'"
                           v-model="skill3"
                           label="ด้านที่ 3"
-                        />
+                        >
+                          <template v-slot:selected-item="scope">
+                            <div class="ellipsis-2-lines">
+                              {{ scope.opt.title }} -
+                              {{ scope.opt.level_description }}
+                            </div>
+                          </template></q-select
+                        >
                       </div>
                       <div class="col-xs-12 col-sm-6">
                         <q-select
@@ -615,7 +642,14 @@
                           :outlined="routeName == 'probationWorkAdd'"
                           v-model="skill4"
                           label="ด้านที่ 4"
-                        />
+                        >
+                          <template v-slot:selected-item="scope">
+                            <div class="ellipsis-2-lines">
+                              {{ scope.opt.title }} -
+                              {{ scope.opt.level_description }}
+                            </div>
+                          </template></q-select
+                        >
                       </div>
                     </div>
                   </div>
@@ -641,7 +675,9 @@
                           option-value="id"
                           hide-bottom-space
                           :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
-                          :options="filterMain(OPmain,[main2,main3,main4,main5])"
+                          :options="
+                            filterMain(OPmain, [main2, main3, main4, main5])
+                          "
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
@@ -649,7 +685,14 @@
                           :outlined="routeName == 'probationWorkAdd'"
                           v-model="main"
                           label="ตัวที่ 1"
-                        />
+                        >
+                          <template v-slot:selected-item="scope">
+                            <div class="ellipsis-2-lines">
+                              {{ scope.opt.title }} -
+                              {{ scope.opt.description }}
+                            </div>
+                          </template></q-select
+                        >
                       </div>
                       <div class="col-xs-12 col-sm-6">
                         <q-select
@@ -659,7 +702,9 @@
                           option-value="id"
                           hide-bottom-space
                           :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
-                          :options="filterMain(OPmain,[main,main3,main4,main5])"
+                          :options="
+                            filterMain(OPmain, [main, main3, main4, main5])
+                          "
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
@@ -667,7 +712,14 @@
                           :outlined="routeName == 'probationWorkAdd'"
                           v-model="main2"
                           label="ตัวที่ 2"
-                        />
+                        >
+                          <template v-slot:selected-item="scope">
+                            <div class="ellipsis-2-lines">
+                              {{ scope.opt.title }} -
+                              {{ scope.opt.description }}
+                            </div>
+                          </template></q-select
+                        >
                       </div>
                       <div class="col-xs-12 col-sm-6">
                         <q-select
@@ -677,7 +729,9 @@
                           option-value="id"
                           hide-bottom-space
                           :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
-                          :options="filterMain(OPmain,[main,main2,main4,main5])"
+                          :options="
+                            filterMain(OPmain, [main, main2, main4, main5])
+                          "
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
@@ -685,7 +739,14 @@
                           :outlined="routeName == 'probationWorkAdd'"
                           v-model="main3"
                           label="ตัวที่ 3"
-                        />
+                        >
+                          <template v-slot:selected-item="scope">
+                            <div class="ellipsis-2-lines">
+                              {{ scope.opt.title }} -
+                              {{ scope.opt.description }}
+                            </div>
+                          </template></q-select
+                        >
                       </div>
                       <div class="col-xs-12 col-sm-6">
                         <q-select
@@ -695,7 +756,9 @@
                           option-value="id"
                           hide-bottom-space
                           :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
-                          :options="filterMain(OPmain,[main,main2,main3,main5])"
+                          :options="
+                            filterMain(OPmain, [main, main2, main3, main5])
+                          "
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
@@ -703,14 +766,23 @@
                           :outlined="routeName == 'probationWorkAdd'"
                           v-model="main4"
                           label="ตัวที่ 4"
-                        />
+                        >
+                          <template v-slot:selected-item="scope">
+                            <div class="ellipsis-2-lines">
+                              {{ scope.opt.title }} -
+                              {{ scope.opt.description }}
+                            </div>
+                          </template></q-select
+                        >
                       </div>
 
                       <div class="col-xs-12 col-sm-6">
                         <q-select
                           hide-bottom-space
                           :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
-                          :options="filterMain(OPmain,[main,main2,main3,main4])"
+                          :options="
+                            filterMain(OPmain, [main, main2, main3, main4])
+                          "
                           :option-label="
                             (item) => `${item.title} - ${item.description}`
                           "
@@ -722,7 +794,14 @@
                           :outlined="routeName == 'probationWorkAdd'"
                           v-model="main5"
                           label="ตัวที่ 5"
-                        />
+                        >
+                          <template v-slot:selected-item="scope">
+                            <div class="ellipsis-2-lines">
+                              {{ scope.opt.title }} -
+                              {{ scope.opt.description }}
+                            </div>
+                          </template></q-select
+                        >
                       </div>
                     </div>
                   </div>
@@ -731,7 +810,6 @@
                     <div class="col-12 row q-col-gutter-sm">
                       <div class="col-xs-12 col-sm-6">
                         <q-select
-
                           :option-label="
                             (item) => `${item.title} - ${item.description}`
                           "
@@ -740,7 +818,7 @@
                           :rules="[
                             (val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน',
                           ]"
-                          :options="filterData(OPgroup,[group2,group3])"
+                          :options="filterData(OPgroup, [group2, group3])"
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
@@ -748,7 +826,14 @@
                           :outlined="routeName == 'probationWorkAdd'"
                           v-model="group"
                           label="ตัวที่ 1"
-                        />
+                        >
+                          <template v-slot:selected-item="scope">
+                            <div class="ellipsis-2-lines">
+                              {{ scope.opt.title }} -
+                              {{ scope.opt.description }}
+                            </div>
+                          </template></q-select
+                        >
                       </div>
                       <div class="col-xs-12 col-sm-6">
                         <q-select
@@ -760,7 +845,7 @@
                           :rules="[
                             (val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน',
                           ]"
-                          :options="filterData(OPgroup,[group,group3])"
+                          :options="filterData(OPgroup, [group, group3])"
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
@@ -768,7 +853,14 @@
                           :outlined="routeName == 'probationWorkAdd'"
                           v-model="group2"
                           label="ตัวที่ 2"
-                        />
+                        >
+                          <template v-slot:selected-item="scope">
+                            <div class="ellipsis-2-lines">
+                              {{ scope.opt.title }} -
+                              {{ scope.opt.description }}
+                            </div>
+                          </template></q-select
+                        >
                       </div>
                       <div class="col-xs-12 col-sm-6">
                         <q-select
@@ -780,7 +872,7 @@
                           :rules="[
                             (val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน',
                           ]"
-                          :options="filterData(OPgroup,[group,group2])"
+                          :options="filterData(OPgroup, [group, group2])"
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
@@ -788,7 +880,14 @@
                           :outlined="routeName == 'probationWorkAdd'"
                           v-model="group3"
                           label="ตัวที่ 3"
-                        />
+                        >
+                          <template v-slot:selected-item="scope">
+                            <div class="ellipsis-2-lines">
+                              {{ scope.opt.title }} -
+                              {{ scope.opt.description }}
+                            </div>
+                          </template></q-select
+                        >
                       </div>
                     </div>
                   </div>
@@ -1179,6 +1278,8 @@
               <div class="col-12 row q-col-gutter-md">
                 <q-select
                   :options="OPcaretaker"
+                  option-value="personal_id"
+                  option-label="name"
                   class="col-xs-12 col-sm-8"
                   :readonly="routeName != 'probationWorkAdd'"
                   dense
@@ -1229,6 +1330,8 @@
                 </div>
                 <q-select
                   :options="OPcaretaker"
+                  option-value="personal_id"
+                  option-label="name"
                   class="col-xs-12 col-sm-8"
                   :readonly="routeName != 'probationWorkAdd'"
                   dense
@@ -1287,7 +1390,9 @@
               </div>
               <div class="col-12 row q-col-gutter-md">
                 <q-select
-                  :options="OPcaretaker"
+                  :options="OPcommander"
+                  option-value="personal_id"
+                  option-label="name"
                   class="col-xs-12 col-sm-8"
                   :readonly="routeName != 'probationWorkAdd'"
                   dense
@@ -1345,14 +1450,19 @@
           v-show="routeName == 'probationWorkAdd'"
           class="flex justify-end q-pa-sm q-gutter-sm"
         >
-          <q-btn unelevated label="บันทึก" color="public" @click="saveData()" />
+          <q-btn
+            unelevated
+            label="บันทึก"
+            color="public"
+            @click="saveData(personalId)"
+          />
         </div>
       </q-card>
     </div>
   </q-form>
 </template>
 <script setup lang="ts">
-import { useRouter } from "vue-router";
+import { useRouter, useRoute } from "vue-router";
 import { ref, computed, watch, onMounted } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
@@ -1370,13 +1480,26 @@ const val1 = ref([
 
 const router = useRouter();
 const mixin = useCounterMixin();
-const { date2Thai, notifyError } = mixin;
+const {
+  date2Thai,
+  notifyError,
+  dateToISO,
+  success,
+  messageError,
+  showLoader,
+  hideLoader,
+} = mixin;
 const filterData = (options: any[], excludedGroups: any[]) => {
-  return options.filter((item) => !excludedGroups.some((group) => group && group.id === item.id));
+  return options.filter(
+    (item) => !excludedGroups.some((group) => group && group.id === item.id)
+  );
 };
 const filterMain = (options: any[], excludedGroups: any[]) => {
-  return options.filter((item) => !excludedGroups.some((group) => group && group.id === item.id));
+  return options.filter(
+    (item) => !excludedGroups.some((group) => group && group.id === item.id)
+  );
 };
+const route = useRoute();
 const checkValidate = ref<boolean>(false);
 const myForm = ref<any>(null);
 const fullnameFoot = ref<string>("");
@@ -1384,12 +1507,12 @@ const positionFoot = ref<string>("");
 const caretakerFoot = ref<string>("");
 const caretakerFoot2 = ref<string>("");
 const id = ref<number>();
-const personal_id = ref<string>();
+const personalId = route.params.personalId as string;
 const fullname = ref<string>();
 const knowledge_skill_map_no = ref<string[]>([]);
 const round_no = ref<number>();
-const date_start = ref<Date | null>(null);
-const date_finish = ref<Date | null>(null);
+const date_start = ref<Date>();
+const date_finish = ref<Date>();
 const behavior_desc = ref<string>();
 const other_desc = ref<object>({});
 const other4_desc = ref<string>();
@@ -1408,7 +1531,6 @@ const main3 = ref<any>();
 const main4 = ref<any>();
 const main5 = ref<any>();
 
-
 const Other = ref<string>("");
 const commander = ref<string>("");
 
@@ -1447,19 +1569,36 @@ const routeName = router.currentRoute.value.name;
 const name = ref<string>("");
 const position = ref<string>("");
 
-const monthSelect = ref<number>();
+const monthSelect = ref<number | string>();
 
 const caretaker1 = ref<string>("");
 const caretaker2 = ref<string>("");
-const OPcaretaker = [
-  "นางสาวรัชภรณ์ ภักดี",
-  "นางสาวทวิดา กมลเวชชี",
-  "test1",
-  "test2",
-  "test3",
-  "test4",
-];
-const monthOp = [{ value: "6", label: "6 เดือน" }];
+const OPcaretaker = ref<
+  {
+    personal_id: string;
+    name: string;
+    PositionId: string;
+    PositionLevelId: string;
+    PositionLineId: string;
+    OrganizationOrganization: string;
+  }[]
+>([]);
+
+const OPcommander = ref<
+  {
+    personal_id: string;
+    name: string;
+    PositionId: string;
+    PositionLevelId: string;
+    PositionLineId: string;
+    OrganizationOrganization: string;
+  }[]
+>([]);
+interface MonthOption {
+  value: number;
+  label: string;
+}
+const monthOp: MonthOption[] = [];
 //-----------------(3.1)-----------//
 const activityCount = ref<number>(2);
 const activityDataArray = ref<any[]>([]);
@@ -1486,10 +1625,10 @@ const resetActivity = () => {
 //-----------------(3.2)-----------//
 
 const knowledgeCount = ref<number>(3);
-const knowledge = ref<any[]>(Array.from({ length: knowledgeCount.value }, () => null));
+const knowledge = ref<any[]>([]);
 const OPknowledge = ref<
   Array<{
-    knowledge_id: number;
+    id: number;
     title: number;
     options: Array<Option>;
   }>
@@ -1543,7 +1682,21 @@ interface CheckboxItem {
 }
 
 const checkRule = ref<CheckboxItem[]>([]);
-  const getcompetency = async () => {
+const getAssignNew = async (id: string) => {
+  await http.get(config.API.newAssign(id)).then((res: any) => {
+    const data = res.data.data;
+    const monthOption = {
+      value: data.assign_month,
+      label: `${data.assign_month} เดือน`,
+    };
+    console.log("Assign-New", data);
+    monthOp.push(monthOption);
+    monthSelect.value = `${data.assign_month} เดือน`;
+    OPcaretaker.value = data.mentors;
+    OPcommander.value = [data.commander];
+  });
+};
+const getcompetency = async () => {
   await http.get(config.API.competencyOptions()).then((res: any) => {
     const data = res.data.data;
     OPmain.value = data;
@@ -1587,7 +1740,24 @@ const getLaw = async () => {
   });
 };
 
-const putData = () => {
+const postDateTime = async () => {
+  await http
+    .post(config.API.calculateDate(), {
+      month: monthSelect.value !== null ? parseInt(monthSelect.value) : null,
+      start_date: dateToISO(date_start.value as Date),
+    })
+    .then(async (res) => {
+      const result = res.data;
+      date_finish.value = result.finish_date;
+    })
+    .catch((e) => {})
+    .finally(async () => {
+      hideLoader();
+    });
+};
+
+const putData = (id: string) => {
+  const GUID = id;
   const assign_job = activityArray.value.map((item, index) => {
     const activityDesc = activity_desc.value[index]?.trim();
     const goalDesc = goal_desc.value[index]?.trim();
@@ -1599,7 +1769,7 @@ const putData = () => {
         goal_desc: goalDesc,
       };
     } else {
-      return null; 
+      return null;
     }
   });
   const know_ledge = knowledge.value.map((item) => ({
@@ -1607,7 +1777,6 @@ const putData = () => {
     level: item ? item.level : null,
   }));
 
-
   const Productivity_assign = ProductivityArray.value.map((item, index) => {
     const outputDesc = output_desc.value[index]?.trim();
     const indicatorDesc = indicator_desc.value[index]?.trim();
@@ -1615,88 +1784,94 @@ const putData = () => {
     if (outputDesc !== "" && indicatorDesc !== "") {
       return {
         id: index + 1,
-        activity_desc: outputDesc,
-        goal_desc: indicatorDesc,
+        output_desc: outputDesc,
+        indicator_desc: indicatorDesc,
       };
     } else {
-      return null; 
+      return null;
     }
   });
-  const groupData = group.value
-    ? { id: group.value.id, level: group.value.level }
-    : null;
-  const group2Data = group2.value
-    ? { id: group2.value.id, level: group2.value.level }
-    : null;
-  const group3Data = group3.value
-    ? { id: group3.value.id, level: group3.value.level }
-    : null;
 
-  const skillData = skill.value
-    ? { id: skill.value.id, level: skill.value.level }
-    : null;
-  const skill2Data = skill2.value
-    ? { id: skill2.value.id, level: skill2.value.level }
-    : null;
-  const skill3Data = skill3.value
-    ? { id: skill3.value.id, level: skill3.value.level }
-    : null;
-  const skill4Data = skill4.value
-    ? { id: skill4.value.id, level: skill4.value.level }
-    : null;
+  const allGroup = [];
+  if (group.value)
+    allGroup.push({ id: group.value.id, level: group.value.level });
+  if (group2.value)
+    allGroup.push({ id: group2.value.id, level: group2.value.level });
+  if (group3.value)
+    allGroup.push({ id: group3.value.id, level: group3.value.level });
 
-  const mainData = main.value
-    ? { id: main.value.id, level: main.value.level }
-    : null;
-  const main2Data = main2.value
-    ? { id: main2.value.id, level: main2.value.level }
-    : null;
-  const main3Data = main3.value
-    ? { id: main3.value.id, level: main3.value.level }
-    : null;
-  const main4Data = main4.value
-    ? { id: main4.value.id, level: main4.value.level }
-    : null;
-  const main5Data = main5.value
-    ? { id: main5.value.id, level: main5.value.level }
-    : null;
+  const allSkills = [];
+  if (skill.value)
+    allSkills.push({ id: skill.value.id, level: skill.value.level });
+  if (skill2.value)
+    allSkills.push({ id: skill2.value.id, level: skill2.value.level });
+  if (skill3.value)
+    allSkills.push({ id: skill3.value.id, level: skill3.value.level });
+  if (skill4.value)
+    allSkills.push({ id: skill4.value.id, level: skill4.value.level });
+
+  const allCompetency = [];
+  if (main.value)
+    allCompetency.push({ id: skill.value.id, level: main.value.level });
+  if (main2.value)
+    allCompetency.push({ id: main2.value.id, level: main2.value.level });
+  if (main3.value)
+    allCompetency.push({ id: main3.value.id, level: main3.value.level });
+  if (main4.value)
+    allCompetency.push({ id: main4.value.id, level: main4.value.level });
+  if (main5.value)
+    allCompetency.push({ id: main5.value.id, level: main5.value.level });
+
+  const assign_director = [
+    {
+      personal_id: caretakerFoot.value.personal_id,
+      role: "mentor",
+      dated: date2.value instanceof Date ? dateToISO(date2.value) : null,
+    },
+    {
+      personal_id: caretakerFoot2.value.personal_id,
+      role: "mentor",
+      dated: date3.value instanceof Date ? dateToISO(date3.value) : null,
+    },
+    {
+      personal_id: commander.value.personal_id,
+      role: "commander",
+      dated: date4.value instanceof Date ? dateToISO(date4.value) : null,
+    },
+  ];
 
   const data = {
+    personalId: GUID,
     fullname: fullname.value,
     position: position.value,
-    monthSelect: monthSelect.value !== undefined ? parseInt((monthSelect.value as any).value) : null,
-    date_start: date_start.value,
+    monthSelect:monthSelect.value !== null ? parseInt(monthSelect.value) : null,
+    date_start:
+      date_start.value instanceof Date
+        ? dateToISO(date_start.value)
+        : new Date(),
     date_finish: date_finish.value,
-    caretaker_1: caretaker1.value,
-    caretaker_2: caretaker2.value,
-    knowledge: know_ledge,
-    assign_job: assign_job.filter((item) => item !== null),
-    otherlaw: OtherLaw.value,
-    skill: skillData,
-    skill_2: skill2Data,
-    skill_3: skill3Data,
-    skill_4: skill4Data,
-    main: mainData,
-    main_2: main2Data,
-    main_3: main3Data,
-    main_4: main4Data,
-    main_5: main5Data,
-    group: groupData,
-    group_2: group2Data,
-    group_3: group3Data,
-    other: Other.value,
-    other_5: Other5.value,
-    productivity_assign: Productivity_assign.filter((item) => item !== null),
-    commander: commander.value,
-    date_1: date1.value,
-    date_2: date2.value,
-    date_3: date3.value,
-    date_4: date4.value,
+    // caretaker_1: caretaker1.value,
+    // caretaker_2: caretaker2.value,
+    assign_knowledges: know_ledge,
+    assign_jobs: assign_job.filter((item) => item !== null),
+    other_desc: OtherLaw.value,
+    assign_skill: allSkills,
+    assign_competency: allCompetency,
+    assign_competency_group: allGroup,
+    other4_desc: Other.value,
+    other5_no1_desc: Other5.value,
+    assign_outputs: Productivity_assign.filter((item) => item !== null),
+    // commander: commander.value,
+    assign_director: assign_director,
+    experimenter_dated: date1.value instanceof Date ? dateToISO(date1.value) : new Date(),
+    // date_2: date2.value instanceof Date ? dateToISO(date2.value) : new Date(),
+    // date_3: date3.value instanceof Date ? dateToISO(date3.value) : new Date(),
+    // date_4: date4.value instanceof Date ? dateToISO(date4.value) : new Date(),
     fullname_foot: fullnameFoot.value,
     position_foot: positionFoot.value,
-    caretaker_foot: caretakerFoot.value,
-    caretaker_foot2: caretakerFoot2.value,
-    checkarray: checkRule.value
+    // caretaker_foot: caretakerFoot.value,
+    // caretaker_foot2: caretakerFoot2.value,
+    assign_law: checkRule.value
       .filter((item) => item.checked === 1)
       .map((item) => ({
         id: item.id,
@@ -1706,16 +1881,8 @@ const putData = () => {
   console.log("test", data);
 };
 
-const saveData = async () => {
-  // myForm.value.resetValidation();
-  // nameRef.value.validate();
-  // positionRef.value.validate();
-  // monthRef.value.validate();
-  // startDateRef.value.validate();
-  // caregiverRef1.value.validate();
-  // caregiverRef2.value.validate();
-  // workInfopRef.value.validate();
-  myForm.value.validate().then(async (result: boolean) => {
+const saveData = (id: string) => {
+  myForm.value.validate().then((result: boolean) => {
     if (result) {
       $q.dialog({
         title: "บันทึกข้อมูล",
@@ -1726,20 +1893,24 @@ const saveData = async () => {
         },
       })
         .onOk(async () => {
-          // putData();
+          const data = putData(id);
+          await http
+            .post(config.API.saveFinish(id), data)
+            .then(async (res) => {})
+            .catch((e) => {})
+            .finally(async () => {
+              hideLoader();
+            });
         })
         .onCancel(() => {})
         .onDismiss(() => {});
     } else {
-      // ลอง
-      putData();
       notifyError($q, "กรุณากรอกข้อมูลให้ครบ");
     }
   });
 };
 const OtherLaw = ref<string>("");
 
-
 const skill = ref<any>();
 const skill2 = ref<any>();
 const skill3 = ref<any>();
@@ -1783,6 +1954,20 @@ onMounted(async () => {
   await getCompetencyGroup();
   await getSkill();
   await getKnowledge();
+  await getAssignNew(personalId);
+});
+watch(
+  () => [monthSelect.value, date_start.value],
+  () => {
+    if (monthSelect.value !== undefined && date_start.value !== undefined) {
+      postDateTime();
+    }
+  }
+);
+watch(knowledge.value, () => {
+  knowledge.value.forEach((item) => {
+    OPknowledge.value = OPknowledge.value.filter((e) => e.id != item.id);
+  });
 });
 </script>
 <style lang="scss" scoped>
@@ -1813,4 +1998,12 @@ onMounted(async () => {
   align-items: center;
   justify-content: center;
 }
+.q-item span {
+  white-space: normal;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 </style>
diff --git a/src/modules/05_placement/components/probation/MainProbation.vue b/src/modules/05_placement/components/probation/MainProbation.vue
index 8467377f8..18e4fa248 100644
--- a/src/modules/05_placement/components/probation/MainProbation.vue
+++ b/src/modules/05_placement/components/probation/MainProbation.vue
@@ -84,7 +84,7 @@
             <q-tr
               :props="props"
               class="cursor-pointer"
-              @click="router.push(`/probation/detail/${props.rowIndex + 1}`)"
+              @click="router.push(`/probation/detail/${props.row.personal_id}`)"
             >
               <q-td v-for="col in props.cols" :key="col.name" :props="props">
                 <div v-if="col.name == 'no'">
@@ -257,12 +257,12 @@ const pagination = ref({
 const visibleColumns = ref<string[]>([
   "no",
   "name",
-  "position",
-  "level",
-  "institution",
-  "time",
-  "status",
-  "orderNum",
+  "position_line",
+  "position_level",
+  "organization",
+  "probation_no",
+  "order_number",
+  "probation_status",
 ]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
 
 // หัวตาราง
@@ -286,114 +286,63 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "position",
+    name: "position_line",
     align: "left",
     label: "ตำแหน่งในสายงาน",
     sortable: true,
-    field: "position",
+    field: "position_line",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "level",
+    name: "position_level",
     align: "left",
     label: "ระดับ",
     sortable: true,
-    field: "level",
+    field: "position_level",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "institution",
+    name: "organization",
     align: "left",
     label: "สังกัด",
     sortable: true,
-    field: "institution",
+    field: "organization",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "time",
+    name: "probation_no",
     align: "center",
     label: "ครั้งที่ทดลองงาน",
     sortable: true,
-    field: "time",
+    field: "probation_no",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "orderNum",
+    name: "order_number",
     align: "center",
     label: "เลขที่คําสั่งบรรจุแต่งตั้ง",
     sortable: true,
-    field: "orderNum",
+    field: "order_number",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "status",
+    name: "probation_status",
     align: "left",
     label: "สถานะทดลองงาน",
     sortable: true,
-    field: "status",
+    field: "probation_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 rows = ref<FormMainProbation[]>([]);
 
 // หัวตาราง2
 const columns2 = ref<QTableProps["columns"]>([
@@ -483,28 +432,37 @@ const rows2 = ref<FormMainProbation2[]>([
   //   },
 ]);
 
-onMounted(async () => {});
-
-watch(modal, () => {
-  if (modal.value === true) {
-    fecthOrganiz();
-  }
+onMounted(async () => {
+  getpersonalList();
 });
 
-const fecthOrganiz = async () => {
+// watch(modal, () => {
+//   if (modal.value === true) {
+//     getpersonalList();
+//   }
+// });
+
+const getpersonalList = async () => {
   showLoader();
   await http
-    .get(config.API.profileOrganizRoot)
+    .get(config.API.personalList())
     .then((res) => {
-      console.log(res);
-      let id = res.data.result[0].id;
-      if (id !== "") {
-        findlist(id);
-      }
-    })
-    .catch((e) => {
-      messageError($q, e);
+      const data = res.data.data;
+      rows.value = data.map((item: FormMainProbation) => ({
+        personal_id: item.personal_id,
+        name: item.name,
+        position_line: item.position_line,
+        position_line_id: item.position_line_id,
+        position_level: item.position_level,
+        position_level_id: item.position_level_id,
+        organization: item.organization,
+        probation_no: item.probation_no,
+        order_number: item.order_number,
+        probation_status: item.probation_status,
+      }));
+      console.log("(data)", data);
     })
+    .catch(() => {})
     .finally(() => {
       hideLoader();
     });
@@ -559,15 +517,11 @@ const clickAdd = (id: string) => {
     .onOk(async () => {
       const postData = {
         personal_id: id,
-      }
+      };
       console.log("postData:", postData);
-      await http
-    .post(config.API.personalAdd(), postData)
-    .then((res) => {
-      console.log("res:", res);
-      
-    });
-
+      await http.post(config.API.personalAdd(), postData).then((res) => {
+        console.log("res:", res);
+      });
     })
     .onCancel(() => {})
     .onDismiss(() => {});
diff --git a/src/modules/05_placement/components/probation/ProbationDetail.vue b/src/modules/05_placement/components/probation/ProbationDetail.vue
index cb43dad2d..628b2f7c0 100644
--- a/src/modules/05_placement/components/probation/ProbationDetail.vue
+++ b/src/modules/05_placement/components/probation/ProbationDetail.vue
@@ -34,19 +34,19 @@
         <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 class="col-12 text-detail">{{ position_line }}</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 class="col-12 text-detail">{{ position_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 class="col-12 text-detail">{{ organization }}</div>
           </div>
         </div>
         <div class="col-xs-6 col-sm-3 row items-center">
@@ -55,18 +55,18 @@
             <div class="col-12 text-detail">
               <q-icon
                 size="20px"
-                v-if="status == 'อยู่ระหว่างการทดลองงาน'"
+                v-if="probation_status == 'PENDING'"
                 name="mdi-timer-sand"
                 color="deep-orange"
               />
               <q-icon
                 size="20px"
-                v-else-if="status == 'ไม่ผ่านการทดลอง'"
+                v-else-if="probation_status == 'ไม่ผ่านการทดลอง'"
                 name="mdi-close"
                 color="red"
               />
               <q-icon size="20px" v-else name="mdi-check" color="teal" />
-              {{ status }}
+              {{ probation_status == 'PENDING' ? 'อยู่ในระหว่างการทดลองงาน' : '' }}
             </div>
           </div>
         </div>
@@ -78,7 +78,7 @@
       <div class="row col-12 q-col-gutter-sm">
         <div>
           <q-btn
-            @click="router.push(`/probation/add`)"
+            @click="router.push(`/probation/add/${personalId}`)"
             size="12px"
             flat
             round
@@ -191,17 +191,26 @@
 </template>
 <script setup lang="ts">
 import { useRouter, useRoute } from "vue-router";
-import { ref, useAttrs } from "vue";
+import { ref, useAttrs,onMounted } from "vue";
 import type { QTableProps } from "quasar";
 import type { FormProbationDetail } from "@/modules/05_placement/interface/request/Main";
+import type { FormProbationPersonal } from "@/modules/05_placement/interface/request/Main";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const $q = useQuasar(); //ใช้ noti quasar
+const mixin = useCounterMixin();
+const { messageError, success, showLoader, hideLoader } = mixin;
 const router = useRouter();
 const route = useRoute();
-
-const name = ref<string>("นายสมคิด ยอดใจ");
-const position = ref<string>("นักจัดการงานทั่วไป");
-const level = ref<string>("ชำนาญการพิเศษ");
-const institution = ref<string>("ฝ่ายบริหารงานทั่วไป");
-const status = ref<string>("อยู่ระหว่างการทดลองงาน");
+const personalId = ref<string>(route.params.id as string);
+const name = ref<string>("");
+const position_line = ref<string>("");
+const position_level = ref<string>("");
+const organization = ref<string>("");
+const probation_status = ref<string>("");
 
 const pagination = ref({
   sortBy: "desc",
@@ -314,6 +323,42 @@ const paginationLabel = (start: string, end: string, total: string) => {
   if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
   else return start + "-" + end + " ใน " + total;
 };
+const getpersonalList = async () => {
+  showLoader();
+  await http
+    .get(config.API.personal(personalId.value))
+    .then((res) => {
+      const data = res.data.data;
+      name.value = data.name
+      position_line.value = data.position_line
+      position_level.value = data.position_level
+      organization.value = data.organization
+      probation_status.value = data.probation_status
+
+      // rows.value = data.map((item: FormProbationPersonal) => ({
+      //   personal_id: item.personal_id,
+      //   name: item.name,
+      //   position_line: item.position_line,
+      //   position_line_id: item.position_line_id,
+      //   position_level: item.position_level,
+      //   position_level_id: item.position_level_id,
+      //   organization: item.organization,
+      //   probation_no: item.probation_no,
+      //   order_number: item.order_number,
+      //   probation_status: item.probation_status,
+      // }));
+      console.log("(data)", data);
+    })
+    .catch(() => {})
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+onMounted(async () => {
+  await getpersonalList()
+  console.log()
+})
 </script>
 <style lang="scss" scope>
 .q-img {
diff --git a/src/modules/05_placement/interface/request/Main.ts b/src/modules/05_placement/interface/request/Main.ts
index 84af7910f..1da302c4c 100644
--- a/src/modules/05_placement/interface/request/Main.ts
+++ b/src/modules/05_placement/interface/request/Main.ts
@@ -24,14 +24,17 @@ interface FormOrderPlacementMainData {
 }
 
 interface FormMainProbation {
-  no: string;
-  name: string;
-  position: string;
-  level: string;
-  institution: string;
-  time: string;
-  status: string;
-  orderNum: string;
+  personal_id: number,
+  ordering: number,
+  name: string,
+  position_line: string,
+  position_line_id: string,
+  position_level: string,
+  position_level_id: string,
+  organization: string,
+  probation_no: number,
+  order_number: string,
+  probation_status: string
 }
 interface FormMainProbation2 {
   no: string;
@@ -47,8 +50,21 @@ interface FormProbationDetail {
   intendant: string;
   commander: string;
 }
+interface FormProbationPersonal {
+  personal_id: string,
+  name: string,
+  position_line: string,
+  position_line_id: string,
+  position_level: string,
+  position_level_id: string,
+  organization: string,
+  probation_no: number,
+  order_number: string,
+  probation_status: string
+}
 export type { FormPlacementMainData };
 export type { FormOrderPlacementMainData };
 export type { FormMainProbation };
 export type { FormMainProbation2 };
 export type { FormProbationDetail };
+export type { FormProbationPersonal };
diff --git a/src/modules/05_placement/router.ts b/src/modules/05_placement/router.ts
index b6e30b8d2..d99900d33 100644
--- a/src/modules/05_placement/router.ts
+++ b/src/modules/05_placement/router.ts
@@ -165,7 +165,7 @@ export default [
     },
   },
   {
-    path: "/probation/add",
+    path: "/probation/add/:personalId",
     name: "probationWorkAdd",
     component: probationFormAssign,
     meta: {