From 82b88d65f0fef799023683f0ff1fb693daf6dced Mon Sep 17 00:00:00 2001
From: oat_dev <nattapon@frappet.com>
Date: Wed, 13 Mar 2024 15:43:52 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=97=E0=B8=B0=E0=B9=80=E0=B8=9A=E0=B8=B5?=
 =?UTF-8?q?=E0=B8=A2=E0=B8=99=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=95=E0=B8=B4:=20=20=E0=B9=83=E0=B8=9A=E0=B8=AD=E0=B8=99?=
 =?UTF-8?q?=E0=B8=B8=E0=B8=8D=E0=B8=B2=E0=B8=95+=E0=B8=9D=E0=B8=B6?=
 =?UTF-8?q?=E0=B8=81=E0=B8=AD=E0=B8=9A=E0=B8=A3=E0=B8=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Achievement/01_ProfessionalLicense.vue    | 553 ++++++++++-
 .../detail/Achievement/02_Train.vue           | 931 +++++++++++++++++-
 .../PersonalInformation/05_Education.vue      | 649 ++++++------
 .../PersonalInformation/06_SpecialSkill.vue   |  69 +-
 .../interface/index/profesLicense.ts          |   9 +
 5 files changed, 1862 insertions(+), 349 deletions(-)
 create mode 100644 src/modules/04_registryNew/interface/index/profesLicense.ts

diff --git a/src/modules/04_registryNew/components/detail/Achievement/01_ProfessionalLicense.vue b/src/modules/04_registryNew/components/detail/Achievement/01_ProfessionalLicense.vue
index 932d4c62a..80f71b65f 100644
--- a/src/modules/04_registryNew/components/detail/Achievement/01_ProfessionalLicense.vue
+++ b/src/modules/04_registryNew/components/detail/Achievement/01_ProfessionalLicense.vue
@@ -1,6 +1,555 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref, reactive, watch } from "vue";
+import moment from "moment";
+import dialogHeader from "@/components/DialogHeader.vue";
+import type { QTableProps } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import { QForm, useQuasar } from "quasar";
+import type { ProfesLicenseObject } from "@/modules/04_registryNew/interface/index/profesLicense";
+const mixin = useCounterMixin();
+const $q = useQuasar();
+const { dialogConfirm, date2Thai } = mixin;
+
+const historyDialog = ref<boolean>(false);
+const addDataDialog = ref<boolean>(false);
+const mode = ref<string>("table");
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "certificateType",
+    align: "left",
+    label: "ชื่อใบอนุญาต",
+    sortable: true,
+    field: "certificateType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "issuer",
+    align: "left",
+    label: "หน่วยงานผู้ออกใบอนุญาต",
+    sortable: true,
+    field: "issuer",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "certificateNo",
+    align: "left",
+    label: "เลขที่ใบอนุญาต",
+    sortable: true,
+    field: "certificateNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "issueDate",
+    align: "left",
+    label: "วันที่ออกใบอนุญาต",
+    sortable: true,
+    field: "issueDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "expireDate",
+    align: "left",
+    label: "วันที่หมดอายุ",
+    sortable: true,
+    field: "expireDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+const profesLicenseData = reactive<ProfesLicenseObject>({
+  certificateType: "",
+  issuer: "",
+  certificateNo: "",
+  issueDate: new Date(),
+  expireDate: new Date(),
+});
+
+const formFilter = reactive({
+  page: 1,
+  pageSize: 10,
+  keyword: "",
+});
+
+const pagination = ref({
+  page: formFilter.page,
+  rowsPerPage: formFilter.pageSize,
+});
+
+const row = [
+  {
+    certificateType: "ใบอนุญาต",
+    issuer: "หน่วยงานเชียงใหม่",
+    certificateNo: "12",
+    issueDate: new Date(),
+    expireDate: new Date(),
+  },
+  {
+    certificateType: "ใบอนุญาต",
+    issuer: "หน่วยงานพะเยา",
+    certificateNo: "136",
+    issueDate: new Date(),
+    expireDate: new Date(),
+  },
+  {
+    certificateType: "ใบอนุญาต",
+    issuer: "หน่วยงานโคราช",
+    certificateNo: "12",
+    issueDate: new Date(),
+    expireDate: new Date(),
+  },
+  {
+    certificateType: "ใบอนุญาต",
+    issuer: "หน่วยงานกทม",
+    certificateNo: "11",
+    issueDate: new Date(),
+    expireDate: new Date(),
+  },
+];
+
+const visibleColumns = ref<string[]>([
+  "certificateType",
+  "issuer",
+  "certificateNo",
+  "issueDate",
+  "expireDate",
+]);
+
+function validateForm() {
+  onSubmit();
+}
+
+async function onSubmit() {
+  dialogConfirm(
+    $q,
+    async () => {
+      closeDialog();
+    },
+    "ยืนยันการบันทึกข้อมูล",
+    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
+  );
+}
+
+function closeDialog() {
+  addDataDialog.value = false;
+}
+function closeHistoryDialog() {
+  historyDialog.value = false;
+}
+</script>
+
 <template>
