From 3dcdba77a6e3f3c9f7c2972cba62eb588134b038 Mon Sep 17 00:00:00 2001
From: Kittapath <kittapath@frappet.com>
Date: Wed, 5 Apr 2023 00:59:05 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1?=
 =?UTF-8?q?=20Ui=20=E0=B8=95=E0=B8=B3=E0=B9=81=E0=B8=AB=E0=B8=99=E0=B9=88?=
 =?UTF-8?q?=E0=B8=87=E0=B8=95=E0=B8=AD=E0=B8=99=E0=B8=AA=E0=B8=A3=E0=B9=89?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=87=E0=B8=A3=E0=B8=AD=E0=B8=9A=E0=B8=AA=E0=B8=A1?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=84=E0=B8=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/exam/api.candidate.ts                 |  34 +-
 .../01_exam/components/ExamFinished.vue       | 130 ++++----
 src/modules/01_exam/components/ExamForm.vue   |   5 +-
 .../01_exam/components/ExamPayment.vue        | 304 ++++++++++--------
 .../01_exam/components/Form/Address.vue       |  11 +-
 .../01_exam/components/Form/Career.vue        |   5 +-
 .../01_exam/components/Form/Education.vue     |   5 +-
 .../01_exam/components/Form/Family.vue        |   3 +-
 .../01_exam/components/Form/Information.vue   |   3 +-
 .../01_exam/components/Form/Occupation.vue    |   3 +-
 src/modules/01_exam/router.ts                 |   2 +-
 src/modules/01_exam/views/ExamDetail.vue      |  46 ++-
 src/stores/mixin.ts                           |  28 +-
 src/views/MainLayout.vue                      | 114 ++++---
 14 files changed, 420 insertions(+), 273 deletions(-)

diff --git a/src/api/exam/api.candidate.ts b/src/api/exam/api.candidate.ts
index a1a235b..18bd1e8 100644
--- a/src/api/exam/api.candidate.ts
+++ b/src/api/exam/api.candidate.ts
@@ -3,17 +3,29 @@ const candidate = `${env.API_URI}/candidate/`
 const periodExam = `${env.API_URI}/period-exam/`
 
 export default {
-  candidateInformation: (examId: string) => `${candidate}information/${examId}`,
-  candidateAddress: (examId: string) => `${candidate}address/${examId}`,
-  candidateFamily: (examId: string) => `${candidate}family/${examId}`,
-  candidateOccupation: (examId: string) => `${candidate}occupation/${examId}`,
-  candidateEducation: (examId: string) => `${candidate}education/${examId}`,
-  candidateCareer: (examId: string) => `${candidate}career/${examId}`,
-  candidateCheckCreate: (examId: string) => `${candidate}check/${examId}`,
-  candidateRegister: (examId: string) => `${candidate}register/${examId}`,
-  candidatePayment: (examId: string) => `${candidate}payment/${examId}`,
-  candidateStatus: (examId: string) => `${candidate}status/${examId}`,
+  candidateInformation: (examId: string, positionId: string) =>
+    `${candidate}information/${examId}/${positionId}`,
+  candidateAddress: (examId: string, positionId: string) =>
+    `${candidate}address/${examId}/${positionId}`,
+  candidateFamily: (examId: string, positionId: string) =>
+    `${candidate}family/${examId}/${positionId}`,
+  candidateOccupation: (examId: string, positionId: string) =>
+    `${candidate}occupation/${examId}/${positionId}`,
+  candidateEducation: (examId: string, positionId: string) =>
+    `${candidate}education/${examId}/${positionId}`,
+  candidateCareer: (examId: string, positionId: string) =>
+    `${candidate}career/${examId}/${positionId}`,
+  candidateCheckCreate: (examId: string, positionId: string) =>
+    `${candidate}check/${examId}/${positionId}`,
+  candidateRegister: (examId: string, positionId: string) =>
+    `${candidate}register/${examId}/${positionId}`,
+  candidatePayment: (examId: string, positionId: string) =>
+    `${candidate}payment-image/${examId}/${positionId}`,
+  candidateProfile: (examId: string, positionId: string) =>
+    `${candidate}profile-image/${examId}/${positionId}`,
+  candidateStatus: (examId: string, positionId: string) =>
+    `${candidate}status/${examId}/${positionId}`,
   periodExamId: (examId: string) => `${periodExam}${examId}`,
-  candidateId: (examId: string) => `${candidate}${examId}`,
+  candidateId: (examId: string, positionId: string) => `${candidate}${examId}/${positionId}`,
   candidate
 }
diff --git a/src/modules/01_exam/components/ExamFinished.vue b/src/modules/01_exam/components/ExamFinished.vue
index 6afbd41..9f71380 100644
--- a/src/modules/01_exam/components/ExamFinished.vue
+++ b/src/modules/01_exam/components/ExamFinished.vue
@@ -1,67 +1,77 @@
 <template>
-    <div class="q-pa-md row items-center justify-center">
-      <div  class="col-xs-12 col-sm-8 col-md-6">
-        <q-card flat class="q-pa-md q-mb-sm" :class="getClass(status)">
-          <div v-if="status != 'done'" class="text-orange-6 text-bold">
-            <q-icon name="mdi-timer-sand" size="22px" color="orange-5" class="q-mr-sm" />เจ้าหน้าที่กำลังตรวจสถานที่สอบ
-          </div>
-          <div v-else class="text-green-6 text-bold">
-            <q-icon name="mdi-checkbox-marked-circle-outline" size="22px" color="green" class="q-mr-sm" />สมัครสอบสำเร็จ
-          </div>
-        </q-card>
+  <div class="q-pa-md row items-center justify-center">
+    <div class="col-xs-12 col-sm-8 col-md-6">
+      <q-card flat class="q-pa-md q-mb-sm" :class="getClass(status)">
+        <div v-if="status != 'done' && status != 'checkPoint'" class="text-orange-6 text-bold">
+          <q-icon
+            name="mdi-timer-sand"
+            size="22px"
+            color="orange-5"
+            class="q-mr-sm"
+          />เจ้าหน้าที่กำลังตรวจสถานที่สอบ
+        </div>
+        <div v-else class="text-green-6 text-bold">
+          <q-icon
+            name="mdi-checkbox-marked-circle-outline"
+            size="22px"
+            color="green"
+            class="q-mr-sm"
+          />สมัครสอบสำเร็จ
+        </div>
+      </q-card>
 
