edit pdf upon bos request

resources/assets/js/components/demo/voter/home/penyata.vue

@@ -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;