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

DONE: centralize theme color, interactive dashboard, increase winner result, refer TODO

Browse Source
This commit is contained in:
ISMAIL MASSERAN
2026-05-10 11:51:19 +08:00
parent 654a0c9fea
commit fd1baf34c8
47 changed files with 2680 additions and 932 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/assets/js/components/demo/admin/voter/index.vue
+2 -2
View File
@@ -11,9 +11,9 @@
<button class="btn btn-default" @click="refreshVoter()">
<i class="fa fa-refresh"></i> Kemaskini Pengundi
</button>
<router-link class="btn btn-info" :to="{ name: 'Penyata Anggota' }">
<!-- <router-link class="btn btn-info" :to="{ name: 'Penyata Anggota' }">
<i class="fa fa-list"></i> Database Anggota
</router-link>
</router-link> -->
</div>
<div class="kehadiran-search">
resources/assets/js/components/demo/admin/voter/kehadiran.vue
+250 -50
View File
@@ -21,45 +21,112 @@
<button class="btn btn-default" @click="clearSearch()" :disabled="!hasAnySearch">Reset</button>
</div>
<div class="kehadiran-filters">
<span class="kehadiran-filters__label">Penapis:</span>
<button type="button" class="kehadiran-chip" :class="{ 'is-active': !current_kehadiran }"
@click="setKehadiranFilter(null)">
Semua
</button>
<button type="button" class="kehadiran-chip"
:class="{ 'is-active': String(current_kehadiran) === 'unset' }"
@click="setKehadiranFilter('unset')">
Belum Ditetapkan
</button>
<button type="button" class="kehadiran-chip" :class="{ 'is-active': Number(current_kehadiran) === 1 }"
@click="setKehadiranFilter(1)">
Fizikal
</button>
<button type="button" class="kehadiran-chip" :class="{ 'is-active': Number(current_kehadiran) === 2 }"
@click="setKehadiranFilter(2)">
Maya
</button>
<div class="kehadiran-filter-panel">
<div class="kehadiran-filter-panel__title">Penapis</div>
<div class="kehadiran-filter-groups">
<div class="kehadiran-filter-group">
<div class="kehadiran-filter-group__title">Kaedah kehadiran</div>
<div class="kehadiran-filter-group__chips">
<button type="button" class="kehadiran-chip" :class="{ 'is-active': !current_kehadiran }"
@click="setKehadiranFilter(null)">
Semua
</button>
<button type="button" class="kehadiran-chip"
:class="{ 'is-active': String(current_kehadiran) === 'unset' }"
@click="setKehadiranFilter('unset')">
Belum Ditetapkan
</button>
<button type="button" class="kehadiran-chip"
:class="{ 'is-active': Number(current_kehadiran) === 1 }"
@click="setKehadiranFilter(1)">
Fizikal
</button>
<button type="button" class="kehadiran-chip"
:class="{ 'is-active': Number(current_kehadiran) === 2 }"
@click="setKehadiranFilter(2)">
Maya
</button>
</div>
</div>
<div class="kehadiran-filter-group">
<div class="kehadiran-filter-group__title">Pendaftaran fizikal</div>
<div class="kehadiran-filter-group__chips">
<button type="button" class="kehadiran-chip" :class="{ 'is-active': !current_fizikal_reg }"
@click="setFizikalRegFilter(null)">
Semua
</button>
<button type="button" class="kehadiran-chip"
:class="{ 'is-active': current_fizikal_reg === 'pending' }"
@click="setFizikalRegFilter('pending')">
Menunggu pengesahan
</button>
<button type="button" class="kehadiran-chip"
:class="{ 'is-active': current_fizikal_reg === 'verified' }"
@click="setFizikalRegFilter('verified')">
Disahkan
</button>
</div>
</div>
<div class="kehadiran-filter-group">
<div class="kehadiran-filter-group__title">Undi</div>
<div class="kehadiran-filter-group__chips">
<button type="button" class="kehadiran-chip" :class="{ 'is-active': !current_has_voted }"
@click="setHasVotedFilter(null)">
Semua
</button>
<button type="button" class="kehadiran-chip"
:class="{ 'is-active': current_has_voted === '1' }"
@click="setHasVotedFilter('1')">
Undi
</button>
<button type="button" class="kehadiran-chip"
:class="{ 'is-active': current_has_voted === '0' }"
@click="setHasVotedFilter('0')">
Belum
</button>
</div>
</div>
<div class="kehadiran-filter-group">
<div class="kehadiran-filter-group__title">Bayaran tunai (elaun)</div>
<div class="kehadiran-filter-group__chips">
<button type="button" class="kehadiran-chip" :class="{ 'is-active': !current_cash_status }"
@click="setCashStatusFilter(null)">
Semua
</button>
<button type="button" class="kehadiran-chip"
:class="{ 'is-active': current_cash_status === 'paid' }"
@click="setCashStatusFilter('paid')">
Sudah Bayar
</button>
<button type="button" class="kehadiran-chip"
:class="{ 'is-active': current_cash_status === 'unpaid' }"
@click="setCashStatusFilter('unpaid')">
Belum Bayar
</button>
</div>
</div>
</div>
</div>
<div class="kehadiran-filters kehadiran-filters--secondary">
<span class="kehadiran-filters__label">Pendaftaran fizikal:</span>
<button type="button" class="kehadiran-chip" :class="{ 'is-active': !current_fizikal_reg }"
@click="setFizikalRegFilter(null)">
Semua
</button>
<button type="button" class="kehadiran-chip" :class="{ 'is-active': current_fizikal_reg === 'pending' }"
@click="setFizikalRegFilter('pending')">
Menunggu pengesahan
</button>
<button type="button" class="kehadiran-chip"
:class="{ 'is-active': current_fizikal_reg === 'verified' }"
@click="setFizikalRegFilter('verified')">
Disahkan
</button>
<!-- Attendance stats -->
<div class="kehadiran-stats">
<div class="kehadiran-stat">
<div class="kehadiran-stat__label">Fizikal</div>
<div class="kehadiran-stat__value">{{ attendanceStats.fizikalCount }}</div>
<div class="kehadiran-stat__meta">{{ attendanceStats.fizikalPct }}%</div>
</div>
<div class="kehadiran-stat">
<div class="kehadiran-stat__label">Maya</div>
<div class="kehadiran-stat__value">{{ attendanceStats.mayaCount }}</div>
<div class="kehadiran-stat__meta">{{ attendanceStats.mayaPct }}%</div>
</div>
<div class="kehadiran-stat kehadiran-stat--muted">
<div class="kehadiran-stat__label">Jumlah Kehadiran</div>
<div class="kehadiran-stat__value">{{ attendanceStats.totalAttendance }}</div>
<div class="kehadiran-stat__meta">{{ attendanceStats.totalPct }}%</div>
</div>
</div>
<!-- <a class="btn btn-warning" :href="getPDFKehadiranurl(1)">Muat Turun PDF</a> -->
<admin-data-table :headers="kehadiranTableHeaders" :items="voterListItems" :loading="voterLoading"
@@ -347,6 +414,46 @@
margin-bottom: 10px;
}
.kehadiran-stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin: 10px 0 14px;
}
.kehadiran-stat {
border: 1px solid #e5e7eb;
background: #fff;
border-radius: 10px;
padding: 10px 12px;
}
.kehadiran-stat--muted {
background: #f9fafb;
}
.kehadiran-stat__label {
color: #6b7280;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.2px;
}
.kehadiran-stat__value {
margin-top: 4px;
font-size: 22px;
font-weight: 900;
color: #111827;
line-height: 1.1;
}
.kehadiran-stat__meta {
margin-top: 4px;
color: #374151;
font-size: 12px;
font-weight: 700;
}
.kehadiran-search {
margin: 10px 0 12px;
display: flex;
@@ -366,23 +473,49 @@
height: 34px;
}
.kehadiran-filters {
margin: 6px 0 14px;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
.kehadiran-filter-panel {
margin: 10px 0 14px;
border: 1px solid #e5e7eb;
border-radius: 10px;
background: #f9fafb;
padding: 12px 14px;
}
.kehadiran-filters--secondary {
margin-top: 0;
}
.kehadiran-filters__label {
.kehadiran-filter-panel__title {
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #6b7280;
margin-bottom: 10px;
}
.kehadiran-filter-groups {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 12px;
}
.kehadiran-filter-group {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 10px 12px;
}
.kehadiran-filter-group__title {
font-size: 12px;
font-weight: 600;
margin-right: 4px;
font-weight: 700;
color: #374151;
margin-bottom: 8px;
line-height: 1.3;
}
.kehadiran-filter-group__chips {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.kehadiran-chip {
@@ -556,6 +689,8 @@ export default {
page: this.current_page,
kehadiran: this.current_kehadiran || undefined,
fizikal_reg: this.current_fizikal_reg || undefined,
has_voted: this.current_has_voted || undefined,
cash_status: this.current_cash_status || undefined,
no_anggota: this.searchNoAnggota || undefined,
no_kp: this.searchNoKp || undefined
}
@@ -605,10 +740,28 @@ export default {
this.$router.replace({ query: q });
},
setHasVotedFilter: function (val) {
var q = Object.assign({}, this.$route.query);
if (val === '1' || val === '0') q.has_voted = val;
else delete q.has_voted;
q.page = 1;
this.$router.replace({ query: q });
},
setCashStatusFilter: function (val) {
var q = Object.assign({}, this.$route.query);
if (val === 'paid' || val === 'unpaid') q.cash_status = val;
else delete q.cash_status;
q.page = 1;
this.$router.replace({ query: q });
},
paginationQueryForPage: function (pageNum) {
var q = { page: pageNum };
if (this.current_kehadiran) q.kehadiran = this.current_kehadiran;
if (this.current_fizikal_reg) q.fizikal_reg = this.current_fizikal_reg;
if (this.current_has_voted) q.has_voted = this.current_has_voted;
if (this.current_cash_status) q.cash_status = this.current_cash_status;
return q;
},
@@ -856,6 +1009,14 @@ export default {
'$route.query.fizikal_reg': function () {
$.notifyClose();
this.refreshVoter();
},
'$route.query.has_voted': function () {
$.notifyClose();
this.refreshVoter();
},
'$route.query.cash_status': function () {
$.notifyClose();
this.refreshVoter();
}
},
@@ -910,6 +1071,22 @@ export default {
return this.$route.query.fizikal_reg ? this.$route.query.fizikal_reg : null;
},
current_has_voted: function () {
var v = this.$route.query.has_voted;
if (v === '1' || v === '0') {
return v;
}
return null;
},
current_cash_status: function () {
var v = this.$route.query.cash_status;
if (v === 'paid' || v === 'unpaid') {
return v;
}
return null;
},
verifyModalVoterNeedsLowSahamNote: function () {
if (!this.verifyModalVoter) return false;
var v = this.verifyModalVoter;
@@ -927,12 +1104,12 @@ export default {
attendancePercentage() {
// Count total members who attended physically (Fizikal)
const fizikalCount = this.voterListItems.reduce((total, voter) => {
return voter.kehadiran === 1 ? total + 1 : total;
return Number(voter && voter.kehadiran) === 1 ? total + 1 : total;
}, 0);
// Count total members who attended virtually (Maya)
const mayaCount = this.voterListItems.reduce((total, voter) => {
return voter.kehadiran === 2 ? total + 1 : total;
return Number(voter && voter.kehadiran) === 2 ? total + 1 : total;
}, 0);
// Calculate total attendance percentage
@@ -941,6 +1118,29 @@ export default {
return totalMembers === 0 ? 0 : ((totalAttendance / totalMembers) * 100).toFixed(2);
},
attendanceStats: function () {
var items = this.voterListItems || [];
var fizikalCount = items.reduce(function (total, voter) {
return Number(voter && voter.kehadiran) === 1 ? total + 1 : total;
}, 0);
var mayaCount = items.reduce(function (total, voter) {
return Number(voter && voter.kehadiran) === 2 ? total + 1 : total;
}, 0);
var totalAttendance = fizikalCount + mayaCount;
var totalMembers = items.length;
var denom = totalMembers === 0 ? 1 : totalMembers;
return {
fizikalCount: fizikalCount,
mayaCount: mayaCount,
totalAttendance: totalAttendance,
fizikalPct: totalMembers === 0 ? '0.00' : ((fizikalCount / denom) * 100).toFixed(2),
mayaPct: totalMembers === 0 ? '0.00' : ((mayaCount / denom) * 100).toFixed(2),
totalPct: totalMembers === 0 ? '0.00' : ((totalAttendance / denom) * 100).toFixed(2),
};
},
}