diff --git a/entrypoint.sh b/entrypoint.sh
index 38b8d06..cc1ae84 100644
--- a/entrypoint.sh
+++ b/entrypoint.sh
@@ -14,3 +14,4 @@ done
 
 echo "Starting Nginx"
 nginx -g 'daemon off;'
+
diff --git a/src/modules/01_exam/components/Form/Contact.vue b/src/modules/01_exam/components/Form/Contact.vue
index f71beff..a8e8cfc 100644
--- a/src/modules/01_exam/components/Form/Contact.vue
+++ b/src/modules/01_exam/components/Form/Contact.vue
@@ -1,94 +1,96 @@
 <!-- card บุคคลที่สามารถติดต่อได้ -->
 <template>
-  <HeaderTop
-    v-model:edit="edit"
-    header="บุคคลที่สามารถติดต่อได้"
-    icon="mdi-account-circle"
-    :addData="true"
-    :editOnly="false"
-    :editData="false"
-  />
-  <q-form ref="myform">
-    <div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-xs">
-      <div class="col-xs-12 col-sm-3 col-md-2">
-        <q-select
-          :class="getClass(status == 'register' || status == 'rejectRegister')"
-          :readonly="!(status == 'register' || status == 'rejectRegister')"
-          :borderless="!(status == 'register' || status == 'rejectRegister')"
-          :rules="[(val) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
-          :outlined="status == 'register' || status == 'rejectRegister'"
-          dense
-          lazy-rules
-          v-model="defaultContact.contactprefixId"
-          emit-value
-          map-options
-          option-label="name"
-          :options="prefixOptions"
-          option-value="id"
-          :label="`${'คำนำหน้า'}`"
-        />
-      </div>
-      <div class="col-xs-12 col-sm-3 col-md-3">
-        <q-input
-          :class="getClass(status == 'register' || status == 'rejectRegister')"
-          :outlined="status == 'register' || status == 'rejectRegister'"
-          dense
-          lazy-rules
-          :readonly="!(status == 'register' || status == 'rejectRegister')"
-          :borderless="!(status == 'register' || status == 'rejectRegister')"
-          v-model="defaultContact.contactfirstname"
-          :rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]"
-          :label="`${'ชื่อ'}`"
-        />
-      </div>
-      <div class="col-xs-12 col-sm-3 col-md-3">
-        <q-input
-          :class="getClass(status == 'register' || status == 'rejectRegister')"
-          :outlined="status == 'register' || status == 'rejectRegister'"
-          dense
-          lazy-rules
-          :readonly="!(status == 'register' || status == 'rejectRegister')"
-          :borderless="!(status == 'register' || status == 'rejectRegister')"
-          v-model="defaultContact.contactlastname"
-          :rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]"
-          :label="`${'นามสกุล'}`"
-        />
-      </div>
-      <div class="col-xs-12 col-sm-3 col-md-4">
-        <q-input
-          :class="getClass(status == 'register' || status == 'rejectRegister')"
-          :outlined="status == 'register' || status == 'rejectRegister'"
-          dense
-          lazy-rules
-          :readonly="!(status == 'register' || status == 'rejectRegister')"
-          :borderless="!(status == 'register' || status == 'rejectRegister')"
-          v-model="defaultContact.contactrelations"
-          :rules="[(val) => !!val || `${'กรุณากรอกความสัมพันธ์'}`]"
-          :label="`${'เกี่ยวข้องเป็น'}`"
-        />
-      </div>
-      <div class="col-xs-12 col-sm-3 col-md-4">
-        <q-input
-          :outlined="status == 'register' || status == 'rejectRegister'"
-          dense
-          :counter="status == 'register' || status == 'rejectRegister' ? true : false"
-          lazy-rules
-          type="tel"
-          mask="##########"
-          maxlength="10"
-          :class="getClass(status == 'register' || status == 'rejectRegister')"
-          :readonly="!(status == 'register' || status == 'rejectRegister')"
-          :borderless="!(status == 'register' || status == 'rejectRegister')"
-          v-model="defaultContact.contacttel"
-          :label="`${'โทรศัพท์'}`"
-          :rules="[
-            (val) => val.length == 10 || `${'กรุณากรอก โทรศัพท์'}`,
-            (val) => /^[0-9]*$/.test(val) || `${'กรุณากรอกข้อมูลโทรศัพท์ให้ถูกต้อง'}`
-          ]"
-        />
-      </div>
-    </div>
-  </q-form>
+	<HeaderTop
+		v-model:edit="edit"
+		header="บุคคลที่สามารถติดต่อได้"
+		icon="mdi-account-circle"
+		:addData="true"
+		:editOnly="false"
+		:editData="false"
+	/>
+	<q-form ref="myform">
+		<div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-xs">
+			<div class="col-xs-12 col-sm-3 col-md-2">
+				<q-select
+					:class="getClass(status == 'register' || status == 'rejectRegister')"
+					:readonly="!(status == 'register' || status == 'rejectRegister')"
+					:borderless="!(status == 'register' || status == 'rejectRegister')"
+					:rules="[(val) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
+					:outlined="status == 'register' || status == 'rejectRegister'"
+					dense
+					lazy-rules
+					v-model="defaultContact.contactprefixId"
+					emit-value
+					map-options
+					option-label="name"
+					:options="prefixOptions"
+					option-value="id"
+					:label="`${'คำนำหน้า'}`"
+				/>
+			</div>
+			<div class="col-xs-12 col-sm-3 col-md-3">
+				<q-input
+					:class="getClass(status == 'register' || status == 'rejectRegister')"
+					:outlined="status == 'register' || status == 'rejectRegister'"
+					dense
+					lazy-rules
+					:readonly="!(status == 'register' || status == 'rejectRegister')"
+					:borderless="!(status == 'register' || status == 'rejectRegister')"
+					v-model="defaultContact.contactfirstname"
+					:rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]"
+					:label="`${'ชื่อ'}`"
+				/>
+			</div>
+			<div class="col-xs-12 col-sm-3 col-md-3">
+				<q-input
+					:class="getClass(status == 'register' || status == 'rejectRegister')"
+					:outlined="status == 'register' || status == 'rejectRegister'"
+					dense
+					lazy-rules
+					:readonly="!(status == 'register' || status == 'rejectRegister')"
+					:borderless="!(status == 'register' || status == 'rejectRegister')"
+					v-model="defaultContact.contactlastname"
+					:rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]"
+					:label="`${'นามสกุล'}`"
+				/>
+			</div>
+			<div class="col-xs-12 col-sm-3 col-md-4">
+				<q-input
+					:class="getClass(status == 'register' || status == 'rejectRegister')"
+					:outlined="status == 'register' || status == 'rejectRegister'"
+					dense
+					lazy-rules
+					:readonly="!(status == 'register' || status == 'rejectRegister')"
+					:borderless="!(status == 'register' || status == 'rejectRegister')"
+					v-model="defaultContact.contactrelations"
+					:rules="[(val) => !!val || `${'กรุณากรอกความสัมพันธ์'}`]"
+					:label="`${'เกี่ยวข้องเป็น'}`"
+				/>
+			</div>
+			<div class="col-xs-12 col-sm-3 col-md-4">
+				<q-input
+					:outlined="status == 'register' || status == 'rejectRegister'"
+					dense
+					:counter="status == 'register' || status == 'rejectRegister' ? true : false"
+					lazy-rules
+					type="tel"
+					mask="##########"
+					maxlength="10"
+					:class="getClass(status == 'register' || status == 'rejectRegister')"
+					:readonly="!(status == 'register' || status == 'rejectRegister')"
+					:borderless="!(status == 'register' || status == 'rejectRegister')"
+					v-model="defaultContact.contacttel"
+					:label="`${'โทรศัพท์'}`"
+					:rules="[
+						(val) => !!val || '* กรุณากรอกข้อมูลหมายเลขโทรศัพท์',
+						(val) =>
+							(val.length >= 9 && val.length <= 10 && val.startsWith('0')) ||
+							'กรุณากรอกข้อมูลหมายเลขโทรศัพท์ให้ถูกต้อง'
+					]"
+				/>
+			</div>
+		</div>
+	</q-form>
 </template>
 <script setup lang="ts">
 import { ref, onMounted, watch, PropType } from 'vue'
