From bfc270bc18892a428f86365205a491f953825def Mon Sep 17 00:00:00 2001
From: hayatie <hayatie.hamazah@gmail.com>
Date: Mon, 1 Dec 2025 11:45:15 +0800
Subject: [PATCH] commit -m "complete"

---
 .../js/components/demo/voter/home/index.vue   | 575 ++++++++++--------
 1 file changed, 306 insertions(+), 269 deletions(-)

diff --git a/resources/assets/js/components/demo/voter/home/index.vue b/resources/assets/js/components/demo/voter/home/index.vue
index 0bf3cf6..738e6f4 100644
--- a/resources/assets/js/components/demo/voter/home/index.vue
+++ b/resources/assets/js/components/demo/voter/home/index.vue
@@ -47,358 +47,395 @@
       </ul>
 
       <!-- Membership Card -->
-      <div id="kad-keahlian" class="kad-keahlian">
-        <div class="kad-logo text-center" style="margin: 1px 0;">
-          <img src="/images/KOPKB_Final.png" alt="Logo" style="width: 80px; height: auto;">
+
+      <div class="kad-keahlian">
+        <div class="kad-logo" style="margin: 1px 0; text-align: center;">
+          <img src="/images/logo_kad.png" alt="Logo"
+            style="width: 130px; height: auto; filter: drop-shadow(3px 3px 4px black);">
+        </div>
+        <div class="no-anggota" style="text-align: right; ">
+          <span class="detail-label" style="font-size: 10px;">NO ANGGOTA:</span>
+          <span class="detail-value" style="font-size: 11px;">{{ data.user.no_anggota }}</span>
         </div>
         <br>
-        <div class="kad-title">KAD KEANGGOTAAN KOPERASI</div>
+        <div class="kad-title">KAD KEANGGOTAAN <br> KOPERASI</div>
         <div class="kad-content">
           <img src="images/KOPKB_Final.png" class="watermark" alt="Watermark">
+          <br>
           <div class="member-details">
             <div class="detail-item">
               <span class="detail-label">NAMA:</span>
               <span class="detail-value">{{ data.user.name }}</span>
             </div>
+
             <div class="detail-item">
               <span class="detail-label">NO KAD PENGENALAN:</span>
               <span class="detail-value">{{ data.user.no_kp }}</span>
             </div>
-            <div class="detail-item">
-              <span class="detail-label">NO ANGGOTA:</span>
-              <span class="detail-value">{{ data.user.no_anggota }}</span>
-            </div>
+
             <div class="detail-item">
               <span class="detail-label">UNIT:</span>
               <span class="detail-value">{{ data.user.unit }}</span>
             </div>
           </div>
-        </div>
-        <!-- <div class="text-center mt-2">
-          <button class="btn btn-success" onclick="downloadKadKeahlian()" >Muat Turun</button>
-        </div> -->
-      </div>
-    </div>
 
-    <!-- Nominee Info Section -->
-    <div class="col-md-8">
-      <div class="p-2 mb-3 text-center"
-        style="background-color: #007bff; color: white; font-weight: bold; font-size: 1.6rem; border-radius: 4px;">
-        Maklumat Calon
-      </div>
-      <hr />
-      <small>Tekan gambar untuk maklumat calon</small>
-
-      <div class="panel panel-primary" v-for="position in data.positions" :key="position.id">
-        <div class="panel-heading">{{ position.name }}</div>
-        <div class="panel-body table-responsive">
-          <table class="table table-hover">
-            <thead>
-              <tr>
-                <th></th>
-                <th>Bil.</th>
-                <th>Nama</th>
-                <th>No. Anggota</th>
-                <th>Unit</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="(nominee, i) in data.nominees" :key="nominee.id" v-if="nominee.position_id == position.id"
-                @click="viewNomineeDetails(nominee)">
-                <td>
-                  <img :src="createBase64ImageUrl(nominee.photo)" class="thumbnail" style="height: 60px; width: 60px;">
-                </td>
-                <td>{{ nominee.no_calon }}</td>
-                <td>{{ nominee.name }}</td>
-                <td>{{ nominee.no_anggota }}</td>
-                <td>{{ nominee.unit }}</td>
-              </tr>
-            </tbody>
-          </table>
         </div>
       </div>
