vue for penyata anggota
This commit is contained in:
nurafrinaalimi16
@@ -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">
|
||||
|
||||
@@ -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> </td>
|
||||
<td> </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> </td>
|
||||
<td> </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> </td>
|
||||
<td> </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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user