diff --git a/src/modules/05_placement/components/probation/MainProbation.vue b/src/modules/05_placement/components/probation/MainProbation.vue
index 523469728..7ce476fae 100644
--- a/src/modules/05_placement/components/probation/MainProbation.vue
+++ b/src/modules/05_placement/components/probation/MainProbation.vue
@@ -186,10 +186,10 @@ const getpersonalList = async () => {
         organization: item.organization,
         probation_no: item.probation_no,
         order_number: item.order_number,
-        probation_status: statusProbationMain(item.probation_status),
+        probation_status: statusProbationMain(Number(item.probation_status)),
       }));
     })
-    .catch(() => {})
+    .catch(() => { })
     .finally(() => {
       hideLoader();
     });
@@ -208,7 +208,7 @@ const fecthlistPersonal = async () => {
     .catch((e) => {
       messageError($q, e);
     })
-    .finally(() => {});
+    .finally(() => { });
 };
 const fecthlistProbation = async (id: string, data: any) => {
   try {
@@ -284,20 +284,24 @@ const clickAdd = (id: string) => {
 const clickClose = async () => {
   modal.value = false;
 };
-const statusProbationMain = (val: string) => {
+const statusProbationMain = (val: number) => {
   switch (val) {
-    case "1":
+    case 1:
       return "อยู่ระหว่างการทดลองปฏิบัติหน้าที่ราชการ";
-    case "2":
+    case 2:
       return "พ้นการทดลองปฏิบัติหน้าที่ราชการ";
-    case "3":
+    case 3:
       return "ไม่พ้นการทดลองปฏิบัติหน้าที่ราชการ";
-    case "4":
+    case 4:
       return "ยุติการทดลองปฏิบัติหน้าที่ราชการเนื่องจากเปลี่ยนตำแหน่ง";
-    case "5":
+    case 5:
       return "ยุติการทดลองปฏิบัติหน้าที่ราชการเนื่องจากลาออก";
-    case "6":
+    case 6:
       return "ยุติการทดลองปฏิบัติหน้าที่ราชการเนื่องจากถึงแก่กรรม";
+    case 7:
+      return "ขยายระยะเวลาทดลองปฏิบัติหน้าที่ราชการ";
+    case 8:
+      return "ดึงรายชื่อไปออกคำสั่งแล้ว";
     default:
       return " ";
   }
@@ -359,73 +363,28 @@ const paginationLabel2 = (start: string, end: string, total: string) => {
     <div class="row q-col-gutter-sm">
       <div class="row col-12 q-col-gutter-sm">
         <div>
-          <q-btn
-            @click="fecthlistPersonal"
-            size="12px"
-            flat
-            round
-            color="add"
-            icon="mdi-plus"
-          >
+          <q-btn @click="fecthlistPersonal" size="12px" flat round color="add" icon="mdi-plus">
             <q-tooltip>เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ</q-tooltip>
           </q-btn>
         </div>
         <q-space />
 
-        <q-input
-          class="col-xs-12 col-sm-3 col-md-2"
-          standout
-          dense
-          v-model="filterKeyword"
-          ref="filterRef"
-          outlined
-          debounce="300"
-          placeholder="ค้นหา"
-        >
+        <q-input class="col-xs-12 col-sm-3 col-md-2" standout dense v-model="filterKeyword" ref="filterRef" outlined
+          debounce="300" placeholder="ค้นหา">
           <template v-slot:append>
             <q-icon v-if="filterKeyword == ''" name="search" />
-            <q-icon
-              v-if="filterKeyword !== ''"
-              name="clear"
-              class="cursor-pointer"
-              @click="resetFilter"
-            />
+            <q-icon v-if="filterKeyword !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
           </template>
         </q-input>
 
-        <q-select
-          v-model="visibleColumns"
-          multiple
-          outlined
-          dense
-          options-dense
-          :display-value="$q.lang.table.columns"
-          emit-value
-          map-options
-          :options="columns"
-          option-value="name"
-          options-cover
-          style="min-width: 150px"
-          class="col-xs-12 col-sm-3 col-md-2"
-        />
+        <q-select v-model="visibleColumns" multiple outlined dense options-dense :display-value="$q.lang.table.columns"
+          emit-value map-options :options="columns" option-value="name" options-cover style="min-width: 150px"
+          class="col-xs-12 col-sm-3 col-md-2" />
       </div>
       <div class="col-12">
-        <q-table
-          ref="table"
-          :columns="columns"
-          :rows="rows"
-          :filter="filterKeyword"
-          row-key="Order"
-          flat
-          bordered
-          :paging="true"
-          dense
-          class="custom-header-table"
-          v-bind="attrs"
-          :visible-columns="visibleColumns"
-          :pagination-label="paginationLabel"
-          v-model:pagination="pagination"
-        >
+        <q-table ref="table" :columns="columns" :rows="rows" :filter="filterKeyword" row-key="Order" flat bordered
+          :paging="true" dense class="custom-header-table" v-bind="attrs" :visible-columns="visibleColumns"
+          :pagination-label="paginationLabel" 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">
@@ -434,11 +393,8 @@ const paginationLabel2 = (start: string, end: string, total: string) => {
             </q-tr>
           </template>
           <template v-slot:body="props">
-            <q-tr
-              :props="props"
-              class="cursor-pointer"
-              @click="router.push(`/probation/detail/${props.row.personal_id}`)"
-            >
+            <q-tr :props="props" class="cursor-pointer"
+              @click="router.push(`/probation/detail/${props.row.personal_id}`)">
               <q-td v-for="col in props.cols" :key="col.name" :props="props">
                 <div v-if="col.name == 'no'">
                   {{ props.rowIndex + 1 }}
@@ -487,16 +443,8 @@ const paginationLabel2 = (start: string, end: string, total: string) => {
             </q-tr>
           </template>
           <template v-slot:pagination="scope">
-            <q-pagination
-              v-model="pagination.page"
-              active-color="primary"
-              color="dark"
-              :max="scope.pagesNumber"
-              :max-pages="5"
-              size="sm"
-              boundary-links
-              direction-links
-            ></q-pagination>
+            <q-pagination v-model="pagination.page" active-color="primary" color="dark" :max="scope.pagesNumber"
+              :max-pages="5" size="sm" boundary-links direction-links></q-pagination>
           </template>
         </q-table>
       </div>
@@ -506,55 +454,23 @@ const paginationLabel2 = (start: string, end: string, total: string) => {
   <q-dialog v-model="modal" persistent>
     <q-card style="width: 900px; max-width: 80vw">
       <q-form ref="myForm">
-        <DialogHeader
-          tittle="เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ "
-          :close="clickClose"
-        />
+        <DialogHeader tittle="เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ " :close="clickClose" />
         <q-separator />
         <q-card-section class="q-pa-md q-col-gutter-sm">
-          <q-input
-            class="col-12"
-            standout
-            dense
-            v-model="filterKeyword2"
-            ref="filterRef2"
-            outlined
-            debounce="300"
-            placeholder="ค้นหา"
-          >
+          <q-input class="col-12" standout dense v-model="filterKeyword2" ref="filterRef2" outlined debounce="300"
+            placeholder="ค้นหา">
             <template v-slot:append>
               <q-icon v-if="filterKeyword2 == ''" name="search" />
-              <q-icon
-                v-if="filterKeyword2 !== ''"
-                name="clear"
-                class="cursor-pointer"
-                @click="resetFilter2"
-              />
+              <q-icon v-if="filterKeyword2 !== ''" name="clear" class="cursor-pointer" @click="resetFilter2" />
             </template>
           </q-input>
           <div class="col-12">
-            <q-table
-              ref="table2"
-              :columns="columns2"
-              :rows="rows2"
-              :filter="filterKeyword2"
-              row-key="Order"
-              flat
-              bordered
-              :paging="true"
-              dense
-              class="custom-header-table"
-              v-bind="attrs"
-              :pagination-label="paginationLabel2"
-              v-model:pagination="pagination2"
-            >
+            <q-table ref="table2" :columns="columns2" :rows="rows2" :filter="filterKeyword2" row-key="Order" flat bordered
+              :paging="true" dense class="custom-header-table" v-bind="attrs" :pagination-label="paginationLabel2"
+              v-model:pagination="pagination2">
               <template v-slot:header="props">
                 <q-tr :props="props">
-                  <q-th
-                    v-for="col in props.cols"
-                    :key="col.name"
-                    :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 />
@@ -562,11 +478,7 @@ const paginationLabel2 = (start: string, end: string, total: string) => {
               </template>
               <template v-slot:body="props">
                 <q-tr :props="props" class="cursor-pointer">
-                  <q-td
-                    v-for="col in props.cols"
-                    :key="col.name"
-                    :props="props"
-                  >
+                  <q-td v-for="col in props.cols" :key="col.name" :props="props">
                     <div v-if="col.name == 'no'">
                       {{ props.rowIndex + 1 }}
                     </div>
@@ -575,29 +487,14 @@ const paginationLabel2 = (start: string, end: string, total: string) => {
                     </div>
                   </q-td>
                   <q-td auto-width>
-                    <q-btn
-                      dense
-                      class="q-px-md"
-                      outline
-                      color="primary"
-                      label="เพิ่ม"
-                      @click="clickAdd(props.row.id)"
-                    >
+                    <q-btn dense class="q-px-md" outline color="primary" label="เพิ่ม" @click="clickAdd(props.row.id)">
                     </q-btn>
                   </q-td>
                 </q-tr>
               </template>
               <template v-slot:pagination="scope">
-                <q-pagination
-                  v-model="pagination2.page"
-                  active-color="primary"
-                  color="dark"
-                  :max="scope.pagesNumber"
-                  :max-pages="5"
-                  size="sm"
-                  boundary-links
-                  direction-links
-                ></q-pagination>
+                <q-pagination v-model="pagination2.page" active-color="primary" color="dark" :max="scope.pagesNumber"
+                  :max-pages="5" size="sm" boundary-links direction-links></q-pagination>
               </template>
             </q-table>
           </div>
diff --git a/src/modules/05_placement/components/probation/ProbationDetail.vue b/src/modules/05_placement/components/probation/ProbationDetail.vue
index 0a61ede7d..21401632f 100644
--- a/src/modules/05_placement/components/probation/ProbationDetail.vue
+++ b/src/modules/05_placement/components/probation/ProbationDetail.vue
@@ -88,29 +88,37 @@ const rows = ref<FormProbationDetail[]>([]);
 
 const probation_statusOP = ref<any>([
   {
-    id: "1",
+    id: 1,
     label: "อยู่ระหว่างการทดลองปฏิบัติหน้าที่ราชการ",
   },
   {
-    id: "2",
+    id: 2,
     label: "พ้นการทดลองปฏิบัติหน้าที่ราชการ",
   },
   {
-    id: "3",
+    id: 3,
     label: "ไม่พ้นการทดลองปฏิบัติหน้าที่ราชการ",
   },
   {
-    id: "4",
+    id: 4,
     label: "ยุติการทดลองปฏิบัติหน้าที่ราชการเนื่องจากเปลี่ยนตำแหน่ง",
   },
   {
-    id: "5",
+    id: 5,
     label: "ยุติการทดลองปฏิบัติหน้าที่ราชการเนื่องจากลาออก",
   },
   {
-    id: "5",
+    id: 6,
     label: "ยุติการทดลองปฏิบัติหน้าที่ราชการเนื่องจากถึงแก่กรรม",
   },
+  {
+    id: 7,
+    label: "ขยายระยะเวลาทดลองปฏิบัติหน้าที่ราชการ",
+  },
+  {
+    id: 8,
+    label: "ดึงรายชื่อไปออกคำสั่งแล้ว",
+  },
 ]);
 
 onMounted(async () => {