// modules/stats.js — Dashboard statistik role-aware (v1.0)
(function () {
let charts = { kategori: null };
window._statsUpdate = function () {
const modal = document.getElementById('modalStats');
if (!modal) return;
if (modal.classList.contains('show')) {
loadAndRender();
}
};
window._showDashboard = function () {
const modal = document.getElementById('modalStats');
if (!modal) return;
modal.classList.add('show');
loadAndRender();
};
window._hideDashboard = function () {
const modal = document.getElementById('modalStats');
if (!modal) return;
modal.classList.remove('show');
};
function loadAndRender() {
fetch('api/stats/ambil.php?_=' + Date.now(), { cache: 'no-store' })
.then(r => r.json())
.then(j => {
if (j.status !== 'success') return;
renderCards(j.data);
renderKategoriChart(j.data.kategori || []);
renderRekapTable(j.data.rekap_ibadah ?? null);
renderRekapKebutuhan(j.data.rekap_kebutuhan ?? null);
updateDonaturBadge(j.data.donatur_unread ?? 0);
})
.catch(err => console.error('[Stats]', err));
}
function set(id, val) {
const el = document.getElementById(id);
if (el) el.textContent = val;
}
function updateDonaturBadge(count) {
const badge = document.getElementById('donaturBadge');
if (!badge) return;
badge.textContent = count > 0 ? count : '';
badge.style.display = count > 0 ? '' : 'none';
}
function renderCards(d) {
set('statTotalIbadah', d.total_ibadah);
set('statTotalKK', d.total_kk);
set('statTotalJiwa', d.total_jiwa);
set('statJiwaTerjangkau', d.jiwa_terjangkau);
set('statJiwaBlankSpot', d.jiwa_blank_spot);
set('statPctCakupan', d.pct_cakupan + '%');
set('statKebutuhanOpen', d.kk_kebutuhan_open ?? 0);
const emptyMsg = document.getElementById('statsEmptyMsg');
if (emptyMsg) {
emptyMsg.style.display = (d.total_kk === 0 && d.total_ibadah === 0) ? 'block' : 'none';
}
}
function renderKategoriChart(rows) {
const el = document.getElementById('chartKategori');
if (!el) return;
const labels = rows.map(r => r.kategori);
const data = rows.map(r => parseInt(r.jml_jiwa));
const colors = {
'Sangat Miskin': '#f85149',
'Miskin' : '#e3b341',
'Hampir Miskin' : '#388bfd',
};
const bgColors = labels.map(l => (colors[l] || '#8b949e') + '99');
const bdColors = labels.map(l => colors[l] || '#8b949e');
if (charts.kategori) charts.kategori.destroy();
charts.kategori = new Chart(el.getContext('2d'), {
type: 'doughnut',
data: {
labels,
datasets: [{ data, backgroundColor: bgColors, borderColor: bdColors, borderWidth: 2, hoverOffset: 6 }]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'bottom',
labels: { color: '#8b949e', font: { size: 11 }, padding: 14 }
}
}
}
});
}
function renderRekapTable(rows) {
const wrapper = document.getElementById('rekapTableWrapper');
if (!wrapper) return;
if (rows === null) { wrapper.style.display = 'none'; return; }
wrapper.style.display = '';
if (rows.length === 0) {
wrapper.innerHTML = 'Belum ada data rumah ibadah.
';
return;
}
function esc(s) {
const d = document.createElement('div');
d.appendChild(document.createTextNode(s ?? ''));
return d.innerHTML;
}
const tbody = rows.map(r => {
const pct = r.jml_kk > 0 ? Math.round(r.jml_ditangani / r.jml_kk * 100) : 0;
return `
| ${esc(r.nama)} |
${esc(r.jenis)} |
${r.jml_kk} |
${r.jml_jiwa} |
${pct}%
|
`;
}).join('');
wrapper.innerHTML = `
Rekapitulasi per Rumah Ibadah
| Nama |
Jenis |
KK |
Jiwa |
% Ditangani |
${tbody}
`;
}
function renderRekapKebutuhan(rows) {
const wrapper = document.getElementById('rekapKebutuhanWrapper');
if (!wrapper) return;
if (rows === null) { wrapper.style.display = 'none'; return; }
wrapper.style.display = '';
if (rows.length === 0) {
wrapper.innerHTML = 'Belum ada kebutuhan tercatat.
';
return;
}
function esc(s) {
const d = document.createElement('div');
d.appendChild(document.createTextNode(s ?? ''));
return d.innerHTML;
}
const ICON = {
'Sembako': 'shopping-cart',
'Biaya Sekolah': 'graduation-cap',
'Biaya Kesehatan': 'heart-pulse',
'Modal Usaha': 'briefcase',
'Renovasi Rumah': 'home',
'Perlengkapan Rumah': 'armchair',
'Pakaian': 'shirt',
'Lainnya': 'clipboard-list'
};
const tbody = rows.map(r => {
const iconName = ICON[r.kategori] || 'clipboard-list';
const iconHtml = ``;
return `
| ${iconHtml} ${esc(r.kategori)} |
${r.belum} |
${r.proses} |
${r.terpenuhi} |
${r.total} |
`;
}).join('');
wrapper.innerHTML = `
Rekapitulasi Kebutuhan per Kategori
| Kategori |
Belum |
Proses |
Terpenuhi |
Total |
${tbody}
`;
if (typeof lucide !== 'undefined') lucide.createIcons();
}
})();