diff --git a/src/api/05_placement/api.placement.ts b/src/api/05_placement/api.placement.ts
index bd9f76127..62f8615d1 100644
--- a/src/api/05_placement/api.placement.ts
+++ b/src/api/05_placement/api.placement.ts
@@ -1,6 +1,18 @@
-/**
- * api บรรจุ แต่งตั้ง ย้าย โอน
- */
-import env from "../index";
+import env from "../index"
+const placement = `${env.API_URI}/Placement/placement`
+const orgTree = `${env.API_URI_ORG_TREE}`;
 
-export default {};
+export default {
+  MainDetail: (year: number) => `${placement}/exam/${year}`,
+  yearOptions: () => `${placement}/fiscal`,
+  redirectToPage: (examId: string) => `${placement}/pass/${examId}`,
+  disclaimF: () => `${placement}/pass/disclaim`,
+  deferment: () => `${placement}/pass/deferment`,
+  getStatCard: (examId: string) => `${placement}/pass/stat/${examId}`,
+  getDatapersonal: (id: string) => `${placement}/personal/${id}`,
+  putProperty: (id: string) => `${placement}/property/${id}`,
+  orgTree: orgTree,
+  placementPass: () => `${placement}/pass`,
+  placementDefermentInfo: (id: string) => `${placement}/pass/deferment/${id}`,
+  placementDisclaimInfo: (id: string) => `${placement}/pass/disclaim/${id}`,
+};
\ No newline at end of file
diff --git a/src/api/index.ts b/src/api/index.ts
index c72de70d1..2643e3217 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -8,7 +8,7 @@ const env = ref<string>(process.env.NODE_ENV || "development");
 
 const config = ref<any>({
   development: {
-    // API_URI: "https://localhost:7006/api/v1",
+    // API_URI: "https://localhost:7260/api",
     API_URI: "https://bma-ehr.frappet.synology.me/api/v1",
     // API_URI_ORG_SERVICE: "https://localhost:7056/api/v1", //ใช้ชั่วคราว
     API_URI_ORG_SERVICE: "https://bma-ehr.frappet.synology.me/api/v1", //ใช้ชั่วคราว
@@ -20,6 +20,8 @@ const config = ref<any>({
     API_CANDIDATE_URI: "https://bma-ehr.frappet.synology.me/api/v1",
     // API_REPORT_URI: "https://localhost:7187/api/v1",
     API_REPORT_URI: "https://bma-ehr.frappet.synology.me/api/v1",
+    API_URI_ORG_TREE:
+      "https://s3cluster.frappet.com/bma-ehr-fpt/organization/strueture/tree_20230712_172702.json",
     MEET_URI: "meet.frappet.com",
   },
   test: {
@@ -36,6 +38,8 @@ const config = ref<any>({
     API_URI_PROFILE_SERVICE: `${window.location.protocol}//${window.location.host}/api/v1`,
     API_CANDIDATE_URI: `${window.location.protocol}//${window.location.host}/api/v1`,
     API_REPORT_URI: `${window.location.protocol}//${window.location.host}/api/v1`,
+    API_URI_ORG_TREE:
+      "https://s3cluster.frappet.com/bma-ehr-fpt/organization/strueture/tree_20230707_115124.json",
     MEET_URI: "meet.frappet.com",
   },
 });
@@ -55,6 +59,7 @@ const MEET_URI = ref<string>(config.value[env.value].MEET_URI);
 const API_URI_PROFILE_SERVICE = ref<string>(
   config.value[env.value].API_URI_PROFILE_SERVICE
 );
+const API_URI_ORG_TREE = ref<string>(config.value[env.value].API_URI_ORG_TREE);
 
 export default {
   env: env.value,
@@ -65,5 +70,6 @@ export default {
   API_URI_ORG_SERVICE: API_URI_ORG_SERVICE.value,
   API_URI_ORG_EMPLOYEE_SERVICE: API_URI_ORG_EMPLOYEE_SERVICE.value,
   API_URI_PROFILE_SERVICE: API_URI_PROFILE_SERVICE.value,
+  API_URI_ORG_TREE: API_URI_ORG_TREE.value,
   MEET_URI: MEET_URI.value,
 };
diff --git a/src/modules/01_metadata/components/positionEmployee/Group.vue b/src/modules/01_metadata/components/positionEmployee/Group.vue
index 00c538863..7d8f70425 100644
--- a/src/modules/01_metadata/components/positionEmployee/Group.vue
+++ b/src/modules/01_metadata/components/positionEmployee/Group.vue
@@ -437,7 +437,7 @@ const fetchHistory = async () => {
     .catch((e) => {
       messageError($q, e);
     })
-    .finally(async () => {
+    .finally(() => {
       hideLoader();
     });
 };
diff --git a/src/modules/04_registry/components/Record.vue b/src/modules/04_registry/components/Record.vue
index a32e0f07f..37ad44982 100644
--- a/src/modules/04_registry/components/Record.vue
+++ b/src/modules/04_registry/components/Record.vue
@@ -309,9 +309,7 @@ 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 ? 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
@@ -480,7 +478,7 @@ onMounted(async () => {
 });
 
 const fetchData = async () => {
-  if (profileId.value) {
+  if (profileId.value!='') {
     loaderPage(true);
     await http
       .get(config.API.profileNopaidId(profileId.value))
diff --git a/src/modules/05_placement/components/Main.vue b/src/modules/05_placement/components/Main.vue
index 7098a4a3c..f72ff76a7 100644
--- a/src/modules/05_placement/components/Main.vue
+++ b/src/modules/05_placement/components/Main.vue
@@ -1,21 +1,21 @@
 <script setup lang="ts">
-import { onMounted, reactive, ref, useAttrs } from "vue";
+import { onMounted, ref, reactive } from "vue";
 import type { QTableProps } from "quasar";
-import type { FormPlacementMainData } from "@/modules/05_placement/interface/request/Main";
-import type { DataOption } from "@/modules/05_placement/interface/index/Main";
+import { useQuasar } from "quasar";
+import type {
+  DataOption,
+  DataOption1,
+} from "@/modules/05_placement/interface/index/Main";
 import { useCounterMixin } from "@/stores/mixin";
 import { usePlacementDataStore } from "@/modules/05_placement/store";
 import router from "@/router";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 const DataStore = usePlacementDataStore();
-
+const $q = useQuasar();
 const mixin = useCounterMixin();
-const { dateText } = mixin;
-
-// แปลงเวลา ค.ศ ให้เป็น พ.ศ
-const textDate = (value: Date) => {
-  return dateText(value);
-};
+const { showLoader, hideLoader, messageError, date2Thai } = mixin;
 
 // หัวตาราง
 const columns = ref<QTableProps["columns"]>([
@@ -58,175 +58,119 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "numberofCandidates",
+    name: "numberOfCandidates",
     align: "left",
     label: "จำนวนผู้สอบได้",
     sortable: false,
-    field: "numberofCandidates",
+    field: "numberOfCandidates",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "examType",
+    name: "examTypeName",
     align: "left",
     label: "ประเภทการสอบ",
     sortable: false,
-    field: "examType",
+    field: "examTypeName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+  {
+    name: "accountStartDate",
+    align: "left",
+    label: "วันที่บัญชีใช้ได้ตั้งแต่",
+    sortable: true,
+    field: "accountStartDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
   {
     name: "accountExpirationDate",
     align: "left",
-    label: "วันที่บัญชีหมดอายุ",
+    label: "วันที่บัญชีใช้ได้ถึง",
     sortable: true,
     field: "accountExpirationDate",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-
 // ข้อมูลตาราง (จำลอง)
-const rows = ref<FormPlacementMainData[]>([
-  {
-    id: 1,
-    examRound:
-      "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
-    examOrder: 3,
-    fiscalYear: 2023,
-    numberofCandidates: 8,
-    examType: 1,
-    accountExpirationDate: "2023-02-28T14:47:04.1785384Z",
-  },
-  {
-    id: 2,
-    examRound:
-      "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
-    examOrder: 2,
-    fiscalYear: 2023,
-    numberofCandidates: 12,
-    examType: 1,
-    accountExpirationDate: "2023-02-28T14:47:04.1785384Z",
-  },
-  {
-    id: 3,
-    examRound:
-      "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
-    examOrder: 2,
-    fiscalYear: 2023,
-    numberofCandidates: 20,
-    examType: 1,
-    accountExpirationDate: "2023-01-31T14:47:04.1785384Z",
-  },
-  {
-    id: 4,
-    examRound:
-      "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
-    examOrder: 2,
-    fiscalYear: 2022,
-    numberofCandidates: 16,
-    examType: 2,
-    accountExpirationDate: "2023-11-30T14:47:04.1785384Z",
-  },
-  {
-    id: 5,
-    examRound:
-      "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
-    examOrder: 1,
-    fiscalYear: 2021,
-    numberofCandidates: 20,
-    examType: 2,
-    accountExpirationDate: "2024-05-21T14:47:04.1785384Z",
-  },
+const rows = ref<QTableProps["rows"]>([]);
+// const yearValue = ref<number>(0); // เพิ่มตัวแปรในโมดูล
+
+// let OriginalData = ref<FormPlacementMainData[]>([]);
+// let UpdataData = ref<FormPlacementMainData[]>([]);
+const searchYear = ref();
+const yearOptions = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
+
+const dataPlacement = ref<any>([]);
+const visibleColumns = ref([
+  "id",
+  "examRound",
+  "examOrder",
+  "examOrder",
+  "fiscalYear",
+  "numberOfCandidates",
+  "examTypeName",
+  "accountStartDate",
+  "accountExpirationDate",
 ]);
 
-let OriginalData = ref<FormPlacementMainData[]>([]);
-let UpdataData = ref<FormPlacementMainData[]>([]);
-
-const OriginalDataFetch = async () => {
-  // API
-  // await http
-  //   .get(config.API.// ตัวอย่าง)
-  //   .then((res: any) => {
-  //   })
-  //   .catch((e: any) => {
-  //     messageError($q, e);
-  //   })
-  //   .finally(async () => {
-  //   });
-  await DataStore.DataMain(rows.value);
-  OriginalData.value = await DataStore.DataMainOrig;
-  UpdataData.value = OriginalData.value;
-};
-
 onMounted(async () => {
-  await OriginalDataFetch();
-  fiscalYearFilter();
-  examTimeFilter();
-  examTypeFilter();
-  await expiredAccountFilter();
-  searchFilterTable();
+  await fetchYearOptions();
 });
+const fetchPlacementData = async (val: number) => {
+  showLoader();
+  http
+    .get(config.API.MainDetail(val))
+    .then((res) => {
+      dataPlacement.value = res.data.result;
+      DataStore.DataMainOrig = dataPlacement.value;
+      rows.value = DataStore.DataMainOrig;
+      examTypeFilter();
+      examTimeFilter();
+      expiredAccountFilter();
+    })
+    .catch((e) => {
+      console.log(e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+const fetchYearOptions = async () => {
+  http
+    .get(config.API.yearOptions())
+    .then((res) => {
+      const response = res.data.result;
+      yearOptions.push(...response);
+      const maxNumber = yearOptions.reduce((max: any, e: any) => {
+        return e.id > max ? e.id : max;
+      }, "");
+      searchYear.value = maxNumber;
+      DataStore.DataMainYearSet(searchYear.value);
+      // DataStore.DataMainYear = yearOptions.value;
+      fetchPlacementData(searchYear.value);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+};
+const filterYear = () => {
+  console.log("searchYear", searchYear.value);
+  fetchPlacementData(searchYear.value);
+};
 
 // ดูรายการสอบแข่งขัน หน้าต่อไป
-const redirectToPage = (id?: number) => {
-  // router.push({ name: 'placementDetail'});
-  router.push(`/placement/detail`);
+const redirectToPage = (examId?: number) => {
+  router.push(`/placement/pass/${examId}`);
 };
 
-// เลือกปีงบประมาณ
-const fiscalyear = ref<number | null>(0);
-const fiscalyearOP = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
-const addedfiscalYearValues: number[] = [];
-const fiscalYearFilter = async () => {
-  // API
-  // await http
-  //   .get(config.API.// ตัวอย่าง)
-  //   .then((res: any) => {
-  //    DataStore.DataMainYearSet(rows.value);
-  //    fiscalyearOP.value = DataStore.DataMainYearGet;
-  //   })
-  //   .catch((e: any) => {
-  //     messageError($q, e);
-  //   })
-  //   .finally(async () => {
-  //   });
-  for (let data of OriginalData.value) {
-    const year = data.fiscalYear + 543;
-
-    if (fiscalyear.value === null || year > fiscalyear.value) {
-      fiscalyear.value = year;
-    }
-
-    if (!addedfiscalYearValues.includes(year)) {
-      fiscalyearOP.push({ id: year, name: year.toString() });
-      addedfiscalYearValues.push(year);
-    }
-  }
-};
-
-// เลือกปีงบประมาณตาม API
-const searchfiscalyear = () => {
-  console.log("Input value changed:", fiscalyear.value);
-  // API
-  // await http
-  //   .get(config.API.// ตัวอย่าง)
-  //   .then((res: any) => {
-  //   })
-  //   .catch((e: any) => {
-  //     messageError($q, e);
-  //   })
-  //   .finally(async () => {
-  //   });
-};
-
-// ค้นหาในตาราง
+//-------------------|ค้นหาในตาราง|-----------------//
 const filterKeyword = ref<string>("");
 const filterRef = ref<any>(null);
 const resetFilter = () => {
@@ -234,63 +178,64 @@ const resetFilter = () => {
   filterRef.value.focus();
 };
 
-const attrs = ref<any>(useAttrs());
-const visibleColumns = ref<string[]>([
-  "id",
-  "examRound",
-  "examOrder",
-  "fiscalYear",
-  "numberofCandidates",
-  "examType",
-  "accountExpirationDate",
-]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+//-------------------|ครั้งที่สอบ|------------------------------//
+const examTime = ref<number | string>("all");
+const examTimeOP = reactive<DataOption1[]>([{ id: "all", name: "ทั้งหมด" }]);
+const addedExamTimeValues: Set<number> = new Set();
 
-// ครั้งที่สอบ
-const examTime = ref<number | null>(null);
-const examTimeOP = ref<number[]>([]);
 const examTimeFilter = async () => {
-  for (let data of OriginalData.value) {
-    if (!examTimeOP.value.includes(data.examOrder)) {
-      examTimeOP.value.push(data.examOrder);
+  // examTimeOP.push({ id: "all", name: "ทั้งหมด" });
+  for (const data of dataPlacement.value) {
+    const examOrder = data.examOrder;
+    if (examOrder !== null && !addedExamTimeValues.has(examOrder)) {
+      examTimeOP.push({ id: examOrder.toString(), name: examOrder.toString() });
+      addedExamTimeValues.add(examOrder);
     }
   }
-  examTimeOP.value.sort((a, b) => a - b); // เรียงลำดับ
+  examTimeOP.sort((a, b) => {
+    if (a.id === "all") return -1; // ให้ตัวเลือก "ทั้งหมด" อยู่ด้านหน้า
+    if (b.id === "all") return 1;
+    return Number(a.id) - Number(b.id);
+  }); // เรียงลำดับตาม id ที่แปลงเป็นตัวเลข
 };
 
 // ประเภทการสอบ
-const examType = ref<number | null>(0);
-const examTypeOP = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
-const addedexamTypeValues: number[] = [];
-const examTypeFilter = async () => {
-  for (let data of OriginalData.value) {
-    const examTypeValue = data.examType;
-    if (examTypeValue == 1 && !addedexamTypeValues.includes(1)) {
-      examTypeOP.push({ id: 1, name: "คัดเลือก" });
-      addedexamTypeValues.push(1);
-    } else if (examTypeValue == 2 && !addedexamTypeValues.includes(2)) {
-      examTypeOP.push({ id: 2, name: "สอบแข่งขัน" });
-      addedexamTypeValues.push(2);
+const examType = ref<string | null>("all");
+const examTypeOP = ref<DataOption1[]>([{ id: "all", name: "ทั้งหมด" }]);
+const addedExamTypeValues: Set<string> = new Set();
+const examTypeFilter = () => {
+  dataPlacement.value.forEach((item: any) => {
+    const examTypeName = item.examTypeName;
+    const examTypeValue = item.examTypeValue;
+    if (examTypeName && !addedExamTypeValues.has(examTypeName)) {
+      examTypeOP.value.push({
+        id: examTypeValue,
+        name: examTypeName,
+      });
+      addedExamTypeValues.add(examTypeName);
     }
+  });
+};
+//--------------|ฟิลเตอร์|--------------------------------------//
+const searchFilterTable = async () => {
+  if (examType.value !== undefined && examType.value !== null) {
+    await DataStore.DataUpdateMain(
+      examTime.value,
+      examType.value,
+      expiredAccount.value
+    );
+    rows.value = DataStore.DataMainUpdate;
   }
 };
 
-const searchFilterTable = async () => {
-  // console.log('Input value changed:', examTime.value, examType.value, expiredAccount.value);
-  await DataStore.DataUpdateMain(
-    examTime.value,
-    examType.value,
-    expiredAccount.value
-  );
-  UpdataData.value = DataStore.DataMainUpdate;
-};
-
-// บัญชีหมดอายุ
+//----------------|บัญชีหมดอายุ|-----------------------------//
 const expiredAccount = ref<boolean>(false);
 const expiredAccountFilter = async () => {
-  const currentDate = new Date();
-  const updatedRows = OriginalData.value.map((data) => {
-    let expirationDate = new Date(data.accountExpirationDate);
-    let isExpired = expirationDate < currentDate;
+  // const currentDate = new Date();
+  const updatedRows = dataPlacement.value.map((data: any) => {
+    // let expirationDate = new Date(data.accountExpirationDate);
+    // let isExpired = currentDate > expirationDate;
+    let isExpired = data.isExpired == expiredAccount;
 
     return { ...data, isExpired };
   });
@@ -298,13 +243,13 @@ const expiredAccountFilter = async () => {
 };
 
 const paging = ref<boolean>(true);
-  const pagination = ref({
-  sortBy: "desc",
+const pagination = ref({
+  sortBy: "accountStartDate",
   descending: false,
   page: 1,
   rowsPerPage: 10,
 });
-const paginationLabel = (start: string, end: string, total: string) => {
+const paginationLabel = (start: number, end: number, total: number) => {
   if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
   else return start + "-" + end + " ใน " + total;
 };
@@ -315,16 +260,16 @@ 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-sm">
+    <div class="row q-col-gutter-md">
       <div class="row col-12 q-col-gutter-sm">
         <q-select
           class="col-xs-12 col-sm-3 col-md-2"
-          v-model="fiscalyear"
+          v-model="searchYear"
           label="ปีงบประมาณ"
           dense
           emit-value
           map-options
-          :options="fiscalyearOP"
+          :options="yearOptions"
           option-value="id"
           option-label="name"
           lazy-rules
@@ -333,7 +278,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
           :borderless="false"
           :outlined="true"
           :hide-dropdown-icon="false"
-          @update:model-value="searchfiscalyear"
+          @update:model-value="filterYear"
         />
         <q-space />
         <q-input
@@ -423,15 +368,14 @@ const paginationLabel = (start: string, end: string, total: string) => {
       <div class="col-12">
         <q-table
           ref="table"
+          :rows="rows"
           :columns="columns"
-          :rows="UpdataData"
           :filter="filterKeyword"
           row-key="id"
           flat
           bordered
           dense
           class="custom-header-table"
-          v-bind="attrs"
           :visible-columns="visibleColumns"
           :pagination-label="paginationLabel"
           v-model:pagination="pagination"
@@ -454,7 +398,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
               @click="redirectToPage(props.row.id)"
             >
               <q-td key="id" :props="props">
-                {{ props.row.id }}
+                {{ props.rowIndex + 1 }}
               </q-td>
               <q-td key="examRound" :props="props">
                 {{ props.row.examRound }}
@@ -463,16 +407,19 @@ const paginationLabel = (start: string, end: string, total: string) => {
                 {{ props.row.examOrder }}
               </q-td>
               <q-td key="fiscalYear" :props="props">
-                {{ props.row.fiscalYear + 543 }}
+                {{ props.row.fiscalYear }}
               </q-td>
-              <q-td key="numberofCandidates" :props="props">
-                {{ props.row.numberofCandidates }}
+              <q-td key="numberOfCandidates" :props="props">
+                {{ props.row.numberOfCandidates }}
               </q-td>
-              <q-td key="examType" :props="props">
-                {{ props.row.examType == 1 ? "คัดเลือก" : "สอบแข่งขัน" }}
+              <q-td key="examTypeName" :props="props">
+                {{ props.row.examTypeName }}
+              </q-td>
+              <q-td key="accountStartDate" :props="props">
+                {{ date2Thai(props.row.accountStartDate) }}
               </q-td>
               <q-td key="accountExpirationDate" :props="props">
-                {{ textDate(props.row.accountExpirationDate) }}
+                {{ date2Thai(props.row.accountExpirationDate) }}
               </q-td>
             </q-tr>
           </template>
diff --git a/src/modules/05_placement/components/OrderPlacement/detailOrderPlacement.vue b/src/modules/05_placement/components/OrderPlacement/detailOrderPlacement.vue
index e3fc70177..790db1c27 100644
--- a/src/modules/05_placement/components/OrderPlacement/detailOrderPlacement.vue
+++ b/src/modules/05_placement/components/OrderPlacement/detailOrderPlacement.vue
@@ -82,7 +82,7 @@ const step04 = defineAsyncComponent(
 );
 
 const router = useRouter();
-const step = ref<number>(4);
+const step = ref<number>(1);
 const stepper = ref<QStepper>();
 
 const nextStep = () => {
diff --git a/src/modules/05_placement/components/OrderPlacement/step/step03.vue b/src/modules/05_placement/components/OrderPlacement/step/step03.vue
index 4c6568450..f826a28e6 100644
--- a/src/modules/05_placement/components/OrderPlacement/step/step03.vue
+++ b/src/modules/05_placement/components/OrderPlacement/step/step03.vue
@@ -325,7 +325,7 @@
             round
             color="public"
             icon="mdi-content-save-outline"
-            @click="next"
+            @click="clickClose"
           >
             <q-tooltip>บันทึก</q-tooltip>
           </q-btn>
diff --git a/src/modules/05_placement/components/OrderPlacement/step/step04.vue b/src/modules/05_placement/components/OrderPlacement/step/step04.vue
index d33c818ef..7d9d21328 100644
--- a/src/modules/05_placement/components/OrderPlacement/step/step04.vue
+++ b/src/modules/05_placement/components/OrderPlacement/step/step04.vue
@@ -22,15 +22,11 @@
                 <q-menu>
                   <q-list style="min-width: 150px">
                     <q-item clickable v-close-popup>
-                      <q-item-section avatar
-                        ><q-icon color="red" name="mdi-file-pdf"
-                      /></q-item-section>
+                      <q-item-section avatar><q-icon color="red" name="mdi-file-pdf" /></q-item-section>
                       <q-item-section>ไฟล์ .PDF</q-item-section>
                     </q-item>
                     <q-item clickable v-close-popup>
-                      <q-item-section avatar
-                        ><q-icon color="blue" name="mdi-file-word"
-                      /></q-item-section>
+                      <q-item-section avatar><q-icon color="blue" name="mdi-file-word" /></q-item-section>
                       <q-item-section>ไฟล์ .docx</q-item-section>
                     </q-item>
                   </q-list>
@@ -51,84 +47,82 @@
                 <q-menu>
                   <q-list style="min-width: 150px">
                     <q-item clickable v-close-popup>
-                      <q-item-section avatar
-                        ><q-icon color="red" name="mdi-file-pdf"
-                      /></q-item-section>
+                      <q-item-section avatar><q-icon color="red" name="mdi-file-pdf" /></q-item-section>
                       <q-item-section>ไฟล์ .PDF</q-item-section>
                     </q-item>
                     <q-item clickable v-close-popup>
-                      <q-item-section avatar
-                        ><q-icon color="green-7" name="mdi-file-excel"
-                      /></q-item-section>
+                      <q-item-section avatar><q-icon color="green-7" name="mdi-file-excel" /></q-item-section>
                       <q-item-section>ไฟล์ .xls</q-item-section>
                     </q-item>
                   </q-list>
                 </q-menu>
               </q-btn>
             </div>
-            <q-space />
-            <q-btn
-              class="text-dark"
-              flat
-              dense
-              icon="mdi-fullscreen"
-              color="add"
-              @click="dialog = true"
-            />
           </div>
-          <q-separator style="margin-top: -1px; z-index: 1" />
+          <q-separator style="margin-top: -1px; z-index: 1;" />
           <q-card bordered class="card-pdf q-ma-md q-pa-md">
-            <div class="justify-between items-center align-center q-pb-sm row">
-              <q-btn
-                class="text-dark bg-grey-4"
-                flat
-                dense
-                @click="page = page > 1 ? page - 1 : page"
+              <div
+                class="justify-between items-center align-center q-pb-sm row"
               >
-                <q-icon name="mdi-chevron-left" />
-              </q-btn>
+                <q-btn
+                  class="text-dark bg-grey-4"
+                  flat
+                  dense
+                  @click="page = page > 1 ? page - 1 : page"
+                >
+                  <q-icon name="mdi-chevron-left" />
+                </q-btn>
 
-              <span class="body-2 grey--text">
-                หน้าที่ {{ page }} จาก {{ numOfPages }}
-              </span>
+                <span class="body-2 grey--text">
+                  หน้าที่ {{ page }} จาก {{ numOfPages }}
+                </span>
 
-              <q-btn
-                class="text-dark bg-grey-4"
-                flat
-                dense
-                @click="page = page < numOfPages ? page + 1 : page"
+                <q-btn
+                  class="text-dark bg-grey-4"
+                  flat
+                  dense
+                  @click="page = page < numOfPages ? page + 1 : page"
+                >
+                  <q-icon name="mdi-chevron-right" />
+                </q-btn>
+              </div>
+              <div class="pdfWidth">
+                <VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
+                <!-- <VuePdf :key="page" :src="pdfSrc" :page="page" /> -->
+              </div>
+              <div
+                class="justify-between items-center align-center q-pt-sm row"
               >
-                <q-icon name="mdi-chevron-right" />
-              </q-btn>
-            </div>
-            <div class="pdfWidth">
-              <VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
-              <!-- <VuePdf :key="page" :src="pdfSrc" :page="page" /> -->
-            </div>
-            <div class="justify-between items-center align-center q-pt-sm row">
-              <q-btn
-                class="text-dark bg-grey-4"
-                flat
-                dense
-                @click="page = page > 1 ? page - 1 : page"
-              >
-                <q-icon name="mdi-chevron-left" />
-              </q-btn>
+                <q-btn
+                  class="text-dark bg-grey-4"
+                  flat
+                  dense
+                  @click="page = page > 1 ? page - 1 : page"
+                >
+                  <q-icon name="mdi-chevron-left" />
+                </q-btn>
 
-              <span class="body-2 grey--text">
-                หน้าที่ {{ page }} จาก {{ numOfPages }}
-              </span>
+                <span class="body-2 grey--text">
+                  หน้าที่ {{ page }} จาก {{ numOfPages }}
+                </span>
 
-              <q-btn
-                class="text-dark bg-grey-4"
-                flat
-                dense
-                @click="page = page < numOfPages ? page + 1 : page"
-              >
-                <q-icon name="mdi-chevron-right" />
-              </q-btn>
-            </div>
+                <q-btn
+                  class="text-dark bg-grey-4"
+                  flat
+                  dense
+                  @click="page = page < numOfPages ? page + 1 : page"
+                >
+                  <q-icon name="mdi-chevron-right" />
+                </q-btn>
+              </div>
           </q-card>
+          <!-- <div class="card-pdf q-ma-md q-pa-md" v-if="tab == 'main'">
+            <pdf-viewer v-model:PDFV="vuePDFRef" />
+          </div> -->
+          <!-- <div class="card-pdf q-ma-md q-pa-md" v-else>
+            <pdf-viewer v-model:PDFV="vuePDFRef" />
+          </div> -->
+          <!-- <pdf-viewer /> -->
         </template>
 
         <template v-slot:separator>
@@ -281,21 +275,6 @@
                   </div>
                 </div>
               </fieldset>
-              <div class="flex justify-around">
-                <q-btn
-                  unelevated
-                  label="ออกคำสั่ง"
-                  :color="validateForm() ? 'public' : 'grey'"
-                  :disable="!validateForm()"
-                />
-                <q-btn
-                  class="text-dark"
-                  unelevated
-                  label="ส่งไปลงนาม"
-                  color="grey"
-                  disable
-                />
-              </div>
             </div>
           </q-form>
         </template>
@@ -326,94 +305,6 @@
         <q-tooltip>ต่อไป</q-tooltip>
       </q-btn> -->
     </div>
-
-    <q-dialog
-      v-model="dialog"
-      persistent
-      :maximized="true"
-      transition-show="slide-up"
-      transition-hide="slide-down"
-    >
-      <q-card class="bg-white text-white">
-        <!-- <q-bar>
-          <q-space />
-
-          <q-btn dense flat icon="close" v-close-popup>
-            <q-tooltip>ปิดหน้าต่าง</q-tooltip>
-          </q-btn>
-        </q-bar> -->
-
-        <div class="flex justify-end items-center align-center q-mr-md q-mt-sm">
-          <q-btn
-            icon="close"
-            unelevated
-            round
-            dense
-            style="color: #ff8080; background-color: #ffdede"
-            size="12px"
-            v-close-popup
-          />
-        </div>
-        <q-card-section bordered class="card-pdf q-ma-md q-pa-md">
-          <div class="justify-between items-center align-center q-pb-sm row">
-            <q-btn
-              class="text-dark bg-grey-4"
-              flat
-              dense
-              @click="page = page > 1 ? page - 1 : page"
-            >
-              <q-icon name="mdi-chevron-left" />
-            </q-btn>
-
-            <span class="body-2 grey--text text-black">
-              หน้าที่ {{ page }} จาก {{ numOfPages }}
-            </span>
-
-            <q-btn
-              class="text-dark bg-grey-4"
-              flat
-              dense
-              @click="page = page < numOfPages ? page + 1 : page"
-            >
-              <q-icon name="mdi-chevron-right" />
-            </q-btn>
-          </div>
-          <div class="pdfWidth">
-            <VuePDF
-              ref="vuePDFRef"
-              :pdf="pdfSrc"
-              :page="page"
-              fit-parent
-              :scale="0.1"
-            />
-            <!-- <VuePdf :key="page" :src="pdfSrc" :page="page" /> -->
-          </div>
-          <div class="justify-between items-center align-center q-pt-sm row">
-            <q-btn
-              class="text-dark bg-grey-4"
-              flat
-              dense
-              @click="page = page > 1 ? page - 1 : page"
-            >
-              <q-icon name="mdi-chevron-left" />
-            </q-btn>
-
-            <span class="body-2 grey--text text-black">
-              หน้าที่ {{ page }} จาก {{ numOfPages }}
-            </span>
-
-            <q-btn
-              class="text-dark bg-grey-4"
-              flat
-              dense
-              @click="page = page < numOfPages ? page + 1 : page"
-            >
-              <q-icon name="mdi-chevron-right" />
-            </q-btn>
-          </div>
-        </q-card-section>
-      </q-card>
-    </q-dialog>
   </div>
 </template>
 <script setup lang="ts">
@@ -426,8 +317,6 @@ import { useCounterMixin } from "@/stores/mixin";
 const mixin = useCounterMixin();
 const { date2Thai } = mixin;
 
-const dialog = ref<boolean>(false);
-
 // onUnmounted(() => {
 //   window.removeEventListener("resize", (e: any) => {
 //     myEventHandler(e);
diff --git a/src/modules/05_placement/components/pass/Detail.vue b/src/modules/05_placement/components/pass/Detail.vue
index d4bca4107..34ab8931f 100644
--- a/src/modules/05_placement/components/pass/Detail.vue
+++ b/src/modules/05_placement/components/pass/Detail.vue
@@ -1,32 +1,74 @@
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
 import { defineAsyncComponent } from "@vue/runtime-core";
-import { useRouter } from "vue-router";
+import { useRouter ,useRoute} from "vue-router";
 import cardTop from "@/modules/05_placement/components/pass/StatCard.vue";
 import keycloak from "@/plugins/keycloak";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin"
+import { useQuasar } from "quasar"
+import { usePlacementDataStore } from "@/modules/05_placement/store";
 
+const DataStore = usePlacementDataStore();
+
+const $q = useQuasar
+const mixin = useCounterMixin()
+const { messageError } = mixin
 let roleAdmin = ref<boolean>(false);
-
 const router = useRouter();
-const year = ref<string>("2566");
-const round = ref<string>("1");
-const title = ref<string>("การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ");
+const route = useRoute();
+const examId = route.params.examId;
+const year = ref<string>("");
+const round = ref<string>("");
+const title = ref<string>("");
+const examData = ref<any>();
 const AddTablePosition = defineAsyncComponent(
   () => import("@/modules/05_placement/components/pass/Table.vue")
 );
 const stat = ref<any>({
-  total: 5,
-  unContain: 1,
-  prepareContain: 3,
-  contain: 1,
+  total: 0,
+  unContain: 0,
+  prepareContain: 0,
+  contain: 0,
   disclaim: 0,
 });
 
+const getStat = async () => {
+  const examIdString = Array.isArray(examId) ? examId[0] : examId;
+  await http
+  .get(config.API.getStatCard(examIdString))
+  .then((res) =>{
+    const statCard = res.data.result;
+    // อัปเดตค่าในตัวแปร stat
+    stat.value = {
+      total: statCard.total,
+      unContain: statCard.unContain,
+      prepareContain: statCard.prepareContain,
+      contain: statCard.contain,
+      disclaim: statCard.disclaim,
+    };
+    
+      console.log("🚀 ~ file: Table.vue:96 ~ getStatCard ~ data:", statCard);
+  })
+  .catch((e) => {
+    messageError($q, e);
+  })
+};
+
 onMounted(async () => {
+  examData.value = await DataStore.DataMainOrig.find((x: any) => x.id == examId);
+  // console.log("DataStore===>", DataStore.DataMainOrig.find((x: any) => x.id == examId))
+  title.value = examData.value.examRound;
+  round.value = examData.value.examOrder;
+  year.value = examData.value.fiscalYear;
+
+  await getStat()
   if (keycloak.tokenParsed != null) {
     roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
   }
 });
+
 </script>
 <template>
   <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 row">
@@ -59,7 +101,7 @@ onMounted(async () => {
   </div>
   <q-card flat bordered class="col-12 q-mt-sm q-pt-sm">
     <div>
-      <AddTablePosition class="q-pa-none" />
+        <AddTablePosition :statCard="getStat" class="q-pa-none" @get-stat="getStat"/>
     </div>
   </q-card>
 </template>
diff --git a/src/modules/05_placement/components/pass/DialogAppoint.vue b/src/modules/05_placement/components/pass/DialogAppoint.vue
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/modules/05_placement/components/pass/DialogFooter.vue b/src/modules/05_placement/components/pass/DialogFooter.vue
index dab4dfa0c..d2358bb75 100644
--- a/src/modules/05_placement/components/pass/DialogFooter.vue
+++ b/src/modules/05_placement/components/pass/DialogFooter.vue
@@ -29,9 +29,9 @@ const emit = defineEmits([
 const updateEdit = (value: Boolean) => {
   emit("update:editvisible", value);
 };
-const cancel = async () => {
-  props.cancel();
-};
+// const cancel = async () => {
+//   props.cancel();
+// };
 const edit = async () => {
   updateEdit(!props.editvisible);
   props.edit();
diff --git a/src/modules/05_placement/components/pass/OrgTree.vue b/src/modules/05_placement/components/pass/OrgTree.vue
new file mode 100644
index 000000000..7aba3b1ec
--- /dev/null
+++ b/src/modules/05_placement/components/pass/OrgTree.vue
@@ -0,0 +1,503 @@
+<script setup lang="ts">
+import { useQuasar, QForm } from "quasar";
+import { onMounted, reactive, ref } from "vue";
+import DialogHeader from "@/modules/05_placement/components/pass/DialogHeader.vue";
+import DialogFooter from "@/modules/05_placement/components/pass/DialogFooter.vue";
+import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const $q = useQuasar();
+const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+const { date2Thai, hideLoader, messageError, showLoader, success } = mixin; //ฟังก์ชันกลางที่เรียกใช้
+
+const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
+const noData = ref<string>("ไม่พบข้อมูลผังโครงสร้าง");
+
+const checkValidate = ref<boolean>(false);
+const myFormPosition = ref<any>();
+const selected = ref<string>("")
+
+// Set form field
+let dataForm = reactive({
+    personalId: "",
+    containDate: new Date(),
+    posNoId: "",
+    positionId: "",
+    positionLevelId: "",
+    positionLineId: "",
+    positionPathSideId: "",
+    positionTypeId: "",
+    salaryAmount: null,
+    mouthSalaryAmount: null,
+    positionSalaryAmount: null,
+});
+
+onMounted(() => {
+    loadTreeData();
+})
+
+// โหลดข้อมูลโครงสร้างจาก json
+const treeData = ref<Array<any>>([]);
+const loadTreeData = async () => {
+    await http
+        .get(config.API.orgTree)
+        .then((res: any) => {
+            treeData.value = res.data;
+        })
+        .catch((e: any) => {
+            messageError($q, e);
+        })
+        .finally(() => {
+            hideLoader();
+        });
+};
+
+const search = ref<string>("");
+//reset Tree Filter
+const filterRef = ref<any>(null)
+const resetFilter = () => {
+    search.value = "";
+    filterRef.value.focus();
+};
+
+const props = defineProps({
+    personalId: String,
+    modal: Boolean,
+    close: {
+        type: Function,
+        default: () => console.log('close modal'),
+    },
+});
+
+const myFilterMethod = (node: any, filter: string) => {
+    const filt = filter;
+
+    return ((node.name && node.name == null) || !node.name) && ((node.organizationName && node.organizationName.indexOf(filt) > -1) ||
+        (node.positionNum && node.positionNum.indexOf(filt) > -1) ||
+        (node.positionName && node.positionName.indexOf(filt) > -1) ||
+        (node.governmentCode &&
+            node.governmentCode.toString().indexOf(filt) > -1) ||
+        (node.agency && node.agency.indexOf(filt) > -1) ||
+        (node.government && node.government.indexOf(filt) > -1) ||
+        (node.department && node.department.indexOf(filt) > -1) ||
+        (node.pile && node.pile.indexOf(filt) > -1) ||
+        (node.organizationShortName &&
+            node.organizationShortName.indexOf(filt) > -1) ||
+        (node.positionSideName && node.positionSideName.indexOf(filt) > -1) ||
+        (node.executivePosition && node.executivePosition.indexOf(filt) > -1) ||
+        (node.executivePositionSide &&
+            node.executivePositionSide.indexOf(filt) > -1) ||
+        (node.positionLevel && node.positionLevel.indexOf(filt) > -1))
+}
+
+const validateData = async () => {
+    checkValidate.value = true;
+    await myFormPosition.value.validate().then((result: boolean) => {
+        if (result == false) {
+            checkValidate.value = false;
+        }
+    });
+};
+
+const saveAppoint = async () => {
+    myFormPosition.value.validate().then(async (result: boolean) => {
+        if (result) {
+            const dataAppoint = await {
+                personalId: props.personalId,
+                containDate: dataForm.containDate,
+                posNoId: dataForm.posNoId,
+                positionId: dataForm.positionId,
+                positionLevelId: dataForm.positionLevelId,
+                positionLineId: dataForm.positionLineId,
+                positionPathSideId: dataForm.positionPathSideId,
+                positionTypeId: dataForm.positionTypeId,
+                salaryAmount: dataForm.salaryAmount,
+                mouthSalaryAmount: dataForm.mouthSalaryAmount,
+                positionSalaryAmount: dataForm.positionSalaryAmount,
+            };
+            // console.log("save appoint===>", dataAppoint);
+
+            showLoader();
+            await http
+                .post(config.API.placementPass(), dataAppoint)
+                .then((res) => {
+                    console.log("respone=>", res)
+                    success($q, "บันทึกสำเร็จ");
+                })
+                .catch((e) => {
+                    messageError($q, e);
+                })
+                .finally(async () => {
+                    await closeAndClear()
+                    await resetFilter()
+                    hideLoader()
+                });
+        }
+    });
+};
+
+const editDataStatus = ref<boolean>(false);
+const clickEditRow = () => {
+    editDataStatus.value = true;
+};
+
+const closeModal = () => {
+    if (editDataStatus.value == true) {
+        $q.dialog({
+            title: `ข้อมูลมีการแก้ไข`,
+            message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
+            cancel: "ยกเลิก",
+            ok: "ยืนยัน",
+            persistent: true,
+        }).onOk(() => {
+            editDataStatus.value = false;
+            closeAndClear()
+        });
+    } else {
+        closeAndClear()
+    }
+}
+
+const closeAndClear = async () => {
+    await props.close();
+    editDataStatus.value = false;
+    selected.value = ""
+    dataForm.personalId = '';
+    dataForm.containDate = new Date()
+    dataForm.posNoId = ""
+    dataForm.positionId = ""
+    dataForm.positionLevelId = ""
+    dataForm.positionLineId = ""
+    dataForm.positionPathSideId = ""
+    dataForm.positionTypeId = ""
+    dataForm.salaryAmount = null
+    dataForm.mouthSalaryAmount = null;
+    dataForm.positionSalaryAmount = null
+}
+// ตำแหน่งเลขที่
+const posNoOptions = ref<Object[]>([{
+    label: '',
+    value: ''
+}]);
+// ตำแหน่ง
+const positionOptions = ref<Object[]>([{
+    label: '',
+    value: ''
+}]);
+// ด้าน/สาขา
+const positionPathSideOptions = ref<Object[]>([{
+    label: '',
+    value: ''
+}]);
+// ตำแหน่งประเภท
+const positionTypeOptions = ref<Object[]>([{
+    label: '',
+    value: ''
+}]);
+// สายงาน
+const positionLineOptions = ref<Object[]>([{
+    label: '',
+    value: ''
+}]);
+// ระดับ
+const positionLevelOptions = ref<Object[]>([{
+    label: '',
+    value: ''
+}]);
+
+const selectedPosition = async (data: any) => {
+
+    if (data.name == null && selected.value != data.keyId) {
+        console.log("selecteds", data)
+
+        editDataStatus.value = true;
+        selected.value = data.keyId
+
+        // posNo Options
+        posNoOptions.value = [{
+            label: data.positionNum,
+            value: data.positionNumId,
+        }]
+        dataForm.posNoId = data.positionNumId;
+
+        // position Options
+        positionOptions.value = [{
+            label: data.positionName,
+            value: data.positionNameId,
+        }]
+        dataForm.positionId = data.positionNameId;
+
+        // positionPathSide Options
+        let positionPathSideArr: any = [];
+        if (data.positionSideNameObj != null) {
+            data.positionSideNameObj.map((x: any) => {
+                positionLevelsArr.push({
+                    label: x.Name,
+                    value: x.Id,
+                })
+            })
+            positionPathSideOptions.value = positionPathSideArr;
+            dataForm.positionPathSideId = positionPathSideArr.length > 1 || positionPathSideArr.length == 0 ? '' : positionPathSideArr[0].value;
+        }
+
+        // positionType Options
+        positionTypeOptions.value = [{
+            label: data.positionType,
+            value: data.positionTypeId,
+        }]
+        dataForm.positionTypeId = data.positionTypeId;
+
+        // positionLine Options
+        positionLineOptions.value = [{
+            label: data.positionLine,
+            value: data.positionLineId,
+        }]
+        dataForm.positionLineId = data.positionLineId;
+
+
+        // positionLevel Options
+        let positionLevelsArr: any = [];
+        if (data.positionLevelObj != null) {
+            data.positionLevelObj.map((x: any) => {
+                positionLevelsArr.push({
+                    label: x.Name,
+                    value: x.Id,
+                })
+            })
+            positionLevelOptions.value = positionLevelsArr;
+            dataForm.positionLevelId = positionLevelsArr.length > 1 || positionLevelsArr.length == 0 ? '' : positionLevelsArr[0].value;
+        }
+
+    } else if (selected.value == data.keyId) {
+        selected.value = '';
+        dataForm.posNoId = "";
+        dataForm.positionId = "";
+        dataForm.positionLevelId = "";
+        dataForm.positionLineId = "";
+        dataForm.positionPathSideId = "";
+        dataForm.positionTypeId = "";
+    }
+}
+</script>
+
+<template>
+    <q-dialog v-model="props.modal" persistent full-width>
+        <q-card>
+            <q-form ref="myFormPosition">
+                <DialogHeader title="เลือกหน่วยงานที่รับบรรจุ" :close="closeModal" />
+                <q-separator />
+                <q-card-section class="q-pa-sm bg-grey-1">
+                    <div class="row col-12 q-col-gutter-sm">
+                        <div class="col-xs-12 col-sm-6 row">
+                            <q-card flat bordered class="fit q-pa-sm">
+                                <q-scroll-area visible style="height: 70vh">
+                                    <q-input outlined dense ref="filterRef" v-model="search" placeholder="ค้นหา"
+                                        class="q-mb-sm">
+                                        <template v-slot:append>
+                                            <q-icon name="mdi-magnify" />
+                                        </template>
+                                    </q-input>
+                                    <div class="q-pa-sm q-gutter-sm">
+                                        <q-tree no-transition dense :nodes="treeData" node-key="keyId" :filter="search"
+                                            :no-results-label="notFound" :no-nodes-label="noData"
+                                            :filter-method="myFilterMethod">
+
+                                            <template v-slot:header-organization="prop">
+                                                <div class="col">
+                                                    <div class="row items-center q-px-xs q-pt-xs q-gutter-sm">
+                                                        <!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
+                                                        <div class="text-weight-medium">
+                                                            {{ prop.node.organizationName }}
+                                                        </div>
+
+                                                        <!--แสดง Total Count PositionNum-->
+                                                        <!-- <q-badge rounded color="grey-2" text-color="dark"
+                                                            :label="prop.node.totalPositionCount" /> -->
+                                                        <q-badge v-if="prop.node.totalPositionVacant > 0" rounded
+                                                            color="red" outline :label="prop.node.totalPositionVacant" />
+
+                                                        <q-space />
+                                                    </div>
+                                                    <div class="col items-center q-px-xs q-pt-xs">
+                                                        <div class="text-weight-medium text-grey-7">
+                                                            {{ prop.node.governmentCode }}
+                                                            {{ prop.node.organizationShortName }}
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </template>
+
+                                            <template v-slot:header-person="prop">
+                                                <q-item clickable :active="selected == prop.node.keyId"
+                                                    @click="selectedPosition(prop.node)" :disable="prop.node.name != null"
+                                                    active-class="my-list-link text-primary text-weight-medium"
+                                                    class="row items-center text-dark q-py-xs q-pl-sm rounded-borders my-list">
+                                                    <img v-if="prop.node.avatar == '' ||
+                                                        prop.node.avatar ==
+                                                        'https://cdn.quasar.dev/img/boy-avatar.png'
+                                                        " src="@/assets/avatar_user.jpg" class="col-xs-1 col-sm-2"
+                                                        style="width: 28px; height: 28px; border-radius: 50%" />
+                                                    <img v-else :src="prop.node.avatar" class="col-xs-1 col-sm-2"
+                                                        style="width: 28px; height: 28px; border-radius: 50%" />
+                                                    <!--=====ตำแหน่งว่าง สีแดง=====-->
+                                                    <div v-if="prop.node.name == null
+                                                        " class="q-px-sm text-weight-medium text-red">
+                                                        ว่าง
+                                                    </div>
+                                                    <!--=====หัวหน้า สีเขียว=====-->
+                                                    <div v-else-if="prop.node.positionLeaderFlag">
+                                                        <div class="q-px-sm text-weight-medium text-primary">
+                                                            {{ prop.node.name }}
+                                                        </div>
+                                                    </div>
+                                                    <!--=====ลูกน้อง สีปกติ=====-->
+                                                    <div v-else>
+                                                        <div class="q-px-sm text-weight-medium">
+                                                            {{ prop.node.name }}
+                                                        </div>
+                                                    </div>
+                                                    <!--ต่อท้ายชื่อคน แสดงสีปกติ-->
+                                                    <div class="q-pr-sm">
+                                                        {{ prop.node.positionName }}
+                                                    </div>
+                                                    <div class="q-pr-sm">
+                                                        {{ prop.node.positionNum }}
+                                                    </div>
+                                                    <div class="q-pr-sm">
+                                                        {{ prop.node.positionLevel }}
+                                                    </div>
+                                                    <q-icon v-if="prop.node.positionLeaderFlag" class="q-mr-sm" size="15px"
+                                                        color="primary" name="mdi-bookmark"></q-icon>
+
+                                                    <q-space />
+                                                </q-item>
+                                            </template>
+
+                                        </q-tree>
+                                    </div>
+                                </q-scroll-area>
+                            </q-card>
+                        </div>
+                        <div class="col-xs-12 col-sm-6">
+                            <q-card flat bordered class="fit q-pa-sm">
+                                <q-scroll-area visible style="height: 70vh">
+                                    <div class="row col-12 q-col-gutter-xs">
+                                        <div class="col-xs-12 col-sm-12 col-md-12"></div>
+                                        <div class="col-xs-6 col-sm-6 col-md-6">
+                                            <datepicker menu-class-name="modalfix" v-model="dataForm.containDate"
+                                                :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(new Date(dataForm.containDate))
+                                                                " :rules="[
+            (val: string) =>
+                !!val ||
+                `${'วันที่รายงานตัว'}`,
+        ]" :label="`${'วันที่รายงานตัว'}`" hide-bottom-space>
+                                                        <template v-slot:prepend>
+                                                            <q-icon name="event" class="cursor-pointer"
+                                                                style="color: var(--q-primary)">
+                                                            </q-icon>
+                                                        </template>
+                                                    </q-input>
+                                                </template>
+                                            </datepicker>
+                                        </div>
+                                        <q-space />
+                                        <div class="col-xs-6 col-sm-6 col-md-6">
+                                            <q-select class="full-width inputgreen cursor-pointer custom-input" outlined
+                                                standout dense hide-bottom-space lazy-rules :options="posNoOptions"
+                                                v-model="dataForm.posNoId" :label="`${'ตำแหน่งเลขที่'}`" map-options />
+                                        </div>
+                                        <div class="col-xs-6 col-sm-6 col-md-6">
+                                            <q-select outlined class="full-width inputgreen cursor-pointer custom-input"
+                                                standout dense hide-bottom-space lazy-rules :options="positionOptions"
+                                                v-model="dataForm.positionId" :label="`${'ตำแหน่ง'}`" map-options />
+                                        </div>
+                                        <div class="col-xs-6 col-sm-6 col-md-6">
+                                            <q-select outlined class="full-width inputgreen cursor-pointer custom-input"
+                                                standout dense hide-bottom-space lazy-rules
+                                                :options="positionPathSideOptions" v-model="dataForm.positionPathSideId"
+                                                :label="`${'ด้าน/สาขา'}`" map-options />
+                                        </div>
+
+                                        <div class="col-xs-6 col-sm-6 col-md-6">
+                                            <q-select outlined class="full-width inputgreen cursor-pointer custom-input"
+                                                standout dense hide-bottom-space lazy-rules :options="positionTypeOptions"
+                                                v-model="dataForm.positionTypeId" :label="`${'ประเภทตำแหน่ง'}`"
+                                                map-options />
+                                        </div>
+                                        <div class="col-xs-6 col-sm-6 col-md-6">
+                                            <q-select outlined class="full-width inputgreen cursor-pointer custom-input"
+                                                standout dense hide-bottom-space lazy-rules :options="positionLineOptions"
+                                                v-model="dataForm.positionLineId" :label="`${'สายงาน'}`" map-options />
+                                        </div>
+                                        <div class="col-xs-6 col-sm-6 col-md-6">
+                                            <q-select outlined class="full-width inputgreen cursor-pointer custom-input"
+                                                standout dense lazy-rules :options="positionLevelOptions"
+                                                v-model="dataForm.positionLevelId" :label="`${'ระดับ'}`" hide-bottom-space
+                                                :rules="[(val: string) => !!val || `${'กรุณาเลือกระดับ'}`]" emit-value
+                                                map-options />
+                                        </div>
+                                        <div class="col-sx-12 col-sm-12 col-md-12">
+                                            <q-separator inset size="2px" class="q-my-md" />
+                                        </div>
+                                        <div class="col-xs-6 col-sm-6 col-md-6">
+                                            <q-input outlined dense lazy-rules v-model="dataForm.salaryAmount"
+                                                :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
+                                                :label="`${'เงินเดือน'}`" @update:modelValue="clickEditRow" type="number"
+                                                hide-bottom-space />
+                                        </div>
+
+                                        <div class="col-xs-6 col-sm-6 col-md-6">
+                                            <q-input outlined dense lazy-rules v-model="dataForm.positionSalaryAmount"
+                                                :rules="[
+                                                    (val) => !!val || `${'กรุณากรอกเงินประจำตำแหน่ง'}`,
+                                                ]" :label="`${'เงินประจำตำแหน่ง'}`" @update:modelValue="clickEditRow"
+                                                type="number" hide-bottom-space />
+                                        </div>
+
+                                        <div class="col-xs-6 col-sm-6 col-md-6">
+                                            <q-input outlined dense lazy-rules v-model="dataForm.mouthSalaryAmount" :rules="[
+                                                (val) =>
+                                                    !!val || `${'กรุณากรอกเงินค่าตอบแทนรายเดือน'}`,
+                                            ]" :label="`${'เงินค่าตอบแทนรายเดือน'}`" @update:modelValue="clickEditRow"
+                                                type="number" hide-bottom-space />
+                                        </div>
+                                    </div>
+                                </q-scroll-area>
+                            </q-card>
+                        </div>
+                    </div>
+                </q-card-section>
+
+                <q-separator />
+                <DialogFooter :editvisible="true" :validate="validateData" :save="saveAppoint"
+                    v-model:modalEdit="editDataStatus" />
+            </q-form>
+        </q-card>
+    </q-dialog>
+</template>
+
+<style scoped lang="scss">
+.q-tree__node-header {
+    padding: 0px;
+    margin-top: 0px;
+    border-radius: 4px;
+    outline: 0;
+}
+
+.my-list-link {
+    color: rgb(118, 168, 222);
+    border-radius: 5px;
+    background: #a3d3fb48 !important;
+    font-weight: 600;
+    border: 1px solid rgba(175, 185, 196, 0.217);
+    /*  box-shadow: 1px 1px 7px 1px rgba(41, 95, 255, 0.15) !important; */
+}
+</style>
\ No newline at end of file
diff --git a/src/modules/05_placement/components/pass/Table.vue b/src/modules/05_placement/components/pass/Table.vue
index e4cbf2fdd..9ca780db6 100644
--- a/src/modules/05_placement/components/pass/Table.vue
+++ b/src/modules/05_placement/components/pass/Table.vue
@@ -1,20 +1,15 @@
 <script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
+import { ref, onMounted, watch, reactive } from "vue";
 import { useQuasar, QForm } from "quasar";
 import type { QTableProps } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
-import { usePlacementDataStore } from "@/modules/05_placement/store";
 import Table from "@/modules/05_placement/components/pass/TableView.vue";
 import DialogCard from "@/modules/05_placement/components/pass/TableDetail.vue";
 import DialogFooter from "@/modules/05_placement/components/pass/DialogFooter.vue";
 import DialogHeader from "@/modules/05_placement/components/pass/DialogHeader.vue";
-import type { TableName } from "@/modules/05_placement/interface/request/placement";
-// import type  Deferment  from "@/modules/05_placement/components/pass/Deferment.vue";
-import type {
-  treeTab,
-  DataOption,
-} from "@/modules/05_placement/interface/index/Main";
-
+import type { PartialTableName } from "@/modules/05_placement/interface/request/placement";
+import DialogOrgTree from "@/modules/05_placement/components/pass/OrgTree.vue";
+import { useRoute } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import keycloak from "@/plugins/keycloak";
@@ -22,350 +17,55 @@ import router from "@/router";
 
 let roleAdmin = ref<boolean>(false);
 
+const props = defineProps({
+  statCard:{
+    type:Function,
+    default: () => console.log("getStat"),
+  }
+})
 const edit = ref<boolean>(true);
-const modal = ref<boolean>(false); //modal add detail
+const modal = ref<boolean>(false); //modal ขอผ่อนผัน + สละสิทธิ์
 const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
-const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
+const modalDisclaim = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
 const editvisible = ref<boolean>(true);
-const modal_right = ref<boolean>(false); //modal add detail
+const modalDefermentDisclaim = ref<boolean>(false); //modal add detail
 const checkValidate = ref<boolean>(false);
 const modalwaitInfo = ref<boolean>(false); //modal add detail
 
-const positionMasterUserNote = ref<string>();
-const positionExecutiveId = ref<string>();
-const visibleColumns = ref<String[]>([]);
-const positionPathSideId = ref<string>();
-const positionLevelId = ref<string>();
-const positionLineId = ref<string>();
-const positionTypeId = ref<string>();
-const expanded = ref<string[]>([]);
-const clickAction = ref<string>();
-const salaryClass = ref<string>();
-const selected = ref<string>("");
-const positionId = ref<string>();
-const salaryRef = ref<string>();
-const search = ref<string>("");
+const userNote = ref<string>("");
 const filter = ref<string>("");
-const posNoId = ref<string>();
-const amount = ref<string>();
 const Name = ref<string>();
-const ocId = ref<string>();
-
-const posNoOptions = ref<DataOption[]>([]);
-const positionOptions = ref<DataOption[]>([]);
-const posNoOptionsFilter = ref<DataOption[]>([]);
-const refSelected = ref<DataOption | null>(null);
-const positionLineOptions = ref<DataOption[]>([]);
-const positionSideOptions = ref<DataOption[]>([]);
-const positionTypeOptions = ref<DataOption[]>([]);
-const positionOptionsFilter = ref<DataOption[]>([]);
-const positionExecutiveOptions = ref<DataOption[]>([]);
-const positionLineOptionsFilter = ref<DataOption[]>([]);
-const positionSideOptionsFilter = ref<DataOption[]>([]);
-const positionTypeOptionsFilter = ref<DataOption[]>([]);
-const positionLevelOptionsFilter = ref<DataOption[]>([]);
-const positionExecutiveSideOptions = ref<DataOption[]>([]);
-const positionExecutiveOptionsFilter = ref<DataOption[]>([]);
-const positionExecutiveSideOptionsFilter = ref<DataOption[]>([]);
-
+const rows = ref<any>([]);
 const myForm = ref<any>();
-const mouthSalaryAmount = ref<any>();
-const positionSalaryAmount = ref<any>();
-
 const files = ref<any>(null);
-const date = ref<Date>(new Date());
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const store = usePlacementDataStore();
-const { placementData } = store;
-const nodesTree = ref<treeTab[]>([]);
 const $q = useQuasar(); // show dialog
-const positionLevelOptions = ref<any[]>([]);
-const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
-  mixin;
 
-const fetchPosition = async () => {
-  showLoader();
-  await http
-    .get(config.API.position)
-    .then((res) => {
-      const data = res.data.result;
-      let optionpositionpaths: DataOption[] = [];
-      data.positionPaths.map((r: any) => {
-        optionpositionpaths.push({
-          id: r.id.toString(),
-          name: r.name.toString(),
-        });
-      });
-      positionOptions.value = optionpositionpaths;
-      positionOptionsFilter.value = optionpositionpaths;
+const {
+  messageError,
+  showLoader,
+  hideLoader,
+  dateText,
+  success
+} = mixin;
 
-      let optionPositionPathSides: DataOption[] = [];
-      data.positionPathSides.map((r: any) => {
-        optionPositionPathSides.push({
-          id: r.id.toString(),
-          name: r.name.toString(),
-        });
-      });
-      positionSideOptions.value = optionPositionPathSides;
-      positionSideOptionsFilter.value = optionPositionPathSides;
+const route = useRoute();
+const examId = route.params.examId;
+const examIdString = Array.isArray(examId) ? examId[0] : examId;
+const personalId = ref<string>("");
 
-      let optionPositionTypes: DataOption[] = [];
-      data.positionTypes.map((r: any) => {
-        optionPositionTypes.push({
-          id: r.id.toString(),
-          name: r.name.toString(),
-        });
-      });
-      positionTypeOptions.value = optionPositionTypes;
-      positionTypeOptionsFilter.value = optionPositionTypes;
+const visibleColumns = ref<any[]>([
+  "position",
+  "fullName",
+  "number",
+  "idCard",
+  "positionNumber",
+  "organizationName",
+  "reportingDate",
+  "bmaOfficer",
+  "statusName",
+]);
 
-      let optionPositionLines: DataOption[] = [];
-      data.positionLines.map((r: any) => {
-        optionPositionLines.push({
-          id: r.id.toString(),
-          name: r.name.toString(),
-        });
-      });
-      positionLineOptions.value = optionPositionLines;
-      positionLineOptionsFilter.value = optionPositionLines;
-
-      let optionPositionExecutives: DataOption[] = [];
-      data.positionExecutives.map((r: any) => {
-        optionPositionExecutives.push({
-          id: r.id.toString(),
-          name: r.name.toString(),
-        });
-      });
-      positionExecutiveOptions.value = optionPositionExecutives;
-      positionExecutiveOptionsFilter.value = optionPositionExecutives;
-
-      let optionPositionExecutiveSides: DataOption[] = [];
-      data.positionExecutiveSides.map((r: any) => {
-        optionPositionExecutiveSides.push({
-          id: r.id.toString(),
-          name: r.name.toString(),
-        });
-      });
-      positionExecutiveSideOptions.value = optionPositionExecutiveSides;
-      positionExecutiveSideOptionsFilter.value = optionPositionExecutiveSides;
-
-      let optionPositionLevels: DataOption[] = [];
-      data.positionLevels.map((r: any) => {
-        optionPositionLevels.push({
-          id: r.id.toString(),
-          name: r.name.toString(),
-        });
-      });
-
-      positionLevelOptions.value = optionPositionLevels.map((item: any) => {
-        //   {lebal:item.id,
-        //   value:item.name
-        // }
-      });
-      // positionLevelOptionsFilter.value = optionPositionLevels;
-    })
-    .catch((e: any) => { })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-const fetchOrganization = async (id: string) => {
-  if (selected.value != "") {
-    showLoader();
-    await http
-      .get(config.API.organizationName(id))
-      .then((res) => {
-        let data = res.data.result;
-        ocId.value = data;
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(() => {
-        hideLoader();
-      });
-  }
-};
-
-const appointModal = ref<boolean>(false);
-
-const nodeTree = async () => {
-  showLoader();
-  await http
-    .get(config.API.getTreeRoot)
-    .then((res) => {
-      const data = res.data.result;
-      nodesTree.value = data;
-      if (data.length > 0) {
-        expanded.value = [data[0].id];
-      }
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-const appoint = ref<any>({
-  Code: "",
-  UnitName: "",
-  PositionNo: "",
-  PositionType: "",
-  PositionManage: "",
-  PositionTypeManage: "",
-  PositionLine: "",
-  Major: "",
-  PositionLevel: "",
-});
-const saveAppoint = async () => {
-  myForm.value.validate().then(async (result: boolean) => {
-    if (result) {
-      if (appointModal.value) {
-        const dataAppoint = {
-          date: date.value,
-          posNoId: posNoId.value,
-          positionId: positionId.value,
-          positionPathSideId: positionPathSideId.value,
-          positionTypeId: positionTypeId.value,
-          positionLineId: positionLineId.value,
-          positionLevelId: positionLevelId.value,
-          amount: amount.value,
-          positionSalaryAmount: positionSalaryAmount.value,
-          mouthSalaryAmount: mouthSalaryAmount.value,
-          // salaryClass: salaryClass.value,
-          // refSelected: refSelected.value,
-          // salaryRef: salaryRef.value,
-        };
-        console.log("save appoint===>", dataAppoint);
-        positionTypeId.value = "";
-        positionLineId.value = "";
-        positionLevelId.value = "";
-        amount.value = "";
-        positionSalaryAmount.value = "";
-        positionPathSideId.value = "";
-        positionId.value = "";
-        posNoId.value = "";
-        mouthSalaryAmount.value = "";
-        appointModal.value = false;
-      }
-    } else {
-      // await saveData();
-    }
-  });
-};
-
-const savePostpone = async () => {
-  myForm.value.validate().then(async (result: boolean) => {
-    if (result) {
-      if (modal_right.value) {
-        const dataPost = { note: positionMasterUserNote.value, files: files };
-        console.log("save postpone===>", dataPost);
-        positionMasterUserNote.value = "";
-        modal_right.value = false;
-        files.value = null;
-      } else {
-        // await saveData();
-      }
-    }
-  });
-};
-const saveDisclaim = async () => {
-  myForm.value.validate().then(async (result: boolean) => {
-    if (result) {
-      if (modal_right.value) {
-        const dataPost = { note: positionMasterUserNote.value };
-        console.log("save disclaim===>", dataPost);
-        positionMasterUserNote.value = "";
-        modal_right.value = false;
-      } else {
-        // await saveData();
-      }
-    }
-  });
-};
-
-const clickEditRow = () => {
-  editRow.value = true;
-};
-const getClass = (val: boolean) => {
-  return {
-    "full-width inputgreen cursor-pointer ": val,
-    "full-width cursor-pointer": !val,
-  };
-};
-const selectData = (props: TableName) => {
-  itemtest.value = props;
-  if (roleAdmin.value === true) {
-    modal.value = true;
-  } else {
-    router.push("/placement/detail/08db7322-5712-4626-8a76-e2d28cd1a13b");
-  }
-};
-const onSelected = async (id: string) => {
-  await fetchPositionNumber(id);
-};
-const fetchPositionNumber = async (id: string) => {
-  showLoader();
-  await http
-    .get(config.API.getPositionNumberIdByOcId(id))
-    .then((res) => {
-      const data = res.data.result;
-      let option: DataOption[] = [];
-      data.map((r: DataOption) => {
-        option.push({ id: r.id.toString(), name: r.name.toString() });
-      });
-      posNoOptions.value = option;
-      posNoOptionsFilter.value = option;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-const getNumFile = ref(0);
-const editDetail = (
-  props: TableName,
-  action: "cancel" | "wait" | "waitInfo"
-) => {
-  if (action === "cancel") {
-    getNumFile.value = 0;
-    editRow.value = false;
-    modalEdit.value = false;
-    modal_right.value = true;
-    edit.value = true;
-    Name.value = props.fullName;
-  } else if (action === "wait") {
-    getNumFile.value = 1;
-    editRow.value = false;
-    modalEdit.value = true;
-    modal_right.value = true;
-    edit.value = true;
-    Name.value = props.fullName;
-  } else if (action === "waitInfo") {
-    getNumFile.value = 1;
-    editRow.value = false;
-    modalEdit.value = true;
-    modalwaitInfo.value = true;
-    edit.value = true;
-    Name.value = props.fullName;
-  }
-};
-placementData.mappingPosition.columns.length == 0
-  ? (visibleColumns.value = [
-    "position",
-    "Name",
-    "ExamOrder",
-    "Unit",
-    "ReportingDate",
-    "BMAOfficer",
-    "Status",
-    "checkList",
-  ])
-  : (visibleColumns.value = placementData.mappingPosition.columns);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "position",
@@ -377,62 +77,60 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "Name",
+    name: "fullName",
     align: "left",
     label: "ชื่อ-สกุล",
     sortable: true,
-    field: "Name",
+    field: "fullName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "ExamOrder",
+    name: "number",
     align: "center",
     label: "ลำดับที่สอบได้",
     sortable: true,
-    field: "ExamOrder",
+    field: "number",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "Unit",
+    name: "organizationName",
     align: "left",
     label: "หน่วยงานที่รับการบรรจุ",
     sortable: true,
-    field: "Unit",
+    field: "organizationName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "ReportingDate",
+    name: "reportingDate",
     align: "left",
     label: "วันที่รายงานตัว",
     sortable: true,
-    field: "ReportingDate",
+    field: "reportingDate",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "BMAOfficer",
+    name: "bmaOfficer",
     align: "left",
     label: "สถานภาพ",
     sortable: true,
-    field: "BMAOfficer",
+    field: "bmaOfficer",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "Status",
+    name: "statusName",
     align: "left",
     label: "สถานะการบรรจุ",
     sortable: true,
-    field: "Status",
+    field: "statusName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -440,520 +138,184 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
-const rows = ref<TableName[]>([
-  {
-    profileID: "4016500103241",
-    position: 1,
-    fullName: "นางสาวกัณฐิมา กาฬสินธุ์",
-    dateOfBirth: "17 ก.พ. 2535",
-    gender: "หญิง",
-    ExamOrder: 1,
-    unitId: "",
-    UnitGroup: "",
-    Unit: "",
-    ReportingDate: "-", //วันที่รายงานตัว
-    BMAOfficer: "ขรก.กทม. สามัญ",
-    Status: "สละสิทธิ์",
-    checkList: null,
-    address:
-      "200/88 ซอยศาลายา3 ถนนพุทธมณฑลสาย4 แขวงศาลายา เขตพุทธมณฑล อำเภอพุทธมณฑล จังหวัดนครปฐม 73170",
-    university: "มหาวิทยาลัยบูรพา",
-    degree: "การศึกษาบัณฑิต",
-    major: "เทคโนโลยีการศึกษา",
-    remark: "-",
-    number: 3,
-    examCount: 5,
-    scoreResult: {
-      scoreAFull: 200,
-      scoreA: 133,
-      scoreBFull: 200,
-      scoreB: 149,
-      scoreCFull: 100,
-      scoreC: 0,
-      scoreSumFull: 500,
-      scoreSum: 282,
-      examResult: "ผ่าน",
-    },
-  },
-  {
-    profileID: "4016500092355",
-    position: 2,
-    fullName: "นางสาวรัชภรณ์ ภักดี",
-    dateOfBirth: "17 ก.พ. 2535",
-    gender: "หญิง",
-    ExamOrder: 2,
-    unitId: "",
-    UnitGroup: "",
-    Unit: "",
-    ReportingDate: "", //วันที่รายงานตัว
-    BMAOfficer: "บุคคลภายนอก",
-    Status: "ยังไม่บรรจุ",
-    checkList: null,
-    address:
-      "200/88 ซอยศาลายา3 ถนนพุทธมณฑลสาย4 แขวงศาลายา เขตพุทธมณฑล อำเภอพุทธมณฑล จังหวัดนครปฐม 73170",
-    university: "มหาวิทยาลัยบูรพา",
-    degree: "การศึกษาบัณฑิต",
-    major: "เทคโนโลยีการศึกษา",
-    remark: "-",
-    number: 3,
-    examCount: 5,
-    scoreResult: {
-      scoreAFull: 200,
-      scoreA: 133,
-      scoreBFull: 200,
-      scoreB: 149,
-      scoreCFull: 100,
-      scoreC: 0,
-      scoreSumFull: 500,
-      scoreSum: 282,
-      examResult: "ผ่าน",
-    },
-  },
-  {
-    profileID: "4016500086436",
-    position: 3,
-    fullName: "นางสาวภาพรรณ ลออ",
-    dateOfBirth: "17 ก.พ. 2535",
-    gender: "หญิง",
-    ExamOrder: 3,
-    unitId: "",
-    UnitGroup: "",
-    Unit: "",
-    ReportingDate: "", //วันที่รายงานตัว
-    BMAOfficer: "ลูกจ้างชั่วคราว",
-    Status: "ยังไม่บรรจุ",
-    checkList: null,
-    address:
-      "200/88 ซอยศาลายา3 ถนนพุทธมณฑลสาย4 แขวงศาลายา เขตพุทธมณฑล อำเภอพุทธมณฑล จังหวัดนครปฐม 73170",
-    university: "มหาวิทยาลัยบูรพา",
-    degree: "การศึกษาบัณฑิต",
-    major: "เทคโนโลยีการศึกษา",
-    remark: "-",
-    number: 3,
-    examCount: 5,
-    scoreResult: {
-      scoreAFull: 200,
-      scoreA: 133,
-      scoreBFull: 200,
-      scoreB: 149,
-      scoreCFull: 100,
-      scoreC: 0,
-      scoreSumFull: 500,
-      scoreSum: 282,
-      examResult: "ผ่าน",
-    },
-  },
+const getTable = async () => {
+  showLoader();
+  await http
+    .get(config.API.redirectToPage(examIdString))
+    .then((res: any) => {
+      const dataArray: PartialTableName[] = res.data.result;
+      rows.value = []
+      dataArray.map((data) => {
+        const rowData = {
+          personalId: data.personalId,
+          idCard: data.idCard,
+          fullName: data.fullName,
+          profilePhoto: data.profilePhoto,
+          organizationName: data.organizationName,
+          organizationShortName: data.organizationShortName,
+          positionNumber: data.positionNumber,
+          positionPath: data.positionPath,
+          reportingDate: dateText(new Date(data.reportingDate)),
+          number: data.number,
+          bmaOfficer: data.bmaOfficer == 'OFFICER' ? 'ขรก.กทม. สามัญ' : data.bmaOfficer == 'EMPLOYEE_PERM' ? 'ลูกจ้างประจำ' : data.bmaOfficer == 'EMPLOYEE_TEMP' ? 'ลูกจ้างชั่วคราว' : data.bmaOfficer == null ? 'บุคคลภายนอก' : '-',
+          statusId: data.statusId,
+          statusName: data.statusId == 'UN-CONTAIN' ? 'ยังไม่บรรจุ' : data.statusId == 'PREPARE-CONTAIN' ? 'เตรียมบรรจุ' : data.statusId == 'CONTAIN' ? 'บรรจุแล้ว' : data.statusId == 'DISCLAIM' ? 'สละสิทธิ์' : '-',
+          deferment: data.deferment,
+        };
 
-  {
-    profileID: "4016500073585",
-    position: 4,
-    fullName: "นางกติมา พนมเทียน",
-    dateOfBirth: "17 ก.พ. 2535",
-    gender: "หญิง",
-    ExamOrder: 4,
-    unitId: "",
-    UnitGroup: "กลุ่มงานช่วยนักบริหาร (กบห.)",
-    Unit: "นักทรัพยากรบุคคล (กบห.1)",
-    ReportingDate: "2023-05-30", //วันที่รายงานตัว
-    BMAOfficer: "ลูกจ้างประจำ",
-    Status: "เตรียมบรรจุ",
-    checkList: null,
-    address:
-      "200/88 ซอยศาลายา3 ถนนพุทธมณฑลสาย4 แขวงศาลายา เขตพุทธมณฑล อำเภอพุทธมณฑล จังหวัดนครปฐม 73170",
-    university: "มหาวิทยาลัยบูรพา",
-    degree: "การศึกษาบัณฑิต",
-    major: "เทคโนโลยีการศึกษา",
-    remark: "-",
-    number: 3,
-    examCount: 5,
-    scoreResult: {
-      scoreAFull: 200,
-      scoreA: 133,
-      scoreBFull: 200,
-      scoreB: 149,
-      scoreCFull: 100,
-      scoreC: 0,
-      scoreSumFull: 500,
-      scoreSum: 282,
-      examResult: "ผ่าน",
-    },
-  },
-
-  {
-    profileID: "4016500053234",
-    position: 5,
-    fullName: "นางสาววิยฎา ทองเอียด",
-    dateOfBirth: "17 ก.พ. 2535",
-    gender: "หญิง",
-    ExamOrder: 5,
-    unitId: "",
-    UnitGroup: "กลุ่มงานช่วยนักบริหาร (กบห.)",
-    Unit: "นักทรัพยากรบุคคล (กบห.2)",
-    ReportingDate: "2023-05-30", //วันที่รายงานตัว
-    BMAOfficer: "ขรก.กทม. สามัญ",
-    Status: "เตรียมบรรจุ",
-    checkList: null,
-    address:
-      "200/88 ซอยศาลายา3 ถนนพุทธมณฑลสาย4 แขวงศาลายา เขตพุทธมณฑล อำเภอพุทธมณฑล จังหวัดนครปฐม 73170",
-    university: "มหาวิทยาลัยบูรพา",
-    degree: "การศึกษาบัณฑิต",
-    major: "เทคโนโลยีการศึกษา",
-    remark: "-",
-    number: 3,
-    examCount: 5,
-    scoreResult: {
-      scoreAFull: 200,
-      scoreA: 133,
-      scoreBFull: 200,
-      scoreB: 149,
-      scoreCFull: 100,
-      scoreC: 0,
-      scoreSumFull: 500,
-      scoreSum: 282,
-      examResult: "ผ่าน",
-    },
-  },
-  {
-    profileID: "4016500042345",
-    position: 6,
-    fullName: "นายศรุณ เจริญเมือง",
-    dateOfBirth: "17 ก.พ. 2535",
-    gender: "ชาย",
-    ExamOrder: 6,
-    unitId: "",
-    UnitGroup: "กลุ่มงานช่วยนักบริหาร (กบห.)",
-    Unit: "นักทรัพยากรบุคคล (กบห.3)",
-    ReportingDate: "2023-05-30", //วันที่รายงานตัว
-    BMAOfficer: "บุคคลภายนอก",
-    Status: "เตรียมบรรจุ",
-    checkList: null,
-    address:
-      "200/88 ซอยศาลายา3 ถนนพุทธมณฑลสาย4 แขวงศาลายา เขตพุทธมณฑล อำเภอพุทธมณฑล จังหวัดนครปฐม 73170",
-    university: "มหาวิทยาลัยบูรพา",
-    degree: "การศึกษาบัณฑิต",
-    major: "เทคโนโลยีการศึกษา",
-    remark: "-",
-    number: 3,
-    examCount: 5,
-    scoreResult: {
-      scoreAFull: 200,
-      scoreA: 133,
-      scoreBFull: 200,
-      scoreB: 149,
-      scoreCFull: 100,
-      scoreC: 0,
-      scoreSumFull: 500,
-      scoreSum: 282,
-      examResult: "ผ่าน",
-    },
-  },
-  {
-    profileID: "401650002245",
-    position: 7,
-    fullName: "นายอภินัน บอบู่",
-    dateOfBirth: "17 ก.พ. 2535",
-    gender: "ชาย",
-    ExamOrder: 7,
-    unitId: "",
-    UnitGroup: "กลุ่มงานช่วยนักบริหาร (กบห.)",
-    Unit: "นักทรัพยากรบุคคล (กบห.4)",
-    ReportingDate: "2023-05-30", //วันที่รายงานตัว
-    BMAOfficer: "ขรก.กทม. สามัญ",
-    Status: "บรรจุเเล้ว",
-    checkList: null,
-    address:
-      "200/88 ซอยศาลายา3 ถนนพุทธมณฑลสาย4 แขวงศาลายา เขตพุทธมณฑล อำเภอพุทธมณฑล จังหวัดนครปฐม 73170",
-    university: "มหาวิทยาลัยบูรพา",
-    degree: "การศึกษาบัณฑิต",
-    major: "เทคโนโลยีการศึกษา",
-    remark: "-",
-    number: 3,
-    examCount: 5,
-    scoreResult: {
-      scoreAFull: 200,
-      scoreA: 133,
-      scoreBFull: 200,
-      scoreB: 149,
-      scoreCFull: 100,
-      scoreC: 0,
-      scoreSumFull: 500,
-      scoreSum: 282,
-      examResult: "ผ่าน",
-    },
-  },
-  // {
-  //   profileID: "401650002245",
-  //   position: 7,
-  //   fullName: "นายอภินัน บอบู่",
-  //   dateOfBirth: "17 ก.พ. 2535",
-  //   gender: "ชาย",
-  //   ExamOrder: 7,
-  //   unitId: "",
-  //   UnitGroup: "กลุ่มงานช่วยนักบริหาร (กบห.)",
-  //   Unit: "นักทรัพยากรบุคคล (กบห.4)",
-  //   ReportingDate: "2023-05-30", //วันที่รายงานตัว
-  //   BMAOfficer: "ลูกจ้างชั่วคราว",
-  //   Status: "ขอผ่อนผัน",
-  //   checkList: null,
-  //   address:
-  //     "200/88 ซอยศาลายา3 ถนนพุทธมณฑลสาย4 แขวงศาลายา เขตพุทธมณฑล อำเภอพุทธมณฑล จังหวัดนครปฐม 73170",
-  //   university: "มหาวิทยาลัยบูรพา",
-  //   degree: "การศึกษาบัณฑิต",
-  //   major: "เทคโนโลยีการศึกษา",
-  //   remark: "-",
-  //   number: 3,
-  //   examCount: 5,
-  //   scoreResult: {
-  //     scoreAFull: 200,
-  //     scoreA: 133,
-  //     scoreBFull: 200,
-  //     scoreB: 149,
-  //     scoreCFull: 100,
-  //     scoreC: 0,
-  //     scoreSumFull: 500,
-  //     scoreSum: 282,
-  //     examResult: "ผ่าน",
-  //   },
-  // },
-]);
-
-const refOptions = ref<DataOption[]>([
-  {
-    id: "0",
-    name: "****************  ครู  **********************",
-    disable: true,
-  },
-  {
-    id: "1",
-    name: "บรรจุและแต่งตั้งผู้ผ่านการคัดเลือกได้วุฒิ  {วุฒิ} คำสั่ง กทม. ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "2",
-    name: "เลื่อนเงินเดือน (1 ขั้น) คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  { id: "3", name: "ปรับอัตราเงินเดือนครู บัญชีใหม่ {พ.ศ.}" },
-  {
-    id: "4",
-    name: "ปรับให้เข้าระดับและขั้นเงินเดือนตามบัญชีอัตราเงินเดือนข้าราชการพลเรือน บัญชี ก. ท้ายพระราชบัญญัติระเบียบข้าราชการพลเรือน(ฉบับที่6) พ.ศ.{ปี}",
-  },
-  {
-    id: "5",
-    name: "ปรับอัตราเงินเดือน ตามบัญชี ข. ท้าย พ.ร.บ.ระเบียบข้าราชการพลเรือน(ฉบับที่ ) พ.ศ.{ปี}",
-  },
-  {
-    id: "6",
-    name: "ปรับเงินเดือนตาม พ.ร.บ.เงินเดือนฯ (ฉบับที่ ) {พ.ศ.} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "7",
-    name: "ปรับเงินเดือนตาม พ.ร.ฎ.การปรับเงินเดือนขั้นต่ำขั้นสูงของข้าราชการสามัญฯ {พ.ศ.}  คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "8",
-    name: "ปรับอัตราเงินเดือนตามพระราชกฤษฎีกา การปรับอัตราเงินเดือนของข้าราชการ {พ.ศ.}",
-  },
-  {
-    id: "9",
-    name: "ปรับอัตราเงินเดือนตามหนังสือ ก.ค.ศ.ด่วนมาก ที่ / ลว. 4 ธ.ค. 2555 (ปรับตามคุณวุฒิ) คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "10",
-    name: "แต่งตั้งข้าราชการ คำสั่ง คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "11",
-    name: "การแต่งตั้งข้าราชการสามัญ กทม.ฯ ตาม พรฎ.ระเบียบข้าราชการสามัญ กทม. พ.ศ. ดำรงตำแหน่งฯ ตาม พรบ.ระเบียบข้าราชการกทม.ฯ พ.ศ. คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "12",
-    name: "แต่งตั้งครูผู้ช่วยให้ดำรงตำแหน่งครู คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "13",
-    name: "ได้รับเงินเดือนสูงกว่าหรือต่ำกว่าขั้นต่ำฯ คำสั่ง กทม. ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "14",
-    name: "ได้รับเงินเดือนสูงกว่าขั้นสูงของอันดับและเลื่อนขั้นเงินเดือน คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "15",
-    name: "ให้ข้าราชการสามัญ กทม. มีวิทยฐานะ {วิทยฐานะ} และรับเงินเดือนอันดับ {คศ.} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  { id: "16", name: "มาตรา 9 แห่ง พรฎ.ระเบียบข้าราชการสามัญ กทม. {พ.ศ}" },
-  {
-    id: "21",
-    name: "****************  ลูกจ้าง  **********************",
-    disable: true,
-  },
-  {
-    id: "22",
-    name: "จ้างและแต่งตั้งลูกจ้างประจำ คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "23",
-    name: "เลื่อนค่าจ้างตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "24",
-    name: "ได้รับอัตราค่าจ้างสูงกว่าอัตราค่าจ้างขั้นสูงของตำแหน่งที่ได้รับแต่งตั้งในแต่ละระดับ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "25",
-    name: "แก้ไขคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "26",
-    name: "ยกเลิกคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "27",
-    name: "แต่งตั้งลูกจ้างประจำตามมาตรฐานกำหนดตำแหน่งฯ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "28",
-    name: "แต่งตั้งลูกจ้างประจำ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  { id: "29", name: "ไม่เลื่อนขั้นค่าจ้าง เนื่องจาก" },
-  {
-    id: "30",
-    name: "ได้รับเงินตอบแทนพิเศษร้อยละ {} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "31",
-    name: "ปรับอัตราค่าจ้างลูกจ้างประจำกรุงเทพมหานคร ตามข้อบังคับกรุงเทพมหานครว่าด้วยการกำหนดอัตราค่าจ้างขั้นต่ำสุดและสูงสุดของลูกจ้าง พ.ศ. 2557",
-  },
-  {
-    id: "32",
-    name: "ปรับอัตราค่าจ้างลูกจ้างประจำกรุงเทพมหานครตามข้อบังคับกรุงเทพมหานครว่าด้วยการกำหนดอัตราค่าจ้างขั้นต่ำสุดและสูงสุดของลูกจ้าง (ฉบับที่ {}) พ.ศ. 2557",
-  },
-  {
-    id: "33",
-    name: "ปรับอัตราค่าจ้าง ตามหนังสือกระทรวงการคลังฯ ที่ กค 0428/ว 47 ลว. 29 พ.ค. 2558 และข้อบังคับ กทม. ว่าด้วยการกำหนดอัตราค่าจ้างฯ ตั้งแต่วันที่ 1 ธ.ค. 2557 ข้อ {} ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-]);
-const refOptionsFilter = ref<DataOption[]>([
-  {
-    id: "0",
-    name: "****************  ครู  **********************",
-    disable: true,
-  },
-  {
-    id: "1",
-    name: "บรรจุและแต่งตั้งผู้ผ่านการคัดเลือกได้วุฒิ  {วุฒิ} คำสั่ง กทม. ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "2",
-    name: "เลื่อนเงินเดือน (1 ขั้น) คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  { id: "3", name: "ปรับอัตราเงินเดือนครู บัญชีใหม่ {พ.ศ.}" },
-  {
-    id: "4",
-    name: "ปรับให้เข้าระดับและขั้นเงินเดือนตามบัญชีอัตราเงินเดือนข้าราชการพลเรือน บัญชี ก. ท้ายพระราชบัญญัติระเบียบข้าราชการพลเรือน(ฉบับที่6) พ.ศ.{ปี}",
-  },
-  {
-    id: "5",
-    name: "ปรับอัตราเงินเดือน ตามบัญชี ข. ท้าย พ.ร.บ.ระเบียบข้าราชการพลเรือน(ฉบับที่ ) พ.ศ.{ปี}",
-  },
-  {
-    id: "6",
-    name: "ปรับเงินเดือนตาม พ.ร.บ.เงินเดือนฯ (ฉบับที่ ) {พ.ศ.} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "7",
-    name: "ปรับเงินเดือนตาม พ.ร.ฎ.การปรับเงินเดือนขั้นต่ำขั้นสูงของข้าราชการสามัญฯ {พ.ศ.}  คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "8",
-    name: "ปรับอัตราเงินเดือนตามพระราชกฤษฎีกา การปรับอัตราเงินเดือนของข้าราชการ {พ.ศ.}",
-  },
-  {
-    id: "9",
-    name: "ปรับอัตราเงินเดือนตามหนังสือ ก.ค.ศ.ด่วนมาก ที่ / ลว. 4 ธ.ค. 2555 (ปรับตามคุณวุฒิ) คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "10",
-    name: "แต่งตั้งข้าราชการ คำสั่ง คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "11",
-    name: "การแต่งตั้งข้าราชการสามัญ กทม.ฯ ตาม พรฎ.ระเบียบข้าราชการสามัญ กทม. พ.ศ. ดำรงตำแหน่งฯ ตาม พรบ.ระเบียบข้าราชการกทม.ฯ พ.ศ. คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "12",
-    name: "แต่งตั้งครูผู้ช่วยให้ดำรงตำแหน่งครู คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "13",
-    name: "ได้รับเงินเดือนสูงกว่าหรือต่ำกว่าขั้นต่ำฯ คำสั่ง กทม. ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "14",
-    name: "ได้รับเงินเดือนสูงกว่าขั้นสูงของอันดับและเลื่อนขั้นเงินเดือน คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "15",
-    name: "ให้ข้าราชการสามัญ กทม. มีวิทยฐานะ {วิทยฐานะ} และรับเงินเดือนอันดับ {คศ.} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  { id: "16", name: "มาตรา 9 แห่ง พรฎ.ระเบียบข้าราชการสามัญ กทม. {พ.ศ}" },
-  {
-    id: "21",
-    name: "****************  ลูกจ้าง  **********************",
-    disable: true,
-  },
-  {
-    id: "22",
-    name: "จ้างและแต่งตั้งลูกจ้างประจำ คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "23",
-    name: "เลื่อนค่าจ้างตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "24",
-    name: "ได้รับอัตราค่าจ้างสูงกว่าอัตราค่าจ้างขั้นสูงของตำแหน่งที่ได้รับแต่งตั้งในแต่ละระดับ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "25",
-    name: "แก้ไขคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "26",
-    name: "ยกเลิกคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "27",
-    name: "แต่งตั้งลูกจ้างประจำตามมาตรฐานกำหนดตำแหน่งฯ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "28",
-    name: "แต่งตั้งลูกจ้างประจำ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  { id: "29", name: "ไม่เลื่อนขั้นค่าจ้าง เนื่องจาก" },
-  {
-    id: "30",
-    name: "ได้รับเงินตอบแทนพิเศษร้อยละ {} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-  {
-    id: "31",
-    name: "ปรับอัตราค่าจ้างลูกจ้างประจำกรุงเทพมหานคร ตามข้อบังคับกรุงเทพมหานครว่าด้วยการกำหนดอัตราค่าจ้างขั้นต่ำสุดและสูงสุดของลูกจ้าง พ.ศ. 2557",
-  },
-  {
-    id: "32",
-    name: "ปรับอัตราค่าจ้างลูกจ้างประจำกรุงเทพมหานครตามข้อบังคับกรุงเทพมหานครว่าด้วยการกำหนดอัตราค่าจ้างขั้นต่ำสุดและสูงสุดของลูกจ้าง (ฉบับที่ {}) พ.ศ. 2557",
-  },
-  {
-    id: "33",
-    name: "ปรับอัตราค่าจ้าง ตามหนังสือกระทรวงการคลังฯ ที่ กค 0428/ว 47 ลว. 29 พ.ค. 2558 และข้อบังคับ กทม. ว่าด้วยการกำหนดอัตราค่าจ้างฯ ตั้งแต่วันที่ 1 ธ.ค. 2557 ข้อ {} ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
-  },
-]);
-const itemtest = ref<object>({});
-
-const openAppointModal = (value: any) => {
-  appointModal.value = true;
-  editRow.value = false;
+        rows.value.push(rowData);
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
 };
 
+const appointModal = ref<boolean>(false);
+
+const saveDeferment = async () => {
+  myForm.value.validate().then(async (result: boolean) => {
+    if (result) {
+      showLoader()
+      const formData = new FormData();
+      formData.append("personalId", personalId.value);
+      formData.append("note", userNote.value);
+      formData.append("files", files.value[0]);
+
+      await http
+        .post(config.API.deferment(), formData)
+        .then((res) => {
+          success($q, "บันทึกสำเร็จ");
+        })
+        .catch((e) => {
+          console.log(e);
+        })
+        .finally(async () => {
+          await getTable();
+          props.statCard();
+          userNote.value = ""
+          modalDefermentDisclaim.value = false;
+          hideLoader();
+        });
+    }
+  });
+};
+
+const saveDisclaim = async () => {
+  myForm.value.validate().then(async (result: boolean) => {
+    if (result) {
+      showLoader()
+      const dataPost = {
+        note: userNote.value,
+        personId: personalId.value,
+      };
+
+      // console.log("save disclaim===>", dataPost);
+
+      await http
+        .post(config.API.disclaimF(), {
+          note: dataPost.note,
+          personalId: dataPost.personId,
+        })
+        .then(() => { success($q, "บันทึกสำเร็จ"); })
+        .finally(async () => {
+          await getTable();
+          props.statCard();
+          userNote.value = ""
+          modalDefermentDisclaim.value = false;
+          hideLoader();
+        });
+    }
+  });
+};
+
+const clickEditRow = () => {
+  editRow.value = true;
+};
+
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer ": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+
+const selectData = (pid: string) => {
+  if (roleAdmin.value === true) {
+    personalId.value = pid
+    modal.value = true;
+  } else {
+    router.push("/placement/detail/" + pid);
+  }
+};
+
+const getNumFile = ref(0);
+const dataInfo = reactive({
+  reason: "",
+  reliefDoc: ""
+});
+
+const editDetail = (
+  props: PartialTableName,
+  action: "disclaim" | "deferment" | "defermentInfo" | "disclaimInfo"
+) => {
+  Name.value = props.fullName;
+  personalId.value = props.personalId;
+  editRow.value = false;
+  edit.value = true;
+
+  if (action === "disclaim") {
+    getNumFile.value = 0;
+    modalDisclaim.value = true;
+    modalDefermentDisclaim.value = true;
+  } else if (action === "deferment") {
+    getNumFile.value = 1;
+    modalDisclaim.value = false;
+    modalDefermentDisclaim.value = true;
+  } else if (action === "defermentInfo") {
+
+    http
+      .get(config.API.placementDefermentInfo(props.personalId))
+      .then((res: any) => {
+        dataInfo.reason = res.data.result.reliefReason;
+        dataInfo.reliefDoc = res.data.result.reliefDoc
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        modalDisclaim.value = false;
+        modalwaitInfo.value = true;
+      });
+  } else if (action === "disclaimInfo") {
+    http
+      .get(config.API.placementDisclaimInfo(props.personalId))
+      .then((res: any) => {
+        dataInfo.reason = res.data.result.rejectReason;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        modalDisclaim.value = true;
+        modalwaitInfo.value = true;
+      });
+  }
+};
+
+const openAppointModal = (pid: string) => {
+  appointModal.value = true;
+  personalId.value = pid;
+};
+
+const clickCloseModalTree = async () => {
+  await getTable();
+  appointModal.value = false
+}
+
 const validateData = async () => {
   checkValidate.value = true;
   await myForm.value.validate().then((result: boolean) => {
@@ -962,23 +324,9 @@ const validateData = async () => {
     }
   });
 };
-const posNoF = posNoOptions.value.filter(
-  (r: DataOption) => r.id == posNoId.value
-);
-if (posNoF.length > 0) {
-  salaryClass.value = salaryClass.value + `เลขที่ตำแหน่ง${posNoF[0].name} `;
-}
+
 const clickClose = async () => {
-  positionTypeId.value = "";
-  positionLineId.value = "";
-  positionLevelId.value = "";
-  amount.value = "";
-  positionSalaryAmount.value = "";
-  positionPathSideId.value = "";
-  positionId.value = "";
-  posNoId.value = "";
-  positionMasterUserNote.value = "";
-  mouthSalaryAmount.value = "";
+  userNote.value = "";
   if (editRow.value == true) {
     $q.dialog({
       title: `ข้อมูลมีการแก้ไข`,
@@ -987,436 +335,223 @@ const clickClose = async () => {
       ok: "ยืนยัน",
       persistent: true,
     }).onOk(async () => {
-      positionTypeId.value = "";
-      positionLineId.value = "";
-      positionLevelId.value = "";
-      amount.value = "";
-      positionSalaryAmount.value = "";
-      positionPathSideId.value = "";
-      positionId.value = "";
-      posNoId.value = "";
-      positionMasterUserNote.value = "";
-      mouthSalaryAmount.value = "";
-      modal_right.value = false;
+      modalDefermentDisclaim.value = false;
       modalwaitInfo.value = false;
       modal.value = false;
       files.value = null;
-      appointModal.value = false;
     });
   } else {
-    modal_right.value = false;
+    modalDefermentDisclaim.value = false;
     modalwaitInfo.value = false;
     modal.value = false;
-    appointModal.value = false;
   }
 };
-const manageApiErrorMsg = (catchE: any) => {
-  if (catchE.response.status == 404 || catchE.response.data.status == 404) {
-    return;
-  } else {
-    messageError($q, catchE);
-  }
-};
-const save = () => {
-  console.log("rows===>", rows.value);
-};
+
 onMounted(async () => {
   if (keycloak.tokenParsed != null) {
     roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
-    console.log("roleAdmin===>", roleAdmin)
-
-
+    console.log("roleAdmin===>", roleAdmin);
   }
-
-  await fetchPosition();
-  await nodeTree();
-  // await fetchData();
+  await getTable();
 });
-const fetchChildrenByParentId = async (node: any) => {
-  console.log("Call API4");
-  showLoader();
-  let request = "";
-
-  request = config.API.getTreeNode(node.organizationId, node.keyId);
-
-  await http
-    .get(request)
-    .then((res) => {
-      console.log(res.data.result);
-      node.children = res.data.result;
-    })
-    .catch((e) => {
-      manageApiErrorMsg(e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-const onLazyLoad = (node: any) => {
-  setTimeout(async () => {
-    console.log("Call LazyLoad");
-    await fetchChildrenByParentId(node.node);
-    node.done(node.node.children); //return ค่าให้ q-tree generate children
-  }, 10);
-};
-const listKeyId = (data: any) => {
-  const { node } = data;
-  console.log("test", node);
-  posNoId.value = node.positionNum;
-  positionId.value = node.positionName;
-  positionPathSideId.value = node.executivePositionSide;
-  positionTypeId.value = node.positionType;
-  positionLineId.value = node.organizationName;
-  positionLevelId.value = node.positionLevel;
-  positionLevelOptions.value = node.positionLevel.split(",");
-  return {
-    keyId: node.keyId,
-    optionsLevel: positionLevelOptions.value,
-  };
-};
 
 const expiredAccount = ref<boolean>(false);
 
-
 watch(expiredAccount, () => {
   console.log("expiredAccount===>", expiredAccount.value);
 });
+
+const pagination = ref({
+  sortBy: "number",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
 </script>
+
 <template>
-  <!-- <q-form ref="myForm"> -->
-  <Table :expired-account="expiredAccount" :rows="rows" :columns="columns" :filter="filter"
-    :visible-columns="visibleColumns" v-model:inputfilter="filter" v-model:inputvisible="visibleColumns"
-    v-model:editvisible="editvisible" v-model:expiredaccountfilter="expiredAccount" :history="true" :boss="true"
-    :saveNoDraft="true" :add="save" :role-admin="roleAdmin">
-    <template #columns="props">
-      <q-tr :props="props">
-        <q-icon class="q-mr-sm" size="15px" color="primary" name="mdi-bookmark" v-if="props.row.isDirector"></q-icon>
+                                <q-form ref="myForm">
+                                      <Table :expired-account="expiredAccount" :rows="rows" :columns="columns" :filter="filter"
+                                        :visible-columns="visibleColumns" v-model:inputfilter="filter" v-model:inputvisible="visibleColumns"
+                                        v-model:editvisible="editvisible" v-model:expiredaccountfilter="expiredAccount" :history="true" :boss="true"
+                                        :saveNoDraft="true" :role-admin="roleAdmin">
+                                        <template #columns="props">
+                                          <q-tr :props="props">
+                                            <q-td v-for="col in props.cols" :key="col.name" :props="props" @click="selectData(props.row.personalId)"
+                                              class="cursor-pointer">
+                                              <template v-if="col.name === 'position'">
+                                                {{ props.rowIndex + 1 }}
+                                              </template>
+                                              <template v-else-if="col.name === 'fullName'" class="table_ellipsis">
+                                                <div class="row col-12 text-no-wrap items-center">
+                                                  <img v-if="props.row.avatar == null" src="@/assets/avatar_user.jpg" class="col-4 img-info" />
+                                                  <img v-else :src="props.row.avatar" class="col-4 img-info" />
+                                                  <div class="col-4">
+                                                    <div class="text-weight-medium">{{ props.row.fullName }}</div>
+                                                    <div class="text-weight-light">{{ props.row.idCard }}</div>
+                                                  </div>
+                                                </div>
+                                              </template>
+                                              <template v-else-if="col.name === 'number'">
+                                                <div class="text-weight-medium">
+                                                  {{ props.row.number !== null ? props.row.number : "-" }}
+                                                </div>
+                                              </template>
 
-        <q-td v-for="col in props.cols" :key="col.name" :props="props" @click="selectData(props.row)"
-          class="cursor-pointer">
-          <div v-if="col.name == 'Name'" class="table_ellipsis">
-            {{ col.value }}
-            <div class="row col-12 text-no-wrap items-center">
-              <img v-if="props.row.avatar == null" src="@/assets/avatar_user.jpg" class="col-4 img-info" />
-              <img v-else :src="props.row.avatar" class="col-4 img-info" />
-              <div class="col-4">
-                <div class="text-weight-medium">
-                  {{ props.row.fullName }}
-                </div>
-                <div class="text-weight-light">
-                  {{ props.row.profileID }}
-                </div>
-              </div>
-            </div>
-          </div>
-          <div v-else-if="col.name == 'Unit'" class="table_ellipsis">
-            <div v-if="props.row.Status == 'ยังไม่บรรจุ' ||
-              props.row.Status == 'สละสิทธิ์'
-              ">
-              -
-            </div>
-            <div v-else>
-              {{ props.row.UnitGroup }}
-              <p>{{ col.value }}</p>
-            </div>
-          </div>
-          <div v-else-if="col.name == 'ReportingDate' && col.value != '-'" class="table_ellipsis">
-            {{ mixin.date2Thai(col.value) }}
-          </div>
-          <div v-else class="table_ellipsis">
-            {{ col.value }}
-          </div>
-        </q-td>
-        <q-td auto-width>
-          <q-btn v-if="props.row.Status !== 'สละสิทธิ์' &&
-            props.row.Status !== 'บรรจุเเล้ว'
-            " icon="mdi-dots-vertical" size="12px" color="grey-7" flat round dense>
-            <q-menu transition-show="jump-down" transition-hide="jump-up">
-              <q-list dense style="min-width: 100px">
-                <q-item v-if="roleAdmin === true && props.row.Status === 'ยังไม่บรรจุ'" clickable v-close-popup
-                  @click="openAppointModal">
-                  <q-item-section style="min-width: 0px" avatar class="q-py-sm">
-                    <q-icon color="primary" size="xs" name="mdi-bookmark-outline" />
-                  </q-item-section>
-                  <q-item-section>เลือกหน่วยงานที่รับบรรจุ</q-item-section>
-                </q-item>
-                <q-separator />
-                <q-item v-if="roleAdmin === true && props.row.Status === 'ยังไม่บรรจุ'" clickable v-close-popup
-                  @click="editDetail(props.row, 'wait')">
-                  <q-item-section style="min-width: 0px" avatar class="q-py-sm">
-                    <q-icon color="blue" size="xs" name="mdi-account-alert-outline" />
-                  </q-item-section>
-                  <q-item-section>ขอผ่อนผัน</q-item-section>
-                </q-item>
-                <q-item v-else-if="props.row.Status === 'ขอผ่อนผัน'" clickable v-close-popup
-                  @click="editDetail(props.row, 'waitInfo')">
-                  <q-item-section style="min-width: 0px" avatar class="q-py-sm">
-                    <q-icon color="blue" size="xs" name="mdi-account-details-outline" />
-                  </q-item-section>
-                  <q-item-section>ข้อมูลการผ่อนผัน</q-item-section>
-                </q-item>
-                <q-separator />
-                <q-item v-if="props.row.Status === 'ยังไม่บรรจุ' ||
-                  props.row.Status === 'เตรียมบรรจุ'
-                  " clickable v-close-popup @click="editDetail(props.row, 'cancel')">
-                  <q-item-section style="min-width: 0px" avatar class="q-py-sm">
-                    <q-icon color="pink" size="xs" name="mdi-account-cancel-outline" />
-                  </q-item-section>
-                  <q-item-section>สละสิทธิ์</q-item-section>
-                </q-item>
-              </q-list>
-            </q-menu>
-          </q-btn>
-        </q-td>
-      </q-tr>
-    </template>
-  </Table>
-  <!-- </q-form> -->
+                                              <template v-else-if="col.name === 'organizationName'">
+                                                <div v-if="props.row.organizationName !== null ||
+                                                  props.row.positionPath !== null
+                                                  ">
+                                                  <div class="col-4">
+                                                    <div class="text-weight-medium">
+                                                      {{
+                                                        props.row.organizationName !== null
+                                                        ? props.row.organizationName
+                                                        : "-"
+                                                      }}
+                                                      {{
+                                                        props.row.organizationShortName !== null
+                                                        ? `(${props.row.organizationShortName})`
+                                                        : ""
+                                                      }}
+                                                    </div>
+                                                    <div class="text-weight-light">
+                                                      {{
+                                                        props.row.positionPath !== null
+                                                        ? props.row.positionPath
+                                                        : "-"
+                                                      }}
+                                                      {{
+                                                        props.row.positionNumber !== null
+                                                        ? `(${props.row.positionNumber})`
+                                                        : ""
+                                                      }}
+                                                    </div>
+                                                  </div>
+                                                </div>
+                                                <div v-else>
+                                                  <div class="col-4">
+                                                      <div class="text-weight-medium">-</div>
+                                                    </div>
+                                                  </div>
+                                                </template>
+                                                <template v-else-if="col.name === 'reportingDate' && col.value !== '-'">
+                                                  <div class="text-weight-medium">
+                                                    {{ props.row.reportingDate }}
+                                                  </div>
+                                                </template>
+                                                <template v-else-if="col.name === 'bmaOfficer'">
+                                                  <div class="text-weight-medium">
+                                                    {{ props.row.bmaOfficer !== null ? props.row.bmaOfficer : "-" }}
+                                                  </div>
+                                                </template>
+                                                <template v-else-if="col.name === 'statusName'">
+                                                  <div class="text-weight-medium">
+                                                    {{ props.row.statusName }}
+                                                  </div>
+                                                </template>
+                                              </q-td>
+                                              <q-td auto-width>
+                                                <q-btn icon="mdi-dots-vertical" size="12px" color="grey-7" flat round dense>
+                                                  <q-menu transition-show="jump-down" transition-hide="jump-up">
+                                                    <q-list dense style="min-width: 100px">
+                                                          <q-item v-if="roleAdmin && props.row.statusId === 'UN-CONTAIN'" clickable v-close-popup
+                                                            @click="openAppointModal(props.row.personalId)">
+                                                            <q-item-section style="min-width: 0px" avatar class="q-py-sm">
+                                                              <q-icon color="primary" size="xs" name="mdi-bookmark-outline" />
+                                                            </q-item-section>
+                                                            <q-item-section>เลือกหน่วยงานที่รับบรรจุ</q-item-section>
+                                                          </q-item>
+                                                          <q-separator />
+                                                          <q-item v-if="roleAdmin && props.row.statusId === 'UN-CONTAIN'" clickable v-close-popup
+                                                            @click="editDetail(props.row, 'deferment')">
+                                                            <q-item-section style="min-width: 0px" avatar class="q-py-sm">
+                                                              <q-icon color="blue" size="xs" name="mdi-account-alert-outline" />
+                                                            </q-item-section>
+                                                            <q-item-section>ขอผ่อนผัน</q-item-section>
+                                                          </q-item>
+                                                          <q-item v-else-if="props.row.deferment === true && props.row.statusId != 'DISCLAIM'" clickable v-close-popup
+                                                            @click="editDetail(props.row, 'defermentInfo')">
+                                                            <q-item-section style="min-width: 0px" avatar class="q-py-sm">
+                                                              <q-icon color="blue" size="xs" name="mdi-account-details-outline" />
+                                                            </q-item-section>
+                                                            <q-item-section>ข้อมูลการผ่อนผัน</q-item-section>
+                                                          </q-item>
+                                                          <q-separator />
+                                                          <q-item v-if="props.row.statusId === 'UN-CONTAIN' ||
+                                                      props.row.statusId === 'PREPARE-CONTAIN'
+                                                      " clickable v-close-popup
+                                                      @click="editDetail(props.row, 'disclaim')">
+                                                      <q-item-section style="min-width: 0px" avatar class="q-py-sm">
+                                                        <q-icon color="pink" size="xs" name="mdi-account-cancel-outline" />
+                                                      </q-item-section>
+                                                      <q-item-section>สละสิทธิ์</q-item-section>
+                                                    </q-item>
+                                                    <q-item v-else-if="props.row.statusId === 'DISCLAIM'" clickable v-close-popup
+                                                      @click="editDetail(props.row, 'disclaimInfo')">
+                                                      <q-item-section style="min-width: 0px" avatar class="q-py-sm">
+                                                        <q-icon color="pink" size="xs" name="mdi-account-cancel-outline" />
+                                                      </q-item-section>
+                                                      <q-item-section>ข้อมูลการสละสิทธิ์</q-item-section>
+                                                    </q-item>
 
-  <q-dialog v-model="appointModal" persistent full-width>
-    <q-card>
-      <q-form ref="myForm">
-        <DialogHeader title="เลือกหน่วยงานที่รับบรรจุ" :close="clickClose" />
-        <q-separator />
-        <q-card-section class="q-pa-sm bg-grey-1">
-          <div class="row col-12 q-col-gutter-sm">
-            <div class="col-xs-12 col-sm-6 row">
-              <q-card flat bordered class="fit q-pa-sm">
-                <q-scroll-area visible style="height: 70vh">
-                  <q-input outlined dense v-model="search" placeholder="ค้นหา" class="q-mb-sm">
-                    <template v-slot:append>
-                      <q-icon name="mdi-magnify" />
-                    </template>
-                  </q-input>
-                  <q-tree no-transition ref="qtreeEdit" :nodes="nodesTree" node-key="keyId" @lazy-load="onLazyLoad" dense>
-                    <!--organization บรรทัดแสดงชื่อหน่วยงาน & ปุ่ม + -->
-                    <template v-slot:header-organization="prop">
-                      <div class="col">
-                        <div class="row items-center q-px-xs q-pt-xs q-gutter-sm">
-                          <!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
-                          <div class="text-weight-medium">
-                            {{ prop.node.organizationName }}
+                                                  </q-list>
+                                                </q-menu>
+                                              </q-btn>
+                                            </q-td>
+                                          </q-tr>
+                                        </template>
+                                      </Table>
+                                    </q-form>
+
+                                    <!-- เลือกหน่วยงานที่บรรจุ -->
+                                    <DialogOrgTree v-model:modal="appointModal" :personalId="personalId" :close="clickCloseModalTree" />
+
+                                    <!-- popup ขอผ่อนผัน / สละสิทธิ์ -->
+                                    <q-form ref="myForm">
+                                      <DialogCard v-model:Modal="modal" :personal-id="personalId" :close="clickClose" :validate="validateData" />
+                                    </q-form>
+                                    <q-dialog v-model="modalDefermentDisclaim" persistent>
+                                      <q-card style="width: 800px">
+                                        <q-form ref="myForm">
+                                          <DialogHeader :title="`${modalDisclaim ? 'สละสิทธิ์' : 'ขอผ่อนผัน'} ชื่อ${Name}`" :close="clickClose" />
+                                          <q-separator />
+                                          <q-card-section class="q-p-sm">
+                                            <div class="col-xs-12 col-sm-12 col-md-12">
+                                              <q-input :class="getClass(edit)" hide-bottom-space :outlined="edit" dense lazy-rules
+                                                :rules="[(val) => !!val || 'กรุณากรอกเหตุผล']" :readonly="!edit" :borderless="!edit" v-model="userNote"
+                                                :label="`${'กรอกเหตุผล'}`" @update:model-value="clickEditRow" type="textarea" />
+                                              <q-file v-if="getNumFile === 1" v-model="files" dense :label="`${'เลือกไฟล์เอกสารหลักฐาน'}`" outlined
+                                                use-chips :rules="[(val) => !!val || 'กรุณาเลือกไฟล์เอกสารหลักฐาน']" multiple
+                                                @update:model-value="clickEditRow" class="q-py-sm">
+                                                <template v-slot:prepend>
+                                                  <q-icon name="attach_file" color="primary" />
+                                                </template>
+                                              </q-file>
+                                            </div>
+                                          </q-card-section>
+                                          <q-separator />
+                                                  <DialogFooter :editvisible="true" :validate="validateData" :save="modalDisclaim ? saveDisclaim : saveDeferment" />
+                      </q-form>
+                    </q-card>
+                  </q-dialog>
+
+                  <!-- dialog ข้อมูลขอผ่อนผัน / สละสิทธิ์ -->
+                  <q-dialog v-model="modalwaitInfo" persistent>
+                    <q-card style="width: 500px; max-width: 500px">
+                      <q-form ref="myForm">
+                        <DialogHeader :title="`${modalDisclaim ? 'สละสิทธิ์' : 'ขอผ่อนผัน'} ชื่อ${Name}`" :close="clickClose" />
+                        <q-separator />
+                        <q-card-section class="q-p-sm">
+                          <div class="row">
+                            <div class="col-3 text-grey-7">เหตุผล</div>
+                            <div class="col-4">{{ dataInfo.reason }}</div>
                           </div>
-
-                          <!--แสดง Total Count PositionNum-->
-                          <q-badge rounded color="grey-2" text-color="dark" :label="prop.node.totalPositionCount" />
-                          <q-badge v-if="prop.node.totalPositionVacant > 0" rounded color="red" outline
-                            :label="prop.node.totalPositionVacant" />
-
-                          <q-space />
-                        </div>
-                        <div class="col items-center q-px-xs q-pt-xs">
-                          <div class="text-weight-medium text-grey-7">
-                            {{ prop.node.governmentCode }}
-                            {{ prop.node.organizationShortName }}
-                          </div>
-                        </div>
-                      </div>
-                    </template>
-                    <template v-slot:header-person="prop">
-                      <q-item clickable :active="clickAction === prop.node.keyId" @click="
-                        clickAction =
-                        prop.node.name == `ว่าง` ||
-                          prop.node.name == `N/A` ||
-                          prop.node.name == null
-                          ? listKeyId(prop)
-                          : ''
-                        " active-class="my-list-link text-primary text-weight-medium" :class="prop.node.name == `ว่าง` ||
-      prop.node.name == `N/A` ||
-      prop.node.name == null
-      ? 'row items-center text-dark q-py-xs q-pl-sm rounded-borders my-list'
-      : 'row items-center text-dark q-py-xs q-pl-sm rounded-borders my-list disabled'
-    ">
-                        <img v-if="prop.node.avatar == '' ||
-                          prop.node.avatar ==
-                          'https://cdn.quasar.dev/img/boy-avatar.png'
-                          " src="@/assets/avatar_user.jpg" class="col-xs-1 col-sm-2"
-                          style="width: 28px; height: 28px; border-radius: 50%" />
-                        <img v-else :src="prop.node.avatar" class="col-xs-1 col-sm-2"
-                          style="width: 28px; height: 28px; border-radius: 50%" />
-                        <!--=====ตำแหน่งว่าง สีแดง=====-->
-                        <div v-if="prop.node.name == `ว่าง` ||
-                          prop.node.name == `N/A` ||
-                          prop.node.name == null
-                          " class="q-px-sm text-weight-medium text-red">
-                          ว่าง
-                        </div>
-                        <!--=====หัวหน้า สีเขียว=====-->
-                        <div v-else-if="prop.node.positionLeaderFlag">
-                          <div class="q-px-sm text-weight-medium text-primary">
-                            {{ prop.node.name }}
-                          </div>
-                        </div>
-                        <!--=====ลูกน้อง สีปกติ=====-->
-                        <div v-else>
-                          <div class="q-px-sm text-weight-medium">
-                            {{ prop.node.name }}
-                          </div>
-                        </div>
-                        <!--ต่อท้ายชื่อคน แสดงสีปกติ-->
-                        <div class="q-pr-sm">
-                          {{ prop.node.positionName }}
-                        </div>
-                        <div class="q-pr-sm">
-                          {{ prop.node.positionNum }}
-                        </div>
-                        <div class="q-pr-sm">
-                          {{ prop.node.positionLevel }}
-                        </div>
-                        <q-icon v-if="prop.node.positionLeaderFlag" class="q-mr-sm" size="15px" color="primary"
-                          name="mdi-bookmark"></q-icon>
-
-                        <q-space />
-                      </q-item>
-                    </template>
-                  </q-tree>
-                </q-scroll-area>
-              </q-card>
-            </div>
-            <div class="col-xs-12 col-sm-6">
-              <q-card flat bordered class="fit q-pa-sm">
-                <q-scroll-area visible style="height: 70vh">
-                  <div class="row col-12 q-col-gutter-xs">
-                    <div class="col-xs-12 col-sm-12 col-md-12"></div>
-                    <div class="col-xs-6 col-sm-6 col-md-6">
-                      <datepicker menu-class-name="modalfix" :readonly="!edit" v-model="date" :locale="'th'" autoApply
-                        :enableTimePicker="false" @update:modelValue="clickEditRow" week-start="0">
-                        <template #year="{ year }">{{ year + 543 }}</template>
-                        <template #year-overlay-value="{ value }">{{
-                          parseInt(value + 543)
-                        }}</template>
-                        <template #trigger>
-                          <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :borderless="!edit"
-                            :model-value="date2Thai(date)" :rules="[
-                              (val: string) =>
-                                !!val ||
-                                `${'วันที่รายงานตัว'}`,
-                            ]" :label="`${'วันที่รายงานตัว'}`" hide-bottom-space>
-                            <template v-slot:prepend>
-                              <q-icon name="event" class="cursor-pointer" :style="edit
-                                  ? 'color: var(--q-primary)'
-                                  : 'color: var(--q-grey)'
-                                ">
-                              </q-icon>
-                            </template>
-                          </q-input>
-                        </template>
-                      </datepicker>
-                    </div>
-                    <q-space />
-                    <div class="col-xs-6 col-sm-6 col-md-6">
-                      <q-input disable standout readonly class="custom-input" dense lazy-rules v-model="posNoId"
-                        :label="`${'เลขที่ตำแหน่ง'}`" />
-                    </div>
-                    <div class="col-xs-6 col-sm-6 col-md-6">
-                      <q-input disable readonly class="custom-input" standout dense lazy-rules v-model="positionId"
-                        :label="`${'ตำแหน่ง'}`" />
-                    </div>
-                    <div class="col-xs-6 col-sm-6 col-md-6">
-                      <q-select :class="getClass(edit)" :outlined="edit" :readonly="!edit" class="custom-input" standout
-                        dense hide-bottom-space lazy-rules v-model="positionPathSideId"
-                        :rules="[(val: string) => !!val || `${'ด้าน/สาขา'}`]" :label="`${'ด้าน/สาขา'}`" />
-                    </div>
-                    <!-- :rules="[(val:string) => !!val || `${'กรุณาเลือกด้าน/สาขา'}`]" -->
-
-                    <div class="col-xs-6 col-sm-6 col-md-6">
-                      <q-input disable readonly class="custom-input" standout dense lazy-rules v-model="positionTypeId"
-                        :label="`${'ประเภทตำแหน่ง'}`" />
-                    </div>
-                    <div class="col-xs-6 col-sm-6 col-md-6">
-                      <q-input disable readonly class="custom-input" standout dense lazy-rules v-model="positionLineId"
-                        :label="`${'สายงาน'}`" />
-                    </div>
-                    <div class="col-xs-6 col-sm-6 col-md-6">
-                      <q-select :class="getClass(edit)" :outlined="edit" :readonly="!edit" class="custom-input" standout
-                        dense lazy-rules :options="positionLevelOptions" v-model="positionLevelId" :label="`${'ระดับ'}`"
-                        hide-bottom-space :rules="[(val: string) => !!val || `${'กรุณาเลือกระดับ'}`]" emit-value
-                        map-options />
-                    </div>
-                    <div class="col-sx-12 col-sm-12 col-md-12">
-                      <q-separator inset size="2px" class="q-my-md" />
-                    </div>
-                    <div class="col-xs-6 col-sm-6 col-md-6">
-                      <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
-                        :borderless="!edit" v-model="amount" :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
-                        :label="`${'เงินเดือน'}`" @update:modelValue="clickEditRow" type="number" hide-bottom-space />
-                    </div>
-
-                    <div class="col-xs-6 col-sm-6 col-md-6">
-                      <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
-                        :borderless="!edit" v-model="positionSalaryAmount" :rules="[
-                          (val) => !!val || `${'กรุณากรอกเงินประจำตำแหน่ง'}`,
-                        ]" :label="`${'เงินประจำตำแหน่ง'}`" @update:modelValue="clickEditRow" type="number"
-                        hide-bottom-space />
-                    </div>
-
-                    <div class="col-xs-6 col-sm-6 col-md-6">
-                      <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
-                        :borderless="!edit" v-model="mouthSalaryAmount" :rules="[
-                          (val) =>
-                            !!val || `${'กรุณากรอกเงินค่าตอบแทนรายเดือน'}`,
-                        ]" :label="`${'เงินค่าตอบแทนรายเดือน'}`" @update:modelValue="clickEditRow" type="number"
-                        hide-bottom-space />
-                    </div>
-                  </div>
-                </q-scroll-area>
-              </q-card>
-            </div>
-          </div>
-        </q-card-section>
-
-        <q-separator />
-        <DialogFooter v-model:editvisible="edit" :validate="validateData" v-model:modalEdit="modalEdit"
-          :save="saveAppoint" />
-      </q-form>
-    </q-card>
-  </q-dialog>
-  <q-form ref="myForm">
-    <DialogCard v-model:Modal="modal" :getdetail="itemtest" :close="clickClose" :validate="validateData" />
-  </q-form>
-  <q-dialog v-model="modal_right" persistent>
-    <q-card style="width: 800px">
-
-      <q-form ref="myForm">
-        <DialogHeader :title="`${modalEdit ? 'ขอผ่อนผัน' : 'สละสิทธิ์'} ชื่อ${Name}`" :close="clickClose" />
-        <q-separator />
-        <q-card-section class="q-p-sm">
-          <div class="col-xs-12 col-sm-12 col-md-12">
-            <q-input :class="getClass(edit)" hide-bottom-space :outlined="edit" dense lazy-rules
-              :rules="[(val) => !!val || 'กรุณากรอกเหตุผล']" :readonly="!edit" :borderless="!edit"
-              v-model="positionMasterUserNote" :label="`${'กรอกเหตุผล'}`" @update:model-value="clickEditRow"
-              type="textarea" />
-            <q-file v-if="getNumFile === 1" v-model="files" dense :label="`${'เลือกไฟล์เอกสารหลักฐาน'}`" outlined
-              use-chips :rules="[(val) => !!val || 'กรุณาเลือกไฟล์เอกสารหลักฐาน']" multiple
-              @update:model-value="clickEditRow" class="q-py-sm">
-              <template v-slot:prepend>
-                <q-icon name="attach_file" color="primary" />
-              </template>
-            </q-file>
-          </div>
-        </q-card-section>
-        <q-separator />
-        <DialogFooter v-model:editvisible="edit" v-model:modalEdit="modalEdit" :validate="validateData"
-          :save="modalEdit ? savePostpone : saveDisclaim" />
-      </q-form>
-    </q-card>
-  </q-dialog>
-
-  <!-- dialog ขอผ่อนผัน / สละสิทธิ์ -->
-  <q-dialog v-model="modalwaitInfo" persistent>
-    <q-card style="width: 500px; max-width: 500px">
-      <q-form ref="myForm">
-        <DialogHeader :title="`${modalEdit ? 'ขอผ่อนผัน' : 'สละสิทธิ์'} ชื่อ${Name}`" :close="clickClose" />
-        <q-separator />
-        <q-card-section class="q-p-sm">
-          <div class="row">
-            <div class="col-3 text-grey-7">กรอกเหตุผล</div>
-            <div class="col-4">กรอกเหตุผล</div>
-          </div>
-          <div class="row q-pt-md">
-            <div class="col-3 text-grey-7 q-mt-sm">เอกสารหลักฐาน</div>
-            <div class="col-2 q-mt-sm">กรอกเหตุผล</div>
-            <q-btn color="primary" flat dense round size="14px" icon="mdi-download" />
+                          <div v-if="!modalDisclaim" class="row q-pt-md">
+                            <div class="col-3 text-grey-7 q-mt-sm">เอกสารหลักฐาน</div>
+                            <div class="col-2 q-mt-sm">
+                              <q-btn type="a" :href="dataInfo.reliefDoc" color="primary" flat dense round size="14px" icon="mdi-download" target="_blank" />
+                            </div>
           </div>
         </q-card-section>
         <q-separator />
diff --git a/src/modules/05_placement/components/pass/TableDetail.vue b/src/modules/05_placement/components/pass/TableDetail.vue
index b031d2121..13cc86ebb 100644
--- a/src/modules/05_placement/components/pass/TableDetail.vue
+++ b/src/modules/05_placement/components/pass/TableDetail.vue
@@ -1,39 +1,40 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import DialogHeader from "@/modules/05_placement/components/pass/DialogHeader.vue";
 import { useQuasar } from "quasar";
 import DialogFooter from "@/modules/05_placement/components/pass/DialogFooter.vue";
 import type { QTableProps } from "quasar";
-import type { CheckboxItem } from "@/modules/05_placement/interface/index/Main";
 import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const modal = ref<boolean>();
-const { success } = mixin;
+const { success, showLoader, hideLoader, date2Thai, modalConfirm } = mixin;
 const save = ref<boolean>(true);
+
 const props = defineProps({
   Modal: Boolean,
   close: {
     type: Function,
     default: () => console.log("not function"),
   },
-  getdetail: {
-    type: Object,
-    required: true,
+  personalId: {
+    type: String,
+    default: ""
   },
   validate: {
     type: Function,
     default: () => console.log("not function"),
   },
 });
-const rows = ref<any[]>([
-  {
-    university: props.getdetail.university || "-",
-    degree: props.getdetail.degree || "-",
-    major: props.getdetail.major || "-",
-    graduation: "2022-01-01",
-  },
 
-]);
+const rows = ref<any[]>([
+  ]);
+//--------------------(แปลงวันที่เป็นไทย)------------------------------------//
+// const graduationDate = new Date(graduationExample);
+// rows.value[0].graduation = date2Thai(graduationDate, false, false);
+
+//--------------------------------------------------------------------//
+
 const columns = ref<QTableProps["columns"]>([
   {
     name: "university",
@@ -76,86 +77,112 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-const myForm = ref<any>();
-const checkValidate = ref<boolean>(false);
-const selection = ref<number[]>([]);
+const myForm = ref<any>([]);
+const personalForm = ref<any>([]);
+const selection = ref<any>([]);
+
 
-const checkboxItems: CheckboxItem[] = [
-  { id: 1, label: "ไม่เป็นผู้ดำรงตำแหน่งทางการเมือง" },
-  {
-    id: 2,
-    label:
-      "ไม่เป็นคนไร้ความสามารถ คนเสมือนไร้ความสามารถ คนวิกลจริตหรือจิตฟั่นเฟือน ไม่สมประกอบหรือเป็นโรคตามที่กำหนดในกฎ ก.พ.",
-  },
-  {
-    id: 3,
-    label:
-      "ไม่เป็นผู้อยู่ในระหว่างถูกสั่งพักราชการหรือถูกสั่งให้ออกจากราชการไว้ก่อนตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น",
-  },
-  { id: 4, label: "ไม่เป็นผู้บกพร่องในศีลธรรมอันดีจนเป็นที่รังเกียจของสังคม" },
-  {
-    id: 5,
-    label:
-      "ไม่เป็นกรรมการหรือผู้ดำรงตำแหน่งที่รับผิดชอบในการบริหารพรรคการเมือง หรือเจ้าหน้าที่ในพรรคการเมือง",
-  },
-  { id: 6, label: "ไม่เป็นบุคคลล้มละลาย" },
-  {
-    id: 7,
-    label:
-      "ไม่เป็นผู้เคยต้องรับโทษจำคุกโดยคำพิพากษาถึงที่สุดให้จำคุกเพราะกระทำความผิดทางอาญา เว้นแต่เป็นโทษสำหรับความผิดที่ใด้กระทำโดยประมาทหรือความผิดลหุโทษ",
-  },
-  {
-    id: 8,
-    label:
-      "ไม่เป็นผู้เคยถูกลงโทษให้ออก ปลดออก หรือไล่ออกจากรัฐวิสาหกิจ หรือ หน่วยงานอื่นของรัฐ",
-  },
-  {
-    id: 9,
-    label:
-      "เป็นผู้เคยถูลงโทษให้ออก หรือปลดออก เพราะกระทำผิตวินัยตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น",
-  },
-  {
-    id: 10,
-    label:
-      "เป็นผู้เคยถูกลงโทษไล่ออก เพราะกระทำผิดวินัยตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น",
-  },
-  {
-    id: 11,
-    label:
-      "เป็นผู้เคยกระทำการทุจริตในการสอบเข้ารับราชการ หรือเข้าปฏิบัติงานใน หน่วยงานของรัฐ",
-  },
-];
 const $q = useQuasar();
+
 function isRequired(val: any): boolean | string {
   return !!val || "กรุณาเลือกไฟล์เอกสารหลักฐาน";
 }
-const validateData = () => {
-  const selectedIds = selection.value;
-  const selectedItems = checkboxItems.filter((item) =>
-    selectedIds.includes(item.id)
-  );
 
+watch(props, () => {
+  if (props.Modal === true) {
+    // console.log(props.getdetail);
+    fetchData();
+  }
+});
+
+const validateData = () => {
+  const selectedIds = personalForm.value.isProperty;
+
+  const selectedItems = personalForm.value.isProperty.filter(
+    (item: any) => item.value === true
+    // selectedIds.includes(item.value)
+  );
   return (
-    selectedItems.length > 0 && selectedItems.length === selectedIds.length
+    selectedItems.length > 0 || selectedItems.length === selectedIds.length
   );
 };
 
 const ClickSave = () => {
   const isValid = validateData();
+
   if (isValid) {
-    console.log(selection.value);
-    console.log("rerer", props.Modal);
-    props.close();
-    props.validate();
-    selection.value = [];
+    // props.close();
+    // props.validate();
+    // putpersonalForm();
+    modalConfirm(
+      $q,
+      "การยืนยัน",
+      "ยืนยันการบันทึกการคัดกรองคุณสมบัติ",
+      putpersonalForm
+    );
   } else {
     success($q, "กรอกให้ครบ");
+    console.log();
+  }
+};
+const fetchData = async () => {
+  showLoader();
+  await http
+    .get(config.API.getDatapersonal(props.personalId))
+    .then((res) => {
+      personalForm.value = res.data.result;
+      personalForm.value.education.map((e: any) => {
+        rows.value.push({
+          university: e.name,
+          degree: e.degree,
+          major: e.field,
+          graduation: e.finishDate,
+        });
+      });
+    })
+    .catch((e) => {
+      console.log("e", e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+const formBmaofficer = (val: string) => {
+  switch (val) {
+    case "officer":
+      return "ขรก.กทม. สามัญ";
+      break;
+    case "employee_perm":
+      return "ลูกจ้างประจำ";
+      break;
+    case "employee_temp":
+      return "ลูกจ้างชั่วคราว";
+      break;
+    default:
+      "";
   }
 };
-
 const close = async () => {
   props.close();
   selection.value = [];
+  rows.value = [];
+};
+const putpersonalForm = async () => {
+  await http
+    .put(
+      config.API.putProperty("0a846508-4932-40de-9a9e-5b519492217c"),
+      personalForm.value.isProperty
+    )
+    .then((res) => {
+      success($q, res.data.message);
+    })
+    .catch((e) => {
+      console.log(e);
+    })
+    .finally(() => {
+      props.close();
+      props.validate();
+    });
 };
 </script>
 <template>
@@ -164,7 +191,7 @@ const close = async () => {
       <q-form ref="myForm">
         <div class="row">
           <DialogHeader
-            :title="`รายละเอียดของ ${props.getdetail.fullName}`"
+            :title="`รายละเอียดของ ${personalForm.fullName}`"
             @click="close"
           />
         </div>
@@ -176,7 +203,10 @@ const close = async () => {
               <div class="row items-center q-pa-xs header-text">
                 ข้อมูลทั่วไป
                 <span class="check-officer"
-                  ><q-icon name="mdi-check" /> ข้าราชการฯ กทม</span
+                  ><q-icon
+                    name="mdi-check"
+                    v-if="personalForm.bmaofficer !== null && ''"
+                  />{{ formBmaofficer(personalForm.bmaofficer) }}</span
                 >
               </div>
               <div class="row q-pa-xs">
@@ -186,10 +216,10 @@ const close = async () => {
                 </div>
                 <div class="col-4 sub-text">
                   <div class="q-pb-md">
-                    {{ props.getdetail.profileID }}
+                    {{ personalForm.idCard }}
                   </div>
                   <div>
-                    {{ props.getdetail.dateOfBirth }}
+                    {{ date2Thai(personalForm.dateOfBirth) }}
                   </div>
                 </div>
                 <div class="col-2 header-sub-text">
@@ -198,10 +228,10 @@ const close = async () => {
                 </div>
                 <div class="col-3 sub-text">
                   <div class="q-pb-md">
-                    {{ props.getdetail.fullName }}
+                    {{ personalForm.fullName }}
                   </div>
                   <div>
-                    {{ props.getdetail.gender }}
+                    {{ personalForm.gender }}
                   </div>
                 </div>
               </div>
@@ -213,7 +243,7 @@ const close = async () => {
               <div class="row q-pa-xs">
                 <div class="col-3 header-sub-text">ที่อยู่</div>
                 <div class="col-9 sub-text">
-                  {{ props.getdetail.address }}
+                  {{ personalForm.address }}
                 </div>
               </div>
             </q-card>
@@ -231,6 +261,7 @@ const close = async () => {
                 virtual-scroll
                 :virtual-scroll-sticky-size-start="48"
                 dense
+                hide-bottom
               >
               </q-table>
             </q-card>
@@ -252,31 +283,31 @@ const close = async () => {
                       <div class="col-4 q-pa-xs">
                         <div class="header-sub-text-exam-2">คะแนนที่ได้</div>
                         <div class="sub-text-exam">
-                          {{ props.getdetail.scoreResult.scoreAFull }}
+                          {{ personalForm.pointTotalA }}
                         </div>
                         <div class="sub-text-exam">
-                          {{ props.getdetail.scoreResult.scoreBFull }}
+                          {{ personalForm.pointTotalB }}
                         </div>
                         <div class="sub-text-exam">
-                          {{ props.getdetail.scoreResult.scoreCFull }}
+                          {{ personalForm.pointTotalC }}
                         </div>
                         <div class="sub-text-exam">
-                          {{ props.getdetail.scoreResult.scoreSumFull }}
+                          {{ personalForm.pointTotal }}
                         </div>
                       </div>
                       <div class="col-4 q-pa-xs header-sub-text-exam-2">
                         <div class="header-sub-text-exam-2">ผลการสอบ</div>
                         <div class="sub-text-exam">
-                          {{ props.getdetail.scoreResult.scoreA }}
+                          {{ personalForm.pointA }}
                         </div>
                         <div class="sub-text-exam">
-                          {{ props.getdetail.scoreResult.scoreB }}
+                          {{ personalForm.pointB }}
                         </div>
                         <div class="sub-text-exam">
-                          {{ props.getdetail.scoreResult.scoreC }}
+                          {{ personalForm.pointC }}
                         </div>
                         <div class="sub-text-exam">
-                          {{ props.getdetail.scoreResult.scoreSum }}
+                          {{ personalForm.point }}
                         </div>
                       </div>
                     </div>
@@ -292,10 +323,10 @@ const close = async () => {
                     </div>
                     <div class="col-5 sub-text-exam">
                       <div class="q-pb-sm">
-                        {{ props.getdetail.scoreResult.examResult }}
+                        {{ personalForm.pass }}
                       </div>
-                      <div class="q-pb-sm">{{ props.getdetail.number }}</div>
-                      <div class="q-pb-sm">{{ props.getdetail.examCount }}</div>
+                      <div class="q-pb-sm">{{ personalForm.examNumber }}</div>
+                      <div class="q-pb-sm">{{ personalForm.examRound }}</div>
                     </div>
                   </div>
                 </div>
@@ -308,12 +339,16 @@ const close = async () => {
               <div class="col-12 row items-center q-pa-sm header-text">
                 การคัดกรองคุณสมบัติ
               </div>
-              <div v-for="item of checkboxItems" :key="item.id" class="q-pa-sm">
+              <div
+                v-for="(item, index) of personalForm.isProperty"
+                :key="index"
+                class="q-pa-sm"
+              >
                 <q-checkbox
                   size="xs"
-                  v-model="selection"
-                  :val="item.id"
-                  :label="item.label"
+                  v-model="item.value"
+                  :val="item.value"
+                  :label="item.name"
                   keep-color
                   color="teal"
                   :rules="[isRequired]"
diff --git a/src/modules/05_placement/components/pass/TableView.vue b/src/modules/05_placement/components/pass/TableView.vue
index b62fb0b25..5318a4bbc 100644
--- a/src/modules/05_placement/components/pass/TableView.vue
+++ b/src/modules/05_placement/components/pass/TableView.vue
@@ -43,18 +43,12 @@
 
 <script setup lang="ts">
 import { ref, useAttrs } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
 const $q = useQuasar();
-const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const { dialogMessage } = mixin;
-const editvisible = ref<boolean>(false);
 const attrs = ref<any>(useAttrs());
 const paging = ref<boolean>(true);
 const table = ref<any>(null);
 const filterRef = ref<any>(null);
-const modalPublish = ref<boolean>(false);
-const modalDelete = ref<boolean>(false);
 const props = defineProps({
   inputfilter: String,
   inputvisible: Array,
@@ -143,8 +137,8 @@ const props = defineProps({
   roleAdmin: Boolean
 });
 const pagination = ref({
-  sortBy: "desc",
-  descending: false,
+  sortBy: "number",
+  descending: true,
   page: 1,
   rowsPerPage: 10,
 });
diff --git a/src/modules/05_placement/interface/index/Main.ts b/src/modules/05_placement/interface/index/Main.ts
index 1e46a9961..657fbfbd7 100644
--- a/src/modules/05_placement/interface/index/Main.ts
+++ b/src/modules/05_placement/interface/index/Main.ts
@@ -1,10 +1,14 @@
 import type { zipCodeOption } from "../../components/PersonalDetail/profileType";
 interface DataOption {
-  id: number | string;
-  name: string;
+  id: number|null;
+  name:string|null;
+  disable?: boolean;
+}
+interface DataOption1 {
+  id: string|null;
+  name:string|null;
   disable?: boolean;
 }
-
 interface DataOptionInsignia {
   id: string;
   name: string;
@@ -61,6 +65,7 @@ export type {
   AddressOps,
   Pagination,
   EduOps,
+  DataOption1,
   InsigniaOps,
   CheckboxItem,
 };
diff --git a/src/modules/05_placement/interface/request/Main.ts b/src/modules/05_placement/interface/request/Main.ts
index b7b38d6a1..84af7910f 100644
--- a/src/modules/05_placement/interface/request/Main.ts
+++ b/src/modules/05_placement/interface/request/Main.ts
@@ -4,8 +4,10 @@ interface FormPlacementMainData {
   examRound: string;
   examOrder: number;
   fiscalYear: number;
-  numberofCandidates: number;
-  examType: number;
+  numberOfCandidates: number;
+  examTypeValue:string;
+  examTypeName: string;
+  accountStartDate: string;
   accountExpirationDate: string;
   isExpired?: boolean;
 }
diff --git a/src/modules/05_placement/interface/request/placement.ts b/src/modules/05_placement/interface/request/placement.ts
index 541e5ccb7..3c2d47c23 100644
--- a/src/modules/05_placement/interface/request/placement.ts
+++ b/src/modules/05_placement/interface/request/placement.ts
@@ -1,5 +1,5 @@
 interface TableName {
-  profileID: string;
+  personalId: string;
   position: number;
   fullName: string;
   dateOfBirth: string;
@@ -7,14 +7,20 @@ interface TableName {
   ExamOrder: number;
   unitId: string;
   UnitGroup: string;
+  positionNumber:string;
+  positionPath:string;
   Unit: string;
-  ReportingDate: string; //วันที่รายงานตัว
-  BMAOfficer: string;
-  Status: string;
+  reportingDate: string; //วันที่รายงานตัว
+  bmaOfficer: string;
+  statusId: string;
   checkList: any;
   address: string;
   university: string;
   degree: string;
+  disclaim: string;
+  profilePhoto:string;
+  organizationName:string;
+  organizationShortName:string;
   major: string;
   remark: string;
   number: number;
@@ -31,5 +37,19 @@ interface TableName {
     examResult: string;
   };
 } 
-
-export type { TableName };
\ No newline at end of file
+interface PartialTableName {
+  personalId: string;
+  fullName: string;
+  idCard: string;
+  profilePhoto: string;
+  organizationName: string;
+  organizationShortName: string;
+  positionNumber: string;
+  positionPath: string;
+  reportingDate: string;
+  bmaOfficer: string;
+  number: number;
+  statusId: string;
+  deferment: string;
+}
+export type { TableName ,PartialTableName};
\ No newline at end of file
diff --git a/src/modules/05_placement/router.ts b/src/modules/05_placement/router.ts
index bf38dfdb8..309706bde 100644
--- a/src/modules/05_placement/router.ts
+++ b/src/modules/05_placement/router.ts
@@ -43,7 +43,7 @@ export default [
     },
   },
   {
-    path: "/placement/detail",
+    path: "/placement/pass/:examId",
     name: "placementDetail",
     component: PlacementDetail,
     meta: {
diff --git a/src/modules/05_placement/store.ts b/src/modules/05_placement/store.ts
index 634c46309..3f51227be 100644
--- a/src/modules/05_placement/store.ts
+++ b/src/modules/05_placement/store.ts
@@ -104,77 +104,77 @@ export const usePlacementDataStore = defineStore("placement", () => {
     (DataMainYear.value = val);
   const DataMain = (val: FormPlacementMainData[]) => (DataMainOrig.value = val);
   const DataUpdateMain = (
-    filter_1: number | null,
-    filter_2: number | null,
+    filter_1: number | string,
+    filter_2: string | null,
     filter_3: boolean
   ) => {
     DataMainUpdate.value = [];
-    if (filter_1 === null && filter_2 === 0 && filter_3 === false) {
+    if (filter_1 === "all" && filter_2 === "all" && filter_3 === false) {
       // console.log('case 1');
       // return DataMainUpdate.value = DataMainOrig.value; อันเก่า
       return (DataMainUpdate.value = DataMainOrig.value.filter(
         (item) => item.isExpired === filter_3
       ));
-    } else if (filter_1 === null && filter_2 === null && filter_3 === false) {
+    } else if (filter_1 === "all" && filter_2 === "all" && filter_3 === false) {
       // console.log('case 1.1');
       return (DataMainUpdate.value = DataMainOrig.value.filter(
         (item) => item.isExpired === filter_3
       ));
-    } else if (filter_1 !== null && filter_2 === 0 && filter_3 === false) {
+    } else if (filter_1 !== "all" && filter_2 === "all" && filter_3 === false) {
       // console.log('case 2');
       return (DataMainUpdate.value = DataMainOrig.value.filter(
         (item) => item.examOrder === filter_1 && item.isExpired === filter_3
       ));
-    } else if (filter_1 !== null && filter_2 === null && filter_3 === false) {
+    } else if (filter_1 !== "all" && filter_2 === "all" && filter_3 === false) {
       // console.log('case 2.1');
       return (DataMainUpdate.value = DataMainOrig.value.filter(
         (item) => item.examOrder === filter_1 && item.isExpired === filter_3
       ));
-    } else if (filter_1 !== null && filter_2 !== 0 && filter_3 === false) {
+    } else if (filter_1 !== "all" && filter_2 !== "all" && filter_3 === false) {
       // console.log('case 2.2');
       return (DataMainUpdate.value = DataMainOrig.value.filter(
         (item) =>
           item.examOrder === filter_1 &&
-          item.examType === filter_2 &&
+          item.examTypeValue === filter_2 &&
           item.isExpired === filter_3
       ));
-    } else if (filter_1 === null && filter_2 !== 0 && filter_3 === false) {
+    } else if (filter_1 === "all" && filter_2 !== "all" && filter_3 === false) {
       // console.log('case 3');
       return (DataMainUpdate.value = DataMainOrig.value.filter(
-        (item) => item.examType === filter_2 && item.isExpired === filter_3
+        (item) => item.examTypeValue === filter_2 && item.isExpired === filter_3
       ));
-    } else if (filter_1 === null && filter_2 === 0 && filter_3 === true) {
+    } else if (filter_1 === "all" && filter_2 === "all" && filter_3 === true) {
       // console.log('case 3.1');
       return (DataMainUpdate.value = DataMainOrig.value.filter(
         (item) => item.isExpired === filter_3
       ));
-    } else if (filter_1 === null && filter_2 === null && filter_3 === true) {
+    } else if (filter_1 === "all" && filter_2 === "all" && filter_3 === true) {
       // console.log('case 3.2');
       return (DataMainUpdate.value = DataMainOrig.value.filter(
         (item) => item.isExpired === filter_3
       ));
-    } else if (filter_1 !== null && filter_2 === 0 && filter_3 === true) {
+    } else if (filter_1 !== "all" && filter_2 === "all" && filter_3 === true) {
       // console.log('case 3.3');
       return (DataMainUpdate.value = DataMainOrig.value.filter(
         (item) => item.examOrder == filter_1 && item.isExpired == filter_3
       ));
-    } else if (filter_1 !== null && filter_2 === null && filter_3 === true) {
+    } else if (filter_1 !== "all" && filter_2 === "all" && filter_3 === true) {
       // console.log('case 3.4');
       return (DataMainUpdate.value = DataMainOrig.value.filter(
         (item) => item.examOrder == filter_1 && item.isExpired == filter_3
       ));
-    } else if (filter_1 !== null && filter_2 !== 0 && filter_3 === true) {
+    } else if (filter_1 !== "all" && filter_2 !== "all" && filter_3 === true) {
       // console.log('case 3.5');
       return (DataMainUpdate.value = DataMainOrig.value.filter(
         (item) =>
           item.examOrder == filter_1 &&
-          item.examType == filter_2 &&
+          item.examTypeValue == filter_2 &&
           item.isExpired == filter_3
       ));
-    } else if (filter_1 === null && filter_2 !== 0 && filter_3 === true) {
+    } else if (filter_1 === "all" && filter_2 !== "all" && filter_3 === true) {
       // console.log('case 3.6');
       return (DataMainUpdate.value = DataMainOrig.value.filter(
-        (item) => item.examType == filter_2 && item.isExpired == filter_3
+        (item) => item.examTypeValue == filter_2 && item.isExpired == filter_3
       ));
     }
   };