Enhanced PHP File Manager

⬆️ Go Up (..)

📊 Server Information

Server:

LiteSpeed

System:

Linux 5.14.0-611.26.1.el9_7.x86_64

PHP Version:

8.4.15

User:

u892747680

Directory:

/home/u892747680/domains/sisteminformasic.com/public_html/upzisprnumliwang

Free Space:

9.68 TB

🔧 Quick Actions

✏️ Editing: laporan.php

<?php
require_once 'includes/config.php';
$pageTitle = 'Laporan';
$pageDesc  = 'Laporan keuangan zakat, infaq, dan shodaqoh UPZIS PRNU Mliwang';

// ── 1. Filters ────────────────────────────────────────────────────
$date_from   = sanitize($_GET['date_from']   ?? date('Y-m-01'));
$date_to     = sanitize($_GET['date_to']     ?? date('Y-m-d'));
$report_type = sanitize($_GET['report_type'] ?? 'masuk');
$filter_jenis= sanitize($_GET['filter_jenis'] ?? '');

if ($report_type === 'rekap' || $report_type === 'koin_nu') {
    $filter_jenis = '';
}

// ── Signature block ───────────────────────────────────────────────
$signature_block = '
<div class="print-signature">
  <div class="sig-col">
    <p>Mengetahui,</p>
    <p><strong>Ketua UPZIS PRNU Mliwang</strong></p>
    <br><br><br>
    <p>(_________________________)</p>
  </div>
  <div class="sig-col">
    <p>Mliwang, ' . date('d M Y') . '</p>
    <p><strong>Bendahara</strong></p>
    <br><br><br>
    <p>(_________________________)</p>
  </div>
</div>';

// ── 2. Init vars ──────────────────────────────────────────────────
$stats = [];
$chart_data = ['labels' => [], 'zakat' => [], 'koin_nu' => [], 'penyaluran' => []];
$composition_data = ['labels' => ['Zakat', 'KOIN NU', 'Infaq', 'Shodaqoh'], 'values' => [0, 0, 0, 0]];

$laporan_masuk      = []; $total_masuk_uang = 0; $total_masuk_beras = 0;
$laporan_penyaluran = []; $total_penyaluran_uang = 0; $total_penyaluran_beras = 0; $total_operasional_uang = 0;
$laporan_donasi     = []; $total_donasi = 0;
$laporan_koin_nu    = [];

$total_koin_nu_masuk_periode = 0;
$total_infaq_periode         = 0;
$total_shodaqoh_periode      = 0;
$total_koin_nu_periode       = 0;

$total_koin_nu_masuk_all = 0;
$total_infaq_all         = 0;
$total_shodaqoh_all      = 0;
$total_koin_nu_all       = 0;

$error = '';

try {
    $stmt = $pdo->prepare("SELECT COALESCE(SUM(nominal),0) FROM transaksi WHERE jenis='zakat_masuk' AND keterangan NOT LIKE 'Zakat Fitrah%' AND tanggal BETWEEN ? AND ?");
    $stmt->execute([$date_from, $date_to]);
    $stats['total_zakat_periode'] = $stmt->fetchColumn();

$stmt = $pdo->prepare("SELECT COALESCE(SUM(nominal),0) FROM transaksi WHERE ((jenis='penyaluran' AND keterangan NOT LIKE '%Beras%') OR jenis='operasional_keluar') AND tanggal BETWEEN ? AND ?");
    $stmt->execute([$date_from, $date_to]);
    $stats['total_penyaluran_periode'] = $stmt->fetchColumn();

$stmt = $pdo->prepare("SELECT COALESCE(SUM(nominal),0) FROM transaksi WHERE jenis='koin_nu_masuk' AND tanggal BETWEEN ? AND ?");
    $stmt->execute([$date_from, $date_to]); $total_koin_nu_masuk_periode = (float)$stmt->fetchColumn();

$stmt = $pdo->prepare("SELECT COALESCE(SUM(nominal),0) FROM transaksi WHERE jenis='infaq_masuk' AND tanggal BETWEEN ? AND ?");
    $stmt->execute([$date_from, $date_to]); $total_infaq_periode = (float)$stmt->fetchColumn();

$stmt = $pdo->prepare("SELECT COALESCE(SUM(nominal),0) FROM transaksi WHERE jenis='shodaqoh_masuk' AND tanggal BETWEEN ? AND ?");
    $stmt->execute([$date_from, $date_to]); $total_shodaqoh_periode = (float)$stmt->fetchColumn();

$total_koin_nu_periode = $total_koin_nu_masuk_periode + $total_infaq_periode + $total_shodaqoh_periode;
    $stats['total_donasi_periode'] = $total_koin_nu_periode;

$total_koin_nu_masuk_all = (float)$pdo->query("SELECT COALESCE(SUM(nominal),0) FROM transaksi WHERE jenis='koin_nu_masuk'")->fetchColumn();
    $total_infaq_all         = (float)$pdo->query("SELECT COALESCE(SUM(nominal),0) FROM transaksi WHERE jenis='infaq_masuk'")->fetchColumn();
    $total_shodaqoh_all      = (float)$pdo->query("SELECT COALESCE(SUM(nominal),0) FROM transaksi WHERE jenis='shodaqoh_masuk'")->fetchColumn();
    $total_koin_nu_all       = $total_koin_nu_masuk_all + $total_infaq_all + $total_shodaqoh_all;

$total_pemasukan_uang_all   = (float)$pdo->query("SELECT COALESCE(SUM(nominal),0) FROM transaksi WHERE (jenis='zakat_masuk' AND keterangan NOT LIKE 'Zakat Fitrah%') OR jenis IN ('koin_nu_masuk','infaq_masuk','shodaqoh_masuk')")->fetchColumn();
    $total_pengeluaran_uang_all = (float)$pdo->query("SELECT COALESCE(SUM(nominal),0) FROM transaksi WHERE (jenis='penyaluran' AND keterangan NOT LIKE '%Beras%') OR jenis='operasional_keluar'")->fetchColumn();
    $stats['saldo_akhir_uang']  = $total_pemasukan_uang_all - $total_pengeluaran_uang_all;

$total_pemasukan_beras_all   = (float)$pdo->query("SELECT COALESCE(SUM(nominal),0) FROM transaksi WHERE jenis='zakat_masuk' AND keterangan LIKE 'Zakat Fitrah%'")->fetchColumn();
    $total_pengeluaran_beras_all = (float)$pdo->query("SELECT COALESCE(SUM(nominal),0) FROM transaksi WHERE jenis='penyaluran' AND keterangan LIKE '%Beras%'")->fetchColumn();
    $stats['saldo_akhir_beras']  = $total_pemasukan_beras_all - $total_pengeluaran_beras_all;

$jml_koin_nu_masuk = (int)$pdo->query("SELECT COUNT(*) FROM transaksi WHERE jenis='koin_nu_masuk'")->fetchColumn();
    $jml_infaq         = (int)$pdo->query("SELECT COUNT(*) FROM transaksi WHERE jenis='infaq_masuk'")->fetchColumn();
    $jml_shodaqoh      = (int)$pdo->query("SELECT COUNT(*) FROM transaksi WHERE jenis='shodaqoh_masuk'")->fetchColumn();
    $koin_nu_bulan_ini = (float)$pdo->query("SELECT COALESCE(SUM(nominal),0) FROM transaksi WHERE jenis IN ('koin_nu_masuk','infaq_masuk','shodaqoh_masuk') AND MONTH(tanggal)=MONTH(NOW()) AND YEAR(tanggal)=YEAR(NOW())")->fetchColumn();

$current_year = date('Y');
    for ($i = 1; $i <= 12; $i++) {
        $m = $current_year . '-' . str_pad($i, 2, '0', STR_PAD_LEFT);
        $chart_data['labels'][] = date('M', mktime(0,0,0,$i,1));
        $stmt = $pdo->prepare("SELECT COALESCE(SUM(nominal),0) FROM transaksi WHERE jenis='zakat_masuk' AND keterangan NOT LIKE 'Zakat Fitrah%' AND DATE_FORMAT(tanggal,'%Y-%m')=?");
        $stmt->execute([$m]); $chart_data['zakat'][] = (float)$stmt->fetchColumn();
        $stmt = $pdo->prepare("SELECT COALESCE(SUM(nominal),0) FROM transaksi WHERE jenis IN ('koin_nu_masuk','infaq_masuk','shodaqoh_masuk') AND DATE_FORMAT(tanggal,'%Y-%m')=?");
        $stmt->execute([$m]); $chart_data['koin_nu'][] = (float)$stmt->fetchColumn();
        $stmt = $pdo->prepare("SELECT COALESCE(SUM(nominal),0) FROM transaksi WHERE ((jenis='penyaluran' AND keterangan NOT LIKE '%Beras%') OR jenis='operasional_keluar') AND DATE_FORMAT(tanggal,'%Y-%m')=?");
        $stmt->execute([$m]); $chart_data['penyaluran'][] = (float)$stmt->fetchColumn();
    }

$stmt = $pdo->prepare("SELECT COALESCE(SUM(nominal),0) FROM transaksi WHERE jenis='zakat_masuk' AND keterangan NOT LIKE 'Zakat Fitrah%' AND tanggal BETWEEN ? AND ?");
    $stmt->execute([$date_from,$date_to]); $composition_data['values'][0] = (float)$stmt->fetchColumn();
    $stmt = $pdo->prepare("SELECT COALESCE(SUM(nominal),0) FROM transaksi WHERE jenis='koin_nu_masuk' AND tanggal BETWEEN ? AND ?");
    $stmt->execute([$date_from,$date_to]); $composition_data['values'][1] = (float)$stmt->fetchColumn();
    $stmt = $pdo->prepare("SELECT COALESCE(SUM(nominal),0) FROM transaksi WHERE jenis='infaq_masuk' AND tanggal BETWEEN ? AND ?");
    $stmt->execute([$date_from,$date_to]); $composition_data['values'][2] = (float)$stmt->fetchColumn();
    $stmt = $pdo->prepare("SELECT COALESCE(SUM(nominal),0) FROM transaksi WHERE jenis='shodaqoh_masuk' AND tanggal BETWEEN ? AND ?");
    $stmt->execute([$date_from,$date_to]); $composition_data['values'][3] = (float)$stmt->fetchColumn();

$sql_masuk = "SELECT * FROM transaksi WHERE jenis='zakat_masuk' AND tanggal BETWEEN ? AND ? ORDER BY tanggal DESC";
    $stmt = $pdo->prepare($sql_masuk); $stmt->execute([$date_from,$date_to]);
    $laporan_masuk = $stmt->fetchAll();
    foreach ($laporan_masuk as $t) {
        if (strpos($t['keterangan'], 'Zakat Fitrah') === 0) $total_masuk_beras += (float)$t['nominal'];
        else $total_masuk_uang += (float)$t['nominal'];
    }

$sql_pen = "SELECT * FROM transaksi WHERE (jenis='penyaluran' OR jenis='operasional_keluar') AND tanggal BETWEEN ? AND ? ORDER BY tanggal DESC";
    $stmt = $pdo->prepare($sql_pen); $stmt->execute([$date_from,$date_to]);
    $laporan_penyaluran = $stmt->fetchAll();
    foreach ($laporan_penyaluran as $t) {
        if ($t['jenis'] === 'operasional_keluar') $total_operasional_uang += (float)$t['nominal'];
        elseif (strpos(strtolower($t['keterangan']??''), 'beras') !== false) $total_penyaluran_beras += (float)$t['nominal'];
        else $total_penyaluran_uang += (float)$t['nominal'];
    }

$sql_don = "SELECT * FROM transaksi WHERE jenis IN ('infaq_masuk','shodaqoh_masuk') AND tanggal BETWEEN ? AND ? ORDER BY tanggal DESC";
    $stmt = $pdo->prepare($sql_don); $stmt->execute([$date_from,$date_to]);
    $laporan_donasi  = $stmt->fetchAll();
    $total_donasi    = array_sum(array_column($laporan_donasi, 'nominal'));

$sql_koin = "SELECT * FROM transaksi WHERE jenis IN ('koin_nu_masuk','infaq_masuk','shodaqoh_masuk') AND tanggal BETWEEN ? AND ? ORDER BY tanggal DESC";
    $stmt = $pdo->prepare($sql_koin); $stmt->execute([$date_from,$date_to]);
    $laporan_koin_nu = $stmt->fetchAll();

$fields = ['nama','keterangan'];
    foreach ([&$laporan_masuk,&$laporan_penyaluran,&$laporan_donasi,&$laporan_koin_nu] as &$grp) {
        foreach ($grp as &$item) {
            foreach ($fields as $f) { if (isset($item[$f])) $item[$f] = htmlspecialchars_decode($item[$f], ENT_QUOTES); }
        } unset($item);
    } unset($grp);

} catch (Exception $e) {
    $error = "Gagal memuat data laporan: " . $e->getMessage();
}