-    </div>
+      </div>
 
-    <!-- Nominee Modal -->
-    <div v-if="showNomineeModal" class="modal-backdrop">
-      <div class="modal-dialog">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Maklumat Calon</h5>
-            <button type="button" class="close" @click="closeNomineeModal">
-              <span aria-hidden="true">&times;</span>
-            </button>
+      <!-- Nominee Info Section -->
+      <div class="col-md-8">
+        <div class="p-2 mb-3 text-center"
+          style="background-color: #007bff; color: white; font-weight: bold; font-size: 1.6rem; border-radius: 4px;">
+          Maklumat Calon
+        </div>
+        <hr />
+        <small>Tekan gambar untuk maklumat calon</small>
+
+        <div class="panel panel-primary" v-for="position in data.positions" :key="position.id">
+          <div class="panel-heading">{{ position.name }}</div>
+          <div class="panel-body table-responsive">
+            <table class="table table-hover">
+              <thead>
+                <tr>
+                  <th></th>
+                  <th>Bil.</th>
+                  <th>Nama</th>
+                  <th>No. Anggota</th>
+                  <th>Unit</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="(nominee, i) in data.nominees" :key="nominee.id" v-if="nominee.position_id == position.id"
+                  @click="viewNomineeDetails(nominee)">
+                  <td>
+                    <img :src="createBase64ImageUrl(nominee.photo)" class="thumbnail"
+                      style="height: 60px; width: 60px;">
+                  </td>
+                  <td>{{ nominee.no_calon }}</td>
+                  <td>{{ nominee.name }}</td>
+                  <td>{{ nominee.no_anggota }}</td>
+                  <td>{{ nominee.unit }}</td>
+                </tr>
+              </tbody>
+            </table>
           </div>
-          <div class="modal-body">
-            <div class="photo-section">
-              <img :src="nomineeViewed.photo" class="thumbnail nominee-viewed-photo" />
+        </div>
+      </div>
+
+      <!-- Nominee Modal -->
+      <div v-if="showNomineeModal" class="modal-backdrop">
+        <div class="modal-dialog">
+          <div class="modal-content">
+            <div class="modal-header">
+              <h5 class="modal-title">Maklumat Calon</h5>
+              <button type="button" class="close" @click="closeNomineeModal">
+                <span aria-hidden="true">&times;</span>
+              </button>
             </div>
-            <div class="detail-section">
-              <p><b>Nama:</b> {{ nomineeViewed.name }}</p>
-              <p><b>Unit:</b> {{ nomineeViewed.unit }}</p>
-              <p><b>Umur:</b> {{ nomineeViewed.umur }}</p>
-              <p><b>Jawatan Sekarang:</b> {{ nomineeViewed.jawatan_sekarang }}</p>
-              <p><b>Taraf Pendidikan:</b></p>
-              <ol>
-                <li v-for="(item, index) in nomineeViewed.education" :key="index">{{ item }}</li>
-              </ol>
-              <p><b>Pengalaman Kerja:</b></p>
-              <ol>
-                <li v-for="(item, index) in nomineeViewed.experience" :key="index">{{ item }}</li>
-              </ol>
+            <div class="modal-body">
+              <div class="photo-section">
+                <img :src="nomineeViewed.photo" class="thumbnail nominee-viewed-photo" />
+              </div>
+              <div class="detail-section">
+                <p><b>Nama:</b> {{ nomineeViewed.name }}</p>
+                <p><b>Unit:</b> {{ nomineeViewed.unit }}</p>
+                <p><b>Umur:</b> {{ nomineeViewed.umur }}</p>
+                <p><b>Jawatan Sekarang:</b> {{ nomineeViewed.jawatan_sekarang }}</p>
+                <p><b>Taraf Pendidikan:</b></p>
+                <ol>
+                  <li v-for="(item, index) in nomineeViewed.education" :key="index">{{ item }}</li>
+                </ol>
+                <p><b>Pengalaman Kerja:</b></p>
+                <ol>
+                  <li v-for="(item, index) in nomineeViewed.experience" :key="index">{{ item }}</li>
+                </ol>
+              </div>
+            </div>
+            <div class="modal-footer">
+              <button class="btn btn-success" @click="closeNomineeModal">Tutup</button>
             </div>
           </div>
