diff --git a/src/modules/05_placement/components/PersonalList/TableView.vue b/src/modules/05_placement/components/PersonalList/TableView.vue
index f6d36f091..43ac8bea8 100644
--- a/src/modules/05_placement/components/PersonalList/TableView.vue
+++ b/src/modules/05_placement/components/PersonalList/TableView.vue
@@ -1,106 +1,3 @@
-<template>
-  <div class="q-px-md q-pb-md">
-    <div class="col-12 row q-py-sm">
-      <q-toggle
-        v-if="roleAdmin === false"
-        class="col-xs-12 col-sm-5 col-md-5 toggle-expired-account"
-        :model-value="containStatus"
-        color="blue"
-        label="แสดงสถานะบรรจุแล้ว"
-        @update:model-value="updateContain"
-      />
-      <div>
-        <q-btn
-          flat
-          round
-          color="primary"
-          icon="mdi-account-arrow-right"
-          @click="updateModaladdlist"
-          v-if="displayAdd"
-        />
-      </div>
-      <q-space />
-      <div class="items-center" style="display: flex">
-        <q-input
-          standout
-          dense
-          :model-value="inputfilter"
-          ref="filterRef"
-          @update:model-value="updateInput"
-          outlined
-          debounce="300"
-          placeholder="ค้นหา"
-          style="max-width: 200px"
-          class="q-ml-sm"
-        >
-          <template v-slot:append>
-            <q-icon v-if="inputfilter == ''" name="search" />
-            <q-icon
-              v-if="inputfilter !== ''"
-              name="clear"
-              class="cursor-pointer"
-              @click="resetFilter"
-            />
-          </template>
-        </q-input>
-        <!-- แสดง table ใน คอลัมน์ -->
-        <q-select
-          :model-value="inputvisible"
-          @update:model-value="updateVisible"
-          :display-value="$q.lang.table.columns"
-          multiple
-          outlined
-          dense
-          :options="attrs.columns"
-          options-dense
-          option-value="name"
-          map-options
-          emit-value
-          style="min-width: 150px"
-          class="gt-xs q-ml-sm"
-        />
-      </div>
-    </div>
-
-    <q-table
-      ref="table"
-      flat
-      bordered
-      class="custom-header-table"
-      v-bind="attrs"
-      virtual-scroll
-      :virtual-scroll-sticky-size-start="48"
-      dense
-      :pagination-label="paginationLabel"
-      v-model:pagination="pagination"
-    >
-      <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>
-      </template>
-      <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 v-if="history == true" />
-        </q-tr>
-      </template>
-      <template #body="props">
-        <slot v-bind="props" name="columns"></slot>
-      </template>
-    </q-table>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { ref, useAttrs } from "vue";
 import { useQuasar } from "quasar";
@@ -244,6 +141,110 @@ const updateModaladdlist = () => {
   emit("update-modaladdlist", true);
 };
 </script>
+
+<template>
+  <div class="q-px-md q-pb-md">
+    <div class="col-12 row q-py-sm">
+      <q-toggle
+        v-if="roleAdmin === false"
+        class="col-xs-12 col-sm-5 col-md-5 toggle-expired-account"
+        :model-value="containStatus"
+        color="blue"
+        label="แสดงสถานะบรรจุแล้ว"
+        @update:model-value="updateContain"
+      />
+      <div>
+        <q-btn
+          flat
+          round
+          color="primary"
+          icon="mdi-account-arrow-right"
+          @click="updateModaladdlist"
+          v-if="displayAdd"
+        />
+      </div>
+      <q-space />
+      <div class="items-center" style="display: flex">
+        <q-input
+          standout
+          dense
+          :model-value="inputfilter"
+          ref="filterRef"
+          @update:model-value="updateInput"
+          outlined
+          debounce="300"
+          placeholder="ค้นหา"
+          style="max-width: 200px"
+          class="q-ml-sm"
+        >
+          <template v-slot:append>
+            <q-icon v-if="inputfilter == ''" name="search" />
+            <q-icon
+              v-if="inputfilter !== ''"
+              name="clear"
+              class="cursor-pointer"
+              @click="resetFilter"
+            />
+          </template>
+        </q-input>
+        <!-- แสดง table ใน คอลัมน์ -->
+        <q-select
+          :model-value="inputvisible"
+          @update:model-value="updateVisible"
+          :display-value="$q.lang.table.columns"
+          multiple
+          outlined
+          dense
+          :options="attrs.columns"
+          options-dense
+          option-value="name"
+          map-options
+          emit-value
+          style="min-width: 150px"
+          class="gt-xs q-ml-sm"
+        />
+      </div>
+    </div>
+
+    <q-table
+      ref="table"
+      flat
+      bordered
+      class="custom-header-table"
+      v-bind="attrs"
+      virtual-scroll
+      :virtual-scroll-sticky-size-start="48"
+      dense
+      :pagination-label="paginationLabel"
+      v-model:pagination="pagination"
+    >
+      <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>
+      </template>
+      <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 v-if="history == true" />
+        </q-tr>
+      </template>
+      <template #body="props">
+        <slot v-bind="props" name="columns"></slot>
+      </template>
+    </q-table>
+  </div>
+</template>
+
 <style lang="scss">
 .icon-color {
   color: #4154b3;
diff --git a/src/modules/05_placement/components/Receive/FormAdd.vue b/src/modules/05_placement/components/Receive/FormAdd.vue
index 9d3026ed8..074e3b82a 100644
--- a/src/modules/05_placement/components/Receive/FormAdd.vue
+++ b/src/modules/05_placement/components/Receive/FormAdd.vue
@@ -1,3 +1,7 @@
+<script setup lang="ts">
+import Information from "@/modules/05_placement/components/Receive/information.vue";
+</script>
+
 <template>
   <div class="col-12 row">
     <div class="row col-12" style="padding-top: 80px">
@@ -7,9 +11,7 @@
     </div>
   </div>
 </template>
-<script setup lang="ts">
-import Information from "@/modules/05_placement/components/Receive/information.vue";
-</script>
+
 <style>
 .image-size-default {
   height: 150px;
diff --git a/src/modules/05_placement/components/Receive/information.vue b/src/modules/05_placement/components/Receive/information.vue
index ce3573224..bd6e9cb28 100644
--- a/src/modules/05_placement/components/Receive/information.vue
+++ b/src/modules/05_placement/components/Receive/information.vue
@@ -1,427 +1,3 @@
-<template>
-  <q-page-sticky
-    position="top"
-    expand
-    class="bg-grey-2 text-white"
-    style="z-index: 99; padding: 0% 1% 0% 1%"
-  >
-    <div class="row col-12 q-gutter-sm q-pb-sm text-dark no-wrap items-center">
-      <q-btn
-        flat
-        round
-        class="bg-teal-1 full-height"
-        color="primary"
-        icon="mdi-chevron-left"
-        dense
-        @click="router.go(-1)"
-      >
-      </q-btn>
-      <q-avatar size="65px" rounded class="containerimage">
-        <img
-          v-if="image == null"
-          src="@/assets/avatar_user.jpg"
-          class="bg-grey-3"
-          style="object-fit: cover"
-        />
-        <img v-else :src="image" class="bg-grey-3" style="object-fit: cover" />
-        <div
-          class="overlay absolute-bottom text-subtitle2 text-center cursor-pointer"
-          @click="addNewImage()"
-        >
-          <q-icon name="mdi-camera" size="18px" color="blue">
-            <q-tooltip>อัปเดตรูปภาพ</q-tooltip>
-          </q-icon>
-
-          <input
-            type="file"
-            style="display: none"
-            ref="inputImage"
-            accept="image/*"
-            @change="uploadImage"
-          />
-        </div>
-      </q-avatar>
-
-      <div class="row items-center text-dark q-ml-md">
-        <div class="column">
-          <div class="text-bold q-pb-xs text-name">
-            เพิ่มข้อมูลทะเบียนประวัติ
-          </div>
-          <div class="text-bold q-pb-xs text-sub">ข้าราชการกทม. สามัญ</div>
-        </div>
-      </div>
-      <q-space />
-    </div>
-  </q-page-sticky>
-  <q-card flat bordered class="col-12 q-px-lg q-py-md">
-    <HeaderTop
-      v-model:edit="edit"
-      header="ข้อมูลส่วนตัว"
-      icon="mdi-account"
-      :save="saveData"
-      :history="!statusAdd()"
-      :addEmployee="statusAdd()"
-    />
-    <!-- :disable="statusEdit" -->
-    <q-separator />
-    <q-form ref="myform" class="col-12">
-      <div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-sm">
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <q-input
-            :class="getClass(edit)"
-            hide-bottom-space
-            :outlined="edit"
-            v-model="informaData.cardid"
-            dense
-            @update:model-value="changeCardID"
-            lazy-rules
-            :rules="[
-              (val:string) => !!val || `${'กรุณากรอก เลขบัตรประจำตัวประชาชน'}`,
-              (val:string) =>
-                val.length >= 13 ||
-                `${'กรุณากรอกเลขบัตรประจำตัวประชาชนให้ครบ'}`,
-            ]"
-            :readonly="!edit"
-            :borderless="!edit"
-            label="เลขบัตรประจำตัวประชาชน"
-            maxlength="13"
-            mask="#############"
-          />
-          <!-- :rules="[(val:any) =>val.length != 13 ||`${'กรุณากรอกเลขบัตรประจำตัวประชาชนให้ครบ'}`,]" -->
-        </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <selector
-            :hide-dropdown-icon="!edit"
-            hide-bottom-space
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
-            :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
-            :outlined="edit"
-            dense
-            lazy-rules
-            v-model="informaData.prefixId"
-            emit-value
-            map-options
-            option-label="name"
-            :options="Ops.prefixOps"
-            option-value="id"
-            :label="`${'คำนำหน้าชื่อ'}`"
-            use-input
-            input-debounce="0"
-            @filter="(inputValue:any,
-                        doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
-                        ) "
-          />
-        </div>
-
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <q-input
-            :class="getClass(edit)"
-            hide-bottom-space
-            :outlined="edit"
-            dense
-            lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
-            v-model="informaData.firstname"
-            :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
-            :label="`${'ชื่อ'}`"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
-          <q-input
-            :class="getClass(edit)"
-            hide-bottom-space
-            :outlined="edit"
-            dense
-            lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
-            v-model="informaData.lastname"
-            :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
-            :label="`${'นามสกุล'}`"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-2 col-md-2">
-          <datepicker
-            v-model="informaData.birthDate"
-            :locale="'th'"
-            autoApply
-            :enableTimePicker="false"
-            week-start="0"
-            :max-date="new Date()"
-            :disabled="!edit"
-            @update:model-value="handleDate"
-          >
-            <template #year="{ year }">
-              {{ year + 543 }}
-            </template>
-            <template #year-overlay-value="{ value }">
-              {{ parseInt(value + 543) }}
-            </template>
-            <template #trigger>
-              <q-input
-                :class="getClass(edit)"
-                hide-bottom-space
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                :model-value="
-                  informaData.birthDate == null
-                    ? null
-                    : date2Thai(informaData.birthDate)
-                "
-                :rules="[(val:string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
-                :label="`${'วัน/เดือน/ปี เกิด'}`"
-              >
-                <template v-slot:prepend>
-                  <q-icon
-                    name="event"
-                    class="cursor-pointer"
-                    :style="
-                      edit ? 'color: var(--q-primary)' : 'color: var(--q-grey)'
-                    "
-                  >
-                  </q-icon>
-                </template>
-              </q-input>
-            </template>
-          </datepicker>
-        </div>
-        <div class="col-xs-6 col-sm-2 col-md-2">
-          <q-input
-            :class="getClass(false)"
-            hide-bottom-space
-            dense
-            lazy-rules
-            readonly
-            borderless
-            :style="!edit ? '' : 'padding:0 12px;'"
-            :model-value="informaData.age"
-            :label="`${'อายุ'}`"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-2 col-md-2">
-          <selector
-            :hide-dropdown-icon="!edit"
-            hide-bottom-space
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
-            :outlined="edit"
-            dense
-            lazy-rules
-            v-model="informaData.genderId"
-            emit-value
-            map-options
-            option-label="name"
-            :options="Ops.genderOps"
-            option-value="id"
-            :label="`${'เพศ'}`"
-            use-input
-            input-debounce="0"
-            @filter="(inputValue:any,
-                        doneFn:Function) => filterSelector(inputValue, doneFn,'genderOps'
-                        ) "
-          />
-        </div>
-        <div class="col-xs-6 col-sm-2 col-md-2">
-          <selector
-            :hide-dropdown-icon="!edit"
-            hide-bottom-space
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
-            :outlined="edit"
-            dense
-            lazy-rules
-            v-model="informaData.statusId"
-            emit-value
-            map-options
-            option-label="name"
-            :options="Ops.statusOps"
-            option-value="id"
-            :label="`${'สถานภาพ'}`"
-            use-input
-            input-debounce="0"
-            @filter="(inputValue:any,
-                        doneFn:Function) => filterSelector(inputValue, doneFn,'statusOps'
-                        ) "
-          />
-        </div>
-        <div class="col-xs-6 col-sm-2 col-md-2">
-          <q-input
-            :class="getClass(edit)"
-            hide-bottom-space
-            :outlined="edit"
-            dense
-            lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
-            v-model="informaData.nationality"
-            :label="`${'สัญชาติ'}`"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-2 col-md-2">
-          <q-input
-            :class="getClass(edit)"
-            hide-bottom-space
-            :outlined="edit"
-            dense
-            lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
-            v-model="informaData.ethnicity"
-            :label="`${'เชื้อชาติ'}`"
-          />
-        </div>
-        <div class="col-xs-6 col-sm-2 col-md-2">
-          <selector
-            :hide-dropdown-icon="!edit"
-            hide-bottom-space
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
-            :outlined="edit"
-            dense
-            lazy-rules
-            v-model="informaData.religionId"
-            emit-value
-            map-options
-            option-label="name"
-            :options="Ops.religionOps"
-            option-value="id"
-            :label="`${'ศาสนา'}`"
-            use-input
-            input-debounce="0"
-            @filter="(inputValue:any,
-                        doneFn:Function) => filterSelector(inputValue, doneFn,'religionOps'
-                        ) "
-          />
-        </div>
-        <div class="col-xs-6 col-sm-2 col-md-2">
-          <selector
-            :hide-dropdown-icon="!edit"
-            hide-bottom-space
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
-            :outlined="edit"
-            dense
-            lazy-rules
-            v-model="informaData.bloodId"
-            emit-value
-            map-options
-            option-label="name"
-            :options="Ops.bloodOps"
-            option-value="id"
-            :label="`${'หมู่เลือด'}`"
-            use-input
-            input-debounce="0"
-            @filter="(inputValue:any,
-                        doneFn:Function) => filterSelector(inputValue, doneFn,'bloodOps'
-                        ) "
-            clearable
-          />
-        </div>
-        <div class="col-xs-6 col-sm-2 col-md-2">
-          <q-input
-            hide-bottom-space
-            :outlined="edit"
-            dense
-            lazy-rules
-            type="tel"
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
-            v-model="informaData.tel"
-            :label="`${'เบอร์โทร'}`"
-            mask="##########"
-            :rules="[
-              (val:string) => !!val || `${'กรุณากรอก เบอร์โทร'}`,
-              (val:string) =>
-                val.length >= 10 ||
-                `${'กรุณากรอกเบอร์โทรให้ครบ'}`,
-            ]"
-          />
-        </div>
-        <div
-          class="col-xs-6 col-sm-3 col-md-3"
-          v-if="informaData.profileType == 'employee'"
-        >
-          <selector
-            :hide-dropdown-icon="!edit"
-            hide-bottom-space
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
-            :rules="[(val:string) => !!val || `${'กรุณาเลือก ประเภทการจ้าง'}`]"
-            :outlined="edit"
-            dense
-            lazy-rules
-            v-model="informaData.employeeType"
-            emit-value
-            map-options
-            option-label="name"
-            :options="Ops.employeeTypeOps"
-            option-value="id"
-            :label="`${'ประเภทการจ้าง'}`"
-            use-input
-            input-debounce="0"
-            @filter="(inputValue:any,
-                        doneFn:Function) => filterSelector(inputValue, doneFn,'employeeTypeOps'
-                        ) "
-          />
-        </div>
-        <div
-          class="col-xs-6 col-sm-3 col-md-3"
-          v-if="informaData.profileType == 'employee'"
-        >
-          <selector
-            :hide-dropdown-icon="!edit"
-            hide-bottom-space
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
-            :rules="[(val:string) => !!val || `${'กรุณาเลือก ประเภทลูกจ้าง'}`]"
-            :outlined="edit"
-            dense
-            lazy-rules
-            v-model="informaData.employeeClass"
-            emit-value
-            map-options
-            option-label="name"
-            :options="Ops.employeeClassOps"
-            option-value="id"
-            :label="`${'ประเภทลูกจ้าง'}`"
-            use-input
-            input-debounce="0"
-            @filter="(inputValue:any,
-                        doneFn:Function) => filterSelector(inputValue, doneFn,'employeeClassOps'
-                        ) "
-          />
-        </div>
-        <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
-      </div>
-    </q-form>
-
-    <div class="row col-12 q-pa-sm">
-      <q-space />
-      <q-btn
-        unelevated
-        dense
-        class="q-px-md items-center"
-        color="light-blue-10"
-        label="บันทึก"
-        @click="saveData"
-      />
-    </div>
-    <q-separator />
-  </q-card>
-</template>
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
@@ -855,3 +431,428 @@ const getClass = (val: boolean) => {
   };
 };
 </script>
