diff --git a/src/modules/02_organizationalNew/components/DialogSelectPerson.vue b/src/modules/02_organizationalNew/components/DialogSelectPerson.vue
index fa756a867..f9e040401 100644
--- a/src/modules/02_organizationalNew/components/DialogSelectPerson.vue
+++ b/src/modules/02_organizationalNew/components/DialogSelectPerson.vue
@@ -189,6 +189,15 @@ const columnsResult = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
+  {
+    name: "positionName",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    sortable: true,
+    field: "positionName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
   {
     name: "posLevelName",
     align: "left",
@@ -364,6 +373,7 @@ function searchData() {
       citizenId: "test1",
       name: "test1",
       posTypeName: "test1",
+      positionName: "test1",
       posLevelName: "test1",
     },
     {
@@ -371,6 +381,7 @@ function searchData() {
       citizenId: "test2",
       name: "test2",
       posTypeName: "test2",
+      positionName: "test2",
       posLevelName: "test2",
     },
   ];
diff --git a/src/modules/04_registry/components/DialogFooter.vue b/src/modules/04_registry/components/DialogFooter.vue
index c7b6623b4..9bd3f9279 100644
--- a/src/modules/04_registry/components/DialogFooter.vue
+++ b/src/modules/04_registry/components/DialogFooter.vue
@@ -19,6 +19,17 @@
       :color="!next ? 'grey-7' : 'public'"
     />
     <q-space />
+    <q-btn
+      v-if="modalEdit == true"
+      flat
+      round
+      color="blue"
+      @click="props.coppy"
+      icon="content_copy"
+    >
+      <q-tooltip>คัดลอกข้อมูล</q-tooltip></q-btn
+    >
+
     <q-btn
       v-if="modalEdit == true"
       flat
@@ -100,6 +111,10 @@ const props = defineProps({
     type: Function,
     default: () => console.log("not function"),
   },
+  coppy: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
 });
 const emit = defineEmits([
   "update:editvisible",
diff --git a/src/modules/04_registry/components/DialogFormLeave.vue b/src/modules/04_registry/components/DialogFormLeave.vue
new file mode 100644
index 000000000..aa8637018
--- /dev/null
+++ b/src/modules/04_registry/components/DialogFormLeave.vue
@@ -0,0 +1,263 @@
+<script setup lang="ts">
+import { ref, reactive, watch } from "vue";
+import DialogHeader from "@/components/DialogHeader.vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+
+interface DetailData {
+  id: string;
+  sick: string;
+  absence: string;
+  late: string;
+  government: string;
+  study: string;
+  year: number;
+}
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { dialogConfirm, messageError, showLoader, hideLoader } = mixin;
+const myForm = ref<any>(); //form data input
+const checkValidate = ref<boolean>(false);
+const modal = defineModel<boolean>("modal", { required: true });
+const edit = defineModel<boolean>("edit", { required: true });
+const data = defineModel<Array<any>>("data", { required: true });
+
+const clear = ref<boolean>(false);
+const editForm = ref<boolean>(false);
+const editForms = ref<boolean>(false);
+const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
+
+const formData = reactive<DetailData>({
+  id: "",
+  sick: "",
+  absence: "",
+  late: "",
+  government: "",
+  study: "",
+  year: new Date().getFullYear(),
+});
+
+function close() {
+  modal.value = false;
+}
+
+/**
+ * ส่งค่า css ออกไปตามเงื่อนไข
+ * @param val true/false
+ */
+function inputEdit(val: boolean) {
+  return {
+    "full-width cursor-pointer inputgreen ": val,
+    "full-width cursor-pointer inputgreen": !val,
+  };
+}
+
+const validateData = async () => {
+  checkValidate.value = true;
+  await myForm.value.validate().then((result: boolean) => {
+    if (result == false) {
+      checkValidate.value = false;
+    } else saveForm();
+  });
+};
+
+function saveForm() {
+  dialogConfirm($q, () => {
+    console.log(formData);
+    modal.value = false;
+  });
+}
+function clearForm() {
+  formData.sick = "";
+  formData.absence = "";
+  formData.late = "";
+  formData.government = "";
+  formData.study = "";
+  editForm.value = false;
+  editForms.value = false;
+  clear.value = false;
+}
+
+function clickDelete() {}
+watch(
+  () => modal.value,
+  () => {
+    if (modal.value == true) {
+      clearForm();
+      if (edit.value == false) {
+        clear.value = true
+        const dataList: any = data.value;
+        formData.id = dataList.id;
+        formData.sick = dataList.sick == "-" ? "" : dataList.sick;
+        formData.absence = dataList.absence == "-" ? "" : dataList.absence;
+        formData.late = dataList.late == "-" ? "" : dataList.late;
+        formData.government =
+          dataList.government == "-" ? "" : dataList.government;
+        formData.study = dataList.study == "-" ? "" : dataList.study;
+        formData.year =
+          dataList.year == "-" ? new Date().getFullYear() : dataList.year;
+        editForm.value = true;
+        console.log(dataList);
+      }
+    }
+  }
+);
+</script>
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="min-width: 30vw">
+      <q-form ref="myForm">
+        <DialogHeader :tittle="`การลา`" :close="close" />
+        <q-separator />
+
+        <q-card-section>
+          <div class="row q-col-gutter-sm">
+            <div class="col-6">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formData.year"
+                class="col-2"
+                :locale="'th'"
+                autoApply
+                year-picker
+                :enableTimePicker="false"
+                :readonly="!edit && !editForms"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    lazy-rules
+                    hide-bottom-space
+                    :rules="[(val:string) => !!val || `${'กรุณาเลือกปี'}`]"
+                    :class="inputEdit(isReadonly)"
+                    :outlined="edit || editForms"
+                    :borderless="!edit"
+                    :readonly="!edit && !editForms"
+                    :model-value="
+                      formData.year === 0 ? null : Number(formData.year) + 543
+                    "
+                    :label="`${'ปี'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                    <template v-if="formData.year && clear == false " v-slot:append>
+                      <q-icon
+                        name="cancel"
+                        @click.stop.prevent="formData.year = 0"
+                        class="cursor-pointer"
+                      />
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-6">
+              <q-input
+                :class="inputEdit(isReadonly)"
+                v-model="formData.sick"
+                label="ลาป่วย"
+                dense
+                :outlined="edit || editForms"
+                :borderless="!edit"
+                :readonly="!edit && !editForms"
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                :class="inputEdit(isReadonly)"
+                v-model="formData.absence"
+                label="ลากิจและพักผ่อน"
+                dense
+                :outlined="edit || editForms"
+                :borderless="!edit"
+                :readonly="!edit && !editForms"
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                :class="inputEdit(isReadonly)"
+                v-model="formData.late"
+                label="มาสาย"
+                dense
+                :outlined="edit || editForms"
+                :borderless="!edit"
+                :readonly="!edit && !editForms"
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                :class="inputEdit(isReadonly)"
+                v-model="formData.government"
+                label="ขาดราชการ"
+                dense
+                :outlined="edit || editForms"
+                :borderless="!edit"
+                :readonly="!edit && !editForms"
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                :class="inputEdit(isReadonly)"
+                v-model="formData.study"
+                label="ลาศึกษาต่อ"
+                dense
+                :outlined="edit || editForms"
+                :borderless="!edit"
+                :readonly="!edit && !editForms"
+              />
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions class="bg-white text-teal">
+          <q-space />
+          <q-btn
+            v-if="editForm == true"
+            flat
+            round
+            color="red"
+            @click="clickDelete()"
+            icon="mdi-delete"
+          >
+            <q-tooltip>ลบข้อมูล</q-tooltip>
+          </q-btn>
+          <q-btn
+            v-if="editForms == true"
+            icon="mdi-undo"
+            color="red"
+            flat
+            round
+            @click="() => {editForms = false; clear = true;}"
+            ><q-tooltip>ยกเลิก</q-tooltip></q-btn
+          >
+          <q-btn
+            v-if="editForm == true && editForms == false"
+            @click="() => {editForms = true ; clear = false;}"
+            flat
+            round
+            icon="mdi-pencil-outline"
+            color="primary"
+            ><q-tooltip>แก้ไขข้อมูล</q-tooltip></q-btn
+          >
+
+          <q-btn
+            v-if="edit || editForms"
+            :label="`บันทึก`"
+            color="public"
+            @click="validateData()"
+          />
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
diff --git a/src/modules/04_registry/components/Leave.vue b/src/modules/04_registry/components/Leave.vue
index 16400f334..04e1641b9 100644
--- a/src/modules/04_registry/components/Leave.vue
+++ b/src/modules/04_registry/components/Leave.vue
@@ -82,7 +82,7 @@
         <DialogHeader tittle="การลา" :close="clickCloseLeave" />
         <q-separator />
         <q-card-section class="q-p-sm">
-          <div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
+          <!-- <div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
             <div class="col-xs-6 col-sm-6 col-md-6">
               <selector
                 :class="getClass(edit)"
@@ -168,23 +168,6 @@
                 @update:modelValue="clickEditRow"
               />
             </div>
-            <!-- <div class="col-xs-3 col-sm-3 col-md-3">
-              <q-input
-                :class="getClass(false)"
-                :outlined="true"
-                dense
-                lazy-rules
-                :readonly="false"
-                :borderless="false"
-                disable
-                v-model="numUsedLeave"
-                type="number"
-                :rules="[(val:string) => !!val || `${'กรุณากรอกจำนวนวันที่ลามาแล้ว'}`]"
-                hide-bottom-space
-                :label="`${'จำนวนวันที่ลามาแล้ว'}`"
-                @update:modelValue="clickEditRow"
-              />
-            </div> -->
             <div class="col-xs-6 col-sm-6 col-md-6">
               <selector
                 :class="getClass(edit)"
@@ -226,6 +209,112 @@
                 @update:modelValue="clickEditRow"
               />
             </div>
+          </div> -->
+          <div class="row q-col-gutter-sm">
+            <div class="col-6">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formData.year"
+                class="col-2"
+                :locale="'th'"
+                autoApply
+                year-picker
+                :enableTimePicker="false"
+                :readonly="!edit"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    lazy-rules
+                    hide-bottom-space
+                    :rules="[(val:string) => !!val || `${'กรุณาเลือกปี'}`]"
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    :readonly="!edit"
+                    :borderless="!edit"
+                    :model-value="
+                      formData.year === 0 ? null : Number(formData.year) + 543
+                    "
+                    :label="`${'ปี'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                    <template v-if="formData.year && edit" v-slot:append>
+                      <q-icon
+                        name="cancel"
+                        @click.stop.prevent="formData.year = 0"
+                        class="cursor-pointer"
+                      />
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-6">
+              <q-input
+                :class="getClass(edit)"
+                v-model="formData.sick"
+                label="ลาป่วย"
+                dense
+                :outlined="edit"
+                :readonly="!edit"
+                :borderless="!edit"
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                :class="getClass(edit)"
+                v-model="formData.absence"
+                label="ลากิจและพักผ่อน"
+                dense
+                :outlined="edit"
+                :readonly="!edit"
+                :borderless="!edit"
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                :class="getClass(edit)"
+                v-model="formData.late"
+                label="มาสาย"
+                dense
+                :outlined="edit"
+                :readonly="!edit"
+                :borderless="!edit"
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                :class="getClass(edit)"
+                v-model="formData.government"
+                label="ขาดราชการ"
+                dense
+                :outlined="edit"
+                :readonly="!edit"
+                :borderless="!edit"
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                :class="getClass(edit)"
+                v-model="formData.study"
+                label="ลาศึกษาต่อ"
+                dense
+                :outlined="edit"
+                :readonly="!edit"
+                :borderless="!edit"
+              />
+            </div>
           </div>
         </q-card-section>
         <q-separator />
@@ -341,9 +430,18 @@
       </q-tr>
     </template>
   </HistoryTable>
+
+  <!-- <DialogFormLeave 
+  v-model:modal="modalAdd" 
+  v-model:edit="edit" 
+  v-model:data="formData" 
+  
+  /> -->
 </template>
 <script setup lang="ts">
-import { onMounted, ref, watch } from "vue";
+import DialogFormLeave from "@/modules/04_registry/components/DialogFormLeave.vue";
+
+import { onMounted, ref, watch, reactive } from "vue";
 import { useRoute } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useProfileDataStore } from "@/modules/04_registry/store";
@@ -356,6 +454,7 @@ import type {
   RequestItemsObject,
   RequestItemsTotalObject,
   DataProps,
+  DetailData,
 } from "@/modules/04_registry/interface/request/Leave";
 import type {
   ResponseObject,
@@ -381,6 +480,16 @@ const $q = useQuasar();
 const store = useProfileDataStore();
 const { profileData, changeProfileColumns } = store;
 
+const formData = reactive<DetailData>({
+  id: "",
+  sick: "",
+  absence: "",
+  late: "",
+  government: "",
+  study: "",
+  year: new Date().getFullYear(),
+});
+
 const mixin = useCounterMixin();
 const {
   date2Thai,
@@ -431,6 +540,7 @@ const id = ref<string>("");
 const myFormAdd = ref<any>(); //form data input
 const myForm = ref<any>(); //form data input
 const edit = ref<boolean>(true); //เช็คการกดปุ่มแก้ไขใน dialog
+const editForm = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
 const modal = ref<boolean>(false); //modal add detail
 const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
 
@@ -448,23 +558,130 @@ const checkValidate = ref<boolean>(false); //validate data ผ่านหรื
 const profileId = ref<string>(
   route.params.id ? route.params.id.toString() : ""
 );
-const rows = ref<RequestItemsObject[]>([]);
+const rows = ref<DetailData[]>([]);
 const filterTotal = ref<string>("");
 const rowsTotal = ref<RequestItemsTotalObject[]>([]); //select data history
 const filter = ref<string>(""); //search data table
-const visibleColumns = ref<String[]>([]);
-profileData.leave.columns.length == 0
-  ? (visibleColumns.value = [
-      "no",
-      "typeLeave",
-      "dateStartLeave",
-      "numLeave",
-      "sumLeave",
-      "totalLeave",
-      "status",
-      "reason",
-    ])
-  : (visibleColumns.value = profileData.leave.columns);
+
+/**old */
+// const visibleColumns = ref<String[]>([]);
+// profileData.leave.columns.length == 0
+//   ? (visibleColumns.value = [
+//       "no",
+//       "typeLeave",
+//       "dateStartLeave",
+//       "numLeave",
+//       "sumLeave",
+//       "totalLeave",
+//       "status",
+//       "reason",
+//     ])
+//   : (visibleColumns.value = profileData.leave.columns);
+
+/** NEW */
+const visibleColumns = ref<String[]>([
+  "no",
+  "year",
+  "sick",
+  "absence",
+  "late",
+  "government",
+  "study",
+]);
+
+/** old */
+// const columns = ref<QTableProps["columns"]>([
+//   {
+//     name: "no",
+//     align: "left",
+//     label: "ลำดับ",
+//     sortable: false,
+//     field: "no",
+//     headerStyle: "font-size: 14px",
+//     style: "font-size: 14px",
+//     sort: (a: string, b: string) =>
+//       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+//   },
+//   {
+//     name: "typeLeave",
+//     align: "left",
+//     label: "ประเภทการลา",
+//     sortable: true,
+//     field: "typeLeave",
+//     headerStyle: "font-size: 14px",
+//     style: "font-size: 14px",
+//     sort: (a: string, b: string) =>
+//       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+//   },
+//   {
+//     name: "dateStartLeave",
+//     align: "left",
+//     label: "วัน เดือน ปี ที่ลา",
+//     sortable: true,
+//     field: "dateStartLeave",
+//     headerStyle: "font-size: 14px",
+//     style: "font-size: 14px",
+//     sort: (a: string, b: string) =>
+//       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+//   },
+//   {
+//     name: "numLeave",
+//     align: "right",
+//     label: "จำนวนวันลา",
+//     sortable: true,
+//     field: "numLeave",
+//     headerStyle: "font-size: 14px",
+//     style: "font-size: 14px",
+//     sort: (a: string, b: string) =>
+//       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+//   },
+//   {
+//     name: "sumLeave",
+//     align: "right",
+//     label: "ลามาแล้ว",
+//     sortable: true,
+//     field: "sumLeave",
+//     headerStyle: "font-size: 14px",
+//     style: "font-size: 14px",
+//     sort: (a: string, b: string) =>
+//       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+//   },
+//   {
+//     name: "totalLeave",
+//     align: "right",
+//     label: "รวมเป็น",
+//     sortable: true,
+//     field: "totalLeave",
+//     headerStyle: "font-size: 14px",
+//     style: "font-size: 14px",
+//     sort: (a: string, b: string) =>
+//       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+//   },
+//   {
+//     name: "status",
+//     align: "left",
+//     label: "สถานะ",
+//     sortable: true,
+//     field: "status",
+//     headerStyle: "font-size: 14px",
+//     style: "font-size: 14px",
+//     sort: (a: string, b: string) =>
+//       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+//   },
+//   {
+//     name: "reason",
+//     align: "right",
+//     label: "เหตุผล",
+//     sortable: true,
+//     field: "reason",
+//     headerStyle: "font-size: 14px",
+//     style: "font-size: 14px",
+//     sort: (a: string, b: string) =>
+//       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+//   },
+// ]);
+
+/** NEW */
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -478,83 +695,73 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "typeLeave",
+    name: "year",
     align: "left",
-    label: "ประเภทการลา",
+    label: "ปี",
     sortable: true,
-    field: "typeLeave",
+    field: "year",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "dateStartLeave",
+    name: "sick",
     align: "left",
-    label: "วัน เดือน ปี ที่ลา",
+    label: "ลาป่วย",
     sortable: true,
-    field: "dateStartLeave",
+    field: "sick",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "numLeave",
-    align: "right",
-    label: "จำนวนวันลา",
-    sortable: true,
-    field: "numLeave",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "sumLeave",
-    align: "right",
-    label: "ลามาแล้ว",
-    sortable: true,
-    field: "sumLeave",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "totalLeave",
-    align: "right",
-    label: "รวมเป็น",
-    sortable: true,
-    field: "totalLeave",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "status",
+    name: "absence",
     align: "left",
-    label: "สถานะ",
+    label: "ลากิจและพักผ่อน",
     sortable: true,
-    field: "status",
+    field: "absence",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "reason",
-    align: "right",
-    label: "เหตุผล",
+    name: "late",
+    align: "left",
+    label: "มาสาย",
     sortable: true,
-    field: "reason",
+    field: "late",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "government",
+    align: "left",
+    label: "ขาดราชการ",
+    sortable: true,
+    field: "government",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "study",
+    align: "left",
+    label: "ลาศึกษาต่อ",
+    sortable: true,
+    field: "study",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
+
 const columnsHistory = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -723,27 +930,44 @@ const fetchData = async () => {
     await http
       .get(config.API.profileLeaveId(profileId.value))
       .then((res) => {
-        const data = res.data.result;
-        data.map((e: ResponseObject) => {
-          rows.value.push({
-            id: e.id,
-            typeLeave: e.typeLeave,
-            dateStartLeave: new Date(e.dateStartLeave),
-            dateEndLeave: new Date(e.dateEndLeave),
-            numLeave: e.numLeave,
-            sumLeave: e.sumLeave,
-            totalLeave: e.totalLeave,
-            status: e.status,
-            reason: e.reason,
-            typeLeaveId:
-              e.typeLeaveId !== "00000000-0000-0000-0000-000000000000"
-                ? e.typeLeaveId
-                : "",
-          });
-        });
+        const data = [
+          {
+            id: "11",
+            sick: "11",
+            absence: "11",
+            late: "11",
+            government: "11",
+            study: "11",
+            year: new Date().getFullYear(),
+          },
+          {
+            id: "22",
+            sick: "22",
+            absence: "22",
+            late: "22",
+            government: "22",
+            study: "22",
+            year: new Date().getFullYear(),
+          },
+        ];
+
+        rows.value = data
+        // const data = res.data.result;
+        // data.map((e: DetailData) => {
+        //   rows.value.push({
+        //     id: e.id,
+        //     sick: e.sick ? e.sick : "-",
+        //     absence: e.absence ? e.absence : "-",
+        //     late: e.late ? e.late : "-",
+        //     government: e.government ? e.government : "-",
+        //     study: e.study ? e.study : "-",
+        //     year: e.year ? e.year : "-",
+
+        // });
+        // });
       })
       .catch((e) => {
-        messageError($q, e);
+        // messageError($q, e);
       })
       .finally(() => {
         store.isLoad++;
@@ -786,18 +1010,12 @@ const clickHistory = async (row: RequestItemsObject) => {
       data.map((e: ResponseObject) => {
         rowsHistory.value.push({
           id: e.id,
-          typeLeave: e.typeLeave,
-          dateStartLeave: new Date(e.dateStartLeave),
-          dateEndLeave: new Date(e.dateEndLeave),
-          numLeave: e.numLeave,
-          sumLeave: e.sumLeave,
-          totalLeave: e.totalLeave,
-          status: e.status,
-          reason: e.reason,
-          typeLeaveId:
-            e.typeLeaveId !== "00000000-0000-0000-0000-000000000000"
-              ? e.typeLeaveId
-              : "",
+          sick: e.sick ? e.sick : "-",
+          absence: e.absence ? e.absence : "-",
+          late: e.late ? e.late : "-",
+          government: e.government ? e.government : "-",
+          study: e.study ? e.study : "-",
+          year: e.year ? e.year : "-",
         });
       });
     })
@@ -862,13 +1080,21 @@ const getData = () => {
   //   agencyDay.value = row.agencyDay;
   //   coupleDay.value = row.coupleDay;
   //   therapyDay.value = row.therapyDay;
-  id.value = row.id;
-  typeLeave.value = row.typeLeaveId;
-  statLeave.value = row.status;
-  reason.value = row.reason;
-  dateRange.value = [new Date(row.dateStartLeave), new Date(row.dateEndLeave)];
-  numLeave.value = row.numLeave;
-  numUsedLeave.value = row.sumLeave;
+  formData.id = row.id;
+  formData.sick = row.sick;
+  formData.absence = row.absence;
+  formData.late = row.late;
+  formData.government = row.government;
+  formData.study = row.study;
+  formData.year = row.year == "-" ? 0 : row.year;
+
+  // id.value = row.id;
+  // typeLeave.value = row.typeLeaveId;
+  // statLeave.value = row.status;
+  // reason.value = row.reason;
+  // dateRange.value = [new Date(row.dateStartLeave), new Date(row.dateEndLeave)];
+  // numLeave.value = row.numLeave;
+  // numUsedLeave.value = row.sumLeave;
 };
 
 // /**
@@ -904,6 +1130,7 @@ const clickAdd = async () => {
 };
 
 const clickAddLeave = async () => {
+  clearForm();
   editRow.value = false;
   edit.value = true;
   modalAdd.value = true;
@@ -1123,18 +1350,26 @@ const selectData = async (props: DataProps) => {
   //   modal.value = true;
   modalAdd.value = true;
   edit.value = false;
-  rowIndex.value = props.rowIndex;
-  id.value = props.row.id;
 
-  typeLeave.value = props.row.typeLeaveId;
-  statLeave.value = props.row.status;
-  reason.value = props.row.reason;
-  dateRange.value = [
-    new Date(props.row.dateStartLeave),
-    new Date(props.row.dateEndLeave),
-  ];
-  numLeave.value = props.row.numLeave;
-  numUsedLeave.value = props.row.sumLeave;
+  rowIndex.value = props.rowIndex;
+  formData.id = props.row.id;
+  formData.sick = props.row.sick;
+  formData.absence = props.row.absence;
+  formData.late = props.row.late;
+  formData.government = props.row.government;
+  formData.study = props.row.study;
+  formData.year = props.row.year == "-" ? 0 : props.row.year;
+
+  // id.value = props.row.id;
+  // typeLeave.value = props.row.typeLeaveId;
+  // statLeave.value = props.row.status;
+  // reason.value = props.row.reason;
+  // dateRange.value = [
+  //   new Date(props.row.dateStartLeave),
+  //   new Date(props.row.dateEndLeave),
+  // ];
+  // numLeave.value = props.row.numLeave;
+  // numUsedLeave.value = props.row.sumLeave;
   await clickTotal();
   //   if (rowsTotal.value.length > 0) {
   //     let data: DataOptionLeave[] = [];
@@ -1156,6 +1391,7 @@ const selectData = async (props: DataProps) => {
  */
 const addData = async () => {
   //   modalEdit.value = false;
+
   modal.value = true;
   //   edit.value = true;
   await clickTotal();
@@ -1269,6 +1505,35 @@ const getClass = (val: boolean) => {
     "full-width cursor-pointer": !val,
   };
 };
+
+// function selectData(data:any){
+//   console.log(data)
+//   modalAdd.value = true
+//   edit.value = false
+//   editForm.value = true
+//   formData.id = data.row.id
+//   formData.sick = data.row.sick
+//   formData.absence = data.row.absence
+//   formData.late = data.row.late
+//   formData.government = data.row.government
+//   formData.study = data.row.study
+//   formData.year = data.row.year
+// }
+
+function clearForm() {
+  formData.id = "";
+  formData.sick = "";
+  formData.absence = "";
+  formData.late = "";
+  formData.government = "";
+  formData.study = "";
+  formData.year = 0;
+}
+// watch(()=>modalAdd.value,()=>{
+//   clearForm()
+//   if(modalAdd.value == true){
+//   }
+// })
 </script>
 <style lang="scss">
 .modalfix {
diff --git a/src/modules/04_registry/components/Profile.vue b/src/modules/04_registry/components/Profile.vue
index 7a84d8363..40503964b 100644
--- a/src/modules/04_registry/components/Profile.vue
+++ b/src/modules/04_registry/components/Profile.vue
@@ -796,13 +796,13 @@ import TrainVue from "@/modules/04_registry/components/Train.vue";
 import InsigniaVue from "@/modules/04_registry/components/Insignia.vue";
 import CoinedVue from "@/modules/04_registry/components/Coin.vue";
 import AssessmentVue from "@/modules/04_registry/components/Assessment.vue";
-// import SalaryVue from "@/modules/04_registry/components/Salary.vue";
-// import SalaryEmployeeVue from "@/modules/04_registry/components/SalaryEmployee.vue";
-// import SalaryEmployeeTempVue from "@/modules/04_registry/components/SalaryEmployeeTemp.vue";
+import SalaryVue from "@/modules/04_registry/components/Salary.vue";
+import SalaryEmployeeVue from "@/modules/04_registry/components/SalaryEmployee.vue";
+import SalaryEmployeeTempVue from "@/modules/04_registry/components/SalaryEmployeeTemp.vue";
 
-import SalaryVue from "@/modules/04_registry/components/salaryNew/Salary.vue";
-import SalaryEmployeeVue from "@/modules/04_registry/components/salaryNew/SalaryEmployee.vue";
-import SalaryEmployeeTempVue from "@/modules/04_registry/components/salaryNew/SalaryEmployeeTemp.vue";
+// import SalaryVue from "@/modules/04_registry/components/salaryNew/Salary.vue";
+// import SalaryEmployeeVue from "@/modules/04_registry/components/salaryNew/SalaryEmployee.vue";
+// import SalaryEmployeeTempVue from "@/modules/04_registry/components/salaryNew/SalaryEmployeeTemp.vue";
 
 import DisciplineVue from "@/modules/04_registry/components/Discipline.vue";
 import LeaveVue from "@/modules/04_registry/components/Leave.vue";
@@ -969,7 +969,7 @@ onMounted(async () => {
       "registryverify"
     );
   }
-  console.log(roleKeyregistry.value, roleRegistryverify.value);
+
   await changeTab("information");
   await fetchData();
   await checIsVerified();
diff --git a/src/modules/04_registry/components/Salary.vue b/src/modules/04_registry/components/Salary.vue
index 264cac96a..46dd9062d 100644
--- a/src/modules/04_registry/components/Salary.vue
+++ b/src/modules/04_registry/components/Salary.vue
@@ -16,6 +16,34 @@
       >
         <template #columns="props">
           <q-tr :props="props">
+            <q-td auto-width>
+              <q-btn
+                dense
+                size="12px"
+                flat
+                round
+                :color="props.rowIndex + 1 == 1 ? 'grey' : 'green'"
+                :disable="props.rowIndex + 1 == 1"
+                @click="onClicksortPos(props)"
+                icon="mdi-arrow-up-bold"
+              >
+                <!-- <q-tooltip>เลื่อนลำดับขึ้น</q-tooltip> -->
+              </q-btn>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                dense
+                size="12px"
+                flat
+                round
+                :color="rows.length == props.rowIndex + 1 ? 'grey' : 'red'"
+                :disable="rows.length == props.rowIndex + 1"
+                @click="onClicksortPos(props, false)"
+                icon="mdi-arrow-down-bold"
+              >
+                <!-- <q-tooltip>เลื่อนลำดับลง</q-tooltip> -->
+              </q-btn>
+            </q-td>
             <q-td
               v-for="col in props.cols"
               :key="col.name"
@@ -83,103 +111,15 @@
         <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
-                    v-if="edit"
-                    :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-tree
-                    v-else
-                    :nodes="nodesTree"
-                    dense
-                    node-key="id"
-                    v-model:expanded="expanded"
-                    no-selection-unset
-                    selected-color="primary"
-                    @update:selected="onSelected"
-                    default-expand-all
-                  >
-                    <template v-slot:default-header="prop">
-                      <div class="row items-center">
-                        <div
-                          class="text-primary"
-                          v-if="selected == prop.node.id"
-                        >
-                          {{ prop.node.label }}
-                        </div>
-                        <div v-else>
-                          {{ prop.node.label }}
-                        </div>
-                      </div>
-                    </template>
-                  </q-tree>
-                </q-scroll-area>
-              </q-card>
-            </div> -->
             <div class="col-xs-12 col-sm-12">
               <q-card flat bordered class="fit q-pa-sm">
                 <q-scroll-area visible style="height: 70vh">
                   <div class="row col-12 q-col-gutter-xs">
-                    <div class="col-xs-12 col-sm-12 col-md-12"></div>
-                    <div class="col-xs-6 col-sm-6 col-md-6">
-                      <q-input
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="orgName"
-                        hide-bottom-space
-                        :label="`${'หน่วยงาน'}`"
-                        :rules="[(val: string) => !!val || `${'กรุณากรอกหน่วยงาน'}`]"
-                        @update:modelValue="clickEditRow"
-                      >
-                      </q-input>
-                    </div>
-                    <div class="col-xs-6 col-sm-6 col-md-6">
-                      <q-input
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="agencyName"
-                        hide-bottom-space
-                        :label="`${'ส่วนราชการ'}`"
-                        :rules="[(val: string) => !!val || `${'กรุณากรอกส่วนราชการ'}`]"
-                        @update:modelValue="clickEditRow"
-                      >
-                      </q-input>
-                    </div>
-
                     <div class="col-xs-6 col-sm-6 col-md-6">
                       <datepicker
                         menu-class-name="modalfix"
                         :readonly="!edit"
-                        v-model="date"
+                        v-model="formDataSalary.date"
                         :locale="'th'"
                         autoApply
                         :enableTimePicker="false"
@@ -192,12 +132,13 @@
                         }}</template>
                         <template #trigger>
                           <q-input
+                            ref="dateRef"
                             :class="getClass(edit)"
                             :outlined="edit"
                             dense
                             lazy-rules
                             :borderless="!edit"
-                            :model-value="date2Thai(date)"
+                            :model-value="date2Thai(formDataSalary.date)"
                             :rules="[
                               (val: string) =>
                                 !!val ||
@@ -222,280 +163,124 @@
                         </template>
                       </datepicker>
                     </div>
+
                     <div class="col-xs-6 col-sm-6 col-md-6">
-                      <!-- <selector
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="posNoId"
-                        :rules="[
-                          (val: string) => !!val || `${'กรุณาเลือกตำแหน่งเลขที่'}`,
-                        ]"
-                        :label="`${'ตำแหน่งเลขที่'}`"
-                        @update:modelValue="clickEditRow"
-                        emit-value
-                        map-options
-                        option-label="name"
-                        :options="posNoOptions"
-                        option-value="id"
-                        hide-bottom-space
-                        use-input
-                        input-debounce="0"
-                        @filter="(inputValue: any,
-                          doneFn: Function) => filterSelector(inputValue, doneFn, '1'
-                          )"
-                      /> -->
                       <q-input
+                        ref="posNoRef"
                         :class="getClass(edit)"
                         :outlined="edit"
                         dense
                         lazy-rules
                         :readonly="!edit"
                         :borderless="!edit"
-                        v-model="posNo"
+                        v-model="formDataSalary.posNo"
                         hide-bottom-space
-                        :label="`${'เลขที่คำสั่ง'}`"
-                        :rules="[(val: string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]"
+                        :label="`${'เลขที่ตำแหน่ง'}`"
+                        :rules="[(val: string) => !!val || `${'กรุณากรอกเลขที่ตำแหน่ง'}`]"
                         @update:modelValue="clickEditRow"
                       >
                       </q-input>
                     </div>
-                    <div class="col-xs-6 col-sm-6 col-md-6">
-                      <selector
+
+                    <div class="row col-xs-12 col-sm-12 col-md-12">
+                      <q-select
+                        ref="templatePosRef"
                         :class="getClass(edit)"
                         :outlined="edit"
                         dense
                         lazy-rules
                         :readonly="!edit"
                         :borderless="!edit"
-                        v-model="positionName"
-                        :rules="[(val: string) => !!val || `${'กรุณาเลือกตำแหน่ง'}`]"
+                        v-model="formDataSalary.templatePos"
+                        :label="`${'ต้นแบบ (template) ตำแหน่ง'}`"
+                        @update:modelValue="updatePos"
+                        option-label="name"
+                        :options="opPos"
+                        option-value="name"
+                        hide-bottom-space
+                        emit-value
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue: any,
+                          doneFn: Function) => filterSelector(inputValue, doneFn, 'pos'
+                          )"
+                      />
+                    </div>
+
+                    <div class="col-xs-12 col-sm-12 col-md-12">
+                      <q-input
+                        ref="positionRef"
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="formDataSalary.position"
                         :label="`${'ตำแหน่ง'}`"
                         @update:modelValue="clickEditRow"
-                        emit-value
-                        map-options
-                        option-label="name"
-                        :options="positionOptions"
-                        option-value="id"
+                        type="textarea"
                         hide-bottom-space
-                        use-input
-                        input-debounce="0"
-                        @filter="(inputValue: any,
-                          doneFn: Function) => filterSelector(inputValue, doneFn, '2'
-                          )"
+                        :rules="[(val: string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
                       />
                     </div>
+
                     <div class="col-xs-6 col-sm-6 col-md-6">
-                      <!-- :rules="[(val:string) => !!val || `${'กรุณาเลือกด้าน/สาขา'}`]" -->
-                      <selector
+                      <q-select
+                        ref="typePositionRef"
                         :class="getClass(edit)"
                         :outlined="edit"
                         dense
                         lazy-rules
                         :readonly="!edit"
                         :borderless="!edit"
-                        v-model="positionLineName"
-                        :rules="[(val: string) => !!val || `${'กรุณาเลือกสายงาน'}`]"
-                        :label="`${'สายงาน'}`"
-                        @update:modelValue="clickEditRow"
-                        emit-value
-                        map-options
-                        option-label="name"
-                        :options="positionLineOptions"
-                        option-value="id"
-                        hide-bottom-space
-                        use-input
-                        input-debounce="0"
-                        @filter="(inputValue: any,
-                          doneFn: Function) => filterSelector(inputValue, doneFn, '5'
-                          )"
-                      />
-                    </div>
-                    <div class="col-xs-4 col-sm-4 col-md-4">
-                      <selector
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="positionTypeId"
-                        :rules="[
-                          (val: string) => !!val || `${'กรุณาเลือกตำแหน่งประเภท'}`,
-                        ]"
+                        v-model="formDataSalary.typePosition"
                         :label="`${'ตำแหน่งประเภท'}`"
-                        @update:modelValue="updateSelectType"
                         emit-value
                         map-options
                         option-label="name"
-                        :options="positionTypeOptions"
-                        option-value="id"
+                        :options="opType"
+                        option-value="name"
                         hide-bottom-space
                         use-input
-                        :display-value="
-                          positionTypeOptions.find(
-                            (x) => x.id == positionTypeId
-                          )
-                            ? positionTypeOptions.find(
-                                (x) => x.id == positionTypeId
-                              )?.name
-                            : null
-                        "
                         input-debounce="0"
                         @filter="(inputValue: any,
-                          doneFn: Function) => filterSelector(inputValue, doneFn, '4'
+                          doneFn: Function) => filterSelector(inputValue, doneFn, 'typepos'
                           )"
                       />
                     </div>
-                    <div class="col-xs-4 col-sm-4 col-md-4">
-                      <selector
+
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <q-select
+                        ref="levelPositionRef"
                         :class="getClass(edit)"
                         :outlined="edit"
                         dense
                         lazy-rules
                         :readonly="!edit"
                         :borderless="!edit"
-                        v-model="positionLevelId"
+                        v-model="formDataSalary.levelPosition"
                         :rules="[(val: string) => !!val || `${'กรุณาเลือกระดับ'}`]"
                         :label="`${'ระดับ'}`"
                         @update:modelValue="clickEditRow"
                         emit-value
                         map-options
                         option-label="name"
-                        :options="positionLevelOptions"
-                        option-value="id"
+                        :options="opLevel"
+                        option-value="name"
                         hide-bottom-space
                         use-input
                         input-debounce="0"
-                        :display-value="
-                          positionLevelOptions.find(
-                            (x) => x.id == positionLevelId
-                          )
-                            ? positionLevelOptions.find(
-                                (x) => x.id == positionLevelId
-                              )?.name
-                            : null
-                        "
                         @filter="(inputValue: any,
-                          doneFn: Function) => filterSelector(inputValue, doneFn, '6'
+                          doneFn: Function) => filterSelector(inputValue, doneFn, 'levelpos'
                           )"
                       />
                     </div>