@@ -104,18 +106,18 @@ import HeaderTop from '@/components/top.vue'
 import { DataOption } from '../../interface/index/Main'
 
 const props = defineProps({
-  status: {
-    type: String,
-    required: true
-  },
-  form: {
-    type: Object,
-    required: true
-  },
-  prefixOptions: {
-    type: Array as PropType<DataOption[]>,
-    required: true
-  }
+	status: {
+		type: String,
+		required: true
+	},
+	form: {
+		type: Object,
+		required: true
+	},
+	prefixOptions: {
+		type: Array as PropType<DataOption[]>,
+		required: true
+	}
 })
 const emit = defineEmits(['update:form'])
 
@@ -131,43 +133,43 @@ const examId = ref<string>(route.params.id.toString())
 const positionId = ref<string>(route.params.positionId.toString())
 
 watch(myform, async (count: any, prevCount: any) => {
-  emit('update:form', count)
+	emit('update:form', count)
 })
 
 watch(defaultContact, async (count: Contact, prevCount: Contact) => {
-  await changeData('contact', count)
+	await changeData('contact', count)
 })
 
 onMounted(async () => {
-  await fetchData()
+	await fetchData()
 })
 
 const fetchData = async () => {
-  loaderPage(true)
-  await http
-    .get(config.API.candidateContact(examId.value, positionId.value))
-    .then((res) => {
-      const data = res.data.result
-      if (data != null) {
-        defaultContact.value.contactprefixId = data.contactPrefixId
-        defaultContact.value.contactfirstname = data.contactFirstname
-        defaultContact.value.contactlastname = data.contactLastname
-        defaultContact.value.contactrelations = data.contactRelations
-        defaultContact.value.contacttel = data.contactTel
-      }
-    })
-    .catch((e) => {
-      //   messageError($q, e)
-    })
-    .finally(() => {
-      loaderPage(false)
-    })
+	loaderPage(true)
+	await http
+		.get(config.API.candidateContact(examId.value, positionId.value))
+		.then((res) => {
+			const data = res.data.result
+			if (data != null) {
+				defaultContact.value.contactprefixId = data.contactPrefixId
+				defaultContact.value.contactfirstname = data.contactFirstname
+				defaultContact.value.contactlastname = data.contactLastname
+				defaultContact.value.contactrelations = data.contactRelations
+				defaultContact.value.contacttel = data.contactTel
+			}
+		})
+		.catch((e) => {
+			//   messageError($q, e)
+		})
+		.finally(() => {
+			loaderPage(false)
+		})
 }
 
 const getClass = (val: boolean) => {
-  return {
-    'full-width inputgreen cursor-pointer': val,
-    'full-width cursor-pointer': !val
-  }
+	return {
+		'full-width inputgreen cursor-pointer': val,
+		'full-width cursor-pointer': !val
+	}
 }
 </script>
diff --git a/src/modules/01_exam/components/Form/Information.vue b/src/modules/01_exam/components/Form/Information.vue
index 08b6440..172ddef 100644
--- a/src/modules/01_exam/components/Form/Information.vue
+++ b/src/modules/01_exam/components/Form/Information.vue
@@ -1,53 +1,53 @@
 <!-- card ข้อมูลส่วนตัว -->
 <template>
-  <q-form ref="myform" class="col-12 row justify-center">
-    <div class="row col-xs-12 col-sm-12 col-md-9 items-center q-col-gutter-x-sm q-col-gutter-y-xs">
-      <div class="col-12">
-        <HeaderTop
-          v-model:edit="edit"
-          header="ข้อมูลส่วนตัว"
-          icon="mdi-account"
-          :addData="true"
-          :editOnly="false"
-          :editData="false"
-        />
-      </div>
-      <div class="col-xs-12 col-sm-3 col-md-4">
-        <q-field
-          :outlined="status == 'register' || status == 'rejectRegister'"
-          bottom-slots
-          :stack-label="defaultInformation.cardid != null"
-          label="เลขประจำตัวประชาชน"
-          dense
-          :readonly="!(status == 'register' || status == 'rejectRegister')"
-          :class="getClass(status == 'register' || status == 'rejectRegister')"
-          :borderless="!(status == 'register' || status == 'rejectRegister')"
-          :rules="[
-            (val) =>
-              (val != null && val.length == 13) || `${'กรุณากรอกเลขประจำตัวประชาชนให้ถูกต้อง'}`,
-            (val) => /^[0-9]*$/.test(val) || `${'กรุณากรอกเลขประจำตัวประชาชนให้ถูกต้อง'}`
-          ]"
-          v-model="defaultInformation.cardid"
-        >
-          <template v-slot:prepend>
-            <q-btn
-              round
-              flat
-              dense
-              size="md"
-              @click="idDialog"
-              v-if="status == 'register' || status == 'rejectRegister'"
-            >
-              <q-icon name="mdi-pencil-outline" color="primary" />
-            </q-btn>
-          </template>
-          <template v-slot:control>
-            <div class="self-center full-width no-outline" tabindex="0">
-              {{ defaultInformation.cardid }}
-            </div>
-          </template>
-        </q-field>
-        <!-- <q-input
+	<q-form ref="myform" class="col-12 row justify-center">
+		<div class="row col-xs-12 col-sm-12 col-md-9 items-center q-col-gutter-x-sm q-col-gutter-y-xs">
+			<div class="col-12">
+				<HeaderTop
+					v-model:edit="edit"
+					header="ข้อมูลส่วนตัว"
+					icon="mdi-account"
+					:addData="true"
+					:editOnly="false"
+					:editData="false"
+				/>
+			</div>
+			<div class="col-xs-12 col-sm-3 col-md-4">
+				<q-field
+					:outlined="status == 'register' || status == 'rejectRegister'"
+					bottom-slots
+					:stack-label="defaultInformation.cardid != null"
+					label="เลขประจำตัวประชาชน"
+					dense
+					:readonly="!(status == 'register' || status == 'rejectRegister')"
+					:class="getClass(status == 'register' || status == 'rejectRegister')"
+					:borderless="!(status == 'register' || status == 'rejectRegister')"
+					:rules="[
+						(val) =>
+							(val != null && val.length == 13) || `${'กรุณากรอกเลขประจำตัวประชาชนให้ถูกต้อง'}`,
+						(val) => /^[0-9]*$/.test(val) || `${'กรุณากรอกเลขประจำตัวประชาชนให้ถูกต้อง'}`
+					]"
+					v-model="defaultInformation.cardid"
+				>
+					<template v-slot:prepend>
+						<q-btn
+							round
+							flat
+							dense
+							size="md"
+							@click="idDialog"
+							v-if="status == 'register' || status == 'rejectRegister'"
+						>
+							<q-icon name="mdi-pencil-outline" color="primary" />
+						</q-btn>
+					</template>
+					<template v-slot:control>
+						<div class="self-center full-width no-outline" tabindex="0">
+							{{ defaultInformation.cardid }}
+						</div>
+					</template>
+				</q-field>
+				<!-- <q-input
           :class="getClass(status == 'register' || status == 'rejectRegister')"
           :outlined="status == 'register' || status == 'rejectRegister'"
           dense
@@ -65,172 +65,173 @@
           ]"
           label="เลขบัตรประจำตัวประชาชน"
         /> -->