-          <div class="modal-footer">
-            <button class="btn btn-secondary" @click="closeNomineeModal">Tutup</button>
-          </div>
         </div>
       </div>
     </div>
-  </div>
 </template>
 
 <script>
-// 
-
 export default {
   data() {
     return {
       nomineeViewed: {},
       showNomineeModal: false,
+      previewData: {},
+      showPreview: false,
     };
   },
+
   filters: {
     formatNumberWithCommas(value) {
       if (!value) return "";
       return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
     },
   },
+
   methods: {
-    createBase64ImageUrl(base64) {
-      return "data:image/png;base64," + base64;
-    },
     viewNomineeDetails(nominee) {
       this.nomineeViewed = { ...nominee };
       this.nomineeViewed.photo = this.createBase64ImageUrl(nominee.photo);
       this.showNomineeModal = true;
     },
+
     closeNomineeModal() {
       this.showNomineeModal = false;
     },
 
-  },
-}
+    createBase64ImageUrl(photo) {
+      return `data:image/jpeg;base64,${photo}`;
+    }
+  }
+};
 </script>
 
 
 <style>
- #view-nominee-modal .modal-dialog {
-   max-width: 850px;
-   /* Set a maximum width */
-   width: 100%;
-   /* Ensure full width on smaller screens */
- }
+#view-nominee-modal .modal-dialog {
+  max-width: 850px;
+  /* Set a maximum width */
+  width: 100%;
+  /* Ensure full width on smaller screens */
+}
 
- #view-nominee-modal .nominee-viewed-photo {
-   width: 100%;
-   /* Ensure the photo fills the container */
-   height: auto;
-   /* Maintain aspect ratio */
- }
+#view-nominee-modal .nominee-viewed-photo {
+  width: 100%;
+  /* Ensure the photo fills the container */
+  height: auto;
+  /* Maintain aspect ratio */
+}
 
- #view-nominee-modal .content {
-   display: flex;
-   flex-wrap: wrap;
-   /* Allow content to wrap on smaller screens */
- }
+#view-nominee-modal .content {
+  display: flex;
+  flex-wrap: wrap;
+  /* Allow content to wrap on smaller screens */
+}
 
- #view-nominee-modal .photo-section {
-   flex: 0 0 40%;
-   /* Set a flexible width for the photo section */
-   max-width: 300px;
-   /* Set a maximum width */
-   margin-right: 20px;
-   /* Add space between photo and details */
- }
+#view-nominee-modal .photo-section {
+  flex: 0 0 40%;
+  /* Set a flexible width for the photo section */
+  max-width: 300px;
+  /* Set a maximum width */
+  margin-right: 20px;
+  /* Add space between photo and details */
+}
 
- #view-nominee-modal .detail-section {
-   flex: 1;
-   /* Take remaining space */
- }
+#view-nominee-modal .detail-section {
+  flex: 1;
+  /* Take remaining space */
+}
 
- #view-nominee-modal span {
-   display: block;
-   padding: 5px 0;
- }
+#view-nominee-modal span {
+  display: block;
+  padding: 5px 0;
+}
 
- /* Mobile styles */
- @media (max-width: 576px) {
-   #view-nominee-modal .modal-dialog {
-     max-width: none;
-     padding-left: 10px;
-     padding-right: 20px;
-     margin-bottom: 50px;
-     margin-left: 0px;
-   }
 
