diff --git a/package-lock.json b/package-lock.json
index c91b905..21fd5b7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,8 @@
       "version": "0.0.0",
       "dependencies": {
         "@quasar/extras": "^1.15.11",
+        "@vuepic/vue-datepicker": "^4.2.1",
+        "keycloak-js": "^21.0.1",
         "pinia": "^2.0.32",
         "quasar": "^2.11.7",
         "vue": "^3.2.47",
@@ -2031,6 +2033,21 @@
         }
       }
     },
+    "node_modules/@vuepic/vue-datepicker": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@vuepic/vue-datepicker/-/vue-datepicker-4.2.1.tgz",
+      "integrity": "sha512-O8hy0o9jQkv/Et7G0mUFDR94NTcHHouy70ELfrTmaWOIBamS/8cRWAwwb/reOvKPX+eo1XKs/v2mj+i5WA14kw==",
+      "dependencies": {
+        "date-fns": "^2.29.3",
+        "date-fns-tz": "^1.3.7"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "vue": ">=3.2.0"
+      }
+    },
     "node_modules/abab": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
@@ -2354,7 +2371,6 @@
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
       "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -3054,6 +3070,26 @@
         "node": ">=14"
       }
     },
+    "node_modules/date-fns": {
+      "version": "2.29.3",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz",
+      "integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==",
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
+    },
+    "node_modules/date-fns-tz": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-1.3.8.tgz",
+      "integrity": "sha512-qwNXUFtMHTTU6CFSFjoJ80W8Fzzp24LntbjFFBgL/faqds4e5mo9mftoRLgr3Vi1trISsg4awSpYVsOQCRnapQ==",
+      "peerDependencies": {
+        "date-fns": ">=2.0.0"
+      }
+    },
     "node_modules/dayjs": {
       "version": "1.11.7",
       "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.7.tgz",
@@ -5189,6 +5225,11 @@
         "url": "https://opencollective.com/js-sdsl"
       }
     },
+    "node_modules/js-sha256": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/js-sha256/-/js-sha256-0.9.0.tgz",
+      "integrity": "sha512-sga3MHh9sgQN2+pJ9VYZ+1LPwXOxuBJBA5nrR5/ofPfuiJBE2hnjsaN8se8JznOmGLN2p49Pe5U/ttafcs/apA=="
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -5383,6 +5424,15 @@
         "verror": "1.10.0"
       }
     },
+    "node_modules/keycloak-js": {
+      "version": "21.0.1",
+      "resolved": "https://registry.npmjs.org/keycloak-js/-/keycloak-js-21.0.1.tgz",
+      "integrity": "sha512-ot0KW4qyDHl5AyDZNV0CkEkuvIZi+37y3BReNvqqfag7wqJeV13R/PcgECvbbd05+0NSOQjhBL8S+a4A++vNQw==",
+      "dependencies": {
+        "base64-js": "^1.5.1",
+        "js-sha256": "^0.9.0"
+      }
+    },
     "node_modules/lazy-ass": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/lazy-ass/-/lazy-ass-1.6.0.tgz",
@@ -9601,6 +9651,15 @@
       "dev": true,
       "requires": {}
     },
+    "@vuepic/vue-datepicker": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@vuepic/vue-datepicker/-/vue-datepicker-4.2.1.tgz",
+      "integrity": "sha512-O8hy0o9jQkv/Et7G0mUFDR94NTcHHouy70ELfrTmaWOIBamS/8cRWAwwb/reOvKPX+eo1XKs/v2mj+i5WA14kw==",
+      "requires": {
+        "date-fns": "^2.29.3",
+        "date-fns-tz": "^1.3.7"
+      }
+    },
     "abab": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
@@ -9842,8 +9901,7 @@
     "base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
-      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
-      "dev": true
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA=="
     },
     "bcrypt-pbkdf": {
       "version": "1.0.2",
@@ -10348,6 +10406,17 @@
         "whatwg-url": "^12.0.0"
       }
     },
+    "date-fns": {
+      "version": "2.29.3",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz",
+      "integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA=="
+    },
+    "date-fns-tz": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-1.3.8.tgz",
+      "integrity": "sha512-qwNXUFtMHTTU6CFSFjoJ80W8Fzzp24LntbjFFBgL/faqds4e5mo9mftoRLgr3Vi1trISsg4awSpYVsOQCRnapQ==",
+      "requires": {}
+    },
     "dayjs": {
       "version": "1.11.7",
       "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.7.tgz",
@@ -11909,6 +11978,11 @@
       "integrity": "sha512-mifzlm2+5nZ+lEcLJMoBK0/IH/bDg8XnJfd/Wq6IP+xoCjLZsTOnV2QpxlVbX9bMnkl5PdEjNtBJ9Cj1NjifhQ==",
       "dev": true
     },
+    "js-sha256": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/js-sha256/-/js-sha256-0.9.0.tgz",
+      "integrity": "sha512-sga3MHh9sgQN2+pJ9VYZ+1LPwXOxuBJBA5nrR5/ofPfuiJBE2hnjsaN8se8JznOmGLN2p49Pe5U/ttafcs/apA=="
+    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -12065,6 +12139,15 @@
         "verror": "1.10.0"
       }
     },
+    "keycloak-js": {
+      "version": "21.0.1",
+      "resolved": "https://registry.npmjs.org/keycloak-js/-/keycloak-js-21.0.1.tgz",
+      "integrity": "sha512-ot0KW4qyDHl5AyDZNV0CkEkuvIZi+37y3BReNvqqfag7wqJeV13R/PcgECvbbd05+0NSOQjhBL8S+a4A++vNQw==",
+      "requires": {
+        "base64-js": "^1.5.1",
+        "js-sha256": "^0.9.0"
+      }
+    },
     "lazy-ass": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/lazy-ass/-/lazy-ass-1.6.0.tgz",