-      </div>
-      <div class="col-xs-12 col-sm-3 col-md-2">
-        <q-select
-          :class="getClass(status == 'register' || status == 'rejectRegister')"
-          :readonly="!(status == 'register' || status == 'rejectRegister')"
-          :borderless="!(status == 'register' || status == 'rejectRegister')"
-          :rules="[(val) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
-          :outlined="status == 'register' || status == 'rejectRegister'"
-          dense
-          lazy-rules
-          v-model="defaultInformation.prefixId"
-          emit-value
-          map-options
-          option-label="name"
-          :options="prefixOptions"
-          option-value="id"
-          :label="`${'คำนำหน้า'}`"
-          @update:model-value="(value) => selectPrefix()"
-        />
-      </div>
-      <div class="col-xs-12 col-sm-3 col-md-3">
-        <q-input
-          :class="getClass(status == 'register' || status == 'rejectRegister')"
-          :outlined="status == 'register' || status == 'rejectRegister'"
-          dense
-          lazy-rules
-          :readonly="!(status == 'register' || status == 'rejectRegister')"
-          :borderless="!(status == 'register' || status == 'rejectRegister')"
-          v-model="defaultInformation.firstname"
-          :rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]"
-          :label="`${'ชื่อ'}`"
-        />
-      </div>
-      <div class="col-xs-12 col-sm-3 col-md-3">
-        <q-input
-          :class="getClass(status == 'register' || status == 'rejectRegister')"
-          :outlined="status == 'register' || status == 'rejectRegister'"
-          dense
-          lazy-rules
-          :readonly="!(status == 'register' || status == 'rejectRegister')"
-          :borderless="!(status == 'register' || status == 'rejectRegister')"
-          v-model="defaultInformation.lastname"
-          :rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]"
-          :label="`${'นามสกุล'}`"
-        />
-      </div>
-      <div class="col-xs-12 col-sm-3 col-md-3">
-        <!-- :borderless="!false" -->
-        <q-select
-          :class="getClass(status == 'register' || status == 'rejectRegister')"
-          dense
-          :outlined="status == 'register' || status == 'rejectRegister'"
-          :readonly="!(status == 'register' || status == 'rejectRegister')"
-          :borderless="!(status == 'register' || status == 'rejectRegister')"
-          lazy-rules
-          v-model="defaultInformation.nationality"
-          :options="opNat"
-          :rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
-          :label="`${'สัญชาติ'}`"
-        />
-      </div>
-      <div class="col-xs-12 col-sm-3 col-md-3">
-        <q-select
-          :class="getClass(status == 'register' || status == 'rejectRegister')"
-          :readonly="!(status == 'register' || status == 'rejectRegister')"
-          :borderless="!(status == 'register' || status == 'rejectRegister')"
-          :rules="[(val) => !!val || `${'กรุณาเลือก ศาสนา'}`]"
-          :outlined="status == 'register' || status == 'rejectRegister'"
-          dense
-          lazy-rules
-          v-model="defaultInformation.religionId"
-          emit-value
-          map-options
-          option-label="name"
-          :options="religionOptions"
-          option-value="id"
-          :label="`${'ศาสนา'}`"
-        />
-      </div>
-      <div class="col-xs-12 col-sm-3 col-md-3">
-        <datepicker
-          v-model="defaultInformation.birthDate"
-          :locale="'th'"
-          autoApply
-          :enableTimePicker="false"
-          week-start="0"
-          :max-date="new Date()"
-          :disabled="!(status == 'register' || status == 'rejectRegister')"
-          @update:modelValue="selectBirthDate"
-        >
-          <template #year="{ year }">
-            {{ year + 543 }}
-          </template>
-          <template #year-overlay-value="{ value }">
-            {{ parseInt(value + 543) }}
-          </template>
-          <template #trigger>
-            <q-input
-              :class="getClass(status == 'register' || status == 'rejectRegister')"
-              :outlined="status == 'register' || status == 'rejectRegister'"
-              dense
-              lazy-rules
-              :readonly="!(status == 'register' || status == 'rejectRegister')"
-              :borderless="!(status == 'register' || status == 'rejectRegister')"
-              :model-value="
-                defaultInformation.birthDate == null
-                  ? null
-                  : date2Thai(defaultInformation.birthDate)
-              "
-              :rules="[(val) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
-              :label="`${'วัน/เดือน/ปี เกิด'}`"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="mdi-calendar-outline"
-                  class="cursor-pointer"
-                  size="22px"
-                  :style="
-                    status == 'register' || status == 'rejectRegister'
-                      ? 'color: var(--q-primary)'
-                      : 'color: var(--q-grey)'
-                  "
-                >
-                </q-icon>
-              </template>
-            </q-input>
-          </template>
-        </datepicker>
-      </div>
-      <div class="col-xs-12 col-sm-3 col-md-3">
-        <q-input
-          :class="getClass(status == 'register' || status == 'rejectRegister')"
-          dense
-          lazy-rules
-          bottom-slots
-          :outlined="status == 'register' || status == 'rejectRegister'"
-          :readonly="!(status == 'rejectRegister')"
-          :borderless="!(status == 'register' || status == 'rejectRegister')"
-          :model-value="
-            defaultInformation.birthDate == null ? null : calAge(defaultInformation.birthDate)
-          "
-          :label="`${'อายุ'}`"
-        />
-      </div>
-      <div class="col-xs-12 col-sm-3 col-md-3">
-        <q-input
-          :outlined="status == 'register' || status == 'rejectRegister'"
-          dense
-          :counter="status == 'register' || status == 'rejectRegister' ? true : false"
-          lazy-rules
-          type="tel"
-          mask="##########"
-          maxlength="10"
-          :class="getClass(status == 'register' || status == 'rejectRegister')"
-          :readonly="!(status == 'register' || status == 'rejectRegister')"
-          :borderless="!(status == 'register' || status == 'rejectRegister')"
-          v-model="defaultInformation.tel"
-          :label="`${'โทรศัพท์'}`"
-          :rules="[
-            (val) => !!val || `${'กรุณากรอก โทรศัพท์'}`,
-            (val) => val.length == 10 || `${'กรุณากรอก โทรศัพท์'}`,
-            (val) => /^[0-9]*$/.test(val) || `${'กรุณากรอกข้อมูลโทรศัพท์ให้ถูกต้อง'}`
-          ]"
-        />
-      </div>
-      <!-- <div class="col-xs-12 col-sm-3 col-md-3">
+			</div>
+			<div class="col-xs-12 col-sm-3 col-md-2">
+				<q-select
+					:class="getClass(status == 'register' || status == 'rejectRegister')"
+					:readonly="!(status == 'register' || status == 'rejectRegister')"
+					:borderless="!(status == 'register' || status == 'rejectRegister')"
+					:rules="[(val) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
+					:outlined="status == 'register' || status == 'rejectRegister'"
+					dense
+					lazy-rules
+					v-model="defaultInformation.prefixId"
+					emit-value
+					map-options
+					option-label="name"
+					:options="prefixOptions"
+					option-value="id"
+					:label="`${'คำนำหน้า'}`"
+					@update:model-value="(value) => selectPrefix()"
+				/>
+			</div>
+			<div class="col-xs-12 col-sm-3 col-md-3">
+				<q-input
+					:class="getClass(status == 'register' || status == 'rejectRegister')"
+					:outlined="status == 'register' || status == 'rejectRegister'"
+					dense
+					lazy-rules
+					:readonly="!(status == 'register' || status == 'rejectRegister')"
+					:borderless="!(status == 'register' || status == 'rejectRegister')"
+					v-model="defaultInformation.firstname"
+					:rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]"
+					:label="`${'ชื่อ'}`"
+				/>
+			</div>
+			<div class="col-xs-12 col-sm-3 col-md-3">
+				<q-input
+					:class="getClass(status == 'register' || status == 'rejectRegister')"
+					:outlined="status == 'register' || status == 'rejectRegister'"
+					dense
+					lazy-rules
+					:readonly="!(status == 'register' || status == 'rejectRegister')"
+					:borderless="!(status == 'register' || status == 'rejectRegister')"
+					v-model="defaultInformation.lastname"
+					:rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]"
+					:label="`${'นามสกุล'}`"
+				/>
+			</div>
+			<div class="col-xs-12 col-sm-3 col-md-3">
+				<!-- :borderless="!false" -->
+				<q-select
+					:class="getClass(status == 'register' || status == 'rejectRegister')"
+					dense
+					:outlined="status == 'register' || status == 'rejectRegister'"
+					:readonly="!(status == 'register' || status == 'rejectRegister')"
+					:borderless="!(status == 'register' || status == 'rejectRegister')"
+					lazy-rules
+					v-model="defaultInformation.nationality"
+					:options="opNat"
+					:rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
+					:label="`${'สัญชาติ'}`"
+				/>
+			</div>
+			<div class="col-xs-12 col-sm-3 col-md-3">
+				<q-select
+					:class="getClass(status == 'register' || status == 'rejectRegister')"
+					:readonly="!(status == 'register' || status == 'rejectRegister')"
+					:borderless="!(status == 'register' || status == 'rejectRegister')"
+					:rules="[(val) => !!val || `${'กรุณาเลือก ศาสนา'}`]"
+					:outlined="status == 'register' || status == 'rejectRegister'"
+					dense
+					lazy-rules
+					v-model="defaultInformation.religionId"
+					emit-value
+					map-options
+					option-label="name"
+					:options="religionOptions"
+					option-value="id"
+					:label="`${'ศาสนา'}`"
+				/>
+			</div>
+			<div class="col-xs-12 col-sm-3 col-md-3">
+				<datepicker
+					v-model="defaultInformation.birthDate"
+					:locale="'th'"
+					autoApply
+					:enableTimePicker="false"
+					week-start="0"
+					:max-date="new Date()"
+					:disabled="!(status == 'register' || status == 'rejectRegister')"
+					@update:modelValue="selectBirthDate"
+				>
+					<template #year="{ year }">
+						{{ year + 543 }}
+					</template>
+					<template #year-overlay-value="{ value }">
+						{{ parseInt(value + 543) }}
+					</template>
+					<template #trigger>
+						<q-input
+							:class="getClass(status == 'register' || status == 'rejectRegister')"
+							:outlined="status == 'register' || status == 'rejectRegister'"
+							dense
+							lazy-rules
+							:readonly="!(status == 'register' || status == 'rejectRegister')"
+							:borderless="!(status == 'register' || status == 'rejectRegister')"
+							:model-value="
+								defaultInformation.birthDate == null
+									? null
+									: date2Thai(defaultInformation.birthDate)
+							"
+							:rules="[(val) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
+							:label="`${'วัน/เดือน/ปี เกิด'}`"
+						>
+							<template v-slot:prepend>
+								<q-icon
+									name="mdi-calendar-outline"
+									class="cursor-pointer"
+									size="22px"
+									:style="
+										status == 'register' || status == 'rejectRegister'
+											? 'color: var(--q-primary)'
+											: 'color: var(--q-grey)'
+									"
+								>
+								</q-icon>
+							</template>
+						</q-input>
+					</template>
+				</datepicker>
+			</div>
+			<div class="col-xs-12 col-sm-3 col-md-3">
+				<q-input
+					:class="getClass(status == 'register' || status == 'rejectRegister')"
+					dense
+					lazy-rules
+					bottom-slots
+					:outlined="status == 'register' || status == 'rejectRegister'"
+					:readonly="!(status == 'rejectRegister')"
+					:borderless="!(status == 'register' || status == 'rejectRegister')"
+					:model-value="
+						defaultInformation.birthDate == null ? null : calAge(defaultInformation.birthDate)
+					"
+					:label="`${'อายุ'}`"
+				/>
+			</div>
+			<div class="col-xs-12 col-sm-3 col-md-3">
+				<q-input
+					:outlined="status == 'register' || status == 'rejectRegister'"
+					dense
+					:counter="status == 'register' || status == 'rejectRegister' ? true : false"
+					lazy-rules
+					type="tel"
+					mask="##########"
+					maxlength="10"
+					:class="getClass(status == 'register' || status == 'rejectRegister')"
+					:readonly="!(status == 'register' || status == 'rejectRegister')"
+					:borderless="!(status == 'register' || status == 'rejectRegister')"
+					v-model="defaultInformation.tel"
+					:label="`${'โทรศัพท์'}`"
+					:rules="[
+						(val) => !!val || '* กรุณากรอกข้อมูลหมายเลขโทรศัพท์',
+						(val) =>
+							(val.length >= 9 && val.length <= 10 && val.startsWith('0')) ||
+							'กรุณากรอกข้อมูลหมายเลขโทรศัพท์ให้ถูกต้อง'
+					]"
+				/>
+			</div>
+			<!-- <div class="col-xs-12 col-sm-3 col-md-3">
         <q-input
           :outlined="status == 'register' || status == 'rejectRegister'"
           dense
