diff --git a/src/modules/05_placement/interface/index/Main.ts b/src/modules/05_placement/interface/index/Main.ts
index e4ea7770c..c28c2f576 100644
--- a/src/modules/05_placement/interface/index/Main.ts
+++ b/src/modules/05_placement/interface/index/Main.ts
@@ -1 +1,7 @@
-export type {};
+interface DataOption {
+    id: number;
+    name: string;
+}
+
+
+export type { DataOption };
diff --git a/src/modules/05_placement/interface/request/Main.ts b/src/modules/05_placement/interface/request/Main.ts
index e4ea7770c..9690875aa 100644
--- a/src/modules/05_placement/interface/request/Main.ts
+++ b/src/modules/05_placement/interface/request/Main.ts
@@ -1 +1,15 @@
-export type {};
+// ข้อมูลรายการสอบแข่งขัน/คัดเลือก
+interface FormPlacementMainData {
+    id: number;
+    ExamRound: string;
+    ExamOrder: number;
+    FiscalYear: number;
+    NumberofCandidates: number;
+    ExamType: number;
+    AccountExpirationDate: string;
+    isExpired?: boolean;
+}
+
+
+
+export type { FormPlacementMainData };
diff --git a/src/modules/05_placement/store.ts b/src/modules/05_placement/store.ts
index 5b83b8716..1769692af 100644
--- a/src/modules/05_placement/store.ts
+++ b/src/modules/05_placement/store.ts
@@ -1,5 +1,6 @@
 import { defineStore } from "pinia";
-import { ref, computed } from "vue";
+import { ref } from "vue";
+import type { FormPlacementMainData } from  "@/modules/05_placement/interface/request/Main"
 export const useProfileDataStore = defineStore("placement", () => {
   return {};
 });
@@ -25,8 +26,20 @@ export const usePlacementDataStore = defineStore("placement", () => {
     );
   }
 
+  let DataMainOrig = ref<FormPlacementMainData[]>([]) // ข้อมูลหลัก
+  let DataMainUpdate = ref<FormPlacementMainData[]>([]) // ข้อมูลเปลี่ยนแปลง
+  const DataMain = (val: any) => (DataMainOrig.value = val)
+  const DataUpdateMain = (val: any) => {
+    DataMainUpdate.value = [];
+    DataMainUpdate.value = val;
+  }
+
   return {
     placementData,
     changePlacementColumns,
+    DataMainOrig,
+    DataMainUpdate,
+    DataMain,
+    DataUpdateMain,
   };
 });
diff --git a/src/modules/05_placement/views/Main.vue b/src/modules/05_placement/views/Main.vue
index aac02886c..2455359b8 100644
--- a/src/modules/05_placement/views/Main.vue
+++ b/src/modules/05_placement/views/Main.vue
@@ -1,8 +1,14 @@
 <script setup lang="ts">
-import { ref, useAttrs, watch } from 'vue';
+import { onMounted, reactive, ref, useAttrs } from 'vue';
 import type { QTableProps } from 'quasar';
+import type { FormPlacementMainData } from  "@/modules/05_placement/interface/request/Main";
+import type { DataOption } from "@/modules/05_placement/interface/index/Main";
 import { useCounterMixin } from "@/stores/mixin";
+import { usePlacementDataStore } from "@/modules/05_placement/store";
 import router from '@/router';
+
+const DataStore = usePlacementDataStore()
+
 const mixin = useCounterMixin();
 const { dateText } = mixin;
 
@@ -11,6 +17,7 @@ const textDate = (value: Date) => {
   return dateText(value);
 };
 