include 'includes/header.php';
?>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.umd.min.js"></script>

--gray-50:  #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-400: #9ca3af;
  --gray-600: #4b5563;
  --gray-800: #1f2937;

--radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
  --shadow:    0 4px 16px rgba(0,0,0,.07), 0 2px 6px rgba(0,0,0,.04);
  --shadow-lg: 0 10px 32px rgba(0,0,0,.1), 0 4px 12px rgba(0,0,0,.06);
  --font: 'Plus Jakarta Sans', sans-serif;
  --font-mono: 'DM Mono', monospace;
}

/* ════════════════════════════════════════════
   BASE
════════════════════════════════════════════ */
.lap-wrap * { box-sizing: border-box; }
.lap-wrap {
  font-family: var(--font);
  color: var(--gray-800);
  padding: 8px 0 32px;
}

/* ════════════════════════════════════════════
   PAGE HEADER
════════════════════════════════════════════ */
.lap-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}
.lap-page-header .page-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--gray-800);
  letter-spacing: -.4px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.lap-page-header .page-title .icon-wrap {
  width: 40px; height: 40px;
  background: var(--g-light);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--g-main);
  font-size: 18px;
}

/* ════════════════════════════════════════════
   FILTER CARD
════════════════════════════════════════════ */
.filter-card {
  background: #fff;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
}
.filter-card .filter-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--gray-400);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.filter-row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.filter-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.filter-group label {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-600);
  letter-spacing: .2px;
}
.filter-group select,
.filter-group input[type="date"] {
  height: 40px;
  padding: 0 12px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: var(--font);
  color: var(--gray-800);
  background: var(--gray-50);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  min-width: 200px;
}
.filter-group select:focus,
.filter-group input[type="date"]:focus {
  border-color: var(--g-main);
  box-shadow: 0 0 0 3px rgba(22,163,74,.1);
  background: #fff;
}
.btn-filter {
  height: 40px;
  padding: 0 20px;
  background: var(--g-main);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  transition: background .15s, transform .1s;
}
.btn-filter:hover { background: var(--g-deep); }
.btn-filter:active { transform: scale(.97); }

/* ════════════════════════════════════════════
   SUMMARY STAT CARDS
════════════════════════════════════════════ */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.stat-tile {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  border: 1.5px solid var(--gray-200);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  transition: box-shadow .2s, transform .2s;
}
.stat-tile:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.stat-tile::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  border-radius: 4px 0 0 4px;
}
.stat-tile.green::before  { background: var(--g-main); }
.stat-tile.gold::before   { background: var(--gold); }
.stat-tile.violet::before { background: var(--violet); }
.stat-tile.red::before    { background: var(--red); }
.stat-tile.blue::before   { background: var(--blue); }

.stat-tile .st-icon {
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
  margin-bottom: 14px;
}
.stat-tile.green  .st-icon { background: var(--g-light);    color: var(--g-main); }
.stat-tile.gold   .st-icon { background: var(--gold-pale);  color: var(--gold); }
.stat-tile.violet .st-icon { background: var(--violet-pale); color: var(--violet); }
.stat-tile.red    .st-icon { background: var(--red-pale);   color: var(--red); }
.stat-tile.blue   .st-icon { background: var(--blue-pale);  color: var(--blue); }

.stat-tile .st-val {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.3px;
  line-height: 1.2;
  margin-bottom: 4px;
}
.stat-tile.green  .st-val { color: var(--g-main); }
.stat-tile.gold   .st-val { color: var(--gold); }
.stat-tile.violet .st-val { color: var(--violet); }
.stat-tile.red    .st-val { color: var(--red); }
.stat-tile.blue   .st-val { color: var(--blue); }

.stat-tile .st-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* ════════════════════════════════════════════
   CHARTS
════════════════════════════════════════════ */
.charts-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
@media (max-width: 768px) { .charts-row { grid-template-columns: 1fr; } }

.chart-card {
  background: #fff;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.chart-card .chart-hd {
  padding: 16px 20px 12px;
  border-bottom: 1.5px solid var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.chart-card .chart-hd h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--gray-800);
  margin: 0;
}
.chart-card .chart-hd .badge-year {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  background: var(--g-pale);
  color: var(--g-main);
  border-radius: 100px;
  border: 1px solid var(--g-light);
}
.chart-card .chart-body {
  padding: 16px;
  height: 240px;
}

/* ════════════════════════════════════════════
   REPORT SECTION CARD
════════════════════════════════════════════ */
.report-card {
  background: #fff;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: 0;
}
.report-card .rcard-hd {
  padding: 18px 24px;
  border-bottom: 1.5px solid var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.rcard-hd .rcard-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--gray-800);
  display: flex;
  align-items: center;
  gap: 8px;
}
.rcard-hd .rcard-title .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.rcard-hd .rcard-period {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-400);
  background: var(--gray-100);
  padding: 4px 12px;
  border-radius: 100px;
}
.rcard-body { padding: 0; }

/* ════════════════════════════════════════════
   TABLE
════════════════════════════════════════════ */
.lap-table-wrap {
  overflow-x: auto;
}
.lap-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.lap-table thead tr {
  background: var(--gray-50);
  border-bottom: 2px solid var(--gray-200);
}
.lap-table thead th {
  padding: 12px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--gray-400);
  white-space: nowrap;
}
.lap-table thead th.r { text-align: right; }
.lap-table thead th.c { text-align: center; }

.lap-table tbody tr {
  border-bottom: 1px solid var(--gray-100);
  transition: background .1s;
}
.lap-table tbody tr:last-child { border-bottom: none; }
.lap-table tbody tr:hover { background: var(--gray-50); }

.lap-table tbody td {
  padding: 12px 16px;
  vertical-align: middle;
  color: var(--gray-800);
}
.lap-table tbody td.r { text-align: right; }
.lap-table tbody td.c { text-align: center; }
.lap-table tbody td.mono {
  font-family: var(--font-mono);
  font-size: 12.5px;
}
.lap-table .row-no {
  width: 40px;
  color: var(--gray-400);
  font-size: 12px;
  font-weight: 600;
}
.lap-table .name-cell { font-weight: 600; }
.lap-table .date-cell {
  font-size: 12px;
  color: var(--gray-600);
  white-space: nowrap;
}
.lap-table .nominal-cell {
  font-weight: 700;
  font-family: var(--font-mono);
  font-size: 13px;
  white-space: nowrap;
}
.lap-table .nominal-cell.green  { color: var(--g-main); }
.lap-table .nominal-cell.red    { color: var(--red); }
.lap-table .nominal-cell.gold   { color: var(--gold); }
.lap-table .nominal-cell.violet { color: var(--violet); }

/* Total row */
.lap-table .row-total td {
  background: var(--gray-50);
  font-weight: 700;
  border-top: 2px solid var(--gray-200);
  padding: 14px 16px;
  font-size: 13.5px;
}
.lap-table.koin .row-total td.nominal-cell { color: var(--violet); }

/* Empty state */
.empty-state {
  padding: 56px 24px;
  text-align: center;
  color: var(--gray-400);
}
.empty-state i {
  font-size: 32px;
  display: block;
  margin-bottom: 10px;
  opacity: .4;
}
.empty-state p {
  font-size: 14px;
  font-weight: 500;
  margin: 0;
}

/* ════════════════════════════════════════════
   BADGES
════════════════════════════════════════════ */
.lapbadge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .2px;
  white-space: nowrap;
}
.lapbadge.green   { background: var(--g-light);    color: var(--g-main); }
.lapbadge.red     { background: var(--red-pale);   color: var(--red); }
.lapbadge.gray    { background: var(--gray-100);   color: var(--gray-600); }
.lapbadge.blue    { background: var(--blue-pale);  color: var(--blue); }
.lapbadge.violet  { background: var(--violet-pale); color: var(--violet); }
.lapbadge.pink    { background: #fdf2f8;            color: #be185d; }
.lapbadge.gold    { background: var(--gold-pale);  color: var(--gold); }

/* ════════════════════════════════════════════
   KOIN NU MINI CARDS
════════════════════════════════════════════ */
.koin-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: 12px;
  padding: 20px 24px;
  background: linear-gradient(135deg, #faf5ff 0%, #f5f3ff 100%);
  border-bottom: 1.5px solid #e9d5ff;
}
.koin-mini-card {
  background: #fff;
  border: 1.5px solid #e9d5ff;
  border-radius: var(--radius);
  padding: 14px 16px;
  text-align: center;
  transition: box-shadow .15s;
}
.koin-mini-card.total {
  border-color: var(--violet);
  box-shadow: 0 0 0 3px rgba(124,58,237,.1);
}
.koin-mini-card:hover { box-shadow: var(--shadow); }
.koin-mini-card .kmc-emoji { font-size: 22px; margin-bottom: 6px; }
.koin-mini-card .kmc-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--gray-400);
  margin-bottom: 5px;
}
.koin-mini-card .kmc-val {
  font-size: 15px;
  font-weight: 800;
  color: var(--violet);
  font-family: var(--font-mono);
}
.koin-mini-card .kmc-sub {
  font-size: 11px;
  color: var(--gray-400);
  margin-top: 3px;
}

/* All-time strip */
.koin-alltime-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: 0;
  border-top: 1.5px solid #e9d5ff;
  background: #faf5ff;
}
.koin-alltime-item {
  padding: 14px 20px;
  border-right: 1.5px solid #e9d5ff;
  text-align: center;
}
.koin-alltime-item:last-child { border-right: none; }
.koin-alltime-item .kai-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--gray-400);
  margin-bottom: 4px;
}
.koin-alltime-item .kai-val {
  font-size: 14px;
  font-weight: 800;
  color: var(--violet);
  font-family: var(--font-mono);
}
.koin-alltime-item .kai-count {
  font-size: 11px;
  color: var(--gray-400);
  margin-top: 2px;
}

/* ════════════════════════════════════════════
   REKAP
════════════════════════════════════════════ */
.rekap-body { padding: 24px; }
.rekap-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--gray-400);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1.5px solid var(--gray-100);
  display: flex;
  align-items: center;
  gap: 8px;
}
.rekap-section-label span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
}
.rekap-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 16px;
}
@media (max-width: 600px) { .rekap-two-col { grid-template-columns: 1fr; } }

