diff --git a/src/modules/05_placement/views/Main.vue b/src/modules/05_placement/views/Main.vue
index 6b9ff61bf..aac02886c 100644
--- a/src/modules/05_placement/views/Main.vue
+++ b/src/modules/05_placement/views/Main.vue
@@ -1,12 +1,410 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref, useAttrs, watch } from 'vue';
+import type { QTableProps } from 'quasar';
+import { useCounterMixin } from "@/stores/mixin";
+import router from '@/router';
+const mixin = useCounterMixin();
+const { dateText } = mixin;
+
+// แปลงเวลา ค.ศ ให้เป็น พ.ศ
+const textDate = (value: Date) => {
+  return dateText(value);
+};
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "id",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "id",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "ExamRound",
+    align: "left",
+    label: "รอบการสอบ",
+    sortable: true,
+    field: "ExamRound",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "ExamOrder",
+    align: "left",
+    label: "ครั้งที่",
+    sortable: true,
+    field: "ExamOrder",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "FiscalYear",
+    align: "left",
+    label: "ปีงบประมาณ",
+    sortable: true,
+    field: "FiscalYear",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "NumberofCandidates",
+    align: "left",
+    label: "จำนวนผู้สอบได้",
+    sortable: false,
+    field: "NumberofCandidates",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "ExamType",
+    align: "left",
+    label: "ประเภทการสอบ",
+    sortable: false,
+    field: "ExamType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "AccountExpirationDate",
+    align: "left",
+    label: "วันที่บัญชีหมดอายุ",
+    sortable: true,
+    field: "AccountExpirationDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+
+]);
+const rows = [{
+  id: 1,
+  ExamRound: "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
+  ExamOrder: 3,
+  FiscalYear: 2566,
+  NumberofCandidates: 8,
+  ExamType: 0,
+  AccountExpirationDate: "2023-02-28T14:47:04.1785384Z"
+},
+{
+  id: 2,
+  ExamRound: "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
+  ExamOrder: 2,
+  FiscalYear: 2566,
+  NumberofCandidates: 12,
+  ExamType: 0,
+  AccountExpirationDate: "2023-02-28T14:47:04.1785384Z"
+},
+{
+  id: 3,
+  ExamRound: "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
+  ExamOrder: 2,
+  FiscalYear: 2566,
+  NumberofCandidates: 20,
+  ExamType: 0,
+  AccountExpirationDate: "2023-01-31T14:47:04.1785384Z"
+},
+{
+  id: 4,
+  ExamRound: "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
+  ExamOrder: 2,
+  FiscalYear: 2566,
+  NumberofCandidates: 16,
+  ExamType: 1,
+  AccountExpirationDate: "2023-11-30T14:47:04.1785384Z"
+},
+{
+  id: 5,
+  ExamRound: "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
+  ExamOrder: 1,
+  FiscalYear: 2566,
+  NumberofCandidates: 20,
+  ExamType: 1,
+  AccountExpirationDate: "2023-05-21T14:47:04.1785384Z",
+},
+];
+
+const redirectToPage = (id:number) => {
+  router.push({
+      name: 'placementDetail',
+      params: {
+        id: id 
+      }
+    });
+};
+
+
+interface DataOption {
+  id: number;
+  name: string;
+}
+
+const fiscalyear = ref<string>(""); // เลือกปีงบประมาณ
+const fiscalyearOP = ref<DataOption[]>([
+  {id: 1, name: "2566"},
+  {id: 2, name: "2565"},
+  {id: 3, name: "2564"},
+]);
+const searchFiscalyear = () => {
+  console.log('Input value changed:', fiscalyear.value);
+};
+
+
+const filterInput = ref<string>(""); // ค้นหา
+const filterRef = ref<any>(null);
+const resetFilter = () => {
+  filterInput.value = "";
+  filterRef.value.focus();
+};
+
+const attrs = ref<any>(useAttrs());
+const visibleColumns = ref<string[]>([ 'id', 'ExamRound', 'ExamOrder', 'FiscalYear', 'NumberofCandidates', 'ExamType', 'AccountExpirationDate']) //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+
+
+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 examType = ref<string>(""); // ประเภทการสอบ
+const examTypeOP = ref<DataOption[]>([
+  {id: 0, name: "แข่งขัน"},
+  {id: 1, name: "คัดเลือก"},
+]);
+
+
+const expiredAccount = ref<boolean>(false); // บัญชีหมดอายุ
+
+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>
 
 <template>
   <div class="toptitle text-dark col-12 row items-center">
-    บรรจุ แต่งตั้ง ย้าย โอน
+    รายการสอบแข่งขัน / คัดเลือก
   </div>
   <div>