-  <div>ใบอนุญาตประกอบวิชาชีพ</div>
+  <div class="toptitle col text-dark">ใบอนุญาตประกอบวิชาชีพ</div>
+  <q-toolbar style="padding: 0px">
+    <q-btn
+      round
+      flat
+      color="primary"
+      icon="add"
+      size="16px"
+      @click="addDataDialog = true"
+    >
+      <q-tooltip>เพิ่มข้อมูล</q-tooltip></q-btn
+    >
+
+    <q-space />
+    <q-select
+      v-if="mode === 'table'"
+      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="q-mr-sm"
+    />
+
+    <q-btn-toggle
+      v-model="mode"
+      dense
+      class="no-shadow toggle-borderd"
+      toggle-color="grey-4"
+      :options="[
+        { value: 'table', slot: 'table' },
+        { value: 'card', slot: 'card' },
+      ]"
+    >
+      <template v-slot:table>
+        <q-icon
+          name="format_list_bulleted"
+          size="24px"
+          :style="{
+            color: mode === 'table' ? '#787B7C' : '#C9D3DB',
+          }"
+        />
+      </template>
+
+      <template v-slot:card>
+        <q-icon
+          name="mdi-view-grid-outline"
+          size="24px"
+          :style="{
+            color: mode === 'card' ? '#787B7C' : '#C9D3DB',
+          }"
+        />
+      </template>
+    </q-btn-toggle>
+  </q-toolbar>
+  <d-table
+    :grid="mode === 'card'"
+    ref="table"
+    :columns="columns"
+    :rows="row"
+    row-key="name"
+    flat
+    bordered
+    :paging="true"
+    dense
+    :rows-per-page-options="[20, 50, 100]"
+    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-th auto-width />
+      </q-tr>
+    </template>
+    <template v-slot:body="props" v-if="mode === 'table'">
+      <q-tr :props="props" class="cursor-pointer">
+        <q-td
+          v-for="col in props.cols"
+          :key="col.id"
+          @click="addDataDialog = true"
+        >
+          <div v-if="col.name === 'issueDate' || col.name === 'expireDate'">
+            {{ col.value ? date2Thai(col.value) : "-" }}
+          </div>
+          <div v-else>
+            {{ col.value }}
+          </div>
+        </q-td>
+        <q-td auto-width>
+          <q-btn
+            color="info"
+            flat
+            dense
+            round
+            size="14px"
+            icon="mdi-history"
+            @click="() => (historyDialog = true)"
+          >
+            <q-tooltip>ประวัติแก้ไขประวัติการศึกษา</q-tooltip>
+          </q-btn>
+        </q-td>
+      </q-tr>
+    </template>
+    <template v-slot:item="props" v-else>
+      <div
+        class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-4 grid-style-transition"
+      >
+        <q-card bordered>
+          <q-card-actions align="right">
+            <q-btn
+              flat
+              round
+              color="primary"
+              icon="edit"
+              @click="addDataDialog = true"
+            >
+              <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+            </q-btn>
+            <q-btn
+              flat
+              round
+              color="blue"
+              icon="history"
+              @click="historyDialog = true"
+            >
+              <q-tooltip>ประวัติแก้ไขประวัติการศึกษา</q-tooltip>
+            </q-btn>
+          </q-card-actions>
+          <q-separator />
+          <q-list>
+            <q-item
+              v-for="col in props.cols.filter((col) => col.name !== 'desc')"
+              :key="col.name"
+            >
+              <q-item-section>
+                <q-item-label>{{ col.label }}</q-item-label>
+              </q-item-section>
+              <q-item-section side>
+                <q-item-label
+                  caption
+                  v-if="col.name === 'issueDate' || col.name === 'expireDate'"
+                >
+                  {{ col.value ? date2Thai(col.value) : "-" }}
+                </q-item-label>
+
+                <q-item-label caption v-else>{{ col.value }}</q-item-label>
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-card>
+      </div>
+    </template>
+  </d-table>
+
+  <q-dialog v-model="addDataDialog" class="dialog" persistent>
+    <q-card style="min-width: 40%" class="bg-white">
+      <q-form @submit.prevent greedy @validation-success="validateForm">
+        <q-card-section class="flex justify-between" style="padding: 0">
+          <dialog-header
+            tittle="เพิ่มใบอนุญาตประกอบวิชาชีพ"
+            :close="closeDialog"
+          />
+        </q-card-section>
+        <q-separator color="grey-4" />
+        <q-card-section class="row q-gutter-sm q-pb-sm">
+          <div class="col">
+            <q-input
+              outlined
+              v-model="profesLicenseData.certificateType"
+              label="ชื่อใบอนุญาต"
+              bg-color="white"
+              dense
+              :rules="[(val) => !!val || `${'กรุณากรอกชื่นใบอนุญาต'}`]"
+              hide-bottom-space
+            />
+          </div>
+          <div class="col">
+            <q-input
+              outlined
+              v-model="profesLicenseData.certificateType"
+              label="หน่วยงานผู้ออกใบอนุญาต"
+              bg-color="white"
+              dense
+              :rules="[
+                (val) => !!val || `${'กรุณากรอกชื่อหน่วยงานผู้ออกใบอนุญาต'}`,
+              ]"
+              hide-bottom-space
+            />
+          </div>
+        </q-card-section>
+        <q-card-section class="row q-gutter-sm q-py-none">
+          <div class="col">
+            <q-input
+              outlined
+              v-model="profesLicenseData.certificateType"
+              label="เลขที่ใบอนุญาต"
+              bg-color="white"
+              dense
+              :rules="[(val) => !!val || `${'กรุณากรอกเลขที่ใบอนุญาต'}`]"
+              hide-bottom-space
+            />
+          </div>
+          <div class="col">
+            <datepicker
+              menu-class-name="modalfix"
+              v-model="profesLicenseData.issueDate"
+              :locale="'th'"
+              autoApply
+              class="col"
+              :enableTimePicker="false"
+              @update:modelValue="profesLicenseData.issueDate"
+            >
+              <template #year="{ year }">{{ year + 543 }}</template>
+              <template #year-overlay-value="{ value }">{{
+                parseInt(value + 543)
+              }}</template>
+              <template #trigger>
+                <q-input
+                  dense
+                  lazy-rules
+                  outlined
+                  bg-color="white"
+                  hide-bottom-space
+                  :model-value="
+                    profesLicenseData.issueDate
+                      ? date2Thai(profesLicenseData.issueDate)
+                      : ''
+                  "
+                  :rules="[
+                    (val) => !!val || `${'กรุณาเลือกปีที่เริ่มต้นศึกษา'}`,
+                  ]"
+                  :label="`${'วัน/เดือน/ปี ที่ออกใบอนุญาต'}`"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+          </div>
+        </q-card-section>
+        <q-card-section class="row q-pt-sm q-gutter-sm">
+          <div class="col">
+            <datepicker
+              menu-class-name="modalfix"
+              v-model="profesLicenseData.expireDate"
+              :locale="'th'"
+              autoApply
+              :enableTimePicker="false"
+              @update:modelValue="profesLicenseData.expireDate"
+            >
+              <template #year="{ year }">{{ year + 543 }}</template>
+              <template #year-overlay-value="{ value }">{{
+                parseInt(value + 543)
+              }}</template>
+              <template #trigger>
+                <q-input
+                  dense
+                  lazy-rules
+                  outlined
+                  bg-color="white"
+                  hide-bottom-space
+                  :model-value="
+                    profesLicenseData.expireDate
+                      ? date2Thai(profesLicenseData.expireDate)
+                      : ''
+                  "
+                  :label="`${'วัน/เดือน/ปี ที่หมดอายุ'}`"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+          </div>
+          <div class="col"></div>
+        </q-card-section>
+        <q-card-actions align="right">
+          <q-btn
+            id="onSubmit"
+            type="submit"
+            dense
+            unelevated
+            label="บันทึก"
+            color="public"
+            class="q-px-md"
+          >
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+
+  <q-dialog v-model="historyDialog" class="dialog" persistent>
+    <q-card style="min-width: 70%" class="bg-white">
+      <q-form @submit.prevent greedy @validation-success="validateForm">
+        <q-card-section class="flex justify-between" style="padding: 0">
+          <dialog-header
+            tittle="ประวัติแก้ไขประวัติการศึกษา"
+            :close="closeHistoryDialog"
+          />
+        </q-card-section>
+        <q-separator color="grey-4" />
+        <q-card-section>
+          <q-toolbar style="padding: 0px" class="text-primary q-mb-sm">
+            <q-space />
+            <q-input
+              dense
+              outlined
+              bg-color="white"
+              v-model="formFilter.keyword"
+              label="ค้นหา"
+              class="q-mr-sm"
+            >
+              <template v-slot:append>
+                <q-icon name="search" />
+              </template>
+            </q-input>
+
+            <q-select
+              v-model="visibleColumns"
+              multiple
+              outlined
+              dense
+              bg-color="white"
+              options-dense
+              :display-value="$q.lang.table.columns"
+              emit-value
+              map-options
+              :options="columns"
+              option-value="name"
+              options-cover
+              style="min-width: 150px"
+            />
+          </q-toolbar>
+          <d-table
+            ref="table"
+            :columns="columns"
+            :rows="row"
+            row-key="name"
+            flat
+            bordered
+            :paging="true"
+            dense
+            :rows-per-page-options="[20, 50, 100]"
+            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-th auto-width />
+              </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.id">
+                  <div
+                    v-if="col.name === 'issueDate' || col.name === 'expireDate'"
+                  >
+                    {{ col.value ? date2Thai(col.value) : "-" }}
+                  </div>
+                  <div v-else>
+                    {{ col.value }}
+                  </div>
+                </q-td>
+              </q-tr>
+            </template>
+          </d-table>
+        </q-card-section>
+      </q-form>
+    </q-card>
+  </q-dialog>
 </template>
 
 <style scoped></style>
