updatekad_ui

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

@@ -1,4 +1,8 @@
+
+
+
 <template>
+  
   <div class="row col-md-10 col-md-offset-1">
     <!-- Banner -->
     <div class="text-center mb-4">
@@ -49,19 +53,19 @@
       <!-- Membership Card -->
 
       <div class="kad-keahlian">
-        <div class="kad-logo" style="margin: 1px 0; text-align: center;">
+        <!-- Vertical MEMBER CARD on left -->
+        <div class="member-card-vertical">MEMBER CARD </div>
+
+        <!-- Top-right logo -->
+        <div class="kad-logo" style="text-align: right; margin: 0; padding: 0;">
           <img src="/images/logo_kad.png" alt="Logo"
-            style="width: 130px; height: auto; filter: drop-shadow(3px 3px 4px black);">
+            style="width: 124px; height: auto; filter: drop-shadow(3px 3px 4px black); margin-right: 0;">
         </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 <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>
@@ -72,114 +76,135 @@
               <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 class="detail-item">
+              <svg id="barcode" class="detail-value">{{ data.user.no_kp }}</svg>
+              
+            </div>
           </div>
 
         </div>
-      </div>
-      </div>
 
-      <!-- Nominee Info Section -->
+        <!-- <div class="contact-info">
-      <div class="col-md-8">
+          <p>admin@koppkb.com <i class="bi bi-envelope"></i></p> <br>
-        <div class="p-2 mb-3 text-center"
+          <p>09-7414331 <i class="bi bi-telephone"></i></p><br>
-          style="background-color: #007bff; color: white; font-weight: bold; font-size: 1.6rem; border-radius: 4px;">
+          <p>09-7414334 <i class="bi bi-printer-fill"></i></p><br>
-          Maklumat Calon
+          <p>www.koppkb.com <i class="bi bi-globe"></i></p>
+        </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>
-        <hr />
+      </div>
-        <small>Tekan gambar untuk maklumat calon</small>
+    </div>
 
