E-Vote/resources/assets/js/components/demo/admin/allowance/summary.vue

<template>
	<div class="panel panel-default">
		<div class="panel-body">
			<div class="clearfix" style="margin-bottom: 12px;">
				<h4 style="margin: 0; display: inline-block;">Ringkasan Elaun</h4>
				<!-- <div class="pull-right" style="display:flex; gap:8px; align-items:center;">
					<select v-model="methodFilter" class="form-control input-sm" style="width: 160px;">
						<option value="">Semua kaedah</option>
						<option value="cash">Tunai</option>
						<option value="bank">Bank</option>
					</select>
					<button class="btn btn-default btn-sm" @click="refresh()">
						<i class="fa fa-refresh"></i> Refresh
					</button>
				</div> -->
			</div>

			<div v-if="error" class="alert alert-danger">{{ error }}</div>

			<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>

			<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-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-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-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 allowance-section__footer-total">
					<b>Jumlah keseluruhan:</b> {{ formatCentsToRM(grandTotalCents) }}
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data: function () {
		return {
			loading: false,
			error: '',
			rows: [],
			outstandingCents: 0,
			outstandingCashCount: 0,
			outstandingBankCount: 0,
			defaultCashCents: 30000,
			defaultBankCents: 15000,
			methodFilter: '',
			headers: [
				{
					title: 'Admin',
					key: 'admin_name',
					sortable: true,
					exportValue: function (item) {
						var name = item && item.admin_name ? String(item.admin_name) : '—';
						var email = item && item.admin_email ? String(item.admin_email) : '';
						return email ? (name + ' (' + email + ')') : name;
					}
				},
				{
					title: 'Tunai (RM300.00)',
					key: 'cash_amount_cents',
					sortable: false,
					exportValue: function (item) {
						return item && item.cash_amount_cents != null ? (Number(item.cash_amount_cents) / 100).toFixed(2) : '';
					}
				},
				{
					title: 'Maya (RM150.00)',
					key: 'bank_amount_cents',
					sortable: false,
					exportValue: function (item) {
						return item && item.bank_amount_cents != null ? (Number(item.bank_amount_cents) / 100).toFixed(2) : '';
					}
				},
				{
					title: 'Jumlah (RM)',
					key: 'total_amount_cents',
					sortable: true,
					exportValue: function (item) {
						return item && item.total_amount_cents != null ? (Number(item.total_amount_cents) / 100).toFixed(2) : '';
					}
				},
			],
		};
	},

	created: function () {
		this.refresh();
	},

	computed: {
		items: function () {
			return Array.isArray(this.rows) ? this.rows : [];
		},

		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: {
		refresh: function () {
			this.loading = true;
			this.error = '';

			var params = {};
			if (this.methodFilter) params.method = this.methodFilter;

			axios.get(config.API + 'allowance/summary', { params: params })
				.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
							: (error && error.message ? error.message : 'Gagal memuatkan ringkasan.');
					if (error && error.response) this.util.showResult(error, 'error');
				})
				.finally(() => {
					this.loading = false;
				});
		},

		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 });
		},
	},
};
</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>