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/allowance/summary.vue
+156 -21
View File
@@ -17,32 +17,66 @@
<div v-if="error" class="alert alert-danger">{{ error }}</div>
<admin-data-table :headers="headers" :items="items" :loading="loading" :show-pagination="false"
index-title="Bil." empty-text="Tiada rekod bayaran elaun" :exportable="true">
<template v-slot:item-admin_name="{ item }">
<div style="font-weight: 800;">{{ item.admin_name || '—' }}</div>
<div class="text-muted" style="font-size: 12px;">{{ item.admin_email || '' }}</div>
</template>
<div v-if="!error" class="allowance-section">
<h5 class="allowance-section__title">Anggaran elaun yang perlu dibayar</h5>
<div v-if="!loading" class="row allowance-stat-row">
<div class="col-sm-4">
<div class="allowance-stat-card">
<div class="allowance-stat-card__label">Fizikal (tunai RM300.00)</div>
<div class="allowance-stat-card__value">RM {{ formatCentsToRM(outstandingFizikalCents) }}
</div>
<div class="allowance-stat-card__hint">
<b>{{ outstandingCashCount }}</b> belum dibayar
</div>
</div>
</div>
<div class="col-sm-4">
<div class="allowance-stat-card">
<div class="allowance-stat-card__label">Maya (RM150.00)</div>
<div class="allowance-stat-card__value">RM {{ formatCentsToRM(outstandingMayaCents) }}</div>
<div class="allowance-stat-card__hint">
<b>{{ outstandingBankCount }}</b> belum dibayar
</div>
</div>
</div>
<div class="col-sm-4">
<div class="allowance-stat-card allowance-stat-card--primary">
<div class="allowance-stat-card__label">Jumlah baki</div>
<div class="allowance-stat-card__value">RM {{ formatCentsToRM(outstandingCents) }}</div>
<div class="allowance-stat-card__hint">Fizikal + Maya</div>
</div>
</div>
</div>
</div>
<template v-slot:item-total_amount_cents="{ item }">
<b>{{ formatCentsToRM(item.total_amount_cents) }}</b>
<div class="text-muted" style="font-size: 12px;">{{ item.payouts_count }} bayaran</div>
</template>
<div v-if="!error" class="allowance-section allowance-section--table">
<h5 class="allowance-section__title">Bayaran mengikut pentadbir</h5>
<admin-data-table :headers="headers" :items="items" :loading="loading" :show-pagination="false"
index-title="Bil." empty-text="Tiada rekod bayaran elaun" :exportable="true">
<template v-slot:item-admin_name="{ item }">
<div style="font-weight: 800;">{{ item.admin_name || '—' }}</div>
<div class="text-muted" style="font-size: 12px;">{{ item.admin_email || '' }}</div>
</template>
<template v-slot:item-cash_amount_cents="{ item }">
{{ formatCentsToRM(item.cash_amount_cents) }}
<div class="text-muted" style="font-size: 12px;">{{ item.cash_count }} tunai</div>
</template>
<template v-slot:item-total_amount_cents="{ item }">
<b>{{ formatCentsToRM(item.total_amount_cents) }}</b>
<div class="text-muted" style="font-size: 12px;">{{ item.payouts_count }} bayaran</div>
</template>
<template v-slot:item-bank_amount_cents="{ item }">
{{ formatCentsToRM(item.bank_amount_cents) }}
<div class="text-muted" style="font-size: 12px;">{{ item.bank_count }}</div>
</template>
<template v-slot:item-cash_amount_cents="{ item }">
{{ formatCentsToRM(item.cash_amount_cents) }}
<div class="text-muted" style="font-size: 12px;">{{ item.cash_count }} tunai</div>
</template>
</admin-data-table>
<template v-slot:item-bank_amount_cents="{ item }">
{{ formatCentsToRM(item.bank_amount_cents) }}
<div class="text-muted" style="font-size: 12px;">{{ item.bank_count }}</div>
</template>
</admin-data-table>
<div v-if="!loading && items.length" class="well well-sm" style="margin-top: 12px;">
<b>Jumlah keseluruhan:</b> {{ formatCentsToRM(grandTotalCents) }}
<div v-if="!loading && items.length" class="well well-sm allowance-section__footer-total">
<b>Jumlah keseluruhan:</b> {{ formatCentsToRM(grandTotalCents) }}
</div>
</div>
</div>
</div>
@@ -55,6 +89,11 @@ export default {
loading: false,
error: '',
rows: [],
outstandingCents: 0,
outstandingCashCount: 0,
outstandingBankCount: 0,
defaultCashCents: 30000,
defaultBankCents: 15000,
methodFilter: '',
headers: [
{
@@ -107,6 +146,14 @@ export default {
grandTotalCents: function () {
return this.items.reduce((sum, r) => sum + Number(r.total_amount_cents || 0), 0);
},
outstandingFizikalCents: function () {
return Number(this.outstandingCashCount || 0) * Number(this.defaultCashCents || 30000);
},
outstandingMayaCents: function () {
return Number(this.outstandingBankCount || 0) * Number(this.defaultBankCents || 15000);
},
},
methods: {
@@ -121,11 +168,14 @@ export default {
.then((response) => {
if (!response || !response.data || response.data.status !== 'success') {
this.error = (response && response.data && response.data.message) ? response.data.message : 'Gagal memuatkan ringkasan.';
this.applySummaryMeta(null);
return;
}
this.rows = response.data.rows || [];
this.applySummaryMeta(response.data);
})
.catch((error) => {
this.applySummaryMeta(null);
this.error =
(error && error.response && error.response.data && error.response.data.message)
? error.response.data.message
@@ -137,6 +187,23 @@ export default {
});
},
applySummaryMeta: function (payload) {
if (!payload) {
this.outstandingCents = 0;
this.outstandingCashCount = 0;
this.outstandingBankCount = 0;
this.defaultCashCents = 30000;
this.defaultBankCents = 15000;
return;
}
var o = payload.outstanding_allowance || {};
this.outstandingCents = Number(o.cents || 0);
this.outstandingCashCount = Number(o.cash_count || 0);
this.outstandingBankCount = Number(o.bank_count || 0);
if (o.default_cash_cents != null) this.defaultCashCents = Number(o.default_cash_cents);
if (o.default_bank_cents != null) this.defaultBankCents = Number(o.default_bank_cents);
},
formatCentsToRM: function (cents) {
var n = Number(cents || 0) / 100;
return n.toLocaleString('en-MY', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
@@ -144,3 +211,71 @@ export default {
},
};
</script>
<style scoped>
.allowance-stat-card {
border: 1px solid #ddd;
border-radius: 6px;
padding: 14px 16px;
background: #fafafa;
min-height: 118px;
}
.allowance-stat-card--primary {
border-color: #bce8f1;
background: #f4fafc;
}
.allowance-stat-card__label {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #777;
margin-bottom: 6px;
}
.allowance-stat-card__value {
font-size: 22px;
font-weight: 700;
color: #222;
line-height: 1.2;
}
.allowance-stat-card--primary .allowance-stat-card__value {
color: #31708f;
}
.allowance-stat-card__hint {
font-size: 12px;
color: #888;
margin-top: 8px;
line-height: 1.35;
}
.allowance-stat-card__breakdown {
font-size: 12px;
color: #555;
margin-top: 8px;
}
.allowance-stat-row {
margin-bottom: 0;
}
.allowance-section__title {
margin: 0 0 6px;
font-size: 15px;
font-weight: 700;
color: #333;
}
.allowance-section--table {
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid #e8e8e8;
}
.allowance-section__footer-total {
margin-top: 12px;
}
</style>