diff --git a/src/modules/04_registryNew/components/detail/Achievement/02_Train.vue b/src/modules/04_registryNew/components/detail/Achievement/02_Train.vue
index aea112f0d..02afee66d 100644
--- a/src/modules/04_registryNew/components/detail/Achievement/02_Train.vue
+++ b/src/modules/04_registryNew/components/detail/Achievement/02_Train.vue
@@ -1,6 +1,931 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref, reactive, watch } from "vue";
+import moment from "moment";
+import dialogHeader from "@/components/DialogHeader.vue";
+import type { QTableProps } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import { QForm, useQuasar } from "quasar";
+
+const mixin = useCounterMixin();
+const $q = useQuasar();
+const { dialogConfirm, date2Thai } = mixin;
+
+const addDataDialog = ref<boolean>(false);
+const mode = ref<string>("table");
+const columns = ref<QTableProps["columns"]>([
+  {
+    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: "topic",
+    align: "left",
+    label: "หัวข้อการฝึกอบรม/ดูงาน",
+    sortable: true,
+    field: "topic",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "startDate",
+    align: "left",
+    label: "วันเริ่มต้นการฝึกอบรม/ดูงาน",
+    sortable: true,
+    field: "startDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "endDate",
+    align: "left",
+    label: "วันสิ้นสุดการฝึกอบรม/ดูงาน",
+    sortable: true,
+    field: "endDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "yearly",
+    align: "left",
+    label: "ปีที่อบรม (พ.ศ.)",
+    sortable: true,
+    field: "yearly",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "place",
+    align: "left",
+    label: "สถานที่ฝึกอบรม/ดูงาน",
+    sortable: true,
+    field: "place",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "duration",
+    align: "left",
+    label: "รวมระยะเวลาในการฝึกอบรม/ดูงาน",
+    sortable: true,
+    field: "duration",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "department",
+    align: "left",
+    label: "หน่วยงานที่รับผิดชอบจัดการฝึกอบรม/ดูงาน",
+    sortable: true,
+    field: "department",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "numberOrder",
+    align: "left",
+    label: "เลขที่คำสั่ง/เลขที่หนังสืออนุมัติ",
+    sortable: true,
+    field: "numberOrder",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "dateOrder",
+    align: "left",
+    label: "คำสั่งลงวันที่/หนังสืออนุมัติลงวันที่",
+    sortable: true,
+    field: "dateOrder",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const isDate = ref<string>("false");
+const educationOption = ["ใช่", "ไม่ใช่"];
+const historyDialog = ref<boolean>(false);
+const educationData = reactive({
+  level: "",
+  institute: "",
+  startYear: new Date().getFullYear(),
+  finishYear: new Date().getFullYear(),
+  graduateDate: new Date(),
+  startDate: new Date(),
+  endDate: new Date(),
+  isEducation: "",
+  degree: "",
+  field: "",
+  fundName: "",
+  gpa: null,
+  country: "",
+  other: "",
+  duration: "",
+  durationYear: "",
+  note: "",
+});
+const trainData = reactive({
+  name: "",
+  topic: "",
+  yearly: new Date().getFullYear(),
+  place: "",
+  duration: "",
+  department: "",
+  numberOrder: "",
+  dateOrder: new Date(),
+  startDate: new Date(),
+  endDate: new Date(),
+  startYear: new Date().getFullYear(),
+  finishYear: new Date().getFullYear(),
+});
+
+const formFilter = reactive({
+  page: 1,
+  pageSize: 10,
+  keyword: "",
+});
+
+const pagination = ref({
+  page: formFilter.page,
+  rowsPerPage: formFilter.pageSize,
+});
+
+const row = [
+  {
+    name: "ชื่อโครงการ",
+    topic: "ชื่อหัวข้อ",
+    yearly: "2567",
+    place: "สถานที่",
+    duration: "2567",
+    department: "แผนกสาขา",
+    numberOrder: "1244",
+    dateOrder: new Date(),
+    startDate: new Date(),
+    endDate: new Date(),
+  },
+  {
+    name: "ชื่อโครงการ",
+    topic: "ชื่อหัวข้อ",
+    yearly: "2567",
+    place: "สถานที่",
+    duration: "2567",
+    department: "แผนกสาขา",
+    numberOrder: "1244",
+    dateOrder: new Date(),
+    startDate: new Date(),
+    endDate: new Date(),
+  },
+  {
+    name: "ชื่อโครงการ",
+    topic: "ชื่อหัวข้อ",
+    yearly: "2567",
+    place: "สถานที่",
+    duration: "2567",
+    department: "แผนกสาขา",
+    numberOrder: "1244",
+    dateOrder: new Date(),
+    startDate: new Date(),
+    endDate: new Date(),
+  },
+  {
+    name: "ชื่อโครงการ",
+    topic: "ชื่อหัวข้อ",
+    yearly: "2567",
+    place: "สถานที่",
+    duration: "2567",
+    department: "แผนกสาขา",
+    numberOrder: "1244",
+    dateOrder: new Date(),
+    startDate: new Date(),
+    endDate: new Date(),
+  },
+  {
+    name: "ชื่อโครงการ",
+    topic: "ชื่อหัวข้อ",
+    yearly: "2567",
+    place: "สถานที่",
+    duration: "2567",
+    department: "แผนกสาขา",
+    numberOrder: "1244",
+    dateOrder: new Date(),
+    startDate: new Date(),
+    endDate: new Date(),
+  },
+  {
+    name: "ชื่อโครงการ",
+    topic: "ชื่อหัวข้อ",
+    yearly: "2567",
+    place: "สถานที่",
+    duration: "2567",
+    department: "แผนกสาขา",
+    numberOrder: "1244",
+    dateOrder: new Date(),
+    startDate: new Date(),
+    endDate: new Date(),
+  },
+];
+
+const visibleColumns = ref<string[]>([
+  "name",
+  "topic",
+  "yearly",
+  "place",
+  "duration",
+  "department",
+  "numberOrder",
+  "dateOrder",
+  "startDate",
+  "endDate",
+]);
+
+function validateForm() {
+  onSubmit();
+}
+
+async function onSubmit() {
+  dialogConfirm(
+    $q,
+    async () => {
+      closeDialog();
+    },
+    "ยืนยันการบันทึกข้อมูล",
+    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
+  );
+}
+
+function closeDialog() {
+  addDataDialog.value = false;
+}
+function closeHistoryDialog() {
+  historyDialog.value = false;
+}
+
+watch(
+  () => isDate.value,
+  () => {
+    if (isDate.value === "true") {
+      trainData.startDate = new Date(`${trainData.startYear}`);
+      trainData.endDate = new Date(`${trainData.finishYear}`);
+    } else {
+      trainData.startYear = parseInt(
+        moment(trainData.startDate).format("YYYY")
+      );
+      trainData.finishYear = parseInt(moment(trainData.endDate).format("YYYY"));
+    }
+  }
+);
+</script>
+
 <template>
-  <div>การฝึกอบรม/ดูงาน</div>
+  <q-toolbar style="padding: 0px">
+    <q-btn
+      round
+      flat
+      color="primary"
+      icon="add"
+      size="16px"
+      @click="addDataDialog = true"
+    >
+      <q-tooltip>เพิ่มข้อมูล</q-tooltip></q-btn
+    >
+
+    <q-space />
+    <q-input
+      dense
+      outlined
+      v-model="formFilter.keyword"
+      label="ค้นหา"
+      class="q-mr-sm"
+    >
+      <template v-slot:append>
+        <q-icon name="search" />
+      </template>
+    </q-input>
+    <q-select
+      v-if="mode === 'table'"
+      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="q-mr-sm"
+    />
+
+    <q-btn-toggle
+      v-model="mode"
+      dense
+      class="no-shadow toggle-borderd"
+      toggle-color="grey-4"
+      :options="[
+        { value: 'table', slot: 'table' },
+        { value: 'card', slot: 'card' },
+      ]"
+    >
+      <template v-slot:table>
+        <q-icon
+          name="format_list_bulleted"
+          size="24px"
+          :style="{
+            color: mode === 'table' ? '#787B7C' : '#C9D3DB',
+          }"
+        />
+      </template>
+
+      <template v-slot:card>
+        <q-icon
+          name="mdi-view-grid-outline"
+          size="24px"
+          :style="{
+            color: mode === 'card' ? '#787B7C' : '#C9D3DB',
+          }"
+        />
+      </template>
+    </q-btn-toggle>
+  </q-toolbar>
+
+  <d-table
+    :grid="mode === 'card'"
+    ref="table"
+    :columns="columns"
+    :rows="row"
+    row-key="name"
+    flat
+    bordered
+    :paging="true"
+    dense
+    :rows-per-page-options="[20, 50, 100]"
+    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-th auto-width />
+      </q-tr>
+    </template>
+    <template v-slot:body="props" v-if="mode === 'table'">
+      <q-tr :props="props" class="cursor-pointer">
+        <q-td
+          v-for="col in props.cols"
+          :key="col.id"
+          @click="addDataDialog = true"
+        >
+          <div
+            v-if="
+              col.name === 'startDate' ||
+              col.name === 'endDate' ||
+              col.name === 'dateOrder'
+            "
+          >
+            {{ col.value ? date2Thai(col.value) : "-" }}
+          </div>
+          <div v-else>
+            {{ col.value }}
+          </div>
+        </q-td>
+        <q-td auto-width>
+          <q-btn
+            color="info"
+            flat
+            dense
+            round
+            size="14px"
+            icon="mdi-history"
+            @click="() => (historyDialog = true)"
+          >
+            <q-tooltip>ประวัติแก้ไขประวัติการศึกษา</q-tooltip>
+          </q-btn>
+        </q-td>
+      </q-tr>
+    </template>
+    <template v-slot:item="props" v-else>
+      <div
+        class="q-pa-xs col-xs-12 col-sm-6 col-md-6 col-lg-6 grid-style-transition"
+      >
+        <q-card bordered>
+          <q-card-actions align="right">
+            <q-btn
+              flat
+              round
+              color="primary"
+              icon="edit"
+              @click="addDataDialog = true"
+            >
+              <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+            </q-btn>
+            <q-btn
+              flat
+              round
+              color="blue"
+              icon="history"
+              @click="historyDialog = true"
+            >
+              <q-tooltip>ประวัติแก้ไขประวัติการศึกษา</q-tooltip>
+            </q-btn>
+          </q-card-actions>
+          <q-separator />
+          <q-list>
+            <q-item
+              v-for="col in props.cols.filter((col) => col.name !== 'desc')"
+              :key="col.name"
+            >
+              <q-item-section>
+                <q-item-label>{{ col.label }}</q-item-label>
+              </q-item-section>
+              <q-item-section side>
+                <q-item-label
+                  caption
+                  v-if="
+                    col.name === 'startDate' ||
+                    col.name === 'endDate' ||
+                    col.name === 'graduateDate'
+                  "
+                >
+                  {{ col.value ? date2Thai(col.value) : "-" }}
+                </q-item-label>
+
+                <q-item-label caption v-else>{{ col.value }}</q-item-label>
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-card>
+      </div>
+    </template>
+  </d-table>
+
+  <q-dialog v-model="addDataDialog" class="dialog" persistent>
+    <q-card style="min-width: 40%" class="bg-white">
+      <q-form @submit.prevent greedy @validation-success="validateForm">
+        <q-card-section class="flex justify-between" style="padding: 0">
+          <dialog-header tittle="เพิ่มประวัติการศึกษา" :close="closeDialog" />
+        </q-card-section>
+        <q-separator color="grey-4" />
+        <div class="col">
+          <q-card-section class="row q-gutter-sm">
+            <div class="col">
+              <q-input
+                outlined
+                v-model="trainData.name"
+                label="ชื่อโครงการ/หลักสูตรการฝึกอบรม"
+                bg-color="white"
+                dense
+                :rules="[
+                  (val) =>
+                    !!val || `${'กรุณากรอกชื่อโครงการ/หลักสูตรการฝึกอบรม'}`,
+                ]"
+                hide-bottom-space
+              />
+            </div>
+            <div class="col">
+              <q-input
+                outlined
+                v-model="trainData.topic"
+                label="หัวข้อการฝึกอบรม/ดูงาน"
+                bg-color="white"
+                dense
+                :rules="[
+                  (val) => !!val || `${'กรุณากรอกหัวข้อการฝึกอบรม/ดูงาน'}`,
+                ]"
+                hide-bottom-space
+              />
+            </div>
+          </q-card-section>
+          <q-card flat bordered class="q-px-sm q-mx-md q-mb q-pb-sm borderCard">
+            <div class="row col-12 q-gutter-md q-py-sm text-grey-7">
+              <q-radio
+                v-model="isDate"
+                checked-icon="task_alt"
+                unchecked-icon="panorama_fish_eye"
+                val="false"
+                label="ปี"
+                dense
+              />
+              <q-radio
+                v-model="isDate"
+                checked-icon="task_alt"
+                unchecked-icon="panorama_fish_eye"
+                val="true"
+                label="วัน/เดือน/ปี"
+                dense
+              />
+            </div>
+            <div v-if="isDate === 'false'" class="row q-gutter-sm">
+              <div class="col">
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="trainData.startYear"
+                  :locale="'th'"
+                  autoApply
+                  year-picker
+                  :enableTimePicker="false"
+                  @update:modelValue="trainData.startYear"
+                >
+                  <template #year="{ year }">{{ year + 543 }}</template>
+                  <template #year-overlay-value="{ value }">{{
+                    parseInt(value + 543)
+                  }}</template>
+                  <template #trigger>
+                    <q-input
+                      dense
+                      lazy-rules
+                      outlined
+                      hide-bottom-space
+                      :model-value="trainData.startYear + 543"
+                      :rules="[
+                        (val) =>
+                          !!val ||
+                          `${'กรุณาเลือกปีที่เริ่มต้นการฝึกอบรม/ดูงาน'}`,
+                      ]"
+                      :label="`${'ปี ที่เริ่มต้นการฝึกอบรม/ดูงาน'}`"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          style="color: var(--q-primary)"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+              </div>
+              <div class="col">
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="trainData.finishYear"
+                  :locale="'th'"
+                  autoApply
+                  year-picker
+                  :enableTimePicker="false"
+                  @update:modelValue="trainData.finishYear"
+                >
+                  <template #year="{ year }">{{ year + 543 }}</template>
+                  <template #year-overlay-value="{ value }">{{
+                    parseInt(value + 543)
+                  }}</template>
+                  <template #trigger>
+                    <q-input
+                      dense
+                      lazy-rules
+                      outlined
+                      hide-bottom-space
+                      :model-value="trainData.finishYear + 543"
+                      :rules="[
+                        (val) =>
+                          !!val || `${'กรุณาเลือกปีที่จบการฝึกอบรม/ดูงาน'}`,
+                      ]"
+                      :label="`${'ปี ที่จบการฝึกอบรม/ดูงาน'}`"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          style="color: var(--q-primary)"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+              </div>
+            </div>
+            <div v-if="isDate === 'true'" class="row q-gutter-sm">
+              <div class="col">
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="trainData.startDate"
+                  :locale="'th'"
+                  autoApply
+                  :enableTimePicker="false"
+                  week-start="0"
+                >
+                  <template #year="{ year }">{{ year + 543 }}</template>
+                  <template #year-overlay-value="{ value }">{{
+                    parseInt(value + 543)
+                  }}</template>
+                  <template #trigger>
+                    <q-input
+                      outlined
+                      dense
+                      lazy-rules
+                      :model-value="date2Thai(trainData.startDate)"
+                      :rules="[
+                        (val) =>
+                          !!val ||
+                          `${'กรุณาเลือกวัน/เดือน/ปี ที่เริ่มต้นการฝึกอบรม/ดูงาน'}`,
+                      ]"
+                      hide-bottom-space
+                      :label="`${'วัน/เดือน/ปี ที่เริ่มต้นการฝึกอบรม/ดูงาน'}`"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          color="primary"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+              </div>
+              <div class="col">
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="trainData.endDate"
+                  :locale="'th'"
+                  autoApply
+                  :enableTimePicker="false"
+                  week-start="0"
+                >
+                  <template #year="{ year }">{{ year + 543 }}</template>
+                  <template #year-overlay-value="{ value }">{{
+                    parseInt(value + 543)
+                  }}</template>
+                  <template #trigger>
+                    <q-input
+                      outlined
+                      dense
+                      lazy-rules
+                      :model-value="date2Thai(trainData.endDate)"
+                      :rules="[
+                        (val) =>
+                          !!val ||
+                          `${'กรุณาเลือกวัน/เดือน/ปี ที่จบการฝึกอบรม/ดูงาน'}`,
+                      ]"
+                      hide-bottom-space
+                      :label="`${'วัน/เดือน/ปี ที่จบการฝึกอบรม/ดูงาน'}`"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          color="primary"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+              </div>
+            </div>
+          </q-card>
+          <q-card-section class="row q-gutter-sm q-pt-sm q-py-none">
+            <div class="col">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="trainData.yearly"
+                :locale="'th'"
+                autoApply
+                year-picker
+                :enableTimePicker="false"
+                @update:modelValue="trainData.yearly"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    lazy-rules
+                    outlined
+                    hide-bottom-space
+                    :model-value="trainData.yearly + 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>
+            </div>
+            <div class="col">
+              <q-input
+                outlined
+                v-model="trainData.place"
+                label="สถานที่ฝึกอบรม/ดูงาน"
+                bg-color="white"
+                dense
+                :rules="[
+                  (val) => !!val || `${'กรุณากรอกสถานที่ฝึกอบรม/ดูงาน'}`,
+                ]"
+                hide-bottom-space
+              />
+            </div>
+          </q-card-section>
+          <q-card-section class="row q-gutter-sm q-pt-sm q-pb-none">
+            <div class="col">
+              <q-input
+                outlined
+                v-model="trainData.duration"
+                label="รวมระยะเวลาในการฝึกอบรม/ดูงาน"
+                bg-color="white"
+                dense
+              />
+            </div>
+            <div class="col">
+              <q-input
+                outlined
+                v-model="trainData.department"
+                label="หน่วยงานที่รับผิดชอบจัดการฝึกอบรม/ดูงาน"
+                bg-color="white"
+                dense
+                mask="#.##"
+              />
+            </div>
+          </q-card-section>
+          <q-card-section class="row q-gutter-sm q-pt-sm q-pb-none">
+            <div class="col">
+              <q-input
+                outlined
+                v-model="trainData.numberOrder"
+                label="เลขที่คำสั่ง/เลขที่หนังสืออนุมัติ"
+                bg-color="white"
+                dense
+              />
+            </div>
+            <div class="col">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="trainData.dateOrder"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    lazy-rules
+                    :model-value="date2Thai(trainData.dateOrder)"
+                    hide-bottom-space
+                    :label="`${'คำสั่งลงวันที่/หนังสืออนุมัติลงวันที่'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        color="primary"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+          </q-card-section>
+        </div>
+        <q-card-actions align="right">
+          <q-btn
+            id="onSubmit"
+            type="submit"
+            dense
+            unelevated
+            label="บันทึก"
+            color="public"
+            class="q-px-md"
+          >
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+
+  <q-dialog v-model="historyDialog" class="dialog" persistent>
+    <q-card style="min-width: 70%" class="bg-white">
+      <q-form @submit.prevent greedy @validation-success="validateForm">
+        <q-card-section class="flex justify-between" style="padding: 0">
+          <dialog-header
+            tittle="ประวัติแก้ไขประวัติการศึกษา"
+            :close="closeHistoryDialog"
+          />
+        </q-card-section>
+        <q-separator color="grey-4" />
+        <q-card-section>
+          <q-toolbar style="padding: 0px" class="text-primary q-mb-sm">
+            <q-space />
+            <q-input
+              dense
+              outlined
+              bg-color="white"
+              v-model="formFilter.keyword"
+              label="ค้นหา"
+              class="q-mr-sm"
+            >
+              <template v-slot:append>
+                <q-icon name="search" />
+              </template>
+            </q-input>
+
+            <q-select
+              v-model="visibleColumns"
+              multiple
+              outlined
+              dense
+              bg-color="white"
+              options-dense
+              :display-value="$q.lang.table.columns"
+              emit-value
+              map-options
+              :options="columns"
+              option-value="name"
+              options-cover
+              style="min-width: 150px"
+            />
+          </q-toolbar>
+          <d-table
+            ref="table"
+            :columns="columns"
+            :rows="row"
+            row-key="name"
+            flat
+            bordered
+            :paging="true"
+            dense
+            :rows-per-page-options="[20, 50, 100]"
+            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-th auto-width />
+              </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.id">
+                  <div
+                    v-if="
+                      col.name === 'startDate' ||
+                      col.name === 'endDate' ||
+                      col.name === 'dateOrder'
+                    "
+                  >
+                    {{ col.value ? date2Thai(col.value) : "-" }}
+                  </div>
+                  <div v-else>
+                    {{ col.value }}
+                  </div>
+                </q-td>
+              </q-tr>
+            </template>
+          </d-table>
+        </q-card-section>
+      </q-form>
+    </q-card>
+  </q-dialog>
 </template>
 
