KoPKB/E-Vote
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

disable menu-penyataanggota

Browse Source
This commit is contained in:
hayatie
2025-12-10 12:10:06 +08:00
parent d62e5f6105
commit d24a864e55
2 changed files with 255 additions and 176 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/assets/js/components/demo/voter/home/penyata.vue
+253 -174
View File
@@ -9,64 +9,64 @@
<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>
<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>
</div>
</div>
</div>
</div>
<div class="header-right">
<!-- ✅ Boxed Title -->
<div class="title-box">
<h4>PENYATA AHLI</h4>
<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>
</div>
</div>
<h4 class="text-muted mt-2" text-center> {{ new Date().getFullYear() }}</h4>
</div>
</div>
<hr class="mt-3" />
<!-- ✅ MEMBER INFO SECTION (2 Columns) -->
<div class="form-section two-column">
<div class="form-section two-column ">
<div class="form-group">
<label class="form-label fw-semibold">Tarikh Daftar:</label>
<label class="form-label fw-semibold">Tarikh :</label>
<input type="date" class="form-control form-control-sm" v-model="tarikh" />
</div>
<div class="form-group">
<label class="form-label fw-semibold">No. Ahli:</label>
<input type="text" class="form-control form-control-sm" v-model="noAhli" readonly />
<label class="form-label fw-semibold">No. Anggota:</label>
{{ data.user.no_anggota }}
</div>
<div class="form-group">
<label class="form-label fw-semibold">Nama:</label>
<input type="text" class="form-control form-control-sm" v-model="nama" readonly />
{{ data.user.name }}
</div>
<div class="form-group">
<label class="form-label fw-semibold">Pejabat / Syarikat:</label>
<input type="text" class="form-control form-control-sm" v-model="syarikat" readonly />
{{ data.user.unit }}
</div>
</div>
<!-- ✅ 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:
Adalah dimaklumkan kedudukan baki akaun tuan/puan pada <strong>{{ tarikh }}</strong> dengan Koperasi Permodalan
Kelantan Berhad 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
<strong>{{ tarikh }}</strong>.
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 -->
@@ -74,168 +74,213 @@
<tbody>
<tr>
<td>Saham</td>
<td><input type="number" class="form-control-sm" v-model="penyata.saham" /></td>
<td>Pinjaman AQH</td>
<td><input type="number" class="form-control-sm" v-model="penyata.pinjamanAQH" /></td>
</tr>
<tr>
<td>{{ data.user.saham }}</td>
<td>Yuran</td>
<td><input type="number" class="form-control-sm" v-model="penyata.yuran" /></td>
<td>Pinjaman BBA</td>
<td><input type="number" class="form-control-sm" v-model="penyata.pinjamanBBA" /></td>
</tr>
<td>{{ data.user.yuran}}</td>
<tr>
<td>Pelaburan T1</td>
<td><input type="number" class="form-control-sm" v-model="penyata.pelaburanT1" /></td>
<td>{{ penyata.pelaburan_t1 }}</td>
<td>Pinjaman BAI</td>
<td><input type="number" class="form-control-sm" v-model="penyata.pinjamanBAI" /></td>
<td>{{ penyata.pinjaman_bai }}</td>
</tr>
<tr>
<td>Pelaburan T2</td>
<td><input type="number" class="form-control-sm" v-model="penyata.pelaburanT2" /></td>
<td>{{ penyata.pelaburan_t2 }}</td>
<td>Pinjaman BYS</td>
<td><input type="number" class="form-control-sm" v-model="penyata.pinjamanBYS" /></td>
<td>{{ penyata.pinjaman_bys}}</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>Pelaburan AQH</td>
<td>{{ penyata.pelaburan_aqh }}</td>
<td>Insurans / Cukai Jalan</td>
<td><input type="number" class="form-control-sm" v-model="penyata.insurans" /></td>
<td>{{penyata.insurans_cukai}}</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>Pelaburan BBA </td>
<td>{{ penyata.pelaburan_bba }}</td>
<td>Pinjaman Pelbagai</td>
<td><input type="number" class="form-control-sm" v-model="penyata.pinjamanPelbagai" /></td>
<td>{{ penyata.pinj_pelbagai }}</td>
</tr>
</tbody>
</table>
<!-- ✅ FOOTER SECTION -->
<p class="mt-4">
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.
<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>
<h6><strong><i>Surat ini dikeluarkan oleh komputer, tidak perlu ditandatangani.</i></strong></h6>
<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 , <input
type="text"
class="keyin-line"
v-model="penyata.nama"
placeholder=""
/>, No Ahli: <input
type="text"
class="keyin-line"
placeholder=""
v-model="noAhliPersetujuan"
/> <strong>Bersetuju/Tidak Bersetuju </strong> dengan yang tercatit dalam penyata baki seperti di atas.</p> </h5>
<p style="text-align: justify;"></p>Jika Tidak Bersetuju, Sila kemukakan yang sepatutnya seperti :
<br>
<!-- ✅ 2-COLUMN TABLE -->
<table class="table table-sm no-lines text-center align-middle">
<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 -->
<table class="table table-sm no-lines text-center align-middle">
<tbody>
<tr>
<td>Saham</td>
<input
type="number" class="keyin-input" v-model="penyata.saham" placeholder=""
/>
<td><input type="number" class="form-control-sm keyin-input" v-model="penyata.saham" /></td>
<td>Pinjaman AQH</td>
<td><input type="number" class="form-control-sm" v-model="penyata.pinjamanAQH" /></td>
<td><input type="number" class="form-control-sm keyin-input" v-model="pinjamanAQH" /></td>
</tr>
<tr>
<td>Yuran</td>
<td><input type="number" class="form-control-sm" v-model="penyata.yuran" /></td>
<td><input type="number" class="form-control-sm keyin-input" v-model="yuran" /></td>
<td>Pinjaman BBA</td>
<td><input type="number" class="form-control-sm" v-model="penyata.pinjamanBBA" /></td>
<td><input type="number" class="form-control-sm keyin-input" v-model="penyata.pinjaman_bba" /></td>
</tr>
<tr>
<td>Pelaburan T1</td>
<td><input type="number" class="form-control-sm" v-model="penyata.pelaburanT1" /></td>
<td><input type="number" class="form-control-sm keyin-input" v-model="penyata.pelaburan_t1" /></td>
<td>Pinjaman BAI</td>
<td><input type="number" class="form-control-sm" v-model="penyata.pinjamanBAI" /></td>
<td><input type="number" class="form-control-sm keyin-input" v-model="penyata.pinjaman_bai" /></td>
</tr>
<tr>
<td>Pelaburan T2</td>
<td><input type="number" class="form-control-sm" v-model="penyata.pelaburanT2" /></td>
<td><input type="number" class="form-control-sm keyin-input" v-model="penyata.pelaburan_t2" /></td>
<td>Pinjaman BYS</td>
<td><input type="number" class="form-control-sm" v-model="penyata.pinjamanBYS" /></td>
<td><input type="number" class="form-control-sm keyin-input" v-model="penyata.pinjaman_bys" /></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>Insurans / Cukai Jalan</td>
<td><input type="number" class="form-control-sm" v-model="penyata.insurans" /></td>
<td><input type="number" class="form-control-sm keyin-input" v-model="penyata.insurans_cukai" /></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="penyata.pinjamanPelbagai" placeholder=""
/></td>
<td><input type="text" class="form-control-sm keyin-input" v-model="penyata.pinj_Pelbagai" /></td>
</tr>
</tbody>
</table>
<!-- ✅ Tandatangan & Tarikh Section -->
<div class="signature-section">
<div class="sig-column">
<label class="form-label">Tandatangan:</label>
<!-- <input type="text" class="keyin-line" placeholder="" /> -->
</div>
<div class="sig-column">
<label class="form-label">Tarikh:</label>
<!-- <input type="text" class="keyin-line" placeholder="" /> -->
</div>
</div>
<br><br>
<!-- ✅ Cetak Button -->
<div class="text-right mb-3 no-print">
<button type="button" class="btn btn-success" style="width: 160px;" @click="cetakPenyata">
Cetak Penyata
</button>
</div>
<!-- ✅ 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>
</div>
<!-- ✅ Tandatangan & Tarikh Section -->
<div class="signature-section">
<div class="sign-column">
<label class="form-label">Tandatangan:</label>
<input type="sign" class="keyin-line" v-model="sign" />
</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>
<script>
import axios from 'axios'; // <-- this is required
export default {
name: "PenyataView",
data() {
return {
tarikh: new Date().toISOString().substring(0, 10),
noAhli: "12345",
nama: "Ahmad bin Ali",
syarikat: "KPKB HQ",
noAhli: "",
nama: "",
unit: "",
noAhliPersetujuan: "",
persetujuan: "",
penyata: {
saham: 1000,
yuran: 50,
pelaburanT1: 2000,
pelaburanT2: 1500,
pinjamanAQH: 500,
pinjamanBBA: 1200,
pinjamanBAI: 700,
pinjamanBYS: 400,
insurans: 300,
pinjamanPelbagai: 800
saham: "",
yuran: "",
pelaburanT1: "",
pelaburanT2: "",
pinjamanAQH: "",
pinjamanBBA: "",
pinjamanBAI: "",
pinjamanBYS: "",
insuransCukai: "",
pinjamanPelbagai: ""
}
};
},
methods: {
cetakPenyata() {
window.print();
mounted() {
const id = this.$route.params.id;
this.noAhli = id;
this.noAhliPersetujuan = id;
this.getPenyata(id);
},
methods: {
async getPenyata(id) {
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);
}
},
SahkanPenyata() {
if (confirm("Adakah anda pasti untuk mengesahkan penyata ini?")) {
this.cetakPenyata();
alert("Penyata berjaya disahkan.");
}
}
}
};
</script>
<style scoped>
.penyata-wrapper {
max-width: 800px;
@@ -250,29 +295,48 @@ export default {
align-items: center;
gap: 20px;
}
.logo-wrapper {
display: flex;
align-items: flex-start;
gap: 15px;
}
.kopkb-logo {
width: 80px;
height: auto;
}
.header-right {
text-align: right;
}
/* ✅ Member Info (2 columns) */
.two-column {
/* Member Info - 2 columns */
.form-section.two-column {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px 30px;
/* 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;
}
.form-group {
display: flex;
flex-direction: column;
.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;
@@ -283,11 +347,13 @@ export default {
}
/* ✅ Table */
.table,
table.boxed-table {
width: 100%;
border-collapse: separate;
border-spacing: 4px;
}
table.boxed-table td {
border: 1px inset #000;
padding: 6px 8px;
@@ -302,21 +368,24 @@ table.boxed-table td {
grid-template-columns: 1fr;
text-align: center;
}
.header-right {
text-align: center;
margin-top: 10px;
}
.logo-wrapper {
justify-content: center;
}
.two-column {
grid-template-columns: 1fr;
}
}
.title-box {
background-color: #000; /* black background */
color: #fff; /* white text */
background-color: #000;
/* black background */
color: #fff;
/* white text */
padding: 8px 15px;
display: inline-block;
border-radius: 4px;
@@ -335,12 +404,14 @@ table.boxed-table td {
/* Remove all inner lines */
.no-lines {
border-collapse: separate;
border-spacing: 0 4px; /* small space between rows */
border-spacing: 0 4px;
/* small space between rows */
width: 100%;
}
.no-lines td {
border: none !important; /* no borders inside */
border: none !important;
/* no borders inside */
padding: 4px 6px;
font-size: 13px;
vertical-align: middle;
@@ -349,7 +420,7 @@ table.boxed-table td {
/* Key-in style input fields */
.keyin-input {
width: 80%;
width: 90%;
border: none;
border-bottom: 1px solid #000;
outline: none;
@@ -365,19 +436,29 @@ table.boxed-table td {
.signature-section {
display: grid;
grid-template-columns: 1fr 1fr; /* two equal columns */
gap: 30px;
margin-top: 20px;
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 */
}
.sig-column {
display: flex;
flex-direction: column;
.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 */
border-bottom: 1px solid #000;
/* underline style */
background: transparent;
outline: none;
padding: 2px 0;
@@ -390,22 +471,24 @@ table.boxed-table td {
@media (max-width: 768px) {
.signature-section {
grid-template-columns: 1fr; /* stack on small screens */
grid-template-columns: 1fr;
/* stack on small screens */
}
}
/* ✅ PRINT SETTINGS */
@media print {
body {
/* Chrome/Safari */
/* Chrome/Safari */
/* Firefox */
background: #f0f0f0 !important;
background: #f0f0f0 !important;
}
/* A4 page size and margin */
@page {
size: A4 portrait;
margin: 10mm; /* Reduce margin to fit more content */
margin: 10mm;
/* Reduce margin to fit more content */
}
body {
@@ -416,14 +499,17 @@ table.boxed-table td {
}
/* Fit all content to one page */
html, body {
html,
body {
height: 100%;
overflow: hidden;
zoom: 0.8; /* Shrinks entire page content to fit */
zoom: 0.8;
/* Shrinks entire page content to fit */
}
.penyata-wrapper {
background-color: #f5f5f5 !important; /* Your desired background */
.penyata-wrapper {
background-color: #f5f5f5 !important;
/* Your desired background */
/* -webkit-print-color-adjust: exact;
print-color-adjust: exact; */
padding: 20px;
@@ -436,55 +522,48 @@ table.boxed-table td {
/* Prevent page breaks */
.penyata-wrapper, .container, table {
.penyata-wrapper,
.container,
table {
page-break-inside: avoid;
}
@media print {
#penyata {
position: absolute;
top: 10px;
right: 10px;
text-align: right !important;
position: absolute;
top: 10px;
right: 10px;
text-align: right !important;
}
}
}
/* Keep spacing compact */
p, label, input, td {
p,
label,
input,
td {
margin: 0;
padding: 2px 4px;
}
}
.btn-cetak {
background-color: #f8f5f5; /* black background */
color: #fff; /* white text */
.italic-note {
font-style: italic;
}
.keyin-line {
border: none;
padding: 8px 18px;
border-radius: 8px;
font-size: 14px;
cursor: pointer;
font-weight: 500;
letter-spacing: 0.5px;
transition: all 0.3s ease;
border-bottom: 1px dashed black;
width: 140px;
padding: 2px 4px;
}
.btn-cetak:hover {
background-color: #287906;
transform: scale(1.03);
.btn-effect {
transition: 0.3s ease;
}
.btn-cetak:active {
background-color: #060882;
transform: scale(1);
.btn-effect:hover {
transform: scale(1.05);
box-shadow: 0 0 10px rgba(8, 8, 8, 0.818);
}
@media print {
.btn-cetak {
display: none; /* hide button when printing */
}
}
</style>
resources/assets/js/components/demo/voter/index.vue
+2 -2
View File
@@ -35,9 +35,9 @@
<a href="#"><b>PAUTAN MESYUARAT</b></a>
</router-link>
<router-link :to="{name: 'Penyata'}" tag="li" exact>
<!-- <router-link :to="{name: 'Penyata'}" tag="li" exact>
<a href="#"><b>PENYATA AHLI</b></a>
</router-link>
</router-link> -->
</ul>
<ul class="nav navbar-right navbar-nav">