From b8b44b361dbe6824e001078d41c611a96132ba90 Mon Sep 17 00:00:00 2001
From: nurafrinaalimi16 <nurafrinaalimi16@gmail.com>
Date: Tue, 24 Feb 2026 15:44:15 +0800
Subject: [PATCH] vue for penyata anggota

---
 .../demo/admin/admin/penyata-anggota.vue      | 207 ++++++
 .../assets/js/components/demo/admin/index.vue |   4 +
 .../js/components/demo/voter/home/penyata.vue | 665 ++++++------------
 .../assets/js/components/demo/voter/index.vue | 178 ++---
 4 files changed, 534 insertions(+), 520 deletions(-)
 create mode 100644 resources/assets/js/components/demo/admin/admin/penyata-anggota.vue

diff --git a/resources/assets/js/components/demo/admin/admin/penyata-anggota.vue b/resources/assets/js/components/demo/admin/admin/penyata-anggota.vue
new file mode 100644
index 0000000..c0ad275
--- /dev/null
+++ b/resources/assets/js/components/demo/admin/admin/penyata-anggota.vue
@@ -0,0 +1,207 @@
+<template>
+  <div>
+
+    <!-- SEARCH SECTION -->
+    <!-- <div class="mb-3 d-flex gap-2">
+      <input
+        type="text"
+        class="form-control"
+        placeholder="Cari No Anggota..."
+        v-model="searchNoAnggota"
+        @keyup.enter="searchPenyata"
+        style="max-width: 250px;"
+      />
+
+      <button
+        class="btn btn-primary btn-sm"
+        @click="searchPenyata"
+      >
+        Search
+      </button>
+
+      <button
+        class="btn btn-outline-secondary btn-sm"
+        @click="resetSearch"
+      >
+        Reset
+      </button>
+    </div> -->
+
+    <!-- TABLE -->
+    <table class="table table-bordered table-striped">
+      <thead class="table-light">
+        <tr>
+          <th>No Anggota</th>
+          <th>Unit</th>
+          <th>Nama</th>
+          <th>Status</th>
+          <th>Tarikh Sah</th>
+          <th>Aksi</th>
+        </tr>
+      </thead>
+
+      <tbody>
+        <tr v-for="voter in penyata" :key="voter.id">
+          <td>{{ voter.no_anggota }}</td>
+          <td>{{ voter.unit }}</td>
+          <td>{{ voter.name }}</td>
+
+          <!-- STATUS -->
+          <td>
+            <span
+              class="badge"
+              :class="{
+                'bg-success': voter.status_penyata === 'DISAHKAN',
+                'bg-warning text-dark': voter.status_penyata === 'PERLU_SEMAK',
+                'bg-secondary': !voter.status_penyata
+              }"
+            >
+              {{ voter.status_penyata ?? 'BELUM SAH' }}
+            </span>
+          </td>
+
+          <!-- TARIKH SAH -->
+          <td>
+            {{ voter.tarikh_sah ?? '-' }}
+          </td>
+
+          <!-- PDF BUTTON -->
+          <td>
+            <button
+              class="btn btn-sm btn-success"
+              @click="cetakPDF(voter.no_anggota)"
+              :disabled="!bolehCetak(voter.status_penyata)"
+            >
+              PDF
+            </button>
+          </td>
+        </tr>
+
+        <!-- NO DATA -->
+        <tr v-if="!loading && penyata.length === 0">
+          <td colspan="6" class="text-center text-muted">
+            Tiada data penyata
+          </td>
+        </tr>
+
+        <!-- LOADING -->
+        <tr v-if="loading">
+          <td colspan="6" class="text-center">
+            Memuatkan data...
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+    <!-- PAGINATION -->
+    <div
+      class="d-flex justify-content-end gap-2"
+      v-if="meta.last_page > 1"
+    >
+      <button
+        class="btn btn-sm btn-outline-secondary"
+        :disabled="meta.current_page === 1"
+        @click="changePage(meta.current_page - 1)"
+      >
+        Sebelumnya
+      </button>
+
+      <button
+        class="btn btn-sm btn-outline-secondary"
+        :disabled="meta.current_page === meta.last_page"
+        @click="changePage(meta.current_page + 1)"
+      >
+        Seterusnya
+      </button>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import axios from 'axios';
+
+export default {
+  name: 'ManagePenyata',
+
+  data() {
+    return {
+      penyata: [],
+      loading: false,
+      searchNoAnggota: '',
+      meta: {
+        current_page: 1,
+        last_page: 1
+      }
+    };
+  },
+
+  mounted() {
+    this.getPenyata();
+  },
+
+  methods: {
+
+    async getPenyata(page = 1) {
+      this.loading = true;
+
+      try {
+        const res = await axios.get('/api/v1/voter', {
+          params: {
+            page: page,
+            no_anggota: this.searchNoAnggota
+          }
+        });
+
+        this.penyata = res.data.data;
+        this.meta.current_page = res.data.current_page;
+        this.meta.last_page = res.data.last_page;
+
+      } catch (err) {
+        console.error(err);
+        alert('Gagal ambil senarai penyata');
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    changePage(page) {
+      this.getPenyata(page);
+    },
+
+    searchPenyata() {
+      this.getPenyata(1);
+    },
+
+    resetSearch() {
+      this.searchNoAnggota = '';
+      this.getPenyata(1);
+    },
+
+    bolehCetak(status) {
+      return ['DISAHKAN', 'PERLU_SEMAK'].includes(status);
+    },
+
+    cetakPDF(noAnggota) {
+      axios({
+        url: `/api/v1/penyata/${noAnggota}/pdf`,
+        method: 'GET',
+        responseType: 'blob'
+      })
+        .then((response) => {
+          const file = new Blob([response.data], {
+            type: 'application/pdf'
+          });
+
+          const fileURL = URL.createObjectURL(file);
+          window.open(fileURL);
+        })
+        .catch((error) => {
+          console.error(error);
+          alert('Gagal jana PDF.');
+        });
+    }
+
+  }
+};
+</script>
diff --git a/resources/assets/js/components/demo/admin/index.vue b/resources/assets/js/components/demo/admin/index.vue
index 593dfba..83f424e 100644
--- a/resources/assets/js/components/demo/admin/index.vue
+++ b/resources/assets/js/components/demo/admin/index.vue
@@ -40,6 +40,10 @@
 								<a href="#">Pembiayaan Anggota </a>
 							</router-link>
 
+							<router-link :to="{name: 'Penyata Anggota'}"  v-if="data.user.role==1" tag="li">
+								<a href="#">Penyata Anggota</a>
+							</router-link>
+
 	
 						</ul>
 						<ul class="nav navbar-right navbar-nav">
diff --git a/resources/assets/js/components/demo/voter/home/penyata.vue b/resources/assets/js/components/demo/voter/home/penyata.vue
index 8386b58..d091eca 100644
--- a/resources/assets/js/components/demo/voter/home/penyata.vue
+++ b/resources/assets/js/components/demo/voter/home/penyata.vue
@@ -1,40 +1,33 @@
 <template>
   <div class="penyata-wrapper container">
 
-    <!-- ✅ HEADER SECTION (2 Columns) -->
+    <!-- HEADER -->
     <div class="header-section">
-      <!-- Left -->
       <div class="header-left">
         <div class="logo-wrapper">
           <img src="/images/logo-kopkb.jpeg" alt="KoPKB Logo" class="kopkb-logo" />
           <div>
-            <div style="text-align: left;">
-              <h4 class="fw-bold mb-1">
-                <strong>Koperasi Permodalan Kelantan Berhad (KoPKB)</strong>
-              </h4>
-              <p style="font-size: 13px; line-height: 1.3; margin: 0;">
-                Lot PT 448, Tingkat 1, Jalan Kuala Krai, Batu 3,
-                Wakaf Che Yeh, 15150 Kota Bharu, Kelantan<br />
-                Tel: 09-7414339 | Website: www.koppkb.com
-              </p>
-            </div>
+            <h4 class="fw-bold mb-1">Koperasi Permodalan Kelantan Berhad (KoPKB)</h4>
+            <p style="font-size:13px; line-height:1.3; margin:0;">
+              Lot PT 448, Tingkat 1, Jalan Kuala Krai, Batu 3, Wakaf Che Yeh, 15150 Kota Bharu, Kelantan<br />
+              Tel: 09-7414339 | Website: www.koppkb.com
+            </p>
           </div>
         </div>
       </div>
 
       <div class="header-right">
-        <!-- ✅ Boxed Title -->
         <div class="title-box">
           <h5>PENYATA AHLI</h5>
         </div>
-        <h4 class="text-muted mt-2" text-center> {{ new Date().getFullYear() }}</h4>
+        <h4 class="text-muted mt-2">{{ new Date().getFullYear() }}</h4>
       </div>
     </div>
 
     <hr class="mt-3" />
 
-    <!-- ✅ MEMBER INFO SECTION (2 Columns) -->
-    <div class="form-section two-column ">
+    <!-- MEMBER INFO -->
+    <div v-if="data.user.no_anggota" class="form-section two-column">
       <div class="form-group">
         <label class="form-label fw-semibold">Tarikh :</label>
         <input type="date" class="form-control form-control-sm" v-model="tarikh" />
@@ -42,202 +35,162 @@
 
       <div class="form-group">
         <label class="form-label fw-semibold">No. Anggota:</label>
-        {{ data.user.no_anggota }}
+        <span>{{ data.user.no_anggota }}</span>
       </div>
 
       <div class="form-group">
         <label class="form-label fw-semibold">Nama:</label>
-        {{ data.user.name }}
+        <span>{{ data.user.name }}</span>
       </div>
 
       <div class="form-group">
         <label class="form-label fw-semibold">Pejabat / Syarikat:</label>
-        {{ data.user.unit }}
+        <span>{{ data.user.unit }}</span>
       </div>
     </div>
 
-    <!-- ✅ MAIN CONTENT -->
+    <!-- MAIN CONTENT -->
     <h5 class="mt-4"><strong>PENGESAHAN PENYATA BAKI AKAUN AHLI</strong></h5>
-    <p>
-      Adalah dimaklumkan kedudukan baki akaun tuan/puan pada <strong>{{ tarikh }}</strong> dengan Koperasi Permodalan
-      Kelantan Berhad adalah seperti berikut:
-    </p>
+    <p>Adalah dimaklumkan kedudukan baki akaun tuan/puan pada <b>31/12/2025</b> adalah seperti berikut:</p>
 
-    <p style="text-align: justify;">
-      Sukacita dapat tuan/puan mengesahkan baki tersebut dan menandatangani salinan penyata akaun berkembar
-      untuk tujuan audit dan kembalikan salinan tersebut kepada koperasi sebelum <input type="date"
-        class="form-control form-control-sm" v-model="tarikh" />
-    </p>
-
-
-    <!-- ✅ 2-COLUMN TABLE -->
-    <div id="app" data-penyata='@json($penyata)'>
-
-
-      <table class="boxed-table mt-4">
-        <tbody>
-          <tr>
-            <td>Saham</td>
-            <td>{{ data.user.saham }}</td>
-
-            <td>Yuran</td>
-            <td>{{ data.user.yuran }}</td>
-          </tr>
-
-          <tr>
-            <td>Pelaburan T1</td>
-            <td>{{ data.user.pelaburanT1 }}</td>
-
-            <td>Pinjaman BAI</td>
-            <td>{{ data.user.pinjamanBAI }}</td>
-          </tr>
-
-          <tr>
-            <td>Pelaburan T2</td>
-            <td>{{ data.user.pelaburanT2 }}</td>
-
-            <td>Pinjaman BYS</td>
-            <td>{{ data.user.pinjamanBYS }}</td>
-          </tr>
-
-          <tr>
-            <td>Pinjaman AQH</td>
-            <td>{{ data.user.pinjamanAQH }}</td>
-
-            <td>Insurans / Cukai Jalan</td>
-            <td>{{ data.user.insuransCukai }}</td>
-          </tr>
-
-          <tr>
-            <td>Pinjaman BBA</td>
-            <td>{{ data.user.pinjamanBBA }}</td>
-
-            <td>Pinjaman Pelbagai</td>
-            <td>{{ data.user.pinjamanPelbagai }}</td>
-          </tr>
-        </tbody>
-      </table>
-
-    </div>
-
-    <!-- ✅ FOOTER SECTION -->
-    <p class="mt-4"><em>
-        Dimaklumkan juga bahawa sekiranya kami tidak menerima pengesahan tuan/puan ke atas penyata ini dalam tempoh
-        <strong>14 hari</strong> daripada tarikh surat ini, maka ia dianggap tuan/puan bersetuju dan memperakui ia
-        adalah
-        benar.</em>
-    </p>
-
-    <p>Sekian, dimaklumkan.</p><br>
-    <p class="italic-note">Surat ini dikeluarkan oleh komputer, tidak perlu ditandatangani.</p>
-
-    <hr />
-
-    <p style="text-align: center;">
-    <h5><strong>PERSETUJUAN AHLI </strong></h5>
-    </p> <br>
-    <p style="text-align: justify;">
-    <h5>
-      Saya, <strong>{{ data.user.name }}</strong>,
-      No Anggota: <strong>{{ data.user.no_anggota }}</strong> ,
-
-      <strong>
-
-        <label class="ms-2">
-          <input type="radio" value="Bersetuju" v-model="persetujuan" />
-          Bersetuju
-        </label>
-
-        <label class="ms-3">
-          <input type="radio" value="Tidak Bersetuju" v-model="persetujuan" />
-          Tidak Bersetuju
-        </label></strong>
-
-      . Anda <strong>{{ persetujuan || 'belum membuat pilihan' }}</strong>
-      dengan yang tercatit dalam penyata baki seperti di atas. <br>
-    </h5>
-
-    <p style="text-align: justify;"></p>Jika Tidak Bersetuju, Sila kemukakan yang sepatutnya seperti :
-    <br>
-    <!-- ✅ 2-COLUMN TABLE -->
-    <div id="app" data-penyata='@json($penyata)'></div>
-    <table class="table table-sm no-lines text-center align-middle">
+    <!-- 2-COLUMN TABLE -->
+    <table class="boxed-table mt-4">
       <tbody>
-
         <tr>
           <td>Saham</td>
-          <td><input type="number" class="form-control-sm keyin-input" v-model="data.user.saham" /></td>
-
-          <td>Pinjaman AQH</td>
-          <td><input type="number" class="form-control-sm keyin-input" v-model="data.user.pinjamanAQH" /></td>
-        </tr>
-
-        <tr>
+          <td>{{ data.user.saham }}</td>
           <td>Yuran</td>
-          <td><input type="number" class="form-control-sm keyin-input" v-model="data.user.yuran" /></td>
-
-          <td>Pinjaman BBA</td>
-          <td><input type="number" class="form-control-sm keyin-input" v-model="data.user.pinjamanBBA" /></td>
+          <td>{{ data.user.yuran }}</td>
         </tr>
-
         <tr>
           <td>Pelaburan T1</td>
-          <td><input type="number" class="form-control-sm keyin-input" v-model="data.user.pelaburanT1" /></td>
-
-          <td>Pinjaman BAI</td>
-          <td><input type="number" class="form-control-sm keyin-input" v-model="data.user.pinjamanBAI" /></td>
+          <td>{{ data.user.pelaburan }}</td>
+          <td>Pembiayaan Peribadi</td>
+          <td>{{ data.user.peribadi }}</td>
         </tr>
-
         <tr>
           <td>Pelaburan T2</td>
-          <td><input type="number" class="form-control-sm keyin-input" v-model="data.user.pelaburanT2" /></td>
-
-          <td>Pinjaman BYS</td>
-          <td><input type="number" class="form-control-sm keyin-input" v-model="data.user.pinjamanBYS" /></td>
+          <td>{{ data.user.pelaburanT2 }}</td>
+          <td>Pembiayaan Berjamin Yuran</td>
+          <td>{{ data.user.berjamin_yuran }}</td>
         </tr>
-
         <tr>
-          <td>&nbsp;</td>
-          <td>&nbsp;</td>
-
-          <td>Insurans / Cukai Jalan</td>
-          <td><input type="number" class="form-control-sm keyin-input" v-model="data.user.insuransCukai" /></td>
+          <td>Pembiayaan Kecemasan</td>
+          <td>{{ data.user.tergempar }}</td>
+          <td>Pembiayaan Takaful / Cukai Jalan</td>
+          <td>{{ data.user.roadtax }}</td>
         </tr>
-
         <tr>
-          <td>&nbsp;</td>
-          <td>&nbsp;</td>
-
-          <td>Pinjaman Pelbagai</td>
-          <td><input type="text" class="form-control-sm keyin-input" v-model="data.user.pinjamanPelbagai" /></td>
+          <td>Pembiayaan Pengguna</td>
+          <td>{{ data.user.barangan }}</td>
+          <td>Pembiayaan Pelbagai</td>
+          <td>{{ data.user.pelbagai }}</td>
         </tr>
-
       </tbody>
     </table>
 
+    <p class="mt-4"><em>Sekiranya kami tidak menerima pengesahan dalam tempoh <strong>14 hari</strong>, ia dianggap
+        bersetuju dan memperakui benar.</em></p>
+    <p>Sekian, dimaklumkan.</p>
+    <p class="italic-note">Surat ini dikeluarkan oleh komputer, tidak perlu ditandatangani.</p>
 
-
-
-    <!-- ✅ Sah Button -->
-    <div class="text-right mb-3 no-print">
-     <button type="button" class="btn btn-primary btn-effect" style="width: 100px;" @click="SahkanPenyata">
-  Sahkan
-</button>
+    <!-- PERSETUJUAN AHLI -->
+    <div class="text-center mt-4 mb-3">
+      <div style="font-weight:700; font-size:18px; letter-spacing:1px;">
+        PERSETUJUAN AHLI
+      </div>
+      <hr style="width:200px; margin:8px auto;">
     </div>
 
-    <!-- ✅ Tandatangan & Tarikh Section -->
+    <div class="text-center">
+      <label class="ms-2">
+        <input type="radio" name="persetujuan" value="Bersetuju" v-model="persetujuan"
+          :disabled="data.user.status_penyata === 'DISAHKAN'" />
+        Bersetuju
+      </label>
+
+      <label class="ms-3">
+        <input type="radio" name="persetujuan" value="Tidak Bersetuju" v-model="persetujuan"
+          :disabled="data.user.status_penyata === 'DISAHKAN'" />
+        Tidak Bersetuju
+      </label>
+    </div>
+
+
+    <p class="text-center">
+      <strong>
+        <span v-if="data.user.status_penyata === 'DISAHKAN'" class="badge-disahkan">
+          Disahkan
+        </span>
+
+        <span v-else-if="persetujuan === 'TIDAK SETUJU'" class="badge-tidak-setuju">
+          Tidak Setuju
+        </span>
+
+        <span v-else>
+          {{ persetujuan || 'Belum membuat pilihan' }}
+        </span>
+      </strong>
+    </p>
+
+
+    <!-- EDITABLE TABLE IF TIDAK BERSETUJU -->
+    <table class="table table-sm no-lines text-center align-middle mt-2">
+      <tbody>
+        <tr>
+          <td>Saham</td>
+          <td><input type="number" class="keyin-input" v-model="data.user.saham" /></td>
+          <td>Pembiayaan Kecemasan</td>
+          <td><input type="number" class="keyin-input" v-model="data.user.tergempar" /></td>
+        </tr>
+        <tr>
+          <td>Yuran</td>
+          <td><input type="number" class="keyin-input" v-model="data.user.yuran" /></td>
+          <td>Pembiayaan Pengguna</td>
+          <td><input type="number" class="keyin-input" v-model="data.user.barangan" /></td>
+        </tr>
+        <tr>
+          <td>Pelaburan T1</td>
+          <td><input type="number" class="keyin-input" v-model="data.user.pelaburan" /></td>
+          <td>Pembiayaan Berjamin Yuran</td>
+          <td><input type="number" class="keyin-input" v-model="data.user.berjamin_yuran" /></td>
+        </tr>
+        <tr>
+          <td>Pelaburan T2</td>
+          <td><input type="number" class="keyin-input" v-model="data.user.pelaburanT2" /></td>
+          <td>Pembiayaan Takaful / Cukai Jalan</td>
+          <td><input type="number" class="keyin-input" v-model="data.user.roadtax" /></td>
+        </tr>
+        <tr>
+          <td>&nbsp;</td>
+          <td>&nbsp;</td>
+          <td>Pembiayaan Pelaburan</td>
+          <td><input type="text" class="keyin-input" v-model="data.user.pelbagai" /></td>
+        </tr>
+      </tbody>
+    </table>
+
+    <!-- BUTTONS -->
+    <div class="text-right mb-3 no-print">
+      <button class="btn btn-primary btn-effect" style="width:100px;" @click="SahkanPenyata"
+        :disabled="data.user.status_penyata === 'DISAHKAN'">
+        {{ data.user.status_penyata === 'DISAHKAN' ? 'Disahkan' : 'Sahkan' }}
+      </button>
+
+      <button class="btn btn-danger ms-2" @click="cetakPDF">Cetak PDF</button>
+    </div>
+
+    <!-- TANDATANGAN & TARIKH -->
     <div class="signature-section">
       <div class="sign-column">
         <label class="form-label">No Kad Pengenalan:</label>
         <input type="number" class="keyin-line" v-model="nokp" />
       </div>
-
       <div class="sig-column">
         <label class="form-label">Tarikh:</label>
         <input type="date" class="keyin-line" v-model="tarikh" />
       </div>
     </div>
-    <br><br>
 
   </div>
 </template>
@@ -247,87 +200,67 @@ import axios from 'axios';
 
 export default {
   name: "PenyataView",
-
   data() {
     return {
       tarikh: new Date().toISOString().substring(0, 10),
-      noAhli: "",
-      nama: "",
-      unit: "",
-      noAhliPersetujuan: "",
       persetujuan: "",
-      penyata: {
-        saham: "",
-        yuran: "",
-        pelaburanT1: "",
-        pelaburanT2: "",
-        pinjamanAQH: "",
-        pinjamanBBA: "",
-        pinjamanBAI: "",
-        pinjamanBYS: "",
-        insuransCukai: "",
-        pinjamanPelbagai: ""
-      }
+      nokp: "",
+      data: { user: {} },
+      loading: false
     };
   },
-
   mounted() {
-    const id = this.$route.params.id;
-    this.noAhli = id;
-    this.noAhliPersetujuan = id;
-    this.getPenyata(id);
+    const noAnggota = this.$route.params.no_anggota;
+    if (noAnggota) this.getPenyata(noAnggota);
   },
-
   methods: {
     async getPenyata(id) {
+      this.loading = true;
       try {
-        const res = await axios.get(`/api/penyata/${id}`);
-        this.penyata = res.data;
-      } catch (error) {
-        console.error("Failed to fetch penyata:", error.response?.data || error);
+        const res = await axios.get(`/api/v1/penyata/${id}`);
+        this.data = res.data;
+      } catch (err) {
+        console.error(err);
+        alert("Gagal ambil data penyata");
+      } finally {
+        this.loading = false;
       }
     },
-
-    data() {
-      return {
-        penyata: window.penyataData
-      };
+    cetakPDF() {
+      const noAnggota = this.$route.params.no_anggota;
+      if (noAnggota) window.open(`/api/v1/penyata/${noAnggota}/pdf`, '_blank');
     },
-
-
-    SahkanPenyata() {
-  if (confirm("Adakah anda pasti untuk mengesahkan penyata ini?")) {
-    this.cetakPenyata();
-    alert("Penyata berjaya disahkan.");
-
-    // Delay sedikit supaya Vue Router push jalan dengan betul
-    setTimeout(() => {
-              this.$router.push({ name: 'lamanUtama' });
-        }, 60);
+    async SahkanPenyata() {
+      const noAnggota = this.$route.params.no_anggota;
+      if (!this.persetujuan) { alert("Sila pilih Bersetuju atau Tidak Bersetuju"); return; }
+      if (!this.nokp) { alert("Sila isi No Kad Pengenalan"); return; }
+      if (!confirm("Adakah anda pasti untuk mengesahkan penyata ini?")) return;
+      try {
+        await axios.post(`/api/v1/penyata/${noAnggota}/sahkan`, {
+          persetujuan: this.persetujuan,
+          nokp: this.nokp,
+          tarikh: this.tarikh
+        });
+        alert("Penyata berjaya DISAHKAN");
+        this.cetakPDF();
+        this.$router.push({ name: 'lamanUtama' });
+      } catch (err) {
+        console.error(err);
+        alert("Gagal sahkan penyata");
       }
-    },
-
-    // pastikan ada method lain di sini jika perlu
-    cetakPenyata() {
-      console.log("Penyata dicetak");
     }
   }
-}
+};
 </script>
 
-
-
-
-
-
 <style scoped>
+/* ------------------ GENERAL ------------------ */
 .penyata-wrapper {
   max-width: 800px;
   margin: 0 auto;
   font-family: Arial, sans-serif;
 }
 
-/* ✅ Header */
 .header-section {
   display: grid;
   grid-template-columns: 1.5fr 1fr;
@@ -350,37 +283,25 @@ export default {
   text-align: right;
 }
 
-/* ✅ Member Info (2 columns) */
-/* Member Info - 2 columns */
+.title-box {
+  background: #000;
+  color: #fff;
+  padding: 8px 15px;
+  display: inline-block;
+  border-radius: 4px;
+  text-align: center;
+}
+
 .form-section.two-column {
   display: grid;
-  /* width: 100%; */
-  max-width: 780px;
-  /* ⭐ SAME WIDTH AS TABLES */
-  margin: 0 auto;
-  /* ⭐ center align same as tables */
   grid-template-columns: repeat(2, 1fr);
   column-gap: 30px;
   row-gap: 15px;
   margin-bottom: 20px;
+  max-width: 780px;
+  margin: 0 auto;
 }
 
-
-.form-section.two-column .form-group {
-  min-width: 0;
-  /* ⭐ prevents content from stretching columns */
-}
-
-.form-section.two-column input,
-.form-section.two-column span {
-  width: 100%;
-  /* keep content inside column */
-  display: block;
-  word-break: break-word;
-  /* wrap long text */
-}
-
-
 .form-control-sm {
   border: none;
   border-bottom: 1px solid #666;
@@ -390,24 +311,77 @@ export default {
   padding: 4px;
 }
 
-/* ✅ Table */
-.table,
-table.boxed-table {
+.boxed-table {
   width: 100%;
   border-collapse: separate;
   border-spacing: 4px;
 }
 
-table.boxed-table td {
+.boxed-table td {
   border: 1px inset #000;
   padding: 6px 8px;
   font-size: 13px;
-  background-color: #fafafa;
+  background: #fafafa;
   vertical-align: middle;
 }
 
-/* ✅ Responsive */
-@media (max-width: 768px) {
+.no-lines td {
+  border: none !important;
+  padding: 4px 6px;
+  font-size: 13px;
+  text-align: left;
+  vertical-align: middle;
+}
+
+.keyin-input,
+.keyin-line {
+  border: none;
+  border-bottom: 1px solid #000;
+  background: transparent;
+  padding: 2px 4px;
+  font-size: 12px;
+  text-align: right;
+  width: 90%;
+}
+
+.keyin-input:focus,
+.keyin-line:focus {
+  border-bottom: 1px solid #007bff;
+}
+
+.signature-section {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  column-gap: 40px;
+  row-gap: 15px;
+  width: 100%;
+  max-width: 780px;
+  margin: 20px auto 0;
+}
+
+.btn-effect {
+  transition: 0.3s ease;
+}
+
+.btn-effect:hover {
+  transform: scale(1.05);
+  box-shadow: 0 0 10px rgba(8, 8, 8, 0.818);
+}
+
+.italic-note {
+  font-style: italic;
+}
+
+.badge-disahkan {
+  background: #28a745;
+  color: #fff;
+  padding: 6px 14px;
+  border-radius: 20px;
+  font-weight: 600;
+  letter-spacing: 0.3px;
+}
+
+@media(max-width:768px) {
   .header-section {
     grid-template-columns: 1fr;
     text-align: center;
@@ -422,197 +396,24 @@ table.boxed-table td {
     justify-content: center;
   }
 
-
-}
-
-.title-box {
-  background-color: #000;
-  /* black background */
-  color: #fff;
-  /* white text */
-  padding: 8px 15px;
-  display: inline-block;
-  border-radius: 4px;
-  text-align: center;
-  border: 1px solid #000;
-}
-
-.title-box h4 {
-  margin: 0;
-  font-weight: bold;
-  letter-spacing: 1px;
-}
-
-
-
-/* Remove all inner lines */
-.no-lines {
-  border-collapse: separate;
-  border-spacing: 0 4px;
-  /* small space between rows */
-  width: 100%;
-}
-
-.no-lines td {
-  border: none !important;
-  /* no borders inside */
-  padding: 4px 6px;
-  font-size: 13px;
-  vertical-align: middle;
-  text-align: left;
-}
-
-/* Key-in style input fields */
-.keyin-input {
-  width: 90%;
-  border: none;
-  border-bottom: 1px solid #000;
-  outline: none;
-  background: transparent;
-  font-size: 12px;
-  padding: 2px 4px;
-  text-align: right;
-}
-
-.keyin-input:focus {
-  border-bottom: 1px solid #007bff;
-}
-
-.signature-section {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  /* equal 50/50 width */
-  column-gap: 40px;
-  row-gap: 15px;
-
-  width: 100%;
-  max-width: 780px;
-  /* ⭐ same width as tables */
-  margin: 20px auto 0 auto;
-  /* ⭐ center align */
-}
-
-.signature-section .sign-column,
-.signature-section .sig-column {
-  min-width: 0;
-  /* allows equal split */
-}
-
-.signature-section input {
-  width: 90%;
-  /* align input edges */
-}
-
-
-.keyin-line {
-  border: none;
-  border-bottom: 1px solid #000;
-  /* underline style */
-  background: transparent;
-  outline: none;
-  padding: 2px 0;
-  font-size: 12px;
-}
-
-.keyin-line:focus {
-  border-bottom: 1px solid #007bff;
-}
-
-@media (max-width: 768px) {
   .signature-section {
     grid-template-columns: 1fr;
-    /* stack on small screens */
   }
 }
 
-/* ✅ PRINT SETTINGS */
 @media print {
-  body {
-    /* Chrome/Safari */
-    /* Firefox */
-    background: #f0f0f0 !important;
-  }
-
-  /* A4 page size and margin */
-  @page {
-    size: A4 portrait;
-    margin: 10mm;
-    /* Reduce margin to fit more content */
-  }
-
-  body {
-    background: #fff;
-    color: #000;
-    font-size: 12px;
-    line-height: 1.3;
-  }
-
-  /* Fit all content to one page */
-  html,
-  body {
-    height: 100%;
-    overflow: hidden;
-    zoom: 0.8;
-    /* Shrinks entire page content to fit */
-  }
-
-  .penyata-wrapper {
-    background-color: #f5f5f5 !important;
-    /* Your desired background */
-    /* -webkit-print-color-adjust: exact;
-    print-color-adjust: exact; */
-    padding: 20px;
-  }
-
-  /* Hide buttons when printing */
   .no-print {
     display: none !important;
   }
 
+  body {
+    font-size: 12px;
+    line-height: 1.3;
+  }
 
-  /* Prevent page breaks */
-  .penyata-wrapper,
-  .container,
-  table {
+  table,
+  .penyata-wrapper {
     page-break-inside: avoid;
   }
-
-  @media print {
-    #penyata {
-      position: absolute;
-      top: 10px;
-      right: 10px;
-      text-align: right !important;
-    }
-  }
-
-  /* Keep spacing compact */
-  p,
-  label,
-  input,
-  td {
-    margin: 0;
-    padding: 2px 4px;
-  }
-}
-
-.italic-note {
-  font-style: italic;
-}
-
-.keyin-line {
-  border: none;
-  border-bottom: 1px dashed black;
-  width: 140px;
-  padding: 2px 4px;
-}
-
-.btn-effect {
-  transition: 0.3s ease;
-}
-
-.btn-effect:hover {
-  transform: scale(1.05);
-  box-shadow: 0 0 10px rgba(8, 8, 8, 0.818);
 }
 </style>
diff --git a/resources/assets/js/components/demo/voter/index.vue b/resources/assets/js/components/demo/voter/index.vue
index 59c0490..3ea9d40 100644
--- a/resources/assets/js/components/demo/voter/index.vue
+++ b/resources/assets/js/components/demo/voter/index.vue
@@ -1,88 +1,88 @@
 <template>
-<div>
-	<div v-if="!loading">
-		<nav class="navbar navbar-default navbar-fixed-top" id="nav">
-			<div class="container">
-				<div class="navbar-header">
-					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
-						<span class="icon-bar"></span>
-						<span class="icon-bar"></span>
-						<span class="icon-bar"></span>
-					</button>
-					<a class="navbar-brand" :href="data.baseURL" ><img src='/images/mykopkb.png' border='0' width="150" height="auto" alt="MyKoPKB Logo"></a>
+	<div>
+		<div v-if="!loading">
+			<nav class="navbar navbar-default navbar-fixed-top" id="nav">
+				<div class="container">
+					<div class="navbar-header">
+						<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
+							<span class="icon-bar"></span>
+							<span class="icon-bar"></span>
+							<span class="icon-bar"></span>
+						</button>
+						<a class="navbar-brand" :href="data.baseURL"><img src='/images/mykopkb.png' border='0'
+								width="150" height="auto" alt="MyKoPKB Logo"></a>
+					</div>
+					<div class="collapse navbar-collapse" id="myNavbar">
+
+						<ul class="nav navbar-nav">
+
+							<router-link :to="{ name: 'Voter Home' }" tag="li" exact>
+								<a href="#"><b>LAMAN UTAMA</b></a>
+							</router-link>
+
+							<router-link :to="{ name: 'Mat' }" tag="li" exact>
+								<a href="#"><b>MAT KE-28</b></a>
+							</router-link>
+
+							<router-link :to="{ name: 'Attendance' }" tag="li" exact>
+								<a href="#"><b>DAFTAR MAT</b></a>
+							</router-link>
+
+							<router-link :to="{ name: 'Vote' }"
+								v-if="data.election.status == 2 && data.user.saham >= 500 && !hasVoted() && data.user.kehadiran != 0"
+								tag="li" exact>
+								<a href="#"><b>UNDIAN</b></a>
+							</router-link>
+
+							<router-link :to="{ name: 'Zoom' }" v-if="data.user.kehadiran != 0" tag="li" exact>
+								<a href="#"><b>PAUTAN MESYUARAT</b></a>
+							</router-link>
+
+							<router-link :to="{ name: 'penyata', params: { no_anggota: data.user.no_anggota } }" tag="li" exact>
+								<a href="#"><b>PENYATA AHLI</b></a>
+							</router-link>
+
+
+						</ul>
+						<ul class="nav navbar-right navbar-nav">
+							<li class="dropdown">
+								<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
+									aria-haspopup="true" aria-expanded="false">
+									<span class="fa fa-user"></span> {{ data.user.name }} <span class="caret"></span>
+								</a>
+								<ul class="dropdown-menu">
+									<li @click="logout()"><a>Log Keluar</a></li>
+								</ul>
+							</li>
+						</ul>
+					</div>
 				</div>
-				<div class="collapse navbar-collapse" id="myNavbar">
+			</nav>
 
-					<ul class="nav navbar-nav">
-
-						<router-link :to="{name: 'Voter Home'}" tag="li" exact>
-							<a href="#"><b>LAMAN UTAMA</b></a>
-						</router-link>
-
-						<router-link :to="{name: 'Mat'}" tag="li" exact>
-							<a href="#"><b>MAT KE-28</b></a>
-						</router-link>
-
-						<router-link :to="{name: 'Attendance'}"  tag="li" exact>
-							<a href="#"><b>DAFTAR MAT</b></a>
-						</router-link>
-
-						<router-link :to="{name: 'Vote'}" v-if="data.election.status==2 && data.user.saham >= 500 && !hasVoted() && data.user.kehadiran != 0" tag="li" exact>
-							<a href="#"><b>UNDIAN</b></a>
-						</router-link>
-
-						<router-link :to="{name: 'Zoom'}" v-if="data.user.kehadiran != 0" tag="li" exact>
-							<a href="#"><b>PAUTAN MESYUARAT</b></a>
-						</router-link>
-
-						<!-- <router-link :to="{name: 'Penyata'}"  tag="li" exact>
-							<a href="#"><b>PENYATA AHLI</b></a>
-						</router-link>		 -->
-
-					</ul>
-					<ul class="nav navbar-right navbar-nav">
-						<li class="dropdown">
-							<a
-								href="#"
-								class="dropdown-toggle"
-								data-toggle="dropdown"
-								role="button" aria-haspopup="true"
-								aria-expanded="false">
-								<span class="fa fa-user"></span> {{ data.user.name }} <span class="caret"></span>
-							</a>
-							<ul class="dropdown-menu">
-								<li @click="logout()"><a>Log Keluar</a></li>
-							</ul>
-						</li>
-					</ul>
-				</div>
+			<router-view></router-view>
+		</div>
+		<div v-else class="container">
+			<div class="jumbotron">
+				<h1>Loading <i class="fa fa-refresh fa-spin"></i></h1>
 			</div>
-		</nav>
-
-		<router-view></router-view>
-	</div>
-	<div v-else class="container">
-		<div class="jumbotron">
-			<h1>Loading <i class="fa fa-refresh fa-spin"></i></h1>
 		</div>
 	</div>
-</div>
 </template>
 
 <script>
-export default{
+export default {
 	data: () => ({
 		loading: true
 	}),
 
-	created: function(){
+	created: function () {
 		this.refreshInfo();
 	},
 
 	methods: {
 		logout: function () {
 			localStorage.clear();
-			this.$router.push({name: 'Voter Login'});
+			this.$router.push({ name: 'Voter Login' });
 		},
 
 		hasVoted: function () {
@@ -92,8 +92,8 @@ export default{
 		refreshInfo: function () {
 			var vm = this;
 			this.util.setAuthorization();
-			axios.get(config.API+'election/information')
-				.then(response=>{
+			axios.get(config.API + 'election/information')
+				.then(response => {
 					console.log(response);
 					vm.loading = false;
 					vm.data.election = response.data.election;
@@ -103,10 +103,10 @@ export default{
 					vm.data.user = response.data.voter;
 					vm.data.result = response.data.result;
 				})
-				.catch(error=>{
+				.catch(error => {
 					vm.loading = false;
-					if  (vm.util.showResult(error, 'error') == 401) {
-						vm.$router.push({name: 'Voter Login'});
+					if (vm.util.showResult(error, 'error') == 401) {
+						vm.$router.push({ name: 'Voter Login' });
 					}
 				});
 		}
@@ -117,44 +117,46 @@ export default{
 
 
 <style scoped>
-
-body{
+body {
 	padding: 70px 5px;
 }
+
 /* Change navbar background color */
 #nav.navbar {
-  background-color: #021324; /* Dark blue/gray background */
-  border: none;
+	background-color: #021324;
+	/* Dark blue/gray background */
+	border: none;
 }
 
 /* Change navbar link text color */
-#nav .nav > li > a,
+#nav .nav>li>a,
 #nav .navbar-brand,
 #nav .navbar-toggle {
-  color: #f39c12; /* Light gray text */
+	color: #f39c12;
+	/* Light gray text */
 }
 
 /* Hover effect */
-#nav .nav > li > a:hover,
+#nav .nav>li>a:hover,
 #nav .navbar-brand:hover {
-  color: #f39c12; /* Gold/yellow on hover */
+	color: #f39c12;
+	/* Gold/yellow on hover */
 }
 
 /* Dropdown text color */
-#nav .dropdown-menu > li > a {
-  color: #2c3e50; /* Dark text in dropdown */
+#nav .dropdown-menu>li>a {
+	color: #2c3e50;
+	/* Dark text in dropdown */
 }
 
 /* Dropdown hover */
-#nav .dropdown-menu > li > a:hover {
-  background-color: #f39c12;
-  color: white;
+#nav .dropdown-menu>li>a:hover {
+	background-color: #f39c12;
+	color: white;
 }
 
 .navbar-brand img {
-  background: transparent !important;
-  box-shadow: none;
+	background: transparent !important;
+	box-shadow: none;
 }
-
 </style>
-