DONE: add dividen for yuran and saham by injecting json

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

@@ -57,7 +57,10 @@
               <span class="member-field-icon" aria-hidden="true"><i class="fa" :class="row.icon"></i></span>
               <div class="member-field-body">
                 <span class="member-field-label">{{ row.label }}</span>
-                <span class="member-field-value">{{ row.value }}</span>
+                <div class="member-field-value-wrap">
+                  <span class="member-field-value">{{ row.value }}</span>
+                  <span v-if="row.subvalue" class="member-field-subvalue">{{ row.subvalue }}</span>
+                </div>
               </div>
             </div>
           </div>
@@ -386,13 +389,27 @@ export default {
         if (n === null || n === undefined || n === "") return "—";
         return String(n).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
       };
+      const dividendSub = (balance, dividend, percent) => {
+        if (balance === null || balance === undefined || balance === "") return null;
+        return "Dividen (" + percent + "%): RM " + fmt(dividend);
+      };
       return [
         { icon: "fa-user", label: "Nama", value: u.name || "—" },
         { icon: "fa-credit-card", label: "No. Kad Pengenalan", value: u.no_kp || "—" },
         { icon: "fa-barcode", label: "No. Anggota", value: u.no_anggota || "—" },
         { icon: "fa-building", label: "Unit", value: u.unit || "—" },
-        { icon: "fa-line-chart", label: "Saham", value: "RM " + fmt(u.saham) },
-        { icon: "fa-money", label: "Yuran", value: "RM " + fmt(u.yuran) },
+        {
+          icon: "fa-line-chart",
+          label: "Saham",
+          value: "RM " + fmt(u.saham),
+          subvalue: dividendSub(u.saham, u.dividen_saham, 40)
+        },
+        {
+          icon: "fa-money",
+          label: "Yuran",
+          value: "RM " + fmt(u.yuran),
+          subvalue: dividendSub(u.yuran, u.dividen_yuran, 8)
+        },
         { icon: "fa-bank", label: "Simpanan Khas (Tabung 1) - (Sehingga Dis 2025)", value: "RM " + fmt(u.accumulated_amount) },
         { icon: "fa-percent", label: "Dividen Simpanan Khas (Tabung 1) Tahun 2025", value: "RM " + fmt(u.pelaburan) }
       ];
@@ -1017,8 +1034,17 @@ export default {
   line-height: 1.35;
 }
 
-.member-field-value {
+.member-field-value-wrap {
   flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 4px;
+}
+
+.member-field-value {
+  width: 100%;
   text-align: right;
   font-size: 1.45rem;
   font-weight: 700;
@@ -1027,6 +1053,16 @@ export default {
   word-break: break-word;
 }
 
+.member-field-subvalue {
+  width: 100%;
+  text-align: right;
+  font-size: 1.05rem;
+  font-weight: 600;
+  color: #2563eb;
+  line-height: 1.35;
+  word-break: break-word;
+}
+
 /* —— Claim —— */
 .home-claim-card {
   padding: 20px 22px;
@@ -1387,6 +1423,13 @@ export default {
     line-height: 1.25;
   }
 
+  .home-member-card--in-section .member-field-value-wrap {
+    flex: none;
+    width: 100%;
+    align-items: flex-start;
+    gap: 3px;
+  }
+
   .home-member-card--in-section .member-field-value {
     flex: none;
     width: 100%;
@@ -1399,6 +1442,12 @@ export default {
     overflow-wrap: anywhere;
   }
 
+  .home-member-card--in-section .member-field-subvalue {
+    width: 100%;
+    text-align: left;
+    font-size: 1.1rem;
+  }
+
   .home-claim-code {
     font-size: 2.2rem;
     letter-spacing: 0.14em;