@@ -250,55 +251,55 @@
           :label="`${'โทรศัพท์มือถือ'}`"
         />
       </div> -->
-      <div class="col-xs-12 col-sm-3 col-md-3">
-        <!-- style="padding: 0 12px" -->
-        <q-input
-          :class="getClass(status == 'register' || status == 'rejectRegister')"
-          dense
-          lazy-rules
-          bottom-slots
-          :outlined="status == 'register' || status == 'rejectRegister'"
-          :readonly="!(status == 'rejectRegister')"
-          :borderless="!(status == 'register' || status == 'rejectRegister')"
-          v-model="defaultInformation.email"
-          label="E-mail address"
-        />
-      </div>
-    </div>
-    <div class="row col-xs-12 col-sm-6 col-md-3 justify-end">
-      <q-card bordered class="col-11 q-pa-sm justify-center text-center q-mt-sm">
-        <div class="text-weight-medium q-py-xs">อัปโหลดรูปถ่าย</div>
-        <div class="containerimage row justify-center col-xs-6 col-sm-10 col-md-12">
-          <label for="file-upload" class="col-12 row justify-center">
-            <q-img v-if="img == ''" src="@/assets/avatar_user.jpg" class="col-6">
-              <div
-                class="overlay"
-                v-if="status == 'register' || status == 'rejectRegister' || status == 'done'"
-              >
-                <q-icon name="mdi-camera" />
-                <br />อัปเดต
-              </div>
-            </q-img>
-            <q-img v-else :src="img" class="col-12">
-              <div
-                class="overlay"
-                v-if="status == 'register' || status == 'rejectRegister' || status == 'done'"
-              >
-                <q-icon name="mdi-camera" />
-                <br />อัปเดต
-              </div>
-            </q-img>
-          </label>
-          <input id="file-upload" type="file" accept="image/*" @change="uploadImage" />
-        </div>
-        <div class="text-caption q-pt-sm text-grey-7">
-          <div>รูปถ่ายหน้าตรง ชุดสุภาพ ไม่สวมหมวก</div>
-          <div>ไม่ใส่แว่นตาดำ ไม่มีลวดลายใด ๆ บนรูป</div>
-          <div>ไฟล์ JPG ขนาด 40 -100 KB</div>
-        </div>
-      </q-card>
-    </div>
-    <!-- <div class="col-xs-12 col-sm-9 col-md-12">
+			<div class="col-xs-12 col-sm-3 col-md-3">
+				<!-- style="padding: 0 12px" -->
+				<q-input
+					:class="getClass(status == 'register' || status == 'rejectRegister')"
+					dense
+					lazy-rules
+					bottom-slots
+					:outlined="status == 'register' || status == 'rejectRegister'"
+					:readonly="!(status == 'rejectRegister')"
+					:borderless="!(status == 'register' || status == 'rejectRegister')"
+					v-model="defaultInformation.email"
+					label="E-mail address"
+				/>
+			</div>
+		</div>
+		<div class="row col-xs-12 col-sm-6 col-md-3 justify-end">
+			<q-card bordered class="col-11 q-pa-sm justify-center text-center q-mt-sm">
+				<div class="text-weight-medium q-py-xs">อัปโหลดรูปถ่าย</div>
+				<div class="containerimage row justify-center col-xs-6 col-sm-10 col-md-12">
+					<label for="file-upload" class="col-12 row justify-center">
+						<q-img v-if="img == ''" src="@/assets/avatar_user.jpg" class="col-6">
+							<div
+								class="overlay"
+								v-if="status == 'register' || status == 'rejectRegister' || status == 'done'"
+							>
+								<q-icon name="mdi-camera" />
+								<br />อัปเดต
+							</div>
+						</q-img>
+						<q-img v-else :src="img" class="col-12">
+							<div
+								class="overlay"
+								v-if="status == 'register' || status == 'rejectRegister' || status == 'done'"
+							>
+								<q-icon name="mdi-camera" />
+								<br />อัปเดต
+							</div>
+						</q-img>
+					</label>
+					<input id="file-upload" type="file" accept="image/*" @change="uploadImage" />
+				</div>
+				<div class="text-caption q-pt-sm text-grey-7">
+					<div>รูปถ่ายหน้าตรง ชุดสุภาพ ไม่สวมหมวก</div>
+					<div>ไม่ใส่แว่นตาดำ ไม่มีลวดลายใด ๆ บนรูป</div>
+					<div>ไฟล์ JPG ขนาด 40 -100 KB</div>
+				</div>
+			</q-card>
+		</div>
+		<!-- <div class="col-xs-12 col-sm-9 col-md-12">
       <q-input
         :class="getClass(status == 'register' || status == 'rejectRegister')"
         :outlined="status == 'register' || status == 'rejectRegister'"
@@ -311,65 +312,65 @@
         type="textarea"
       />
     </div> -->
-  </q-form>
+	</q-form>
 