-                    <div class="col-xs-4 col-sm-4 col-md-4">
-                      <q-input
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="cLevel"
-                        hide-bottom-space
-                        :label="`${'ระดับซี'}`"
-                        @update:modelValue="clickEditRow"
-                      >
-                      </q-input>
-                    </div>
-                    <div class="col-xs-6 col-sm-6 col-md-6">
-                      <q-input
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="positionPathSideName"
-                        hide-bottom-space
-                        :label="`${'ด้าน/สาขา'}`"
-                        :rules="[(val: string) => !!val || `${'กรุณากรอกด้าน/สาขา'}`]"
-                        @update:modelValue="clickEditRow"
-                      >
-                      </q-input>
 
-                      <!-- <selector
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="positionPathSideId"
-                        :label="`${'ด้าน/สาขา'}`"
-                        @update:modelValue="clickEditRow"
-                        emit-value
-                        map-options
-                        option-label="name"
-                        :options="positionSideOptions"
-                        option-value="id"
-                        hide-bottom-space
-                        use-input
-                        input-debounce="0"
-                        @filter="(inputValue: any,
-                          doneFn: Function) => filterSelector(inputValue, doneFn, '3'
-                          )"
-                      /> -->
-                    </div>
-
-                    <div class="col-xs-6 col-sm-6 col-md-6">
-                      <q-input
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="positionExecutiveName"
-                        hide-bottom-space
-                        :label="`${'ตำแหน่งทางการบริหาร'}`"
-                        :rules="[(val: string) => !!val || `${'กรุณากรอกตำแหน่งทางการบริหาร'}`]"
-                        @update:modelValue="clickEditRow"
-                      >
-                      </q-input>
-
-                      <!-- <selector
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="positionExecutiveName"
-                        :label="`${'ตำแหน่งทางการบริหาร'}`"
-                        @update:modelValue="clickEditRow"
-                        emit-value
-                        map-options
-                        option-label="name"
-                        :options="positionExecutiveOptions"
-                        option-value="id"
-                        hide-bottom-space
-                        use-input
-                        input-debounce="0"
-                        @filter="(inputValue: any,
-                          doneFn: Function) => filterSelector(inputValue, doneFn, '7'
-                          )"
-                      /> -->
-                    </div>
-                    <div class="col-xs-4 col-sm-4 col-md-4">
-                      <!-- <q-input
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="amount"
-                        :rules="[(val: string) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
-                        :label="`${'เงินเดือน'}`"
-                        @update:modelValue="clickEditRow"
-                        type="number"
-                        hide-bottom-space
-                      /> -->
+                    <div class="col-xs-6 col-sm- col-md-6">
                       <CurrencyInput
                         lazy-rules