-   #view-nominee-modal .photo-section {
-     flex: 0 0 100%;
-     /* Set photo section to full width */
-     max-width: none;
-     /* Remove max-width */
-     margin-right: 0;
-     /* Remove right margin */
-     margin-bottom: 20px;
-     /* Add space between photo and details */
-   }
+@media (max-width: 576px) {
+  #view-nominee-modal .modal-dialog {
+    max-width: none;
+    padding-left: 10px;
+    padding-right: 20px;
+    margin-bottom: 50px;
+    margin-left: 0px;
+  }
 
-   #view-nominee-modal .detail-section {
-     flex: 0 0 100%;
-     /* Set detail section to full width */
-   }
- }
 
- #table-nominee tbody tr {
-   cursor: pointer;
- }
 
- @keyframes pulseBackground {
-   0% {
-     background-color: #FFFFBF;
-   }
+  #view-nominee-modal .photo-section {
+    flex: 0 0 100%;
+    /* Set photo section to full width */
+    max-width: none;
+    /* Remove max-width */
+    margin-right: 0;
+    /* Remove right margin */
+    margin-bottom: 20px;
+    /* Add space between photo and details */
+  }
 
-   /* Start color */
-   50% {
-     background-color: #ffffff;
-   }
+  #view-nominee-modal .detail-section {
+    flex: 0 0 100%;
+    /* Set detail section to full width */
+  }
+}
 
-   /* Middle color (white) */
-   100% {
-     background-color: #FFFFBF;
-   }
+#table-nominee tbody tr {
+  cursor: pointer;
+}
 
-   /* End color (same as start) */
- }
+@keyframes pulseBackground {
+  0% {
+    background-color: #FFFFBF;
+  }
 
- #table-nominee tbody tr:hover {
-   animation: pulseBackground 3s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
-   /* Animation duration, timing function, and repetition */
- }
+  /* Start color */
+  50% {
+    background-color: #ffffff;
+  }
 
- .info-label {
-   display: inline-block;
-   width: 100px;
- }
+  /* Middle color (white) */
+  100% {
+    background-color: #FFFFBF;
+  }
 
- .info-separator {
-   display: inline-block;
-   width: 5px;
- }
+}
 
- .info-value {
-   display: inline-block;
- }
+#table-nominee tbody tr:hover {
+  animation: pulseBackground 3s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
 
- .small-text {
-   font-size: 1.0rem;
-   /* or try 0.85rem if you want even smaller */
- }
+}
 
- .watermark {
-   position: absolute;
-   top: 50%;
-   left: 50%;
-   width: 60mm;
-   /* adjust size */
-   opacity: 0.08;
-   transform: translate(-50%, -50%);
-   z-index: 0;
- }
+.info-label {
+  display: inline-block;
+  width: 100px;
+}
 
- /* ===== CUSTOM CARD SIZE ===== */
- .kad-keahlian {
-   width: 93mm;
-   padding: 0;
-   /* adjust size */
-   height: 60mm;
-   /* adjust size */
-   border-radius: 12px;
-   border: 3px solid #3252f0;
-   background: #F2F3F4;
-   /* background: linear-gradient(135deg, #f2f2f2 50%, #413e3e 50%);// /* WHITE BACKGROUND */
-   position: relative;
-   overflow: hidden;
-   font-family: Arial, sans-serif;
-   position: relative;
-   /* standard card width */
-   padding: 8mm;
-   box-sizing: border-box;
-   font-weight: bold;
-   font-size: 14px;
-   background-color: #fff;
- }
+.info-separator {
+  display: inline-block;
+  width: 5px;
+}
 