-  <!--  dialog กรอกเลขบัตร -->
-  <q-dialog v-model="idModel">
-    <q-card style="width: 350px">
-      <q-card-section class="bg-grey-2 q-py-sm">
-        <div class="text-subtitle1 text-weight-medium">กรอกเลขประจำตัวประชาชน</div>
-      </q-card-section>
-      <q-separator color="grey-4" />
-      <q-card-section>
-        <q-form ref="myformcitizen">
-          <q-input
-            :class="getClass(true)"
-            :outlined="true"
-            dense
-            type="tel"
-            mask="#############"
-            :counter="true ? true : false"
-            lazy-rules
-            :readonly="!true"
-            :borderless="!true"
-            v-model="cardid1"
-            maxlength="13"
-            :rules="[
-              (val) => val.length == 13 || `${'กรุณากรอกเลขประจำตัวประชาชนให้ถูกต้อง'}`,
-              (val) => /^[0-9]*$/.test(val) || `${'กรุณากรอกเลขประจำตัวประชาชนให้ถูกต้อง'}`
-            ]"
-            label="เลขบัตรประจำตัวประชาชน"
-            class="q-mb-sm"
-          />
-          <q-input
-            :disable="cardid1 == null || cardid1.length < 13"
-            :class="getClass(true)"
-            :outlined="true"
-            dense
-            type="tel"
-            mask="#############"
-            :counter="true ? true : false"
-            lazy-rules
-            :readonly="!true"
-            :borderless="!true"
-            v-model="cardid2"
-            maxlength="13"
-            :rules="[
-              (val) => val.length == 13 || `${'กรุณากรอกเลขประจำตัวประชาชนให้ถูกต้อง'}`,
-              (val) => val == cardid1 || `${'เลขประจำตัวประชาชนไม่ตรงกัน'}`,
-              (val) => /^[0-9]*$/.test(val) || `${'กรุณากรอกเลขประจำตัวประชาชนให้ถูกต้อง'}`
-            ]"
-            label="ยืนยันเลขบัตรประจำตัวประชาชน"
-          />
-        </q-form>
-      </q-card-section>
-      <q-separator color="grey-4" />
-      <q-card-actions align="right" class="bg-white text-teal">
-        <q-btn flat label="ยกเลิก" color="red" v-close-popup />
-        <q-btn flat label="ตกลง" @click="checkCardId" class="bg-teal-1" />
-      </q-card-actions>
-    </q-card>
-  </q-dialog>
+	<!--  dialog กรอกเลขบัตร -->
+	<q-dialog v-model="idModel">
+		<q-card style="width: 350px">
+			<q-card-section class="bg-grey-2 q-py-sm">
+				<div class="text-subtitle1 text-weight-medium">กรอกเลขประจำตัวประชาชน</div>
+			</q-card-section>
+			<q-separator color="grey-4" />
+			<q-card-section>
+				<q-form ref="myformcitizen">
+					<q-input
+						:class="getClass(true)"
+						:outlined="true"
+						dense
+						type="tel"
+						mask="#############"
+						:counter="true ? true : false"
+						lazy-rules
+						:readonly="!true"
+						:borderless="!true"
+						v-model="cardid1"
+						maxlength="13"
+						:rules="[
+							(val) => val.length == 13 || `${'กรุณากรอกเลขประจำตัวประชาชนให้ถูกต้อง'}`,
+							(val) => /^[0-9]*$/.test(val) || `${'กรุณากรอกเลขประจำตัวประชาชนให้ถูกต้อง'}`
+						]"
+						label="เลขบัตรประจำตัวประชาชน"
+						class="q-mb-sm"
+					/>
+					<q-input
+						:disable="cardid1 == null || cardid1.length < 13"
+						:class="getClass(true)"
+						:outlined="true"
+						dense
+						type="tel"
+						mask="#############"
+						:counter="true ? true : false"
+						lazy-rules
+						:readonly="!true"
+						:borderless="!true"
+						v-model="cardid2"
+						maxlength="13"
+						:rules="[
+							(val) => val.length == 13 || `${'กรุณากรอกเลขประจำตัวประชาชนให้ถูกต้อง'}`,
+							(val) => val == cardid1 || `${'เลขประจำตัวประชาชนไม่ตรงกัน'}`,
+							(val) => /^[0-9]*$/.test(val) || `${'กรุณากรอกเลขประจำตัวประชาชนให้ถูกต้อง'}`
+						]"
+						label="ยืนยันเลขบัตรประจำตัวประชาชน"
+					/>
+				</q-form>
+			</q-card-section>
+			<q-separator color="grey-4" />
+			<q-card-actions align="right" class="bg-white text-teal">
+				<q-btn flat label="ยกเลิก" color="red" v-close-popup />
+				<q-btn flat label="ตกลง" @click="checkCardId" class="bg-teal-1" />
+			</q-card-actions>
+		</q-card>
+	</q-dialog>
 </template>
 <script setup lang="ts">
 import { ref, onMounted, watch } from 'vue'
@@ -386,26 +387,26 @@ import { defaultInformation, changeData } from '@/modules/01_exam/interface/inde
 import HeaderTop from '@/components/top.vue'
 
 const props = defineProps({
-  prefixOptions: {
-    type: Array as PropType<DataOption[]>,
-    required: true
-  },
-  religionOptions: {
-    type: Array as PropType<DataOption[]>,
-    required: true
-  },
-  provinceOptions: {
-    type: Array as PropType<DataOption[]>,
-    required: true
-  },
-  status: {
-    type: String,
-    required: true
-  },
-  form: {
-    type: Object,
-    required: true
-  }
+	prefixOptions: {
+		type: Array as PropType<DataOption[]>,
+		required: true
+	},
+	religionOptions: {
+		type: Array as PropType<DataOption[]>,
+		required: true
+	},
+	provinceOptions: {
+		type: Array as PropType<DataOption[]>,
+		required: true
+	},
+	status: {
+		type: String,
+		required: true
+	},
+	form: {
+		type: Object,
+		required: true
+	}
 })
 const emit = defineEmits(['update:form'])
 