.rekap-sub-label {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--gray-600);
}
.rekap-mini-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.rekap-mini-table tr {
  border-bottom: 1px solid var(--gray-100);
}
.rekap-mini-table td {
  padding: 9px 12px;
  color: var(--gray-800);
}
.rekap-mini-table td:last-child {
  text-align: right;
  font-family: var(--font-mono);
  font-weight: 700;
}
.rekap-mini-table .subtotal-row td {
  background: var(--g-pale);
  font-weight: 800;
  color: var(--g-main);
  font-size: 13.5px;
  border-top: 2px solid var(--g-light);
  padding: 10px 12px;
}
.rekap-mini-table .subtotal-row.red td {
  background: var(--red-pale);
  color: var(--red);
  border-top-color: #fecaca;
}
.rekap-mini-table .subtotal-row.violet td {
  background: var(--violet-pale);
  color: var(--violet);
  border-top-color: #ddd6fe;
}

.saldo-banner {
  border-radius: var(--radius);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
  flex-wrap: wrap;
  gap: 8px;
}
.saldo-banner.green { background: var(--g-light); border: 1.5px solid #86efac; }
.saldo-banner.gold  { background: var(--gold-pale); border: 1.5px solid #fcd34d; }
.saldo-banner .sb-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
}
.saldo-banner.green .sb-label { color: var(--g-deep); }
.saldo-banner.gold  .sb-label { color: #92400e; }
.saldo-banner .sb-val {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -1px;
  font-family: var(--font-mono);
}
.saldo-banner.green .sb-val { color: var(--g-main); }
.saldo-banner.gold  .sb-val { color: var(--gold); }

.rekap-divider { height: 1.5px; background: var(--gray-100); margin: 28px 0; }

/* signature in screen */
.signature-block {
  display: flex;
  justify-content: space-between;
  padding: 32px 24px 24px;
  margin-top: 8px;
  border-top: 1.5px dashed var(--gray-200);
}
.sig-col {
  text-align: center;
  width: 42%;
  font-size: 13px;
  line-height: 2;
  color: var(--gray-600);
}
.sig-col strong { color: var(--gray-800); }

/* ════════════════════════════════════════════
   PRINT BUTTON
════════════════════════════════════════════ */
.btn-print {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--g-main);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, transform .1s, box-shadow .15s;
  box-shadow: 0 2px 8px rgba(22,163,74,.25);
}
.btn-print:hover {
  background: var(--g-deep);
  box-shadow: 0 4px 14px rgba(22,163,74,.35);
}
.btn-print:active { transform: scale(.97); }

/* ════════════════════════════════════════════
   REKAP TAB / SLIDE SYSTEM
════════════════════════════════════════════ */
.rekap-tab-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 20px;
  background: var(--gray-50);
  border-bottom: 1.5px solid var(--gray-200);
  flex-wrap: wrap;
}
.rtab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border: 1.5px solid var(--gray-200);
  border-radius: 100px;
  background: #fff;
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gray-600);
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.rtab-btn:hover { border-color: var(--g-main); color: var(--g-main); background: var(--g-pale); }
.rtab-btn.active { background: var(--g-main); border-color: var(--g-main); color: #fff; box-shadow: 0 2px 8px rgba(22,163,74,.25); }
.rtab-dots { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.rtab-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gray-200); cursor: pointer; transition: all .2s; }
.rtab-dot.active { background: var(--g-main); width: 22px; border-radius: 4px; }

.rekap-slides { position: relative; overflow: hidden; }
.rekap-slide { display: none; animation: slideIn .25s ease; }
.rekap-slide.active { display: block; }
.rekap-slide.from-left { animation: slideInLeft .25s ease; }
@keyframes slideIn { from { opacity:0; transform:translateX(18px); } to { opacity:1; transform:translateX(0); } }
@keyframes slideInLeft { from { opacity:0; transform:translateX(-18px); } to { opacity:1; transform:translateX(0); } }

