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" /> <img src="/images/logo-kopkb.jpeg" alt="KoPKB Logo" class="kopkb-logo" />
<div> <div>
<div style="text-align: left;"> <div style="text-align: left;">
<h4 class="fw-bold mb-1"> <h4 class="fw-bold mb-1">
<strong>Koperasi Permodalan Kelantan Berhad (KoPKB)</strong> <strong>Koperasi Permodalan Kelantan Berhad (KoPKB)</strong>
</h4> </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, Lot PT 448, Tingkat 1, Jalan Kuala Krai, Batu 3,
Wakaf Che Yeh, 15150 Kota Bharu, Kelantan<br /> Wakaf Che Yeh, 15150 Kota Bharu, Kelantan<br />
Tel: 09-7414339 | Website: www.koppkb.com Tel: 09-7414339 | Website: www.koppkb.com
</p> </p>
</div>
</div> </div>
</div> </div>
</div>
</div> </div>
<div class="header-right"> <div class="header-right">
<!-- ✅ Boxed Title --> <!-- ✅ Boxed Title -->
<div class="title-box"> <div class="title-box">
<h4>PENYATA AHLI</h4> <h5>PENYATA AHLI</h5>
</div>
<h4 class="text-muted mt-2" text-center> {{ new Date().getFullYear() }}</h4>
</div>
</div> </div>
<h4 class="text-muted mt-2" text-center> {{ new Date().getFullYear() }}</h4>
</div>
</div>
<hr class="mt-3" /> <hr class="mt-3" />
<!-- ✅ MEMBER INFO SECTION (2 Columns) --> <!-- ✅ MEMBER INFO SECTION (2 Columns) -->
<div class="form-section two-column"> <div class="form-section two-column ">
<div class="form-group"> <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" /> <input type="date" class="form-control form-control-sm" v-model="tarikh" />
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="form-label fw-semibold">No. Ahli:</label> <label class="form-label fw-semibold">No. Anggota:</label>
<input type="text" class="form-control form-control-sm" v-model="noAhli" readonly /> {{ data.user.no_anggota }}
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="form-label fw-semibold">Nama:</label> <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>
<div class="form-group"> <div class="form-group">
<label class="form-label fw-semibold">Pejabat / Syarikat:</label> <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>
</div> </div>
<!-- ✅ MAIN CONTENT --> <!-- ✅ MAIN CONTENT -->
<h5 class="mt-4"><strong>PENGESAHAN PENYATA BAKI AKAUN AHLI</strong></h5> <h5 class="mt-4"><strong>PENGESAHAN PENYATA BAKI AKAUN AHLI</strong></h5>
<p> <p>
Adalah dimaklumkan kedudukan baki akaun tuan/puan pada Adalah dimaklumkan kedudukan baki akaun tuan/puan pada <strong>{{ tarikh }}</strong> dengan Koperasi Permodalan
<strong>{{ tarikh }}</strong> dengan Koperasi Permodalan Kelantan Berhad adalah seperti berikut: Kelantan Berhad adalah seperti berikut:
</p> </p>
<p style="text-align: justify;"> <p style="text-align: justify;">
Sukacita dapat tuan/puan mengesahkan baki tersebut dan menandatangani salinan penyata akaun berkembar Sukacita dapat tuan/puan mengesahkan baki tersebut dan menandatangani salinan penyata akaun berkembar
untuk tujuan audit dan kembalikan salinan tersebut kepada koperasi sebelum untuk tujuan audit dan kembalikan salinan tersebut kepada koperasi sebelum <input type="date"
<strong>{{ tarikh }}</strong>. class="form-control form-control-sm" v-model="tarikh" />
</p> </p>
<!-- ✅ 2-COLUMN TABLE --> <!-- ✅ 2-COLUMN TABLE -->
@@ -74,168 +74,213 @@
<tbody> <tbody>
<tr> <tr>
<td>Saham</td> <td>Saham</td>
<td><input type="number" class="form-control-sm" v-model="penyata.saham" /></td> <td>{{ data.user.saham }}</td>
<td>Pinjaman AQH</td>
<td><input type="number" class="form-control-sm" v-model="penyata.pinjamanAQH" /></td>
</tr>
<tr>
<td>Yuran</td> <td>Yuran</td>
<td><input type="number" class="form-control-sm" v-model="penyata.yuran" /></td> <td>{{ data.user.yuran}}</td>
<td>Pinjaman BBA</td>
<td><input type="number" class="form-control-sm" v-model="penyata.pinjamanBBA" /></td>
</tr>
<tr> <tr>
<td>Pelaburan T1</td> <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>Pinjaman BAI</td>
<td><input type="number" class="form-control-sm" v-model="penyata.pinjamanBAI" /></td> <td>{{ penyata.pinjaman_bai }}</td>
</tr> </tr>
<tr> <tr>
<td>Pelaburan T2</td> <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>Pinjaman BYS</td>
<td><input type="number" class="form-control-sm" v-model="penyata.pinjamanBYS" /></td> <td>{{ penyata.pinjaman_bys}}</td>
</tr> </tr>
<tr> <tr>
<td>&nbsp;</td> <td>Pelaburan AQH</td>
<td>&nbsp;</td> <td>{{ penyata.pelaburan_aqh }}</td>
<td>Insurans / Cukai Jalan</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>
<tr> <tr>
<td>&nbsp;</td> <td>Pelaburan BBA </td>
<td>&nbsp;</td> <td>{{ penyata.pelaburan_bba }}</td>
<td>Pinjaman Pelbagai</td> <td>Pinjaman Pelbagai</td>
<td><input type="number" class="form-control-sm" v-model="penyata.pinjamanPelbagai" /></td> <td>{{ penyata.pinj_pelbagai }}</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<!-- ✅ FOOTER SECTION --> <!-- ✅ FOOTER SECTION -->
<p class="mt-4"> <p class="mt-4"><em>
Dimaklumkan juga bahawa sekiranya kami tidak menerima pengesahan tuan/puan ke atas penyata ini dalam tempoh 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. <strong>14 hari</strong> daripada tarikh surat ini, maka ia dianggap tuan/puan bersetuju dan memperakui ia
adalah
benar.</em>
</p> </p>
<p>Sekian, dimaklumkan.</p><br> <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 /> <hr />
<p style="text-align: center;"><h5><strong>PERSETUJUAN AHLI </strong></h5></p> <br> <p style="text-align: center;">
<p style="text-align: justify;"><h5>Saya , <input <h5><strong>PERSETUJUAN AHLI </strong></h5>
type="text" </p> <br>
class="keyin-line" <p style="text-align: justify;">
v-model="penyata.nama" <h5>
placeholder="" Saya, <strong>{{ data.user.name }}</strong>,
/>, No Ahli: <input No Anggota: <strong>{{ data.user.no_anggota }}</strong> ,
type="text"
class="keyin-line" <strong>
placeholder=""
v-model="noAhliPersetujuan" <label class="ms-2">
/> <strong>Bersetuju/Tidak Bersetuju </strong> dengan yang tercatit dalam penyata baki seperti di atas.</p> </h5> <input type="radio" value="Bersetuju" v-model="persetujuan" />
<p style="text-align: justify;"></p>Jika Tidak Bersetuju, Sila kemukakan yang sepatutnya seperti : Bersetuju
<br> </label>
<!-- ✅ 2-COLUMN TABLE -->
<table class="table table-sm no-lines text-center align-middle"> <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> <tbody>
<tr> <tr>
<td>Saham</td> <td>Saham</td>
<input <td><input type="number" class="form-control-sm keyin-input" v-model="penyata.saham" /></td>
type="number" class="keyin-input" v-model="penyata.saham" placeholder=""
/>
<td>Pinjaman AQH</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>
<tr> <tr>
<td>Yuran</td> <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>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>
<tr> <tr>
<td>Pelaburan T1</td> <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>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>
<tr> <tr>
<td>Pelaburan T2</td> <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>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>
<tr> <tr>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>Insurans / Cukai Jalan</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>
<tr> <tr>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>Pinjaman Pelbagai</td> <td>Pinjaman Pelbagai</td>
<td><input type="text" class="form-control-sm keyin-input" v-model="penyata.pinjamanPelbagai" placeholder="" <td><input type="text" class="form-control-sm keyin-input" v-model="penyata.pinj_Pelbagai" /></td>
/></td>
</tr> </tr>
</tbody> </tbody>
</table> </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"> <!-- ✅ Sah Button -->
<label class="form-label">Tarikh:</label> <div class="text-right mb-3 no-print">
<!-- <input type="text" class="keyin-line" placeholder="" /> --> <button type="button" class="btn btn-primary btn-effect" style="width: 100px;" @click="SahkanPenyata">
</div> Sahkan
</div> </button>
<br><br> </div>
<!-- ✅ Cetak Button -->
<div class="text-right mb-3 no-print"> <!-- ✅ Tandatangan & Tarikh Section -->
<button type="button" class="btn btn-success" style="width: 160px;" @click="cetakPenyata"> <div class="signature-section">
Cetak Penyata <div class="sign-column">
</button> <label class="form-label">Tandatangan:</label>
</div> <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> </div>
</template> </template>
<script> <script>
import axios from 'axios'; // <-- this is required
export default { export default {
name: "PenyataView", name: "PenyataView",
data() { data() {
return { return {
tarikh: new Date().toISOString().substring(0, 10), tarikh: new Date().toISOString().substring(0, 10),
noAhli: "12345", noAhli: "",
nama: "Ahmad bin Ali", nama: "",
syarikat: "KPKB HQ", unit: "",
noAhliPersetujuan: "",
persetujuan: "",
penyata: { penyata: {
saham: 1000, saham: "",
yuran: 50, yuran: "",
pelaburanT1: 2000, pelaburanT1: "",
pelaburanT2: 1500, pelaburanT2: "",
pinjamanAQH: 500, pinjamanAQH: "",
pinjamanBBA: 1200, pinjamanBBA: "",
pinjamanBAI: 700, pinjamanBAI: "",
pinjamanBYS: 400, pinjamanBYS: "",
insurans: 300, insuransCukai: "",
pinjamanPelbagai: 800 pinjamanPelbagai: ""
} }
}; };
}, },
methods: { mounted() {
cetakPenyata() { const id = this.$route.params.id;
window.print(); 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> </script>
<style scoped> <style scoped>
.penyata-wrapper { .penyata-wrapper {
max-width: 800px; max-width: 800px;
@@ -250,29 +295,48 @@ export default {
align-items: center; align-items: center;
gap: 20px; gap: 20px;
} }
.logo-wrapper { .logo-wrapper {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
gap: 15px; gap: 15px;
} }
.kopkb-logo { .kopkb-logo {
width: 80px; width: 80px;
height: auto; height: auto;
} }
.header-right { .header-right {
text-align: right; text-align: right;
} }
/* ✅ Member Info (2 columns) */ /* ✅ Member Info (2 columns) */
.two-column { /* Member Info - 2 columns */
.form-section.two-column {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; /* width: 100%; */
gap: 15px 30px; 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 { .form-control-sm {
border: none; border: none;
border-bottom: 1px solid #666; border-bottom: 1px solid #666;
@@ -283,11 +347,13 @@ export default {
} }
/* ✅ Table */ /* ✅ Table */
.table,
table.boxed-table { table.boxed-table {
width: 100%; width: 100%;
border-collapse: separate; border-collapse: separate;
border-spacing: 4px; border-spacing: 4px;
} }
table.boxed-table td { table.boxed-table td {
border: 1px inset #000; border: 1px inset #000;
padding: 6px 8px; padding: 6px 8px;
@@ -302,21 +368,24 @@ table.boxed-table td {
grid-template-columns: 1fr; grid-template-columns: 1fr;
text-align: center; text-align: center;
} }
.header-right { .header-right {
text-align: center; text-align: center;
margin-top: 10px; margin-top: 10px;
} }
.logo-wrapper { .logo-wrapper {
justify-content: center; justify-content: center;
} }
.two-column {
grid-template-columns: 1fr;
}
} }
.title-box { .title-box {
background-color: #000; /* black background */ background-color: #000;
color: #fff; /* white text */ /* black background */
color: #fff;
/* white text */
padding: 8px 15px; padding: 8px 15px;
display: inline-block; display: inline-block;
border-radius: 4px; border-radius: 4px;
@@ -335,12 +404,14 @@ table.boxed-table td {
/* Remove all inner lines */ /* Remove all inner lines */
.no-lines { .no-lines {
border-collapse: separate; border-collapse: separate;
border-spacing: 0 4px; /* small space between rows */ border-spacing: 0 4px;
/* small space between rows */
width: 100%; width: 100%;
} }
.no-lines td { .no-lines td {
border: none !important; /* no borders inside */ border: none !important;
/* no borders inside */
padding: 4px 6px; padding: 4px 6px;
font-size: 13px; font-size: 13px;
vertical-align: middle; vertical-align: middle;
@@ -349,7 +420,7 @@ table.boxed-table td {
/* Key-in style input fields */ /* Key-in style input fields */
.keyin-input { .keyin-input {
width: 80%; width: 90%;
border: none; border: none;
border-bottom: 1px solid #000; border-bottom: 1px solid #000;
outline: none; outline: none;
@@ -365,19 +436,29 @@ table.boxed-table td {
.signature-section { .signature-section {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; /* two equal columns */ grid-template-columns: 1fr 1fr; /* equal 50/50 width */
gap: 30px; column-gap: 40px;
margin-top: 20px; row-gap: 15px;
width: 100%;
max-width: 780px; /* ⭐ same width as tables */
margin: 20px auto 0 auto; /* ⭐ center align */
} }
.sig-column { .signature-section .sign-column,
display: flex; .signature-section .sig-column {
flex-direction: column; min-width: 0; /* allows equal split */
} }
.signature-section input {
width: 90%; /* align input edges */
}
.keyin-line { .keyin-line {
border: none; border: none;
border-bottom: 1px solid #000; /* underline style */ border-bottom: 1px solid #000;
/* underline style */
background: transparent; background: transparent;
outline: none; outline: none;
padding: 2px 0; padding: 2px 0;
@@ -390,22 +471,24 @@ table.boxed-table td {
@media (max-width: 768px) { @media (max-width: 768px) {
.signature-section { .signature-section {
grid-template-columns: 1fr; /* stack on small screens */ grid-template-columns: 1fr;
/* stack on small screens */
} }
} }
/* ✅ PRINT SETTINGS */ /* ✅ PRINT SETTINGS */
@media print { @media print {
body { body {
/* Chrome/Safari */ /* Chrome/Safari */
/* Firefox */ /* Firefox */
background: #f0f0f0 !important; background: #f0f0f0 !important;
} }
/* A4 page size and margin */ /* A4 page size and margin */
@page { @page {
size: A4 portrait; size: A4 portrait;
margin: 10mm; /* Reduce margin to fit more content */ margin: 10mm;
/* Reduce margin to fit more content */
} }
body { body {
@@ -416,14 +499,17 @@ table.boxed-table td {
} }
/* Fit all content to one page */ /* Fit all content to one page */
html, body { html,
body {
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
zoom: 0.8; /* Shrinks entire page content to fit */ zoom: 0.8;
/* Shrinks entire page content to fit */
} }
.penyata-wrapper { .penyata-wrapper {
background-color: #f5f5f5 !important; /* Your desired background */ background-color: #f5f5f5 !important;
/* Your desired background */
/* -webkit-print-color-adjust: exact; /* -webkit-print-color-adjust: exact;
print-color-adjust: exact; */ print-color-adjust: exact; */
padding: 20px; padding: 20px;
@@ -436,55 +522,48 @@ table.boxed-table td {
/* Prevent page breaks */ /* Prevent page breaks */
.penyata-wrapper, .container, table { .penyata-wrapper,
.container,
table {
page-break-inside: avoid; page-break-inside: avoid;
} }
@media print { @media print {
#penyata { #penyata {
position: absolute; position: absolute;
top: 10px; top: 10px;
right: 10px; right: 10px;
text-align: right !important; text-align: right !important;
} }
} }
/* Keep spacing compact */ /* Keep spacing compact */
p, label, input, td { p,
label,
input,
td {
margin: 0; margin: 0;
padding: 2px 4px; padding: 2px 4px;
} }
} }
.btn-cetak { .italic-note {
background-color: #f8f5f5; /* black background */ font-style: italic;
color: #fff; /* white text */ }
.keyin-line {
border: none; border: none;
padding: 8px 18px; border-bottom: 1px dashed black;
border-radius: 8px; width: 140px;
font-size: 14px; padding: 2px 4px;
cursor: pointer;
font-weight: 500;
letter-spacing: 0.5px;
transition: all 0.3s ease;
} }
.btn-cetak:hover { .btn-effect {
background-color: #287906; transition: 0.3s ease;
transform: scale(1.03);
} }
.btn-cetak:active { .btn-effect:hover {
background-color: #060882; transform: scale(1.05);
transform: scale(1); box-shadow: 0 0 10px rgba(8, 8, 8, 0.818);
} }
@media print {
.btn-cetak {
display: none; /* hide button when printing */
}
}
</style> </style>
resources/assets/js/components/demo/voter/index.vue
+2 -2
View File
@@ -35,9 +35,9 @@
<a href="#"><b>PAUTAN MESYUARAT</b></a> <a href="#"><b>PAUTAN MESYUARAT</b></a>
</router-link> </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> <a href="#"><b>PENYATA AHLI</b></a>
</router-link> </router-link> -->
</ul> </ul>
<ul class="nav navbar-right navbar-nav"> <ul class="nav navbar-right navbar-nav">