-<style scoped></style>
+<style scoped>
+.borderCard {
+  border: 1px solid #d0d0d0;
+}
+</style>
diff --git a/src/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue b/src/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue
index d087cef14..57484d532 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue
@@ -327,7 +327,6 @@ watch(
 </script>
 
 <template>
-  <div class="toptitle col text-dark">ประวัติการศึกษา</div>
   <q-toolbar style="padding: 0px">
     <q-btn
       round
@@ -341,6 +340,17 @@ watch(
     >
 
     <q-space />
+    <q-input
+      dense
+      outlined
+      v-model="formFilter.keyword"
+      label="ค้นหา"
+      class="q-mr-sm"
+    >
+      <template v-slot:append>
+        <q-icon name="search" />
+      </template>
+    </q-input>
     <q-select
       v-if="mode === 'table'"
       v-model="visibleColumns"
@@ -361,7 +371,7 @@ watch(
     <q-btn-toggle
       v-model="mode"
       dense
-      class="no-shadow"
+      class="no-shadow toggle-borderd"
       toggle-color="grey-4"
       :options="[
         { value: 'table', slot: 'table' },
@@ -449,10 +459,10 @@ watch(
     </template>
     <template v-slot:item="props" v-else>
       <div
-        class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition"
+        class="q-pa-xs col-xs-12 col-sm-6 col-md-6 col-lg-6 grid-style-transition"
       >
         <q-card bordered>
-          <q-card-actions align="right">
+          <q-card-actions align="right" class="bg-grey-3">
             <q-btn
               flat
               round
@@ -474,28 +484,30 @@ watch(
           </q-card-actions>
           <q-separator />
           <q-list>
-            <q-item
-              v-for="col in props.cols.filter((col) => col.name !== 'desc')"
+            <div
+              class="q-pa-md"
+              v-for="(col, index) in props.cols"
               :key="col.name"
             >
-              <q-item-section>
-                <q-item-label>{{ col.label }}</q-item-label>
-              </q-item-section>
-              <q-item-section side>
-                <q-item-label
-                  caption
-                  v-if="
-                    col.name === 'startDate' ||
-                    col.name === 'finishDate' ||
-                    col.name === 'graduateDate'
-                  "
-                >
-                  {{ col.value ? date2Thai(col.value) : "-" }}
-                </q-item-label>
+              <div class="row">
+                <div class="col-5">
+                  <div>{{ col.label }}</div>
+                </div>
+                <div class="col-7">
+                  <div
+                    v-if="
+                      col.name === 'startDate' ||
+                      col.name === 'finishDate' ||
+                      col.name === 'graduateDate'
+                    "
+                  >
+                    {{ col.value ? date2Thai(col.value) : "-" }}
+                  </div>
 
-                <q-item-label caption v-else>{{ col.value }}</q-item-label>
-              </q-item-section>
-            </q-item>
+                  <div v-else>{{ col.value }}</div>
+                </div>
+              </div>
+            </div>
           </q-list>
         </q-card>
       </div>
@@ -503,7 +515,7 @@ watch(
   </d-table>
 
   <q-dialog v-model="addDataDialog" class="dialog" persistent>
-    <q-card style="min-width: 40%" class="bg-grey-11">
+    <q-card style="min-width: 40%" class="bg-white">
       <q-form @submit.prevent greedy @validation-success="validateForm">
         <q-card-section class="flex justify-between" style="padding: 0">
           <dialog-header tittle="เพิ่มประวัติการศึกษา" :close="closeDialog" />
@@ -511,26 +523,28 @@ watch(
         <q-separator color="grey-4" />
         <div class="col">
           <q-card-section class="row q-gutter-sm">
-            <q-input
-              outlined
-              v-model="educationData.level"
-              label="ระดับการศึกษา"
-              bg-color="white"
-              class="col"
-              dense
-              :rules="[(val) => !!val || `${'กรุณากรอกระดับการศึกษา'}`]"
-              hide-bottom-space
-            />
-            <q-input
-              outlined
-              v-model="educationData.institute"
-              label="สถานศึกษา"
-              bg-color="white"
-              class="col"
-              dense
-              :rules="[(val) => !!val || `${'กรุณากรอกสถานศึกษา'}`]"
-              hide-bottom-space
-            />
+            <div class="col">
+              <q-input
+                outlined
+                v-model="educationData.level"
+                label="ระดับการศึกษา"
+                bg-color="white"
+                dense
+                :rules="[(val) => !!val || `${'กรุณากรอกระดับการศึกษา'}`]"
+                hide-bottom-space
+              />
+            </div>
+            <div class="col">
+              <q-input
+                outlined
+                v-model="educationData.institute"
+                label="สถานศึกษา"
+                bg-color="white"
+                dense
+                :rules="[(val) => !!val || `${'กรุณากรอกสถานศึกษา'}`]"
+                hide-bottom-space
+              />
+            </div>
           </q-card-section>
           <q-card flat bordered class="q-px-sm q-mx-md q-mb q-pb-sm borderCard">
             <div class="row col-12 q-gutter-md q-py-sm text-grey-7">
@@ -552,284 +566,303 @@ watch(
               />
             </div>
             <div v-if="isDate === 'false'" class="row q-gutter-sm">
-              <datepicker
-                menu-class-name="modalfix"
-                v-model="educationData.startYear"
-                :locale="'th'"
-                autoApply
-                class="col"
-                year-picker
-                :enableTimePicker="false"
-                @update:modelValue="educationData.startYear"
-              >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    dense
-                    lazy-rules
-                    outlined
-                    hide-bottom-space
-                    :model-value="educationData.startYear + 543"
-                    :rules="[
-                      (val) => !!val || `${'กรุณาเลือกปีที่เริ่มต้นศึกษา'}`,
-                    ]"
-                    :label="`${'ปีที่เริ่มต้นศึกษา'}`"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        style="color: var(--q-primary)"
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-              <datepicker
-                menu-class-name="modalfix"
-                v-model="educationData.finishYear"
-                :locale="'th'"
-                autoApply
-                class="col"
-                year-picker
-                :enableTimePicker="false"
-                @update:modelValue="educationData.finishYear"
-              >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    dense
-                    lazy-rules
-                    outlined
-                    hide-bottom-space
-                    :model-value="educationData.finishYear + 543"
-                    :rules="[
-                      (val) => !!val || `${'กรุณาเลือกปีที่จบการศึกษา'}`,
-                    ]"
-                    :label="`${'ปีที่จบการศึกษา'}`"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        style="color: var(--q-primary)"
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
+              <div class="col">
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="educationData.startYear"
+                  :locale="'th'"
+                  autoApply
+                  year-picker
+                  :enableTimePicker="false"
+                  @update:modelValue="educationData.startYear"
+                >
+                  <template #year="{ year }">{{ year + 543 }}</template>
+                  <template #year-overlay-value="{ value }">{{
+                    parseInt(value + 543)
+                  }}</template>
+                  <template #trigger>
+                    <q-input
+                      dense
+                      lazy-rules
+                      outlined
+                      hide-bottom-space
+                      :model-value="educationData.startYear + 543"
+                      :rules="[
+                        (val) => !!val || `${'กรุณาเลือกปีที่เริ่มต้นศึกษา'}`,
+                      ]"
+                      :label="`${'ปีที่เริ่มต้นศึกษา'}`"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          style="color: var(--q-primary)"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+              </div>
+              <div class="col">
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="educationData.finishYear"
+                  :locale="'th'"
+                  autoApply
+                  year-picker
+                  :enableTimePicker="false"
+                  @update:modelValue="educationData.finishYear"
+                >
+                  <template #year="{ year }">{{ year + 543 }}</template>
+                  <template #year-overlay-value="{ value }">{{
+                    parseInt(value + 543)
+                  }}</template>
+                  <template #trigger>
+                    <q-input
+                      dense
+                      lazy-rules
+                      outlined
+                      hide-bottom-space
+                      :model-value="educationData.finishYear + 543"
+                      :rules="[
+                        (val) => !!val || `${'กรุณาเลือกปีที่จบการศึกษา'}`,
+                      ]"
+                      :label="`${'ปีที่จบการศึกษา'}`"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          style="color: var(--q-primary)"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+              </div>
             </div>
             <div v-if="isDate === 'true'" class="row q-gutter-sm">
