From b7a91fa3262e5908333b9b33f285e911449f673a Mon Sep 17 00:00:00 2001
From: Kittapath <kittapath@frappet.com>
Date: Sat, 25 Mar 2023 01:07:18 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=95=E0=B9=88=E0=B8=ADapi=E0=B8=84?=
 =?UTF-8?q?=E0=B8=99=E0=B8=AA=E0=B8=A1=E0=B8=B1=E0=B8=84=E0=B8=A3=E0=B8=81?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=AD=E0=B8=81=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=A1?=
 =?UTF-8?q?=E0=B8=B9=E0=B8=A5=E0=B8=AA=E0=B8=A1=E0=B8=B1=E0=B8=84=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=AA=E0=B8=AD=E0=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/exam/api.candidate.ts                 |   1 +
 .../01_exam/components/ExamFinished.vue       |  14 +-
 src/modules/01_exam/components/ExamForm.vue   |  36 +--
 .../01_exam/components/ExamPayment.vue        |  47 ++--
 .../01_exam/components/Form/Career.vue        |  58 +++--
 .../01_exam/components/Form/Document.vue      |   6 +-
 .../01_exam/components/Form/Education.vue     |  60 ++---
 .../01_exam/components/Form/Profile.vue       |  97 ++++++--
 .../components/Form/Profile/Address.vue       | 186 ++++++++-------
 .../components/Form/Profile/Family.vue        | 123 +++-------
 .../components/Form/Profile/Information.vue   | 220 +++++++-----------
 .../components/Form/Profile/Occupation.vue    | 128 +++++++---
 src/modules/01_exam/interface/index/Main.ts   |   8 +-
 .../01_exam/interface/response/Career.ts      |   5 +-
 .../01_exam/interface/response/Education.ts   |   9 +-
 src/modules/01_exam/views/ExamDetail.vue      |  91 +++++---
 16 files changed, 567 insertions(+), 522 deletions(-)

diff --git a/src/api/exam/api.candidate.ts b/src/api/exam/api.candidate.ts
index 521446a..221d17e 100644
--- a/src/api/exam/api.candidate.ts
+++ b/src/api/exam/api.candidate.ts
@@ -11,5 +11,6 @@ export default {
   candidateCheckCreate: (examId: string) => `${candidate}check/${examId}`,
   candidateRegister: (examId: string) => `${candidate}register/${examId}`,
   candidatePayment: (examId: string) => `${candidate}payment/${examId}`,
+  candidateStatus: (examId: string) => `${candidate}status/${examId}`,
   candidate
 }
diff --git a/src/modules/01_exam/components/ExamFinished.vue b/src/modules/01_exam/components/ExamFinished.vue
index 2330d1a..b9101f9 100644
--- a/src/modules/01_exam/components/ExamFinished.vue
+++ b/src/modules/01_exam/components/ExamFinished.vue
@@ -3,7 +3,7 @@
     <div class="q-pa-md row items-center justify-center">
       <q-card style="max-width: 40%; width: 100%" bordered>
         <q-card-actions class="q-pa-md" :class="getClass(status)">
-          <div v-if="status == false" class="text-black text-bold">
+          <div v-if="status != 'done'" class="text-black text-bold">
             เจ้าหน้าที่กำลังตรวจสถานที่สอบ
           </div>
           <div v-else class="text-black text-bold">สมัครสอบสำเร็จ</div>
@@ -75,8 +75,8 @@ const props = defineProps({
     type: Function,
     default: () => console.log('not function')
   },
-  step: {
-    type: Number,
+  status: {
+    type: String,
     required: true
   }
 })