-                        v-model="amount"
+                        v-model="formDataSalary.salary"
                         :edit="edit"
                         :options="{
                           currency: 'THB',
@@ -503,149 +288,60 @@
                         :label="`${'เงินเดือน'}`"
                         :rules="[(val: number) => !!val  || `${'กรุณากรอกเงินเดือน'}`]"
                       />
-                      <!-- :rules="[(val: string) => !!val || `${'กรุณากรอกเงินเดือน'}`]" -->
-                    </div>
-                    <div class="col-xs-4 col-sm-4 col-md-4">
-                      <CurrencyInput
-                        lazy-rules
-                        v-model="positionSalaryAmount"
-                        :edit="edit"
-                        :options="{
-                          currency: 'THB',
-                        }"
-                        :label="`${'เงินประจำตำแหน่ง'}`"
-                      />
-                      <!-- :rules="[(val: number) => !!val  || `${'กรุณากรอกเงินประจำตำแหน่ง'}`]" -->
-                      <!-- <q-input
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="positionSalaryAmount"
-                        :label="`${'เงินประจำตำแหน่ง'}`"
-                        @update:modelValue="clickEditRow"
-                        type="number"
-                        hide-bottom-space
-                      /> -->
-                    </div>
-                    <div class="col-xs-4 col-sm-4 col-md-4">
-                      <!-- <q-input
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="mouthSalaryAmount"
-                        :label="`${'เงินค่าตอบแทนรายเดือน'}`"
-                        @update:modelValue="clickEditRow"
-                        type="number"
-                        hide-bottom-space
-                      /> -->
-                      <CurrencyInput
-                        lazy-rules
-                        v-model="mouthSalaryAmount"
-                        :edit="edit"
-                        :options="{
-                          currency: 'THB',
-                        }"
-                        :label="`${'เงินค่าตอบแทนรายเดือน'}`"
-                      />
-                      <!-- :rules="[(val: number) => !!val  || `${'กรุณากรอกเงินค่าตอบแทนรายเดือน'}`]" -->
                     </div>
