tab ที่ผ่านมาแล้วเปลี่ยนเป็นสีเขียว

src/modules/01_exam/views/ExamDetail.vue

@@ -1,10 +1,9 @@
 <!-- page:detail page รายการสอบทั้งหมด -->
 <template>
   <q-toolbar class="q-py-sm q-px-md bg-grey-2">
-    <q-btn icon="chevron_left" color="grey" flat dense>
-      <q-tooltip>กลับ</q-tooltip>
-    </q-btn>
-    <q-toolbar-title class="toptitle text-dark col-12 row items-center">สมัครสอบ</q-toolbar-title>
+    <q-toolbar-title class="toptitle text-dark col-12 row items-center">{{
+      tittle
+    }}</q-toolbar-title>
   </q-toolbar>
   <q-card flat class="">
     <div class="justify-center">
@@ -16,21 +15,34 @@
         color="primary"
         animated
       >
-        <q-step :name="1" title="อ่านคำชี้แจง" icon="edit" done-color="positive">
+        <q-step :done="step > 1" :name="1" title="อ่านคำชี้แจง" icon="edit" done-color="positive">
           <ExamDetail />
         </q-step>
-        <q-step :name="2" title="กรอกข้อมูล" icon="edit" done-color="positive">
+        <q-step :done="step > 2" :name="2" title="กรอกข้อมูล" icon="edit" done-color="positive">
           <ExamForm />
         </q-step>
-        <q-step :name="3" title="ชำระค่าธรรมเนียมการสอบ" icon="edit" done-color="positive">
+        <q-step
+          :done="step > 3"
+          :name="3"
+          title="ชำระค่าธรรมเนียมการสอบ"
+          icon="edit"
+          done-color="positive"
+        >
           <ExamPayment />
         </q-step>
-        <q-step :name="4" title="สำเร็จ" icon="edit" done-color="positive">
+        <q-step :done="step > 4" :name="4" title="สำเร็จ" icon="edit" done-color="positive">
           <ExamFinished />
         </q-step>
       </q-stepper>
     </div>
   </q-card>
+  <notifyConfirm
+    :modal="modalConfirm"
+    :modalTittle="modalConfirmTittle"
+    :modalDetail="modalConfirmDetail"
+    :ok="closeModalConfirm"
+    :cancel="closeModalCancel"
+  />
 </template>
 
 <script setup lang="ts">
@@ -39,6 +51,7 @@ import ExamDetail from '@/modules/01_exam/components/ExamDetail.vue'
 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 NotifyConfirm from '@/components/NotifyConfirm.vue'
 
 const examId = ref<string>('zxc')
 const step = ref<number>(1)
@@ -46,6 +59,12 @@ const stepRaw = ref<number>(1)
 const examPost = ref<any>()
 const test = ref<any>()
 const loading = ref<boolean>(false)
+const tittle = ref<string>('การสอบภาค ข. พิเศษ สำหรับผู้สอบผ่านของส่วนราชการแล้ว')
+const modalConfirm = ref<boolean>(true)
+const modalConfirmTittle = ref<string>('ยืนยันการเปลี่ยนแท็ปใช่หรือไม่?')
+const modalConfirmDetail = ref<string>(
+  'ยังมีข้อมูลที่ยังไม่ถูกบันทึก ถ้าตกลงเปลี่ยนแท็ปข้อมูลที่ยังไม่ถูกบันทึกจะหาย'
+)
 
 onMounted(() => {
   loadCandidate()
@@ -84,4 +103,11 @@ const fetchExams = () => {
   //     .catch((err) => console.log(err))
   //     .finally(() => (this.loading = false))
 }
+
+const closeModalConfirm = () => {
+  modalConfirm.value = false
+}
+const closeModalCancel = () => {
+  modalConfirm.value = false
+}
 </script>