.rtab-footer { display:flex; align-items:center; justify-content:space-between; padding:14px 24px 20px; border-top:1.5px solid var(--gray-100); margin-top:4px; }
.rtab-nav-btn { display:inline-flex; align-items:center; gap:6px; padding:8px 18px; background:var(--g-main); color:#fff; border:none; border-radius:var(--radius-sm); font-family:var(--font); font-size:12.5px; font-weight:700; cursor:pointer; transition:background .15s,transform .1s; box-shadow:0 2px 6px rgba(22,163,74,.2); }
.rtab-nav-btn:hover { background: var(--g-deep); }
.rtab-nav-btn:active { transform: scale(.97); }
.rtab-nav-btn.secondary { background:#fff; color:var(--gray-600); border:1.5px solid var(--gray-200); box-shadow:none; }
.rtab-nav-btn.secondary:hover { border-color:var(--g-main); color:var(--g-main); background:var(--g-pale); }

.rekap-flow-row { display:flex; align-items:center; gap:12px; margin-top:20px; flex-wrap:wrap; }
.rekap-flow-card { flex:1; min-width:110px; background:var(--gray-50); border:1.5px solid var(--gray-200); border-radius:var(--radius); padding:14px 16px; text-align:center; }
.rekap-flow-card.green { background:var(--g-pale); border-color:#86efac; }
.rekap-flow-card.red   { background:var(--red-pale); border-color:#fca5a5; }
.rekap-flow-card.gold  { background:var(--gold-pale); border-color:#fcd34d; }
.rekap-flow-card.bold  { box-shadow:var(--shadow); }
.rekap-flow-card .rfc-label { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--gray-400); margin-bottom:5px; }
.rekap-flow-card .rfc-val { font-size:15px; font-weight:800; font-family:var(--font-mono); }
.rekap-flow-card.green .rfc-val { color:var(--g-main); }
.rekap-flow-card.red   .rfc-val { color:var(--red); }
.rekap-flow-card.gold  .rfc-val { color:var(--gold); }
.rekap-flow-arrow { font-size:22px; font-weight:700; color:var(--gray-400); flex-shrink:0; }

.rekap-koin-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:4px; }
@media (max-width:500px) { .rekap-koin-cards { grid-template-columns:1fr; } }
.rkc-item { background:#fff; border:1.5px solid; border-radius:var(--radius); padding:16px; text-align:center; }
.rkc-icon { font-size:24px; margin-bottom:7px; }
.rkc-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--gray-400); margin-bottom:5px; }
.rkc-val { font-size:16px; font-weight:800; color:var(--violet); font-family:var(--font-mono); }

/* ════════════════════════════════════════════
   PRINT STYLES
════════════════════════════════════════════ */
@media print {
    body * { visibility: hidden; }
    #printable-area, #printable-area * { visibility: visible; }
    #printable-area { position: fixed; top: 0; left: 0; width: 100%; }
    @page { size: A4 portrait; margin: 15mm 15mm 20mm 15mm; }
    .print-document { font-family: 'Times New Roman', Times, serif; font-size: 11pt; color: #000; background: #fff; }
    .print-kop { border-bottom: 3px double #1a7a47; padding-bottom: 10px; margin-bottom: 16px; display: flex; align-items: center; gap: 16px; }
    .print-kop img { height: 70px; width: auto; }
    .print-kop-text { flex: 1; text-align: center; }
    .print-kop-text .org-name { font-size: 18pt; font-weight: 700; color: #1a7a47; letter-spacing: 1px; margin: 0; }
    .print-kop-text .org-sub  { font-size: 10pt; color: #555; margin: 2px 0 0; }
    .print-kop-text .org-address { font-size: 9pt; color: #777; margin: 3px 0 0; }
    .print-title-block { text-align: center; margin: 10px 0 14px; }
    .print-title-block h2 { font-size: 14pt; font-weight: 700; text-decoration: underline; text-transform: uppercase; margin: 0 0 4px; color: #000; }
    .print-title-block p { font-size: 10pt; margin: 2px 0; color: #333; }
    .print-info-row { display: flex; justify-content: space-between; font-size: 9.5pt; color: #444; margin-bottom: 12px; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 5px 0; }
    .print-table { width: 100%; border-collapse: collapse; font-size: 10pt; margin-bottom: 16px; page-break-inside: auto; }
    .print-table thead tr { background-color: #1a7a47 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; color: #fff; }
    .print-table thead th { padding: 7px 9px; text-align: left; font-weight: 700; border: 1px solid #1a7a47; color: #fff; }
    .print-table thead th.right { text-align: right; }
    .print-table tbody tr { page-break-inside: avoid; }
    .print-table tbody tr:nth-child(even) { background-color: #f5faf7 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .print-table tbody td { padding: 6px 9px; border: 1px solid #ccc; vertical-align: top; }
    .print-table tbody td.right { text-align: right; }
    .print-table tbody td.center { text-align: center; }
    .print-table .row-total td { background-color: #d4edda !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; font-weight: 700; border-top: 2px solid #1a7a47; }
    .print-table .row-total td.right { text-align: right; color: #1a7a47; }
    .print-table.koin-table thead tr { background-color: #6d28d9 !important; }
    .print-table.koin-table thead th { border-color: #6d28d9; }
    .print-table.koin-table .row-total td { background-color: #ede9fe !important; border-top-color: #6d28d9; }
    .print-table.koin-table .row-total td.right { color: #6d28d9; }
    .rekap-section-title { font-size: 12pt; font-weight: 700; color: #1a7a47; border-left: 4px solid #1a7a47; padding-left: 8px; margin: 20px 0 10px; page-break-after: avoid; }
    .rekap-section-title.koin { color: #6d28d9; border-color: #6d28d9; }
    .rekap-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 14px; }
    .rekap-sub-title { font-size: 10.5pt; font-weight: 700; margin-bottom: 6px; color: #333; }
    .rekap-detail-table { width: 100%; border-collapse: collapse; font-size: 10pt; }
    .rekap-detail-table td { padding: 5px 8px; border: 1px solid #ddd; }
    .rekap-detail-table td.right { text-align: right; }
    .rekap-detail-table .row-subtotal td { background: #eafaf1 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; font-weight: 700; border-top: 2px solid #1a7a47; }
    .rekap-detail-table .row-subtotal td.right { color: #1a7a47; }
    .rekap-detail-table .row-subtotal-keluar td { background: #fef0f0 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; font-weight: 700; border-top: 2px solid #c0392b; }
    .rekap-detail-table .row-subtotal-keluar td.right { color: #c0392b; }
    .rekap-detail-table .row-subtotal-koin td { background: #f3e8ff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; font-weight: 700; border-top: 2px solid #6d28d9; }
    .rekap-detail-table .row-subtotal-koin td.right { color: #6d28d9; }
    .saldo-box { margin: 8px 0 20px; border: 2px solid #1a7a47; border-radius: 6px; padding: 10px 16px; display: flex; justify-content: space-between; align-items: center; background: #eafaf1 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .saldo-box.beras { border-color: #c9a227; background: #fdf8e1 !important; }
    .saldo-box .saldo-label { font-size: 10pt; font-weight: 700; color: #333; }
    .saldo-box .saldo-value { font-size: 14pt; font-weight: 700; color: #1a7a47; }
    .saldo-box.beras .saldo-value { color: #c9a227; }
    .koin-cards-print { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin: 10px 0 16px; }
    .koin-card-print { border: 1.5px solid #c4b5fd; border-radius: 6px; padding: 8px 10px; text-align: center; }
    .koin-card-print.total { border-color: #6d28d9; }
    .koin-card-print .kcp-label { font-size: 8pt; color: #555; margin-bottom: 3px; }
    .koin-card-print .kcp-val { font-size: 9.5pt; font-weight: 700; color: #6d28d9; }
    .koin-card-print .kcp-sub { font-size: 7.5pt; color: #888; margin-top: 2px; }
    .print-summary-cards { display: grid; grid-template-columns: repeat(5,1fr); gap: 8px; margin-bottom: 16px; }
    .print-summary-card { border: 1.5px solid #ccc; border-radius: 6px; padding: 8px 10px; text-align: center; page-break-inside: avoid; }
    .print-summary-card .sc-label { font-size: 8pt; color: #555; margin-bottom: 3px; }
    .print-summary-card .sc-value { font-size: 9.5pt; font-weight: 700; color: #1a7a47; }
    .print-summary-card.red .sc-value { color: #c0392b; }
    .print-summary-card.gold .sc-value { color: #c9a227; }
    .print-summary-card.blue .sc-value { color: #2471a3; }
    .print-summary-card.purple .sc-value { color: #6d28d9; }
    .print-signature { display: flex; justify-content: space-between; margin-top: 40px; page-break-inside: avoid; }
    .sig-col { text-align: center; width: 40%; font-size: 10pt; line-height: 1.8; }
    .badge-print { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 8.5pt; font-weight: 600; border: 1px solid; }
    .badge-penyaluran { color: #c0392b; border-color: #c0392b; background: #fdf0f0 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .badge-operasional { color: #555; border-color: #aaa; background: #f5f5f5 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .badge-infaq { color: #2471a3; border-color: #2471a3; background: #eaf4fb !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .badge-shodaqoh { color: #7d3c98; border-color: #7d3c98; background: #f5eef8 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .badge-koin-nu { color: #6d28d9; border-color: #6d28d9; background: #ede9fe !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .no-print { display: none !important; }
    .print-only { display: block !important; }
    a { text-decoration: none; color: inherit; }
}
@media screen {
    .print-only { display: none; }
    #printable-area { display: none; }
}
</style>

<div class="lap-wrap no-print">

<div class="lap-page-header">
    <div class="page-title">
      <div class="icon-wrap"><i class="fas fa-chart-bar"></i></div>
      Laporan Keuangan
    </div>
    <button class="btn-print" onclick="printReport()">
      <i class="fas fa-print"></i> Cetak Laporan
    </button>
  </div>

<div class="filter-card">
    <div class="filter-title"><i class="fas fa-sliders-h"></i> Filter Laporan</div>
    <form method="GET">
      <div class="filter-row">
        <div class="filter-group">
          <label>Jenis Laporan</label>
          <select name="report_type" onchange="this.form.submit()">
            <option value="masuk"      <?= $report_type==='masuk'      ?'selected':'' ?>>📥 Laporan Zakat Masuk</option>
            <option value="penyaluran" <?= $report_type==='penyaluran' ?'selected':'' ?>>📤 Laporan Penyaluran</option>
            <option value="donasi"     <?= $report_type==='donasi'     ?'selected':'' ?>>💙 Laporan Donasi</option>
            <option value="koin_nu"    <?= $report_type==='koin_nu'    ?'selected':'' ?>>🪙 Laporan KOIN NU</option>
            <option value="rekap"      <?= $report_type==='rekap'      ?'selected':'' ?>>📊 Rekap Keseluruhan</option>
          </select>
        </div>
        <div class="filter-group">
          <label>Periode Dari</label>
          <input type="date" name="date_from" value="<?= htmlspecialchars($date_from) ?>">
        </div>
        <div class="filter-group">
          <label>Periode Sampai</label>
          <input type="date" name="date_to" value="<?= htmlspecialchars($date_to) ?>">
        </div>
        <button type="submit" class="btn-filter">
          <i class="fas fa-search"></i> Tampilkan
        </button>
      </div>
    </form>
  </div>

<div class="stat-grid">
    <div class="stat-tile green">
      <div class="st-icon"><i class="fas fa-mosque"></i></div>
      <div class="st-val"><?= formatRupiah($stats['total_zakat_periode']??0) ?></div>
      <div class="st-label">Zakat Uang · Periode</div>
    </div>
    <div class="stat-tile gold">
      <div class="st-icon"><i class="fas fa-hand-holding"></i></div>
      <div class="st-val"><?= formatRupiah($stats['total_penyaluran_periode']??0) ?></div>
      <div class="st-label">Pengeluaran · Periode</div>
    </div>
    <div class="stat-tile violet">
      <div class="st-icon"><i class="fas fa-hand-holding-heart"></i></div>
      <div class="st-val"><?= formatRupiah($total_koin_nu_periode) ?></div>
      <div class="st-label">KOIN NU · Periode</div>
    </div>
    <div class="stat-tile red">
      <div class="st-icon"><i class="fas fa-balance-scale"></i></div>
      <div class="st-val"><?= formatRupiah($stats['saldo_akhir_uang']??0) ?></div>
      <div class="st-label">Saldo Uang Akhir</div>
    </div>
    <div class="stat-tile blue">
      <div class="st-icon"><i class="fas fa-box"></i></div>
      <div class="st-val"><?= rtrim(rtrim(number_format($stats['saldo_akhir_beras']??0,2,',','.'), '0'), ',') ?> Kg</div>
      <div class="st-label">Saldo Beras Akhir</div>
    </div>
  </div>

<div class="charts-row">
    <div class="chart-card">
      <div class="chart-hd">
        <h3>Grafik Bulanan</h3>
        <span class="badge-year">Tahun <?= date('Y') ?></span>
      </div>
      <div class="chart-body"><canvas id="chartBulanan"></canvas></div>
    </div>
    <div class="chart-card">
      <div class="chart-hd">
        <h3>Komposisi Dana</h3>
        <span class="badge-year">Periode Ini</span>
      </div>
      <div class="chart-body"><canvas id="chartKomposisi"></canvas></div>
    </div>
  </div>

<div class="report-card" id="report-masuk" style="<?= $report_type==='masuk'?'':'display:none' ?>">
    <div class="rcard-hd">
      <div class="rcard-title">
        <span class="dot" style="background:var(--g-main)"></span>
        <i class="fas fa-arrow-circle-down" style="color:var(--g-main)"></i>
        Laporan Zakat Masuk
      </div>
      <span class="rcard-period"><?= date('d M Y',strtotime($date_from)) ?> — <?= date('d M Y',strtotime($date_to)) ?></span>
    </div>
    <div class="rcard-body">
      <div class="lap-table-wrap">
        <table class="lap-table">
          <thead>
            <tr>
              <th class="c">#</th>
              <th>Nama Muzakki</th>
              <th>Keterangan</th>
              <th class="r">Jumlah</th>
              <th>Tanggal</th>
              <th class="c">Oleh</th>
            </tr>
          </thead>
          <tbody>
            <?php if(empty($laporan_masuk)): ?>
            <tr><td colspan="6"><div class="empty-state"><i class="fas fa-inbox"></i><p>Tidak ada data zakat masuk pada periode ini.</p></div></td></tr>
            <?php else: foreach($laporan_masuk as $i=>$m): $is_b=(strpos($m['keterangan'],'Zakat Fitrah')===0); ?>
            <tr>
              <td class="row-no c"><?= $i+1 ?></td>
              <td class="name-cell"><?= htmlspecialchars($m['nama']) ?></td>
              <td style="color:var(--gray-600);font-size:12.5px"><?= htmlspecialchars($m['keterangan']) ?></td>
              <td class="r nominal-cell <?= $is_b ? 'gold' : 'green' ?>">
                <?= $is_b ? rtrim(rtrim(number_format((float)$m['nominal'],2,',','.'), '0'), ',').' Kg' : formatRupiah($m['nominal']) ?>
              </td>
              <td class="date-cell"><?= date('d M Y',strtotime($m['tanggal'])) ?></td>
              <td class="c"><span class="lapbadge gray">Admin</span></td>
            </tr>
            <?php endforeach;
            echo '<tr class="row-total"><td colspan="3" class="r" style="color:var(--gray-600);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.5px">Total Periode</td><td class="r"><span style="color:var(--g-main);font-family:var(--font-mono);font-weight:800">'.formatRupiah($total_masuk_uang).'</span><br><small style="color:var(--gold);font-weight:700">'.rtrim(rtrim(number_format($total_masuk_beras,2,',','.'), '0'), ',').' Kg</small></td><td colspan="2"></td></tr>';
            endif; ?>
          </tbody>
        </table>
      </div>
    </div>
    <div class="signature-block">
      <div class="sig-col">
        <p>Mengetahui,<br><strong>Ketua UPZIS PRNU Mliwang</strong></p>
        <br><br>
        <p>(_________________________)</p>
      </div>
      <div class="sig-col">
        <p>Mliwang, <?= date('d M Y') ?><br><strong>Bendahara</strong></p>
        <br><br>
        <p>(_________________________)</p>
      </div>
    </div>
  </div>

<div class="report-card" id="report-penyaluran" style="<?= $report_type==='penyaluran'?'':'display:none' ?>">
    <div class="rcard-hd">
      <div class="rcard-title">
        <span class="dot" style="background:var(--red)"></span>
        <i class="fas fa-arrow-circle-up" style="color:var(--red)"></i>
        Laporan Pengeluaran
      </div>
      <span class="rcard-period"><?= date('d M Y',strtotime($date_from)) ?> — <?= date('d M Y',strtotime($date_to)) ?></span>
    </div>
    <div class="rcard-body">
      <div class="lap-table-wrap">
        <table class="lap-table">
          <thead>
            <tr>
              <th class="c">#</th>
              <th>Penerima / Deskripsi</th>
              <th>Jenis</th>
              <th>Keterangan</th>
              <th class="r">Jumlah</th>
              <th>Tanggal</th>
            </tr>
          </thead>
          <tbody>
            <?php if(empty($laporan_penyaluran)): ?>
            <tr><td colspan="6"><div class="empty-state"><i class="fas fa-inbox"></i><p>Tidak ada data penyaluran pada periode ini.</p></div></td></tr>
            <?php else: foreach($laporan_penyaluran as $i=>$m): $is_b=($m['jenis']==='penyaluran'&&strpos(strtolower($m['keterangan']??''),'beras')!==false); ?>
            <tr>
              <td class="row-no c"><?= $i+1 ?></td>
              <td class="name-cell"><?= htmlspecialchars($m['nama']) ?></td>
              <td><?= $m['jenis']==='operasional_keluar' ? '<span class="lapbadge gray">Operasional</span>' : '<span class="lapbadge red">Penyaluran</span>' ?></td>
              <td style="color:var(--gray-600);font-size:12.5px"><?= htmlspecialchars($m['keterangan']) ?></td>
              <td class="r nominal-cell <?= $is_b ? 'gold' : 'red' ?>">
                <?= $is_b ? rtrim(rtrim(number_format((float)$m['nominal'],2,',','.'), '0'), ',').' Kg' : formatRupiah($m['nominal']) ?>
              </td>
              <td class="date-cell"><?= date('d M Y',strtotime($m['tanggal'])) ?></td>
            </tr>
            <?php endforeach;
            echo '<tr class="row-total"><td colspan="4" class="r" style="color:var(--gray-600);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.5px">Total Periode</td><td class="r"><span style="color:var(--red);font-family:var(--font-mono);font-weight:800">'.formatRupiah($total_penyaluran_uang+$total_operasional_uang).'</span><br><small style="color:var(--gold);font-weight:700">'.rtrim(rtrim(number_format($total_penyaluran_beras,2,',','.'), '0'), ',').' Kg</small></td><td></td></tr>';
            endif; ?>
          </tbody>
        </table>
      </div>
    </div>
    <div class="signature-block">
      <div class="sig-col"><p>Mengetahui,<br><strong>Ketua UPZIS PRNU Mliwang</strong></p><br><br><p>(_________________________)</p></div>
      <div class="sig-col"><p>Mliwang, <?= date('d M Y') ?><br><strong>Bendahara</strong></p><br><br><p>(_________________________)</p></div>
    </div>
  </div>

<div class="report-card" id="report-donasi" style="<?= $report_type==='donasi'?'':'display:none' ?>">
    <div class="rcard-hd">
      <div class="rcard-title">
        <span class="dot" style="background:var(--blue)"></span>
        <i class="fas fa-donate" style="color:var(--blue)"></i>
        Laporan Donasi (Infaq &amp; Shodaqoh)
      </div>
      <span class="rcard-period"><?= date('d M Y',strtotime($date_from)) ?> — <?= date('d M Y',strtotime($date_to)) ?></span>
    </div>
    <div class="rcard-body">
      <div class="lap-table-wrap">
        <table class="lap-table">
          <thead>
            <tr>
              <th class="c">#</th>
              <th>Nama Donatur</th>
              <th>Jenis</th>
              <th class="r">Nominal</th>
              <th>Tanggal</th>
            </tr>
          </thead>
          <tbody>
            <?php if(empty($laporan_donasi)): ?>
            <tr><td colspan="5"><div class="empty-state"><i class="fas fa-inbox"></i><p>Tidak ada data donasi pada periode ini.</p></div></td></tr>
            <?php else: foreach($laporan_donasi as $i=>$d): ?>
            <tr>
              <td class="row-no c"><?= $i+1 ?></td>
              <td class="name-cell"><?= htmlspecialchars($d['nama']) ?></td>
              <td>
                <?php if($d['jenis']==='infaq_masuk'): ?>
                  <span class="lapbadge blue">Infaq</span>
                <?php else: ?>
                  <span class="lapbadge violet">Shodaqoh</span>
                <?php endif; ?>
              </td>
              <td class="r nominal-cell blue"><?= formatRupiah($d['nominal']) ?></td>
              <td class="date-cell"><?= date('d M Y',strtotime($d['tanggal'])) ?></td>
            </tr>
            <?php endforeach;
            echo '<tr class="row-total"><td colspan="3" class="r" style="color:var(--gray-600);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.5px">Total</td><td class="r"><span style="color:var(--blue);font-family:var(--font-mono);font-weight:800">'.formatRupiah($total_donasi).'</span></td><td></td></tr>';
            endif; ?>
          </tbody>
        </table>
      </div>
    </div>
    <div class="signature-block">
      <div class="sig-col"><p>Mengetahui,<br><strong>Ketua UPZIS PRNU Mliwang</strong></p><br><br><p>(_________________________)</p></div>
      <div class="sig-col"><p>Mliwang, <?= date('d M Y') ?><br><strong>Bendahara</strong></p><br><br><p>(_________________________)</p></div>
    </div>
  </div>

<div class="report-card" id="report-koin-nu" style="<?= $report_type==='koin_nu'?'':'display:none' ?>">
    <div class="rcard-hd">
      <div class="rcard-title">
        <span class="dot" style="background:var(--violet)"></span>
        <i class="fas fa-hand-holding-heart" style="color:var(--violet)"></i>
        Laporan KOIN NU (Infaq &amp; Shodaqoh)
      </div>
      <span class="rcard-period"><?= date('d M Y',strtotime($date_from)) ?> — <?= date('d M Y',strtotime($date_to)) ?></span>
    </div>

<div class="koin-summary-grid">
      <?php
      $jml_koin_periode = count(array_filter($laporan_koin_nu, fn($r) => $r['jenis']==='koin_nu_masuk'));
      $jml_inf_periode  = count(array_filter($laporan_koin_nu, fn($r) => $r['jenis']==='infaq_masuk'));
      $jml_shod_periode = count(array_filter($laporan_koin_nu, fn($r) => $r['jenis']==='shodaqoh_masuk'));
      ?>
      <div class="koin-mini-card">
        <div class="kmc-emoji">🪙</div>
        <div class="kmc-label">KOIN NU Masuk</div>
        <div class="kmc-val"><?= formatRupiah($total_koin_nu_masuk_periode) ?></div>
        <div class="kmc-sub"><?= $jml_koin_periode ?> transaksi</div>
      </div>
      <div class="koin-mini-card">
        <div class="kmc-emoji">🤲</div>
        <div class="kmc-label">Infaq</div>
        <div class="kmc-val"><?= formatRupiah($total_infaq_periode) ?></div>
        <div class="kmc-sub"><?= $jml_inf_periode ?> transaksi</div>
      </div>
      <div class="koin-mini-card">
        <div class="kmc-emoji">💝</div>
        <div class="kmc-label">Shodaqoh</div>
        <div class="kmc-val" style="color:#be185d"><?= formatRupiah($total_shodaqoh_periode) ?></div>
        <div class="kmc-sub"><?= $jml_shod_periode ?> transaksi</div>
      </div>
      <div class="koin-mini-card total">
        <div class="kmc-emoji">💰</div>
        <div class="kmc-label">Total KOIN NU</div>
        <div class="kmc-val"><?= formatRupiah($total_koin_nu_periode) ?></div>
        <div class="kmc-sub" style="color:var(--violet);font-weight:600">All-time: <?= formatRupiah($total_koin_nu_all) ?></div>
      </div>
    </div>

<div class="rcard-body">
      <div class="lap-table-wrap">
        <table class="lap-table koin">
          <thead>
            <tr>
              <th class="c">#</th>
              <th>Nama / Donatur</th>
              <th>Jenis</th>
              <th>Keterangan</th>
              <th>Tanggal</th>
              <th class="r">Jumlah</th>
            </tr>
          </thead>
          <tbody>
            <?php if(empty($laporan_koin_nu)): ?>
            <tr><td colspan="6"><div class="empty-state"><i class="fas fa-inbox"></i><p>Tidak ada transaksi KOIN NU pada periode ini.</p></div></td></tr>
            <?php else:
              foreach($laporan_koin_nu as $i=>$k):
                $bmap = [
                  'koin_nu_masuk'  => ['label'=>'KOIN NU',  'cls'=>'violet'],
                  'infaq_masuk'    => ['label'=>'Infaq',    'cls'=>'blue'],
                  'shodaqoh_masuk' => ['label'=>'Shodaqoh', 'cls'=>'pink'],
                ];
                $b = $bmap[$k['jenis']] ?? ['label'=>$k['jenis'],'cls'=>'gray'];
            ?>
            <tr>
              <td class="row-no c"><?= $i+1 ?></td>
              <td class="name-cell"><?= htmlspecialchars($k['nama'] ?: 'Anonim') ?></td>
              <td><span class="lapbadge <?= $b['cls'] ?>"><?= $b['label'] ?></span></td>
              <td style="color:var(--gray-600);font-size:12.5px"><?= htmlspecialchars($k['keterangan'] ?: '—') ?></td>
              <td class="date-cell"><?= date('d M Y',strtotime($k['tanggal'])) ?></td>
              <td class="r nominal-cell violet"><?= formatRupiah($k['nominal']) ?></td>
            </tr>
            <?php endforeach;
            echo '<tr class="row-total"><td colspan="5" class="r" style="color:var(--gray-600);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.5px">Total Periode</td><td class="r nominal-cell violet" style="font-size:15px">'.formatRupiah($total_koin_nu_periode).'</td></tr>';
            endif; ?>
          </tbody>
        </table>
      </div>
    </div>

<div class="koin-alltime-strip">
      <div class="koin-alltime-item">
        <div class="kai-label">KOIN NU Masuk · All-time</div>
        <div class="kai-val"><?= formatRupiah($total_koin_nu_masuk_all) ?></div>
        <div class="kai-count"><?= number_format($jml_koin_nu_masuk) ?> transaksi</div>
      </div>
      <div class="koin-alltime-item">
        <div class="kai-label">Infaq · All-time</div>
        <div class="kai-val"><?= formatRupiah($total_infaq_all) ?></div>
        <div class="kai-count"><?= number_format($jml_infaq) ?> transaksi</div>
      </div>
      <div class="koin-alltime-item">
        <div class="kai-label">Shodaqoh · All-time</div>
        <div class="kai-val" style="color:#be185d"><?= formatRupiah($total_shodaqoh_all) ?></div>
        <div class="kai-count"><?= number_format($jml_shodaqoh) ?> transaksi</div>
      </div>
      <div class="koin-alltime-item">
        <div class="kai-label">Total KOIN NU · All-time</div>
        <div class="kai-val"><?= formatRupiah($total_koin_nu_all) ?></div>
        <div class="kai-count" style="color:var(--violet);font-weight:600">Bulan ini: <?= formatRupiah($koin_nu_bulan_ini) ?></div>
      </div>
    </div>

<div class="signature-block">
      <div class="sig-col"><p>Mengetahui,<br><strong>Ketua UPZIS PRNU Mliwang</strong></p><br><br><p>(_________________________)</p></div>
      <div class="sig-col"><p>Mliwang, <?= date('d M Y') ?><br><strong>Bendahara</strong></p><br><br><p>(_________________________)</p></div>
    </div>
  </div>

<div class="report-card" id="report-rekap" style="<?= $report_type==='rekap'?'':'display:none' ?>">
    <div class="rcard-hd">
      <div class="rcard-title">
        <span class="dot" style="background:var(--g-main)"></span>
        <i class="fas fa-table" style="color:var(--g-main)"></i>
        Rekap Keseluruhan
      </div>
      <span class="rcard-period"><?= date('d M Y',strtotime($date_from)) ?> — <?= date('d M Y',strtotime($date_to)) ?></span>
    </div>

<div class="rekap-tab-nav">
      <button class="rtab-btn active" data-tab="uang" onclick="switchRekapTab('uang',this)">
        <i class="fas fa-money-bill-wave"></i> Uang
      </button>
      <button class="rtab-btn" data-tab="koin" onclick="switchRekapTab('koin',this)">
        <i class="fas fa-hand-holding-heart"></i> KOIN NU
      </button>
      <button class="rtab-btn" data-tab="beras" onclick="switchRekapTab('beras',this)">
        <i class="fas fa-seedling"></i> Beras
      </button>
      <button class="rtab-btn" data-tab="ringkasan" onclick="switchRekapTab('ringkasan',this)">
        <i class="fas fa-list-alt"></i> Ringkasan
      </button>
      
      <div class="rtab-dots">
        <span class="rtab-dot active" data-tab="uang"     onclick="switchRekapTab('uang',null)"></span>
        <span class="rtab-dot"        data-tab="koin"     onclick="switchRekapTab('koin',null)"></span>
        <span class="rtab-dot"        data-tab="beras"    onclick="switchRekapTab('beras',null)"></span>
        <span class="rtab-dot"        data-tab="ringkasan" onclick="switchRekapTab('ringkasan',null)"></span>
      </div>
    </div>

<div class="rekap-slides">

<div class="rekap-slide active" id="rtab-uang">
        <div class="rekap-body">
          <div class="rekap-section-label" style="color:var(--g-main)"><span></span> Rekapitulasi Uang (Rp)</div>
          <div class="rekap-two-col">
            <div>
              <div class="rekap-sub-label" style="color:var(--g-main)">📈 Pemasukan</div>
              <table class="rekap-mini-table">
                <tr><td>Zakat (Uang)</td><td style="color:var(--g-main)"><?= formatRupiah($total_masuk_uang) ?></td></tr>
                <tr><td>KOIN NU (Infaq / Shodaqoh)</td><td style="color:var(--violet)"><?= formatRupiah($total_koin_nu_periode) ?></td></tr>
                <tr class="subtotal-row"><td><strong>Total Pemasukan</strong></td><td><strong><?= formatRupiah($total_masuk_uang+$total_koin_nu_periode) ?></strong></td></tr>
              </table>
            </div>
            <div>
              <div class="rekap-sub-label" style="color:var(--red)">📉 Pengeluaran</div>
              <table class="rekap-mini-table">
                <tr><td>Penyaluran (Uang)</td><td style="color:var(--red)"><?= formatRupiah($total_penyaluran_uang) ?></td></tr>
                <tr><td>Operasional</td><td style="color:var(--red)"><?= formatRupiah($total_operasional_uang) ?></td></tr>
                <tr class="subtotal-row red"><td><strong>Total Pengeluaran</strong></td><td><strong><?= formatRupiah($total_penyaluran_uang+$total_operasional_uang) ?></strong></td></tr>
              </table>
            </div>
          </div>
          <div class="saldo-banner green">
            <span class="sb-label">💵 Saldo Uang Periode Ini</span>
            <span class="sb-val"><?= formatRupiah(($total_masuk_uang+$total_koin_nu_periode)-($total_penyaluran_uang+$total_operasional_uang)) ?></span>
          </div>
          
          <div class="rekap-flow-row">
            <div class="rekap-flow-card green">
              <div class="rfc-label">Total Masuk</div>
              <div class="rfc-val"><?= formatRupiah($total_masuk_uang+$total_koin_nu_periode) ?></div>
            </div>
            <div class="rekap-flow-arrow">−</div>
            <div class="rekap-flow-card red">
              <div class="rfc-label">Total Keluar</div>
              <div class="rfc-val"><?= formatRupiah($total_penyaluran_uang+$total_operasional_uang) ?></div>
            </div>
            <div class="rekap-flow-arrow">=</div>
            <div class="rekap-flow-card <?= (($total_masuk_uang+$total_koin_nu_periode)-($total_penyaluran_uang+$total_operasional_uang))>=0?'green':'red' ?> bold">
              <div class="rfc-label">Saldo Bersih</div>
              <div class="rfc-val"><?= formatRupiah(($total_masuk_uang+$total_koin_nu_periode)-($total_penyaluran_uang+$total_operasional_uang)) ?></div>
            </div>
          </div>
        </div>
        <div class="rtab-footer">
          <span></span>
          <button class="rtab-nav-btn" onclick="switchRekapTab('koin',null)">KOIN NU <i class="fas fa-arrow-right"></i></button>
        </div>
      </div>

<div class="rekap-slide" id="rtab-koin">
        <div class="rekap-body">
          <div class="rekap-section-label" style="color:var(--violet)"><span style="background:var(--violet)"></span> Detail KOIN NU Periode Ini</div>
          
          <div class="rekap-koin-cards">
            <div class="rkc-item" style="border-color:#c4b5fd">
              <div class="rkc-icon">🪙</div>
              <div class="rkc-label">KOIN NU Masuk</div>
              <div class="rkc-val"><?= formatRupiah($total_koin_nu_masuk_periode) ?></div>
            </div>
            <div class="rkc-item" style="border-color:#bfdbfe">
              <div class="rkc-icon">🤲</div>
              <div class="rkc-label">Infaq</div>
              <div class="rkc-val" style="color:var(--blue)"><?= formatRupiah($total_infaq_periode) ?></div>
            </div>
            <div class="rkc-item" style="border-color:#fbcfe8">
              <div class="rkc-icon">💝</div>
              <div class="rkc-label">Shodaqoh</div>
              <div class="rkc-val" style="color:#be185d"><?= formatRupiah($total_shodaqoh_periode) ?></div>
            </div>
          </div>
          <div style="max-width:420px;margin-top:20px">
            <table class="rekap-mini-table">
              <tr><td>KOIN NU Masuk</td><td style="color:var(--violet)"><?= formatRupiah($total_koin_nu_masuk_periode) ?></td></tr>
              <tr><td>Infaq</td><td style="color:var(--blue)"><?= formatRupiah($total_infaq_periode) ?></td></tr>
              <tr><td>Shodaqoh</td><td style="color:#be185d"><?= formatRupiah($total_shodaqoh_periode) ?></td></tr>
              <tr class="subtotal-row violet"><td><strong>Total KOIN NU</strong></td><td><strong><?= formatRupiah($total_koin_nu_periode) ?></strong></td></tr>
            </table>
          </div>
          <div class="saldo-banner" style="background:var(--violet-pale);border:1.5px solid #c4b5fd;margin-top:16px">
            <span class="sb-label" style="color:#4c1d95">💜 Total KOIN NU Periode Ini</span>
            <span class="sb-val" style="color:var(--violet)"><?= formatRupiah($total_koin_nu_periode) ?></span>
          </div>
          <div style="margin-top:12px;font-size:12px;color:var(--gray-400);text-align:right">
            All-time: <strong style="color:var(--violet)"><?= formatRupiah($total_koin_nu_all) ?></strong>
          </div>
        </div>
        <div class="rtab-footer">
          <button class="rtab-nav-btn secondary" onclick="switchRekapTab('uang',null)"><i class="fas fa-arrow-left"></i> Uang</button>
          <button class="rtab-nav-btn" onclick="switchRekapTab('beras',null)">Beras <i class="fas fa-arrow-right"></i></button>
        </div>
      </div>

<div class="rekap-slide" id="rtab-beras">
        <div class="rekap-body">
          <div class="rekap-section-label" style="color:var(--gold)"><span style="background:var(--gold)"></span> Rekapitulasi Beras (Kg)</div>
          <div class="rekap-two-col">
            <div>
              <div class="rekap-sub-label" style="color:var(--g-main)">📈 Pemasukan</div>
              <table class="rekap-mini-table">
                <tr><td>Zakat Fitrah (Beras)</td><td style="color:var(--g-main)"><?= rtrim(rtrim(number_format($total_masuk_beras,2,',','.'), '0'), ',') ?> Kg</td></tr>
                <tr class="subtotal-row"><td><strong>Total Pemasukan</strong></td><td><strong><?= rtrim(rtrim(number_format($total_masuk_beras,2,',','.'), '0'), ',') ?> Kg</strong></td></tr>
              </table>
            </div>
            <div>
              <div class="rekap-sub-label" style="color:var(--red)">📉 Pengeluaran</div>
              <table class="rekap-mini-table">
                <tr><td>Penyaluran (Beras)</td><td style="color:var(--red)"><?= rtrim(rtrim(number_format($total_penyaluran_beras,2,',','.'), '0'), ',') ?> Kg</td></tr>
                <tr class="subtotal-row red"><td><strong>Total Pengeluaran</strong></td><td><strong><?= rtrim(rtrim(number_format($total_penyaluran_beras,2,',','.'), '0'), ',') ?> Kg</strong></td></tr>
              </table>
            </div>
          </div>
          <div class="saldo-banner gold">
            <span class="sb-label">🌾 Saldo Beras Periode Ini</span>
            <span class="sb-val"><?= rtrim(rtrim(number_format($total_masuk_beras-$total_penyaluran_beras,2,',','.'), '0'), ',') ?> Kg</span>
          </div>
          <div class="rekap-flow-row" style="margin-top:20px">
            <div class="rekap-flow-card green">
              <div class="rfc-label">Masuk</div>
              <div class="rfc-val"><?= rtrim(rtrim(number_format($total_masuk_beras,2,',','.'), '0'), ',') ?> Kg</div>
            </div>
            <div class="rekap-flow-arrow">−</div>
            <div class="rekap-flow-card red">
              <div class="rfc-label">Keluar</div>
              <div class="rfc-val"><?= rtrim(rtrim(number_format($total_penyaluran_beras,2,',','.'), '0'), ',') ?> Kg</div>
            </div>
            <div class="rekap-flow-arrow">=</div>
            <div class="rekap-flow-card gold bold">
              <div class="rfc-label">Saldo Beras</div>
              <div class="rfc-val"><?= rtrim(rtrim(number_format($total_masuk_beras-$total_penyaluran_beras,2,',','.'), '0'), ',') ?> Kg</div>
            </div>
          </div>
        </div>
        <div class="rtab-footer">
          <button class="rtab-nav-btn secondary" onclick="switchRekapTab('koin',null)"><i class="fas fa-arrow-left"></i> KOIN NU</button>
          <button class="rtab-nav-btn" onclick="switchRekapTab('ringkasan',null)">Ringkasan <i class="fas fa-arrow-right"></i></button>
        </div>
      </div>

<div class="rekap-slide" id="rtab-ringkasan">
        <div class="rekap-body">
          <div class="rekap-section-label" style="color:var(--gray-600)"><span style="background:var(--gray-600)"></span> Ringkasan Akhir Periode</div>
          <div class="lap-table-wrap">
            <table class="lap-table">
              <thead>
                <tr>
                  <th class="c" style="width:5%">No</th>
                  <th>Uraian</th>
                  <th class="r" style="width:28%">Nominal (Rp)</th>
                  <th class="r" style="width:18%">Beras (Kg)</th>
                </tr>
              </thead>
              <tbody>
                <tr style="background:var(--g-pale)"><td colspan="4" style="font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.6px;padding:10px 16px;color:var(--g-main)">PEMASUKAN</td></tr>
                <tr><td class="c row-no">1</td><td>Zakat Uang</td><td class="r mono" style="color:var(--g-main)"><?= formatRupiah($total_masuk_uang) ?></td><td class="r" style="color:var(--gray-400)">—</td></tr>
                <tr><td class="c row-no">2</td><td>Zakat Fitrah (Beras)</td><td class="r" style="color:var(--gray-400)">—</td><td class="r mono" style="color:var(--gold)"><?= rtrim(rtrim(number_format($total_masuk_beras,2,',','.'), '0'), ',') ?></td></tr>
                <tr><td class="c row-no">3</td><td>KOIN NU (Infaq / Shodaqoh)</td><td class="r mono" style="color:var(--violet)"><?= formatRupiah($total_koin_nu_periode) ?></td><td class="r" style="color:var(--gray-400)">—</td></tr>
                <tr class="row-total"><td colspan="2" style="text-transform:uppercase;font-size:12px;letter-spacing:.5px">Total Pemasukan</td><td class="r" style="color:var(--g-main);font-family:var(--font-mono)"><?= formatRupiah($total_masuk_uang+$total_koin_nu_periode) ?></td><td class="r" style="color:var(--gold);font-family:var(--font-mono)"><?= rtrim(rtrim(number_format($total_masuk_beras,2,',','.'), '0'), ',') ?></td></tr>
                <tr style="background:var(--red-pale)"><td colspan="4" style="font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.6px;padding:10px 16px;color:var(--red)">PENGELUARAN</td></tr>
                <tr><td class="c row-no">4</td><td>Penyaluran (Uang)</td><td class="r mono" style="color:var(--red)"><?= formatRupiah($total_penyaluran_uang) ?></td><td class="r" style="color:var(--gray-400)">—</td></tr>
                <tr><td class="c row-no">5</td><td>Penyaluran (Beras)</td><td class="r" style="color:var(--gray-400)">—</td><td class="r mono" style="color:var(--red)"><?= rtrim(rtrim(number_format($total_penyaluran_beras,2,',','.'), '0'), ',') ?></td></tr>
                <tr><td class="c row-no">6</td><td>Operasional</td><td class="r mono" style="color:var(--red)"><?= formatRupiah($total_operasional_uang) ?></td><td class="r" style="color:var(--gray-400)">—</td></tr>
                <tr class="row-total"><td colspan="2" style="text-transform:uppercase;font-size:12px;letter-spacing:.5px">Total Pengeluaran</td><td class="r" style="color:var(--red);font-family:var(--font-mono)"><?= formatRupiah($total_penyaluran_uang+$total_operasional_uang) ?></td><td class="r" style="color:var(--red);font-family:var(--font-mono)"><?= rtrim(rtrim(number_format($total_penyaluran_beras,2,',','.'), '0'), ',') ?></td></tr>
                <tr style="background:var(--g-light)">
                  <td colspan="2" style="font-weight:800;font-size:13px;color:var(--g-deep);text-transform:uppercase;letter-spacing:.5px;padding:14px 16px">Saldo Bersih Periode Ini</td>
                  <td class="r" style="font-weight:800;font-size:15px;color:var(--g-main);font-family:var(--font-mono);padding:14px 16px"><?= formatRupiah(($total_masuk_uang+$total_koin_nu_periode)-($total_penyaluran_uang+$total_operasional_uang)) ?></td>
                  <td class="r" style="font-weight:800;font-size:15px;color:var(--gold);font-family:var(--font-mono);padding:14px 16px"><?= rtrim(rtrim(number_format($total_masuk_beras-$total_penyaluran_beras,2,',','.'), '0'), ',') ?> Kg</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class="rtab-footer">
          <button class="rtab-nav-btn secondary" onclick="switchRekapTab('beras',null)"><i class="fas fa-arrow-left"></i> Beras</button>
          <span style="font-size:12px;color:var(--gray-400)">Selesai ✓</span>
        </div>
      </div>

</div>

</div>

<div id="printable-area">
<div class="print-document">
  <div class="print-kop">
    <?php if (!empty($settings['logo_path']) && file_exists($settings['logo_path'])): ?>
      <img src="<?= htmlspecialchars($settings['logo_path']) ?>" alt="Logo">
    <?php endif; ?>
    <div class="print-kop-text">
      <p class="org-name">UPZIS PRNU MLIWANG</p>
      <p class="org-sub">Unit Pengelola Zakat, Infaq dan Shodaqoh Nahdlatul Ulama</p>
      <p class="org-address">Desa Mliwang, Kecamatan Kerek, Kabupaten Tuban, Jawa Timur</p>
    </div>
  </div>
  <div class="print-title-block">
    <h2><?php
      switch($report_type){
        case 'masuk':      echo 'Laporan Zakat Masuk'; break;
        case 'penyaluran': echo 'Laporan Pengeluaran (Penyaluran & Operasional)'; break;
        case 'donasi':     echo 'Laporan Donasi (Infaq & Shodaqoh)'; break;
        case 'koin_nu':    echo 'Laporan KOIN NU (Infaq & Shodaqoh)'; break;
        case 'rekap':      echo 'Rekapitulasi Laporan Keuangan'; break;
      }
    ?></h2>
    <p>Periode: <?= date('d M Y',strtotime($date_from)) ?> s.d. <?= date('d M Y',strtotime($date_to)) ?></p>
  </div>
  <div class="print-info-row">
    <span>Dicetak: <?= date('d M Y, H:i') ?></span>
    <span>Saldo Uang: <?= formatRupiah($stats['saldo_akhir_uang']??0) ?></span>
    <span>Saldo Beras: <?= rtrim(rtrim(number_format($stats['saldo_akhir_beras']??0,2,',','.'), '0'), ',') ?> Kg</span>
  </div>
  <div class="print-summary-cards">
    <div class="print-summary-card"><div class="sc-label">Zakat Uang (Periode)</div><div class="sc-value"><?= formatRupiah($stats['total_zakat_periode']??0) ?></div></div>
    <div class="print-summary-card red"><div class="sc-label">Pengeluaran (Periode)</div><div class="sc-value"><?= formatRupiah($stats['total_penyaluran_periode']??0) ?></div></div>
    <div class="print-summary-card purple"><div class="sc-label">KOIN NU (Periode)</div><div class="sc-value"><?= formatRupiah($total_koin_nu_periode) ?></div></div>
    <div class="print-summary-card red"><div class="sc-label">Saldo Uang Akhir</div><div class="sc-value"><?= formatRupiah($stats['saldo_akhir_uang']??0) ?></div></div>
    <div class="print-summary-card gold"><div class="sc-label">Saldo Beras Akhir</div><div class="sc-value"><?= rtrim(rtrim(number_format($stats['saldo_akhir_beras']??0,2,',','.'), '0'), ',') ?> Kg</div></div>
  </div>

<?php if($report_type==='masuk'): ?>
  <table class="print-table">
    <thead><tr><th style="width:4%">#</th><th style="width:24%">Nama Muzakki</th><th>Keterangan</th><th class="right" style="width:20%">Jumlah</th><th style="width:12%">Tanggal</th><th style="width:10%">Oleh</th></tr></thead>
    <tbody>
      <?php if(empty($laporan_masuk)): ?><tr><td colspan="6" style="text-align:center;padding:12px">Tidak ada data.</td></tr>
      <?php else: foreach($laporan_masuk as $i=>$m): $ib=(strpos($m['keterangan'],'Zakat Fitrah')===0); ?>
      <tr><td class="center"><?= $i+1 ?></td><td><?= htmlspecialchars($m['nama']) ?></td><td><?= htmlspecialchars($m['keterangan']) ?></td><td class="right" style="font-weight:700"><?= $ib ? rtrim(rtrim(number_format((float)$m['nominal'],2,',','.'), '0'), ',').' Kg' : formatRupiah($m['nominal']) ?></td><td class="center"><?= date('d/m/Y',strtotime($m['tanggal'])) ?></td><td class="center">Admin</td></tr>
      <?php endforeach; ?>
      <tr class="row-total"><td colspan="3" style="text-align:right">TOTAL PERIODE</td><td class="right"><?= formatRupiah($total_masuk_uang) ?><br><small><?= rtrim(rtrim(number_format($total_masuk_beras,2,',','.'), '0'), ',') ?> Kg</small></td><td colspan="2"></td></tr>
      <?php endif; ?>
    </tbody>
  </table>
  <?php echo $signature_block; ?>

<?php elseif($report_type==='penyaluran'): ?>
  <table class="print-table">
    <thead><tr><th style="width:4%">#</th><th style="width:22%">Penerima</th><th style="width:13%">Jenis</th><th>Keterangan</th><th class="right" style="width:18%">Jumlah</th><th style="width:11%">Tanggal</th></tr></thead>
    <tbody>
      <?php if(empty($laporan_penyaluran)): ?><tr><td colspan="6" style="text-align:center;padding:12px">Tidak ada data.</td></tr>
      <?php else: foreach($laporan_penyaluran as $i=>$m): $ib=($m['jenis']==='penyaluran'&&strpos(strtolower($m['keterangan']??''),'beras')!==false); ?>
      <tr><td class="center"><?= $i+1 ?></td><td><?= htmlspecialchars($m['nama']) ?></td><td class="center"><?= $m['jenis']==='operasional_keluar'?'<span class="badge-print badge-operasional">Operasional</span>':'<span class="badge-print badge-penyaluran">Penyaluran</span>' ?></td><td><?= htmlspecialchars($m['keterangan']) ?></td><td class="right" style="font-weight:700"><?= $ib ? rtrim(rtrim(number_format((float)$m['nominal'],2,',','.'), '0'), ',').' Kg' : formatRupiah($m['nominal']) ?></td><td class="center"><?= date('d/m/Y',strtotime($m['tanggal'])) ?></td></tr>
      <?php endforeach; ?>
      <tr class="row-total"><td colspan="4" style="text-align:right">TOTAL PERIODE</td><td class="right"><?= formatRupiah($total_penyaluran_uang+$total_operasional_uang) ?><br><small><?= rtrim(rtrim(number_format($total_penyaluran_beras,2,',','.'), '0'), ',') ?> Kg</small></td><td></td></tr>
      <?php endif; ?>
    </tbody>
  </table>
  <?php echo $signature_block; ?>

<?php elseif($report_type==='donasi'): ?>
  <table class="print-table">
    <thead><tr><th style="width:4%">#</th><th style="width:30%">Nama Donatur</th><th style="width:15%">Jenis</th><th class="right" style="width:25%">Nominal</th><th style="width:14%">Tanggal</th></tr></thead>
    <tbody>
      <?php if(empty($laporan_donasi)): ?><tr><td colspan="5" style="text-align:center;padding:12px">Tidak ada data.</td></tr>
      <?php else: foreach($laporan_donasi as $i=>$d): ?>
      <tr><td class="center"><?= $i+1 ?></td><td><?= htmlspecialchars($d['nama']) ?></td><td class="center"><span class="badge-print <?= $d['jenis']==='infaq_masuk'?'badge-infaq':'badge-shodaqoh' ?>"><?= ucfirst(str_replace('_masuk','',$d['jenis'])) ?></span></td><td class="right" style="font-weight:700"><?= formatRupiah($d['nominal']) ?></td><td class="center"><?= date('d/m/Y',strtotime($d['tanggal'])) ?></td></tr>
      <?php endforeach; ?>
      <tr class="row-total"><td colspan="3" style="text-align:right">TOTAL</td><td class="right"><?= formatRupiah($total_donasi) ?></td><td></td></tr>
      <?php endif; ?>
    </tbody>
  </table>
  <?php echo $signature_block; ?>

<?php elseif($report_type==='koin_nu'): ?>
  <div class="koin-cards-print">
    <div class="koin-card-print"><div class="kcp-label">KOIN NU Masuk</div><div class="kcp-val"><?= formatRupiah($total_koin_nu_masuk_periode) ?></div><div class="kcp-sub">Periode ini</div></div>
    <div class="koin-card-print"><div class="kcp-label">Infaq</div><div class="kcp-val"><?= formatRupiah($total_infaq_periode) ?></div><div class="kcp-sub">Periode ini</div></div>
    <div class="koin-card-print"><div class="kcp-label">Shodaqoh</div><div class="kcp-val"><?= formatRupiah($total_shodaqoh_periode) ?></div><div class="kcp-sub">Periode ini</div></div>
    <div class="koin-card-print total"><div class="kcp-label">Total KOIN NU</div><div class="kcp-val"><?= formatRupiah($total_koin_nu_periode) ?></div><div class="kcp-sub">All-time: <?= formatRupiah($total_koin_nu_all) ?></div></div>
  </div>
  <table class="print-table koin-table">
    <thead><tr><th style="width:4%">#</th><th style="width:26%">Nama / Donatur</th><th style="width:13%">Jenis</th><th>Keterangan</th><th style="width:13%">Tanggal</th><th class="right" style="width:18%">Jumlah</th></tr></thead>
    <tbody>
      <?php if(empty($laporan_koin_nu)): ?><tr><td colspan="6" style="text-align:center;padding:12px">Tidak ada data KOIN NU pada periode ini.</td></tr>
      <?php else:
        $bPrint = ['koin_nu_masuk'=>'KOIN NU','infaq_masuk'=>'Infaq','shodaqoh_masuk'=>'Shodaqoh'];
        foreach($laporan_koin_nu as $i=>$k):
          $bLabel = $bPrint[$k['jenis']] ?? $k['jenis'];
          $bClass = $k['jenis']==='shodaqoh_masuk' ? 'badge-shodaqoh' : ($k['jenis']==='infaq_masuk' ? 'badge-infaq' : 'badge-koin-nu');
      ?>
      <tr><td class="center"><?= $i+1 ?></td><td><?= htmlspecialchars($k['nama'] ?: 'Anonim') ?></td><td class="center"><span class="badge-print <?= $bClass ?>"><?= $bLabel ?></span></td><td><?= htmlspecialchars($k['keterangan'] ?: '—') ?></td><td class="center"><?= date('d/m/Y',strtotime($k['tanggal'])) ?></td><td class="right" style="font-weight:700"><?= formatRupiah($k['nominal']) ?></td></tr>
      <?php endforeach; ?>
      <tr class="row-total"><td colspan="5" style="text-align:right">TOTAL PERIODE</td><td class="right"><?= formatRupiah($total_koin_nu_periode) ?></td></tr>
      <?php endif; ?>
    </tbody>
  </table>
  <?php echo $signature_block; ?>

<?php elseif($report_type==='rekap'): ?>
  <div class="rekap-section-title">Rekapitulasi Uang (Rp)</div>
  <div class="rekap-two-col">
    <div>
      <div class="rekap-sub-title">PEMASUKAN</div>
      <table class="rekap-detail-table">
        <tr><td>Zakat (Uang)</td><td class="right"><?= formatRupiah($total_masuk_uang) ?></td></tr>
        <tr><td>KOIN NU (Infaq / Shodaqoh)</td><td class="right"><?= formatRupiah($total_koin_nu_periode) ?></td></tr>
        <tr class="row-subtotal"><td><strong>TOTAL PEMASUKAN</strong></td><td class="right"><strong><?= formatRupiah($total_masuk_uang+$total_koin_nu_periode) ?></strong></td></tr>
      </table>
    </div>
    <div>
      <div class="rekap-sub-title">PENGELUARAN</div>
      <table class="rekap-detail-table">
        <tr><td>Penyaluran (Uang)</td><td class="right"><?= formatRupiah($total_penyaluran_uang) ?></td></tr>
        <tr><td>Operasional</td><td class="right"><?= formatRupiah($total_operasional_uang) ?></td></tr>
        <tr class="row-subtotal-keluar"><td><strong>TOTAL PENGELUARAN</strong></td><td class="right"><strong><?= formatRupiah($total_penyaluran_uang+$total_operasional_uang) ?></strong></td></tr>
      </table>
    </div>
  </div>
  <div class="saldo-box"><span class="saldo-label">SALDO UANG PERIODE INI</span><span class="saldo-value"><?= formatRupiah(($total_masuk_uang+$total_koin_nu_periode)-($total_penyaluran_uang+$total_operasional_uang)) ?></span></div>
  <div class="rekap-section-title koin">Detail KOIN NU Periode Ini</div>
  <table class="rekap-detail-table" style="width:50%">
    <tr><td>KOIN NU Masuk</td><td class="right"><?= formatRupiah($total_koin_nu_masuk_periode) ?></td></tr>
    <tr><td>Infaq</td><td class="right"><?= formatRupiah($total_infaq_periode) ?></td></tr>
    <tr><td>Shodaqoh</td><td class="right"><?= formatRupiah($total_shodaqoh_periode) ?></td></tr>
    <tr class="row-subtotal-koin"><td><strong>TOTAL KOIN NU</strong></td><td class="right"><strong><?= formatRupiah($total_koin_nu_periode) ?></strong></td></tr>
  </table>
  <div class="rekap-section-title" style="color:#c9a227;border-color:#c9a227;margin-top:16px">Rekapitulasi Beras (Kg)</div>
  <div class="rekap-two-col">
    <div><div class="rekap-sub-title">PEMASUKAN</div><table class="rekap-detail-table"><tr><td>Zakat Fitrah (Beras)</td><td class="right"><?= rtrim(rtrim(number_format($total_masuk_beras,2,',','.'), '0'), ',') ?> Kg</td></tr><tr class="row-subtotal"><td><strong>TOTAL PEMASUKAN</strong></td><td class="right"><strong><?= rtrim(rtrim(number_format($total_masuk_beras,2,',','.'), '0'), ',') ?> Kg</strong></td></tr></table></div>
    <div><div class="rekap-sub-title">PENGELUARAN</div><table class="rekap-detail-table"><tr><td>Penyaluran (Beras)</td><td class="right"><?= rtrim(rtrim(number_format($total_penyaluran_beras,2,',','.'), '0'), ',') ?> Kg</td></tr><tr class="row-subtotal-keluar"><td><strong>TOTAL PENGELUARAN</strong></td><td class="right"><strong><?= rtrim(rtrim(number_format($total_penyaluran_beras,2,',','.'), '0'), ',') ?> Kg</strong></td></tr></table></div>
  </div>
  <div class="saldo-box beras"><span class="saldo-label">SALDO BERAS PERIODE INI</span><span class="saldo-value"><?= rtrim(rtrim(number_format($total_masuk_beras-$total_penyaluran_beras,2,',','.'), '0'), ',') ?> Kg</span></div>
  <div class="rekap-section-title" style="margin-top:16px">Ringkasan Akhir Periode</div>
  <table class="print-table">
    <thead><tr><th style="width:5%">No</th><th>Uraian</th><th class="right" style="width:25%">Nominal (Rp)</th><th class="right" style="width:15%">Beras (Kg)</th></tr></thead>
    <tbody>
      <tr><td colspan="4" style="font-weight:700;padding-left:8px;background:#e8f5e9;color:#1a7a47">PEMASUKAN</td></tr>
      <tr><td class="center">1</td><td>Zakat Uang</td><td class="right"><?= formatRupiah($total_masuk_uang) ?></td><td class="right">–</td></tr>
      <tr><td class="center">2</td><td>Zakat Fitrah (Beras)</td><td class="right">–</td><td class="right"><?= rtrim(rtrim(number_format($total_masuk_beras,2,',','.'), '0'), ',') ?></td></tr>
      <tr><td class="center">3</td><td>KOIN NU (Infaq / Shodaqoh)</td><td class="right"><?= formatRupiah($total_koin_nu_periode) ?></td><td class="right">–</td></tr>
      <tr class="row-total"><td colspan="2">TOTAL PEMASUKAN</td><td class="right"><?= formatRupiah($total_masuk_uang+$total_koin_nu_periode) ?></td><td class="right"><?= rtrim(rtrim(number_format($total_masuk_beras,2,',','.'), '0'), ',') ?></td></tr>
      <tr><td colspan="4" style="font-weight:700;padding-left:8px;background:#fef0f0;color:#c0392b">PENGELUARAN</td></tr>
      <tr><td class="center">4</td><td>Penyaluran (Uang)</td><td class="right"><?= formatRupiah($total_penyaluran_uang) ?></td><td class="right">–</td></tr>
      <tr><td class="center">5</td><td>Penyaluran (Beras)</td><td class="right">–</td><td class="right"><?= rtrim(rtrim(number_format($total_penyaluran_beras,2,',','.'), '0'), ',') ?></td></tr>
      <tr><td class="center">6</td><td>Operasional</td><td class="right"><?= formatRupiah($total_operasional_uang) ?></td><td class="right">–</td></tr>
      <tr class="row-total"><td colspan="2">TOTAL PENGELUARAN</td><td class="right"><?= formatRupiah($total_penyaluran_uang+$total_operasional_uang) ?></td><td class="right"><?= rtrim(rtrim(number_format($total_penyaluran_beras,2,',','.'), '0'), ',') ?></td></tr>
      <tr style="background:#d4edda"><td colspan="2" style="font-weight:700;font-size:11pt;color:#1a7a47">SALDO BERSIH PERIODE INI</td><td class="right" style="font-weight:700;font-size:12pt;color:#1a7a47"><?= formatRupiah(($total_masuk_uang+$total_koin_nu_periode)-($total_penyaluran_uang+$total_operasional_uang)) ?></td><td class="right" style="font-weight:700;font-size:12pt;color:#c9a227"><?= rtrim(rtrim(number_format($total_masuk_beras-$total_penyaluran_beras,2,',','.'), '0'), ',') ?> Kg</td></tr>
    </tbody>
  </table>
  <?php echo $signature_block; ?>
  <?php endif; ?>

</div>
</div>

function switchRekapTab(tabId, btnEl) {
    const oldIdx = tabOrder.indexOf(currentRekapTab);
    const newIdx = tabOrder.indexOf(tabId);
    const fromLeft = newIdx < oldIdx;

// Hide all slides
    document.querySelectorAll('.rekap-slide').forEach(s => {
        s.classList.remove('active','from-left');
    });
    // Show target
    const target = document.getElementById('rtab-' + tabId);
    if (fromLeft) target.classList.add('from-left');
    target.classList.add('active');

// Update tab buttons
    document.querySelectorAll('.rtab-btn').forEach(b => b.classList.remove('active'));
    const activeBtn = document.querySelector(`.rtab-btn[data-tab="${tabId}"]`);
    if (activeBtn) activeBtn.classList.add('active');

// Update dots
    document.querySelectorAll('.rtab-dot').forEach(d => d.classList.remove('active'));
    const activeDot = document.querySelector(`.rtab-dot[data-tab="${tabId}"]`);
    if (activeDot) activeDot.classList.add('active');

currentRekapTab = tabId;
}

function printReport() {
    var pa = document.getElementById('printable-area');
    pa.style.display = 'block';
    window.print();
    pa.style.display = 'none';
}

// Chart Bulanan
const ctx1 = document.getElementById('chartBulanan').getContext('2d');
new Chart(ctx1, {
    type: 'bar',
    data: {
        labels: <?= json_encode($chart_data['labels']) ?>,
        datasets: [
            { label: 'Zakat Masuk', data: <?= json_encode($chart_data['zakat']) ?>,
              backgroundColor: 'rgba(22,163,74,.85)', borderRadius: 6, borderSkipped: false },
            { label: 'KOIN NU',     data: <?= json_encode($chart_data['koin_nu']) ?>,
              backgroundColor: 'rgba(124,58,237,.8)', borderRadius: 6, borderSkipped: false },
            { label: 'Pengeluaran', data: <?= json_encode($chart_data['penyaluran']) ?>,
              backgroundColor: 'rgba(217,119,6,.8)',  borderRadius: 6, borderSkipped: false }
        ]
    },
    options: {
        responsive: true, maintainAspectRatio: false,
        plugins: {
            legend: { position: 'bottom', labels: { usePointStyle: true, pointStyle: 'circle', boxWidth: 8, padding: 16, font: { family: 'Plus Jakarta Sans', size: 12 } } },
            tooltip: { callbacks: { label: c => ' ' + c.dataset.label + ': ' + new Intl.NumberFormat('id-ID',{style:'currency',currency:'IDR',minimumFractionDigits:0}).format(c.parsed.y) } }
        },
        scales: {
            y: { grid: { color: 'rgba(0,0,0,.05)' }, ticks: { callback: v => 'Rp '+(v>=1000000?(v/1000000).toFixed(1)+'jt':(v/1000).toFixed(0)+'rb'), font: { size: 11 } }, border: { display: false } },
            x: { grid: { display: false }, ticks: { font: { size: 11 } }, border: { display: false } }
        }
    }
});

// Chart Komposisi
const ctx2 = document.getElementById('chartKomposisi').getContext('2d');
new Chart(ctx2, {
    type: 'doughnut',
    data: {
        labels: <?= json_encode($composition_data['labels']) ?>,
        datasets: [{ data: <?= json_encode($composition_data['values']) ?>,
          backgroundColor: ['#16a34a','#7c3aed','#2563eb','#be185d'],
          borderWidth: 3, borderColor: '#fff', hoverBorderWidth: 4 }]
    },
    options: {
        responsive: true, maintainAspectRatio: false, cutout: '62%',
        plugins: {
            legend: { position: 'bottom', labels: { usePointStyle: true, pointStyle: 'circle', boxWidth: 8, padding: 14, font: { family: 'Plus Jakarta Sans', size: 12 } } },
            tooltip: { callbacks: { label: c => ' ' + c.label + ': ' + new Intl.NumberFormat('id-ID',{style:'currency',currency:'IDR',minimumFractionDigits:0}).format(c.parsed) } }
        }
    }
});
</script>

<?php include 'includes/footer.php'; ?>

❌ Cancel

🗂️ Enhanced PHP File Manager

📊 Server Information

🔧 Quick Actions

✏️ Editing: laporan.php

📤 Upload File

📁 Create Folder

📄 Create File

✏️ Rename Item

🗑️ Delete Confirmation