-        <q-card bordered flat class="col-12 row">
-          <div class="text-bold col-12 row q-px-md q-py-sm items-center bg-grey-2">
-            บัตรประจำตัวผู้สอบ
-            <q-space />
-            <q-btn dense size="12px" flat color="primary" @click="download" icon="mdi-download">
-              <q-tooltip>พิมพ์บัตรประจำตัวผู้สอบ</q-tooltip>
-            </q-btn>
+      <q-card bordered flat class="col-12 row">
+        <div class="text-bold col-12 row q-px-md q-py-sm items-center bg-grey-2">
+          บัตรประจำตัวผู้สอบ
+          <q-space />
+          <q-btn dense size="12px" flat color="primary" @click="download" icon="mdi-download">
+            <q-tooltip>พิมพ์บัตรประจำตัวผู้สอบ</q-tooltip>
+          </q-btn>
+        </div>
+        <div class="col-8 q-pa-md">
+          <div class="q-pt-xs row">
+            <div class="">ชื่อ :</div>
+            <div class="text-black text-bold q-pl-sm">{{ fullName }}</div>
           </div>
-          <div class="col-8  q-pa-md">
-            <div class="q-pt-xs row">
-              <div class="">ชื่อ :</div>
-              <div class="text-black text-bold q-pl-sm">{{ fullName }}</div>
-            </div>
-            <div class="q-pt-xs row">
-              <div class="">เลขประจำตัวสอบ :</div>
-              <div class="text-black text-bold q-pl-sm">{{ examNumber }}</div>
-            </div>
-            <div class="q-pt-xs row">
-              <div class="">เลขประจำตัวประชาชน :</div>
-              <div class="text-black q-pl-sm">{{ citizenId }}</div>
-            </div>
-            <div class="q-pt-xs row">
-              <div class="">เวลาสอบ :</div>
-              <div class="text-black q-pl-sm">{{ examTime }}</div>
-            </div>
-            <div class="q-pt-xs row">
-              <div class="">สถานที่สอบ :</div>
-              <div class="text-black q-pl-sm">{{ examLocation }}</div>
-            </div>
-            <div class="q-pt-xs row">
-              <div class="">ชั้นที่ :</div>
-              <div class="text-black q-pl-sm">{{ floor }}</div>
-            </div>
-            <div class="q-pt-xs row">
-              <div class="">ห้องสอบ :</div>
-              <div class="text-black q-pl-sm">{{ examRoom }}</div>
-            </div>
-            <div class="q-pt-xs row">
-              <div class="">เลขที่นั่ง :</div>
-              <div class="text-black q-pl-sm">{{ seatNumber }}</div>
-            </div>
+          <div class="q-pt-xs row">
+            <div class="">เลขประจำตัวสอบ :</div>
+            <div class="text-black text-bold q-pl-sm">{{ examNumber }}</div>
           </div>
+          <div class="q-pt-xs row">
+            <div class="">เลขประจำตัวประชาชน :</div>
+            <div class="text-black q-pl-sm">{{ citizenId }}</div>
+          </div>
+          <div class="q-pt-xs row">
+            <div class="">เวลาสอบ :</div>
+            <div class="text-black q-pl-sm">{{ examTime }}</div>
+          </div>
+          <div class="q-pt-xs row">
+            <div class="">สถานที่สอบ :</div>
+            <div class="text-black q-pl-sm">{{ examLocation }}</div>
+          </div>
+          <div class="q-pt-xs row">
+            <div class="">ชั้นที่ :</div>
+            <div class="text-black q-pl-sm">{{ floor }}</div>
+          </div>
+          <div class="q-pt-xs row">
+            <div class="">ห้องสอบ :</div>
+            <div class="text-black q-pl-sm">{{ examRoom }}</div>
+          </div>
+          <div class="q-pt-xs row">
+            <div class="">เลขที่นั่ง :</div>
+            <div class="text-black q-pl-sm">{{ seatNumber }}</div>
+          </div>
+        </div>
 
-          <q-card-section class="col-4 flex flex-center">
-            <q-img
-              class="rounded-borders"
-              src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8cGVyc29ufGVufDB8fDB8fA%3D%3D&w=1000&q=80"
-              :ratio="1"
-              style="max-width: 300px; max-height: 300px"
-            />
-          </q-card-section>
-        </q-card>
+        <q-card-section class="col-4 flex flex-center">
+          <q-img
+            class="rounded-borders"
+            src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8cGVyc29ufGVufDB8fDB8fA%3D%3D&w=1000&q=80"
+            :ratio="1"
+            style="max-width: 300px; max-height: 300px"
+          />
+        </q-card-section>
+      </q-card>
     </div>
     <!-- <q-btn color="positive" @click="testChangeStatus">จัดที่นั่ง</q-btn> -->
   </div>
@@ -92,7 +102,7 @@ const seatNumber = ref<string>('75')
 
 const download = () => {}
 const getClass = (val: string) => {
-  return val == 'done' ? 'bg-green-1' : 'bg-yellow-2'
+  return val == 'done' || val == 'checkPoint' ? 'bg-green-1' : 'bg-yellow-2'
 }
 </script>
 
diff --git a/src/modules/01_exam/components/ExamForm.vue b/src/modules/01_exam/components/ExamForm.vue
index 3519d70..6f59083 100644
--- a/src/modules/01_exam/components/ExamForm.vue
+++ b/src/modules/01_exam/components/ExamForm.vue
@@ -74,6 +74,7 @@ const statusEdit = ref<boolean>(false)
 const acceptTermOfUse = ref<boolean>(false)
 const route = useRoute()
 const examId = ref<string>(route.params.id.toString())
+const positionId = ref<string>(route.params.positionId.toString())
 const formInformation = ref<any>({})
 const formAddress = ref<any>({})
 const formFamily = ref<any>({})
