diff --git a/src/modules/05_placement/components/PlacementTable.vue b/src/modules/05_placement/components/PlacementTable.vue
index 19b3112cd..b782d670d 100644
--- a/src/modules/05_placement/components/PlacementTable.vue
+++ b/src/modules/05_placement/components/PlacementTable.vue
@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import { ref, defineComponent, h } from "vue";
 import Table from "@/modules/05_placement/components/PlacementTableView.vue";
-import { useQuasar, QForm } from "quasar";
+import { useQuasar, QForm, QCheckbox, QSlideItem } from "quasar";
 import type { TableName } from "@/modules/05_placement/interface/request/placement";
 import { usePlacementDataStore } from "@/modules/05_placement/store";
 import type { QTableProps } from "quasar";
 import DialogHeader from "@/modules/05_placement/components/DialogHeader.vue";
 import DialogFooter from "@/modules/05_placement/components/DialogFooter.vue";
+import TestView from "@/views/TestView.vue";
+import { aW } from "@fullcalendar/core/internal-common";
 const editvisible = ref<boolean>(false);
 const myForm = ref<QForm | null>(null);
 const edit = ref<boolean>(false);
@@ -16,7 +18,6 @@ const filter = ref<string>("");
 const { placementData } = store;
 const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
 const modal = ref<boolean>(false); //modal add detail
-const modal_right = ref<boolean>(false); //modal add detail
 const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
 const position = ref<number>();
 const Name = ref<string>();
@@ -26,18 +27,9 @@ const ReportingDate = ref<string>();
 const BMAOfficer = ref<boolean>();
 const Status = ref<string>();
 const checkList = ref<string>();