-              <datepicker
-                class="col"
-                menu-class-name="modalfix"
-                v-model="educationData.startDate"
-                :locale="'th'"
-                autoApply
-                :enableTimePicker="false"
-                week-start="0"
-              >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    outlined
-                    dense
-                    lazy-rules
-                    :model-value="date2Thai(educationData.startDate)"
-                    :rules="[
-                      (val) => !!val || `${'กรุณาเลือกวันที่เริ่มต้นศึกษา'}`,
-                    ]"
-                    hide-bottom-space
-                    :label="`${'วัน/เดือน/ปี ที่เริ่มต้นศึกษา'}`"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        color="primary"
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-              <datepicker
-                menu-class-name="modalfix"
-                v-model="educationData.finishDate"
-                :locale="'th'"
-                class="col"
-                autoApply
-                :enableTimePicker="false"
-                week-start="0"
-              >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    outlined
-                    dense
-                    lazy-rules
-                    :model-value="date2Thai(educationData.finishDate)"
-                    :rules="[
-                      (val) => !!val || `${'กรุณาเลือกวันที่จบการศึกษา'}`,
-                    ]"
-                    hide-bottom-space
-                    :label="`${'วัน/เดือน/ปี ที่จบการศึกษา'}`"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        color="primary"
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
+              <div class="col">
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="educationData.startDate"
+                  :locale="'th'"
+                  autoApply
+                  :enableTimePicker="false"
+                  week-start="0"
+                >
+                  <template #year="{ year }">{{ year + 543 }}</template>
+                  <template #year-overlay-value="{ value }">{{
+                    parseInt(value + 543)
+                  }}</template>
+                  <template #trigger>
+                    <q-input
+                      outlined
+                      dense
+                      lazy-rules
+                      :model-value="date2Thai(educationData.startDate)"
+                      :rules="[
+                        (val) => !!val || `${'กรุณาเลือกวันที่เริ่มต้นศึกษา'}`,
+                      ]"
+                      hide-bottom-space
+                      :label="`${'วัน/เดือน/ปี ที่เริ่มต้นศึกษา'}`"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          color="primary"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+              </div>
+              <div class="col">
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="educationData.finishDate"
+                  :locale="'th'"
+                  autoApply
+                  :enableTimePicker="false"
+                  week-start="0"
+                >
+                  <template #year="{ year }">{{ year + 543 }}</template>
+                  <template #year-overlay-value="{ value }">{{
+                    parseInt(value + 543)
+                  }}</template>
+                  <template #trigger>
+                    <q-input
+                      outlined
+                      dense
+                      lazy-rules
+                      :model-value="date2Thai(educationData.finishDate)"
+                      :rules="[
+                        (val) => !!val || `${'กรุณาเลือกวันที่จบการศึกษา'}`,
+                      ]"
+                      hide-bottom-space
+                      :label="`${'วัน/เดือน/ปี ที่จบการศึกษา'}`"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          color="primary"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+              </div>
             </div>
           </q-card>
           <q-card-section class="row q-gutter-sm q-pt-sm">
