diff --git a/src/api/05_placement/api.placement.ts b/src/api/05_placement/api.placement.ts
index 913a2bea4..dbca3a328 100644
--- a/src/api/05_placement/api.placement.ts
+++ b/src/api/05_placement/api.placement.ts
@@ -1,8 +1,16 @@
-/**
- * api บรรจุ แต่งตั้ง ย้าย โอน
- */
-import env from "../index";
+import env from "../index"
+const placement = `${env.API_URI}/Placement/placement`
 const orgTree = `${env.API_URI_ORG_TREE}`;
-const placement = `${env.API_URI}/Placement/placement`;
 
-export default { orgTree: orgTree, placementPass: () => `${placement}/pass` };
+export default {
+    MainDetail: (year: number) => `${placement}/exam/${year}`,
+    yearOptions: () => `${placement}/fiscal`,
+    redirectToPage: (examId: string) => `${placement}/pass/${examId}`,
+    disclaimF: () => `${placement}/pass/disclaim`,
+    defermentF: () => `${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`
+}
\ No newline at end of file
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/05_placement/components/Main.vue b/src/modules/05_placement/components/Main.vue
index 7098a4a3c..1121d990e 100644
--- a/src/modules/05_placement/components/Main.vue
+++ b/src/modules/05_placement/components/Main.vue
@@ -1,17 +1,24 @@
 <script setup lang="ts">
-import { onMounted, reactive, ref, useAttrs } from "vue";
+import { onMounted, reactive, ref, useAttrs, watchEffect } from "vue";
 import type { QTableProps } from "quasar";
+import { useQuasar } from "quasar";
 import type { FormPlacementMainData } from "@/modules/05_placement/interface/request/Main";
-import type { DataOption } from "@/modules/05_placement/interface/index/Main";
+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 { dateText, messageError } = mixin;
+const selectedFiscalYear = ref(0);
 // แปลงเวลา ค.ศ ให้เป็น พ.ศ
 const textDate = (value: Date) => {
   return dateText(value);
@@ -58,22 +65,33 @@ 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",
     sort: (a: string, b: string) =>
@@ -93,140 +111,93 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 
 // ข้อมูลตาราง (จำลอง)
-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<FormPlacementMainData[]>([]);
+const yearValue = ref<number>(0); // เพิ่มตัวแปรในโมดูล
 
 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();
+watchEffect(() => {
+  rows.value = OriginalData.value;
 });
-
-// ดูรายการสอบแข่งขัน หน้าต่อไป
-const redirectToPage = (id?: number) => {
-  // router.push({ name: 'placementDetail'});
-  router.push(`/placement/detail`);
-};
-
-// เลือกปีงบประมาณ
-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);
-    }
+const OriginalDataFetch = async (year: number) => {
+  yearValue.value = year;
+  try {
+    const response = await http.get(config.API.MainDetail(year));
+    const apiData = response.data.result;
+    console.log(`🚀 ข้อมูลจากการ get (${year})`, apiData);
+    await DataStore.DataMain(apiData);
+    OriginalData.value = await DataStore.DataMainOrig;
+    UpdataData.value = OriginalData.value.filter(
+      (data) => data.fiscalYear === year
+    );
+  } catch (error) {
+    messageError($q, error);
   }
 };
 
-// เลือกปีงบประมาณตาม 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 redirectToPage = (examId?: number) => {
+  router.push(`/placement/pass/${examId}`);
 };
 
