Upload files to "/"
This commit is contained in:
@@ -0,0 +1,315 @@
|
||||
<?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>
|
||||
+417
@@ -0,0 +1,417 @@
|
||||
<?php
|
||||
require_once 'koneksi.php';
|
||||
cekLogin();
|
||||
|
||||
$page = 'ibadah';
|
||||
$pageTitle = 'Rumah Ibadah';
|
||||
$pageSubtitle = 'Titik Distribusi Bantuan';
|
||||
|
||||
$data = $conn->query("SELECT ri.*, u.nama_lengkap AS dibuat_user FROM rumah_ibadah ri LEFT JOIN users u ON ri.dibuat_oleh=u.id ORDER BY ri.created_at DESC");
|
||||
$total = $data->num_rows;
|
||||
|
||||
include 'includes/sidebar.php';
|
||||
?>
|
||||
|
||||
<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>
|
||||
/* ═══ PALET WARNA MODERN & ELEGAN ═══ */
|
||||
:root {
|
||||
--primary-blue: #3b82f6;
|
||||
--secondary-indigo: #4f46e5;
|
||||
--dark-slate: #0f172a;
|
||||
--soft-muted: #64748b;
|
||||
--border-color: #e2e8f0;
|
||||
--card-bg: #ffffff;
|
||||
}
|
||||
|
||||
.ibadah-container {
|
||||
font-family: 'Inter', sans-serif;
|
||||
color: var(--dark-slate);
|
||||
}
|
||||
|
||||
/* Header Halaman Premium */
|
||||
.premium-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 28px;
|
||||
background: linear-gradient(to right, #ffffff, #f8fafc);
|
||||
padding: 20px 24px;
|
||||
border-radius: 14px;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
.premium-header h2 { font-size: 22px; font-weight: 800; color: var(--dark-slate); margin-bottom: 4px; letter-spacing: -0.5px; }
|
||||
.premium-header p { font-size: 13px; color: var(--soft-muted); font-weight: 500; }
|
||||
|
||||
/* Tombol-tombol Modern */
|
||||
.btn-premium {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background: linear-gradient(135deg, var(--primary-blue) 0%, var(--secondary-indigo) 100%);
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
padding: 11px 20px;
|
||||
border-radius: 10px;
|
||||
font-size: 13.5px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.25s;
|
||||
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
|
||||
}
|
||||
.btn-premium:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(59, 130, 246, 0.35); }
|
||||
|
||||
/* Grid Layout Rumah Ibadah */
|
||||
.ibadah-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||||
gap: 20px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
/* Desain Kartu Premium (Luxury Card) */
|
||||
.ibadah-card {
|
||||
background: var(--card-bg);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.02);
|
||||
position: relative;
|
||||
}
|
||||
.ibadah-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.06), 0 10px 10px -5px rgba(15, 23, 42, 0.04);
|
||||
border-color: #cbd5e1;
|
||||
}
|
||||
|
||||
/* Pita Atas Kartu Sesuai Kategori */
|
||||
.card-top-bar { height: 4px; width: 100%; background: var(--primary-blue); }
|
||||
.bar-masjid { background: linear-gradient(90deg, #10b981, #059669); }
|
||||
.bar-gereja { background: linear-gradient(90deg, #3b82f6, #1d4ed8); }
|
||||
.bar-lainnya { background: linear-gradient(90deg, #f59e0b, #d97706); }
|
||||
|
||||
.card-body-content { padding: 22px; }
|
||||
|
||||
/* Baris Atas Kartu (Judul & Aksi) */
|
||||
.card-header-row { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; gap: 12px; }
|
||||
.ibadah-title { font-size: 15.5px; font-weight: 700; color: var(--dark-slate); line-height: 1.4; margin-bottom: 6px; }
|
||||
|
||||
/* Badges Modern */
|
||||
.badge-premium {
|
||||
display: inline-block;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
padding: 3px 10px;
|
||||
border-radius: 6px;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
.badge-masjid { background: rgba(16, 185, 129, 0.1); color: #10b981; }
|
||||
.badge-gereja { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
|
||||
.badge-lainnya { background: rgba(245, 158, 11, 0.1); color: #d97706; }
|
||||
|
||||
/* Tombol Aksi Mikro */
|
||||
.btn-action-trigger {
|
||||
width: 28px; height: 28px; border-radius: 8px; border: 1px solid #e2e8f0;
|
||||
background: #f8fafc; color: var(--soft-muted); cursor: pointer; display: inline-flex;
|
||||
align-items: center; justify-content: center; transition: all 0.2s;
|
||||
}
|
||||
.btn-action-trigger:hover { background: #edf2f7; color: var(--dark-slate); }
|
||||
.btn-delete:hover { background: #fee2e2; color: #ef4444; border-color: #fca5a5; }
|
||||
|
||||
/* Info Alamat & Kontak */
|
||||
.info-address { font-size: 12.5px; color: #475569; margin-bottom: 16px; line-height: 1.6; min-height: 40px; }
|
||||
.info-contact { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--soft-muted); margin-bottom: 16px; font-weight: 500; }
|
||||
.info-contact i { color: #94a3b8; }
|
||||
|
||||
/* Grid Parameter 3 Kolom */
|
||||
.param-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 8px;
|
||||
background: #f8fafc;
|
||||
padding: 12px 6px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #f1f5f9;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.param-item { text-align: center; }
|
||||
.param-val { font-size: 18px; font-weight: 800; line-height: 1.2; }
|
||||
.param-val.v-kuota { color: #2563eb; }
|
||||
.param-val.v-radius { color: #059669; }
|
||||
.param-val.v-bantuan { color: #7c3aed; }
|
||||
.param-lbl { font-size: 10px; font-weight: 600; color: var(--soft-muted); margin-top: 3px; text-transform: uppercase; letter-spacing: 0.3px; }
|
||||
|
||||
/* Bar Koordinat Geospasial */
|
||||
.geo-footer {
|
||||
display: flex; align-items: center; gap: 6px;
|
||||
font-size: 11px; color: #94a3b8; font-family: monospace;
|
||||
border-top: 1px dashed #e2e8f0; padding-top: 12px; font-weight: 500;
|
||||
}
|
||||
|
||||
/* State Jika Data Kosong */
|
||||
.empty-state-card {
|
||||
grid-column: 1/-1; text-align: center; padding: 60px 30px; background: #ffffff;
|
||||
border-radius: 16px; border: 1px dashed #cbd5e1; color: var(--soft-muted);
|
||||
}
|
||||
.empty-state-card i { font-size: 40px; color: #cbd5e1; margin-bottom: 14px; }
|
||||
.empty-state-card h4 { font-size: 16px; font-weight: 700; color: var(--dark-slate); margin-bottom: 4px; }
|
||||
|
||||
/* ═══ MODAL DESIGN MODERN (GLASSMORPHISM OVERLAY) ═══ */
|
||||
.modal-overlay {
|
||||
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
|
||||
background: rgba(15, 23, 42, 0.4); backdrop-filter: blur(4px);
|
||||
display: none; align-items: center; justify-content: center; z-index: 9999;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.modal-box {
|
||||
background: #ffffff; width: 100%; max-width: 600px; border-radius: 16px;
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15); overflow: hidden;
|
||||
animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
|
||||
|
||||
.modal-head { padding: 20px 24px; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; }
|
||||
.modal-head h3 { font-size: 16px; font-weight: 700; color: var(--dark-slate); }
|
||||
.btn-close { background: none; border: none; font-size: 18px; color: var(--soft-muted); cursor: pointer; transition: color 0.2s; }
|
||||
.btn-close:hover { color: #ef4444; }
|
||||
|
||||
.modal-body { padding: 24px; max-height: 75vh; overflow-y: auto; }
|
||||
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
|
||||
.form-group { margin-bottom: 16px; }
|
||||
.form-group label { display: block; font-size: 12.5px; font-weight: 600; color: #334155; margin-bottom: 6px; }
|
||||
.form-control {
|
||||
width: 100%; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--border-color);
|
||||
font-family: 'Inter', sans-serif; font-size: 13.5px; color: var(--dark-slate); transition: all 0.2s;
|
||||
}
|
||||
.form-control:focus { outline: none; border-color: var(--primary-blue); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15); }
|
||||
|
||||
.modal-foot { padding: 16px 24px; border-top: 1px solid var(--border-color); display: flex; justify-content: flex-end; gap: 12px; background: #f8fafc; }
|
||||
.btn-ghost { background: transparent; border: 1px solid var(--border-color); color: #475569; padding: 10px 18px; border-radius: 8px; font-weight: 600; font-size: 13px; cursor: pointer; transition: background 0.2s; }
|
||||
.btn-ghost:hover { background: #f1f5f9; }
|
||||
</style>
|
||||
|
||||
<div class="ibadah-container">
|
||||
|
||||
<div class="premium-header">
|
||||
<div>
|
||||
<h2>Rumah Ibadah</h2>
|
||||
<p>Total <strong><?= $total ?></strong> titik terdaftar sebagai pusat logistik & distribusi bantuan</p>
|
||||
</div>
|
||||
<?php if (in_array($_SESSION['role'], ['admin','pengurus'])): ?>
|
||||
<button class="btn-premium" onclick="openModal('modalTambah')">
|
||||
<i class="fa fa-plus"></i> Tambah Pos Distribusi
|
||||
</button>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<div class="ibadah-grid">
|
||||
<?php
|
||||
$data->data_seek(0);
|
||||
while ($r = $data->fetch_assoc()):
|
||||
$jmlBantuan = $conn->query("SELECT COUNT(*) AS c FROM bantuan_tersalur WHERE ibadah_id={$r['id']}")->fetch_assoc()['c'];
|
||||
|
||||
// Klasifikasi style dinamis berdasarkan kategori
|
||||
$katLower = strtolower($r['kategori']);
|
||||
$barClass = 'bar-lainnya';
|
||||
$badgeClass = 'badge-lainnya';
|
||||
|
||||
if (strpos($katLower, 'masjid') !== false || strpos($katLower, 'musholla') !== false) {
|
||||
$barClass = 'bar-masjid'; $badgeClass = 'badge-masjid';
|
||||
} elseif (strpos($katLower, 'gereja') !== false) {
|
||||
$barClass = 'bar-gereja'; $badgeClass = 'badge-gereja';
|
||||
}
|
||||
?>
|
||||
<div class="ibadah-card">
|
||||
<div class="card-top-bar <?= $barClass ?>"></div>
|
||||
|
||||
<div class="card-body-content">
|
||||
<div class="card-header-row">
|
||||
<div>
|
||||
<div class="ibadah-title"><?= htmlspecialchars($r['nama_ibadah']) ?></div>
|
||||
<span class="badge-premium <?= $badgeClass ?>"><i class="fa fa-tag"></i> <?= htmlspecialchars($r['kategori']) ?></span>
|
||||
</div>
|
||||
|
||||
<?php if (in_array($_SESSION['role'],['admin','pengurus'])): ?>
|
||||
<div style="display:flex; gap:6px;">
|
||||
<button class="btn-action-trigger" onclick='editIbadah(<?= json_encode($r) ?>)' title="Edit Data"><i class="fa fa-pen"></i></button>
|
||||
<?php if ($_SESSION['role']==='admin'): ?>
|
||||
<button class="btn-action-trigger btn-delete" onclick="hapusIbadah(<?= $r['id'] ?>)" title="Hapus Permanen"><i class="fa fa-trash"></i></button>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<div class="info-address">
|
||||
<i class="fa fa-location-dot" style="color: #94a3b8; margin-right: 4px;"></i>
|
||||
<?= htmlspecialchars($r['alamat'] ?: 'Alamat lengkap belum dimasukkan.') ?>
|
||||
</div>
|
||||
|
||||
<div class="info-contact">
|
||||
<i class="fa fa-user-tie"></i> <span><?= htmlspecialchars($r['nama_pengurus'] ?: '-') ?></span>
|
||||
<span style="color:#cbd5e1">•</span>
|
||||
<i class="fa fa-phone"></i> <span><?= htmlspecialchars($r['no_telp'] ?: '-') ?></span>
|
||||
</div>
|
||||
|
||||
<div class="param-grid">
|
||||
<div class="param-item">
|
||||
<div class="param-val v-kuota"><?= $r['kuota_bantuan'] ?></div>
|
||||
<div class="param-lbl">Kuota KK</div>
|
||||
</div>
|
||||
<div class="param-item">
|
||||
<div class="param-val v-radius"><?= $r['radius_m'] ?><span style="font-size:10px; font-weight:500;">m</span></div>
|
||||
<div class="param-lbl">Radius</div>
|
||||
</div>
|
||||
<div class="param-item">
|
||||
<div class="param-val v-bantuan"><?= $jmlBantuan ?></div>
|
||||
<div class="param-lbl">Bantuan</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="geo-footer">
|
||||
<i class="fa fa-earth-asia"></i>
|
||||
<span><?= number_format((float)$r['lat'],6) ?>, <?= number_format((float)$r['lng'],6) ?></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php endwhile; ?>
|
||||
|
||||
<?php if ($total === 0): ?>
|
||||
<div class="empty-state-card">
|
||||
<i class="fa fa-mosque"></i>
|
||||
<h4>Belum Ada Data Rumah Ibadah</h4>
|
||||
<p style="font-size: 13px;">Tambahkan titik distribusi baru melalui tombol di atas atau pakai menu Peta Interaktif.</p>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="modal-overlay" id="modalTambah">
|
||||
<div class="modal-box">
|
||||
<div class="modal-head">
|
||||
<h3>Tambah Rumah Ibadah Baru</h3>
|
||||
<button class="btn-close" onclick="closeModal('modalTambah')">✕</button>
|
||||
</div>
|
||||
<form method="POST" action="proses.php">
|
||||
<input type="hidden" name="aksi" value="simpan_ibadah_form">
|
||||
<div class="modal-body">
|
||||
<div class="form-grid-2">
|
||||
<div class="form-group"><label>Nama Lembaga / Tempat Ibadah *</label><input class="form-control" name="nama_ibadah" required placeholder="Masjid Al-Ikhlas..."></div>
|
||||
<div class="form-group"><label>Kategori Tempat</label>
|
||||
<select class="form-control" name="kategori">
|
||||
<option>Masjid</option><option>Musholla</option><option>Gereja</option>
|
||||
<option>Pura</option><option>Vihara</option><option>Klenteng</option><option>Lainnya</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group"><label>Alamat Lengkap Kelurahan/RT/RW</label><input class="form-control" name="alamat" placeholder="Jl. Gajahmada No. 12..."></div>
|
||||
<div class="form-grid-2">
|
||||
<div class="form-group"><label>Nama Ketua Pengurus</label><input class="form-control" name="nama_pengurus" placeholder="H. Muhammad Dani..."></div>
|
||||
<div class="form-group"><label>No. Telepon Aktif</label><input class="form-control" name="no_telp" placeholder="0812XXXXXXXX"></div>
|
||||
</div>
|
||||
<div class="form-grid-2">
|
||||
<div class="form-group"><label>Kuota Kapasitas Bantuan (KK)</label><input class="form-control" type="number" name="kuota_bantuan" value="20" min="1"></div>
|
||||
<div class="form-group"><label>Radius Jangkauan Efektif (Meter)</label><input class="form-control" type="number" name="radius_m" value="300" min="50" max="5000"></div>
|
||||
</div>
|
||||
<div class="form-grid-2">
|
||||
<div class="form-group"><label>Garis Lintang (Latitude) *</label><input class="form-control" type="number" name="lat" step="any" required placeholder="-0.026300"></div>
|
||||
<div class="form-group"><label>Garis Bujur (Longitude) *</label><input class="form-control" type="number" name="lng" step="any" required placeholder="109.342500"></div>
|
||||
</div>
|
||||
<div style="background: rgba(59,130,246,0.06); border: 1px solid rgba(59,130,246,0.15); border-radius: 10px; padding: 12px; font-size: 12px; color: #1d4ed8; font-weight: 500;">
|
||||
<i class="fa fa-circle-info" style="margin-right:4px;"></i> Petunjuk: Untuk mendapatkan koordinat presisi otomatis, disarankan menginput langsung via klik pin di menu <strong>Peta Distribusi</strong>.
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-foot">
|
||||
<button type="button" class="btn-ghost" onclick="closeModal('modalTambah')">Batalkan</button>
|
||||
<button type="submit" class="btn-premium">Simpan Pos Baru</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-overlay" id="modalEdit">
|
||||
<div class="modal-box">
|
||||
<div class="modal-head">
|
||||
<h3>Edit Parameter Rumah Ibadah</h3>
|
||||
<button class="btn-close" onclick="closeModal('modalEdit')">✕</button>
|
||||
</div>
|
||||
<form method="POST" action="proses.php">
|
||||
<input type="hidden" name="aksi" value="edit_ibadah">
|
||||
<input type="hidden" name="id" id="ei_id">
|
||||
<div class="modal-body">
|
||||
<div class="form-grid-2">
|
||||
<div class="form-group"><label>Nama Lembaga *</label><input class="form-control" name="nama_ibadah" id="ei_nama" required></div>
|
||||
<div class="form-group"><label>Kategori</label>
|
||||
<select class="form-control" name="kategori" id="ei_kat">
|
||||
<option>Masjid</option><option>Musholla</option><option>Gereja</option>
|
||||
<option>Pura</option><option>Vihara</option><option>Klenteng</option><option>Lainnya</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group"><label>Alamat Operasional</label><input class="form-control" name="alamat" id="ei_alamat"></div>
|
||||
<div class="form-grid-2">
|
||||
<div class="form-group"><label>Nama Pengurus PJ</label><input class="form-control" name="nama_pengurus" id="ei_pengurus"></div>
|
||||
<div class="form-group"><label>No. Kontak</label><input class="form-control" name="no_telp" id="ei_telp"></div>
|
||||
</div>
|
||||
<div class="form-grid-2">
|
||||
<div class="form-group"><label>Kuota Distribusi (KK)</label><input class="form-control" type="number" name="kuota_bantuan" id="ei_kuota"></div>
|
||||
<div class="form-group"><label>Radius Wilayah (Meter)</label><input class="form-control" type="number" name="radius_m" id="ei_radius"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-foot">
|
||||
<button type="button" class="btn-ghost" onclick="closeModal('modalEdit')">Batal</button>
|
||||
<button type="submit" class="btn-premium">Simpan Perubahan</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Fungsi Manajemen Navigasi Tampilan Modal
|
||||
function openModal(id) {
|
||||
const modal = document.getElementById(id);
|
||||
modal.style.display = 'flex';
|
||||
}
|
||||
function closeModal(id) {
|
||||
const modal = document.getElementById(id);
|
||||
modal.style.display = 'none';
|
||||
}
|
||||
|
||||
// Fungsi Pengisian Otomatis Form Edit dari Data JSON Row Kartu
|
||||
function editIbadah(data) {
|
||||
document.getElementById('ei_id').value = data.id;
|
||||
document.getElementById('ei_nama').value = data.nama_ibadah;
|
||||
document.getElementById('ei_kat').value = data.kategori;
|
||||
document.getElementById('ei_alamat').value = data.alamat || '';
|
||||
document.getElementById('ei_pengurus').value = data.nama_pengurus || '';
|
||||
document.getElementById('ei_telp').value = data.no_telp || '';
|
||||
document.getElementById('ei_kuota').value = data.kuota_bantuan;
|
||||
document.getElementById('ei_radius').value = data.radius_m;
|
||||
openModal('modalEdit');
|
||||
}
|
||||
|
||||
// Fungsi Konfirmasi Penghapusan Data Interaktif
|
||||
function hapusIbadah(id) {
|
||||
if (confirm('Apakah Anda sangat yakin ingin menghapus data pos rumah ibadah ini secara permanen dari sistem?')) {
|
||||
window.location.href = 'proses.php?aksi=hapus_ibadah&id=' + id;
|
||||
}
|
||||
}
|
||||
|
||||
// Tutup modal secara otomatis ketika pengguna mengklik area luar box modal
|
||||
window.onclick = function(event) {
|
||||
if (event.target.classList.contains('modal-overlay')) {
|
||||
event.target.style.display = 'none';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
</div> <?php
|
||||
include 'includes/footer.php';
|
||||
?>
|
||||
+458
@@ -0,0 +1,458 @@
|
||||
<?php
|
||||
require_once 'koneksi.php';
|
||||
cekLogin();
|
||||
|
||||
$page = 'warga';
|
||||
$pageTitle = 'Data KPM';
|
||||
$pageSubtitle = 'Keluarga Penerima Manfaat';
|
||||
|
||||
$filterStatus = $_GET['status'] ?? '';
|
||||
$filterKondisi = $_GET['kondisi'] ?? '';
|
||||
$filterPrioritas= $_GET['prioritas'] ?? '';
|
||||
$cari = bersih($_GET['cari'] ?? '', $conn);
|
||||
|
||||
$where = "WHERE 1=1";
|
||||
if ($filterStatus) $where .= " AND rm.status_bantuan='$filterStatus'";
|
||||
if ($filterKondisi) $where .= " AND rm.kondisi_rumah='$filterKondisi'";
|
||||
if ($filterPrioritas) $where .= " AND rm.prioritas=1";
|
||||
if ($cari) $where .= " AND (rm.nama_kepala_keluarga LIKE '%$cari%' OR rm.nik LIKE '%$cari%' OR rm.kelurahan LIKE '%$cari%')";
|
||||
|
||||
$data = $conn->query("SELECT rm.*, u.nama_lengkap AS relawan FROM rumah_miskin rm LEFT JOIN users u ON rm.didata_oleh=u.id $where ORDER BY rm.prioritas DESC, rm.created_at DESC");
|
||||
$total = $data->num_rows;
|
||||
|
||||
include 'includes/sidebar.php';
|
||||
?>
|
||||
|
||||
<style>
|
||||
.custom-header-wrapper {
|
||||
display: flex !important;
|
||||
justify-content: space-between !important;
|
||||
align-items: center !important;
|
||||
margin-bottom: 25px !important;
|
||||
background: #ffffff !important;
|
||||
padding: 20px 24px !important;
|
||||
border-radius: 12px !important;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
|
||||
}
|
||||
.detail-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.detail-table th, .detail-table td {
|
||||
padding: 10px 12px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
font-size: 13px;
|
||||
}
|
||||
.detail-table th {
|
||||
color: #64748b;
|
||||
font-weight: 600;
|
||||
width: 40%;
|
||||
background: #f8fafc;
|
||||
}
|
||||
.detail-table td {
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.custom-header-wrapper {
|
||||
flex-direction: column !important;
|
||||
align-items: flex-start !important;
|
||||
gap: 15px !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="custom-header-wrapper">
|
||||
<div>
|
||||
<h2 style="margin: 0; font-size: 24px; color: #1e293b; font-weight: 700; display: flex; align-items: center; gap: 10px;">
|
||||
Data KPM
|
||||
</h2>
|
||||
<p style="margin: 4px 0 0 0; color: #64748b; font-size: 14px;">
|
||||
Ditemukan <strong style="color: var(--primary, #2563eb); font-weight: 600;"><?= $total ?></strong> data Keluarga Penerima Manfaat
|
||||
</p>
|
||||
</div>
|
||||
<?php if (in_array($_SESSION['role'], ['admin','relawan'])): ?>
|
||||
<button class="btn btn-primary" onclick="openModal('modalTambah')" style="display: flex; align-items: center; gap: 8px; padding: 10px 18px; font-weight: 600; border-radius: 8px; cursor: pointer;">
|
||||
<i class="fa fa-plus"></i> Tambah KPM
|
||||
</button>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<div class="card" style="margin-bottom:16px">
|
||||
<div style="padding:14px 18px">
|
||||
<form method="GET" style="display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end">
|
||||
<div style="flex:2;min-width:180px">
|
||||
<label style="font-size:11px;font-weight:600;color:var(--gray);display:block;margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px">Cari</label>
|
||||
<input class="form-control" name="cari" value="<?= htmlspecialchars($cari) ?>" placeholder="Nama, NIK, kelurahan...">
|
||||
</div>
|
||||
<div style="flex:1;min-width:130px">
|
||||
<label style="font-size:11px;font-weight:600;color:var(--gray);display:block;margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px">Status</label>
|
||||
<select class="form-control" name="status">
|
||||
<option value="">Semua</option>
|
||||
<option value="Belum Terbantu" <?= $filterStatus==='Belum Terbantu'?'selected':'' ?>>Belum Terbantu</option>
|
||||
<option value="Terjangkau" <?= $filterStatus==='Terjangkau'?'selected':'' ?>>Terjangkau</option>
|
||||
<option value="Sudah Menerima" <?= $filterStatus==='Sudah Menerima'?'selected':'' ?>>Sudah Menerima</option>
|
||||
</select>
|
||||
</div>
|
||||
<div style="flex:1;min-width:130px">
|
||||
<label style="font-size:11px;font-weight:600;color:var(--gray);display:block;margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px">Kondisi</label>
|
||||
<select class="form-control" name="kondisi">
|
||||
<option value="">Semua</option>
|
||||
<option value="Layak" <?= $filterKondisi==='Layak'?'selected':'' ?>>Layak</option>
|
||||
<option value="Tidak Layak" <?= $filterKondisi==='Tidak Layak'?'selected':'' ?>>Tidak Layak</option>
|
||||
<option value="Sangat Tidak Layak" <?= $filterKondisi==='Sangat Tidak Layak'?'selected':'' ?>>Sangat Tidak Layak</option>
|
||||
</select>
|
||||
</div>
|
||||
<div style="flex:1;min-width:120px">
|
||||
<label style="font-size:11px;font-weight:600;color:var(--gray);display:block;margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px">Prioritas</label>
|
||||
<select class="form-control" name="prioritas">
|
||||
<option value="">Semua</option>
|
||||
<option value="1" <?= $filterPrioritas?'selected':'' ?>>Prioritas Bencana</option>
|
||||
</select>
|
||||
</div>
|
||||
<div style="display:flex;gap:6px">
|
||||
<button type="submit" class="btn btn-primary">Filter</button>
|
||||
<a href="data-warga.php" class="btn btn-ghost"><i class="fa fa-rotate-left"></i></a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3>Daftar KPM</h3>
|
||||
<div style="display:flex;align-items:center;gap:8px">
|
||||
<span class="badge badge-gray"><?= $total ?> data</span>
|
||||
<a href="peta.php" class="btn btn-ghost btn-sm">Lihat di Peta</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tbl-wrap">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Nama KK</th>
|
||||
<th>Tgl Lahir / Usia</th>
|
||||
<th>Tanggungan</th>
|
||||
<th>Pendapatan</th>
|
||||
<th>Kondisi Rumah</th>
|
||||
<th>Wilayah</th>
|
||||
<th>Status</th>
|
||||
<th>Aksi</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<?php if ($total === 0): ?>
|
||||
<tr>
|
||||
<td colspan="9" style="text-align:center;padding:40px;color:var(--gray)">
|
||||
<i class="fa fa-inbox" style="font-size:24px;display:block;margin-bottom:8px;color:var(--gray-md)"></i>
|
||||
Tidak ada data ditemukan
|
||||
</td>
|
||||
</tr>
|
||||
<?php else:
|
||||
$no = 1;
|
||||
while ($r = $data->fetch_assoc()):
|
||||
$kc = ['Layak'=>'badge-green','Tidak Layak'=>'badge-orange','Sangat Tidak Layak'=>'badge-red'];
|
||||
$sc = ['Terjangkau'=>'badge-green','Belum Terbantu'=>'badge-red','Sudah Menerima'=>'badge-blue'];
|
||||
?>
|
||||
<tr>
|
||||
<td style="color:var(--gray);font-weight:600;font-size:12px"><?= $no++ ?></td>
|
||||
<td>
|
||||
<?php if ($r['prioritas']): ?>
|
||||
<span class="badge badge-red" style="margin-bottom:4px;display:inline-block">Prioritas</span><br>
|
||||
<?php endif; ?>
|
||||
<div style="font-weight:600;font-size:13px"><?= htmlspecialchars($r['nama_kepala_keluarga']) ?></div>
|
||||
<div style="font-size:11px;color:var(--gray)">NIK: <?= htmlspecialchars($r['nik'] ?: '-') ?></div>
|
||||
</td>
|
||||
<td>
|
||||
<div style="font-size:13px"><?= $r['tanggal_lahir'] ? date('d/m/Y', strtotime($r['tanggal_lahir'])) : '-' ?></div>
|
||||
<div style="font-size:11px;color:var(--gray)"><?= hitungUsia($r['tanggal_lahir']) ?></div>
|
||||
</td>
|
||||
<td style="text-align:center;font-weight:700"><?= $r['jumlah_tanggungan'] ?> jiwa</td>
|
||||
<td>
|
||||
<div style="font-weight:600;font-size:13px"><?= rupiah($r['pendapatan_bulanan']) ?></div>
|
||||
<div style="font-size:11px;color:var(--gray)">/bulan</div>
|
||||
</td>
|
||||
<td><span class="badge <?= $kc[$r['kondisi_rumah']] ?? 'badge-gray' ?>"><?= $r['kondisi_rumah'] ?></span></td>
|
||||
<td>
|
||||
<div style="font-size:12px"><?= htmlspecialchars($r['rt_rw'] ?: '-') ?></div>
|
||||
<div style="font-size:11px;color:var(--gray)"><?= htmlspecialchars($r['kelurahan'] ?: '') ?></div>
|
||||
</td>
|
||||
<td><span class="badge <?= $sc[$r['status_bantuan']] ?? 'badge-gray' ?>"><?= $r['status_bantuan'] ?></span></td>
|
||||
<td>
|
||||
<div style="display:flex;gap:4px">
|
||||
<button class="btn btn-ghost btn-sm" onclick='lihatDetail(<?= json_encode($r) ?>)' title="Detail">
|
||||
<i class="fa fa-eye" style="font-size:11px"></i>
|
||||
</button>
|
||||
<?php if (in_array($_SESSION['role'],['admin','relawan'])): ?>
|
||||
<button class="btn btn-ghost btn-sm" onclick='editKpm(<?= json_encode($r) ?>)' title="Edit">
|
||||
<i class="fa fa-pen" style="font-size:11px"></i>
|
||||
</button>
|
||||
<?php endif; ?>
|
||||
<?php if (in_array($_SESSION['role'],['admin','pemerintah'])): ?>
|
||||
<button class="btn btn-ghost btn-sm" onclick="tambahBantuan(<?= $r['id'] ?>, '<?= htmlspecialchars($r['nama_kepala_keluarga'],ENT_QUOTES) ?>')" title="Beri Bantuan" style="color:var(--green)">
|
||||
<i class="fa fa-hand-holding-heart" style="font-size:11px"></i>
|
||||
</button>
|
||||
<?php endif; ?>
|
||||
<?php if ($_SESSION['role']==='admin'): ?>
|
||||
<button class="btn btn-ghost btn-sm" onclick="hapusKpm(<?= $r['id'] ?>)" title="Hapus" style="color:var(--red)">
|
||||
<i class="fa fa-trash" style="font-size:11px"></i>
|
||||
</button>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<?php endwhile; endif; ?>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-overlay" id="modalTambah">
|
||||
<div class="modal-box">
|
||||
<div class="modal-head">
|
||||
<h3>Tambah Data KPM</h3>
|
||||
<button class="btn-close" onclick="closeModal('modalTambah')">✕</button>
|
||||
</div>
|
||||
<form method="POST" action="proses.php">
|
||||
<input type="hidden" name="aksi" value="simpan_miskin_form">
|
||||
<div class="modal-body">
|
||||
<div class="form-grid-2">
|
||||
<div class="form-group"><label>Nama Kepala Keluarga *</label><input class="form-control" name="nama_kk" required placeholder="Nama lengkap"></div>
|
||||
<div class="form-group"><label>NIK</label><input class="form-control" name="nik" maxlength="16" placeholder="16 digit"></div>
|
||||
</div>
|
||||
<div class="form-grid-3">
|
||||
<div class="form-group"><label>Tanggal Lahir</label><input class="form-control" type="date" name="tanggal_lahir"></div>
|
||||
<div class="form-group"><label>Jenis Kelamin</label>
|
||||
<select class="form-control" name="jenis_kelamin"><option>Laki-laki</option><option>Perempuan</option></select>
|
||||
</div>
|
||||
<div class="form-group"><label>Tanggungan (jiwa)</label><input class="form-control" type="number" name="jumlah_tanggungan" value="1" min="0"></div>
|
||||
</div>
|
||||
<div class="form-grid-2">
|
||||
<div class="form-group"><label>Pendapatan/Bulan (Rp)</label><input class="form-control" type="number" name="pendapatan_bulanan" value="0" min="0"></div>
|
||||
<div class="form-group"><label>Pekerjaan</label><input class="form-control" name="pekerjaan" placeholder="Buruh harian..."></div>
|
||||
</div>
|
||||
<div class="form-grid-2">
|
||||
<div class="form-group"><label>Kondisi Rumah</label>
|
||||
<select class="form-control" name="kondisi_rumah"><option>Tidak Layak</option><option>Sangat Tidak Layak</option><option>Layak</option></select>
|
||||
</div>
|
||||
<div class="form-group"><label>No. Telp</label><input class="form-control" name="no_telp" placeholder="08xx"></div>
|
||||
</div>
|
||||
<div class="form-grid-3">
|
||||
<div class="form-group"><label>RT/RW</label><input class="form-control" name="rt_rw" placeholder="RT 01/RW 02"></div>
|
||||
<div class="form-group"><label>Kelurahan</label><input class="form-control" name="kelurahan"></div>
|
||||
<div class="form-group"><label>Kecamatan</label><input class="form-control" name="kecamatan"></div>
|
||||
</div>
|
||||
<div class="form-grid-2">
|
||||
<div class="form-group"><label>Latitude *</label><input class="form-control" type="number" name="lat" step="any" required placeholder="-0.026300"></div>
|
||||
<div class="form-group"><label>Longitude *</label><input class="form-control" type="number" name="lng" step="any" required placeholder="109.342500"></div>
|
||||
</div>
|
||||
<div class="form-group"><label>Keterangan</label><textarea class="form-control" name="keterangan" rows="2" placeholder="Catatan tambahan..."></textarea></div>
|
||||
<div style="background:var(--yellow-lt);border-radius:var(--radius-sm);padding:9px 12px;font-size:12px;color:var(--yellow)">
|
||||
Untuk koordinat lebih akurat, gunakan <strong>Peta Interaktif</strong>.
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-foot">
|
||||
<button type="button" class="btn btn-ghost" onclick="closeModal('modalTambah')">Batal</button>
|
||||
<button type="submit" class="btn btn-primary">Simpan</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-overlay" id="modalEdit">
|
||||
<div class="modal-box">
|
||||
<div class="modal-head">
|
||||
<h3>Edit Data KPM</h3>
|
||||
<button class="btn-close" onclick="closeModal('modalEdit')">✕</button>
|
||||
</div>
|
||||
<form method="POST" action="proses.php">
|
||||
<input type="hidden" name="aksi" value="edit_miskin">
|
||||
<input type="hidden" name="id" id="e_id">
|
||||
<div class="modal-body">
|
||||
<div class="form-grid-2">
|
||||
<div class="form-group"><label>Nama KK *</label><input class="form-control" name="nama_kk" id="e_nama" required></div>
|
||||
<div class="form-group"><label>NIK</label><input class="form-control" name="nik" id="e_nik" maxlength="16"></div>
|
||||
</div>
|
||||
<div class="form-grid-3">
|
||||
<div class="form-group"><label>Tanggal Lahir</label><input class="form-control" type="date" name="tanggal_lahir" id="e_tgl"></div>
|
||||
<div class="form-group"><label>Jenis Kelamin</label>
|
||||
<select class="form-control" name="jenis_kelamin" id="e_jk"><option>Laki-laki</option><option>Perempuan</option></select>
|
||||
</div>
|
||||
<div class="form-group"><label>Tanggungan</label><input class="form-control" type="number" name="jumlah_tanggungan" id="e_tang" min="0"></div>
|
||||
</div>
|
||||
<div class="form-grid-2">
|
||||
<div class="form-group"><label>Pendapatan (Rp)</label><input class="form-control" type="number" name="pendapatan_bulanan" id="e_pend" min="0"></div>
|
||||
<div class="form-group"><label>Pekerjaan</label><input class="form-control" name="pekerjaan" id="e_kerja"></div>
|
||||
</div>
|
||||
<div class="form-grid-2">
|
||||
<div class="form-group"><label>Kondisi Rumah</label>
|
||||
<select class="form-control" name="kondisi_rumah" id="e_kond"><option>Tidak Layak</option><option>Sangat Tidak Layak</option><option>Layak</option></select>
|
||||
</div>
|
||||
<div class="form-group"><label>Status Bantuan</label>
|
||||
<select class="form-control" name="status_bantuan" id="e_stat"><option>Belum Terbantu</option><option>Terjangkau</option><option>Sudah Menerima</option></select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-grid-3">
|
||||
<div class="form-group"><label>RT/RW</label><input class="form-control" name="rt_rw" id="e_rtrw"></div>
|
||||
<div class="form-group"><label>Kelurahan</label><input class="form-control" name="kelurahan" id="e_kel"></div>
|
||||
<div class="form-group"><label>Kecamatan</label><input class="form-control" name="kecamatan" id="e_kec"></div>
|
||||
</div>
|
||||
<div class="form-group"><label>No. Telp</label><input class="form-control" name="no_telp" id="e_telp"></div>
|
||||
<div class="form-group"><label>Keterangan</label><textarea class="form-control" name="keterangan" id="e_ket" rows="2"></textarea></div>
|
||||
</div>
|
||||
<div class="modal-foot">
|
||||
<button type="button" class="btn btn-ghost" onclick="closeModal('modalEdit')">Batal</button>
|
||||
<button type="submit" class="btn btn-primary">Simpan Perubahan</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-overlay" id="modalDetail">
|
||||
<div class="modal-box" style="max-width:500px">
|
||||
<div class="modal-head">
|
||||
<h3 id="d_judul">Detail KPM</h3>
|
||||
<button class="btn-close" onclick="closeModal('modalDetail')">✕</button>
|
||||
</div>
|
||||
<div class="modal-body" id="d_body">
|
||||
</div>
|
||||
<div class="modal-foot">
|
||||
<button type="button" class="btn btn-ghost" onclick="closeModal('modalDetail')">Tutup</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-overlay" id="modalBantuan">
|
||||
<div class="modal-box" style="max-width:440px">
|
||||
<div class="modal-head">
|
||||
<h3>Catat Bantuan</h3>
|
||||
<button class="btn-close" onclick="closeModal('modalBantuan')">✕</button>
|
||||
</div>
|
||||
<form method="POST" action="proses.php">
|
||||
<input type="hidden" name="aksi" value="simpan_bantuan">
|
||||
<input type="hidden" name="warga_id" id="b_warga_id">
|
||||
<div class="modal-body">
|
||||
<div id="b_nama_label" style="background:var(--green-lt, #dcfce7);border-radius:var(--radius-sm, 6px);padding:9px 12px;font-size:13px;font-weight:600;color:var(--green, #16a34a);margin-bottom:14px"></div>
|
||||
<div class="form-group"><label>Jenis Bantuan *</label><input class="form-control" name="jenis_bantuan" required placeholder="Sembako, BPNT, Zakat..."></div>
|
||||
<div class="form-grid-2">
|
||||
<div class="form-group"><label>Jumlah / Nominal</label><input class="form-control" name="jumlah" placeholder="50kg beras / Rp500.000"></div>
|
||||
<div class="form-group"><label>Tanggal *</label><input class="form-control" type="date" name="tanggal" required value="<?= date('Y-m-d') ?>"></div>
|
||||
</div>
|
||||
<div class="form-group"><label>Nama Petugas</label><input class="form-control" name="petugas" placeholder="Nama petugas penyalur"></div>
|
||||
<div class="form-group"><label>Keterangan</label><textarea class="form-control" name="keterangan" rows="2" placeholder="Catatan tambahan..."></textarea></div>
|
||||
</div>
|
||||
<div class="modal-foot">
|
||||
<button type="button" class="btn btn-ghost" onclick="closeModal('modalBantuan')">Batal</button>
|
||||
<button type="submit" class="btn btn-success">Simpan</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function openModal(id) {
|
||||
const modal = document.getElementById(id);
|
||||
if(modal) {
|
||||
modal.style.display = 'flex';
|
||||
}
|
||||
}
|
||||
|
||||
function closeModal(id) {
|
||||
const modal = document.getElementById(id);
|
||||
if(modal) {
|
||||
modal.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
// 1. Fungsi Tombol Lihat Detail (Membuat table rapi di dalam modal body)
|
||||
function lihatDetail(data) {
|
||||
document.getElementById('d_judul').innerText = "📋 Detail: " + data.nama_kepala_keluarga;
|
||||
|
||||
// Fungsi pembantu format rupiah sederhana di JS
|
||||
const formatRupiah = (angka) => {
|
||||
return 'Rp ' + parseInt(angka).toLocaleString('id-ID');
|
||||
};
|
||||
|
||||
let html = `
|
||||
<table class="detail-table">
|
||||
<tr><th>Nama Kepala Keluarga</th><td>${data.nama_kepala_keluarga || '-'}</td></tr>
|
||||
<tr><th>NIK</th><td>${data.nik || '-'}</td></tr>
|
||||
<tr><th>Tanggal Lahir</th><td>${data.tanggal_lahir || '-'}</td></tr>
|
||||
<tr><th>Jenis Kelamin</th><td>${data.jenis_kelamin || '-'}</td></tr>
|
||||
<tr><th>Jumlah Tanggungan</th><td>${data.jumlah_tanggungan || 0} jiwa</td></tr>
|
||||
<tr><th>Pendapatan Bulanan</th><td>${formatRupiah(data.pendapatan_bulanan || 0)}</td></tr>
|
||||
<tr><th>Pekerjaan</th><td>${data.pekerjaan || '-'}</td></tr>
|
||||
<tr><th>Kondisi Rumah</th><td><span class="badge">${data.kondisi_rumah || '-'}</span></td></tr>
|
||||
<tr><th>Status Bantuan</th><td><span class="badge">${data.status_bantuan || '-'}</span></td></tr>
|
||||
<tr><th>Alamat (RT/RW)</th><td>${data.rt_rw || '-'}</td></tr>
|
||||
<tr><th>Kelurahan</th><td>${data.kelurahan || '-'}</td></tr>
|
||||
<tr><th>Kecamatan</th><td>${data.kecamatan || '-'}</td></tr>
|
||||
<tr><th>No. Telepon</th><td>${data.no_telp || '-'}</td></tr>
|
||||
<tr><th>Koordinat</th><td>Lat: ${data.lat || '-'}, Lng: ${data.lng || '-'}</td></tr>
|
||||
<tr><th>Didata Oleh</th><td>${data.relawan || 'Sistem / Admin'}</td></tr>
|
||||
<tr><th>Keterangan</th><td>${data.keterangan || '-'}</td></tr>
|
||||
</table>
|
||||
`;
|
||||
|
||||
document.getElementById('d_body').innerHTML = html;
|
||||
openModal('modalDetail');
|
||||
}
|
||||
|
||||
// 2. Fungsi Tombol Edit (Mengisi form modal secara otomatis)
|
||||
function editKpm(data) {
|
||||
document.getElementById('e_id').value = data.id;
|
||||
document.getElementById('e_nama').value = data.nama_kepala_keluarga;
|
||||
document.getElementById('e_nik').value = data.nik;
|
||||
document.getElementById('e_tgl').value = data.tanggal_lahir;
|
||||
document.getElementById('e_jk').value = data.jenis_kelamin;
|
||||
document.getElementById('e_tang').value = data.jumlah_tanggungan;
|
||||
document.getElementById('e_pend').value = data.pendapatan_bulanan;
|
||||
document.getElementById('e_kerja').value = data.pekerjaan;
|
||||
document.getElementById('e_kond').value = data.kondisi_rumah;
|
||||
document.getElementById('e_stat').value = data.status_bantuan;
|
||||
document.getElementById('e_rtrw').value = data.rt_rw;
|
||||
document.getElementById('e_kel').value = data.kelurahan;
|
||||
document.getElementById('e_kec').value = data.kecamatan;
|
||||
document.getElementById('e_telp').value = data.no_telp;
|
||||
document.getElementById('e_ket').value = data.keterangan;
|
||||
|
||||
openModal('modalEdit');
|
||||
}
|
||||
|
||||
// 3. Fungsi Tombol Beri Bantuan
|
||||
function tambahBantuan(id, nama) {
|
||||
document.getElementById('b_warga_id').value = id;
|
||||
document.getElementById('b_nama_label').innerHTML = "<i class='fa fa-user'></i> Salurkan bantuan untuk: <strong>" + nama + "</strong>";
|
||||
openModal('modalBantuan');
|
||||
}
|
||||
|
||||
// 4. Fungsi Tombol Hapus KPM
|
||||
function hapusKpm(id) {
|
||||
if (confirm('Apakah Anda yakin ingin menghapus data Keluarga Penerima Manfaat (KPM) ini? Tindakan ini tidak bisa dibatalkan.')) {
|
||||
const form = document.createElement('form');
|
||||
form.method = 'POST';
|
||||
form.action = 'proses.php';
|
||||
|
||||
form.innerHTML = `
|
||||
<input type="hidden" name="aksi" value="hapus_miskin">
|
||||
<input type="hidden" name="id" value="${id}">
|
||||
`;
|
||||
document.body.appendChild(form);
|
||||
form.submit();
|
||||
}
|
||||
}
|
||||
|
||||
// Menutup modal otomatis jika area background gelap diklik
|
||||
window.onclick = function(event) {
|
||||
if (event.target.classList.contains('modal-overlay')) {
|
||||
event.target.style.display = 'none';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<?php
|
||||
include 'includes/footer.php';
|
||||
?>
|
||||
@@ -0,0 +1,143 @@
|
||||
<?php
|
||||
require_once 'koneksi.php';
|
||||
if (session_status() === PHP_SESSION_NONE) { session_start(); }
|
||||
// Jika sudah login, tombol otomatis mengarah ke dashboard internal baru
|
||||
$sudahLogin = isset($_SESSION['user_id']);
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
<html lang="id">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Portal WebGIS Pendataan Rumah Miskin</title>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body { font-family: 'Inter', sans-serif; background: #f8fafc; color: #1e293b; scroll-behavior: smooth; }
|
||||
nav { background: white; padding: 20px 40px; display: flex; justify-content: space-between; align-items: center; position: fixed; width: 100%; top:0; z-index: 1000; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
|
||||
.logo { font-size: 18px; font-weight: 800; color: #0f172a; display: flex; align-items: center; gap: 8px; }
|
||||
.logo i { color: #3b82f6; }
|
||||
.nav-links { display: flex; gap: 30px; list-style: none; align-items: center; }
|
||||
.nav-links a { text-decoration: none; color: #64748b; font-size: 14px; font-weight: 500; transition: 0.2s; }
|
||||
.nav-links a:hover { color: #3b82f6; }
|
||||
.btn-portal { background: #3b82f6; color: white !important; padding: 10px 20px; border-radius: 8px; font-weight: 600 !important; box-shadow: 0 4px 10px rgba(59,130,246,0.2); text-decoration: none; }
|
||||
.btn-portal:hover { background: #2563eb; }
|
||||
header { padding: 160px 40px 100px; display: flex; align-items: center; justify-content: space-between; max-width: 1200px; margin: 0 auto; gap: 60px; min-height: 85vh; }
|
||||
.hero-text { flex: 1; }
|
||||
.hero-text h1 { font-size: 44px; font-weight: 800; color: #0f172a; line-height: 1.2; margin-bottom: 20px; }
|
||||
.hero-text h1 span { color: #3b82f6; }
|
||||
.hero-text p { color: #64748b; font-size: 16px; line-height: 1.6; margin-bottom: 30px; }
|
||||
.hero-visual { flex: 1; text-align: center; display: flex; justify-content: center; align-items: center; }
|
||||
.map-icon-box { background: white; border: 1px solid #e2e8f0; padding: 40px; border-radius: 24px; box-shadow: 0 20px 40px rgba(0,0,0,0.04); display: inline-flex; flex-direction: column; align-items: center; gap: 16px; }
|
||||
.map-icon-box i { font-size: 72px; color: #3b82f6; }
|
||||
section { padding: 100px 40px; max-width: 1200px; margin: 0 auto; }
|
||||
section h2 { font-size: 28px; font-weight: 700; color: #0f172a; margin-bottom: 12px; text-align: center; }
|
||||
.section-desc { text-align: center; color: #64748b; font-size: 15px; margin-bottom: 60px; }
|
||||
.tentang-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
|
||||
.feature-card { background: white; padding: 30px; border-radius: 12px; border: 1px solid #e2e8f0; transition: 0.2s; }
|
||||
.feature-card:hover { transform: translateY(-4px); box-shadow: 0 12px 20px rgba(0,0,0,0.03); }
|
||||
.icon-circle { width: 48px; height: 48px; background: #eff6ff; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #3b82f6; font-size: 20px; margin-bottom: 20px; }
|
||||
.kontak-wrapper { background: white; border: 1px solid #e2e8f0; border-radius: 16px; padding: 40px; display: flex; gap: 40px; box-shadow: 0 10px 30px rgba(0,0,0,0.02); }
|
||||
.kontak-info { flex: 1; display: flex; flex-direction: column; gap: 24px; justify-content: center; }
|
||||
.info-item { display: flex; align-items: center; gap: 16px; }
|
||||
.info-item i { font-size: 20px; color: #3b82f6; width: 24px; }
|
||||
.info-item h4 { font-size: 15px; color: #0f172a; font-weight: 600; }
|
||||
.info-item p { font-size: 14px; color: #64748b; margin-top: 2px; }
|
||||
.kontak-form { flex: 1.2; display: flex; flex-direction: column; gap: 16px; }
|
||||
.form-input { padding: 12px; border: 1px solid #cbd5e1; border-radius: 8px; outline: none; font-family: inherit; font-size: 14px; }
|
||||
.btn-send { background: #0f172a; color: white; border: none; padding: 12px; border-radius: 8px; font-weight: 600; cursor: pointer; transition: 0.2s; }
|
||||
.btn-send:hover { background: #1e293b; }
|
||||
footer { background: #0f172a; color: #94a3b8; text-align: center; padding: 40px 20px; font-size: 14px; border-top: 1px solid #1e293b; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav>
|
||||
<div class="logo"><i class="fa fa-map-location-dot"></i> WebGIS Poverty</div>
|
||||
<ul class="nav-links">
|
||||
<li><a href="#beranda">Beranda</a></li>
|
||||
<li><a href="#tentang">Tentang</a></li>
|
||||
<li><a href="#kontak">Kontak</a></li>
|
||||
<li>
|
||||
<?php if ($sudahLogin): ?>
|
||||
<a href="login.php" class="btn-portal"><i class="fa fa-gauge"></i> Dashboard</a>
|
||||
<?php else: ?>
|
||||
<a href="login.php" class="btn-portal"><i class="fa fa-right-to-bracket"></i> Log In</a>
|
||||
<?php endif; ?>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<header id="beranda">
|
||||
<div class="hero-text">
|
||||
<h1>Pemetaan Digital & Akurasi <span>Data Kemiskinan</span> Daerah.</h1>
|
||||
<p>Sistem integrasi pemetaan WebGIS untuk menyelaraskan verifikasi klaster penerima bantuan (KPM) antara pihak Pemerintah, Dinas Sosial, Relawan Lapangan, serta Operator Lembaga Rumah Ibadah secara waktu-nyata.</p>
|
||||
<a href="login.php" class="btn-portal" style="padding: 14px 28px; font-size: 15px;">Mulai Pendataan Sistem <i class="fa fa-arrow-right" style="margin-left: 6px;"></i></a>
|
||||
</div>
|
||||
<div class="hero-visual">
|
||||
<div class="map-icon-box">
|
||||
<i class="fa fa-earth-asia"></i>
|
||||
<span style="font-weight: 700; color: #0f172a; font-size: 16px;">Sistem Geografis Terpadu</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section id="tentang">
|
||||
<h2>Pilar Integrasi Sistem</h2>
|
||||
<p class="section-desc">Mekanisme kerja teratur guna memperkecil celah salah sasaran alokasi bantuan sosial.</p>
|
||||
<div class="tentang-grid">
|
||||
<div class="feature-card">
|
||||
<div class="icon-circle"><i class="fa fa-landmark"></i></div>
|
||||
<h3 style="font-size: 16px; margin-bottom: 10px;">Otoritas Pemerintah</h3>
|
||||
<p style="font-size: 14px; color: #64748b; line-height: 1.5;">Menyusun kebijakan program bantuan mentah, mengawasi peta sebaran spasial makro, dan meluncurkan pagu anggaran terpusat.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="icon-circle"><i class="fa fa-route"></i></div>
|
||||
<h3 style="font-size: 16px; margin-bottom: 10px;">Verifikasi Relawan</h3>
|
||||
<p style="font-size: 14px; color: #64748b; line-height: 1.5;">Melakukan peninjauan koordinat fisik rumah tinggal (KPM) di lapangan untuk memastikan keaslian tingkat kelayakan ekonomi.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="icon-circle"><i class="fa fa-hand-holding-heart"></i></div>
|
||||
<h3 style="font-size: 16px; margin-bottom: 10px;">Distribusi Lembaga</h3>
|
||||
<p style="font-size: 14px; color: #64748b; line-height: 1.5;">Operator internal pada titik peribadatan menyalurkan fisik komoditas bantuan dan melakukan validasi akhir status salur.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="kontak">
|
||||
<h2>Pusat Bantuan & Layanan</h2>
|
||||
<p class="section-desc">Punya kendala teknis operasional sistem atau pengajuan akun baru? Hubungi tim kami.</p>
|
||||
<div class="kontak-wrapper">
|
||||
<div class="kontak-info">
|
||||
<div class="info-item">
|
||||
<i class="fa fa-envelope"></i>
|
||||
<div>
|
||||
<h4>Kirim Email</h4>
|
||||
<p>support.poverty@domain.go.id</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<i class="fa fa-phone"></i>
|
||||
<div>
|
||||
<h4>Hubungi Call Center</h4>
|
||||
<p>(021) 8892-1293 / Dinas Sosial</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<i class="fa fa-location-dot"></i>
|
||||
<div>
|
||||
<h4>Kantor Operasional</h4>
|
||||
<p>Gedung Administrasi Terpadu, Lt. 3 Command Center</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<p>© <?= date('Y') ?> WebGIS Poverty Mapping Project. All Rights Reserved.</p>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+50
@@ -0,0 +1,50 @@
|
||||
<?php
|
||||
// koneksi.php
|
||||
session_start();
|
||||
|
||||
define('DB_HOST', 'localhost');
|
||||
define('DB_USER', 'root');
|
||||
define('DB_PASS', '');
|
||||
define('DB_NAME', 'db_bantuan');
|
||||
define('APP_NAME', 'WebGIS Poverty Mapping');
|
||||
define('APP_VERSION', '2.0');
|
||||
|
||||
$conn = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME);
|
||||
if ($conn->connect_error) {
|
||||
die(json_encode(['status'=>'error','message'=>'Koneksi DB gagal: '.$conn->connect_error]));
|
||||
}
|
||||
$conn->set_charset('utf8mb4');
|
||||
|
||||
// Helper: sanitasi
|
||||
function bersih($str, $conn) {
|
||||
return $conn->real_escape_string(htmlspecialchars(strip_tags(trim($str))));
|
||||
}
|
||||
|
||||
// Helper: cek login
|
||||
function cekLogin() {
|
||||
if (!isset($_SESSION['user_id'])) {
|
||||
header('Location: login.php');
|
||||
exit;
|
||||
}
|
||||
}
|
||||
|
||||
// Helper: cek role
|
||||
function cekRole(...$roles) {
|
||||
if (!in_array($_SESSION['role'] ?? '', $roles)) {
|
||||
header('Location: index.php?error=akses_ditolak');
|
||||
exit;
|
||||
}
|
||||
}
|
||||
|
||||
// Helper: format rupiah
|
||||
function rupiah($angka) {
|
||||
return 'Rp ' . number_format($angka, 0, ',', '.');
|
||||
}
|
||||
|
||||
// Helper: usia dari tanggal lahir
|
||||
function hitungUsia($tgl) {
|
||||
if (!$tgl || $tgl === '0000-00-00') return '-';
|
||||
$lahir = new DateTime($tgl);
|
||||
$sekarang = new DateTime();
|
||||
return $lahir->diff($sekarang)->y . ' th';
|
||||
}
|
||||
Reference in New Issue
Block a user