+// หัวตาราง
 const columns = ref<QTableProps["columns"]>([
   {
     name: "id",
@@ -85,53 +92,72 @@ const columns = ref<QTableProps["columns"]>([
   },
 
 ]);
-const rows = [{
+
+// ข้อมูลตาราง (จำลอง)
+const rows = ref<FormPlacementMainData[]>([{
   id: 1,
   ExamRound: "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
   ExamOrder: 3,
-  FiscalYear: 2566,
+  FiscalYear: 2023,
   NumberofCandidates: 8,
-  ExamType: 0,
+  ExamType: 1,
   AccountExpirationDate: "2023-02-28T14:47:04.1785384Z"
 },
 {
   id: 2,
   ExamRound: "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
   ExamOrder: 2,
-  FiscalYear: 2566,
+  FiscalYear: 2023,
   NumberofCandidates: 12,
-  ExamType: 0,
+  ExamType: 1,
   AccountExpirationDate: "2023-02-28T14:47:04.1785384Z"
 },
 {
   id: 3,
   ExamRound: "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
   ExamOrder: 2,
-  FiscalYear: 2566,
+  FiscalYear: 2023,
   NumberofCandidates: 20,
-  ExamType: 0,
+  ExamType: 1,
   AccountExpirationDate: "2023-01-31T14:47:04.1785384Z"
 },
 {
   id: 4,
   ExamRound: "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
   ExamOrder: 2,
-  FiscalYear: 2566,
+  FiscalYear: 2022,
   NumberofCandidates: 16,
-  ExamType: 1,
+  ExamType: 2,
   AccountExpirationDate: "2023-11-30T14:47:04.1785384Z"
 },
 {
   id: 5,
   ExamRound: "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
   ExamOrder: 1,
-  FiscalYear: 2566,
+  FiscalYear: 2021,
   NumberofCandidates: 20,
-  ExamType: 1,
-  AccountExpirationDate: "2023-05-21T14:47:04.1785384Z",
+  ExamType: 2,
+  AccountExpirationDate: "2024-05-21T14:47:04.1785384Z",
 },
-];
+]);
 
+let OriginalData = ref<FormPlacementMainData[]>([]);
+let UpdataData = ref<FormPlacementMainData[]>([]);
+
+const OriginalDataFetch = async () => {
+  await DataStore.DataMain(rows.value)
+  OriginalData.value = await DataStore.DataMainOrig
+  UpdataData.value = OriginalData.value
+}
+
+onMounted( async () => {
+ await OriginalDataFetch()
+  fiscalyearfilter()
+  examTimefilter()
+  examTypefilter()
+})
+
+// ดูรายการสอบแข่งขัน หน้าต่อไป
 const redirectToPage = (id:number) => {
   router.push({
       name: 'placementDetail',
@@ -141,54 +167,114 @@ const redirectToPage = (id:number) => {
     });
 };
 
-
-interface DataOption {
-  id: number;
-  name: string;
+// เลือกปีงบประมาณ
+const fiscalyear = ref<number | null>(0);
+const fiscalyearOP = reactive<DataOption[]>([{id: 0, name: 'ทั้งหมด'}]);
+  const addedFiscalYearValues: number[] = [];
+const fiscalyearfilter = async () => {
+  for (let data of OriginalData.value) {
+    const year = data.FiscalYear + 543;
+    if (fiscalyear.value == 0 && !addedFiscalYearValues.includes(1)) {
+        fiscalyearOP.push({ id: 0, name: "ทั้งหมด" });
+        addedFiscalYearValues.push(1);
+    } else if (!addedFiscalYearValues.includes(year)) {
+        fiscalyearOP.push({ id: year, name: year.toString() });
+        addedFiscalYearValues.push(year);
+    }
+  }
 }
 
-const fiscalyear = ref<string>(""); // เลือกปีงบประมาณ
-const fiscalyearOP = ref<DataOption[]>([
-  {id: 1, name: "2566"},
-  {id: 2, name: "2565"},
-  {id: 3, name: "2564"},
-]);
+// เลือกปีงบประมาณตาม API
 const searchFiscalyear = () => {
+  // API
   console.log('Input value changed:', fiscalyear.value);
 };
 
-
-const filterInput = ref<string>(""); // ค้นหา
+// ค้นหาในตาราง
+const filterKeyword = ref<string>(""); 
 const filterRef = ref<any>(null);
 const resetFilter = () => {
-  filterInput.value = "";
+  filterKeyword.value = "";
   filterRef.value.focus();
 };
 
 const attrs = ref<any>(useAttrs());
 const visibleColumns = ref<string[]>([ 'id', 'ExamRound', 'ExamOrder', 'FiscalYear', 'NumberofCandidates', 'ExamType', 'AccountExpirationDate']) //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
 
+// ครั้งที่สอบ
+const examTime = ref<number | null>(null);
+const examTimeOP = ref<number[]>([]);
+const examTimefilter = async () => {
+    for (let data of OriginalData.value) {
+      if (!examTimeOP.value.includes(data.ExamOrder)) {
+        examTimeOP.value.push(data.ExamOrder);
+      }
+  }
+  examTimeOP.value.sort((a, b) => a - b); // เรียงลำดับ
+}
 
-const examTime = ref<string>(""); // ครั้งที่สอบ
-const examTimeOP = ref<DataOption[]>([]);
-examTimeOP.value = rows.map((item) => ({
-    id: item.id,
-    name: item.ExamOrder.toString(),
-}));
-examTimeOP.value.sort((a, b) => {
-  return parseInt(a.name) - parseInt(b.name);
-});
-// console.log(examTimeOP.value);
+// แสดงครั้งที่สอบตามที่เลือก
+const searchExamTime = async () => {
+  if (examTime.value !== null) {
+    const selectExamTime = OriginalData.value.filter((data: { ExamOrder: number | null; }) => data.ExamOrder === examTime.value);
+    await DataStore.DataUpdateMain(selectExamTime);
+    UpdataData.value = DataStore.DataMainUpdate
+  } else {
+    OriginalDataFetch();
+  }
+};
 
+// ประเภทการสอบ
+const examType = ref<number | null>(0); 
+const examTypeOP = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
+const addedExamTypeValues: number[] = [];
+const examTypefilter = async () => {
+  for (let data of OriginalData.value) {
+    const examTypeValue = data.ExamType;
+    if (examTypeValue == 1 && !addedExamTypeValues.includes(1)) {
+      examTypeOP.push({ id: 1, name: "คัดเลือก" });
+      addedExamTypeValues.push(1);
+    } else if (examTypeValue == 2 && !addedExamTypeValues.includes(2)) {
+      examTypeOP.push({ id: 2, name: "สอบแข่งขัน" });
+      addedExamTypeValues.push(2);
+    }
+  }
+}
 
-const examType = ref<string>(""); // ประเภทการสอบ
-const examTypeOP = ref<DataOption[]>([
-  {id: 0, name: "แข่งขัน"},
-  {id: 1, name: "คัดเลือก"},
-]);
+// แสดงประเภทการสอบตามที่เลือก
+const searchExamType = async () => {
+  if (examType.value !== null) {
+    const selectExamType = OriginalData.value.filter((data: { ExamType: number | null; }) => {
+      if (examType.value === 0) {
+        OriginalDataFetch();
+        return data.ExamType === 1 || data.ExamType === 2;
+      } else {
+        return data.ExamType === examType.value;
+      }
+    });
+    await DataStore.DataUpdateMain(selectExamType);
+    UpdataData.value = DataStore.DataMainUpdate
+  }
+};
 
+// บัญชีหมดอายุ
+const expiredAccount = ref<boolean>(false); 
+const searchExpiredAccount = async () => {
+  const currentDate = new Date();
+  const updatedRows = OriginalData.value.map((data) => {
+    let expirationDate = new Date(data.AccountExpirationDate);
+    let isExpired = expirationDate < currentDate;
 
-const expiredAccount = ref<boolean>(false); // บัญชีหมดอายุ
+    return { ...data, isExpired };
+  });
+  if (expiredAccount.value) {
+    const expiredRows = updatedRows.filter((data) => data.isExpired);
+    await DataStore.DataUpdateMain(expiredRows);
+    UpdataData.value = DataStore.DataMainUpdate
+  } else {
+    OriginalDataFetch();
+  }
+};
 
 const paging = ref<boolean>(true);
 const paginationLabel = (start: string, end: string, total: string) => {
@@ -214,16 +300,16 @@ const paginationLabel = (start: string, end: string, total: string) => {
                 clearable 
                 emit-value
                 map-options
-                option-label="name"
                 :options="fiscalyearOP"
                 option-value="id"
+                option-label="name"
                 lazy-rules
                 hide-bottom-space
                 :readonly="false"
                 :borderless="false"
                 :outlined="true"
                 :hide-dropdown-icon="false"
-                @change="searchFiscalyear"
+                @update:model-value="searchFiscalyear"
               />
         </div>
         <div class="col-xs-12 col-sm-3 col-md-6"></div>
@@ -231,7 +317,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
           <q-input
             standout
             dense
-            v-model="filterInput"
+            v-model="filterKeyword"
             ref="filterRef"
             outlined
             debounce="300"
@@ -239,9 +325,9 @@ const paginationLabel = (start: string, end: string, total: string) => {
             class="q-ml-sm"
           >
             <template v-slot:append>
-              <q-icon v-if="filterInput == ''" name="search" />
+              <q-icon v-if="filterKeyword == ''" name="search" />
               <q-icon
-                v-if="filterInput !== ''"
+                v-if="filterKeyword !== ''"
                 name="clear"
                 class="cursor-pointer"
                 @click="resetFilter"
@@ -278,15 +364,16 @@ const paginationLabel = (start: string, end: string, total: string) => {
                   clearable 
                   emit-value
                   map-options
-                  option-label="name"
                   :options="examTimeOP"
                   option-value="id"
+                  option-label="name"
                   lazy-rules
                   hide-bottom-space
                   :readonly="false"
                   :borderless="false"
                   :outlined="true"
                   :hide-dropdown-icon="false"
+                  @update:model-value="searchExamTime"
                 />
             </div>
             <div class="col-xs-12 col-sm-3 col-md-2 q-pl-sm">
@@ -306,6 +393,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
                   :borderless="false"
                   :outlined="true"
                   :hide-dropdown-icon="false"
+                  @update:model-value="searchExamType"
                 />
             </div>
             <div class="col-xs-12 col-sm-3 col-md-3">
@@ -314,6 +402,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
                 class="toggle-expired-account"
                 color="blue" 
                 label="แสดงบัญชีหมดอายุ"
+                @update:model-value="searchExpiredAccount"
               />
             </div>
           </div>
@@ -323,14 +412,14 @@ const paginationLabel = (start: string, end: string, total: string) => {
         <q-table
           ref="table"
           :columns="columns" 
-          :rows="rows" 
+          :rows="UpdataData" 
+          :filter="filterKeyword"
           row-key="id"
           flat
           bordered
           dense
           class="custom-header-table"
           v-bind="attrs"
-          :filter="filterInput"
           :visible-columns="visibleColumns"
           :pagination-label="paginationLabel"
         >
@@ -346,7 +435,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
                 {{ props.row.ExamOrder }}
             </q-td>
             <q-td key="FiscalYear" :props="props">
-                {{ props.row.FiscalYear }}
+                {{ props.row.FiscalYear + 543 }}
             </q-td>
             <q-td key="NumberofCandidates" :props="props">
                 {{ props.row.NumberofCandidates }}