edit pdf upon bos request

This commit is contained in:
nurafrinaalimi16
2026-02-26 15:13:06 +08:00
parent ad4504729f
commit bed56792e6
2 changed files with 162 additions and 77 deletions
@@ -7,8 +7,8 @@
<div class="logo-wrapper">
<img src="/images/logo-kopkb.jpeg" alt="KoPKB Logo" class="kopkb-logo" />
<div>
<h4 class="fw-bold mb-1">Koperasi Permodalan Kelantan Berhad (KoPKB)</h4>
<p style="font-size:13px; line-height:1.3; margin:0;">
<h4 class="fw-bold mb-1">KOPERASI PERMODALAN KELANTAN BERHAD</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>
@@ -24,13 +24,15 @@
</div>
</div>
<hr class="mt-3" />
<!-- <hr class="mt-3" /> -->
<hr style="border: none; border-top: 1.5px solid #000; margin: 15px 0;">
<!-- 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" />
<span>26-02-2026</span>
</div>
<div class="form-group">
@@ -50,80 +52,112 @@
</div>
<!-- MAIN CONTENT -->
<h5 class="mt-4"><strong>PENGESAHAN PENYATA BAKI AKAUN AHLI</strong></h5>
<p>Adalah dimaklumkan kedudukan baki akaun tuan/puan pada <b>31/12/2025</b> adalah seperti berikut:</p>
<h5 class="mt-4"><strong><u>PENGESAHAN PENYATA BAKI AKAUN AHLI</u></strong></h5>
<p>Adalah dimaklumkan kedudukan baki akaun tuan/puan pada <b>31/12/2025</b> dengan Koperasi Permodalan
Kelantan Berhad adalah seperti berikut:</p>
<!-- 2-COLUMN TABLE -->
<table class="boxed-table mt-4">
<tbody>
<tr>
<td>Saham</td>
<td>{{ data.user.saham }}</td>
<td>-{{ formatNumber(data.user.saham) }}</td>
<td>Pembiayaan Kecemasan</td>
<td>{{ formatNumber(data.user.tergempar) }}</td>
</tr>
<tr>
<td>Yuran</td>
<td>{{ data.user.yuran }}</td>
<td>-{{ formatNumber(data.user.yuran) }}</td>
<td>Pembiayaan Pengguna</td>
<td>{{ formatNumber(data.user.barangan) }}</td>
</tr>
<tr>
<td>Pelaburan T1</td>
<td>{{ data.user.pelaburan }}</td>
<td>-{{ formatNumber(data.user.pelaburan) }}</td>
<td>Pembiayaan Peribadi</td>
<td>{{ data.user.peribadi }}</td>
<td>{{ formatNumber(data.user.peribadi) }}</td>
</tr>
<tr>
<td>Pelaburan T2</td>
<td>{{ data.user.pelaburanT2 }}</td>
<td>0.00</td>
<td>Pembiayaan Berjamin Yuran</td>
<td>{{ data.user.berjamin_yuran }}</td>
<td>{{ formatNumber(data.user.berjamin_yuran) }}</td>
</tr>
<tr>
<td>Pembiayaan Kecemasan</td>
<td>{{ data.user.tergempar }}</td>
<td></td>
<td></td>
<td>Pembiayaan Takaful / Cukai Jalan</td>
<td>{{ data.user.roadtax }}</td>
<td>{{ formatNumber(data.user.roadtax) }}</td>
</tr>
<tr>
<td>Pembiayaan Pengguna</td>
<td>{{ data.user.barangan }}</td>
<td></td>
<td></td>
<td>Pembiayaan Pelaburan / Pelbagai</td>
<td>{{ data.user.pelbagai }}</td>
<td>{{ formatNumber(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 class="mt-4">Sukacita dapat tuan/puan untuk mengesahkan baki tersebut dengan memasukkan No K/P anggota dan menekan butang SAHKAN
untuk tujuan audit tahunan koperasi sebelum <b>12-03-2026</b>.</p>
<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
terhadap baki yang dipaparkan.</p>
<p>Sekian, dimaklumkan.</p>
<p class="italic-note">Surat ini dikeluarkan oleh komputer, tidak perlu ditandatangani.</p>
<hr style="border: none; border-top: 1.5px solid #000; margin: 15px 0;">
<!-- PERSETUJUAN AHLI -->
<div class="text-center mt-4 mb-3">
<div style="font-weight:700; font-size:18px; letter-spacing:1px;">
<div style="font-weight:700; font-size:18px;">
PERSETUJUAN AHLI
</div>
<hr style="width:200px; margin:8px auto;">
</div>
<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>
<div style="margin-top:10px; line-height:1.8;">
<div style="margin-bottom:8px;">
<label style="cursor:pointer;">
<input type="radio" name="persetujuan" value="Bersetuju" v-model="persetujuan"
:disabled="data.user.status_penyata === 'DISAHKAN'" />
<span style="margin-left:6px;">
Saya <strong>MENGESAHKAN</strong> bahawa baki yang dipaparkan adalah BENAR dan TEPAT.
</span>
</label>
</div>
<div>
<label style="cursor:pointer;">
<input type="radio" name="persetujuan" value="Tidak Bersetuju" v-model="persetujuan"
:disabled="data.user.status_penyata === 'DISAHKAN'" />
<span style="margin-left:6px;">
Saya <strong>TIDAK BERSETUJU</strong> dengan baki yang dipaparkan.
</span>
</label>
</div>
<div>
<p>Jika tidak bersetuju, sila nyatakan jumlah yang betul di bawah:</p>
</div>
<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
TELAH DISAHKAN
</span>
<span v-else-if="persetujuan === 'TIDAK SETUJU'" class="badge-tidak-setuju">
<span v-else-if="data.user.status_penyata === 'Tidak Bersetuju'" class="badge-tidak-setuju">
Tidak Setuju
</span>
@@ -139,48 +173,38 @@
<tbody>
<tr>
<td>Saham</td>
<td><input type="number" class="keyin-input" v-model="data.user.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>-<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 Peribadi</td>
<td>-<input type="number" class="keyin-input" v-model="data.user.pelaburan" /></td>
<td>Pembiayaan Peribadi</td>
<td><input type="number" class="keyin-input" v-model="data.user.peribadi" /></td>
</tr>
<tr>
<td>Pelaburan T2</td>
<td><input type="number" class="keyin-input" v-model="data.user.pelaburanT2" /></td>
<td>-<input type="number" class="keyin-input" v-model="data.user.pelaburanT2" /></td>
<td>Pembiayaan Berjamin Yuran</td>
<td><input type="number" class="keyin-input" v-model="data.user.berjamin_yuran" /></td>
</tr>
<tr>
<td>Pembiayaan Kecemasan</td>
<td><input type="number" class="keyin-input" v-model="data.user.tergempar" /></td>
<td>Pembiayaan Takaful / Cukai Jalan</td>
<td><input type="number" class="keyin-input" v-model="data.user.roadtax" /></td>
</tr>
<tr>
<td>Pembiayaan Pengguna</td>
<td><input type="number" class="keyin-input" v-model="data.user.barangan" /></td>
<td>Pembiayaan Pelaburan / Pelbagai</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">
@@ -193,6 +217,31 @@
</div>
</div>
<!-- BUTTONS -->
<br>
<div class="text-right mt-5 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>
<hr style="border: none; border-top: 1.5px solid #000; margin: 15px 0;">
<!-- NOTA PENTING -->
<div class="mt-5">
<p class="fw-bold mb-1">Nota Penting:</p>
<ul class="mb-0">
<li>Pengesahan ini adalah bagi tujuan Audit Tahunan KoPKB.</li>
<li>Anggota hendaklah membuat pengesahan dalam tempoh 14 hari.</li>
<li>Kegagalan memberi maklum balas dalam tempoh tersebut akan dianggap sebagai persetujuan terhadap baki yang
dipaparkan.</li>
<li>Semua rekod pengesahan adalah tertakluk kepada semakan juruaudit luar.</li>
</ul>
</div>
</div>
</template>
@@ -249,6 +298,12 @@ export default {
console.error(err);
alert("Gagal sahkan penyata");
}
},
formatNumber(value) {
return Number(value || 0).toLocaleString('en-US', {
minimumFractionDigits: 2,
maximumFractionDigits: 2
})
}
}
};
@@ -382,6 +437,15 @@ export default {
letter-spacing: 0.3px;
}
/* .badge-tidak-setuju{
background: #a72828;
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;
+41 -20
View File
@@ -53,13 +53,15 @@
.box-table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
border: 2px solid #000;
/* Border luar sahaja */
border-collapse: separate;
border-spacing: 0;
}
.box-table td {
border: 1px solid #000;
padding: 6px;
border: none;
padding: 6px 10px;
}
.note {
@@ -74,6 +76,7 @@
.small {
font-size: 11px;
font-style: italic;
}
</style>
</head>
@@ -92,8 +95,8 @@
<img src="{{ public_path('images/logo-kopkb.jpeg') }}" style="width:80px;">
</td>
<td valign="top">
<strong style="font-size:18px;">
Koperasi Permodalan Kelantan Berhad (KoPKB)
<strong style="font-size:14px;">
KOPERASI PERMODALAN KELANTAN BERHAD
</strong><br>
<span style="font-size:14px; line-height:1.4;">
Lot PT 448, Tingkat 1, Jalan Kuala Krai, Batu 3,<br>
@@ -137,15 +140,14 @@
</tr>
</table>
<hr style="border: none; border-top: 1.5px solid #000; margin: 15px 0;">
{{-- INFO --}}
<div class="section">
<table class="info-table">
<tr>
<td class="label">Tarikh :</td>
<td>{{ date('d/m/Y') }}</td>
<td>26-02-2026</td>
<td class="label">No. Anggota :</td>
<td>{{ $p->no_anggota }}</td>
</tr>
@@ -160,7 +162,7 @@
{{-- CONTENT --}}
<div class="section">
<strong>PENGESAHAN PENYATA BAKI AKAUN AHLI</strong>
<strong><u>PENGESAHAN PENYATA BAKI AKAUN AHLI</u></strong>
<p>
Adalah dimaklumkan kedudukan baki akaun tuan/puan pada
<b>31/12/2025</b> dengan Koperasi Permodalan Kelantan Berhad adalah seperti berikut:
@@ -169,40 +171,57 @@
<table class="box-table">
<tr>
<td>Saham</td>
<td>{{ number_format($p->saham, 2) }}</td>
<td>-{{ number_format($p->saham, 2) }}</td>
<td>Pembiayaan Kecemasan</td>
<td>{{ number_format($p->tergempar, 2) }}</td>
</tr>
<tr>
<td>Yuran</td>
<td>{{ number_format($p->yuran, 2) }}</td>
<td>-{{ number_format($p->yuran, 2) }}</td>
<td>Pembiayaan Pengguna</td>
<td>{{ number_format($p->barangan, 2) }}</td>
</tr>
<tr>
<td>Pelaburan T1</td>
<td>{{ number_format($p->pelaburan, 2) }}</td>
<td>-{{ number_format($p->pelaburan, 2) }}</td>
<td>Pembiayaan Peribadi</td>
<td>{{ number_format($p->peribadi, 2) }}</td>
</tr>
<tr>
<td>Pelaburan T2</td>
<td>{{ number_format($p->pelaburan_t2, 2) }}</td>
<td>Pembiayaan Berjamin Yuran</td>
<td>{{ number_format($p->berjamin_yuran, 2) }}</td>
</tr>
<tr>
<td>Pembiayaan Kecemasan</td>
<td>{{ number_format($p->tergempar, 2) }}</td>
<td></td>
<td></td>
<td>Pembiayaan Takaful / Cukai Jalan</td>
<td>{{ number_format($p->roadtax, 2) }}</td>
</tr>
<tr>
<td>Pembiayaan Pengguna</td>
<td>{{ number_format($p->barangan, 2) }}</td>
<td>Pembiayaan Pelaburan/Pelbagai</td>
<td></td>
<td></td>
<td>Pembiayaan Pelaburan / Pelbagai</td>
<td>{{ number_format($p->pelbagai, 2) }}</td>
</tr>
</table>
<p class="note">
<p>Sukacita dapat tuan/puan untuk mengesahkan baki tersebut dengan memasukkan No K/P anggota dan
menekan butang SAHKAN untuk tujuan audit tahunan koperasi sebelum <b>12-03-2026</b>.</p>
<p>
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.
terhadap baki yang dipaparkan.
</p>
<p>
Sekian, terima kasih.
</p>
<p class="small">
@@ -210,6 +229,8 @@
</p>
</div>
<hr style="border: none; border-top: 1.5px solid #000; margin: 15px 0;">
{{-- PERSETUJUAN AHLI --}}
<div class="section">
<strong>PERSETUJUAN AHLI</strong>