diff --git a/src/modules/05_placement/components/PlacementDetail.vue b/src/modules/05_placement/components/PlacementDetail.vue
index fa79460c3..e7b877482 100644
--- a/src/modules/05_placement/components/PlacementDetail.vue
+++ b/src/modules/05_placement/components/PlacementDetail.vue
@@ -1,5 +1,95 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { reactive } from "vue";
+
+import { defineAsyncComponent } from "@vue/runtime-core";
+
+const itemTop = reactive([
+  {
+    id: 1,
+    num: 7,
+    title: "จำนวนทั้งหมด",
+    color: "#016987",
+  },
+  {
+    id: 2,
+    num: 3,
+    title: "ยังไม่บรรจุ",
+    color: "#02A998",
+  },
+  {
+    id: 3,
+    num: 3,
+    title: "เตรียมบรรจุ",
+    color: "#2EA0FF",
+  },
+  {
+    id: 4,
+    num: 3,
+    title: "บรรจุเเล้ว",
+    color: "#4154B3",
+  },
+  {
+    id: 5,
+    num: 3,
+    title: "สละสิทธิ์",
+    color: "#FF5C5F",
+  },
+]);
+const AddTablePosition = defineAsyncComponent(
+  () => import("@/modules/05_placement/components/PlacementTable.vue")
+);
+</script>
+
 <template>
-  <h1>test</h1>
+  <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 row">
+    <div class="q-py-md row col-12 no-wrap">
+      <hr
+        class="q-separator q-separator--vertical gt-sm"
+        aria-orientation="vertical"
+        style="width: 2px"
+      />
+
+      <div class="col-12 row bg-white">
+        <div class="fit q-pa-md">
+          <div class="row col-12 q-col-gutter-md fit">
+            <div
+              class=""
+              v-for="item in itemTop"
+              :key="item.id"
+              style="width: 15%"
+            >
+              <div
+                class="q-card q-card--bordered q-card--flat no-shadow row fit cardNum items-center q-pa-sm"
+              >
+                <div class="col-12 row items-center q-pa-sm">
+                  <div
+                    class="col-12 text-h5 text-weight-bold"
+                    :style="{ color: item.color }"
+                  >
+                    {{ item.num }}
+                  </div>
+                  <div class="col-12 text-dark ellipsis">
+                    {{ item.title }}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <q-card flat bordered class="col-12 q-mt-sm q-pt-sm">
+    <div>
+      <AddTablePosition class="q-pa-none" />
+    </div>
+  </q-card>
 </template>
