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"> <div class="logo-wrapper">
<img src="/images/logo-kopkb.jpeg" alt="KoPKB Logo" class="kopkb-logo" /> <img src="/images/logo-kopkb.jpeg" alt="KoPKB Logo" class="kopkb-logo" />
<div> <div>
<h4 class="fw-bold mb-1">Koperasi Permodalan Kelantan Berhad (KoPKB)</h4> <h4 class="fw-bold mb-1">KOPERASI PERMODALAN KELANTAN BERHAD</h4>
<p style="font-size:13px; line-height:1.3; margin:0;"> <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 /> 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 Tel: 09-7414339 | Website: www.koppkb.com
</p> </p>
@@ -24,13 +24,15 @@
</div> </div>
</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 --> <!-- MEMBER INFO -->
<div v-if="data.user.no_anggota" class="form-section two-column"> <div v-if="data.user.no_anggota" class="form-section two-column">
<div class="form-group"> <div class="form-group">
<label class="form-label fw-semibold">Tarikh :</label> <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>
<div class="form-group"> <div class="form-group">
@@ -50,80 +52,112 @@
</div> </div>
<!-- MAIN CONTENT --> <!-- MAIN CONTENT -->
<h5 class="mt-4"><strong>PENGESAHAN PENYATA BAKI AKAUN AHLI</strong></h5> <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> adalah seperti berikut:</p> <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 --> <!-- 2-COLUMN TABLE -->
<table class="boxed-table mt-4"> <table class="boxed-table mt-4">
<tbody> <tbody>
<tr> <tr>
<td>Saham</td> <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>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>
<tr> <tr>
<td>Pelaburan T1</td> <td>Pelaburan T1</td>
<td>{{ data.user.pelaburan }}</td> <td>-{{ formatNumber(data.user.pelaburan) }}</td>
<td>Pembiayaan Peribadi</td> <td>Pembiayaan Peribadi</td>
<td>{{ data.user.peribadi }}</td> <td>{{ formatNumber(data.user.peribadi) }}</td>
</tr> </tr>
<tr> <tr>
<td>Pelaburan T2</td> <td>Pelaburan T2</td>
<td>{{ data.user.pelaburanT2 }}</td> <td>0.00</td>
<td>Pembiayaan Berjamin Yuran</td> <td>Pembiayaan Berjamin Yuran</td>
<td>{{ data.user.berjamin_yuran }}</td> <td>{{ formatNumber(data.user.berjamin_yuran) }}</td>
</tr> </tr>
<tr> <tr>
<td>Pembiayaan Kecemasan</td> <td></td>
<td>{{ data.user.tergempar }}</td> <td></td>
<td>Pembiayaan Takaful / Cukai Jalan</td> <td>Pembiayaan Takaful / Cukai Jalan</td>
<td>{{ data.user.roadtax }}</td> <td>{{ formatNumber(data.user.roadtax) }}</td>
</tr> </tr>
<tr> <tr>
<td>Pembiayaan Pengguna</td> <td></td>
<td>{{ data.user.barangan }}</td> <td></td>
<td>Pembiayaan Pelaburan / Pelbagai</td> <td>Pembiayaan Pelaburan / Pelbagai</td>
<td>{{ data.user.pelbagai }}</td> <td>{{ formatNumber(data.user.pelbagai) }}</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<p class="mt-4"><em>Sekiranya kami tidak menerima pengesahan dalam tempoh <strong>14 hari</strong>, ia dianggap <p class="mt-4">Sukacita dapat tuan/puan untuk mengesahkan baki tersebut dengan memasukkan No K/P anggota dan menekan butang SAHKAN
bersetuju dan memperakui benar.</em></p> 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>Sekian, dimaklumkan.</p>
<p class="italic-note">Surat ini dikeluarkan oleh komputer, tidak perlu ditandatangani.</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 --> <!-- PERSETUJUAN AHLI -->
<div class="text-center mt-4 mb-3"> <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 PERSETUJUAN AHLI
</div> </div>
<hr style="width:200px; margin:8px auto;"> <hr style="width:200px; margin:8px auto;">
</div> </div>
<div class="text-center"> <div style="margin-top:10px; line-height:1.8;">
<label class="ms-2">
<input type="radio" name="persetujuan" value="Bersetuju" v-model="persetujuan" <div style="margin-bottom:8px;">
:disabled="data.user.status_penyata === 'DISAHKAN'" /> <label style="cursor:pointer;">
Bersetuju <input type="radio" name="persetujuan" value="Bersetuju" v-model="persetujuan"
</label> :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> </div>
<p class="text-center"> <p class="text-center">
<strong> <strong>
<span v-if="data.user.status_penyata === 'DISAHKAN'" class="badge-disahkan"> <span v-if="data.user.status_penyata === 'DISAHKAN'" class="badge-disahkan">
Disahkan TELAH DISAHKAN
</span> </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 Tidak Setuju
</span> </span>
@@ -139,48 +173,38 @@
<tbody> <tbody>
<tr> <tr>
<td>Saham</td> <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>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>
<tr> <tr>
<td>Pelaburan T1</td> <td>Pelaburan T1</td>
<td><input type="number" class="keyin-input" v-model="data.user.pelaburan" /></td> <td>-<input type="number" class="keyin-input" v-model="data.user.pelaburan" /></td>
<td>Pembiayaan Peribadi</td> <td>Pembiayaan Peribadi</td>
<td><input type="number" class="keyin-input" v-model="data.user.peribadi" /></td> <td><input type="number" class="keyin-input" v-model="data.user.peribadi" /></td>
</tr> </tr>
<tr> <tr>
<td>Pelaburan T2</td> <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>Pembiayaan Berjamin Yuran</td>
<td><input type="number" class="keyin-input" v-model="data.user.berjamin_yuran" /></td> <td><input type="number" class="keyin-input" v-model="data.user.berjamin_yuran" /></td>
</tr> </tr>
<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>Pembiayaan Takaful / Cukai Jalan</td>
<td><input type="number" class="keyin-input" v-model="data.user.roadtax" /></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>Pembiayaan Pelaburan / Pelbagai</td>
<td><input type="text" class="keyin-input" v-model="data.user.pelbagai" /></td> <td><input type="text" class="keyin-input" v-model="data.user.pelbagai" /></td>
</tr> </tr>
</tbody> </tbody>
</table> </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 --> <!-- TANDATANGAN & TARIKH -->
<div class="signature-section"> <div class="signature-section">
<div class="sign-column"> <div class="sign-column">
@@ -193,6 +217,31 @@
</div> </div>
</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> </div>
</template> </template>
@@ -249,6 +298,12 @@ export default {
console.error(err); console.error(err);
alert("Gagal sahkan penyata"); 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; 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) { @media(max-width:768px) {
.header-section { .header-section {
grid-template-columns: 1fr; grid-template-columns: 1fr;
+41 -20
View File
@@ -53,13 +53,15 @@
.box-table { .box-table {
width: 100%; width: 100%;
border-collapse: collapse; border: 2px solid #000;
margin-top: 10px; /* Border luar sahaja */
border-collapse: separate;
border-spacing: 0;
} }
.box-table td { .box-table td {
border: 1px solid #000; border: none;
padding: 6px; padding: 6px 10px;
} }
.note { .note {
@@ -74,6 +76,7 @@
.small { .small {
font-size: 11px; font-size: 11px;
font-style: italic;
} }
</style> </style>
</head> </head>
@@ -92,8 +95,8 @@
<img src="{{ public_path('images/logo-kopkb.jpeg') }}" style="width:80px;"> <img src="{{ public_path('images/logo-kopkb.jpeg') }}" style="width:80px;">
</td> </td>
<td valign="top"> <td valign="top">
<strong style="font-size:18px;"> <strong style="font-size:14px;">
Koperasi Permodalan Kelantan Berhad (KoPKB) KOPERASI PERMODALAN KELANTAN BERHAD
</strong><br> </strong><br>
<span style="font-size:14px; line-height:1.4;"> <span style="font-size:14px; line-height:1.4;">
Lot PT 448, Tingkat 1, Jalan Kuala Krai, Batu 3,<br> Lot PT 448, Tingkat 1, Jalan Kuala Krai, Batu 3,<br>
@@ -137,15 +140,14 @@
</tr> </tr>
</table> </table>
<hr style="border: none; border-top: 1.5px solid #000; margin: 15px 0;">
{{-- INFO --}} {{-- INFO --}}
<div class="section"> <div class="section">
<table class="info-table"> <table class="info-table">
<tr> <tr>
<td class="label">Tarikh :</td> <td class="label">Tarikh :</td>
<td>{{ date('d/m/Y') }}</td> <td>26-02-2026</td>
<td class="label">No. Anggota :</td> <td class="label">No. Anggota :</td>
<td>{{ $p->no_anggota }}</td> <td>{{ $p->no_anggota }}</td>
</tr> </tr>
@@ -160,7 +162,7 @@
{{-- CONTENT --}} {{-- CONTENT --}}
<div class="section"> <div class="section">
<strong>PENGESAHAN PENYATA BAKI AKAUN AHLI</strong> <strong><u>PENGESAHAN PENYATA BAKI AKAUN AHLI</u></strong>
<p> <p>
Adalah dimaklumkan kedudukan baki akaun tuan/puan pada Adalah dimaklumkan kedudukan baki akaun tuan/puan pada
<b>31/12/2025</b> dengan Koperasi Permodalan Kelantan Berhad adalah seperti berikut: <b>31/12/2025</b> dengan Koperasi Permodalan Kelantan Berhad adalah seperti berikut:
@@ -169,40 +171,57 @@
<table class="box-table"> <table class="box-table">
<tr> <tr>
<td>Saham</td> <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>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>
<tr> <tr>
<td>Pelaburan T1</td> <td>Pelaburan T1</td>
<td>{{ number_format($p->pelaburan, 2) }}</td> <td>-{{ number_format($p->pelaburan, 2) }}</td>
<td>Pembiayaan Peribadi</td> <td>Pembiayaan Peribadi</td>
<td>{{ number_format($p->peribadi, 2) }}</td> <td>{{ number_format($p->peribadi, 2) }}</td>
</tr> </tr>
<tr> <tr>
<td>Pelaburan T2</td> <td>Pelaburan T2</td>
<td>{{ number_format($p->pelaburan_t2, 2) }}</td> <td>{{ number_format($p->pelaburan_t2, 2) }}</td>
<td>Pembiayaan Berjamin Yuran</td> <td>Pembiayaan Berjamin Yuran</td>
<td>{{ number_format($p->berjamin_yuran, 2) }}</td> <td>{{ number_format($p->berjamin_yuran, 2) }}</td>
</tr> </tr>
<tr> <tr>
<td>Pembiayaan Kecemasan</td> <td></td>
<td>{{ number_format($p->tergempar, 2) }}</td> <td></td>
<td>Pembiayaan Takaful / Cukai Jalan</td> <td>Pembiayaan Takaful / Cukai Jalan</td>
<td>{{ number_format($p->roadtax, 2) }}</td> <td>{{ number_format($p->roadtax, 2) }}</td>
</tr> </tr>
<tr> <tr>
<td>Pembiayaan Pengguna</td> <td></td>
<td>{{ number_format($p->barangan, 2) }}</td> <td></td>
<td>Pembiayaan Pelaburan/Pelbagai</td> <td>Pembiayaan Pelaburan / Pelbagai</td>
<td>{{ number_format($p->pelbagai, 2) }}</td> <td>{{ number_format($p->pelbagai, 2) }}</td>
</tr> </tr>
</table> </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 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 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>
<p class="small"> <p class="small">
@@ -210,6 +229,8 @@
</p> </p>
</div> </div>
<hr style="border: none; border-top: 1.5px solid #000; margin: 15px 0;">
{{-- PERSETUJUAN AHLI --}} {{-- PERSETUJUAN AHLI --}}
<div class="section"> <div class="section">
<strong>PERSETUJUAN AHLI</strong> <strong>PERSETUJUAN AHLI</strong>