diff --git a/src/modules/15_development/components/history/AddPage.vue b/src/modules/15_development/components/history/AddPage.vue
index 26dfbdd18..9d8a44009 100644
--- a/src/modules/15_development/components/history/AddPage.vue
+++ b/src/modules/15_development/components/history/AddPage.vue
@@ -124,7 +124,7 @@ const columnsGov = ref<QTableProps["columns"]>([
   {
     name: "type",
     align: "left",
-    label: "ประเภท",
+    label: "ประเภทตำแหน่ง",
     sortable: true,
     field: "type",
     headerStyle: "font-size: 14px",
@@ -133,7 +133,7 @@ const columnsGov = ref<QTableProps["columns"]>([
   {
     name: "level",
     align: "left",
-    label: "ระดับ",
+    label: "ระดับตำแหน่ง",
     sortable: true,
     field: "level",
     headerStyle: "font-size: 14px",
diff --git a/src/modules/15_development/components/historyEmployee/AddPage.vue b/src/modules/15_development/components/historyEmployee/AddPage.vue
new file mode 100644
index 000000000..fa34dd966
--- /dev/null
+++ b/src/modules/15_development/components/historyEmployee/AddPage.vue
@@ -0,0 +1,417 @@
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import type {
+  FormAddHistory,
+  FormAddHistoryProject,
+} from "@/modules/15_development/interface/request/Main";
+import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+import DialogGov from "@/modules/15_development/components/history/DialogGov.vue"
+import DialogProject from "@/modules/15_development/components/history/DialogProject.vue";
+import { useQuasar, type QTableProps } from "quasar";
+
+import http from "@/plugins/http";
+import config from '@/app.config'
+
+const $q = useQuasar()
+const mixin = useCounterMixin()
+const { dialogConfirm,showLoader,hideLoader,messageError } = mixin
+const router = useRouter();
+const store = useDevelopmentDataStore();
+const modalDialogGov = ref<boolean>(false);
+const modalDialogProject = ref<boolean>(false);
+
+const order = ref<string>("");
+const dateOrder = ref<string>("");
+
+/** ตัวแปรข้อมูลข้าราชการ */
+const formMain = reactive<FormAddHistory>({
+  citizenId: "1XXXXXXXXXXXX", //เลขประจําตัวประชาชน
+  name: "นางสาวรัชภรณ์ ภักดี", //ชื่อ - นามสกุล
+  position: "นักบริหาร", //ตําแหน่ง
+  type: "บริหาร", //ประเภทตําแหน่ง
+  level: "ชำนาญการพิเศษ", //ระดับตําแหน่ง
+  positionSide: "นักบริหาร", //ตําแหน่งทางการบริหาร
+  oc: "กลุ่มงานช่วยนักบริหาร", //หน่วยงานที่สังกัด
+});
+
+/** ตัวแปรข้อมูลโครงสร้าง */
+const formMainProject = reactive<FormAddHistoryProject>({
+  project: "", //ชื่อโครงการ/หลักสูตรการฝึกอบรม
+  year: "", //ปีงบประมาณที่เข้ารับการฝึกอบรม
+  trainingStart: "", //วันเริ่มต้นการฝึกอบรม
+  trainingEnd: "", //วันสิ้นสุดการฝึกอบรม
+  totalTraining: "", //รวมระยะเวลาในการฝึกอบรม
+  location: "", //สถานที่ไปศึกษาดูงาน
+  topic: "", //หัวข้อการไปศึกษาดูงาน
+  studyStart: "", //วันเริ่มต้นการศึกษาดูงาน
+  studyEnd: "", //วันสิ้นสุดการศึกษาดูงาน
+  organizingTraining: "", //หน่วยงานที่รับผิดชอบจัดการอบรม
+});
+
+const fieldLabels = {
+  citizenId: "เลขประจําตัวประชาชน",
+  name: "ชื่อ - นามสกุล",
+  position: "ตําแหน่ง",
+  type: "กลุ่มงาน",
+
+  level: "ระดับชั้นงาน",
+  positionSide: "ตําแหน่งทางการบริหาร",
+  oc: "หน่วยงานที่สังกัด",
+};
+
+const fieldLabelsProject = {
+  project: "ชื่อโครงการ/หลักสูตรการฝึกอบรม",
+  year: "ปีงบประมาณที่เข้ารับการฝึกอบรม",
+  trainingStart: "วันเริ่มต้นการฝึกอบรม",
+  trainingEnd: "วันสิ้นสุดการฝึกอบรม",
+  totalTraining: "รวมระยะเวลาในการฝึกอบรม",
+
+  location: "สถานที่ไปศึกษาดูงาน",
+  topic: "หัวข้อการไปศึกษาดูงาน",
+  studyStart: "วันเริ่มต้นการศึกษาดูงาน",
+  studyEnd: "วันสิ้นสุดการศึกษาดูงาน",
+  organizingTraining: "หน่วยงานที่รับผิดชอบจัดการอบรม",
+};
+
+const visibleColumnsGov = ref<string[]>([
+  "citizenId",
+  "name",
+  "position",
+  "type",
+  "level",
+  "positionSide",
+]);
+
+const visibleColumnsProject = ref<string[]>([
+  "project",
+  "year",
+  "organizingTraining",
+]);
+
+const columnsGov = ref<QTableProps["columns"]>([
+  {
+    name: "citizenId",
+    align: "left",
+    label: "เลขประจำตัวประชาชน",
+    sortable: true,
+    field: "citizenId",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อ - นามสกุล",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+
+  {
+    name: "position",
+    align: "left",
+    label: "ตําแหน่ง",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "type",
+    align: "left",
+    label: "กลุ่มงาน",
+    sortable: true,
+    field: "type",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "level",
+    align: "left",
+    label: "ระดับชั้นงาน",
+    sortable: true,
+    field: "level",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionSide",
+    align: "left",
+    label: "ตําแหน่งทางการบริหาร",
+    sortable: true,
+    field: "positionSide",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+const columnsProject = ref<QTableProps["columns"]>([
+  {
+    name: "project",
+    align: "left",
+    label: "ชื่อโครงการ/กิจกรรม/หลักสูตร",
+    sortable: true,
+    field: "project",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "year",
+    align: "left",
+    label: "ปีงบประมาณ",
+    sortable: true,
+    field: "year",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+
+  {
+    name: "organizingTraining",
+    align: "left",
+    label: "หน่วยงานที่รับผิดชอบ",
+    sortable: true,
+    field: "organizingTraining",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+/** เปิด dialog ข้าราชการ*/
+function openDialogGov() {
+  store.columns = columnsGov.value;
+  store.visibleColumns = visibleColumnsGov.value;
+  modalDialogGov.value = true;
+}
+
+/** เปิด dialog โครงการ */
+function openDialogProject() {
+  store.columns = columnsProject.value;
+  store.visibleColumns = visibleColumnsProject.value;
+
+  modalDialogProject.value = true;
+}
+
+function getClass() {
+  return "inputgreen";
+}
+/** save */
+function onSubmit() {
+//   const body = {
+// citizenId:formMain.citizenId,
+// name:formMain.name,
+// position:formMain.position,
+// type:formMain.type,
+// level:formMain.level,
+// positionSide:formMain.positionSide,
+// oc:formMain.oc,
+
+// project:formMainProject.project,
+// year:formMainProject.year,
+// trainingStart:formMainProject.trainingStart,
+// trainingEnd:formMainProject.trainingEnd,
+// totalTraining:formMainProject.totalTraining,
+// location:formMainProject.location,
+// topic:formMainProject.topic,
+// studyStart:formMainProject.studyStart,
+// studyEnd:formMainProject.studyEnd,
+// organizingTraining:formMainProject.organizingTraining,
+
+// order:order.value,
+// dateOrder:dateOrder.value,
+//   }
+//   dialogConfirm($q,()=>{
+//     showLoader()
+//     http
+//     .post(config.API.,body)
+//     .then((res)=>{
+
+//     }).catch((e)=>{
+//       messageError($q,e)
+//     }).finally(()=>{
+//       hideLoader()
+//     })
+//   })
+
+router.push(`/development/employee-history`)
+}
+</script>
+<template>
+  <div class="toptitle text-dark">
+    <q-btn
+      icon="mdi-arrow-left"
+      unelevated
+      round
+      dense
+      flat
+      color="primary"
+      class="q-mr-sm"
+      @click="router.go(-1)"
+    />
+    <span class=""
+      >เพิ่มประวัติฝึกอบรม/ดูงานลูกจ้าง</span
+    >
+  </div>
+  <q-card flat bordered>
+    <q-form greedy @submit.prevent @validation-success="onSubmit">
+      <q-card-section>
+        <q-card flat bordered style="border: 1px solid #d6dee1">
+          <div class="col-12 text-weight-bold bg-grey-1 q-py-sm q-px-md">
+            ข้อมูลข้าราชการ
+
+            <q-btn
+              flat
+              class="btn-fixed-width"
+              color="teal"
+              label="เลือกข้าราชการ"
+              icon="add"
+              @click="openDialogGov()"
+            />
+          </div>
+          <div class="col-12"><q-separator /></div>
+          <div class="row q-col-gutter-md q-pa-md">
+            <div class="col-12 col-sm-6 col-md-6 q-gutter-y-sm">
+              <div
+                class="row"
+                v-for="(field, index) in Object.keys(fieldLabels).slice(0, 4)"
+                :key="index"
+              >
+                <div class="col-12 col-sm-12 col-md-4">
+                  <span class="text-grey-6 text-weight-medium">{{
+                    fieldLabels[field as keyof typeof fieldLabels]
+                  }}</span>
+                </div>
+                <div class="col-12 col-sm-12 col-md-8">
+                  <span>{{ formMain[field] ? formMain[field] : "-" }}</span>
+                </div>
+              </div>
+            </div>
+
+            <div class="col-12 col-sm-6 col-md-6 q-gutter-y-sm">
+              <div
+                class="row"
+                v-for="(field, index) in Object.keys(fieldLabels).slice(4, 7)"
+                :key="index"
+              >
+                <div class="col-12 col-sm-12 col-md-4">
+                  <span class="text-grey-6 text-weight-medium">{{
+                    fieldLabels[field as keyof typeof fieldLabels]
+                  }}</span>
+                </div>
+                <div class="col-12 col-sm-12 col-md-8">
+                  <span>{{ formMain[field] ? formMain[field] : "-" }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </q-card>
+
+        <q-card flat bordered class="q-mt-md" style="border: 1px solid #d6dee1">
+          <div class="col-12 text-weight-bold bg-grey-1 q-py-sm q-px-md">
+            ข้อมูลโครงการ
+            <q-btn
+              flat
+              class="btn-fixed-width"
+              color="teal"
+              label="เลือกโครงการ"
+              icon="add"
+              @click="openDialogProject()"
+            />
+          </div>
+          <div class="col-12"><q-separator /></div>
+          <div class="row q-col-gutter-md q-pa-md">
+            <div class="col-12 col-sm-6 col-md-6 q-gutter-y-sm">
+              <div
+                class="row"
+                v-for="(field, index) in Object.keys(fieldLabelsProject).slice(
+                  0,
+                  5
+                )"
+                :key="index"
+              >
+                <div class="col-12 col-sm-12 col-md-4">
+                  <span class="text-grey-6 text-weight-medium">{{
+                    fieldLabelsProject[field as keyof typeof fieldLabelsProject]
+                  }}</span>
+                </div>
+                <div class="col-12 col-sm-12 col-md-8">
+                  <span>{{
+                    formMainProject[field] ? formMainProject[field] : "-"
+                  }}</span>
+                </div>
+              </div>
+            </div>
+
+            <div class="col-12 col-sm-6 col-md-6 q-gutter-y-sm">
+              <div
+                class="row"
+                v-for="(field, index) in Object.keys(fieldLabelsProject).slice(
+                  5,
+                  10
+                )"
+                :key="index"
+              >
+                <div class="col-12 col-sm-12 col-md-4">
+                  <span class="text-grey-6 text-weight-medium">{{
+                    fieldLabelsProject[field as keyof typeof fieldLabelsProject]
+                  }}</span>
+                </div>
+                <div class="col-12 col-sm-12 col-md-8">
+                  <span>{{
+                    formMainProject[field] ? formMainProject[field] : "-"
+                  }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </q-card>
+
+        <div class="row q-col-gutter-sm q-mt-md">
+          <div class="col-3">
+            <q-input
+              label="เลขที่คำสั่ง/เลขที่หนังสืออนุมัติ"
+              v-model="order"
+              dense
+              outlined
+              :class="getClass()"
+              hide-bottom-space
+              :rules="[(val:string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง/เลขที่หนังสืออนุมัติ'}`,]"
+            />
+          </div>
+          <div class="col-3">
+            <q-input
+              label="คำสั่งลงวันที่/หนังสืออนุมัติลงวันที่"
+              v-model="dateOrder"
+              dense
+              outlined
+              :class="getClass()"
+              hide-bottom-space
+              :rules="[(val:string) => !!val || `${'กรุณากรอกคำสั่งลงวันที่/หนังสืออนุมัติลงวันที่'}`,]"
+            />
+          </div>
+        </div>
+      </q-card-section>
+      <q-separator />
+      <div class="text-right q-pa-sm">
+        <q-btn
+          dense
+          unelevated
+          label="บันทึก"
+          id="onSubmit"
+          type="submit"
+          color="public"
+          class="q-px-md"
+        >
+          <q-tooltip>บันทึกข้อมูล</q-tooltip>
+        </q-btn>
+      </div>
+    </q-form>
+  </q-card>
+
+  <DialogGov v-model:modal="modalDialogGov" />
+  <DialogProject v-model:modal="modalDialogProject" />
+</template>
diff --git a/src/modules/15_development/components/historyEmployee/DialogGov.vue b/src/modules/15_development/components/historyEmployee/DialogGov.vue
new file mode 100644
index 000000000..2d673b3a1
--- /dev/null
+++ b/src/modules/15_development/components/historyEmployee/DialogGov.vue
@@ -0,0 +1,218 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import Header from "@/components/DialogHeader.vue";
+import type { DataOption } from "@/modules/15_development/interface/index/Main";
+import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {
+  dialogConfirm,
+  messageError,
+  dialogMessageNotify,
+  showLoader,
+  hideLoader,
+} = mixin;
+const store = useDevelopmentDataStore();
+
+const modal = defineModel<boolean>("modal", { required: true });
+
+const selected = ref<any[]>();
+const search = ref<string>("citizenId");
+const inputSearch = ref<string>("");
+
+const govOp = ref<DataOption[]>([
+  {
+    id: "citizenId",
+    name: "เลขประจำตัวประชาชน",
+  },
+  {
+    id: "prefix",
+    name: "คำนำหน้า",
+  },
+  {
+    id: "fullName",
+    name: "ชื่อ - นามสกุล",
+  },
+]);
+
+const projectOp = ref<DataOption[]>([
+  {
+    id: "ID1",
+    name: "ชื่อโครงการ",
+  },
+  {
+    id: "ID2",
+    name: "ปีงบประมาณ",
+  },
+  {
+    id: "ID3",
+    name: "ชื่อหน่วยงานที่รับผิดชอบ",
+  },
+]);
+
+/** save ข้อมูล */
+function onSubmit() {
+  if (selected.value?.length == 0) {
+    dialogMessageNotify($q, `กรุณาเลือก 1 รายการ`);
+  } else {
+    dialogConfirm($q, () => {
+      const data = selected.value?.[0];
+      const body = {
+        citizenId: data.citizenId,
+        name: data.name,
+        position: data.position,
+        type: data.type,
+        level: data.level,
+        positionSide: data.positionSide,
+      };
+      closeDialog()
+
+    });
+  }
+}
+
+/** ปิด dialog */
+function closeDialog() {
+  modal.value = false;
+  store.rows = [];
+  selected.value = [];
+}
+
+/** class */
+function getClass() {
+  return "inputgreen";
+}
+
+function searchFilter() {
+  const dataTest = [
+    {
+      id: "ID1",
+      citizenId: "1XXXXXXXXXXXX", //เลขประจําตัวประชาชน
+      name: "นางสาวรัชภรณ์ ภักดี", //ชื่อ - นามสกุล
+      position: "นักบริหาร", //ตําแหน่ง
+      type: "บริหาร", //ประเภทตําแหน่ง
+      level: "ชำนาญการพิเศษ", //ระดับตําแหน่ง
+      positionSide: "นักบริหาร", //ตําแหน่งทางการบริหาร
+    },
+    {
+      id: "ID2",
+      citizenId: "1XXXXXXXXXXXX", //เลขประจําตัวประชาชน
+      name: "นางสาวภาพรรณ ลออ", //ชื่อ - นามสกุล
+      position: "นักจัดการงานทั่วไป", //ตําแหน่ง
+      type: "บริหาร", //ประเภทตําแหน่ง
+      level: "วิชาการ", //ระดับตําแหน่ง
+      positionSide: "ชำนาญงาน", //ตําแหน่งทางการบริหาร
+    },
+  ];
+
+  store.rows = dataTest;
+}
+</script>
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card class="col-12" style="width: 60%">
+      <Header
+        :tittle="'เลือกข้าราชการ'"
+        :close="closeDialog"
+      />
+      <q-separator />
+
+      <q-card-section>
+        <div class="row q-col-gutter-x-sm">
+          <div class="col-2">
+            <q-select
+              dense
+              outlined
+              label="ค้นหาจาก"
+              v-model="search"
+              option-label="name"
+              option-value="id"
+              :options="govOp"
+              map-options
+              emit-value
+              :class="getClass()"
+            />
+          </div>
+          <div class="col-8">
+            <q-input
+              dense
+              outlined
+              label="ค้นหา"
+              v-model="inputSearch"
+              :class="getClass()"
+            />
+          </div>
+          <div class="col-2">
+            <q-btn
+              label="ค้นหา"
+              class="full-width full-height"
+              unelevated
+              color="teal"
+              @click="searchFilter()"
+            >
+            </q-btn>
+          </div>
+        </div>
+        <div class="q-mt-sm">
+          <d-table
+            selection="single"
+            v-model:selected="selected"
+            for="table"
+            ref="table"
+            :columns="store.columns"
+            :rows="store.rows"
+            row-key="id"
+            flat
+            bordered
+            dense
+            class="custom-header-table"
+            :visible-columns="store.visibleColumns"
+          >
+            <template v-slot:header="props">
+              <q-tr :props="props">
+                <q-th class="text-center"> </q-th>
+                <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                  <span class="text-weight-medium">{{ col.label }}</span>
+                </q-th>
+              </q-tr>
+            </template>
+            <template v-slot:body="props">
+              <q-tr :props="props" class="cursor-pointer">
+                <q-td class="text-center">
+                  <q-checkbox
+                    keep-color
+                    color="primary"
+                    dense
+                    v-model="props.selected"
+                  />
+                </q-td>
+                <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                  <div class="table_ellipsis">
+                    {{ col.value ? col.value : "-" }}
+                  </div>
+                </q-td>
+              </q-tr>
+            </template>
+          </d-table>
+        </div>
+      </q-card-section>
+      <q-separator />
+
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn
+          label="บันทึก"
+          color="secondary"
+          type="submit"
+          @click="onSubmit()"
+          ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+        >
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
diff --git a/src/modules/15_development/components/historyEmployee/DialogProject.vue b/src/modules/15_development/components/historyEmployee/DialogProject.vue
new file mode 100644
index 000000000..6189eaabc
--- /dev/null
+++ b/src/modules/15_development/components/historyEmployee/DialogProject.vue
@@ -0,0 +1,215 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import Header from "@/components/DialogHeader.vue";
+import type { DataOption } from "@/modules/15_development/interface/index/Main";
+import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {
+  dialogConfirm,
+  messageError,
+  dialogMessageNotify,
+  showLoader,
+  hideLoader,
+} = mixin;
+const store = useDevelopmentDataStore();
+
+const modal = defineModel<boolean>("modal", { required: true });
+
+const selected = ref<any[]>();
+const search = ref<string>("ID1");
+const inputSearch = ref<string>("");
+
+const projectOp = ref<DataOption[]>([
+  {
+    id: "ID1",
+    name: "ชื่อโครงการ",
+  },
+  {
+    id: "ID2",
+    name: "ปีงบประมาณ",
+  },
+  {
+    id: "ID3",
+    name: "ชื่อหน่วยงานที่รับผิดชอบ",
+  },
+]);
+
+/** save ข้อมูล */
+function onSubmit() {
+  if (selected.value?.length == 0) {
+    dialogMessageNotify($q, `กรุณาเลือก 1 รายการ`);
+  } else {
+    dialogConfirm($q, () => {
+      const data = selected.value?.[0];
+      const body = {
+        project: data.project,
+        year: data.year,
+        organizingTraining: data.organizingTraining,
+      };
+      closeDialog()
+
+    });
+  }
+}
+
+/** ปิด dialog */
+function closeDialog() {
+  modal.value = false;
+  store.rows = [];
+  selected.value = [];
+}
+
+/** class */
+function getClass() {
+  return "inputgreen";
+}
+
+function searchFilter() {
+  const dataTestGov = [
+    {
+      id: "ID1",
+      citizenId: "1XXXXXXXXXXXX", //เลขประจําตัวประชาชน
+      name: "นางสาวรัชภรณ์ ภักดี", //ชื่อ - นามสกุล
+      position: "นักบริหาร", //ตําแหน่ง
+      type: "บริหาร", //ประเภทตําแหน่ง
+      level: "ชำนาญการพิเศษ", //ระดับตําแหน่ง
+      positionSide: "นักบริหาร", //ตําแหน่งทางการบริหาร
+    },
+    {
+      id: "ID2",
+      citizenId: "1XXXXXXXXXXXX", //เลขประจําตัวประชาชน
+      name: "นางสาวภาพรรณ ลออ", //ชื่อ - นามสกุล
+      position: "นักจัดการงานทั่วไป", //ตําแหน่ง
+      type: "บริหาร", //ประเภทตําแหน่ง
+      level: "วิชาการ", //ระดับตําแหน่ง
+      positionSide: "ชำนาญงาน", //ตําแหน่งทางการบริหาร
+    },
+  ];
+  const dataTest = [
+    {
+      id: "ID1",
+      project: "โครงการฝึกอบรมที่หน่วยงานของกรุงเทพมหานคร", //ชื่อโครงการ/หลักสูตรการฝึกอบรม
+      year: "2567", //ปีงบประมาณที่เข้ารับการฝึกอบรม
+      organizingTraining: "กลุ่มงานช่วยนักบริหาร", //หน่วยงานที่รับผิดชอบจัดการอบรม
+    },
+    {
+      id: "ID2",
+      project: "กิจกรรมฝึกอบรมที่หน่วยงานของกรุงเทพมหานคร", //ชื่อโครงการ/หลักสูตรการฝึกอบรม
+      year: "2567", //ปีงบประมาณที่เข้ารับการฝึกอบรม
+      organizingTraining: "กลุ่มงานช่วยนักบริหาร", //หน่วยงานที่รับผิดชอบจัดการอบรม
+    },
+  ];
+
+  store.rows = dataTest;
+}
+
+</script>
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card class="col-12" style="width: 60%">
+      <Header
+        :tittle="'เลือกโครงการ'"
+        :close="closeDialog"
+      />
+      <q-separator />
+
+      <q-card-section>
+        <div class="row q-col-gutter-x-sm">
+          <div class="col-2">
+            <q-select
+              dense
+              outlined
+              label="ค้นหาจาก"
+              v-model="search"
+              option-label="name"
+              option-value="id"
+              :options="projectOp"
+              map-options
+              emit-value
+              :class="getClass()"
+            />
+          </div>
+          <div class="col-8">
+            <q-input
+              dense
+              outlined
+              label="ค้นหา"
+              v-model="inputSearch"
+              :class="getClass()"
+            />
+          </div>
+          <div class="col-2">
+            <q-btn
+              label="ค้นหา"
+              class="full-width full-height"
+              unelevated
+              color="teal"
+              @click="searchFilter()"
+            >
+            </q-btn>
+          </div>
+        </div>
+        <div class="q-mt-sm">
+          <d-table
+            selection="single"
+            v-model:selected="selected"
+            for="table"
+            ref="table"
+            :columns="store.columns"
+            :rows="store.rows"
+            row-key="id"
+            flat
+            bordered
+            dense
+            class="custom-header-table"
+            :visible-columns="store.visibleColumns"
+          >
+            <template v-slot:header="props">
+              <q-tr :props="props">
+                <q-th class="text-center"> </q-th>
+                <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                  <span class="text-weight-medium">{{ col.label }}</span>
+                </q-th>
+              </q-tr>
+            </template>
+            <template v-slot:body="props">
+              <q-tr :props="props" class="cursor-pointer">
+                <q-td class="text-center">
+                  <q-checkbox
+                    keep-color
+                    color="primary"
+                    dense
+                    v-model="props.selected"
+                  />
+                </q-td>
+                <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                  <div class="table_ellipsis">
+                    {{ col.value ? col.value : "-" }}
+                  </div>
+                </q-td>
+              </q-tr>
+            </template>
+          </d-table>
+        </div>
+      </q-card-section>
+      <q-separator />
+
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn
+          label="บันทึก"
+          color="secondary"
+          type="submit"
+          @click="onSubmit()"
+          ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+        >
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
diff --git a/src/modules/15_development/router.ts b/src/modules/15_development/router.ts
index 598cd7994..ea18556d5 100644
--- a/src/modules/15_development/router.ts
+++ b/src/modules/15_development/router.ts
@@ -8,6 +8,7 @@ const employeeHistory = () =>
 const Scholarship = () =>
   import("@/modules/15_development/views/Scholarship.vue");
 const historyAdd = () => import('@/modules/15_development/components/history/AddPage.vue')
+const historyEmployeeAdd = () => import('@/modules/15_development/components/historyEmployee/AddPage.vue')
 export default [
   {
     path: "/development",
@@ -79,4 +80,14 @@ export default [
       Role: "development",
     },
   },
+  {
+    path: "/development/employee-history/add",
+    name: "developmentEmployeeHistoryAdd",
+    component: historyEmployeeAdd,
+    meta: {
+      Auth: true,
+      Key: [1.6],
+      Role: "development",
+    },
+  },
 ];
diff --git a/src/modules/15_development/views/EmployeeHistory.vue b/src/modules/15_development/views/EmployeeHistory.vue
index ec1f04c80..21b91338f 100644
--- a/src/modules/15_development/views/EmployeeHistory.vue
+++ b/src/modules/15_development/views/EmployeeHistory.vue
@@ -1,5 +1,269 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useQuasar, type QTableProps } from "quasar";
+import type { DataOption } from "@/modules/15_development/interface/index/Main";
+
+/** importStore*/
+import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
+import { useCounterMixin } from "@/stores/mixin";
+import { useRoute, useRouter } from "vue-router";
+
+/** use*/
+const router = useRouter()
+const store = useDevelopmentDataStore();
+const $q = useQuasar();
+const { showLoader, hideLoader } = useCounterMixin();
+
+const rows = ref<any>([]);
+const agency = ref<string>("");
+const agencyOp = ref<DataOption[]>([
+  {
+    id: "id1",
+    name: "name1",
+  },
+  {
+    id: "id2",
+    name: "name2",
+  },
+  {
+    id: "id3",
+    name: "name3",
+  },
+]);
+
+const visibleColumns = ref<string[]>([
+  "citizenId",
+  "name",
+  "position",
+  "type",
+  "level",
+  "positionSide",
+  "projectName",
+]);
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "citizenId",
+    align: "left",
+    label: "เลขประจำตัวประชาชน",
+    sortable: true,
+    field: "citizenId",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อ - นามสกุล",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+
+  {
+    name: "position",
+    align: "left",
+    label: "ตําแหน่ง",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "type",
+    align: "left",
+    label: "กลุ่มงาน",
+    sortable: true,
+    field: "type",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "level",
+    align: "left",
+    label: "ระดับชั้นงาน",
+    sortable: true,
+    field: "level",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionSide",
+    align: "left",
+    label: "ตําแหน่งทางการบริหาร",
+    sortable: true,
+    field: "positionSide",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "projectName",
+    align: "left",
+    label: "ชื่อโครงการ/กิจกรรม/หลักสูตร",
+    sortable: true,
+    field: "projectName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+function onAdd(){
+    router.push(`/development/employee-history/add`)
+
+}
+function onDownload(){
+
+}
+
+function onEdit(){
+
+}
+</script>
 <template>
-    <div>
-        ประวัติฝึกอบรม/ดูงานลูกจ้าง
+  <div class="toptitle text-dark col-12 row items-center">
+    ประวัติฝึกอบรม/ดูงานลูกจ้าง
+  </div>
+  <q-card flat bordered class="q-pa-md">
+    <q-toolbar style="padding: 0px">
+      <div class="row q-gutter-sm">
+        <datepicker
+          menu-class-name="modalfix"
+          v-model="store.formFilter.year"
+          :locale="'th'"
+          autoApply
+          year-picker
+          :enableTimePicker="false"
+        >
+          <template #year="{ year }">{{ year + 543 }}</template>
+          <template #year-overlay-value="{ value }">{{
+            parseInt(value + 543)
+          }}</template>
+          <template #trigger>
+            <q-input
+              dense
+              lazy-rules
+              outlined
+              :model-value="Number(store.formFilter.year) + 543"
+              :label="`${'ปีงบประมาณ'}`"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+        <q-select
+          dense
+          outlined
+          label="หน่วยงาน"
+          v-model="agency"
+          :options="agencyOp"
+          option-value="id"
+          option-label="name"
+          style="width: 200px"
+        />
+      </div>
+
+      <q-btn
+        flat
+        round
+        dense
+        icon="add"
+        color="primary"
+        @click="onAdd()"
+      >
+        <q-tooltip>เพิ่ม</q-tooltip>
+      </q-btn>
+      <q-space />
+      <q-btn
+        flat
+        round
+        dense
+        icon="mdi-arrow-down-bold-circle-outline"
+        color="blue"
+        @click="onAdd()"
+      >
+        <q-tooltip>ดาวน์โหลด</q-tooltip>
+      </q-btn>
+      <div class="row q-gutter-sm">
+        <q-input
+          standout
+          dense
+          v-model="store.formFilter.keyword"
+          ref="filterRef"
+          outlined
+          debounce="300"
+          placeholder="ค้นหา"
+        >
+          <template v-slot:append>
+            <q-icon v-if="store.formFilter.keyword == ''" name="search" />
+            <q-icon
+              v-if="store.formFilter.keyword !== ''"
+              name="clear"
+              class="cursor-pointer"
+              @click="store.formFilter.keyword = ''"
+            />
+          </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"
+        />
+      </div>
+    </q-toolbar>
+
+    <div class="col-12">
+      <d-table
+        for="table"
+        ref="table"
+        :columns="columns"
+        :rows="rows"
+        row-key="subject"
+        flat
+        bordered
+        dense
+        class="custom-header-table"
+        :visible-columns="visibleColumns"
+      >
+        <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-tr>
+        </template>
+        <template v-slot:body="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="onEdit()"
+            >
+              <div class="table_ellipsis">
+                {{ col.value ? col.value : "-" }}
+              </div>
+            </q-td>
+          </q-tr>
+        </template>
+      </d-table>
     </div>
-</template>
\ No newline at end of file
+  </q-card>
+</template>
diff --git a/src/modules/15_development/views/History.vue b/src/modules/15_development/views/History.vue
index 25ff54200..db8c99e49 100644
--- a/src/modules/15_development/views/History.vue
+++ b/src/modules/15_development/views/History.vue
@@ -73,7 +73,7 @@ const columns = ref<QTableProps["columns"]>([
   {
     name: "type",
     align: "left",
-    label: "ประเภท",
+    label: "ประเภทตำแหน่ง",
     sortable: true,
     field: "type",
     headerStyle: "font-size: 14px",
@@ -82,7 +82,7 @@ const columns = ref<QTableProps["columns"]>([
   {
     name: "level",
     align: "left",
-    label: "ระดับ",
+    label: "ระดับตำแหน่ง",
     sortable: true,
     field: "level",
     headerStyle: "font-size: 14px",