{% extends "base.twig" %} {% block title %}{{ title }}{% endblock %} {% block styles %} {% endblock %} {% block contents %}
{# ── Page Header ── #}

Infografik Dana

Visualisasi penggunaan dana peserta mengikut kategori perbelanjaan

Semua Rekod
{# ── Summary Stat Cards ── #}
{# 1 — Jumlah Digunakan #}
💰
RM {{ (summary.total_amount ?? 0)|number_format(2, '.', ',') }}
Jumlah Digunakan
{# 2 — Kategori #}
🗂️
{{ summary.total_categories ?? 0 }}
Kategori Perbelanjaan
{# 3 — Jumlah Rekod #}
📋
{{ summary.total_records ?? 0 }}
Jumlah Rekod
{# 4 — Peserta Terlibat #}
👥
{{ summary.total_participants ?? 0 }}
Peserta Terlibat
{% if noUsage|length > 0 %}
{% else %}
Semua peserta telah keyin
{% endif %}
{# 5 — Purata Belanja / Peserta #}
📐
RM {{ (summary.avg_per_participant ?? 0)|number_format(2, '.', ',') }}
Purata Belanja / Peserta
{# 6 — Rekod Tanpa Resit #}
🧾
{{ summary.no_receipt_count ?? 0 }}
Rekod Tanpa Resit
{% if (summary.no_receipt_count ?? 0) > 0 %}
{% else %}
Semua rekod ada resit
{% endif %}
{# ── Main Grid: Donut Chart + Category List ── #} {% if categories|length > 0 %}
{# Left — Donut Chart #}
Carta Donut — Agihan Kategori
RM {{ (summary.total_amount ?? 0)|number_format(0, '.', ',') }} Jumlah

Klik pada carta atau baris di sebelah untuk lihat senarai

{# Right — Category Breakdown List #}
Senarai Kategori
Klik baris untuk lihat detail
    {% set totalAmt = summary.total_amount ?? 1 %} {% for cat in categories %} {% set pct = totalAmt > 0 ? (cat.total_amount / totalAmt * 100)|round(1) : 0 %}
  • {{ cat.used_for }}
    {{ cat.record_count }} rekod • {{ pct }}%
    RM {{ cat.total_amount|number_format(2, '.', ',') }}
    • {% endfor %}
{% else %}

Tiada rekod penggunaan dana ditemui.

Data akan muncul apabila peserta menambah rekod perbelanjaan.
{% endif %}
{# ── Detail Modal ── #} {# ── No-Usage Modal ── #} {# ── No-Receipt Modal ── #} {% endblock %} {% block scripts %} {% endblock %}