diff --git a/src/api/06_retirement/api.retirement.ts b/src/api/06_retirement/api.retirement.ts
index d8e373cb4..56df2a452 100644
--- a/src/api/06_retirement/api.retirement.ts
+++ b/src/api/06_retirement/api.retirement.ts
@@ -14,6 +14,12 @@ export default {
 
     //RetirementDeceased ถึงแก่กรรม
     listDeceased: () => `${retirement}/deceased`,
-    detailDeceased: (id: string) => `${retirement}/deceased/${id}`
+    detailDeceased: (id: string) => `${retirement}/deceased/${id}`,
+
+    // RetirementResign ระบบลาออก
+    listResign: () => `${retirement}/resign`,
+    resingByid: (id: string) => `${retirement}/resign/${id}`,
+    resignConfirm: (id: string) => `${retirement}/resign/confirm/${id}`,
+    resignReject: (id: string) => `${retirement}/resign/reject/${id}`,
 
 };
diff --git a/src/modules/06_retirement/components/resign/Resign.vue b/src/modules/06_retirement/components/resign/Resign.vue
index 8e936dcf9..0e76fbd8e 100644
--- a/src/modules/06_retirement/components/resign/Resign.vue
+++ b/src/modules/06_retirement/components/resign/Resign.vue
@@ -1,34 +1,18 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
 import type { QTableProps } from "quasar";