-            <datepicker
-              menu-class-name="modalfix"
-              v-model="educationData.graduateDate"
-              :locale="'th'"
-              class="col"
-              autoApply
-              :enableTimePicker="false"
-              week-start="0"
-            >
-              <template #year="{ year }">{{ year + 543 }}</template>
-              <template #year-overlay-value="{ value }">{{
-                parseInt(value + 543)
-              }}</template>
-              <template #trigger>
-                <q-input
-                  outlined
-                  bg-color="white"
-                  dense
-                  lazy-rules
-                  :model-value="date2Thai(educationData.graduateDate)"
-                  :rules="[(val) => !!val || `${'กรุณาเลือกวันที่ได้รับ'}`]"
-                  hide-bottom-space
-                  :label="`${'วันที่ได้รับ'}`"
-                >
-                  <template v-slot:prepend>
-                    <q-icon name="event" class="cursor-pointer" color="primary">
-                    </q-icon>
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
-            <q-select
-              outlined
-              dense
-              bg-color="white"
-              class="col"
-              v-model="educationData.isEducation"
-              :options="educationOption"
-              label="เป็นวุฒิการศึกษาในตำแหน่ง"
-            />
+            <div class="col">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="educationData.graduateDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    bg-color="white"
+                    dense
+                    lazy-rules
+                    :model-value="date2Thai(educationData.graduateDate)"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกวันที่ได้รับ'}`]"
+                    hide-bottom-space
+                    :label="`${'วันที่ได้รับ'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        color="primary"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col">
+              <q-select
+                outlined
+                dense
+                bg-color="white"
+                v-model="educationData.isEducation"
+                :options="educationOption"
+                label="เป็นวุฒิการศึกษาในตำแหน่ง"
+              />
+            </div>
           </q-card-section>
           <q-card-section class="row q-gutter-sm q-py-none">