@@ -102,7 +103,7 @@ const saveForm = async () => {
   //saveform
   loader.value = true
   await http
-    .get(config.API.candidateRegister(examId.value))
+    .get(config.API.candidateRegister(examId.value, positionId.value))
     .then(() => {
       success($q, 'สมัครสอบสำเร็จสำเร็จ')
     })
@@ -135,7 +136,7 @@ const saveData = async () => {
                     type.value = defaultOccupation.value.other
                   loader.value = true
                   await http
-                    .post(config.API.candidateId(examId.value), {
+                    .post(config.API.candidateId(examId.value, positionId.value), {
                       prefixId: defaultInformation.value.prefixId,
                       lastName: defaultInformation.value.lastname,
                       citizenProvinceId: defaultInformation.value.provinceId,
diff --git a/src/modules/01_exam/components/ExamPayment.vue b/src/modules/01_exam/components/ExamPayment.vue
index 6c1d4c2..76d2d0d 100644
--- a/src/modules/01_exam/components/ExamPayment.vue
+++ b/src/modules/01_exam/components/ExamPayment.vue
@@ -1,138 +1,159 @@
 <template>
   <div class="col-12">
     <div class="row q-px-sm">
-        <div class="text-bold text-subtitle1 q-pb-md">เลือกวีธีการชำระเงิน</div>
-        <div class="row col-12 q-gutter-y-md q-mb-lg">
-          <q-list bordered class="col-12 rounded-borders">
-            <q-item tag="label" v-ripple class="q-pa-md">
-              <q-item-section avatar>
-                <q-icon name="mdi-cellphone-settings" color="positive" size="30px" />
-              </q-item-section>
-              <q-item-section>
-                <q-item-label class="text-weight-medium text-subtitle1">โอนเงินผ่านมือถือ</q-item-label>
-                <q-item-label caption class="gt-xs">อนุมัติหลังแจ้งการโอนภายใน 24 ชั่วโมง</q-item-label>
-              </q-item-section>
-              <q-item-section avatar class="gt-xs">
-                <q-avatar size="32px">
-                  <q-img src="@/assets/krungthai.png" class="col-12"/>
-                </q-avatar>
-              </q-item-section>
-              <q-item-section side>
-                <q-radio v-model="pay" val="teal" color="blue" />
-              </q-item-section>
-            </q-item> 
-            <q-separator v-show="pay == 'teal'" />
-            <q-slide-transition :duration="100" class="">
-              <div v-show="pay == 'teal'" class="q-pa-md bg-grey-1">
-                <div class="row q-col-gutter-sm">
-                  <div class=" col-xs-12 col-sm-7">
-                    <q-card bordered class="items-start q-pa-md row q-mb-sm" style="height: 300px">
-                      <div class="row col-12">
-                        <div class="col-12 row no-wrap items-center">
-                          <q-avatar size="50px">
-                            <q-img src="@/assets/krungthai.png"/>
-                          </q-avatar>
-                          <div class="column q-pl-md">
-                            <strong>ธนาคารกรุงไทย</strong>
-                            สำนักงานทรัพยากรบุคคล 
-                            <div>387-3-94793-0</div>
-                          </div>
-                        </div>
-                        <div class="col-12">
-                          <q-separator class="q-my-md"/>
-                          <div class="q-pb-sm">
-                            <span class="text-weight-medium">ชื่อบัญชี :</span>
-                            <span class="text-blue q-pl-sm">สำนักงานทรัพยากรบุคคล</span>
-                          </div>
-                          <div class="q-pb-sm">
-                            <span class="text-weight-medium">ธนาคารกรุงไทย :</span>
-                            <span class="text-blue q-pl-sm"> 387-3-94793-0</span>
-                          </div>
-                          <div class="q-pb-sm">
-                            <span class="text-weight-medium">รหัสใบสั่งซื้อ :</span>
-                            <span class="text-blue q-pl-sm">12837495985900</span>
-                          </div>
-                          <div>
-                            <span class="text-weight-medium">ยอดสุทธิ (บาท) :</span>
-                            <span class="text-blue q-pl-sm text-bold">200.00</span>
-                          </div>
-                        </div>
-                        <div class="col-12 text-grey-6 q-mt-xl">
-                          ** ถ้าต้องการเเก้ไขหลักฐานการโอนเงิน กรุณาอัปโหลดซ้ำ
+      <div class="text-bold text-subtitle1 q-pb-md">เลือกวีธีการชำระเงิน</div>
+      <div class="row col-12 q-gutter-y-md q-mb-lg">
+        <q-list bordered class="col-12 rounded-borders">
+          <q-item tag="label" v-ripple class="q-pa-md">
+            <q-item-section avatar>
+              <q-icon name="mdi-cellphone-settings" color="positive" size="30px" />
+            </q-item-section>
+            <q-item-section>
+              <q-item-label class="text-weight-medium text-subtitle1"
+                >โอนเงินผ่านมือถือ</q-item-label
+              >
+              <q-item-label caption class="gt-xs"
+                >อนุมัติหลังแจ้งการโอนภายใน 24 ชั่วโมง</q-item-label
+              >
+            </q-item-section>
+            <q-item-section avatar class="gt-xs">
+              <q-avatar size="32px">
+                <q-img src="@/assets/krungthai.png" class="col-12" />
+              </q-avatar>
+            </q-item-section>
+            <q-item-section side>
+              <q-radio v-model="pay" val="teal" color="blue" />
+            </q-item-section>
+          </q-item>
+          <q-separator v-show="pay == 'teal'" />
+          <q-slide-transition :duration="100" class="">
+            <div v-show="pay == 'teal'" class="q-pa-md bg-grey-1">
+              <div class="row q-col-gutter-sm">
+                <div class="col-xs-12 col-sm-7">
+                  <q-card bordered class="items-start q-pa-md row q-mb-sm" style="height: 300px">
+                    <div class="row col-12">
+                      <div class="col-12 row no-wrap items-center">
+                        <q-avatar size="50px">
+                          <q-img src="@/assets/krungthai.png" />
+                        </q-avatar>
+                        <div class="column q-pl-md">
+                          <strong>ธนาคารกรุงไทย</strong>
+                          สำนักงานทรัพยากรบุคคล
+                          <div>387-3-94793-0</div>
                         </div>
                       </div>
-                     </q-card>
-                  </div>
-                  <div class=" col-xs-12 col-sm-5">
-                    <label for="file-upload" class="col-12 row"><!-- :src="img" -->
-                        <q-img src="@/assets/ex_slip.jpeg" fit="contain" style="min-height: 300px; max-height: 300px;" class="col-12 bg-white">
-                        <div class="absolute-bottom text-center">หลักฐานชำระเงิน</div>
-                        </q-img> 
-                    </label>
-                    <input id="file-upload" type="file" />
-                  </div>
+                      <div class="col-12">
+                        <q-separator class="q-my-md" />
+                        <div class="q-pb-sm">
+                          <span class="text-weight-medium">ชื่อบัญชี :</span>
+                          <span class="text-blue q-pl-sm">สำนักงานทรัพยากรบุคคล</span>
+                        </div>
+                        <div class="q-pb-sm">
+                          <span class="text-weight-medium">ธนาคารกรุงไทย :</span>
+                          <span class="text-blue q-pl-sm"> 387-3-94793-0</span>
+                        </div>
+                        <div class="q-pb-sm">
+                          <span class="text-weight-medium">รหัสใบสั่งซื้อ :</span>
+                          <span class="text-blue q-pl-sm">12837495985900</span>
+                        </div>
+                        <div>
+                          <span class="text-weight-medium">ยอดสุทธิ (บาท) :</span>
+                          <span class="text-blue q-pl-sm text-bold">200.00</span>
+                        </div>
+                      </div>
+                      <div class="col-12 text-grey-6 q-mt-xl">
+                        ** ถ้าต้องการเเก้ไขหลักฐานการโอนเงิน กรุณาอัปโหลดซ้ำ
+                      </div>
+                    </div>
+                  </q-card>
+                </div>
+                <div class="col-xs-12 col-sm-5">
+                  <label for="file-upload" class="col-12 row"
+                    ><!-- :src="img" -->
+                    <q-img
+                      src="@/assets/ex_slip.jpeg"
+                      fit="contain"
+                      style="min-height: 300px; max-height: 300px"
+                      class="col-12 bg-white"
+                    >
+                      <div class="absolute-bottom text-center">หลักฐานชำระเงิน</div>
+                    </q-img>
+                  </label>
+                  <input id="file-upload" type="file" />
                 </div>
               </div>
-            </q-slide-transition>
-          </q-list>
+            </div>
+          </q-slide-transition>
+        </q-list>
 
-          <q-list bordered class="col-12 rounded-borders">
-            <q-item tag="label" v-ripple class="q-pa-md">
-              <q-item-section avatar>
-                <q-icon name="mdi-cash" color="positive" size="30px" />
-              </q-item-section>
-              <q-item-section>
-                <q-item-label class="text-weight-medium text-subtitle1">โอนเงินผ่านทางเครื่อง ATM / เคาน์เตอร์ธนาคาร</q-item-label>
-                <q-item-label caption class="gt-xs">อนุมัติทันทีหลังชำระ</q-item-label>
-              </q-item-section>
-              <q-item-section avatar class="gt-xs">
-                <q-avatar size="32px">
-                  <q-img src="@/assets/krungthai.png" class="col-12"/>
-                </q-avatar>
-              </q-item-section>
-              <q-item-section side>
-                <q-radio v-model="pay" val="orange" color="blue" />
-              </q-item-section>
-            </q-item>
-            <q-separator v-show="pay == 'orange'" />
-            <q-slide-transition :duration="100">
-              <div v-show="pay == 'orange'" class="q-pa-md bg-grey-1">
-                <q-card bordered class="q-pa-md">
-                  <div class="q-pb-sm">
-                    <span class="text-weight-medium">รหัสใบสั่งซื้อ :</span>
-                    <span class="text-blue q-pl-sm">12837495985900</span>
-                  </div>
-                  <div>
-                    <span class="text-weight-medium">ยอดสุทธิ (บาท) :</span>
-                    <span class="text-blue q-pl-sm text-bold">200.00</span>
-                  </div>
-                  <q-btn
-                      color="blue"
-                      icon="print"
-                      class="q-px-md q-mt-md"
-                      outline
-                      dense
-                      label="พิมพ์ใบแจ้งการชำระเงิน"
-                    />
-                </q-card>
-                <div class="q-pt-md q-pb-xs text-bold">ธนาคารกรุงไทย</div>
-                <div class="q-pb-md">สอดบัตร ATM กดรหัสและเลือกรายการ</div>
-                <ul class="q-gutter-y-sm">
-                  <li>ขั้นที่ 1 บริการอื่นๆ</li>
-                  <li>ขั้นที่ 2 ชำระค่าบริการ</li>
-                  <li>ขั้นที่ 3 ระบุรหัสบริษัท</li>
-                  <li>ขั้นที่ 4 เลือกบัญชีผู้ชำระเงิน คือ บัญชีของตัวท่านว่าเป็นบัญชีออมทรัพย์ หรือ กระแสรายวัน</li>
-                  <li>ขั้นที่ 5 ใส่รหัสบริษัทฯ คือ <span class="text-blue text-bold">2111</span> และ ใส่ Ref No.1 ขั้นด้วยเครื่องหมายจุด ( . ) แล้วตามด้วย Ref No.2 (ดูใน "ใบแจ้งการชำระเงิน")</li>
-                  <li>ยกตัวอย่างเช่น ถ้า Ref No.1 คือ 012345 และ Ref No.2 คือ 308833ต้องใส่ เป็น 012345.308833</li>
-                  <li>ขั้นที่ 6 ใส่จำนวนเงินที่ชำระรวมหน่วยสตางค์</li>
-                  <li>ขั้นที่ 7 ตรวจสอบรายการ</li>
-                </ul>
-                
-              </div>
-            </q-slide-transition>
-          </q-list>
-        </div>
-        <!-- <q-card flat class="q-pa-md text-left row q-mb-md" :class="getClass(status)">
+        <q-list bordered class="col-12 rounded-borders">
+          <q-item tag="label" v-ripple class="q-pa-md">
+            <q-item-section avatar>
+              <q-icon name="mdi-cash" color="positive" size="30px" />
+            </q-item-section>
+            <q-item-section>
+              <q-item-label class="text-weight-medium text-subtitle1"
+                >โอนเงินผ่านทางเครื่อง ATM / เคาน์เตอร์ธนาคาร</q-item-label
+              >
+              <q-item-label caption class="gt-xs">อนุมัติทันทีหลังชำระ</q-item-label>
+            </q-item-section>
+            <q-item-section avatar class="gt-xs">
+              <q-avatar size="32px">
+                <q-img src="@/assets/krungthai.png" class="col-12" />
+              </q-avatar>
+            </q-item-section>
+            <q-item-section side>
+              <q-radio v-model="pay" val="orange" color="blue" />
+            </q-item-section>
+          </q-item>
+          <q-separator v-show="pay == 'orange'" />
+          <q-slide-transition :duration="100">
+            <div v-show="pay == 'orange'" class="q-pa-md bg-grey-1">
+              <q-card bordered class="q-pa-md">
+                <div class="q-pb-sm">
+                  <span class="text-weight-medium">รหัสใบสั่งซื้อ :</span>
+                  <span class="text-blue q-pl-sm">12837495985900</span>
+                </div>
+                <div>
+                  <span class="text-weight-medium">ยอดสุทธิ (บาท) :</span>
+                  <span class="text-blue q-pl-sm text-bold">200.00</span>
+                </div>
+                <q-btn
+                  color="blue"
+                  icon="print"
+                  class="q-px-md q-mt-md"
+                  outline
+                  dense
+                  label="พิมพ์ใบแจ้งการชำระเงิน"
+                />
+              </q-card>
+              <div class="q-pt-md q-pb-xs text-bold">ธนาคารกรุงไทย</div>
+              <div class="q-pb-md">สอดบัตร ATM กดรหัสและเลือกรายการ</div>
+              <ul class="q-gutter-y-sm">
+                <li>ขั้นที่ 1 บริการอื่นๆ</li>
+                <li>ขั้นที่ 2 ชำระค่าบริการ</li>
+                <li>ขั้นที่ 3 ระบุรหัสบริษัท</li>
+                <li>
+                  ขั้นที่ 4 เลือกบัญชีผู้ชำระเงิน คือ บัญชีของตัวท่านว่าเป็นบัญชีออมทรัพย์ หรือ
+                  กระแสรายวัน
+                </li>
+                <li>
+                  ขั้นที่ 5 ใส่รหัสบริษัทฯ คือ <span class="text-blue text-bold">2111</span> และ ใส่
+                  Ref No.1 ขั้นด้วยเครื่องหมายจุด ( . ) แล้วตามด้วย Ref No.2 (ดูใน
+                  "ใบแจ้งการชำระเงิน")
+                </li>
+                <li>
+                  ยกตัวอย่างเช่น ถ้า Ref No.1 คือ 012345 และ Ref No.2 คือ 308833ต้องใส่ เป็น
+                  012345.308833
+                </li>
+                <li>ขั้นที่ 6 ใส่จำนวนเงินที่ชำระรวมหน่วยสตางค์</li>
+                <li>ขั้นที่ 7 ตรวจสอบรายการ</li>
+              </ul>
+            </div>
+          </q-slide-transition>
+        </q-list>
+      </div>
+      <!-- <q-card flat class="q-pa-md text-left row q-mb-md" :class="getClass(status)">
           <div class="text-bold col-12" :class="getFontColor(status)">
             {{ message(status) }}
           </div>
@@ -141,7 +162,7 @@
           </div>
         </q-card> -->
 
-        <!-- <q-file
+      <!-- <q-file
           borderless
           v-model="fileData"
           stack-label
@@ -152,9 +173,9 @@
             <div class="absolute-bottom text-center">หลักฐานชำระเงิน</div>
           </q-img>
         </q-file> -->
-      </div>
     </div>
-    <!-- <div class="q-pa-md text-center col-12" v-if="status == 'payment' || status == 'rejectPayment'">
+  </div>
+  <!-- <div class="q-pa-md text-center col-12" v-if="status == 'payment' || status == 'rejectPayment'">
       <q-btn
         
         color="primary"
@@ -165,13 +186,13 @@
     <div class="text-black text-center q-pb-lg q-pt-sm col-12 text-deep-orange">
       <q-icon name="mdi-alert" size="18px" color="deep-orange" class="q-mr-sm" />ถ้าต้องการเเก้ไขหลักฐานการโอนเงินกรุณาอัปโหลดซ้ำ
     </div> -->
-    <div class="row col-12 justify-center">
-      <q-btn
-          :color="pay === null ? 'grey': 'primary'"
-          :disable="pay === null"
-          style="width: 200px;"
-          label="แจ้งการชำระเงิน"
-        />
+  <div class="row col-12 justify-center">
+    <q-btn
+      :color="pay === null ? 'grey' : 'primary'"
+      :disable="pay === null"
+      style="width: 200px"
+      label="แจ้งการชำระเงิน"
+    />
   </div>
 </template>
 
@@ -204,6 +225,7 @@ const loader = ref<boolean>(false)
 const pay = ref(null)
 const route = useRoute()
 const examId = ref<string>(route.params.id.toString())
+const positionId = ref<string>(route.params.positionId.toString())
 
 const uploadImg = (file: any) => {
   fileData.value = null
@@ -216,7 +238,7 @@ const uploadImg = (file: any) => {
 const clickPayment = async () => {
   loader.value = true
   await http
-    .get(config.API.candidatePayment(examId.value))
+    .get(config.API.candidatePayment(examId.value, positionId.value))
     .then(() => {
       success($q, 'ส่งหลักฐานชำระเงินสำเร็จ')
     })
@@ -235,6 +257,8 @@ const getClass = (val: string) => {
       return 'bg-red-2'
     case 'checkSeat':
       return 'bg-light-green-3'
+    case 'checkPoint':
+      return 'bg-light-green-3'
     case 'done':
       return 'bg-light-green-3'
     default:
@@ -251,6 +275,8 @@ const message = (val: string) => {
       return 'หลักฐานการชำระเงินผิดพลาด'
     case 'checkSeat':
       return 'ตรวจสอบเเล้ว'
+    case 'checkPoint':
+      return 'ตรวจสอบเเล้ว'
     case 'done':
       return 'ตรวจสอบเเล้ว'
     default:
@@ -267,6 +293,8 @@ const getFontColor = (val: string) => {
       return 'text-red-12'
     case 'checkSeat':
       return 'text-green'
+    case 'checkPoint':
+      return 'text-green'
     case 'done':
       return 'text-green'
     default:
diff --git a/src/modules/01_exam/components/Form/Address.vue b/src/modules/01_exam/components/Form/Address.vue
index 1c6277c..2ae8370 100644
--- a/src/modules/01_exam/components/Form/Address.vue
+++ b/src/modules/01_exam/components/Form/Address.vue
@@ -97,8 +97,12 @@
         />
       </div>
       <div class="col-xs-12 q-gutter-sm items-center flex q-mb-sm row">
-        <div class="text-bold" v-if="$q.screen.gt.xs">ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน</div>
-        <div class="text-bold col-12 q-pt-sm" v-else>ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน</div>
+        <div class="text-bold" v-if="$q.screen.gt.xs">
+          ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน
+        </div>
+        <div class="text-bold col-12 q-pt-sm" v-else>
+          ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน
+        </div>
         <q-radio
           v-model="defaultAddress.same"
           checked-icon="task_alt"
@@ -233,6 +237,7 @@ const props = defineProps({
 
 const route = useRoute()
 const examId = ref<string>(route.params.id.toString())
+const positionId = ref<string>(route.params.positionId.toString())
 const edit = ref<boolean>(true)
 const myform = ref<any>({})
 const loader = ref<boolean>(false)
@@ -266,7 +271,7 @@ onMounted(async () => {
 const fetchData = async () => {
   //   loader.value = true;
   await http
-    .get(config.API.candidateAddress(examId.value))
+    .get(config.API.candidateAddress(examId.value, positionId.value))
     .then((res) => {
       const data = res.data.result
       defaultAddress.value.address = data.registAddress
diff --git a/src/modules/01_exam/components/Form/Career.vue b/src/modules/01_exam/components/Form/Career.vue
index 95183c4..44976ae 100644
--- a/src/modules/01_exam/components/Form/Career.vue
+++ b/src/modules/01_exam/components/Form/Career.vue
@@ -224,6 +224,7 @@ const editRow = ref<boolean>(false) //เช็คมีการแก้ไข
 const checkValidate = ref<boolean>(false) //validate data ผ่านหรือไม่
 const route = useRoute()
 const examId = ref<string>(route.params.id.toString())
+const positionId = ref<string>(route.params.positionId.toString())
 const rows = ref<RequestItemsObject[]>([])
 const filter = ref<string>('') //search data table
 
@@ -292,7 +293,7 @@ onMounted(async () => {
 const fetchData = async () => {
   loader.value = true
   await http
-    .get(config.API.candidateCareer(examId.value))
+    .get(config.API.candidateCareer(examId.value, positionId.value))
     .then((res) => {
       const data = res.data.result
       rows.value = []
@@ -429,7 +430,7 @@ const clickSave = async () => {
 const saveData = async () => {
   loader.value = true
   await http
-    .post(config.API.candidateCareer(examId.value), {
+    .post(config.API.candidateCareer(examId.value, positionId.value), {
       name: location.value,
       position: position.value,
       salary: salary.value,
diff --git a/src/modules/01_exam/components/Form/Education.vue b/src/modules/01_exam/components/Form/Education.vue
index edfaf93..2ccd744 100644
--- a/src/modules/01_exam/components/Form/Education.vue
+++ b/src/modules/01_exam/components/Form/Education.vue
@@ -229,6 +229,7 @@ const checkValidate = ref<boolean>(false) //validate data ผ่านหรื
 const rows = ref<RequestItemsObject[]>([])
 const route = useRoute()
 const examId = ref<string>(route.params.id.toString())
+const positionId = ref<string>(route.params.positionId.toString())
 const filter = ref<string>('') //search data table
 
 const visibleColumns = ref<String[]>([])
@@ -297,7 +298,7 @@ onMounted(async () => {
 const fetchData = async () => {
   loader.value = true
   await http
-    .get(config.API.candidateEducation(examId.value))
+    .get(config.API.candidateEducation(examId.value, positionId.value))
     .then((res) => {
       const data = res.data.result
       rows.value = []
@@ -455,7 +456,7 @@ const clickSave = async () => {
 const saveData = async () => {
   loader.value = true
   await http
-    .post(config.API.candidateEducation(examId.value), {
+    .post(config.API.candidateEducation(examId.value, positionId.value), {
       educationLevelId: educationLevelId.value,
       major: major.value,
       scores: scores.value,
diff --git a/src/modules/01_exam/components/Form/Family.vue b/src/modules/01_exam/components/Form/Family.vue
index 433b310..11890e8 100644
--- a/src/modules/01_exam/components/Form/Family.vue
+++ b/src/modules/01_exam/components/Form/Family.vue
@@ -282,6 +282,7 @@ const edit = ref<boolean>(true)
 const myform = ref<any>({})
 const route = useRoute()
 const examId = ref<string>(route.params.id.toString())
+const positionId = ref<string>(route.params.positionId.toString())
 const loader = ref<boolean>(false)
 
 const emit = defineEmits(['update:form'])
@@ -301,7 +302,7 @@ onMounted(async () => {
 const fetchData = async () => {
   loader.value = true
   await http
-    .get(config.API.candidateFamily(examId.value))
+    .get(config.API.candidateFamily(examId.value, positionId.value))
     .then((res) => {
       const data = res.data.result
       defaultFamily.value.prefixIdC = data.marryPrefixId
diff --git a/src/modules/01_exam/components/Form/Information.vue b/src/modules/01_exam/components/Form/Information.vue
index 49bbc7f..d84a381 100644
--- a/src/modules/01_exam/components/Form/Information.vue
+++ b/src/modules/01_exam/components/Form/Information.vue
@@ -381,6 +381,7 @@ const { date2Thai, calAge } = mixin
 const districtOptions = ref<DataOption[]>([])
 const route = useRoute()
 const examId = ref<string>(route.params.id.toString())
+const positionId = ref<string>(route.params.positionId.toString())
 const edit = ref<boolean>(true)
 const myform = ref<any>({})
 const disabledPic = ref<boolean>(false)
@@ -406,7 +407,7 @@ onMounted(async () => {
 const fetchData = async () => {
   loader.value = true
   await http
-    .get(config.API.candidateInformation(examId.value))
+    .get(config.API.candidateInformation(examId.value, positionId.value))
     .then((res) => {
       const data = res.data.result
       defaultInformation.value.prefixId = data.prefixId
diff --git a/src/modules/01_exam/components/Form/Occupation.vue b/src/modules/01_exam/components/Form/Occupation.vue
index 1a8d673..a8fff20 100644
--- a/src/modules/01_exam/components/Form/Occupation.vue
+++ b/src/modules/01_exam/components/Form/Occupation.vue
@@ -268,6 +268,7 @@ const myform = ref<any>({})
 const loader = ref<boolean>(false)
 const route = useRoute()
 const examId = ref<string>(route.params.id.toString())
+const positionId = ref<string>(route.params.positionId.toString())
 
 const emit = defineEmits(['update:form'])
 
@@ -286,7 +287,7 @@ onMounted(async () => {
 const fetchData = async () => {
   loader.value = true
   await http
-    .get(config.API.candidateOccupation(examId.value))
+    .get(config.API.candidateOccupation(examId.value, positionId.value))
     .then((res) => {
       const data = res.data.result
       defaultOccupation.value.status = data.occupationType
diff --git a/src/modules/01_exam/router.ts b/src/modules/01_exam/router.ts
index cba08b6..7599d2e 100644
--- a/src/modules/01_exam/router.ts
+++ b/src/modules/01_exam/router.ts
@@ -12,7 +12,7 @@ export default [
   //     }
   //   },
   {
-    path: '/exam/:id',
+    path: '/exam/:id/:positionId',
     name: 'examDetail',
     component: Detail,
     meta: {
diff --git a/src/modules/01_exam/views/ExamDetail.vue b/src/modules/01_exam/views/ExamDetail.vue
index 8ea90ea..558d552 100644
--- a/src/modules/01_exam/views/ExamDetail.vue
+++ b/src/modules/01_exam/views/ExamDetail.vue
@@ -49,7 +49,7 @@
     </q-step>
   </q-stepper>
   <q-dialog :model-value="modalConsend" persistent>
-    <q-card :style="$q.screen.gt.xs ? 'min-width: 55vw':'min-width: 80vw'">
+    <q-card :style="$q.screen.gt.xs ? 'min-width: 55vw' : 'min-width: 80vw'">
       <Conference :ok="consendOk" :close="consenClose" />
     </q-card>
   </q-dialog>
@@ -57,6 +57,9 @@
 
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
+import { useRoute } from 'vue-router'
+import { useCounterMixin } from '@/stores/mixin'
+import { useQuasar } from 'quasar'
 import { useExamDataStore } from '@/modules/01_exam/store'
 import http from '@/plugins/http'
 import config from '@/app.config'
@@ -64,38 +67,50 @@ 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 Conference from '@/modules/01_exam/components/Conference.vue'
-import { useRoute } from 'vue-router'
 
+const $q = useQuasar()
 const store = useExamDataStore()
+const mixin = useCounterMixin()
+const { modalError } = mixin
 const step = ref<number>(1)
 const stepRaw = ref<number>(1)
 const tittle = ref<string>('')
 const route = useRoute()
 const examId = ref<string>(route.params.id.toString())
+const positionId = ref<string>(route.params.positionId.toString())
 const loader = ref<boolean>(false)
 const status = ref<string>('register')
 const modalConsend = ref<boolean>(false)
 
 onMounted(async () => {
-  stepRaw.value = 3
-  step.value = 3
-  /* await fetchPeriodExam()
-  await candidateCheck() */
+  //   stepRaw.value = 3
+  //   step.value = 3
+  await fetchPeriodExam()
+  await candidateCheck()
 })
 
 const candidateCheck = async () => {
   loader.value = true
   await http
-    .get(config.API.candidateCheckCreate(examId.value))
+    .get(config.API.candidateCheckCreate(examId.value, positionId.value))
     .then(async (res) => {
       const data = res.data.result
-      store.consend = data
-      if (store.consend == true) {
-        await fetchStep()
+      store.consend = data.consend
+      const poition = data.positionExam
+      if (poition == true) {
+        modalError(
+          $q,
+          'คุณได้สมัครสอบตำแหน่งอื่นในรอบนี้แล้ว',
+          'คุณได้สมัครสอบตำแหน่งอื่นในรอบนี้แล้ว'
+        )
       } else {
-        modalConsend.value = true
-        stepRaw.value = 2
-        step.value = 2
+        if (store.consend == true) {
+          await fetchStep()
+        } else {
+          modalConsend.value = true
+          stepRaw.value = 2
+          step.value = 2
+        }
       }
     })
     .catch(() => {})
@@ -107,7 +122,7 @@ const candidateCheck = async () => {
 const fetchStep = async () => {
   loader.value = true
   await http
-    .get(config.API.candidateStatus(examId.value))
+    .get(config.API.candidateStatus(examId.value, positionId.value))
     .then((res) => {
       const data = res.data.result
       status.value = data
@@ -132,6 +147,9 @@ const fetchStep = async () => {
       } else if (data == 'checkSeat') {
         stepRaw.value = 4
         step.value = 4
+      } else if (data == 'checkPoint') {
+        stepRaw.value = 4
+        step.value = 4
       } else if (data == 'done') {
         stepRaw.value = 4
         step.value = 4
diff --git a/src/stores/mixin.ts b/src/stores/mixin.ts
index 09c6231..7158c92 100644
--- a/src/stores/mixin.ts
+++ b/src/stores/mixin.ts
@@ -364,6 +364,31 @@ export const useCounterMixin = defineStore('mixin', () => {
     }
   }
 
+  const statusCandidate = (val: string) => {
+    switch (val) {
+      case 'register':
+        return 'ยังไม่สมัครสอบ'
+      case 'checkRegister':
+        return 'รอเจ้าหน้าที่ตรวจสอบข้อมูล'
+      case 'payment':
+        return 'ชำระค่าสมัครสอบ'
+      case 'rejectRegister':
+        return 'คุณสมบัติสมัครสอบไม่ผ่าน'
+      case 'checkPayment':
+        return 'รอเจ้าหน้าที่ตรวจสอบหลักฐานชำระเงิน'
+      case 'rejectPayment':
+        return 'หลักฐานชำระเงินไม่ถูกต้อง'
+      case 'checkSeat':
+        return 'รอเจ้าหน้าที่จัดที่นั่งสอบ'
+      case 'checkPoint':
+        return 'รอเจ้าหน้าที่สรุปคะแนนสอบ'
+      case 'done':
+        return 'สอบคัดเลือกสำเร็จ'
+      default:
+        return '-'
+    }
+  }
+
   /**
    * แปลงช่วงวันที่ถ้า2ค่าเป็นวันเดียวกันจะโชววันเดียวแต่ถ้าไม่เท่ากันจะแสดงเป็นช่วง
    * @param val ช่วงวันที่
@@ -414,6 +439,7 @@ export const useCounterMixin = defineStore('mixin', () => {
     monthThaiRange,
     modalDelete,
     modalConfirm,
-    modalError
+    modalError,
+    statusCandidate
   }
 })
diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue
index 3e43695..f1daf81 100644
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@@ -1,19 +1,31 @@
 <script setup lang="ts">
 import { useQuasar } from 'quasar'
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
 // import keycloak from '@/plugins/keycloak'
 import { useRoute } from 'vue-router'
 import { menuList, options, notiList } from '../interface/main/index'
 import keycloak from '@/plugins/keycloak'
+import { useCounterMixin } from '@/stores/mixin'
+import http from '@/plugins/http'
+import config from '@/app.config'
 
 const route = useRoute()
-
 const $q = useQuasar()
+const mixin = useCounterMixin() //เรียกฟังก์ชันกลาง
+const { statusCandidate } = mixin
 const miniState = ref<boolean>(false)
 const active = ref<number>(0)
 const drawerL = ref<boolean>(false)
 const fullname = ref<string>('')
 const notiTrigger = ref<boolean>(false)
+const loader = ref<boolean>(false)
+const status = ref<string>('register')
+const examId = ref<string>(route.params.id.toString())
+const positionId = ref<string>(route.params.positionId.toString())
+
+onMounted(async () => {
+  await fetchStatus()
+})
 
 const toggleBtnLeft = () => {
   if (window.innerWidth < 1024) {
@@ -51,6 +63,20 @@ const doLogout = () => {
   })
 }
 
+const fetchStatus = async () => {
+  loader.value = true
+  await http
+    .get(config.API.candidateStatus(examId.value, positionId.value))
+    .then((res) => {
+      const data = res.data.result
+      status.value = data
+    })
+    .catch(() => {})
+    .finally(() => {
+      loader.value = false
+    })
+}
+
 /**
  * ดิงชื่อผู้ใช้งานจาก keycloak
  */
@@ -67,30 +93,45 @@ const doLogout = () => {
   <q-layout view="lHh LpR lff" class="bgColor text-dark">
     <!-- header -->
     <q-header flat class="bg-white text-white row justify-center header" height-hint="7">
-			<q-toolbar style="padding:0% 2%" class="col-xs-12 col-sm-11 col-md-11 col-lg-10">
-				<q-toolbar-title  shrink class="row items-center no-wrap">
-					<q-btn flat class="bg-white" dense round>
-						<q-avatar size="35px">
-							<img src="../assets/logo.png" />
-						</q-avatar>
-					</q-btn>
-					<div class="row q-ml-md text-dark" v-if="$q.screen.gt.xs">
-						<div class="col-12 textline1">
-							ระบบทรัพยากรบุคคล
-						</div>
-						<div class="text-caption textline2">
-							กรุงเทพมหานคร
-						</div>
-					</div>
-				</q-toolbar-title>
-        <q-space/>
-        <q-btn v-if="$q.screen.gt.xs"  class="bg-amber-1 text-amber-9" icon="mdi-logout-variant" size="12px"  label="ออกจากระบบ" flat  v-close-popup @click="doLogout" />
-        <q-btn v-else  class="bg-amber-1 text-amber-9" icon="mdi-logout-variant" flat  v-close-popup @click="doLogout" />
-			</q-toolbar>
-		</q-header>
+      <q-toolbar style="padding: 0% 2%" class="col-xs-12 col-sm-11 col-md-11 col-lg-10">
+        <q-toolbar-title shrink class="row items-center no-wrap">
+          <q-btn flat class="bg-white" dense round>
+            <q-avatar size="35px">
+              <img src="../assets/logo.png" />
+            </q-avatar>
+          </q-btn>
+          <div class="row q-ml-md text-dark" v-if="$q.screen.gt.xs">
+            <div class="col-12 textline1">ระบบทรัพยากรบุคคล</div>
+            <div class="text-caption textline2">กรุงเทพมหานคร</div>
+          </div>
+        </q-toolbar-title>
+        <q-space />
+        <q-badge outline color="blue" class="q-mr-md text-bold">
+          {{ statusCandidate(status) }}
+        </q-badge>
+        <q-btn
+          v-if="$q.screen.gt.xs"
+          class="bg-amber-1 text-amber-9"
+          icon="mdi-logout-variant"
+          size="12px"
+          label="ออกจากระบบ"
+          flat
+          v-close-popup
+          @click="doLogout"
+        />
+        <q-btn
+          v-else
+          class="bg-amber-1 text-amber-9"
+          icon="mdi-logout-variant"
+          flat
+          v-close-popup
+          @click="doLogout"
+        />
+      </q-toolbar>
+    </q-header>
     <!-- end header -->
     <q-page-container class="row justify-center">
-      <q-page style="padding:1.5% 2%" class="col-xs-12 col-sm-11 col-md-11 col-lg-10">
+      <q-page style="padding: 1.5% 2%" class="col-xs-12 col-sm-11 col-md-11 col-lg-10">
         <router-view :key="$route.fullPath" />
       </q-page>
     </q-page-container>
@@ -99,10 +140,10 @@ const doLogout = () => {
 
 <style>
 .bgColor {
-	/* background-image: url("../assets/bg.png");
+  /* background-image: url("../assets/bg.png");
 	background-size: cover;
 	background-size: 100%; */
-  background: #F6F9FA;
+  background: #f6f9fa;
 }
 
 .tabNative {
@@ -118,14 +159,14 @@ const doLogout = () => {
 }
 
 .q-card {
-  box-shadow: 3px 3px 20px -10px rgba(151, 150, 150, 0.261) ;
+  box-shadow: 3px 3px 20px -10px rgba(151, 150, 150, 0.261);
 }
 .q-card--bordered {
   border: 1px solid #92b4c847;
   box-shadow: none !important;
 }
-.q-stepper{
-  box-shadow: 3px 3px 20px -10px rgba(151, 150, 150, 0.261) ;
+.q-stepper {
+  box-shadow: 3px 3px 20px -10px rgba(151, 150, 150, 0.261);
 }
 .q-menu {
   box-shadow: 3px 3px 10px 1px rgba(95, 95, 95, 0.15) !important;
@@ -140,7 +181,8 @@ const doLogout = () => {
   border-radius: 5px;
 }
 
-.q-field--outlined .q-field__control:before,.q-field .q-field__control:before{
+.q-field--outlined .q-field__control:before,
+.q-field .q-field__control:before {
   border-color: #c8d3db;
 }
 .q-field--outlined .q-icon {
@@ -167,17 +209,17 @@ const doLogout = () => {
   background-color: #a8bbbf;
 }
 
-.header{
+.header {
   border-bottom: 1px solid #92b4c847;
   height: 50px;
 }
-.textline1{
-  font-size: 0.90rem;
-  line-height:1.2rem !important;
+.textline1 {
+  font-size: 0.9rem;
+  line-height: 1.2rem !important;
   font-weight: 500;
 }
-.textline2{
-  line-height:1rem !important;
+.textline2 {
+  line-height: 1rem !important;
   font-weight: 400;
   color: #96a9ad;
 }