-// ค้นหาในตาราง
+//-------------------|เลือกปีงบประมาณ|-----------------------//
+const fiscalyear = ref<number>(0);
+const fiscalyearOP = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
+const addedfiscalYearValues: number[] = [];
+const fiscalYearFilter = async () => {
+  try {
+    const response = await http.get(config.API.yearOptions());
+    const dataOptions = response.data.result;
+    fiscalyearOP.push(...dataOptions);
+
+    let maxYear = 0;
+    for (let data of dataOptions) {
+      if (data.id > maxYear) {
+        maxYear = data.id;
+      }
+    }
+
+    fiscalyear.value = maxYear;
+
+    // อัพเดตค่าของ selectedFiscalYear
+    selectedFiscalYear.value = fiscalyear.value;
+
+    // โหลดข้อมูลใหม่เมื่อตัวเลือกปีเปลี่ยนแปลง
+    await OriginalDataFetch(selectedFiscalYear.value);
+  } catch (e) {
+    messageError($q, e);
+  }
+};
+
+//-------------------|เลือกปีงบประมาณตาม API|--------------------//
+interface YearOption {
+  id: number;
+  name: number;
+}
+
+const searchfiscalyear = async () => {
+  try {
+    const res = await http.get(config.API.yearOptions());
+    const dataOptions: YearOption[] = res.data.result;
+    if (fiscalyear.value === 0) {
+      await OriginalDataFetch(0);
+    } else {
+      const selectedYearObject = dataOptions.find(
+        (option: YearOption) => option.id === fiscalyear.value
+      );
+      OriginalDataFetch(fiscalyear.value);
+
+      if (selectedYearObject) {
+      } else {
+        console.log("No Selected Year Object");
+      }
+    }
+  } catch (e) {
+    messageError($q, e);
+  }
+};
+
+//-------------------|ค้นหาในตาราง|-----------------//
 const filterKeyword = ref<string>("");
 const filterRef = ref<any>(null);
 const resetFilter = () => {
@@ -235,62 +206,76 @@ const resetFilter = () => {
 };
 
 const attrs = ref<any>(useAttrs());
-const visibleColumns = ref<string[]>([
+const visibleColumns = ref<any[]>([
   "id",
   "examRound",
   "examOrder",
   "fiscalYear",
-  "numberofCandidates",
-  "examType",
+  "numberOfCandidates",
+  "examTypeValue",
+  "examTypeName",
+  "accountStartDate",
   "accountExpirationDate",
-]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+]);
+
+//-------------------|ครั้งที่สอบ|------------------------------//
+const examTime = ref<number | string>("all");
+const examTimeOP = reactive<DataOption1[]>([]);
+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 OriginalData.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 = () => {
+  for (const data of OriginalData.value) {
+    const examTypeName = data.examTypeName;
+    const examTypeValue = data.examTypeValue;
+    if (examTypeName && !addedExamTypeValues.has(examTypeName)) {
+      examTypeOP.value.push({
+        id: examTypeValue,
+        name: examTypeName,
+      });
+      addedExamTypeValues.add(examTypeName);
     }
   }
 };
-
+//--------------|ฟิลเตอร์|--------------------------------------//
 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;
+  if (examType.value !== undefined && examType.value !== null) {
+    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;
+    let isExpired = currentDate > expirationDate;
 
     return { ...data, isExpired };
   });
@@ -298,7 +283,7 @@ const expiredAccountFilter = async () => {
 };
 
 const paging = ref<boolean>(true);
-  const pagination = ref({
+const pagination = ref({
   sortBy: "desc",
   descending: false,
   page: 1,
@@ -308,6 +293,13 @@ const paginationLabel = (start: string, end: string, total: string) => {
   if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
   else return start + "-" + end + " ใน " + total;
 };
+onMounted(async () => {
+  await fiscalYearFilter();
+  examTimeFilter();
+  await examTypeFilter();
+  expiredAccountFilter();
+  await searchFilterTable();
+});
 </script>
 
 <template>
@@ -315,7 +307,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
     รายการสอบแข่งขัน / คัดเลือก
   </div>
   <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
-    <div class="row q-col-gutter-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"
@@ -421,8 +413,10 @@ const paginationLabel = (start: string, end: string, total: string) => {
         </q-card>
       </div>
       <div class="col-12">
+        {{ rows }}
         <q-table
           ref="table"
+          :row="rows"
           :columns="columns"
           :rows="UpdataData"
           :filter="filterKeyword"
@@ -454,7 +448,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,13 +457,16 @@ 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">
+                {{ textDate(props.row.accountStartDate) }}
               </q-td>
               <q-td key="accountExpirationDate" :props="props">
                 {{ textDate(props.row.accountExpirationDate) }}
diff --git a/src/modules/05_placement/components/pass/Detail.vue b/src/modules/05_placement/components/pass/Detail.vue
index d4bca4107..e1f2d0ea2 100644
--- a/src/modules/05_placement/components/pass/Detail.vue
+++ b/src/modules/05_placement/components/pass/Detail.vue
@@ -1,13 +1,16 @@
 <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";
 
 let roleAdmin = ref<boolean>(false);
-
 const router = useRouter();
+const route = useRoute();
+const examId = route.params.examId;
 const year = ref<string>("2566");
 const round = ref<string>("1");
 const title = ref<string>("การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ");
@@ -15,14 +18,38 @@ 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;
+
+  try {
+    const res = await http.get(config.API.getStatCard(examIdString));
+    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 (error) {
+    console.error("Error retrieving data:", error);
+    // จัดการข้อผิดพลาดที่เกิดขึ้นในการรับข้อมูล
+  }
+};
+
 onMounted(async () => {
+  await getStat()
   if (keycloak.tokenParsed != null) {
     roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
   }
diff --git a/src/modules/05_placement/components/pass/Table.vue b/src/modules/05_placement/components/pass/Table.vue
index e4cbf2fdd..cd9e7b0fb 100644
--- a/src/modules/05_placement/components/pass/Table.vue
+++ b/src/modules/05_placement/components/pass/Table.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
+import { ref, onMounted, watch, watchEffect } from "vue";
 import { useQuasar, QForm } from "quasar";
 import type { QTableProps } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
@@ -9,12 +9,13 @@ 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 { PartialTableName } 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 { useRoute, useRouter } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import keycloak from "@/plugins/keycloak";
@@ -33,7 +34,6 @@ 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>();
@@ -49,8 +49,9 @@ const filter = ref<string>("");
 const posNoId = ref<string>();
 const amount = ref<string>();
 const Name = ref<string>();
+const personId = ref<string>();
 const ocId = ref<string>();
-
+const rows = ref<any>([]);
 const posNoOptions = ref<DataOption[]>([]);
 const positionOptions = ref<DataOption[]>([]);
 const posNoOptionsFilter = ref<DataOption[]>([]);
@@ -67,11 +68,10 @@ const positionLevelOptionsFilter = ref<DataOption[]>([]);
 const positionExecutiveSideOptions = ref<DataOption[]>([]);
 const positionExecutiveOptionsFilter = ref<DataOption[]>([]);
 const positionExecutiveSideOptionsFilter = ref<DataOption[]>([]);
-
+const number = ref<number>();
 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(); //เรียกฟังก์ชันกลาง
@@ -79,9 +79,57 @@ const store = usePlacementDataStore();
 const { placementData } = store;
 const nodesTree = ref<treeTab[]>([]);
 const $q = useQuasar(); // show dialog
+const statusCode = ref<number>();
 const positionLevelOptions = ref<any[]>([]);
-const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
-  mixin;
+
+const {
+  date2Thai,
+  success,
+  dateToISO,
+  messageError,
+  showLoader,
+  hideLoader,
+  dateText,
+} = mixin;
+const route = useRoute();
+const examId = route.params.examId;
+const textDate = (value: Date) => {
+  return dateText(value);
+};
+const examIdString = Array.isArray(examId) ? examId[0] : examId;
+
+const getTable = async () => {
+  showLoader();
+  await http
+    .get(config.API.redirectToPage(examIdString))
+    .then((res: any) => {
+      const dataArray: PartialTableName[] = res.data.result;
+      console.log("🚀 ~ file: Table.vue:96 ~ getTable ~ data:", dataArray);
+      dataArray.map((data) => {
+        const rowData = {
+          personalId: data.personalId,
+          idCard: data.idCard,
+          profilePhoto: data.profilePhoto,
+          organizationName: data.organizationName,
+          organizationShortName: data.organizationShortName,
+          positionNumber: data.positionNumber,
+          positionPath: data.positionPath,
+          reportingDate: data.reportingDate,
+          number: data.number,
+          bmaOfficer: data.bmaOfficer,
+          statusId: data.statusId,
+          disclaim: data.disclaim,
+        };
+        rows.value.push(rowData);
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
+};
 
 const fetchPosition = async () => {
   showLoader();
@@ -164,7 +212,7 @@ const fetchPosition = async () => {
       });
       // positionLevelOptionsFilter.value = optionPositionLevels;
     })
-    .catch((e: any) => { })
+    .catch((e: any) => {})
     .finally(() => {
       hideLoader();
     });
@@ -259,29 +307,60 @@ const saveAppoint = async () => {
 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 formData = new FormData();
+      formData.append("personalId", personId.value);
+      formData.append("note", positionMasterUserNote.value),
+        formData.append("files", files.value);
+
+      await http
+        .post(config.API.defermentF(), formData)
+        .then((res) => {
+          const test = rows.value.filter(
+            (e) => e.personalId === personId.value
+          );
+
+          test.forEach((e) => {
+            e.statusId = "PREPARE-CONTAIN";
+          });
+
+          modal_right.value = false;
+        })
+        .catch((e) => {
+          console.log(e);
+        })
+        .finally(() => {
+          hideLoader();
+        });
     }
   });
 };
+
 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 dataPost = {
+        note: positionMasterUserNote.value,
+        personId: personId.value,
+      };
+      console.log("save disclaim===>", dataPost);
+      modal_right.value = false;
+
+      await http
+        .post(config.API.disclaimF(), {
+          note: dataPost.note,
+          personalId: dataPost.personId,
+        })
+        .then(() => {
+          const test1 = rows.value.filter(
+            (e) => e.personalId === personId.value
+          );
+          test1.forEach((e) => {
+            e.statusId = "DISCLAIM";
+          });
+        })
+        .finally(() => {
+          hideLoader();
+        });
     }
   });
 };
@@ -328,7 +407,7 @@ const fetchPositionNumber = async (id: string) => {
 };
 const getNumFile = ref(0);
 const editDetail = (
-  props: TableName,
+  props: PartialTableName,
   action: "cancel" | "wait" | "waitInfo"
 ) => {
   if (action === "cancel") {
@@ -338,6 +417,7 @@ const editDetail = (
     modal_right.value = true;
     edit.value = true;
     Name.value = props.fullName;
+    personId.value = props.personalId;
   } else if (action === "wait") {
     getNumFile.value = 1;
     editRow.value = false;
@@ -345,6 +425,7 @@ const editDetail = (
     modal_right.value = true;
     edit.value = true;
     Name.value = props.fullName;
+    personId.value = props.personalId;
   } else if (action === "waitInfo") {
     getNumFile.value = 1;
     editRow.value = false;
@@ -352,20 +433,21 @@ const editDetail = (
     modalwaitInfo.value = true;
     edit.value = true;
     Name.value = props.fullName;
+    personId.value = props.personalId;
   }
 };
-placementData.mappingPosition.columns.length == 0
-  ? (visibleColumns.value = [
-    "position",
-    "Name",
-    "ExamOrder",
-    "Unit",
-    "ReportingDate",
-    "BMAOfficer",
-    "Status",
-    "checkList",
-  ])
-  : (visibleColumns.value = placementData.mappingPosition.columns);
+const visibleColumns = ref<any[]>([
+  "position",
+  "fullName",
+  "number",
+  "idCard",
+  "positionNumber",
+  "organizationName",
+  "reportingDate",
+  "bmaOfficer",
+  "statusId",
+]);
+
 const columns = ref<QTableProps["columns"]>([
   {
     name: "position",
@@ -377,62 +459,61 @@ 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: "statusId",
     align: "left",
     label: "สถานะการบรรจุ",
     sortable: true,
-    field: "Status",
+    field: "statusId",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -440,283 +521,6 @@ 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: "ผ่าน",
-    },
-  },
-
-  {
-    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",
@@ -1023,11 +827,9 @@ const save = () => {
 onMounted(async () => {
   if (keycloak.tokenParsed != null) {
     roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
-    console.log("roleAdmin===>", roleAdmin)
-
-
+    console.log("roleAdmin===>", roleAdmin);
   }
-
+  await getTable();
   await fetchPosition();
   await nodeTree();
   // await fetchData();
@@ -1077,101 +879,233 @@ const listKeyId = (data: any) => {
 
 const expiredAccount = ref<boolean>(false);
 
-
 watch(expiredAccount, () => {
   console.log("expiredAccount===>", expiredAccount.value);
 });
 </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-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 }}
+  <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-td
+            v-for="col in props.cols"
+            :key="col.name"
+            :props="props"
+            @click="selectData(props.row)"
+            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>
-            </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>
+            <template v-else-if="col.name === 'number'">
+              <div class="text-weight-medium">
+                {{ props.row.number !== null ? props.row.number : "-" }}
+              </div>
+            </template>
+
+            <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 class="text-weight-light">-</div>
+                </div>
+              </div>
+            </template>
+            <template
+              v-else-if="col.name === 'reportingDate' && col.value !== '-'"
+            >
+              <div class="text-weight-medium">
+                {{ dateText(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 === 'statusId'"
+              class="table_ellipsis"
+            >
+              <div v-if="props.row.statusId === 'un-contain'">ยังไม่บรรจุ</div>
+              <div v-else-if="props.row.statusId === 'PREPARE-CONTAIN'">
+                เตรียมบรรจุ
+              </div>
+              <div v-else-if="props.row.statusId === 'contain'">บรรจุแล้ว</div>
+              <div v-else-if="props.row.statusId === 'DISCLAIM'">สละสิทธิ์</div>
+              <div v-else>-</div>
+            </template>
+          </q-td>
+          <q-td auto-width>
+            <q-btn
+              v-if="
+                props.row.Status !== 'DISCLAIM' &&
+                props.row.Status !== 'contain'
+              "
+              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"
+                  >
+                    <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, '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.statusId !== 'DISCLAIM'"
+                    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.statusId === 'un-contain' ||
+                      props.row.statusId === 'PREPARE-CONTAIN'
+                    "
+                    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>
 
   <q-dialog v-model="appointModal" persistent full-width>
     <q-card>
@@ -1183,25 +1117,50 @@ watch(expiredAccount, () => {
             <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">
+                  <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>
+                  <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">
+                        <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-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>
@@ -1214,31 +1173,51 @@ watch(expiredAccount, () => {
                       </div>
                     </template>
                     <template v-slot:header-person="prop">
-                      <q-item clickable :active="clickAction === prop.node.keyId" @click="
-                        clickAction =
-                        prop.node.name == `ว่าง` ||
+                      <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
-                          ? 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%" />
+                            ? '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
+                          v-if="
+                            prop.node.name == `ว่าง` ||
+                            prop.node.name == `N/A` ||
+                            prop.node.name == null
+                          "
+                          class="q-px-sm text-weight-medium text-red"
+                        >
                           ว่าง
                         </div>
                         <!--=====หัวหน้า สีเขียว=====-->
@@ -1263,8 +1242,13 @@ watch(expiredAccount, () => {
                         <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-icon
+                          v-if="prop.node.positionLeaderFlag"
+                          class="q-mr-sm"
+                          size="15px"
+                          color="primary"
+                          name="mdi-bookmark"
+                        ></q-icon>
 
                         <q-space />
                       </q-item>
@@ -1279,24 +1263,46 @@ watch(expiredAccount, () => {
                   <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">
+                      <datepicker
+                        menu-class-name="modalfix"
+                        :readonly="!edit"
+                        v-model="date"
+                        :locale="'th'"
+                        autoApply
+                        :enableTimePicker="false"
+                        @update:modelValue="clickEditRow"
+                        week-start="0"
+                      >
                         <template #year="{ year }">{{ year + 543 }}</template>
                         <template #year-overlay-value="{ value }">{{
                           parseInt(value + 543)
                         }}</template>
                         <template #trigger>
-                          <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :borderless="!edit"
-                            :model-value="date2Thai(date)" :rules="[
+                          <q-input
+                            :class="getClass(edit)"
+                            :outlined="edit"
+                            dense
+                            lazy-rules
+                            :borderless="!edit"
+                            :model-value="date2Thai(date)"
+                            :rules="[
                               (val: string) =>
                                 !!val ||
                                 `${'วันที่รายงานตัว'}`,
-                            ]" :label="`${'วันที่รายงานตัว'}`" hide-bottom-space>
+                            ]"
+                            :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
+                                name="event"
+                                class="cursor-pointer"
+                                :style="
+                                  edit
+                                    ? 'color: var(--q-primary)'
+                                    : 'color: var(--q-grey)'
+                                "
+                              >
                               </q-icon>
                             </template>
                           </q-input>
@@ -1305,58 +1311,145 @@ watch(expiredAccount, () => {
                     </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="`${'เลขที่ตำแหน่ง'}`" />
+                      <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="`${'ตำแหน่ง'}`" />
+                      <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="`${'ด้าน/สาขา'}`" />
+                      <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="`${'ประเภทตำแหน่ง'}`" />
+                      <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="`${'สายงาน'}`" />
+                      <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 />
+                      <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 />
+                      <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="[
+                      <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 />
+                        ]"
+                        :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="[
+                      <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 />
+                        ]"
+                        :label="`${'เงินค่าตอบแทนรายเดือน'}`"
+                        @update:modelValue="clickEditRow"
+                        type="number"
+                        hide-bottom-space
+                      />
                     </div>
                   </div>
                 </q-scroll-area>
@@ -1366,29 +1459,60 @@ watch(expiredAccount, () => {
         </q-card-section>
 
         <q-separator />
-        <DialogFooter v-model:editvisible="edit" :validate="validateData" v-model:modalEdit="modalEdit"
-          :save="saveAppoint" />
+        <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" />
+    <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" />
+        <DialogHeader
+          :title="`${modalEdit ? 'ขอผ่อนผัน' : 'สละสิทธิ์'} ชื่อ${Name}`"
+          :close="clickClose"
+        />
         <q-separator />
         <q-card-section class="q-p-sm">
+          {{ personId }}
           <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">
+            <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>
@@ -1396,8 +1520,12 @@ watch(expiredAccount, () => {
           </div>
         </q-card-section>
         <q-separator />
-        <DialogFooter v-model:editvisible="edit" v-model:modalEdit="modalEdit" :validate="validateData"
-          :save="modalEdit ? savePostpone : saveDisclaim" />
+        <DialogFooter
+          v-model:editvisible="edit"
+          v-model:modalEdit="modalEdit"
+          :validate="validateData"
+          :save="modalEdit ? savePostpone : saveDisclaim"
+        />
       </q-form>
     </q-card>
   </q-dialog>
@@ -1406,7 +1534,10 @@ watch(expiredAccount, () => {
   <q-dialog v-model="modalwaitInfo" persistent>
     <q-card style="width: 500px; max-width: 500px">
       <q-form ref="myForm">
-        <DialogHeader :title="`${modalEdit ? 'ขอผ่อนผัน' : 'สละสิทธิ์'} ชื่อ${Name}`" :close="clickClose" />
+        <DialogHeader
+          :title="`${modalEdit ? 'ขอผ่อนผัน' : 'สละสิทธิ์'} ชื่อ${Name}`"
+          :close="clickClose"
+        />
         <q-separator />
         <q-card-section class="q-p-sm">
           <div class="row">
@@ -1416,7 +1547,14 @@ watch(expiredAccount, () => {
           <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" />
+            <q-btn
+              color="primary"
+              flat
+              dense
+              round
+              size="14px"
+              icon="mdi-download"
+            />
           </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..9bc2508d3 100644
--- a/src/modules/05_placement/components/pass/TableDetail.vue
+++ b/src/modules/05_placement/components/pass/TableDetail.vue
@@ -1,15 +1,20 @@
 <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 fullName = ref<any>()
+
 const props = defineProps({
   Modal: Boolean,
   close: {
@@ -25,15 +30,55 @@ const props = defineProps({
     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 getDetailbyId =  (props.getdetail) => {
+//     showLoader();
+
+//     // ดึงข้อมูล personalId จาก API ก่อน
+//     try {
+//       const response = await http.get(config.API.personalId(id));
+//       const personalId = response.data.personalId;
+
+//       // เมื่อได้รับ personalId แล้วให้ดึงข้อมูลอื่นๆ จาก API
+//       const organizationResponse = await http.get(config.API.organizationName(personalId));
+//       const data = organizationResponse.data.result;
+
+//       // อัปเดตข้อมูลบนหน้า UI จากข้อมูลที่ได้รับ
+//       uid.value = data.personalId;
+//       idCard.value = data.idCard;
+//       fullName.value = "tee";
+//       dateOfBirth.value = new Date(data.dateOfBirth).toLocaleDateString();
+//       gender.value = data.gender;
+//       address.value = data.address;
+//       education.value = data.education;
+//       pointA.value = data.pointA;
+//       pointB.value = data.pointB;
+//       pointC.value = data.pointC;
+//       pointTotalA.value = data.pointTotalA;
+//       pointTotalB.value = data.pointTotalB;
+//       pointTotalC.value = data.pointTotalC;
+//       point.value = data.point;
+//       pointTotal.value = data.pointTotal;
+//       examNumber.value = data.examNumber;
+//       examRound.value = data.examRound;
+//       pass.value = data.pass;
+//       isProperty.value = data.isProperty;
+//     } catch (error) {
+//       messageError($q, error);
+//     } finally {
+//       hideLoader();
+//     }
+
+// };
+
+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 +121,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) => 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("0a846508-4932-40de-9a9e-5b519492217c"))
+    .then((res) => {
+      personalForm.value = res.data.result;
+      personalForm.value.education.map((e) => {
+        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 +235,7 @@ const close = async () => {
       <q-form ref="myForm">
         <div class="row">
           <DialogHeader
-            :title="`รายละเอียดของ ${props.getdetail.fullName}`"
+            :title="`รายละเอียดของ ${personalForm.fullName}`"
             @click="close"
           />
         </div>
@@ -176,7 +247,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 +260,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 +272,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 +287,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 +305,7 @@ const close = async () => {
                 virtual-scroll
                 :virtual-scroll-sticky-size-start="48"
                 dense
+                hide-bottom
               >
               </q-table>
             </q-card>
@@ -252,31 +327,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 +367,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 +383,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/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..0cfc57ac8 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;
+  disclaim: 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
       ));
     }
   };