diff --git a/src/modules/03_recruiting/views/01_compete/Detail.vue b/src/modules/03_recruiting/views/01_compete/Detail.vue
index ce598de3f..5be19e731 100644
--- a/src/modules/03_recruiting/views/01_compete/Detail.vue
+++ b/src/modules/03_recruiting/views/01_compete/Detail.vue
@@ -48,6 +48,7 @@
         :visible-columns="visibleColumns"
         v-model:inputfilter="filter"
         v-model:inputvisible="visibleColumns"
+        v-model:pagination="pagination"
         :nornmalData="false"
         :conclude="true"
       >
diff --git a/src/modules/05_placement/components/DialogFooter.vue b/src/modules/05_placement/components/DialogFooter.vue
index a99ee7515..3520adbd4 100644
--- a/src/modules/05_placement/components/DialogFooter.vue
+++ b/src/modules/05_placement/components/DialogFooter.vue
@@ -13,18 +13,7 @@
       <q-tooltip>แก้ไขข้อมูล</q-tooltip>
     </q-btn>
     <div v-else>
-      <!-- <q-btn
-        flat
-        round
-        :disabled="!editvisible"
-        :outline="!editvisible"
-        :color="!editvisible ? 'grey-7' : 'red'"
-        @click="cancel()"
-        icon="mdi-undo"
-        v-if="modalEdit == true"
-      >
-        <q-tooltip>ยกเลิก</q-tooltip>
-      </q-btn> -->
+
       <q-btn
         flat
         round
@@ -80,11 +69,6 @@ const edit = async () => {
 const checkSave = () => {
   props.validate();
   props.save();
-  //   if (myForm.value !== null) {
-  //     myForm.value.validate().then((success) => {
-  //       if (success) {
-  //       }
-  //     });
-  //   }
+
 };
 </script>
diff --git a/src/modules/05_placement/components/DialogHeader.vue b/src/modules/05_placement/components/DialogHeader.vue
index 93aa1f86e..f3af6c6c0 100644
--- a/src/modules/05_placement/components/DialogHeader.vue
+++ b/src/modules/05_placement/components/DialogHeader.vue
@@ -12,8 +12,8 @@
   </q-toolbar>
 </template>
 <script setup lang="ts">
-import { ref, useAttrs } from "vue";
 
+import { ref, useAttrs } from "vue";
 const props = defineProps({
   tittle: String,
   close: {
@@ -24,4 +24,5 @@ const props = defineProps({
 const close = async () => {
   props.close();
 };
+
 </script>
diff --git a/src/modules/05_placement/components/PlacementTable.vue b/src/modules/05_placement/components/PlacementTable.vue
index 963a53664..19b3112cd 100644
--- a/src/modules/05_placement/components/PlacementTable.vue
+++ b/src/modules/05_placement/components/PlacementTable.vue
@@ -16,6 +16,7 @@ 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>();
@@ -25,9 +26,18 @@ const ReportingDate = ref<string>();
 const BMAOfficer = ref<boolean>();
 const Status = ref<string>();
 const checkList = ref<string>();
-
-  const $q = useQuasar(); // show dialog
-
+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 selectData = (props: TableName) => {
   if (editvisible.value == true) {
     editRow.value = false;
@@ -42,7 +52,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;
@@ -50,6 +60,26 @@ 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",
@@ -71,8 +101,6 @@ 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",
@@ -93,8 +121,6 @@ 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",
@@ -126,8 +152,6 @@ 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",
@@ -150,7 +174,7 @@ const rows = ref<TableName[]>([
     ReportingDate: "30 พ.ค. 2566", //วันที่รายงานตัว
     BMAOfficer: true,
     Status: "บรรจุเเล้ว",
-    checkList:null
+    checkList: null,
   },
   {
     position: 1,
@@ -160,7 +184,7 @@ const rows = ref<TableName[]>([
     ReportingDate: "30 พ.ค. 2566", //วันที่รายงานตัว
     BMAOfficer: true,
     Status: "ยังไม่บรรจุ",
-    checkList:null
+    checkList: null,
   },
   {
     position: 1,
@@ -170,7 +194,7 @@ const rows = ref<TableName[]>([
     ReportingDate: "30 พ.ค. 2566", //วันที่รายงานตัว
     BMAOfficer: true,
     Status: "เตรียมบรรจุ",
-    checkList:null
+    checkList: null,
   },
 
   {
@@ -181,7 +205,7 @@ const rows = ref<TableName[]>([
     ReportingDate: "30 พ.ค. 2566", //วันที่รายงานตัว
     BMAOfficer: true,
     Status: "เตรียมบรรจุ",
-    checkList:null
+    checkList: null,
   },
 
   {
@@ -192,7 +216,7 @@ const rows = ref<TableName[]>([
     ReportingDate: "30 พ.ค. 2566", //วันที่รายงานตัว
     BMAOfficer: true,
     Status: "เตรียมบรรจุ",
-    checkList:null
+    checkList: null,
   },
   {
     position: 1,
@@ -202,7 +226,7 @@ const rows = ref<TableName[]>([
     ReportingDate: "30 พ.ค. 2566", //วันที่รายงานตัว
     BMAOfficer: true,
     Status: "บรรจุเเล้ว",
-    checkList:null
+    checkList: null,
   },
 ]);
 const clickCancel = async () => {
@@ -217,12 +241,15 @@ const clickClose = async () => {
       ok: "ยืนยัน",
       persistent: true,
     }).onOk(async () => {
+      modal_right.value = false;
       modal.value = false;
     });
   } else {
+    modal_right.value = false;
     modal.value = false;
   }
 };
+
 </script>
 <template>
   <q-form ref="myForm">
@@ -271,15 +298,6 @@ 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 }}
@@ -297,6 +315,7 @@ const clickClose = async () => {
                 round
                 size="14px"
                 icon="mdi-account-alert"
+                @click="editDetail(props.row, 'wait')"
               />
               <q-btn
                 color="red"
@@ -305,6 +324,7 @@ const clickClose = async () => {
                 round
                 size="14px"
                 icon="mdi-account-remove"
+                @click="editDetail(props.row, 'cancel')"
               />
             </div>
             <div v-else align="right">
@@ -315,6 +335,7 @@ const clickClose = async () => {
                 round
                 size="14px"
                 icon="mdi-account-remove"
+                @click="editDetail(props.row, 'cancel')"
               />
             </div>
           </q-td>
@@ -322,17 +343,62 @@ const clickClose = async () => {
       </template>
     </Table>
   </q-form>
-    <q-dialog v-model="modal" persistent>
+  <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 ref="myForm">
         <!-- :tittle="`${modalEdit ? 'แก้ไข' : 'สร้าง'}รายละเอียดของ...`" -->
         <DialogHeader
-          :tittle="`รายละเอียดของ`"
+          :tittle="`${modalEdit ? 'ขอผ่อนผัน' : 'สละสิทธิ์'} ชื่อ...`"
           :close="clickClose"
         />
         <q-separator />
         <q-card-section class="q-p-sm">
-     text
+          <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 />
         <DialogFooter