+
+<template>
+  <q-page-sticky
+    position="top"
+    expand
+    class="bg-grey-2 text-white"
+    style="z-index: 99; padding: 0% 1% 0% 1%"
+  >
+    <div class="row col-12 q-gutter-sm q-pb-sm text-dark no-wrap items-center">
+      <q-btn
+        flat
+        round
+        class="bg-teal-1 full-height"
+        color="primary"
+        icon="mdi-chevron-left"
+        dense
+        @click="router.go(-1)"
+      >
+      </q-btn>
+      <q-avatar size="65px" rounded class="containerimage">
+        <img
+          v-if="image == null"
+          src="@/assets/avatar_user.jpg"
+          class="bg-grey-3"
+          style="object-fit: cover"
+        />
+        <img v-else :src="image" class="bg-grey-3" style="object-fit: cover" />
+        <div
+          class="overlay absolute-bottom text-subtitle2 text-center cursor-pointer"
+          @click="addNewImage()"
+        >
+          <q-icon name="mdi-camera" size="18px" color="blue">
+            <q-tooltip>อัปเดตรูปภาพ</q-tooltip>
+          </q-icon>
+
+          <input
+            type="file"
+            style="display: none"
+            ref="inputImage"
+            accept="image/*"
+            @change="uploadImage"
+          />
+        </div>
+      </q-avatar>
+
+      <div class="row items-center text-dark q-ml-md">
+        <div class="column">
+          <div class="text-bold q-pb-xs text-name">
+            เพิ่มข้อมูลทะเบียนประวัติ
+          </div>
+          <div class="text-bold q-pb-xs text-sub">ข้าราชการกทม. สามัญ</div>
+        </div>
+      </div>
+      <q-space />
+    </div>
+  </q-page-sticky>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md">
+    <HeaderTop
+      v-model:edit="edit"
+      header="ข้อมูลส่วนตัว"
+      icon="mdi-account"
+      :save="saveData"
+      :history="!statusAdd()"
+      :addEmployee="statusAdd()"
+    />
+    <!-- :disable="statusEdit" -->
+    <q-separator />
+    <q-form ref="myform" class="col-12">
+      <div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-sm">
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            v-model="informaData.cardid"
+            dense
+            @update:model-value="changeCardID"
+            lazy-rules
+            :rules="[
+              (val:string) => !!val || `${'กรุณากรอก เลขบัตรประจำตัวประชาชน'}`,
+              (val:string) =>
+                val.length >= 13 ||
+                `${'กรุณากรอกเลขบัตรประจำตัวประชาชนให้ครบ'}`,
+            ]"
+            :readonly="!edit"
+            :borderless="!edit"
+            label="เลขบัตรประจำตัวประชาชน"
+            maxlength="13"
+            mask="#############"
+          />
+          <!-- :rules="[(val:any) =>val.length != 13 ||`${'กรุณากรอกเลขบัตรประจำตัวประชาชนให้ครบ'}`,]" -->
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="informaData.prefixId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.prefixOps"
+            option-value="id"
+            :label="`${'คำนำหน้าชื่อ'}`"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
+                        ) "
+          />
+        </div>
+
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="informaData.firstname"
+            :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
+            :label="`${'ชื่อ'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="informaData.lastname"
+            :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
+            :label="`${'นามสกุล'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2">
+          <datepicker
+            v-model="informaData.birthDate"
+            :locale="'th'"
+            autoApply
+            :enableTimePicker="false"
+            week-start="0"
+            :max-date="new Date()"
+            :disabled="!edit"
+            @update:model-value="handleDate"
+          >
+            <template #year="{ year }">
+              {{ year + 543 }}
+            </template>
+            <template #year-overlay-value="{ value }">
+              {{ parseInt(value + 543) }}
+            </template>
+            <template #trigger>
+              <q-input
+                :class="getClass(edit)"
+                hide-bottom-space
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                :model-value="
+                  informaData.birthDate == null
+                    ? null
+                    : date2Thai(informaData.birthDate)
+                "
+                :rules="[(val:string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
+                :label="`${'วัน/เดือน/ปี เกิด'}`"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    :style="
+                      edit ? 'color: var(--q-primary)' : 'color: var(--q-grey)'
+                    "
+                  >
+                  </q-icon>
+                </template>
+              </q-input>
+            </template>
+          </datepicker>
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :style="!edit ? '' : 'padding:0 12px;'"
+            :model-value="informaData.age"
+            :label="`${'อายุ'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2">
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="informaData.genderId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.genderOps"
+            option-value="id"
+            :label="`${'เพศ'}`"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'genderOps'
+                        ) "
+          />
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2">
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="informaData.statusId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.statusOps"
+            option-value="id"
+            :label="`${'สถานภาพ'}`"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'statusOps'
+                        ) "
+          />
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="informaData.nationality"
+            :label="`${'สัญชาติ'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="informaData.ethnicity"
+            :label="`${'เชื้อชาติ'}`"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2">
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="informaData.religionId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.religionOps"
+            option-value="id"
+            :label="`${'ศาสนา'}`"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'religionOps'
+                        ) "
+          />
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2">
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="informaData.bloodId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.bloodOps"
+            option-value="id"
+            :label="`${'หมู่เลือด'}`"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'bloodOps'
+                        ) "
+            clearable
+          />
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2">
+          <q-input
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            type="tel"
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="informaData.tel"
+            :label="`${'เบอร์โทร'}`"
+            mask="##########"
+            :rules="[
+              (val:string) => !!val || `${'กรุณากรอก เบอร์โทร'}`,
+              (val:string) =>
+                val.length >= 10 ||
+                `${'กรุณากรอกเบอร์โทรให้ครบ'}`,
+            ]"
+          />
+        </div>
+        <div
+          class="col-xs-6 col-sm-3 col-md-3"
+          v-if="informaData.profileType == 'employee'"
+        >
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือก ประเภทการจ้าง'}`]"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="informaData.employeeType"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.employeeTypeOps"
+            option-value="id"
+            :label="`${'ประเภทการจ้าง'}`"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'employeeTypeOps'
+                        ) "
+          />
+        </div>
+        <div
+          class="col-xs-6 col-sm-3 col-md-3"
+          v-if="informaData.profileType == 'employee'"
+        >
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือก ประเภทลูกจ้าง'}`]"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="informaData.employeeClass"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.employeeClassOps"
+            option-value="id"
+            :label="`${'ประเภทลูกจ้าง'}`"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'employeeClassOps'
+                        ) "
+          />
+        </div>
+        <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
+      </div>
+    </q-form>
+
+    <div class="row col-12 q-pa-sm">
+      <q-space />
+      <q-btn
+        unelevated
+        dense
+        class="q-px-md items-center"
+        color="light-blue-10"
+        label="บันทึก"
+        @click="saveData"
+      />
+    </div>
+    <q-separator />
+  </q-card>
+</template>
diff --git a/src/modules/05_placement/components/Receive/receiveDetail.vue b/src/modules/05_placement/components/Receive/receiveDetail.vue
index 6ce3b0632..7d299c721 100644
--- a/src/modules/05_placement/components/Receive/receiveDetail.vue
+++ b/src/modules/05_placement/components/Receive/receiveDetail.vue
@@ -1,3 +1,30 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+import Image from "@/components/information/Image.vue";
+import Information from "@/components/information/Information.vue";
+import Government from "@/components/information/Government.vue";
+import Address from "@/components/information/Address.vue";
+import Family from "@/components/information/Family.vue";
+import Certicate from "@/components/information/Certicate.vue";
+
+import EducationVue from "@/components/information/Education.vue";
+import TrainVue from "@/components/information/Train.vue";
+import InsigniaVue from "@/components/information/Insignia.vue";
+import CoinedVue from "@/components/information/Coin.vue";
+import AssessmentVue from "@/components/information/Assessment.vue";
+import SalaryVue from "@/components/information/Salary.vue";
+import DisciplineVue from "@/components/information/Discipline.vue";
+import LeaveVue from "@/components/information/Leave.vue";
+import TalentVue from "@/components/information/Talent.vue";
+import WorkVue from "@/components/information/Work.vue";
+import RecordVue from "@/components/information/Record.vue";
+import OtherVue from "@/components/information/Other.vue";
+import DocumentVue from "@/components/information/Document.vue";
+
+const statusEdit = ref<boolean>(false);
+</script>
+
 <template>
   <div class="col-12 row">
     <div class="row col-12" style="padding-top: 80px">
@@ -73,32 +100,7 @@
     <Image />
   </div>
 </template>
-<script setup lang="ts">
-import { ref } from "vue";
 