-    <q-card flat bordered class="col-12 q-mt-sm"> </q-card>
+    <q-card flat bordered class="col-12 q-mt-sm"> 
+      <div class="row q-pa-md" >
+        <div class="col-xs-12 col-sm-3 col-md-2">
+          <q-select
+                v-model="fiscalyear"
+                label="ปีงบประมาณ"
+                dense
+                clearable 
+                emit-value
+                map-options
+                option-label="name"
+                :options="fiscalyearOP"
+                option-value="id"
+                lazy-rules
+                hide-bottom-space
+                :readonly="false"
+                :borderless="false"
+                :outlined="true"
+                :hide-dropdown-icon="false"
+                @change="searchFiscalyear"
+              />
+        </div>
+        <div class="col-xs-12 col-sm-3 col-md-6"></div>
+        <div class="col-xs-12 col-sm-3 col-md-2">
+          <q-input
+            standout
+            dense
+            v-model="filterInput"
+            ref="filterRef"
+            outlined
+            debounce="300"
+            placeholder="ค้นหา"
+            class="q-ml-sm"
+          >
+            <template v-slot:append>
+              <q-icon v-if="filterInput == ''" name="search" />
+              <q-icon
+                v-if="filterInput !== ''"
+                name="clear"
+                class="cursor-pointer"
+                @click="resetFilter"
+              />
+            </template>
+          </q-input>
+        </div>
+        <div class="col-xs-12 col-sm-3 col-md-2">
+          <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="gt-xs q-ml-sm"
+          />
+        </div>
+      </div>
+      <div class="q-pt-sm q-pl-md q-pr-md q-pb-md">
+        <q-card bordered class="col-12 filter-card">
+          <div class="row q-pa-sm">
+            <div class="col-xs-12 col-sm-3 col-md-2 q-pl-sm">
+              <q-select
+                  v-model="examTime"
+                  label="ครั้งที่"
+                  dense
+                  clearable 
+                  emit-value
+                  map-options
+                  option-label="name"
+                  :options="examTimeOP"
+                  option-value="id"
+                  lazy-rules
+                  hide-bottom-space
+                  :readonly="false"
+                  :borderless="false"
+                  :outlined="true"
+                  :hide-dropdown-icon="false"
+                />
+            </div>
+            <div class="col-xs-12 col-sm-3 col-md-2 q-pl-sm">
+              <q-select
+                  v-model="examType"
+                  label="ประเภทการสอบ"
+                  dense
+                  clearable 
+                  emit-value
+                  map-options
+                  option-label="name"
+                  :options="examTypeOP"
+                  option-value="id"
+                  lazy-rules
+                  hide-bottom-space
+                  :readonly="false"
+                  :borderless="false"
+                  :outlined="true"
+                  :hide-dropdown-icon="false"
+                />
+            </div>
+            <div class="col-xs-12 col-sm-3 col-md-3">
+              <q-toggle
+                v-model="expiredAccount"
+                class="toggle-expired-account"
+                color="blue" 
+                label="แสดงบัญชีหมดอายุ"
+              />
+            </div>
+          </div>
+        </q-card>
+      </div>
+      <div class="q-pt-sm q-pl-md q-pr-md q-pb-md">
+        <q-table
+          ref="table"
+          :columns="columns" 
+          :rows="rows" 
+          row-key="id"
+          flat
+          bordered
+          dense
+          class="custom-header-table"
+          v-bind="attrs"
+          :filter="filterInput"
+          :visible-columns="visibleColumns"
+          :pagination-label="paginationLabel"
+        >
+        <template v-slot:body="props" >
+          <q-tr :props="props" class="cursor-pointer" @click="redirectToPage(props.row.id)">
+            <q-td key="id" :props="props">
+                {{ props.row.id }}
+            </q-td>
+            <q-td key="ExamRound" :props="props">
+                {{ props.row.ExamRound }}
+            </q-td>
+            <q-td key="ExamOrder" :props="props">
+                {{ props.row.ExamOrder }}
+            </q-td>
+            <q-td key="FiscalYear" :props="props">
+                {{ props.row.FiscalYear }}
+            </q-td>
+            <q-td key="NumberofCandidates" :props="props">
+                {{ props.row.NumberofCandidates }}
+            </q-td>
+            <q-td key="ExamType" :props="props">
+                {{ props.row.ExamType == 1 ? 'สอบแข่งขัน' : 'คัดเลือก' }}
+            </q-td>
+            <q-td key="AccountExpirationDate" :props="props">
+                {{ textDate(props.row.AccountExpirationDate) }}
+            </q-td>
+          </q-tr>
+        </template>
+      </q-table>
+      </div>
+    </q-card>
   </div>
 </template>
 
-<style lang="scss" scope></style>
+<style lang="scss" scope>
+.filter-card {
+  background-color: #EDEDED;
+}
+
+.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>