@@ -89,14 +89,10 @@ const examLocation = ref<string>('ศูนย์สอบ 01 กรุงเท
 const floor = ref<string>('4')
 const examRoom = ref<string>('CB-706')
 const seatNumber = ref<string>('75')
-const status = ref<boolean>(true)
 
 const download = () => {}
-const testChangeStatus = () => {
-  status.value = true
-}
-const getClass = (val: boolean) => {
-  return val == true ? 'bg-green-4' : 'bg-yellow-3'
+const getClass = (val: string) => {
+  return val == 'done' ? 'bg-green-4' : 'bg-yellow-3'
 }
 </script>
 
diff --git a/src/modules/01_exam/components/ExamForm.vue b/src/modules/01_exam/components/ExamForm.vue
index 22a25f4..0974659 100644
--- a/src/modules/01_exam/components/ExamForm.vue
+++ b/src/modules/01_exam/components/ExamForm.vue
@@ -13,22 +13,22 @@
         >
           <!-- ข้อมูลส่วนบุคคล -->
           <q-tab-panel name="profile">
-            <Profile :loader="loader" v-model:statusEdit="statusEdit" :step="step" />
+            <Profile :loader="loader" v-model:statusEdit="statusEdit" :status="status" />
           </q-tab-panel>
 
           <!-- ประวัติการศีกษา -->
           <q-tab-panel name="education"
-            ><Education :loader="loader" v-model:statusEdit="statusEdit" :step="step"
+            ><Education :loader="loader" v-model:statusEdit="statusEdit" :status="status"
           /></q-tab-panel>
 
           <!-- ประวัติการทำงาน/ฝึกงาน -->
           <q-tab-panel name="career"
-            ><Career :loader="loader" v-model:statusEdit="statusEdit" :step="step"
+            ><Career :loader="loader" v-model:statusEdit="statusEdit" :status="status"
           /></q-tab-panel>
 
           <!-- ไฟล์ -->
           <q-tab-panel name="document">
-            <Document :loader="loader" v-model:statusEdit="statusEdit" :step="step" />
+            <Document :loader="loader" v-model:statusEdit="statusEdit" :status="status" />
           </q-tab-panel>
         </q-tab-panels>
       </template>
@@ -45,7 +45,7 @@
     <div>
       <q-checkbox
         v-model="acceptTermOfUse"
-        :disable="step !== 2 || statusEdit"
+        :disable="(status !== 'register' && status !== 'rejectRegister') || statusEdit"
         v-if="tab == 'document'"
         label="ข้าพเจ้ารับรองว่า ข้าพเจ้ามีคุณสมบัติครบถ้วนตามประกาศรับสมัคร ข้อความข้างต้นตรงตามความจริงทุกประการ"
       />
@@ -57,7 +57,10 @@
         class="q-ml-md"
         label="กลับ"
         @click="clickPreview(tab)"
-        v-if="step === 2 && (tab == 'education' || tab == 'career' || tab == 'document')"
+        v-if="
+          (status === 'register' || status === 'rejectRegister') &&
+          (tab == 'education' || tab == 'career' || tab == 'document')
+        "
         icon="mdi-chevron-left"
         :disable="statusEdit"
       />
@@ -66,7 +69,10 @@
         class="q-ml-md"
         label="ต่อไป"
         @click="clickNext(tab)"
-        v-if="step === 2 && (tab == 'profile' || tab == 'education' || tab == 'career')"
+        v-if="
+          (status === 'register' || status === 'rejectRegister') &&
+          (tab == 'profile' || tab == 'education' || tab == 'career')
+        "
         icon-right="mdi-chevron-right"
         :disable="statusEdit"
       />
@@ -75,7 +81,7 @@
         class="q-ml-md"
         label="สมัครสอบ"
         @click="okModalConfirm"
-        v-if="step === 2 && tab == 'document'"
+        v-if="(status === 'register' || status === 'rejectRegister') && tab == 'document'"
         :disable="!acceptTermOfUse || statusEdit"
       />
     </div>
@@ -84,22 +90,22 @@
 
 <script setup lang="ts">
 import { onMounted, ref, watch } from 'vue'
-import Profile from '@/modules/01_exam/components/Form/Profile.vue'
-import Education from '@/modules/01_exam/components/Form/Education.vue'
-import Career from '@/modules/01_exam/components/Form/Career.vue'
-import Document from '@/modules/01_exam/components/Form/Document.vue'
 import { useQuasar } from 'quasar'
 import { useCounterMixin } from '@/stores/mixin'
 import http from '@/plugins/http'
 import config from '@/app.config'
+import Profile from '@/modules/01_exam/components/Form/Profile.vue'
+import Education from '@/modules/01_exam/components/Form/Education.vue'
+import Career from '@/modules/01_exam/components/Form/Career.vue'
+import Document from '@/modules/01_exam/components/Form/Document.vue'
 
 const props = defineProps({
   fetchStep: {
     type: Function,
     default: () => console.log('not function')
   },
-  step: {
-    type: Number,
+  status: {
+    type: String,
     required: true
   }
 })
@@ -115,7 +121,7 @@ const acceptTermOfUse = ref<boolean>(false)
 const candidateId = ref<string>('2223ba53-2fb2-470b-8dc1-27e5471b0331')
 
 onMounted(async () => {
-  if (props.step > 2) {
+  if (props.status !== 'register') {
     acceptTermOfUse.value = true
   }
 })
diff --git a/src/modules/01_exam/components/ExamPayment.vue b/src/modules/01_exam/components/ExamPayment.vue
index 5cc88f9..e7e4db0 100644
--- a/src/modules/01_exam/components/ExamPayment.vue
+++ b/src/modules/01_exam/components/ExamPayment.vue
@@ -6,7 +6,7 @@
           <div class="text-bold col-12" :class="getFontColor(status)">
             {{ message(status) }}
           </div>
-          <div class="col-12" v-if="status === 'rejected'" :class="getFontColor(status)">
+          <div class="col-12" v-if="status === 'rejectPayment'" :class="getFontColor(status)">
             <li>{{ rejectMessage }}</li>
           </div>
         </q-card-actions>
@@ -18,15 +18,17 @@
       </div>
     </div>
     <div class="q-pa-md text-center col-12">
-      <q-btn color="primary" @click="clickPayment" label="ส่งหลักฐานการชำระเงิน" />
+      <q-btn
+        v-if="status == 'payment' || status == 'rejectPayment'"
+        color="primary"
+        @click="clickPayment"
+        label="ส่งหลักฐานการชำระเงิน"
+      />
     </div>
     <div class="text-black text-center q-pb-lg col-12">
       ***ถ้าต้องการเเก้ไขหลักฐานการโอนเงินกรุณาอัปโหลดซ้ำ***
     </div>
   </div>
-  <q-btn color="negative" @click="setStatus('rejected')">Re</q-btn>
-  <q-btn color="positive" @click="setStatus('success')">Su</q-btn>
-  <q-btn color="positive" @click="setStatus('next')">Ne</q-btn>
 </template>
 
 <script setup lang="ts">
@@ -41,8 +43,8 @@ const props = defineProps({
     type: Function,
     default: () => console.log('not function')
   },
-  step: {
-    type: Number,
+  status: {
+    type: String,
     required: true
   }
 })
@@ -50,7 +52,6 @@ const props = defineProps({
 const $q = useQuasar()
 const mixin = useCounterMixin() //เรียกฟังก์ชันกลาง
 const { success } = mixin
-const status = ref<string>('')
 const rejectMessage = ref<string>('กรุณาจ่ายเงินให้ครบตามจำนวน')
 const img = ref<string>('https://cdn-icons-png.flaticon.com/512/2496/2496846.png')
 const fileData = ref<any>()
@@ -65,11 +66,6 @@ const uploadImg = (file: any) => {
     'https://www.bangkokbank.com/-/media/feature/page-content/bbl-corporate/image-carousel-slides/digital-banking/bualuang-mbanking/how-to-use/payment/others/7_en.png'
 }
 
-const setStatus = async (val: string) => {
-  status.value = val
-  if (val == 'next') props.fetchStep()
-}
-
 const clickPayment = async () => {
   loader.value = true
   await http
@@ -82,16 +78,17 @@ const clickPayment = async () => {
       loader.value = false
       props.fetchStep()
     })
-  status.value = 'processing'
 }
 
 const getClass = (val: string) => {
   switch (val) {
-    case 'processing':
+    case 'checkPayment':
       return 'bg-yellow-3'
-    case 'rejected':
+    case 'rejectPayment':
       return 'bg-red-2'
-    case 'success':
+    case 'checkSeat':
+      return 'bg-light-green-3'
+    case 'done':
       return 'bg-light-green-3'
     default:
       return 'bg-light-blue-1'
@@ -99,11 +96,13 @@ const getClass = (val: string) => {
 }
 const message = (val: string) => {
   switch (val) {
-    case 'processing':
+    case 'checkPayment':
       return 'รอการตรวจสอบ'
-    case 'rejected':
+    case 'rejectPayment':
       return 'หลักฐานการชำระเงินผิดพลาด'
-    case 'success':
+    case 'checkSeat':
+      return 'ตรวจสอบเเล้ว'
+    case 'done':
       return 'ตรวจสอบเเล้ว'
     default:
       return 'รออัปโหลดหลักฐานชำระเงิน'
@@ -111,11 +110,13 @@ const message = (val: string) => {
 }
 const getFontColor = (val: string) => {
   switch (val) {
-    case 'processing':
+    case 'checkPayment':
       return 'text-orange'
-    case 'rejected':
+    case 'rejectPayment':
       return 'text-red-12'
-    case 'success':
+    case 'checkSeat':
+      return 'text-green'
+    case 'done':
       return 'text-green'
     default:
       return 'text-blue'
diff --git a/src/modules/01_exam/components/Form/Career.vue b/src/modules/01_exam/components/Form/Career.vue
index 2841d98..75f454a 100644
--- a/src/modules/01_exam/components/Form/Career.vue
+++ b/src/modules/01_exam/components/Form/Career.vue
@@ -14,7 +14,7 @@
         :edit="clickEdit"
         :cancel="clickCancel"
         :addData="false"
-        :editData="step == 2"
+        :editData="status == 'register' || status == 'rejectRegister'"
         name="ประวัติการทำงาน/ฝึกงาน"
         icon="mdi-briefcase"
       >
@@ -168,7 +168,7 @@
           :validate="validateData"
           :clickNext="clickNext"
           :clickPrevious="clickPrevious"
-          :editData="step == 2"
+          :editData="status == 'register' || status == 'rejectRegister'"
           v-model:editvisible="edit"
           v-model:next="next"
           v-model:previous="previous"
@@ -185,21 +185,21 @@
 </template>
 <script setup lang="ts">
 import { onMounted, ref, watch } from 'vue'
-import Table from '@/components/Table.vue'
-import DialogHeader from '@/components/DialogHeader.vue'
-import DialogFooter from '@/components/DialogFooter.vue'
 import { useQuasar } from 'quasar'
 import { useCounterMixin } from '@/stores/mixin'
+import http from '@/plugins/http'
+import config from '@/app.config'
+import { useExamDataStore } from '@/modules/01_exam/store'
 import type {
   RequestItemsObject,
   Columns,
   DataProps
 } from '@/modules/01_exam/interface/request/Career'
 import type { ResponseObject } from '@/modules/01_exam/interface/response/Career'
-import http from '@/plugins/http'
-import config from '@/app.config'
+import Table from '@/components/Table.vue'
+import DialogHeader from '@/components/DialogHeader.vue'
+import DialogFooter from '@/components/DialogFooter.vue'
 import Conference from '@/modules/01_exam/components/Conference.vue'
-import { useExamDataStore } from '@/modules/01_exam/store'
 
 const props = defineProps({
   loader: {
@@ -207,8 +207,8 @@ const props = defineProps({
     type: Boolean,
     required: true
   },
-  step: {
-    type: Number,
+  status: {
+    type: String,
     required: true
   },
   statusEdit: {
@@ -242,13 +242,11 @@ const statusCode = ref<number>()
 const checkValidate = ref<boolean>(false) //validate data ผ่านหรือไม่
 const modalConsend = ref<boolean>(false)
 const candidateId = ref<string>('2223ba53-2fb2-470b-8dc1-27e5471b0331')
+const rows = ref<RequestItemsObject[]>([])
+const filter = ref<string>('') //search data table
 
 const emit = defineEmits(['update:loader', 'update:statusEdit'])
 
-const rows = ref<RequestItemsObject[]>([])
-
-const filter = ref<string>('') //search data table
-
 const visibleColumns = ref<String[]>([])
 
 examData.career.columns.length == 0
@@ -326,7 +324,7 @@ const fetchData = async () => {
     .then((res) => {
       const data = res.data.result
       rows.value = []
-      data.map((r: any) => {
+      data.map((r: ResponseObject) => {
         rows.value.push({
           ...r,
           location: r.name,
@@ -334,7 +332,7 @@ const fetchData = async () => {
         })
       })
     })
-    .catch((e: any) => {})
+    .catch(() => {})
     .finally(() => {
       loader.value = false
     })
@@ -344,7 +342,6 @@ const fetchData = async () => {
  * กดดูข้อมูลก่อนหน้า
  */
 const clickPrevious = () => {
-  //   edit.value = false
   rowIndex.value -= 1
   const row = rows.value[rowIndex.value]
   location.value = row.location
@@ -360,7 +357,6 @@ const clickPrevious = () => {
  * กดดูข้อมูลต่อไป
  */
 const clickNext = () => {
-  //   edit.value = false
   rowIndex.value += 1
   const row = rows.value[rowIndex.value]
   location.value = row.location
@@ -419,13 +415,14 @@ const clickDeleteRow = async () => {
       .then(() => {
         success($q, 'ลบข้อมูลสำเร็จ')
       })
-      .catch((e) => {
+      .catch(() => {
         //   modalError.value = true
         //   modalErrorTittle.value = 'ไม่สามารถบันทึกข้อมูลร่างได้'
         //   modalErrorDetail.value = e.response.data.message
-        statusCode.value = e.response.data.status
+        // statusCode.value = e.response.data.status
       })
       .finally(async () => {
+        loader.value = false
         await fetchData()
         edit.value = false
       })
@@ -458,8 +455,6 @@ const clickSave = async () => {
  * บันทึกเพิ่มข้อมูล
  */
 const saveData = async () => {
-  edit.value = false
-  modal.value = false
   loader.value = true
   await http
     .post(config.API.candidateCareer(candidateId.value), {
@@ -470,16 +465,18 @@ const saveData = async () => {
       durationEnd: dateToISO(new Date(duration.value[1])),
       reason: reason.value
     })
-    .then((res) => {
+    .then(() => {
       success($q, 'บันทึกข้อมูลสำเร็จ')
     })
-    .catch((e) => {
+    .catch(() => {
       //   modalError.value = true
       //   modalErrorTittle.value = 'ไม่สามารถบันทึกข้อมูลร่างได้'
       //   modalErrorDetail.value = e.response.data.message
-      statusCode.value = e.response.data.status
+      //   statusCode.value = e.response.data.status
     })
     .finally(async () => {
+      loader.value = false
+      edit.value = false
       modal.value = false
       await fetchData()
     })
@@ -489,8 +486,6 @@ const saveData = async () => {
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-  edit.value = false
-  modal.value = false
   loader.value = true
   await http
     .put(config.API.candidateCareer(id.value), {
@@ -501,17 +496,19 @@ const editData = async () => {
       durationEnd: dateToISO(new Date(duration.value[1])),
       reason: reason.value
     })
-    .then((res) => {
+    .then(() => {
       success($q, 'บันทึกข้อมูลสำเร็จ')
     })
-    .catch((e) => {
+    .catch(() => {
       //   modalError.value = true
       //   modalErrorTittle.value = 'ไม่สามารถบันทึกข้อมูลร่างได้'
       //   modalErrorDetail.value = e.response.data.message
-      statusCode.value = e.response.data.status
+      //   statusCode.value = e.response.data.status
     })
     .finally(async () => {
+      loader.value = false
       edit.value = false
+      modal.value = false
       await fetchData()
     })
 }
@@ -565,7 +562,6 @@ const selectData = (props: DataProps) => {
 const addRow = () => {
   modalEdit.value = false
   modal.value = true
-  //   edit.value = true
   location.value = ''
   position.value = ''
   salary.value = null
diff --git a/src/modules/01_exam/components/Form/Document.vue b/src/modules/01_exam/components/Form/Document.vue
index 2851afa..c07c407 100644
--- a/src/modules/01_exam/components/Form/Document.vue
+++ b/src/modules/01_exam/components/Form/Document.vue
@@ -9,7 +9,7 @@
         :addData="true"
         :editOnly="true"
         :cancel="cancelData"
-        :editData="step == 2"
+        :editData="status == 'register' || status == 'rejectRegister'"
       />
     </div>
     <div class="col-12">
@@ -94,8 +94,8 @@ const props = defineProps({
     type: Function,
     default: () => console.log('not function')
   },
-  step: {
-    type: Number,
+  status: {
+    type: String,
     required: true
   }
 })
diff --git a/src/modules/01_exam/components/Form/Education.vue b/src/modules/01_exam/components/Form/Education.vue
index 65b3203..9ee67e3 100644
--- a/src/modules/01_exam/components/Form/Education.vue
+++ b/src/modules/01_exam/components/Form/Education.vue
@@ -14,7 +14,7 @@
         :edit="clickEdit"
         :cancel="clickCancel"
         :addData="false"
-        :editData="step == 2"
+        :editData="status == 'register' || status == 'rejectRegister'"
         name="ประวัติการศีกษา"
         icon="mdi-school"
       >
@@ -169,7 +169,7 @@
           :validate="validateData"
           :clickNext="clickNext"
           :clickPrevious="clickPrevious"
-          :editData="step == 2"
+          :editData="status == 'register' || status == 'rejectRegister'"
           v-model:editvisible="edit"
           v-model:next="next"
           v-model:previous="previous"
@@ -186,22 +186,22 @@
 </template>
 <script setup lang="ts">
 import { onMounted, ref, watch } from 'vue'
-import Table from '@/components/Table.vue'
-import DialogHeader from '@/components/DialogHeader.vue'
-import DialogFooter from '@/components/DialogFooter.vue'
 import { useQuasar } from 'quasar'
 import { useCounterMixin } from '@/stores/mixin'
+import http from '@/plugins/http'
+import config from '@/app.config'
+import { useExamDataStore } from '@/modules/01_exam/store'
 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'
+import type { ResponseObject } from '@/modules/01_exam/interface/response/Education'
+import Table from '@/components/Table.vue'
+import DialogHeader from '@/components/DialogHeader.vue'
+import DialogFooter from '@/components/DialogFooter.vue'
 import Conference from '@/modules/01_exam/components/Conference.vue'
-import { useExamDataStore } from '@/modules/01_exam/store'
 
 const props = defineProps({
   loader: {
@@ -209,8 +209,8 @@ const props = defineProps({
     type: Boolean,
     required: true
   },
-  step: {
-    type: Number,
+  status: {
+    type: String,
     required: true
   },
   statusEdit: {
@@ -247,11 +247,10 @@ const checkValidate = ref<boolean>(false) //validate data ผ่านหรื
 const modalConsend = ref<boolean>(false)
 const rows = ref<RequestItemsObject[]>([])
 const candidateId = ref<string>('2223ba53-2fb2-470b-8dc1-27e5471b0331')
+const filter = ref<string>('') //search data table
 
 const emit = defineEmits(['update:loader', 'update:statusEdit'])
 
-const filter = ref<string>('') //search data table
-
 const visibleColumns = ref<String[]>([])
 
 examData.education.columns.length == 0
@@ -322,6 +321,7 @@ onMounted(async () => {
   await fetchData()
   await fetcheducationLevel()
 })
+
 const fetchData = async () => {
   loader.value = true
   await http
@@ -329,7 +329,7 @@ const fetchData = async () => {
     .then((res) => {
       const data = res.data.result
       rows.value = []
-      data.map((r: any) => {
+      data.map((r: ResponseObject) => {
         rows.value.push({
           ...r,
           educationLevelId: r.educationLevel.id,
@@ -338,14 +338,14 @@ const fetchData = async () => {
         })
       })
     })
-    .catch((e: any) => {})
+    .catch(() => {})
     .finally(() => {
       loader.value = false
     })
 }
 
 const fetcheducationLevel = async () => {
-  //   loader.value = true;
+  loader.value = true
   await http
     .get(config.API.educationLevel)
     .then((res) => {
@@ -356,9 +356,9 @@ const fetcheducationLevel = async () => {
       })
       educationLevelOptions.value = option
     })
-    .catch((e) => {})
+    .catch(() => {})
     .finally(() => {
-      //   loader.value = false;
+      loader.value = false
     })
 }
 
@@ -366,7 +366,6 @@ const fetcheducationLevel = async () => {
  * กดดูข้อมูลก่อนหน้า
  */
 const clickPrevious = () => {
-  //   edit.value = false
   rowIndex.value -= 1
   const row = rows.value[rowIndex.value]
   educationLevel.value = row.educationLevel
@@ -383,7 +382,6 @@ const clickPrevious = () => {
  * กดดูข้อมูลต่อไป
  */
 const clickNext = () => {
-  //   edit.value = false
   rowIndex.value += 1
   const row = rows.value[rowIndex.value]
   educationLevel.value = row.educationLevel
@@ -443,13 +441,14 @@ const clickDeleteRow = async () => {
       .then(() => {
         success($q, 'ลบข้อมูลสำเร็จ')
       })
-      .catch((e) => {
+      .catch(() => {
         //   modalError.value = true
         //   modalErrorTittle.value = 'ไม่สามารถบันทึกข้อมูลร่างได้'
         //   modalErrorDetail.value = e.response.data.message
-        statusCode.value = e.response.data.status
+        // statusCode.value = e.response.data.status
       })
       .finally(async () => {
+        loader.value = false
         await fetchData()
         edit.value = false
       })
@@ -492,16 +491,18 @@ const saveData = async () => {
       durationStart: dateToISO(new Date(duration.value[0])),
       durationEnd: dateToISO(new Date(duration.value[1]))
     })
-    .then((res) => {
+    .then(() => {
       success($q, 'บันทึกข้อมูลร่างสำเร็จ')
     })
-    .catch((e) => {
+    .catch(() => {
       //   modalError.value = true
       //   modalErrorTittle.value = 'ไม่สามารถบันทึกข้อมูลร่างได้'
       //   modalErrorDetail.value = e.response.data.message
-      statusCode.value = e.response.data.status
+      //   statusCode.value = e.response.data.status
     })
     .finally(async () => {
+      loader.value = false
+      edit.value = false
       modal.value = false
       await fetchData()
     })
@@ -521,17 +522,17 @@ const editData = async () => {
       durationStart: dateToISO(new Date(duration.value[0])),
       durationEnd: dateToISO(new Date(duration.value[1]))
     })
-    .then((res) => {
+    .then(() => {
       success($q, 'บันทึกข้อมูลร่างสำเร็จ')
     })
-    .catch((e) => {
+    .catch(() => {
       //   modalError.value = true
       //   modalErrorTittle.value = 'ไม่สามารถบันทึกข้อมูลร่างได้'
       //   modalErrorDetail.value = e.response.data.message
-      statusCode.value = e.response.data.status
+      //   statusCode.value = e.response.data.status
     })
     .finally(async () => {
-      edit.value = false
+      loader.value = false
       edit.value = false
       modal.value = false
       await fetchData()
@@ -588,7 +589,6 @@ const selectData = (props: DataProps) => {
 const addRow = () => {
   modalEdit.value = false
   modal.value = true
-  //   edit.value = true
   educationLevel.value = ''
   educationLevelId.value = ''
   major.value = ''
diff --git a/src/modules/01_exam/components/Form/Profile.vue b/src/modules/01_exam/components/Form/Profile.vue
index a54150b..b6f8fc9 100644
--- a/src/modules/01_exam/components/Form/Profile.vue
+++ b/src/modules/01_exam/components/Form/Profile.vue
@@ -2,35 +2,37 @@
 <template>
   <Information
     :prefixOptions="prefixOptions"
-    :genderOptions="genderOptions"
-    :bloodOptions="bloodOptions"
-    :statusOptions="statusOptions"
-    :religionOptions="religionOptions"
+    :relationshipOptions="relationshipOptions"
     :provinceOptions="provinceOptions"
     v-model:statusEdit="statusEdit"
     :notiNoEdit="notiNoEdit"
-    :step="step"
+    :status="status"
+  />
+  <Address
+    :provinceOptions="provinceOptions"
+    v-model:statusEdit="statusEdit"
+    :notiNoEdit="notiNoEdit"
+    :status="status"
   />
-  <Address v-model:statusEdit="statusEdit" :notiNoEdit="notiNoEdit" :step="step" />
   <Family
     :prefixOptions="prefixOptions"
     v-model:statusEdit="statusEdit"
     :notiNoEdit="notiNoEdit"
-    :step="step"
+    :status="status"
   />
-  <Occupation v-model:statusEdit="statusEdit" :notiNoEdit="notiNoEdit" :step="step" />
+  <Occupation v-model:statusEdit="statusEdit" :notiNoEdit="notiNoEdit" :status="status" />
 </template>
 <script setup lang="ts">
 import { ref, onMounted, watch } from 'vue'
+import { useQuasar } from 'quasar'
+import { useCounterMixin } from '@/stores/mixin'
+import http from '@/plugins/http'
+import config from '@/app.config'
 import type { DataOption } from '@/modules/01_exam/interface/index/Main'
 import Information from '@/modules/01_exam/components/Form/Profile/Information.vue'
 import Address from '@/modules/01_exam/components/Form/Profile/Address.vue'
 import Family from '@/modules/01_exam/components/Form/Profile/Family.vue'
 import Occupation from '@/modules/01_exam/components/Form/Profile/Occupation.vue'
-import http from '@/plugins/http'
-import config from '@/app.config'
-import { useQuasar } from 'quasar'
-import { useCounterMixin } from '@/stores/mixin'
 
 const props = defineProps({
   loader: {
@@ -42,8 +44,8 @@ const props = defineProps({
     type: Boolean,
     required: true
   },
-  step: {
-    type: Number,
+  status: {
+    type: String,
     required: true
   }
 })
@@ -54,10 +56,7 @@ const { modalError } = mixin
 const loader = ref<boolean>(true)
 const statusEdit = ref<boolean>(false)
 const prefixOptions = ref<DataOption[]>([])
-const bloodOptions = ref<DataOption[]>([])
-const genderOptions = ref<DataOption[]>([])
-const statusOptions = ref<DataOption[]>([])
-const religionOptions = ref<DataOption[]>([])
+const relationshipOptions = ref<DataOption[]>([])
 const provinceOptions = ref<DataOption[]>([])
 
 const emit = defineEmits(['update:loader', 'update:statusEdit'])
@@ -66,6 +65,68 @@ watch(statusEdit, (count: boolean, prevCount: boolean) => {
   emit('update:statusEdit', count)
 })
 
+onMounted(() => {
+  fetchPrefix()
+  fetchRelationship()
+  fetchProvince()
+})
+
+const fetchPrefix = async () => {
+  loader.value = true
+  await http
+    .get(config.API.prefix)
+    .then((res) => {
+      const data = res.data.result
+      let option: DataOption[] = []
+      data.map((r: any) => {
+        option.push({ id: r.id.toString(), name: r.name.toString() })
+      })
+      prefixOptions.value = option
+    })
+    .catch((e) => {})
+    .finally(() => {
+      loader.value = false
+    })
+}
+
+const fetchRelationship = async () => {
+  loader.value = true
+  await http
+    .get(config.API.relationship)
+    .then((res) => {
+      const data = res.data.result
+      let option: DataOption[] = []
+      //   console.log(data);
+      data.map((r: any) => {
+        option.push({ id: r.id.toString(), name: r.name.toString() })
+      })
+      relationshipOptions.value = option
+    })
+    .catch((e) => {})
+    .finally(() => {
+      loader.value = false
+    })
+}
+
+const fetchProvince = async () => {
+  loader.value = true
+  await http
+    .get(config.API.province)
+    .then((res) => {
+      const data = res.data.result
+      let option: DataOption[] = []
+      //   console.log(data);
+      data.map((r: any) => {
+        option.push({ id: r.id.toString(), name: r.name.toString() })
+      })
+      provinceOptions.value = option
+    })
+    .catch((e) => {})
+    .finally(() => {
+      loader.value = false
+    })
+}
+
 const notiNoEdit = () => {
   modalError($q, 'ไม่สามารถไม่สามารถแก้ไขข้อมูลได้', 'มีข้อมูลที่ยังไม่ถูกบันทึกข้อมูล')
 }
diff --git a/src/modules/01_exam/components/Form/Profile/Address.vue b/src/modules/01_exam/components/Form/Profile/Address.vue
index 09b9f52..fa0f9ac 100644
--- a/src/modules/01_exam/components/Form/Profile/Address.vue
+++ b/src/modules/01_exam/components/Form/Profile/Address.vue
@@ -10,7 +10,7 @@
       :editOnly="false"
       :cancel="cancelData"
       :changeBtn="changeBtn"
-      :editData="step == 2"
+      :editData="status == 'register' || status == 'rejectRegister'"
       :disable="statusEdit"
     />
     <q-form ref="myform">
@@ -227,35 +227,23 @@
   </q-dialog>
 </template>
 <script setup lang="ts">
-import { ref, onMounted, watch } from 'vue'
+import { ref, onMounted } from 'vue'
+import { useQuasar } from 'quasar'
 import { useCounterMixin } from '@/stores/mixin'
-
+import type { PropType } from 'vue'
 import http from '@/plugins/http'
 import config from '@/app.config'
-import type { Address, DataOption, zipCodeOption } from '@/modules/01_exam/interface/index/Main'
+import { useExamDataStore } from '@/modules/01_exam/store'
+import type { Address, DataOption } from '@/modules/01_exam/interface/index/Main'
 import { defaultAddress } from '@/modules/01_exam/interface/index/Main'
 import HeaderTop from '@/components/top.vue'
 import Conference from '@/modules/01_exam/components/Conference.vue'
-import { useExamDataStore } from '@/modules/01_exam/store'
-
-const mixin = useCounterMixin()
-const store = useExamDataStore()
-const { date2Thai, calAge } = mixin
-const candidateId = ref<string>('2223ba53-2fb2-470b-8dc1-27e5471b0331')
-const edit = ref<boolean>(false)
-const addressData = ref<Address>(defaultAddress)
-const myform = ref<any>()
-const codep = ref<string>('')
-const codec = ref<string>('')
-const modalConsend = ref<boolean>(false)
-
-const provinceOptions = ref<DataOption[]>([])
-const districtOptions = ref<DataOption[]>([])
-const districtCOptions = ref<DataOption[]>([])
-const subdistrictOptions = ref<zipCodeOption[]>([])
-const subdistrictCOptions = ref<zipCodeOption[]>([])
 
 const props = defineProps({
+  provinceOptions: {
+    type: Array as PropType<DataOption[]>,
+    required: true
+  },
   statusEdit: {
     type: Boolean,
     required: true
@@ -264,22 +252,37 @@ const props = defineProps({
     type: Function,
     default: () => console.log('not function')
   },
-  step: {
-    type: Number,
+  status: {
+    type: String,
     required: true
   }
 })
 
+const $q = useQuasar()
+const mixin = useCounterMixin()
+const store = useExamDataStore()
+const { success } = mixin
+const candidateId = ref<string>('2223ba53-2fb2-470b-8dc1-27e5471b0331')
+const edit = ref<boolean>(false)
+const addressData = ref<Address>(defaultAddress)
+const myform = ref<any>()
+const modalConsend = ref<boolean>(false)
+const loader = ref<boolean>(false)
+const districtOptions = ref<DataOption[]>([])
+const districtCOptions = ref<DataOption[]>([])
+const subdistrictOptions = ref<DataOption[]>([])
+const subdistrictCOptions = ref<DataOption[]>([])
+
 const emit = defineEmits(['update:statusEdit'])
 
 onMounted(async () => {
   await fetchData()
-  await fetchProvince()
   await fetchDistrict(addressData.value.provinceId, '1')
   await fetchDistrict(addressData.value.provinceIdC, '2')
   await fetchSubDistrict(addressData.value.districtId, '1')
   await fetchSubDistrict(addressData.value.districtIdC, '2')
 })
+
 const fetchData = async () => {
   await http
     .get(config.API.candidateAddress(candidateId.value))
@@ -296,51 +299,78 @@ const fetchData = async () => {
       addressData.value.code = data.registZipCode
       addressData.value.codeC = data.currentZipCode
       addressData.value.same = data.registSame == true ? '1' : '0'
-      //   informaData.value = data
     })
-    .catch((e: any) => {})
+    .catch(() => {})
     .finally(() => {
       //   loader.value = false;
     })
 }
 
 const saveData = async () => {
-  if (store.consend == true) {
-    edit.value = false
-    emit('update:statusEdit', false)
-  } else {
-    modalConsend.value = true
-  }
-}
-
-const changeBtn = async () => {
-  await myform.value.validate().then(async (success: boolean) => {
-    if (success) {
-      if (edit.value == true) {
-        if (props.statusEdit === true) {
-          edit.value = false
-          props.notiNoEdit()
-        } else {
-          emit('update:statusEdit', true)
-        }
+  await myform.value.validate().then(async (suc: boolean) => {
+    if (suc) {
+      if (store.consend == true) {
+        loader.value = true
+        await http
+          .post(config.API.candidateAddress(candidateId.value), {
+            registAddress: addressData.value.address,
+            currentAddress: addressData.value.addressC,
+            registProvinceId: addressData.value.provinceId,
+            currentProvinceId: addressData.value.provinceIdC,
+            registDistrictId: addressData.value.districtId,
+            currentDistrictId: addressData.value.districtIdC,
+            registSubDistrictId: addressData.value.subdistrictId,
+            currentSubDistrictId: addressData.value.subdistrictIdC,
+            registZipCode: addressData.value.code,
+            currentZipCode: addressData.value.codeC,
+            registSame:
+              addressData.value.same == '1' ? true : addressData.value.same == '0' ? false : null
+          })
+          .then(() => {
+            success($q, 'บันทึกข้อมูลที่อยู่สำเร็จ')
+            edit.value = false
+            emit('update:statusEdit', false)
+          })
+          .catch(() => {
+            //   modalError.value = true
+            //   modalErrorTittle.value = 'ไม่สามารถบันทึกข้อมูลร่างได้'
+            //   modalErrorDetail.value = e.response.data.message
+            // statusCode.value = e.response.data.status
+          })
+          .finally(async () => {
+            loader.value = false
+            await fetchData()
+          })
       } else {
-        emit('update:statusEdit', false)
+        modalConsend.value = true
       }
     }
   })
 }
 
+const changeBtn = async () => {
+  if (edit.value == true) {
+    if (props.statusEdit === true) {
+      edit.value = false
+      props.notiNoEdit()
+    } else {
+      emit('update:statusEdit', true)
+    }
+  } else {
+    emit('update:statusEdit', false)
+  }
+}
+
 const selectProvince = (e: string, name: string) => {
   if (name == '1') {
     addressData.value.districtId = ''
     addressData.value.subdistrictId = ''
-    codep.value = ''
+    addressData.value.code = null
   } else {
     addressData.value.districtIdC = ''
     addressData.value.subdistrictIdC = ''
-    codec.value = ''
+    addressData.value.codeC = null
   }
-
   myform.value.resetValidation()
   fetchDistrict(e, name)
 }
@@ -348,59 +378,36 @@ const selectProvince = (e: string, name: string) => {
 const selectDistrict = (e: string, name: string) => {
   if (name == '1') {
     addressData.value.subdistrictId = ''
-    codep.value = ''
+    addressData.value.code = null
   } else {
     addressData.value.subdistrictIdC = ''
-    codec.value = ''
+    addressData.value.codeC = null
   }
-
   myform.value.resetValidation()
   fetchSubDistrict(e, name)
 }
 
 const selectSubDistrict = (e: string, name: string) => {
+  console.log('zxc')
   if (name == '1') {
     const findcode = subdistrictOptions.value.filter((r) => r.id == e)
-    const namecode = findcode.length > 0 ? findcode[0].zipCode : ''
-    codep.value = namecode
+    const namecode = findcode.length > 0 ? findcode[0].zipCode : null
+    addressData.value.code = namecode
   } else {
     const findcode = subdistrictCOptions.value.filter((r) => r.id == e)
-    const namecode = findcode.length > 0 ? findcode[0].zipCode : ''
-    codec.value = namecode
+    const namecode = findcode.length > 0 ? findcode[0].zipCode : null
+    addressData.value.codeC = namecode
   }
-
-  //   myform.value.resetValidation();
-  //   fetchSubDistrict(e, name);
-}
-
-const fetchProvince = async () => {
-  //   loader.value = true;
-  await http
-    .get(config.API.province)
-    .then((res) => {
-      const data = res.data.result
-      let option: DataOption[] = []
-      //   console.log(data);
-      data.map((r: any) => {
-        option.push({ id: r.id.toString(), name: r.name.toString() })
-      })
-      provinceOptions.value = option
-    })
-    .catch((e: any) => {})
-    .finally(() => {
-      //   loader.value = false;
-    })
 }
 
 const fetchDistrict = async (id: string, position: string) => {
-  //   loader.value = true;
+  loader.value = true
   await http
     .get(config.API.listDistrict(id))
     .then((res) => {
       const data = res.data.result
       let option: DataOption[] = []
-      //   console.log(data);
-      data.map((r: any) => {
+      data.map((r: DataOption) => {
         option.push({ id: r.id.toString(), name: r.name.toString() })
       })
       if (position == '1') {
@@ -409,25 +416,24 @@ const fetchDistrict = async (id: string, position: string) => {
         districtCOptions.value = option
       }
     })
-    .catch((e: any) => {})
+    .catch(() => {})
     .finally(() => {
-      //   loader.value = false;
+      loader.value = false
     })
 }
 
 const fetchSubDistrict = async (id: string, position: string) => {
-  //   loader.value = true;
+  loader.value = true
   await http
     .get(config.API.listSubDistrict(id))
     .then((res) => {
       const data = res.data.result
-      let option: zipCodeOption[] = []
-      //   console.log(res);
-      data.map((r: any) => {
+      let option: DataOption[] = []
+      data.map((r: DataOption) => {
         option.push({
           id: r.id.toString(),
           name: r.name.toString(),
-          zipCode: r.zipCode.toString()
+          zipCode: r.zipCode != null ? r.zipCode : null
         })
       })
       if (position == '1') {
@@ -436,9 +442,9 @@ const fetchSubDistrict = async (id: string, position: string) => {
         subdistrictCOptions.value = option
       }
     })
-    .catch((e: any) => {})
+    .catch(() => {})
     .finally(() => {
-      //   loader.value = false;
+      loader.value = false
     })
 }
 
diff --git a/src/modules/01_exam/components/Form/Profile/Family.vue b/src/modules/01_exam/components/Form/Profile/Family.vue
index 8c969a6..ef1fc23 100644
--- a/src/modules/01_exam/components/Form/Profile/Family.vue
+++ b/src/modules/01_exam/components/Form/Profile/Family.vue
@@ -10,7 +10,7 @@
       :editOnly="false"
       :cancel="cancelData"
       :changeBtn="changeBtn"
-      :editData="step == 2"
+      :editData="status == 'register' || status == 'rejectRegister'"
       :disable="statusEdit"
     />
     <q-form ref="myform" class="col-12">
@@ -52,7 +52,7 @@
             emit-value
             map-options
             option-label="name"
-            :options="prefixRelationOptions"
+            :options="prefixOptions"
             option-value="id"
             :label="`${'คำนำหน้า'}`"
           />
@@ -130,7 +130,7 @@
             emit-value
             map-options
             option-label="name"
-            :options="prefixDadOptions"
+            :options="prefixOptions"
             option-value="id"
             :label="`${'คำนำหน้า'}`"
           />
@@ -208,7 +208,7 @@
             emit-value
             map-options
             option-label="name"
-            :options="prefixMomOptions"
+            :options="prefixOptions"
             option-value="id"
             :label="`${'คำนำหน้า'}`"
           />
@@ -280,37 +280,16 @@
 </template>
 <script setup lang="ts">
 import { onMounted, ref, watch } from 'vue'
-import type { PropType } from 'vue'
 import { useQuasar } from 'quasar'
 import { useCounterMixin } from '@/stores/mixin'
+import type { PropType } from 'vue'
+import http from '@/plugins/http'
+import config from '@/app.config'
+import { useExamDataStore } from '@/modules/01_exam/store'
 import type { Family, DataOption } from '@/modules/01_exam/interface/index/Main'
 import { defaultFamily } from '@/modules/01_exam/interface/index/Main'
 import HeaderTop from '@/components/top.vue'
 import Conference from '@/modules/01_exam/components/Conference.vue'
-import { useExamDataStore } from '@/modules/01_exam/store'
-import http from '@/plugins/http'
-import config from '@/app.config'
-
-const $q = useQuasar()
-const mixin = useCounterMixin()
-const store = useExamDataStore()
-const { date2Thai, calAge, success } = mixin
-const prefixDadOptions = ref<DataOption[]>([])
-const prefixMomOptions = ref<DataOption[]>([])
-const prefixRelationOptions = ref<DataOption[]>([])
-const edit = ref<boolean>(false)
-const myform = ref<any>()
-const familyData = ref<Family>(defaultFamily)
-const statusOptions = ref<DataOption[]>([])
-const modalConsend = ref<boolean>(false)
-const candidateId = ref<string>('2223ba53-2fb2-470b-8dc1-27e5471b0331')
-const loader = ref<boolean>(false)
-
-// const prefixOptions = ref<any>([
-//   { id: "1", name: "นาย" },
-//   { id: "2", name: "นาง" },
-//   { id: "3", name: "นางสาว" },
-// ]);
 
 const props = defineProps({
   prefixOptions: {
@@ -325,20 +304,29 @@ const props = defineProps({
     type: Function,
     default: () => console.log('not function')
   },
-  step: {
-    type: Number,
+  status: {
+    type: String,
     required: true
   }
 })
 
+const $q = useQuasar()
+const mixin = useCounterMixin()
+const store = useExamDataStore()
+const { success } = mixin
+const edit = ref<boolean>(false)
+const myform = ref<any>()
+const familyData = ref<Family>(defaultFamily)
+const modalConsend = ref<boolean>(false)
+const candidateId = ref<string>('2223ba53-2fb2-470b-8dc1-27e5471b0331')
+const loader = ref<boolean>(false)
+
 const emit = defineEmits(['update:statusEdit'])
 
 onMounted(async () => {
   await fetchData()
-  await fetchprefixMom()
-  await fetchprefixDad()
-  await fetchprefixRelation()
 })
+
 const fetchData = async () => {
   loader.value = true
   await http
@@ -362,69 +350,15 @@ const fetchData = async () => {
       familyData.value.nationalityF = data.motherNationality
       familyData.value.same = data.marry == true ? '1' : data.marry == false ? '0' : null
     })
-    .catch((e: any) => {})
+    .catch(() => {})
     .finally(() => {
       loader.value = false
     })
 }
 
-const fetchprefixMom = async () => {
-  //   loader.value = true;
-  await http
-    .get(config.API.prefix)
-    .then((res) => {
-      const data = res.data.result
-      let option: DataOption[] = []
-      data.map((r: DataOption) => {
-        option.push({ id: r.id.toString(), name: r.name.toString() })
-      })
-      prefixMomOptions.value = option
-    })
-    .catch((e) => {})
-    .finally(() => {
-      //   loader.value = false;
-    })
-}
-
-const fetchprefixDad = async () => {
-  //   loader.value = true;
-  await http
-    .get(config.API.prefix)
-    .then((res) => {
-      const data = res.data.result
-      let option: DataOption[] = []
-      data.map((r: DataOption) => {
-        option.push({ id: r.id.toString(), name: r.name.toString() })
-      })
-      prefixDadOptions.value = option
-    })
-    .catch((e) => {})
-    .finally(() => {
-      //   loader.value = false;
-    })
-}
-
-const fetchprefixRelation = async () => {
-  //   loader.value = true;
-  await http
-    .get(config.API.prefix)
-    .then((res) => {
-      const data = res.data.result
-      let option: DataOption[] = []
-      data.map((r: DataOption) => {
-        option.push({ id: r.id.toString(), name: r.name.toString() })
-      })
-      prefixRelationOptions.value = option
-    })
-    .catch((e) => {})
-    .finally(() => {
-      //   loader.value = false;
-    })
-}
-
 const saveData = async () => {
-  await myform.value.validate().then(async (success: boolean) => {
-    if (success) {
+  await myform.value.validate().then(async (suc: boolean) => {
+    if (suc) {
       if (store.consend == true) {
         loader.value = true
         await http
@@ -446,18 +380,19 @@ const saveData = async () => {
             motherNationality: familyData.value.nationalityF,
             marry: familyData.value.same == '1' ? true : familyData.value.same == '0' ? false : null
           })
-          .then((res) => {
+          .then(() => {
             success($q, 'บันทึกข้อมูลครอบครัวสำเร็จ')
             edit.value = false
             emit('update:statusEdit', false)
           })
-          .catch((e) => {
+          .catch(() => {
             //   modalError.value = true
             //   modalErrorTittle.value = 'ไม่สามารถบันทึกข้อมูลร่างได้'
             //   modalErrorDetail.value = e.response.data.message
             // statusCode.value = e.response.data.status
           })
           .finally(async () => {
+            loader.value = false
             await fetchData()
           })
       } else {
@@ -480,7 +415,7 @@ const changeBtn = async () => {
   }
 }
 
-const selectRadio = (e: boolean, i: any) => {
+const selectRadio = (e: boolean) => {
   if (!e) {
     familyData.value.prefixIdC = ''
     familyData.value.firstnameC = ''
diff --git a/src/modules/01_exam/components/Form/Profile/Information.vue b/src/modules/01_exam/components/Form/Profile/Information.vue
index 086858c..698cf7d 100644
--- a/src/modules/01_exam/components/Form/Profile/Information.vue
+++ b/src/modules/01_exam/components/Form/Profile/Information.vue
@@ -10,7 +10,7 @@
       :editOnly="false"
       :cancel="cancelData"
       :changeBtn="changeBtn"
-      :editData="step == 2"
+      :editData="status == 'register' || status == 'rejectRegister'"
       :disable="statusEdit"
     />
     <q-form ref="myform" class="col-12 row">
@@ -25,7 +25,7 @@
             :outlined="edit"
             dense
             lazy-rules
-            v-model="informaData.prefix"
+            v-model="informaData.prefixId"
             emit-value
             map-options
             option-label="name"
@@ -358,53 +358,24 @@
   </q-dialog>
 </template>
 <script setup lang="ts">
-import { ref, onMounted, watch } from 'vue'
+import { ref, onMounted } from 'vue'
+import { useQuasar } from 'quasar'
 import { useCounterMixin } from '@/stores/mixin'
-import type { PropType } from 'vue'
-import { Information, DataOption } from '@/modules/01_exam/interface/index/Main'
-import { defaultInformation } from '@/modules/01_exam/interface/index/Main'
-import HeaderTop from '@/components/top.vue'
 import http from '@/plugins/http'
 import config from '@/app.config'
-import type { file } from '@babel/types'
-import Conference from '@/modules/01_exam/components/Conference.vue'
 import { useExamDataStore } from '@/modules/01_exam/store'
+import type { PropType } from 'vue'
+import type { Information, DataOption } from '@/modules/01_exam/interface/index/Main'
+import { defaultInformation } from '@/modules/01_exam/interface/index/Main'
+import HeaderTop from '@/components/top.vue'
+import Conference from '@/modules/01_exam/components/Conference.vue'
 
-const mixin = useCounterMixin()
-const store = useExamDataStore()
-const { date2Thai, calAge } = mixin
-const prefixOptions = ref<DataOption[]>([])
-const relationshipOptions = ref<DataOption[]>([])
-const districtOptions = ref<DataOption[]>([])
-
-const candidateId = ref<string>('2223ba53-2fb2-470b-8dc1-27e5471b0331')
-
-const edit = ref<boolean>(false)
-const informaData = ref<Information>(defaultInformation)
-const provinceOptions = ref<DataOption[]>([])
-const myform = ref<any>()
-const imageUrl = ref<string | null>(null)
-const disabledPic = ref<boolean>(false)
-const modalConsend = ref<boolean>(false)
-const fileData = ref<File | null>()
 const props = defineProps({
   prefixOptions: {
     type: Array as PropType<DataOption[]>,
     required: true
   },
-  genderOptions: {
-    type: Array as PropType<DataOption[]>,
-    required: true
-  },
-  bloodOptions: {
-    type: Array as PropType<DataOption[]>,
-    required: true
-  },
-  statusOptions: {
-    type: Array as PropType<DataOption[]>,
-    required: true
-  },
-  religionOptions: {
+  relationshipOptions: {
     type: Array as PropType<DataOption[]>,
     required: true
   },
@@ -420,32 +391,46 @@ const props = defineProps({
     type: Function,
     default: () => console.log('not function')
   },
-  step: {
-    type: Number,
+  status: {
+    type: String,
     required: true
   }
 })
 
+const $q = useQuasar()
+const mixin = useCounterMixin()
+const store = useExamDataStore()
+const { date2Thai, calAge, success, dateToISO } = mixin
+const districtOptions = ref<DataOption[]>([])
+const candidateId = ref<string>('2223ba53-2fb2-470b-8dc1-27e5471b0331')
+const edit = ref<boolean>(false)
+const informaData = ref<Information>(defaultInformation)
+const myform = ref<any>()
+const imageUrl = ref<string | null>(null)
+const disabledPic = ref<boolean>(false)
+const modalConsend = ref<boolean>(false)
+const fileData = ref<File | null>()
+const loader = ref<boolean>(false)
+
 const emit = defineEmits(['update:statusEdit'])
 
 onMounted(async () => {
   await fetchData()
-  await fetchprefix()
-  await fetchrelationship()
-  await fetchProvince()
   await fetchDistrict(informaData.value.provinceId)
 })
+
 const fetchData = async () => {
+  loader.value = true
   await http
     .get(config.API.candidateInformation(candidateId.value))
     .then((res) => {
       const data = res.data.result
-      informaData.value.prefix = data.prefixId
+      informaData.value.prefixId = data.prefixId
       informaData.value.lastname = data.lastName
       informaData.value.provinceId = data.citizenProvinceId
       informaData.value.districtId = data.citizenDistrictId
       informaData.value.birthDate = new Date(data.dateOfBirth)
-      informaData.value.cardIdDate = new Date(data.dateOfBirth)
+      informaData.value.cardIdDate = new Date(data.citizenDate)
       informaData.value.cardid = data.citizenId
       informaData.value.firstname = data.firstName
       informaData.value.relationship = data.relationshipId
@@ -454,119 +439,94 @@ const fetchData = async () => {
       informaData.value.phone = data.mobilePhone
       informaData.value.tel = data.telephone
       informaData.value.knowledge = data.knowledge
-
-      //   informaData.value = data
     })
-    .catch((e: any) => {})
+    .catch(() => {})
     .finally(() => {
-      //   loader.value = false;
+      loader.value = false
     })
 }
-const selectProvince = (e: string) => {
-  informaData.value.districtId = ''
 
+const selectProvince = (val: string) => {
+  informaData.value.districtId = ''
   myform.value.resetValidation()
-  fetchDistrict(e)
+  fetchDistrict(val)
 }
 
 const saveData = async () => {
-  if (store.consend == true) {
-    edit.value = false
-    emit('update:statusEdit', false)
-  } else {
-    modalConsend.value = true
-  }
-}
-
-const changeBtn = async () => {
-  await myform.value.validate().then(async (success: boolean) => {
-    if (success) {
-      if (edit.value == true) {
-        if (props.statusEdit === true) {
-          edit.value = false
-          props.notiNoEdit()
-        } else {
-          emit('update:statusEdit', true)
-        }
+  await myform.value.validate().then(async (suc: boolean) => {
+    if (suc) {
+      if (store.consend == true) {
+        loader.value = true
+        await http
+          .post(config.API.candidateInformation(candidateId.value), {
+            prefixId: informaData.value.prefixId,
+            lastName: informaData.value.lastname,
+            citizenProvinceId: informaData.value.provinceId,
+            citizenDistrictId: informaData.value.districtId,
+            dateOfBirth: dateToISO(informaData.value.birthDate),
+            citizenDate: dateToISO(informaData.value.cardIdDate),
+            citizenId: informaData.value.cardid,
+            firstName: informaData.value.firstname,
+            relationshipId: informaData.value.relationship,
+            nationality: informaData.value.nationality,
+            email: informaData.value.email,
+            mobilePhone: informaData.value.phone,
+            telephone: informaData.value.tel,
+            knowledge: informaData.value.knowledge
+          })
+          .then(() => {
+            success($q, 'บันทึกข้อมูลส่วนตัวสำเร็จ')
+            edit.value = false
+            emit('update:statusEdit', false)
+          })
+          .catch(() => {
+            //   modalError.value = true
+            //   modalErrorTittle.value = 'ไม่สามารถบันทึกข้อมูลร่างได้'
+            //   modalErrorDetail.value = e.response.data.message
+            // statusCode.value = e.response.data.status
+          })
+          .finally(async () => {
+            loader.value = false
+            await fetchData()
+          })
       } else {
-        emit('update:statusEdit', false)
+        modalConsend.value = true
       }
     }
   })
 }
 
+const changeBtn = async () => {
+  if (edit.value == true) {
+    if (props.statusEdit === true) {
+      edit.value = false
+      props.notiNoEdit()
+    } else {
+      emit('update:statusEdit', true)
+    }
+  } else {
+    emit('update:statusEdit', false)
+  }
+}
+
 const fetchDistrict = async (id: string) => {
-  //   loader.value = true;
+  loader.value = true
   await http
     .get(config.API.listDistrict(id))
     .then((res) => {
       const data = res.data.result
       let option: DataOption[] = []
-      //   console.log(data);
-      data.map((r: any) => {
+      data.map((r: DataOption) => {
         option.push({ id: r.id.toString(), name: r.name.toString() })
       })
       districtOptions.value = option
     })
-    .catch((e: any) => {})
+    .catch(() => {})
     .finally(() => {
-      //   loader.value = false;
+      loader.value = false
     })
 }
 
-const fetchProvince = async () => {
-  //   loader.value = true;
-  await http
-    .get(config.API.province)
-    .then((res) => {
-      const data = res.data.result
-      let option: DataOption[] = []
-      //   console.log(data);
-      data.map((r: any) => {
-        option.push({ id: r.id.toString(), name: r.name.toString() })
-      })
-      provinceOptions.value = option
-    })
-    .catch((e: any) => {})
-    .finally(() => {
-      //   loader.value = false;
-    })
-}
-const fetchprefix = async () => {
-  //   loader.value = true;
-  await http
-    .get(config.API.prefix)
-    .then((res) => {
-      const data = res.data.result
-      let option: DataOption[] = []
-      data.map((r: DataOption) => {
-        option.push({ id: r.id.toString(), name: r.name.toString() })
-      })
-      prefixOptions.value = option
-    })
-    .catch((e) => {})
-    .finally(() => {
-      //   loader.value = false;
-    })
-}
-
-const fetchrelationship = async () => {
-  //   loader.value = true;
-  await http
-    .get(config.API.relationship)
-    .then((res) => {
-      const data = res.data.result
-      let option: DataOption[] = []
-      data.map((r: DataOption) => {
-        option.push({ id: r.id.toString(), name: r.name.toString() })
-      })
-      relationshipOptions.value = option
-    })
-    .catch((e) => {})
-    .finally(() => {
-      //   loader.value = false;
-    })
-}
 const savePic = () => {
   disabledPic.value = false
 }
diff --git a/src/modules/01_exam/components/Form/Profile/Occupation.vue b/src/modules/01_exam/components/Form/Profile/Occupation.vue
index c48f67b..a4dadcd 100644
--- a/src/modules/01_exam/components/Form/Profile/Occupation.vue
+++ b/src/modules/01_exam/components/Form/Profile/Occupation.vue
@@ -10,7 +10,7 @@
       :editOnly="false"
       :cancel="cancelData"
       :changeBtn="changeBtn"
-      :editData="step == 2"
+      :editData="status == 'register' || status == 'rejectRegister'"
       :disable="statusEdit"
     />
     <q-form ref="myform">
@@ -237,22 +237,16 @@
   </q-dialog>
 </template>
 <script setup lang="ts">
-import { ref, onMounted, watch } from 'vue'
-
+import { ref, onMounted } from 'vue'
+import { useQuasar } from 'quasar'
+import { useCounterMixin } from '@/stores/mixin'
 import http from '@/plugins/http'
 import config from '@/app.config'
+import { useExamDataStore } from '@/modules/01_exam/store'
 import type { Occupation } from '@/modules/01_exam/interface/index/Main'
 import { defaultOccupation } from '@/modules/01_exam/interface/index/Main'
 import HeaderTop from '@/components/top.vue'
 import Conference from '@/modules/01_exam/components/Conference.vue'
-import { useExamDataStore } from '@/modules/01_exam/store'
-
-const store = useExamDataStore()
-
-const edit = ref<boolean>(false)
-const occupationData = ref<Occupation>(defaultOccupation)
-const myform = ref<any>()
-const modalConsend = ref<boolean>(false)
 
 const props = defineProps({
   statusEdit: {
@@ -263,42 +257,112 @@ const props = defineProps({
     type: Function,
     default: () => console.log('not function')
   },
-  step: {
-    type: Number,
+  status: {
+    type: String,
     required: true
   }
 })
 
+const $q = useQuasar()
+const mixin = useCounterMixin()
+const store = useExamDataStore()
+const { success } = mixin
+const edit = ref<boolean>(false)
+const occupationData = ref<Occupation>(defaultOccupation)
+const myform = ref<any>()
+const modalConsend = ref<boolean>(false)
+const loader = ref<boolean>(false)
+const candidateId = ref<string>('2223ba53-2fb2-470b-8dc1-27e5471b0331')
+
 const emit = defineEmits(['update:statusEdit'])
 
-onMounted(() => {})
+onMounted(async () => {
+  await fetchData()
+})
 
-const saveData = async () => {
-  if (store.consend == true) {
-    edit.value = false
-    emit('update:statusEdit', false)
-  } else {
-    modalConsend.value = true
-  }
+const fetchData = async () => {
+  loader.value = true
+  await http
+    .get(config.API.candidateOccupation(candidateId.value))
+    .then((res) => {
+      const data = res.data.result
+      occupationData.value.status = data.occupationType
+      occupationData.value.company = data.occupationCompany
+      occupationData.value.department = data.occupationDepartment
+      occupationData.value.email = data.occupationEmail
+      occupationData.value.tel = data.occupationTelephone
+      occupationData.value.official =
+        data.occupationType == 'official' ? data.occupationPosition : null
+      occupationData.value.personnel =
+        data.occupationType == 'personnel' ? data.occupationPosition : null
+      occupationData.value.officialsOther =
+        data.occupationType == 'officialsOther' ? data.occupationPosition : null
+      occupationData.value.employee =
+        data.occupationType == 'employee' ? data.occupationPosition : null
+      occupationData.value.other = data.occupationType == 'other' ? data.occupationPosition : null
+    })
+    .catch(() => {})
+    .finally(() => {
+      loader.value = false
+    })
 }
 
-const changeBtn = async () => {
-  await myform.value.validate().then(async (success: boolean) => {
-    if (success) {
-      if (edit.value == true) {
-        if (props.statusEdit === true) {
-          edit.value = false
-          props.notiNoEdit()
-        } else {
-          emit('update:statusEdit', true)
-        }
+const saveData = async () => {
+  await myform.value.validate().then(async (suc: boolean) => {
+    if (suc) {
+      if (store.consend == true) {
+        const type = ref<string | null>('')
+        if (occupationData.value.status == 'official') type.value = occupationData.value.official
+        if (occupationData.value.status == 'personnel') type.value = occupationData.value.personnel
+        if (occupationData.value.status == 'officialsOther')
+          type.value = occupationData.value.officialsOther
+        if (occupationData.value.status == 'employee') type.value = occupationData.value.employee
+        if (occupationData.value.status == 'other') type.value = occupationData.value.other
+        loader.value = true
+        await http
+          .post(config.API.candidateOccupation(candidateId.value), {
+            occupationType: occupationData.value.status,
+            occupationCompany: occupationData.value.company,
+            occupationDepartment: occupationData.value.department,
+            occupationEmail: occupationData.value.email,
+            occupationTelephone: occupationData.value.tel,
+            occupationPosition: type.value
+          })
+          .then(() => {
+            success($q, 'บันทึกข้อมูลอาชีพสำเร็จ')
+            edit.value = false
+            emit('update:statusEdit', false)
+          })
+          .catch(() => {
+            //   modalError.value = true
+            //   modalErrorTittle.value = 'ไม่สามารถบันทึกข้อมูลร่างได้'
+            //   modalErrorDetail.value = e.response.data.message
+            // statusCode.value = e.response.data.status
+          })
+          .finally(async () => {
+            loader.value = false
+            await fetchData()
+          })
       } else {
-        emit('update:statusEdit', false)
+        modalConsend.value = true
       }
     }
   })
 }
 
+const changeBtn = async () => {
+  if (edit.value == true) {
+    if (props.statusEdit === true) {
+      edit.value = false
+      props.notiNoEdit()
+    } else {
+      emit('update:statusEdit', true)
+    }
+  } else {
+    emit('update:statusEdit', false)
+  }
+}
+
 const consenClose = () => {
   modalConsend.value = false
 }
diff --git a/src/modules/01_exam/interface/index/Main.ts b/src/modules/01_exam/interface/index/Main.ts
index 0eb8afa..d437b91 100644
--- a/src/modules/01_exam/interface/index/Main.ts
+++ b/src/modules/01_exam/interface/index/Main.ts
@@ -77,25 +77,25 @@ interface Address {
   provinceId: string
   districtId: string
   subdistrictId: string
-  code: number
+  code?: number | null
   addressC: string
   provinceIdC: string
   districtIdC: string
   subdistrictIdC: string
-  codeC: number
+  codeC?: number | null
   same: string
 }
 
 interface DataOption {
   id: string
   name: string
-  zipCode?: string
+  zipCode?: number | null
 }
 
 interface zipCodeOption {
   id: string
   name: string
-  zipCode: string
+  zipCode: string | null
 }
 
 interface ExamCard {
diff --git a/src/modules/01_exam/interface/response/Career.ts b/src/modules/01_exam/interface/response/Career.ts
index f8b1f39..766c954 100644
--- a/src/modules/01_exam/interface/response/Career.ts
+++ b/src/modules/01_exam/interface/response/Career.ts
@@ -1,10 +1,11 @@
 //ข้อมูล
 interface ResponseObject {
   id: string
-  location: string
+  name: string
   position: string
   salary: number | null
-  duration: [Date, Date]
+  durationStart: Date
+  durationEnd: Date
   reason: string
 }
 
diff --git a/src/modules/01_exam/interface/response/Education.ts b/src/modules/01_exam/interface/response/Education.ts
index ed0fa20..0236497 100644
--- a/src/modules/01_exam/interface/response/Education.ts
+++ b/src/modules/01_exam/interface/response/Education.ts
@@ -1,12 +1,15 @@
 //ข้อมูล
 interface ResponseObject {
   id: string
-  qualificationId: string
-  qualification: string
+  educationLevel: {
+    id: string
+    name: string
+  }
   major: string
   scores: number | null
   name: string
-  duration: [Date, Date]
+  durationStart: Date
+  durationEnd: Date
 }
 
 export type { ResponseObject }
diff --git a/src/modules/01_exam/views/ExamDetail.vue b/src/modules/01_exam/views/ExamDetail.vue
index 347d7f9..7c51405 100644
--- a/src/modules/01_exam/views/ExamDetail.vue
+++ b/src/modules/01_exam/views/ExamDetail.vue
@@ -31,7 +31,7 @@
             stepRaw >= 1 ? (stepRaw == 1 ? 'mdi-pencil' : 'mdi-check-bold') : 'mdi-pencil'
           "
         >
-          <ExamDetail :fetchStep="fetchStep" :step="stepRaw" />
+          <ExamDetail :fetchStep="fetchStep" :status="status" />
         </q-step> -->
         <q-step
           :done="step > 2"
@@ -40,7 +40,7 @@
           title="ข้อมูลสมัครสอบ"
           :icon="stepRaw >= 2 ? (stepRaw == 2 ? 'mdi-pencil' : 'mdi-check-bold') : 'mdi-pencil'"
         >
-          <ExamForm :fetchStep="fetchStep" :step="stepRaw" />
+          <ExamForm :fetchStep="fetchStep" :status="status" />
         </q-step>
         <q-step
           :done="step > 3"
@@ -49,7 +49,7 @@
           title="ชำระค่าธรรมเนียมการสอบ"
           :icon="stepRaw >= 3 ? (stepRaw == 3 ? 'mdi-pencil' : 'mdi-check-bold') : 'mdi-pencil'"
         >
-          <ExamPayment :fetchStep="fetchStep" :step="stepRaw" />
+          <ExamPayment :fetchStep="fetchStep" :status="status" />
         </q-step>
         <q-step
           :done="step > 4"
@@ -58,7 +58,7 @@
           title="สำเร็จ"
           :icon="stepRaw >= 4 ? 'mdi-check-bold' : 'mdi-pencil'"
         >
-          <ExamFinished :fetchStep="fetchStep" :step="stepRaw" />
+          <ExamFinished :fetchStep="fetchStep" :status="status" />
         </q-step>
       </q-stepper>
     </div>
@@ -67,38 +67,36 @@
 
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
-import ExamDetail from '@/modules/01_exam/components/ExamDetail.vue'
+import { useQuasar } from 'quasar'
+import { useExamDataStore } from '@/modules/01_exam/store'
+import keycloak from '@/plugins/keycloak'
+import http from '@/plugins/http'
+import config from '@/app.config'
 import ExamForm from '@/modules/01_exam/components/ExamForm.vue'
 import ExamPayment from '@/modules/01_exam/components/ExamPayment.vue'
 import ExamFinished from '@/modules/01_exam/components/ExamFinished.vue'
-import keycloak from '@/plugins/keycloak'
-import { useQuasar } from 'quasar'
-import { useExamDataStore } from '@/modules/01_exam/store'
-import http from '@/plugins/http'
-import config from '@/app.config'
 
 const $q = useQuasar()
 const store = useExamDataStore()
-const examId = ref<string>('zxc')
-const step = ref<number>(2)
-const stepRaw = ref<number>(2)
-const examPost = ref<any>()
+const step = ref<number>(1)
+const stepRaw = ref<number>(1)
 const tittle = ref<string>('การสอบภาค ข. พิเศษ สำหรับผู้สอบผ่านของส่วนราชการแล้ว ทดสอบ')
 const candidateId = ref<string>('2223ba53-2fb2-470b-8dc1-27e5471b0331')
 const loader = ref<boolean>(false)
+const status = ref<string>('')
 
-onMounted(() => {
-  candidateCheck()
-  fetchExams()
+onMounted(async () => {
+  await candidateCheck()
 })
 
 const candidateCheck = async () => {
   loader.value = true
   await http
     .get(config.API.candidateCheckCreate(candidateId.value))
-    .then((res) => {
+    .then(async (res) => {
       const data = res.data.result
       store.consend = data
+      if (store.consend == true) await fetchStep()
     })
     .catch(() => {})
     .finally(() => {
@@ -106,26 +104,43 @@ const candidateCheck = async () => {
     })
 }
 
-const fetchExams = () => {
-  //   const headers = { 'Content-Type': 'application/graphql' }
-  //   this.loading = true
-  //   this.$http
-  //     .post(
-  //       this.$config.API.getOrchardPath(),
-  //       this.$config.API.getExamPostsForExamDetailQuery(this.$route.params.examId),
-  //       { headers }
-  //     )
-  //     .then((response) => {
-  //       this.examPost = response.data.data.examPost[0]
-  //       this.test = this.examPost.bag.contentItems
-  //     })
-  //     .catch((err) => console.log(err))
-  //     .finally(() => (this.loading = false))
-}
-
-const fetchStep = () => {
-  stepRaw.value += 1
-  step.value += 1
+const fetchStep = async () => {
+  loader.value = true
+  await http
+    .get(config.API.candidateStatus(candidateId.value))
+    .then((res) => {
+      const data = res.data.result
+      status.value = data
+      if (data == 'register') {
+        stepRaw.value = 2
+        step.value = 2
+      } else if (data == 'checkRegister') {
+        stepRaw.value = 3
+        step.value = 3
+      } else if (data == 'payment') {
+        stepRaw.value = 3
+        step.value = 3
+      } else if (data == 'rejectRegister') {
+        stepRaw.value = 2
+        step.value = 2
+      } else if (data == 'checkPayment') {
+        stepRaw.value = 3
+        step.value = 3
+      } else if (data == 'rejectPayment') {
+        stepRaw.value = 3
+        step.value = 3
+      } else if (data == 'checkSeat') {
+        stepRaw.value = 4
+        step.value = 4
+      } else if (data == 'done') {
+        stepRaw.value = 4
+        step.value = 4
+      }
+    })
+    .catch(() => {})
+    .finally(() => {
+      loader.value = false
+    })
 }
 
 /**