- /* ===== WATERMARK LOGO ONLY ===== */
- .kad-keahlian::before {
-   content: "";
-   position: absolute;
-   /* background: url('/images/KOPKB_Final.png') no-repeat center; */
-   background-size: 100%;
-   /* adjust watermark size */
-   opacity: 0.08;
-   /* faint watermark */
-   top: 0;
-   left: 0;
-   width: 100%;
-   height: 100%;
- }
+.info-value {
+  display: inline-block;
+}
 
- /* Title */
- .kad-title {
-   text-align: center;
-   font-size: 14px;
-   font-weight: bold;
-   color: #004aad;
-   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
-   position: relative;
-   z-index: 5;
- }
+.small-text {
+  font-size: 1.0rem;
 
- /* Content layout */
- .kad-content {
-   display: flex;
-   padding: 0;
-   gap: 10px;
-   margin-top: 5px;
-   position: relative;
-   z-index: 5;
-   /* background-color: #5d8aa8; your desired background color */
-   border-radius: 18px;
-   /* optional: rounded corners */
- }
+}
 
- .kad-details {
-   font-size: 11px;
-   font-weight: bold;
- }
+.watermark {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 60mm;
+  /* adjust size */
+  opacity: 0.09;
+  transform: translate(-50%, -50%);
+  z-index: 5;
+}
 
- .kad-details div {
-   margin-bottom: 4px;
- }
 
- /* Hide print button during printing */
- .member-details {
-   font-family: Arial, sans-serif;
-   font-weight: bold;
-   font-size: 13px;
-   line-height: 1.4;
-   display: flex;
-   flex-direction: column;
-   /* vertical stacking */
-   gap: 2mm;
- }
+.kad-keahlian {
+  width: 93mm;
+  /* padding: 0; */
+  /* adjust size */
+  height: 60mm;
+  /* adjust size */
+  border-radius: 12px;
+  border: 3px solid #0d0d0e;
+  box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.3);
+  background: #F2F3F4;
+  position: relative;
+  overflow: hidden;
+  font-family: Arial, sans-serif;
+  /* standard card width */
+  padding: 8mm;
+  box-sizing: border-box;
+  font-weight: bold;
+  font-size: 13px;
+  color: whitesmoke;
+  background: linear-gradient(90deg, rgba(23, 76, 97, 1) 0%, rgba(37, 48, 105, 1) 50%, rgba(36, 35, 34, 1) 100%);
+}
 
- .detail-label {
-   display: inline-block;
- }
-</style>
+
+.kad-keahlian::before {
+  content: "";
+  position: relative;
+  background-size: 100%;
+  /* adjust watermark size */
+  opacity: 0.08;
+  /* faint watermark */
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+
+.kad-title {
+  text-align: center;
+  font-size: 13px;
+  font-weight: bold;
+  color: white;
+  text-shadow: 3px 3px 4px rgb(244, 241, 241);
+  position: relative;
+  z-index: 5;
+}
+
+.member-details {
+  font-family: Arial, sans-serif;
+  font-weight: bold;
+  font-size: 13px;
+  line-height: 1.4;
+  display: flex;
+  flex-direction: column;
+  gap: 2mm;
+
+}
+
+
+.kad-content {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0;
+  gap: 10px;
+  margin-top: 5px;
+  position: relative;
+  z-index: 5;
+  border-radius: 18px;
+  /* optional: rounded corners */
+}
+
+.kad-details {
+  font-size: 11px;
+  font-weight: bold;
+  margin-bottom: 4px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.kad-details .row {
+  display: flex;
+  justify-content: space-between;
+  /* ⭐ pushes label left, value right */
+}
+
+
+.detail-item {
+  position: relative;
+  top: 5px;
+  right: 5px;
+  text-align: left;
+}
+
+
+
+.detail-label {
+
+  text-align: left;
+  /* display: inline-block; */
+}
+
+.detail-value {
+  text-align: right;
+}
+
+.no-anggota {
+  position: absolute;
+  top: 5px;
+  right: 8px;
+  text-align: right;
+  z-index: 10;
+  /* keeps text above watermark */
+}
+</style>
\ No newline at end of file