-            <q-input
-              outlined
-              v-model="educationData.degree"
-              label="วุฒิการศึกษา"
-              bg-color="white"
-              class="col"
-              dense
-              :rules="[(val) => !!val || `${'กรุณากรอกวุฒิการศึกษา'}`]"
-              hide-bottom-space
-            />
-            <q-input
-              outlined
-              v-model="educationData.field"
-              label="สาขาวิชา/ทาง"
-              bg-color="white"
-              class="col"
-              dense
-            />
+            <div class="col">
+              <q-input
+                outlined
+                v-model="educationData.degree"
+                label="วุฒิการศึกษา"
+                bg-color="white"
+                dense
+                :rules="[(val) => !!val || `${'กรุณากรอกวุฒิการศึกษา'}`]"
+                hide-bottom-space
+              />
+            </div>
+            <div class="col">
+              <q-input
+                outlined
+                v-model="educationData.field"
+                label="สาขาวิชา/ทาง"
+                bg-color="white"
+                dense
+              />
+            </div>
           </q-card-section>
           <q-card-section class="row q-gutter-sm q-pt-sm q-pb-none">
-            <q-input
-              outlined
-              v-model="educationData.fundName"
-              label="ทุน"
-              bg-color="white"
-              class="col"
-              dense
-            />
-            <q-input
-              outlined
-              v-model="educationData.gpa"
-              label="เกรดเฉลี่ย"
-              bg-color="white"
-              class="col"
-              dense
-              mask="#.##"
-            />
+            <div class="col">
+              <q-input
+                outlined
+                v-model="educationData.fundName"
+                label="ทุน"
+                bg-color="white"
+                dense
+              />
+            </div>
+            <div class="col">
+              <q-input
+                outlined
+                v-model="educationData.gpa"
+                label="เกรดเฉลี่ย"
+                bg-color="white"
+                dense
+                mask="#.##"
+              />
+            </div>
           </q-card-section>
           <q-card-section class="row q-gutter-sm q-pt-sm q-pb-none">
-            <q-input
-              outlined
-              v-model="educationData.country"
-              label="ประเทศ"
-              bg-color="white"
-              class="col"
-              dense
-            />
-            <q-input
-              outlined
-              v-model="educationData.other"
-              label="ข้อมูลติดต่อ"
-              bg-color="white"
-              class="col"
-              dense
-            />
+            <div class="col">
+              <q-input
+                outlined
+                v-model="educationData.country"
+                label="ประเทศ"
+                bg-color="white"
+                dense
+              />
+            </div>
+            <div class="col">
+              <q-input
+                outlined
+                v-model="educationData.other"
+                label="ข้อมูลติดต่อ"
+                bg-color="white"
+                dense
+              />
+            </div>
           </q-card-section>
           <q-card-section class="row q-gutter-sm q-pt-sm q-pb-none">
