git commit -m (penyata)

app/Console/Commands/MyCommand.php

@@ -0,0 +1,42 @@
+<?php
+
+namespace App\Console\Commands;
+
+use Illuminate\Console\Command;
+
+class MyCommand extends Command
+{
+    /**
+     * The name and signature of the console command.
+     *
+     * @var string
+     */
+    protected $signature = 'command:name';
+
+    /**
+     * The console command description.
+     *
+     * @var string
+     */
+    protected $description = 'Command description';
+
+    /**
+     * Create a new command instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        parent::__construct();
+    }
+
+    /**
+     * Execute the console command.
+     *
+     * @return mixed
+     */
+    public function handle()
+    {
+        //
+    }
+}

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

@@ -0,0 +1,490 @@
+<template>
+  <div class="penyata-wrapper container">
+
+    <!-- ✅ HEADER SECTION (2 Columns) -->
+    <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>
+        </div>
+      </div>
+      </div>
+
+       <div class="header-right">
+    <!-- ✅ Boxed Title -->
+    <div class="title-box">
+      <h4>PENYATA AHLI</h4>
+    </div>
+    <h4 class="text-muted mt-2" text-center> {{ new Date().getFullYear() }}</h4>
+  </div>
+</div>
+
+    <hr class="mt-3" />
+
+    <!-- ✅ MEMBER INFO SECTION (2 Columns) -->
+    <div class="form-section two-column">
+      <div class="form-group">
+        <label class="form-label fw-semibold">Tarikh Daftar:</label>
+        <input type="date" class="form-control form-control-sm" v-model="tarikh" />
+      </div>
+
+      <div class="form-group">
+        <label class="form-label fw-semibold">No. Ahli:</label>
+        <input type="text" class="form-control form-control-sm" v-model="noAhli" readonly />
+      </div>
+
+      <div class="form-group">
+        <label class="form-label fw-semibold">Nama:</label>
+        <input type="text" class="form-control form-control-sm" v-model="nama" readonly />
+      </div>
+
+      <div class="form-group">
+        <label class="form-label fw-semibold">Pejabat / Syarikat:</label>
+        <input type="text" class="form-control form-control-sm" v-model="syarikat" readonly />
+      </div>
+    </div>
+
+    <!-- ✅ 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 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
+      <strong>{{ tarikh }}</strong>.
+    </p>
+
+    <!-- ✅ 2-COLUMN TABLE -->
+    <table class="boxed-table mt-4">
+      <tbody>
+        <tr>
+          <td>Saham</td>
+          <td><input type="number" class="form-control-sm" v-model="penyata.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><input type="number" class="form-control-sm" v-model="penyata.yuran" /></td>
+          <td>Pinjaman BBA</td>
+          <td><input type="number" class="form-control-sm" v-model="penyata.pinjamanBBA" /></td>
+        </tr>
+        <tr>
+          <td>Pelaburan T1</td>
+          <td><input type="number" class="form-control-sm" v-model="penyata.pelaburanT1" /></td>
+          <td>Pinjaman BAI</td>
+          <td><input type="number" class="form-control-sm" v-model="penyata.pinjamanBAI" /></td>
+        </tr>
+        <tr>
+          <td>Pelaburan T2</td>
+          <td><input type="number" class="form-control-sm" v-model="penyata.pelaburanT2" /></td>
+          <td>Pinjaman BYS</td>
+          <td><input type="number" class="form-control-sm" v-model="penyata.pinjamanBYS" /></td>
+        </tr>
+        <tr>
+          <td>&nbsp;</td>
+          <td>&nbsp;</td>
+          <td>Insurans / Cukai Jalan</td>
+          <td><input type="number" class="form-control-sm" v-model="penyata.insurans" /></td>
+        </tr>
+        <tr>
+          <td>&nbsp;</td>
+          <td>&nbsp;</td>
+          <td>Pinjaman Pelbagai</td>
+          <td><input type="number" class="form-control-sm" v-model="penyata.pinjamanPelbagai" /></td>
+        </tr>
+      </tbody>
+    </table>
+
+    <!-- ✅ FOOTER SECTION -->
+    <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 dan memperakui ia adalah benar.
+    </p>
+
+    <p>Sekian, dimaklumkan.</p><br>
+    <h6><strong><i>Surat ini dikeluarkan oleh komputer, tidak perlu ditandatangani.</i></strong></h6>
+
+    <hr />
+
+  <p style="text-align: center;"><h5><strong>PERSETUJUAN AHLI </strong></h5></p> <br>
+  <p style="text-align: justify;"><h5>Saya ,   <input
+  type="text"
+  class="keyin-line"
+  v-model="penyata.nama"
+  placeholder=""
+/>, No Ahli:  <input
+    type="text"
+    class="keyin-line"
+    placeholder=""
+    v-model="noAhliPersetujuan"
+  /> <strong>Bersetuju/Tidak Bersetuju </strong> dengan yang tercatit  dalam penyata baki seperti di atas.</p> </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>
+        <tr>
+          <td>Saham</td>
+         <input
+    type="number" class="keyin-input" v-model="penyata.saham" placeholder=""
+  />
+          <td>Pinjaman AQH</td>
+          <td><input type="number" class="form-control-sm" v-model="penyata.pinjamanAQH" /></td>
+        </tr>
+        <tr>
+          <td>Yuran</td>
+          <td><input type="number" class="form-control-sm" v-model="penyata.yuran" /></td>
+          <td>Pinjaman BBA</td>
+          <td><input type="number" class="form-control-sm" v-model="penyata.pinjamanBBA" /></td>
+        </tr>
+        <tr>
+          <td>Pelaburan T1</td>
+          <td><input type="number" class="form-control-sm" v-model="penyata.pelaburanT1" /></td>
+          <td>Pinjaman BAI</td>
+          <td><input type="number" class="form-control-sm" v-model="penyata.pinjamanBAI" /></td>
+        </tr>
+        <tr>
+          <td>Pelaburan T2</td>
+          <td><input type="number" class="form-control-sm" v-model="penyata.pelaburanT2" /></td>
+          <td>Pinjaman BYS</td>
+          <td><input type="number" class="form-control-sm" v-model="penyata.pinjamanBYS" /></td>
+        </tr>
+        <tr>
+          <td>&nbsp;</td>
+          <td>&nbsp;</td>
+          <td>Insurans / Cukai Jalan</td>
+          <td><input type="number" class="form-control-sm" v-model="penyata.insurans" /></td>
+        </tr>
+        <tr>
+          <td>&nbsp;</td>
+          <td>&nbsp;</td>
+          <td>Pinjaman Pelbagai</td>
+          <td><input type="text" class="form-control-sm keyin-input" v-model="penyata.pinjamanPelbagai" placeholder=""
+/></td>
+        </tr>
+      </tbody>
+    </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">
+    <label class="form-label">Tarikh:</label>
+    <!-- <input type="text" class="keyin-line" placeholder="" /> -->
+  </div>
+</div>
+<br><br>
+          <!-- ✅ Cetak Button -->
+<div class="text-right mb-3 no-print">
+  <button type="button" class="btn btn-success" style="width: 160px;" @click="cetakPenyata">
+    Cetak Penyata
+  </button>
+</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "PenyataView",
+  data() {
+    return {
+      tarikh: new Date().toISOString().substring(0, 10),
+      noAhli: "12345",
+      nama: "Ahmad bin Ali",
+      syarikat: "KPKB HQ",
+      penyata: {
+        saham: 1000,
+        yuran: 50,
+        pelaburanT1: 2000,
+        pelaburanT2: 1500,
+        pinjamanAQH: 500,
+        pinjamanBBA: 1200,
+        pinjamanBAI: 700,
+        pinjamanBYS: 400,
+        insurans: 300,
+        pinjamanPelbagai: 800
+      }
+    };
+  },
+
+ methods: {
+    cetakPenyata() {
+      window.print();
+    }
+  }
+};
+</script>
+
+<style scoped>
+.penyata-wrapper {
+  max-width: 800px;
+  margin: 0 auto;
+  font-family: Arial, sans-serif;
+}
+
+/* ✅ Header */
+.header-section {
+  display: grid;
+  grid-template-columns: 1.5fr 1fr;
+  align-items: center;
+  gap: 20px;
+}
+.logo-wrapper {
+  display: flex;
+  align-items: flex-start;
+  gap: 15px;
+}
+.kopkb-logo {
+  width: 80px;
+  height: auto;
+}
+.header-right {
+  text-align: right;
+}
+
+/* ✅ Member Info (2 columns) */
+.two-column {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 15px 30px;
+}
+.form-group {
+  display: flex;
+  flex-direction: column;
+}
+.form-control-sm {
+  border: none;
+  border-bottom: 1px solid #666;
+  border-radius: 0;
+  width: 100%;
+  outline: none;
+  padding: 4px;
+}
+
+/* ✅ Table */
+table.boxed-table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 4px;
+}
+table.boxed-table td {
+  border: 1px inset #000;
+  padding: 6px 8px;
+  font-size: 13px;
+  background-color: #fafafa;
+  vertical-align: middle;
+}
+
+/* ✅ Responsive */
+@media (max-width: 768px) {
+  .header-section {
+    grid-template-columns: 1fr;
+    text-align: center;
+  }
+  .header-right {
+    text-align: center;
+    margin-top: 10px;
+  }
+  .logo-wrapper {
+    justify-content: center;
+  }
+  .two-column {
+    grid-template-columns: 1fr;
+  }
+}
+
+.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: 80%;
+  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; /* two equal columns */
+  gap: 30px;
+  margin-top: 20px;
+}
+
+.sig-column {
+  display: flex;
+  flex-direction: column;
+}
+
+.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;
+  }
+
+
+  /* Prevent page breaks */
+  .penyata-wrapper, .container, table {
+    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;
+  }
+}
+
+.btn-cetak {
+  background-color: #f8f5f5;        /* black background */
+  color: #fff;                   /* white text */
+  border: none;
+  padding: 8px 18px;
+  border-radius: 8px;
+  font-size: 14px;
+  cursor: pointer;
+  font-weight: 500;
+  letter-spacing: 0.5px;
+  transition: all 0.3s ease;
+}
+
+.btn-cetak:hover {
+  background-color: #287906;
+  transform: scale(1.03);
+}
+
+.btn-cetak:active {
+  background-color: #060882;
+  transform: scale(1);
+}
+
+@media print {
+  .btn-cetak {
+    display: none; /* hide button when printing */
+  }
+}
+
+
+
+
+</style>

resources/assets/js/routesIndex.js

@@ -9,6 +9,7 @@ import Vote from './components/demo/voter/home/vote.vue';
 import Result from './components/demo/voter/home/result.vue';
 import Attendance from './components/demo/voter/home/attendance.vue';
 import Zoom from './components/demo/voter/home/zoom.vue';
+import Penyata from './components/demo/voter/home/penyata.vue';
 
 import AdminLogin from './components/demo/admin/login.vue';
 import AdminIndex from './components/demo/admin/index.vue';
@@ -102,11 +103,19 @@ export default [
 				path: 'zoom',
 				component: Zoom,
 				name: 'Zoom'
+			},
+
+			{
+				path: 'penyata',
+				component: Penyata,
+				name: 'Penyata'
 			}
 
 		]
+
 	},
 
+
 	{
 		path: '/login',
 		component: VoterLogin,