diff --git a/package.json b/package.json
index b0875d5..65ddde9 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,8 @@
   },
   "dependencies": {
     "@quasar/extras": "^1.15.11",
+    "@vuepic/vue-datepicker": "^4.2.1",
+    "keycloak-js": "^21.0.1",
     "pinia": "^2.0.32",
     "quasar": "^2.11.7",
     "vue": "^3.2.47",
diff --git a/src/api/index.ts b/src/api/index.ts
new file mode 100644
index 0000000..0279b79
--- /dev/null
+++ b/src/api/index.ts
@@ -0,0 +1,34 @@
+/**config api */
+import { ref } from "vue";
+
+const env = ref<string>(process.env.NODE_ENV || "development");
+// if (process.env.VUE_APP_TEST) {
+//   env = "test";
+// }
+
+const config = ref<any>({
+	development: {
+		API_URI: "https://localhost:7006/api/v1",
+		// API_URI: "https://wsh.frappet.com",
+		MEET_URI: "meet.frappet.com",
+	},
+	test: {
+		API_URI: "http://localhost:5010/api/v1",
+		MEET_URI: "meet.frappet.com",
+	},
+	production: {
+		// API_URI: "https://localhost:5010",
+		API_URI: `${window.location.protocol}//api-${window.location.host}/api/v1`,
+		MEET_URI: "meet.frappet.com",
+	},
+});
+
+const API_URI = ref<string>(config.value[env.value].API_URI);
+const MEET_URI = ref<string>(config.value[env.value].MEET_URI);
+
+export default {
+	env: env.value,
+	config: config.value,
+	API_URI: API_URI.value,
+	MEET_URI: MEET_URI.value,
+};
diff --git a/src/api/manage/api.organization.ts b/src/api/manage/api.organization.ts
new file mode 100644
index 0000000..5255dea
--- /dev/null
+++ b/src/api/manage/api.organization.ts
@@ -0,0 +1,7 @@
+import env from '../index'
+const dashbord = `${env.API_URI}/dashbord/`
+
+export default {
+  countDashbordSubHistory: (type: number) => `${dashbord}${type}`,
+  countDashbordHistory: `${dashbord}`
+}
diff --git a/src/app.config.ts b/src/app.config.ts
new file mode 100644
index 0000000..6370ef3
--- /dev/null
+++ b/src/app.config.ts
@@ -0,0 +1,11 @@
+/**ใช้รวมไฟล์ย่อยๆ ของ api แต่ละไฟล์ */
+
+import manageOrganization from './api/manage/api.organization'
+
+const API = {
+  ...manageOrganization
+}
+
+export default {
+  API: API
+}
diff --git a/src/components/DialogFooter.vue b/src/components/DialogFooter.vue
new file mode 100644
index 0000000..8975b2b
--- /dev/null
+++ b/src/components/DialogFooter.vue
@@ -0,0 +1,126 @@
+<template>
+  <q-card-actions class="text-primary q-py-sm">
+    <q-btn
+      flat
+      round
+      icon="mdi-menu-left"
+      @click="clickPrevious"
+      v-if="modalEdit == true"
+      :disable="previous == false"
+      :color="!previous ? 'grey-7' : 'public'"
+    />
+    <q-btn
+      flat
+      round
+      icon="mdi-menu-right"
+      @click="clickNext"
+      v-if="modalEdit == true"
+      :disable="next == false"
+      :color="!next ? 'grey-7' : 'public'"
+    />
+    <q-space />
+    <q-btn
+      v-if="!editvisible"
+      flat
+      round
+      :disabled="editvisible"
+      :color="editvisible ? 'grey-7' : 'primary'"
+      @click="edit"
+      icon="mdi-pencil-outline"
+    >
+      <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+    </q-btn>
+    <div v-else>
+      <q-btn
+        flat
+        round
+        :disabled="!editvisible"
+        :outline="!editvisible"
+        :color="!editvisible ? 'grey-7' : 'red'"
+        @click="cancel()"
+        icon="mdi-undo"
+        v-if="modalEdit == true"
+      >
+        <q-tooltip>ยกเลิก</q-tooltip>
+      </q-btn>
+      <q-btn
+        flat
+        round
+        :disabled="!editvisible"
+        :color="!editvisible ? 'grey-7' : 'public'"
+        @click="checkSave"
+        icon="mdi-content-save-outline"
+      >
+        <q-tooltip>บันทึก</q-tooltip>
+      </q-btn>
+    </div>
+  </q-card-actions>
+</template>
+<script setup lang="ts">
+import { ref, useAttrs } from "vue";
+
+const props = defineProps({
+  editvisible: Boolean,
+  next: Boolean,
+  previous: Boolean,
+  modalEdit: Boolean,
+  clickNext: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  clickPrevious: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  cancel: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  edit: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  save: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  validate: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+const emit = defineEmits([
+  "update:editvisible",
+  "update:next",
+  "update:previous",
+]);
+
+const updateEdit = (value: Boolean) => {
+  emit("update:editvisible", value);
+};
+const cancel = async () => {
+  props.cancel();
+};
+const edit = async () => {
+  updateEdit(!props.editvisible);
+  props.edit();
+};
+const checkSave = () => {
+  props.validate();
+  props.save();
+  //   if (myForm.value !== null) {
+  //     myForm.value.validate().then((success) => {
+  //       if (success) {
+  //       }
+  //     });
+  //   }
+};
+
+const clickNext = async () => {
+  await props.clickNext();
+};
+
+const clickPrevious = async () => {
+  await props.clickPrevious();
+};
+</script>
diff --git a/src/components/DialogHeader.vue b/src/components/DialogHeader.vue
new file mode 100644
index 0000000..95cdcdb
--- /dev/null
+++ b/src/components/DialogHeader.vue
@@ -0,0 +1,32 @@
+<template>
+  <q-card-section class="row items-center col-12 q-py-sm">
+    <div class="row col-11">
+      <div class="text-bold">{{ tittle }}</div>
+    </div>
+    <q-space />
+    <!-- <div class="row col-1"> -->
+    <q-btn
+      icon="close"
+      unelevated
+      round
+      dense
+      @click="close"
+      style="color: #ff8080; background-color: #ffdede"
+    />
+    <!-- </div> -->
+  </q-card-section>
+</template>
+<script setup lang="ts">
+import { ref, useAttrs } from "vue";
+
+const props = defineProps({
+  tittle: String,
+  close: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+const close = async () => {
+  props.close();
+};
+</script>
diff --git a/src/components/NotifyError.vue b/src/components/NotifyError.vue
new file mode 100644
index 0000000..bfef40f
--- /dev/null
+++ b/src/components/NotifyError.vue
@@ -0,0 +1,92 @@
+<template>
+  <q-dialog
+    :model-value="modalError"
+    persistent
+    @update:model-value="updateClose"
+  >
+    <q-card class="q-pa-sm">
+      <q-card-section class="row items-center">
+        <div class="q-pr-md">
+          <q-avatar
+            icon="mdi-alert-circle-outline"
+            font-size="25px"
+            size="lg"
+            color="red-1"
+            text-color="red"
+          />
+        </div>
+        <div class="col text-dark">
+          <span class="text-bold">{{ modalErrorTittle }}</span>
+          <br />
+          <span>{{ modalErrorDetail }}</span>
+        </div>
+      </q-card-section>
+
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn
+          label="ตกลง"
+          color="primary"
+          @click="updateClose"
+          v-close-popup
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+<script setup lang="ts">
+import { ref, useAttrs } from "vue";
+
+const props = defineProps({
+  modalError: Boolean,
+  modalErrorTittle: String,
+  modalErrorDetail: String,
+  close: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+
+const emit = defineEmits([
+  "update:modalError",
+  "update:modalErrorTittle",
+  "update:modalErrorDetail",
+]);
+
+const updateClose = () => {
+  emit("update:modalError", false);
+  emit("update:modalErrorTittle", "");
+  emit("update:modalErrorDetail", "");
+  props.close();
+};
+</script>
+<style lang="scss">
+.icon-color {
+  color: #4154b3;
+}
+.custom-header-table {
+  max-height: 64vh;
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+  .q-table tr:nth-child(even) td {
+    background: #f6f6f6ae;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+    z-index: 1;
+  }
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>
diff --git a/src/components/Table.vue b/src/components/Table.vue
new file mode 100644
index 0000000..7620a0a
--- /dev/null
+++ b/src/components/Table.vue
@@ -0,0 +1,199 @@
+<template>
+  <div class="q-pb-sm row">
+    <!--  -->
+    <HeaderTop
+      v-model:edit="editBtn"
+      :header="name"
+      :icon="icon"
+      :add="checkAdd"
+      :addData="true"
+      :history="false"
+      v-if="nameHeader"
+    />
+    <q-btn size="12px" flat round color="add" @click="add" icon="mdi-plus">
+      <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+    </q-btn>
+    <q-space />
+    <div class="items-center" style="display: flex">
+      <!-- ค้นหาข้อความใน table -->
+      <q-input
+        standout
+        dense
+        :model-value="inputfilter"
+        ref="filterRef"
+        @update:model-value="updateInput"
+        outlined
+        debounce="300"
+        placeholder="ค้นหา"
+        style="max-width: 200px"
+        class="q-ml-sm"
+      >
+        <template v-slot:append>
+          <q-icon v-if="inputfilter == ''" name="search" />
+          <q-icon
+            v-if="inputfilter !== ''"
+            name="clear"
+            class="cursor-pointer"
+            @click="resetFilter"
+          />
+        </template>
+      </q-input>
+      <!-- แสดงคอลัมน์ใน table -->
+      <q-select
+        :model-value="inputvisible"
+        @update:model-value="updateVisible"
+        :display-value="$q.lang.table.columns"
+        multiple
+        outlined
+        dense
+        :options="attrs.columns"
+        options-dense
+        option-value="name"
+        map-options
+        emit-value
+        style="min-width: 150px"
+        class="gt-xs q-ml-sm"
+      />
+    </div>
+  </div>
+  <q-table
+    ref="table"
+    flat
+    bordered
+    class="custom-header-table"
+    v-bind="attrs"
+    virtual-scroll
+    :virtual-scroll-sticky-size-start="48"
+    dense
+    :pagination-label="paginationLabel"
+    :pagination="initialPagination"
+    :rows-per-page-options="[0]"
+  >
+    <template v-slot:header="props">
+      <q-tr :props="props">
+        <q-th v-for="col in props.cols" :key="col.name" :props="props">
+          <span class="text-weight-medium">{{ col.label }}</span>
+        </q-th>
+      </q-tr>
+    </template>
+    <template #body="props">
+      <slot v-bind="props" name="columns"></slot>
+    </template>
+  </q-table>
+</template>
+<script setup lang="ts">
+import { ref, useAttrs } from 'vue'
+import HeaderTop from '@/components/top.vue'
+import type { Pagination } from '@/modules/01_exam/interface/index/Main'
+
+const attrs = ref<any>(useAttrs())
+const table = ref<any>(null)
+const filterRef = ref<any>(null)
+const editBtn = ref<boolean>(false)
+const initialPagination = ref<Pagination>({
+  //   descending: false,
+  rowsPerPage: 0
+})
+
+const props = defineProps({
+  inputfilter: String,
+  name: String,
+  icon: String,
+  inputvisible: Array,
+  editvisible: Boolean,
+  nameHeader: Boolean,
+  edit: {
+    type: Function,
+    default: () => console.log('not function')
+  },
+  add: {
+    type: Function,
+    default: () => console.log('not function')
+  },
+  cancel: {
+    type: Function,
+    default: () => console.log('not function')
+  },
+  validate: {
+    type: Function,
+    default: () => console.log('not function')
+  }
+})
+
+const emit = defineEmits(['update:inputfilter', 'update:inputvisible', 'update:editvisible'])
+
+const updateEdit = (value: Boolean) => {
+  emit('update:editvisible', value)
+}
+const updateInput = (value: string | number | null) => {
+  emit('update:inputfilter', value)
+}
+const updateVisible = (value: []) => {
+  emit('update:inputvisible', value)
+}
+
+const paginationLabel = (start: string, end: string, total: string) => {
+  return start + '-' + end + ' ใน ' + total
+}
+
+const checkAdd = () => {
+  //   props.validate();
+  props.add()
+}
+
+const edit = async () => {
+  updateEdit(!props.editvisible)
+  props.edit()
+}
+
+const cancel = async () => {
+  updateEdit(!props.editvisible)
+  props.cancel()
+}
+
+const resetFilter = () => {
+  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
+  emit('update:inputfilter', '')
+  filterRef.value.focus()
+}
+
+const add = () => {
+  props.add()
+}
+</script>
+<style lang="scss">
+.icon-color {
+  color: #4154b3;
+}
+
+.custom-header-table {
+  max-height: 64vh;
+
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+
+  .q-table tr:nth-child(even) td {
+    background: #f6f6f6ae;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+    z-index: 1;
+  }
+
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>
diff --git a/src/components/top.vue b/src/components/top.vue
new file mode 100644
index 0000000..e6c3cc3
--- /dev/null
+++ b/src/components/top.vue
@@ -0,0 +1,172 @@
+<template>
+  <div class="flex items-center">
+    <div class="flex items-center">
+      <q-icon :name="icon" size="1.5em" color="grey-5" class="q-mr-md" />
+      <div
+        class="text-weight-medium text-dark col-12 row items-center text-header"
+      >
+        {{ header }}
+      </div>
+    </div>
+    <div class="q-gutter-sm q-mx-sm" v-if="addData == false">
+      <!-- <q-btn
+        dense
+        outline
+        label="แก้ไข"
+        icon="mdi-pencil-outline"
+        iconsize
+        v-if="!edit"
+        @click="ClickEdit"
+      >
+        <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+      </q-btn> -->
+      <q-btn
+        size="12px"
+        v-if="!edit"
+        flat
+        round
+        :disabled="edit"
+        :color="edit ? 'grey-7' : 'primary'"
+        @click="ClickEdit"
+        icon="mdi-pencil-outline"
+      >
+        <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+      </q-btn>
+      <!-- <q-btn
+        color="primary"
+        dense
+        label="บันทึก"
+        icon="mdi-content-save"
+        v-if="edit"
+        @click="save"
+      >
+        <q-tooltip>บันทึกข้อมูล</q-tooltip>
+      </q-btn> -->
+      <q-btn
+        size="12px"
+        flat
+        round
+        v-if="edit"
+        :disabled="!edit"
+        :color="!edit ? 'grey-7' : 'public'"
+        @click="save"
+        icon="mdi-content-save-outline"
+      >
+        <q-tooltip>บันทึกข้อมูล</q-tooltip>
+      </q-btn>
+      <!-- <q-btn
+        style="background: white; color: red"
+        dense
+        label="ยกเลิก"
+        icon="mdi-close-outline"
+        v-if="edit"
+        @click="ClickCancel"
+      >
+        <q-tooltip>ยกเลิก</q-tooltip>
+      </q-btn> -->
+      <q-btn
+        size="12px"
+        flat
+        round
+        v-if="edit"
+        :disabled="!edit"
+        :color="!edit ? 'grey-7' : 'red'"
+        @click="ClickCancel"
+        icon="mdi-undo"
+      >
+        <q-tooltip>ยกเลิก</q-tooltip>
+      </q-btn>
+    </div>
+    <div class="q-pl-sm" v-else>
+      <q-btn size="12px" flat round color="add" @click="add" icon="mdi-plus">
+        <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+      </q-btn>
+    </div>
+    <q-space/>
+    <q-btn
+        color="info"
+        flat
+        dense
+        round
+        size="14px"
+        icon="mdi-history"
+        v-if="history"
+      >
+        <q-tooltip>ประวัติ{{header}}</q-tooltip>
+      </q-btn>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, useAttrs } from "vue";
+
+const props = defineProps({
+  header: {
+    type: String,
+    default: "ข้อความ",
+    required: true,
+  },
+  icon: {
+    type: String,
+    default: "mdi-help",
+    required: true,
+  },
+  edit: {
+    type: Boolean,
+    default: true,
+    required: true,
+  },
+  history: {
+    type: Boolean,
+    default: true,
+    required: true,
+  },
+  addData: {
+    type: Boolean,
+    defualt: false,
+  },
+  add: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  save: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  deleted: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  cancel: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+
+const emit = defineEmits(["update:edit"]);
+
+const updateEdit = (value: any) => {
+  emit("update:edit", value);
+};
+
+const ClickEdit = () => {
+  updateEdit(!props.edit);
+};
+
+const ClickCancel = () => {
+  updateEdit(!props.edit);
+  props.cancel();
+};
+
+const save = () => {
+  props.save();
+};
+
+const add = () => {
+  props.add();
+};
+</script>
+<style scoped>
+/* .q-btn >>> .q-icon {
+  font-size: 20px;
+} */
+</style>
diff --git a/src/main.ts b/src/main.ts
index 2e526e1..6e8cf34 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -38,5 +38,17 @@ app.component(
   'data-table',
   defineAsyncComponent(() => import('./components/TableView.vue'))
 )
+app.component(
+  'notifyError',
+  defineAsyncComponent(() => import('./components/NotifyError.vue'))
+)
+app.component(
+  'datepicker',
+  defineAsyncComponent(() => import('@vuepic/vue-datepicker'))
+)
+app.component(
+  'full-loader',
+  defineAsyncComponent(() => import('./plugins/FullLoader.vue'))
+)
 
 app.mount('#app')
diff --git a/src/modules/01_exam/components/Career.vue b/src/modules/01_exam/components/Career.vue
new file mode 100644
index 0000000..e7d1f3a
--- /dev/null
+++ b/src/modules/01_exam/components/Career.vue
@@ -0,0 +1,4 @@
+<template>
+  <div></div>
+</template>
+<script setup lang="ts"></script>
diff --git a/src/modules/01_exam/components/Education.vue b/src/modules/01_exam/components/Education.vue
new file mode 100644
index 0000000..4f6751d
--- /dev/null
+++ b/src/modules/01_exam/components/Education.vue
@@ -0,0 +1,554 @@
+<!-- card ประวัติการศึกษา -->
+<template>
+  <q-card flat bordered class="col-12 q-px-lg q-py-md">
+    <q-form ref="myForm">
+      <ProfileTable
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :add="clickAdd"
+        :nameHeader="false"
+      >
+        <template #columns="props">
+          <q-tr :props="props">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="selectData(props)"
+              class="cursor-pointer"
+            >
+              <div v-if="col.name == 'start'" class="">
+                {{ col.value + 543 }}
+              </div>
+              <div v-else-if="col.name == 'end'" class="">
+                {{ col.value + 543 }}
+              </div>
+              <div v-else class="">
+                {{ col.value }}
+              </div>
+            </q-td>
+          </q-tr>
+        </template>
+      </ProfileTable>
+    </q-form>
+  </q-card>
+  <!-- popup Edit window-->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 600px">
+      <q-form ref="myForm">
+        <DialogHeader tittle="ประวัติการศึกษา" :close="clickClose" />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-select
+                :class="getClass(edit)"
+                hide-bottom-space
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="qualificationId"
+                :rules="[(val) => !!val || `${'กรุณาเลือกระดับการศึกษา'}`]"
+                :label="`${'ระดับการศึกษา'}`"
+                @update:modelValue="clickEditRow"
+                emit-value
+                map-options
+                option-label="name"
+                :options="qualificationOptions"
+                option-value="id"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                hide-bottom-space
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="name"
+                :rules="[(val) => !!val || `${'กรุณากรอกสถานศึกษา'}`]"
+                :label="`${'สถานศึกษา'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                hide-bottom-space
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="major"
+                :rules="[(val) => !!val || `${'กรุณากรอกสาขา/วิชาเอก'}`]"
+                :label="`${'สาขา/วิชาเอก'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :cancel="clickCancel"
+          :edit="clickEdit"
+          :save="clickSave"
+          :validate="validateData"
+          :clickNext="clickNext"
+          :clickPrevious="clickPrevious"
+          v-model:editvisible="edit"
+          v-model:next="next"
+          v-model:previous="previous"
+          v-model:modalEdit="modalEdit"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <notifyError
+    :modalError="modalError"
+    :modalErrorTittle="modalErrorTittle"
+    :modalErrorDetail="modalErrorDetail"
+    :close="closeModalError"
+  ></notifyError>
+</template>
+<script setup lang="ts">
+import { onMounted, ref, watch } from 'vue'
+import { useExamDataStore } from '@/modules/01_exam/store'
+import ProfileTable from '@/components/Table.vue'
+import DialogHeader from '@/components/DialogHeader.vue'
+import DialogFooter from '@/components/DialogFooter.vue'
+import { useQuasar } from 'quasar'
+import type {
+  RequestItemsObject,
+  Columns,
+  DataProps
+} from '@/modules/01_exam/interface/request/Education'
+import type { ResponseObject } from '@/modules/01_exam/interface/response/Education'
+import type { DataOption } from '@/modules/01_exam/interface/index/Main'
+import http from '@/plugins/http'
+import config from '@/app.config'
+
+const props = defineProps({
+  loader: {
+    //หน้า main มีการอัพเดทค่าให้ refresh data
+    type: Boolean,
+    required: true
+  }
+})
+
+const $q = useQuasar()
+const store = useExamDataStore()
+const { examData, changeExamColumns } = store
+const loader = ref<boolean>(false)
+const id = ref<string>()
+const qualification = ref<string>()
+const qualificationId = ref<string>()
+const qualificationOptions = ref<DataOption[]>([])
+const major = ref<string>()
+const scores = ref<number | null>()
+const name = ref<string>()
+const duration = ref<any>()
+const myForm = ref<any>() //form data input
+const edit = ref<boolean>(false) //เช็คการกดปุ่มแก้ไขใน dialog
+const modal = ref<boolean>(false) //modal add detail
+const modalEdit = ref<boolean>(false) //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
+const rawItem = ref<RequestItemsObject>() //ข้อมูลเดิมที่เลือกใน row นั้น
+const rowIndex = ref<number>(0) //indexข้อมูลเดิมที่เลือกใน row นั้น
+const previous = ref<boolean>() //แสดงปุ่มดูข้อมูลก่อนหน้า
+const next = ref<boolean>() //แสดงปุ่มดูข้อมูลต่อไป
+const editRow = ref<boolean>(false) //เช็คมีการแก้ไขข้อมูล
+const rawHistory = ref<RequestItemsObject[]>([]) //raw data history
+const modalError = ref<boolean>(false) // modal สำหรับแจ้งเตือนerror
+const modalErrorTittle = ref<string>('') // tittle modal error
+const modalErrorDetail = ref<string>('') // detail modal error
+const statusCode = ref<number>()
+const checkValidate = ref<boolean>(false) //validate data ผ่านหรือไม่
+const closeModalError = () => {
+  modalError.value = false
+  if (statusCode.value != 404) {
+    // fetchData();
+  }
+}
+
+const emit = defineEmits(['update:loader'])
+
+const rows = ref<RequestItemsObject[]>([
+  {
+    id: '1',
+    qualificationId: 'ปริญญาตรี',
+    qualification: 'ปริญญาตรี',
+    major: 'คอมพิวเตอร์',
+    scores: 3.99,
+    name: 'มหาลัยเอ',
+    duration: 2015
+  },
+  {
+    id: '2',
+    qualificationId: 'ปริญญาเอก',
+    qualification: 'ปริญญาเอก',
+    major: 'คอมพิวเตอร์',
+    scores: 3.54,
+    name: 'มหาลัยบี',
+    duration: 2015
+  }
+])
+
+const filter = ref<string>('') //search data table
+
+const visibleColumns = ref<String[]>([])
+
+examData.education.columns.length == 0
+  ? (visibleColumns.value = ['qualification', 'major', 'scores', 'name', 'duration'])
+  : (visibleColumns.value = examData.education.columns)
+
+const columns = ref<Columns>([
+  {
+    name: 'qualification',
+    align: 'left',
+    label: 'วุฒิที่ได้รับ',
+    sortable: true,
+    field: 'qualification',
+    headerStyle: 'font-size: 14px',
+    style: 'font-size: 14px'
+  },
+  {
+    name: 'major',
+    align: 'left',
+    label: 'สาขาวิชา/วิชาเอก',
+    sortable: true,
+    field: 'major',
+    headerStyle: 'font-size: 14px',
+    style: 'font-size: 14px'
+  },
+  {
+    name: 'scores',
+    align: 'left',
+    label: 'คะแนนเฉลี่ยตลอดหลักสูตร',
+    sortable: true,
+    field: 'scores',
+    headerStyle: 'font-size: 14px',
+    style: 'font-size: 14px'
+  },
+  {
+    name: 'name',
+    align: 'left',
+    label: 'ชื่อสถานศึกษา',
+    sortable: true,
+    field: 'name',
+    headerStyle: 'font-size: 14px',
+    style: 'font-size: 14px'
+  },
+  {
+    name: 'duration',
+    align: 'left',
+    label: 'ระยะเวลา',
+    sortable: true,
+    field: 'duration',
+    headerStyle: 'font-size: 14px',
+    style: 'font-size: 14px'
+  }
+])
+
+watch(loader, (count: boolean, prevCount: boolean) => {
+  emit('update:loader', count)
+})
+
+watch(visibleColumns, async (count: String[], prevCount: String[]) => {
+  await changeExamColumns('education', count)
+})
+
+onMounted(async () => {
+  //   await fetchData()
+  //   await fetchQualification()
+  rawHistory.value = rows.value
+})
+
+const fetchQualification = async () => {
+  //   loader.value = true;
+  await http
+    .get(config.API.educationQualification)
+    .then((res) => {
+      const data = res.data.result
+      let option: DataOption[] = []
+      data.map((r: any) => {
+        option.push({ id: r.id.toString(), name: r.name.toString() })
+      })
+      qualificationOptions.value = option
+    })
+    .catch((e: any) => {})
+    .finally(() => {
+      //   loader.value = false;
+    })
+}
+
+const fetchData = async () => {}
+
+/**
+ * กดดูข้อมูลก่อนหน้า
+ */
+const clickPrevious = () => {
+  edit.value = false
+  rowIndex.value -= 1
+  const row = rows.value[rowIndex.value]
+  qualification.value = row.qualification
+  qualificationId.value = row.qualificationId
+  major.value = row.major
+  scores.value = row.scores
+  name.value = row.name
+  duration.value = row.duration
+  id.value = row.id
+  checkRowPage()
+}
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const clickNext = () => {
+  edit.value = false
+  rowIndex.value += 1
+  const row = rows.value[rowIndex.value]
+  qualification.value = row.qualification
+  qualificationId.value = row.qualificationId
+  major.value = row.major
+  scores.value = row.scores
+  name.value = row.name
+  duration.value = row.duration
+  id.value = row.id
+  checkRowPage()
+}
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const getData = () => {
+  const row = rows.value[rowIndex.value]
+  qualification.value = row.qualification
+  qualificationId.value = row.qualificationId
+  major.value = row.major
+  scores.value = row.scores
+  name.value = row.name
+  duration.value = row.duration
+  id.value = row.id
+}
+
+/**
+ * เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
+ */
+const checkRowPage = () => {
+  editRow.value = false
+  next.value = true
+  previous.value = true
+  if (rowIndex.value + 1 >= rows.value.length) {
+    next.value = false
+  }
+  if (rowIndex.value - 1 < 0) {
+    previous.value = false
+  }
+}
+
+/**
+ * กดปุ่มแก้ไขใน dialog
+ */
+const clickEdit = () => {
+  next.value = false
+  previous.value = false
+}
+
+/**
+ * กดปุ่มเพิ่มด้านบน table
+ */
+const clickAdd = () => {
+  addData()
+}
+
+/**
+ * กดบันทึกใน dialog
+ */
+const clickSave = async () => {
+  myForm.value.validate().then(async (result: boolean) => {
+    if (result) {
+      if (modalEdit.value) {
+        await editData()
+      } else {
+        await saveData()
+      }
+    }
+  })
+}
+
+/**
+ * บันทึกเพิ่มข้อมูล
+ */
+const saveData = async () => {
+  modal.value = false
+
+  //   loader.value = true;
+  //   await http
+  //     .post(config.API.xxxxxxxxxxxxxxx, {
+  //       xxx: "xxx",
+  //     })
+  //     .then((res) => {
+  //       success($q, "บันทึกข้อมูลร่างสำเร็จ");
+  //     })
+  //     .catch((e) => {
+  //       modalError.value = true;
+  //       modalErrorTittle.value = "ไม่สามารถบันทึกข้อมูลร่างได้";
+  //       modalErrorDetail.value = e.response.data.message;
+  //       statusCode.value = e.response.data.status;
+  //     })
+  //     .finally(async () => {
+  //       modal.value = false;
+  //       await fetchData();
+  //     });
+}
+
+/**
+ * บันทึกแก้ไขข้อมูล
+ */
+const editData = async () => {
+  edit.value = false
+
+  //   loader.value = true;
+  //   await http
+  //     .post(config.API.xxxxxxxxxxxxxxx(id.value), {
+  //       xxx: "xxx",
+  //     })
+  //     .then((res) => {
+  //       success($q, "บันทึกข้อมูลร่างสำเร็จ");
+  //     })
+  //     .catch((e) => {
+  //       modalError.value = true;
+  //       modalErrorTittle.value = "ไม่สามารถบันทึกข้อมูลร่างได้";
+  //       modalErrorDetail.value = e.response.data.message;
+  //       statusCode.value = e.response.data.status;
+  //     })
+  //     .finally(async () => {
+  //       edit.value = false;
+  //       await fetchData();
+  //     });
+}
+
+/**
+ * กดปิด dialog
+ */
+const clickClose = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันการบันทึกข้อมูลใช่หรือไม่?`,
+      cancel: 'ยกเลิก',
+      ok: 'ยืนยัน',
+      persistent: true
+    }).onOk(async () => {
+      modal.value = false
+      next.value = false
+      previous.value = false
+      await getData()
+    })
+  } else {
+    modal.value = false
+    next.value = false
+    previous.value = false
+  }
+}
+
+/**
+ * กดเลือกข้อมูลที่จะแก้ไข
+ * @param props ค่า props ใน row ที่เลือก
+ */
+const selectData = (props: DataProps) => {
+  modalEdit.value = true
+  modal.value = true
+  edit.value = false
+  rawItem.value = props.row
+  rowIndex.value = props.rowIndex
+  qualification.value = props.row.qualification
+  qualificationId.value = props.row.qualificationId
+  major.value = props.row.major
+  scores.value = props.row.scores
+  name.value = props.row.name
+  duration.value = props.row.duration
+  id.value = props.row.id
+  checkRowPage()
+}
+
+/**
+ * กดปุ่มเพิ่มบน table
+ */
+const addData = () => {
+  modalEdit.value = false
+  modal.value = true
+  edit.value = true
+  qualification.value = ''
+  qualificationId.value = ''
+  major.value = ''
+  scores.value = null
+  name.value = ''
+  duration.value = ''
+}
+
+/**
+ * ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
+ */
+const clickCancel = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันการบันทึกข้อมูลใช่หรือไม่?`,
+      cancel: 'ยกเลิก',
+      ok: 'ยืนยัน',
+      persistent: true
+    }).onOk(async () => {
+      edit.value = false
+      checkRowPage()
+      await getData()
+    })
+  } else {
+    edit.value = false
+    checkRowPage()
+  }
+}
+
+/**
+ * เช็คว่ามีการแก้ไขข้อมูล
+ */
+const clickEditRow = () => {
+  editRow.value = true
+}
+
+/**
+ * validate input ใน dialog
+ */
+const validateData = async () => {
+  checkValidate.value = true
+  await myForm.value.validate().then((result: boolean) => {
+    if (result == false) {
+      checkValidate.value = false
+    }
+  })
+}
+
+/**
+ * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
+ * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
+ */
+const getClass = (val: boolean) => {
+  return {
+    'full-width inputgreen cursor-pointer': val,
+    'full-width cursor-pointer': !val
+  }
+}
+</script>
+<style lang="scss">
+.modalfix {
+  position: fixed !important;
+}
+</style>
diff --git a/src/modules/01_exam/components/ExamForm.vue b/src/modules/01_exam/components/ExamForm.vue
index 699a8d0..85b8e46 100644
--- a/src/modules/01_exam/components/ExamForm.vue
+++ b/src/modules/01_exam/components/ExamForm.vue
@@ -8,602 +8,23 @@
       indicator-color="primary"
       align="justify"
     >
-      <q-tab name="userProfile" label="ข้อมูลส่วนตัว" />
-      <q-tab name="citizenId" label="บัตรประชาชน" />
-      <q-tab name="address" label="ที่อยู่" />
-      <q-tab name="education" label="การศึกษา" />
-      <q-tab name="career" label="อาชีพ" />
-      <q-tab name="document" label="เอกสาร" />
+      <q-tab name="profile" label="ข้อมูลส่วนบุคคล" />
+      <q-tab name="education" label="ประวัติการศีกษา" />
+      <q-tab name="career" label="ประวัติการทำงาน/ฝึกงาน" />
+      <!-- <q-tab name="document" label="เอกสาร" /> -->
     </q-tabs>
     <q-tab-panels v-model="tab" animated class="bg-white">
-      <!-- ข้อมูลส่วนตัว -->
-      <q-tab-panel name="userProfile">
-        <div class="row q-px-lg">
-          <div class="text-caption text-grey col-2 q-pa-md">
-            <label>คำนำหน้า</label>
-            <q-select
-              outlined
-              v-model="namePrefix"
-              :options="formOptions.namePrefix"
-              :disable="!allowEdit"
-            />
-          </div>
+      <!-- ข้อมูลส่วนบุคคล -->
+      <q-tab-panel name="profile"> <Profile /></q-tab-panel>
 
-          <div class="text-caption text-grey col-4 q-pa-md">
-            ชื่อ
-            <div class="">
-              <q-input outlined v-model="firstName" :disable="!allowEdit" />
-            </div>
-          </div>
+      <!-- ประวัติการศีกษา -->
+      <q-tab-panel name="education"><Education :loader="loader" /> </q-tab-panel>
 
-          <div class="text-caption text-grey col-4 q-pa-md">
-            นามสกุล
-            <div class="">
-              <q-input outlined v-model="lastName" :disable="!allowEdit" />
-            </div>
-          </div>
-
-          <div class="text-caption text-grey col-2 q-pa-md">
-            วัน เดือน ปีเกิด(พ.ศ.)
-            <q-input outlined v-model="dateOfBirthTH" readonly :disable="!allowEdit">
-              <template v-slot:append>
-                <q-icon name="event" class="cursor-pointer">
-                  <q-popup-proxy transition-show="scale" transition-hide="scale">
-                    <q-date v-model="dateOfBirth" minimal :locale="localeTH">
-                      <div class="row items-center justify-end">
-                        <q-btn v-close-popup label="ตกลง" color="primary" flat />
-                      </div>
-                    </q-date>
-                  </q-popup-proxy>
-                </q-icon>
-              </template>
-            </q-input>
-          </div>
-
-          <!-- <div class="text-caption text-grey col-2 q-pa-md">
-						อายุ
-						<div class="">
-							<q-input outlined v-model="age" :disable="!allowEdit" />
-						</div>
-					</div> -->
-
-          <div class="text-caption text-grey col-2 q-pa-md">
-            เพศ
-            <div class="">
-              <q-select outlined v-model="sex" :options="formOptions.sex" :disable="!allowEdit" />
-            </div>
-          </div>
-
-          <div class="text-caption text-grey col-2 q-pa-md">
-            สถานภาพ
-            <div class="">
-              <q-select
-                outlined
-                v-model="status"
-                :options="formOptions.status"
-                :disable="!allowEdit"
-              />
-            </div>
-          </div>
-
-          <div class="text-caption text-grey col-2 q-pa-md">
-            หมู่โลหิต
-            <div class="">
-              <q-select
-                outlined
-                v-model="bloodGroup"
-                :options="formOptions.bloodGroup"
-                :disable="!allowEdit"
-              />
-            </div>
-          </div>
-
-          <div class="text-caption text-grey col-2 q-pa-md">
-            สัญชาติ
-            <div class="">
-              <q-input outlined v-model="nationality" :disable="!allowEdit" />
-            </div>
-          </div>
-
-          <div class="text-caption text-grey col-2 q-pa-md">
-            เชื้อชาติ
-            <div class="">
-              <q-input outlined v-model="ethnicity" :disable="!allowEdit" />
-            </div>
-          </div>
-
-          <div class="text-caption text-grey col-2 q-pa-md">
-            ศาสนา
-            <div class="">
-              <q-input outlined v-model="religion" :disable="!allowEdit" />
-            </div>
-          </div>
-
-          <div class="text-caption text-grey col-4 q-pa-md">
-            เบอร์โทรศัพท์
-            <div class="">
-              <q-input outlined v-model="phoneNumber" mask="###-###-####" :disable="!allowEdit" />
-            </div>
-          </div>
-
-          <div class="text-caption text-grey col-4 q-pa-md">
-            อีเมล
-            <div class="">
-              <q-input outlined v-model="email" :disable="!allowEdit" />
-            </div>
-          </div>
-        </div>
-      </q-tab-panel>
-
-      <!-- บัตรประจำตัวประชาชน -->
-      <q-tab-panel name="citizenId">
-        <div class="row q-px-lg">
-          <div class="text-caption text-grey col-4 q-pa-md">
-            เลขประจำตัวประชาชน
-            <div class="">
-              <q-input outlined v-model="citizenId" :disable="!allowEdit" />
-            </div>
-          </div>
-          <div class="text-caption text-grey col-4 q-pa-md">
-            ออกให้ ณ จังหวัด
-            <q-select
-              outlined
-              v-model="citizenIdIssuanceAt"
-              use-input
-              hide-selected
-              fill-input
-              input-debounce="0"
-              :options="formOptions.provinces"
-              option-value="name"
-              option-label="name"
-              emit-value
-              hint=""
-              :disable="!allowEdit"
-            >
-              <template v-slot:no-option>
-                <q-item>
-                  <q-item-section class="text-grey"> ไม่พบจังหวัดที่คุณค้นหา </q-item-section>
-                </q-item>
-              </template>
-            </q-select>
-          </div>
-          <div class="text-caption text-grey col-4 q-pa-md">
-            บัตรประจำตัวเจ้าหน้าที่รัฐ (ถ้ามี)
-            <div class="">
-              <q-input outlined v-model="governmentOfficialId" :disable="!allowEdit" />
-            </div>
-          </div>
-
-          <div class="text-caption text-grey col-3 q-pa-md">
-            วันออกบัตรประชาชน
-            <q-input outlined v-model="citizenIdIssuanceOnTH" readonly :disable="!allowEdit">
-              <template v-slot:append>
-                <q-icon name="event" class="cursor-pointer">
-                  <q-popup-proxy transition-show="scale" transition-hide="scale">
-                    <q-date v-model="citizenIdIssuanceOn" minimal :locale="localeTH">
-                      <div class="row items-center justify-end">
-                        <q-btn v-close-popup label="ตกลง" color="primary" flat />
-                      </div>
-                    </q-date>
-                  </q-popup-proxy>
-                </q-icon>
-              </template>
-            </q-input>
-          </div>
-
-          <div class="text-caption text-grey col-3 q-pa-md">
-            หมดอายุวันที่
-            <q-input outlined v-model="citizenIdExpireOnTH" readonly :disable="!allowEdit">
-              <template v-slot:append>
-                <q-icon name="event" class="cursor-pointer">
-                  <q-popup-proxy transition-show="scale" transition-hide="scale">
-                    <q-date v-model="citizenIdExpireOn" minimal :locale="localeTH">
-                      <div class="row items-center justify-end">
-                        <q-btn v-close-popup label="ตกลง" color="primary" flat />
-                      </div>
-                    </q-date>
-                  </q-popup-proxy>
-                </q-icon>
-              </template>
-            </q-input>
-          </div>
-        </div>
-      </q-tab-panel>
-
-      <!-- ที่อยู่ -->
-      <q-tab-panel name="address">
-        <!-- ที่อยู่ตามทะเบียนบ้านก่อนสมัคร -->
-        <div class="row q-px-lg" v-if="!isApply">
-          <div class="text-caption text-grey col-12 q-pa-md">
-            ที่อยู่ตามทะเบียนบ้าน
-            <div class="">
-              <q-input outlined v-model="registAddress" :disable="!allowEdit" />
-            </div>
-          </div>
-          <div class="text-caption text-grey col-3 q-pa-md">
-            จังหวัด
-            <q-select
-              outlined
-              v-model="selectRegistProvince"
-              use-input
-              hide-selected
-              fill-input
-              input-debounce="0"
-              :options="formOptions.registProvinces"
-              option-label="name"
-              emit-value
-              hint=""
-              :disable="!allowEdit"
-            >
-              <template v-slot:no-option>
-                <q-item>
-                  <q-item-section class="text-grey"> ไม่พบจังหวัดที่คุณค้นหา </q-item-section>
-                </q-item>
-              </template>
-            </q-select>
-          </div>
-          <div class="text-caption text-grey col-3 q-pa-md">
-            เขต/อำเภอ
-            <q-select
-              outlined
-              v-model="selectRegistDistrict"
-              use-input
-              hide-selected
-              fill-input
-              input-debounce="0"
-              :options="formOptions.registDistrict"
-              option-label="name"
-              emit-value
-              hint=""
-              :disable="!allowEdit"
-            >
-              <template v-slot:no-option>
-                <q-item>
-                  <q-item-section class="text-grey"> ไม่พบจังหวัดที่คุณค้นหา </q-item-section>
-                </q-item>
-              </template>
-            </q-select>
-          </div>
-          <div class="text-caption text-grey col-3 q-pa-md">
-            แขวง/ตำบล
-            <q-select
-              outlined
-              v-model="selectRegistSubDistrict"
-              use-input
-              hide-selected
-              fill-input
-              input-debounce="0"
-              :options="formOptions.registSubDistrict"
-              option-label="name"
-              emit-value
-              hint=""
-              :disable="!allowEdit"
-            >
-              <template v-slot:no-option>
-                <q-item>
-                  <q-item-section class="text-grey"> ไม่พบจังหวัดที่คุณค้นหา </q-item-section>
-                </q-item>
-              </template>
-            </q-select>
-          </div>
-          <div class="text-caption text-grey col-3 q-pa-md">
-            รหัสไปรษณีย์
-            <div class="">
-              <q-input outlined v-model="registZipCode" :disable="!allowEdit" readonly />
-            </div>
-          </div>
-        </div>
-
-        <!-- ที่อยู่ตามทะเบียนบ้านหลังสมัคร -->
-        <div class="row q-px-lg" v-if="isApply">
-          <div class="text-caption text-grey col-12 q-pa-md">
-            ที่อยู่ตามทะเบียนบ้าน
-            <div class="">
-              <q-input outlined v-model="registAddress" :disable="!allowEdit" />
-            </div>
-          </div>
-          <div class="text-caption text-grey col-3 q-pa-md">
-            จังหวัด
-            <div class="">
-              <q-input outlined v-model="registProvince" :disable="!allowEdit" />
-            </div>
-          </div>
-          <div class="text-caption text-grey col-3 q-pa-md">
-            เขต/อำเภอ
-            <div class="">
-              <q-input outlined v-model="registDistrict" :disable="!allowEdit" />
-            </div>
-          </div>
-          <div class="text-caption text-grey col-3 q-pa-md">
-            แขวง/ตำบล
-            <div class="">
-              <q-input outlined v-model="registSubDistrict" :disable="!allowEdit" />
-            </div>
-          </div>
-          <div class="text-caption text-grey col-3 q-pa-md">
-            รหัสไปรษณีย์
-            <div class="">
-              <q-input outlined v-model="registZipCode" :disable="!allowEdit" readonly />
-            </div>
-          </div>
-        </div>
-
-        <q-separator color="secondary" size="3px" spaced="20px" inset />
-
-        <!-- ที่อยู่ปัจจุบันก่อนสมัคร -->
-        <div class="row q-px-lg" v-if="!isApply">
-          <div class="text-caption text-grey col-12 q-pa-md">
-            ที่อยู่ปัจจุบัน
-            <div class="">
-              <q-input outlined v-model="currentAddress" :disable="!allowEdit" />
-            </div>
-          </div>
-          <div class="text-caption text-grey col-3 q-pa-md">
-            จังหวัด
-            <q-select
-              outlined
-              v-model="selectCurrentProvince"
-              use-input
-              hide-selected
-              fill-input
-              input-debounce="0"
-              :options="formOptions.currentProvinces"
-              option-label="name"
-              emit-value
-              hint=""
-              :disable="!allowEdit"
-            >
-              <template v-slot:no-option>
-                <q-item>
-                  <q-item-section class="text-grey"> ไม่พบจังหวัดที่คุณค้นหา </q-item-section>
-                </q-item>
-              </template>
-            </q-select>
-          </div>
-          <div class="text-caption text-grey col-3 q-pa-md">
-            เขต/อำเภอ
-            <q-select
-              outlined
-              v-model="selectCurrentDistrict"
-              use-input
-              hide-selected
-              fill-input
-              input-debounce="0"
-              :options="formOptions.currentDistrict"
-              option-label="name"
-              emit-value
-              hint=""
-              :disable="!allowEdit"
-            >
-              <template v-slot:no-option>
-                <q-item>
-                  <q-item-section class="text-grey"> ไม่พบจังหวัดที่คุณค้นหา </q-item-section>
-                </q-item>
-              </template>
-            </q-select>
-          </div>
-          <div class="text-caption text-grey col-3 q-pa-md">
-            แขวง/ตำบล
-            <q-select
-              outlined
-              v-model="selectCurrentSubDistrict"
-              use-input
-              hide-selected
-              fill-input
-              input-debounce="0"
-              :options="formOptions.currentSubDistrict"
-              option-label="name"
-              emit-value
-              hint=""
-              :disable="!allowEdit"
-            >
-              <template v-slot:no-option>
-                <q-item>
-                  <q-item-section class="text-grey"> ไม่พบจังหวัดที่คุณค้นหา </q-item-section>
-                </q-item>
-              </template>
-            </q-select>
-          </div>
-          <div class="text-caption text-grey col-3 q-pa-md">
-            รหัสไปรษณีย์
-            <div class="">
-              <q-input outlined v-model="currentZipCode" :disable="!allowEdit" readonly />
-            </div>
-          </div>
-        </div>
-
-        <!-- ที่อยู่ปัจจุบันหลังสมัคร -->
-        <div class="row q-px-lg" v-if="isApply">
-          <div class="text-caption text-grey col-12 q-pa-md">
-            ที่อยู่ปัจจุบัน
-            <div class="">
-              <q-input outlined v-model="currentAddress" :disable="!allowEdit" />
-            </div>
-          </div>
-          <div class="text-caption text-grey col-3 q-pa-md">
-            จังหวัด
-            <div class="">
-              <q-input outlined v-model="currentProvince" :disable="!allowEdit" />
-            </div>
-          </div>
-          <div class="text-caption text-grey col-3 q-pa-md">
-            เขต/อำเภอ
-            <div class="">
-              <q-input outlined v-model="currentDistrict" :disable="!allowEdit" />
-            </div>
-          </div>
-          <div class="text-caption text-grey col-3 q-pa-md">
-            แขวง/ตำบล
-            <div class="">
-              <q-input outlined v-model="currentSubDistrict" :disable="!allowEdit" />
-            </div>
-          </div>
-          <div class="text-caption text-grey col-3 q-pa-md">
-            รหัสไปรษณีย์
-            <div class="">
-              <q-input outlined v-model="currentZipCode" :disable="!allowEdit" readonly />
-            </div>
-          </div>
-        </div>
-      </q-tab-panel>
-
-      <!-- การศึกษา -->
-      <q-tab-panel name="education">
-        <div class="row q-px-lg">
-          <div class="text-caption text-grey col-6 q-pa-md">
-            วุฒิการศึกษา
-            <div class="">
-              <q-input outlined v-model="educationalQualification" :disable="!allowEdit" />
-            </div>
-          </div>
-          <div class="text-caption text-grey col-6 q-pa-md">
-            สาขา
-            <div class="">
-              <q-input outlined v-model="educationalField" :disable="!allowEdit" />
-            </div>
-          </div>
-          <div class="text-caption text-grey col-6 q-pa-md">
-            มหาวิทยาลัย
-            <div class="">
-              <q-input outlined v-model="educationalUniversity" :disable="!allowEdit" />
-            </div>
-          </div>
-          <div class="text-caption text-grey col-6 q-pa-md">
-            ระดับการศึกษา
-            <div class="">
-              <q-input outlined v-model="educationalLevel" :disable="!allowEdit" />
-            </div>
-          </div>
-          <div class="text-caption text-grey col-3 q-pa-md">
-            วันที่สำเร็จการศึกษา
-            <q-input outlined v-model="educationalGraduationDateTH" readonly :disable="!allowEdit">
-              <template v-slot:append>
-                <q-icon name="event" class="cursor-pointer">
-                  <q-popup-proxy transition-show="scale" transition-hide="scale">
-                    <q-date v-model="educationalGraduationDate" minimal :locale="localeTH">
-                      <div class="row items-center justify-end">
-                        <q-btn v-close-popup label="ตกลง" color="primary" flat />
-                      </div>
-                    </q-date>
-                  </q-popup-proxy>
-                </q-icon>
-              </template>
-            </q-input>
-          </div>
-          <div class="text-caption text-grey col-3 q-pa-md">
-            เกรด
-            <div class="">
-              <q-input outlined v-model="educationalGPAX" :disable="!allowEdit" />
-            </div>
-          </div>
-          <div class="text-caption text-grey col-6 q-pa-md">
-            ความสามารถพิเศษ
-            <div class="">
-              <q-input outlined v-model="educationalTalent" :disable="!allowEdit" />
-            </div>
-          </div>
-        </div>
-      </q-tab-panel>
-
-      <!-- อาชีพ -->
-      <q-tab-panel name="career">
-        <!-- ใบประกอบวิชาชีพ -->
-        <div class="row q-px-lg">
-          <div class="text-caption text-grey col-12 q-pa-md">
-            ใบประกอบวิชาชีพ
-            <div class="">
-              <q-input outlined v-model="professionalLicenseName" :disable="!allowEdit" />
-            </div>
-          </div>
-          <div class="text-caption text-grey col-4 q-pa-md">
-            เลขที่
-            <div class="">
-              <q-input outlined v-model="professionalLicenseId" :disable="!allowEdit" />
-            </div>
-          </div>
-          <div class="text-caption text-grey col-4 q-pa-md">
-            วันที่ใช้งานได้
-            <q-input
-              outlined
-              v-model="professionalLicenseIssuanceOnTH"
-              readonly
-              :disable="!allowEdit"
-            >
-              <template v-slot:append>
-                <q-icon name="event" class="cursor-pointer">
-                  <q-popup-proxy transition-show="scale" transition-hide="scale">
-                    <q-date v-model="professionalLicenseIssuanceOn" minimal :locale="localeTH">
-                      <div class="row items-center justify-end">
-                        <q-btn v-close-popup label="ตกลง" color="primary" flat />
-                      </div>
-                    </q-date>
-                  </q-popup-proxy>
-                </q-icon>
-              </template>
-            </q-input>
-          </div>
-          <div class="text-caption text-grey col-4 q-pa-md">
-            วันที่หมดอายุ
-            <q-input
-              outlined
-              v-model="professionalLicenseExpireOnTH"
-              readonly
-              :disable="!allowEdit"
-            >
-              <template v-slot:append>
-                <q-icon name="event" class="cursor-pointer">
-                  <q-popup-proxy transition-show="scale" transition-hide="scale">
-                    <q-date v-model="professionalLicenseExpireOn" minimal :locale="localeTH">
-                      <div class="row items-center justify-end">
-                        <q-btn v-close-popup label="ตกลง" color="primary" flat />
-                      </div>
-                    </q-date>
-                  </q-popup-proxy>
-                </q-icon>
-              </template>
-            </q-input>
-          </div>
-        </div>
-
-        <q-separator color="secondary" size="3px" spaced="20px" inset />
-
-        <!-- อาชีพ -->
-        <div class="row q-px-lg">
-          <div class="text-caption text-grey col-4 q-pa-md">
-            อาชีพ
-            <div class="">
-              <q-input outlined v-model="currentCareer" :disable="!allowEdit" />
-            </div>
-          </div>
-          <div class="text-caption text-grey col-4 q-pa-md">
-            อายุงาน
-            <div class="">
-              <q-input outlined v-model="currentCareerYearsExperience" :disable="!allowEdit" />
-            </div>
-          </div>
-          <div class="text-caption text-grey col-4 q-pa-md">
-            ตำแหน่ง
-            <div class="">
-              <q-input outlined v-model="currentCareerPosition" :disable="!allowEdit" />
-            </div>
-          </div>
-          <div class="text-caption text-grey col-5 q-pa-md">
-            บริษัท
-            <div class="">
-              <q-input outlined v-model="currentCareerCompany" :disable="!allowEdit" />
-            </div>
-          </div>
-          <div class="text-caption text-grey col-5 q-pa-md">
-            เบอร์โทรบริษัท
-            <div class="">
-              <q-input outlined v-model="currentCareerCompanyPhoneNumber" :disable="!allowEdit" />
-            </div>
-          </div>
-        </div>
-      </q-tab-panel>
+      <!-- ประวัติการทำงาน/ฝึกงาน -->
+      <q-tab-panel name="career"> <Career /></q-tab-panel>
 
       <!-- ไฟล์ -->
-      <q-tab-panel name="document">
+      <!-- <q-tab-panel name="document">
         <div class="row justify-center">
           <div class="q-mt-md" style="width: 100%; min-width: 300px; max-width: 900px">
             <q-select
@@ -717,10 +138,10 @@
             </q-select>
           </div>
         </div>
-      </q-tab-panel>
+      </q-tab-panel> -->
     </q-tab-panels>
 
-    <div>
+    <!-- <div>
       <q-checkbox
         v-if="allowEditProp"
         v-model="acceptTermOfUse"
@@ -738,541 +159,18 @@
         @click="applyCandidate"
         :disable="!acceptTermOfUse || applyState === 3"
       />
-    </div>
+    </div> -->
   </div>
 </template>
 
-<script>
-export default {
-  data() {
-    return {
-      loader: false,
-      allowEditData: true,
-      isApply: false,
-      applyState: 0,
-      tab: 'userProfile',
-      model: null,
-      modelArr: [],
-      formOptions: {
-        namePrefix: ['นาย', 'นาง', 'นางสาว'],
-        sex: ['ชาย', 'หญิง', 'ไม่ระบุ'],
-        status: ['โสด', 'แต่งงานแล้ว'],
-        bloodGroup: ['A+', 'A-', 'B+', 'B-', 'O+', 'O-', 'AB+', 'AB-'],
-        registProvinces: [],
-        registDistrict: [],
-        registSubDistrict: [],
-        currentProvinces: [],
-        currentDistrict: [],
-        currentSubDistrict: []
-      },
-      selectRegistProvince: null,
-      selectRegistDistrict: null,
-      selectRegistSubDistrict: null,
-      selectCurrentProvince: null,
-      selectCurrentDistrict: null,
-      selectCurrentSubDistrict: null,
-      formLabel: {
-        acceptTermOfUse:
-          'ข้าพเจ้าขอรับรองว่า ข้าพเจ้ามีคุณสมบัติครบถ้วนตามประกาศรับสมัคร ข้อความข้างต้นตรงตามความจริงทุกประการ หากไม่เป็นความจริง ให้ถือว่าข้าพเข้า'
-      },
-      namePrefix: null,
-      firstName: null,
-      lastName: null,
-      dateOfBirth: null,
-      dateOfBirthTH: null,
-      age: null,
-      sex: null,
-      status: null,
-      bloodGroup: null,
-      nationality: null,
-      ethnicity: null,
-      religion: null,
-      phoneNumber: null,
-      email: null,
-      citizenId: null,
-      citizenIdIssuanceAt: null,
-      citizenIdIssuanceOn: null,
-      citizenIdExpireOn: null,
-      governmentOfficialId: null,
-      registAddress: null,
-      registProvince: null,
-      registDistrict: null,
-      registSubDistrict: null,
-      registZipCode: null,
-      currentAddress: null,
-      currentProvince: null,
-      currentDistrict: null,
-      currentSubDistrict: null,
-      currentZipCode: null,
-      educationalQualification: null,
-      educationalField: null,
-      educationalUniversity: null,
-      educationalLevel: null,
-      educationalGraduationDate: null,
-      educationalGPAX: null,
-      educationalTalent: null,
-      currentCareer: null,
-      currentCareerYearsExperience: null,
-      currentCareerPosition: null,
-      currentCareerCompany: null,
-      currentCareerCompanyPhoneNumber: null,
-      professionalLicenseName: null,
-      professionalLicenseId: null,
-      professionalLicenseIssuanceOn: null,
-      professionalLicenseExpireOn: null,
-      acceptTermOfUse: false,
-      userProfile: {},
-      filePictureUpload: null,
-      filePictureCurrent: [],
-      fileAddressUpload: null,
-      fileAddressCurrent: [],
-      fileCitizenIdUpload: null,
-      fileCitizenIdCurrent: [],
-      fileProfessionalLicenseUpload: null,
-      fileProfessionalLicenseCurrent: [],
-      fileOtherUpload: [],
-      fileOtherCurrent: [],
-      citizenIdIssuanceOnTH: null,
-      citizenIdExpireOnTH: null,
-      educationalGraduationDateTH: null,
-      professionalLicenseIssuanceOnTH: null,
-      professionalLicenseExpireOnTH: null,
-      allowEditProp: true,
-      localeTH: {
-        days: 'อาทิตย์_จันทร์_อังคาร_พุธ_พฤหัสบดี_ศุกร์_เสาร์'.split('_'),
-        daysShort: 'อา._จ._อ._พ._พฤ._ศ._ส.'.split('_'),
-        months:
-          'มกราคม_กุมภาพันธ์_มีนาคม_เมษายน_พฤษภาคม_มิถุนายน_กรกฎาคม_สิงหาคม_กันยายน_ตุลาคม_พฤศจิกายน_ธันวาคม'.split(
-            '_'
-          ),
-        monthsShort: 'ม.ค_.ก.พ._มี.ค._เม.ย._พ.ค._มิ.ย._ก.ค._ส.ค._ก.ย._ต.ค._พ.ย._ธ.ค.'.split('_'),
-        firstDayOfWeek: 1
-      }
-    }
-  },
-  computed: {
-    allowEdit() {
-      return this.allowEditProp && this.allowEditData ? true : false
-    },
-    applyUrl() {
-      return `/apply/${localStorage.getItem('examId')}`
-    },
-    allFilesToSubmit() {
-      const allFiles = [
-        this.filePictureUpload,
-        this.fileAddressUpload,
-        this.fileCitizenIdUpload,
-        this.fileProfessionalLicenseUpload,
-        ...this.fileOtherUpload
-      ]
-      const result = allFiles.filter((file) => file !== null)
-      return result
-    }
-  },
-  watch: {
-    selectRegistProvince(newProvince) {
-      this.registProvince = newProvince.name
-      this.loader = true
-      this.$http
-        .get(this.$config.API.getDistrictsOptions(newProvince.id))
-        .then((res) => {
-          this.formOptions.registDistrict = res.data.items
-        })
-        .catch((err) => {
-          console.log(err)
-        })
-        .finally(() => {
-          this.loader = false
-        })
-    },
-    selectRegistDistrict(newDistrict) {
-      this.registDistrict = newDistrict.name
-      this.loader = true
-      this.$http
-        .get(this.$config.API.getSubDistrictsAndZipCodeOptions(newDistrict.id))
-        .then((res) => {
-          this.formOptions.registSubDistrict = res.data.items
-        })
-        .catch((err) => {
-          console.log(err)
-        })
-        .finally(() => {
-          this.loader = false
-        })
-    },
-    selectRegistSubDistrict(newSubDistrict) {
-      this.registSubDistrict = newSubDistrict.name
-      this.registZipCode = newSubDistrict.zipCode
-    },
-    selectCurrentProvince(newProvince) {
-      this.currentProvince = newProvince.name
-      this.loader = true
-      this.$http
-        .get(this.$config.API.getDistrictsOptions(newProvince.id))
-        .then((res) => {
-          this.formOptions.currentDistrict = res.data.items
-        })
-        .catch((err) => {
-          console.log(err)
-        })
-        .finally(() => {
-          this.loader = false
-        })
-    },
-    selectCurrentDistrict(newDistrict) {
-      this.currentDistrict = newDistrict.name
-      this.loader = true
-      this.$http
-        .get(this.$config.API.getSubDistrictsAndZipCodeOptions(newDistrict.id))
-        .then((res) => {
-          this.formOptions.currentSubDistrict = res.data.items
-        })
-        .catch((err) => {
-          console.log(err)
-        })
-        .finally(() => {
-          this.loader = false
-        })
-    },
-    selectCurrentSubDistrict(newSubDistrict) {
-      this.currentSubDistrict = newSubDistrict.name
-      this.currentZipCode = newSubDistrict.zipCode
-    }
-  },
-  methods: {
-    loadUserFiles() {
-      this.loader = true
-      this.$http
-        .get(this.$config.API.getUserFiles())
-        .then((res) => {
-          this.filePictureCurrent = []
-          this.fileAddressCurrent = []
-          this.fileCitizenIdCurrent = []
-          this.fileProfessionalLicenseCurrent = []
-          this.fileOtherCurrent = []
-          res.data.items.fileUpload.forEach((file) => {
-            if (file.type === 'picture') this.filePictureCurrent.push(file)
-            else if (file.type === 'address') this.fileAddressCurrent.push(file)
-            else if (file.type === 'citizenId') this.fileCitizenIdCurrent.push(file)
-            else if (file.type === 'professionalLicense')
-              this.fileProfessionalLicenseCurrent.push(file)
-            else if (file.type === 'other') this.fileOtherCurrent.push(file)
-          })
-        })
-        .catch((err) => console.log(err))
-        .finally(() => {
-          // this.loader = false
-          this.loadOptionFromAPI()
-        })
-    },
-    loadOptionFromAPI() {
-      // this.loader = true
-      this.$http
-        .get(this.$config.API.getProvincesOptions())
-        .then((res) => {
-          this.formOptions.registProvinces = res.data.items
-          this.formOptions.currentProvinces = res.data.items
-        })
-        .catch((err) => console.log(err))
-        .finally(() => {
-          // this.loader = false
-          this.checkCandidateApply()
-        })
-    },
-    checkCandidateApply() {
-      // this.loader = true
-      this.$http
-        .get(
-          this.$config.API.checkCandidateApply(
-            this.$route.params.examId,
-            this.$keycloak.tokenParsed.sub
-          )
-        )
-        .then((res) => {
-          if (res.data.items === 1) {
-            this.applyState = 1
-            this.loadUserProfile()
-          } else {
-            this.applyState = 2
-            this.loadCandidateData()
-            if (res.data.items === 3) {
-              this.applyState = 3
-              this.isApply = true
-              this.allowEditProp = false
-            }
-          }
-        })
-        .catch((err) => console.log(err))
-        .finally(() => {
-          this.loader = false
-        })
-    },
-    formatDateToAPI(value) {
-      // return value === null ? null : moment(String(value)).format("YYYY-MM-DDTHH:mm:ss")
-    },
-    formDataPrep() {
-      return {
-        namePrefix: this.namePrefix,
-        firstName: this.firstName,
-        lastName: this.lastName,
-        dateOfBirth: this.dateOfBirth,
-        age: this.age,
-        sex: this.sex,
-        status: this.status,
-        bloodGroup: this.bloodGroup,
-        nationality: this.nationality,
-        ethnicity: this.ethnicity,
-        religion: this.religion,
-        phoneNumber: this.phoneNumber,
-        email: this.email,
-        citizenId: this.citizenId,
-        citizenIdIssuanceAt: this.citizenIdIssuanceAt,
-        citizenIdIssuanceOn: this.citizenIdIssuanceOn,
-        citizenIdExpireOn: this.citizenIdExpireOn,
-        governmentOfficialId: this.governmentOfficialId,
-        registAddress: this.registAddress,
-        registProvince: this.registProvince,
-        registDistrict: this.registDistrict,
-        registSubDistrict: this.registSubDistrict,
-        registZipCode: this.registZipCode,
-        currentAddress: this.currentAddress,
-        currentProvince: this.currentProvince,
-        currentDistrict: this.currentDistrict,
-        currentSubDistrict: this.currentSubDistrict,
-        currentZipCode: this.currentZipCode,
-        educationalQualification: this.educationalQualification,
-        educationalField: this.educationalField,
-        educationalUniversity: this.educationalUniversity,
-        educationalLevel: this.educationalLevel,
-        educationalGraduationDate: this.educationalGraduationDate,
-        educationalGPAX: this.educationalGPAX,
-        educationalTalent: this.educationalTalent,
-        currentCareer: this.currentCareer,
-        currentCareerYearsExperience: this.currentCareerYearsExperience,
-        currentCareerPosition: this.currentCareerPosition,
-        currentCareerCompany: this.currentCareerCompany,
-        currentCareerCompanyPhoneNumber: this.currentCareerCompanyPhoneNumber,
-        professionalLicenseName: this.professionalLicenseName,
-        professionalLicenseId: this.professionalLicenseId,
-        professionalLicenseIssuanceOn: this.professionalLicenseIssuanceOn,
-        professionalLicenseExpireOn: this.professionalLicenseExpireOn,
-        acceptTermOfUse: this.acceptTermOfUse,
-        dateOfBirth: this.formatDateToAPI(this.dateOfBirth),
-        citizenIdIssuanceOn: this.formatDateToAPI(this.citizenIdIssuanceOn),
-        citizenIdExpireOn: this.formatDateToAPI(this.citizenIdExpireOn),
-        educationalGraduationDate: this.formatDateToAPI(this.educationalGraduationDate),
-        professionalLicenseIssuanceOn: this.formatDateToAPI(this.professionalLicenseIssuanceOn),
-        professionalLicenseExpireOn: this.formatDateToAPI(this.professionalLicenseExpireOn),
-        filesId: this.allFilesToSubmit
-      }
-    },
-    loadUserProfile() {
-      if (!this.isApply) {
-        this.loader = true
-        this.$http
-          .get(this.$config.API.getUserProfile())
-          .then((res) => {
-            let data = res.data.items
-            this.namePrefix = data.namePrefix
-            this.firstName = data.firstName
-            this.lastName = data.lastName
-            this.dateOfBirth = this.dateToISO4(new Date(data.dateOfBirth))
-            this.age = data.age
-            this.sex = data.sex
-            this.status = data.status
-            this.bloodGroup = data.bloodGroup
-            this.nationality = data.nationality
-            this.ethnicity = data.ethnicity
-            this.religion = data.religion
-            this.phoneNumber = data.phoneNumber
-            this.email = data.email
-            this.citizenId = data.citizenId
-            this.citizenIdIssuanceAt = data.citizenIdIssuanceAt
-            this.citizenIdIssuanceOn = this.dateToISO4(new Date(data.citizenIdIssuanceOn))
-            this.citizenIdExpireOn = this.dateToISO4(new Date(data.citizenIdExpireOn))
-            this.governmentOfficialId = data.governmentOfficialId
-          })
-          .catch((e) => {
-            console.log(e.message)
-          })
-          .finally(() => {
-            this.loader = false
-          })
-      }
-    },
-    loadCandidateData() {
-      this.loader = true
-      this.$http
-        .get(
-          this.$config.API.getCandidateByUserIdAndExamId(
-            this.$route.params.examId,
-            this.$keycloak.tokenParsed.sub
-          )
-        )
-        .then((res) => {
-          let data = res.data.items
-          this.namePrefix = data.namePrefix
-          this.firstName = data.firstName
-          this.lastName = data.lastName
-          this.dateOfBirth = data.dateOfBirth
-          this.age = data.age
-          this.sex = data.sex
-          this.status = data.status
-          this.bloodGroup = data.bloodGroup
-          this.nationality = data.nationality
-          this.ethnicity = data.ethnicity
-          this.religion = data.religion
-          this.phoneNumber = data.phoneNumber
-          this.email = data.email
-          this.citizenId = data.citizenId
-          this.citizenIdIssuanceAt = data.citizenIdIssuanceAt
-          this.citizenIdIssuanceOn = data.citizenIdIssuanceOn
-          this.citizenIdExpireOn = data.citizenIdExpireOn
-          this.governmentOfficialId = data.governmentOfficialId
-          this.registAddress = data.registAddress
-          this.registProvince = data.registProvince
-          this.registDistrict = data.registDistrict
-          this.registSubDistrict = data.registSubDistrict
-          this.registZipCode = data.registZipCode
-          this.currentAddress = data.currentAddress
-          this.currentProvince = data.currentProvince
-          this.currentDistrict = data.currentDistrict
-          this.currentSubDistrict = data.currentSubDistrict
-          this.currentZipCode = data.currentZipCode
-          this.educationalQualification = data.educationalQualification
-          this.educationalField = data.educationalField
-          this.educationalUniversity = data.educationalUniversity
-          this.educationalLevel = data.educationalLevel
-          this.educationalGraduationDate = data.educationalGraduationDate
-          this.educationalGPAX = data.educationalGPAX
-          this.educationalTalent = data.educationalTalent
-          this.currentCareer = data.currentCareer
-          this.currentCareerYearsExperience = data.currentCareerYearsExperience
-          this.currentCareerPosition = data.currentCareerPosition
-          this.currentCareerCompany = data.currentCareerCompany
-          this.currentCareerCompanyPhoneNumber = data.currentCareerCompanyPhoneNumber
-          this.professionalLicenseName = data.professionalLicenseName
-          this.professionalLicenseId = data.professionalLicenseId
-          this.professionalLicenseIssuanceOn = data.professionalLicenseIssuanceOn
-          this.professionalLicenseExpireOn = data.professionalLicenseExpireOn
-          this.acceptTermOfUse = data.acceptTermOfUse
+<script setup lang="ts">
+import { ref } from 'vue'
+import Profile from './Profile.vue'
+import Education from './Education.vue'
+import Career from './Career.vue'
 
-          this.fileOtherUpload = []
-          data.fileUpload.forEach((file) => {
-            if (file.type === 'picture') this.filePictureUpload = file.id
-            else if (file.type === 'address') this.fileAddressUpload = file.id
-            else if (file.type === 'citizenId') this.fileCitizenIdUpload = file.id
-            else if (file.type === 'professionalLicense')
-              this.fileProfessionalLicenseUpload = file.id
-            else if (file.type === 'other') this.fileOtherUpload.push(file.id)
-          })
-        })
-        .catch((err) => {
-          console.log(err)
-        })
-        .finally(() => {
-          this.loader = false
-        })
-    },
-    saveForm() {
-      if (this.isApply) return
-      this.loader = true
-      this.$http
-        .put(this.$config.API.candidateSaveForm(this.$route.params.examId), this.formDataPrep())
-        .then((res) => {
-          this.notify('บันทึกข้อมูลสำเร็จ')
-        })
-        .catch((err) => console.log(err))
-        .finally(() => {
-          this.loader = false
-          this.loadUserFiles()
-        })
-    },
-    applyCandidate() {
-      if (!this.acceptTermOfUse) return
-      if (this.isApply) return
-      if (this.allFilesToSubmit.length < 1) {
-        this.notifyError('กรุณาเลือกเอกสารอย่างน้อย 1 รายการ')
-        return
-      }
-      this.loader = true
-      this.$http
-        .put(this.$config.API.candidateSaveForm(this.$route.params.examId), this.formDataPrep())
-        .then((res) => {
-          this.$http
-            .post(
-              this.$config.API.newCandidateApply(this.$route.params.examId),
-              this.formDataPrep()
-            )
-            .then((res) => {
-              if (res.data.status === 200) {
-                this.notify('สมัครสอบสำเร็จกรุณารอการยืนยัน')
-                window.location.reload()
-              }
-            })
-            .catch((err) => {
-              console.log(err.message)
-            })
-            .finally(() => {
-              this.loader = false
-              this.loadUserFiles()
-            })
-        })
-        .catch((err) => console.log(err))
-        .finally(() => {
-          this.loader = false
-        })
-    }
-  },
-  created() {
-    this.loadUserFiles()
-    // this.loadUserProfile();
-  },
-  watch: {
-    dateOfBirth(val) {
-      if (val !== null) {
-        this.dateOfBirthTH = this.date2Thai(new Date(val))
-      } else {
-        this.dateOfBirthTH = null
-      }
-    },
-    citizenIdIssuanceOn(val) {
-      if (val !== null) {
-        this.citizenIdIssuanceOnTH = this.date2Thai(new Date(val))
-      } else {
-        this.citizenIdIssuanceOnTH = null
-      }
-    },
-    citizenIdExpireOn(val) {
-      if (val !== null) {
-        this.citizenIdExpireOnTH = this.date2Thai(new Date(val))
-      } else {
-        this.citizenIdExpireOnTH = null
-      }
-    },
-    educationalGraduationDate(val) {
-      if (val !== null) {
-        this.educationalGraduationDateTH = this.date2Thai(new Date(val))
-      } else {
-        this.educationalGraduationDateTH = null
-      }
-    },
-    professionalLicenseIssuanceOn(val) {
-      if (val !== null) {
-        this.professionalLicenseIssuanceOnTH = this.date2Thai(new Date(val))
-      } else {
-        this.professionalLicenseIssuanceOnTH = null
-      }
-    },
-    professionalLicenseExpireOn(val) {
-      if (val !== null) {
-        this.professionalLicenseExpireOnTH = this.date2Thai(new Date(val))
-      } else {
-        this.professionalLicenseExpireOnTH = null
-      }
-    }
-  }
-}
+const tab = ref<string>('profile')
+const loader = ref<boolean>(false)
 </script>
 
 <style lang="scss" scoped></style>
diff --git a/src/modules/01_exam/components/Profile.vue b/src/modules/01_exam/components/Profile.vue
new file mode 100644
index 0000000..e7d1f3a
--- /dev/null
+++ b/src/modules/01_exam/components/Profile.vue
@@ -0,0 +1,4 @@
+<template>
+  <div></div>
+</template>
+<script setup lang="ts"></script>
diff --git a/src/modules/01_exam/interface/request/Certificate.ts b/src/modules/01_exam/interface/request/Certificate.ts
deleted file mode 100644
index 76a39d2..0000000
--- a/src/modules/01_exam/interface/request/Certificate.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-interface DataProps {
-    row: RequestItemsObject;
-    rowIndex: number;
-  }
-  
-  //ข้อมูล
-  interface RequestItemsObject {
-    id: string;
-    name: string;
-    certiNumber: string;
-    start: Date;
-    end: Date;
-  }
-  
-  //columns
-  interface Columns {
-    [index: number]: {
-      name: String;
-      align: String;
-      label: String;
-      sortable: Boolean;
-      field: String;
-      headerStyle: String;
-      style: String;
-    };
-  }
-  
-  export type { RequestItemsObject, Columns, DataProps };
-  
\ No newline at end of file
diff --git a/src/modules/01_exam/interface/request/Coin.ts b/src/modules/01_exam/interface/request/Coin.ts
deleted file mode 100644
index b5d3d05..0000000
--- a/src/modules/01_exam/interface/request/Coin.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-interface DataProps {
-  row: RequestItemsObject;
-  rowIndex: number;
-}
-
-//ข้อมูล
-interface RequestItemsObject {
-  id: string;
-  receiveDate: Date;
-  detail: string;
-  agency: string;
-}
-
-//columns
-interface Columns {
-  [index: number]: {
-    name: String;
-    align: String;
-    label: String;
-    sortable: Boolean;
-    field: String;
-    headerStyle: String;
-    style: String;
-  };
-}
-
-export type { RequestItemsObject, Columns, DataProps };
diff --git a/src/modules/01_exam/interface/request/Discipline.ts b/src/modules/01_exam/interface/request/Discipline.ts
deleted file mode 100644
index 334f2e8..0000000
--- a/src/modules/01_exam/interface/request/Discipline.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-interface DataProps {
-  row: RequestItemsObject;
-  rowIndex: number;
-}
-
-//ข้อมูล
-interface RequestItemsObject {
-  id: string;
-  date: Date;
-  status: string;
-  level: string;
-  refNo: string;
-  refDate: Date;
-}
-
-//columns
-interface Columns {
-  [index: number]: {
-    name: String;
-    align: String;
-    label: String;
-    sortable: Boolean;
-    field: String;
-    headerStyle: String;
-    style: String;
-  };
-}
-
-export type { RequestItemsObject, Columns, DataProps };
diff --git a/src/modules/01_exam/interface/request/Document.ts b/src/modules/01_exam/interface/request/Document.ts
deleted file mode 100644
index 9e1c218..0000000
--- a/src/modules/01_exam/interface/request/Document.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-//ข้อมูล
-interface RequestItemsObject {
-  name: String;
-}
-
-//columns
-interface Columns {
-  [index: number]: {
-    name: String;
-    align: String;
-    label: String;
-    sortable: Boolean;
-    field: String;
-    headerStyle: String;
-    style: String;
-  };
-}
-
-export type { RequestItemsObject, Columns };
diff --git a/src/modules/01_exam/interface/request/Education.ts b/src/modules/01_exam/interface/request/Education.ts
index 3b4a37f..d1c190a 100644
--- a/src/modules/01_exam/interface/request/Education.ts
+++ b/src/modules/01_exam/interface/request/Education.ts
@@ -1,31 +1,30 @@
 interface DataProps {
-  row: RequestItemsObject;
-  rowIndex: number;
+  row: RequestItemsObject
+  rowIndex: number
 }
 
 //ข้อมูล
 interface RequestItemsObject {
-  id: string;
-  level: string;
-  levelId: string;
-  name: string;
-  start: number;
-  end: number;
-  education: string;
-  major: string;
+  id: string
+  qualificationId: string
+  qualification: string
+  major: string
+  scores: number | null
+  name: string
+  duration: any
 }
 
 //columns
 interface Columns {
   [index: number]: {
-    name: String;
-    align: String;
-    label: String;
-    sortable: Boolean;
-    field: String;
-    headerStyle: String;
-    style: String;
-  };
+    name: String
+    align: String
+    label: String
+    sortable: Boolean
+    field: String
+    headerStyle: String
+    style: String
+  }
 }
 
-export type { RequestItemsObject, Columns, DataProps };
+export type { RequestItemsObject, Columns, DataProps }
diff --git a/src/modules/01_exam/interface/request/Insignia.ts b/src/modules/01_exam/interface/request/Insignia.ts
deleted file mode 100644
index fb7eb81..0000000
--- a/src/modules/01_exam/interface/request/Insignia.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-interface DataProps {
-  row: RequestItemsObject;
-  rowIndex: number;
-}
-
-//ข้อมูล
-interface RequestItemsObject {
-  id: string;
-  year: number;
-  receiveDate: Date;
-  insigniaType: string;
-  insigniaTypeId: string;
-  insignia: string;
-  insigniaId: string;
-  no: string;
-  gazetteNo: string;
-  volume: string;
-  book: string;
-  section: string;
-  page: string;
-}
-
-//columns
-interface Columns {
-  [index: number]: {
-    name: String;
-    align: String;
-    label: String;
-    sortable: Boolean;
-    field: String;
-    headerStyle: String;
-    style: String;
-  };
-}
-
-export type { RequestItemsObject, Columns, DataProps };
diff --git a/src/modules/01_exam/interface/request/Leave.ts b/src/modules/01_exam/interface/request/Leave.ts
deleted file mode 100644
index 5e36e33..0000000
--- a/src/modules/01_exam/interface/request/Leave.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-interface DataProps {
-  row: RequestItemsObject;
-  rowIndex: number;
-}
-
-//ข้อมูล
-interface RequestItemsObject {
-  id: string;
-  year: number;
-  holiday: string;
-  sick: string;
-  government: string;
-  late: string;
-  other: string;
-  business: string;
-  maternity: string;
-  helpMaternity: string;
-  ordination: string;
-  study: string;
-  international: string;
-  spouse: string;
-  rehabilitation: string;
-}
-
-//columns
-interface Columns {
-  [index: number]: {
-    name: String;
-    align: String;
-    label: String;
-    sortable: Boolean;
-    field: String;
-    headerStyle: String;
-    style: String;
-  };
-}
-
-export type { RequestItemsObject, Columns, DataProps };
diff --git a/src/modules/01_exam/interface/request/Other.ts b/src/modules/01_exam/interface/request/Other.ts
deleted file mode 100644
index 986ae23..0000000
--- a/src/modules/01_exam/interface/request/Other.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-interface DataProps {
-  row: RequestItemsObject;
-  rowIndex: number;
-}
-
-//ข้อมูล
-interface RequestItemsObject {
-  id: string;
-  detail: string;
-}
-
-//columns
-interface Columns {
-  [index: number]: {
-    name: String;
-    align: String;
-    label: String;
-    sortable: Boolean;
-    field: String;
-    headerStyle: String;
-    style: String;
-  };
-}
-
-export type { RequestItemsObject, Columns, DataProps };
diff --git a/src/modules/01_exam/interface/request/Record.ts b/src/modules/01_exam/interface/request/Record.ts
deleted file mode 100644
index 2a7235a..0000000
--- a/src/modules/01_exam/interface/request/Record.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-interface DataProps {
-  row: RequestItemsObject;
-  rowIndex: number;
-}
-
-//ข้อมูล
-interface RequestItemsObject {
-  id: string;
-  date: Date;
-  detail: string;
-  reference: string;
-}
-
-//columns
-interface Columns {
-  [index: number]: {
-    name: String;
-    align: String;
-    label: String;
-    sortable: Boolean;
-    field: String;
-    headerStyle: String;
-    style: String;
-  };
-}
-
-export type { RequestItemsObject, Columns, DataProps };
diff --git a/src/modules/01_exam/interface/request/Salary.ts b/src/modules/01_exam/interface/request/Salary.ts
deleted file mode 100644
index f80c788..0000000
--- a/src/modules/01_exam/interface/request/Salary.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-interface DataProps {
-  row: RequestItemsObject;
-  rowIndex: number;
-}
-
-//ข้อมูล
-interface RequestItemsObject {
-  id: string;
-  date: Date;
-  position: string;
-  positionId: string;
-  posNo: string;
-  posNoId: string;
-  level: string;
-  levelId: string;
-  salary: string;
-  reference: string;
-}
-
-//columns
-interface Columns {
-  [index: number]: {
-    name: String;
-    align: String;
-    label: String;
-    sortable: Boolean;
-    field: String;
-    headerStyle: String;
-    style: String;
-  };
-}
-
-export type { RequestItemsObject, Columns, DataProps };
diff --git a/src/modules/01_exam/interface/request/Talent.ts b/src/modules/01_exam/interface/request/Talent.ts
deleted file mode 100644
index dada96a..0000000
--- a/src/modules/01_exam/interface/request/Talent.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-interface DataProps {
-  row: RequestItemsObject;
-  rowIndex: number;
-}
-
-//ข้อมูล
-interface RequestItemsObject {
-  id: string;
-  side: string;
-  detail: string;
-  note: string;
-}
-
-//columns
-interface Columns {
-  [index: number]: {
-    name: String;
-    align: String;
-    label: String;
-    sortable: Boolean;
-    field: String;
-    headerStyle: String;
-    style: String;
-  };
-}
-
-export type { RequestItemsObject, Columns, DataProps };
diff --git a/src/modules/01_exam/interface/request/Train.ts b/src/modules/01_exam/interface/request/Train.ts
deleted file mode 100644
index 107895e..0000000
--- a/src/modules/01_exam/interface/request/Train.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-interface DataProps {
-  row: RequestItemsObject;
-  rowIndex: number;
-}
-
-//ข้อมูล
-interface RequestItemsObject {
-  id: string;
-  course: string;
-  start: Date;
-  end: Date;
-  location: string;
-  detail: string;
-  organize: string;
-  gen: string;
-}
-
-//columns
-interface Columns {
-  [index: number]: {
-    name: String;
-    align: String;
-    label: String;
-    sortable: Boolean;
-    field: String;
-    headerStyle: String;
-    style: String;
-  };
-}
-
-export type { RequestItemsObject, Columns, DataProps };
diff --git a/src/modules/01_exam/interface/request/Work.ts b/src/modules/01_exam/interface/request/Work.ts
deleted file mode 100644
index 4631317..0000000
--- a/src/modules/01_exam/interface/request/Work.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-interface DataProps {
-  row: RequestItemsObject;
-  rowIndex: number;
-}
-
-//ข้อมูล
-interface RequestItemsObject {
-  id: string;
-  start: Date;
-  end: Date;
-  detail: string;
-  reference: string;
-}
-
-//columns
-interface Columns {
-  [index: number]: {
-    name: String;
-    align: String;
-    label: String;
-    sortable: Boolean;
-    field: String;
-    headerStyle: String;
-    style: String;
-  };
-}
-
-export type { RequestItemsObject, Columns, DataProps };
diff --git a/src/modules/01_exam/interface/response/Certificate.ts b/src/modules/01_exam/interface/response/Certificate.ts
deleted file mode 100644
index a3d4017..0000000
--- a/src/modules/01_exam/interface/response/Certificate.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-//ข้อมูล
-interface ResponseObject {
-  id: string;
-  date: Date;
-  status: string;
-  level: string;
-  refNo: string;
-  refDate: Date;
-}
-
-export type { ResponseObject };
diff --git a/src/modules/01_exam/interface/response/Coin.ts b/src/modules/01_exam/interface/response/Coin.ts
deleted file mode 100644
index ea73301..0000000
--- a/src/modules/01_exam/interface/response/Coin.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-//ข้อมูล
-interface ResponseObject {
-  id: string;
-  receiveDate: Date;
-  detail: string;
-  agency: string;
-}
-
-export type { ResponseObject };
diff --git a/src/modules/01_exam/interface/response/Discipline.ts b/src/modules/01_exam/interface/response/Discipline.ts
deleted file mode 100644
index a3d4017..0000000
--- a/src/modules/01_exam/interface/response/Discipline.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-//ข้อมูล
-interface ResponseObject {
-  id: string;
-  date: Date;
-  status: string;
-  level: string;
-  refNo: string;
-  refDate: Date;
-}
-
-export type { ResponseObject };
diff --git a/src/modules/01_exam/interface/response/Document.ts b/src/modules/01_exam/interface/response/Document.ts
deleted file mode 100644
index 4365fe3..0000000
--- a/src/modules/01_exam/interface/response/Document.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-//ข้อมูล
-interface ResponseObject {
-  name: String;
-}
-
-export type { ResponseObject };
diff --git a/src/modules/01_exam/interface/response/Education.ts b/src/modules/01_exam/interface/response/Education.ts
index 2910198..e9d22c0 100644
--- a/src/modules/01_exam/interface/response/Education.ts
+++ b/src/modules/01_exam/interface/response/Education.ts
@@ -1,13 +1,12 @@
 //ข้อมูล
 interface ResponseObject {
-  id: string;
-  level: string;
-  levelId: string;
-  name: string;
-  start: number;
-  end: number;
-  education: string;
-  major: string;
+  id: string
+  qualificationId: string
+  qualification: string
+  major: string
+  scores: number | null
+  name: string
+  duration: any
 }
 
-export type { ResponseObject };
+export type { ResponseObject }
diff --git a/src/modules/01_exam/interface/response/Insignia.ts b/src/modules/01_exam/interface/response/Insignia.ts
deleted file mode 100644
index f42502d..0000000
--- a/src/modules/01_exam/interface/response/Insignia.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-//ข้อมูล
-interface ResponseObject {
-  id: string;
-  year: number;
-  receiveDate: Date;
-  insigniaType: string;
-  insigniaTypeId: string;
-  insignia: string;
-  insigniaId: string;
-  no: string;
-  gazetteNo: string;
-  volume: string;
-  book: string;
-  section: string;
-  page: string;
-}
-
-export type { ResponseObject };
diff --git a/src/modules/01_exam/interface/response/Leave.ts b/src/modules/01_exam/interface/response/Leave.ts
deleted file mode 100644
index 320552a..0000000
--- a/src/modules/01_exam/interface/response/Leave.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-//ข้อมูล
-interface ResponseObject {
-  id: string;
-  year: number;
-  holiday: string;
-  sick: string;
-  government: string;
-  late: string;
-  other: string;
-  business: string;
-  maternity: string;
-  helpMaternity: string;
-  ordination: string;
-  study: string;
-  international: string;
-  spouse: string;
-  rehabilitation: string;
-}
-
-export type { ResponseObject };
diff --git a/src/modules/01_exam/interface/response/Other.ts b/src/modules/01_exam/interface/response/Other.ts
deleted file mode 100644
index c2469ac..0000000
--- a/src/modules/01_exam/interface/response/Other.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-//ข้อมูล
-interface ResponseObject {
-  id: string;
-  detail: string;
-}
-
-export type { ResponseObject };
diff --git a/src/modules/01_exam/interface/response/Record.ts b/src/modules/01_exam/interface/response/Record.ts
deleted file mode 100644
index 5ed887b..0000000
--- a/src/modules/01_exam/interface/response/Record.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-//ข้อมูล
-interface ResponseObject {
-  id: string;
-  date: Date;
-  detail: string;
-  reference: string;
-}
-
-export type { ResponseObject };
diff --git a/src/modules/01_exam/interface/response/Salary.ts b/src/modules/01_exam/interface/response/Salary.ts
deleted file mode 100644
index e8bc9ed..0000000
--- a/src/modules/01_exam/interface/response/Salary.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-//ข้อมูล
-interface ResponseObject {
-  id: string;
-  date: Date;
-  position: string;
-  positionId: string;
-  posNo: string;
-  posNoId: string;
-  level: string;
-  levelId: string;
-  salary: string;
-  reference: string;
-}
-
-export type { ResponseObject };
diff --git a/src/modules/01_exam/interface/response/Talent.ts b/src/modules/01_exam/interface/response/Talent.ts
deleted file mode 100644
index 7f6ec19..0000000
--- a/src/modules/01_exam/interface/response/Talent.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-//ข้อมูล
-interface ResponseObject {
-  id: string;
-  side: string;
-  detail: string;
-  note: string;
-}
-
-export type { ResponseObject };
diff --git a/src/modules/01_exam/interface/response/Train.ts b/src/modules/01_exam/interface/response/Train.ts
deleted file mode 100644
index 2566c6a..0000000
--- a/src/modules/01_exam/interface/response/Train.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-//ข้อมูล
-interface ResponseObject {
-  id: string;
-  course: string;
-  start: Date;
-  end: Date;
-  location: string;
-  detail: string;
-  organize: string;
-  gen: string;
-}
-
-export type { ResponseObject };
diff --git a/src/modules/01_exam/interface/response/Work.ts b/src/modules/01_exam/interface/response/Work.ts
deleted file mode 100644
index cb0b0a1..0000000
--- a/src/modules/01_exam/interface/response/Work.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-//ข้อมูล
-interface ResponseObject {
-  id: string;
-  start: Date;
-  end: Date;
-  detail: string;
-  reference: string;
-}
-
-export type { ResponseObject };
diff --git a/src/modules/01_exam/store.ts b/src/modules/01_exam/store.ts
index 26f5d89..c0ac940 100644
--- a/src/modules/01_exam/store.ts
+++ b/src/modules/01_exam/store.ts
@@ -4,14 +4,17 @@ import { defineStore } from 'pinia'
 export const useExamDataStore = defineStore('exam', () => {
   interface exam {
     main: { columns: String[] }
+    education: { columns: String[] }
   }
 
   const examData = ref<exam>({
-    main: { columns: [] }
+    main: { columns: [] },
+    education: { columns: [] }
   })
 
   const changeExamColumns = (system: String, val: String[]) => {
     if (system == 'main') examData.value.main.columns = val
+    if (system == 'education') examData.value.education.columns = val
     localStorage.setItem('exam', JSON.stringify(examData.value))
   }
 
diff --git a/src/plugins/FullLoader.vue b/src/plugins/FullLoader.vue
new file mode 100644
index 0000000..c517d7f
--- /dev/null
+++ b/src/plugins/FullLoader.vue
@@ -0,0 +1,21 @@
+<!-- แสดง ui การโหลด -->
+<template>
+  <div>
+    <q-inner-loading :showing="loaderVisibility">
+      <q-spinner-cube size="80px" color="primary" />
+    </q-inner-loading>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { watch, ref } from "vue";
+const props = defineProps({
+  visibility: Boolean,
+});
+
+const loaderVisibility = ref<boolean>(props.visibility);
+
+watch(props, (count, prevCount) => {
+  loaderVisibility.value = props.visibility;
+});
+</script>
diff --git a/src/plugins/axios.ts b/src/plugins/axios.ts
new file mode 100644
index 0000000..79bba4e
--- /dev/null
+++ b/src/plugins/axios.ts
@@ -0,0 +1,25 @@
+import axios from "axios"
+import config from "process"
+// import { dotnetPath } from "../path/axiosPath";
+// import { getToken } from "@baloise/vue-keycloak";
+import keycloak from "../plugins/keycloak"
+
+const axiosInstance = axios.create({
+    withCredentials: false,
+})
+
+// axiosInstance.defaults.baseURL = dotnetPath;
+axiosInstance.interceptors.request.use(
+    async (config) => {
+        const token = await keycloak.token
+        config.headers = {
+            Authorization: `Bearer ${token}`,
+        }
+        return config
+    },
+    (error) => {
+        Promise.reject(error)
+    }
+)
+
+export default axiosInstance
diff --git a/src/plugins/http.ts b/src/plugins/http.ts
new file mode 100644
index 0000000..494c9aa
--- /dev/null
+++ b/src/plugins/http.ts
@@ -0,0 +1,45 @@
+import Axios, { type AxiosRequestConfig, type AxiosResponse } from "axios";
+import keycloak from "./keycloak";
+
+const http = Axios.create({
+  timeout: 1000000000, // เพิ่มค่า timeout
+  headers: {
+    "X-Requested-With": "XMLHttpRequest",
+  },
+});
+
+http.interceptors.request.use(
+  async function (config: AxiosRequestConfig<any>) {
+    await keycloak.updateToken(1);
+    config.headers = config.headers ?? {};
+    const token = keycloak.token;
+    // const token = localStorage.getItem("access_token")
+    // const token =
+    //   "eyJhbGciOiJSUzI1NiIsInR5cCIgOiAiSldUIiwia2lkIiA6ICIxU2VKV2dVRFVlNXZwNS13Q1ZHaG9lT2l4bDJTTkdKemthLU5ZN211NXZJIn0.eyJleHAiOjE2NzI0MTI1NDksImlhdCI6MTY3MjM3NjU0OSwiYXV0aF90aW1lIjoxNjcyMzc2NTQ5LCJqdGkiOiI1MTVhY2IwNC1jODQ3LTQzM2YtYjUxOC03ODUzMzJhY2ZjNWYiLCJpc3MiOiJodHRwczovL2tleWNsb2FrLmZyYXBwZXQuc3lub2xvZ3kubWUvYXV0aC9yZWFsbXMvYm1hLWVociIsImF1ZCI6ImFjY291bnQiLCJzdWIiOiJlZmM5YjRlMC1mZGU2LTQ1NDQtYmU1OS1lMTA0MjEwMjUzZjAiLCJ0eXAiOiJCZWFyZXIiLCJhenAiOiJibWEtZWhyIiwibm9uY2UiOiI3NjMyMGI3ZS0xZTMxLTQ5ODYtYWIzOC1iOTUyYjFlODY3OGYiLCJzZXNzaW9uX3N0YXRlIjoiMDZlNTBkZjktNzAyNi00ZGIwLTkxMjgtMWY3Y2FiYTRkNDEyIiwiYWNyIjoiMSIsImFsbG93ZWQtb3JpZ2lucyI6WyJodHRwczovL2xvY2FsaG9zdDo3MDA2Il0sInJlYWxtX2FjY2VzcyI6eyJyb2xlcyI6WyJkZWZhdWx0LXJvbGVzLWJtYS1laHIiLCJvZmZsaW5lX2FjY2VzcyIsImFkbWluIiwidW1hX2F1dGhvcml6YXRpb24iXX0sInJlc291cmNlX2FjY2VzcyI6eyJhY2NvdW50Ijp7InJvbGVzIjpbIm1hbmFnZS1hY2NvdW50IiwibWFuYWdlLWFjY291bnQtbGlua3MiLCJ2aWV3LXByb2ZpbGUiXX19LCJzY29wZSI6Im9wZW5pZCBlbWFpbCBwcm9maWxlIiwic2lkIjoiMDZlNTBkZjktNzAyNi00ZGIwLTkxMjgtMWY3Y2FiYTRkNDEyIiwiZW1haWxfdmVyaWZpZWQiOnRydWUsInJvbGUiOlsiZGVmYXVsdC1yb2xlcy1ibWEtZWhyIiwib2ZmbGluZV9hY2Nlc3MiLCJhZG1pbiIsInVtYV9hdXRob3JpemF0aW9uIl0sIm5hbWUiOiJTeXN0ZW0gQWRtaW5pc3RyYXRvciIsInByZWZlcnJlZF91c2VybmFtZSI6ImFkbWluIiwiZ2l2ZW5fbmFtZSI6IlN5c3RlbSIsImZhbWlseV9uYW1lIjoiQWRtaW5pc3RyYXRvciIsImVtYWlsIjoiYWRtaW5AbG9jYWxob3N0In0.xmfJ3pzI-jLYsaiFXyjTW7gfAEpvUmMVsp9BsB1CfRCVOKiGBbuZhnQY8W-1SWVAx1NjJ55L-zMHPK6hk1dRPLbEse3DlIBZw04W9j8m-Wz3eqdHf_UCjmrXb8qAwkeq0Iaxq9mVfJJeQWeKhFBi-Ff8ek4hCXTYDICXS8ny_BaC5WkyrefHQ2xBqQjwRyoxsg4IoVMjXYNb8L9A-4BNlRfs928SqgFYCRlF5h6zw_rC0XoLrGTmqeacBdpey-r3j2g_lTqWy8mQg2T9s65IDqW3kFPOsr0SVO88sjlFbN9Et0L57RmiqORk_RwzbWg-_Yb6dOuolXsnjBOhOoTzkA";
+    if (token) config.headers.Authorization = `Bearer ${token}`;
+    return config;
+  },
+  function (error: any) {
+    return Promise.reject(error);
+  }
+);
+
+http.interceptors.response.use(
+  function (response: AxiosResponse<any, any>) {
+    return response;
+  },
+  function (error: any) {
+    if (typeof error !== undefined) {
+      // eslint-disable-next-line no-prototype-builtins
+      if (error.hasOwnProperty("response")) {
+        if (error.response.status === 401 || error.response.status === 403) {
+          // Store.commit("SET_ERROR_MESSAGE", error.response.data.message);
+          // Store.commit("REMOVE_ACCESS_TOKEN")
+        }
+      }
+    }
+    return Promise.reject(error);
+  }
+);
+
+export default http;
diff --git a/src/plugins/keycloak.ts b/src/plugins/keycloak.ts
new file mode 100644
index 0000000..5d64de9
--- /dev/null
+++ b/src/plugins/keycloak.ts
@@ -0,0 +1,23 @@
+/**
+ * front connect to keycloak
+ */
+import Keycloak from "keycloak-js";
+// import config from "../app.config";
+// import http from "../shared/http";
+// import router from "../router";
+
+const initOptions = {
+  //   url: "https://keycloak.frappet.synology.me/auth/",
+  //   realm: "bma-ehr",
+  //   clientId: "bma-ehr-vue3",
+  url: "https://identity.frappet.com/",
+  realm: "bma-ehr",
+  clientId: "bma-ehr-vue3",
+}; //option keycloak ที่จะ connect
+
+const keycloak = Keycloak(initOptions);
+
+keycloak.onAuthSuccess = () => {}; //เพิ่มlogin สำเร็จจะมาทำฟังก์ชันนี้
+
+await keycloak.init({ checkLoginIframe: false }); //ทำการ connect keycloak
+export default keycloak;