-            <q-input
-              outlined
-              v-model="educationData.duration"
-              label="ระยะเวลา"
-              bg-color="white"
-              class="col"
-              dense
-            />
-            <q-input
-              outlined
-              v-model="educationData.durationYear"
-              label="ระยะเวลาหลักสูตร"
-              bg-color="white"
-              class="col"
-              type="number"
-              dense
-            />
+            <div class="col">
+              <q-input
+                outlined
+                v-model="educationData.duration"
+                label="ระยะเวลา"
+                bg-color="white"
+                dense
+              />
+            </div>
+            <div class="col">
+              <q-input
+                outlined
+                v-model="educationData.durationYear"
+                label="ระยะเวลาหลักสูตร"
+                bg-color="white"
+                type="number"
+                dense
+              />
+            </div>
           </q-card-section>
           <q-card-section class="row q-gutter-sm q-pt-sm">
-            <q-input
-              outlined
-              v-model="educationData.note"
-              label="หมายเหตุ"
-              bg-color="white"
-              class="col"
-              dense
-              type="textarea"
-            />
+            <div class="col">
+              <q-input
+                outlined
+                v-model="educationData.note"
+                label="หมายเหตุ"
+                bg-color="white"
+                dense
+                type="textarea"
+              />
+            </div>
           </q-card-section>
         </div>
         <q-card-actions align="right">
@@ -850,7 +883,7 @@ watch(
   </q-dialog>
 
   <q-dialog v-model="historyDialog" class="dialog" persistent>
-    <q-card style="min-width: 70%" class="bg-grey-11">
+    <q-card style="min-width: 70%" class="bg-white">
       <q-form @submit.prevent greedy @validation-success="validateForm">
         <q-card-section class="flex justify-between" style="padding: 0">
           <dialog-header
diff --git a/src/modules/04_registryNew/components/detail/PersonalInformation/06_SpecialSkill.vue b/src/modules/04_registryNew/components/detail/PersonalInformation/06_SpecialSkill.vue
index 24981971b..ea7dcf2e7 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/06_SpecialSkill.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/06_SpecialSkill.vue
@@ -60,26 +60,26 @@ const historyDialog = ref<boolean>(false);
 const rows = [
   {
     field: "กีต้าร์",
-    detail: "ตะแน่วๆ",
+    detail: "จับคอร์ดได้",
     remark: "เล่นดีมาก",
     reference: "อ้างอิง",
   },
   {
     field: "ว่ายน้ำ",
-    detail: "ตะแน่วๆ",
-    remark: "เล่นดีมาก",
+    detail: "ดำน้ำนาน 5 นาที",
+    remark: "ว่ายน้ำเก่งมาก",
     reference: "อ้างอิง",
   },
   {
     field: "กีฬา",
-    detail: "ตะแน่วๆ",
+    detail: "จับคอร์ดได้",
     remark: "เล่นดีมาก",
     reference: "อ้างอิง",
   },
   {
     field: "การเรียน",
-    detail: "ตะแน่วๆ",
-    remark: "เล่นดีมาก",
+    detail: "เรียนเก่งมาก",
+    remark: "ตั้งใจเรียนมาก",
     reference: "อ้างอิง",
   },
 ];
@@ -133,11 +133,6 @@ async function onSubmit() {
 }
 </script>
 <template>
-  <div class="row items-center q-gutter-sm">
-    <div class="toptitle text-dark row items-center q-py-xs">
-      ความสามารถพิเศษ
-    </div>
-  </div>
   <q-toolbar style="padding: 0px" class="text-primary">
     <q-btn flat round dense icon="add" @click="() => (dialog = true)">
       <q-tooltip>เพิ่ม</q-tooltip>
@@ -145,7 +140,6 @@ async function onSubmit() {
     <q-space />
     <q-input
       dense
-      v-if="mode === 'table'"
       outlined
       v-model="formFilter.keyword"
       label="ค้นหา"
@@ -175,7 +169,7 @@ async function onSubmit() {
     <q-btn-toggle
       v-model="mode"
       dense
-      class="no-shadow"
+      class="no-shadow toggle-borderd"
       toggle-color="grey-4"
       :options="[
         { value: 'table', slot: 'table' },
@@ -263,9 +257,10 @@ async function onSubmit() {
             </q-btn>
             <q-btn
               flat
+              class="no-shadow toggle-borderd"
               round
               color="blue"
-              icon="history"
+              icon="mdi-history"
               @click="historyDialog = true"
             >
               <q-tooltip>ประวัติแก้ไขความสามารถพิเศษ</q-tooltip>
@@ -288,7 +283,7 @@ async function onSubmit() {
   </d-table>
 
   <q-dialog v-model="dialog" class="dialog" persistent>
-    <q-card style="min-width: 40%" class="bg-grey-11">
+    <q-card style="min-width: 40%" class="bg-white">
       <q-form @submit.prevent greedy @validation-success="validateForm">
         <q-card-section class="flex justify-between" style="padding: 0">
           <dialog-header tittle="เพิ่มความสามารถพิเศษ" :close="closeDialog" />
@@ -296,26 +291,28 @@ async function onSubmit() {
         <q-separator color="grey-4" />
         <q-card-section class="col q-gutter-sm q-pr-md">
           <div class="row q-gutter-sm q-ml-none">
-            <q-input
-              outlined
-              class="col"
-              dense
-              bg-color="white"
-              v-model="specialSkill.field"
-              label="ด้าน"
-              hide-bottom-space
-              :rules="[(val) => !!val || `${'กรุณากรอกด้านความสามารถพิเศษ'}`]"
-            />
-            <q-input
-              outlined
-              class="col"
-              dense
-              bg-color="white"
-              v-model="specialSkill.detail"
-              label="รายละเอียด"
-              hide-bottom-space
-              :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
-            />
+            <div class="col">
+              <q-input
+                outlined
+                dense
+                bg-color="white"
+                v-model="specialSkill.field"
+                label="ด้าน"
+                hide-bottom-space
+                :rules="[(val) => !!val || `${'กรุณากรอกด้านความสามารถพิเศษ'}`]"
+              />
+            </div>
+            <div class="col">
+              <q-input
+                outlined
+                dense
+                bg-color="white"
+                v-model="specialSkill.detail"
+                label="รายละเอียด"
+                hide-bottom-space
+                :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
+              />
+            </div>
           </div>
           <q-input
             class="col-12"
@@ -352,7 +349,7 @@ async function onSubmit() {
   </q-dialog>
 
   <q-dialog v-model="historyDialog" class="dialog" persistent>
-    <q-card style="min-width: 70%" class="bg-grey-11">
+    <q-card style="min-width: 70%" class="bg-white">
       <q-form @submit.prevent greedy @validation-success="validateForm">
         <q-card-section class="flex justify-between" style="padding: 0">
           <dialog-header
diff --git a/src/modules/04_registryNew/interface/index/profesLicense.ts b/src/modules/04_registryNew/interface/index/profesLicense.ts
new file mode 100644
index 000000000..a7eb4f4b0
--- /dev/null
+++ b/src/modules/04_registryNew/interface/index/profesLicense.ts
@@ -0,0 +1,9 @@
+interface ProfesLicenseObject {
+    certificateType: string;
+    issuer: string;
+    certificateNo: string;
+    issueDate: Date;
+    expireDate: Date;
+}
+
+export type { ProfesLicenseObject };