315 lines
15 KiB
PHP
315 lines
15 KiB
PHP
<?php
|
|
// dashboard-relawan.php
|
|
require_once 'koneksi.php';
|
|
cekLogin(); // Memastikan user sudah login lewat fungsi sistem Anda
|
|
|
|
// Proteksi tingkat tinggi: Memastikan hanya Relawan (atau Pengurus) yang bisa masuk
|
|
if (!isset($_SESSION['role']) || !in_array($_SESSION['role'], ['relawan', 'pengurus'])) {
|
|
header('Location: login.php');
|
|
exit;
|
|
}
|
|
|
|
$page = 'beranda'; // Penanda agar menu "Beranda" di sidebar otomatis menyala biru
|
|
$pageTitle = 'Dashboard Relawan';
|
|
|
|
// 1. MENGAMBIL DATA STATISTIK UNTUK RELAWAN (FOKUS LOGISTIK & LAPANGAN)
|
|
$totalIbadah = $conn->query("SELECT COUNT(*) AS c FROM rumah_ibadah")->fetch_assoc()['c'] ?? 0;
|
|
$totalKpm = $conn->query("SELECT COUNT(*) AS c FROM rumah_miskin")->fetch_assoc()['c'] ?? 0;
|
|
$terjangkau = $conn->query("SELECT COUNT(*) AS c FROM rumah_miskin WHERE status_bantuan='Terjangkau'")->fetch_assoc()['c'] ?? 0;
|
|
$blankSpot = $conn->query("SELECT COUNT(*) AS c FROM rumah_miskin WHERE status_bantuan='Belum Terbantu'")->fetch_assoc()['c'] ?? 0;
|
|
$bencanaAktif = $conn->query("SELECT COUNT(*) AS c FROM bencana WHERE status='Aktif'")->fetch_assoc()['c'] ?? 0;
|
|
|
|
// Menghitung persentase capaian rasio jangkauan bantuan
|
|
$pct = $totalKpm > 0 ? round($terjangkau / $totalKpm * 100) : 0;
|
|
|
|
// 2. LOG AKTIVITAS LAPANGAN TERBARU (LIMIT 5)
|
|
$kpmBaru = $conn->query("SELECT nama_kepala_keluarga, nik, kelurahan, kondisi_rumah FROM rumah_miskin ORDER BY created_at DESC LIMIT 5");
|
|
$bantuanBaru = $conn->query("SELECT bt.jenis_bantuan, bt.jumlah, bt.tanggal, rm.nama_kepala_keluarga FROM bantuan_tersalur bt LEFT JOIN rumah_miskin rm ON bt.warga_id=rm.id ORDER BY bt.created_at DESC LIMIT 5");
|
|
|
|
// MEMANGGIL SIDEBAR PREMIUM (Otomatis menyambung dan layout langsung presisi)
|
|
include 'includes/sidebar.php';
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Panel Relawan Lapangan - Poverty Mapping</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"/>
|
|
|
|
<style>
|
|
.db-wrap { max-width: 1200px; font-family: 'Inter', sans-serif; }
|
|
|
|
/* Welcome Banner Edisi Relawan (Gradasi Hijau-Biru Segar & Semangat) */
|
|
.db-welcome {
|
|
background: linear-gradient(135deg, #0f1d42 0%, #204075 100%);
|
|
color: white;
|
|
border-radius: 16px;
|
|
padding: 26px 28px;
|
|
margin-bottom: 24px;
|
|
box-shadow: 0 10px 25px -5px rgba(13, 148, 136, 0.2);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.db-welcome h1 { font-size: 22px; font-weight: 700; margin-bottom: 6px; }
|
|
.db-welcome p { font-size: 13px; opacity: 0.9; max-width: 750px; line-height: 1.5; }
|
|
.db-welcome::after {
|
|
content: ''; position: absolute; top:0; right:0; width: 250px; height: 100%;
|
|
background: radial-gradient(circle at 80% 20%, rgba(255,255,255,0.15) 0%, transparent 60%);
|
|
}
|
|
|
|
/* Tombol Pintas Quick Action Khusus Relawan */
|
|
.action-row {
|
|
display: flex;
|
|
gap: 12px;
|
|
margin-bottom: 24px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.btn-action {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
background: #ffffff;
|
|
border: 1px solid #e2e8f0;
|
|
padding: 10px 18px;
|
|
border-radius: 10px;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: #1e293b;
|
|
text-decoration: none;
|
|
transition: all 0.2s;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.02);
|
|
}
|
|
.btn-action:hover {
|
|
background: #f8fafc;
|
|
border-color: #cbd5e1;
|
|
transform: translateY(-1px);
|
|
}
|
|
.btn-action i { color: #3b82f6; }
|
|
.btn-action.btn-maps i { color: #10b981; }
|
|
|
|
/* Grid Kartu Statistik */
|
|
.stat-row {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 16px;
|
|
margin-bottom: 24px;
|
|
}
|
|
.scard {
|
|
background: #fff;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 14px;
|
|
padding: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
transition: box-shadow .2s, transform .2s;
|
|
box-shadow: 0 4px 6px -1px rgba(15,23,42,0.02);
|
|
}
|
|
.scard:hover {
|
|
box-shadow: 0 12px 20px -5px rgba(15, 23, 42, 0.05);
|
|
transform: translateY(-4px);
|
|
}
|
|
.scard-label { font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
|
|
.scard-num { font-size: 26px; font-weight: 800; line-height: 1; color: #0f172a; }
|
|
.scard-sub { font-size: 11px; color: #64748b; margin-top: 5px; font-weight: 500; }
|
|
.scard-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; }
|
|
|
|
/* Progress Capaian Lapangan */
|
|
.coverage-box {
|
|
background: #fff;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 14px;
|
|
padding: 24px;
|
|
margin-bottom: 24px;
|
|
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02);
|
|
}
|
|
.cov-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
|
|
.cov-top h3 { font-size: 14px; font-weight: 700; color: #1e293b; }
|
|
.cov-top p { font-size: 12px; color: #64748b; margin-top: 2px; }
|
|
.cov-pct { font-size: 24px; font-weight: 800; color: #0d9488; }
|
|
.cov-track { height: 12px; background: #e2e8f0; border-radius: 99px; overflow: hidden; }
|
|
.cov-fill { height: 100%; background: linear-gradient(90deg, #0d9488, #14b8a6); border-radius: 99px; transition: width .8s; }
|
|
.cov-meta { display: flex; gap: 20px; font-size: 12px; color: #475569; margin-top: 14px; flex-wrap: wrap; font-weight: 500; }
|
|
|
|
/* Layout Grid Tabel Ringkasan */
|
|
.db-tables { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
|
|
.dbt-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02); }
|
|
.dbt-head { padding: 16px 20px; border-bottom: 1px solid #f1f5f9; display: flex; justify-content: space-between; align-items: center; background: #fafbfc; }
|
|
.dbt-head h3 { font-size: 13px; font-weight: 700; color: #0f172a; display: flex; align-items: center; gap: 8px; }
|
|
.dbt-head a { font-size: 12px; color: #2563eb; text-decoration: none; font-weight: 600; background: #eff6ff; padding: 4px 10px; border-radius: 6px; }
|
|
|
|
/* Desain Tabel Premium */
|
|
table.dbt { width: 100%; border-collapse: collapse; font-size: 13px; }
|
|
table.dbt th { background: #f8fafc; padding: 12px 16px; text-align: left; font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; border-bottom: 1px solid #e2e8f0; }
|
|
table.dbt td { padding: 14px 16px; border-bottom: 1px solid #f1f5f9; color: #334155; }
|
|
table.dbt tr:last-child td { border-bottom: none; }
|
|
table.dbt tr:hover { background: #f8fafc; }
|
|
|
|
/* Lencana Modern (Badges) */
|
|
.badge-modern { padding: 4px 10px; border-radius: 99px; font-size: 11px; font-weight: 600; display: inline-block; }
|
|
.badge-danger { background: #fee2e2; color: #dc2626; }
|
|
.badge-success { background: #d1fae5; color: #059669; }
|
|
.badge-warning { background: #fef3c7; color: #d97706; }
|
|
.badge-info { background: #e0f2fe; color: #0284c7; }
|
|
|
|
@media (max-width: 992px) {
|
|
.stat-row { grid-template-columns: repeat(2, 1fr); }
|
|
.db-tables { grid-template-columns: 1fr; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="db-wrap">
|
|
|
|
<div class="db-welcome">
|
|
<h1>Selamat Bertugas, <?= htmlspecialchars($_SESSION['nama'] ?? 'Relawan') ?></h1>
|
|
</div>
|
|
|
|
<div class="action-row">
|
|
<a href="data-warga.php?aksi=tambah" class="btn-action">
|
|
<i class="fa fa-user-plus"></i> Tambah Data Rumah Warga
|
|
</a>
|
|
<a href="bantuan.php?aksi=salurkan" class="btn-action">
|
|
<i class="fa fa-hand-holding-heart"></i> Input Penyaluran Bantuan
|
|
</a>
|
|
<a href="peta.php" class="btn-action btn-maps">
|
|
<i class="fa fa-map-location-dot"></i> Buka Navigasi Peta Distribusi
|
|
</a>
|
|
</div>
|
|
|
|
<div class="stat-row">
|
|
<div class="scard">
|
|
<div>
|
|
<div class="scard-label">Pos Rumah Ibadah</div>
|
|
<div class="scard-num"><?= $totalIbadah ?></div>
|
|
<div class="scard-sub">Titik koordinasi aktif</div>
|
|
</div>
|
|
<div class="scard-icon" style="background: #e0f2fe; color: #0369a1;">
|
|
<i class="fa fa-mosque"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="scard">
|
|
<div>
|
|
<div class="scard-label">KPM Terdata</div>
|
|
<div class="scard-num"><?= $totalKpm ?></div>
|
|
<div class="scard-sub">Keluarga telah disurvei</div>
|
|
</div>
|
|
<div class="scard-icon" style="background: #fcf2e9; color: #ea580c;">
|
|
<i class="fa fa-users"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="scard">
|
|
<div>
|
|
<div class="scard-label">Blank Spot</div>
|
|
<div class="scard-num" style="color:#dc2626"><?= $blankSpot ?></div>
|
|
<div class="scard-sub">Butuh penanganan cepat</div>
|
|
</div>
|
|
<div class="scard-icon" style="background: #fee2e2; color: #dc2626;">
|
|
<i class="fa fa-street-view"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="scard">
|
|
<div>
|
|
<div class="scard-label">Tanggap Bencana</div>
|
|
<div class="scard-num" style="color:<?= $bencanaAktif > 0 ? '#e11d48' : '#0f172a' ?>"><?= $bencanaAktif ?></div>
|
|
<div class="scard-sub"><?= $bencanaAktif > 0 ? 'Status waspada aktif' : 'Kondisi lingkungan aman' ?></div>
|
|
</div>
|
|
<div class="scard-icon" style="background: #fff1f2; color: #e11d48;">
|
|
<i class="fa fa-triangle-exclamation"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="coverage-box">
|
|
<div class="cov-top">
|
|
<div>
|
|
<h3>Rasio Capaian Target Distribusi</h3>
|
|
<p>Persentase pemenuhan logistik bagi KPM yang berada di area koordinasi Anda</p>
|
|
</div>
|
|
<div class="cov-pct"><?= $pct ?>%</div>
|
|
</div>
|
|
<div class="cov-track">
|
|
<div class="cov-fill" style="width:<?= $pct ?>%"></div>
|
|
</div>
|
|
<div class="cov-meta">
|
|
<span>Berhasil Terbantu: <strong style="color:#0d9488;"><?= $terjangkau ?> KPM</strong></span>
|
|
<span>Belum Terjangkau: <strong style="color:#dc2626;"><?= $blankSpot ?> KPM</strong></span>
|
|
<span>Total Sasaran: <strong><?= $totalKpm ?> KPM</strong></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="db-tables">
|
|
|
|
<div class="dbt-card">
|
|
<div class="dbt-head">
|
|
<h3><i class="fa fa-users-viewfinder"></i> Survei Warga Terakhir</h3>
|
|
<a href="data-warga.php">Kelola Data</a>
|
|
</div>
|
|
<table class="dbt">
|
|
<thead>
|
|
<tr><th>Nama Kepala Keluarga</th><th>Kelurahan</th><th>Kondisi Rumah</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<?php if ($kpmBaru->num_rows === 0): ?>
|
|
<tr><td colspan="3" style="text-align:center;padding:28px;color:#94a3b8;">Belum ada entri data KPM terdaftar.</td></tr>
|
|
<?php else: while ($k = $kpmBaru->fetch_assoc()):
|
|
$kondisiClass = 'badge-info';
|
|
if (in_array($k['kondisi_rumah'], ['Sangat Parah', 'Sangat Tidak Layak'])) $kondisiClass = 'badge-danger';
|
|
elseif (in_array($k['kondisi_rumah'], ['Parah', 'Tidak Layak'])) $kondisiClass = 'badge-warning';
|
|
elseif (in_array($k['kondisi_rumah'], ['Cukup Baik', 'Layak'])) $kondisiClass = 'badge-success';
|
|
?>
|
|
<tr>
|
|
<td>
|
|
<div style="font-weight:600"><?= htmlspecialchars($k['nama_kepala_keluarga']) ?></div>
|
|
<div style="font-size:11px;color:#94a3b8">NIK: <?= $k['nik'] ?: '-' ?></div>
|
|
</td>
|
|
<td style="font-size:12px;"><?= htmlspecialchars($k['kelurahan'] ?: '-') ?></td>
|
|
<td><span class="badge-modern <?= $kondisiClass ?>"><?= $k['kondisi_rumah'] ?></span></td>
|
|
</tr>
|
|
<?php endwhile; endif; ?>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="dbt-card">
|
|
<div class="dbt-head">
|
|
<h3><i class="fa fa-clock-rotate-left"></i> Riwayat Penyaluran Anda</h3>
|
|
<a href="bantuan.php">Semua Riwayat</a>
|
|
</div>
|
|
<table class="dbt">
|
|
<thead>
|
|
<tr><th>Penerima KPM</th><th>Paket Logistik</th><th>Tanggal</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<?php if ($bantuanBaru->num_rows === 0): ?>
|
|
<tr><td colspan="3" style="text-align:center;padding:28px;color:#94a3b8;">Belum ada transaksi bantuan dicatat.</td></tr>
|
|
<?php else: while ($b = $bantuanBaru->fetch_assoc()): ?>
|
|
<tr>
|
|
<td style="font-weight:600"><?= htmlspecialchars($b['nama_kepala_keluarga'] ?? '-') ?></td>
|
|
<td>
|
|
<span class="badge-modern badge-success"><?= htmlspecialchars($b['jenis_bantuan']) ?></span>
|
|
<?php if ($b['jumlah']): ?>
|
|
<div style="font-size:11px;color:#64748b;margin-top:2px; font-weight:500;"><?= htmlspecialchars($b['jumlah']) ?></div>
|
|
<?php endif; ?>
|
|
</td>
|
|
<td style="font-size:12px;color:#64748b"><?= date('d M Y', strtotime($b['tanggal'])) ?></td>
|
|
</tr>
|
|
<?php endwhile; endif; ?>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<?php include 'includes/footer.php'; ?>
|
|
</body>
|
|
</html>
|