vue for penyata anggota

2026-02-24 15:44:15 +08:00
parent 53881198eb
commit b8b44b361d
4 changed files with 534 additions and 520 deletions
@@ -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>
@@ -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">