KoPKB/E-Vote
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

DONE: remove verified by ajk, fix bug on pagination, improve UI

Browse Source
This commit is contained in:
ISMAIL MASSERAN
2026-04-27 12:06:54 +08:00
parent bd2306b073
commit 4425fa6176
20 changed files with 77081 additions and 535 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/assets/js/components/demo/voter/home/index.vue
+234 -130
View File
@@ -9,12 +9,10 @@
<div class="home-hero-banner-shine" aria-hidden="true"></div>
</div>
<div class="hero-banner-caption home-hero-caption">
<div class="hero-banner-kicker">Portal Pengundian</div>
<h1 class="hero-banner-title">Maklumat Anggota</h1>
<h1 class="hero-banner-title">Portal Pengundian</h1>
<p class="hero-banner-subtitle">
Semak butiran keahlian anda. Gunakan
<strong class="home-hero-strong">pautan pantas</strong> di bawah untuk navigasi pantas ke halaman utama
portal.
Gunakan <strong class="home-hero-strong">pautan pantas</strong> di bawah untuk navigasi pantas ke
halaman utama portal.
</p>
<div class="home-hero-badges">
<span class="home-badge home-badge--location">
@@ -31,6 +29,88 @@
</div>
</div>
<!-- Butiran Keahlian and Coupon Claim Code -->
<div class="row home-content-row">
<div class="col-xs-12 col-md-6 home-column home-column--primary">
<!-- Member Information Card -->
<div class="home-section-container">
<h2 class="home-section-heading">
<span class="home-section-heading-icon" aria-hidden="true"><i class="fa fa-list-alt"></i></span>
Maklumat Anggota
</h2>
<div v-if="showRegisterCta" class="home-member-cta">
<div class="home-member-cta-hint home-member-cta-hint--warning" role="alert">
<i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
<span>Sila semak butiran keahlian anda sebelum mendaftar kehadiran.</span>
</div>
<div class="home-member-cta-btn-container">
<router-link :to="{ name: 'Attendance' }" class="btn btn-primary btn-block home-member-cta-btn">
<i class="fa fa-pencil-square-o" aria-hidden="true"></i>
Daftar MAT Sekarang
</router-link>
</div>
</div>
<div class="member-info-card home-member-card home-member-card--in-section">
<div v-for="row in memberRows" :key="row.label" class="member-field">
<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>
</div>
</div>
</div>
</div>
<!-- Coupon Claim Code Card -->
<div class="col-xs-12 col-md-6 home-column home-column--secondary">
<div class="home-claim-row">
<div class="home-section-container home-section-container--claim">
<h2 class="home-section-heading">
<span class="home-section-heading-icon home-section-heading-icon--teal" aria-hidden="true"><i
class="fa fa-ticket"></i></span>
Kod Tuntutan Elaun
</h2>
<div class="home-claim-card">
<div v-if="!canGenerateClaimCode" class="home-claim-locked">
<div class="home-claim-locked-icon"><i class="fa fa-lock"></i></div>
<p class="home-claim-locked-text">
Kod tuntutan hanya tersedia untuk kehadiran <strong>Fizikal</strong> selepas anda
<strong>selesai mengundi</strong>.
</p>
</div>
<div v-else class="home-claim-active">
<p class="home-claim-hint">
Tunjukkan kod ini kepada petugas di kaunter untuk pengesahan bayaran tunai.
</p>
<div v-if="claimError" class="alert alert-danger home-claim-alert">
{{ claimError }}
</div>
<div v-if="claimCode" class="home-claim-code-box">
<div class="home-claim-code">{{ claimCode }}</div>
<div class="home-claim-expiry">
Tamat tempoh: <strong>{{ claimExpiresAt || '—' }}</strong>
</div>
</div>
<button type="button" class="btn btn-primary btn-block home-claim-btn" :disabled="claimLoading"
@click="generateClaimCode()">
<i class="fa fa-refresh" :class="{ 'fa-spin': claimLoading }"></i>
{{ claimLoading ? ' Menjana...' : (claimCode ? ' Jana Semula Kod' : ' Jana Kod Tuntutan') }}
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Pautan Pantas -->
<div class="row home-quick-links-row">
<div class="col-xs-12">
<div class="home-section-container">
@@ -63,6 +143,54 @@
</div>
</div>
<!-- Kad Ahli Digital -->
<div class="col-xs-12">
<div class="home-section-container home-section-container--kad">
<h2 class="home-section-heading">
<span class="home-section-heading-icon" aria-hidden="true"><i class="fa fa-credit-card"></i></span>
Kad Ahli Digital
</h2>
<div class="home-kad-wrap">
<div class="kad-keahlian">
<div class="member-card-vertical">MEMBER CARD</div>
<div class="kad-logo">
<img src="/images/logo_kad.png" alt="Logo" class="kad-logo-img">
</div>
<div class="kad-content">
<img src="images/KOPKB_Final.png" class="watermark" alt="">
<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 class="detail-item detail-item--barcode">
<svg id="barcode" class="detail-value">{{ data.user.no_kp }}</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Saham Vote Blocked Message -->
<div v-if="showSahamVoteBlockedMessage" class="row home-saham-block-row">
<div class="col-xs-12">
<div class="alert alert-warning home-saham-block-alert" role="alert">
@@ -71,112 +199,6 @@
</div>
</div>
</div>
<div class="row home-content-row">
<div class="col-xs-12 col-md-6 home-column home-column--primary">
<div class="home-section-container">
<h2 class="home-section-heading">
<span class="home-section-heading-icon" aria-hidden="true"><i class="fa fa-list-alt"></i></span>
Butiran Keahlian
</h2>
<div class="member-info-card home-member-card home-member-card--in-section">
<div v-for="row in memberRows" :key="row.label" class="member-field">
<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>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-md-6 home-column home-column--secondary">
<div class="home-section-container home-section-container--claim">
<h2 class="home-section-heading">
<span class="home-section-heading-icon home-section-heading-icon--teal" aria-hidden="true"><i
class="fa fa-ticket"></i></span>
Kod Tuntutan Elaun
</h2>
<div class="home-claim-card">
<div v-if="!canGenerateClaimCode" class="home-claim-locked">
<div class="home-claim-locked-icon"><i class="fa fa-lock"></i></div>
<p class="home-claim-locked-text">
Kod tuntutan hanya tersedia untuk kehadiran <strong>Fizikal</strong> selepas anda
<strong>selesai mengundi</strong>.
</p>
</div>
<div v-else class="home-claim-active">
<p class="home-claim-hint">
Tunjukkan kod ini kepada petugas di kaunter untuk pengesahan bayaran tunai.
</p>
<div v-if="claimError" class="alert alert-danger home-claim-alert">
{{ claimError }}
</div>
<div v-if="claimCode" class="home-claim-code-box">
<div class="home-claim-code">{{ claimCode }}</div>
<div class="home-claim-expiry">
Tamat tempoh: <strong>{{ claimExpiresAt || '—' }}</strong>
</div>
</div>
<button type="button" class="btn btn-primary btn-block home-claim-btn" :disabled="claimLoading"
@click="generateClaimCode()">
<i class="fa fa-refresh" :class="{ 'fa-spin': claimLoading }"></i>
{{ claimLoading ? ' Menjana...' : (claimCode ? ' Jana Semula Kod' : ' Jana Kod Tuntutan') }}
</button>
</div>
</div>
</div>
<div class="home-section-container home-section-container--kad">
<h2 class="home-section-heading">
<span class="home-section-heading-icon" aria-hidden="true"><i class="fa fa-credit-card"></i></span>
Kad Ahli Digital
</h2>
<div class="home-kad-wrap">
<div class="kad-keahlian">
<div class="member-card-vertical">MEMBER CARD</div>
<div class="kad-logo">
<img src="/images/logo_kad.png" alt="Logo" class="kad-logo-img">
</div>
<div class="kad-content">
<img src="images/KOPKB_Final.png" class="watermark" alt="">
<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 class="detail-item detail-item--barcode">
<svg id="barcode" class="detail-value">{{ data.user.no_kp }}</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
@@ -242,6 +264,15 @@ export default {
? this.portalSettings.home_mat_label
: "MAT KE-29";
const links = [
{
key: "attendance",
title: "Daftar MAT",
desc: "Daftar kehadiran fizikal atau maya",
icon: "fa-pencil-square-o",
route: { name: "Attendance" },
variant: "home-cta-link--teal",
external: false
},
{
key: "calon",
title: "Maklumat Calon",
@@ -259,15 +290,6 @@ export default {
href: this.matLinkUrl,
variant: "home-cta-link--violet",
external: true
},
{
key: "attendance",
title: "Daftar MAT",
desc: "Daftar kehadiran fizikal atau maya",
icon: "fa-pencil-square-o",
route: { name: "Attendance" },
variant: "home-cta-link--teal",
external: false
}
];
@@ -330,6 +352,11 @@ export default {
return "Belum daftar kehadiran";
},
showRegisterCta() {
// Only show the registration CTA when user hasn't registered attendance yet.
return Number(this.data?.user?.kehadiran) === 0;
},
memberRows() {
const u = this.data?.user || {};
const fmt = (n) => {
@@ -438,11 +465,26 @@ export default {
}
.home-content-row {
margin-top: 8px;
margin-left: 0;
margin-right: 0;
}
.home-quick-links-row {
margin-left: 0;
margin-right: 0;
margin-top: 18px;
}
.home-claim-row {
margin-left: 0;
margin-right: 0;
margin-top: 18px;
}
.home-content-row .home-column--secondary .home-claim-row {
margin-top: 0;
}
.home-column--primary {
padding-top: 4px;
}
@@ -456,6 +498,10 @@ export default {
margin-top: 8px;
padding-top: 0;
}
.home-content-row .home-column--secondary .home-claim-row {
margin-top: 18px;
}
}
@media (min-width: 992px) {
@@ -529,15 +575,6 @@ export default {
0 1px 0 rgba(255, 255, 255, 0.8) inset;
}
.hero-banner-kicker {
margin-bottom: 10px;
color: #2563eb;
font-size: 1.15rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.hero-banner-title {
margin: 0 0 10px;
color: #0f172a;
@@ -567,6 +604,73 @@ export default {
margin-top: 4px;
}
.home-hero-actions {
margin: 14px 0 8px;
display: flex;
flex-direction: column;
gap: 8px;
max-width: 520px;
}
.home-hero-register-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 12px 16px;
border-radius: 12px;
font-weight: 800;
font-size: 1.35rem;
box-shadow: 0 10px 24px rgba(13, 110, 253, 0.35);
}
.home-hero-register-hint {
color: #64748b;
font-size: 1.2rem;
line-height: 1.35;
}
.home-member-cta {
margin: 0 0 14px;
}
.home-member-cta-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 12px 16px;
border-radius: 12px;
font-weight: 800;
font-size: 1.35rem;
box-shadow: 0 10px 24px rgba(13, 110, 253, 0.35);
}
.home-member-cta-hint {
margin-top: 8px;
color: #64748b;
font-size: 1.2rem;
line-height: 1.35;
}
.home-member-cta-hint--warning {
margin-top: 0;
margin-bottom: 10px;
display: flex;
gap: 10px;
align-items: flex-start;
padding: 10px 12px;
border-radius: 12px;
background: #fffbeb;
border: 1px solid rgba(245, 158, 11, 0.45);
color: #92400e;
}
.home-member-cta-hint--warning .fa {
flex-shrink: 0;
margin-top: 2px;
}
.home-badge {
display: inline-flex;
align-items: center;