+import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
-const router = useRouter();
-const pagination = ref({
-    sortBy: "desc",
-    descending: false,
-    page: 1,
-    rowsPerPage: 10,
-  });
-  const paging = ref<boolean>(true);
-  const paginationLabel = (start: string, end: string, total: string) => {
-    if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
-    else return start + "-" + end + " ใน " + total;
-  };
-const visibleColumns = ref<string[]>([ "prefix", "fullname", "positionType", "position", "positionLevel", "positionExecutive", "oc", "status",]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
-const filterKeyword = ref<string>("");
-const filterRef = ref<any>(null);
-const resetFilter = () => {
-  filterKeyword.value = "";
-  filterRef.value.focus();
-};
+import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
-// const nextPage = (id:string) => {
-//   router.push("/retirement/resign/"+id);
-// };
-const rows = ref<any>([
-  { personalId:"0a846508-4932-40de-9a9e-5b519492217c",prefix: "นางสาว", fullname: "นางสาวอย พชช", positionType: "บริหาร", position: "นักบริหาร", positionLevel: "ต้น", positionExecutive: "ผู้ช่วยหัวหน้าสำนักงาน", oc: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร", status: "ยื่นลาออก",},
-  { personalId:"0a846508-4932-40de-9a9e-5b519492227c",prefix: "นางสาว", fullname: "นางสาววญ สพ", positionType: "วิชาการ", position: "นักจัดการงานทั่วไป", positionLevel: "ปฏิบัติการ", positionExecutive: "-", oc: "กลุ่มงานช่วยนักบริหาร", status: "ยื่นลาออก",},
-]);
+const router = useRouter();
+const mixin = useCounterMixin();
+const { messageError, date2Thai, showLoader, hideLoader } = mixin;
+const $q = useQuasar(); //ใช้ noti quasar
+
+const rows = ref<any>([]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "prefix",
@@ -103,6 +87,72 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
+const visibleColumns = ref<string[]>([
+  "prefix",
+  "fullname",
+  "positionType",
+  "position",
+  "positionLevel",
+  "positionExecutive",
+  "oc",
+  "status",
+]);
+
+onMounted(async () => {
+  await fecthlist();
+});
+
+const fecthlist = async () => {
+  showLoader();
+  await http
+    .get(config.API.listResign())
+    .then((res: any) => {
+      console.log(res);
+      let data = res.data.result;
+      rows.value = data.map((e: any) => ({
+        personalId: e.id,
+        profileId: e.profileId,
+        prefix: e.prefix,
+        fullname: e.firstName + "   " + e.lastName,
+        positionType: e.positionType,
+        position: e.positionLine,
+        positionLevel: e.positionLevel,
+        positionExecutive: e.positionExecutive,
+        oc: e.organizationOrganization,
+        status: e.status,
+      }));
+    })
+    .catch((e: any) => {
+      console.log(e);
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const paging = ref<boolean>(true);
+const pagination = ref({
+  sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+const paginationLabel = (start: string, end: string, total: string) => {
+  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
+  else return start + "-" + end + " ใน " + total;
+};
+//ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+const filterKeyword = ref<string>("");
+const filterRef = ref<any>(null);
+const resetFilter = () => {
+  filterKeyword.value = "";
+  filterRef.value.focus();
+};
+
+// const nextPage = (id:string) => {
+//   router.push("/retirement/resign/"+id);
+// };
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">รายการลาออก</div>
@@ -111,25 +161,6 @@ const columns = ref<QTableProps["columns"]>([
     <div class="col-12 row q-pa-md">
       <div class="row col-12">
         <div class="row col-12 q-col-gutter-sm">
-          <!-- <q-select
-            v-model="fiscalyear"
-            label="ปีงบประมาณ"
-            dense
-            emit-value
-            map-options
-            :options="fiscalyearOP"
-            option-value="id"
-            option-label="name"
-            lazy-rules
-            hide-bottom-space
-            :readonly="false"
-            :borderless="false"
-            :outlined="true"
-            :hide-dropdown-icon="false"
-            style="min-width: 150px"
-            @update:model-value="searchFilterTable"
-          /> -->
-
           <q-space />
 
           <q-input
@@ -183,19 +214,23 @@ const columns = ref<QTableProps["columns"]>([
             class="custom-header-table"
             :visible-columns="visibleColumns"
             :pagination-label="paginationLabel"
-              v-model:pagination="pagination"
+            v-model:pagination="pagination"
           >
-          
             <template v-slot:header="props">
               <q-tr :props="props">
                 <q-th v-for="col in props.cols" :key="col.name" :props="props">
                   <span class="text-weight-medium">{{ col.label }}</span>
                 </q-th>
-                <q-th auto-width />
               </q-tr>
             </template>
             <template v-slot:body="props">
-              <q-tr :props="props" class="cursor-pointer" @click=" router.push(`/retirement/resign/${props.rowIndex + 1}`)">
+              <q-tr
+                :props="props"
+                class="cursor-pointer"
+                @click="
+                  router.push(`/retirement/resign/${props.row.personalId}`)
+                "
+              >
                 <!-- <q-td key="no" :props="props">
                   {{ props.rowIndex + 1 }}
                 </q-td> -->
@@ -220,10 +255,30 @@ const columns = ref<QTableProps["columns"]>([
                 <q-td key="oc" :props="props">
                   {{ props.row.oc }}
                 </q-td>
-                <q-td key="status" :props="props">
-                  {{ props.row.status }}
-                </q-td>
 
+                <q-td key="status" :props="props">
+                  <q-icon
+                    size="20px"
+                    v-if="props.row.status == 'PENDING'"
+                    name="mdi-timer-sand"
+                    color="deep-orange"
+                  >
+                    <q-tooltip>รอดำเนินการ</q-tooltip>
+                  </q-icon>
+                  <q-icon
+                    size="20px"
+                    v-else-if="props.row.status == 'APPROVE'"
+                    name="mdi-check"
+                    color="teal"
+                  >
+                    <q-tooltip>เสร็จสิ้น</q-tooltip>
+                  </q-icon>
+                  <q-icon size="20px" v-else name="mdi-close" color="red">
+                    <q-tooltip>ยับยั้ง</q-tooltip>
+                  </q-icon>
+
+                  <!-- {{ props.row.status }} -->
+                </q-td>
               </q-tr>
             </template>
             <template v-slot:pagination="scope">
@@ -245,34 +300,34 @@ const columns = ref<QTableProps["columns"]>([
   </q-card>
 </template>
 <style scoped lang="scss">
-  .custom-header-table {
-    max-height: 64vh;
-  
-    .q-table tr:nth-child(odd) td {
-      background: white;
-    }
-  
-    .q-table tr:nth-child(even) td {
-      background: #f8f8f8;
-    }
-  
-    .q-table thead tr {
-      background: #ecebeb;
-    }
-  
-    .q-table thead tr th {
-      position: sticky;
-      z-index: 1;
-    }
-  
-    /* this will be the loading indicator */
-    .q-table thead tr:last-child th {
-      /* height of all previous header rows */
-      top: 48px;
-    }
-  
-    .q-table thead tr:first-child th {
-      top: 0;
-    }
+.custom-header-table {
+  max-height: 64vh;
+
+  .q-table tr:nth-child(odd) td {
+    background: white;
   }
-</style>
\ No newline at end of file
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+    z-index: 1;
+  }
+
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>
diff --git a/src/modules/06_retirement/components/resign/ResignByid.vue b/src/modules/06_retirement/components/resign/ResignByid.vue
index 8c191671d..87822d692 100644
--- a/src/modules/06_retirement/components/resign/ResignByid.vue
+++ b/src/modules/06_retirement/components/resign/ResignByid.vue
@@ -1,106 +1,146 @@
 <template>
-    <div class="toptitle text-dark col-12 row items-center">
-        <q-btn
-            icon="mdi-arrow-left"
-            unelevated
-            round
-            dense
-            flat
-            color="primary"
-            class="q-mr-sm"
-            @click="router.go(-1)"
-        />
-        รายละเอียดการลาออกของ {{ name }}
-				
+  <div class="toptitle text-dark col-12 row items-center">
+    <q-btn
+      icon="mdi-arrow-left"
+      unelevated
+      round
+      dense
+      flat
+      color="primary"
+      class="q-mr-sm"
+      @click="router.go(-1)"
+    />
+    รายละเอียดการลาออกของ
+    {{ dataDetail.firstName + "  " + dataDetail.lastName }}
+  </div>
+  <q-card bordered class="row col-12 text-dark">
+    <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+      <div class="q-pl-sm text-weight-bold text-subtitle2">
+        {{ dataDetail.firstName + "  " + dataDetail.lastName }}
+      </div>
+      <q-space />
+      <q-btn
+        outline
+        color="blue"
+        dense
+        icon-right="mdi-open-in-new"
+        class="q-px-sm"
+        label="ดูข้อมูลทะเบียนประวัติ"
+        @click="redirectToRegistry(dataDetail.profileId)"
+      />
     </div>
-    <q-card bordered class="row col-12 text-dark">
-			<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-				<div class="q-pl-sm text-weight-bold text-subtitle2">{{ name }}</div>
-				<q-space />
-				<q-btn outline color="blue" dense icon-right="mdi-open-in-new" class="q-px-sm" label="ดูข้อมูลทะเบียนประวัติ" />
-			</div>
-			<div class="col-12"><q-separator/></div>
-			<div class="row col-12 q-pa-md">
-				<div class="col-12 row bg-white q-col-gutter-md">
-					<div class="col-xs-3 col-sm-2 col-md-1 row ">
-						<q-img src="@/assets/avatar_user.jpg" />
-					</div>
-					<div class="col-xs-6 col-sm-3 row items-center">
-						<div class="col-12 q-pl-md">
-							<div class="col-12 text-top">ตำแหน่งในสายงาน</div>
-							<div class="col-12 text-detail">{{position}}</div>
-						</div>
-					</div>
-					<div class="col-xs-6 col-sm-2 row items-center">
-						<div class="col-12">
-							<div class="col-12 text-top">ระดับ</div>
-							<div class="col-12 text-detail">{{level}}</div>
-						</div>
-					</div>
-					<div class="col-xs-6 col-sm-3 row items-center">
-						<div class="col-12">
-							<div class="col-12 text-top">สังกัด</div>
-							<div class="col-12 text-detail">{{institution}}</div>
-						</div>
-					</div>
-					<div class="col-xs-6 col-sm-3 row items-center">
-						<div class="col-12">
-							<div class="col-12 text-top">สถานะ</div>
-							<div class="col-12 text-detail">
-								<q-icon size="20px" v-if="status == 'อยู่ระหว่างการพิจารณา'" name="mdi-timer-sand" color="deep-orange" />
-								<q-icon size="20px" v-else-if="status == 'อนุมัติ'" name="mdi-close" color="red" />
-								<q-icon size="20px" v-else name="mdi-check" color="teal" />
-								{{ status }}
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-    </q-card>
+    <div class="col-12"><q-separator /></div>
+    <div class="row col-12 q-pa-md">
+      <div class="col-12 row bg-white q-col-gutter-md">
+        <div class="col-xs-3 col-sm-2 col-md-1 row">
+          <q-img src="@/assets/avatar_user.jpg" />
+        </div>
+        <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-12 q-pl-md">
+            <div class="col-12 text-top">ตำแหน่งในสายงาน</div>
+            <div class="col-12 text-detail">{{ dataDetail.positionLine }}</div>
+          </div>
+        </div>
+        <div class="col-xs-6 col-sm-2 row items-center">
+          <div class="col-12">
+            <div class="col-12 text-top">ระดับ</div>
+            <div class="col-12 text-detail">{{ dataDetail.positionLevel }}</div>
+          </div>
+        </div>
+        <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-12">
+            <div class="col-12 text-top">สังกัด</div>
+            <div class="col-12 text-detail">
+              {{ dataDetail.organizationOrganization }}
+            </div>
+          </div>
+        </div>
+        <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-12">
+            <div class="col-12 text-top">สถานะ</div>
+            <div class="col-12 text-detail">
+              <q-icon
+                size="20px"
+                v-if="dataDetail.status == 'PENDING'"
+                name="mdi-timer-sand"
+                color="deep-orange"
+              />
+              <q-icon
+                size="20px"
+                v-else-if="dataDetail.status == 'APPROVE'"
+                name="mdi-check"
+                color="teal"
+              />
+              <q-icon size="20px" v-else name="mdi-close" color="red" />
+              {{ statusName(dataDetail.status) }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </q-card>
 
-	<q-card bordered class="row col-12 text-dark q-mt-sm">
-			<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-				<div class="q-pl-sm text-weight-bold text-dark">ข้อมูลการลาออก</div>
-				<q-space />
-				<div class="q-gutter-x-sm">
-					<q-btn outline color="primary" dense icon-right="check" class="q-px-sm" label="อนุมัติ" @click="popUp('pass')" />
-					<q-btn outline color="red" dense icon-right="close" class="q-px-sm" label="ยับยั้ง" @click="popUp('passNot')"/>
+  <q-card bordered class="row col-12 text-dark q-mt-sm">
+    <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+      <div class="q-pl-sm text-weight-bold text-dark">ข้อมูลการลาออก</div>
+      <q-space />
+      <div class="q-gutter-x-sm" v-if="dataDetail.status === 'PENDING'">
+        <q-btn
+          outline
+          color="primary"
+          dense
+          icon-right="check"
+          class="q-px-sm"
+          label="อนุมัติ"
+          @click="popUp('pass')"
+        />
+        <q-btn
+          outline
+          color="red"
+          dense
+          icon-right="close"
+          class="q-px-sm"
+          label="ยับยั้ง"
+          @click="popUp('passNot')"
+        />
+      </div>
+    </div>
+    <div class="col-12"><q-separator /></div>
+    <div class="row col-12 q-pa-md">
+      <div class="col-12 row bg-white q-col-gutter-md">
+        <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-12">
+            <div class="col-12 text-top">สถานที่ยื่นขอลาออกจากราชการ</div>
+            <div class="col-12 text-detail">{{ dataDetail.location }}</div>
+          </div>
+        </div>
+        <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-12">
+            <div class="col-12 text-top">วันที่ยื่นขอลาออกจากราชการ</div>
+            <div class="col-12 text-detail">
+              {{ date2Thai(dataDetail.sendDate) }}
+            </div>
+          </div>
+        </div>
+        <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-12">
+            <div class="col-12 text-top">เหตุผลที่ลาออกจากราชการ</div>
+            <div class="col-12 text-detail">{{ dataDetail.reason }}</div>
+          </div>
+        </div>
+        <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-12">
+            <div class="col-12 text-top">วันที่ขอลาออกจากราชการ</div>
+            <div class="col-12 text-detail">
+              {{ date2Thai(dataDetail.activeDate) }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </q-card>
 
-				</div>
-				
-			</div>
-			<div class="col-12"><q-separator/></div>
-			<div class="row col-12 q-pa-md">
-				<div class="col-12 row bg-white q-col-gutter-md">
-					<div class="col-xs-6 col-sm-3 row items-center">
-						<div class="col-12 ">
-							<div class="col-12 text-top">สถานที่ยื่นขอลาออกจากราชการ</div>
-							<div class="col-12 text-detail">{{location}}</div>
-						</div>
-					</div>
-					<div class="col-xs-6 col-sm-3 row items-center">
-						<div class="col-12">
-							<div class="col-12 text-top">วันที่ยื่นขอลาออกจากราชการ</div>
-							<div class="col-12 text-detail">{{filingDate}}</div>
-						</div>
-					</div>
-					<div class="col-xs-6 col-sm-3 row items-center">
-						<div class="col-12 ">
-							<div class="col-12 text-top">เหตุผลที่ลาออกจากราชการ</div>
-							<div class="col-12 text-detail">{{reason}}</div>
-						</div>
-					</div>
-					<div class="col-xs-6 col-sm-3 row items-center">
-						<div class="col-12">
-							<div class="col-12 text-top">วันที่ขอลาออกจากราชการ</div>
-							<div class="col-12 text-detail">{{requestDate}}</div>
-						</div>
-					</div>
-				</div>
-			</div>
-    </q-card>
-
-	<q-dialog v-model="modalPass" persistent>
+  <!-- <q-dialog v-model="modalPass" persistent>
     <q-card style="width: 800px">
       <q-form ref="myForm">
         <DialogHeader
@@ -114,7 +154,7 @@
               hide-bottom-space
               dense
               lazy-rules
-			  outlined 
+              outlined
               :rules="[(val) => !!val || 'กรุณากรอกเหตุผล']"
               v-model="userNote"
               :label="`${'กรอกเหตุผล'}`"
@@ -130,7 +170,7 @@
       </q-form>
     </q-card>
   </q-dialog>
-  	<q-dialog v-model="modalPassNot" persistent>
+  <q-dialog v-model="modalPassNot" persistent>
     <q-card style="width: 800px">
       <q-form ref="myForm">
         <DialogHeader
@@ -143,7 +183,7 @@
             <q-input
               hide-bottom-space
               dense
-			  outlined 
+              outlined
               lazy-rules
               :rules="[(val) => !!val || 'กรุณากรอกเหตุผล']"
               v-model="userNote"
@@ -159,203 +199,173 @@
         />
       </q-form>
     </q-card>
-  </q-dialog>
+  </q-dialog> -->
 </template>
 <script setup lang="ts">
-import { useRouter } from "vue-router";
+import { useRouter, useRoute } from "vue-router";
 import { useQuasar, QForm } from "quasar";
-import { ref, useAttrs } from "vue";
-import type { QTableProps } from "quasar";
-import type { FormProbationDetail } from "@/modules/05_placement/interface/request/Main";
-import DialogFooter from "@/modules/05_placement/components/PersonalList/DialogFooter.vue";
-import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
+import { ref, onMounted } from "vue";
+// import DialogFooter from "@/modules/05_placement/components/PersonalList/DialogFooter.vue";
+// import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
+import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
 const router = useRouter();
-const userNote = ref<string>("");
-const name = ref<string>('นายสมคิด ยอดใจ')
-const position = ref<string>('นักจัดการงานทั่วไป')
-const level = ref<string>('ชำนาญการพิเศษ')
-const institution = ref<string>('ฝ่ายบริหารงานทั่วไป')
-const status = ref<string>('อยู่ระหว่างการพิจารณา')
-const edit = ref<boolean>(true)
-const location = ref<string>('ที่ทำงาน') 
-const filingDate = ref<string>('21 ก.ค. 2566')
-const reason = ref<string>('เพราะxxx') 
-const requestDate = ref<string>('21 ธ.ค. 2566')
-	const $q = useQuasar();
-const modalPass = ref<boolean>(false);
-const modalPassNot = ref<boolean>(false);
-const pagination = ref({
-  sortBy: "desc",
-  descending: false,
-  page: 1,
-  rowsPerPage: 10,
+const route = useRoute();
+const mixin = useCounterMixin();
+const { messageError, date2Thai, showLoader, hideLoader, success } = mixin;
+const $q = useQuasar();
+const id = ref<string>(route.params.id.toString());
+
+const dataDetail = ref<any>([]);
+
+// const modalPass = ref<boolean>(false);
+// const modalPassNot = ref<boolean>(false);
+onMounted(() => {
+  fetchData(id.value);
 });
-
-const visibleColumns = ref<string[]>([
-  "no",
-  "startDate",
-	"endDete",
-  "intendant",
-  "commander",
-]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
-
-// หัวตาราง
-const columns = ref<QTableProps["columns"]>([
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับ",
-    sortable: true,
-    field: "no",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "startDate",
-    align: "left",
-    label: "ตั้งแต่วันที่",
-    sortable: true,
-    field: "startDate",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-	{
-    name: "endDete",
-    align: "left",
-    label: "ถึงวันที่",
-    sortable: true,
-    field: "endDete",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-	{
-    name: "intendant",
-    align: "left",
-    label: "ผู้ดูแล",
-    sortable: true,
-    field: "intendant",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-	{
-    name: "commander",
-    align: "left",
-    label: "ผู้บังคับบัญชา",
-    sortable: true,
-    field: "commander",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  }
-]);
-
-// ข้อมูลตาราง (จำลอง)
-const rows = ref<FormProbationDetail[]>([
-  {
-		no: "1",
-		startDate: "09 ก.ย. 2566",
-		endDete: "20 ต.ค. 2566",
-  	intendant: "นางสาวรัชภรณ์ ภักดี",
-  	commander: "นายนภัทร  วันดี"
-	},
-	{
-		no: "2",
-		startDate: "09 ก.ย. 2566",
-		endDete: "20 ต.ค. 2566",
-  	intendant: "นางสาวทวิดา กมลเวชชี",
-  	commander: "นางพิศ โพธิ์ดำ"
-	},
-	{
-		no: "3",
-		startDate: "09 ก.ย. 2566",
-		endDete: "20 ต.ค. 2566",
-  	intendant: "นางสาวทวิดา กมลเวชชี",
-  	commander: "นายนภัทร  วันดี"
-	},
-]);
-
-const clickAdd = () => {
+const fetchData = async (id: string) => {
+  showLoader();
+  await http
+    .get(config.API.resingByid(id))
+    .then((res: any) => {
+      dataDetail.value = res.data.result;
+      // console.log(dataDetail.value);
+    })
+    .catch((e) => {
+      console.log(e);
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 };
-
-// ค้นหาในตาราง
-const filterKeyword = ref<string>("");
-const filterRef = ref<any>(null);
-const resetFilter = () => {
-  filterKeyword.value = "";
-  filterRef.value.focus();
-};
-
-const attrs = ref<any>(useAttrs());
-
-const paging = ref<boolean>(true);
-const paginationLabel = (start: string, end: string, total: string) => {
-  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
-  else return start + "-" + end + " ใน " + total;
-};
-const popUp = (action: "pass" | "passNot" ) => {
+const popUp = (action: "pass" | "passNot") => {
   if (action === "pass") {
-    modalPass.value = true;
+    $q.dialog({
+      title: "ยืนยันการอนุมัติการลาออก",
+      message: "ต้องการยืนยันอนุมัติการลาออกนี้ใช่หรือไม่?",
+      cancel: {
+        flat: true,
+        color: "negative",
+      },
+      persistent: true,
+    }).onOk(async () => {
+      confirmpopUp();
+    });
   } else if (action === "passNot") {
-    modalPassNot.value = true;
-  } 
+    $q.dialog({
+      title: "ยืนยันการยับยั้งการลาออก",
+      message: "ต้องการยืนยันการยับยั้งการลาออกนี้ใช่หรือไม่?",
+      cancel: {
+        flat: true,
+        color: "negative",
+      },
+      persistent: true,
+    }).onOk(async () => {
+      rejectpopUp();
+    });
+  }
 };
-const clickClose = () =>{
-  userNote.value = ""
-	modalPass.value = false
-	modalPassNot.value = false
-}
-const savePass = () =>{
-
-	$q.dialog({
-        title: "ยืนยันการขอลาออก",
-        message: "ต้องการยืนยันการขอลาออกข้อมูลนี้ใช่หรือไม่ ?",
-        cancel: {
-          flat: true,
-          const: "negative",
-        },
-        persistent: true,
-      })
-        .onOk(() => {
-          modalPass.value = false
-          console.log('----MSG---- :',userNote.value)
-          console.log('passSave (close)')
-          userNote.value = ""
-        }).onCancel(() => {})
-        .onDismiss(() => {});
-}
-
-const savePassNot = () => {
-  $q.dialog({
-        title: "ยืนยันการขอลาออก",
-        message: "ต้องการยืนยันการขอลาออกข้อมูลนี้ใช่หรือไม่ ?",
-        cancel: {
-          flat: true,
-          const: "negative",
-        },
-        persistent: true,
-      })
-        .onOk(() => {
-          modalPass.value = false
-          console.log('----MSG---- :',userNote.value)
-          console.log('passSaveNot (close)')
-          userNote.value = ""
-        }).onCancel(() => {})
-        .onDismiss(() => {});
-}
-
+const confirmpopUp = async () => {
+  await http
+    .get(config.API.resignConfirm(id.value))
+    .then(() => {
+      console.log("ยืนยัน");
+      success($q, "บันทึกสำเร็จ");
+    })
+    .catch((e) => {
+      console.log(e);
+      messageError($q, e);
+    })
+    .finally(() => {
+      fetchData(id.value);
+    });
+};
+const rejectpopUp = async () => {
+  console.log("ยกเลิก");
+  await http
+    .get(config.API.resignReject(id.value))
+    .then(() => {
+      success($q, "บันทึกสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      fetchData(id.value);
+    });
+};
+const redirectToRegistry = (id: string) => {
+  router.push(`/registry/${id}`);
+};
+const statusName = (val: string) => {
+  switch (val) {
+    case "PENDING":
+      return "รอดำเนินการ";
+    case "APPROVE":
+      return "อนุมัติ";
+    case "REJECT":
+      return "ยับยั้ง";
+  }
+};
+// const clickClose = () => {
+//   userNote.value = "";
+//   modalPass.value = false;
+//   modalPassNot.value = false;
+// };
+// const savePass = () => {
+//   $q.dialog({
+//     title: "ยืนยันการขอลาออก",
+//     message: "ต้องการยืนยันการขอลาออกข้อมูลนี้ใช่หรือไม่ ?",
+//     cancel: {
+//       flat: true,
+//       const: "negative",
+//     },
+//     persistent: true,
+//   })
+//     .onOk(() => {
+//       modalPass.value = false;
+//       console.log("----MSG---- :", userNote.value);
+//       console.log("passSave (close)");
+//       userNote.value = "";
+//     })
+//     .onCancel(() => {})
+//     .onDismiss(() => {});
+// };
+// const savePassNot = () => {
+//   $q.dialog({
+//     title: "ยืนยันการขอลาออก",
+//     message: "ต้องการยืนยันการขอลาออกข้อมูลนี้ใช่หรือไม่ ?",
+//     cancel: {
+//       flat: true,
+//       const: "negative",
+//     },
+//     persistent: true,
+//   })
+//     .onOk(() => {
+//       modalPass.value = false;
+//       console.log("----MSG---- :", userNote.value);
+//       console.log("passSaveNot (close)");
+//       userNote.value = "";
+//     })
+//     .onCancel(() => {})
+//     .onDismiss(() => {});
+// };
 </script>
 <style lang="scss" scope>
 .q-img {
   border-radius: 5px;
-	height: 70px;
+  height: 70px;
 }
-.text-top{
-	color: gray;
-	font-weight: 400;
-	padding-bottom: 3px;
+.text-top {
+  color: gray;
+  font-weight: 400;
+  padding-bottom: 3px;
 }
-.text-detail{
-	font-weight: 500;
-
+.text-detail {
+  font-weight: 500;
 }
 .custom-header-table {
   max-height: 64vh;
@@ -387,4 +397,4 @@ const savePassNot = () => {
     top: 0;
   }
 }
-</style>
\ No newline at end of file
+</style>