diff --git a/src/api/manage/api.insignia.ts b/src/api/manage/api.insignia.ts
index e23bee4f9..44342123e 100644
--- a/src/api/manage/api.insignia.ts
+++ b/src/api/manage/api.insignia.ts
@@ -7,6 +7,7 @@ const insignia = `${env.API_URI}/metadata/insignia/`;
 const insigniaType = `${env.API_URI}/metadata/insignia-type/`;
 const insigniaOrg = `${env.API_URI}/org/insignia/insignia/`;
 const insigniaTypeOrg = `${env.API_URI}/org/insignia/insignia-type/`;
+const insigniaReclaim = `${env.API_URI}/insignia/manage/reclaim`;
 
 export default {
   /**
@@ -47,4 +48,5 @@ export default {
   insigniaSortOrg: (id: string) => `${insigniaOrg}sort/${id}`,
 
   checkIsofficer: `${env.API_URI}/org/workflow/keycloak/isofficer/`,
+  insigniaReclaim,
 };
diff --git a/src/modules/07_insignia/components/7_Reclaim/DialogForm.vue b/src/modules/07_insignia/components/7_Reclaim/DialogForm.vue
index f716c4e1d..eafe5605f 100644
--- a/src/modules/07_insignia/components/7_Reclaim/DialogForm.vue
+++ b/src/modules/07_insignia/components/7_Reclaim/DialogForm.vue
@@ -1,20 +1,29 @@
 <script setup lang="ts">
-import { ref, watch, onMounted } from "vue";
+import { ref, watch } from "vue";
+import { storeToRefs } from "pinia";
 import { QForm, useQuasar } from "quasar";
 
 import { useCounterMixin } from "@/stores/mixin";
 import { useBrrowDataStore } from "@/modules/07_insignia/storeBrrow";
+import { useInsigniaReclaimStore } from "@/modules/07_insignia/storeReclaim";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
 /** impotrType */
+import type { PropType } from "vue";
 import type { QTableColumn } from "quasar";
+import type {
+  DataReclaim,
+  DataNoteList,
+  DataRound,
+} from "@/modules/07_insignia/interface/response/Reclaim";
 
 /** impotrComponents */
 import DialogHeader from "@/components/DialogHeader.vue";
 
 const $q = useQuasar();
 const brrowDataStore = useBrrowDataStore();
+const { roundData } = storeToRefs(useInsigniaReclaimStore());
 const mixin = useCounterMixin();
 const {
   date2Thai,
@@ -24,19 +33,27 @@ const {
   showLoader,
   hideLoader,
   onSearchDataTable,
-  convertDateToAPI,
 } = mixin;
 
 /** props*/
 const modal = defineModel<boolean>("modal", { required: true });
 const isEdit = defineModel<boolean>("isEdit", { required: true });
+const insigniaReclaimId = defineModel<string>("insigniaReclaimId", {
+  required: true,
+  default: "",
+});
 
-const props = defineProps({});
+const props = defineProps({
+  fetchData: { type: Function, required: true },
+  insigniaReclaimData: {
+    type: Object as PropType<DataReclaim>,
+  },
+});
 
-const rows = ref<any[]>([]);
-const rowsMain = ref<any[]>([]);
+const rows = ref<DataNoteList[]>([]);
+const rowsMain = ref<DataNoteList[]>([]);
 const keyword = ref<string>("");
-const selected = ref<any[]>([]);
+const selected = ref<DataNoteList[]>([]);
 const columns = ref<QTableColumn[]>([
   {
     name: "noNumber",
@@ -113,64 +130,6 @@ const columns = ref<QTableColumn[]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-
-  // {
-  //   name: "date",
-  //   align: "left",
-  //   label: "วันที่ในราชกิจนุเบกษา",
-  //   field: "date",
-  //   sortable: true,
-  //   format(val, row) {
-  //     return date2Thai(val);
-  //   },
-  //   headerStyle: "font-size: 14px",
-  //   style: "font-size: 14px",
-  // },
-  // {
-  //   name: "volumeNo",
-  //   align: "left",
-  //   label: "เล่มที่ในราชกิจนุเบกษา",
-  //   field: "volumeNo",
-  //   sortable: true,
-  //   headerStyle: "font-size: 14px",
-  //   style: "font-size: 14px",
-  // },
-  // {
-  //   name: "section",
-  //   align: "left",
-  //   label: "ตอนที่ในราชกิจนุเบกษา",
-  //   field: "section",
-  //   sortable: true,
-  //   headerStyle: "font-size: 14px",
-  //   style: "font-size: 14px",
-  // },
-  // {
-  //   name: "page",
-  //   align: "left",
-  //   label: "หน้าในราชกิจนุเบกษา",
-  //   field: "page",
-  //   sortable: true,
-  //   headerStyle: "font-size: 14px",
-  //   style: "font-size: 14px",
-  // },
-  // {
-  //   name: "no",
-  //   align: "left",
-  //   label: "ลำดับที่ในราชกิจจานุเบกษา",
-  //   field: "no",
-  //   sortable: true,
-  //   headerStyle: "font-size: 14px",
-  //   style: "font-size: 14px",
-  // },
-  // {
-  //   name: "number",
-  //   align: "left",
-  //   label: "หมายเลขใบกำกับ",
-  //   field: "number",
-  //   sortable: true,
-  //   headerStyle: "font-size: 14px",
-  //   style: "font-size: 14px",
-  // },
 ]);
 const visibleColumns = ref<string[]>([
   "noNumber",
@@ -180,34 +139,28 @@ const visibleColumns = ref<string[]>([
   "position",
   "requestInsignia",
   "dateReceive",
-  // "date",
-  // "volumeNo",
-  // "section",
-  // "page",
-  // "no",
-  // "number",
 ]);
 
-const roundNo = ref<string | undefined>(""); //รอบการขอเครื่องราชฯ
+const insigniaNoteId = ref<string | undefined>(""); //รอบการขอเครื่องราชฯ
+const insigniaNoteProfileId = ref<string>("");
 const cardid = ref<string>(""); //เลขประจำตัวประชาชน
 const fullName = ref<string>(""); //ชื่อ-นามสกุล
 const insigniaType = ref<string>(""); //เครื่องราชฯ
-const receivedate = ref<Date | null>(); //วันที่ยืม
+const receivedate = ref<Date | null>(null); //วันที่ยืม
 const reason = ref<string>(""); //หมายเหตุการเรียกคืน
 
-const filterSelectRound = ref<any>();
-
-/** function เคลียร์ข้อมูลในฟอร์ม*/
-function clearData() {}
+const filterSelectRound = ref<DataRound[]>([]);
 
 /** function เรียกข้อมูลรายชื่อที่ได้รับเครื่องราช*/
 async function fecthListPerson() {
-  if (roundNo.value !== "" && roundNo.value !== null) {
+  rows.value = [];
+  rowsMain.value = [];
+  if (insigniaNoteId.value !== "" && insigniaNoteId.value !== null) {
     let data = {
-      // insigniaTypeId: props.typeId,
-      insigniaNoteId: roundNo.value,
+      insigniaNoteId: insigniaNoteId.value,
       insigniaId: "",
     };
+    showLoader();
     await http
       .post(config.API.noteSearchList(), data)
       .then((res) => {
@@ -216,20 +169,54 @@ async function fecthListPerson() {
       })
       .catch((err) => {
         messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
       });
   }
 }
 
-/**
- * function บันทึกการเพิ่มข้อมูล
- */
+/** function บันทึกการเพิ่มข้อมูล*/
 async function onSubmit() {
-  dialogConfirm($q, async () => {});
+  dialogConfirm($q, async () => {
+    showLoader();
+    const pathAPI = !isEdit.value
+      ? config.API.insigniaReclaim
+      : config.API.insigniaReclaim + `/${insigniaReclaimId.value}`;
+
+    const method = !isEdit.value ? "post" : "put";
+
+    await http[method](pathAPI, {
+      insigniaNoteProfileId: !isEdit.value
+        ? insigniaNoteProfileId.value
+        : undefined,
+      reclaimDate: receivedate.value,
+      reclaimNote: reason.value,
+    })
+      .then(async () => {
+        await props.fetchData?.();
+        closeDialog();
+        success($q, "บันทึกข้อมูลสำเร็จ");
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
 }
 
 /** function closePopup*/
 function closeDialog() {
   modal.value = false;
+  selected.value = [];
+  fullName.value = "";
+  cardid.value = "";
+  insigniaType.value = "";
+  receivedate.value = null;
+  reason.value = "";
+  keyword.value = "";
 }
 
 function serchDataTable() {
@@ -240,8 +227,39 @@ function serchDataTable() {
   );
 }
 
+watch(selected, () => {
+  if (modal.value) {
+    const data = selected.value[0];
+    insigniaNoteProfileId.value = data ? data.id : "";
+    fullName.value = data ? data.fullName : "";
+    cardid.value = data ? data.citizenId : "";
+    insigniaType.value = data
+      ? `${data.requestInsignia} (${data.requestInsigniaShortName})`
+      : "";
+  }
+});
+
 /** function callback  เช็ค props ถ้าเปิด dialog ให้ดึงรายการข้อมูล*/
-watch(modal, () => {});
+watch(modal, (val) => {
+  if (val) {
+    filterSelectRound.value = roundData.value?.filter((e) => e.id !== "all");
+    insigniaNoteId.value = filterSelectRound.value[0].id;
+
+    if (isEdit.value) {
+      const data = props.insigniaReclaimData;
+      console.log(props.insigniaReclaimData);
+      fullName.value = data ? data?.fullName : "";
+      cardid.value = data ? data.citizenId : "";
+      insigniaType.value = data
+        ? `${data.requestInsignia} (${data.requestInsigniaShortName})`
+        : "";
+      receivedate.value = data ? data.reclaimDate : null;
+      reason.value = data ? data.reclaimReason : "";
+    } else {
+      fecthListPerson();
+    }
+  }
+});
 </script>
 
 <template>
@@ -346,10 +364,10 @@ watch(modal, () => {});
             <q-separator vertical />
             <div class="q-pa-md col">
               <div class="row q-col-gutter-sm">
-                <div class="col-12">
+                <div class="col-12" v-if="!isEdit">
                   <q-select
                     :class="!isEdit ? 'inputgreen' : ''"
-                    v-model="roundNo"
+                    v-model="insigniaNoteId"
                     :readonly="isEdit"
                     dense
                     outlined
@@ -456,6 +474,7 @@ watch(modal, () => {});
                 </div>
                 <div class="col-12">
                   <q-input
+                    class="inputgreen"
                     v-model="reason"
                     dense
                     outlined
@@ -473,7 +492,12 @@ watch(modal, () => {});
         <q-separator />
 
         <q-card-actions align="right">
-          <q-btn label="บันทึก" type="submit" color="public">
+          <q-btn
+            label="บันทึก"
+            type="submit"
+            color="public"
+            :disable="selected.length === 0 && !isEdit"
+          >
             <q-tooltip>บันทึก</q-tooltip>
           </q-btn>
         </q-card-actions>
diff --git a/src/modules/07_insignia/interface/response/Reclaim.ts b/src/modules/07_insignia/interface/response/Reclaim.ts
new file mode 100644
index 000000000..ecee69787
--- /dev/null
+++ b/src/modules/07_insignia/interface/response/Reclaim.ts
@@ -0,0 +1,76 @@
+interface DataReclaim {
+  id: string;
+  reclaimOrganizationId: string;
+  reclaimOrganization: string;
+  reclaimDate: Date | null;
+  reclaimReason: string;
+  lastUpdatedAt: string;
+  createdAt: string;
+  insigniaNoteProfileId: string;
+  citizenId: string;
+  prefix: string;
+  position: string;
+  fullName: string;
+  profileType: string;
+  requestInsignia: string;
+  requestInsigniaId: string;
+  requestInsigniaShortName: string;
+  dateReceive: string;
+  organizationOrganizationSend: string;
+  organizationOrganizationReceive: string;
+  insigniaNoteProfileStatus: string;
+  issue: string;
+  date: string;
+  volumeNo: string;
+  section: string;
+  page: string;
+  no: string;
+  datePayment: string;
+  typePayment: string;
+  address: string;
+  number: string;
+  salary: number;
+}
+
+interface DataRound {
+  id: string;
+  name: string;
+  year: number;
+}
+
+interface DataNoteList {
+  address: string;
+  citizenId: string;
+  date: string;
+  datePayment: string;
+  dateReceive: string;
+  dateReceiveInsignia: string;
+  dateReturnInsignia: string;
+  docReceiveInsignia: string;
+  docReturnInsignia: string;
+  fullName: string;
+  id: string;
+  issue: string;
+  no: string;
+  number: string;
+  orgReceiveInsignia: string;
+  orgReceiveInsigniaId: string;
+  orgReturnInsignia: string;
+  orgReturnInsigniaId: string;
+  organizationOrganizationReceive: string;
+  organizationOrganizationSend: string;
+  page: string;
+  position: string;
+  prefix: string;
+  profileType: string;
+  requestInsignia: string;
+  requestInsigniaId: string;
+  requestInsigniaShortName: string;
+  salary: number;
+  section: string;
+  status: string;
+  typePayment: string;
+  volumeNo: string;
+}
+
+export type { DataReclaim, DataRound, DataNoteList };
diff --git a/src/modules/07_insignia/storeReclaim.ts b/src/modules/07_insignia/storeReclaim.ts
index 129ded880..d758be103 100644
--- a/src/modules/07_insignia/storeReclaim.ts
+++ b/src/modules/07_insignia/storeReclaim.ts
@@ -1,10 +1,13 @@
 import { defineStore } from "pinia";
 import { ref } from "vue";
 
+import type { OptionData } from "@/modules/07_insignia/interface/index/Main";
+import type { DataRound } from "@/modules/07_insignia/interface/response/Reclaim";
+
 export const useInsigniaReclaimStore = defineStore("insigniaReclaim", () => {
-  const roundData = ref<any[]>([{ name: "ทั้งหมด", id: "all" }]);
-  const insigniaTypeData = ref<any[]>([{ name: "ทั้งหมด", id: "all" }]);
-  const employeeClassData = ref<any[]>([
+  const roundData = ref<DataRound[]>([{ name: "ทั้งหมด", id: "all", year: 0 }]);
+  const insigniaTypeData = ref<OptionData[]>([{ name: "ทั้งหมด", id: "all" }]);
+  const employeeClassData = ref<OptionData[]>([
     { name: "ทั้งหมด", id: "all" },
     { name: "ข้าราชการ กทม.สามัญ", id: "officer" },
     { name: "ลูกจ้างประจำ", id: "perm" },
diff --git a/src/modules/07_insignia/views/02_ManageMain.vue b/src/modules/07_insignia/views/02_ManageMain.vue
index 6eddc7afd..809880059 100644
--- a/src/modules/07_insignia/views/02_ManageMain.vue
+++ b/src/modules/07_insignia/views/02_ManageMain.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref } from "vue";
+import { onMounted, onUnmounted, defineAsyncComponent, ref } from "vue";
 import { useQuasar } from "quasar";
 
 import { useRoute } from "vue-router";
@@ -19,12 +19,16 @@ import type { ResponsePeriod } from "@/modules/07_insignia/interface/response/Ma
 
 /**import Componrnts*/
 import cardTop from "@/modules/07_insignia/components/2_Manage/StatCard.vue"; // stat
-import tab1 from "@/modules/07_insignia/components/2_Manage/Tab1.vue"; //คนที่ยืนขอ
+// import tab1 from "@/modules/07_insignia/components/2_Manage/Tab1.vue"; //คนที่ยืนขอ
 import tab2 from "@/modules/07_insignia/components/2_Manage/Tab2.vue"; //คนไม่ที่ยืนขอ
 import tab3 from "@/modules/07_insignia/components/2_Manage/Tab3.vue"; //คนที่ถูกลบ
 import tab4 from "@/modules/07_insignia/components/2_Manage/Tab4.vue"; //หน่วยงานที่ไม่ได้ส่งชื่อ
 import DialogPopupReason from "@/components/Dialogs/PopupReason.vue"; //หมายเหตุ
 
+const tab1 = defineAsyncComponent(
+  () => import("@/modules/07_insignia/components/2_Manage/Tab1.vue")
+);
+
 /**use  */
 const $q = useQuasar(); //ใช้ noti quasar
 const route = useRoute();
diff --git a/src/modules/07_insignia/views/07_ReclaimMain.vue b/src/modules/07_insignia/views/07_ReclaimMain.vue
index ac1b0f6b8..8d898ca5b 100644
--- a/src/modules/07_insignia/views/07_ReclaimMain.vue
+++ b/src/modules/07_insignia/views/07_ReclaimMain.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive, ref, onMounted, watch } from "vue";
+import { ref, onMounted } from "vue";
 import { storeToRefs } from "pinia";
 import { useQuasar } from "quasar";
 
@@ -10,6 +10,11 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 
 import type { QTableColumn } from "quasar";
+import type { OptionData } from "@/modules/07_insignia/interface/index/Main";
+import type {
+  DataReclaim,
+  DataRound,
+} from "@/modules/07_insignia/interface/response/Reclaim";
 
 import DialogForm from "@/modules/07_insignia/components/7_Reclaim/DialogForm.vue";
 
@@ -17,18 +22,26 @@ const $q = useQuasar();
 const { roundData, insigniaTypeData, employeeClassData } = storeToRefs(
   useInsigniaReclaimStore()
 );
-const { showLoader, hideLoader, messageError, dialogRemove } =
-  useCounterMixin();
+const {
+  showLoader,
+  hideLoader,
+  messageError,
+  dialogRemove,
+  success,
+  date2Thai,
+  onSearchDataTable,
+} = useCounterMixin();
 
 /**  Table*/
-const rows = ref<any[]>([]);
+const rows = ref<DataReclaim[]>([]);
+const rowsMain = ref<DataReclaim[]>([]);
 const keyword = ref<string>("");
 const columns = ref<QTableColumn[]>([
   {
-    name: "no",
+    name: "noNumber",
     align: "left",
     label: "ลำดับ",
-    field: "no",
+    field: "noNumber",
     sortable: false,
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -52,11 +65,17 @@ const columns = ref<QTableColumn[]>([
     style: "font-size: 14px",
   },
   {
-    name: "employeeType",
+    name: "profileType",
     align: "left",
     label: "ประเภทตำแหน่ง",
-    field: "employeeType",
+    field: "profileType",
     sortable: true,
+    format(val, row) {
+      return (
+        employeeClassData.value.find((e) => e.id === val.toLowerCase())?.name ??
+        ""
+      );
+    },
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -66,6 +85,9 @@ const columns = ref<QTableColumn[]>([
     label: "ประเภทเครื่องราชฯ",
     field: "insigniaType",
     sortable: true,
+    format(val, row) {
+      return `${row.requestInsignia} (${row.requestInsigniaShortName})`;
+    },
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -75,6 +97,9 @@ const columns = ref<QTableColumn[]>([
     label: "วันที่ได้รับพระราชทาน",
     field: "dateReceive",
     sortable: true,
+    format(val, row) {
+      return date2Thai(val);
+    },
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -84,6 +109,9 @@ const columns = ref<QTableColumn[]>([
     label: "วันที่ในราชกิจนุเบกษา",
     field: "date",
     sortable: true,
+    format(val, row) {
+      return date2Thai(val);
+    },
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -115,89 +143,100 @@ const columns = ref<QTableColumn[]>([
     style: "font-size: 14px",
   },
   {
-    name: "number",
+    name: "no",
     align: "left",
     label: "ลำดับที่ในราชกิจจานุเบกษา",
+    field: "no",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "number",
+    align: "left",
+    label: "หมายเลขใบกำกับ",
     field: "number",
     sortable: true,
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "vatnumber",
-    align: "left",
-    label: "หมายเลขใบกำกับ",
-    field: "vatnumber",
-    sortable: true,
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "payType",
+    name: "typePayment",
     align: "left",
     label: "รูปแบบการจ่าย",
-    field: "payType",
+    field: "typePayment",
     sortable: true,
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "dateReturn",
+    name: "reclaimDate",
     align: "left",
     label: "วันที่เรียกคืน",
-    field: "dateReturn",
+    field: "reclaimDate",
     sortable: true,
+    format(val, row) {
+      return date2Thai(val);
+    },
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "reasonReturn",
+    name: "reclaimReason",
     align: "left",
     label: "หมายเหตุการเรียกคืน",
-    field: "reasonReturn",
+    field: "reclaimReason",
     sortable: true,
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
 ]);
 const visibleColumns = ref<string[]>([
-  "no",
+  "noNumber",
   "citizenId",
   "fullName",
-  "employeeType",
+  "profileType",
   "insigniaType",
   "dateReceive",
   "date",
   "volumeNo",
   "section",
   "page",
+  "no",
   "number",
-  "vatnumber",
-  "payType",
-  "dateReturn",
-  "reasonReturn",
+  "typePayment",
+  "reclaimDate",
+  "reclaimReason",
 ]);
 
-const isInsigniaRound = ref<boolean>(true);
+const isInsigniaRound = ref<boolean>(false);
 
-const roundOps = ref<any[]>(roundData.value);
-const insigniaTypeOps = ref<any[]>(insigniaTypeData.value);
-const employeeClassOps = ref<any[]>(employeeClassData.value);
+const roundOps = ref<DataRound[]>(roundData.value);
+const insigniaTypeOps = ref<OptionData[]>(insigniaTypeData.value);
+const employeeClassOps = ref<OptionData[]>(employeeClassData.value);
 
 const modalForm = ref<boolean>(false);
 const isEdit = ref<boolean>(false);
+const insigniaReclaimId = ref<string>("");
+const insigniaReclaimData = ref<DataReclaim>();
+
+const yearRound = ref<number>(); //รอบการเสนอขอ
+const insigniaType = ref<string>("all");
+const employeeType = ref<string>("all");
 
 /** function เรียกรอบการเสนอขอพระราชทานเครื่องราชฯ*/
 async function fetchInsigniaRound() {
-  roundData.value = [{ name: "ทั้งหมด", id: "all" }];
+  roundData.value = [{ name: "ทั้งหมด", id: "all", year: 0 }];
   await http
     .get(config.API.noteround(), { params: { path: "BORROW" } })
     .then(async (res) => {
       let data = res.data.result;
-      // isInsigniaRound.value = data.length !== 0 ? true : false;
-      const newOption = data.map((e: any) => ({ name: e.name, id: e.id }));
-      roundData.value.push(...newOption);
+      roundData.value.push(...data);
       roundOps.value = roundData.value;
+      yearRound.value = data[0].year;
+      if (data.length > 0) {
+        isInsigniaRound.value = true;
+      }
     })
     .catch((err) => {
       messageError($q, err);
@@ -211,7 +250,10 @@ async function fetchInsigniaType() {
     .get(config.API.insigniaOrg)
     .then(async (res) => {
       let data = res.data.result;
-      const newOption = data.map((e: any) => ({ name: e.name, id: e.id }));
+      const newOption = data.map((e: OptionData) => ({
+        name: e.name,
+        id: e.id,
+      }));
       insigniaTypeData.value.push(...newOption);
       insigniaTypeOps.value = insigniaTypeData.value;
     })
@@ -220,36 +262,120 @@ async function fetchInsigniaType() {
     });
 }
 
-function fetchDataReclaim() {
-  rows.value = [
-    {
-      id: "1",
-      no: "001",
-      citizenId: "1103701234567",
-      fullName: "นายสมชาย ใจดี",
-      employeeType: "ข้าราชการ",
-      insigniaType: "เครื่องราชอิสริยาภรณ์ชั้นที่ 4",
-      dateReceive: "2024-12-10",
-      date: "2025-01-15",
-      volumeNo: "78",
-      section: "ก",
-      page: "35",
-      number: "1432",
-      vatnumber: "3101234567890",
-      payType: "โอนเงินผ่านธนาคาร",
-      dateReturn: "2025-02-01",
-      reasonReturn: "เปลี่ยนประเภทสิทธิ",
-    },
-  ];
+async function fetchDataReclaim() {
+  await http
+    .post(config.API.insigniaReclaim + `-list`, {
+      year: yearRound.value,
+    })
+    .then((res) => {
+      const data = res.data.result;
+      rowsMain.value = data;
+      rows.value = data;
+      onSearchDataReclaim();
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
 }
 
-function onOpenDialogForm(actions: boolean, id: string = "") {
-  modalForm.value = true;
+function onOpenDialogForm(
+  actions: boolean,
+  data: DataReclaim = {} as DataReclaim
+) {
   isEdit.value = actions;
+  insigniaReclaimId.value = actions ? data.id : "";
+  insigniaReclaimData.value = data;
+  modalForm.value = true;
 }
 
 function onDeleteDataReclaim(id: string) {
-  dialogRemove($q, async () => {});
+  dialogRemove($q, async () => {
+    showLoader();
+    await http
+      .delete(config.API.insigniaReclaim + `/${id}`)
+      .then(async () => {
+        await fetchDataReclaim();
+        success($q, "ลบข้อมูลสำเร็จ");
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+function onSearchDataReclaim() {
+  if (insigniaType.value !== "all" && employeeType.value !== "all") {
+    const data = rowsMain.value.filter(
+      (e: DataReclaim) =>
+        e.requestInsigniaId === insigniaType.value &&
+        e.profileType === employeeType.value.toLocaleUpperCase()
+    );
+    rows.value = onSearchDataTable(
+      keyword.value,
+      data,
+      columns.value ? columns.value : []
+    );
+  } else if (insigniaType.value !== "all" && employeeType.value === "all") {
+    const data = rowsMain.value.filter(
+      (e: DataReclaim) => e.requestInsigniaId === insigniaType.value
+    );
+    rows.value = onSearchDataTable(
+      keyword.value,
+      data,
+      columns.value ? columns.value : []
+    );
+  } else if (insigniaType.value === "all" && employeeType.value !== "all") {
+    const data = rowsMain.value.filter(
+      (e: DataReclaim) =>
+        e.profileType === employeeType.value.toLocaleUpperCase()
+    );
+    rows.value = onSearchDataTable(
+      keyword.value,
+      data,
+      columns.value ? columns.value : []
+    );
+  } else if (insigniaType.value === "all" && employeeType.value === "all") {
+    rows.value = onSearchDataTable(
+      keyword.value,
+      rowsMain.value,
+      columns.value ? columns.value : []
+    );
+  }
+}
+
+/**
+ * function ค้นหาข้อมูลใน option
+ * @param val คำค้นหา
+ * @param update function
+ * @param name ชื่อ Selec
+ */
+function filterSelector(val: string, update: Function, name: string) {
+  update(() => {
+    const needle = val.toLowerCase();
+    if (name === "employeeClassOps") {
+      employeeClassOps.value = employeeClassData.value.filter(
+        (v: OptionData) => v.name.toLowerCase().indexOf(needle) > -1
+      );
+    } else if (name === "fileterInsigniaList") {
+      insigniaTypeOps.value = insigniaTypeData.value.filter(
+        (v: OptionData) => v.name.toLowerCase().indexOf(needle) > -1
+      );
+    } else if (name === "filterSelectRoundAllOption") {
+      roundOps.value = roundData.value.filter(
+        (v: DataRound) => v.name.toLowerCase().indexOf(needle) > -1
+      );
+    }
+  });
+}
+
+async function fetchNewData() {
+  showLoader();
+  await fetchDataReclaim();
+  onSearchDataReclaim();
+  hideLoader();
 }
 
 /** Hook*/
@@ -257,7 +383,7 @@ onMounted(async () => {
   try {
     showLoader();
     await Promise.allSettled([fetchInsigniaRound(), fetchInsigniaType()]);
-    fetchDataReclaim();
+    await fetchDataReclaim();
   } catch (error) {
     console.log(error);
   } finally {
@@ -277,6 +403,7 @@ onMounted(async () => {
         <div class="row q-col-gutter-y-sm">
           <div class="row q-col-gutter-sm items-center">
             <q-select
+              v-model="yearRound"
               dense
               outlined
               lazy-rules
@@ -291,6 +418,10 @@ onMounted(async () => {
               :options="roundOps"
               option-value="year"
               style="width: 340px"
+              @filter="(inputValue: string,
+              doneFn: Function) => filterSelector(inputValue, doneFn, 'filterSelectRoundAllOption'
+              )"
+              @update:model-value="fetchNewData()"
             >
               <template v-slot:no-option>
                 <q-item>
@@ -301,7 +432,6 @@ onMounted(async () => {
               </template>
             </q-select>
           </div>
-
           <q-space />
           <div class="row q-col-gutter-sm">
             <q-input
@@ -310,6 +440,7 @@ onMounted(async () => {
               v-model="keyword"
               outlined
               placeholder="ค้นหา"
+              @keydown.enter.pervent="onSearchDataReclaim()"
             >
               <template v-slot:append>
                 <q-icon name="search" />
@@ -336,6 +467,7 @@ onMounted(async () => {
           <q-card bordered class="q-pa-sm col-12 bg-grey-1 q-mt-sm">
             <div class="row col-12 q-col-gutter-sm">
               <q-select
+                v-model="insigniaType"
                 dense
                 outlined
                 use-input
@@ -349,6 +481,10 @@ onMounted(async () => {
                 map-options
                 option-label="name"
                 option-value="id"
+                @update:model-value="onSearchDataReclaim"
+                @filter="(inputValue: string,
+    doneFn: Function) => filterSelector(inputValue, doneFn, 'fileterInsigniaList'
+    )"
               >
                 <template v-slot:no-option>
                   <q-item>
@@ -361,6 +497,7 @@ onMounted(async () => {
 
               <q-select
                 class="col-2"
+                v-model="employeeType"
                 dense
                 outlined
                 lazy-rules
@@ -374,6 +511,10 @@ onMounted(async () => {
                 :options="employeeClassOps"
                 option-label="name"
                 option-value="id"
+                @update:model-value="onSearchDataReclaim"
+                @filter="(inputValue: string,
+                doneFn: Function) => filterSelector(inputValue, doneFn, 'employeeClassOps'
+                )"
               >
                 <template v-slot:no-option>
                   <q-item>
@@ -440,7 +581,7 @@ onMounted(async () => {
                   round
                   color="edit"
                   icon="edit"
-                  @click.stop.pervent="onOpenDialogForm(true, props.row.id)"
+                  @click.stop.pervent="onOpenDialogForm(true, props.row)"
                   ><q-tooltip>แก้ไขข้อมูล</q-tooltip>
                 </q-btn>
                 <q-btn
@@ -455,8 +596,11 @@ onMounted(async () => {
                 </q-btn>
               </q-td>
               <q-td v-for="col in props.cols" :key="col.name" :props="props">
-                <div>
-                  {{ col.value ?? "-" }}
+                <div v-if="col.name === 'noNumber'">
+                  {{ props.rowIndex + 1 }}
+                </div>
+                <div v-else>
+                  {{ col.value ? col.value : "-" }}
                 </div>
               </q-td>
             </q-tr>
@@ -488,7 +632,14 @@ onMounted(async () => {
     </div>
   </q-card>
 
-  <DialogForm v-model:modal="modalForm" :is-edit="isEdit" />
+  <DialogForm
+    v-model:modal="modalForm"
+    :is-edit="isEdit"
+    :insignia-reclaim-id="insigniaReclaimId"
+    :fetch-data="fetchDataReclaim"
+    :round-data="roundData"
+    :insignia-reclaim-data="insigniaReclaimData"
+  />
 </template>
 
 <style scoped></style>
diff --git a/src/modules/09_leave/components/07_LeaveHistory/DialogForm.vue b/src/modules/09_leave/components/07_LeaveHistory/DialogForm.vue
index a9035a70a..c266a250c 100644
--- a/src/modules/09_leave/components/07_LeaveHistory/DialogForm.vue
+++ b/src/modules/09_leave/components/07_LeaveHistory/DialogForm.vue
@@ -467,7 +467,6 @@ watch(modal, async (val) => {
                     outlined
                     label="จำนวนสิทธิ์การลา"
                     hide-bottom-space
-                    mask="##"
                   />
                 </div>
                 <div class="col-12">
@@ -478,7 +477,6 @@ watch(modal, async (val) => {
                     outlined
                     label="วันลาที่ใช้ไป"
                     hide-bottom-space
-                    mask="##"
                   />
                 </div>
               </div>