diff --git a/src/api/06_retirement/api.retirement.ts b/src/api/06_retirement/api.retirement.ts
index 1a4623078..bca70474b 100644
--- a/src/api/06_retirement/api.retirement.ts
+++ b/src/api/06_retirement/api.retirement.ts
@@ -3,12 +3,12 @@ const retirement = `${env.API_URI}/retirement`
 
 
 export default {
-    profile: (type: string, year: number) => `${retirement}/profile/${type}/${year}`,
+    profile: (type: string, year: string) => `${retirement}/profile/${type}/${year}`,
     profileRetire: (retireId: string) => `${retirement}/profile/${retireId}`,
-    getprofileRetire: (retireId: string) => `${retirement}/${retireId}`,
-    createnote: () => `${retirement}/reason/`,
+    listRetire: (retireId: string) => `${retirement}/${retireId}`,
+    createnote: () => `${retirement}/reason`,
     reasonId: (retireId:string) => `${retirement}/reason/${retireId}`,
-    retirement:(type:string,year:number) => `${retirement}/${type}/${year}`
+    retirement:(type:string,year:string) => `${retirement}/${type}/${year}`
     
 
 
diff --git a/src/interface/request/main/main.ts b/src/interface/request/main/main.ts
index 45e14fa33..7b618f006 100644
--- a/src/interface/request/main/main.ts
+++ b/src/interface/request/main/main.ts
@@ -216,6 +216,12 @@ const menuList = readonly<any[]>([
         path: "receive",
         role: "placement",
       },
+      {
+        key: 6.6,
+        label: "คำสั่งช่วยราชการ/ส่งตัวกลับ" /* */,
+        path: "repatriation-order",
+        role: "placement",
+      },
     ],
   },
 
diff --git a/src/modules/04_registry/components/Profile.vue b/src/modules/04_registry/components/Profile.vue
index 5fa28e74f..c56a812f0 100644
--- a/src/modules/04_registry/components/Profile.vue
+++ b/src/modules/04_registry/components/Profile.vue
@@ -154,10 +154,10 @@
         </div>
         <q-space />
 
-        <q-btn round flat color="pink-5" icon="mdi-file-eye-outline">
-          <q-tooltip>{{
+        <q-btn round flat color="pink-5" icon="mdi-file-document">
+          <!-- <q-tooltip>{{
             reasonStatus ? "การกลับเข้ารับราชการ" : "การออกจากราชการ"
-          }}</q-tooltip>
+          }}</q-tooltip> -->
 
           <q-menu transition-show="jump-down" transition-hide="jump-up">
             <q-list dense style="min-width: 160px">
@@ -896,7 +896,7 @@ const closeKp7Short = () => {
 };
 
 const clickaddOrder = () => {
-  router.push({ name: "addOrder" });
+  router.push("/dismiss-order/add");
 };
 
 const downloadKP7 = () => {};
diff --git a/src/modules/04_registry/components/TableProfile.vue b/src/modules/04_registry/components/TableProfile.vue
index 0b7cb8a80..0e722ed28 100644
--- a/src/modules/04_registry/components/TableProfile.vue
+++ b/src/modules/04_registry/components/TableProfile.vue
@@ -304,6 +304,77 @@
                       class="col-3"
                     />
                   </div>
+                  <div
+                    :class="
+                      $q.screen.lt.md
+                        ? ' row col-12 q-col-gutter-xs'
+                        : 'no-wrap row col-12 q-col-gutter-xs'
+                    "
+                  >
+                    <datepicker
+                      class="col-2"
+                      menu-class-name="modalfix"
+                      :model-value="reportYear"
+                      :locale="'th'"
+                      autoApply
+                      year-picker
+                      :enableTimePicker="false"
+                      @update:model-value="updateReportYear"
+                      clearable
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          class="inputgreen cursor-pointer q-mb-sm"
+                          hide-bottom-space
+                          outlined
+                          dense
+                          lazy-rules
+                          borderless
+                          :model-value="
+                            reportYear == null ? null : reportYear + 543
+                          "
+                          :label="`${'ปีงบประมาณ'}`"
+                          clearable
+                          @clear="clearReportDate"
+                        >
+                          <!-- <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              style="color: var(--q-primary)"
+                            >
+                            </q-icon>
+                          </template> -->
+                        </q-input>
+                      </template>
+                    </datepicker>
+                    <q-input
+                      clearable
+                      dense
+                      outlined
+                      lazy-rules
+                      :model-value="reportNo"
+                      hide-bottom-space
+                      label="เลขที่คำสั่ง"
+                      @update:model-value="updateReportNo"
+                      class="col-3"
+                    />
+                    <q-input
+                      clearable
+                      dense
+                      outlined
+                      lazy-rules
+                      :model-value="reportType"
+                      hide-bottom-space
+                      label="ประเภทคำสั่ง"
+                      @update:model-value="updateReportType"
+                      class="col-3"
+                    />
+                  </div>
                   <div class="col-12 row items-center">
                     <q-toggle
                       dense