-        <div class="panel panel-primary" v-for="position in data.positions" :key="position.id">
+    <!-- Nominee Modal -->
-          <div class="panel-heading">{{ position.name }}</div>
+    <div v-if="showNomineeModal" class="modal-backdrop">
-          <div class="panel-body table-responsive">
+      <div class="modal-dialog">
-            <table class="table table-hover">
+        <div class="modal-content">
-              <thead>
+          <div class="modal-header">
-                <tr>
+            <h5 class="modal-title">Maklumat Calon</h5>
-                  <th></th>
+            <button type="button" class="close" @click="closeNomineeModal">
-                  <th>Bil.</th>
+              <span aria-hidden="true">&times;</span>
-                  <th>Nama</th>
+            </button>
-                  <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 class="modal-body">
-      </div>
+            <div class="photo-section">
-
+              <img :src="nomineeViewed.photo" class="thumbnail nominee-viewed-photo" />
-      <!-- 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="modal-body">
+            <div class="detail-section">
-              <div class="photo-section">
+              <p><b>Nama:</b> {{ nomineeViewed.name }}</p>
-                <img :src="nomineeViewed.photo" class="thumbnail nominee-viewed-photo" />
+              <p><b>Unit:</b> {{ nomineeViewed.unit }}</p>
-              </div>
+              <p><b>Umur:</b> {{ nomineeViewed.umur }}</p>
-              <div class="detail-section">
+              <p><b>Jawatan Sekarang:</b> {{ nomineeViewed.jawatan_sekarang }}</p>
-                <p><b>Nama:</b> {{ nomineeViewed.name }}</p>
+              <p><b>Taraf Pendidikan:</b></p>
-                <p><b>Unit:</b> {{ nomineeViewed.unit }}</p>
+              <ol>
-                <p><b>Umur:</b> {{ nomineeViewed.umur }}</p>
+                <li v-for="(item, index) in nomineeViewed.education" :key="index">{{ item }}</li>
-                <p><b>Jawatan Sekarang:</b> {{ nomineeViewed.jawatan_sekarang }}</p>
+              </ol>
-                <p><b>Taraf Pendidikan:</b></p>
+              <p><b>Pengalaman Kerja:</b></p>
-                <ol>
+              <ol>
-                  <li v-for="(item, index) in nomineeViewed.education" :key="index">{{ item }}</li>
+                <li v-for="(item, index) in nomineeViewed.experience" :key="index">{{ item }}</li>
-                </ol>
+              </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-success" @click="closeNomineeModal">Tutup</button>
+          </div>
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <script>
+
+import JsBarcode from "jsbarcode";
+
 export default {
   data() {
     return {
+      // NOMINEE SECTION
       nomineeViewed: {},
       showNomineeModal: false,
-      previewData: {},
+
-      showPreview: false,
+      // BARCODE SECTION
+      noKp: ""
     };
   },
 
-  filters: {
+  mounted() {
-    formatNumberWithCommas(value) {
+    if (this.data?.user?.no_kp) {
-      if (!value) return "";
+      this.noKp = this.data.user.no_kp; // set noKp
-      return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+      this.generateBarcode();
-    },
+    }
   },
 
   methods: {
+    // -------------------------------
+    // NOMINEE FUNCTIONS
+    // -------------------------------
     viewNomineeDetails(nominee) {
       this.nomineeViewed = { ...nominee };
       this.nomineeViewed.photo = this.createBase64ImageUrl(nominee.photo);
@@ -192,6 +217,20 @@ export default {
 
     createBase64ImageUrl(photo) {
       return `data:image/jpeg;base64,${photo}`;
+    },
+
+    // -------------------------------
+    // BARCODE FUNCTION
+    // -------------------------------
+    generateBarcode() {
+      if (!this.noKp) return;
+
+      JsBarcode("#barcode", this.noKp, {
+        format: "CODE128",
+        width: 1.3,
+        height: 30,
+        displayValue: false  // hides text below the barcode
+      });
     }
   }
 };
@@ -325,7 +364,7 @@ export default {
 
 
 .kad-keahlian {
-  width: 93mm;
+  width: 88mm;
   /* padding: 0; */
   /* adjust size */
   height: 60mm;
@@ -343,9 +382,40 @@ export default {
   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%);
+  cursor: pointer;
+  transition: transform 0.25s ease, box-shadow 0.25s ease;
+  background-image: url('/images/kad_bg.jpeg');
+  /* path to your image */
+  background-size: cover;
+  /* cover whole div */
+
 }
 
+.kad-logo {
+  position: absolute;
+  /* place inside kad-anggota */
+  top: 10px;
+  /* distance from top */
+  right: 10px;
+  /* distance from right */
+}
+
+.member-card-vertical {
+  position: absolute;
+  top: 20px;
+  left: 0;
+  writing-mode: vertical-rl;
+  /* makes text vertical from top to bottom */
+  text-orientation: mixed;
+  /* normal letters upright */
+  font-weight: bold;
+  font-size: 17px;
+  letter-spacing: 2px;
+  /* space between letters */
+  padding: 5px;
+  color: white;
+  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
+}
 
 .kad-keahlian::before {
   content: "";
@@ -360,10 +430,15 @@ export default {
   height: 100%;
 }
 
+.kad-keahlian:hover {
+  transform: scale(1.03);
+  transition: 0.2s ease;
+}
+
 
 .kad-title {
   text-align: center;
-  font-size: 13px;
+  font-size: 12px;
   font-weight: bold;
   color: white;
   text-shadow: 3px 3px 4px rgb(244, 241, 241);
@@ -373,12 +448,13 @@ export default {
 
 .member-details {
   font-family: Arial, sans-serif;
-  font-weight: bold;
+  font-weight: normal;
-  font-size: 13px;
+  font-size: 12px;
   line-height: 1.4;
   display: flex;
   flex-direction: column;
   gap: 2mm;
+  margin-left: 35px;
 
 }
 
@@ -396,14 +472,15 @@ export default {
 }
 
 .kad-details {
-  font-size: 11px;
+  font-size: 10px;
-  font-weight: bold;
+  font-weight: normal;
   margin-bottom: 4px;
   display: flex;
   flex-direction: column;
   gap: 4px;
 }
 
+
 .kad-details .row {
   display: flex;
   justify-content: space-between;
@@ -418,6 +495,11 @@ export default {
   text-align: left;
 }
 
+#barcode {
+  transform: scaleX(2.0);
+  /* 1.0 = normal, 2.0 = 2x longer */
+  transform-origin: left;
+}
 
 
 .detail-label {
@@ -438,4 +520,26 @@ export default {
   z-index: 10;
   /* keeps text above watermark */
 }
+
+.contact-info i {
+    /* Bootstrap primary blue */
+  margin-right: 6px;  text-align: right; /* right-align text next to barcode */
+  font-size: 6px;
+  line-height: 1.3;
+    font-weight: normal;
+}/* space between icon and text */
+
+
+/* .kad-bottom {
+  display: flex;
+  justify-content: space-between; /* barcode left, contact info right */
+  /* align-items: flex-end;          /* align vertically at bottom */
+  /* padding: 10px; */
+
+
+/* .contact-info i {
+  margin-right: 4px;
+  color: #f5f6f7;
+  font-size: 6px;
+} */
 </style>