-<style lang="scss"></style>
+
+<style lang="scss">
+.cardNum {
+  border-radius: 5px;
+  /* border-left: 3px solid #016987 !important; */
+  padding-left: 8px;
+}
+</style>
diff --git a/src/modules/05_placement/components/PlacementTable.vue b/src/modules/05_placement/components/PlacementTable.vue
new file mode 100644
index 000000000..fefa83c8b
--- /dev/null
+++ b/src/modules/05_placement/components/PlacementTable.vue
@@ -0,0 +1,143 @@
+<script setup lang="ts">
+import { ref, defineComponent, h } from "vue";
+import Table from "@/modules/05_placement/components/PlacementTableView.vue";
+import { useQuasar, QForm } from "quasar";
+import type { TableName } from "@/modules/05_placement/interface/request/placement";
+import type { QTableProps } from "quasar";
+const editvisible = ref<boolean>(false);
+const myForm = ref<QForm | null>(null);
+const edit = ref<boolean>(false);
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "position",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "Name",
+    align: "left",
+    label: "ชื่อ-สกุล",
+    sortable: true,
+    field: "Name",
+    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",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "Unit",
+    align: "left",
+    label: "หน่วยงานที่รับการบรรจุ",
+    sortable: true,
+    field: "Unit",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "ReportingDate",
+    align: "left",
+    label: "วันที่รายงานตัว",
+    sortable: true,
+    field: "ReportingDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "BMAOfficer",
+    align: "left",
+    label: "ข้าราชการฯ กทม.",
+    sortable: true,
+    field: "BMAOfficer",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "Status",
+    align: "left",
+    label: "สถานะการบรรจุ",
+    sortable: true,
+    field: "Status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "chackList",
+    align: "left",
+    label: "",
+    sortable: true,
+    field: "chackList",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const rows = [{
+  position: 1,
+  Name: "setthawut",
+  ExamOrder: 1,
+  Unit: "chamomind",
+  ReportingDate: "30 พ.ค. 2566", //วันที่รายงานตัว
+  BMAOfficer: true,
+  Status: "บรรจุเเล้ว",
+  chackList: "เว้นไว้"
+
+},
+{
+  position: 1,
+  Name: "setthawut",
+  ExamOrder: 1,
+  Unit: "chamomind",
+  ReportingDate: "30 พ.ค. 2566", //วันที่รายงานตัว
+  BMAOfficer: true,
+  Status: "บรรจุเเล้ว",
+  chackList: "เว้นไว้"
+
+},
+
+];
+const clickCancel = async () => {
+  editvisible.value = false;
+};
+</script>
+<template>
+  <q-form ref="myForm">
+    <Table
+      :rows="rows"
+      :columns="columns"
+      v-model:editvisible="editvisible"
+      :cancel="clickCancel"
+      :history="true"
+      :boss="true"
+      :saveNoDraft="true"
+      
+    />     
+
+  </q-form>
+</template>
diff --git a/src/modules/05_placement/components/PlacementTableView.vue b/src/modules/05_placement/components/PlacementTableView.vue
new file mode 100644
index 000000000..d7188866a
--- /dev/null
+++ b/src/modules/05_placement/components/PlacementTableView.vue
@@ -0,0 +1,425 @@
+<template>
+    <div class="q-px-md q-pb-md">
+      <div class="col-12 row q-py-sm" v-if="nornmalData == false">
+        <q-btn
+          v-if="!editvisible == true && publicNoBtn == false"
+          flat
+          round
+          :disabled="editvisible == true"
+          :color="editvisible == true ? 'grey-7' : 'primary'"
+          @click="edit"
+          icon="mdi-pencil-outline"
+        >
+        
+          <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+        </q-btn>
+        <q-btn
+          v-else
+          flat
+          round
+          :disabled="editvisible == false"
+          :outline="editvisible == false"
+          :color="editvisible == false ? 'grey-7' : 'red'"
+          @click="cancel()"
+          icon="mdi-undo"
+        >
+          <q-tooltip>ยกเลิก</q-tooltip>
+        </q-btn>
+        <div class="q-px-sm">
+          <q-btn
+            flat
+            round
+            :disabled="editvisible == false"
+            :color="editvisible == false ? 'grey-7' : 'public'"
+            @click="add"
+            icon="mdi-content-save-outline"
+          >
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </div>
+
+
+  
+        <q-space />
+        <div class="items-center" style="display: flex">
+
+          <div
+            class="row items-center"
+            style="display: flex"
+            v-if="publicData == false && publicNoBtn == false"
+          >
+
+          </div>
+
+          <q-input
+            standout
+            dense
+            :model-value="inputfilter"
+            ref="filterRef"
+            @update:model-value="updateInput"
+            outlined
+            debounce="300"
+            placeholder="ค้นหา"
+            style="max-width: 200px"
+            class="q-ml-sm"
+          >
+            <template v-slot:append>
+              <q-icon v-if="inputfilter == ''" name="search" />
+              <q-icon
+                v-if="inputfilter !== ''"
+                name="clear"
+                class="cursor-pointer"
+                @click="resetFilter"
+              />
+            </template>
+          </q-input>
+          <!-- แสดง table ใน คอลัมน์ -->
+          <q-select
+            :model-value="inputvisible"
+            @update:model-value="updateVisible"
+            :display-value="$q.lang.table.columns"
+            multiple
+            outlined
+            dense
+            :options="attrs.columns"
+            options-dense
+            option-value="name"
+            map-options
+            emit-value
+            style="min-width: 150px"
+            class="gt-xs q-ml-sm"
+          />
+        </div>
+      </div>
+      <!-- header บน table มี ค้นหา แสดงคอลัมน์ (status nornmalData true) -->
+      <div class="col-12 row q-py-sm items-center" v-if="nornmalData == true">
+        <span class="text-subtitle1">{{ titleText }}</span>
+        <!-- <q-select
+          :model-value="inputvisibleFilter"
+          :options="optionsFilter"
+          style="min-width: 150px"
+          class="gt-xs q-ml-sm"
+        /> -->
+        <q-select
+          dense
+          outlined
+          :model-value="inputvisibleFilter"
+          :options="optionsFilter"
+          class="col-xs-12 col-sm-4 col-md-3"
+          option-value="id"
+          option-label="name"
+          map-options
+          emit-value
+          @update:model-value="updateVisibleFilter"
+          v-if="optionsFilter != undefined && optionsFilter.length > 0"
+        />
+        <q-space />
+        <div class="items-center" style="display: flex">
+          <!-- ค้นหาข้อความใน table -->
+          <q-input
+            standout
+            dense
+            :model-value="inputfilter"
+            ref="filterRef"
+            @update:model-value="updateInput"
+            outlined
+            debounce="300"
+            placeholder="ค้นหา"
+            style="max-width: 200px"
+            class="q-ml-sm"
+          >
+            <template v-slot:append>
+              <q-icon v-if="inputfilter == ''" name="search" />
+              <q-icon
+                v-if="inputfilter !== ''"
+                name="clear"
+                class="cursor-pointer"
+                @click="resetFilter"
+              />
+            </template>
+          </q-input>
+          <!-- แสดงคอลัมน์ใน table -->
+          <q-select
+            :model-value="inputvisible"
+            @update:model-value="updateVisible"
+            :display-value="$q.lang.table.columns"
+            multiple
+            outlined
+            dense
+            :options="attrs.columns"
+            options-dense
+            option-value="name"
+            map-options
+            emit-value
+            style="min-width: 150px"
+            class="gt-xs q-ml-sm"
+          />
+        </div>
+      </div>
+      <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"
+        :pagination="initialPagination"
+        :rows-per-page-options="paging == true ? [25, 50, 100, 500] : []"
+      >
+        <!-- :pagination="initialPagination" -->
+        <!-- :rows-per-page-options="[0]" -->
+        <template v-slot:header="props">
+          <q-tr :props="props">
+            <q-th auto-width v-if="boss == true" />
+            <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
+              v-if="
+                editvisible == true || nextPageVisible == true || history == true
+              "
+            />
+            
+          </q-tr>
+          
+        </template>
+        <!-- สำหรับเรียกใช้ template ตัวข้างนอก -->
+        <template #body="props">
+          <slot v-bind="props" name="columns"></slot>
+        </template>
+      </q-table>
+    </div>
+    
+  </template>
+  <script setup lang="ts">
+  import { ref, useAttrs } from "vue";
+  import { useCounterMixin } from "@/stores/mixin";
+  import { useQuasar } from "quasar";
+  
+  const $q = useQuasar();
+  const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+  const { dialogMessage } = mixin;
+  
+  const attrs = ref<any>(useAttrs());
+  const table = ref<any>(null);
+  const filterRef = ref<any>(null);
+  const modalPublish = ref<boolean>(false);
+  const modalDelete = ref<boolean>(false);
+  const props = defineProps({
+    inputfilter: String,
+    inputvisible: Array,
+    inputvisibleFilter: String,
+    editvisible: Boolean,
+    titleText: String,
+    optionsFilter: {
+      type: Array,
+      defualt: [],
+    },
+    boss: {
+      type: Boolean,
+      defualt: false,
+    },
+    saveNoDraft: {
+      type: Boolean,
+      defualt: false,
+    },
+    history: {
+      type: Boolean,
+      defualt: false,
+    },
+    paging: {
+      type: Boolean,
+      defualt: false,
+    },
+    nornmalData: {
+      type: Boolean,
+      defualt: false,
+    },
+    nextPageVisible: {
+      type: Boolean,
+      defualt: false,
+    },
+    publicData: {
+      type: Boolean,
+      defualt: true,
+      required: false,
+    },
+    updateData: {
+      type: Boolean,
+      defualt: true,
+      required: false,
+    },
+    publicNoBtn: {
+      type: Boolean,
+      defualt: false,
+    },
+    add: {
+      type: Function,
+      default: () => console.log("not function"),
+    },
+    edit: {
+      type: Function,
+      default: () => console.log("not function"),
+    },
+    save: {
+      type: Function,
+      default: () => console.log("not function"),
+    },
+    deleted: {
+      type: Function,
+      default: () => console.log("not function"),
+    },
+    cancel: {
+      type: Function,
+      default: () => console.log("not function"),
+    },
+    publish: {
+      type: Function,
+      default: () => console.log("not function"),
+    },
+    validate: {
+      type: Function,
+      default: () => console.log("not function"),
+    },
+  });
+  const initialPagination = ref<any>({
+    //   descending: false,
+    rowsPerPage: props.paging == true ? 25 : 0,
+  });
+  
+  const emit = defineEmits([
+    "update:inputfilter",
+    "update:inputvisible",
+    "update:editvisible",
+    "update:titleText",
+    "update:inputvisibleFilter",
+  ]);
+  
+  const updateEdit = (value: any) => {
+    emit("update:editvisible", value);
+  };
+  const updateInput = (value: any) => {
+    emit("update:inputfilter", value);
+  };
+  const updateVisible = (value: any) => {
+    emit("update:inputvisible", value);
+  };
+  const updateVisibleFilter = (value: any) => {
+    emit("update:inputvisibleFilter", value);
+  };
+  
+  const paginationLabel = (start: string, end: string, total: string) => {
+    if (props.paging == true)
+      return " " + start + " ใน " + end + " จากจำนวน " + total + " รายการ";
+    else return start + "-" + end + " ใน " + total;
+  };
+  
+  const checkSave = () => {
+    props.validate();
+    props.save();
+    //   if (myForm.value !== null) {
+    //     myForm.value.validate().then((success) => {
+    //       if (success) {
+    //       }
+    //     });
+    //   }
+  };
+  
+  const publishModal = () => {
+    props.validate();
+    const filter = attrs.value.rows.filter((r: any) => r.name == "");
+  
+    if (filter.length == 0 || attrs.value.rows.length == 0) {
+      // modalPublish.value = true;
+      dialogMessage(
+        $q,
+        "ต้องการเผยแพร่ข้อมูลนี้หรือไม่?",
+        "ข้อมูลที่กำลังถูกเผยแพร่นี้จะมีผลใช้งานทันที",
+        "public",
+        "เผยแพร่",
+        "public",
+        props.publish,
+        undefined
+      );
+    }
+  };
+  
+  const DeleteModal = () => {
+    //   modalDelete.value = true;
+    dialogMessage(
+      $q,
+      "ต้องการลบข้อมูลบันทึกร่างนี้หรือไม่?",
+      "ข้อมูลบันทึกร่างที่กำลังถูกลบนี้จะมีผลใช้งานทันที",
+      "mdi-file-remove-outline",
+      "ลบบันทึก",
+      "red",
+      props.deleted,
+      undefined
+    );
+  };
+  
+  const edit = async () => {
+    updateEdit(!props.editvisible);
+    props.edit();
+  };
+  
+  const add = async () => {
+    //   if (myForm.value !== null) {
+    //     myForm.value.validate();
+    //   }
+    props.validate();
+    props.add();
+    await table.value.lastPage();
+    await table.value.scrollTo(attrs.value.rows.length - 1);
+  };
+  
+  const deleted = async () => {
+    // const deletedF = () => {
+    if (props.publicNoBtn === false) {
+      updateEdit(false);
+    }
+    props.deleted();
+  };
+  
+  const resetFilter = () => {
+    // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
+    emit("update:inputfilter", "");
+    filterRef.value.focus();
+  };
+  </script>
+  <style lang="scss">
+  .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>
+  
\ No newline at end of file
diff --git a/src/modules/05_placement/interface/request/DataNum.ts b/src/modules/05_placement/interface/request/DataNum.ts
new file mode 100644
index 000000000..cf7abe6ff
--- /dev/null
+++ b/src/modules/05_placement/interface/request/DataNum.ts
@@ -0,0 +1,10 @@
+interface DataNumObject {
+    id: number;
+    count: number;
+    name: string;
+    color: string;
+  }
+  export type {
+    DataNumObject,
+
+  };
\ No newline at end of file
diff --git a/src/modules/05_placement/interface/request/placement.ts b/src/modules/05_placement/interface/request/placement.ts
new file mode 100644
index 000000000..2b883bbfa
--- /dev/null
+++ b/src/modules/05_placement/interface/request/placement.ts
@@ -0,0 +1,28 @@
+interface TableName {
+  position: string;
+  Name: string;
+  ExamOrder: number;
+  Unit: string;
+  ReportingDate: string; //วันที่รายงานตัว
+  BMAOfficer: boolean;
+  Status: string;
+  chackList: any;
+}
+
+interface RequestReport2 {
+  organizationShortNameId: string;
+  organizationOrganizationId: string;
+  positionNumId: string;
+  positionTypeId: string;
+  positionExecutiveId: string;
+  positionExecutiveSideId: string;
+  positionPathId: string;
+  positionPathSideId: string;
+  positionLevelId: string;
+  status: string | null;
+}
+
+export type {
+  TableName,
+  RequestReport2,
+};
\ No newline at end of file