diff --git a/src/assets/05_modules.pdf b/src/assets/05_modules.pdf
new file mode 100644
index 000000000..74cddeb33
Binary files /dev/null and b/src/assets/05_modules.pdf differ
diff --git a/src/components/Table.vue b/src/components/Table.vue
new file mode 100644
index 000000000..cc4dc9d08
--- /dev/null
+++ b/src/components/Table.vue
@@ -0,0 +1,88 @@
+<template>
+  <q-table
+    ref="table"
+    flat
+    bordered
+    class="custom-header-table"
+    v-bind="attrs"
+    virtual-scroll
+    :virtual-scroll-sticky-size-start="48"
+    dense
+    :pagination-label="paginationLabel"
+    v-model:pagination="pagination"
+  >
+    <template v-slot:pagination="scope">
+      <q-pagination
+        v-model="pagination.page"
+        active-color="primary"
+        color="dark"
+        :max="scope.pagesNumber"
+        :max-pages="5"
+        size="sm"
+        boundary-links
+        direction-links
+      ></q-pagination>
+    </template>
+
+    <template v-for="(_, slot) in slots" v-slot:[slot]="scope">
+      <slot :name="slot" v-bind="scope || {}" />
+    </template>
+  </q-table>
+</template>
+<script setup lang="ts">
+import { ref, useAttrs, useSlots } from "vue";
+const attrs = ref<any>(useAttrs());
+const slots = ref<any>(useSlots());
+
+const props = defineProps({
+  paging: {
+    type: Boolean,
+    defualt: false,
+  },
+});
+
+const pagination = ref({
+  sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+
+const paginationLabel = (start: string, end: string, total: string) => {
+  if (props.paging == true)
+    return " " + start + " ใน " + end + " จากจำนวน " + total + " รายการ";
+  else return start + "-" + end + " ใน " + total;
+};
+</script>
+
+<style lang="scss">
+.icon-color {
+  color: #4154b3;
+}
+.custom-header-table {
+  height: auto;
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+    z-index: 1;
+  }
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>
diff --git a/src/main.ts b/src/main.ts
index a969335bd..2926f9112 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -70,6 +70,11 @@ app.component(
   defineAsyncComponent(() => import("@/components/Selector.vue"))
 );
 
+app.component(
+  "d-table",
+  defineAsyncComponent(() => import("@/components/Table.vue"))
+);
+
 app.config.globalProperties.$http = http;
 
 app.mount("#app");
diff --git a/src/modules/05_placement/components/Main.vue b/src/modules/05_placement/components/Main.vue
index 940adfbc4..14eb38d5a 100644
--- a/src/modules/05_placement/components/Main.vue
+++ b/src/modules/05_placement/components/Main.vue
@@ -299,7 +299,7 @@ const paginationLabel = (start: number, end: number, total: number) => {
     รายการสอบแข่งขัน / คัดเลือก
   </div>
   <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
-    <div class="row q-col-gutter-md">
+    <div class="row q-col-gutter-sm">
       <div class="row col-12 q-col-gutter-sm">
         <q-select
           class="col-xs-12 col-sm-3 col-md-2"
@@ -422,7 +422,8 @@ const paginationLabel = (start: number, end: number, total: number) => {
           <template v-slot:pagination="scope">
             <q-pagination
               v-model="pagination.page"
-              color="primary"
+              active-color="primary"
+							color="dark"
               :max="scope.pagesNumber"
               :max-pages="5"
               size="sm"
diff --git a/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue b/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue
index 372f15139..6894b70cd 100644
--- a/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue
+++ b/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue
@@ -534,7 +534,7 @@ const OriginalDataFetch = async () => {
 
 // ดูรายการหน้าต่อไป
 const redirectToPage = (id?: number) => {
-  router.push({ name: "placementDetail" });
+  // router.push({ name: "placementDetail" });
   router.push(`/placement/order/detail`);
 };
 
diff --git a/src/modules/05_placement/components/OrderPlacement/step/step02.vue b/src/modules/05_placement/components/OrderPlacement/step/step02.vue
index 99ebb26cc..b25dd46c4 100644
--- a/src/modules/05_placement/components/OrderPlacement/step/step02.vue
+++ b/src/modules/05_placement/components/OrderPlacement/step/step02.vue
@@ -46,9 +46,7 @@
           />
         </div>
       </div>
-      <q-table
-        flat
-        bordered
+      <d-table
         :rows="rows"
         :columns="columns"
         :visible-columns="visibleColumns"
@@ -56,9 +54,6 @@
         row-key="name"
         selection="multiple"
         v-model:selected="selected"
-        class="custom-header-table"
-        :pagination-label="paginationLabel"
-        v-model:pagination="pagination"
       >
         <template v-slot:header-selection="scope">
           <q-checkbox
@@ -70,20 +65,6 @@
         </template>
 
         <template v-slot:body-selection="scope">
-          <!-- <q-checkbox
-            keep-color
-            color="primary"
-            dense
-            :model-value="scope.selected"
-            @update:model-value="
-              (val, evt) => {
-                Object.getOwnPropertyDescriptor(scope, 'selected').set(
-                  val,
-                  evt
-                );
-              }
-            "
-          /> -->
           <q-checkbox
             keep-color
             color="primary"
@@ -97,56 +78,13 @@
             <div v-if="props.col.name == 'no'">
               {{ props.rowIndex + 1 }}
             </div>
-            <!-- <div v-else-if="props.col.name == 'educate'">
-              <q-select
-                :class="getClass(true)"
-                hide-bottom-space
-                multiple
-                :outlined="true"
-                dense
-                lazy-rules
-                :readonly="!true"
-                :borderless="!true"
-                v-model="props.value"
-                :rules="[(val:any) => !!val || `${'กรุณาเลือกวุฒิการศึกษา'}`,(val:any) => val.length > 0 || `${'กรุณาเลือกวุฒิการศึกษา'}`]"
-                :label="`${'เลือกวุฒิการศึกษา'}`"
-                emit-value
-                map-options
-                option-label="name"
-                :options="[]"
-                option-value="id"
-                input-debounce="0"
-                color="primary"
-              >
-                <template v-slot:prepend>
-                  <q-icon name="cast_for_education" color="primary" />
-                </template>
-                <template v-slot:no-option>
-                  <q-item>
-                    <q-item-section class="text-black">
-                      ไม่พบข้อมูลที่ค้นหา
-                    </q-item-section>
-                  </q-item>
-                </template>
-              </q-select>
-            </div> -->
+
             <div v-else @click="click(props)">
               {{ props.value }}
             </div>
           </q-td>
         </template>
-        <template v-slot:pagination="scope">
-          <q-pagination
-            v-model="pagination.page"
-            color="primary"
-            :max="scope.pagesNumber"
-            :max-pages="5"
-            size="sm"
-            boundary-links
-            direction-links
-          ></q-pagination>
-        </template>
-      </q-table>
+      </d-table>
     </div>
     <q-separator />
     <div class="flex justify-end q-pa-sm q-gutter-sm">
@@ -229,7 +167,7 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
-const rows = [
+const rows = ref<any>([
   {
     no: "0ac56905-1a74-4606-a120-233340adde95",
     name: "นางนัทธ์ เหล่าสกุล",
@@ -296,7 +234,7 @@ const rows = [
     idcard: "6598455632145",
     educate: "ปริญญาตรี",
   },
-];
+]);
 const selected = ref([]);
 const pagination = ref({
   sortBy: "desc",
@@ -331,13 +269,6 @@ const selectData = (row: any) => {};
 
 const refresh = () => {};
 
-const paginationLabel = (start: number, end: number, total: number) => {
-  //   if (props.paging == true)
-  //     return " " + start + " ใน " + end + " จากจำนวน " + total + " รายการ";
-  //   else
-  return start + "-" + end + " ใน " + total;
-};
-
 const resetFilter = () => {
   // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
   filter.value = "";
@@ -351,33 +282,4 @@ const getClass = (val: boolean) => {
   };
 };
 </script>
-<style lang="scss">
-.icon-color {
-  color: #4154b3;
-}
-.custom-header-table {
-  .q-table tr:nth-child(odd) td {
-    background: white;
-  }
-  .q-table tr:nth-child(even) td {
-    background: #f8f8f8;
-  }
-
-  .q-table thead tr {
-    background: #ecebeb;
-  }
-
-  .q-table thead tr th {
-    position: sticky;
-    z-index: 1;
-  }
-  /* this will be the loading indicator */
-  .q-table thead tr:last-child th {
-    /* height of all previous header rows */
-    top: 48px;
-  }
-  .q-table thead tr:first-child th {
-    top: 0;
-  }
-}
-</style>
+<style lang="scss"></style>
diff --git a/src/modules/05_placement/components/OrderPlacement/step/step03.vue b/src/modules/05_placement/components/OrderPlacement/step/step03.vue
index f826a28e6..8d58d929e 100644
--- a/src/modules/05_placement/components/OrderPlacement/step/step03.vue
+++ b/src/modules/05_placement/components/OrderPlacement/step/step03.vue
@@ -46,18 +46,12 @@
           />
         </div>
       </div>
-      <q-table
-        flat
-        bordered
-        dense
+      <d-table
         :rows="rows"
         :columns="columns"
         :visible-columns="visibleColumns"
         :filter="filter"
         row-key="name"
-        class="custom-header-table"
-        :pagination-label="paginationLabel"
-        v-model:pagination="pagination"
       >
         <template v-slot:header="props">
           <q-tr :props="props">
@@ -127,18 +121,7 @@
             </q-td>
           </q-tr>
         </template>
-        <template v-slot:pagination="scope">
-          <q-pagination
-            v-model="pagination.page"
-            color="primary"
-            :max="scope.pagesNumber"
-            :max-pages="5"
-            size="sm"
-            boundary-links
-            direction-links
-          ></q-pagination>
-        </template>
-      </q-table>
+      </d-table>
     </div>
     <q-separator />
     <div class="flex justify-end q-pa-sm q-gutter-sm">
@@ -245,10 +228,7 @@
                   />
                 </div>
               </div>
-              <q-table
-                flat
-                bordered
-                dense
+              <d-table
                 :rows="rowsModal"
                 :columns="columnsModal"
                 :visible-columns="visibleColumnsModal"
@@ -256,9 +236,6 @@
                 row-key="name"
                 selection="multiple"
                 v-model:selected="selectedModal"
-                class="custom-header-table"
-                :pagination-label="paginationLabel"
-                v-model:pagination="paginationModal"
               >
                 <template v-slot:header-selection="scope">
                   <q-checkbox
@@ -303,18 +280,7 @@
                     </div>
                   </q-td>
                 </template>
-                <template v-slot:pagination="scope">
-                  <q-pagination
-                    v-model="paginationModal.page"
-                    color="primary"
-                    :max="scope.pagesNumber"
-                    :max-pages="5"
-                    size="sm"
-                    boundary-links
-                    direction-links
-                  ></q-pagination>
-                </template>
-              </q-table>
+              </d-table>
             </div>
           </div>
         </q-card-section>
@@ -715,34 +681,4 @@ const onSelected = async (id: string) => {
 
 const deleteData = async (id: string) => {};
 </script>
-<style lang="scss">
-.icon-color {
-  color: #4154b3;
-}
-.custom-header-table {
-  height: auto;
-  .q-table tr:nth-child(odd) td {
-    background: white;
-  }
-  .q-table tr:nth-child(even) td {
-    background: #f8f8f8;
-  }
-
-  .q-table thead tr {
-    background: #ecebeb;
-  }
-
-  .q-table thead tr th {
-    position: sticky;
-    z-index: 1;
-  }
-  /* this will be the loading indicator */
-  .q-table thead tr:last-child th {
-    /* height of all previous header rows */
-    top: 48px;
-  }
-  .q-table thead tr:first-child th {
-    top: 0;
-  }
-}
-</style>
+<style lang="scss"></style>
diff --git a/src/modules/05_placement/components/OrderPlacement/step/step04.vue b/src/modules/05_placement/components/OrderPlacement/step/step04.vue
index 62502cd72..d7521a80d 100644
--- a/src/modules/05_placement/components/OrderPlacement/step/step04.vue
+++ b/src/modules/05_placement/components/OrderPlacement/step/step04.vue
@@ -439,9 +439,7 @@ onMounted(async () => {
   //     myEventHandler(e);
   //   });
 
-  const pdfData = usePDF(
-    "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
-  );
+  const pdfData = usePDF("/src/assets/05_modules.pdf");
 
   setTimeout(() => {
     pdfSrc.value = pdfData.pdf.value;
diff --git a/src/modules/05_placement/components/PersonalDetail/Detail.vue b/src/modules/05_placement/components/PersonalDetail/Detail.vue
index 826e1226a..fe0949eef 100644
--- a/src/modules/05_placement/components/PersonalDetail/Detail.vue
+++ b/src/modules/05_placement/components/PersonalDetail/Detail.vue
@@ -101,6 +101,13 @@ onMounted(async () => {
   await changeTab("information");
 });
 
+const guidCheck = (id: string) => {
+  if (id == "00000000-0000-0000-0000-000000000000") {
+    return null;
+  }
+  return id;
+};
+
 const fetchData = async () => {
   showLoader();
   await http
@@ -118,11 +125,12 @@ const fetchData = async () => {
       InformationData.value.lastname = data.lastname;
       InformationData.value.nationality = data.nationality;
       InformationData.value.race = data.race;
-      InformationData.value.genderId = data.genderId;
-      InformationData.value.prefixId = data.prefixId;
-      InformationData.value.relationshipId = data.relationshipId;
-      InformationData.value.religionId = data.religionId;
-      InformationData.value.bloodGroupId = data.bloodGroupId;
+      InformationData.value.genderId = guidCheck(data.genderId) ?? "";
+      InformationData.value.prefixId = guidCheck(data.prefixId) ?? "";
+      InformationData.value.relationshipId =
+        guidCheck(data.relationshipId) ?? "";
+      InformationData.value.religionId = guidCheck(data.religionId) ?? "";
+      InformationData.value.bloodGroupId = guidCheck(data.bloodGroupId) ?? "";
       InformationData.value.dateOfBirth = new Date(data.dateOfBirth);
       InformationData.value.age = data.age;
       InformationData.value.telephone = data.telephone;
@@ -131,33 +139,39 @@ const fetchData = async () => {
       AddressData.value.currentAddress = data.currentAddress ?? "";
       AddressData.value.registSame = data.registSame ? "1" : "0";
       AddressData.value.registSubDistrict = data.registSubDistrict ?? "";
-      AddressData.value.registSubDistrictId = data.registSubDistrictId ?? "";
+      AddressData.value.registSubDistrictId =
+        guidCheck(data.registSubDistrictId) ?? "";
       AddressData.value.registZipCode = data.registZipCode ?? "";
       AddressData.value.registDistrict = data.registDistrict ?? "";
-      AddressData.value.registDistrictId = data.registDistrictId ?? "";
+      AddressData.value.registDistrictId =
+        guidCheck(data.registDistrictId) ?? "";
       AddressData.value.registProvince = data.registProvince ?? "";
-      AddressData.value.registProvinceId = data.registProvinceId ?? "";
+      AddressData.value.registProvinceId =
+        guidCheck(data.registProvinceId) ?? "";
       AddressData.value.currentSubDistrict = data.currentSubDistrict ?? "";
-      AddressData.value.currentSubDistrictId = data.currentSubDistrictId ?? "";
+      AddressData.value.currentSubDistrictId =
+        guidCheck(data.currentSubDistrictId) ?? "";
       AddressData.value.currentZipCode = data.currentZipCode ?? "";
       AddressData.value.currentDistrict = data.currentDistrict ?? "";
-      AddressData.value.currentDistrictId = data.currentDistrictId ?? "";
+      AddressData.value.currentDistrictId =
+        guidCheck(data.currentDistrictId) ?? "";
       AddressData.value.currentProvince = data.currentProvince ?? "";
-      AddressData.value.currentProvinceId = data.currentProvinceId ?? "";
+      AddressData.value.currentProvinceId =
+        guidCheck(data.currentProvinceId) ?? "";
 
       FamilyData.value.couple = data.couple ? "1" : "0";
       FamilyData.value.marryPrefix = data.marryPrefix ?? "";
-      FamilyData.value.marryPrefixId = data.marryPrefixId ?? "";
+      FamilyData.value.marryPrefixId = guidCheck(data.marryPrefixId) ?? "";
       FamilyData.value.marryFirstName = data.marryFirstName ?? "";
       FamilyData.value.marryLastName = data.marryLastName ?? "";
       FamilyData.value.marryOccupation = data.marryOccupation ?? "";
       FamilyData.value.fatherPrefix = data.fatherPrefix ?? "";
-      FamilyData.value.fatherPrefixId = data.fatherPrefixId ?? "";
+      FamilyData.value.fatherPrefixId = guidCheck(data.fatherPrefixId) ?? "";
       FamilyData.value.fatherFirstName = data.fatherFirstName ?? "";
       FamilyData.value.fatherLastName = data.fatherLastName ?? "";
       FamilyData.value.fatherOccupation = data.fatherOccupation ?? "";
       FamilyData.value.motherPrefix = data.motherPrefix ?? "";
-      FamilyData.value.motherPrefixId = data.motherPrefixId ?? "";
+      FamilyData.value.motherPrefixId = guidCheck(data.motherPrefixId) ?? "";
       FamilyData.value.motherFirstName = data.motherFirstName ?? "";
       FamilyData.value.motherLastName = data.motherLastName ?? "";
       FamilyData.value.motherOccupation = data.motherOccupation ?? "";
@@ -179,8 +193,9 @@ const fetchData = async () => {
       let listRow: Education[] = [];
       data.education.map((row: any) => {
         listRow.push({
-          id: row.id ?? "",
+          id: guidCheck(row.id) ?? "",
           educationLevel: row.educationLevel ?? "",
+          educationLevelId: guidCheck(row.educationLevelId) ?? "",
           institute: row.institute ?? "",
           degree: row.degree ?? "",
           field: row.field ?? "",
@@ -191,11 +206,11 @@ const fetchData = async () => {
           fundName: row.fundName ?? "",
           durationYear: row.durationYear ?? 0,
           finishDate: row.finishDate ?? new Date(),
-          isDate: row.isDate ?? "",
-          startDate: row.startDate ? new Date(row.startDate).getFullYear() : 0,
-          endDate: row.endDate ? new Date(row.endDate).getFullYear() : 0,
+          isDate: row.isDate ? "true" : "false",
+          startDate: row.startDate ? new Date(row.startDate) : new Date(),
+          endDate: row.endDate ? new Date(row.endDate) : new Date(),
           positionPath: row.positionPath ?? "",
-          isEducation: row.isEducation ?? "",
+          isEducation: row.isEducation ? true : false,
         });
       });
       EducationData.value = listRow;
@@ -204,8 +219,8 @@ const fetchData = async () => {
 
       data.certificates.map((row: any) => {
         listCert.push({
-          id: row.id ?? "",
-          certificateNo: row.certificateNo ?? "",
+          id: guidCheck(row.id) ?? "",
+          certificateNo: guidCheck(row.certificateNo) ?? "",
           issuer: row.issuer ?? "",
           issueDate: new Date(row.issueDate) ?? new Date(),
           expireDate: new Date(row.expireDate) ?? new Date(),
diff --git a/src/modules/05_placement/components/PersonalDetail/DialogFooter.vue b/src/modules/05_placement/components/PersonalDetail/DialogFooter.vue
index ff597bd8f..991f13be7 100644
--- a/src/modules/05_placement/components/PersonalDetail/DialogFooter.vue
+++ b/src/modules/05_placement/components/PersonalDetail/DialogFooter.vue
@@ -4,6 +4,7 @@ const props = defineProps({
   next: Boolean,
   previous: Boolean,
   modalEdit: Boolean,
+  delete: Boolean,
   clickNext: {
     type: Function,
     default: () => console.log("not function"),
@@ -67,57 +68,64 @@ const clickPrevious = async () => {
 </script>
 <template>
   <q-card-actions class="text-primary q-py-sm">
-    <q-btn 
-      flat round 
-      icon="mdi-menu-left" 
-      @click="clickPrevious" 
-      v-if="modalEdit == true" 
+    <q-btn
+      flat
+      round
+      icon="mdi-menu-left"
+      @click="clickPrevious"
+      v-if="modalEdit == true"
       :disable="previous == false"
-      :color="!previous ? 'grey-7' : 'public'" />
-    <q-btn 
-      flat round 
-      icon="mdi-menu-right" 
-      @click="clickNext" 
-      v-if="modalEdit == true" :disable="next == false"
-      :color="!next ? 'grey-7' : 'public'" />
+      :color="!previous ? 'grey-7' : 'public'"
+    />
+    <q-btn
+      flat
+      round
+      icon="mdi-menu-right"
+      @click="clickNext"
+      v-if="modalEdit == true"
+      :disable="next == false"
+      :color="!next ? 'grey-7' : 'public'"
+    />
     <q-space />
-    <q-btn 
-      v-if="modalEdit == true" 
+    <q-btn
+      v-if="modalEdit == true"
       unelevated
       label="ลบข้อมูล"
-      color="red" 
-      @click="clickDelete" 
+      color="red"
+      @click="clickDelete"
       ><!-- icon="mdi-delete"
       <q-tooltip>ลบข้อมูล</q-tooltip> -->
     </q-btn>
-    <q-btn 
+    <q-btn
       v-show="editvisible"
-      flat 
-      :disabled="!editvisible" 
-      :outline="!editvisible" 
+      flat
+      :disabled="!editvisible"
+      :outline="!editvisible"
       :color="!editvisible ? 'grey-7' : 'red'"
-      @click="cancel()" 
+      @click="cancel()"
       label="ยกเลิกแก้ไข"
-      v-if="modalEdit == true">
+      v-if="modalEdit == true"
+    >
       <!-- icon="mdi-undo"
       <q-tooltip>ยกเลิก</q-tooltip> -->
     </q-btn>
-    <q-btn 
-      v-if="!editvisible" 
+    <q-btn
+      v-if="!editvisible"
       outline
       label="แก้ไขข้อมูล"
-      :disabled="editvisible" 
+      :disabled="editvisible"
       :color="editvisible ? 'grey-7' : 'primary'"
-      @click="edit"> 
+      @click="edit"
+    >
       <!-- icon="mdi-pencil-outline"
       <q-tooltip></q-tooltip> -->
     </q-btn>
-    
-    <q-btn 
+
+    <q-btn
       v-if="editvisible"
       unelevated
-      :disabled="!editvisible" 
-      :color="!editvisible ? 'grey-7' : 'public'" 
+      :disabled="!editvisible"
+      :color="!editvisible ? 'grey-7' : 'public'"
       @click="checkSave"
       label="บันทึก"
       ><!-- icon="mdi-content-save-outline"
diff --git a/src/modules/05_placement/components/PersonalDetail/Education.vue b/src/modules/05_placement/components/PersonalDetail/Education.vue
index 79e71af58..63d80dd03 100644
--- a/src/modules/05_placement/components/PersonalDetail/Education.vue
+++ b/src/modules/05_placement/components/PersonalDetail/Education.vue
@@ -57,6 +57,8 @@ const OpsFilter = ref<EduOps>({
   levelOptions: [],
   positionPathOptions: [],
 });
+const isDate = ref<string>("true");
+const isEducation = ref<boolean>();
 const positionPathId = ref<string>();
 const institute = ref<string>();
 const degree = ref<string>();
@@ -69,7 +71,9 @@ const other = ref<string>();
 const fundName = ref<string>();
 const finishDate = ref<Date>(new Date());
 const startDate = ref<number>(new Date().getFullYear());
+const startDate2 = ref<Date>(new Date());
 const endDate = ref<number>(new Date().getFullYear());
+const endDate2 = ref<Date>(new Date());
 const minDate = ref<Date>();
 const myForm = ref<any>(); //form data input
 const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
@@ -80,13 +84,9 @@ const rowIndex = ref<number>(0); //indexข้อมูลเดิมที่
 const previous = ref<boolean>(); //แสดงปุ่มดูข้อมูลก่อนหน้า
 const next = ref<boolean>(); //แสดงปุ่มดูข้อมูลต่อไป
 const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
-const rowsHistory = ref<RequestItemsObject[]>([]); //select data history
-const tittleHistory = ref<string>("ประวัติแก้ไขประวัติการศึกษา"); //
-const filterHistory = ref<string>(""); //search data table history
-const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
+
 const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
-const profileId = ref<string>("");
-// const profileId = ref<string>(route.params.id.toString());
+
 const rows = ref<Education[]>(props.data);
 const filter = ref<string>(""); //search data table
 const visibleColumns = ref<String[]>([]);
@@ -102,7 +102,7 @@ profileData.education.columns.length == 0
       "durationYear",
       "other",
       "fundName",
-      "positionPath",
+      //   "positionPath",
       "finishDate",
       "startDate",
       "endDate",
@@ -164,17 +164,17 @@ const columns = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
-  {
-    name: "positionPath",
-    align: "left",
-    label: "เป็นวุฒิการศึกษาในตำแหน่ง",
-    sortable: true,
-    field: "positionPath",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
+  //   {
+  //     name: "positionPath",
+  //     align: "left",
+  //     label: "เป็นวุฒิการศึกษาในตำแหน่ง",
+  //     sortable: true,
+  //     field: "positionPath",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //     sort: (a: string, b: string) =>
+  //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  //   },
   {
     name: "degree",
     align: "left",
@@ -264,202 +264,6 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-const columnsHistory = ref<QTableProps["columns"]>([
-  {
-    name: "level",
-    align: "left",
-    label: "ระดับศึกษา",
-    sortable: true,
-    field: "level",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "institute",
-    align: "left",
-    label: "สถานศึกษา",
-    sortable: true,
-    field: "institute",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "startDate",
-    align: "left",
-    label: "ตั้งแต่",
-    sortable: true,
-    field: "startDate",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "endDate",
-    align: "left",
-    label: "ถึง",
-    sortable: true,
-    field: "endDate",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "finishDate",
-    align: "left",
-    label: "วันที่สำเร็จการศึกษา",
-    sortable: true,
-    field: "finishDate",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "positionPath",
-    align: "left",
-    label: "เป็นวุฒิการศึกษาในตำแหน่ง",
-    sortable: true,
-    field: "positionPath",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "degree",
-    align: "left",
-    label: "วุฒิการศึกษา",
-    sortable: true,
-    field: "degree",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "field",
-    align: "left",
-    label: "สาขาวิชา/ทาง",
-    sortable: true,
-    field: "field",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "fundName",
-    align: "left",
-    label: "ทุน",
-    sortable: true,
-    field: "fundName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "gpa",
-    align: "left",
-    label: "เกรดเฉลี่ย",
-    sortable: true,
-    field: "gpa",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "country",
-    align: "left",
-    label: "ประเทศ",
-    sortable: true,
-    field: "country",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "other",
-    align: "left",
-    label: "ข้อมูลการติดต่อ",
-    sortable: true,
-    field: "other",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "duration",
-    align: "left",
-    label: "ระยะเวลา",
-    sortable: true,
-    field: "duration",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "durationYear",
-    align: "left",
-    label: "ระยะเวลาหลักสูตร",
-    sortable: true,
-    field: "durationYear",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "createdFullName",
-    align: "left",
-    label: "ผู้ดำเนินการ",
-    sortable: true,
-    field: "createdFullName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "createdAt",
-    align: "left",
-    label: "วันที่แก้ไข",
-    sortable: true,
-    field: "createdAt",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-]);
-const visibleColumnsHistory = ref<String[]>([
-  "level",
-  "institute",
-  "degree",
-  "field",
-  "gpa",
-  "country",
-  "duration",
-  "durationYear",
-  "other",
-  "positionPath",
-  "fundName",
-  "finishDate",
-  "startDate",
-  "endDate",
-  "createdFullName",
-  "createdAt",
-]);
 
 watch(startDate, (count, prevCount) => {
   minDate.value = new Date(`${startDate.value}-01-01`);
@@ -498,24 +302,30 @@ const fetchLevel = async () => {
 };
 
 const fetchPositionPath = async () => {
-  showLoader();
-  await http
-    .get(config.API.positionPath)
-    .then((res) => {
-      const data = res.data.result;
-      let option: optionData[] = [];
-      data.map((r: optionData) => {
-        option.push({ id: r.id.toString(), name: r.name.toString() });
-      });
-      Ops.value.positionPathOptions = option;
-      OpsFilter.value.positionPathOptions = option;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
+  let option: any = [];
+  option.push({ id: true, name: "ใช่" });
+  option.push({ id: false, name: "ไม่ใช่" });
+  Ops.value.positionPathOptions = option;
+  OpsFilter.value.positionPathOptions = option;
+  /////////////////////////////////
+  //   showLoader();
+  //   await http
+  //     .get(config.API.positionPath)
+  //     .then((res) => {
+  //       const data = res.data.result;
+  //       let option: optionData[] = [];
+  //       data.map((r: optionData) => {
+  //         option.push({ id: r.id.toString(), name: r.name.toString() });
+  //       });
+  //       Ops.value.positionPathOptions = option;
+  //       OpsFilter.value.positionPathOptions = option;
+  //     })
+  //     .catch((e) => {
+  //       messageError($q, e);
+  //     })
+  //     .finally(() => {
+  //       hideLoader();
+  //     });
 };
 
 const filterSelector = (val: any, update: Function, refData: string) => {
@@ -565,18 +375,11 @@ const clickNext = async () => {
  */
 const getData = () => {
   const row = rows.value[rowIndex.value];
-  const filter = OpsFilter.value.levelOptions.filter(
-    (r: any) => r.name == row.educationLevel
-  );
-  const filterPositionPath = OpsFilter.value.positionPathOptions.filter(
-    (r: any) => r.name == row.positionPath
-  );
-  const result = filter.length > 0 ? filter[0].id : "";
-  const resultPath =
-    filterPositionPath.length > 0 ? filterPositionPath[0].id : "";
 
-  levelId.value = result;
-  positionPathId.value = resultPath;
+  levelId.value = row.educationLevelId;
+  isDate.value = row.isDate;
+  isEducation.value = row.isEducation;
+  //   positionPathId.value = resultPath;
   institute.value = row.institute;
   degree.value = row.degree;
   field.value = row.field;
@@ -587,8 +390,17 @@ const getData = () => {
   other.value = row.other;
   fundName.value = row.fundName;
   finishDate.value = row.finishDate;
-  startDate.value = row.startDate;
-  endDate.value = row.endDate;
+  startDate.value =
+    row.isDate == "false"
+      ? new Date(row.startDate).getFullYear()
+      : new Date().getFullYear();
+  endDate.value =
+    row.isDate == "false"
+      ? new Date(row.endDate).getFullYear()
+      : new Date().getFullYear();
+  startDate2.value =
+    row.isDate == "true" ? new Date(row.startDate) : new Date();
+  endDate2.value = row.isDate == "true" ? new Date(row.endDate) : new Date();
   id.value = row.id;
 };
 
@@ -660,8 +472,15 @@ const saveData = async () => {
       other: other.value,
       fundName: fundName.value,
       finishDate: dateToISO(finishDate.value),
-      startDate: new Date(`${startDate.value}-01-01`),
-      endDate: new Date(`${endDate.value}-01-01`),
+      startDate:
+        isDate.value == "true"
+          ? new Date(startDate2.value)
+          : new Date(`${startDate.value}-01-01`),
+      endDate:
+        isDate.value == "true"
+          ? new Date(endDate2.value)
+          : new Date(`${endDate.value}-01-01`),
+      isDate: isDate.value == "true",
     })
     .then((res) => {
       success($q, "บันทึกข้อมูลสำเร็จ");
@@ -703,8 +522,15 @@ const editData = async () => {
       other: other.value,
       fundName: fundName.value,
       finishDate: new Date(finishDate.value),
-      startDate: new Date(`${startDate.value}-01-01`),
-      endDate: new Date(`${endDate.value}-01-01`),
+      startDate:
+        isDate.value == "true"
+          ? new Date(startDate2.value)
+          : new Date(`${startDate.value}-01-01`),
+      endDate:
+        isDate.value == "true"
+          ? new Date(endDate2.value)
+          : new Date(`${endDate.value}-01-01`),
+      isDate: isDate.value == "true",
     })
     .then((res) => {
       success($q, "บันทึกข้อมูลสำเร็จ");
@@ -780,24 +606,14 @@ const clickClose = async () => {
  * @param _props ค่า props ใน row ที่เลือก
  */
 const selectData = async (_props: DataProps) => {
-  const filter = OpsFilter.value.levelOptions.filter(
-    (r: any) => r.name == _props.row.educationLevel
-  );
-  const filterPositionPath = OpsFilter.value.positionPathOptions.filter(
-    (r: any) => r.name == _props.row.positionPath
-  );
-  const result = filter.length > 0 ? filter[0].id : "";
-  const resultPath =
-    filterPositionPath.length > 0 ? filterPositionPath[0].id : "";
-
   //   console.log(_props.row);
   modalEdit.value = true;
   modal.value = true;
   edit.value = false;
   rawItem.value = _props.row;
   rowIndex.value = _props.rowIndex;
-  levelId.value = result;
-  positionPathId.value = resultPath;
+  levelId.value = _props.row.educationLevelId;
+  //   positionPathId.value = resultPath;
   //   levelId.value = _props.row.levelId;
   //   positionPathId.value = _props.row.positionPathId;
   institute.value = _props.row.institute;
@@ -810,9 +626,13 @@ const selectData = async (_props: DataProps) => {
   other.value = _props.row.other;
   fundName.value = _props.row.fundName;
   finishDate.value = _props.row.finishDate;
-  startDate.value = _props.row.startDate;
-  endDate.value = _props.row.endDate;
+  startDate.value = new Date(_props.row.startDate).getFullYear();
+  endDate.value = new Date(_props.row.endDate).getFullYear();
+  startDate2.value = new Date(_props.row.startDate);
+  endDate2.value = new Date(_props.row.endDate);
   id.value = _props.row.id;
+  isDate.value = _props.row.isDate;
+  isEducation.value = _props.row.isEducation;
   await checkRowPage();
 };
 
@@ -837,6 +657,8 @@ const addData = () => {
   finishDate.value = new Date();
   startDate.value = new Date().getFullYear();
   endDate.value = new Date().getFullYear();
+  startDate2.value = new Date();
+  endDate2.value = new Date();
 };
 
 /**
@@ -868,50 +690,6 @@ const clickEditRow = () => {
   editRow.value = true;
 };
 
-/**
- * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
- * @param row ข้อมูล row ที่ดูประวัติการแก้ไข
- */
-const clickHistory = async (row: RequestItemsObject) => {
-  modalHistory.value = true;
-  showLoader();
-  await http
-    .get(config.API.profileEduHisId(row.id))
-    .then((res) => {
-      let data = res.data.result;
-      rowsHistory.value = [];
-      data.map((e: ResponseObject) => {
-        rowsHistory.value.push({
-          id: e.id,
-          level: e.educationLevel,
-          levelId: e.educationLevelId,
-          positionPath: e.positionPath,
-          positionPathId: e.positionPathId,
-          institute: e.institute,
-          degree: e.degree,
-          field: e.field,
-          gpa: e.gpa,
-          country: e.country,
-          duration: e.duration,
-          durationYear: e.durationYear,
-          other: e.other,
-          fundName: e.fundName,
-          finishDate: new Date(e.finishDate),
-          startDate: new Date(e.startDate).getFullYear(),
-          endDate: new Date(e.endDate).getFullYear(),
-          createdFullName: e.createdFullName,
-          createdAt: new Date(e.createdAt),
-        });
-      });
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
 /**
  * validate input ใน dialog
  */
@@ -956,14 +734,18 @@ const getClass = (val: boolean) => {
               v-for="col in props.cols"
               :key="col.name"
               :props="props"
-              @click="selectData(props)"
               class="cursor-pointer"
+              @click="selectData(props)"
             >
               <div
                 v-if="col.name == 'startDate' || col.name == 'endDate'"
                 class="table_ellipsis"
               >
-                {{ col.value + 543 }}
+                {{
+                  props.row.isDate == "true"
+                    ? date2Thai(col.value)
+                    : new Date(col.value).getFullYear() + 543
+                }}
               </div>
               <div v-else-if="col.name == 'finishDate'" class="table_ellipsis">
                 {{ date2Thai(col.value) }}
@@ -972,7 +754,7 @@ const getClass = (val: boolean) => {
                 {{ col.value }}
               </div>
             </q-td>
-            <q-td auto-width>
+            <!-- <q-td auto-width>
               <q-btn
                 color="info"
                 flat
@@ -982,13 +764,12 @@ const getClass = (val: boolean) => {
                 icon="mdi-history"
                 @click="clickHistory(props.row)"
               />
-            </q-td>
+            </q-td> -->
           </q-tr>
         </template>
       </ProfileTable>
     </q-form>
   </q-card>
-  <!-- popup Edit window-->
   <q-dialog v-model="modal" persistent>
     <q-card style="width: 600px">
       <q-form ref="myForm">
@@ -1038,94 +819,219 @@ const getClass = (val: boolean) => {
                 @update:modelValue="clickEditRow"
               />
             </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <datepicker
-                menu-class-name="modalfix"
-                :readonly="!edit"
-                v-model="startDate"
-                :locale="'th'"
-                autoApply
-                year-picker
-                :enableTimePicker="false"
-                @update:modelValue="clickEditRow"
-                week-start="0"
-              >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    :class="getClass(edit)"
-                    :outlined="edit"
+            <div class="col-12">
+              <q-card flat bordered class="q-px-sm q-pb-sm borderCard">
+                <div class="row col-12 q-gutter-md q-py-sm text-grey-7">
+                  <q-radio
+                    v-model="isDate"
+                    checked-icon="task_alt"
+                    unchecked-icon="panorama_fish_eye"
+                    val="false"
+                    label="ปี"
                     dense
-                    lazy-rules
-                    :borderless="!edit"
-                    :model-value="startDate + 543"
-                    :rules="[(val) => !!val || `${'กรุณาเลือกปีตั้งแต่'}`]"
-                    hide-bottom-space
-                    :label="`${'ตั้งแต่'}`"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        :style="
-                          edit
-                            ? 'color: var(--q-primary)'
-                            : 'color: var(--q-grey)'
-                        "
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <datepicker
-                menu-class-name="modalfix"
-                v-model="endDate"
-                :locale="'th'"
-                autoApply
-                year-picker
-                :enableTimePicker="false"
-                :min-date="minDate"
-                :readonly="!edit"
-                @update:modelValue="clickEditRow"
-                week-start="0"
-              >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    :class="getClass(edit)"
-                    :outlined="edit"
+                    :disable="!edit"
+                  />
+                  <q-radio
+                    v-model="isDate"
+                    checked-icon="task_alt"
+                    unchecked-icon="panorama_fish_eye"
+                    val="true"
+                    label="วัน/เดือน/ปี"
                     dense
-                    lazy-rules
-                    :borderless="!edit"
-                    :model-value="endDate + 543"
-                    :rules="[(val) => !!val || `${'กรุณาเลือกปีถึง'}`]"
-                    hide-bottom-space
-                    :label="`${'ถึง'}`"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        :style="
-                          edit
-                            ? 'color: var(--q-primary)'
-                            : 'color: var(--q-grey)'
-                        "
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
+                    :disable="!edit"
+                  />
+                </div>
+                <div class="col-12 row q-col-gutter-sm">
+                  <div class="col-xs-6 col-sm-6 col-md-6">
+                    <datepicker
+                      v-if="isDate === 'false'"
+                      menu-class-name="modalfix"
+                      :readonly="!edit"
+                      v-model="startDate"
+                      :locale="'th'"
+                      autoApply
+                      year-picker
+                      :enableTimePicker="false"
+                      @update:modelValue="clickEditRow"
+                      week-start="0"
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          :class="getClass(edit)"
+                          :outlined="edit"
+                          dense
+                          lazy-rules
+                          :borderless="!edit"
+                          :model-value="startDate + 543"
+                          :rules="[
+                            (val) =>
+                              !!val || `${'กรุณาเลือกปีที่เริ่มต้นศึกษา'}`,
+                          ]"
+                          hide-bottom-space
+                          :label="`${'ปีที่เริ่มต้นศึกษา'}`"
+                        >
+                          <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              :style="
+                                edit
+                                  ? 'color: var(--q-primary)'
+                                  : 'color: var(--q-grey)'
+                              "
+                            >
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                    <datepicker
+                      v-else
+                      menu-class-name="modalfix"
+                      :readonly="!edit"
+                      v-model="startDate2"
+                      :locale="'th'"
+                      autoApply
+                      :enableTimePicker="false"
+                      @update:modelValue="clickEditRow"
+                      week-start="0"
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          :class="getClass(edit)"
+                          :outlined="edit"
+                          dense
+                          lazy-rules
+                          :borderless="!edit"
+                          :model-value="date2Thai(startDate2)"
+                          :rules="[
+                            (val) =>
+                              !!val ||
+                              `${'กรุณาเลือกวัน เดือน ปี ที่เริ่มต้นศึกษา'}`,
+                          ]"
+                          hide-bottom-space
+                          :label="`${'วัน เดือน ปี ที่เริ่มต้นศึกษา'}`"
+                        >
+                          <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              :style="
+                                edit
+                                  ? 'color: var(--q-primary)'
+                                  : 'color: var(--q-grey)'
+                              "
+                            >
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                  </div>
+                  <div class="col-xs-6 col-sm-6 col-md-6">
+                    <datepicker
+                      v-if="isDate === 'false'"
+                      menu-class-name="modalfix"
+                      v-model="endDate"
+                      :locale="'th'"
+                      autoApply
+                      year-picker
+                      :enableTimePicker="false"
+                      :min-date="minDate"
+                      :readonly="!edit"
+                      @update:modelValue="clickEditRow"
+                      week-start="0"
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          :class="getClass(edit)"
+                          :outlined="edit"
+                          dense
+                          lazy-rules
+                          :borderless="!edit"
+                          :model-value="endDate + 543"
+                          :rules="[
+                            (val) => !!val || `${'กรุณาเลือกปีที่จบการศึกษา'}`,
+                          ]"
+                          hide-bottom-space
+                          :label="`${'ปีที่จบการศึกษา'}`"
+                        >
+                          <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              :style="
+                                edit
+                                  ? 'color: var(--q-primary)'
+                                  : 'color: var(--q-grey)'
+                              "
+                            >
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                    <datepicker
+                      v-else
+                      menu-class-name="modalfix"
+                      :readonly="!edit"
+                      v-model="endDate2"
+                      :locale="'th'"
+                      autoApply
+                      :enableTimePicker="false"
+                      @update:modelValue="clickEditRow"
+                      week-start="0"
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          :class="getClass(edit)"
+                          :outlined="edit"
+                          dense
+                          lazy-rules
+                          :borderless="!edit"
+                          :model-value="date2Thai(endDate2)"
+                          :rules="[
+                            (val) =>
+                              !!val ||
+                              `${'กรุณาเลือกวัน เดือน ปี ที่จบการศึกษา'}`,
+                          ]"
+                          hide-bottom-space
+                          :label="`${'วัน เดือน ปี ที่จบการศึกษา'}`"
+                        >
+                          <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              :style="
+                                edit
+                                  ? 'color: var(--q-primary)'
+                                  : 'color: var(--q-grey)'
+                              "
+                            >
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                  </div>
+                </div>
+              </q-card>
             </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
               <datepicker
@@ -1172,7 +1078,7 @@ const getClass = (val: boolean) => {
                 </template>
               </datepicker>
             </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
+            <!-- <div class="col-xs-6 col-sm-6 col-md-6">
               <selector
                 :class="getClass(edit)"
                 :outlined="edit"
@@ -1180,8 +1086,7 @@ const getClass = (val: boolean) => {
                 lazy-rules
                 :readonly="!edit"
                 :borderless="!edit"
-                v-model="positionPathId"
-                :rules="[(val:string) => !!val || `${'กรุณาเลือกเป็นวุฒิการศึกษาในตำแหน่ง'}`]"
+                v-model="isEducation"
                 hide-bottom-space
                 :label="`${'เป็นวุฒิการศึกษาในตำแหน่ง'}`"
                 @update:modelValue="clickEditRow"
@@ -1196,7 +1101,7 @@ const getClass = (val: boolean) => {
                       doneFn:Function) => filterSelector(inputValue, doneFn,'positionPathOptions'
                       ) "
               />
-            </div>
+            </div> -->
             <div class="col-xs-6 col-sm-6 col-md-6">
               <q-input
                 :class="getClass(edit)"
@@ -1326,6 +1231,7 @@ const getClass = (val: boolean) => {
           :clickNext="clickNext"
           :clickPrevious="clickPrevious"
           :clickDelete="clickDelete"
+          :delete="isEducation"
           v-model:editvisible="edit"
           v-model:next="next"
           v-model:previous="previous"
@@ -1334,38 +1240,6 @@ const getClass = (val: boolean) => {
       </q-form>
     </q-card>
   </q-dialog>
-  <HistoryTable
-    :rows="rowsHistory"
-    :columns="columnsHistory"
-    :filter="filterHistory"
-    :visible-columns="visibleColumnsHistory"
-    v-model:modal="modalHistory"
-    v-model:inputfilter="filterHistory"
-    v-model:inputvisible="visibleColumnsHistory"
-    v-model:tittle="tittleHistory"
-  >
-    <template #columns="props">
-      <q-tr :props="props">
-        <q-td v-for="col in props.cols" :key="col.name" :props="props">
-          <div
-            v-if="col.name == 'startDate' || col.name == 'endDate'"
-            class="table_ellipsis"
-          >
-            {{ col.value + 543 }}
-          </div>
-          <div
-            v-else-if="col.name == 'finishDate' || col.name == 'createdAt'"
-            class="table_ellipsis"
-          >
-            {{ date2Thai(col.value) }}
-          </div>
-          <div v-else class="table_ellipsis">
-            {{ col.value }}
-          </div>
-        </q-td>
-      </q-tr>
-    </template>
-  </HistoryTable>
 </template>
 
 <style lang="scss">
diff --git a/src/modules/05_placement/components/PersonalDetail/Information/Certicate.vue b/src/modules/05_placement/components/PersonalDetail/Information/Certicate.vue
index 67cddd1f7..000bb85d5 100644
--- a/src/modules/05_placement/components/PersonalDetail/Information/Certicate.vue
+++ b/src/modules/05_placement/components/PersonalDetail/Information/Certicate.vue
@@ -601,7 +601,7 @@ const getClass = (val: boolean) => {
                 {{ col.value }}
               </div>
             </q-td>
-            <q-td auto-width>
+            <!-- <q-td auto-width>
               <q-btn
                 color="info"
                 flat
@@ -611,7 +611,7 @@ const getClass = (val: boolean) => {
                 icon="mdi-history"
                 @click="clickHistory(props.row)"
               />
-            </q-td>
+            </q-td> -->
           </q-tr>
         </template>
       </ProfileTable>
diff --git a/src/modules/05_placement/components/PersonalList/OrgTree.vue b/src/modules/05_placement/components/PersonalList/OrgTree.vue
index 62a7439cb..b6c6bb520 100644
--- a/src/modules/05_placement/components/PersonalList/OrgTree.vue
+++ b/src/modules/05_placement/components/PersonalList/OrgTree.vue
@@ -75,7 +75,7 @@ const loadTreeData = async () => {
 };
 
 function filterByPersonIdNull(obj: any) {
-  if (obj.name === null) {
+  if (obj.name === null && obj.isCondition != true) {
     return true;
   }
   if (obj.children && obj.children.length > 0) {
diff --git a/src/modules/05_placement/components/PersonalList/TableView.vue b/src/modules/05_placement/components/PersonalList/TableView.vue
index aaba97e94..3ebfec1b4 100644
--- a/src/modules/05_placement/components/PersonalList/TableView.vue
+++ b/src/modules/05_placement/components/PersonalList/TableView.vue
@@ -23,7 +23,7 @@
               <q-table ref="table" flat bordered class="custom-header-table" v-bind="attrs" virtual-scroll
                 :virtual-scroll-sticky-size-start="48" dense :pagination-label="paginationLabel" v-model:pagination="pagination">
                 <template v-slot:pagination="scope">
-                  <q-pagination v-model="pagination.page" color="primary" :max="scope.pagesNumber" :max-pages="5" size="sm"
+                  <q-pagination v-model="pagination.page" active-color="primary" color="dark" :max="scope.pagesNumber" :max-pages="5" size="sm"
                     boundary-links direction-links></q-pagination>
                 </template>
                 <template v-slot:header="props">
diff --git a/src/modules/05_placement/interface/index/Main.ts b/src/modules/05_placement/interface/index/Main.ts
index 481331322..873c03362 100644
--- a/src/modules/05_placement/interface/index/Main.ts
+++ b/src/modules/05_placement/interface/index/Main.ts
@@ -84,6 +84,7 @@ interface PointExam {
 interface Education {
   id: string;
   educationLevel: string;
+  educationLevelId: string;
   institute: string;
   degree: string;
   field: string;
@@ -95,10 +96,10 @@ interface Education {
   durationYear: number;
   finishDate: Date;
   isDate: string;
-  startDate: number;
-  endDate: number;
+  startDate: Date;
+  endDate: Date;
   positionPath: string;
-  isEducation: string;
+  isEducation: boolean;
 }
 
 interface Family {
diff --git a/src/modules/05_placement/interface/request/Education.ts b/src/modules/05_placement/interface/request/Education.ts
index f1d755e51..63bc67e28 100644
--- a/src/modules/05_placement/interface/request/Education.ts
+++ b/src/modules/05_placement/interface/request/Education.ts
@@ -7,6 +7,7 @@ interface DataProps {
 interface RequestItemsObject {
   id: string;
   educationLevel: string;
+  educationLevelId: string;
   level: string;
   levelId: string;
   positionPath: string;
@@ -25,6 +26,8 @@ interface RequestItemsObject {
   endDate: number;
   createdFullName: string;
   createdAt: Date;
+  isDate: string;
+  isEducation: boolean;
 }
 
 //columns
diff --git a/src/modules/06_retirement/views/Main.vue b/src/modules/06_retirement/views/Main.vue
index 5b6cd79c2..37712b229 100644
--- a/src/modules/06_retirement/views/Main.vue
+++ b/src/modules/06_retirement/views/Main.vue
@@ -2,168 +2,169 @@
   <div class="toptitle text-dark col-12 row items-center">
     ประกาศเกษียณอายุราชการ
   </div>
-  <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
-    <div class="row q-col-gutter-sm">
-      <div class="row col-12 q-col-gutter-sm">
-        <q-select
-          class="col-xs-12 col-sm-3 col-md-1"
-          v-model="fiscalyear"
-          label="ปีงบประมาณ"
-          dense
-          emit-value
-          map-options
-          :options="fiscalyearOP"
-          option-value="id"
-          option-label="name"
-          lazy-rules
-          hide-bottom-space
-          :readonly="false"
-          :borderless="false"
-          :outlined="true"
-          :hide-dropdown-icon="false"
-          @update:model-value="searchFilterTable"
-        />
-        <div>
-          <q-btn
-            @click="clickAdd()"
-            size="12px"
-            flat
-            round
-            color="add"
-            icon="mdi-plus"
-          >
-            <q-tooltip>เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ</q-tooltip>
-          </q-btn>
-          <q-menu>
-            <q-list style="min-width: 100px">
-              <q-item clickable @click="clickAdd">
-                <q-item-section>ขรก.กทม.สามัญ</q-item-section>
-              </q-item>
-              <q-item clickable @click="clickAdd">
-                <q-item-section>ลูกจ้างประจำ</q-item-section>
-              </q-item>
-            </q-list>
-          </q-menu>
-        </div>
-        <q-space />
-
-        <q-input
-          class="col-xs-12 col-sm-3 col-md-2"
-          standout
-          dense
-          v-model="filterKeyword"
-          ref="filterRef"
-          outlined
-          debounce="300"
-          placeholder="ค้นหา"
-        >
-          <template v-slot:append>
-            <q-icon v-if="filterKeyword == ''" name="search" />
-            <q-icon
-              v-if="filterKeyword !== ''"
-              name="clear"
-              class="cursor-pointer"
-              @click="resetFilter"
-            />
-          </template>
-        </q-input>
-
-        <q-select
-          v-model="visibleColumns"
-          multiple
-          outlined
-          dense
-          options-dense
-          :display-value="$q.lang.table.columns"
-          emit-value
-          map-options
-          :options="columns"
-          option-value="name"
-          options-cover
-          style="min-width: 150px"
-          class="col-xs-12 col-sm-3 col-md-2"
-        />
-      </div>
-      <div class="col-12">
-        <div class="q-pa-sm">
-          <q-tabs
-            v-model="tab"
+  <q-card flat bordered class="col-12 q-mt-sm">
+    <div class="row col-12">
+      <q-tabs
+        v-model="tab"
+        dense
+        class="text-grey"
+        active-color="primary"
+        active-class="bg-teal-1"
+        indicator-color="primary"
+        align="left"
+      >
+        <q-tab name="samun" label="ขรก.กทม.สามัญ" />
+        <q-tab name="employee" label="ลูกจ้างประจำ" />
+      </q-tabs>
+    </div>
+    <q-separator/>
+    <div class="col-12 row q-pa-md">
+      <div class="row col-12">
+        <div class="row col-12 q-col-gutter-sm">
+          <q-select
+            v-model="fiscalyear"
+            label="ปีงบประมาณ"
             dense
-            class="text-grey"
-            active-color="primary"
-            indicator-color="primary"
-            align="left"
-            narrow-indicator
-          >
-            <q-tab name="samun" label="ขรก.กทม.สามัญ" />
-            <q-tab name="employee" label="ลูกจ้างประจำ" />
-          </q-tabs>
-        </div>
+            emit-value
+            map-options
+            :options="fiscalyearOP"
+            option-value="id"
+            option-label="name"
+            lazy-rules
+            hide-bottom-space
+            :readonly="false"
+            :borderless="false"
+            :outlined="true"
+            :hide-dropdown-icon="false"
+            style="min-width: 150px;"
+            @update:model-value="searchFilterTable"
+          />
+          <div>
+            <q-btn
+              @click="clickAdd()"
+              size="12px"
+              flat
+              round
+              color="add"
+              icon="mdi-plus"
+            >
+              <q-tooltip>เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ</q-tooltip>
+            </q-btn>
+            <!-- <q-menu>
+              <q-list style="min-width: 100px">
+                <q-item clickable @click="clickAdd">
+                  <q-item-section>ขรก.กทม.สามัญ</q-item-section>
+                </q-item>
+                <q-item clickable @click="clickAdd">
+                  <q-item-section>ลูกจ้างประจำ</q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu> -->
+          </div>
+          <q-space />
 
-        <q-space />
-        <q-table
-          ref="table"
-          :columns="columns"
-          :rows="rows"
-          :filter="filterKeyword"
-          row-key="name"
-          flat
-          bordered
-          :paging="true"
-          dense
-          class="custom-header-table"
-          v-bind="attrs"
-          :visible-columns="visibleColumns"
-          :pagination-label="paginationLabel"
-          v-model:pagination="pagination"
-        >
-          <template v-slot:header="props">
-            <q-tr :props="props">
-              <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                <span class="text-weight-medium">{{ col.label }}</span>
-              </q-th>
-              <q-th auto-width />
-            </q-tr>
-          </template>
-          <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer">
-              <q-td key="no" :props="props">
-                {{ props.rowIndex + 1 }}
-              </q-td>
-              <q-td key="Date" :props="props">
-                {{ props.row.Date }}
-              </q-td>
-              <q-td key="retireNumber" :props="props">
-                {{ props.row.retireNumber }}
-              </q-td>
-              <q-td auto-width>
-                <q-btn
-                  dense
-                  size="12px"
-                  flat
-                  round
-                  color="red"
-                  @click="clickDelete(props.row.id)"
-                  icon="mdi-delete"
-                >
-                  <q-tooltip>ลบข้อมูล</q-tooltip>
-                </q-btn>
-              </q-td>
-            </q-tr>
-          </template>
-          <template v-slot:pagination="scope">
-            <q-pagination
-              v-model="pagination.page"
-              active-color="primary"
-              color="primary"
-              :max="scope.pagesNumber"
-              :max-pages="5"
-              size="sm"
-              boundary-links
-              direction-links
-            ></q-pagination>
-          </template>
-        </q-table>
+          <q-input
+            class="col-xs-12 col-sm-3 col-md-2"
+            standout
+            dense
+            v-model="filterKeyword"
+            ref="filterRef"
+            outlined
+            debounce="300"
+            placeholder="ค้นหา"
+          >
+            <template v-slot:append>
+              <q-icon v-if="filterKeyword == ''" name="search" />
+              <q-icon
+                v-if="filterKeyword !== ''"
+                name="clear"
+                class="cursor-pointer"
+                @click="resetFilter"
+              />
+            </template>
+          </q-input>
+
+          <q-select
+            v-model="visibleColumns"
+            multiple
+            outlined
+            dense
+            options-dense
+            :display-value="$q.lang.table.columns"
+            emit-value
+            map-options
+            :options="columns"
+            option-value="name"
+            options-cover
+            style="min-width: 150px"
+            class="col-xs-12 col-sm-3 col-md-2"
+          />
+        </div>
+        <div class="col-12 q-pt-sm">
+          <q-table
+            ref="table"
+            :columns="columns"
+            :rows="rows"
+            :filter="filterKeyword"
+            row-key="name"
+            flat
+            bordered
+            :paging="true"
+            dense
+            class="custom-header-table"
+            v-bind="attrs"
+            :visible-columns="visibleColumns"
+            :pagination-label="paginationLabel"
+            v-model:pagination="pagination"
+          >
+            <template v-slot:header="props">
+              <q-tr :props="props">
+                <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                  <span class="text-weight-medium">{{ col.label }}</span>
+                </q-th>
+                <q-th auto-width />
+              </q-tr>
+            </template>
+            <template v-slot:body="props">
+              <q-tr :props="props" class="cursor-pointer">
+                <q-td key="no" :props="props">
+                  {{ props.rowIndex + 1 }}
+                </q-td>
+                <q-td key="Date" :props="props">
+                  {{ props.row.Date }}
+                </q-td>
+                <q-td key="retireNumber" :props="props">
+                  {{ props.row.retireNumber }}
+                </q-td>
+                <q-td auto-width>
+                  <q-btn
+                    dense
+                    size="12px"
+                    flat
+                    round
+                    color="red"
+                    @click="clickDelete(props.row.id)"
+                    icon="mdi-delete"
+                  >
+                    <q-tooltip>ลบข้อมูล</q-tooltip>
+                  </q-btn>
+                </q-td>
+              </q-tr>
+            </template>
+            <template v-slot:pagination="scope">
+              <q-pagination
+                v-model="pagination.page"
+                active-color="primary"
+                color="primary"
+                :max="scope.pagesNumber"
+                :max-pages="5"
+                size="sm"
+                boundary-links
+                direction-links
+              ></q-pagination>
+            </template>
+          </q-table>
+        </div>
       </div>
     </div>
   </q-card>
@@ -176,8 +177,6 @@ import type {
   FormMainProbation,
   FormMainProbation2,
 } from "@/modules/05_placement/interface/request/Main";
-import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
-import router from "@/router";
 import { useQuasar } from "quasar";
 
 const $q = useQuasar(); //ใช้ noti quasar
diff --git a/src/modules/07_insignia/components/Coin.vue b/src/modules/07_insignia/components/Coin.vue
new file mode 100644
index 000000000..ca851d7bd
--- /dev/null
+++ b/src/modules/07_insignia/components/Coin.vue
@@ -0,0 +1,516 @@
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    <!-- <q-btn
+        icon="mdi-arrow-left"
+        unelevated
+        round
+        dense
+        flat
+        color="primary"
+        class="q-mr-sm"
+        @click="router.go(-1)"
+      /> -->
+    ประวัติการยื่นขอพระราชทานเหรียญจักรพรรดิมาลา
+  </div>
+  <q-card flat bordered class="col-12 q-my-md q-mt-sm rounded-borders">
+    <q-tabs
+      v-model="tab"
+      align="left"
+      class="bg-white text-grey"
+      active-color="primary"
+      indicator-color="primary"
+    >
+      <q-tab name="yes" label="คนที่ยื่นขอ" />
+      <q-tab name="no" label="คนที่ไม่ยื่นขอ" />
+    </q-tabs>
+    <q-separator />
+    <div class="q-py-md q-px-lg">
+      <!-- <div>
+        <label class="q-mr-sm">รอบ</label>
+        <q-btn
+          flat
+          round
+          de
+          color="grey"
+          icon="mdi-menu-left"
+          :class="getArrow(arrow)"
+          @click="clickRound"
+        />
+      </div>
+      <Transition>
+        <div v-if="arrow" class="bg-base rounded-borders q-pa-md">
+          <div class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md">
+            <div class="col-xs-6 col-md-2">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="dateGoverment"
+                :locale="'th'"
+                autoApply
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    class="full-width datepicker bg-white"
+                    :model-value="
+                      dateGoverment != null ? date2Thai(dateGoverment) : null
+                    "
+                    :label="`${'วันที่ประกาศราชกิจจานุเบกษา'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-xs-6 col-md-2">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="dateReceiver"
+                :locale="'th'"
+                autoApply
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    class="full-width datepicker bg-white"
+                    :model-value="
+                      dateReceiver != null ? date2Thai(dateReceiver) : null
+                    "
+                    :label="`${'วันที่ได้รับ'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-xs-6 col-md-2">
+              <q-input
+                class="bg-white"
+                outlined
+                dense
+                lazy-rules
+                v-model="issue"
+                :label="`${'ฉบับ'}`"
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-xs-6 col-md-2">
+              <q-input
+                class="bg-white"
+                outlined
+                dense
+                lazy-rules
+                v-model="book"
+                :label="`${'เล่มที่'}`"
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-xs-6 col-md-2">
+              <q-input
+                class="bg-white"
+                outlined
+                dense
+                lazy-rules
+                v-model="volume"
+                :label="`${'เล่ม'}`"
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-xs-6 col-md-2">
+              <q-input
+                class="bg-white"
+                outlined
+                dense
+                lazy-rules
+                v-model="section"
+                :label="`${'ตอนที่'}`"
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-xs-12 col-md-6">
+              <q-file
+                class="bg-white"
+                outlined
+                dense
+                v-model="government"
+                label="ราชกิจจานุเบกษา"
+                hide-bottom-space
+                lazy-rules
+              >
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" color="primary" />
+                </template>
+              </q-file>
+            </div>
+            <div class="col-xs-12 col-md-6">
+              <q-file
+                class="bg-white"
+                outlined
+                dense
+                v-model="document"
+                label="เอกสารประกอบ"
+                hide-bottom-space
+                lazy-rules
+              >
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" color="primary" />
+                </template>
+              </q-file>
+            </div>
+          </div>
+        </div>
+      </Transition> -->
+      <div :class="marginTop(arrow)">
+        <div class="col-12 row q-pb-sm items-center">
+          <selector
+            outlined
+            dense
+            lazy-rules
+            v-model="capYears"
+            hide-bottom-space
+            :label="`${'ปีงบประมาณ'}`"
+            emit-value
+            map-options
+            option-label="name"
+            :options="capYearsOption"
+            option-value="id"
+            use-input
+            input-debounce="0"
+            style="min-width: 150px"
+            class="gt-xs q-ml-sm"
+            @filter="(inputValue:string,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'capYearsOption'
+                        ) "
+          />
+          <q-space />
+          <div class="items-center" style="display: flex">
+            <!-- ค้นหาข้อความใน table -->
+            <q-input
+              standout
+              dense
+              v-model="filter"
+              ref="filterRef"
+              outlined
+              debounce="300"
+              placeholder="ค้นหา"
+              style="max-width: 200px"
+              class="q-ml-sm"
+            >
+              <template v-slot:append>
+                <q-icon v-if="filter == ''" name="search" />
+                <q-icon
+                  v-if="filter !== ''"
+                  name="clear"
+                  class="cursor-pointer"
+                  @click="resetFilter"
+                />
+              </template>
+            </q-input>
+            <!-- แสดงคอลัมน์ใน table -->
+            <q-select
+              v-model="visibleColumns"
+              :display-value="$q.lang.table.columns"
+              multiple
+              outlined
+              dense
+              :options="columns"
+              options-dense
+              option-value="name"
+              map-options
+              emit-value
+              style="min-width: 150px"
+              class="gt-xs q-ml-sm"
+            />
+          </div>
+        </div>
+        <d-table
+          :rows="rows"
+          :columns="columns"
+          :visible-columns="visibleColumns"
+          :filter="filter"
+          row-key="name"
+        >
+          <template v-slot:body-cell="props">
+            <q-td :props="props">
+              <div v-if="props.col.name == 'no'">
+                {{ props.rowIndex + 1 }}
+              </div>
+
+              <div v-else>
+                {{ props.value }}
+              </div>
+            </q-td>
+          </template>
+        </d-table>
+      </div>
+    </div>
+  </q-card>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+// import { useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+
+import type { DataOption } from "@/modules/05_placement/interface/index/Main";
+import type { QTableProps, QInput } from "quasar";
+
+// const router = useRouter();
+const mixin = useCounterMixin();
+const { date2Thai } = mixin;
+
+const tab = ref<string>("yes");
+const arrow = ref<boolean>(false);
+
+// const dateGoverment = ref<Date>(new Date());
+// const dateReceiver = ref<Date>(new Date());
+// const issue = ref<string>("");
+// const book = ref<string>("");
+// const volume = ref<string>("");
+// const section = ref<string>("");
+// const government = ref<any>(null);
+// const document = ref<any>(null);
+
+const capYears = ref<string>("");
+const capYearsOption = ref<DataOption[]>([]);
+const capYearsOptionFilter = ref<DataOption[]>([]);
+
+const visibleColumns = ref<String[]>([
+  "no",
+  "cardid",
+  "name",
+  "position",
+  "range",
+  "salary",
+  "zone",
+  "school",
+  "date",
+]);
+const filterRef = ref<QInput>();
+const filter = ref<string>("");
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    field: "no",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "cardid",
+    align: "left",
+    label: "เลขประจำตัวประชาชน",
+    field: "cardid",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อ - นามสกุล",
+    field: "name",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่ง",
+    field: "position",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "range",
+    align: "left",
+    label: "อันดับ",
+    field: "range",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "salary",
+    align: "left",
+    label: "เงินเดือน",
+    field: "salary",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "zone",
+    align: "left",
+    label: "เขต",
+    field: "zone",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "school",
+    align: "left",
+    label: "โรงเรียน",
+    field: "school",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "date",
+    align: "left",
+    label: "วันที่ยื่นขอ",
+    field: "date",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const rows = ref<any>([
+  {
+    no: "1",
+    cardid: "1XXXXXXXXXXXX",
+    name: "นางสาวรัชภรณ์ ภักดี",
+    position: "กกก",
+    range: "1",
+    salary: "XXXXXX",
+    zone: "1",
+    school: "โรงเรียน",
+    date: date2Thai(new Date()),
+  },
+  {
+    no: "2",
+    cardid: "1XXXXXXXXXXXX",
+    name: "นางสาวรัชภรณ์ ภักดี",
+    position: "กกก",
+    range: "1",
+    salary: "XXXXXX",
+    zone: "1",
+    school: "โรงเรียน",
+    date: date2Thai(new Date()),
+  },
+  {
+    no: "3",
+    cardid: "1XXXXXXXXXXXX",
+    name: "นางสาวรัชภรณ์ ภักดี",
+    position: "กกก",
+    range: "1",
+    salary: "XXXXXX",
+    zone: "1",
+    school: "โรงเรียน",
+    date: date2Thai(new Date()),
+  },
+]);
+
+onMounted(() => {
+  const op2: DataOption[] = [
+    { id: "1", name: "2566" },
+    { id: "2", name: "2565" },
+    { id: "3", name: "2564" },
+  ];
+
+  capYearsOption.value = op2;
+  capYearsOptionFilter.value = op2;
+});
+
+const clickRound = () => {
+  arrow.value = !arrow.value;
+};
+
+const resetFilter = () => {
+  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
+  filter.value = "";
+  filterRef.value!.focus();
+};
+
+const filterSelector = (val: any, update: Function, filtername: string) => {
+  switch (filtername) {
+    case "capYearsOption":
+      update(() => {
+        capYearsOption.value = capYearsOptionFilter.value.filter(
+          (v: DataOption) => v.name!.indexOf(val) > -1
+        );
+      });
+      break;
+
+    default:
+      break;
+  }
+};
+
+// const getArrow = (val: boolean) => {
+//   return {
+//     "arrow cursor-pointer": !val,
+//     "arrow-active cursor-pointer": val,
+//   };
+// };
+
+const marginTop = (val: boolean) => {
+  return {
+    "": !val,
+    "q-mt-md": val,
+  };
+};
+</script>
+<style lang="scss" scoped>
+.arrow {
+  transition: transform 0.5s;
+}
+
+.arrow-active {
+  transition: transform 0.5s;
+  transform: rotate(-90deg);
+}
+
+.bg-base {
+  background-color: #efefef;
+}
+
+.v-enter-active,
+.v-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/src/modules/07_insignia/components/ResultInsignia.vue b/src/modules/07_insignia/components/ResultInsignia.vue
new file mode 100644
index 000000000..5cae3b3c6
--- /dev/null
+++ b/src/modules/07_insignia/components/ResultInsignia.vue
@@ -0,0 +1,502 @@
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    <!-- <q-btn
+      icon="mdi-arrow-left"
+      unelevated
+      round
+      dense
+      flat
+      color="primary"
+      class="q-mr-sm"
+      @click="router.go(-1)"
+    /> -->
+    บันทึกผลการได้รับพระราชทานเครื่องราชย์อิสริยสภรณ์
+  </div>
+  <q-card flat bordered class="col-12 q-my-md q-mt-sm rounded-borders">
+    <q-tabs
+      v-model="tab"
+      align="left"
+      class="bg-white text-grey"
+      active-color="primary"
+      indicator-color="primary"
+    >
+      <q-tab name="hight" label="ขั้นสายสะพาน" />
+      <q-tab name="low" label="ขั้นต่ำกว่าสายสะพาน" />
+    </q-tabs>
+    <q-separator />
+    <div class="q-py-md q-px-lg">
+      <div>
+        <label class="q-mr-sm">รอบ</label>
+        <q-btn
+          flat
+          round
+          de
+          color="grey"
+          icon="mdi-menu-left"
+          :class="getArrow(arrow)"
+          @click="clickRound"
+        />
+      </div>
+      <Transition>
+        <div v-if="arrow" class="bg-base rounded-borders q-pa-md">
+          <div class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md">
+            <div class="col-xs-6 col-md-2">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="dateGoverment"
+                :locale="'th'"
+                autoApply
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    class="full-width datepicker bg-white"
+                    :model-value="
+                      dateGoverment != null ? date2Thai(dateGoverment) : null
+                    "
+                    :label="`${'วันที่ประกาศราชกิจจานุเบกษา'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-xs-6 col-md-2">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="dateReceiver"
+                :locale="'th'"
+                autoApply
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    class="full-width datepicker bg-white"
+                    :model-value="
+                      dateReceiver != null ? date2Thai(dateReceiver) : null
+                    "
+                    :label="`${'วันที่ได้รับ'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-xs-6 col-md-2">
+              <q-input
+                class="bg-white"
+                outlined
+                dense
+                lazy-rules
+                v-model="issue"
+                :label="`${'ฉบับ'}`"
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-xs-6 col-md-2">
+              <q-input
+                class="bg-white"
+                outlined
+                dense
+                lazy-rules
+                v-model="book"
+                :label="`${'เล่มที่'}`"
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-xs-6 col-md-2">
+              <q-input
+                class="bg-white"
+                outlined
+                dense
+                lazy-rules
+                v-model="volume"
+                :label="`${'เล่ม'}`"
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-xs-6 col-md-2">
+              <q-input
+                class="bg-white"
+                outlined
+                dense
+                lazy-rules
+                v-model="section"
+                :label="`${'ตอนที่'}`"
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-xs-12 col-md-6">
+              <q-file
+                class="bg-white"
+                outlined
+                dense
+                v-model="government"
+                label="ราชกิจจานุเบกษา"
+                hide-bottom-space
+                lazy-rules
+              >
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" color="primary" />
+                </template>
+              </q-file>
+            </div>
+            <div class="col-xs-12 col-md-6">
+              <q-file
+                class="bg-white"
+                outlined
+                dense
+                v-model="document"
+                label="เอกสารประกอบ"
+                hide-bottom-space
+                lazy-rules
+              >
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" color="primary" />
+                </template>
+              </q-file>
+            </div>
+          </div>
+        </div>
+      </Transition>
+      <div :class="marginTop(arrow)">
+        <div class="col-12 row q-pb-sm items-center">
+          <selector
+            outlined
+            dense
+            lazy-rules
+            v-model="selectType"
+            hide-bottom-space
+            :label="`${'ประเภทเครื่องราชฯ'}`"
+            emit-value
+            map-options
+            option-label="name"
+            :options="selectTypeOption"
+            option-value="id"
+            use-input
+            input-debounce="0"
+            style="min-width: 150px"
+            class="gt-xs q-ml-sm"
+            @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'selectTypeOption'
+                      ) "
+          />
+          <selector
+            outlined
+            dense
+            lazy-rules
+            v-model="selectStatus"
+            hide-bottom-space
+            :label="`${'สถานะการบันทึก'}`"
+            emit-value
+            map-options
+            option-label="name"
+            :options="selectStatusOption"
+            option-value="id"
+            use-input
+            input-debounce="0"
+            style="min-width: 150px"
+            class="gt-xs q-ml-sm"
+            @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'selectStatusOption'
+                      ) "
+          />
+          <q-space />
+          <div class="items-center" style="display: flex">
+            <!-- ค้นหาข้อความใน table -->
+            <q-input
+              standout
+              dense
+              v-model="filter"
+              ref="filterRef"
+              outlined
+              debounce="300"
+              placeholder="ค้นหา"
+              style="max-width: 200px"
+              class="q-ml-sm"
+            >
+              <template v-slot:append>
+                <q-icon v-if="filter == ''" name="search" />
+                <q-icon
+                  v-if="filter !== ''"
+                  name="clear"
+                  class="cursor-pointer"
+                  @click="resetFilter"
+                />
+              </template>
+            </q-input>
+            <!-- แสดงคอลัมน์ใน table -->
+            <q-select
+              v-model="visibleColumns"
+              :display-value="$q.lang.table.columns"
+              multiple
+              outlined
+              dense
+              :options="columns"
+              options-dense
+              option-value="name"
+              map-options
+              emit-value
+              style="min-width: 150px"
+              class="gt-xs q-ml-sm"
+            />
+          </div>
+        </div>
+        <d-table
+          :rows="rows"
+          :columns="columns"
+          :visible-columns="visibleColumns"
+          :filter="filter"
+          row-key="name"
+        >
+          <template v-slot:body-cell="props">
+            <q-td :props="props">
+              <div v-if="props.col.name == 'no'">
+                {{ props.rowIndex + 1 }}
+              </div>
+
+              <div v-else>
+                {{ props.value }}
+              </div>
+            </q-td>
+          </template>
+        </d-table>
+      </div>
+    </div>
+  </q-card>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+// import { useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+
+import type { DataOption } from "@/modules/05_placement/interface/index/Main";
+import type { QTableProps, QInput } from "quasar";
+
+// const router = useRouter();
+const mixin = useCounterMixin();
+const { date2Thai } = mixin;
+
+const tab = ref<string>("hight");
+const arrow = ref<boolean>(false);
+
+const dateGoverment = ref<Date>(new Date());
+const dateReceiver = ref<Date>(new Date());
+const issue = ref<string>("");
+const book = ref<string>("");
+const volume = ref<string>("");
+const section = ref<string>("");
+const government = ref<any>(null);
+const document = ref<any>(null);
+
+const selectStatus = ref<string>("");
+const selectStatusOption = ref<DataOption[]>([]);
+const selectStatusOptionFilter = ref<DataOption[]>([]);
+
+const selectType = ref<string>("");
+const selectTypeOption = ref<DataOption[]>([]);
+const selectTypeOptionFilter = ref<DataOption[]>([]);
+
+const visibleColumns = ref<String[]>([
+  "no",
+  "status",
+  "name",
+  "type",
+  "page",
+  "number",
+]);
+const filterRef = ref<QInput>();
+const filter = ref<string>("");
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    field: "no",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะ",
+    field: "status",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อ - สกุล",
+    field: "name",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "type",
+    align: "left",
+    label: "ประเภทเครื่องราชฯ",
+    field: "type",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "page",
+    align: "left",
+    label: "หน้าในราชกิจนุเบกษา",
+    field: "page",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "number",
+    align: "left",
+    label: "ลำดับที่ในราชกิจจานุเบกษา",
+    field: "number",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const rows = ref<any>([
+  {
+    no: "1",
+    status: "รอบันทึกข้อมูล",
+    name: "นางสาวรัชภรณ์ ภักดี",
+    type: "ทั้งหมด",
+    page: "8",
+    number: "11",
+  },
+  {
+    no: "2",
+    status: "บันทึกลง ก.พ. 7 แล้ว",
+    name: "นางสาวภาพรรณ ลออ",
+    type: "ทั้งหมด",
+    page: "12",
+    number: "11",
+  },
+]);
+
+onMounted(() => {
+  const op1: DataOption[] = [{ id: "1", name: "ทั้งหมด" }];
+  const op2: DataOption[] = [
+    { id: "1", name: "ทั้งหมด" },
+    { id: "2", name: "รอบันทึกข้อมูล" },
+    { id: "3", name: "บันทึกลง ก.พ. 7 แล้ว" },
+  ];
+  selectTypeOption.value = op1;
+  selectTypeOptionFilter.value = op1;
+  selectStatusOption.value = op2;
+  selectStatusOptionFilter.value = op2;
+});
+
+const clickRound = () => {
+  arrow.value = !arrow.value;
+};
+
+const resetFilter = () => {
+  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
+  filter.value = "";
+  filterRef.value!.focus();
+};
+
+const filterSelector = (val: any, update: Function, filtername: string) => {
+  switch (filtername) {
+    case "selectTypeOption":
+      update(() => {
+        selectTypeOption.value = selectTypeOptionFilter.value.filter(
+          (v: DataOption) => v.name!.indexOf(val) > -1
+        );
+      });
+      break;
+    case "selectStatusOption":
+      update(() => {
+        selectStatusOption.value = selectStatusOptionFilter.value.filter(
+          (v: DataOption) => v.name!.indexOf(val) > -1
+        );
+      });
+      break;
+
+    default:
+      break;
+  }
+};
+
+const getArrow = (val: boolean) => {
+  return {
+    "arrow cursor-pointer": !val,
+    "arrow-active cursor-pointer": val,
+  };
+};
+
+const marginTop = (val: boolean) => {
+  return {
+    "": !val,
+    "q-mt-md": val,
+  };
+};
+</script>
+<style lang="scss" scoped>
+.arrow {
+  transition: transform 0.5s;
+}
+
+.arrow-active {
+  transition: transform 0.5s;
+  transform: rotate(-90deg);
+}
+
+.bg-base {
+  background-color: #efefef;
+}
+
+.v-enter-active,
+.v-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/src/modules/07_insignia/router.ts b/src/modules/07_insignia/router.ts
index efa168707..5ffcbaecc 100644
--- a/src/modules/07_insignia/router.ts
+++ b/src/modules/07_insignia/router.ts
@@ -5,6 +5,9 @@
 const Main = () => import("@/modules/07_insignia/views/Main.vue");
 const ReportView = () => import("../07_insignia/components/report/ReportView.vue")
 const report_01 = () => import("../07_insignia/components/report/Report_01.vue")
+const ResultInsignia = () =>
+  import("@/modules/07_insignia/components/ResultInsignia.vue");
+const Coin = () => import("@/modules/07_insignia/components/Coin.vue");
 
 export default [
   {
@@ -24,6 +27,15 @@ export default [
     meta: {
       Auth: true,
       Key: [7.1],
+    },
+  },
+  {
+    path: "/insignia/result-insignia",
+    name: "result-insignia",
+    component: ResultInsignia,
+    meta: {
+      Auth: true,
+      Key: [7],
       Role: "insignia",
     },
   },
@@ -37,5 +49,14 @@ export default [
       Role: "insignia",
     },
   },
-
+  {
+    path: "/insignia/coin",
+    name: "coin",
+    component: Coin,
+    meta: {
+      Auth: true,
+      Key: [7],
+      Role: "insignia",
+    },
+  },
 ];
diff --git a/src/modules/07_insignia/views/1_Proposals/addProposals.vue b/src/modules/07_insignia/views/1_Proposals/addProposals.vue
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/modules/07_insignia/views/1_Proposals/listProposals.vue b/src/modules/07_insignia/views/1_Proposals/listProposals.vue
new file mode 100644
index 000000000..da8a7ef99
--- /dev/null
+++ b/src/modules/07_insignia/views/1_Proposals/listProposals.vue
@@ -0,0 +1,364 @@
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    รายการรอบการเสนอขอพระราชทานเครื่องราชอิสริยาภรณ์
+  </div>
+  <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
+    <div class="row q-col-gutter-sm">
+      <div class="row col-12 q-col-gutter-sm">
+        <div>
+          <q-btn
+            @click="clickAdd()"
+            size="12px"
+            flat
+            round
+            color="add"
+            icon="mdi-plus"
+          >
+            <q-tooltip>เพิ่มรายการรอบการเสนอขอ</q-tooltip>
+          </q-btn>
+        </div>
+        <q-space />
+
+        <q-input
+          class="col-xs-12 col-sm-3 col-md-2"
+          standout
+          dense
+          v-model="filterKeyword"
+          ref="filterRef"
+          outlined
+          debounce="300"
+          placeholder="ค้นหา"
+        >
+          <template v-slot:append>
+            <q-icon v-if="filterKeyword == ''" name="search" />
+            <q-icon
+              v-if="filterKeyword !== ''"
+              name="clear"
+              class="cursor-pointer"
+              @click="resetFilter"
+            />
+          </template>
+        </q-input>
+
+        <q-select
+          v-model="visibleColumns"
+          multiple
+          outlined
+          dense
+          options-dense
+          :display-value="$q.lang.table.columns"
+          emit-value
+          map-options
+          :options="columns"
+          option-value="name"
+          options-cover
+          style="min-width: 150px"
+          class="col-xs-12 col-sm-3 col-md-2"
+        />
+      </div>
+      <div class="col-12">
+        <q-table
+          ref="table"
+          :columns="columns"
+          :rows="rows"
+          :filter="filterKeyword"
+          row-key="Order"
+          flat
+          bordered
+          :paging="true"
+          dense
+          class="custom-header-table"
+          v-bind="attrs"
+          :visible-columns="visibleColumns"
+          :pagination-label="paginationLabel"
+          v-model:pagination="pagination"
+        >
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                <span class="text-weight-medium">{{ col.label }}</span>
+              </q-th>
+              <q-th auto-width />
+              <q-th auto-width />
+            </q-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td key="round" :props="props">
+                {{ props.row.round }}
+              </q-td>
+              <q-td key="year" :props="props">
+                {{ props.row.year }}
+              </q-td>
+              <q-td key="startDate" :props="props">
+                {{ props.row.startDate }}
+              </q-td>
+              <q-td key="endDate" :props="props">
+                {{ props.row.endDate }}
+              </q-td>
+              <q-td key="status" :props="props">
+                <q-icon
+                  v-if="props.row.status == 'ยังไม่ได้เสนอ'"
+                  name="mdi-close"
+                  color="grey-5"
+                  class="text-h5"
+                />
+                <q-icon
+                  v-else
+                  name="mdi-check"
+                  color="positive"
+                  class="text-h5"
+                />
+              </q-td>
+              <q-td auto-width>
+                <q-btn
+                  dense
+                  size="12px"
+                  flat
+                  round
+                  color="indigo"
+                  @click.stop.prevent="clickProposals(props.row.id)"
+                  icon="mdi-clipboard-arrow-down"
+                >
+                  <q-tooltip>ดาวน์โหลดเอกสารประกอบ</q-tooltip>
+                </q-btn>
+              </q-td>
+              <q-td auto-width>
+                <q-btn
+                  dense
+                  size="12px"
+                  flat
+                  round
+                  color="red"
+                  @click="clickDelete(props.row.id)"
+                  icon="mdi-delete"
+                >
+                  <q-tooltip>ลบข้อมูล</q-tooltip>
+                </q-btn>
+              </q-td>
+            </q-tr>
+          </template>
+          <template v-slot:pagination="scope">
+            <q-pagination
+              v-model="pagination.page"
+              active-color="primary"
+              color="dark"
+              :max="scope.pagesNumber"
+              :max-pages="5"
+              size="sm"
+              boundary-links
+              direction-links
+            ></q-pagination>
+          </template>
+        </q-table>
+      </div>
+    </div>
+  </q-card>
+</template>
+
+<script setup lang="ts">
+import { ref, useAttrs } from "vue";
+import type { QTableProps } from "quasar";
+import router from "@/router";
+import { useQuasar } from "quasar";
+
+const $q = useQuasar(); //ใช้ noti quasar
+const modal = ref<boolean>(false);
+const pagination = ref({
+  sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+
+const visibleColumns = ref<string[]>([
+  "round",
+  "year",
+  "startDate",
+  "endDate",
+  "status",
+]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+
+// หัวตาราง
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "round",
+    align: "left",
+    label: "รอบการเสนอขอพระราชทานเครื่องราชฯ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "year",
+    align: "left",
+    label: "ปีที่เสนอ",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "startDate",
+    align: "left",
+    label: "วันที่เริ่มต้น",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "endDate",
+    align: "left",
+    label: "วันที่สิ้นสุด",
+    sortable: true,
+    field: "level",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "institution",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+// ข้อมูลตาราง (จำลอง)
+const rows = ref<any[]>([
+  {
+    round: "รอบการเสนอขอพระราชทานเครื่องราชฯ",
+    year: "2566",
+    startDate: "2566",
+    endDate: "31 พ.ค. 2566",
+    status: "เสนอเเล้ว",
+  },
+  {
+    round: "รอบการเสนอขอพระราชทานเครื่องราชฯ",
+    year: "2566",
+    startDate: "2566",
+    endDate: "31 พ.ค. 2566",
+    status: "เสนอเเล้ว",
+  },
+  {
+    round: "รอบการเสนอขอพระราชทานเครื่องราชฯ",
+    year: "2566",
+    startDate: "2566",
+    endDate: "31 พ.ค. 2566",
+    status: "เสนอเเล้ว",
+  },
+  {
+    round: "รอบการเสนอขอพระราชทานเครื่องราชฯ",
+    year: "2566",
+    startDate: "2566",
+    endDate: "31 พ.ค. 2566",
+    status: "ยังไม่ได้เสนอ",
+  },
+  {
+    round: "รอบการเสนอขอพระราชทานเครื่องราชฯ",
+    year: "2566",
+    startDate: "2566",
+    endDate: "31 พ.ค. 2566",
+    status: "เสนอเเล้ว",
+  },
+]);
+
+// หัวตาราง2
+const clickDelete = (id: string) => {
+  $q.dialog({
+    title: "ยืนยันการลบข้อมูล",
+    message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
+    cancel: {
+      flat: true,
+      color: "negative",
+    },
+    persistent: true,
+  })
+    .onOk(async () => {})
+    .onCancel(() => {})
+    .onDismiss(() => {});
+};
+
+const clickAdd = () => {
+  modal.value = true;
+};
+const clickClose = async () => {
+  modal.value = false;
+};
+
+// ค้นหาในตาราง
+const filterKeyword = ref<string>("");
+const filterRef = ref<any>(null);
+const resetFilter = () => {
+  filterKeyword.value = "";
+  filterRef.value.focus();
+};
+
+const filterKeyword2 = ref<string>("");
+const filterRef2 = ref<any>(null);
+const resetFilter2 = () => {
+  filterKeyword2.value = "";
+  filterRef2.value.focus();
+};
+
+const attrs = ref<any>(useAttrs());
+
+const paging = ref<boolean>(true);
+const paginationLabel = (start: string, end: string, total: string) => {
+  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
+  else return start + "-" + end + " ใน " + total;
+};
+</script>
+
+<style lang="scss" scope>
+.filter-card {
+  background-color: #f1f1f1b0;
+}
+
+.toggle-expired-account {
+  font-size: 12px;
+  font-weight: 400;
+  font-size: 15px;
+  line-height: 150%;
+  color: #35373c;
+}
+
+.icon-color {
+  color: #4154b3;
+}
+
+.custom-header-table {
+  max-height: 64vh;
+
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+    z-index: 1;
+  }
+
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>
diff --git a/src/modules/08_registryEmployee/router.ts b/src/modules/08_registryEmployee/router.ts
index 198e2e745..2dd0550c8 100644
--- a/src/modules/08_registryEmployee/router.ts
+++ b/src/modules/08_registryEmployee/router.ts
@@ -14,7 +14,7 @@ const Detail = defineAsyncComponent(
 
 export default [
   {
-    path: "/registry-employee",
+    path: "/registryEmployee",
     name: "registryEmployee",
     component: Main,
     meta: {
diff --git a/src/modules/08_registryEmployee/views/Detail.vue b/src/modules/08_registryEmployee/views/Detail.vue
index 38dc15279..766423fb2 100644
--- a/src/modules/08_registryEmployee/views/Detail.vue
+++ b/src/modules/08_registryEmployee/views/Detail.vue
@@ -150,10 +150,10 @@
         <div class="row items-center text-dark q-ml-md">
           <div class="column">
             <div class="text-bold q-pb-xs text-name">
-              {{ "เพิ่มข้อมูลทะเบียนประวัติ" }}
+              เพิ่มข้อมูลทะเบียนประวัติ
             </div>
             <div class="text-bold q-pb-xs text-sub">
-              {{ "ลูกจ้างชั่วคราว" }}
+              ลูกจ้างชั่วคราว
             </div>
           </div>
         </div>
@@ -1000,12 +1000,12 @@ const Retire = async () => {
 }
 
 .text-name {
-  font-size: 1.5em;
+  font-size: 1.3em;
   overflow: hidden;
 }
 
 .text-sub {
-  font-size: 1.5em;
+  font-size: 1.2em;
   overflow: hidden;
   color: var(--q-primary);
 }
diff --git a/src/modules/08_registryEmployee/views/Main.vue b/src/modules/08_registryEmployee/views/Main.vue
index bd6806212..24c94dede 100644
--- a/src/modules/08_registryEmployee/views/Main.vue
+++ b/src/modules/08_registryEmployee/views/Main.vue
@@ -2,9 +2,8 @@
   <div class="toptitle text-dark col-12 row items-center">
     รายชื่อลูกจ้างชั่วคราว
   </div>
-  <div>
-    <div class="q-pa-md" style="min-height: 70vh; overflow-y: scroll">
-      <div class="col-12 row q-py-sm items-center">
+    <q-card flat bordered class="q-pa-md">
+      <div class="col-12 row items-center">
         <q-btn flat round color="primary" @click="clickAdd" icon="mdi-plus">
           <q-tooltip>เพิ่มข้อมูล</q-tooltip>
         </q-btn>
@@ -49,116 +48,111 @@
           />
         </div>
       </div>
-      <q-table
-        flat
-        bordered
-        dense
-        :rows="rows"
-        :columns="columns"
-        :visible-columns="visibleColumns"
-        :filter="filter"
-        row-key="name"
-        class="custom-header-table"
-        :pagination-label="paginationLabel"
-        v-model:pagination="pagination"
-      >
-        <template v-slot:header="props">
-          <q-tr :props="props">
-            <q-th v-for="col in props.cols" :key="col.name" :props="props">
-              <span class="text-weight-medium">{{ col.label }}</span>
-            </q-th>
-            <q-th auto-width />
-          </q-tr>
-        </template>
-        <template v-slot:body="props">
-          <q-tr :props="props" class="cursor-pointer">
-            <q-td key="no" :props="props">
-              {{ props.rowIndex + 1 }}
-            </q-td>
-            <q-td key="positionNum" :props="props">
-              {{ props.row.positionNum }}
-            </q-td>
-            <q-td key="name" :props="props">
-              {{ props.row.name }}
-            </q-td>
-            <q-td key="position" :props="props">
-              {{ props.row.position }}
-            </q-td>
-            <q-td key="path" :props="props">
-              {{ props.row.path }}
-            </q-td>
-            <q-td key="type" :props="props">
-              {{ props.row.type }}
-            </q-td>
-            <q-td key="level" :props="props">
-              {{ props.row.level }}
-            </q-td>
-            <q-td key="affiliation" :props="props">
-              {{ props.row.affiliation }}
-            </q-td>
-            <q-td key="yearly" :props="props">
-              {{ props.row.yearly }}
-            </q-td>
-            <q-td key="pay" :props="props">
-              {{ props.row.pay }}
-            </q-td>
-            <q-td auto-width>
-              <q-btn
-                icon="mdi-dots-vertical"
-                size="12px"
-                color="grey-7"
-                flat
-                round
-                dense
-              >
-                <q-menu transition-show="jump-down" transition-hide="jump-up">
-                  <q-list dense style="min-width: 150px">
-                    <q-item
-                      clickable
-                      v-close-popup
-                      @click="editDetail(props.row)"
-                    >
-                      <q-item-section
-                        style="min-width: 0px"
-                        avatar
-                        class="q-py-sm"
+      <div class="col-12 q-pt-sm">
+        <q-table
+          flat
+          bordered
+          dense
+          :rows="rows"
+          :columns="columns"
+          :visible-columns="visibleColumns"
+          :filter="filter"
+          row-key="name"
+          class="custom-header-table"
+          :pagination-label="paginationLabel"
+          v-model:pagination="pagination"
+        >
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                <span class="text-weight-medium">{{ col.label }}</span>
+              </q-th>
+              <q-th auto-width />
+            </q-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td key="no" :props="props">
+                {{ props.rowIndex + 1 }}
+              </q-td>
+              <q-td key="positionNum" :props="props">
+                {{ props.row.positionNum }}
+              </q-td>
+              <q-td key="name" :props="props">
+                {{ props.row.name }}
+              </q-td>
+              <q-td key="position" :props="props">
+                {{ props.row.position }}
+              </q-td>
+              <q-td key="path" :props="props">
+                {{ props.row.path }}
+              </q-td>
+              <q-td key="type" :props="props">
+                {{ props.row.type }}
+              </q-td>
+              <q-td key="level" :props="props">
+                {{ props.row.level }}
+              </q-td>
+              <q-td key="affiliation" :props="props">
+                {{ props.row.affiliation }}
+              </q-td>
+              <q-td key="yearly" :props="props">
+                {{ props.row.yearly }}
+              </q-td>
+              <q-td key="pay" :props="props">
+                {{ props.row.pay }}
+              </q-td>
+              <q-td auto-width>
+                <q-btn
+                  icon="mdi-dots-vertical"
+                  size="12px"
+                  color="grey-7"
+                  flat
+                  round
+                  dense
+                >
+                  <q-menu transition-show="jump-down" transition-hide="jump-up">
+                    <q-list dense style="min-width: 160px">
+                      <q-item
+                        clickable
+                        v-close-popup
+                        @click="editDetail(props.row)"
                       >
-                      </q-item-section>
-                      <q-item-section>กำหนดตำแหน่ง</q-item-section>
-                    </q-item>
-                    <q-separator />
-                        <q-item clickable v-close-popup @click="clickDelete('test')">
-                      <q-item-section
-                        style="min-width: 0px"
-                        avatar
-                        class="q-py-sm"
-                      >
-                      </q-item-section>
-                      <q-item-section>ลบ</q-item-section>
-                    </q-item>
+                        <q-item-section style="min-width: 0px" avatar class="q-py-sm">
+                          <q-icon color="blue" size="xs" name="mdi-account-settings" />
+                        </q-item-section>
+                        <q-item-section>กำหนดตำแหน่ง</q-item-section>
+                      </q-item>
+                      <q-separator />
+                      <q-item clickable v-close-popup @click="clickDelete('test')">
+                        <q-item-section style="min-width: 0px" avatar class="q-py-sm">
+                          <q-icon color="red" size="xs" name="mdi-delete" />
+                        </q-item-section>
+                        <q-item-section>ลบ</q-item-section>
+                      </q-item>
 
-                    <q-separator />
-                  </q-list>
-                </q-menu>
-              </q-btn>
-            </q-td>
-          </q-tr>
-        </template>
-        <template v-slot:pagination="scope">
-          <q-pagination
-            v-model="pagination.page"
-            color="primary"
-            :max="scope.pagesNumber"
-            :max-pages="5"
-            size="sm"
-            boundary-links
-            direction-links
-          ></q-pagination>
-        </template>
-      </q-table>
-    </div>
-    <q-separator />
-  </div>
+                      <q-separator />
+                    </q-list>
+                  </q-menu>
+                </q-btn>
+              </q-td>
+            </q-tr>
+          </template>
+          <template v-slot:pagination="scope">
+            <q-pagination
+              v-model="pagination.page"
+              active-color="primary"
+							color="dark"
+              :max="scope.pagesNumber"
+              :max-pages="5"
+              size="sm"
+              boundary-links
+              direction-links
+            ></q-pagination>
+          </template>
+        </q-table>
+      </div>
+    </q-card>
 </template>
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
diff --git a/src/style/quasar-variables.sass b/src/style/quasar-variables.sass
index 5e559d0cc..f2c3dc454 100644
--- a/src/style/quasar-variables.sass
+++ b/src/style/quasar-variables.sass
@@ -68,6 +68,9 @@ div
 
 $separator-color: #EDEDED !default
 
+.bg-teal-1
+  background: #e0f2f1a6 !important
+  
 .table_ellipsis
   max-width: 200px
   white-space: nowrap
diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue
index 76c07c0ea..d8d241366 100644
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@@ -559,7 +559,7 @@ if (keycloak.tokenParsed != null) {
                   v-ripple
                   :active="link === menuItem.label"
                   @click="link = menuItem.label"
-                  active-class="text-primary menuActiveMini"
+                  active-class="text-primary menuActiveMini text-weight-medium"
                   v-if="menuItem.key == 3 || menuItem.key == 5"
                 >
                   <div class="row items-center no-wrap">
@@ -939,7 +939,7 @@ if (keycloak.tokenParsed != null) {
   background: #1e2529d9;
 } */
 .font-400{
-  font-weight: 400 !important;
+  font-weight: 400 ;
 }
 .expan2 .menuSubHover {
   padding-left: 30%;