-import Image from "@/components/information/Image.vue";
-import Information from "@/components/information/Information.vue";
-import Government from "@/components/information/Government.vue";
-import Address from "@/components/information/Address.vue";
-import Family from "@/components/information/Family.vue";
-import Certicate from "@/components/information/Certicate.vue";
-
-import EducationVue from "@/components/information/Education.vue";
-import TrainVue from "@/components/information/Train.vue";
-import InsigniaVue from "@/components/information/Insignia.vue";
-import CoinedVue from "@/components/information/Coin.vue";
-import AssessmentVue from "@/components/information/Assessment.vue";
-import SalaryVue from "@/components/information/Salary.vue";
-import DisciplineVue from "@/components/information/Discipline.vue";
-import LeaveVue from "@/components/information/Leave.vue";
-import TalentVue from "@/components/information/Talent.vue";
-import WorkVue from "@/components/information/Work.vue";
-import RecordVue from "@/components/information/Record.vue";
-import OtherVue from "@/components/information/Other.vue";
-import DocumentVue from "@/components/information/Document.vue";
-
-const statusEdit = ref<boolean>(false);
-</script>
 <style lang="scss" scoped>
 .information:target {
   padding-top: 84px;
diff --git a/src/modules/05_placement/components/Receive/receiveDetail2.vue b/src/modules/05_placement/components/Receive/receiveDetail2.vue
index df159c7d2..f92611c76 100644
--- a/src/modules/05_placement/components/Receive/receiveDetail2.vue
+++ b/src/modules/05_placement/components/Receive/receiveDetail2.vue
@@ -1,3 +1,440 @@
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { useQuasar } from "quasar";
+import { useRoute, useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import { useProfileDataStore } from "@/modules/08_registryEmployee/store";
+import CurrencyInput from "@/components/CurruncyInput.vue";
+import type { QTableProps, QForm } from "quasar";
+import type { ResponseTitle } from "@/modules/05_placement/interface/response/Receive";
+import type { InformationOps } from "@/modules/04_registry/interface/index/Main";
+import type {
+  Information,
+  DataOption,
+} from "@/modules/04_registry/components/profileType";
+
+import { defaultInformation } from "@/modules/04_registry/components/profileType";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const $q = useQuasar();
+const route = useRoute();
+const router = useRouter();
+const mixin = useCounterMixin();
+
+const paramsId = route.params.id;
+const {
+  date2Thai,
+  dialogMessage,
+  messageError,
+  showLoader,
+  hideLoader,
+  success,
+  dateToISO,
+  dialogConfirm,
+} = mixin;
+
+const profileStore = useProfileDataStore();
+const { changeRetireText } = profileStore;
+
+const title = ref<ResponseTitle>({
+  fullname: "",
+  organizationPositionOld: "",
+  positionLevelOld: "",
+  positionTypeOld: "",
+});
+
+const status = ref<string>("");
+
+const myForm = ref<QForm | null>(null);
+const edit = ref<boolean>(false);
+
+const profileId = ref<string>("");
+const educationOld = ref<string>("");
+const organizationPositionOld = ref<string>("");
+const positionTypeOld = ref<string>("");
+const positionLevelOld = ref<string>("");
+const posNo = ref<string>("");
+const salary = ref<number>(0);
+// const organization = ref<string>("");
+// const date = ref<Date | null>(null);
+const reason = ref<string>("");
+
+const informaData = ref<Information>(defaultInformation);
+const dateBefore = ref<Date>(new Date());
+const defaultCitizenData = ref<string>("");
+const Ops = ref<InformationOps>({
+  prefixOps: [],
+  prefixOldOps: [],
+  genderOps: [],
+  bloodOps: [],
+  statusOps: [],
+  religionOps: [],
+  employeeClassOps: [
+    { id: "perm", name: "ลูกจ้างประจำ" },
+    { id: "temp", name: "ลูกจ้างชั่วคราว" },
+  ],
+  employeeTypeOps: [
+    { id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
+    { id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
+  ],
+});
+const OpsFilter = ref<InformationOps>({
+  prefixOps: [],
+  prefixOldOps: [],
+  genderOps: [],
+  bloodOps: [],
+  statusOps: [],
+  religionOps: [],
+  employeeClassOps: [
+    { id: "perm", name: "ลูกจ้างประจำ" },
+    { id: "temp", name: "ลูกจ้างชั่วคราว" },
+  ],
+  employeeTypeOps: [
+    { id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
+    { id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
+  ],
+});
+
+onMounted(async () => {
+  await fetchPerson();
+  await getData();
+});
+
+const fetchPerson = async () => {
+  showLoader();
+  await http
+    .get(config.API.person)
+    .then((res) => {
+      const data = res.data.result;
+      let optionbloodGroups: DataOption[] = [];
+      data.bloodGroups.map((r: any) => {
+        optionbloodGroups.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.bloodOps = optionbloodGroups;
+      OpsFilter.value.bloodOps = optionbloodGroups;
+
+      let optiongenders: DataOption[] = [];
+      data.genders.map((r: any) => {
+        optiongenders.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.genderOps = optiongenders;
+      OpsFilter.value.genderOps = optiongenders;
+
+      let optionprefixs: DataOption[] = [];
+      data.prefixs.map((r: any) => {
+        optionprefixs.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.prefixOps = optionprefixs;
+      OpsFilter.value.prefixOps = optionprefixs;
+
+      let optionrelationships: DataOption[] = [];
+      data.relationships.map((r: any) => {
+        optionrelationships.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.statusOps = optionrelationships;
+      OpsFilter.value.statusOps = optionrelationships;
+
+      let optionreligions: DataOption[] = [];
+      data.religions.map((r: any) => {
+        optionreligions.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.religionOps = optionreligions;
+      OpsFilter.value.religionOps = optionreligions;
+    })
+    .catch((e: any) => {})
+    .finally(() => {
+      //   hideLoader();
+    });
+};
+
+const getData = async () => {
+  showLoader();
+  await http
+    .get(config.API.receiveDataId(paramsId.toString()))
+    .then(async (res: any) => {
+      const data = res.data.result;
+
+      profileId.value = data.profileId;
+      title.value.fullname = `${data.firstname ?? "-"} ${data.lastname ?? "-"}`;
+      title.value.organizationPositionOld = data.organizationPositionOld ?? "-";
+      title.value.positionLevelOld = data.positionLevelOld ?? "-";
+      title.value.positionTypeOld = data.positionTypeOld ?? "-";
+      defaultCitizenData.value = data.citizenId == null ? "" : data.citizenId;
+      informaData.value = {
+        cardid: data.citizenId ?? "",
+        age: "",
+        prefix: "",
+        prefixId:
+          (data.prefixId == "00000000-0000-0000-0000-000000000000"
+            ? null
+            : data.prefixId) ?? "",
+        firstname: data.firstname ?? "",
+        lastname: data.lastname ?? "",
+        birthDate:
+          data.dateOfBirth !== null ? new Date(data.dateOfBirth) : null,
+        genderId:
+          (data.gender == "00000000-0000-0000-0000-000000000000"
+            ? null
+            : data.gender) ?? "",
+        bloodId:
+          (data.bloodGroup == "00000000-0000-0000-0000-000000000000"
+            ? null
+            : data.bloodGroup) ?? "",
+        nationality: data.nationality ?? "",
+        ethnicity: data.race ?? "",
+        statusId:
+          (data.relationship == "00000000-0000-0000-0000-000000000000"
+            ? null
+            : data.relationship) ?? "",
+        religionId:
+          (data.religion == "00000000-0000-0000-0000-000000000000"
+            ? null
+            : data.religion) ?? "",
+        tel: data.telephoneNumber ?? "",
+        employeeType: "",
+        employeeClass: "",
+        profileType: "",
+      };
+      educationOld.value = data.educationOld ?? "";
+      organizationPositionOld.value = data.organizationPositionOld ?? "";
+      positionTypeOld.value = data.positionTypeOld ?? "";
+      positionLevelOld.value = data.positionLevelOld ?? "";
+      posNo.value = data.positionNumberOld ?? "";
+      salary.value = data.amountOld ?? 0;
+      reason.value = data.reason ?? "";
+      status.value = data.status ?? "";
+
+      await calRetire(new Date(dateToISO(new Date(data.dateOfBirth))));
+      dateBefore.value = new Date(data.dateOfBirth);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
+};
+
+const cancel = async () => {
+  edit.value = !edit.value;
+  if (myForm.value !== null) {
+    await getData();
+    myForm.value.reset();
+  }
+};
+
+const changeCardID = async (value: string | number | null) => {
+  if (value != null && typeof value == "string") {
+    if (value.length == 13 && value != defaultCitizenData.value) {
+      await checkCitizen(value);
+      //   informaData.value.cardid = defaultCitizenData.value;
+    }
+  }
+};
+
+const checkCitizen = async (id: string) => {
+  console.log("String");
+  showLoader();
+  await http
+    .get(config.API.profileCitizenId(id))
+    .then((res) => {
+      const data = res.data.result.citizen;
+
+      if (!data) {
+        dialogMessage(
+          $q,
+          "ข้อความแจ้งเตือน",
+          "เลขบัตรประจำตัวประชาชนนี้มีการใช้งานแล้ว",
+          "warning",
+          undefined,
+          "orange",
+          undefined,
+          undefined,
+          true
+        );
+        informaData.value.cardid = defaultCitizenData.value;
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const filterSelector = (val: any, update: Function, refData: string) => {
+  switch (refData) {
+    case "prefixOps":
+      update(() => {
+        Ops.value.prefixOps = OpsFilter.value.prefixOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "genderOps":
+      update(() => {
+        Ops.value.genderOps = OpsFilter.value.genderOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "bloodOps":
+      update(() => {
+        Ops.value.bloodOps = OpsFilter.value.bloodOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "statusOps":
+      update(() => {
+        Ops.value.statusOps = OpsFilter.value.statusOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "religionOps":
+      update(() => {
+        Ops.value.religionOps = OpsFilter.value.religionOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "employeeClassOps":
+      update(() => {
+        Ops.value.employeeClassOps = OpsFilter.value.employeeClassOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "employeeTypeOps":
+      update(() => {
+        Ops.value.employeeTypeOps = OpsFilter.value.employeeTypeOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+
+    default:
+      break;
+  }
+};
+
+const handleDate = async (modelData: Date) => {
+  informaData.value.birthDate = modelData;
+  await calRetire(modelData);
+};
+
+const calRetire = async (birth: Date) => {
+  const body = {
+    birthDate: dateToISO(birth),
+  };
+  //   if (dateToISO(dateBefore.value) != dateToISO(birth)) {
+  showLoader();
+  await http
+    .post(config.API.profileCalRetire, body)
+    .then((res: any) => {
+      const data = res.data.result;
+      informaData.value.age = data.age;
+      changeRetireText(data.retireDate);
+      dateBefore.value = birth;
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+      const retire = new Date(`${birth.getFullYear() + 60}-09-30`);
+      informaData.value.birthDate = dateBefore.value;
+      changeRetireText(date2Thai(retire));
+    })
+    .finally(() => {
+      hideLoader();
+    });
+  //   }
+};
+
+const conditionSave = async () => {
+  if (myForm.value !== null) {
+    myForm.value.validate().then((success) => {
+      if (success) {
+        dialogConfirm(
+          $q,
+          async () => await saveData(),
+          "ต้องการแก้ไขข้อมูลหรือไม่?",
+          "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย"
+        );
+      }
+    });
+  }
+};
+
+const saveData = async () => {
+  const body = {
+    citizenId: informaData.value.cardid,
+    prefixId: informaData.value.prefixId,
+    firstname: informaData.value.firstname,
+    lastname: informaData.value.lastname,
+    dateOfBirth:
+      informaData.value.birthDate !== null
+        ? dateToISO(informaData.value.birthDate)
+        : null,
+    genderId: informaData.value.genderId,
+    nationality: informaData.value.nationality,
+    race: informaData.value.ethnicity,
+    religionId: informaData.value.religionId,
+    bloodGroupId: informaData.value.bloodId,
+    relationshipId: informaData.value.statusId,
+    telephoneNumber: informaData.value.tel,
+    reason: reason.value,
+    educationOld: educationOld.value,
+    organizationPositionOld: organizationPositionOld.value,
+    positionTypeOld: positionTypeOld.value,
+    positionLevelOld: positionLevelOld.value,
+    positionNumberOld: posNo.value,
+    amount: 0,
+    amountOld: salary.value,
+  };
+  showLoader();
+  await http
+    .put(config.API.receiveDataId(route.params.id.toString()), body)
+    .then((res: any) => {
+      //   const data = res.data.result;
+      //   console.log(data);
+      success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
+      edit.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await getData();
+      hideLoader();
+    });
+};
+
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+</script>
+
 <template>
   <div class="toptitle text-dark col-12 row items-center">
     <q-btn
@@ -577,442 +1014,7 @@
     </q-form>
   </q-card>
 </template>
-<script setup lang="ts">
-import { onMounted, ref } from "vue";
-import { useQuasar } from "quasar";
-import { useRoute, useRouter } from "vue-router";
-import { useCounterMixin } from "@/stores/mixin";
-import { useProfileDataStore } from "@/modules/08_registryEmployee/store";
-import CurrencyInput from "@/components/CurruncyInput.vue";
-import type { QTableProps, QForm } from "quasar";
-import type { ResponseTitle } from "@/modules/05_placement/interface/response/Receive";
-import type { InformationOps } from "@/modules/04_registry/interface/index/Main";
-import type {
-  Information,
-  DataOption,
-} from "@/modules/04_registry/components/profileType";
 
-import { defaultInformation } from "@/modules/04_registry/components/profileType";
-
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-const $q = useQuasar();
-const route = useRoute();
-const router = useRouter();
-const mixin = useCounterMixin();
-
-const paramsId = route.params.id;
-const {
-  date2Thai,
-  dialogMessage,
-  messageError,
-  showLoader,
-  hideLoader,
-  success,
-  dateToISO,
-  dialogConfirm,
-} = mixin;
-
-const profileStore = useProfileDataStore();
-const { changeRetireText } = profileStore;
-
-const title = ref<ResponseTitle>({
-  fullname: "",
-  organizationPositionOld: "",
-  positionLevelOld: "",
-  positionTypeOld: "",
-});
-
-const status = ref<string>("");
-
-const myForm = ref<QForm | null>(null);
-const edit = ref<boolean>(false);
-
-const profileId = ref<string>("");
-const educationOld = ref<string>("");
-const organizationPositionOld = ref<string>("");
-const positionTypeOld = ref<string>("");
-const positionLevelOld = ref<string>("");
-const posNo = ref<string>("");
-const salary = ref<number>(0);
-// const organization = ref<string>("");
-// const date = ref<Date | null>(null);
-const reason = ref<string>("");
-
-const informaData = ref<Information>(defaultInformation);
-const dateBefore = ref<Date>(new Date());
-const defaultCitizenData = ref<string>("");
-const Ops = ref<InformationOps>({
-  prefixOps: [],
-  prefixOldOps: [],
-  genderOps: [],
-  bloodOps: [],
-  statusOps: [],
-  religionOps: [],
-  employeeClassOps: [
-    { id: "perm", name: "ลูกจ้างประจำ" },
-    { id: "temp", name: "ลูกจ้างชั่วคราว" },
-  ],
-  employeeTypeOps: [
-    { id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
-    { id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
-  ],
-});
-const OpsFilter = ref<InformationOps>({
-  prefixOps: [],
-  prefixOldOps: [],
-  genderOps: [],
-  bloodOps: [],
-  statusOps: [],
-  religionOps: [],
-  employeeClassOps: [
-    { id: "perm", name: "ลูกจ้างประจำ" },
-    { id: "temp", name: "ลูกจ้างชั่วคราว" },
-  ],
-  employeeTypeOps: [
-    { id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
-    { id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
-  ],
-});
-
-onMounted(async () => {
-  await fetchPerson();
-  await getData();
-});
-
-const fetchPerson = async () => {
-  showLoader();
-  await http
-    .get(config.API.person)
-    .then((res) => {
-      const data = res.data.result;
-      let optionbloodGroups: DataOption[] = [];
-      data.bloodGroups.map((r: any) => {
-        optionbloodGroups.push({
-          id: r.id.toString(),
-          name: r.name.toString(),
-        });
-      });
-      Ops.value.bloodOps = optionbloodGroups;
-      OpsFilter.value.bloodOps = optionbloodGroups;
-
-      let optiongenders: DataOption[] = [];
-      data.genders.map((r: any) => {
-        optiongenders.push({
-          id: r.id.toString(),
-          name: r.name.toString(),
-        });
-      });
-      Ops.value.genderOps = optiongenders;
-      OpsFilter.value.genderOps = optiongenders;
-
-      let optionprefixs: DataOption[] = [];
-      data.prefixs.map((r: any) => {
-        optionprefixs.push({
-          id: r.id.toString(),
-          name: r.name.toString(),
-        });
-      });
-      Ops.value.prefixOps = optionprefixs;
-      OpsFilter.value.prefixOps = optionprefixs;
-
-      let optionrelationships: DataOption[] = [];
-      data.relationships.map((r: any) => {
-        optionrelationships.push({
-          id: r.id.toString(),
-          name: r.name.toString(),
-        });
-      });
-      Ops.value.statusOps = optionrelationships;
-      OpsFilter.value.statusOps = optionrelationships;
-
-      let optionreligions: DataOption[] = [];
-      data.religions.map((r: any) => {
-        optionreligions.push({
-          id: r.id.toString(),
-          name: r.name.toString(),
-        });
-      });
-      Ops.value.religionOps = optionreligions;
-      OpsFilter.value.religionOps = optionreligions;
-    })
-    .catch((e: any) => {})
-    .finally(() => {
-      //   hideLoader();
-    });
-};
-
-const getData = async () => {
-  showLoader();
-  await http
-    .get(config.API.receiveDataId(paramsId.toString()))
-    .then(async (res: any) => {
-      const data = res.data.result;
-
-      profileId.value = data.profileId;
-      title.value.fullname = `${data.firstname ?? "-"} ${data.lastname ?? "-"}`;
-      title.value.organizationPositionOld = data.organizationPositionOld ?? "-";
-      title.value.positionLevelOld = data.positionLevelOld ?? "-";
-      title.value.positionTypeOld = data.positionTypeOld ?? "-";
-      defaultCitizenData.value = data.citizenId == null ? "" : data.citizenId;
-      informaData.value = {
-        cardid: data.citizenId ?? "",
-        age: "",
-        prefix: "",
-        prefixId:
-          (data.prefixId == "00000000-0000-0000-0000-000000000000"
-            ? null
-            : data.prefixId) ?? "",
-        firstname: data.firstname ?? "",
-        lastname: data.lastname ?? "",
-        birthDate:
-          data.dateOfBirth !== null ? new Date(data.dateOfBirth) : null,
-        genderId:
-          (data.gender == "00000000-0000-0000-0000-000000000000"
-            ? null
-            : data.gender) ?? "",
-        bloodId:
-          (data.bloodGroup == "00000000-0000-0000-0000-000000000000"
-            ? null
-            : data.bloodGroup) ?? "",
-        nationality: data.nationality ?? "",
-        ethnicity: data.race ?? "",
-        statusId:
-          (data.relationship == "00000000-0000-0000-0000-000000000000"
-            ? null
-            : data.relationship) ?? "",
-        religionId:
-          (data.religion == "00000000-0000-0000-0000-000000000000"
-            ? null
-            : data.religion) ?? "",
-        tel: data.telephoneNumber ?? "",
-        employeeType: "",
-        employeeClass: "",
-        profileType: "",
-      };
-      educationOld.value = data.educationOld ?? "";
-      organizationPositionOld.value = data.organizationPositionOld ?? "";
-      positionTypeOld.value = data.positionTypeOld ?? "";
-      positionLevelOld.value = data.positionLevelOld ?? "";
-      posNo.value = data.positionNumberOld ?? "";
-      salary.value = data.amountOld ?? 0;
-      reason.value = data.reason ?? "";
-      status.value = data.status ?? "";
-
-      await calRetire(new Date(dateToISO(new Date(data.dateOfBirth))));
-      dateBefore.value = new Date(data.dateOfBirth);
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      hideLoader();
-    });
-};
-
-const cancel = async () => {
-  edit.value = !edit.value;
-  if (myForm.value !== null) {
-    await getData();
-    myForm.value.reset();
-  }
-};
-
-const changeCardID = async (value: string | number | null) => {
-  if (value != null && typeof value == "string") {
-    if (value.length == 13 && value != defaultCitizenData.value) {
-      await checkCitizen(value);
-      //   informaData.value.cardid = defaultCitizenData.value;
-    }
-  }
-};
-
-const checkCitizen = async (id: string) => {
-  console.log("String");
-  showLoader();
-  await http
-    .get(config.API.profileCitizenId(id))
-    .then((res) => {
-      const data = res.data.result.citizen;
-
-      if (!data) {
-        dialogMessage(
-          $q,
-          "ข้อความแจ้งเตือน",
-          "เลขบัตรประจำตัวประชาชนนี้มีการใช้งานแล้ว",
-          "warning",
-          undefined,
-          "orange",
-          undefined,
-          undefined,
-          true
-        );
-        informaData.value.cardid = defaultCitizenData.value;
-      }
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-const filterSelector = (val: any, update: Function, refData: string) => {
-  switch (refData) {
-    case "prefixOps":
-      update(() => {
-        Ops.value.prefixOps = OpsFilter.value.prefixOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-    case "genderOps":
-      update(() => {
-        Ops.value.genderOps = OpsFilter.value.genderOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-    case "bloodOps":
-      update(() => {
-        Ops.value.bloodOps = OpsFilter.value.bloodOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-    case "statusOps":
-      update(() => {
-        Ops.value.statusOps = OpsFilter.value.statusOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-    case "religionOps":
-      update(() => {
-        Ops.value.religionOps = OpsFilter.value.religionOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-    case "employeeClassOps":
-      update(() => {
-        Ops.value.employeeClassOps = OpsFilter.value.employeeClassOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-    case "employeeTypeOps":
-      update(() => {
-        Ops.value.employeeTypeOps = OpsFilter.value.employeeTypeOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-
-    default:
-      break;
-  }
-};
-
-const handleDate = async (modelData: Date) => {
-  informaData.value.birthDate = modelData;
-  await calRetire(modelData);
-};
-
-const calRetire = async (birth: Date) => {
-  const body = {
-    birthDate: dateToISO(birth),
-  };
-  //   if (dateToISO(dateBefore.value) != dateToISO(birth)) {
-  showLoader();
-  await http
-    .post(config.API.profileCalRetire, body)
-    .then((res: any) => {
-      const data = res.data.result;
-      informaData.value.age = data.age;
-      changeRetireText(data.retireDate);
-      dateBefore.value = birth;
-    })
-    .catch((e: any) => {
-      messageError($q, e);
-      const retire = new Date(`${birth.getFullYear() + 60}-09-30`);
-      informaData.value.birthDate = dateBefore.value;
-      changeRetireText(date2Thai(retire));
-    })
-    .finally(() => {
-      hideLoader();
-    });
-  //   }
-};
-
-const conditionSave = async () => {
-  if (myForm.value !== null) {
-    myForm.value.validate().then((success) => {
-      if (success) {
-        dialogConfirm(
-          $q,
-          async () => await saveData(),
-          "ต้องการแก้ไขข้อมูลหรือไม่?",
-          "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย"
-        );
-      }
-    });
-  }
-};
-
-const saveData = async () => {
-  const body = {
-    citizenId: informaData.value.cardid,
-    prefixId: informaData.value.prefixId,
-    firstname: informaData.value.firstname,
-    lastname: informaData.value.lastname,
-    dateOfBirth:
-      informaData.value.birthDate !== null
-        ? dateToISO(informaData.value.birthDate)
-        : null,
-    genderId: informaData.value.genderId,
-    nationality: informaData.value.nationality,
-    race: informaData.value.ethnicity,
-    religionId: informaData.value.religionId,
-    bloodGroupId: informaData.value.bloodId,
-    relationshipId: informaData.value.statusId,
-    telephoneNumber: informaData.value.tel,
-    reason: reason.value,
-    educationOld: educationOld.value,
-    organizationPositionOld: organizationPositionOld.value,
-    positionTypeOld: positionTypeOld.value,
-    positionLevelOld: positionLevelOld.value,
-    positionNumberOld: posNo.value,
-    amount: 0,
-    amountOld: salary.value,
-  };
-  showLoader();
-  await http
-    .put(config.API.receiveDataId(route.params.id.toString()), body)
-    .then((res: any) => {
-      //   const data = res.data.result;
-      //   console.log(data);
-      success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
-      edit.value = false;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await getData();
-      hideLoader();
-    });
-};
-
-const getClass = (val: boolean) => {
-  return {
-    "full-width inputgreen cursor-pointer": val,
-    "full-width cursor-pointer": !val,
-  };
-};
-</script>
 <style lang="scss" scope>
 .q-img {
   border-radius: 5px;
diff --git a/src/modules/05_placement/components/Repatriate/RepatriatebyId.vue b/src/modules/05_placement/components/Repatriate/RepatriatebyId.vue
index 9e3ba31ff..79a97ffd6 100644
--- a/src/modules/05_placement/components/Repatriate/RepatriatebyId.vue
+++ b/src/modules/05_placement/components/Repatriate/RepatriatebyId.vue
@@ -1,3 +1,150 @@
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { useQuasar } from "quasar";
+import { useRoute, useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+
+import CurrencyInput from "@/components/CurruncyInput.vue";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import keycloak from "@/plugins/keycloak";
+
+import type { QTableProps, QForm } from "quasar";
+
+const $q = useQuasar();
+const route = useRoute();
+const router = useRouter();
+const mixin = useCounterMixin();
+const edit = ref<boolean>(false);
+const dataId = route.params.id as string;
+const {
+  date2Thai,
+  dialogMessage,
+  messageError,
+  showLoader,
+  hideLoader,
+  success,
+  dialogConfirm,
+} = mixin;
+
+const myForm = ref<QForm | null>(null);
+
+const personId = ref<string>("");
+const fullname = ref<string>("");
+const id = ref<string>("");
+const prefix = ref<string>("");
+const firstName = ref<string>("");
+const lastName = ref<string>("");
+const position = ref<string>("");
+const posNo = ref<string>("");
+const positionLevel = ref<string>("");
+const createdAt = ref<string>("");
+const organization = ref<string>("");
+const reason = ref<string>("");
+const status = ref<string>("");
+const date = ref<Date | null>(null);
+const salary = ref<string>("");
+const positionTypeOld = ref<string>("");
+const positionLevelOld = ref<string>("");
+const positionNumberOld = ref<string>("");
+const organizationPositionOld = ref<string>("");
+const isActive = ref<string>("");
+
+const getData = async () => {
+  showLoader();
+  await http
+    .get(config.API.repatriationDetail(dataId))
+    .then((res: any) => {
+      const data = res.data.result;
+      (fullname.value = `${data.prefix}${data.firstName} ${data.lastName}`),
+        (id.value = data.id);
+      personId.value = data.profileId;
+      prefix.value = data.prefix;
+      firstName.value = data.firstName;
+      lastName.value = data.lastName;
+      position.value = data.position;
+      posNo.value = data.posNo;
+      positionLevel.value = data.positionLevel;
+      createdAt.value = data.createdAt;
+      organization.value = data.organization;
+      reason.value = data.reason;
+      status.value = data.status;
+      date.value = data.date;
+      salary.value = data.salary;
+      positionTypeOld.value = data.positionTypeOld;
+      positionLevelOld.value = data.positionLevelOld;
+      positionNumberOld.value = data.positionNumberOld;
+      organizationPositionOld.value = data.organizationPositionOld;
+      isActive.value = data.isActive;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+
+const conditionSave = async () => {
+  if (myForm.value !== null) {
+    myForm.value.validate().then((success: any) => {
+      if (success) {
+        dialogConfirm(
+          $q,
+          async () => await saveData(),
+          "ต้องการแก้ไขข้อมูลหรือไม่?",
+          "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย"
+        );
+      }
+    });
+  }
+};
+const cancelBtn = () => {
+  edit.value = !edit;
+  getData();
+};
+const saveData = async () => {
+  const body = {
+    organization: organization.value,
+    reason: reason.value,
+    organizationPositionOld: organizationPositionOld.value,
+    date: date.value,
+    positionTypeOld: positionTypeOld.value,
+    positionLevelOld: positionLevelOld.value,
+    positionNumberOld: posNo.value,
+    amountOld: salary.value,
+  };
+  showLoader();
+  await http
+    .put(config.API.repatriationMainEdit(dataId), body)
+    .then((res: any) => {
+      //   const data = res.data.result;
+      //   console.log(data);
+      success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
+      edit.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await getData();
+      hideLoader();
+    });
+};
+
+onMounted(async () => {
+  await getData();
+});
+</script>
+
 <template>
   <div class="toptitle text-dark col-12 row items-center">
     <q-btn
@@ -272,152 +419,7 @@
     </q-form>
   </q-card>
 </template>
-<script setup lang="ts">
-import { onMounted, ref } from "vue";
-import { useQuasar } from "quasar";
-import { useRoute, useRouter } from "vue-router";
-import { useCounterMixin } from "@/stores/mixin";
 
-import CurrencyInput from "@/components/CurruncyInput.vue";
-
-import http from "@/plugins/http";
-import config from "@/app.config";
-import keycloak from "@/plugins/keycloak";
-
-import type { QTableProps, QForm } from "quasar";
-
-const $q = useQuasar();
-const route = useRoute();
-const router = useRouter();
-const mixin = useCounterMixin();
-const edit = ref<boolean>(false);
-const dataId = route.params.id as string;
-const {
-  date2Thai,
-  dialogMessage,
-  messageError,
-  showLoader,
-  hideLoader,
-  success,
-  dialogConfirm,
-} = mixin;
-
-const myForm = ref<QForm | null>(null);
-
-const personId = ref<string>("");
-const fullname = ref<string>("");
-const id = ref<string>("");
-const prefix = ref<string>("");
-const firstName = ref<string>("");
-const lastName = ref<string>("");
-const position = ref<string>("");
-const posNo = ref<string>("");
-const positionLevel = ref<string>("");
-const createdAt = ref<string>("");
-const organization = ref<string>("");
-const reason = ref<string>("");
-const status = ref<string>("");
-const date = ref<Date | null>(null);
-const salary = ref<string>("");
-const positionTypeOld = ref<string>("");
-const positionLevelOld = ref<string>("");
-const positionNumberOld = ref<string>("");
-const organizationPositionOld = ref<string>("");
-const isActive = ref<string>("");
-
-const getData = async () => {
-  showLoader();
-  await http
-    .get(config.API.repatriationDetail(dataId))
-    .then((res: any) => {
-      const data = res.data.result;
-      (fullname.value = `${data.prefix}${data.firstName} ${data.lastName}`),
-        (id.value = data.id);
-      personId.value = data.profileId;
-      prefix.value = data.prefix;
-      firstName.value = data.firstName;
-      lastName.value = data.lastName;
-      position.value = data.position;
-      posNo.value = data.posNo;
-      positionLevel.value = data.positionLevel;
-      createdAt.value = data.createdAt;
-      organization.value = data.organization;
-      reason.value = data.reason;
-      status.value = data.status;
-      date.value = data.date;
-      salary.value = data.salary;
-      positionTypeOld.value = data.positionTypeOld;
-      positionLevelOld.value = data.positionLevelOld;
-      positionNumberOld.value = data.positionNumberOld;
-      organizationPositionOld.value = data.organizationPositionOld;
-      isActive.value = data.isActive;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-const getClass = (val: boolean) => {
-  return {
-    "full-width inputgreen cursor-pointer": val,
-    "full-width cursor-pointer": !val,
-  };
-};
-
-const conditionSave = async () => {
-  if (myForm.value !== null) {
-    myForm.value.validate().then((success: any) => {
-      if (success) {
-        dialogConfirm(
-          $q,
-          async () => await saveData(),
-          "ต้องการแก้ไขข้อมูลหรือไม่?",
-          "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย"
-        );
-      }
-    });
-  }
-};
-const cancelBtn = () => {
-  edit.value = !edit;
-  getData();
-};
-const saveData = async () => {
-  const body = {
-    organization: organization.value,
-    reason: reason.value,
-    organizationPositionOld: organizationPositionOld.value,
-    date: date.value,
-    positionTypeOld: positionTypeOld.value,
-    positionLevelOld: positionLevelOld.value,
-    positionNumberOld: posNo.value,
-    amountOld: salary.value,
-  };
-  showLoader();
-  await http
-    .put(config.API.repatriationMainEdit(dataId), body)
-    .then((res: any) => {
-      //   const data = res.data.result;
-      //   console.log(data);
-      success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
-      edit.value = false;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await getData();
-      hideLoader();
-    });
-};
-
-onMounted(async () => {
-  await getData();
-});
-</script>
 <style lang="scss" scope>
 .q-img {
   border-radius: 5px;
diff --git a/src/modules/05_placement/components/RepatriationOrder/AddOrder.vue b/src/modules/05_placement/components/RepatriationOrder/AddOrder.vue
index f537b6227..488365312 100644
--- a/src/modules/05_placement/components/RepatriationOrder/AddOrder.vue
+++ b/src/modules/05_placement/components/RepatriationOrder/AddOrder.vue
@@ -1,3 +1,31 @@
+<script setup lang="ts">
+import { useRouter } from "vue-router";
+import { ref, defineAsyncComponent } from "vue";
+import type { QStepper } from "quasar";
+
+const step01 = defineAsyncComponent(
+  () => import("@/modules/05_placement/components/RepatriationOrder/step01.vue")
+);
+const step02 = defineAsyncComponent(
+  () => import("@/modules/05_placement/components/RepatriationOrder/step02.vue")
+);
+const step03 = defineAsyncComponent(
+  () => import("@/modules/05_placement/components/RepatriationOrder/step03.vue")
+);
+
+const router = useRouter();
+const step = ref<number>(1);
+const stepper = ref<QStepper>();
+
+const nextStep = () => {
+  stepper.value!.next();
+};
+
+const previousStep = () => {
+  stepper.value!.previous();
+};
+</script>
+
 <template>
   <div class="toptitle text-dark col-12 row items-center">
     <q-btn
@@ -49,33 +77,7 @@
     </q-stepper>
   </q-card>
 </template>
-<script setup lang="ts">
-import { useRouter } from "vue-router";
-import { ref, defineAsyncComponent } from "vue";
-import type { QStepper } from "quasar";
 
-const step01 = defineAsyncComponent(
-  () => import("@/modules/05_placement/components/RepatriationOrder/step01.vue")
-);
-const step02 = defineAsyncComponent(
-  () => import("@/modules/05_placement/components/RepatriationOrder/step02.vue")
-);
-const step03 = defineAsyncComponent(
-  () => import("@/modules/05_placement/components/RepatriationOrder/step03.vue")
-);
-
-const router = useRouter();
-const step = ref<number>(1);
-const stepper = ref<QStepper>();
-
-const nextStep = () => {
-  stepper.value!.next();
-};
-
-const previousStep = () => {
-  stepper.value!.previous();
-};
-</script>
 <style>
 .q-stepper--horizontal .q-stepper__step-inner {
   padding: 0px;
diff --git a/src/modules/05_placement/components/RepatriationOrder/List.vue b/src/modules/05_placement/components/RepatriationOrder/List.vue
index f811d267f..8fbd21f19 100644
--- a/src/modules/05_placement/components/RepatriationOrder/List.vue
+++ b/src/modules/05_placement/components/RepatriationOrder/List.vue
@@ -1,193 +1,3 @@
-<template>
-  <div class="toptitle text-dark col-12 row items-center">
-    รายการคำสั่งช่วยราชการ/ส่งตัวกลับ
-  </div>
-  <div>
-    <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
-      <div class="row q-col-gutter-sm">
-        <div class="row col-12 q-col-gutter-sm">
-          <q-select
-            class="col-xs-12 col-sm-3 col-md-2"
-            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"
-            @update:model-value="searchFilterTable"
-          />
-          <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="ค้นหา"
-          >
-            <template v-slot:append>
-              <q-icon v-if="filterKeyword == ''" name="search" />
-              <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"
-          />
-        </div>
-        <div class="col-12">
-          <q-card bordered class="col-12 filter-card q-pa-sm">
-            <div class="row col-12 q-col-gutter-sm">
-              <q-select
-                class="col-xs-12 col-sm-3 col-md-2"
-                v-model="OrderType"
-                label="ประเภท"
-                dense
-                emit-value
-                map-options
-                option-label="name"
-                :options="OrderTypeOption"
-                option-value="id"
-                lazy-rules
-                hide-bottom-space
-                :readonly="false"
-                :borderless="false"
-                :outlined="true"
-                :hide-dropdown-icon="false"
-                @update:model-value="searchFilterTable"
-              />
-              <q-select
-                class="col-xs-12 col-sm-3 col-md-2"
-                v-model="OrderStatus"
-                label="สถานะ"
-                dense
-                emit-value
-                map-options
-                option-label="name"
-                :options="OrderStatusOption"
-                option-value="id"
-                lazy-rules
-                hide-bottom-space
-                :readonly="false"
-                :borderless="false"
-                :outlined="true"
-                :hide-dropdown-icon="false"
-                @update:model-value="searchFilterTable"
-              />
-            </div>
-          </q-card>
-        </div>
-        <div class="col-12">
-          <q-table
-            ref="table"
-            :columns="columns"
-            :rows="UpdataData"
-            :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">
-                  <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="redirectToPage(props.row.Order)"
-              >
-                <q-td key="Order" :props="props">
-                  {{ props.row.Order }}
-                </q-td>
-                <q-td key="OrderNum" :props="props">
-                  {{ props.row.OrderNum }}
-                </q-td>
-                <q-td key="OrderType" :props="props">
-                  {{ props.row.OrderType }}
-                </q-td>
-                <q-td key="OrderDate" :props="props">
-                  {{ props.row.OrderDate }}
-                </q-td>
-                <q-td key="OrderBy" :props="props">
-                  {{ props.row.OrderBy }}
-                </q-td>
-                <q-td key="Signer" :props="props">
-                  {{ props.row.Signer }}
-                </q-td>
-                <q-td key="OrderStatus" :props="props">
-                  {{ props.row.OrderStatus }}
-                </q-td>
-                <q-td auto-width>
-                  <q-btn
-                    dense
-                    size="12px"
-                    flat
-                    round
-                    color="red"
-                    @click.stop="clickDelete(props.row.id)"
-                    icon="mdi-delete"
-                  >
-                  </q-btn>
-                </q-td>
-              </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>
-            </template>
-          </q-table>
-        </div>
-      </div>
-    </q-card>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { onMounted, reactive, ref, useAttrs, computed } from "vue";
 import type { QTableProps } from "quasar";
@@ -677,6 +487,196 @@ const paginationLabel = (start: string, end: string, total: string) => {
 };
 </script>
 
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    รายการคำสั่งช่วยราชการ/ส่งตัวกลับ
+  </div>
+  <div>
+    <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
+      <div class="row q-col-gutter-sm">
+        <div class="row col-12 q-col-gutter-sm">
+          <q-select
+            class="col-xs-12 col-sm-3 col-md-2"
+            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"
+            @update:model-value="searchFilterTable"
+          />
+          <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="ค้นหา"
+          >
+            <template v-slot:append>
+              <q-icon v-if="filterKeyword == ''" name="search" />
+              <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"
+          />
+        </div>
+        <div class="col-12">
+          <q-card bordered class="col-12 filter-card q-pa-sm">
+            <div class="row col-12 q-col-gutter-sm">
+              <q-select
+                class="col-xs-12 col-sm-3 col-md-2"
+                v-model="OrderType"
+                label="ประเภท"
+                dense
+                emit-value
+                map-options
+                option-label="name"
+                :options="OrderTypeOption"
+                option-value="id"
+                lazy-rules
+                hide-bottom-space
+                :readonly="false"
+                :borderless="false"
+                :outlined="true"
+                :hide-dropdown-icon="false"
+                @update:model-value="searchFilterTable"
+              />
+              <q-select
+                class="col-xs-12 col-sm-3 col-md-2"
+                v-model="OrderStatus"
+                label="สถานะ"
+                dense
+                emit-value
+                map-options
+                option-label="name"
+                :options="OrderStatusOption"
+                option-value="id"
+                lazy-rules
+                hide-bottom-space
+                :readonly="false"
+                :borderless="false"
+                :outlined="true"
+                :hide-dropdown-icon="false"
+                @update:model-value="searchFilterTable"
+              />
+            </div>
+          </q-card>
+        </div>
+        <div class="col-12">
+          <q-table
+            ref="table"
+            :columns="columns"
+            :rows="UpdataData"
+            :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">
+                  <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="redirectToPage(props.row.Order)"
+              >
+                <q-td key="Order" :props="props">
+                  {{ props.row.Order }}
+                </q-td>
+                <q-td key="OrderNum" :props="props">
+                  {{ props.row.OrderNum }}
+                </q-td>
+                <q-td key="OrderType" :props="props">
+                  {{ props.row.OrderType }}
+                </q-td>
+                <q-td key="OrderDate" :props="props">
+                  {{ props.row.OrderDate }}
+                </q-td>
+                <q-td key="OrderBy" :props="props">
+                  {{ props.row.OrderBy }}
+                </q-td>
+                <q-td key="Signer" :props="props">
+                  {{ props.row.Signer }}
+                </q-td>
+                <q-td key="OrderStatus" :props="props">
+                  {{ props.row.OrderStatus }}
+                </q-td>
+                <q-td auto-width>
+                  <q-btn
+                    dense
+                    size="12px"
+                    flat
+                    round
+                    color="red"
+                    @click.stop="clickDelete(props.row.id)"
+                    icon="mdi-delete"
+                  >
+                  </q-btn>
+                </q-td>
+              </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>
+            </template>
+          </q-table>
+        </div>
+      </div>
+    </q-card>
+  </div>
+</template>
+
 <style lang="scss" scope>
 .filter-card {
   background-color: #f1f1f1b0;
diff --git a/src/modules/05_placement/components/RepatriationOrder/step01.vue b/src/modules/05_placement/components/RepatriationOrder/step01.vue
index da4912ce6..d15a21d79 100644
--- a/src/modules/05_placement/components/RepatriationOrder/step01.vue
+++ b/src/modules/05_placement/components/RepatriationOrder/step01.vue
@@ -1,3 +1,137 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import type { DataOption } from "@/modules/05_placement/interface/index/Main";
+import { useCounterMixin } from "@/stores/mixin";
+import type { QForm } from "quasar";
+
+const mixin = useCounterMixin();
+const { date2Thai } = mixin;
+
+const props = defineProps({
+  next: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  previous: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+const next = () => props.next();
+const previous = () => props.previous();
+
+const myForm = ref<QForm>();
+
+const editRow = ref<boolean>(false);
+
+const nameOrder = ref<string>("");
+const nameCommand = ref<string>("");
+const positionCommand = ref<string>("");
+const dateYear = ref<number>(new Date().getFullYear());
+const command = ref<string>("");
+const dateCommand = ref<Date>(new Date());
+// const dateRegister = ref<Date>(new Date());
+// const dateAnnounce = ref<Date>(new Date());
+
+const typeOrder = ref<string>("ช่วยราชการ");
+const typeOrderOption = ref<DataOption[]>(["ส่งตัวกลับ", "ส่งตัวกลับ"]);
+const typeOrderOptionFilter = ref<DataOption[]>([]);
+
+const byOrder = ref<string>("");
+const byOrderOption = ref<DataOption[]>([]);
+const byOrderOptionFilter = ref<DataOption[]>([]);
+
+// const register = ref<string>("");
+const registerOption = ref<DataOption[]>([]);
+const registerOptionFilter = ref<DataOption[]>([]);
+
+// const announce = ref<string>("");
+const announceOption = ref<DataOption[]>([]);
+const announceOptionFilter = ref<DataOption[]>([]);
+
+// const position = ref<string>("");
+const positionOption = ref<DataOption[]>([]);
+const positionOptionFilter = ref<DataOption[]>([]);
+
+const test = ref<string>("นายก ข");
+const testOption = ref<DataOption[]>([]);
+const testOptionFilter = ref<DataOption[]>([]);
+
+const clickEditRow = () => (editRow.value = true);
+
+const filterSelector = (val: any, update: Function, filtername: string) => {
+  switch (filtername) {
+    case "typeOrderOption":
+      update(() => {
+        typeOrderOption.value = typeOrderOptionFilter.value.filter(
+          (v: DataOption) => v.name!.indexOf(val) > -1
+        );
+      });
+      break;
+    case "byOrderOption":
+      update(() => {
+        byOrderOption.value = byOrderOptionFilter.value.filter(
+          (v: DataOption) => v.name!.indexOf(val) > -1
+        );
+      });
+      break;
+
+    case "registerOption":
+      update(() => {
+        registerOption.value = registerOptionFilter.value.filter(
+          (v: DataOption) => v.name!.indexOf(val) > -1
+        );
+      });
+      break;
+
+    case "announceOption":
+      update(() => {
+        announceOption.value = announceOptionFilter.value.filter(
+          (v: DataOption) => v.name!.indexOf(val) > -1
+        );
+      });
+      break;
+
+    case "positionOption":
+      update(() => {
+        positionOption.value = positionOptionFilter.value.filter(
+          (v: DataOption) => v.name!.indexOf(val) > -1
+        );
+      });
+      break;
+    case "testOption":
+      update(() => {
+        testOption.value = testOptionFilter.value.filter(
+          (v: DataOption) => v.name!.indexOf(val) > -1
+        );
+      });
+      break;
+    default:
+      break;
+  }
+};
+
+const submit = async () => {
+  next();
+  //   await myForm.value!.validate().then((result: boolean) => {
+  //     if (result) {
+  //       next();
+  //     }
+  //   });
+};
+
+/**
+ * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
+ * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
+ */
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+</script>
+
 <template>
   <div style="max-height: 68vh; overflow-y: scroll">
     <q-form ref="myForm" class="q-pa-md">
@@ -213,139 +347,7 @@
     <q-btn unelevated label="บันทึก" color="public" @click="submit"> </q-btn>
   </div>
 </template>
-<script setup lang="ts">
-import { ref } from "vue";
-import type { DataOption } from "@/modules/05_placement/interface/index/Main";
-import { useCounterMixin } from "@/stores/mixin";
-import type { QForm } from "quasar";
 
-const mixin = useCounterMixin();
-const { date2Thai } = mixin;
-
-const props = defineProps({
-  next: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-  previous: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-});
-const next = () => props.next();
-const previous = () => props.previous();
-
-const myForm = ref<QForm>();
-
-const editRow = ref<boolean>(false);
-
-const nameOrder = ref<string>("");
-const nameCommand = ref<string>("");
-const positionCommand = ref<string>("");
-const dateYear = ref<number>(new Date().getFullYear());
-const command = ref<string>("");
-const dateCommand = ref<Date>(new Date());
-// const dateRegister = ref<Date>(new Date());
-// const dateAnnounce = ref<Date>(new Date());
-
-const typeOrder = ref<string>("ช่วยราชการ");
-const typeOrderOption = ref<DataOption[]>(['ส่งตัวกลับ',"ส่งตัวกลับ"]);
-const typeOrderOptionFilter = ref<DataOption[]>([]);
-
-const byOrder = ref<string>("");
-const byOrderOption = ref<DataOption[]>([]);
-const byOrderOptionFilter = ref<DataOption[]>([]);
-
-// const register = ref<string>("");
-const registerOption = ref<DataOption[]>([]);
-const registerOptionFilter = ref<DataOption[]>([]);
-
-// const announce = ref<string>("");
-const announceOption = ref<DataOption[]>([]);
-const announceOptionFilter = ref<DataOption[]>([]);
-
-// const position = ref<string>("");
-const positionOption = ref<DataOption[]>([]);
-const positionOptionFilter = ref<DataOption[]>([]);
-
-const test = ref<string>("นายก ข");
-const testOption = ref<DataOption[]>([]);
-const testOptionFilter = ref<DataOption[]>([]);
-
-const clickEditRow = () => (editRow.value = true);
-
-const filterSelector = (val: any, update: Function, filtername: string) => {
-  switch (filtername) {
-    case "typeOrderOption":
-      update(() => {
-        typeOrderOption.value = typeOrderOptionFilter.value.filter(
-          (v: DataOption) => v.name!.indexOf(val) > -1
-        );
-      });
-      break;
-    case "byOrderOption":
-      update(() => {
-        byOrderOption.value = byOrderOptionFilter.value.filter(
-          (v: DataOption) => v.name!.indexOf(val) > -1
-        );
-      });
-      break;
-
-    case "registerOption":
-      update(() => {
-        registerOption.value = registerOptionFilter.value.filter(
-          (v: DataOption) => v.name!.indexOf(val) > -1
-        );
-      });
-      break;
-
-    case "announceOption":
-      update(() => {
-        announceOption.value = announceOptionFilter.value.filter(
-          (v: DataOption) => v.name!.indexOf(val) > -1
-        );
-      });
-      break;
-
-    case "positionOption":
-      update(() => {
-        positionOption.value = positionOptionFilter.value.filter(
-          (v: DataOption) => v.name!.indexOf(val) > -1
-        );
-      });
-      break;
-    case "testOption":
-      update(() => {
-        testOption.value = testOptionFilter.value.filter(
-          (v: DataOption) => v.name!.indexOf(val) > -1
-        );
-      });
-      break;
-    default:
-      break;
-  }
-};
-
-const submit = async () => {
-  next();
-  //   await myForm.value!.validate().then((result: boolean) => {
-  //     if (result) {
-  //       next();
-  //     }
-  //   });
-};
-
-/**
- * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
- * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
- */
-const getClass = (val: boolean) => {
-  return {
-    "full-width inputgreen cursor-pointer": val,
-    "full-width cursor-pointer": !val,
-  };
-};
-</script>
 <style>
 .q-field--with-bottom {
   padding-bottom: 0px;
diff --git a/src/modules/05_placement/components/RepatriationOrder/step02.vue b/src/modules/05_placement/components/RepatriationOrder/step02.vue
index 8d58d929e..4cb65bc38 100644
--- a/src/modules/05_placement/components/RepatriationOrder/step02.vue
+++ b/src/modules/05_placement/components/RepatriationOrder/step02.vue
@@ -1,305 +1,3 @@
-<template>
-  <div>
-    <div class="q-py-md q-pl-md" style="height: 68vh; overflow-y: scroll">
-      <div class="col-12 row q-py-sm items-center">
-        <q-btn flat round color="primary" @click="clickAdd" icon="mdi-plus">
-          <q-tooltip>เพิ่มข้อมูล</q-tooltip>
-        </q-btn>
-        <q-space />
-        <div class="items-center" style="display: flex">
-          <!-- ค้นหาข้อความใน table -->
-          <q-input
-            standout
-            dense
-            v-model="filter"
-            ref="filterRef"
-            outlined
-            debounce="300"
-            placeholder="ค้นหา"
-            style="max-width: 200px"
-            class="q-ml-sm"
-          >
-            <template v-slot:append>
-              <q-icon v-if="filter == ''" name="search" />
-              <q-icon
-                v-if="filter !== ''"
-                name="clear"
-                class="cursor-pointer"
-                @click="resetFilter"
-              />
-            </template>
-          </q-input>
-          <!-- แสดงคอลัมน์ใน table -->
-          <q-select
-            v-model="visibleColumns"
-            :display-value="$q.lang.table.columns"
-            multiple
-            outlined
-            dense
-            :options="columns"
-            options-dense
-            option-value="name"
-            map-options
-            emit-value
-            style="min-width: 150px"
-            class="gt-xs q-ml-sm"
-          />
-        </div>
-      </div>
-      <d-table
-        :rows="rows"
-        :columns="columns"
-        :visible-columns="visibleColumns"
-        :filter="filter"
-        row-key="name"
-      >
-        <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">
-            <q-td key="no" :props="props">
-              {{ props.rowIndex + 1 }}
-            </q-td>
-            <q-td key="idcard" :props="props">
-              {{ props.row.idcard }}
-            </q-td>
-            <q-td key="name" :props="props">
-              {{ props.row.name }}
-            </q-td>
-            <q-td key="position" :props="props">
-              {{ props.row.position }}
-            </q-td>
-            <q-td key="agency" :props="props">
-              {{ props.row.agency }}
-            </q-td>
-            <q-td key="send" :props="props">
-              <q-select
-                :class="getClass(true)"
-                hide-bottom-space
-                multiple
-                :outlined="true"
-                dense
-                lazy-rules
-                v-model="props.row.mutiselect"
-                :rules="[(val:any) => !!val || `${'กรุณาเลือกช่องทางการส่งสำเนา'}`,(val:any) => val.length > 0 || `${'กรุณาเลือกช่องทางการส่งสำเนา'}`]"
-                :label="`${'เลือกช่องทางการส่งสำเนา'}`"
-                emit-value
-                map-options
-                option-label="name"
-                :options="optionSelect"
-                option-value="id"
-                input-debounce="0"
-                color="primary"
-              >
-                <template v-slot:no-option>
-                  <q-item>
-                    <q-item-section class="text-black">
-                      ไม่พบข้อมูลที่ค้นหา
-                    </q-item-section>
-                  </q-item>
-                </template>
-              </q-select>
-            </q-td>
-            <q-td auto-width>
-              <q-btn
-                dense
-                size="12px"
-                flat
-                round
-                color="red"
-                @click="clickDelete(props.row.id)"
-                icon="mdi-delete"
-              >
-                <q-tooltip>ลบข้อมูล</q-tooltip>
-              </q-btn>
-            </q-td>
-          </q-tr>
-        </template>
-      </d-table>
-    </div>
-    <q-separator />
-    <div class="flex justify-end q-pa-sm q-gutter-sm">
-      <q-btn
-        dense
-        outline
-        color="primary"
-        icon="chevron_left"
-        @click="previous"
-        class="q-pr-md"
-        label="เลือกรายชื่อ"
-      >
-      </q-btn>
-      <q-btn
-        dense
-        unelevated
-        label="บันทึก"
-        color="public"
-        @click="next"
-        class="q-px-md"
-        ><!-- icon="mdi-content-save-outline"
-        <q-tooltip>บันทึก</q-tooltip> -->
-      </q-btn>
-      <!-- <q-btn flat round color="primary" icon="chevron_right" @click="next">
-        <q-tooltip>ต่อไป</q-tooltip>
-      </q-btn> -->
-    </div>
-  </div>
-
-  <q-dialog v-model="modal" persistent full-width>
-    <q-card>
-      <q-form ref="myForm">
-        <DialogHeader tittle="เลือกรายชื่อตามหน่วยงาน" :close="clickClose" />
-        <q-separator />
-        <q-card-section class="q-pa-sm bg-grey-1">
-          <div class="row col-12 q-col-gutter-sm">
-            <div class="col-xs-12 col-sm-5 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"
-                  >
-                    <template v-slot:append>
-                      <q-icon name="mdi-magnify" />
-                    </template>
-                  </q-input>
-                  <q-tree
-                    :nodes="nodesTree"
-                    dense
-                    node-key="id"
-                    v-model:selected="selected"
-                    v-model:expanded="expanded"
-                    no-selection-unset
-                    selected-color="primary"
-                    @update:selected="onSelected"
-                    default-expand-all
-                  />
-                </q-scroll-area>
-              </q-card>
-            </div>
-            <div class="col-xs-12 col-sm-7">
-              <div class="col-12 row q-py-sm items-center">
-                <q-space />
-                <div class="items-center" style="display: flex">
-                  <q-input
-                    standout
-                    dense
-                    v-model="filterModal"
-                    ref="filterRef"
-                    outlined
-                    debounce="300"
-                    placeholder="ค้นหา"
-                    style="max-width: 200px"
-                    class="q-ml-sm"
-                  >
-                    <template v-slot:append>
-                      <q-icon v-if="filterModal == ''" name="search" />
-                      <q-icon
-                        v-if="filterModal !== ''"
-                        name="clear"
-                        class="cursor-pointer"
-                        @click="resetFilter"
-                      />
-                    </template>
-                  </q-input>
-
-                  <q-select
-                    v-model="visibleColumnsModal"
-                    :display-value="$q.lang.table.columns"
-                    multiple
-                    outlined
-                    dense
-                    :options="columnsModal"
-                    options-dense
-                    option-value="name"
-                    map-options
-                    emit-value
-                    style="min-width: 150px"
-                    class="gt-xs q-ml-sm"
-                  />
-                </div>
-              </div>
-              <d-table
-                :rows="rowsModal"
-                :columns="columnsModal"
-                :visible-columns="visibleColumnsModal"
-                :filter="filterModal"
-                row-key="name"
-                selection="multiple"
-                v-model:selected="selectedModal"
-              >
-                <template v-slot:header-selection="scope">
-                  <q-checkbox
-                    keep-color
-                    color="primary"
-                    dense
-                    v-model="scope.selected"
-                  />
-                </template>
-
-                <template v-slot:body-selection="scope">
-                  <!-- <q-checkbox
-                    keep-color
-                    color="primary"
-                    dense
-                    :model-value="scope.selected"
-                    @update:model-value="
-                      (val, evt) => {
-                        Object.getOwnPropertyDescriptor(scope, 'selected').set(
-                          val,
-                          evt
-                        );
-                      }
-                    "
-                  /> -->
-                  <q-checkbox
-                    keep-color
-                    color="primary"
-                    dense
-                    v-model="scope.selected"
-                  />
-                </template>
-
-                <template v-slot:body-cell="props">
-                  <q-td :props="props">
-                    <div v-if="props.col.name == 'no'">
-                      {{ props.rowIndex + 1 }}
-                    </div>
-
-                    <div v-else>
-                      {{ props.value }}
-                    </div>
-                  </q-td>
-                </template>
-              </d-table>
-            </div>
-          </div>
-        </q-card-section>
-        <q-separator />
-        <q-card-actions align="right">
-          <q-btn
-            flat
-            round
-            color="public"
-            icon="mdi-content-save-outline"
-            @click="clickClose"
-          >
-            <q-tooltip>บันทึก</q-tooltip>
-          </q-btn>
-        </q-card-actions>
-      </q-form>
-    </q-card>
-  </q-dialog>
-</template>
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
@@ -681,4 +379,308 @@ const onSelected = async (id: string) => {
 
 const deleteData = async (id: string) => {};
 </script>
+
+<template>
+  <div>
+    <div class="q-py-md q-pl-md" style="height: 68vh; overflow-y: scroll">
+      <div class="col-12 row q-py-sm items-center">
+        <q-btn flat round color="primary" @click="clickAdd" icon="mdi-plus">
+          <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+        </q-btn>
+        <q-space />
+        <div class="items-center" style="display: flex">
+          <!-- ค้นหาข้อความใน table -->
+          <q-input
+            standout
+            dense
+            v-model="filter"
+            ref="filterRef"
+            outlined
+            debounce="300"
+            placeholder="ค้นหา"
+            style="max-width: 200px"
+            class="q-ml-sm"
+          >
+            <template v-slot:append>
+              <q-icon v-if="filter == ''" name="search" />
+              <q-icon
+                v-if="filter !== ''"
+                name="clear"
+                class="cursor-pointer"
+                @click="resetFilter"
+              />
+            </template>
+          </q-input>
+          <!-- แสดงคอลัมน์ใน table -->
+          <q-select
+            v-model="visibleColumns"
+            :display-value="$q.lang.table.columns"
+            multiple
+            outlined
+            dense
+            :options="columns"
+            options-dense
+            option-value="name"
+            map-options
+            emit-value
+            style="min-width: 150px"
+            class="gt-xs q-ml-sm"
+          />
+        </div>
+      </div>
+      <d-table
+        :rows="rows"
+        :columns="columns"
+        :visible-columns="visibleColumns"
+        :filter="filter"
+        row-key="name"
+      >
+        <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">
+            <q-td key="no" :props="props">
+              {{ props.rowIndex + 1 }}
+            </q-td>
+            <q-td key="idcard" :props="props">
+              {{ props.row.idcard }}
+            </q-td>
+            <q-td key="name" :props="props">
+              {{ props.row.name }}
+            </q-td>
+            <q-td key="position" :props="props">
+              {{ props.row.position }}
+            </q-td>
+            <q-td key="agency" :props="props">
+              {{ props.row.agency }}
+            </q-td>
+            <q-td key="send" :props="props">
+              <q-select
+                :class="getClass(true)"
+                hide-bottom-space
+                multiple
+                :outlined="true"
+                dense
+                lazy-rules
+                v-model="props.row.mutiselect"
+                :rules="[(val:any) => !!val || `${'กรุณาเลือกช่องทางการส่งสำเนา'}`,(val:any) => val.length > 0 || `${'กรุณาเลือกช่องทางการส่งสำเนา'}`]"
+                :label="`${'เลือกช่องทางการส่งสำเนา'}`"
+                emit-value
+                map-options
+                option-label="name"
+                :options="optionSelect"
+                option-value="id"
+                input-debounce="0"
+                color="primary"
+              >
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-black">
+                      ไม่พบข้อมูลที่ค้นหา
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                dense
+                size="12px"
+                flat
+                round
+                color="red"
+                @click="clickDelete(props.row.id)"
+                icon="mdi-delete"
+              >
+                <q-tooltip>ลบข้อมูล</q-tooltip>
+              </q-btn>
+            </q-td>
+          </q-tr>
+        </template>
+      </d-table>
+    </div>
+    <q-separator />
+    <div class="flex justify-end q-pa-sm q-gutter-sm">
+      <q-btn
+        dense
+        outline
+        color="primary"
+        icon="chevron_left"
+        @click="previous"
+        class="q-pr-md"
+        label="เลือกรายชื่อ"
+      >
+      </q-btn>
+      <q-btn
+        dense
+        unelevated
+        label="บันทึก"
+        color="public"
+        @click="next"
+        class="q-px-md"
+        ><!-- icon="mdi-content-save-outline"
+        <q-tooltip>บันทึก</q-tooltip> -->
+      </q-btn>
+      <!-- <q-btn flat round color="primary" icon="chevron_right" @click="next">
+        <q-tooltip>ต่อไป</q-tooltip>
+      </q-btn> -->
+    </div>
+  </div>
+
+  <q-dialog v-model="modal" persistent full-width>
+    <q-card>
+      <q-form ref="myForm">
+        <DialogHeader tittle="เลือกรายชื่อตามหน่วยงาน" :close="clickClose" />
+        <q-separator />
+        <q-card-section class="q-pa-sm bg-grey-1">
+          <div class="row col-12 q-col-gutter-sm">
+            <div class="col-xs-12 col-sm-5 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"
+                  >
+                    <template v-slot:append>
+                      <q-icon name="mdi-magnify" />
+                    </template>
+                  </q-input>
+                  <q-tree
+                    :nodes="nodesTree"
+                    dense
+                    node-key="id"
+                    v-model:selected="selected"
+                    v-model:expanded="expanded"
+                    no-selection-unset
+                    selected-color="primary"
+                    @update:selected="onSelected"
+                    default-expand-all
+                  />
+                </q-scroll-area>
+              </q-card>
+            </div>
+            <div class="col-xs-12 col-sm-7">
+              <div class="col-12 row q-py-sm items-center">
+                <q-space />
+                <div class="items-center" style="display: flex">
+                  <q-input
+                    standout
+                    dense
+                    v-model="filterModal"
+                    ref="filterRef"
+                    outlined
+                    debounce="300"
+                    placeholder="ค้นหา"
+                    style="max-width: 200px"
+                    class="q-ml-sm"
+                  >
+                    <template v-slot:append>
+                      <q-icon v-if="filterModal == ''" name="search" />
+                      <q-icon
+                        v-if="filterModal !== ''"
+                        name="clear"
+                        class="cursor-pointer"
+                        @click="resetFilter"
+                      />
+                    </template>
+                  </q-input>
+
+                  <q-select
+                    v-model="visibleColumnsModal"
+                    :display-value="$q.lang.table.columns"
+                    multiple
+                    outlined
+                    dense
+                    :options="columnsModal"
+                    options-dense
+                    option-value="name"
+                    map-options
+                    emit-value
+                    style="min-width: 150px"
+                    class="gt-xs q-ml-sm"
+                  />
+                </div>
+              </div>
+              <d-table
+                :rows="rowsModal"
+                :columns="columnsModal"
+                :visible-columns="visibleColumnsModal"
+                :filter="filterModal"
+                row-key="name"
+                selection="multiple"
+                v-model:selected="selectedModal"
+              >
+                <template v-slot:header-selection="scope">
+                  <q-checkbox
+                    keep-color
+                    color="primary"
+                    dense
+                    v-model="scope.selected"
+                  />
+                </template>
+
+                <template v-slot:body-selection="scope">
+                  <!-- <q-checkbox
+                    keep-color
+                    color="primary"
+                    dense
+                    :model-value="scope.selected"
+                    @update:model-value="
+                      (val, evt) => {
+                        Object.getOwnPropertyDescriptor(scope, 'selected').set(
+                          val,
+                          evt
+                        );
+                      }
+                    "
+                  /> -->
+                  <q-checkbox
+                    keep-color
+                    color="primary"
+                    dense
+                    v-model="scope.selected"
+                  />
+                </template>
+
+                <template v-slot:body-cell="props">
+                  <q-td :props="props">
+                    <div v-if="props.col.name == 'no'">
+                      {{ props.rowIndex + 1 }}
+                    </div>
+
+                    <div v-else>
+                      {{ props.value }}
+                    </div>
+                  </q-td>
+                </template>
+              </d-table>
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right">
+          <q-btn
+            flat
+            round
+            color="public"
+            icon="mdi-content-save-outline"
+            @click="clickClose"
+          >
+            <q-tooltip>บันทึก</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
 <style lang="scss"></style>
diff --git a/src/modules/05_placement/components/RepatriationOrder/step03.vue b/src/modules/05_placement/components/RepatriationOrder/step03.vue
index d7521a80d..4baeab77f 100644
--- a/src/modules/05_placement/components/RepatriationOrder/step03.vue
+++ b/src/modules/05_placement/components/RepatriationOrder/step03.vue
@@ -1,3 +1,109 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, computed } from "vue";
+import { VuePDF, usePDF } from "@tato30/vue-pdf";
+import type { PDFDocumentLoadingTask } from "pdfjs-dist/types/src/display/api";
+import type { QForm } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+
+const mixin = useCounterMixin();
+const { date2Thai } = mixin;
+
+const dialog = ref<boolean>(false);
+
+// onUnmounted(() => {
+//   window.removeEventListener("resize", (e: any) => {
+//     myEventHandler(e);
+//   });
+// });
+
+onMounted(async () => {
+  //   window.addEventListener("resize", (e: any) => {
+  //     myEventHandler(e);
+  //   });
+
+  const pdfData = usePDF("/src/assets/05_modules.pdf");
+
+  setTimeout(() => {
+    pdfSrc.value = pdfData.pdf.value;
+    numOfPages.value = pdfData.pages.value;
+  }, 1000);
+});
+
+// const myEventHandler = (e: any) => {
+//   console.log("e", e.target.innerWidth);
+//   if (vuePDFRef !== null) {
+//     vuePDFRef.value.reload();
+//   }
+// };
+
+const pdfSrc = ref<PDFDocumentLoadingTask | undefined>();
+const numOfPages = ref<number>(0);
+const page = ref<number>(1);
+const vuePDFRef = ref<any>(null);
+
+const myForm = ref<QForm | null>(null);
+
+const props = defineProps({
+  next: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  previous: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+
+const next = () => props.next();
+const previous = () => props.previous();
+
+const splitterModel = ref<number>(70);
+const tab = ref<string>("main");
+const fileOrder = ref<any>(null);
+const fileTailer = ref<any>(null);
+
+const order = ref<string>("");
+const years = ref<number>(new Date().getFullYear());
+const date = ref<Date>(new Date());
+
+const onchangePage = (val: any) => {
+  //   console.log(val);
+  if (vuePDFRef !== null) {
+    vuePDFRef.value.reload();
+  }
+};
+
+const save = () => {
+  if (myForm.value !== null) {
+    myForm.value!.validate().then((success: Boolean) => {
+      if (success) {
+        // yay, models are correct
+      }
+    });
+  }
+};
+
+const validateForm = () => {
+  return (
+    fileOrder.value !== null &&
+    fileOrder.value !== null &&
+    order.value.trim() !== ""
+  );
+};
+
+const getClass = (val: boolean) => {
+  return {
+    "card-header-active q-px-lg q-py-md cursor-pointer": val,
+    "card-header q-px-lg q-py-md cursor-pointer": !val,
+  };
+};
+
+const setTab = (val: string) => {
+  tab.value = val;
+  page.value = 1;
+};
+</script>
+
 <template>
   <div>
     <div style="min-height: 70vh">
@@ -416,111 +522,7 @@
     </q-dialog>
   </div>
 </template>
-<script setup lang="ts">
-import { ref, onMounted, onUnmounted, computed } from "vue";
-import { VuePDF, usePDF } from "@tato30/vue-pdf";
-import type { PDFDocumentLoadingTask } from "pdfjs-dist/types/src/display/api";
-import type { QForm } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
 
-const mixin = useCounterMixin();
-const { date2Thai } = mixin;
-
-const dialog = ref<boolean>(false);
-
-// onUnmounted(() => {
-//   window.removeEventListener("resize", (e: any) => {
-//     myEventHandler(e);
-//   });
-// });
-
-onMounted(async () => {
-  //   window.addEventListener("resize", (e: any) => {
-  //     myEventHandler(e);
-  //   });
-
-  const pdfData = usePDF("/src/assets/05_modules.pdf");
-
-  setTimeout(() => {
-    pdfSrc.value = pdfData.pdf.value;
-    numOfPages.value = pdfData.pages.value;
-  }, 1000);
-});
-
-// const myEventHandler = (e: any) => {
-//   console.log("e", e.target.innerWidth);
-//   if (vuePDFRef !== null) {
-//     vuePDFRef.value.reload();
-//   }
-// };
-
-const pdfSrc = ref<PDFDocumentLoadingTask | undefined>();
-const numOfPages = ref<number>(0);
-const page = ref<number>(1);
-const vuePDFRef = ref<any>(null);
-
-const myForm = ref<QForm | null>(null);
-
-const props = defineProps({
-  next: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-  previous: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-});
-
-const next = () => props.next();
-const previous = () => props.previous();
-
-const splitterModel = ref<number>(70);
-const tab = ref<string>("main");
-const fileOrder = ref<any>(null);
-const fileTailer = ref<any>(null);
-
-const order = ref<string>("");
-const years = ref<number>(new Date().getFullYear());
-const date = ref<Date>(new Date());
-
-const onchangePage = (val: any) => {
-  //   console.log(val);
-  if (vuePDFRef !== null) {
-    vuePDFRef.value.reload();
-  }
-};
-
-const save = () => {
-  if (myForm.value !== null) {
-    myForm.value!.validate().then((success: Boolean) => {
-      if (success) {
-        // yay, models are correct
-      }
-    });
-  }
-};
-
-const validateForm = () => {
-  return (
-    fileOrder.value !== null &&
-    fileOrder.value !== null &&
-    order.value.trim() !== ""
-  );
-};
-
-const getClass = (val: boolean) => {
-  return {
-    "card-header-active q-px-lg q-py-md cursor-pointer": val,
-    "card-header q-px-lg q-py-md cursor-pointer": !val,
-  };
-};
-
-const setTab = (val: string) => {
-  tab.value = val;
-  page.value = 1;
-};
-</script>
 <style lang="scss" scoped>
 .border {
   border-radius: 10px;
diff --git a/src/modules/05_placement/components/helpgovernment/governmentDetail.vue b/src/modules/05_placement/components/helpgovernment/governmentDetail.vue
index fdd705a18..d41cf98f4 100644
--- a/src/modules/05_placement/components/helpgovernment/governmentDetail.vue
+++ b/src/modules/05_placement/components/helpgovernment/governmentDetail.vue
@@ -1,3 +1,157 @@
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { useQuasar } from "quasar";
+import { useRoute, useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import keycloak from "@/plugins/keycloak";
+
+import type { QTableProps, QForm } from "quasar";
+// import type {
+//   TypeFile,
+//   ResponseDataDetail,
+// } from "@/modules/05_placement/interface/response/Transfer";
+
+const $q = useQuasar();
+const route = useRoute();
+const router = useRouter();
+const mixin = useCounterMixin();
+const edit = ref<boolean>(false);
+const dataId = route.params.id as string;
+const {
+  date2Thai,
+  dialogConfirm,
+  messageError,
+  showLoader,
+  hideLoader,
+  success,
+} = mixin;
+
+const roleAdmin = ref<boolean>(false);
+const myForm = ref<QForm | null>(null);
+const name = ref<string>("นายสมคิด ยอดใจ");
+const level = ref<string>("ชำนาญการพิเศษ");
+const institution = ref<string>("ฝ่ายบริหารงานทั่วไป");
+const fullname = ref<string>("");
+const id = ref<string>("");
+const profileId = ref<string>("");
+const prefix = ref<string>("");
+const firstName = ref<string>("");
+const lastName = ref<string>("");
+const position = ref<string>("");
+const posNo = ref<string>("");
+const positionLevel = ref<string>("");
+const createdAt = ref<string>("");
+const organization = ref<string>("");
+const reason = ref<string>("");
+const status = ref<string>("");
+const dateStart = ref<Date | null>(null);
+const dateEnd = ref<Date | null>(null);
+const salary = ref<string>("");
+const positionTypeOld = ref<string>("");
+const positionLevelOld = ref<string>("");
+const positionNumberOld = ref<string>("");
+const organizationPositionOld = ref<string>("");
+const isActive = ref<string>("");
+
+const getData = async () => {
+  showLoader();
+  await http
+    .get(config.API.officerDetail(dataId))
+    .then((res: any) => {
+      const data = res.data.result;
+
+      (fullname.value = `${data.prefix}${data.firstName} ${data.lastName}`),
+        (id.value = data.id);
+      profileId.value = data.profileId;
+      prefix.value = data.prefix;
+      firstName.value = data.firstName;
+      lastName.value = data.lastName;
+      position.value = data.position;
+      posNo.value = data.posNo;
+      positionLevel.value = data.positionLevel;
+      createdAt.value = data.createdAt;
+      organization.value = data.organization;
+      reason.value = data.reason;
+      status.value = data.status;
+      dateStart.value = data.dateStart;
+      dateEnd.value = data.dateEnd;
+      salary.value = data.salary;
+      positionTypeOld.value = data.positionTypeOld;
+      positionLevelOld.value = data.positionLevelOld;
+      positionNumberOld.value = data.positionNumberOld;
+      organizationPositionOld.value = data.organizationPositionOld;
+      isActive.value = data.isActive;
+    })
+    .catch((e) => {
+      //   messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+//
+const conditionSave = async () => {
+  // if (myForm.value !== null) {
+  //   myForm.value.validate().then((success: any) => {
+  //     if (success) {
+  dialogConfirm(
+    $q,
+    async () => await saveData(),
+    "ต้องการแก้ไขข้อมูลหรือไม่?",
+    "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย"
+  );
+};
+//     });
+//   }
+// };
+const cancelBtn = () => {
+  edit.value = !edit;
+  getData();
+};
+const saveData = async () => {
+  const body = {
+    organization: organization.value,
+    reason: reason.value,
+    organizationPositionOld: organizationPositionOld.value,
+    dateStart: dateStart.value,
+    dateEnd: dateEnd.value,
+    positionTypeOld: positionTypeOld.value,
+    positionLevelOld: positionLevelOld.value,
+    positionNumberOld: posNo.value,
+    amountOld: salary.value,
+  };
+  showLoader();
+  await http
+    .put(config.API.officerMainEdit(dataId), body)
+    .then((res: any) => {
+      //   const data = res.data.result;
+      //   console.log(data);
+      success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
+      edit.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await getData();
+      hideLoader();
+    });
+};
+
+onMounted(async () => {
+  await getData();
+});
+</script>
+
 <template>
   <div class="toptitle text-dark col-12 row items-center">
     <q-btn
@@ -320,159 +474,7 @@
     </q-form>
   </q-card>
 </template>
-<script setup lang="ts">
-import { onMounted, ref } from "vue";
-import { useQuasar } from "quasar";
-import { useRoute, useRouter } from "vue-router";
-import { useCounterMixin } from "@/stores/mixin";
 
-import http from "@/plugins/http";
-import config from "@/app.config";
-import keycloak from "@/plugins/keycloak";
-
-import type { QTableProps, QForm } from "quasar";
-// import type {
-//   TypeFile,
-//   ResponseDataDetail,
-// } from "@/modules/05_placement/interface/response/Transfer";
-
-const $q = useQuasar();
-const route = useRoute();
-const router = useRouter();
-const mixin = useCounterMixin();
-const edit = ref<boolean>(false);
-const dataId = route.params.id as string;
-const {
-  date2Thai,
-  dialogConfirm,
-  messageError,
-  showLoader,
-  hideLoader,
-  success,
-} = mixin;
-
-const roleAdmin = ref<boolean>(false);
-const myForm = ref<QForm | null>(null);
-const name = ref<string>("นายสมคิด ยอดใจ");
-const level = ref<string>("ชำนาญการพิเศษ");
-const institution = ref<string>("ฝ่ายบริหารงานทั่วไป");
-const fullname = ref<string>("");
-const id = ref<string>("");
-const profileId = ref<string>("");
-const prefix = ref<string>("");
-const firstName = ref<string>("");
-const lastName = ref<string>("");
-const position = ref<string>("");
-const posNo = ref<string>("");
-const positionLevel = ref<string>("");
-const createdAt = ref<string>("");
-const organization = ref<string>("");
-const reason = ref<string>("");
-const status = ref<string>("");
-const dateStart = ref<Date | null>(null);
-const dateEnd = ref<Date | null>(null);
-const salary = ref<string>("");
-const positionTypeOld = ref<string>("");
-const positionLevelOld = ref<string>("");
-const positionNumberOld = ref<string>("");
-const organizationPositionOld = ref<string>("");
-const isActive = ref<string>("");
-
-const getData = async () => {
-  showLoader();
-  await http
-    .get(config.API.officerDetail(dataId))
-    .then((res: any) => {
-      const data = res.data.result;
-
-      (fullname.value = `${data.prefix}${data.firstName} ${data.lastName}`),
-        (id.value = data.id);
-      profileId.value = data.profileId;
-      prefix.value = data.prefix;
-      firstName.value = data.firstName;
-      lastName.value = data.lastName;
-      position.value = data.position;
-      posNo.value = data.posNo;
-      positionLevel.value = data.positionLevel;
-      createdAt.value = data.createdAt;
-      organization.value = data.organization;
-      reason.value = data.reason;
-      status.value = data.status;
-      dateStart.value = data.dateStart;
-      dateEnd.value = data.dateEnd;
-      salary.value = data.salary;
-      positionTypeOld.value = data.positionTypeOld;
-      positionLevelOld.value = data.positionLevelOld;
-      positionNumberOld.value = data.positionNumberOld;
-      organizationPositionOld.value = data.organizationPositionOld;
-      isActive.value = data.isActive;
-    })
-    .catch((e) => {
-      //   messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-const getClass = (val: boolean) => {
-  return {
-    "full-width inputgreen cursor-pointer": val,
-    "full-width cursor-pointer": !val,
-  };
-};
-//
-const conditionSave = async () => {
-  // if (myForm.value !== null) {
-  //   myForm.value.validate().then((success: any) => {
-  //     if (success) {
-  dialogConfirm(
-    $q,
-    async () => await saveData(),
-    "ต้องการแก้ไขข้อมูลหรือไม่?",
-    "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย"
-  );
-};
-//     });
-//   }
-// };
-const cancelBtn = () => {
-  edit.value = !edit;
-  getData();
-};
-const saveData = async () => {
-  const body = {
-    organization: organization.value,
-    reason: reason.value,
-    organizationPositionOld: organizationPositionOld.value,
-    dateStart: dateStart.value,
-    dateEnd: dateEnd.value,
-    positionTypeOld: positionTypeOld.value,
-    positionLevelOld: positionLevelOld.value,
-    positionNumberOld: posNo.value,
-    amountOld: salary.value,
-  };
-  showLoader();
-  await http
-    .put(config.API.officerMainEdit(dataId), body)
-    .then((res: any) => {
-      //   const data = res.data.result;
-      //   console.log(data);
-      success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
-      edit.value = false;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await getData();
-      hideLoader();
-    });
-};
-
-onMounted(async () => {
-  await getData();
-});
-</script>
 <style lang="scss" scope>
 .q-img {
   border-radius: 5px;
diff --git a/src/modules/05_placement/components/probation/MainProbation.vue b/src/modules/05_placement/components/probation/MainProbation.vue
index cd2e573ef..1bfaca722 100644
--- a/src/modules/05_placement/components/probation/MainProbation.vue
+++ b/src/modules/05_placement/components/probation/MainProbation.vue
@@ -1,259 +1,3 @@
-<template>
-  <div class="toptitle text-dark col-12 row items-center">
-    รายการผู้ทดลองปฏิบัติหน้าที่ราชการ
-  </div>
-  <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
-    <div class="row q-col-gutter-sm">
-      <div class="row col-12 q-col-gutter-sm">
-        <div>
-          <q-btn
-            @click="modal = true"
-            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="ค้นหา"
-        >
-          <template v-slot:append>
-            <q-icon v-if="filterKeyword == ''" name="search" />
-            <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"
-        />
-      </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"
-        >
-          <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-tr>
-          </template>
-          <template v-slot:body="props">
-            <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 }}
-                </div>
-                <div v-else-if="col.name === 'probation_status'">
-                  <q-icon
-                    size="20px"
-                    v-if="props.row.probation_status === 'PENDING'"
-                    name="mdi-timer-sand"
-                    color="deep-orange"
-                  />
-                  <q-icon
-                    size="20px"
-                    v-else-if="props.row.probation_status === 'PROCESS'"
-                    name="mdi-timer-sand"
-                    color="deep-orange"
-                  />
-                  <q-icon
-                    size="20px"
-                    v-else-if="props.row.probation_status === 'PASS'"
-                    name="mdi-check"
-                    color="teal"
-                  />
-                  <q-icon
-                    size="20px"
-                    v-else-if="props.row.probation_status === 'NO-PASS'"
-                    name="mdi-close"
-                    color="red"
-                  />
-                  {{
-                    props.row.probation_status === "PENDING"
-                      ? "รอมอบหมายงาน"
-                      : props.row.probation_status === "PROCESS"
-                      ? "อยู่ระหว่างทดลองงาน"
-                      : props.row.probation_status === "PASS"
-                      ? "ผ่านการทดลองงาน"
-                      : props.row.probation_status === "NO-PASS"
-                      ? "ไม่ผ่านการทดลองงาน"
-                      : ""
-                  }}
-                </div>
-                <div v-else>
-                  {{ col.value }}
-                </div>
-              </q-td>
-            </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>
-          </template>
-        </q-table>
-      </div>
-    </div>
-  </q-card>
-
-  <q-dialog v-model="modal" persistent>
-    <q-card style="width: 900px; max-width: 80vw">
-      <q-form ref="myForm">
-        <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="ค้นหา"
-          >
-            <template v-slot:append>
-              <q-icon v-if="filterKeyword2 == ''" name="search" />
-              <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="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"
-                  >
-                    <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">
-                  <q-td
-                    v-for="col in props.cols"
-                    :key="col.name"
-                    :props="props"
-                  >
-                    <div v-if="col.name == 'no'">
-                      {{ props.rowIndex + 1 }}
-                    </div>
-                    <div v-else>
-                      {{ col.value }}
-                    </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>
-                  </q-td>
-                </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>
-              </template>
-            </q-table>
-          </div>
-        </q-card-section>
-      </q-form>
-    </q-card>
-  </q-dialog>
-</template>
-
 <script setup lang="ts">
 import { ref, useAttrs, onMounted, watch } from "vue";
 import type { QTableProps } from "quasar";
@@ -610,6 +354,262 @@ const paginationLabel = (start: string, end: string, total: string) => {
 };
 </script>
 
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    รายการผู้ทดลองปฏิบัติหน้าที่ราชการ
+  </div>
+  <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
+    <div class="row q-col-gutter-sm">
+      <div class="row col-12 q-col-gutter-sm">
+        <div>
+          <q-btn
+            @click="modal = true"
+            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="ค้นหา"
+        >
+          <template v-slot:append>
+            <q-icon v-if="filterKeyword == ''" name="search" />
+            <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"
+        />
+      </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"
+        >
+          <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-tr>
+          </template>
+          <template v-slot:body="props">
+            <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 }}
+                </div>
+                <div v-else-if="col.name === 'probation_status'">
+                  <q-icon
+                    size="20px"
+                    v-if="props.row.probation_status === 'PENDING'"
+                    name="mdi-timer-sand"
+                    color="deep-orange"
+                  />
+                  <q-icon
+                    size="20px"
+                    v-else-if="props.row.probation_status === 'PROCESS'"
+                    name="mdi-timer-sand"
+                    color="deep-orange"
+                  />
+                  <q-icon
+                    size="20px"
+                    v-else-if="props.row.probation_status === 'PASS'"
+                    name="mdi-check"
+                    color="teal"
+                  />
+                  <q-icon
+                    size="20px"
+                    v-else-if="props.row.probation_status === 'NO-PASS'"
+                    name="mdi-close"
+                    color="red"
+                  />
+                  {{
+                    props.row.probation_status === "PENDING"
+                      ? "รอมอบหมายงาน"
+                      : props.row.probation_status === "PROCESS"
+                      ? "อยู่ระหว่างทดลองงาน"
+                      : props.row.probation_status === "PASS"
+                      ? "ผ่านการทดลองงาน"
+                      : props.row.probation_status === "NO-PASS"
+                      ? "ไม่ผ่านการทดลองงาน"
+                      : ""
+                  }}
+                </div>
+                <div v-else>
+                  {{ col.value }}
+                </div>
+              </q-td>
+            </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>
+          </template>
+        </q-table>
+      </div>
+    </div>
+  </q-card>
+
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 900px; max-width: 80vw">
+      <q-form ref="myForm">
+        <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="ค้นหา"
+          >
+            <template v-slot:append>
+              <q-icon v-if="filterKeyword2 == ''" name="search" />
+              <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="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"
+                  >
+                    <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">
+                  <q-td
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                  >
+                    <div v-if="col.name == 'no'">
+                      {{ props.rowIndex + 1 }}
+                    </div>
+                    <div v-else>
+                      {{ col.value }}
+                    </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>
+                  </q-td>
+                </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>
+              </template>
+            </q-table>
+          </div>
+        </q-card-section>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
 <style lang="scss" scope>
 .filter-card {
   background-color: #f1f1f1b0;
diff --git a/src/modules/05_placement/components/probation/ProbationDetail.vue b/src/modules/05_placement/components/probation/ProbationDetail.vue
index d41a9bf6e..be02db5f5 100644
--- a/src/modules/05_placement/components/probation/ProbationDetail.vue
+++ b/src/modules/05_placement/components/probation/ProbationDetail.vue
@@ -1,3 +1,163 @@
+<script setup lang="ts">
+import { useRouter, useRoute } from "vue-router";
+import { ref, useAttrs, onMounted } from "vue";
+import type { QTableProps } from "quasar";
+import type { FormProbationDetail } from "@/modules/05_placement/interface/request/Main";
+import type { FormProbationPersonal } from "@/modules/05_placement/interface/request/Main";
+import { useCounterMixin } from "@/stores/mixin";
+import { date, useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const $q = useQuasar(); //ใช้ noti quasar
+const mixin = useCounterMixin();
+const { messageError, success, showLoader, hideLoader, date2Thai } = mixin;
+const router = useRouter();
+const route = useRoute();
+const personalId = ref<string>(route.params.id as string);
+const name = ref<string>("");
+const position_line = ref<string>("");
+const position_level = ref<string>("");
+const organization = ref<string>("");
+const probation_status = ref<string>("");
+
+const pagination = ref({
+  sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+
+const visibleColumns = ref<string[]>([
+  "no",
+  "date_start",
+  "date_finish",
+  "mentors",
+  "commander",
+]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+
+// หัวตาราง
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "date_start",
+    align: "left",
+    label: "ตั้งแต่วันที่",
+    sortable: true,
+    field: "date_start",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "date_finish",
+    align: "left",
+    label: "ถึงวันที่",
+    sortable: true,
+    field: "date_finish",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "mentors",
+    align: "left",
+    label: "ผู้ดูแล",
+    sortable: true,
+    field: "mentors",
+    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[]>([]);
+
+const clickAdd = () => {};
+
+const clickSelect = (id: string) => {
+  //   console.log(route.fullPath);
+  router.push(`${route.fullPath}/${id}`);
+};
+
+// ค้นหาในตาราง
+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 getAssignList = async () => {
+  showLoader();
+  await http
+    .get(config.API.probationGetAssignList(personalId.value))
+    .then((res) => {
+      console.log("LIST ===>", res.data.data);
+      const data = res.data.data;
+      rows.value = data.map((item: FormProbationDetail) => ({
+        id: item.id,
+        round_no: item.round_no,
+        date_start: date2Thai(new Date(item.date_start)),
+        date_finish: date2Thai(new Date(item.date_finish)),
+        mentors: item.mentors,
+        commander: item.commander,
+        chairman: item.chairman,
+      }));
+    })
+    .catch(() => {})
+    .finally(() => {
+      hideLoader();
+    });
+};
+const getpersonalList = async () => {
+  showLoader();
+  await http
+    .get(config.API.personal(personalId.value))
+    .then((res) => {
+      const data = res.data.data;
+      name.value = data.name;
+      position_line.value = data.position_line;
+      position_level.value = data.position_level;
+      organization.value = data.organization;
+      probation_status.value = data.probation_status;
+
+      console.log("(data)", data);
+    })
+    .catch(() => {})
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+onMounted(async () => {
+  await getpersonalList();
+  await getAssignList();
+});
+</script>
+
 <template>
   <div class="toptitle text-dark col-12 row items-center">
     <q-btn
@@ -212,165 +372,7 @@
     </div>
   </q-card>
 </template>
-<script setup lang="ts">
-import { useRouter, useRoute } from "vue-router";
-import { ref, useAttrs, onMounted } from "vue";
-import type { QTableProps } from "quasar";
-import type { FormProbationDetail } from "@/modules/05_placement/interface/request/Main";
-import type { FormProbationPersonal } from "@/modules/05_placement/interface/request/Main";
-import { useCounterMixin } from "@/stores/mixin";
-import { date, useQuasar } from "quasar";
-import http from "@/plugins/http";
-import config from "@/app.config";
 
-const $q = useQuasar(); //ใช้ noti quasar
-const mixin = useCounterMixin();
-const { messageError, success, showLoader, hideLoader, date2Thai } = mixin;
-const router = useRouter();
-const route = useRoute();
-const personalId = ref<string>(route.params.id as string);
-const name = ref<string>("");
-const position_line = ref<string>("");
-const position_level = ref<string>("");
-const organization = ref<string>("");
-const probation_status = ref<string>("");
-
-const pagination = ref({
-  sortBy: "desc",
-  descending: false,
-  page: 1,
-  rowsPerPage: 10,
-});
-
-const visibleColumns = ref<string[]>([
-  "no",
-  "date_start",
-  "date_finish",
-  "mentors",
-  "commander",
-]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
-
-// หัวตาราง
-const columns = ref<QTableProps["columns"]>([
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับ",
-    sortable: true,
-    field: "no",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "date_start",
-    align: "left",
-    label: "ตั้งแต่วันที่",
-    sortable: true,
-    field: "date_start",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "date_finish",
-    align: "left",
-    label: "ถึงวันที่",
-    sortable: true,
-    field: "date_finish",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "mentors",
-    align: "left",
-    label: "ผู้ดูแล",
-    sortable: true,
-    field: "mentors",
-    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[]>([]);
-
-const clickAdd = () => {};
-
-const clickSelect = (id: string) => {
-  //   console.log(route.fullPath);
-  router.push(`${route.fullPath}/${id}`);
-};
-
-// ค้นหาในตาราง
-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 getAssignList = async () => {
-  showLoader();
-  await http
-    .get(config.API.probationGetAssignList(personalId.value))
-    .then((res) => {
-      console.log("LIST ===>", res.data.data);
-      const data = res.data.data;
-      rows.value = data.map((item: FormProbationDetail) => ({
-        id: item.id,
-        round_no: item.round_no,
-        date_start: date2Thai(new Date(item.date_start)),
-        date_finish: date2Thai(new Date(item.date_finish)),
-        mentors: item.mentors,
-        commander: item.commander,
-        chairman: item.chairman,
-      }));
-    })
-    .catch(() => {})
-    .finally(() => {
-      hideLoader();
-    });
-};
-const getpersonalList = async () => {
-  showLoader();
-  await http
-    .get(config.API.personal(personalId.value))
-    .then((res) => {
-      const data = res.data.data;
-      name.value = data.name;
-      position_line.value = data.position_line;
-      position_level.value = data.position_level;
-      organization.value = data.organization;
-      probation_status.value = data.probation_status;
-
-      console.log("(data)", data);
-    })
-    .catch(() => {})
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-onMounted(async () => {
-  await getpersonalList();
-  await getAssignList();
-});
-</script>
 <style lang="scss" scope>
 .q-img {
   border-radius: 5px;