-const positionMasterUserNote = ref<string>();
-const $q = useQuasar(); // show dialog
-const files = ref<File[]>([]);
-const clickEditRow = () => {
-  editRow.value = true;
-};
-const getClass = (val: boolean) => {
-  return {
-    "full-width inputgreen cursor-pointer": val,
-    "full-width cursor-pointer": !val,
-  };
-};
+
+  const $q = useQuasar(); // show dialog
+
 const selectData = (props: TableName) => {
   if (editvisible.value == true) {
     editRow.value = false;
@@ -52,7 +44,7 @@ const selectData = (props: TableName) => {
     BMAOfficer.value = props.BMAOfficer;
     Status.value = props.Status;
     checkList.value = props.checkList;
-  } else {
+  }else{
     editRow.value = false;
     modalEdit.value = true;
     modal.value = true;
@@ -60,26 +52,6 @@ const selectData = (props: TableName) => {
   }
 };
 
-const getNumFile = ref(0);
-const editDetail = (props: TableName, action: "cancel" | "wait") => {
- 
-  if (action === "cancel") {
-    getNumFile.value = 0;
-    editRow.value = false;
-    modalEdit.value = false;
-    modal_right.value = true;
-    edit.value = true;
-    Name.value = props.Name;
-  } else if (action === "wait") {
-    getNumFile.value = 1;
-    editRow.value = false;
-    modalEdit.value = true;
-    modal_right.value = true;
-    edit.value = true;
-    Name.value = props.Name;
-  }
-
-};
 placementData.mappingPosition.columns.length == 0
   ? (visibleColumns.value = [
       "position",
@@ -101,6 +73,8 @@ const columns = ref<QTableProps["columns"]>([
     field: "position",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "Name",
@@ -121,6 +95,8 @@ const columns = ref<QTableProps["columns"]>([
     field: "ExamOrder",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "Unit",
@@ -152,6 +128,8 @@ const columns = ref<QTableProps["columns"]>([
     field: "BMAOfficer",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "Status",
@@ -174,7 +152,7 @@ const rows = ref<TableName[]>([
     ReportingDate: "30 พ.ค. 2566", //วันที่รายงานตัว
     BMAOfficer: true,
     Status: "บรรจุเเล้ว",
-    checkList: null,
+    checkList:null
   },
   {
     position: 1,
@@ -184,7 +162,7 @@ const rows = ref<TableName[]>([
     ReportingDate: "30 พ.ค. 2566", //วันที่รายงานตัว
     BMAOfficer: true,
     Status: "ยังไม่บรรจุ",
-    checkList: null,
+    checkList:null
   },
   {
     position: 1,
@@ -194,7 +172,7 @@ const rows = ref<TableName[]>([
     ReportingDate: "30 พ.ค. 2566", //วันที่รายงานตัว
     BMAOfficer: true,
     Status: "เตรียมบรรจุ",
-    checkList: null,
+    checkList:null
   },
 
   {
@@ -205,7 +183,7 @@ const rows = ref<TableName[]>([
     ReportingDate: "30 พ.ค. 2566", //วันที่รายงานตัว
     BMAOfficer: true,
     Status: "เตรียมบรรจุ",
-    checkList: null,
+    checkList:null
   },
 
   {
@@ -216,7 +194,7 @@ const rows = ref<TableName[]>([
     ReportingDate: "30 พ.ค. 2566", //วันที่รายงานตัว
     BMAOfficer: true,
     Status: "เตรียมบรรจุ",
-    checkList: null,
+    checkList:null
   },
   {
     position: 1,
@@ -226,7 +204,7 @@ const rows = ref<TableName[]>([
     ReportingDate: "30 พ.ค. 2566", //วันที่รายงานตัว
     BMAOfficer: true,
     Status: "บรรจุเเล้ว",
-    checkList: null,
+    checkList:null
   },
 ]);
 const clickCancel = async () => {
@@ -241,15 +219,65 @@ const clickClose = async () => {
       ok: "ยืนยัน",
       persistent: true,
     }).onOk(async () => {
-      modal_right.value = false;
       modal.value = false;
     });
   } else {
-    modal_right.value = false;
     modal.value = false;
   }
 };
 
+//bright
+interface CheckboxItem {
+  id: number;
+  label: string;
+  selected: boolean;
+}
+const checkboxItems: CheckboxItem[] = [
+    { id: 1, label: 'ไม่เป็นผู้ดำรงตำแหน่งทางการเมือง', selected: false },
+    { id: 2, label: 'ไม่เป็นคนไร้ความสามารถ คนเสมือนไร้ความสามารถ คนวิกลจริตหรือจิตฟั่นเฟือน ไม่สมประกอบหรือเป็นโรคตามที่กำหนดในกฎ ก.พ.', selected: false },
+    { id: 3, label: 'ไม่เป็นผู้อยู่ในระหว่างถูกสั่งพักราชการหรือถูกสั่งให้ออกจากราชการไว้ก่อนตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น', selected: false },
+    { id: 4, label: 'ไม่เป็นผู้บกพร่องในศีลธรรมอันดีจนเป็นที่รังเกียจของสังคม', selected: false },
+    { id: 5, label: 'ไม่เป็นกรรมการหรือผู้ดำรงตำแหน่งที่รับผิดชอบในการบริหารพรรคการเมือง หรือเจ้าหน้าที่ในพรรคการเมือง', selected: false },
+    { id: 6, label: 'ไม่เป็นบุคคลล้มละลาย', selected: false },
+    { id: 7, label: 'ไม่เป็นผู้เคยต้องรับโทษจำคุกโดยคำพิพากษาถึงที่สุดให้จำคุกเพราะกระทำความผิดทางอาญา เว้นแต่เป็นโทษสำหรับความผิดที่ใด้กระทำโดยประมาทหรือความผิดลหุโทษ', selected: false },
+    { id: 8, label: 'ไม่เป็นผู้เคยถูกลงโทษให้ออก ปลดออก หรือไล่ออกจากรัฐวิสาหกิจ หรือ หน่วยงานอื่นของรัฐ', selected: false },
+    { id: 9, label: 'เป็นผู้เคยถูลงโทษให้ออก หรือปลดออก เพราะกระทำผิตวินัยตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น', selected: false },
+    { id: 10, label: 'เป็นผู้เคยถูกลงโทษไล่ออก เพราะกระทำผิดวินัยตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น', selected: false },
+    { id: 11, label: 'เป็นผู้เคยกระทำการทุจริตในการสอบเข้ารับราชการ หรือเข้าปฏิบัติงานใน หน่วยงานของรัฐ', selected: false },
+];
+
+const selectedItem = () => ({
+
+})
+
+const selection = ref ({
+
+});
+
+const handleCheckboxChange = async (item: any ) => {
+  await
+  console.log('.......')
+  if(item.selected){
+    console.log(item.id +' '+item.selected)
+    item.selected = false
+  }else{
+    console.log(item.id +' '+item.selected)
+    item.selected = true
+  }
+}
+
+const clickSave = async () => {
+  await save(false);
+};
+
+const save = async (publish: boolean) => {
+  console.log(checkboxItems[0])
+};
+
+const clickIsActive = async (val: string, status: boolean) => {
+
+};
+
 </script>
 <template>
   <q-form ref="myForm">
@@ -298,6 +326,15 @@ const clickClose = async () => {
                   class="text-h5"
                 />
               </div>
+              <q-toggle
+                v-else
+                v-model="props.row.isActive"
+                dense
+                color="green"
+                @update:model-value="
+                  clickIsActive(props.row.id, props.row.isActive)
+                "
+              />
             </div>
             <div v-else class="table_ellipsis">
               {{ col.value }}
@@ -315,7 +352,6 @@ const clickClose = async () => {
                 round
                 size="14px"
                 icon="mdi-account-alert"
-                @click="editDetail(props.row, 'wait')"
               />
               <q-btn
                 color="red"
@@ -324,7 +360,6 @@ const clickClose = async () => {
                 round
                 size="14px"
                 icon="mdi-account-remove"
-                @click="editDetail(props.row, 'cancel')"
               />
             </div>
             <div v-else align="right">
@@ -335,72 +370,229 @@ const clickClose = async () => {
                 round
                 size="14px"
                 icon="mdi-account-remove"
-                @click="editDetail(props.row, 'cancel')"
               />
             </div>
           </q-td>
         </q-tr>
       </template>
     </Table>
-  </q-form>
-  <q-dialog v-model="modal" persistent>
-    <q-card style="width: 800px">
-      <q-form ref="myForm">
-        <!-- :tittle="`${modalEdit ? 'แก้ไข' : 'สร้าง'}รายละเอียดของ...`" -->
-        <DialogHeader :tittle="`รายละเอียดของ${Name}`" :close="clickClose" />
-        <q-separator />
-        <q-card-section class="q-p-sm"> text </q-card-section>
-        <q-separator />
-        <DialogFooter
-          :save="clickSave"
-          v-model:editvisible="edit"
-          v-model:modalEdit="modalEdit"
-        />
-      </q-form>
-    </q-card>
-  </q-dialog>
-  <q-dialog v-model="modal_right" persistent>
-    <q-card style="width: 800px">
+    </q-form>
+
+    <q-dialog v-model="modal" full-height full-width>
+    <q-card>
       <q-form ref="myForm">
         <!-- :tittle="`${modalEdit ? 'แก้ไข' : 'สร้าง'}รายละเอียดของ...`" -->
         <DialogHeader
-          :tittle="`${modalEdit ? 'ขอผ่อนผัน' : 'สละสิทธิ์'} ชื่อ...`"
+          :tittle="`รายละเอียดของ`"
           :close="clickClose"
         />
         <q-separator />
-        <q-card-section class="q-p-sm">
-          <div class="col-xs-12 col-sm-12 col-md-12">
-            <q-input
-              :class="getClass(edit)"
-              hide-bottom-space
-              :outlined="edit"
-              dense
-              lazy-rules
-              :readonly="!edit"
-              :borderless="!edit"
-              v-model="positionMasterUserNote"
-              :label="`${'กรอกเหตุผล'}`"
-              @update:modelValue="clickEditRow"
-              type="textarea"
-            />
-            <q-file
-              v-if="getNumFile == 1"
-              v-model="files"
-              dense
-              :label="'เลือกไฟล์เอกสารหลักฐาน'"
-              outlined
-              use-chips
-              multiple
-              class="q-py-sm"
-            >
-              <template v-slot:prepend>
-                <q-icon name="attach_file" color="primary" />
-              </template>
-            </q-file>
-            <!-- :rules="[(val) => !!val || `${'กรุณากรอกเงื่อนไขตำแหน่ง'}`]" -->
-          </div>
-        </q-card-section>
-        <q-separator />
+          <q-card-section class="q-pa-sm">
+
+            <div class="q-card q-card--bordered q-card--flat q-pa-sm">
+              <div class="col-12 row items-center q-pa-xs" style="font-weight: bold;">
+                ข้อมูลทั่วไป
+              </div>
+              <div class="row">
+                <div class="col-3 q-pa-xs" style="color: gray;">
+                  เลขที่ประจำตัวประชาชน
+                </div>
+                <div class="col-3 q-pa-xs">
+                  {{"xxxxxxxxxxxxx"}}
+                </div>
+                <div class="col-3 q-pa-xs" style="color: gray;">
+                  ชื่อ-นามสกุล
+                </div>
+                <div class="col-3 q-pa-xs">
+                  {{"XXXXXXXXXXXXXXXXX"}}
+                </div>
+              </div>
+              <div class="row">
+                <div class="col-3 q-pa-xs" style="color: gray;">
+                  วัน/เดือน/ปีเกิด
+                </div>
+                <div class="col-3 q-pa-xs">
+                  {{"xxxxxxxxxxxxx"}}
+                </div>
+                <div class="col-3 q-pa-xs">
+                  เพศ
+                </div>
+                <div class="col-3 q-pa-xs">
+                  {{"XXXXXXXXXXXXXXXXX"}}
+                </div>
+              </div>
+            </div>
+
+
+            <div class="q-card q-card--bordered q-card--flat q-pa-sm">
+              <div class="col-12 row items-center q-pa-xs" style="font-weight: bold;">
+                ภูมิลำนำ
+              </div>
+              <div class="row">
+                <div class="col-3 q-pa-xs" style="color: gray;">
+                  ที่อยู่
+                </div>
+                <div class="col-3 q-pa-xs">
+                  {{"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"}}
+                </div>
+              </div>
+            </div>
+
+
+            <div class="q-card q-card--bordered q-card--flat q-pa-sm">
+              <div class="col-12 row items-center q-pa-xs" style="font-weight: bold;">
+                การศึกษา
+              </div>
+              <div class="row">
+                <div class="col-3 q-pa-xs" style="color: gray;">
+                  สถานศึกษา
+                </div>
+                <div class="col-3 q-pa-xs">
+                  {{"xxxxxxxxxxxxx"}}
+                </div>
+                <div class="col-3 q-pa-xs" style="color: gray;">
+                  วุฒิการศึกษา
+                </div>
+                <div class="col-3 q-pa-xs">
+                  {{"XXXXXXXXXXXXXXXXX"}}
+                </div>
+              </div>
+              <div class="row">
+                <div class="col-3 q-pa-xs" style="color: gray;">
+                  สาขาวิชาเอก
+                </div>
+                <div class="col-3 q-pa-xs">
+                  {{"xxxxxxxxxxxxx"}}
+                </div>
+                <div class="col-3 q-pa-xs" style="color: gray;">
+                  อื่นๆ
+                </div>
+                <div class="col-3 q-pa-xs">
+                  {{"XXXXXXXXXXXXXXXXX"}}
+                </div>
+              </div>
+            </div>
+
+
+            <div class="q-card q-card--bordered q-card--flat q-pa-sm">
+              <div class="col-12 row items-center q-pa-xs" style="font-weight: bold;">
+                การสอบ
+              </div>
+              <div class="row"> 
+                <!--  text-align: center; -->
+                <div class="col-2 q-pa-md" style="color: gray;">
+                  ประเภท
+                </div>
+                <div class="col-2 q-pa-xs" style="color: #259E75;">
+                  คะแนนเต็ม
+                </div>
+                <div class="col-2 q-pa-xs" style="color: #259E75;">
+                  คะแนนที่ได้
+                </div>
+                <div class="col-2 q-pa-xs" style="color: gray;">
+                  ผลการสอบ
+                </div>
+                <div class="col-2 q-pa-xs">
+                  {{"XXXXXXXXXXXXXXXXX"}}
+                </div>
+              </div>
+              <div class="row">
+                <div class="col-2 q-pa-xs" style="color: gray; ">
+                  ภาค ก
+                </div>
+              </div>
+
+              <div class="row">
+                <div class="col-2 q-pa-xs" style="color: gray; ">
+                  ภาค ข
+                </div>
+              </div>
+
+              <div class="row">
+                <div class="col-2 q-pa-xs" style="color: gray; ">
+                  ภาค ค
+                </div>
+              </div>
+
+              <div class="row">
+                <div class="col-2 q-pa-xs" style="color: gray; ">
+                  รวมทั้งหมด
+                </div>
+              </div>
+            </div>
+            <!-- Bright -->
+            <div class="q-card q-card--bordered q-card--flat q-pa-sm">
+              <div class="col-12 row items-center q-pa-sm" style="font-weight: bold;">
+                การคัดกรองคุณสมบัติ
+              </div>
+              <div >
+              <q-list >
+                <q-item 
+                  v-for="item in checkboxItems" 
+                  :key="item.id" 
+                  @click="item.selected = !item.selected" clickable>
+                  <q-item-section>
+                    <q-checkbox v-model="item.selected" color="green" keep-color :label="item.label" @click="selectedItem"/>
+                  </q-item-section>
+
+                  
+                </q-item>
+                <q-separator spaced inset />
+                <!-- @click="check(item.id, item.selected)" -->
+                <!-- <q-item>
+                  <q-checkbox keep-color v-model="chk" label="ไม่เป็นคนไร้ความสามารถ คนเสมือนไร้ความสามารถ คนวิกลจริตหรือจิตฟั่นเฟือน ไม่สมประกอบหรือเป็นโรคตามที่กำหนดในกฎ ก.พ." color="green"/>
+                </q-item>
+                <q-separator spaced inset />
+                
+                <q-item>
+                  <q-checkbox keep-color v-model="chk" label="ไม่เป็นผู้อยู่ในระหว่างถูกสั่งพักราชการหรือถูกสั่งให้ออกจากราชการไว้ก่อนตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น" color="green"/>
+                </q-item>
+                <q-separator spaced inset />
+                
+                <q-item>
+                  <q-checkbox keep-color v-model="chk" label="ไม่เป็นผู้บกพร่องในศีลธรรมอันดีจนเป็นที่รังเกียจของสังคม" color="green"/>
+                </q-item>
+                <q-separator spaced inset />
+                
+                <q-item>
+                  <q-checkbox keep-color v-model="chk" label="ไม่เป็นกรรมการหรือผู้ดำรงตำแหน่งที่รับผิดชอบในการบริหารพรรคการเมือง หรือเจ้าหน้าที่ในพรรคการเมือง" color="green"/>
+                </q-item>
+                <q-separator spaced inset />
+               
+                <q-item>
+                  <q-checkbox keep-color v-model="chk" label="ไม่เป็นบุคคลล้มละลาย" color="green"/>
+                </q-item>
+                <q-separator spaced inset />
+               
+                <q-item>
+                  <q-checkbox keep-color v-model="chk" label="ไม่เป็นผู้เคยต้องรับโทษจำคุกโดยคำพิพากษาถึงที่สุดให้จำคุกเพราะกระทำความผิดทางอาญา เว้นแต่เป็นโทษสำหรับความผิดที่ใด้กระทำโดยประมาทหรือความผิดลหุโทษ" color="green"/>
+                </q-item>
+                <q-separator spaced inset />
+                
+                <q-item>
+                  <q-checkbox keep-color v-model="chk" label="ไม่เป็นผู้เคยถูกลงโทษให้ออก ปลดออก หรือไล่ออกจากรัฐวิสาหกิจ หรือ หน่วยงานอื่นของรัฐ" color="green"/>
+                </q-item>
+                <q-separator spaced inset />
+               
+                <q-item>
+                  <q-checkbox keep-color v-model="chk" label="เป็นผู้เคยถูลงโทษให้ออก หรือปลดออก เพราะกระทำผิตวินัยตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น" color="green"/>
+                </q-item>
+                <q-separator spaced inset />
+                
+                <q-item>
+                  <q-checkbox keep-color v-model="chk" label="เป็นผู้เคยถูกลงโทษไล่ออก เพราะกระทำผิดวินัยตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น" color="green"/>
+                </q-item>
+                <q-separator spaced inset />
+                
+                <q-item>
+                  <q-checkbox keep-color v-model="chk" label="เป็นผู้เคยกระทำการทุจริตในการสอบเข้ารับราชการ หรือเข้าปฏิบัติงานใน หน่วยงานของรัฐ" color="green"/>
+                </q-item> -->
+
+              </q-list>
+              </div>
+            </div>
+
+          </q-card-section>
         <DialogFooter
           :save="clickSave"
           v-model:editvisible="edit"