diff --git a/src/modules/04_registryNew/components/detail/PersonalInformation/04_Family.vue b/src/modules/04_registryNew/components/detail/PersonalInformation/04_Family.vue
index 1c6623747..de10f5f84 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/04_Family.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/04_Family.vue
@@ -6,7 +6,7 @@ import { QForm, useQuasar } from "quasar";
 
 const mixin = useCounterMixin();
 const $q = useQuasar();
-const { dialogConfirm, success, messageError, showLoader, hideLoader } = mixin;
+const { dialogConfirm } = mixin;
 
 const formRef = ref<QForm | null>(null);
 
@@ -16,7 +16,7 @@ const fatherPrefixRef = ref<any>(null);
 const fatherFirstNameRef = ref<any>(null);
 const fatherLastNameRef = ref<any>(null);
 const fatherData = reactive({
-  isHaveInfo: "0",
+  isHaveInfo: 0,
   isDead: false,
   citizenId: null,
   prefix: null,
@@ -26,7 +26,7 @@ const fatherData = reactive({
   job: null,
 });
 const motherData = reactive({
-  isHaveInfo: "0",
+  isHaveInfo: 0,
   isDead: false,
   citizenId: null,
   prefix: null,
@@ -36,7 +36,7 @@ const motherData = reactive({
   job: null,
 });
 const spouseData = reactive({
-  isHave: "0",
+  isHave: 0,
   isDead: false,
   citizenId: null,
   prefix: null,
@@ -69,7 +69,6 @@ function closeHistoryDialog() {
 }
 
 function validateForm() {
-  console.log("test");
   onSubmit();
 }
 
@@ -105,8 +104,8 @@ function deleteChildren(items: any) {
 
 <template>
   <div>
-    <div class="flex justify-between text-center">
-      <div class="text-h6 text-center">ข้อมูลครอบครัว</div>
+    <div class="flex justify-between">
+      <div class="toptitle col text-dark">ข้อมูลครอบครัว</div>
       <div>
         <q-btn
           round
@@ -217,7 +216,7 @@ function deleteChildren(items: any) {
           v-model="motherData.isHaveInfo"
           checked-icon="task_alt"
           unchecked-icon="panorama_fish_eye"
-          val="1"
+          :val="1"
           :disable="true"
           label="มีข้อมูล"
           dense
@@ -227,7 +226,7 @@ function deleteChildren(items: any) {
           v-model="motherData.isHaveInfo"
           checked-icon="task_alt"
           unchecked-icon="panorama_fish_eye"
-          val="0"
+          :val="0"
           :disable="true"
           color="red"
           label="ไม่มีข้อมูล"
@@ -465,7 +464,7 @@ function deleteChildren(items: any) {
                 v-model="fatherData.isHaveInfo"
                 checked-icon="task_alt"
                 unchecked-icon="panorama_fish_eye"
-                val="1"
+                :val="1"
                 label="มีข้อมูล"
                 dense
                 color="primary"
@@ -474,14 +473,14 @@ function deleteChildren(items: any) {
                 v-model="fatherData.isHaveInfo"
                 checked-icon="task_alt"
                 unchecked-icon="panorama_fish_eye"
-                val="0"
+                :val="0"
                 color="red"
                 label="ไม่มีข้อมูล"
                 dense
               />
               <q-separator color="grey-4" vertical />
               <q-checkbox
-                :disable="fatherData.isHaveInfo === '0' ? true : false"
+                :disable="!fatherData.isHaveInfo"
                 outline
                 v-model="fatherData.isDead"
                 label="เสียชีวิตแล้ว"
@@ -492,7 +491,7 @@ function deleteChildren(items: any) {
           </div>
           <div class="flex q-gutter-sm">
             <q-input
-              :disable="fatherData.isHaveInfo === '0' ? true : false"
+              :disable="!fatherData.isHaveInfo"
               class="col"
               outlined
               hide-bottom-space
@@ -503,7 +502,7 @@ function deleteChildren(items: any) {
               mask="#############"
             />
             <q-select
-              :disable="fatherData.isHaveInfo === '0' ? true : false"
+              :disable="!fatherData.isHaveInfo"
               class="col"
               outlined
               lazy-rules
@@ -512,9 +511,10 @@ function deleteChildren(items: any) {
               :options="fatherData.optionPrefix"
               :rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
               label="คำนำหน้าชื่อ"
+              hidden-space
             />
             <q-input
-              :disable="fatherData.isHaveInfo === '0' ? true : false"
+              :disable="!fatherData.isHaveInfo"
               class="col"
               outlined
               dense
@@ -522,9 +522,10 @@ function deleteChildren(items: any) {
               v-model="fatherData.firstName"
               :rules="[(val) => !!val || 'กรุณากรอกชื่อ']"
               label="ชื่อ"
+              hidden-space
             />
             <q-input
-              :disable="fatherData.isHaveInfo === '0' ? true : false"
+              :disable="!fatherData.isHaveInfo"
               class="col"
               outlined
               dense
@@ -534,7 +535,7 @@ function deleteChildren(items: any) {
               label="นามสกุล"
             />
             <q-input
-              :disable="fatherData.isHaveInfo === '0' ? true : false"
+              :disable="!fatherData.isHaveInfo"
               class="col"
               outlined
               dense
@@ -549,7 +550,7 @@ function deleteChildren(items: any) {
                 v-model="motherData.isHaveInfo"
                 checked-icon="task_alt"
                 unchecked-icon="panorama_fish_eye"
-                val="1"
+                :val="1"
                 label="มีข้อมูล"
                 dense
                 color="primary"
@@ -558,14 +559,14 @@ function deleteChildren(items: any) {
                 v-model="motherData.isHaveInfo"
                 checked-icon="task_alt"
                 unchecked-icon="panorama_fish_eye"
-                val="0"
+                :val="0"
                 color="red"
                 label="ไม่มีข้อมูล"
                 dense
               />
               <q-separator color="grey-4" vertical />
               <q-checkbox
-                :disable="motherData.isHaveInfo === '0' ? true : false"
+                :disable="!motherData.isHaveInfo"
                 outline
                 v-model="motherData.isDead"
                 label="เสียชีวิตแล้ว"
@@ -576,7 +577,7 @@ function deleteChildren(items: any) {
           </div>
           <div class="flex q-gutter-sm">
             <q-input
-              :disable="motherData.isHaveInfo === '0' ? true : false"
+              :disable="!motherData.isHaveInfo"
               class="col"
               outlined
               hide-bottom-space
@@ -587,7 +588,7 @@ function deleteChildren(items: any) {
               mask="#############"
             />
             <q-select
-              :disable="motherData.isHaveInfo === '0' ? true : false"
+              :disable="!motherData.isHaveInfo"
               class="col"
               outlined
               dense
@@ -598,7 +599,7 @@ function deleteChildren(items: any) {
               label="คำนำหน้าชื่อ"
             />
             <q-input
-              :disable="motherData.isHaveInfo === '0' ? true : false"
+              :disable="!motherData.isHaveInfo"
               class="col"
               outlined
               :rules="[(val) => !!val || 'กรุณากรอกชื่อ']"
@@ -608,7 +609,7 @@ function deleteChildren(items: any) {
               label="ชื่อ"
             />
             <q-input
-              :disable="motherData.isHaveInfo === '0' ? true : false"
+              :disable="!motherData.isHaveInfo"
               :rules="[(val) => !!val || 'กรุณากรอกนามสกุล']"
               class="col"
               outlined
@@ -618,7 +619,7 @@ function deleteChildren(items: any) {
               label="นามสกุล"
             />
             <q-input
-              :disable="motherData.isHaveInfo === '0' ? true : false"
+              :disable="!motherData.isHaveInfo"
               class="col"
               outlined
               dense
@@ -633,7 +634,7 @@ function deleteChildren(items: any) {
                 v-model="spouseData.isHave"
                 checked-icon="task_alt"
                 unchecked-icon="panorama_fish_eye"
-                val="1"
+                :val="1"
                 label="มี"
                 dense
                 color="primary"
@@ -642,14 +643,14 @@ function deleteChildren(items: any) {
                 v-model="spouseData.isHave"
                 checked-icon="task_alt"
                 unchecked-icon="panorama_fish_eye"
-                val="0"
+                :val="0"
                 color="red"
                 label="ไม่มี"
                 dense
               />
               <q-separator color="grey-4" vertical />
               <q-checkbox
-                :disable="spouseData.isHave === '0' ? true : false"
+                :disable="!spouseData.isHave"
                 outline
                 v-model="spouseData.isDead"
                 label="เสียชีวิตแล้ว"
@@ -661,7 +662,7 @@ function deleteChildren(items: any) {
           <div class="flex q-gutter-sm">
             <q-input
               class="col"
-              :disable="spouseData.isHave === '0' ? true : false"
+              :disable="!spouseData.isHave"
               outlined
               hide-bottom-space
               dense
@@ -672,7 +673,7 @@ function deleteChildren(items: any) {
             />
             <q-select
               class="col"
-              :disable="spouseData.isHave === '0' ? true : false"
+              :disable="!spouseData.isHave"
               outlined
               dense
               v-model="spouseData.prefix"
@@ -682,7 +683,7 @@ function deleteChildren(items: any) {
             />
             <q-input
               class="col"
-              :disable="spouseData.isHave === '0' ? true : false"
+              :disable="!spouseData.isHave"
               outlined
               dense
               :rules="[(val) => !!val || 'กรุณากรอกชื่อ']"
@@ -692,7 +693,7 @@ function deleteChildren(items: any) {
             <q-input
               class="col"
               :rules="[(val) => !!val || 'กรุณากรอกนามสกุล']"
-              :disable="spouseData.isHave === '0' ? true : false"
+              :disable="!spouseData.isHave"
               outlined
               dense
               v-model="spouseData.lastName"
@@ -700,7 +701,7 @@ function deleteChildren(items: any) {
             />
             <q-input
               class="col"
-              :disable="spouseData.isHave === '0' ? true : false"
+              :disable="!spouseData.isHave"
               outlined
               dense
               v-model="spouseData.job"
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 884511056..b1ff80fe4 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue
@@ -1,6 +1,817 @@
-<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: "level",
+    align: "left",
+    label: "ระดับศึกษา",
+    sortable: true,
+    field: "level",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "institute",
+    align: "left",
+    label: "สถานศึกษา",
+    sortable: true,
+    field: "institute",
+    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: "finishDate",
+    align: "left",
+    label: "ถึง",
+    sortable: true,
+    field: "finishDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "graduateDate",
+    align: "left",
+    label: "วันที่สำเร็จการศึกษา",
+    sortable: true,
+    field: "graduateDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "isEducation",
+    align: "left",
+    label: "เป็นวุฒิการศึกษาในตำแหน่ง",
+    sortable: true,
+    field: "isEducation",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "degree",
+    align: "left",
+    label: "วุฒิการศึกษา",
+    sortable: true,
+    field: "degree",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "field",
+    align: "left",
+    label: "สาขาวิชา/ทาง",
+    sortable: true,
+    field: "field",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "fundName",
+    align: "left",
+    label: "ทุน",
+    sortable: true,
+    field: "fundName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "gpa",
+    align: "left",
+    label: "เกรดเฉลี่ย",
+    sortable: true,
+    field: "gpa",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "country",
+    align: "left",
+    label: "ประเทศ",
+    sortable: true,
+    field: "country",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "other",
+    align: "left",
+    label: "ข้อมูลการติดต่อ",
+    sortable: true,
+    field: "other",
+    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: "durationYear",
+    align: "left",
+    label: "ระยะเวลาหลักสูตร",
+    sortable: true,
+    field: "durationYear",
+    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 educationData = reactive({
+  level: "",
+  institute: "",
+  startYear: new Date().getFullYear(),
+  finishYear: new Date().getFullYear(),
+  graduateDate: new Date(),
+  startDate: new Date(),
+  finishDate: new Date(),
+  isEducation: "",
+  degree: "",
+  field: "",
+  fundName: "",
+  gpa: null,
+  country: "",
+  other: "",
+  duration: "",
+  durationYear: "",
+  note: "",
+});
+
+const row = [
+  {
+    level: "ประกาศนียบัตรบัณฑิต",
+    institute: "เชียงใหม่วิทย์",
+    degree: "ปริญญาตรี",
+    field: "วิศวะคอม",
+    gpa: "",
+    country: "อังกฤษ",
+    duration: "3 ปี",
+    durationYear: "4 ปี",
+    other: "อบต เชียงใหม่",
+    fundName: "ทุนรัฐบาล",
+    isEducation: "ปริญญาตรี",
+    finishDate: new Date(),
+    startDate: new Date(),
+    graduateDate: new Date(),
+  },
+  {
+    level: "ประกาศนียบัตรบัณฑิต",
+    institute: "โปลิวิทยาคม",
+    degree: "ปริญญาตรี",
+    field: "วิศวะคอม",
+    gpa: "3.8",
+    country: "อังกฤษ",
+    duration: "3 ปี",
+    durationYear: "4 ปี",
+    other: "อบต เชียงใหม่",
+    fundName: "ทุนรัฐบาล",
+    isEducation: "ปริญญาตรี",
+    finishDate: new Date(),
+    startDate: new Date(),
+    graduateDate: new Date(),
+  },
+  {
+    level: "ประกาศนียบัตรบัณฑิต",
+    institute: "โรงเรียนวัฒโน",
+    degree: "ปริญญาตรี",
+    field: "วิศวะคอม",
+    gpa: "3.8",
+    country: "อังกฤษ",
+    duration: "3 ปี",
+    durationYear: "4 ปี",
+    other: "อบต เชียงใหม่",
+    fundName: "ทุนรัฐบาล",
+    isEducation: "ปริญญาตรี",
+    finishDate: new Date(),
+    startDate: new Date(),
+    graduateDate: new Date(),
+  },
+  {
+    level: "ประกาศนียบัตรบัณฑิต",
+    institute: "โรงเรียนวัฒโน",
+    degree: "ปริญญาตรี",
+    field: "วิศวะคอม",
+    gpa: "3.8",
+    country: "อังกฤษ",
+    duration: "3 ปี",
+    durationYear: "4 ปี",
+    other: "อบต เชียงใหม่",
+    fundName: "ทุนรัฐบาล",
+    isEducation: "ปริญญาตรี",
+    finishDate: new Date(),
+    startDate: new Date(),
+    graduateDate: new Date(),
+  },
+];
+
+const visibleColumns = ref<string[]>([
+  "level",
+  "institute",
+  "degree",
+  "field",
+  "gpa",
+  "country",
+  "duration",
+  "durationYear",
+  "other",
+  "fundName",
+  "isEducation",
+  "finishDate",
+  "startDate",
+  "graduateDate",
+]);
+
+function validateForm() {
+  onSubmit();
+}
+
+async function onSubmit() {
+  dialogConfirm(
+    $q,
+    async () => {
+      closeDialog();
+    },
+    "ยืนยันการบันทึกข้อมูล",
+    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
+  );
+}
+
+function closeDialog() {
+  addDataDialog.value = false;
+}
+
+watch(
+  () => isDate.value,
+  () => {
+    if (isDate.value === "true") {
+      educationData.startDate = new Date(`${educationData.startYear}`);
+      educationData.finishDate = new Date(`${educationData.finishYear}`);
+    } else {
+      educationData.startYear = parseInt(
+        moment(educationData.startDate).format("YYYY")
+      );
+      educationData.finishYear = parseInt(
+        moment(educationData.finishDate).format("YYYY")
+      );
+    }
+  }
+);
+</script>
+
 <template>
-  <div>5</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-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">
+          <div
+            v-if="
+              col.name === 'startDate' ||
+              col.name === 'finishDate' ||
+              col.name === 'graduateDate'
+            "
+          >
+            {{ 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" />
+        </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-3 grid-style-transition"
+      >
+        <q-card bordered>
+          <q-card-actions align="right">
+            <q-btn flat round color="primary" icon="edit">
+              <q-tooltip>แก่ไขข้อมุล</q-tooltip>
+            </q-btn>
+            <q-btn flat round color="blue" icon="history">
+              <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 === 'finishDate' ||
+                    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-grey-11">
+      <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">
+            <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
+            />
+          </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">
+              <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>
+            <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>
+          </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="เป็นวุฒิการศึกษาในตำแหน่ง"
+            />
+          </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
+            />
+          </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="#.##"
+            />
+          </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
+            />
+          </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
+            />
+          </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"
+            />
+          </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>
 </template>
 
-<style scoped></style>
+<style scoped>
+.borderCard {
+  border: 1px solid #d0d0d0;
+}
+</style>