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