+
                     <div class="col-xs-6 col-sm-6 col-md-6">
-                      <q-input
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
+                      <CurrencyInput
                         lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="refCommandNo"
-                        hide-bottom-space
-                        :label="`${'เลขที่คำสั่ง'}`"
-                        @update:modelValue="clickEditRow"
-                      >
-                        <!-- :rules="[(val: string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]" -->
-                        <template v-slot:append>
-                          <q-icon
-                            name="mdi-file"
-                            class="cursor-pointer"
-                            @click="resetFilter"
-                          />
-                        </template>
-                      </q-input>
+                        v-model="formDataSalary.salaryPos"
+                        :edit="edit"
+                        :options="{
+                          currency: 'THB',
+                        }"
+                        :label="`${'เงินประจำตำแหน่ง'}`"
+                      />
                     </div>
-                    <!-- <div class="col-xs-12 col-sm-12 col-md-12">
-                      <q-input
-                        :class="getClass(edit)"
-                        :outlined="edit"
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="salaryClass"
-                        :rules="[
-                          (val:string) =>
-                            !!val || `${'กรุณากรอกตำแหน่ง (รายละเอียด)'}`,
-                        ]"
-                        :label="`${'ตำแหน่ง (รายละเอียด)'}`"
-                        @update:modelValue="clickEditRow"
-                        hide-bottom-space
-                        autogrow
-                      >
-                        <template v-slot:append>
-                          <q-btn
-                            color="info"
-                            flat
-                            dense
-                            round
-                            size="14px"
-                            icon="mdi-plus"
-                            @click="templateDetail"
-                            :disable="!edit"
-                          />
-                        </template>
-                      </q-input>
-                    </div> -->
 
                     <div class="row col-xs-12 col-sm-12 col-md-12">
