D1041231092-webgis-povertymap/app/views/dinsos/kinerja.php

<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:20px">
  <div>
    <h2 style="font-size:1.2rem;font-weight:700">🏆 Kinerja Rumah Ibadah</h2>
    <p class="text-muted text-sm">Monitoring efektivitas penyaluran bantuan oleh seluruh rumah ibadah</p>
  </div>
</div>

<!-- Summary Cards -->
<div class="stats-grid" style="grid-template-columns:repeat(4,1fr);margin-bottom:20px">
  <?php
  $totalBantuan = array_sum(array_column($data,'jml_bantuan'));
  $totalWarga   = array_sum(array_column($data,'jml_warga'));
  $aktif        = count(array_filter($data, fn($d)=>$d['jml_bantuan']>0));
  ?>
  <div class="stat-card"><div class="stat-card-icon green">⛪</div>
    <div class="stat-card-body"><div class="stat-card-value"><?= count($data) ?></div><div class="stat-card-label">Total Rumah Ibadah</div></div>
  </div>
  <div class="stat-card"><div class="stat-card-icon blue">✅</div>
    <div class="stat-card-body"><div class="stat-card-value"><?= $aktif ?></div><div class="stat-card-label">Aktif Menyalurkan</div></div>
  </div>
  <div class="stat-card"><div class="stat-card-icon teal">📦</div>
    <div class="stat-card-body"><div class="stat-card-value"><?= number_format($totalBantuan) ?></div><div class="stat-card-label">Total Bantuan</div></div>
  </div>
  <div class="stat-card"><div class="stat-card-icon orange">👥</div>
    <div class="stat-card-body"><div class="stat-card-value"><?= number_format($totalWarga) ?></div><div class="stat-card-label">Total Warga Binaan</div></div>
  </div>
</div>

<!-- Charts + Table -->
<div style="display:grid;grid-template-columns:1fr 300px;gap:20px;margin-bottom:20px">
  <!-- Bar chart -->
  <div class="card">
    <div class="card-header"><span class="card-icon">📊</span><h3>Ranking Bantuan per Rumah Ibadah (Top 10)</h3></div>
    <div class="card-body"><div class="chart-wrap" style="height:300px"><canvas id="chart-kinerja"></canvas></div></div>
  </div>

  <!-- Donut: aktif vs tidak -->
  <div class="card">
    <div class="card-header"><span class="card-icon">🥧</span><h3>Status Partisipasi</h3></div>
    <div class="card-body"><div class="chart-wrap" style="height:200px"><canvas id="chart-partisipasi"></canvas></div>
      <div style="text-align:center;margin-top:12px">
        <div style="font-size:0.8rem;color:var(--clr-text-muted)">
          <span style="color:#16a34a;font-weight:700"><?= $aktif ?></span> aktif &nbsp;|&nbsp;
          <span style="color:#dc2626;font-weight:700"><?= count($data)-$aktif ?></span> belum aktif
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Tabel lengkap -->
<div class="card">
  <div class="card-header"><span class="card-icon">📋</span><h3>Detail Kinerja Semua Rumah Ibadah</h3></div>
  <div class="card-body no-pad">
    <div class="filters-bar" style="margin:0;border:none;border-bottom:1px solid var(--clr-border);border-radius:0">
      <input type="text" id="search-kinerja" class="form-control" placeholder="🔍 Cari nama rumah ibadah..." style="max-width:280px">
    </div>
    <div class="table-wrap">
      <table id="table-kinerja">
        <thead>
          <tr><th>#</th><th>Nama</th><th>Jenis</th><th>Wilayah</th><th>Warga Binaan</th><th>Bantuan Disalurkan</th><th>Miskin Ekstrem</th><th>Bantuan Terakhir</th><th>Status</th></tr>
        </thead>
        <tbody>
          <?php foreach($data as $i=>$r): ?>
          <tr>
            <td class="text-xs text-muted"><?= $i+1 ?></td>
            <td>
              <div style="font-weight:600;font-size:0.875rem"><?= e($r['nama']) ?></div>
              <div class="text-xs text-muted">Radius: <?= number_format($r['radius_meter']) ?>m</div>
            </td>
            <td><span class="badge badge-green"><?= e($r['jenis']) ?></span></td>
            <td class="text-sm"><?= e($r['kecamatan']) ?> › <?= e($r['kelurahan']) ?></td>
            <td class="text-sm text-center"><strong><?= number_format($r['jml_warga']) ?></strong></td>
            <td>
              <div style="display:flex;align-items:center;gap:8px">
                <strong style="color:var(--clr-success)"><?= number_format($r['jml_bantuan']) ?></strong>
                <div class="priority-bar" style="width:60px">
                  <?php $mx=max(array_column($data,'jml_bantuan')?:[1]); ?>
                  <div class="priority-bar-fill low" style="width:<?= $mx>0?round($r['jml_bantuan']/$mx*100):0 ?>%"></div>
                </div>
              </div>
            </td>
            <td class="text-sm text-center">
              <?php if($r['jml_ekstrem']>0): ?>
              <span class="badge badge-red"><?= number_format($r['jml_ekstrem']) ?></span>
              <?php else: ?><span class="text-muted">—</span><?php endif; ?>
            </td>
            <td class="text-xs text-muted"><?= $r['bantuan_terakhir'] ? formatTanggal($r['bantuan_terakhir']) : '—' ?></td>
            <td>
              <?php if($r['jml_bantuan']>0): ?>
              <span class="badge badge-green">✅ Aktif</span>
              <?php elseif($r['jml_warga']>0): ?>
              <span class="badge badge-yellow">⏳ Ada Binaan</span>
              <?php else: ?>
              <span class="badge badge-gray">—</span>
              <?php endif; ?>
            </td>
          </tr>
          <?php endforeach; ?>
        </tbody>
      </table>
    </div>
  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
  App.initTableSearch('search-kinerja','table-kinerja');

  const top10 = <?= json_encode(array_slice($data,0,10)) ?>;
  Charts.bar('chart-kinerja',
    top10.map(r=>r.nama.length>20?r.nama.slice(0,20)+'...':r.nama),
    [{label:'Bantuan Disalurkan', data:top10.map(r=>r.jml_bantuan)},
     {label:'Warga Binaan', data:top10.map(r=>r.jml_warga)}]
  );

  Charts.donut('chart-partisipasi',
    ['Aktif Menyalurkan','Belum Aktif'],
    [<?= $aktif ?>, <?= count($data)-$aktif ?>],
    ['#16a34a','#dc2626']
  );
});
</script>