@@ -423,6 +494,9 @@ const props = defineProps({
   employeePosition: String,
   employeeLevel: String,
   posNo: String,
+  reportYear: Number || null,
+  reportNo: String,
+  reportType: String,
   isTab: {
     type: Boolean,
     default: true,
@@ -460,6 +534,9 @@ const emit = defineEmits([
   "update:employeePosition",
   "update:employeeLevel",
   "update:posNo",
+  "update:reportYear",
+  "update:reportNo",
+  "update:reportType",
 ]);
 
 const updateInput = (value: string | number | null) => {
@@ -508,6 +585,15 @@ const updateEmployeeLevel = (value: string | number | null) => {
 const updatePosNo = (value: string | number | null) => {
   emit("update:posNo", value);
 };
+const updateReportYear = (value: string | number | null) => {
+  emit("update:reportYear", value);
+};
+const updateReportNo = (value: string | number | null) => {
+  emit("update:reportNo", value);
+};
+const updateReportType = (value: string | number | null) => {
+  emit("update:reportType", value);
+};
 // const updateProfileType = (value: string | number | null) => {
 //   emit("update:profileType", value);
 // };
@@ -515,6 +601,9 @@ const updatePosNo = (value: string | number | null) => {
 const clearDate = () => {
   emit("update:retireYear", null);
 };
+const clearReportDate = () => {
+  emit("update:reportYear", null);
+};
 
 const clickSearchPanel = () => {
   emit("update:retireYear", null);
diff --git a/src/modules/04_registry/router.ts b/src/modules/04_registry/router.ts
index 18571351a..51f652691 100644
--- a/src/modules/04_registry/router.ts
+++ b/src/modules/04_registry/router.ts
@@ -4,10 +4,10 @@
 
 const Main = () => import("@/modules/04_registry/views/Main.vue");
 const Detail = () => import("@/modules/04_registry/components/Profile.vue");
-const addOrder = () =>
-  import(
-    "@/modules/05_placement/components/OrderPlacement/addOrderPlacement.vue"
-  );
+// const addOrder = () =>
+//   import(
+//     "@/modules/05_placement/components/OrderPlacement/addOrderPlacement.vue"
+//   );
 
 export default [
   {
@@ -30,14 +30,14 @@ export default [
       Role: "registry",
     },
   },
-  {
-    path: "/dismiss-order/add",
-    name: "addOrder",
-    component: addOrder,
-    meta: {
-      Auth: true,
-      Key: [7],
-      Role: "registry",
-    },
-  },
+  // {
+  //   path: "/dismiss-order/add",
+  //   name: "addOrder",
+  //   component: addOrder,
+  //   meta: {
+  //     Auth: true,
+  //     Key: [7],
+  //     Role: "registry",
+  //   },
+  // },
 ];
diff --git a/src/modules/05_placement/components/RepatriationOrder/AddOrder.vue b/src/modules/05_placement/components/RepatriationOrder/AddOrder.vue
new file mode 100644
index 000000000..f537b6227
--- /dev/null
+++ b/src/modules/05_placement/components/RepatriationOrder/AddOrder.vue
@@ -0,0 +1,91 @@
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    <q-btn
+      icon="mdi-arrow-left"
+      unelevated
+      round
+      dense
+      flat
+      color="primary"
+      class="q-mr-sm"
+      @click="router.go(-1)"
+    />
+    เพิ่มคำสั่งช่วยราชการ/ส่งตัวกลับ
+  </div>
+  <q-card flat bordered class="col-12 q-my-sm q-mt-sm">
+    <q-stepper
+      v-model="step"
+      ref="stepper"
+      color="primary"
+      animated
+      class="step"
+      header-class="bg-grey-1"
+    >
+      <q-step
+        :name="1"
+        title="รายละเอียดการออกคำสั่ง"
+        prefix="1"
+        :done="step > 1"
+        :header-nav="step > 1"
+      />
+      <q-step
+        :name="2"
+        title="เลือกรายชื่อส่งสำเนาคำสั่ง"
+        prefix="2"
+        :done="step > 2"
+        :header-nav="step > 2"
+      />
+      <q-step
+        :name="3"
+        title="รายละเอียดคำสั่งและแนบท้าย"
+        prefix="3"
+        :header-nav="step > 3"
+      />
+      <template v-slot:message>
+        <step01 v-if="step === 1" :next="nextStep" :previous="previousStep" />
+        <step02 v-if="step === 2" :next="nextStep" :previous="previousStep" />
+        <step03 v-if="step === 3" :next="nextStep" :previous="previousStep" />
+      </template>
+    </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;
+}
+.step .q-stepper__tab--done .q-stepper__title,
+.step .q-stepper__tab--active .q-stepper__title {
+  color: #35473c !important;
+  font-weight: 500;
+}
+.step .q-stepper__header--standard-labels .q-stepper__tab {
+  min-height: 60px;
+}
+</style>
diff --git a/src/modules/05_placement/components/RepatriationOrder/List.vue b/src/modules/05_placement/components/RepatriationOrder/List.vue
new file mode 100644
index 000000000..6aa4fe9e8
--- /dev/null
+++ b/src/modules/05_placement/components/RepatriationOrder/List.vue
@@ -0,0 +1,740 @@
+<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";
+import type { FormOrderPlacementMainData } from "@/modules/05_placement/interface/request/Main";
+import type { DataOption } from "@/modules/05_placement/interface/index/Main";
+import { useCounterMixin } from "@/stores/mixin";
+import { useOrderPlacementDataStore } from "@/modules/05_placement/store";
+import router from "@/router";
+import { useQuasar } from "quasar";
+
+const $q = useQuasar(); //ใช้ noti quasar
+const DataStore = useOrderPlacementDataStore();
+const pagination = ref({
+  sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+
+const mixin = useCounterMixin();
+const { dateText } = mixin;
+
+// แปลงเวลา ค.ศ ให้เป็น พ.ศ
+const textDate = (value: Date) => {
+  return dateText(value);
+};
+
+const visibleColumns = ref<string[]>([
+  "Order",
+  "OrderType",
+  "OrderNum",
+  "OrderDate",
+  "OrderBy",
+  "Signer",
+  "OrderStatus",
+]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+
+// หัวตาราง
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "Order",
+    align: "left",
+    label: "คำสั่ง",
+    sortable: true,
+    field: "Order",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "OrderNum",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "OrderNum",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "OrderType",
+    align: "left",
+    label: "ประเภท",
+    sortable: false,
+    field: "OrderType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "OrderDate",
+    align: "left",
+    label: "สั่ง ณ วันที่/วันที่คำสั่งมีผล",
+    sortable: true,
+    field: "OrderDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "OrderBy",
+    align: "left",
+    label: "คำสั่งโดย",
+    sortable: true,
+    field: "OrderBy",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "Signer",
+    align: "left",
+    label: "ผู้ลงนาม",
+    sortable: false,
+    field: "Signer",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "OrderStatus",
+    align: "center",
+    label: "สถานะคำสั่ง",
+    sortable: false,
+    field: "OrderStatus",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "fiscalYear",
+    align: "left",
+    label: "ปีงบประมาณ",
+    sortable: true,
+    field: "fiscalYear",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+// ข้อมูลตาราง (จำลอง)
+const rows = ref<FormOrderPlacementMainData[]>([
+  {
+    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+    OrderNum: "1/2565",
+    fiscalYear: 2565,
+    OrderDate: "30 พ.ค. 2565",
+    OrderBy: "สำนักงาน กทม.",
+    Signer: "นาม สมคิด ยอดใจ ",
+    OrderStatus: "จัดทำร่างคำสั่ง",
+    OrderType: "คำสั่งย้าย",
+  },
+
+  {
+    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+    OrderNum: "1/2565",
+    fiscalYear: 2565,
+    OrderDate: "30 พ.ค. 2565",
+    OrderBy: "สำนักงาน กทม.",
+    Signer: "นาม สมคิด ยอดใจ ",
+    OrderStatus: "จัดทำร่างคำสั่ง",
+    OrderType: "คำสั่งบรรจุและแต่งตั้ง",
+  },
+  {
+    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+    OrderNum: "1/2564",
+    fiscalYear: 2564,
+    OrderDate: "30 พ.ค. 2564",
+    OrderBy: "สำนักงาน กทม.",
+    Signer: "นาม สมคิด ยอดใจ ",
+    OrderStatus: "บัญชีแนบท้าย",
+    OrderType: "คำสั่งบรรจุและแต่งตั้ง",
+  },
+  {
+    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+    OrderNum: "1/2564",
+    fiscalYear: 2564,
+    OrderDate: "30 พ.ค. 2564",
+    OrderBy: "สำนักงาน กทม.",
+    Signer: "นาม สมคิด ยอดใจ ",
+    OrderStatus: "บัญชีแนบท้าย",
+    OrderType: "คำสั่งย้าย",
+  },
+  {
+    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+    OrderNum: "1/2564",
+    fiscalYear: 2564,
+    OrderDate: "30 พ.ค. 2564",
+    OrderBy: "สำนักงาน กทม.",
+    Signer: "นาม สมคิด ยอดใจ ",
+    OrderStatus: "ส่งสำเนาคำสั่ง",
+    OrderType: "คำสั่งย้าย",
+  },
+  {
+    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+    OrderNum: "1/2564",
+    fiscalYear: 2564,
+    OrderDate: "30 พ.ค. 2564",
+    OrderBy: "สำนักงาน กทม.",
+    Signer: "นาม สมคิด ยอดใจ ",
+    OrderStatus: "ส่งสำเนาคำสั่ง",
+    OrderType: "คำสั่งบรรจุและแต่งตั้ง",
+  },
+  {
+    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+    OrderNum: "1/2566",
+    fiscalYear: 2566,
+    OrderDate: "30 พ.ค. 2566",
+    OrderBy: "สำนักงาน กทม.",
+    Signer: "นาม สมคิด ยอดใจ ",
+    OrderStatus: "รอลงนาม",
+    OrderType: "คำสั่งบรรจุและแต่งตั้ง",
+  },
+  {
+    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+    OrderNum: "1/2566",
+    fiscalYear: 2566,
+    OrderDate: "30 พ.ค. 2566",
+    OrderBy: "สำนักงาน กทม.",
+    Signer: "นาม สมคิด ยอดใจ ",
+    OrderStatus: "ออกคำสั่งแล้ว",
+    OrderType: "คำสั่งแต่งตั้ง",
+  },
+  {
+    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+    OrderNum: "1/2565",
+    fiscalYear: 2565,
+    OrderDate: "30 พ.ค. 2565",
+    OrderBy: "สำนักงาน กทม.",
+    Signer: "นาม สมคิด ยอดใจ ",
+    OrderStatus: "ออกคำสั่งแล้ว",
+    OrderType: "คำสั่งบรรจุและแต่งตั้ง",
+  },
+  {
+    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+    OrderNum: "1/2566",
+    fiscalYear: 2566,
+    OrderDate: "30 พ.ค. 2566",
+    OrderBy: "สำนักงาน กทม.",
+    Signer: "นาม สมคิด ยอดใจ ",
+    OrderStatus: "ออกคำสั่งแล้ว",
+    OrderType: "คำสั่งแต่งตั้ง",
+  },
+  {
+    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+    OrderNum: "1/2566",
+    fiscalYear: 2566,
+    OrderDate: "30 พ.ค. 2566",
+    OrderBy: "สำนักงาน กทม.",
+    Signer: "นาม สมคิด ยอดใจ ",
+    OrderStatus: "ออกคำสั่งแล้ว",
+    OrderType: "คำสั่งย้าย",
+  },
+
+  {
+    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+    OrderNum: "1/2564",
+    fiscalYear: 2564,
+    OrderDate: "30 พ.ค. 2564",
+    OrderBy: "สำนักงาน กทม.",
+    Signer: "นาม สมคิด ยอดใจ ",
+    OrderStatus: "ออกคำสั่งแล้ว",
+    OrderType: "คำสั่งแต่งตั้ง",
+  },
+
+  {
+    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+    OrderNum: "1/2566",
+    fiscalYear: 2566,
+    OrderDate: "30 พ.ค. 2566",
+    OrderBy: "สำนักงาน กทม.",
+    Signer: "นาม สมคิด ยอดใจ ",
+    OrderStatus: "ออกคำสั่งแล้ว",
+    OrderType: "คำสั่งแต่งตั้ง",
+  },
+]);
+// const OrderStatusOption = [
+//   "ทั้งหมด",
+//   "ยังไม่ได้บรรจุ",
+//   "บรรจุแล้ว",
+//   "ยังไม่ได้ออกคำสั่ง",
+// ];
+
+let OriginalData = ref<FormOrderPlacementMainData[]>([]);
+let UpdataData = ref<FormOrderPlacementMainData[]>([]);
+
+onMounted(async () => {
+  await OriginalDataFetch();
+  fiscalYearFilter();
+  searchFilterTable();
+  OrderStatusFilter();
+  OrderTypeFilter();
+});
+
+const OriginalDataFetch = async () => {
+  // API
+  // await http
+  //   .get(config.API.// ตัวอย่าง)
+  //   .then((res: any) => {
+  //   })
+  //   .catch((e: any) => {
+  //     messageError($q, e);
+  //   })
+  //   .finally(async () => {
+  //   });
+  await DataStore.DataMainOrder(rows.value);
+  OriginalData.value = await DataStore.DataMainOrigOrder;
+  UpdataData.value = OriginalData.value;
+};
+
+// ดูรายการหน้าต่อไป
+const redirectToPage = (id?: number) => {
+  router.push(`/repatriation-order/add`);
+};
+
+const clickDelete = (id: string) => {
+  $q.dialog({
+    title: "ยืนยันการลบข้อมูล",
+    message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
+    cancel: {
+      flat: true,
+      color: "negative",
+    },
+    persistent: true,
+  })
+    .onOk(async () => {
+      //   await deleteData(id);
+    })
+    .onCancel(() => {})
+    .onDismiss(() => {});
+};
+
+// const deleteData = async (id: string) => {
+//   loaderPage(true);
+//   await http
+//     .delete(config.API.orderReplace(id))
+//     .then((res) => {
+//       success($q, "ลบข้อมูลสำเร็จ");
+//     })
+//     .catch((e) => {
+//       messageError($q, e);
+//     })
+//     .finally(async () => {
+//       loaderPage(false);
+//       await fetchData();
+//     });
+// };
+
+const clickAdd = () => {
+  router.push({ name: "OrderplacementDetail" });
+};
+
+// const viewDetail = (id: string, status: string) => {
+//   if (status == "checkPayment") {
+//     router.push(`${route.fullPath}/payment/${id}`);
+//   } else {
+//     router.push(`${route.fullPath}/profile/${id}`);
+//   }
+// };
+
+// เลือกปีงบประมาณ
+const fiscalyear = ref<number | null>(0);
+const fiscalyearOP = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
+const addedfiscalYearValues: number[] = [];
+const fiscalYearFilter = async () => {
+  // API
+  // await http
+  //   .get(config.API.// ตัวอย่าง)
+  //   .then((res: any) => {
+  //    DataStore.DataMainYearSet(rows.value);
+  //    fiscalyearOP.value = DataStore.DataMainYearGet;
+  //   })
+  //   .catch((e: any) => {
+  //     messageError($q, e);
+  //   })
+  //   .finally(async () => {
+  //   });
+  for (let data of OriginalData.value) {
+    const year = data.fiscalYear;
+    console.log(year);
+
+    if (fiscalyear.value === null || year > fiscalyear.value) {
+      fiscalyear.value = year;
+    }
+
+    if (!addedfiscalYearValues.includes(year)) {
+      fiscalyearOP.push({ id: year, name: year.toString() });
+      addedfiscalYearValues.push(year);
+    }
+  }
+};
+
+const OrderType = ref<string>("");
+const OrderTypeOption = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
+const addedOrderTypeValues: string[] = [];
+const OrderTypeFilter = async () => {
+  // API
+  // await http
+  //   .get(config.API.// ตัวอย่าง)
+  //   .then((res: any) => {
+  //    DataStore.DataMainYearSet(rows.value);
+  //    fiscalyearOP.value = DataStore.DataMainYearGet;
+  //   })
+  //   .catch((e: any) => {
+  //     messageError($q, e);
+  //   })
+  //   .finally(async () => {
+  //   });
+  for (let data of OriginalData.value) {
+    const OrderTypeValue = data.OrderType;
+    console.log(OrderTypeValue);
+
+    // if (OrderTypeValue === null || OrderType > OrderTypeValue) {
+    //   OrderTypeValue = OrderType;
+    // }
+    if (!addedOrderTypeValues.includes(OrderTypeValue)) {
+      OrderTypeOption.push({
+        // id: OrderTypeValue ?? 0,
+        id: OrderTypeOption.length,
+        name: OrderTypeValue,
+      });
+      addedOrderTypeValues.push(OrderTypeValue);
+    }
+    // if (!addedOrderTypeValues.includes(OrderTypeValue)) {
+    //   OrderTypeOption.push({
+    //     id: OrderTypeValue,
+    //     name: OrderTypeValue.toString(),
+    //   });
+    //   addedOrderTypeValues.push(OrderTypeValue);
+    // }
+  }
+};
+const OrderStatus = ref<string>("");
+const OrderStatusText = ref<FormOrderPlacementMainData[]>(
+  DataStore.DataMainOrigOrder
+);
+const OrderStatusOption = reactive<DataOption[]>([{ id: 1, name: "ทั้งหมด" }]);
+const addedOrderStatusValues: string[] = [];
+const OrderStatusFilter = async () => {
+  // API
+  // await http
+  //   .get(config.API.// ตัวอย่าง)
+  //   .then((res: any) => {
+  //    DataStore.DataMainYearSet(rows.value);
+  //    fiscalyearOP.value = DataStore.DataMainYearGet;
+  //   })
+  //   .catch((e: any) => {
+  //     messageError($q, e);
+  //   })
+  //   .finally(async () => {
+  //   });
+  for (let data of OriginalData.value) {
+    const OrderStatusValue = data.OrderStatus;
+    console.log(OrderStatusValue);
+
+    if (
+      OrderStatusValue === null ||
+      parseInt(OrderStatusValue) > parseInt(OrderStatusValue)
+    ) {
+      OrderStatus.value = OrderStatusValue;
+    }
+
+    if (!addedOrderStatusValues.includes(OrderStatusValue)) {
+      OrderStatusOption.push({
+        // id: OrderStatusValue,
+        id: OrderStatusOption.length,
+        name: OrderStatusValue,
+      });
+      addedOrderStatusValues.push(OrderStatusValue);
+    }
+  }
+};
+
+// เลือกปีงบประมาณตาม API
+const searchfiscalyear = () => {
+  console.log("Input value changed:", fiscalyear.value);
+  // API
+  // await http
+  //   .get(config.API.// ตัวอย่าง)
+  //   .then((res: any) => {
+  //   })
+  //   .catch((e: any) => {
+  //     messageError($q, e);
+  //   })
+  //   .finally(async () => {
+  //   });
+};
+
+// ค้นหาในตาราง
+const filterKeyword = ref<string>("");
+const filterRef = ref<any>(null);
+const resetFilter = () => {
+  filterKeyword.value = "";
+  filterRef.value.focus();
+};
+
+const attrs = ref<any>(useAttrs());
+
+const searchFilterTable = async () => {
+  // console.log('Input value changed:', examTime.value, examType.value, expiredAccount.value);
+  await DataStore.DataUpdateOrder(
+    OrderType.value,
+    OrderStatus.value,
+    fiscalyear.value
+  );
+  UpdataData.value = DataStore.DataMainUpdateOrder;
+};
+//   UpdataData.value = DataStore.DataMainUpdate;
+// console.log("Input value changed:", OrderStatus.value, OrderType.value);
+
+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;
+};
+</script>
+
+<style lang="scss" scope>
+.filter-card {
+  background-color: #f1f1f1b0;
+}
+
+.toggle-expired-account {
+  font-size: 12px;
+  font-weight: 400;
+  font-size: 15px;
+  line-height: 150%;
+  color: #35373c;
+}
+
+.icon-color {
+  color: #4154b3;
+}
+
+.custom-header-table {
+  max-height: 64vh;
+
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+    z-index: 1;
+  }
+
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>
diff --git a/src/modules/05_placement/components/RepatriationOrder/step01.vue b/src/modules/05_placement/components/RepatriationOrder/step01.vue
new file mode 100644
index 000000000..da4912ce6
--- /dev/null
+++ b/src/modules/05_placement/components/RepatriationOrder/step01.vue
@@ -0,0 +1,353 @@
+<template>
+  <div style="max-height: 68vh; overflow-y: scroll">
+    <q-form ref="myForm" class="q-pa-md">
+      <div class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md">
+        <div class="col-xs-12 col-md-6">
+          <selector
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="typeOrder"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือกประเภทคำสั่ง'}`]"
+            hide-bottom-space
+            :label="`${'ประเภทคำสั่ง'}`"
+            @update:modelValue="clickEditRow"
+            emit-value
+            map-options
+            option-label="name"
+            :options="typeOrderOption"
+            option-value="id"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'typeOrderOption'
+                      ) "
+          />
+        </div>
+
+        <div class="col-xs-12 col-md-6">
+          <q-input
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="nameOrder"
+            :rules="[(val) => !!val || `${'กรุณากรอกคำสั่งเรื่อง'}`]"
+            :label="`${'คำสั่งเรื่อง'}`"
+            @update:modelValue="clickEditRow"
+            hide-bottom-space
+          />
+        </div>
+
+        <div class="row col-xs-7 col-md-3 q-col-gutter-x-xs">
+          <div class="col-6">
+            <q-input
+              :class="getClass(true)"
+              outlined
+              dense
+              lazy-rules
+              v-model="command"
+              :rules="[(val) => !!val || `${'กรุณากรอกคำสั่ง'}`]"
+              :label="`${'คำสั่ง'}`"
+              @update:modelValue="clickEditRow"
+              hide-bottom-space
+              type="number"
+            />
+          </div>
+          <label class="col-1 flex justify-center items-center text-bold"
+            >/</label
+          >
+          <div class="col-5">
+            <datepicker
+              v-model="dateYear"
+              :locale="'th'"
+              autoApply
+              year-picker
+              :enableTimePicker="false"
+              @update:modelValue="clickEditRow"
+            >
+              <template #year="{ year }">{{ year + 543 }}</template>
+              <template #year-overlay-value="{ value }">{{
+                parseInt(value + 543)
+              }}</template>
+              <template #trigger>
+                <q-input
+                  :model-value="dateYear + 543"
+                  :rules="[(val) => !!val || `${'กรุณากรอก พ.ศ.'}`]"
+                  :label="`${'พ.ศ.'}`"
+                  dense
+                  outlined
+                >
+                </q-input>
+              </template>
+            </datepicker>
+          </div>
+        </div>
+        <div class="col-xs-5 col-md-3">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="dateCommand"
+            :locale="'th'"
+            autoApply
+            borderless
+            :enableTimePicker="false"
+            week-start="0"
+          >
+            <template #year="{ year }">
+              {{ year + 543 }}
+            </template>
+            <template #year-overlay-value="{ value }">
+              {{ parseInt(value + 543) }}
+            </template>
+            <template #trigger>
+              <q-input
+                outlined
+                dense
+                class="full-width datepicker"
+                :model-value="
+                  dateCommand != null ? date2Thai(dateCommand) : null
+                "
+                :label="`${'วันที่มีผลออกคำสั่ง'}`"
+                :rules="[
+                  (val) => !!val || `${'กรุณาเลือกวันที่มีผลออกคำสั่ง'}`,
+                ]"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    style="color: var(--q-primary)"
+                  >
+                  </q-icon>
+                </template>
+              </q-input>
+            </template>
+          </datepicker>
+        </div>
+
+        <div class="col-xs-12 col-md-6">
+          <selector
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="byOrder"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือกคำสั่งโดย'}`]"
+            hide-bottom-space
+            :label="`${'คำสั่งโดย'}`"
+            @update:modelValue="clickEditRow"
+            emit-value
+            map-options
+            option-label="name"
+            :options="byOrderOption"
+            option-value="id"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'byOrderOption'
+                      ) "
+          />
+        </div>
+        <div class="col-xs-12 col-md-6">
+          <!-- :readonly="!edit"
+                :borderless="!edit" -->
+          <q-input
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="nameCommand"
+            :rules="[(val) => !!val || `${'กรุณากรอกผู้มีอำนาจลงนาม'}`]"
+            :label="`${'ผู้มีอำนาจลงนาม'}`"
+            @update:modelValue="clickEditRow"
+            hide-bottom-space
+          />
+        </div>
+        <div class="col-xs-12 col-md-6">
+          <!-- :readonly="!edit"
+                :borderless="!edit" -->
+          <q-input
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="positionCommand"
+            :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งผู้มีอำนาจลงนาม'}`]"
+            :label="`${'ตำแหน่งผู้มีอำนาจลงนาม'}`"
+            @update:modelValue="clickEditRow"
+            hide-bottom-space
+          />
+        </div>
+        <div class="col-12">
+          <q-separator />
+        </div>
+        <div class="col-xs-12 col-md-6">
+          <selector
+            :class="getClass(true)"
+            outlined
+            dense
+            lazy-rules
+            v-model="test"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือกรอบการสอบ'}`]"
+            hide-bottom-space
+            :label="`${'ชื่อ-นามสกุล'}`"
+            @update:modelValue="clickEditRow"
+            emit-value
+            map-options
+            option-label="name"
+            :options="testOption"
+            option-value="id"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'testOption'
+                      ) "
+          />
+        </div>
+      </div>
+    </q-form>
+  </div>
+  <q-separator />
+  <div class="flex justify-end q-pa-sm q-gutter-sm">
+    <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;
+}
+</style>
diff --git a/src/modules/05_placement/components/RepatriationOrder/step02.vue b/src/modules/05_placement/components/RepatriationOrder/step02.vue
new file mode 100644
index 000000000..8d58d929e
--- /dev/null
+++ b/src/modules/05_placement/components/RepatriationOrder/step02.vue
@@ -0,0 +1,684 @@
+<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";
+import { useCounterMixin } from "@/stores/mixin";
+import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
+import type { QInput, QForm } from "quasar";
+import type { treeTab } from "@/modules/05_placement/interface/index/Main";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import type { QTableProps } from "quasar";
+
+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 $q = useQuasar();
+const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+const { dialogMessage, messageError, showLoader, hideLoader } = mixin;
+
+const myForm = ref<QForm>();
+const filterRef = ref<QInput>();
+const filter = ref<string>("");
+const mutiselect = ref([]);
+const modal = ref<boolean>(false);
+const search = ref<string>("");
+const expanded = ref<string[]>([]);
+const selected = ref<string>("");
+const nodesTree = ref<treeTab[]>([]);
+const send = ref<String[]>([]);
+const selectedModal = ref([]);
+const test = ref([]);
+const filterModal = ref<string>("");
+const visibleColumnsModal = ref<String[]>(["no", "idcard", "name"]);
+const columnsModal = ref<QTableProps["columns"]>([
+  { name: "no", align: "left", label: "ลำดับ", field: "no", sortable: true },
+  {
+    name: "idcard",
+    align: "left",
+    label: "เลขประจำตัวประชาชน",
+    field: "idcard",
+    sortable: true,
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อ-สกุล",
+    field: "name",
+    sortable: true,
+  },
+]);
+
+const rowsModal = [
+  {
+    no: "0ac56905-1a74-4606-a120-233340adde95",
+    name: "นางนัทธ์ เหล่าสกุล",
+    idcard: "9158455632145",
+    educate: "",
+  },
+  {
+    no: "0de607a0-b094-4a6d-9e30-979343ab5e53",
+    name: "นางขรรค์ จันทรสมบัติ",
+    idcard: "8558455632126",
+    educate: "",
+  },
+  {
+    no: "93ca7366-2a35-4f94-a331-9c23c9ea78d3",
+    name: "นางโอภาส จรัสวงศ์",
+    idcard: "8158455635425",
+    educate: "",
+  },
+  {
+    no: "d3777c19-2bd0-42df-90ce-c3eeeee55ac6",
+    name: "นางธิญา หงษ์ทอง",
+    idcard: "4558455632145",
+    educate: "",
+  },
+  {
+    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
+    name: "นางธนวิทย์ พิกุลเทพ",
+    idcard: "5542455632145",
+    educate: "",
+  },
+  {
+    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
+    name: "นางหนึ่ง สตาภิรมย์",
+    idcard: "7448455632145",
+    educate: "",
+  },
+  {
+    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
+    name: "นางสัจพร คมคาย",
+    idcard: "1236455632145",
+    educate: "",
+  },
+  {
+    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
+    name: "นางตุลยากร ปรีดาศิริกุล",
+    idcard: "1523455632145",
+    educate: "",
+  },
+  {
+    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
+    name: "นางบัลลังค์ จิรวาณิชย์",
+    idcard: "1258455632145",
+    educate: "",
+  },
+  {
+    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
+    name: "นางคมคาย เรืองรังสรรค์",
+    idcard: "8548455632145",
+    educate: "",
+  },
+  {
+    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
+    name: "นางพรทิพา คมคาย",
+    idcard: "6598455632145",
+    educate: "",
+  },
+];
+
+const paginationModal = ref({
+  sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+const pagination = ref({
+  sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+const optionSelect = ref<any>([
+  { id: 1, name: "อีเมล" },
+  { id: 2, name: "กล่องข้อความ" },
+]);
+
+const visibleColumns = ref<String[]>([
+  "no",
+  "idcard",
+  "name",
+  "position",
+  "agency",
+  "send",
+]);
+const columns = ref<QTableProps["columns"]>([
+  { name: "no", align: "left", label: "ลำดับ", field: "no", sortable: true },
+  {
+    name: "idcard",
+    align: "left",
+    label: "เลขประจำตัวประชาชน",
+    field: "idcard",
+    sortable: true,
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อ-สกุล",
+    field: "name",
+    sortable: true,
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่ง",
+    field: "position",
+    sortable: true,
+  },
+  {
+    name: "agency",
+    align: "left",
+    label: "หน่วยงาน",
+    field: "agency",
+    sortable: true,
+  },
+  {
+    name: "send",
+    align: "left",
+    label: "ช่องทางการส่งสำเนา",
+    field: "send",
+    sortable: true,
+  },
+]);
+
+const rows = ref([
+  {
+    no: "0ac56905-1a74-4606-a120-233340adde95",
+    name: "นางนัทธ์ เหล่าสกุล",
+    idcard: "9158455632145",
+    send: "",
+    position: "ผู้อำนวยการ",
+    agency: "กลุ่มงานช่วยบริหาร",
+    mutiselect: [],
+  },
+  {
+    no: "0de607a0-b094-4a6d-9e30-979343ab5e53",
+    name: "นางขรรค์ จันทรสมบัติ",
+    idcard: "8558455632126",
+    send: "",
+    position: "นักจัดการทั่วไป",
+    agency: "กลุ่มงานช่วยบริหาร",
+    mutiselect: [],
+  },
+  {
+    no: "93ca7366-2a35-4f94-a331-9c23c9ea78d3",
+    name: "นางโอภาส จรัสวงศ์",
+    idcard: "8158455635425",
+    send: "",
+    position: "นักจัดการทั่วไป",
+    agency: "กลุ่มงานช่วยบริหาร",
+    mutiselect: [],
+  },
+  {
+    no: "d3777c19-2bd0-42df-90ce-c3eeeee55ac6",
+    name: "นางธิญา หงษ์ทอง",
+    idcard: "4558455632145",
+    send: "",
+    position: "นักจัดการทั่วไป",
+    agency: "กลุ่มงานช่วยบริหาร",
+    mutiselect: [],
+  },
+  {
+    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
+    name: "นางธนวิทย์ พิกุลเทพ",
+    idcard: "5542455632145",
+    send: "",
+    position: "นักจัดการทั่วไป",
+    agency: "กลุ่มงานช่วยบริหาร",
+    mutiselect: [],
+  },
+  {
+    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
+    name: "นางหนึ่ง สตาภิรมย์",
+    idcard: "7448455632145",
+    send: "",
+    position: "นิติกร",
+    agency: "กลุ่มงานนิติกร",
+    mutiselect: [],
+  },
+  {
+    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
+    name: "นางสัจพร คมคาย",
+    idcard: "1236455632145",
+    send: "",
+    position: "นิติกร",
+    agency: "กลุ่มงานนิติกร",
+    mutiselect: [],
+  },
+  {
+    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
+    name: "นางตุลยากร ปรีดาศิริกุล",
+    idcard: "1523455632145",
+    send: "",
+    position: "นิติกร",
+    agency: "กลุ่มงานนิติกร",
+    mutiselect: [],
+  },
+  {
+    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
+    name: "นางบัลลังค์ จิรวาณิชย์",
+    idcard: "1258455632145",
+    send: "",
+    position: "นิติกร",
+    agency: "กลุ่มงานนิติกร",
+    mutiselect: [],
+  },
+  {
+    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
+    name: "นางคมคาย เรืองรังสรรค์",
+    idcard: "8548455632145",
+    send: "",
+    position: "นิติกร",
+    agency: "กลุ่มงานนิติกร",
+    mutiselect: [],
+  },
+  {
+    no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
+    name: "นางพรทิพา คมคาย",
+    idcard: "6598455632145",
+    send: "",
+    position: "นิติกร",
+    agency: "กลุ่มงานนิติกร",
+    mutiselect: [],
+  },
+]);
+
+onMounted(async () => {
+  await nodeTree();
+});
+
+const paginationLabel = (start: number, end: number, total: number) => {
+  //   if (props.paging == true)
+  //     return " " + start + " ใน " + end + " จากจำนวน " + total + " รายการ";
+  //   else
+  return start + "-" + end + " ใน " + total;
+};
+
+const resetFilter = () => {
+  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
+  filter.value = "";
+  filterRef.value!.focus();
+};
+
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+
+const clickClose = async () => {
+  //   if (editRow.value == true) {
+  //   dialogMessage(
+  //     $q,
+  //     "ข้อมูลมีการแก้ไข",
+  //     "ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?",
+  //     "mdi-help-circle-outline",
+  //     "ตกลง",
+  //     "orange",
+  //     () => (modal.value = false),
+  //     undefined
+  //   );
+  //   } else {
+  modal.value = false;
+  //     next.value = false;
+  //     previous.value = false;
+  //   }
+};
+
+const clickAdd = () => {
+  modal.value = true;
+};
+
+const clickDelete = (id: string) => {
+  dialogMessage(
+    $q,
+    "ยืนยันการลบข้อมูล",
+    "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
+    "mdi-help-circle-outline",
+    "ตกลง",
+    "red",
+    () => deleteData(id),
+    undefined
+  );
+};
+
+const nodeTree = async () => {
+  showLoader();
+  await http
+    .get(config.API.profileOrganizRoot)
+    .then((res: any) => {
+      const data = res.data.result;
+      nodesTree.value = data;
+      if (data.length > 0) {
+        expanded.value = [data[0].id];
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const onSelected = async (id: string) => {
+  //   await fetchPositionNumber(id);
+};
+
+const deleteData = async (id: string) => {};
+</script>
+<style lang="scss"></style>
diff --git a/src/modules/05_placement/components/RepatriationOrder/step03.vue b/src/modules/05_placement/components/RepatriationOrder/step03.vue
new file mode 100644
index 000000000..d7521a80d
--- /dev/null
+++ b/src/modules/05_placement/components/RepatriationOrder/step03.vue
@@ -0,0 +1,580 @@
+<template>
+  <div>
+    <div style="min-height: 70vh">
+      <q-splitter
+        v-model="splitterModel"
+        style="height: 70vh"
+        @update:model-value="onchangePage"
+      >
+        <template v-slot:before>
+          <div class="space">
+            <div @click="setTab('main')" :class="getClass(tab == 'main')">
+              <div class="q-pr-sm">คำสั่ง</div>
+              <q-btn
+                size="12px"
+                flat
+                dense
+                icon="mdi-download"
+                :disable="tab !== 'main'"
+                :color="tab !== 'main' ? 'grey' : 'add'"
+              >
+                <q-tooltip>ดาวน์โหลด</q-tooltip>
+                <q-menu>
+                  <q-list style="min-width: 150px">
+                    <q-item clickable v-close-popup>
+                      <q-item-section avatar
+                        ><q-icon color="red" name="mdi-file-pdf"
+                      /></q-item-section>
+                      <q-item-section>ไฟล์ .PDF</q-item-section>
+                    </q-item>
+                    <q-item clickable v-close-popup>
+                      <q-item-section avatar
+                        ><q-icon color="blue" name="mdi-file-word"
+                      /></q-item-section>
+                      <q-item-section>ไฟล์ .docx</q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-menu>
+              </q-btn>
+            </div>
+            <div @click="setTab('second')" :class="getClass(tab == 'second')">
+              <div class="q-pr-sm">เอกสารแนบท้าย</div>
+              <q-btn
+                size="12px"
+                flat
+                dense
+                :color="tab !== 'second' ? 'grey' : 'add'"
+                icon="mdi-download"
+                :disable="tab !== 'second'"
+              >
+                <q-tooltip>ดาวน์โหลด</q-tooltip>
+                <q-menu>
+                  <q-list style="min-width: 150px">
+                    <q-item clickable v-close-popup>
+                      <q-item-section avatar
+                        ><q-icon color="red" name="mdi-file-pdf"
+                      /></q-item-section>
+                      <q-item-section>ไฟล์ .PDF</q-item-section>
+                    </q-item>
+                    <q-item clickable v-close-popup>
+                      <q-item-section avatar
+                        ><q-icon color="green-7" name="mdi-file-excel"
+                      /></q-item-section>
+                      <q-item-section>ไฟล์ .xls</q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-menu>
+              </q-btn>
+            </div>
+            <q-space />
+            <q-btn
+              class="text-dark"
+              flat
+              dense
+              icon="mdi-fullscreen"
+              color="add"
+              @click="dialog = true"
+            />
+          </div>
+          <q-separator style="margin-top: -1px; z-index: 1" />
+          <q-card bordered class="card-pdf q-ma-md q-pa-md">
+            <div class="justify-between items-center align-center q-pb-sm row">
+              <q-btn
+                class="text-dark bg-grey-4"
+                flat
+                dense
+                @click="page = page > 1 ? page - 1 : page"
+              >
+                <q-icon name="mdi-chevron-left" />
+              </q-btn>
+
+              <span class="body-2 grey--text">
+                หน้าที่ {{ page }} จาก {{ numOfPages }}
+              </span>
+
+              <q-btn
+                class="text-dark bg-grey-4"
+                flat
+                dense
+                @click="page = page < numOfPages ? page + 1 : page"
+              >
+                <q-icon name="mdi-chevron-right" />
+              </q-btn>
+            </div>
+            <div class="pdfWidth">
+              <VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
+              <!-- <VuePdf :key="page" :src="pdfSrc" :page="page" /> -->
+            </div>
+            <div class="justify-between items-center align-center q-pt-sm row">
+              <q-btn
+                class="text-dark bg-grey-4"
+                flat
+                dense
+                @click="page = page > 1 ? page - 1 : page"
+              >
+                <q-icon name="mdi-chevron-left" />
+              </q-btn>
+
+              <span class="body-2 grey--text">
+                หน้าที่ {{ page }} จาก {{ numOfPages }}
+              </span>
+
+              <q-btn
+                class="text-dark bg-grey-4"
+                flat
+                dense
+                @click="page = page < numOfPages ? page + 1 : page"
+              >
+                <q-icon name="mdi-chevron-right" />
+              </q-btn>
+            </div>
+          </q-card>
+        </template>
+
+        <template v-slot:separator>
+          <q-avatar
+            color="primary"
+            text-color="white"
+            size="30px"
+            icon="drag_indicator"
+          />
+        </template>
+
+        <template v-slot:after>
+          <q-form ref="myForm">
+            <div class="q-pa-md q-gutter-y-md">
+              <fieldset class="border q-px-lg q-py-md">
+                <legend class="text-header q-px-sm">อัปโหลดไฟล์</legend>
+                <div class="q-gutter-y-md q-mb-md">
+                  <div>
+                    <label class="text-file">คำสั่ง</label>
+                    <q-file
+                      outlined
+                      dense
+                      v-model="fileOrder"
+                      label="เลือกไฟล์คำสั่ง"
+                      hide-bottom-space
+                      lazy-rules
+                      :rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon name="attach_file" />
+                      </template>
+                    </q-file>
+                  </div>
+                  <div>
+                    <label class="text-file">เอกสารแนบท้าย</label>
+                    <q-file
+                      outlined
+                      dense
+                      v-model="fileTailer"
+                      label="เลือกไฟล์เอกสารแนบท้าย"
+                      hide-bottom-space
+                      lazy-rules
+                      :rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon name="attach_file" />
+                      </template>
+                    </q-file>
+                  </div>
+                </div>
+              </fieldset>
+
+              <fieldset class="border q-px-lg q-py-md">
+                <legend class="text-header q-px-sm">รายละเอียด</legend>
+                <div class="q-gutter-y-md q-mb-md">
+                  <div>
+                    <label class="text-file">เลขที่คำสั่ง</label>
+                    <q-input
+                      :outlined="true"
+                      dense
+                      lazy-rules
+                      :readonly="!true"
+                      :borderless="!true"
+                      v-model="order"
+                      :rules="[(val) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]"
+                      hide-bottom-space
+                      :label="`${'เลขที่คำสั่ง'}`"
+                    />
+                  </div>
+                  <div>
+                    <label class="text-file">ปีที่ออกคำสั่ง</label>
+                    <datepicker
+                      menu-class-name="modalfix"
+                      v-model="years"
+                      :locale="'th'"
+                      autoApply
+                      year-picker
+                      :enableTimePicker="false"
+                      week-start="0"
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          outlined
+                          dense
+                          lazy-rules
+                          :model-value="years + 543"
+                          :rules="[
+                            (val) => !!val || `${'กรุณาเลือกปีที่ออกคำสั่ง'}`,
+                          ]"
+                          hide-bottom-space
+                          :label="`${'ปีที่ออกคำสั่ง'}`"
+                        >
+                          <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              style="color: var(--q-grey)"
+                            >
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                  </div>
+                  <div>
+                    <label class="text-file">วันที่ลงนาม</label>
+                    <datepicker
+                      menu-class-name="modalfix"
+                      v-model="date"
+                      :locale="'th'"
+                      autoApply
+                      borderless
+                      :enableTimePicker="false"
+                      week-start="0"
+                    >
+                      <template #year="{ year }">
+                        {{ year + 543 }}
+                      </template>
+                      <template #year-overlay-value="{ value }">
+                        {{ parseInt(value + 543) }}
+                      </template>
+                      <template #trigger>
+                        <q-input
+                          outlined
+                          dense
+                          class="full-width datepicker"
+                          hide-bottom-space
+                          :model-value="date != null ? date2Thai(date) : null"
+                          :label="`${'วันที่มีผลออกคำสั่ง'}`"
+                          :rules="[
+                            (val) =>
+                              !!val || `${'กรุณาเลือกวันที่มีผลออกคำสั่ง'}`,
+                          ]"
+                        >
+                          <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              style="color: var(--q-grey)"
+                            >
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                  </div>
+                </div>
+              </fieldset>
+              <div class="flex justify-around">
+                <q-btn
+                  unelevated
+                  label="ออกคำสั่ง"
+                  :color="validateForm() ? 'public' : 'grey'"
+                  :disable="!validateForm()"
+                />
+                <q-btn
+                  class="text-dark"
+                  unelevated
+                  label="ส่งไปลงนาม"
+                  color="grey"
+                  disable
+                />
+              </div>
+            </div>
+          </q-form>
+        </template>
+      </q-splitter>
+    </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
+        unelevated
+        label="บันทึก"
+        :color="validateForm() ? 'public' : 'grey'"
+        :disable="!validateForm()"
+        @click="save"
+      >
+      </q-btn>
+
+      <!-- <q-btn flat round color="primary" icon="chevron_right" @click="next">
+          <q-tooltip>ต่อไป</q-tooltip>
+        </q-btn> -->
+    </div>
+
+    <q-dialog
+      v-model="dialog"
+      persistent
+      :maximized="true"
+      transition-show="slide-up"
+      transition-hide="slide-down"
+    >
+      <q-card class="bg-white text-white">
+        <!-- <q-bar>
+            <q-space />
+  
+            <q-btn dense flat icon="close" v-close-popup>
+              <q-tooltip>ปิดหน้าต่าง</q-tooltip>
+            </q-btn>
+          </q-bar> -->
+
+        <div class="flex justify-end items-center align-center q-mr-md q-mt-sm">
+          <q-btn
+            icon="close"
+            unelevated
+            round
+            dense
+            style="color: #ff8080; background-color: #ffdede"
+            size="12px"
+            v-close-popup
+          />
+        </div>
+        <q-card-section bordered class="card-pdf q-ma-md q-pa-md">
+          <div class="justify-between items-center align-center q-pb-sm row">
+            <q-btn
+              class="text-dark bg-grey-4"
+              flat
+              dense
+              @click="page = page > 1 ? page - 1 : page"
+            >
+              <q-icon name="mdi-chevron-left" />
+            </q-btn>
+
+            <span class="body-2 grey--text text-black">
+              หน้าที่ {{ page }} จาก {{ numOfPages }}
+            </span>
+
+            <q-btn
+              class="text-dark bg-grey-4"
+              flat
+              dense
+              @click="page = page < numOfPages ? page + 1 : page"
+            >
+              <q-icon name="mdi-chevron-right" />
+            </q-btn>
+          </div>
+          <div class="pdfWidth">
+            <VuePDF
+              ref="vuePDFRef"
+              :pdf="pdfSrc"
+              :page="page"
+              fit-parent
+              :scale="0.1"
+            />
+            <!-- <VuePdf :key="page" :src="pdfSrc" :page="page" /> -->
+          </div>
+          <div class="justify-between items-center align-center q-pt-sm row">
+            <q-btn
+              class="text-dark bg-grey-4"
+              flat
+              dense
+              @click="page = page > 1 ? page - 1 : page"
+            >
+              <q-icon name="mdi-chevron-left" />
+            </q-btn>
+
+            <span class="body-2 grey--text text-black">
+              หน้าที่ {{ page }} จาก {{ numOfPages }}
+            </span>
+
+            <q-btn
+              class="text-dark bg-grey-4"
+              flat
+              dense
+              @click="page = page < numOfPages ? page + 1 : page"
+            >
+              <q-icon name="mdi-chevron-right" />
+            </q-btn>
+          </div>
+        </q-card-section>
+      </q-card>
+    </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;
+  border: 1px solid #e9eaec;
+}
+.text-header {
+  color: #34373c;
+  font-size: 1rem;
+  font-weight: 300;
+}
+
+.text-file {
+  padding-top: 5px;
+  color: #34373c;
+  font-weight: 500;
+}
+
+.space {
+  background-color: #e9eaec61;
+  display: flex;
+  z-index: 3;
+}
+
+.card-header {
+  margin-top: 5px;
+  background-color: transparent;
+  padding: 2px !important;
+  border-radius: 10px 10px 0px 0px;
+  width: 200px;
+  display: flex;
+  justify-content: center;
+  font-weight: normal;
+  align-items: center;
+}
+
+.card-header-active {
+  margin-top: 5px;
+  margin-left: -1px;
+  background-color: white;
+  padding: 2px !important;
+  border-radius: 10px 10px 0px 0px;
+  border: 1px solid #e9eaec;
+  width: 200px;
+  display: flex;
+  justify-content: center;
+  border-bottom-style: none;
+  font-weight: 600;
+  align-items: center;
+}
+
+.card-pdf {
+  border-radius: 10px;
+  border: 1px solid #e9eaec;
+  background-color: #e9eaec61;
+  //   height: 60vh;
+}
+</style>
diff --git a/src/modules/05_placement/components/probation/FormEvaluation.vue b/src/modules/05_placement/components/probation/FormEvaluation.vue
index 0939b34ba..1ac78ef04 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation.vue
@@ -21,24 +21,24 @@
 						<div class="col-12 text-top0 row items-center ">
 							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
 							วันเริ่มทดลองปฎิบัติหน้าที่ราชการ ตั้งแต่วันที่
-							<span class="text-black q-px-sm">{{date2Thai(dateToday)}}</span> 
-							ถึงวันที 
-							<span class="text-black q-px-sm">{{date2Thai(dateEnd)}}</span>
+							<span class="text-black q-px-sm">{{ date2Thai(dateToday) }}</span>
+							ถึงวันที
+							<span class="text-black q-px-sm">{{ date2Thai(dateEnd) }}</span>
 						</div>
 						<div class="col-12 text-top0 row items-center">
 							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
 							การทดลองปฏิบัติหน้าที่ราชการมีผล ดังนี้
 							<span class="text-black q-px-sm">{{ "ครั้งที่" + period }}</span>
 							ระหว่างวันที่
-							<span class="text-black q-px-sm">{{ date2Thai(dateToday)}}</span>
+							<span class="text-black q-px-sm">{{ date2Thai(dateToday) }}</span>
 							ถึงวันที่
-							<span class="text-black q-px-sm">{{date2Thai(dateEnd)}}</span>
+							<span class="text-black q-px-sm">{{ date2Thai(dateEnd) }}</span>
 						</div>
 						<div class="col-12 q-pt-md">
 							<q-separator size="3px" color="grey-2" />
 						</div>
 					</div>
-					
+
 					<div class="col-12 row">
 						<div class="col-12 text-top0 items-center">
 							<q-avatar class="bg-grey-2 q-mr-sm" size="28px">1</q-avatar>
@@ -52,40 +52,33 @@
 							1.ผลผลิตของงานที่คาดหวัง
 						</div>
 						<q-card flat bordered class="col-xs-12 col-sm-11 col-md-10  offset-md-1 q-pa-sm bg-grey-1">
-							<q-list dense v-for="(list,i) in list1_1" :key="i">
+							<q-list dense v-for="(list, i) in list1_1" :key="i">
 								<q-item dense tag="label" v-ripple>
 									<q-item-section>
 										<q-item-label>{{ list.label }}</q-item-label>
 									</q-item-section>
-									<q-item-section side >
-										<q-rating
-											v-model="model"
-											:val="list.id"
-											max="5"
-											size="sm"
-											color="grey"
-											:color-selected="ratingColors"
-											label="ระดับการประเมินพฤติกรรม"
-										>
+									<q-item-section side>
+										<q-rating v-model="model" :val="list.id" max="5" size="sm" color="grey"
+											:color-selected="ratingColors" label="ระดับการประเมินพฤติกรรม">
 											<template v-slot:tip-1>
-												<q-tooltip>ปรับปรุง</q-tooltip>
+												<q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
 											</template>
 											<template v-slot:tip-2>
-												<q-tooltip>พอใช้</q-tooltip>
+												<q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
 											</template>
 											<template v-slot:tip-3>
-												<q-tooltip>ปานกลาง</q-tooltip>
+												<q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
 											</template>
 											<template v-slot:tip-4>
-												<q-tooltip>ดี</q-tooltip>
+												<q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
 											</template>
 											<template v-slot:tip-5>
-												<q-tooltip>ดีมาก</q-tooltip>
+												<q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
 											</template>
 										</q-rating>
 									</q-item-section>
 								</q-item>
-								<q-separator class="q-my-xs" v-if="i + 1 < list1_1.length"  />
+								<q-separator class="q-my-xs" v-if="i + 1 < list1_1.length" />
 							</q-list>
 						</q-card>
 					</div>
@@ -98,40 +91,36 @@
 							1.ผลผลิตของงานที่เกิดขึ้น
 						</div>
 						<q-card flat bordered class="col-xs-12 col-sm-11 col-md-10  offset-md-1 q-pa-sm bg-grey-1">
-							<q-list dense v-for="(list,i) in list1_2" :key="i">
+							<q-list dense v-for="(list, i) in list1_2" :key="i">
 								<q-item dense tag="label" v-ripple>
 									<q-item-section>
-										<q-item-label>{{ list.label }}</q-item-label>
+										<!-- <q-item-label>{{ list.label }}</q-item-label> -->
+										<q-input outlined dense v-model="text2_1"
+											class="col-xs-12 col-sm-11 col-md-10 offset-md-1" lazy-rules type="textarea"
+											label="ผลผลิตของงานที่เกิดขึ้นจริง" hide-bottom-space :row="1"/>
 									</q-item-section>
-									<q-item-section side >
-										<q-rating
-											v-model="model1"
-											:val="list.id"
-											max="5"
-											size="sm"
-											color="grey"
-											:color-selected="ratingColors"
-											label="ระดับการประเมินพฤติกรรม"
-										>
+									<q-item-section side>
+										<q-rating v-model="model1" :val="list.id" max="5" size="sm" color="grey"
+											:color-selected="ratingColors" label="ระดับการประเมินพฤติกรรม">
 											<template v-slot:tip-1>
-												<q-tooltip>ปรับปรุง</q-tooltip>
+												<q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
 											</template>
 											<template v-slot:tip-2>
-												<q-tooltip>พอใช้</q-tooltip>
+												<q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
 											</template>
 											<template v-slot:tip-3>
-												<q-tooltip>ปานกลาง</q-tooltip>
+												<q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
 											</template>
 											<template v-slot:tip-4>
-												<q-tooltip>ดี</q-tooltip>
+												<q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
 											</template>
 											<template v-slot:tip-5>
-												<q-tooltip>ดีมาก</q-tooltip>
+												<q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
 											</template>
 										</q-rating>
 									</q-item-section>
 								</q-item>
-								<q-separator class="q-my-xs" v-if="i + 1 < list1_2.length"  />
+								<q-separator class="q-my-xs" v-if="i + 1 < list1_2.length" />
 							</q-list>
 						</q-card>
 					</div>
@@ -146,29 +135,23 @@
 									<q-item-section>
 										<q-item-label>ความรู้ความสามารถ</q-item-label>
 									</q-item-section>
-									<q-item-section side >
-										<q-rating
-											v-model="model1_2"
-											max="5"
-											size="sm"
-											color="grey"
-											:color-selected="ratingColors"
-											label="ระดับการประเมินพฤติกรรม"
-										>
+									<q-item-section side>
+										<q-rating v-model="model1_2" max="5" size="sm" color="grey"
+											:color-selected="ratingColors" label="ระดับการประเมินพฤติกรรม">
 											<template v-slot:tip-1>
-												<q-tooltip>ปรับปรุง</q-tooltip>
+												<q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
 											</template>
 											<template v-slot:tip-2>
-												<q-tooltip>พอใช้</q-tooltip>
+												<q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
 											</template>
 											<template v-slot:tip-3>
-												<q-tooltip>ปานกลาง</q-tooltip>
+												<q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
 											</template>
 											<template v-slot:tip-4>
-												<q-tooltip>ดี</q-tooltip>
+												<q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
 											</template>
 											<template v-slot:tip-5>
-												<q-tooltip>ดีมาก</q-tooltip>
+												<q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
 											</template>
 										</q-rating>
 									</q-item-section>
@@ -187,29 +170,23 @@
 									<q-item-section>
 										<q-item-label>ทักษะ</q-item-label>
 									</q-item-section>
-									<q-item-section side >
-										<q-rating
-											v-model="model1_3"
-											max="5"
-											size="sm"
-											color="grey"
-											:color-selected="ratingColors"
-											label="ระดับการประเมินพฤติกรรม"
-										>
+									<q-item-section side>
+										<q-rating v-model="model1_3" max="5" size="sm" color="grey"
+											:color-selected="ratingColors" label="ระดับการประเมินพฤติกรรม">
 											<template v-slot:tip-1>
-												<q-tooltip>ปรับปรุง</q-tooltip>
+												<q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
 											</template>
 											<template v-slot:tip-2>
-												<q-tooltip>พอใช้</q-tooltip>
+												<q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
 											</template>
 											<template v-slot:tip-3>
-												<q-tooltip>ปานกลาง</q-tooltip>
+												<q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
 											</template>
 											<template v-slot:tip-4>
-												<q-tooltip>ดี</q-tooltip>
+												<q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
 											</template>
 											<template v-slot:tip-5>
-												<q-tooltip>ดีมาก</q-tooltip>
+												<q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
 											</template>
 										</q-rating>
 									</q-item-section>
@@ -228,29 +205,23 @@
 									<q-item-section>
 										<q-item-label>สมรรถนะ</q-item-label>
 									</q-item-section>
-									<q-item-section side >
-										<q-rating
-											v-model="model1_4"
-											max="5"
-											size="sm"
-											color="grey"
-											:color-selected="ratingColors"
-											label="ระดับการประเมินพฤติกรรม"
-										>
+									<q-item-section side>
+										<q-rating v-model="model1_4" max="5" size="sm" color="grey"
+											:color-selected="ratingColors" label="ระดับการประเมินพฤติกรรม">
 											<template v-slot:tip-1>
-												<q-tooltip>ปรับปรุง</q-tooltip>
+												<q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
 											</template>
 											<template v-slot:tip-2>
-												<q-tooltip>พอใช้</q-tooltip>
+												<q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
 											</template>
 											<template v-slot:tip-3>
-												<q-tooltip>ปานกลาง</q-tooltip>
+												<q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
 											</template>
 											<template v-slot:tip-4>
-												<q-tooltip>ดี</q-tooltip>
+												<q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
 											</template>
 											<template v-slot:tip-5>
-												<q-tooltip>ดีมาก</q-tooltip>
+												<q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
 											</template>
 										</q-rating>
 									</q-item-section>
@@ -269,29 +240,23 @@
 									<q-item-section>
 										<q-item-label>ความสามารถในการเรียนรู้งาน</q-item-label>
 									</q-item-section>
-									<q-item-section side >
-										<q-rating
-											v-model="model1_5"
-											max="5"
-											size="sm"
-											color="grey"
-											:color-selected="ratingColors"
-											label="ระดับการประเมินพฤติกรรม"
-										>
+									<q-item-section side>
+										<q-rating v-model="model1_5" max="5" size="sm" color="grey"
+											:color-selected="ratingColors" label="ระดับการประเมินพฤติกรรม">
 											<template v-slot:tip-1>
-												<q-tooltip>ปรับปรุง</q-tooltip>
+												<q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
 											</template>
 											<template v-slot:tip-2>
-												<q-tooltip>พอใช้</q-tooltip>
+												<q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
 											</template>
 											<template v-slot:tip-3>
-												<q-tooltip>ปานกลาง</q-tooltip>
+												<q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
 											</template>
 											<template v-slot:tip-4>
-												<q-tooltip>ดี</q-tooltip>
+												<q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
 											</template>
 											<template v-slot:tip-5>
-												<q-tooltip>ดีมาก</q-tooltip>
+												<q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
 											</template>
 										</q-rating>
 									</q-item-section>
@@ -310,29 +275,23 @@
 									<q-item-section>
 										<q-item-label>ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่</q-item-label>
 									</q-item-section>
-									<q-item-section side >
-										<q-rating
-											v-model="model1_6"
-											max="5"
-											size="sm"
-											color="grey"
-											:color-selected="ratingColors"
-											label="ระดับการประเมินพฤติกรรม"
-										>
+									<q-item-section side>
+										<q-rating v-model="model1_6" max="5" size="sm" color="grey"
+											:color-selected="ratingColors" label="ระดับการประเมินพฤติกรรม">
 											<template v-slot:tip-1>
-												<q-tooltip>ปรับปรุง</q-tooltip>
+												<q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
 											</template>
 											<template v-slot:tip-2>
-												<q-tooltip>พอใช้</q-tooltip>
+												<q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
 											</template>
 											<template v-slot:tip-3>
-												<q-tooltip>ปานกลาง</q-tooltip>
+												<q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
 											</template>
 											<template v-slot:tip-4>
-												<q-tooltip>ดี</q-tooltip>
+												<q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
 											</template>
 											<template v-slot:tip-5>
-												<q-tooltip>ดีมาก</q-tooltip>
+												<q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
 											</template>
 										</q-rating>
 									</q-item-section>
@@ -343,50 +302,37 @@
 					<div class="col-12 row">
 						<div class="col-12 text-top0 row items-center q-pl-lg">
 							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-							1.7 อื่นๆ 
+							1.7 อื่นๆ
 							<q-checkbox class="q-ml-sm" dense v-model="etc" />
 						</div>
-						<q-card  v-if="etc" flat bordered class="col-xs-12 col-sm-11 col-md-10  offset-md-1 q-pa-sm bg-grey-1">
+						<q-card v-if="etc" flat bordered
+							class="col-xs-12 col-sm-11 col-md-10  offset-md-1 q-pa-sm bg-grey-1">
 							<q-list dense>
 								<q-item dense tag="label" v-ripple>
 									<q-item-section>
 										<q-item-label>
-											<q-input
-												v-model="etc_text"
-												label="กรอกอื่นๆ"
-												dense
-												lazy-rules
-												autogrow
-												hide-bottom-space
-												outlined
-												class="bg-white"
-												:rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']"
-											/>
+											<q-input v-model="etc_text" label="กรอกอื่นๆ" dense lazy-rules autogrow
+												hide-bottom-space outlined class="bg-white"
+												:rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']" />
 										</q-item-label>
 									</q-item-section>
-									<q-item-section side >
-										<q-rating
-											v-model="modelEtc"
-											max="5"
-											size="sm"
-											color="grey"
-											:color-selected="ratingColors"
-											label="ระดับการประเมินพฤติกรรม"
-										>
+									<q-item-section side>
+										<q-rating v-model="modelEtc" max="5" size="sm" color="grey"
+											:color-selected="ratingColors" label="ระดับการประเมินพฤติกรรม">
 											<template v-slot:tip-1>
-												<q-tooltip>ปรับปรุง</q-tooltip>
+												<q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
 											</template>
 											<template v-slot:tip-2>
-												<q-tooltip>พอใช้</q-tooltip>
+												<q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
 											</template>
 											<template v-slot:tip-3>
-												<q-tooltip>ปานกลาง</q-tooltip>
+												<q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
 											</template>
 											<template v-slot:tip-4>
-												<q-tooltip>ดี</q-tooltip>
+												<q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
 											</template>
 											<template v-slot:tip-5>
-												<q-tooltip>ดีมาก</q-tooltip>
+												<q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
 											</template>
 										</q-rating>
 									</q-item-section>
@@ -399,36 +345,18 @@
 							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
 							จุดเด่น (ไม่เกิน 5 บรรทัด)
 						</div>
-						<q-input
-							outlined
-							dense
-							v-model="text2_1"
-							class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
-							lazy-rules
-							type="textarea"
-							label="กรอกจุดเด่น"
-							hide-bottom-space
-							:row="5"
-							:rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']"
-						/>
+						<q-input outlined dense v-model="text2_1" class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
+							lazy-rules type="textarea" label="กรอกจุดเด่น" hide-bottom-space :row="5"
+							:rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']" />
 					</div>
 					<div class="col-12 row">
 						<div class="col-12 text-top0 row items-center q-pl-lg">
 							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
 							สิ่งที่ควรปรับปรุง (ไม่เกิน 5 บรรทัด)
 						</div>
-						<q-input
-							outlined
-							dense
-							v-model="text2_2"
-							class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
-							lazy-rules
-							type="textarea"
-							hide-bottom-space
-							label="กรอกสิ่งที่ควรปรับปรุง"
-							:row="5"
-							:rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']"
-						/>
+						<q-input outlined dense v-model="text2_2" class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
+							lazy-rules type="textarea" hide-bottom-space label="กรอกสิ่งที่ควรปรับปรุง" :row="5"
+							:rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']" />
 					</div>
 
 					<div class="col-12">
@@ -446,40 +374,33 @@
 							2.1 ความประพฤติ
 						</div>
 						<q-card flat bordered class="col-xs-12 col-sm-11 col-md-10  offset-md-1 q-pa-sm bg-grey-1">
-							<q-list dense v-for="(list,i) in list2_1" :key="i">
+							<q-list dense v-for="(list, i) in list2_1" :key="i">
 								<q-item dense tag="label" v-ripple>
 									<q-item-section>
 										<q-item-label>{{ list.label }}</q-item-label>
 									</q-item-section>
-									<q-item-section side >
-										<q-rating
-											v-model="model"
-											:val="list.id"
-											max="5"
-											size="sm"
-											color="grey"
-											:color-selected="ratingColors"
-											label="ระดับการประเมินพฤติกรรม"
-										>
+									<q-item-section side>
+										<q-rating v-model="model" :val="list.id" max="5" size="sm" color="grey"
+											:color-selected="ratingColors" label="ระดับการประเมินพฤติกรรม">
 											<template v-slot:tip-1>
-												<q-tooltip>ปรับปรุง</q-tooltip>
+												<q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
 											</template>
 											<template v-slot:tip-2>
-												<q-tooltip>พอใช้</q-tooltip>
+												<q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
 											</template>
 											<template v-slot:tip-3>
-												<q-tooltip>ปานกลาง</q-tooltip>
+												<q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
 											</template>
 											<template v-slot:tip-4>
-												<q-tooltip>ดี</q-tooltip>
+												<q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
 											</template>
 											<template v-slot:tip-5>
-												<q-tooltip>ดีมาก</q-tooltip>
+												<q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
 											</template>
 										</q-rating>
 									</q-item-section>
 								</q-item>
-								<q-separator class="q-my-xs" v-if="i + 1 < list2_1.length"  />
+								<q-separator class="q-my-xs" v-if="i + 1 < list2_1.length" />
 							</q-list>
 						</q-card>
 					</div>
@@ -489,40 +410,33 @@
 							2.2 ความมีคุณธรรมจริยธรรม
 						</div>
 						<q-card flat bordered class="col-xs-12 col-sm-11 col-md-10  offset-md-1 q-pa-sm bg-grey-1">
-							<q-list dense v-for="(list,i) in list2_2" :key="i">
+							<q-list dense v-for="(list, i) in list2_2" :key="i">
 								<q-item dense tag="label" v-ripple>
 									<q-item-section>
 										<q-item-label>{{ list.label }}</q-item-label>
 									</q-item-section>
-									<q-item-section side >
-										<q-rating
-											v-model="model"
-											:val="list.id"
-											max="5"
-											size="sm"
-											color="grey"
-											:color-selected="ratingColors"
-											label="ระดับการประเมินพฤติกรรม"
-										>
+									<q-item-section side>
+										<q-rating v-model="model" :val="list.id" max="5" size="sm" color="grey"
+											:color-selected="ratingColors" label="ระดับการประเมินพฤติกรรม">
 											<template v-slot:tip-1>
-												<q-tooltip>ปรับปรุง</q-tooltip>
+												<q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
 											</template>
 											<template v-slot:tip-2>
-												<q-tooltip>พอใช้</q-tooltip>
+												<q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
 											</template>
 											<template v-slot:tip-3>
-												<q-tooltip>ปานกลาง</q-tooltip>
+												<q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
 											</template>
 											<template v-slot:tip-4>
-												<q-tooltip>ดี</q-tooltip>
+												<q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
 											</template>
 											<template v-slot:tip-5>
-												<q-tooltip>ดีมาก</q-tooltip>
+												<q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
 											</template>
 										</q-rating>
 									</q-item-section>
 								</q-item>
-								<q-separator class="q-my-xs" v-if="i + 1 < list2_2.length"  />
+								<q-separator class="q-my-xs" v-if="i + 1 < list2_2.length" />
 							</q-list>
 						</q-card>
 					</div>
@@ -532,90 +446,70 @@
 							2.3 การรักษาวินัย
 						</div>
 						<q-card flat bordered class="col-xs-12 col-sm-11 col-md-10  offset-md-1 q-pa-sm bg-grey-1">
-							<q-list dense v-for="(list,i) in list2_3" :key="i">
+							<q-list dense v-for="(list, i) in list2_3" :key="i">
 								<q-item dense tag="label" v-ripple>
 									<q-item-section>
 										<q-item-label>{{ list.label }}</q-item-label>
 									</q-item-section>
-									<q-item-section side >
-										<q-rating
-											v-model="model"
-											:val="list.id"
-											max="5"
-											size="sm"
-											color="grey"
-											:color-selected="ratingColors"
-											label="ระดับการประเมินพฤติกรรม"
-										>
+									<q-item-section side>
+										<q-rating v-model="model" :val="list.id" max="5" size="sm" color="grey"
+											:color-selected="ratingColors" label="ระดับการประเมินพฤติกรรม">
 											<template v-slot:tip-1>
-												<q-tooltip>ปรับปรุง</q-tooltip>
+												<q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
 											</template>
 											<template v-slot:tip-2>
-												<q-tooltip>พอใช้</q-tooltip>
+												<q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
 											</template>
 											<template v-slot:tip-3>
-												<q-tooltip>ปานกลาง</q-tooltip>
+												<q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
 											</template>
 											<template v-slot:tip-4>
-												<q-tooltip>ดี</q-tooltip>
+												<q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
 											</template>
 											<template v-slot:tip-5>
-												<q-tooltip>ดีมาก</q-tooltip>
+												<q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
 											</template>
 										</q-rating>
 									</q-item-section>
 								</q-item>
-								<q-separator class="q-my-xs" v-if="i + 1 < list2_3.length"  />
+								<q-separator class="q-my-xs" v-if="i + 1 < list2_3.length" />
 							</q-list>
 						</q-card>
 					</div>
 					<div class="col-12 row">
 						<div class="col-12 text-top0 row items-center q-pl-lg">
 							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-							2.4 อื่นๆ 
+							2.4 อื่นๆ
 							<q-checkbox class="q-ml-sm" dense v-model="etc_4" />
 						</div>
-						<q-card  v-if="etc_4" flat bordered class="col-xs-12 col-sm-11 col-md-10  offset-md-1 q-pa-sm bg-grey-1">
+						<q-card v-if="etc_4" flat bordered
+							class="col-xs-12 col-sm-11 col-md-10  offset-md-1 q-pa-sm bg-grey-1">
 							<q-list dense>
 								<q-item dense tag="label" v-ripple>
 									<q-item-section>
 										<q-item-label>
-											<q-input
-												v-model="etc_text2"
-												label="กรอกอื่นๆ"
-												dense
-												lazy-rules
-												autogrow
-												hide-bottom-space
-												outlined
-												class="bg-white"
-												:rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']"
-											/>
+											<q-input v-model="etc_text2" label="กรอกอื่นๆ" dense lazy-rules autogrow
+												hide-bottom-space outlined class="bg-white"
+												:rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']" />
 										</q-item-label>
 									</q-item-section>
-									<q-item-section side >
-										<q-rating
-											v-model="modelEtc"
-											max="5"
-											size="sm"
-											color="grey"
-											:color-selected="ratingColors"
-											label="ระดับการประเมินพฤติกรรม"
-										>
+									<q-item-section side>
+										<q-rating v-model="modelEtc" max="5" size="sm" color="grey"
+											:color-selected="ratingColors" label="ระดับการประเมินพฤติกรรม">
 											<template v-slot:tip-1>
-												<q-tooltip>ปรับปรุง</q-tooltip>
+												<q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
 											</template>
 											<template v-slot:tip-2>
-												<q-tooltip>พอใช้</q-tooltip>
+												<q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
 											</template>
 											<template v-slot:tip-3>
-												<q-tooltip>ปานกลาง</q-tooltip>
+												<q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
 											</template>
 											<template v-slot:tip-4>
-												<q-tooltip>ดี</q-tooltip>
+												<q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
 											</template>
 											<template v-slot:tip-5>
-												<q-tooltip>ดีมาก</q-tooltip>
+												<q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
 											</template>
 										</q-rating>
 									</q-item-section>
@@ -628,36 +522,18 @@
 							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
 							จุดเด่น (ไม่เกิน 5 บรรทัด)
 						</div>
-						<q-input
-							outlined
-							dense
-							v-model="text3_1"
-							class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
-							lazy-rules
-							type="textarea"
-							label="กรอกจุดเด่น"
-							hide-bottom-space
-							:row="5"
-							:rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']"
-						/>
+						<q-input outlined dense v-model="text3_1" class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
+							lazy-rules type="textarea" label="กรอกจุดเด่น" hide-bottom-space :row="5"
+							:rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']" />
 					</div>
 					<div class="col-12 row">
 						<div class="col-12 text-top0 row items-center q-pl-lg">
 							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
 							สิ่งที่ควรปรับปรุง (ไม่เกิน 5 บรรทัด)
 						</div>
-						<q-input
-							outlined
-							dense
-							v-model="text3_2"
-							class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
-							lazy-rules
-							type="textarea"
-							hide-bottom-space
-							label="กรอกสิ่งที่ควรปรับปรุง"
-							:row="5"
-							:rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']"
-						/>
+						<q-input outlined dense v-model="text3_2" class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
+							lazy-rules type="textarea" hide-bottom-space label="กรอกสิ่งที่ควรปรับปรุง" :row="5"
+							:rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']" />
 					</div>
 
 					<div class="col-12">
@@ -676,94 +552,54 @@
 									<q-item-section>
 										<q-item-label>1. การปฐมนิเทศ</q-item-label>
 									</q-item-section>
-									<q-item-section side >
+									<q-item-section side>
 										<div class="row">
-											<q-radio
-												checked-icon="task_alt"
-												unchecked-icon="panorama_fish_eye"
-												v-model="radio_1"
-												val="1"
-												label="ดำเนินการเเล้ว"
-											/>
-											<q-radio
-												checked-icon="task_alt"
-												unchecked-icon="panorama_fish_eye"
-												v-model="radio_1"
-												val="0"
-												label=" ยังไม่ได้ดำเนินการ"
-											/>
+											<q-radio checked-icon="task_alt" unchecked-icon="panorama_fish_eye"
+												v-model="radio_1" val="1" label="ดำเนินการเเล้ว" />
+											<q-radio checked-icon="task_alt" unchecked-icon="panorama_fish_eye"
+												v-model="radio_1" val="0" label=" ยังไม่ได้ดำเนินการ" />
 										</div>
 									</q-item-section>
 								</q-item>
-								<q-separator class="q-my-xs"/>
+								<q-separator class="q-my-xs" />
 								<q-item dense tag="label" v-ripple>
 									<q-item-section>
 										<q-item-label>2. การเรียนรู้ด้วยตนเอง</q-item-label>
 									</q-item-section>
-									<q-item-section side >
+									<q-item-section side>
 										<div class="row">
-											<q-radio
-												checked-icon="task_alt"
-												unchecked-icon="panorama_fish_eye"
-												v-model="radio_2"
-												val="1"
-												label="ดำเนินการเเล้ว"
-											/>
-											<q-radio
-												checked-icon="task_alt"
-												unchecked-icon="panorama_fish_eye"
-												v-model="radio_2"
-												val="0"
-												label=" ยังไม่ได้ดำเนินการ"
-											/>
+											<q-radio checked-icon="task_alt" unchecked-icon="panorama_fish_eye"
+												v-model="radio_2" val="1" label="ดำเนินการเเล้ว" />
+											<q-radio checked-icon="task_alt" unchecked-icon="panorama_fish_eye"
+												v-model="radio_2" val="0" label=" ยังไม่ได้ดำเนินการ" />
 										</div>
 									</q-item-section>
 								</q-item>
-								<q-separator class="q-my-xs"/>
+								<q-separator class="q-my-xs" />
 								<q-item dense tag="label" v-ripple>
 									<q-item-section>
 										<q-item-label>3. การอบรมสัมนาร่วมกัน</q-item-label>
 									</q-item-section>
-									<q-item-section side >
+									<q-item-section side>
 										<div class="row">
-											<q-radio
-												checked-icon="task_alt"
-												unchecked-icon="panorama_fish_eye"
-												v-model="radio_3"
-												val="1"
-												label="ดำเนินการเเล้ว"
-											/>
-											<q-radio
-												checked-icon="task_alt"
-												unchecked-icon="panorama_fish_eye"
-												v-model="radio_3"
-												val="0"
-												label=" ยังไม่ได้ดำเนินการ"
-											/>
+											<q-radio checked-icon="task_alt" unchecked-icon="panorama_fish_eye"
+												v-model="radio_3" val="1" label="ดำเนินการเเล้ว" />
+											<q-radio checked-icon="task_alt" unchecked-icon="panorama_fish_eye"
+												v-model="radio_3" val="0" label=" ยังไม่ได้ดำเนินการ" />
 										</div>
 									</q-item-section>
 								</q-item>
-								<q-separator class="q-my-xs"/>
+								<q-separator class="q-my-xs" />
 								<q-item dense tag="label" v-ripple>
 									<q-item-section>
 										<q-item-label>4. การอบรมอื่น ๆ ตามที่หน่วยงานกำหนด (ถ้ามี)</q-item-label>
 									</q-item-section>
-									<q-item-section side >
+									<q-item-section side>
 										<div class="row">
-											<q-radio
-												checked-icon="task_alt"
-												unchecked-icon="panorama_fish_eye"
-												v-model="radio_4"
-												val="1"
-												label="ดำเนินการเเล้ว"
-											/>
-											<q-radio
-												checked-icon="task_alt"
-												unchecked-icon="panorama_fish_eye"
-												v-model="radio_4"
-												val="0"
-												label=" ยังไม่ได้ดำเนินการ"
-											/>
+											<q-radio checked-icon="task_alt" unchecked-icon="panorama_fish_eye"
+												v-model="radio_4" val="1" label="ดำเนินการเเล้ว" />
+											<q-radio checked-icon="task_alt" unchecked-icon="panorama_fish_eye"
+												v-model="radio_4" val="0" label=" ยังไม่ได้ดำเนินการ" />
 										</div>
 									</q-item-section>
 								</q-item>
@@ -780,49 +616,25 @@
 							ผู้บังคับบัญชาผู้มอบหมายงาน
 						</div>
 						<div class="col-12 row q-col-gutter-md">
-							<q-select 
-								class="col-xs-12 col-sm-8" 
-								dense 
-								v-model="Autherise"
-								outlined
-          						:options="option"
+							<q-select class="col-xs-12 col-sm-8" dense v-model="Autherise" outlined :options="option"
 								label="ผู้บังคับบัญชา" />
 							<div class="col-xs-12 col-sm-4">
-								<datepicker
-									menu-class-name="modalfix"
-									v-model="dateAutherise"
-									:locale="'th'"
-									autoApply
-									borderless
-									:enableTimePicker="false"
-									week-start="0"
-								>
+								<datepicker menu-class-name="modalfix" v-model="dateAutherise" :locale="'th'" autoApply
+									borderless :enableTimePicker="false" week-start="0">
 									<template #year="{ year }">
-									{{ year + 543 }}
+										{{ year + 543 }}
 									</template>
 									<template #year-overlay-value="{ value }">
-									{{ parseInt(value + 543) }}
+										{{ parseInt(value + 543) }}
 									</template>
 									<template #trigger>
-									<q-input
-										outlined
-										dense
-										class="full-width datepicker col-3"
-										:model-value="
-										dateAutherise != null ? date2Thai(dateAutherise) : null
-										"
-										:label="`${'ลงวันที่'}`"
-										:rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
-									>
-										<template v-slot:prepend>
-										<q-icon
-											name="event"
-											class="cursor-pointer"
-											style="color: var(--q-primary)"
-										>
-										</q-icon>
-										</template>
-									</q-input>
+										<q-input outlined dense class="full-width datepicker col-3" :model-value="dateAutherise != null ? date2Thai(dateAutherise) : null
+											" :label="`${'ลงวันที่'}`" :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]">
+											<template v-slot:prepend>
+												<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+												</q-icon>
+											</template>
+										</q-input>
 									</template>
 								</datepicker>
 							</div>
@@ -832,7 +644,7 @@
 			</div>
 			<q-separator />
 			<div class="flex justify-end q-px-sm q-pt-sm">
-				<q-btn dense class="q-px-md" unelevated label="บันทึก" color="public"/>
+				<q-btn dense class="q-px-md" unelevated label="บันทึก" color="public" />
 			</div>
 		</div>
 	</div>
@@ -845,40 +657,40 @@ import { useQuasar } from "quasar";
 import router from "@/router";
 
 const $q = useQuasar();
-const ratingColors = [ 'light-blue-3', 'light-blue-6', 'blue', 'blue-9', 'blue-10' ];
+const ratingColors = ['light-blue-3', 'light-blue-6', 'blue', 'blue-9', 'blue-10'];
 const list1_1 = [
-	{id: '1', label: 'ผลผลิตของงานที่คาดหวัง 1'},
-	{id: '2', label: 'ผลผลิตของงานที่คาดหวัง 2'},
-	{id: '3', label: 'ผลผลิตของงานที่คาดหวัง 3'},
-	{id: '4', label: 'ผลผลิตของงานที่คาดหวัง 4'},
-	{id: '5', label: 'ผลผลิตของงานที่คาดหวัง 5'}
+	{ id: '1', label: 'ผลผลิตของงานที่คาดหวัง 1' },
+	{ id: '2', label: 'ผลผลิตของงานที่คาดหวัง 2' },
+	{ id: '3', label: 'ผลผลิตของงานที่คาดหวัง 3' },
+	{ id: '4', label: 'ผลผลิตของงานที่คาดหวัง 4' },
+	{ id: '5', label: 'ผลผลิตของงานที่คาดหวัง 5' }
 ];
 const list1_2 = [
-	{id: '1', label: 'ผลผลิตของงานที่เกิดขึ้น 1'},
-	{id: '2', label: 'ผลผลิตของงานที่เกิดขึ้น 2'},
-	{id: '3', label: 'ผลผลิตของงานที่เกิดขึ้น 3'},
-	{id: '4', label: 'ผลผลิตของงานที่เกิดขึ้น 4'},
-	{id: '5', label: 'ผลผลิตของงานที่เกิดขึ้น 5'}
+	{ id: '1', label: 'ผลผลิตของงานที่เกิดขึ้น 1' },
+	{ id: '2', label: 'ผลผลิตของงานที่เกิดขึ้น 2' },
+	{ id: '3', label: 'ผลผลิตของงานที่เกิดขึ้น 3' },
+	{ id: '4', label: 'ผลผลิตของงานที่เกิดขึ้น 4' },
+	{ id: '5', label: 'ผลผลิตของงานที่เกิดขึ้น 5' }
 ];
 
 const list2_1 = [
-	{id: '1', label: 'ให้บริการประชาชนหรือผู้รับบริการด้วยอัธยาศัยดี'},
-	{id: '2', label: 'มีความรับผิดชอบในการปฏิบัติบัติงาน'},
-	{id: '3', label: 'ให้บริการประชาชนหรือผู้รับบริการด้วยความรวดเร็ว เอาใจใส่เป็นมาตรฐานเดียวกัน'},
-	{id: '4', label: 'ตั้งใจปฏิบัติบัติหน้าที่ราชการด้วยความอุตสาหะ ขยันหมั่นเพียร'},
+	{ id: '1', label: 'ให้บริการประชาชนหรือผู้รับบริการด้วยอัธยาศัยดี' },
+	{ id: '2', label: 'มีความรับผิดชอบในการปฏิบัติบัติงาน' },
+	{ id: '3', label: 'ให้บริการประชาชนหรือผู้รับบริการด้วยความรวดเร็ว เอาใจใส่เป็นมาตรฐานเดียวกัน' },
+	{ id: '4', label: 'ตั้งใจปฏิบัติบัติหน้าที่ราชการด้วยความอุตสาหะ ขยันหมั่นเพียร' },
 ];
 const list2_2 = [
-	{id: '1', label: 'อุทิศตนและเสียสละเวลาในการปฏิบัติบัติงานอย่างเต็มกำลังความสามารถ'},
-	{id: '2', label: 'มีจิตสำนึกที่ดี ปฏิบัติบัติงานด้วยความซื่อสัตย์ สุจริต'},
-	{id: '3', label: 'ยึดมั่นในสถาบันบัพระมหากษัตริย์ และไม่กระทำการใด ๆ อันจะก่อให้เกิดความเสียหายต่อประเทศชาติ'},
+	{ id: '1', label: 'อุทิศตนและเสียสละเวลาในการปฏิบัติบัติงานอย่างเต็มกำลังความสามารถ' },
+	{ id: '2', label: 'มีจิตสำนึกที่ดี ปฏิบัติบัติงานด้วยความซื่อสัตย์ สุจริต' },
+	{ id: '3', label: 'ยึดมั่นในสถาบันบัพระมหากษัตริย์ และไม่กระทำการใด ๆ อันจะก่อให้เกิดความเสียหายต่อประเทศชาติ' },
 ];
 
 const list2_3 = [
-	{id: '1', label: 'มีความรับรัผิดชอบในการรักษาเวลาทำงาน'},
-	{id: '2', label: 'แต่งกายในการปฏิบัติบัติงานได้อย่างเหมาะสมกับการเป็นข้าราชการ'},
-	{id: '3', label: 'ไม่กระทำการใด ๆ อันอาจก่อให้เกิดความเสียหายแก่ชื่อเสียงของหน่วยงาน'},
-	{id: '4', label: 'ไม่กระทำการใด ๆ อันเป็นการเสื่อมเกียรติและศักดิ์ศรีของความเป็นข้าราชการ'},
-	{id: '5', label: 'ปฏิบัติบัติหน้าที่อย่างตรงไปตรงมาโดยยึกหลักจรรยาบรรณวิชาชีพ'}
+	{ id: '1', label: 'มีความรับรัผิดชอบในการรักษาเวลาทำงาน' },
+	{ id: '2', label: 'แต่งกายในการปฏิบัติบัติงานได้อย่างเหมาะสมกับการเป็นข้าราชการ' },
+	{ id: '3', label: 'ไม่กระทำการใด ๆ อันอาจก่อให้เกิดความเสียหายแก่ชื่อเสียงของหน่วยงาน' },
+	{ id: '4', label: 'ไม่กระทำการใด ๆ อันเป็นการเสื่อมเกียรติและศักดิ์ศรีของความเป็นข้าราชการ' },
+	{ id: '5', label: 'ปฏิบัติบัติหน้าที่อย่างตรงไปตรงมาโดยยึกหลักจรรยาบรรณวิชาชีพ' }
 ];
 
 const etc_text = ref<any>(null);
@@ -914,37 +726,40 @@ const text2_1 = ref<string>('');
 const text2_2 = ref<string>('');
 
 const onSubmit = () => {
-  $q.notify({
-    color: "green-4",
-    textColor: "white",
-    icon: "cloud_done",
-    message: "ส่งแบบประเมินเเล้ว",
-  });
+	$q.notify({
+		color: "green-4",
+		textColor: "white",
+		icon: "cloud_done",
+		message: "ส่งแบบประเมินเเล้ว",
+	});
 };
 
 const onReset = () => {
-  router.push({ name: "probation" });
+	router.push({ name: "probation" });
 };
 </script>
 
 <style lang="scss" scoped>
-.text-top2{
+.text-top2 {
 	font-weight: 500;
 	padding-bottom: 8px;
-   color: rgb(70, 68, 68);
+	color: rgb(70, 68, 68);
 }
-.text-top0{
+
+.text-top0 {
 	font-weight: 600;
 	padding-bottom: 8px;
-    color: rgb(70, 68, 68);
+	color: rgb(70, 68, 68);
 }
-.text-Hd{
+
+.text-Hd {
 	font-weight: 600;
-    font-size: 1rem;
-    padding-bottom: 5px;
-    color: #02A998;
+	font-size: 1rem;
+	padding-bottom: 5px;
+	color: #02A998;
 }
-.q-rating__icon{
+
+.q-rating__icon {
 	text-shadow: transparent !important;
 }
 </style>
\ No newline at end of file
diff --git a/src/modules/05_placement/components/probation/MainDetail.vue b/src/modules/05_placement/components/probation/MainDetail.vue
index 3151f15ee..551575019 100644
--- a/src/modules/05_placement/components/probation/MainDetail.vue
+++ b/src/modules/05_placement/components/probation/MainDetail.vue
@@ -33,7 +33,7 @@
 							</q-item-section>
 
 							<q-item-section>
-								บันทึกผลการทดลองปฏิบัติหน้าที่ราชการ
+								บันทึกผลการทดลองปฏิบัติหน้าที่ราชการ (2)
 							</q-item-section>
 						</q-item>
 
@@ -44,7 +44,7 @@
 							</q-item-section>
 
 							<q-item-section>
-								ประเมินผลการทดลองปฏิบัติหน้าที่ราชการ
+								ประเมินผลการทดลองปฏิบัติหน้าที่ราชการ (1)
 							</q-item-section>
 						</q-item>
 
diff --git a/src/modules/05_placement/router.ts b/src/modules/05_placement/router.ts
index b4b8b93eb..f8f597612 100644
--- a/src/modules/05_placement/router.ts
+++ b/src/modules/05_placement/router.ts
@@ -37,6 +37,14 @@ const probationWorkAdd = () =>
     import("@/modules/05_placement/components/probation/FormAssign.vue");
   const transfer = () =>
     import("@/modules/05_placement/components/Transfer/transferMain.vue");
+
+
+  // คำสั่งช่วยราชการ/ส่งตัวกลับ
+  const RepatriationOrder = () =>
+  import("@/modules/05_placement/components/RepatriationOrder/List.vue");
+  const RepatriationOrderAdd = () =>
+  import("@/modules/05_placement/components/RepatriationOrder/AddOrder.vue");
+
   export default [
     {
       path: "/placement",
@@ -166,6 +174,26 @@ const probationWorkAdd = () =>
         Auth: true,
         Key: [6.4],
         Role: "placement",
+      }
+    },
+    {
+      path: "/repatriation-order",
+      name: "repatriation-order",
+      component: RepatriationOrder,
+      meta: {
+        Auth: true,
+        Key: [6.6],
+        
+      },
+    },
+    {
+      path: "/repatriation-order/add",
+      name: "repatriation-order-add",
+      component: RepatriationOrderAdd,
+      meta: {
+        Auth: true,
+        Key: [6.6],
+        Role: "placement",
       },
     },
   ];
diff --git a/src/modules/06_retirement/components/DismissOrder/DismissOrder.vue b/src/modules/06_retirement/components/DismissOrder/DismissOrder.vue
index 6838580bc..c133c9f0b 100644
--- a/src/modules/06_retirement/components/DismissOrder/DismissOrder.vue
+++ b/src/modules/06_retirement/components/DismissOrder/DismissOrder.vue
@@ -485,7 +485,7 @@ const OriginalDataFetch = async () => {
 
 // ดูรายการหน้าต่อไป
 const redirectToPage = (id?: number) => {
-  router.push(`/dismiss-order/addorder`);
+  router.push(`/dismiss-order/add`);
 };
 
 const clickDelete = (id: string) => {
diff --git a/src/modules/06_retirement/components/ListRetirement/AddList.vue b/src/modules/06_retirement/components/ListRetirement/AddList.vue
index 2fe61b0ba..01c06f54c 100644
--- a/src/modules/06_retirement/components/ListRetirement/AddList.vue
+++ b/src/modules/06_retirement/components/ListRetirement/AddList.vue
@@ -9,14 +9,19 @@ const $q = useQuasar(); //ใช้ noti quasar
 const mixin = useCounterMixin();
 const { messageError, success } = mixin;
 
+const props = defineProps({
+  retireld: String,
+});
+
 const modal = ref<boolean>(false);
+const retireld = ref<any>();
 
 const columns = ref<any["columns"]>([
   {
-    name: "index",
+    name: "order",
     required: true,
     label: "ลำดับ",
-    field: "index",
+    field: "order",
     align: "left",
   },
   {
@@ -41,10 +46,10 @@ const columns = ref<any["columns"]>([
     align: "left",
   },
   {
-    name: "affiliation",
+    name: "organizationOrganization",
     required: true,
     label: "สังกัด",
-    field: "affiliation",
+    field: "organizationOrganization",
     align: "left",
   },
   {
@@ -56,64 +61,72 @@ const columns = ref<any["columns"]>([
   },
 ]);
 const rows = ref<any>([
-  {
-    fullname: "นายใจดี  ยอดใจ",
-    position: "นักวิชาการพัสดุ",
-    level: "ปฎิบัติการ",
-    affiliation: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
-  },
-  {
-    fullname: "นายจักกริน  บัณฑิต",
-    position: "นักวิชาการพัสดุ",
-    level: "ปฎิบัติการ",
-    affiliation: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
-  },
-  {
-    fullname: "นายจักกริน  บัณฑิต",
-    position: "นักวิชาการพัสดุ",
-    level: "ปฎิบัติการ",
-    affiliation: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
-  },
-  {
-    fullname: "นายจักกริน  บัณฑิต",
-    position: "นักวิชาการพัสดุ",
-    level: "ปฎิบัติการ",
-    affiliation: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
-  },
-  {
-    fullname: "นายจักกริน  บัณฑิต",
-    position: "นักวิชาการพัสดุ",
-    level: "ปฎิบัติการ",
-    affiliation: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
-  },
-  {
-    fullname: "นายจักกริน  บัณฑิต",
-    position: "นักวิชาการพัสดุ",
-    level: "ปฎิบัติการ",
-    affiliation: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
-  },
-  {
-    fullname: "นายจักกริน  บัณฑิต",
-    position: "นักวิชาการพัสดุ",
-    level: "ปฎิบัติการ",
-    affiliation: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
-  },
+  // {
+  //   fullname: "นายใจดี  ยอดใจ",
+  //   position: "นักวิชาการพัสดุ",
+  //   level: "ปฎิบัติการ",
+  //   affiliation: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
+  // },
+  // {
+  //   fullname: "นายจักกริน  บัณฑิต",
+  //   position: "นักวิชาการพัสดุ",
+  //   level: "ปฎิบัติการ",
+  //   affiliation: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
+  // },
+  // {
+  //   fullname: "นายจักกริน  บัณฑิต",
+  //   position: "นักวิชาการพัสดุ",
+  //   level: "ปฎิบัติการ",
+  //   affiliation: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
+  // },
+  // {
+  //   fullname: "นายจักกริน  บัณฑิต",
+  //   position: "นักวิชาการพัสดุ",
+  //   level: "ปฎิบัติการ",
+  //   affiliation: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
+  // },
+  // {
+  //   fullname: "นายจักกริน  บัณฑิต",
+  //   position: "นักวิชาการพัสดุ",
+  //   level: "ปฎิบัติการ",
+  //   affiliation: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
+  // },
+  // {
+  //   fullname: "นายจักกริน  บัณฑิต",
+  //   position: "นักวิชาการพัสดุ",
+  //   level: "ปฎิบัติการ",
+  //   affiliation: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
+  // },
+  // {
+  //   fullname: "นายจักกริน  บัณฑิต",
+  //   position: "นักวิชาการพัสดุ",
+  //   level: "ปฎิบัติการ",
+  //   affiliation: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
+  // },
 ]);
 const filter = ref<string>("");
 watch(modal, () => {
   if (modal.value === true) {
-    fecthProfile();
+    retireld.value = props.retireld;
+    fecthlistRetire(retireld.value);
   }
 });
-const fecthProfile = async () => {
-  await http
-    .get(config.API.getprofileRetire("1234"))
-    .then((res) => {
-      console.log(res);
-    })
-    .catch((e) => {
-      messageError($q, e);
-    });
+const fecthlistRetire = async (retireld: any) => {
+  // await http
+  //   .get(config.API.listRetire(retireld))
+  //   .then((res) => {
+  //     console.log(res);
+  //     rows.value = res.data.result.map((e: any) => ({
+  //       order: e.order,
+  //       fullname: e.fullName,
+  //       position: e.position,
+  //       level: e.positionEmployeeLevel,
+  //       organizationOrganization: e.organizationOrganization,
+  //     }));
+  //   })
+  //   .catch((e) => {
+  //     messageError($q, e);
+  //   });
 };
 const clickAdd = () => {
   $q.dialog({
@@ -136,7 +149,7 @@ const clickAdd = () => {
           messageError($q, e);
         })
         .finally(() => {
-          fecthProfile();
+          fecthlistRetire();
         });
     })
     .onCancel(() => {})
@@ -223,7 +236,10 @@ const paginationLabel = (start: number, end: number, total: number) => {
           </template>
           <template v-slot:body="props">
             <q-tr :props="props" class="cursor-pointer">
-              <q-td>{{ props.rowIndex + 1 }}</q-td>
+              <!-- <q-td>{{ props.rowIndex + 1 }}</q-td> -->
+              <q-td key="order" :props="props">
+                {{ props.row.order }}
+              </q-td>
               <q-td key="fullname" :props="props">
                 {{ props.row.fullname }}
               </q-td>
@@ -231,8 +247,8 @@ const paginationLabel = (start: number, end: number, total: number) => {
                 {{ props.row.position }}
               </q-td>
               <q-td key="level" :props="props">{{ props.row.level }}</q-td>
-              <q-td key="affiliation" :props="props">
-                {{ props.row.affiliation }}
+              <q-td key="organizationOrganization" :props="props">
+                {{ props.row.organizationOrganization }}
               </q-td>
 
               <q-td>
diff --git a/src/modules/06_retirement/components/ListRetirement/TableList.vue b/src/modules/06_retirement/components/ListRetirement/TableList.vue
index b58028815..441aa85bf 100644
--- a/src/modules/06_retirement/components/ListRetirement/TableList.vue
+++ b/src/modules/06_retirement/components/ListRetirement/TableList.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, computed, watch } from "vue";
+import { ref, onMounted, computed } from "vue";
 import AddList from "../ListRetirement/AddList.vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
@@ -11,21 +11,69 @@ const route = useRoute();
 const $q = useQuasar(); //ใช้ noti quasar
 const mixin = useCounterMixin();
 const { showLoader, hideLoader, messageError, success } = mixin;
-const no = route.params.id;
+const type_params = route.params.type;
+const year_params = route.params.year;
+const retireld_params = route.params.id;
+
 const modalNote = ref<boolean>(false);
 const note = ref<string>("");
+const retireProfileId = ref<string>("");
+const retireld = ref<string>();
 
 onMounted(() => {
-  console.log(no);
-  fecthlist();
-  console.log(visibleNote.value);
+  console.log(route.params.id);
+  if (route.params.id === undefined) {
+    fecthlistprofile(type_params, year_params);
+  } else fecthlist(retireld_params);
 });
-const fecthlist = async () => {
+const fecthlistprofile = async (type: any, year: any) => {
   showLoader();
   await http
-    .get(config.API.profile("emplayee", 2023))
+    .get(config.API.profile(type, year))
     .then((res: any) => {
       console.log(res);
+      retireld.value = res.data.result.id;
+      rows.value = res.data.result.profile.map((e: any) => ({
+        id: e.id,
+        order: e.order,
+        fixname: e.prefix,
+        name: e.fullName,
+        organizationOrganization: e.organizationOrganization,
+        positionType: e.positionType,
+        position: e.position,
+        positionNumber: e.posNoEmployee,
+        positionLavel: e.positionEmployeeLevel,
+        bureau: e.oc,
+      }));
+      console.log(rows.value);
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+const fecthlist = async (id: any) => {
+  showLoader();
+  await http
+    .get(config.API.listRetire(id))
+    .then((res: any) => {
+      console.log(res);
+      retireld.value = res.data.result.id;
+      rows.value = res.data.result.map((e: any) => ({
+        id: e.id,
+        order: e.order,
+        fixname: e.prefix,
+        name: e.fullName,
+        organizationOrganization: e.organizationOrganization,
+        positionType: e.positionType,
+        position: e.position,
+        positionNumber: e.posNoEmployee,
+        positionLavel: e.positionEmployeeLevel,
+        bureau: e.oc,
+      }));
+      console.log(rows.value);
     })
     .catch((e: any) => {
       messageError($q, e);
@@ -36,10 +84,10 @@ const fecthlist = async () => {
 };
 const columns = ref<any["columns"]>([
   {
-    name: "index",
+    name: "order",
     required: true,
     label: "ลำดับ",
-    field: "index",
+    field: "order",
     align: "left",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -61,10 +109,10 @@ const columns = ref<any["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "brand",
+    name: "organizationOrganization",
     align: "left",
     label: "สังกัด",
-    field: "brand",
+    field: "organizationOrganization",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -78,11 +126,11 @@ const columns = ref<any["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "positionManager",
+    name: "position",
     align: "left",
     label: "ตำแหน่ง ",
     sublabel: "ทางการบริหาร",
-    field: "positionManager",
+    field: "position",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -144,49 +192,50 @@ const columns = ref<any["columns"]>([
   },
 ]);
 const rows = ref<any>([
-  {
-    fixname: "นางสาว",
-    name: "รัชภรณ์ ภัคดี",
-    brand: "ฝ่ายบริหารทั่วไป",
-    positionType: "บริหาร",
-    positionManager: "จัดการทั่วไป",
-    positionLavel: "ชำนาญการ",
-    positionNumber: "กบห.2",
-    govGroup: "ฝ่ายบริหารทั่วไป",
-    govOffice: "ฝ่ายบริหารทั่วไป",
-    bureau: "บริหาร",
-  },
-  {
-    fixname: "นางสาว",
-    name: "รัชภรณ์ ภัคดี",
-    brand: "ฝ่ายบริหารทั่วไป",
-    positionType: "บริหาร",
-    positionManager: "จัดการทั่วไป",
-    positionLavel: "ชำนาญการ",
-    positionNumber: "กบห.2",
-    govGroup: "ฝ่ายบริหารทั่วไป",
-    govOffice: "ฝ่ายบริหารทั่วไป",
-    bureau: "บริหาร",
-  },
-  {
-    fixname: "นางสาว",
-    name: "รัชภรณ์ ภัคดี",
-    brand: "ฝ่ายบริหารทั่วไป",
-    positionType: "บริหาร",
-    positionManager: "จัดการทั่วไป",
-    positionLavel: "ชำนาญการ",
-    positionNumber: "กบห.2",
-    govGroup: "ฝ่ายบริหารทั่วไป",
-    govOffice: "ฝ่ายบริหารทั่วไป",
-    bureau: "บริหาร",
-  },
+  // {
+  //   fixname: "นางสาว",
+  //   name: "รัชภรณ์ ภัคดี",
+  //   brand: "ฝ่ายบริหารทั่วไป",
+  //   positionType: "บริหาร",
+  //   positionManager: "จัดการทั่วไป",
+  //   positionLavel: "ชำนาญการ",
+  //   positionNumber: "กบห.2",
+  //   govGroup: "ฝ่ายบริหารทั่วไป",
+  //   govOffice: "ฝ่ายบริหารทั่วไป",
+  //   bureau: "บริหาร",
+  // },
+  // {
+  //   fixname: "นางสาว",
+  //   name: "รัชภรณ์ ภัคดี",
+  //   brand: "ฝ่ายบริหารทั่วไป",
+  //   positionType: "บริหาร",
+  //   positionManager: "จัดการทั่วไป",
+  //   positionLavel: "ชำนาญการ",
+  //   positionNumber: "กบห.2",
+  //   govGroup: "ฝ่ายบริหารทั่วไป",
+  //   govOffice: "ฝ่ายบริหารทั่วไป",
+  //   bureau: "บริหาร",
+  // },
+  // {
+  //   fixname: "นางสาว",
+  //   name: "รัชภรณ์ ภัคดี",
+  //   brand: "ฝ่ายบริหารทั่วไป",
+  //   positionType: "บริหาร",
+  //   positionManager: "จัดการทั่วไป",
+  //   positionLavel: "ชำนาญการ",
+  //   positionNumber: "กบห.2",
+  //   govGroup: "ฝ่ายบริหารทั่วไป",
+  //   govOffice: "ฝ่ายบริหารทั่วไป",
+  //   bureau: "บริหาร",
+  // },
 ]);
 const visibleColumns = ref<any>([
+  "order",
   "fixname",
   "name",
-  "brand",
+  "organizationOrganization",
   "positionType",
-  "positionManager",
+  "position",
   "positionLavel",
   "positionNumber",
   "govGroup",
@@ -198,7 +247,7 @@ const visibleColumns = ref<any>([
 const filter = ref<string>("");
 
 const clickDelete = (prop: any) => {
-  console.log(prop);
+  console.log(prop.id);
   $q.dialog({
     title: "ยืนยันการลบข้อมูล",
     message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
@@ -210,7 +259,7 @@ const clickDelete = (prop: any) => {
   })
     .onOk(async () => {
       await http
-        .delete(config.API.profileRetire("123"))
+        .delete(config.API.profileRetire(prop.id))
         .then(() => {
           success($q, "ลบข้อมูลสำเร็จ");
         })
@@ -218,7 +267,9 @@ const clickDelete = (prop: any) => {
           messageError($q, e);
         })
         .finally(() => {
-          fecthlist();
+          if (route.params.id === undefined) {
+            fecthlistprofile(type_params, year_params);
+          } else fecthlist(retireld_params);
         });
     })
     .onCancel(() => {})
@@ -227,26 +278,21 @@ const clickDelete = (prop: any) => {
 const backHistory = () => {
   window.history.back();
 };
-watch(modalNote, () => {
-  if (modalNote.value === true) {
-    fetchReason();
-  }
-});
-const fetchReason = async () => {
+
+const fetchReason = async (val: string) => {
   await http
-    .get(config.API.reasonId("123"))
+    .get(config.API.reasonId(val))
     .then((res: any) => {
-      console.log(res);
+      console.log(res.data.result);
+
+      note.value = res.data.result.reason;
+      retireProfileId.value = res.data.result.id;
     })
     .catch((e: any) => {
       messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
     });
 };
 const saveNote = () => {
-  console.log(note.value);
   $q.dialog({
     title: "ยืนยันการบันทึกข้อมูลข้อมูล",
     message: "ต้องการบันทึกข้อมูลนี้ใช่หรือไม่?",
@@ -259,15 +305,19 @@ const saveNote = () => {
     .onOk(async () => {
       console.log("บันทึกข้อมูล");
       await http
-        .post(config.API.createnote(), note.value)
+        .post(config.API.createnote(), {
+          retireProfileId: retireProfileId.value,
+          reason: note.value,
+        })
         .then(() => {
-          success($q, "บันทึกข้อมูล");
+          success($q, "บันทึกข้อมูลสำเร็จ");
         })
         .catch((e) => {
           messageError($q, e);
         })
         .finally(() => {
-          fecthlist();
+          fecthlist(retireld_params);
+          modalNote.value = false;
         });
     })
     .onCancel(() => {})
@@ -278,6 +328,33 @@ const visibleNote = computed(() => {
     return true;
   }
 });
+// const saveList = () => {
+//   $q.dialog({
+//     title: "ยืนยันกาบันทึกข้อมูล",
+//     message: "ต้องการบันทึกข้อมูลนี้ใช่หรือไม่?",
+//     cancel: {
+//       flat: true,
+//       color: "negative",
+//     },
+//     persistent: true,
+//   })
+//     .onOk(async () => {
+//       const retireld = "1233444";
+//       await http
+//         .post(config.API.listRetire("123"), { retireld: retireld })
+//         .then(() => {
+//           success($q, "บันทึกข้อมูลสำเร็จ");
+//         })
+//         .catch((e) => {
+//           messageError($q, e);
+//         })
+//         .finally(() => {
+//           fecthlist();
+//         });
+//     })
+//     .onCancel(() => {})
+//     .onDismiss(() => {});
+// };
 </script>
 
 <template>
@@ -297,10 +374,10 @@ const visibleNote = computed(() => {
   <div>
     <q-card class="col-12 q-pa-md">
       <q-toolbar>
-        <AddList />
-        <q-btn flat round color="blue-12" icon="save">
+        <AddList :retireld="retireld" />
+        <!-- <q-btn flat round color="blue-12" icon="save" @click="saveList">
           <q-tooltip>บันทึกข้อมูล</q-tooltip>
-        </q-btn>
+        </q-btn> -->
         <q-btn color="primary" flat round icon="download">
           <q-menu>
             <q-list style="min-width: 100px">
@@ -385,15 +462,17 @@ const visibleNote = computed(() => {
           </template>
           <template v-slot:body="props">
             <q-tr :props="props" class="cursor-pointer">
-              <q-td>{{ props.rowIndex + 1 }}</q-td>
+              <q-td key="order" :props="props">{{ props.row.order }}</q-td>
               <q-td key="fixname" :props="props">{{ props.row.fixname }}</q-td>
               <q-td key="name" :props="props">{{ props.row.name }}</q-td>
-              <q-td key="brand" :props="props">{{ props.row.brand }}</q-td>
+              <q-td key="organizationOrganization" :props="props">{{
+                props.row.organizationOrganization
+              }}</q-td>
               <q-td key="positionType" :props="props">{{
                 props.row.positionType
               }}</q-td>
-              <q-td key="positionManager" :props="props">{{
-                props.row.positionManager
+              <q-td key="position" :props="props">{{
+                props.row.position
               }}</q-td>
               <q-td key="positionLavel" :props="props">{{
                 props.row.positionLavel
@@ -416,8 +495,10 @@ const visibleNote = computed(() => {
                   class="text-teal-5"
                   icon="mdi-note"
                   size="md"
-                  v-if="no !== undefined"
-                  @click="(modalNote = true), (note = '')"
+                  v-if="retireld_params !== undefined"
+                  @click="
+                    fetchReason(props.row.id), (modalNote = true), (note = '')
+                  "
                 >
                   <q-tooltip>โน้ต</q-tooltip></q-btn
                 >
diff --git a/src/modules/06_retirement/router.ts b/src/modules/06_retirement/router.ts
index b78301662..5008215f7 100644
--- a/src/modules/06_retirement/router.ts
+++ b/src/modules/06_retirement/router.ts
@@ -22,8 +22,8 @@ export default [
     },
   },
   {
-    path: "/retirement/list",
-    name: "retirement/list",
+    path: "/retirement/list/:type/:year",
+    name: "retirement/list/",
     component: Listretirement,
     meta: {
       Auth: true,
@@ -32,7 +32,7 @@ export default [
     },
   },
   {
-    path: "/retirement/list/:id/:year",
+    path: "/retirement/list/:id",
     name: "retirement/list/id",
     component: Listretirement,
     meta: {
@@ -92,7 +92,7 @@ export default [
     },
   },
   {
-    path: "/dismiss-order/addorder",
+    path: "/dismiss-order/add",
     name: "dismiss-order-add",
     component: addOrder,
     meta: {
diff --git a/src/modules/06_retirement/views/Main.vue b/src/modules/06_retirement/views/Main.vue
index 7f2d40388..1872a756f 100644
--- a/src/modules/06_retirement/views/Main.vue
+++ b/src/modules/06_retirement/views/Main.vue
@@ -51,7 +51,7 @@
               color="add"
               icon="mdi-plus"
             >
-              <q-tooltip>เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ</q-tooltip>
+              <q-tooltip>เพิ่ม</q-tooltip>
             </q-btn>
             <!-- <q-menu>
               <q-list style="min-width: 100px">
@@ -178,7 +178,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, useAttrs, reactive,watch } from "vue";
+import { onMounted, ref, useAttrs, reactive, watch } from "vue";
 import type { QTableProps } from "quasar";
 import type {
   FormMainProbation,
@@ -243,18 +243,19 @@ const currentYear = new Date().getFullYear();
 const rows = ref<resMain[]>([]);
 const tab = ref<any>("officer");
 const visibleColumns2 = ref<string[]>(["no", "name", "retireNumber"]);
-  const getYear = () => {
+const getYear = () => {
   yearOptions.length = 0;
-  yearOptions.push(currentYear+543);
+  yearOptions.push(currentYear + 543);
   console.log(yearOptions);
   get(type.value, currentYear);
-  fiscalyear.value = currentYear+543;
-
+  fiscalyear.value = currentYear + 543;
 };
-const get = async (type: string, year: number) => {
+const get = async (type: string, year: string) => {
   await http
     .get(config.API.retirement(type, year))
     .then((res) => {
+      console.log(res);
+
       rows.value = [];
       let data = res.data.result;
       rows.value = data.map((items: resMain) => ({
@@ -265,9 +266,7 @@ const get = async (type: string, year: number) => {
         total: items.total,
       }));
     })
-    .catch((e) => {
-
-    })
+    .catch((e) => {})
     .finally(() => {
       hideLoader();
     });
@@ -345,24 +344,24 @@ const rows2 = ref<FormMainProbation2[]>([
   },
 ]);
 
-const clickDelete = (id: string) => {
-  $q.dialog({
-    title: "ยืนยันการลบข้อมูล",
-    message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
-    cancel: {
-      flat: true,
-      color: "negative",
-    },
-    persistent: true,
-  })
-    .onOk(async () => {})
-    .onCancel(() => {})
-    .onDismiss(() => {});
-};
+// const clickDelete = (id: string) => {
+//   $q.dialog({
+//     title: "ยืนยันการลบข้อมูล",
+//     message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
+//     cancel: {
+//       flat: true,
+//       color: "negative",
+//     },
+//     persistent: true,
+//   })
+//     .onOk(async () => {})
+//     .onCancel(() => {})
+//     .onDismiss(() => {});
+// };
 
 const clickAdd = () => {
   //   modal.value = true;
-  router.push("/retirement/list");
+  router.push(`/retirement/list/${type.value}/${currentYear}`);
 };
 const clickClose = async () => {
   modal.value = false;
@@ -396,16 +395,15 @@ const paginationLabel = (start: string, end: string, total: string) => {
   if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
   else return start + "-" + end + " ใน " + total;
 };
-const nextPage = () => {
-  router.push(`/retirement/list/${type.value}/${currentYear}`);
+const nextPage = (prop: any) => {
+  console.log(prop.id);
+
+  router.push(`/retirement/list/${prop.id}`);
 };
 
-watch(type,()=>{
-  console.log(type.value)
-  get(type.value,currentYear)
-  console.log("🚀 ~ file: Main.vue:417 ~ watch ~ fiscalyear:",typeof fiscalyear.value)
-  
-})
+watch(type, () => {
+  get(type.value, currentYear);
+});
 </script>
 
 <style lang="scss" scope>