-                      <selector
+                      <q-select
+                        ref="templateDocRef"
                         :class="getClass(edit)"
                         :outlined="edit"
                         dense
                         lazy-rules
                         :readonly="!edit"
                         :borderless="!edit"
-                        v-model="refSelected"
+                        v-model="formDataSalary.templateDoc"
                         :label="`${'ต้นแบบ (template) เอกสารอ้างอิง'}`"
                         @update:modelValue="clickEditRowRef"
                         option-label="name"
-                        :options="refOptions"
-                        option-value="id"
+                        :options="opDoc"
+                        option-value="name"
+                        emit-value
                         hide-bottom-space
                         use-input
                         input-debounce="0"
                         @filter="(inputValue: any,
-                          doneFn: Function) => filterSelector(inputValue, doneFn, '8'
+                          doneFn: Function) => filterSelector(inputValue, doneFn, 'doc'
                           )"
                       />
                     </div>
+
                     <div class="col-xs-12 col-sm-12 col-md-12">
                       <q-input
+                        ref="docRef"
                         :class="getClass(edit)"
                         :outlined="edit"
                         dense
                         lazy-rules
                         :readonly="!edit"
                         :borderless="!edit"
-                        v-model="salaryRef"
+                        v-model="formDataSalary.doc"
                         :label="`${'เอกสารอ้างอิง'}`"
                         @update:modelValue="clickEditRow"
                         type="textarea"
                         hide-bottom-space
+                        :rules="[(val: number) => !!val  || `${'กรุณากรอกเอกสารอ้างอิง'}`]"
                       />
                     </div>
                   </div>
@@ -667,11 +363,12 @@
           v-model:next="next"
           v-model:previous="previous"
           v-model:modalEdit="modalEdit"
+          :coppy="coppyForm"
         />
       </q-form>
     </q-card>
   </q-dialog>
-  
+
   <HistoryTable
     :rows="rowsHistory"
     :columns="columnsHistory"
@@ -710,7 +407,7 @@
   </HistoryTable>
 </template>
 <script setup lang="ts">
-import { onMounted, ref, watch } from "vue";
+import { onMounted, ref, watch, reactive } from "vue";
 import { useRoute } from "vue-router";
 import { useProfileDataStore } from "@/modules/04_registry/store";
 import { useCounterMixin } from "@/stores/mixin";
@@ -730,12 +427,16 @@ import type {
   treeTab,
   OptionType,
   OptionLevel,
+  FormSalaryNew,
+  FormSalaryNewRef,
 } from "@/modules/04_registry/interface/index/Main";
 import HistoryTable from "@/components/TableHistory.vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import type { QTableProps } from "quasar";
 