@@ -431,255 +432,255 @@ const opNat = ref(['ไทย'])
 const idModel = ref<boolean>(false)
 
 watch(myform, async (count: any, prevCount: any) => {
-  emit('update:form', count)
+	emit('update:form', count)
 })
 
 watch(defaultInformation, async (count: Information, prevCount: Information) => {
-  await changeData('information', count)
+	await changeData('information', count)
 })
 
 onMounted(async () => {
-  await fetchData()
-  await fetchImgData()
-  if (defaultInformation.value.provinceId != null)
-    await fetchDistrict(defaultInformation.value.provinceId)
-  candidateCheck()
+	await fetchData()
+	await fetchImgData()
+	if (defaultInformation.value.provinceId != null)
+		await fetchDistrict(defaultInformation.value.provinceId)
+	candidateCheck()
 })
 
 const fetchData = async () => {
-  loaderPage(true)
-  await http
-    .get(config.API.candidateInformation(examId.value, positionId.value))
-    .then((res) => {
-      const data = res.data.result
-      defaultInformation.value.prefixId = data.prefixId
-      selectPrefix()
-      if (data.lastName == null || data.lastName == '') {
-        data.lastName = keycloak.tokenParsed == null ? '' : keycloak.tokenParsed.family_name
-      }
-      if (data.firstName == null || data.firstName == '') {
-        data.firstName = keycloak.tokenParsed == null ? '' : keycloak.tokenParsed.given_name
-      }
-      if (data.email == null || data.email == '') {
-        data.email = keycloak.tokenParsed == null ? '' : keycloak.tokenParsed.email
-      }
-      defaultInformation.value.lastname = data.lastName
-      defaultInformation.value.provinceId = data.citizenProvinceId
-      defaultInformation.value.districtId = data.citizenDistrictId
-      defaultInformation.value.birthDate =
-        data.dateOfBirth == null ? null : new Date(data.dateOfBirth)
-      defaultInformation.value.cardIdDate =
-        data.citizenDate == null ? null : new Date(data.citizenDate)
-      defaultInformation.value.cardid = data.citizenId
-      defaultInformation.value.firstname = data.firstName
-      defaultInformation.value.religionId = data.religionId
-      defaultInformation.value.nationality = data.nationality
-      defaultInformation.value.email = data.email
-      defaultInformation.value.phone = data.mobilePhone
-      defaultInformation.value.tel = data.telephone
-      defaultInformation.value.knowledge = data.knowledge
-    })
-    .catch(() => {
-      defaultInformation.value.email =
-        keycloak.tokenParsed == null ? '' : keycloak.tokenParsed.email
-      defaultInformation.value.firstname =
-        keycloak.tokenParsed == null ? '' : keycloak.tokenParsed.given_name
-      defaultInformation.value.lastname =
-        keycloak.tokenParsed == null ? '' : keycloak.tokenParsed.family_name
-    })
-    .finally(() => {
-      loaderPage(false)
-    })
+	loaderPage(true)
+	await http
+		.get(config.API.candidateInformation(examId.value, positionId.value))
+		.then((res) => {
+			const data = res.data.result
+			defaultInformation.value.prefixId = data.prefixId
+			selectPrefix()
+			if (data.lastName == null || data.lastName == '') {
+				data.lastName = keycloak.tokenParsed == null ? '' : keycloak.tokenParsed.family_name
+			}
+			if (data.firstName == null || data.firstName == '') {
+				data.firstName = keycloak.tokenParsed == null ? '' : keycloak.tokenParsed.given_name
+			}
+			if (data.email == null || data.email == '') {
+				data.email = keycloak.tokenParsed == null ? '' : keycloak.tokenParsed.email
+			}
+			defaultInformation.value.lastname = data.lastName
+			defaultInformation.value.provinceId = data.citizenProvinceId
+			defaultInformation.value.districtId = data.citizenDistrictId
+			defaultInformation.value.birthDate =
+				data.dateOfBirth == null ? null : new Date(data.dateOfBirth)
+			defaultInformation.value.cardIdDate =
+				data.citizenDate == null ? null : new Date(data.citizenDate)
+			defaultInformation.value.cardid = data.citizenId
+			defaultInformation.value.firstname = data.firstName
+			defaultInformation.value.religionId = data.religionId
+			defaultInformation.value.nationality = data.nationality
+			defaultInformation.value.email = data.email
+			defaultInformation.value.phone = data.mobilePhone
+			defaultInformation.value.tel = data.telephone
+			defaultInformation.value.knowledge = data.knowledge
+		})
+		.catch(() => {
+			defaultInformation.value.email =
+				keycloak.tokenParsed == null ? '' : keycloak.tokenParsed.email
+			defaultInformation.value.firstname =
+				keycloak.tokenParsed == null ? '' : keycloak.tokenParsed.given_name
+			defaultInformation.value.lastname =
+				keycloak.tokenParsed == null ? '' : keycloak.tokenParsed.family_name
+		})
+		.finally(() => {
+			loaderPage(false)
+		})
 }
 
 const checkCardId = async () => {
-  myformcitizen.value.validate().then(async (result: boolean) => {
-    if (result) {
-      idModel.value = false
-      await http
-        .put(config.API.candidateCheckCitizen(examId.value, positionId.value), {
-          citizenId: cardid2.value
-        })
-        .then((res) => {
-          success
+	myformcitizen.value.validate().then(async (result: boolean) => {
+		if (result) {
+			idModel.value = false
+			await http
+				.put(config.API.candidateCheckCitizen(examId.value, positionId.value), {
+					citizenId: cardid2.value
+				})
+				.then((res) => {
+					success
 
-          defaultInformation.value.cardid = cardid2.value
-        })
-        .catch((e) => {
-          messageError($q, e)
-        })
-        .finally(async () => {})
-      return
-    } else {
-      notifyError($q, 'กรอกเลขบัตรประชาชนไม่ถูกต้อง')
-    }
-  })
+					defaultInformation.value.cardid = cardid2.value
+				})
+				.catch((e) => {
+					messageError($q, e)
+				})
+				.finally(async () => {})
+			return
+		} else {
+			notifyError($q, 'กรอกเลขบัตรประชาชนไม่ถูกต้อง')
+		}
+	})
 }
 
 const selectPrefix = async () => {
-  defaultInformation.value.prefix =
-    props.prefixOptions.filter((x) => x.id == defaultInformation.value.prefixId).length == 0
-      ? ''
-      : props.prefixOptions.filter((x) => x.id == defaultInformation.value.prefixId)[0].name
+	defaultInformation.value.prefix =
+		props.prefixOptions.filter((x) => x.id == defaultInformation.value.prefixId).length == 0
+			? ''
+			: props.prefixOptions.filter((x) => x.id == defaultInformation.value.prefixId)[0].name
 }
 const selectBirthDate = async () => {
-  if (defaultInformation.value.birthDate != null) {
-    if (calAgeYear(defaultInformation.value.birthDate, registerEndDate.value) < 18) {
-      defaultInformation.value.birthDate = null
-      notifyError($q, 'อายุไม่ถึง18')
-    } else if (calAgeYear(defaultInformation.value.birthDate, registerEndDate.value) > 60) {
-      defaultInformation.value.birthDate = null
-      notifyError($q, 'อายุเกิน60')
-    }
-  }
+	if (defaultInformation.value.birthDate != null) {
+		if (calAgeYear(defaultInformation.value.birthDate, registerEndDate.value) < 18) {
+			defaultInformation.value.birthDate = null
+			notifyError($q, 'อายุไม่ถึง18')
+		} else if (calAgeYear(defaultInformation.value.birthDate, registerEndDate.value) > 60) {
+			defaultInformation.value.birthDate = null
+			notifyError($q, 'อายุเกิน60')
+		}
+	}
 }
 
 const candidateCheck = async () => {
-  loaderPage(true)
-  await http
-    .get(config.API.candidateCheckCreate(examId.value, positionId.value))
-    .then(async (res) => {
-      const data = res.data.result
-      registerEndDate.value =
-        data.registerEndDate == null ? new Date() : new Date(data.registerEndDate)
-    })
-    .catch((e) => {
-      messageError($q, e)
-    })
-    .finally(() => {
-      loaderPage(false)
-    })
+	loaderPage(true)
+	await http
+		.get(config.API.candidateCheckCreate(examId.value, positionId.value))
+		.then(async (res) => {
+			const data = res.data.result
+			registerEndDate.value =
+				data.registerEndDate == null ? new Date() : new Date(data.registerEndDate)
+		})
+		.catch((e) => {
+			messageError($q, e)
+		})
+		.finally(() => {
+			loaderPage(false)
+		})
 }
 
 const fetchImgData = async () => {
-  loaderPage(true)
-  await http
-    .get(config.API.candidateProfile(examId.value, positionId.value))
-    .then((res) => {
-      const data = res.data.result
-      img.value = data
-      defaultInformation.value.profileImg = data
-    })
-    .catch((e) => {
-      //   messageError($q, e)
-    })
-    .finally(() => {
-      loaderPage(false)
-    })
+	loaderPage(true)
+	await http
+		.get(config.API.candidateProfile(examId.value, positionId.value))
+		.then((res) => {
+			const data = res.data.result
+			img.value = data
+			defaultInformation.value.profileImg = data
+		})
+		.catch((e) => {
+			//   messageError($q, e)
+		})
+		.finally(() => {
+			loaderPage(false)
+		})
 }
 
 const uploadImage = async (e: any) => {
-  let input = e.target.files
-  if (input.length > 0) {
-    const formData = new FormData()
-    formData.append('', input[0])
-    loaderPage(true)
-    await http
-      .put(config.API.candidateProfile(examId.value, positionId.value), formData)
-      .then((res) => {
-        success($q, 'อัพโหลดรูปสำเร็จ')
-      })
-      .catch((e) => {
-        messageError($q, e)
-      })
-      .finally(async () => {
-        await fetchImgData()
-        fileProfile.value = []
-      })
-    return
-  }
+	let input = e.target.files
+	if (input.length > 0) {
+		const formData = new FormData()
+		formData.append('', input[0])
+		loaderPage(true)
+		await http
+			.put(config.API.candidateProfile(examId.value, positionId.value), formData)
+			.then((res) => {
+				success($q, 'อัพโหลดรูปสำเร็จ')
+			})
+			.catch((e) => {
+				messageError($q, e)
+			})
+			.finally(async () => {
+				await fetchImgData()
+				fileProfile.value = []
+			})
+		return
+	}
 }
 
 const selectProvince = async (val: string) => {
-  defaultInformation.value.districtId = ''
-  myform.value.resetValidation()
-  await fetchDistrict(val)
+	defaultInformation.value.districtId = ''
+	myform.value.resetValidation()
+	await fetchDistrict(val)
 }
 
 const fetchDistrict = async (id: string) => {
-  loaderPage(true)
-  await http
-    .get(config.API.listDistrict(id))
-    .then((res) => {
-      const data = res.data.result
-      let option: DataOption[] = []
-      data.map((r: DataOption) => {
-        option.push({ id: r.id.toString(), name: r.name.toString() })
-      })
-      districtOptions.value = option
-    })
-    .catch((e) => {
-      messageError($q, e)
-    })
-    .finally(() => {
-      loaderPage(false)
-    })
+	loaderPage(true)
+	await http
+		.get(config.API.listDistrict(id))
+		.then((res) => {
+			const data = res.data.result
+			let option: DataOption[] = []
+			data.map((r: DataOption) => {
+				option.push({ id: r.id.toString(), name: r.name.toString() })
+			})
+			districtOptions.value = option
+		})
+		.catch((e) => {
+			messageError($q, e)
+		})
+		.finally(() => {
+			loaderPage(false)
+		})
 }
 
 const getClass = (val: boolean) => {
-  return {
-    'full-width inputgreen cursor-pointer': val,
-    'full-width cursor-pointer': !val
-  }
+	return {
+		'full-width inputgreen cursor-pointer': val,
+		'full-width cursor-pointer': !val
+	}
 }
 
 const idDialog = () => {
-  idModel.value = true
-  cardid2.value = defaultInformation.value.cardid
-  cardid1.value = defaultInformation.value.cardid
+	idModel.value = true
+	cardid2.value = defaultInformation.value.cardid
+	cardid1.value = defaultInformation.value.cardid
 }
 </script>
 
 <style>
 .modalfix {
-  position: fixed !important;
+	position: fixed !important;
 }
 .containerimage {
-  position: relative;
-  width: 100%;
+	position: relative;
+	width: 100%;
 }
 
 .q-img {
-  display: block;
-  width: 100%;
-  max-height: 170px;
-  padding: 1%;
-  border-radius: 8px;
-  border: solid 2px rgba(168, 168, 168, 0.055) !important;
-  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.048), 0 3px 6px 0 rgba(0, 0, 0, 0.097);
+	display: block;
+	width: 100%;
+	max-height: 170px;
+	padding: 1%;
+	border-radius: 8px;
+	border: solid 2px rgba(168, 168, 168, 0.055) !important;
+	box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.048), 0 3px 6px 0 rgba(0, 0, 0, 0.097);
 }
 
 .overlay {
-  position: absolute;
-  bottom: 0;
-  background: rgb(0, 0, 0);
-  background: rgba(0, 0, 0, 0.7);
-  color: #f1f1f1;
-  transition: 0.5s ease;
-  width: 100%;
-  height: 70px;
-  opacity: 0;
-  color: white;
-  text-align: center;
-  cursor: pointer;
-  padding: 5% 0 5% 0;
+	position: absolute;
+	bottom: 0;
+	background: rgb(0, 0, 0);
+	background: rgba(0, 0, 0, 0.7);
+	color: #f1f1f1;
+	transition: 0.5s ease;
+	width: 100%;
+	height: 70px;
+	opacity: 0;
+	color: white;
+	text-align: center;
+	cursor: pointer;
+	padding: 5% 0 5% 0;
 }
 
 .containerimage:hover .overlay {
-  opacity: 1;
+	opacity: 1;
 }
 
 .q-field__bottom {
-  padding: 5px 10px 0px 0px;
+	padding: 5px 10px 0px 0px;
 }
 
 input[type='file'] {
-  display: none;
+	display: none;
 }
 .custom-file-upload {
-  border: 1px solid #ccc;
-  display: inline-block;
-  padding: 6px 12px;
-  cursor: pointer;
+	border: 1px solid #ccc;
+	display: inline-block;
+	padding: 6px 12px;
+	cursor: pointer;
 }
 </style>
