diff --git a/src/modules/05_placement/components/PersonalList/OrgTree.vue b/src/modules/05_placement/components/PersonalList/OrgTree.vue
index 5cca4ecb9..ba0f63366 100644
--- a/src/modules/05_placement/components/PersonalList/OrgTree.vue
+++ b/src/modules/05_placement/components/PersonalList/OrgTree.vue
@@ -105,10 +105,10 @@ const fetchplacementPosition = async () => {
 const search = ref<string>("");
 //reset Tree Filter
 const filterRef = ref<any>(null);
-const resetFilter = () => {
-  search.value = "";
-  filterRef.value.focus();
-};
+// const resetFilter = () => {
+//   search.value = "";
+//   filterRef.value.focus();
+// };
 
 const props = defineProps({
   personalId: String,
@@ -155,6 +155,8 @@ const validateData = async () => {
 };
 
 const saveAppoint = async () => {
+  console.log("save", dataForm);
+
   myFormPosition.value.validate().then(async (result: boolean) => {
     if (result) {
       const dataAppoint = await {
@@ -170,8 +172,7 @@ const saveAppoint = async () => {
         // mouthSalaryAmount: dataForm.mouthSalaryAmount,
         // positionSalaryAmount: dataForm.positionSalaryAmount,
       };
-      // console.log("save appoint===>", dataAppoint);
-
+      console.log("save appoint===>", dataAppoint);
       showLoader();
       await http
         .post(config.API.placementPass(), dataAppoint)
@@ -184,7 +185,10 @@ const saveAppoint = async () => {
         })
         .finally(async () => {
           await closeAndClear();
-          await resetFilter();
+          // await resetFilter();
+          await fetchPublishFile();
+          await loadTreeData();
+          await fetchplacementPosition();
           hideLoader();
         });
     }
@@ -273,8 +277,9 @@ const positionLevelOptions = ref<Object[]>([
 ]);
 
 const selectedPosition = async (data: any) => {
+  console.log("selecteds", data);
   if (data.name == null && selected.value != data.keyId) {
-    console.log("selecteds", data);
+    // console.log("selecteds", data);
 
     editDataStatus.value = true;
     selected.value = data.keyId;
@@ -299,9 +304,9 @@ const selectedPosition = async (data: any) => {
 
     // positionPathSide Options
     let positionPathSideArr: any = [];
-    if (data.positionSideNameObj != null) {
+    if (data.positionSideNameObj && data.positionSideNameObj != null) {
       data.positionSideNameObj.map((x: any) => {
-        positionLevelsArr.push({
+        positionPathSideArr.push({
           label: x.Name,
           value: x.Id,
         });
@@ -345,6 +350,7 @@ const selectedPosition = async (data: any) => {
         positionLevelsArr.length > 1 || positionLevelsArr.length == 0
           ? ""
           : positionLevelsArr[0].value;
+      dataForm.positionLevelId = data.positionLevelObj[0].Id;
     }
   } else if (selected.value == data.keyId) {
     selected.value = "";
@@ -355,6 +361,7 @@ const selectedPosition = async (data: any) => {
     dataForm.positionPathSideId = "";
     dataForm.positionTypeId = "";
   }
+  console.log("dataForm", dataForm);
 };
 
 const checkPosition = (val: string) => {
@@ -374,14 +381,14 @@ watch(props, () => {
     console.log("personal", personal.value);
   }
   // console.log("draft===>", personal.value.draft);
-  
+
   if (personal.value && personal.value.draft === false) {
     // const findData = dataRespone.value.find(findByPerson);
     let findData: any = null;
-    console.log(dataRespone.value);
-
     dataRespone.value.map((x: any) => {
       findData = findByPerson(x);
+      console.log(findData);
+
       if (findData != null) {
         console.log("findData===>", findData);
         selectedPosition(findData);
@@ -403,9 +410,7 @@ function findByPerson(element: any): any {
     element.positionTypeId === personal.value.positionTypeId &&
     element.positionNumId === personal.value.posNoId &&
     (element.positionLevelObj === null ||
-      element.positionLevelObj[0].Id === personal.value.positionLevelId) &&
-    (element.positionSideNameObj === null ||
-      element.positionSideNameObj[0].Id === personal.value.positionPathSideId)
+      element.positionLevelObj[0].Id === personal.value.positionLevelId)
   ) {
     return element;
   } else if (element.children) {
diff --git a/src/modules/05_placement/components/PersonalList/Table.vue b/src/modules/05_placement/components/PersonalList/Table.vue
index 2eae18436..661ae59c1 100644
--- a/src/modules/05_placement/components/PersonalList/Table.vue
+++ b/src/modules/05_placement/components/PersonalList/Table.vue
@@ -462,11 +462,26 @@ const clickClose = async () => {
     modal.value = false;
   }
 };
-
+const displayAdd = ref<boolean>(true);
 onMounted(async () => {
   if (keycloak.tokenParsed != null) {
     roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
-    console.log("roleAdmin===>", roleAdmin);
+    console.log("roleAdmin===>", roleAdmin.value);
+    if (roleAdmin.value === false) {
+      displayAdd.value = false;
+      visibleColumns.value = [
+        "position",
+        "fullName",
+        "examNumber",
+        "idCard",
+        "positionNumber",
+        "organizationName",
+        "reportingDate",
+        "bmaOfficer",
+        "statusName",
+        "positionCandidate",
+      ];
+    }
   }
   await getTable();
 });
@@ -552,6 +567,7 @@ const paginationLabel = (start: number, end: number, total: number) => {
       :boss="true"
       :saveNoDraft="true"
       :role-admin="roleAdmin"
+      :displayAdd="displayAdd"
     >
       <template #columns="props">
         <q-tr :props="props">
diff --git a/src/modules/05_placement/components/PersonalList/TableDetail.vue b/src/modules/05_placement/components/PersonalList/TableDetail.vue
index 3b3f2cc10..b21720df0 100644
--- a/src/modules/05_placement/components/PersonalList/TableDetail.vue
+++ b/src/modules/05_placement/components/PersonalList/TableDetail.vue
@@ -19,7 +19,7 @@ const props = defineProps({
   },
   personalId: {
     type: String,
-    default: ""
+    default: "",
   },
   validate: {
     type: Function,
@@ -27,8 +27,7 @@ const props = defineProps({
   },
 });
 
-const rows = ref<any[]>([
-]);
+const rows = ref<any[]>([]);
 //--------------------(แปลงวันที่เป็นไทย)------------------------------------//
 // const graduationDate = new Date(graduationExample);
 // rows.value[0].graduation = date2Thai(graduationDate, false, false);
@@ -81,7 +80,6 @@ const myForm = ref<any>([]);
 const personalForm = ref<any>([]);
 const selection = ref<any>([]);
 
-
 const $q = useQuasar();
 
 function isRequired(val: any): boolean | string {
@@ -166,21 +164,22 @@ const close = async () => {
   rows.value = [];
 };
 const putpersonalForm = async () => {
-  await http
-    .put(
-      config.API.putProperty("0a846508-4932-40de-9a9e-5b519492217c"),
-      personalForm.value.isProperty
-    )
-    .then((res) => {
-      success($q, res.data.message);
-    })
-    .catch((e) => {
-      console.log(e);
-    })
-    .finally(() => {
-      props.close();
-      props.validate();
-    });
+  props.close();
+  // await http
+  //   .put(
+  //     config.API.putProperty("0a846508-4932-40de-9a9e-5b519492217c"),
+  //     personalForm.value.isProperty
+  //   )
+  //   .then((res) => {
+  //     success($q, res.data.message);
+  //   })
+  //   .catch((e) => {
+  //     console.log(e);
+  //   })
+  //   .finally(() => {
+  //     props.close();
+  //     props.validate();
+  //   });
 };
 </script>
 <template>
@@ -188,7 +187,10 @@ const putpersonalForm = async () => {
     <q-card style="max-width: 100%; width: 80%">
       <q-form ref="myForm">
         <div class="row">
-          <DialogHeader :title="`รายละเอียดของ ${personalForm.fullName}`" @click="close" />
+          <DialogHeader
+            :title="`รายละเอียดของ ${personalForm.fullName}`"
+            @click="close"
+          />
         </div>
         <q-separator />
 
@@ -197,10 +199,13 @@ const putpersonalForm = async () => {
             <q-card bordered class="card-panding">
               <div class="row items-center q-pa-xs header-text">
                 ข้อมูลทั่วไป
-                    <span v-if="personalForm.bmaOfficer != null" class="check-officer">
-                      <q-icon name="mdi-check" />
-                      {{ formBmaofficer(personalForm.bmaOfficer) }}
-                    </span>
+                <span
+                  v-if="personalForm.bmaOfficer != null"
+                  class="check-officer"
+                >
+                  <q-icon name="mdi-check" />
+                  {{ formBmaofficer(personalForm.bmaOfficer) }}
+                </span>
               </div>
               <div class="row q-pa-xs">
                 <div class="col-3 header-sub-text">
@@ -244,8 +249,18 @@ const putpersonalForm = async () => {
           <div class="contanier-box-mini">
             <q-card bordered class="card-panding">
               <div class="row items-center q-pa-xs header-text">การศึกษา</div>
-              <q-table ref="table" :rows="rows" :columns="columns" flat bordered class="custom-header-table"
-                virtual-scroll :virtual-scroll-sticky-size-start="48" dense hide-bottom>
+              <q-table
+                ref="table"
+                :rows="rows"
+                :columns="columns"
+                flat
+                bordered
+                class="custom-header-table"
+                virtual-scroll
+                :virtual-scroll-sticky-size-start="48"
+                dense
+                hide-bottom
+              >
               </q-table>
             </q-card>
           </div>
@@ -320,19 +335,24 @@ const putpersonalForm = async () => {
           <div class="contanier-box-mini">
             <q-card bordered class="card-panding">
               <div class="col-12 row items-center q-pa-sm header-text">
-                การคัดกรองคุณสมบัติ
+                เอกสารเพิ่มเติม
               </div>
-              <div v-for="(item, index) of personalForm.isProperty" :key="index" class="q-pa-sm">
+              <!-- <div v-for="(item, index) of personalForm.isProperty" :key="index" class="q-pa-sm">
                 <q-checkbox size="xs" v-model="item.value" :val="item.value" :label="item.name" keep-color color="teal"
                   :rules="[isRequired]" class="checkbox-group" />
                 <q-separator />
-              </div>
+              </div> -->
             </q-card>
           </div>
         </div>
         <q-separator />
         <div>
-          <DialogFooter @click="ClickSave" :model="props.Modal" :editvisible="save" :validate="validateData" />
+          <DialogFooter
+            @click="ClickSave"
+            :model="props.Modal"
+            :editvisible="save"
+            :validate="validateData"
+          />
         </div>
       </q-form>
     </q-card>
diff --git a/src/modules/05_placement/components/PersonalList/TableView.vue b/src/modules/05_placement/components/PersonalList/TableView.vue
index 4657aafc3..f6d36f091 100644
--- a/src/modules/05_placement/components/PersonalList/TableView.vue
+++ b/src/modules/05_placement/components/PersonalList/TableView.vue
@@ -10,7 +10,14 @@
         @update:model-value="updateContain"
       />
       <div>
-        <q-btn flat round color="primary" icon="mdi-account-arrow-right" @click="updateModaladdlist" />
+        <q-btn
+          flat
+          round
+          color="primary"
+          icon="mdi-account-arrow-right"
+          @click="updateModaladdlist"
+          v-if="displayAdd"
+        />
       </div>
       <q-space />
       <div class="items-center" style="display: flex">
@@ -109,6 +116,7 @@ const props = defineProps({
   editvisible: Boolean,
   titleText: String,
   modaladdlist: Boolean,
+  displayAdd: Boolean,
   optionsFilter: {
     type: Array,
     defualt: [],
diff --git a/src/modules/06_retirement/components/DismissOrder/AddOrder.vue b/src/modules/06_retirement/components/DismissOrder/AddOrder.vue
new file mode 100644
index 000000000..687cbd57a
--- /dev/null
+++ b/src/modules/06_retirement/components/DismissOrder/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/06_retirement/components/DismissOrder/step01.vue")
+);
+const step02 = defineAsyncComponent(
+  () => import("@/modules/06_retirement/components/DismissOrder/step02.vue")
+);
+const step03 = defineAsyncComponent(
+  () => import("@/modules/06_retirement/components/DismissOrder/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/06_retirement/components/DismissOrder/DismissOrder.vue b/src/modules/06_retirement/components/DismissOrder/DismissOrder.vue
new file mode 100644
index 000000000..fb4f94ec3
--- /dev/null
+++ b/src/modules/06_retirement/components/DismissOrder/DismissOrder.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(`/retirement/dismiss-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/06_retirement/components/DismissOrder/step01.vue b/src/modules/06_retirement/components/DismissOrder/step01.vue
new file mode 100644
index 000000000..92ce9bc7d
--- /dev/null
+++ b/src/modules/06_retirement/components/DismissOrder/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/06_retirement/components/DismissOrder/step02.vue b/src/modules/06_retirement/components/DismissOrder/step02.vue
new file mode 100644
index 000000000..8d58d929e
--- /dev/null
+++ b/src/modules/06_retirement/components/DismissOrder/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/06_retirement/components/DismissOrder/step03.vue b/src/modules/06_retirement/components/DismissOrder/step03.vue
new file mode 100644
index 000000000..d7521a80d
--- /dev/null
+++ b/src/modules/06_retirement/components/DismissOrder/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/06_retirement/components/ListRetirement/AddList.vue b/src/modules/06_retirement/components/ListRetirement/AddList.vue
index ab3350085..524d25955 100644
--- a/src/modules/06_retirement/components/ListRetirement/AddList.vue
+++ b/src/modules/06_retirement/components/ListRetirement/AddList.vue
@@ -135,7 +135,9 @@ const paginationLabel = (start: number, end: number, total: number) => {
     icon="mdi-plus"
     size="md"
     @click="modal = true"
-  ></q-btn>
+  >
+    <q-tooltip>เพิ่มรายชื่อ</q-tooltip></q-btn
+  >
 
   <q-dialog v-model="modal">
     <q-card style="width: 850px; max-width: 80vw" class="q-px-sm q-pb-md">
diff --git a/src/modules/06_retirement/components/ListRetirement/TableList.vue b/src/modules/06_retirement/components/ListRetirement/TableList.vue
index 89c6b0a83..36e4e6956 100644
--- a/src/modules/06_retirement/components/ListRetirement/TableList.vue
+++ b/src/modules/06_retirement/components/ListRetirement/TableList.vue
@@ -1,13 +1,21 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
 import AddList from "../ListRetirement/AddList.vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
+import { useRoute } from "vue-router";
 
+const route = useRoute();
 const $q = useQuasar(); //ใช้ noti quasar
 const mixin = useCounterMixin();
 const {} = mixin;
+const no = route.params.id;
+const modalNote = ref<boolean>(false);
+const note = ref<string>("");
 
+onMounted(() => {
+  console.log(no);
+});
 const columns = ref<any["columns"]>([
   {
     name: "index",
@@ -104,6 +112,12 @@ const columns = ref<any["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
+  {
+    name: "note",
+    align: "left",
+    label: "",
+    field: "",
+  },
   {
     name: "button",
     align: "left",
@@ -160,6 +174,7 @@ const visibleColumns = ref<any>([
   "govGroup",
   "govOffice",
   "bureau",
+  "note",
   "button",
 ]);
 const filter = ref<string>("");
@@ -183,6 +198,22 @@ const clickDelete = () => {
 const backHistory = () => {
   window.history.back();
 };
+const saveNote = () => {
+  $q.dialog({
+    title: "ยืนยันการบันทึกข้อมูลข้อมูล",
+    message: "ต้องการบันทึกข้อมูลนี้ใช่หรือไม่?",
+    cancel: {
+      flat: true,
+      color: "negative",
+    },
+    persistent: true,
+  })
+    .onOk(async () => {
+      console.log("บันทึกข้อมูล");
+    })
+    .onCancel(() => {})
+    .onDismiss(() => {});
+};
 </script>
 
 <template>
@@ -203,6 +234,32 @@ const backHistory = () => {
     <q-card class="col-12 q-pa-md">
       <q-toolbar>
         <AddList />
+        <q-btn flat round color="blue-12" icon="save">
+          <q-tooltip>บันทึกข้อมูล</q-tooltip>
+        </q-btn>
+        <q-btn color="primary" flat round icon="download">
+          <q-menu>
+            <q-list style="min-width: 100px">
+              <q-item clickable>
+                <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>
+                <q-item-section avatar>
+                  <q-icon color="green" name="mdi-file-excel" />
+                </q-item-section>
+                <q-item-section>ไฟล .xls</q-item-section>
+              </q-item>
+            </q-list>
+          </q-menu>
+          <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+        </q-btn>
+        <q-btn flat round color="light-blue" icon="upload">
+          <q-tooltip>อัพโหลดไฟล์</q-tooltip>
+        </q-btn>
+
         <q-space />
         <q-tabs shrink>
           <q-input
@@ -287,6 +344,19 @@ const backHistory = () => {
                 props.row.govOffice
               }}</q-td>
               <q-td key="bureau" :props="props">{{ props.row.bureau }}</q-td>
+              <q-td>
+                <q-btn
+                  flat
+                  round
+                  class="text-teal-5"
+                  icon="mdi-note"
+                  size="md"
+                  v-if="no !== undefined"
+                  @click="(modalNote = true), (note = '')"
+                >
+                  <q-tooltip>โน้ต</q-tooltip></q-btn
+                >
+              </q-td>
               <q-td>
                 <q-btn
                   flat
@@ -296,13 +366,6 @@ const backHistory = () => {
                   size="md"
                   @click="clickDelete"
                 />
-                <q-btn
-                  flat
-                  round
-                  class="text-teal-5"
-                  icon="mdi-eye"
-                  size="md"
-                />
               </q-td>
             </q-tr>
           </template>
@@ -310,6 +373,42 @@ const backHistory = () => {
       </div>
     </q-card>
   </div>
+
+  <!-- note -->
+  <q-dialog v-model="modalNote">
+    <q-card style="width: 700px; max-width: 80vw">
+      <q-card-section class="q-pt-none">
+        <q-toolbar class="q-py-md">
+          <q-toolbar-title class="header-text text-weight-bolder"
+            >กรอกเหตุผล
+          </q-toolbar-title>
+          <q-btn
+            icon="close"
+            unelevated
+            round
+            dense
+            @click="modalNote = false"
+            style="color: #ff8080; background-color: #ffdede"
+          />
+        </q-toolbar>
+      </q-card-section>
+      <q-card-section class="q-pt-none">
+        <q-input
+          outlined
+          dense
+          lazy-rules
+          v-model="note"
+          :rules="[(val) => !!val || 'กรุณากรอกเหตุผล']"
+          :label="`${'กรอกเหตุผล'}`"
+          type="textarea"
+        />
+      </q-card-section>
+
+      <q-card-actions align="right">
+        <q-btn  label="บักทึก" color="secondary" @click="saveNote" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
 </template>
 
 <style lang="scss" scope>
@@ -339,4 +438,7 @@ const backHistory = () => {
     top: 0;
   }
 }
+.q-btn-dropdown__arrow {
+  display: none;
+}
 </style>
diff --git a/src/modules/06_retirement/router.ts b/src/modules/06_retirement/router.ts
index 150811ec8..0a6b44cf8 100644
--- a/src/modules/06_retirement/router.ts
+++ b/src/modules/06_retirement/router.ts
@@ -4,7 +4,8 @@
 
 const Main = () => import("@/modules/06_retirement/views/Main.vue");
 const Listretirement = () => import("@/modules/06_retirement/components/ListRetirement/TableList.vue")
-
+const DismissOrder = () => import("@/modules/06_retirement/components/DismissOrder/DismissOrder.vue")
+const AddOrder = () => import("@/modules/06_retirement/components/DismissOrder/AddOrder.vue")
 
 export default [
   {
@@ -27,4 +28,34 @@ export default [
       Role: "retirement",
     },
   },
+  {
+    path: "/retirement/list/:id",
+    name: "retirement/list/id",
+    component: Listretirement,
+    meta: {
+      Auth: true,
+      Key: [7.1],
+      Role: "retirement",
+    },
+  },
+  {
+    path: "/retirement/dismiss-order",
+    name: "dismiss-order",
+    component: DismissOrder,
+    meta: {
+      Auth: true,
+      Key: [7.6],
+      Role: "retirement",
+    },
+  },
+  {
+    path: "/retirement/dismiss-order/add",
+    name: "dismiss-order-add",
+    component: AddOrder,
+    meta: {
+      Auth: true,
+      Key: [7.6],
+      Role: "retirement",
+    },
+  },
 ];
diff --git a/src/modules/06_retirement/views/Main.vue b/src/modules/06_retirement/views/Main.vue
index 036b5a08c..dbe9044a2 100644
--- a/src/modules/06_retirement/views/Main.vue
+++ b/src/modules/06_retirement/views/Main.vue
@@ -126,7 +126,11 @@
               </q-tr>
             </template>
             <template v-slot:body="props">
-              <q-tr :props="props" class="cursor-pointer" @click="nextPage">
+              <q-tr
+                :props="props"
+                class="cursor-pointer"
+                @click="nextPage(props.row)"
+              >
                 <q-td key="no" :props="props">
                   {{ props.rowIndex + 1 }}
                 </q-td>
@@ -136,7 +140,7 @@
                 <q-td key="retireNumber" :props="props">
                   {{ props.row.retireNumber }}
                 </q-td>
-                <q-td auto-width>
+                <!-- <q-td auto-width>
                   <q-btn
                     dense
                     size="12px"
@@ -148,7 +152,7 @@
                   >
                     <q-tooltip>ลบข้อมูล</q-tooltip>
                   </q-btn>
-                </q-td>
+                </q-td> -->
               </q-tr>
             </template>
             <template v-slot:pagination="scope">
@@ -231,17 +235,17 @@ const rows = ref<any>([
     retireNumber: "5",
   },
   {
-    no: "1",
+    no: "2",
     Date: "2022-9-15 ",
     retireNumber: "7",
   },
   {
-    no: "1",
+    no: "3",
     Date: "2022-8-31 ",
     retireNumber: "15",
   },
   {
-    no: "1",
+    no: "4",
     Date: "2022-9-25 ",
     retireNumber: "20",
   },
@@ -369,8 +373,8 @@ 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");
+const nextPage = (val: any) => {
+  router.push(`/retirement/list/${val.no}`);
 };
 </script>