+import { useSalaryDataStore } from "@/modules/04_registry/stores/salary";
+
 const props = defineProps({
   statusEdit: {
     type: Boolean,
@@ -745,6 +446,7 @@ const props = defineProps({
 
 const $q = useQuasar();
 const store = useProfileDataStore();
+const optionStore = useSalaryDataStore();
 const { profileData, changeProfileColumns } = store;
 
 const mixin = useCounterMixin();
@@ -1517,6 +1219,46 @@ const visibleColumnsHistory = ref<String[]>([
   "createdAt",
 ]);
 
+/****************************************** FormDataNew **********************************************/
+const formDataSalary = reactive<FormSalaryNew>({
+  date: new Date(),
+  posNo: "",
+  templatePos: "",
+  position: "",
+  typePosition: "",
+  levelPosition: "",
+  salary: 0,
+  salaryPos: 0,
+  templateDoc: "",
+  doc: "",
+});
+
+const opPos = ref<any>([]);
+const opType = ref<any>([]);
+const opLevel = ref<any>([]);
+const opDoc = ref<any>([]);
+
+/** formRef */
+const dateRef = ref<object | null>(null);
+const posNoRef = ref<object | null>(null);
+const templatePosRef = ref<object | null>(null);
+const positionRef = ref<object | null>(null);
+const levelPositionRef = ref<object | null>(null);
+const salaryNewRef = ref<object | null>(null);
+const templateDocRef = ref<object | null>(null);
+const docRef = ref<object | null>(null);
+
+const formDataSalaryRef: FormSalaryNewRef = {
+  date: dateRef,
+  posNo: posNoRef,
+  templatePos: templatePosRef,
+  position: positionRef,
+  levelPosition: levelPositionRef,
+  salary: salaryNewRef,
+  templateDoc: templateDocRef,
+  doc: docRef,
+};
+
 watch(visibleColumns, async (count: String[], prevCount: String[]) => {
   await changeProfileColumns("salary", count);
 });
@@ -1587,117 +1329,40 @@ const filterSelector = (val: any, update: Function, filtername: string) => {
         );
       });
       break;
+    case "pos":
+      update(() => {
+        opPos.value = optionStore.optionPos.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "typepos":
+      update(() => {
+        opType.value = optionStore.optiontype.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "levelpos":
+      update(() => {
+        opLevel.value = optionStore.optipnLevel.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "doc":
+      update(() => {
+        opDoc.value = optionStore.optionDoc.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
 
     default:
       break;
   }
 };
 
-// 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(() => {
-//       store.isLoad++;
-//     });
-// };
-
-/**
- * get รายการ ตำแหน่ง
- */
-// const fetchPosition = async () => {
-//   showLoader();
-//   await http
-//     .get(config.API.position)
-//     .then((res) => {
-//       const data = res.data.result;
-//       let optionpositionpaths: DataOption[] = [];
-//       data.positionPaths.map((r: any) => {
-//         optionpositionpaths.push({
-//           id: r.id.toString(),
-//           name: r.name.toString(),
-//         });
-//       });
-//       positionOptions.value = optionpositionpaths;
-//       positionOptionsFilter.value = optionpositionpaths;
-
-//       let optionPositionPathSides: DataOption[] = [];
-//       data.positionPathSides.map((r: any) => {
-//         optionPositionPathSides.push({
-//           id: r.id.toString(),
-//           name: r.name.toString(),
-//         });
-//       });
-//       positionSideOptions.value = optionPositionPathSides;
-//       positionSideOptionsFilter.value = optionPositionPathSides;
-
-//       let optionPositionTypes: DataOption[] = [];
-//       data.positionTypes.map((r: any) => {
-//         optionPositionTypes.push({
-//           id: r.id.toString(),
-//           name: r.name.toString(),
-//         });
-//       });
-//       positionTypeOptions.value = optionPositionTypes;
-//       positionTypeOptionsFilter.value = optionPositionTypes;
-
-//       let optionPositionLines: DataOption[] = [];
-//       data.positionLines.map((r: any) => {
-//         optionPositionLines.push({
-//           id: r.id.toString(),
-//           name: r.name.toString(),
-//         });
-//       });
-//       positionLineOptions.value = optionPositionLines;
-//       positionLineOptionsFilter.value = optionPositionLines;
-
-//       let optionPositionExecutives: DataOption[] = [];
-//       data.positionExecutives.map((r: any) => {
-//         optionPositionExecutives.push({
-//           id: r.id.toString(),
-//           name: r.name.toString(),
-//         });
-//       });
-//       positionExecutiveOptions.value = optionPositionExecutives;
-//       positionExecutiveOptionsFilter.value = optionPositionExecutives;
-
-//       let optionPositionExecutiveSides: DataOption[] = [];
-//       data.positionExecutiveSides.map((r: any) => {
-//         optionPositionExecutiveSides.push({
-//           id: r.id.toString(),
-//           name: r.name.toString(),
-//         });
-//       });
-//       positionExecutiveSideOptions.value = optionPositionExecutiveSides;
-//       positionExecutiveSideOptionsFilter.value = optionPositionExecutiveSides;
-
-//       let optionPositionLevels: DataOption[] = [];
-//       data.positionLevels.map((r: any) => {
-//         optionPositionLevels.push({
-//           id: r.id.toString(),
-//           name: r.name.toString(),
-//         });
-//       });
-//       positionLevelOptions.value = optionPositionLevels;
-//       positionLevelOptionsFilter.value = optionPositionLevels;
-//     })
-//     .catch((e: any) => {})
-//     .finally(() => {
-//       // hideLoader();
-//       store.isLoad++;
-//     });
-// };
-
 const fetchData = async () => {
   if (profileId.value) {
     showLoader();
@@ -1710,45 +1375,45 @@ const fetchData = async () => {
           rows.value.push({
             id: e.id,
             date: new Date(e.date),
-            amount: e.amount,
-            positionSalaryAmount: e.positionSalaryAmount,
-            mouthSalaryAmount: e.mouthSalaryAmount,
+            amount: e.amount ?? "-",
+            positionSalaryAmount: e.positionSalaryAmount ?? "-",
+            mouthSalaryAmount: e.mouthSalaryAmount ?? "-",
             oc: e.oc,
             ocId: e.ocId,
-            position: e.position,
-            positionName: e.positionName,
+            position: e.position ?? "-",
+            positionName: e.positionName ?? "-",
             positionId:
               e.positionId !== "00000000-0000-0000-0000-000000000000"
                 ? e.positionId
                 : "",
-            posNo: e.posNo,
+            posNo: e.posNo ?? "-",
             posNoId:
               e.posNoId !== "00000000-0000-0000-0000-000000000000"
                 ? e.posNoId
                 : "",
-            positionLine: e.positionLine,
-            positionLineName: e.positionLineName,
-            positionLineId: e.positionLineId,
-            positionPathSide: e.positionPathSide,
-            positionPathSideId: e.positionPathSideId,
-            positionPathSideName: e.positionPathSideName,
-            positionType: e.positionType,
-            positionTypeId: e.positionTypeId,
-            positionLevelId: e.positionLevelId,
-            positionLevel: e.positionLevel,
-            positionExecutive: e.positionExecutive,
-            positionExecutiveId: e.positionExecutiveId,
-            positionExecutiveName: e.positionExecutiveName,
-            positionExecutiveSide: e.positionExecutiveSide,
-            positionExecutiveSideId: e.positionExecutiveSideId,
-            salaryClass: e.salaryClass,
-            salaryRef: e.salaryRef,
-            salaryStatus: e.salaryStatus,
-            refCommandNo: e.refCommandNo,
-            createdFullName: e.createdFullName,
-            orgName: e.orgName,
-            agencyName: e.agencyName,
-            cLevel: e.cLevel,
+            positionLine: e.positionLine ?? "-",
+            positionLineName: e.positionLineName ?? "-",
+            positionLineId: e.positionLineId ?? "-",
+            positionPathSide: e.positionPathSide ?? "-",
+            positionPathSideId: e.positionPathSideId ?? "-",
+            positionPathSideName: e.positionPathSideName ?? "-",
+            positionType: e.positionType ?? "-",
+            positionTypeId: e.positionTypeId ?? "-",
+            positionLevelId: e.positionLevelId ?? "-",
+            positionLevel: e.positionLevel ?? "-",
+            positionExecutive: e.positionExecutive ?? "-",
+            positionExecutiveId: e.positionExecutiveId ?? "-",
+            positionExecutiveName: e.positionExecutiveName ?? "-",
+            positionExecutiveSide: e.positionExecutiveSide ?? "-",
+            positionExecutiveSideId: e.positionExecutiveSideId ?? "-",
+            salaryClass: e.salaryClass ?? "-",
+            salaryRef: e.salaryRef ?? "-",
+            salaryStatus: e.salaryStatus ?? "-",
+            refCommandNo: e.refCommandNo ?? "-",
+            createdFullName: e.createdFullName ?? "-",
+            orgName: e.orgName ?? "-",
+            agencyName: e.agencyName ?? "-",
+            cLevel: e.cLevel ?? "-",
             createdAt: new Date(e.createdAt),
           });
         });
@@ -1762,49 +1427,6 @@ const fetchData = async () => {
   }
 };
 
-// const onSelected = async (id: string) => {
-//   await fetchPositionNumber(id);
-// };
-
-// const fetchOrganization = async (id: string) => {
-//   if (selected.value != "") {
-//     showLoader();
-//     await http
-//       .get(config.API.organizationName(id))
-//       .then((res) => {
-//         let data = res.data.result;
-//         ocId.value = data;
-//       })
-//       .catch((e) => {
-//         messageError($q, e);
-//       })
-//       .finally(() => {
-//         hideLoader();
-//       });
-//   }
-// };
-
-// const fetchPositionNumber = async (id: string) => {
-//   showLoader();
-//   await http
-//     .get(config.API.getPositionNumberIdByOcId(id))
-//     .then((res) => {
-//       const data = res.data.result;
-//       let option: DataOption[] = [];
-//       data.map((r: DataOption) => {
-//         option.push({ id: r.id.toString(), name: r.name.toString() });
-//       });
-//       posNoOptions.value = option;
-//       posNoOptionsFilter.value = option;
-//     })
-//     .catch((e) => {
-//       messageError($q, e);
-//     })
-//     .finally(() => {
-//       hideLoader();
-//     });
-// };
-
 /**
  * กดดูข้อมูลก่อนหน้า
  */
@@ -1830,25 +1452,37 @@ const clickNext = async () => {
  */
 const getData = async () => {
   const row = rows.value[rowIndex.value];
-  date.value = row.date;
-  amount.value = row.amount;
-  positionSalaryAmount.value = row.positionSalaryAmount;
-  mouthSalaryAmount.value = row.mouthSalaryAmount;
-  // await onSelected(row.ocId);
-  selected.value = row.ocId;
-  positionName.value = row.positionName;
-  posNoId.value = row.posNoId;
-  posNo.value = row.posNo;
-  positionLineName.value = row.positionLineName;
-  positionPathSideName.value = row.positionPathSideName;
-  positionTypeId.value = row.positionTypeId;
-  positionLevelId.value = row.positionLevelId;
-  positionExecutiveName.value = row.positionExecutiveName;
-  positionExecutiveSideId.value = row.positionExecutiveSideId;
-  salaryClass.value = row.salaryClass;
-  salaryRef.value = row.salaryRef;
-  refCommandNo.value = row.refCommandNo;
+  // date.value = row.date;
+  // amount.value = row.amount;
+  // positionSalaryAmount.value = row.positionSalaryAmount;
+  // mouthSalaryAmount.value = row.mouthSalaryAmount;
+  // // await onSelected(row.ocId);
+  // selected.value = row.ocId;
+  // positionName.value = row.positionName;
+  // posNoId.value = row.posNoId;
+  // posNo.value = row.posNo;
+  // positionLineName.value = row.positionLineName;
+  // positionPathSideName.value = row.positionPathSideName;
+  // positionTypeId.value = row.positionTypeId;
+  // positionLevelId.value = row.positionLevelId;
+  // positionExecutiveName.value = row.positionExecutiveName;
+  // positionExecutiveSideId.value = row.positionExecutiveSideId;
+  // salaryClass.value = row.salaryClass;
+  // salaryRef.value = row.salaryRef;
+  // refCommandNo.value = row.refCommandNo;
   id.value = row.id;
+
+  formDataSalary.date = row.date;
+  formDataSalary.posNo = row.posNo ?? "-";
+  formDataSalary.templatePos = "";
+  formDataSalary.position = "";
+  formDataSalary.typePosition = row.positionType ?? "-";
+  formDataSalary.levelPosition = row.positionLevel ?? "-";
+  formDataSalary.salary = row.amount ?? 0;
+  formDataSalary.salaryPos = row.positionSalaryAmount ?? 0;
+  formDataSalary.templateDoc = "";
+  formDataSalary.doc = "";
+
   // await fetchPositionNumber(row.ocId);
 };
 
@@ -1884,81 +1518,10 @@ const clickAdd = async () => {
   await addData();
 };
 
-/**
- * gen ตำแหน่ง (รายละเอียด)
- */
-// const templateDetail = async () => {
-//   await fetchOrganization(selected.value);
-//   salaryClass.value = "";
-//   if (ocId.value != "") {
-//     salaryClass.value = salaryClass.value + `สังกัด${ocId.value} `;
-//   }
-
-//   const positionF = positionOptions.value.filter(
-//     (r: DataOption) => r.id == positionId.value
-//   );
-//   if (positionF.length > 0) {
-//     salaryClass.value = salaryClass.value + `ตำแหน่ง${positionF[0].name} `;
-//   }
-
-//   //   const posNoF = posNoOptions.value.filter(
-//   //     (r: DataOption) => r.id == posNoId.value
-//   //   );
-//   //   if (posNoF.length > 0) {
-//   //     salaryClass.value = salaryClass.value + `ตำแหน่งเลขที่${posNoF[0].name} `;
-//   //   }
-
-//   const positionLineF = positionLineOptions.value.filter(
-//     (r: DataOption) => r.id == positionLineId.value
-//   );
-//   if (positionLineF.length > 0) {
-//     salaryClass.value = salaryClass.value + `สายงาน${positionLineF[0].name} `;
-//   }
-
-//   const positionPathSideF = positionSideOptions.value.filter(
-//     (r: DataOption) => r.id == positionPathSideId.value
-//   );
-//   if (positionPathSideF.length > 0) {
-//     salaryClass.value =
-//       salaryClass.value + `ด้าน/สาขา${positionPathSideF[0].name} `;
-//   }
-
-//   const positionTypeF = positionTypeOptions.value.filter(
-//     (r: DataOption) => r.id == positionTypeId.value
-//   );
-//   if (positionTypeF.length > 0) {
-//     salaryClass.value =
-//       salaryClass.value + `ตำแหน่งประเภท${positionTypeF[0].name} `;
-//   }
-
-//   const positionLevelF = positionLevelOptions.value.filter(
-//     (r: DataOption) => r.id == positionLevelId.value
-//   );
-//   if (positionLevelF.length > 0) {
-//     salaryClass.value = salaryClass.value + `ระดับ${positionLevelF[0].name} `;
-//   }
-
-//   const positionExecutiveF = positionExecutiveOptions.value.filter(
-//     (r: DataOption) => r.id == positionExecutiveId.value
-//   );
-//   if (positionExecutiveF.length > 0) {
-//     salaryClass.value =
-//       salaryClass.value + `ตำแหน่งทางการบริหาร${positionExecutiveF[0].name} `;
-//   }
-// };
-
 /**
  * กดบันทึกใน dialog
  */
 const clickSave = async () => {
-  // if (amount.value == 0) {
-  //   amount.value = null;
-  // } else if (positionSalaryAmount.value == 0) {
-  //   positionSalaryAmount.value = null;
-  // } else if (mouthSalaryAmount.value == 0) {
-  //   mouthSalaryAmount.value = null;
-  // }
-
   myForm.value.validate().then(async (result: boolean) => {
     if (result) {
       if (modalEdit.value) {
@@ -1992,28 +1555,16 @@ const saveData = async () => {
     showLoader();
     await http
       .post(config.API.profileSalaryId(profileId.value), {
-        date: dateToISO(date.value),
-        amount: amount.value,
-        positionSalaryAmount: positionSalaryAmount.value,
-        mouthSalaryAmount: mouthSalaryAmount.value,
-        // ocId: selected.value,
-        orgName: orgName.value,
-        agencyName: agencyName.value,
-        cLevel: cLevel.value,
-        positionName: positionName.value,
-        // posNoId: posNoId.value,
-        posNo: posNo.value,
-        positionLineName: positionLineName.value,
-        positionPathSideName: positionPathSideName.value,
-        positionTypeId: positionTypeId.value,
-        positionLevelId: positionLevelId.value,
-        positionExecutiveName: positionExecutiveName.value,
-        // positionExecutiveSideId: positionExecutiveSideId.value,
-        // salaryClass: salaryClass.value,
-        salaryRef: salaryRef.value,
-        refCommandNo: refCommandNo.value,
+        date: dateToISO(formDataSalary.date),
+        posNo: formDataSalary.posNo,
+        positionName: formDataSalary.position,
+        positionTypeName: formDataSalary.typePosition,
+        positionLevelName: formDataSalary.levelPosition,
+        amount: formDataSalary.salary,
+        positionSalaryAmount: formDataSalary.salaryPos,
+        salaryRef: formDataSalary.doc,
       })
-      .then((res) => {
+      .then(() => {
         success($q, "บันทึกข้อมูลสำเร็จ");
         modal.value = false;
       })
@@ -2033,26 +1584,14 @@ const editData = async () => {
   showLoader();
   await http
     .put(config.API.profileSalaryId(id.value), {
-      date: dateToISO(date.value),
-      amount: amount.value,
-      positionSalaryAmount: positionSalaryAmount.value,
-      mouthSalaryAmount: mouthSalaryAmount.value,
-      ocId: selected.value,
-      positionName: positionName.value,
-      // posNoId: posNoId.value,
-      posNo: posNo.value,
-      positionLineName: positionLineName.value,
-      positionPathSideName: positionPathSideName.value,
-      positionTypeId: positionTypeId.value,
-      positionLevelId: positionLevelId.value,
-      positionExecutiveName: positionExecutiveName.value,
-      // positionExecutiveSideId: positionExecutiveSideId.value,
-      // salaryClass: salaryClass.value,
-      salaryRef: salaryRef.value,
-      refCommandNo: refCommandNo.value,
-      orgName: orgName.value,
-      agencyName: agencyName.value,
-      cLevel: cLevel.value,
+      date: dateToISO(formDataSalary.date),
+      posNo: formDataSalary.posNo,
+      positionName: formDataSalary.position,
+      positionTypeName: formDataSalary.typePosition,
+      positionLevelName: formDataSalary.levelPosition,
+      amount: formDataSalary.salary,
+      positionSalaryAmount: formDataSalary.salaryPos,
+      salaryRef: formDataSalary.doc,
     })
     .then((res) => {
       success($q, "บันทึกข้อมูลสำเร็จ");
@@ -2130,28 +1669,42 @@ const selectData = async (props: DataProps) => {
   edit.value = false;
   rawItem.value = props.row;
   rowIndex.value = props.rowIndex;
-  date.value = props.row.date;
-  amount.value = props.row.amount;
-  positionSalaryAmount.value = props.row.positionSalaryAmount;
-  mouthSalaryAmount.value = props.row.mouthSalaryAmount;
-  //   await onSelected(props.row.ocId);
-  selected.value = props.row.ocId;
-  positionName.value = props.row.positionName;
-  posNoId.value = props.row.posNoId;
-  posNo.value = props.row.posNo;
-  positionLineName.value = props.row.positionLineName;
-  positionPathSideName.value = props.row.positionPathSideName;
-  positionTypeId.value = props.row.positionTypeId;
-  positionLevelId.value = props.row.positionLevelId;
-  positionExecutiveName.value = props.row.positionExecutiveName;
-  positionExecutiveSideId.value = props.row.positionExecutiveSideId;
-  salaryClass.value = props.row.salaryClass;
-  salaryRef.value = props.row.salaryRef;
-  refCommandNo.value = props.row.refCommandNo;
   id.value = props.row.id;
-  orgName.value = props.row.orgName;
-  agencyName.value = props.row.agencyName;
-  cLevel.value = props.row.cLevel;
+
+  console.log(props.row);
+
+  // date.value = props.row.date;
+  // amount.value = props.row.amount;
+  // positionSalaryAmount.value = props.row.positionSalaryAmount;
+  // mouthSalaryAmount.value = props.row.mouthSalaryAmount;
+  //   await onSelected(props.row.ocId);
+  // selected.value = props.row.ocId;
+  // positionName.value = props.row.positionName;
+  // posNoId.value = props.row.posNoId;
+  // posNo.value = props.row.posNo;
+  // positionLineName.value = props.row.positionLineName;
+  // positionPathSideName.value = props.row.positionPathSideName;
+  // positionTypeId.value = props.row.positionTypeId;
+  // positionLevelId.value = props.row.positionLevelId;
+  // positionExecutiveName.value = props.row.positionExecutiveName;
+  // positionExecutiveSideId.value = props.row.positionExecutiveSideId;
+  // salaryClass.value = props.row.salaryClass;
+  // salaryRef.value = props.row.salaryRef;
+  // refCommandNo.value = props.row.refCommandNo;
+  // orgName.value = props.row.orgName;
+  // agencyName.value = props.row.agencyName;
+  // cLevel.value = props.row.cLevel;
+
+  formDataSalary.date = props.row.date;
+  formDataSalary.posNo = props.row.posNo ?? "-";
+  formDataSalary.templatePos = "";
+  formDataSalary.position = props.row.positionName ?? "-";
+  formDataSalary.typePosition = props.row.positionType ?? "-";
+  formDataSalary.levelPosition = props.row.positionLevel ?? "-";
+  formDataSalary.salary = props.row.amount ?? 0;
+  formDataSalary.salaryPos = props.row.positionSalaryAmount ?? 0;
+  formDataSalary.templateDoc = "";
+  formDataSalary.doc = props.row.salaryRef ?? "-";
   await checkRowPage();
 };
 
@@ -2187,6 +1740,17 @@ const addData = () => {
   refSelected.value = null;
   salaryRef.value = "";
   refCommandNo.value = "";
+
+  formDataSalary.date = new Date();
+  formDataSalary.posNo = "";
+  formDataSalary.templatePos = "";
+  formDataSalary.position = "";
+  formDataSalary.typePosition = "";
+  formDataSalary.levelPosition = "";
+  formDataSalary.salary = 0;
+  formDataSalary.salaryPos = 0;
+  formDataSalary.templateDoc = "";
+  formDataSalary.doc = "";
 };
 
 /**
@@ -2239,9 +1803,10 @@ function updateSelectType(val: string) {
 /**
  * เช็คว่ามีการแก้ไขข้อมูล
  */
-const clickEditRowRef = () => {
+const clickEditRowRef = (val: string) => {
   editRow.value = true;
-  salaryRef.value = refSelected.value?.name;
+  // salaryRef.value = refSelected.value?.name;
+  formDataSalary.doc = val;
 };
 
 /**
@@ -2261,39 +1826,39 @@ const clickHistory = async (row: RequestItemsObject) => {
         rowsHistory.value.push({
           id: e.id,
           date: new Date(e.date),
-          amount: e.amount,
-          positionSalaryAmount: e.positionSalaryAmount,
-          mouthSalaryAmount: e.mouthSalaryAmount,
+          amount: e.amount ?? "_",
+          positionSalaryAmount: e.positionSalaryAmount ?? "_",
+          mouthSalaryAmount: e.mouthSalaryAmount ?? "_",
           oc: e.oc,
           ocId: e.ocId,
-          position: e.position,
+          position: e.position ?? "_",
           positionId: e.positionId,
-          positionName: e.positionName,
-          posNo: e.posNo,
+          positionName: e.positionName ?? "_",
+          posNo: e.posNo ?? "_",
           posNoId: e.posNoId,
-          positionLine: e.positionLine,
-          positionLineName: e.positionLineName,
-          positionLineId: e.positionLineId,
-          positionPathSide: e.positionPathSide,
-          positionPathSideId: e.positionPathSideId,
-          positionPathSideName: e.positionPathSideName,
-          positionType: e.positionType,
-          positionTypeId: e.positionTypeId,
-          positionLevel: e.positionLevel,
-          positionLevelId: e.positionLevelId,
-          positionExecutive: e.positionExecutive,
-          positionExecutiveId: e.positionExecutiveId,
-          positionExecutiveName: e.positionExecutiveName,
-          positionExecutiveSide: e.positionExecutiveSide,
-          positionExecutiveSideId: e.positionExecutiveSideId,
-          salaryClass: e.salaryClass,
-          salaryStatus: e.salaryStatus,
-          salaryRef: e.salaryRef,
-          refCommandNo: e.refCommandNo,
-          createdFullName: e.createdFullName,
-          orgName: e.orgName,
-          agencyName: e.agencyName,
-          cLevel: e.cLevel,
+          positionLine: e.positionLine ?? "_",
+          positionLineName: e.positionLineName ?? "_",
+          positionLineId: e.positionLineId ?? "_",
+          positionPathSide: e.positionPathSide ?? "_",
+          positionPathSideId: e.positionPathSideId ?? "_",
+          positionPathSideName: e.positionPathSideName ?? "_",
+          positionType: e.positionType ?? "_",
+          positionTypeId: e.positionTypeId ?? "_",
+          positionLevel: e.positionLevel ?? "_",
+          positionLevelId: e.positionLevelId ?? "_",
+          positionExecutive: e.positionExecutive ?? "_",
+          positionExecutiveId: e.positionExecutiveId ?? "_",
+          positionExecutiveName: e.positionExecutiveName ?? "_",
+          positionExecutiveSide: e.positionExecutiveSide ?? "_",
+          positionExecutiveSideId: e.positionExecutiveSideId ?? "_",
+          salaryClass: e.salaryClass ?? "_",
+          salaryStatus: e.salaryStatus ?? "_",
+          salaryRef: e.salaryRef ?? "_",
+          refCommandNo: e.refCommandNo ?? "_",
+          createdFullName: e.createdFullName ?? "_",
+          orgName: e.orgName ?? "_",
+          agencyName: e.agencyName ?? "_",
+          cLevel: e.cLevel ?? "_",
           createdAt: new Date(e.createdAt),
         });
       });
@@ -2310,12 +1875,27 @@ const clickHistory = async (row: RequestItemsObject) => {
  * validate input ใน dialog
  */
 const validateData = async () => {
+  // await myForm.value.validate().then((result: boolean) => {
+  //   if (result == false) {
+  //     checkValidate.value = false;
+  //   }
+  // });
+
+  const hasError = [];
   checkValidate.value = true;
-  await myForm.value.validate().then((result: boolean) => {
-    if (result == false) {
-      checkValidate.value = false;
+  for (const key in formDataSalaryRef) {
+    if (Object.prototype.hasOwnProperty.call(formDataSalaryRef, key)) {
+      const property = formDataSalaryRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
     }
-  });
+  }
+  if (hasError.every((result) => result === true)) {
+    formDataSalary.salary === 0 ? (formDataSalary.salary = undefined) : null;
+    checkValidate.value = false;
+  }
 };
 
 /**
@@ -2334,7 +1914,6 @@ function getPosition() {
   http
     .get(config.API.orgSalaryPosition)
     .then((res) => {
-      console.log(res);
       const dataOp = res.data.result;
       const dataLineOp = res.data.result;
 
@@ -2444,6 +2023,65 @@ watch(
     }
   }
 );
+
+/**
+ *  function จัดตำแหน่งเงินเดือน
+ * @param value ข้อมูล row
+ * @param up สถานะขึ้นลง
+ */
+async function onClicksortPos(value: any, up: boolean = true) {
+  if (up) {
+    await swapUp(value.row.personalId);
+  } else {
+    await swapDown(value.row.personalId);
+  }
+}
+
+/** ปรับรายการเงินเดือนขึ้น */
+async function swapUp(id: string) {
+  // await http
+  //   .put(config.API.swapUpOrder(id))
+  //   .catch((e) => {
+  //     messageError($q, e);
+  //   })
+  //   .finally(async () => {
+  //     hideLoader();
+  //   });
+}
+/** ปรับรายการเงินเดือนชื่อลง */
+async function swapDown(id: string) {
+  // await http
+  //   .put(config.API.swapDownOrder(id))
+  //   .catch((e) => {
+  //     messageError($q, e);
+  //   })
+  //   .finally(async () => {
+  //     hideLoader();
+  //   });
+}
+
+function updatePos(val: string) {
+  editRow.value = true;
+  formDataSalary.position = val;
+}
+
+function coppyForm() {
+  selected.value = "";
+  modalEdit.value = false;
+  modal.value = true;
+  edit.value = true;
+
+  formDataSalary.date = formDataSalary.date;
+  formDataSalary.posNo = formDataSalary.posNo;
+  formDataSalary.templatePos = formDataSalary.templatePos;
+  formDataSalary.position = formDataSalary.position;
+  formDataSalary.typePosition = formDataSalary.typePosition;
+  formDataSalary.levelPosition = formDataSalary.levelPosition;
+  formDataSalary.salary = formDataSalary.salary;
+  formDataSalary.salaryPos = formDataSalary.salaryPos;
+  formDataSalary.templateDoc = formDataSalary.templateDoc;
+  formDataSalary.doc = formDataSalary.doc;
+}
 </script>
 <style lang="scss">
 .modalfix {
diff --git a/src/modules/04_registry/components/Table.vue b/src/modules/04_registry/components/Table.vue
index 264c22d02..8dcc7a4d7 100644
--- a/src/modules/04_registry/components/Table.vue
+++ b/src/modules/04_registry/components/Table.vue
@@ -69,6 +69,8 @@
   >
     <template v-slot:header="props">
       <q-tr :props="props">
+        <q-th auto-width v-if="name === 'ตำแหน่ง/เงินเดือน'" />
+        <q-th auto-width v-if="name === 'ตำแหน่ง/เงินเดือน'" />
         <q-th v-for="col in props.cols" :key="col.name" :props="props">
           <span class="text-weight-medium">{{ col.label }}</span>
         </q-th>
diff --git a/src/modules/04_registry/interface/index/Main.ts b/src/modules/04_registry/interface/index/Main.ts
index c7518f784..0eaa8516e 100644
--- a/src/modules/04_registry/interface/index/Main.ts
+++ b/src/modules/04_registry/interface/index/Main.ts
@@ -78,7 +78,34 @@ interface OptionLevel {
   posLevelName: string;
 }
 
+interface FormSalaryNew {
+  date: Date;
+  posNo: string;
+  templatePos: string;
+  position: string;
+  typePosition: string;
+  levelPosition: string;
+  salary: number | undefined;
+  salaryPos: number | undefined;
+  templateDoc: string;
+  doc: string;
+}
+
+interface FormSalaryNewRef {
+  date: object | null;
+  posNo: object | null;
+  templatePos: object | null;
+  position: object | null;
+  levelPosition: object | null;
+  salary: object | null;
+  templateDoc: object | null;
+  doc: object | null;
+  [key: string]: any;
+}
+
 export type {
+  FormSalaryNew,
+  FormSalaryNewRef,
   Pagination,
   DataOption,
   DataOptionInsignia,
diff --git a/src/modules/04_registry/interface/request/Leave.ts b/src/modules/04_registry/interface/request/Leave.ts
index 9693d517c..6d7fe947c 100644
--- a/src/modules/04_registry/interface/request/Leave.ts
+++ b/src/modules/04_registry/interface/request/Leave.ts
@@ -3,18 +3,29 @@ interface DataProps {
   rowIndex: number;
 }
 
+//ข้อมูล
+// interface RequestItemsObject {
+//   id: string;
+//   typeLeave: string;
+//   dateStartLeave: Date;
+//   dateEndLeave: Date;
+//   numLeave: number;
+//   sumLeave: number;
+//   totalLeave: number;
+//   status: string;
+//   reason: string;
+//   typeLeaveId: string;
+// }
+
 //ข้อมูล
 interface RequestItemsObject {
   id: string;
-  typeLeave: string;
-  dateStartLeave: Date;
-  dateEndLeave: Date;
-  numLeave: number;
-  sumLeave: number;
-  totalLeave: number;
-  status: string;
-  reason: string;
-  typeLeaveId: string;
+  year: string|number;
+  sick: string;
+  absence: string;
+  late: string;
+  government: string;
+  study: string;
 }
 
 //ข้อมูล
@@ -39,4 +50,14 @@ interface Columns {
   };
 }
 
-export type { RequestItemsObject, Columns, DataProps, RequestItemsTotalObject };
+interface DetailData {
+  id: string;
+  sick: string;
+  absence: string;
+  late: string;
+  government: string;
+  study: string;
+  year: string|number;
+}
+
+export type { RequestItemsObject, Columns, DataProps, RequestItemsTotalObject,DetailData };
diff --git a/src/modules/04_registry/interface/response/Leave.ts b/src/modules/04_registry/interface/response/Leave.ts
index f5eb18b13..e8c0cc0a8 100644
--- a/src/modules/04_registry/interface/response/Leave.ts
+++ b/src/modules/04_registry/interface/response/Leave.ts
@@ -1,16 +1,27 @@
 //ข้อมูล
+// interface ResponseObject {
+//   id: string;
+//   typeLeave: string;
+//   dateStartLeave: Date;
+//   dateEndLeave: Date;
+//   numLeave: number;
+//   sumLeave: number;
+//   totalLeave: number;
+//   status: string;
+//   reason: string;
+//   typeLeaveId: string;
+// }
+
 interface ResponseObject {
   id: string;
-  typeLeave: string;
-  dateStartLeave: Date;
-  dateEndLeave: Date;
-  numLeave: number;
-  sumLeave: number;
-  totalLeave: number;
-  status: string;
-  reason: string;
-  typeLeaveId: string;
+  year: string|number;
+  sick: string;
+  absence: string;
+  late: string;
+  government: string;
+  study: string;
 }
+
 interface ResponseTotalObject {
   typeLeaveId: string;
   typeLeave: string;
diff --git a/src/modules/04_registry/stores/salary.ts b/src/modules/04_registry/stores/salary.ts
new file mode 100644
index 000000000..446e43f9f
--- /dev/null
+++ b/src/modules/04_registry/stores/salary.ts
@@ -0,0 +1,212 @@
+import { ref, computed } from "vue";
+import { defineStore } from "pinia";
+
+export const useSalaryDataStore = defineStore("salary", () => {
+  const optionPos = ref<any>([
+    {
+      id: 1,
+      name: "เลื่อนเงินเดือน",
+    },
+    {
+      id: 2,
+      name: "เลื่อนเงินเดือน (ดีเด่น)",
+    },
+    {
+      id: 3,
+      name: "เลื่อนเงินเดือน (เพิ่มเติม)",
+    },
+
+    {
+      id: 4,
+      name: "ปรับเงินเดือน",
+    },
+
+    {
+      id: 5,
+      name: "ปรับเงินเดือนเพิ่มเติมตามคุณวุฒิการศึกษา",
+    },
+    {
+      id: 6,
+      name: "ปรับเงินเดือนเพิ่มเติมตามคุณวุฒิการศึกษา (เพิ่มเติม)",
+    },
+    {
+      id: 7,
+      name: "เลื่อนเงินเดือนและให้ข้าราชการ กทม. สามัญได้รับเงินเดือนสูงกว่าขั้นสูงของตำแหน่งที่ได้รับแต่งตั้ง",
+    },
+    {
+      id: 8,
+      name: "เลื่อนเงินเดือนกรณีพิเศษให้แก่ผู้ปฏิบัติงานด้านยาเสพติด",
+    },
+    {
+      id: 9,
+      name: "{ประเภทตำแหน่ง} {ชื่อตำแหน่ง} สำนัก{ชื่อสำนัก}",
+    },
+    {
+      id: 10,
+      name: "แต่งตั้งข้าราชการ {ประเภทตำแหน่ง} {ชื่อตำแหน่ง} สำนัก{ชื่อสำนัก}",
+    },
+    {
+      id: 11,
+      name: "แก้ไขคำสั่ง {หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+
+    {
+      id: 12,
+      name: "โปรดเกล้าฯ {ชื่อตำแหน่ง} สำนัก{ชื่อสำนัก}",
+    },
+
+    {
+      id: 13,
+      name: "ช่วยราชการที่{หน่วยงานและรายละเอียดต่างๆ}",
+    },
+
+    {
+      id: 14,
+      name: "ปฏิบัติหน้าที่ในตำแหน่ง{ชื่อตำแหน่ง} สำนัก{ชื่อสำนัก}",
+    },
+
+    {
+      id: 15,
+      name: "รักษาการในตำแหน่ง{ชื่อตำแหน่ง} สำนัก{ชื่อสำนัก}",
+    },
+    {
+      id: 16,
+      name: "พ้นจากการทดลองปฏิบัติหน้าที่ราชการ",
+    },
+
+    {
+      id: 17,
+      name: "งดเลื่อนขั้นเงินเดือน",
+    },
+    {
+      id: 18,
+      name: "แก้ไขคำสั่งเลื่อนขั้นเงินเดือน {หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+    {
+      id: 19,
+      name: "ยกเลิกคำสั่งเลื่อนขั้นเงินเดือน {หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+    {
+      id: 20,
+      name: "กลับไปปฏิบัติงานทางต้นสังกัดเดิม",
+    },
+    {
+      id: 21,
+      name: "โปรดเกล้าฯ แตงตั้งให้ดำรงตำแหน่ง{รายละเอียดของตำแหน่งและหน่วยงาน}",
+    },
+  ]);
+
+  const optionDoc = ref<any>([
+    {
+      id: 1,
+      name: "บรรจุและแต่งตั้งผู้สอบแข่งขันได้ คำสั่ง {หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+    {
+      id: 2,
+      name: "ปรับเงินเดือนตาม{รายละเอียดของบัญชี เช่นชื่อ ฉบับที่ ปี พ.ศ.}",
+    },
+    {
+      id: 3,
+      name: "เลื่อนเงินเดือนตามคำสั่ง {หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+
+    {
+      id: 4,
+      name: "เลื่อนเงินขั้นเดือน คำสั่ง {หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+
+    {
+      id: 5,
+      name: "เลื่อนเงินขั้นเดือน (1 ขั้น) คำสั่ง {หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+    {
+      id: 6,
+      name: "เลื่อนเงินขั้นเดือน (1.5 ขั้น) คำสั่ง {หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+    {
+      id: 7,
+      name: "แต่งตั้งตามคำสั่ง {หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+    {
+      id: 8,
+      name: "คำสั่ง {หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+    {
+      id: 9,
+      name: "ปรับเงินเดือนตาม{รายละเอียดข้อมูล}",
+    },
+    {
+      id: 10,
+      name: "แก้ไขคำสั่ง {หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม} ตามคำสั่ง {หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+    {
+      id: 11,
+      name: "เลื่อนระดับและแต่งตั้งคำสั่ง{หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+
+    {
+      id: 12,
+      name: "แต่งตั้งดำรงตำแหน่ง{ชื่อตำแหน่ง} คำสั่ง{หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+
+    {
+      id: 13,
+      name: "แต่งตั้งคำสั่ง{หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+
+    {
+      id: 14,
+      name: "เลื่อนและแต่งตั้งโดยการสอบคัดเลือก คำสั่ง{หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+
+    {
+      id: 15,
+      name: "แต่งตั้งข้าราชการให้ดำรงตำแหน่งของ{รายละเอียดของตำแหน่งและหน่วยงาน} คำสั่ง{หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+    {
+      id: 16,
+      name: "ย้ายตามคำสั่ง{หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+
+    {
+      id: 17,
+      name: "แต่งตั้งข้าราชการให้ดำรงตำแหน่งตามคำสั่ง{หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+  ]);
+
+  const optiontype = ref<any>([
+    { id: 1, name: "ทั่วไป" },
+    { id: 2, name: "วิชาการ" },
+    { id: 3, name: "อำนวยการ" },
+    { id: 4, name: "บริหาร" },
+  ]);
+
+  const optipnLevel = ref<any>([
+    { id: 1, name: "1" },
+    { id: 2, name: "2" },
+    { id: 3, name: "3" },
+    { id: 4, name: "4" },
+    { id: 5, name: "5" },
+    { id: 6, name: "6" },
+    { id: 7, name: "7" },
+    { id: 8, name: "8" },
+    { id: 9, name: "9" },
+    { id: 10, name: "10" },
+    { id: 11, name: "11" },
+    { id: 12, name: "ปฏิบัติงาน" },
+    { id: 13, name: "ชำนาญงาน" },
+    { id: 14, name: "อาวุโส" },
+    { id: 15, name: "ทักษะพิเศษ" },
+    { id: 16, name: "ปฏิบัติการ" },
+    { id: 17, name: "ชำนาญการ" },
+    { id: 18, name: "ชำนาญการพิเศษ" },
+    { id: 19, name: "เชี่ยวชาญ" },
+    { id: 20, name: "ทรงคุณวุฒิ" },
+    { id: 21, name: "อำนวยการต้น" },
+    { id: 22, name: "อำนวยการสูง" },
+    { id: 23, name: "บริหารต้น" },
+    { id: 24, name: "บริหารสูง" },
+  ]);
+
+  return { optionPos, optionDoc, optiontype, optipnLevel };
+});