diff --git a/src/modules/01_exam/components/Form/Occupation.vue b/src/modules/01_exam/components/Form/Occupation.vue
index 3f958f1..20ceaf3 100644
--- a/src/modules/01_exam/components/Form/Occupation.vue
+++ b/src/modules/01_exam/components/Form/Occupation.vue
@@ -1,141 +1,142 @@
 <!-- card ตำแหน่งปัจจุบัน -->
 <template>
-  <HeaderTop
-    v-model:edit="edit"
-    header="ตำแหน่งปัจจุบัน"
-    icon="mdi-briefcase"
-    :addData="true"
-    :editOnly="false"
-    :editData="false"
-  />
-  <q-form ref="myform">
-    <div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-xs">
-      <div class="col-12">
-        <q-radio
-          v-model="defaultOccupation.positionType"
-          label="ลูกจ้างประจำ"
-          color="teal"
-          val="prem"
-          :disable="!(status == 'register' || status == 'rejectRegister')"
-        />
-        <q-radio
-          v-model="defaultOccupation.positionType"
-          label="ลูกจ้างชั่วคราว"
-          color="teal"
-          val="temp"
-          :disable="!(status == 'register' || status == 'rejectRegister')"
-        />
-        <q-radio
-          v-model="defaultOccupation.positionType"
-          label="ผู้ปฏิบัติงานอื่นในกรุงเทพมหานคร"
-          color="teal"
-          val="other"
-          :disable="!(status == 'register' || status == 'rejectRegister')"
-        />
-      </div>
-      <div class="col-12 row">
-        <div class="col-3">
-          <q-input
-            :class="getClass(status == 'register' || status == 'rejectRegister')"
-            :outlined="status == 'register' || status == 'rejectRegister'"
-            dense
-            lazy-rules
-            autogrow
-            :readonly="!(status == 'register' || status == 'rejectRegister')"
-            :borderless="!(status == 'register' || status == 'rejectRegister')"
-            v-model="defaultOccupation.position"
-            :rules="[(val) => !!val || `${'กรุณากรอก ชื่อตำแหน่ง'}`]"
-            :label="`${'ชื่อตำแหน่ง'}`"
-          />
-        </div>
-        <div class="col-3">
-          <q-input
-            class="q-pl-sm"
-            :class="getClass(status == 'register' || status == 'rejectRegister')"
-            :outlined="status == 'register' || status == 'rejectRegister'"
-            dense
-            lazy-rules
-            type="number"
-            autogrow
-            :readonly="!(status == 'register' || status == 'rejectRegister')"
-            :borderless="!(status == 'register' || status == 'rejectRegister')"
-            v-model="defaultOccupation.salary"
-            :rules="[(val) => !!val || `${'กรุณากรอก เงินเดือน'}`]"
-            :label="`${'เงินเดือน'}`"
-          />
-        </div>
-      </div>
-      <div class="col-12 row">
-        <div class="col-3">
-          <q-input
-            :class="getClass(status == 'register' || status == 'rejectRegister')"
-            :outlined="status == 'register' || status == 'rejectRegister'"
-            dense
-            lazy-rules
-            autogrow
-            :readonly="!(status == 'register' || status == 'rejectRegister')"
-            :borderless="!(status == 'register' || status == 'rejectRegister')"
-            v-model="defaultOccupation.group"
-            :rules="[(val) => !!val || `${'กรุณากรอก กลุ่ม/ฝ่าย'}`]"
-            :label="`${'กลุ่ม/ฝ่าย'}`"
-          />
-        </div>
-        <div class="col-3">
-          <q-input
-            class="q-pl-sm"
-            :class="getClass(status == 'register' || status == 'rejectRegister')"
-            :outlined="status == 'register' || status == 'rejectRegister'"
-            dense
-            lazy-rules
-            autogrow
-            :readonly="!(status == 'register' || status == 'rejectRegister')"
-            :borderless="!(status == 'register' || status == 'rejectRegister')"
-            v-model="defaultOccupation.pile"
-            :rules="[(val) => !!val || `${'กรุณากรอก กอง'}`]"
-            :label="`${'กอง'}`"
-          />
-        </div>
-        <div class="col-3">
-          <q-input
-            class="q-pl-sm"
-            :class="getClass(status == 'register' || status == 'rejectRegister')"
-            :outlined="status == 'register' || status == 'rejectRegister'"
-            dense
-            lazy-rules
-            autogrow
-            :readonly="!(status == 'register' || status == 'rejectRegister')"
-            :borderless="!(status == 'register' || status == 'rejectRegister')"
-            v-model="defaultOccupation.org"
-            :rules="[(val) => !!val || `${'กรุณากรอก สังกัด'}`]"
-            :label="`${'สังกัด'}`"
-          />
-        </div>
-        <div class="col-3">
-          <q-input
-            class="q-pl-sm"
-            :class="getClass(status == 'register' || status == 'rejectRegister')"
-            :outlined="status == 'register' || status == 'rejectRegister'"
-            dense
-            :counter="status == 'register' || status == 'rejectRegister' ? true : false"
-            maxlength="10"
-            lazy-rules
-            type="tel"
-            mask="##########"
-            autogrow
-            :readonly="!(status == 'register' || status == 'rejectRegister')"
-            :borderless="!(status == 'register' || status == 'rejectRegister')"
-            v-model="defaultOccupation.tel"
-            :rules="[
-              (val) => !!val || `${'กรุณากรอก เบอร์โทรที่ทำงาน'}`,
-              (val) => val.length == 10 || `${'กรุณากรอก เบอร์โทรที่ทำงาน'}`,
-              (val) => /^[0-9]*$/.test(val) || 'กรุณากรอก เบอร์โทรที่ทำงานให้ถูกต้อง'
-            ]"
-            :label="`${'เบอร์โทรที่ทำงาน'}`"
-          />
-        </div>
-      </div>
-    </div>
-  </q-form>
+	<HeaderTop
+		v-model:edit="edit"
+		header="ตำแหน่งปัจจุบัน"
+		icon="mdi-briefcase"
+		:addData="true"
+		:editOnly="false"
+		:editData="false"
+	/>
+	<q-form ref="myform">
+		<div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-xs">
+			<div class="col-12">
+				<q-radio
+					v-model="defaultOccupation.positionType"
+					label="ลูกจ้างประจำ"
+					color="teal"
+					val="prem"
+					:disable="!(status == 'register' || status == 'rejectRegister')"
+				/>
+				<q-radio
+					v-model="defaultOccupation.positionType"
+					label="ลูกจ้างชั่วคราว"
+					color="teal"
+					val="temp"
+					:disable="!(status == 'register' || status == 'rejectRegister')"
+				/>
+				<q-radio
+					v-model="defaultOccupation.positionType"
+					label="ผู้ปฏิบัติงานอื่นในกรุงเทพมหานคร"
+					color="teal"
+					val="other"
+					:disable="!(status == 'register' || status == 'rejectRegister')"
+				/>
+			</div>
+			<div class="col-12 row">
+				<div class="col-3">
+					<q-input
+						:class="getClass(status == 'register' || status == 'rejectRegister')"
+						:outlined="status == 'register' || status == 'rejectRegister'"
+						dense
+						lazy-rules
+						autogrow
+						:readonly="!(status == 'register' || status == 'rejectRegister')"
+						:borderless="!(status == 'register' || status == 'rejectRegister')"
+						v-model="defaultOccupation.position"
+						:rules="[(val) => !!val || `${'กรุณากรอก ชื่อตำแหน่ง'}`]"
+						:label="`${'ชื่อตำแหน่ง'}`"
+					/>
+				</div>
+				<div class="col-3">
+					<q-input
+						class="q-pl-sm"
+						:class="getClass(status == 'register' || status == 'rejectRegister')"
+						:outlined="status == 'register' || status == 'rejectRegister'"
+						dense
+						lazy-rules
+						type="number"
+						autogrow
+						:readonly="!(status == 'register' || status == 'rejectRegister')"
+						:borderless="!(status == 'register' || status == 'rejectRegister')"
+						v-model="defaultOccupation.salary"
+						:rules="[(val) => !!val || `${'กรุณากรอก เงินเดือน'}`]"
+						:label="`${'เงินเดือน'}`"
+					/>
+				</div>
+			</div>
+			<div class="col-12 row">
+				<div class="col-3">
+					<q-input
+						:class="getClass(status == 'register' || status == 'rejectRegister')"
+						:outlined="status == 'register' || status == 'rejectRegister'"
+						dense
+						lazy-rules
+						autogrow
+						:readonly="!(status == 'register' || status == 'rejectRegister')"
+						:borderless="!(status == 'register' || status == 'rejectRegister')"
+						v-model="defaultOccupation.group"
+						:rules="[(val) => !!val || `${'กรุณากรอก กลุ่ม/ฝ่าย'}`]"
+						:label="`${'กลุ่ม/ฝ่าย'}`"
+					/>
+				</div>
+				<div class="col-3">
+					<q-input
+						class="q-pl-sm"
+						:class="getClass(status == 'register' || status == 'rejectRegister')"
+						:outlined="status == 'register' || status == 'rejectRegister'"
+						dense
+						lazy-rules
+						autogrow
+						:readonly="!(status == 'register' || status == 'rejectRegister')"
+						:borderless="!(status == 'register' || status == 'rejectRegister')"
+						v-model="defaultOccupation.pile"
+						:rules="[(val) => !!val || `${'กรุณากรอก กอง'}`]"
+						:label="`${'กอง'}`"
+					/>
+				</div>
+				<div class="col-3">
+					<q-input
+						class="q-pl-sm"
+						:class="getClass(status == 'register' || status == 'rejectRegister')"
+						:outlined="status == 'register' || status == 'rejectRegister'"
+						dense
+						lazy-rules
+						autogrow
+						:readonly="!(status == 'register' || status == 'rejectRegister')"
+						:borderless="!(status == 'register' || status == 'rejectRegister')"
+						v-model="defaultOccupation.org"
+						:rules="[(val) => !!val || `${'กรุณากรอก สังกัด'}`]"
+						:label="`${'สังกัด'}`"
+					/>
+				</div>
+				<div class="col-3">
+					<q-input
+						class="q-pl-sm"
+						:class="getClass(status == 'register' || status == 'rejectRegister')"
+						:outlined="status == 'register' || status == 'rejectRegister'"
+						dense
+						:counter="status == 'register' || status == 'rejectRegister' ? true : false"
+						maxlength="10"
+						lazy-rules
+						type="tel"
+						mask="##########"
+						autogrow
+						:readonly="!(status == 'register' || status == 'rejectRegister')"
+						:borderless="!(status == 'register' || status == 'rejectRegister')"
+						v-model="defaultOccupation.tel"
+						:rules="[
+							(val) => !!val || '* กรุณากรอกข้อมูลหมายเลขโทรศัพท์',
+							(val) =>
+								(val.length >= 9 && val.length <= 10 && val.startsWith('0')) ||
+								'กรุณากรอกข้อมูลหมายเลขโทรศัพท์ให้ถูกต้อง'
+						]"
+						:label="`${'เบอร์โทรที่ทำงาน'}`"
+					/>
+				</div>
+			</div>
+		</div>
+	</q-form>
 </template>
 <script setup lang="ts">
 import { ref, onMounted, watch } from 'vue'
