From 421a119986465d41de34623e97786ac0e2e7c6c3 Mon Sep 17 00:00:00 2001
From: nurafrinaalimi16 <nurafrinaalimi16@gmail.com>
Date: Thu, 24 Apr 2025 17:11:32 +0800
Subject: [PATCH] fix attendance page (add highlight on kehadiran)

---
 .../components/demo/voter/home/attendance.vue | 48 ++++++++++++++-----
 1 file changed, 37 insertions(+), 11 deletions(-)

diff --git a/resources/assets/js/components/demo/voter/home/attendance.vue b/resources/assets/js/components/demo/voter/home/attendance.vue
index 2a955a5..2ef73c5 100644
--- a/resources/assets/js/components/demo/voter/home/attendance.vue
+++ b/resources/assets/js/components/demo/voter/home/attendance.vue
@@ -35,13 +35,16 @@
                     <input type="text" name="unit" class="form-control" readonly :value="data.user.unit" required />
                 </div>
 
-                <div class="form-group">
-                    <label for="role">Kehadiran :</label>
-                    <select class="form-control" id="kehadiran" name="kehadiran" value="" required>
+                <div class="form-group red-border">
+                    <label for="kehadiran">Kehadiran :</label>
+                    <select class="form-control" id="kehadiran" name="kehadiran" required>
                         <option value="0">Sila Pilih :</option>
                         <option value="1">Fizikal</option>
                         <option value="2">Maya</option>
                     </select>
+                    <small class="form-text text-muted">
+                        <em>Sila pilih kehadiran (Maya/Fizikal) kemudian klik “✅ SAYA TERIMA”</em>
+                    </small>
                 </div>
 
                 <div class="alert alert-info mt-4 small">
@@ -59,16 +62,21 @@
 
                 <div class="text-center mt-4">
                     <!-- If already confirmed attendance -->
-                    <div v-if="data.user.kehadiran != 0" class="alert alert-success fw-bold">
-                        KEHADIRAN ANDA TELAH DISAHKAN SECARA
-                        <strong class="text-uppercase">
-                            {{ data.user.kehadiran == 1 ? 'FIZIKAL' : 'MAYA' }}
-                        </strong>
-                        <div class="mt-2 text-dark fw-normal">
-                            Sila ke tab <strong>Undian</strong> untuk mengundi.
-                        </div>
+                    <div v-if="data.user.kehadiran != 0" class="alert alert-success fw-bold text-center py-4">
+                        <p class="mb-2">KEHADIRAN ANDA TELAH DISAHKAN SECARA</p>
+                        <h5 class="text-uppercase mb-3">
+                            <strong class="fw-bold">
+                                {{ data.user.kehadiran == 1 ? 'FIZIKAL' : 'MAYA' }}
+                            </strong>
+                        </h5>
+
+                        <router-link :to="{ name: 'Vote' }"
+                            class="btn btn-warning px-4 py-2 fw-bold rounded-pill shadow-sm">
+                            🗳️ Undi Sekarang
+                        </router-link>
                     </div>
 
+
                     <!-- If not yet confirmed attendance -->
                     <button type="submit" class="btn btn-lg btn-success px-5" v-else-if="data.election.status == 2">
                         ✅ SAYA TERIMA
@@ -80,6 +88,17 @@
     </div>
 </template>
 
+<style>
+.form-group.red-border {
+    border: 2px solid red;
+    padding: 10px;
+    border-radius: 5px;
+}
+
+.form-group.red-border label {
+    color: rgb(0, 0, 0);
+}
+</style>
 
 
 <script>
@@ -106,6 +125,13 @@ export default {
 
         edit: function () {
             if (this.loading) return;
+
+            const selectedValue = document.getElementById("kehadiran").value;
+            if (selectedValue === "0") {
+                this.util.notify(" Sila pilih jenis kehadiran anda sebelum meneruskan.", "error");
+                return;
+            }
+
             this.loading = true;
             var vm = this;
             this.util.notify('Adding Attendance', 'loading');