@@ -150,14 +151,14 @@ import { defaultOccupation, changeData } from '@/modules/01_exam/interface/index
 import HeaderTop from '@/components/top.vue'
 
 const props = defineProps({
-  status: {
-    type: String,
-    required: true
-  },
-  form: {
-    type: Object,
-    required: true
-  }
+	status: {
+		type: String,
+		required: true
+	},
+	form: {
+		type: Object,
+		required: true
+	}
 })
 const emit = defineEmits(['update:form'])
 
@@ -173,46 +174,46 @@ const examId = ref<string>(route.params.id.toString())
 const positionId = ref<string>(route.params.positionId.toString())
 
 watch(myform, async (count: any, prevCount: any) => {
-  emit('update:form', count)
+	emit('update:form', count)
 })
 
 watch(defaultOccupation, async (count: Occupation, prevCount: Occupation) => {
-  await changeData('occupation', count)
+	await changeData('occupation', count)
 })
 
 onMounted(async () => {
-  await fetchData()
+	await fetchData()
 })
 
 const fetchData = async () => {
-  loaderPage(true)
-  await http
-    .get(config.API.candidateOccupation(examId.value, positionId.value))
-    .then((res) => {
-      const data = res.data.result
-      if (data != null) {
-        defaultOccupation.value.org = data.occupationOrg
-        defaultOccupation.value.pile = data.occupationPile
-        defaultOccupation.value.group = data.occupationGroup
-        defaultOccupation.value.salary = data.occupationSalary
-        defaultOccupation.value.position = data.occupationPosition
-        defaultOccupation.value.positionType =
-          data.occupationPositionType == null ? 'other' : data.occupationPositionType
-        defaultOccupation.value.tel = data.occupationTelephone
-      }
-    })
-    .catch((e) => {
-      messageError($q, e)
-    })
-    .finally(() => {
-      loaderPage(false)
-    })
+	loaderPage(true)
+	await http
+		.get(config.API.candidateOccupation(examId.value, positionId.value))
+		.then((res) => {
+			const data = res.data.result
+			if (data != null) {
+				defaultOccupation.value.org = data.occupationOrg
+				defaultOccupation.value.pile = data.occupationPile
+				defaultOccupation.value.group = data.occupationGroup
+				defaultOccupation.value.salary = data.occupationSalary
+				defaultOccupation.value.position = data.occupationPosition
+				defaultOccupation.value.positionType =
+					data.occupationPositionType == null ? 'other' : data.occupationPositionType
+				defaultOccupation.value.tel = data.occupationTelephone
+			}
+		})
+		.catch((e) => {
+			messageError($q, e)
+		})
+		.finally(() => {
+			loaderPage(false)
+		})
 }
 
 const getClass = (val: boolean) => {
-  return {
-    'full-width inputgreen cursor-pointer': val,
-    'full-width cursor-pointer': !val
-  }
+	return {
+		'full-width inputgreen cursor-pointer': val,
+		'full-width cursor-pointer': !val
+	}
 }
 </script>