diff --git a/api/dashboard/stats.php b/api/dashboard/stats.php new file mode 100644 index 0000000..f058620 --- /dev/null +++ b/api/dashboard/stats.php @@ -0,0 +1,196 @@ +query("SELECT * FROM rumah_ibadah WHERE id=$ibadahId"); +} else { + $riRes = $conn->query("SELECT * FROM rumah_ibadah"); +} +$ibadahList = []; +while ($row = $riRes->fetch_assoc()) $ibadahList[] = $row; +$totalIbadah = count($ibadahList); + +// Distribusi per jenis +$jenisDist = []; +foreach ($ibadahList as $ib) { + $j = $ib['jenis'] ?? 'Lainnya'; + $jenisDist[$j] = ($jenisDist[$j] ?? 0) + 1; +} + +// ── 2. Penduduk Miskin ──────────────────────────────────────────────────── +$pmRes = $conn->query("SELECT * FROM penduduk_miskin"); +$allMiskin = []; +while ($row = $pmRes->fetch_assoc()) $allMiskin[] = $row; + +// Filter: pengelola hanya lihat yang dalam radius ibadahnya +if ($isPengelola && $ibadahId && !empty($ibadahList)) { + $ib = $ibadahList[0]; + $filteredMiskin = array_filter($allMiskin, function($m) use ($ib) { + return haversine((float)$ib['lat'], (float)$ib['lng'], (float)$m['lat'], (float)$m['lng']) <= (float)$ib['radius']; + }); + $filteredMiskin = array_values($filteredMiskin); +} else { + $filteredMiskin = $allMiskin; +} + +$totalMiskin = count($filteredMiskin); +$totalJiwa = array_sum(array_column($filteredMiskin, 'jumlah_jiwa')); + +// Kategori bantuan +$kategoriDist = []; +foreach ($filteredMiskin as $m) { + $k = $m['kategori_bantuan'] ?? 'Lainnya'; + $kategoriDist[$k] = ($kategoriDist[$k] ?? 0) + 1; +} + +// Terurus vs Tidak (dalam radius salah satu ibadah) +$terurusCount = 0; +$tidakTerurusCount = 0; +foreach ($filteredMiskin as $m) { + $inAnyRadius = false; + foreach ($ibadahList as $ib) { + if (haversine((float)$ib['lat'], (float)$ib['lng'], (float)$m['lat'], (float)$m['lng']) <= (float)$ib['radius']) { + $inAnyRadius = true; + break; + } + } + if ($inAnyRadius) $terurusCount++; + else $tidakTerurusCount++; +} + +// Jika admin: hitung seluruh miskin dalam radius seluruh ibadah +if (!$isPengelola) { + $allIbadahRes = $conn->query("SELECT * FROM rumah_ibadah"); + $allIbadahList = []; + while ($row = $allIbadahRes->fetch_assoc()) $allIbadahList[] = $row; + + $terurusCount = 0; + $tidakTerurusCount = 0; + foreach ($allMiskin as $m) { + $inAnyRadius = false; + foreach ($allIbadahList as $ib) { + if (haversine((float)$ib['lat'], (float)$ib['lng'], (float)$m['lat'], (float)$m['lng']) <= (float)$ib['radius']) { + $inAnyRadius = true; + break; + } + } + if ($inAnyRadius) $terurusCount++; + else $tidakTerurusCount++; + } +} + +// ── 3. Log Bantuan ──────────────────────────────────────────────────────── +if ($isPengelola && $ibadahId) { + $logRes = $conn->query(" + SELECT lb.*, ri.nama as nama_ibadah, ri.jenis as jenis_ibadah, pm.nama as nama_kk + FROM log_bantuan lb + JOIN rumah_ibadah ri ON ri.id = lb.ibadah_id + JOIN penduduk_miskin pm ON pm.id = lb.miskin_id + WHERE lb.ibadah_id = $ibadahId + ORDER BY lb.tanggal DESC, lb.id DESC + LIMIT 10 + "); + $totalLogRes = $conn->query("SELECT COUNT(*) as cnt FROM log_bantuan WHERE ibadah_id=$ibadahId"); +} else { + $logRes = $conn->query(" + SELECT lb.*, ri.nama as nama_ibadah, ri.jenis as jenis_ibadah, pm.nama as nama_kk + FROM log_bantuan lb + JOIN rumah_ibadah ri ON ri.id = lb.ibadah_id + JOIN penduduk_miskin pm ON pm.id = lb.miskin_id + ORDER BY lb.tanggal DESC, lb.id DESC + LIMIT 10 + "); + $totalLogRes = $conn->query("SELECT COUNT(*) as cnt FROM log_bantuan"); +} + +$recentLogs = []; +while ($row = $logRes->fetch_assoc()) $recentLogs[] = $row; + +$totalLog = 0; +if ($totalLogRes && $trow = $totalLogRes->fetch_assoc()) $totalLog = (int)$trow['cnt']; + +// Distribusi tipe bantuan dari log +$tipeDist = []; +if ($isPengelola && $ibadahId) { + $tipeRes = $conn->query("SELECT tipe_bantuan, COUNT(*) as cnt FROM log_bantuan WHERE ibadah_id=$ibadahId GROUP BY tipe_bantuan"); +} else { + $tipeRes = $conn->query("SELECT tipe_bantuan, COUNT(*) as cnt FROM log_bantuan GROUP BY tipe_bantuan"); +} +while ($row = $tipeRes->fetch_assoc()) $tipeDist[$row['tipe_bantuan']] = (int)$row['cnt']; + +// Bantuan per bulan (6 bulan terakhir) +if ($isPengelola && $ibadahId) { + $bulanRes = $conn->query(" + SELECT DATE_FORMAT(tanggal, '%Y-%m') as bulan, COUNT(*) as cnt + FROM log_bantuan + WHERE ibadah_id=$ibadahId AND tanggal >= DATE_SUB(CURDATE(), INTERVAL 6 MONTH) + GROUP BY bulan ORDER BY bulan ASC + "); +} else { + $bulanRes = $conn->query(" + SELECT DATE_FORMAT(tanggal, '%Y-%m') as bulan, COUNT(*) as cnt + FROM log_bantuan + WHERE tanggal >= DATE_SUB(CURDATE(), INTERVAL 6 MONTH) + GROUP BY bulan ORDER BY bulan ASC + "); +} +$bantuanPerBulan = []; +while ($row = $bulanRes->fetch_assoc()) $bantuanPerBulan[] = $row; + +// ── 4. Ibadah Tipe (admin only: performa per ibadah) ───────────────────── +$ibadahPerforma = []; +if (!$isPengelola) { + $perfRes = $conn->query(" + SELECT ri.id, ri.nama, ri.jenis, ri.radius, + COUNT(DISTINCT lb.id) as total_log, + COUNT(DISTINCT lb.miskin_id) as total_penerima + FROM rumah_ibadah ri + LEFT JOIN log_bantuan lb ON lb.ibadah_id = ri.id + GROUP BY ri.id + ORDER BY total_log DESC + "); + while ($row = $perfRes->fetch_assoc()) $ibadahPerforma[] = $row; +} + +// ── Output ──────────────────────────────────────────────────────────────── +echo json_encode([ + 'status' => 'success', + 'role' => $user['role'], + 'ibadah_id' => $ibadahId, + 'stats' => [ + 'total_ibadah' => $totalIbadah, + 'total_miskin' => $totalMiskin, + 'total_jiwa' => $totalJiwa, + 'total_log' => $totalLog, + 'terurus' => $terurusCount, + 'tidak_terurus' => $tidakTerurusCount, + 'pct_terurus' => $totalMiskin > 0 ? round($terurusCount / $totalMiskin * 100, 1) : 0, + ], + 'distribusi' => [ + 'jenis_ibadah' => $jenisDist, + 'kategori' => $kategoriDist, + 'tipe_bantuan' => $tipeDist, + 'per_bulan' => $bantuanPerBulan, + ], + 'ibadah_list' => $ibadahList, + 'ibadah_performa' => $ibadahPerforma, + 'recent_logs' => $recentLogs, +]); diff --git a/api/penduduk_miskin/bulk_create.php b/api/penduduk_miskin/bulk_create.php index 2e2a65d..974d79a 100644 --- a/api/penduduk_miskin/bulk_create.php +++ b/api/penduduk_miskin/bulk_create.php @@ -4,11 +4,29 @@ require_once '../auth_helper.php'; requireAdminOrPengelola(); include_once '../db_connect.php'; +// Ambil info ibadah pengelola jika role pengelola +$currentUser = getCurrentUser(); +$ibadahFilter = null; // null = admin (tidak dibatasi) +if ($currentUser && $currentUser['role'] === 'pengelola') { + $ibadah_id = $currentUser['ibadah_id']; + if (!$ibadah_id) { + echo json_encode(['status' => 'error', 'message' => 'Akun pengelola tidak terhubung ke rumah ibadah manapun.']); + exit; + } + $res = $conn->query("SELECT lat, lng, radius FROM rumah_ibadah WHERE id=$ibadah_id"); + if (!$res || $res->num_rows === 0) { + echo json_encode(['status' => 'error', 'message' => 'Rumah ibadah yang dikelola tidak ditemukan.']); + exit; + } + $ibadahFilter = $res->fetch_assoc(); +} + $data = json_decode(file_get_contents("php://input")); if (is_array($data)) { $conn->begin_transaction(); $inserted = 0; + $skipped = 0; $errors = []; foreach ($data as $item) { if (isset($item->lat) && isset($item->lng) && $item->lat !== '' && $item->lng !== '') { @@ -18,6 +36,21 @@ if (is_array($data)) { $lat = (float)$item->lat; $lng = (float)$item->lng; + // Jika pengelola, cek apakah item berada dalam radius ibadahnya + if ($ibadahFilter !== null) { + $R = 6371000; + $lat1 = deg2rad((float)$ibadahFilter['lat']); + $lat2 = deg2rad($lat); + $dLat = $lat2 - $lat1; + $dLng = deg2rad($lng - (float)$ibadahFilter['lng']); + $a = sin($dLat/2)*sin($dLat/2) + cos($lat1)*cos($lat2)*sin($dLng/2)*sin($dLng/2); + $dist = $R * 2 * atan2(sqrt($a), sqrt(1-$a)); + if ($dist > (float)$ibadahFilter['radius']) { + $skipped++; + continue; // Lewati item di luar radius + } + } + $query = "INSERT INTO penduduk_miskin (nama, kategori_bantuan, jumlah_jiwa, lat, lng) VALUES ('$nama', '$kategori', $jumlah_jiwa, $lat, $lng)"; @@ -31,10 +64,15 @@ if (is_array($data)) { if (empty($errors) && $inserted > 0) { $conn->commit(); - echo json_encode(["status" => "success", "message" => "Berhasil mengimpor $inserted data penduduk miskin."]); + $msg = "Berhasil mengimpor $inserted data penduduk miskin."; + if ($skipped > 0) $msg .= " ($skipped data di luar radius diabaikan.)"; + echo json_encode(["status" => "success", "message" => $msg]); } else if ($inserted === 0) { $conn->rollback(); - echo json_encode(["status" => "error", "message" => "Tidak ada data valid yang diimpor."]); + $msg = $skipped > 0 + ? "Semua $skipped data berada di luar radius rumah ibadah Anda, tidak ada yang diimpor." + : "Tidak ada data valid yang diimpor."; + echo json_encode(["status" => "error", "message" => $msg]); } else { $conn->rollback(); echo json_encode(["status" => "error", "message" => "Gagal mengimpor beberapa data. Transaksi dibatalkan.", "errors" => $errors]); diff --git a/api/penduduk_miskin/create.php b/api/penduduk_miskin/create.php index 51f9ec9..85037bd 100644 --- a/api/penduduk_miskin/create.php +++ b/api/penduduk_miskin/create.php @@ -27,6 +27,38 @@ if (!empty($_POST)) { } } +// Validasi pengelola: hanya boleh tambah jika lokasi berada dalam radius ibadah yang dikelolanya +$currentUser = getCurrentUser(); +if ($currentUser && $currentUser['role'] === 'pengelola') { + $ibadah_id = $currentUser['ibadah_id']; + if (!$ibadah_id) { + http_response_code(403); + echo json_encode(['status' => 'error', 'message' => 'Akun pengelola tidak terhubung ke rumah ibadah manapun.']); + exit; + } + // Ambil data ibadah (lat, lng, radius) + $res = $conn->query("SELECT lat, lng, radius FROM rumah_ibadah WHERE id=$ibadah_id"); + if (!$res || $res->num_rows === 0) { + http_response_code(403); + echo json_encode(['status' => 'error', 'message' => 'Rumah ibadah yang dikelola tidak ditemukan.']); + exit; + } + $ib = $res->fetch_assoc(); + // Hitung jarak menggunakan Haversine formula + $R = 6371000; // meter + $lat1 = deg2rad((float)$ib['lat']); + $lat2 = deg2rad($lat); + $dLat = $lat2 - $lat1; + $dLng = deg2rad($lng - (float)$ib['lng']); + $a = sin($dLat/2)*sin($dLat/2) + cos($lat1)*cos($lat2)*sin($dLng/2)*sin($dLng/2); + $dist = $R * 2 * atan2(sqrt($a), sqrt(1-$a)); + if ($dist > (float)$ib['radius']) { + http_response_code(403); + echo json_encode(['status' => 'error', 'message' => 'Lokasi penduduk di luar radius rumah ibadah Anda. Hanya boleh menambah penduduk dalam radius yang dikelola.']); + exit; + } +} + if ($lat != 0 && $lng != 0) { $upload_dir = "../../uploads/"; if (!file_exists($upload_dir)) { diff --git a/api/penduduk_miskin/delete.php b/api/penduduk_miskin/delete.php index 839ef2f..b994db8 100644 --- a/api/penduduk_miskin/delete.php +++ b/api/penduduk_miskin/delete.php @@ -9,6 +9,49 @@ $data = json_decode(file_get_contents("php://input")); if(!empty($data->id)) { $id = (int)$data->id; + // Validasi pengelola: hanya boleh hapus penduduk dalam radius ibadah yang dikelolanya + $currentUser = getCurrentUser(); + if ($currentUser && $currentUser['role'] === 'pengelola') { + $ibadah_id = $currentUser['ibadah_id']; + if (!$ibadah_id) { + http_response_code(403); + echo json_encode(['status' => 'error', 'message' => 'Akun pengelola tidak terhubung ke rumah ibadah manapun.']); + exit; + } + // Ambil koordinat penduduk + $mRes = $conn->query("SELECT lat, lng FROM penduduk_miskin WHERE id=$id"); + if (!$mRes || $mRes->num_rows === 0) { + echo json_encode(['status' => 'error', 'message' => 'Data penduduk tidak ditemukan.']); + exit; + } + $mRow = $mRes->fetch_assoc(); + $pLat = (float)$mRow['lat']; + $pLng = (float)$mRow['lng']; + + // Ambil data ibadah + $iRes = $conn->query("SELECT lat, lng, radius FROM rumah_ibadah WHERE id=$ibadah_id"); + if (!$iRes || $iRes->num_rows === 0) { + http_response_code(403); + echo json_encode(['status' => 'error', 'message' => 'Rumah ibadah yang dikelola tidak ditemukan.']); + exit; + } + $ib = $iRes->fetch_assoc(); + + // Hitung jarak Haversine + $R = 6371000; + $lat1 = deg2rad((float)$ib['lat']); + $lat2 = deg2rad($pLat); + $dLat = $lat2 - $lat1; + $dLng = deg2rad($pLng - (float)$ib['lng']); + $a = sin($dLat/2)*sin($dLat/2) + cos($lat1)*cos($lat2)*sin($dLng/2)*sin($dLng/2); + $dist = $R * 2 * atan2(sqrt($a), sqrt(1-$a)); + if ($dist > (float)$ib['radius']) { + http_response_code(403); + echo json_encode(['status' => 'error', 'message' => 'Penduduk ini berada di luar radius rumah ibadah Anda. Tidak diizinkan menghapus.']); + exit; + } + } + $query = "DELETE FROM penduduk_miskin WHERE id=$id"; if($conn->query($query)) { diff --git a/api/penduduk_miskin/update.php b/api/penduduk_miskin/update.php index 532718e..2f8539c 100644 --- a/api/penduduk_miskin/update.php +++ b/api/penduduk_miskin/update.php @@ -30,6 +30,47 @@ if (!empty($_POST)) { } } +// Validasi pengelola: hanya boleh edit penduduk yang lokasinya dalam radius ibadah yang dikelolanya +$currentUser = getCurrentUser(); +if ($currentUser && $currentUser['role'] === 'pengelola') { + $ibadah_id = $currentUser['ibadah_id']; + if (!$ibadah_id) { + http_response_code(403); + echo json_encode(['status' => 'error', 'message' => 'Akun pengelola tidak terhubung ke rumah ibadah manapun.']); + exit; + } + $res = $conn->query("SELECT lat, lng, radius FROM rumah_ibadah WHERE id=$ibadah_id"); + if (!$res || $res->num_rows === 0) { + http_response_code(403); + echo json_encode(['status' => 'error', 'message' => 'Rumah ibadah yang dikelola tidak ditemukan.']); + exit; + } + $ib = $res->fetch_assoc(); + // Gunakan koordinat penduduk yang sedang diedit (dari DB jika lat/lng 0, atau dari input) + $checkLat = $lat; + $checkLng = $lng; + if ($checkLat == 0 && $checkLng == 0 && $id > 0) { + $mRes = $conn->query("SELECT lat, lng FROM penduduk_miskin WHERE id=$id"); + if ($mRes && $mRow = $mRes->fetch_assoc()) { + $checkLat = (float)$mRow['lat']; + $checkLng = (float)$mRow['lng']; + } + } + $R = 6371000; + $lat1 = deg2rad((float)$ib['lat']); + $lat2 = deg2rad($checkLat); + $dLat = $lat2 - $lat1; + $dLng = deg2rad($checkLng - (float)$ib['lng']); + $a = sin($dLat/2)*sin($dLat/2) + cos($lat1)*cos($lat2)*sin($dLng/2)*sin($dLng/2); + $dist = $R * 2 * atan2(sqrt($a), sqrt(1-$a)); + if ($dist > (float)$ib['radius']) { + http_response_code(403); + echo json_encode(['status' => 'error', 'message' => 'Penduduk ini berada di luar radius rumah ibadah Anda. Tidak diizinkan mengedit.']); + exit; + } +} + + if ($id > 0) { // Get current files to delete them if updated $old_foto_rumah = null; diff --git a/assets/css/style.css b/assets/css/style.css index 7dd697c..385032c 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -22,8 +22,8 @@ body, html { .ui-container { position: absolute; top: 20px; - left: 50%; - transform: translateX(-50%); + left: 30%; + transform: translateX(-70%); z-index: 1000; width: 100%; max-width: 400px; @@ -1020,3 +1020,268 @@ body.right-panel-open .auth-widget { border-bottom: 1px solid #e2e8f0; } + +/* ============================================================ + DASHBOARD STYLES + ============================================================ */ + +#dashboardModal .modal-content { + width: min(920px, 96vw); + max-height: 90vh; + overflow: hidden; + display: flex; + flex-direction: column; +} + +#dashboardModal .modal-header { + background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4338ca 100%); + border-radius: 12px 12px 0 0; + padding: 18px 20px; + flex-shrink: 0; +} + +#dashboardModal .modal-header h3 { + color: white; + font-size: 17px; + font-weight: 700; + letter-spacing: 0.3px; +} + +#dashboardModal .modal-close { + color: rgba(255,255,255,0.7); + font-size: 22px; + transition: color 0.2s; +} +#dashboardModal .modal-close:hover { color: white; } + +#dashboardBody { + flex: 1; + overflow-y: auto; + padding: 20px; + display: flex; + flex-direction: column; + gap: 20px; + background: #f1f5f9; +} + +.db-loading { + display: flex; + align-items: center; + justify-content: center; + gap: 14px; + padding: 60px 0; + color: #6b7280; + font-size: 14px; +} + +.db-spinner { + width: 28px; + height: 28px; + border: 3px solid #e2e8f0; + border-top-color: #6366f1; + border-radius: 50%; + animation: dbSpin 0.7s linear infinite; +} +@keyframes dbSpin { to { transform: rotate(360deg); } } + +.db-error { + text-align: center; + color: #ef4444; + padding: 40px; + font-size: 14px; +} + +.db-ibadah-header { + background: linear-gradient(135deg, #312e81, #4338ca); + border-radius: 14px; + padding: 16px 20px; + display: flex; + align-items: center; + gap: 16px; + color: white; + box-shadow: 0 4px 20px rgba(67,56,202,0.3); +} + +.db-ibadah-emoji { font-size: 36px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)); } +.db-ibadah-name { font-size: 18px; font-weight: 700; } +.db-ibadah-meta { font-size: 12px; color: rgba(255,255,255,0.75); margin-top: 3px; } + +.db-kpi-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); + gap: 14px; +} + +.db-kpi-card { + background: white; + border-radius: 16px; + padding: 18px 16px; + display: flex; + flex-direction: column; + align-items: center; + gap: 6px; + box-shadow: 0 2px 8px rgba(0,0,0,0.06); + transition: transform 0.2s, box-shadow 0.2s; + position: relative; + overflow: hidden; +} + +.db-kpi-card::before { + content: ''; + position: absolute; + top: 0; left: 0; right: 0; + height: 4px; + border-radius: 16px 16px 0 0; +} + +.kpi-ibadah::before { background: linear-gradient(90deg, #f97316, #ea580c); } +.kpi-miskin::before { background: linear-gradient(90deg, #ef4444, #dc2626); } +.kpi-jiwa::before { background: linear-gradient(90deg, #6366f1, #4f46e5); } +.kpi-log::before { background: linear-gradient(90deg, #22c55e, #16a34a); } + +.db-kpi-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); } + +.db-kpi-icon { font-size: 28px; line-height: 1; margin-bottom: 2px; } +.db-kpi-val { font-size: 32px; font-weight: 800; color: #1e1e2e; line-height: 1; } +.db-kpi-label { font-size: 11px; font-weight: 600; color: #6b7280; text-align: center; text-transform: uppercase; letter-spacing: 0.4px; } + +.db-section { + background: white; + border-radius: 14px; + padding: 16px 18px; + box-shadow: 0 2px 8px rgba(0,0,0,0.06); +} + +.db-section-title { + font-size: 13px; + font-weight: 700; + color: #374151; + margin-bottom: 12px; + letter-spacing: 0.2px; +} + +.db-coverage-labels { + display: flex; + justify-content: space-between; + font-size: 13px; + color: #374151; + flex-wrap: wrap; + gap: 6px; + margin-bottom: 8px; +} + +.db-progress-bar { + height: 12px; + background: #fee2e2; + border-radius: 99px; + overflow: hidden; +} + +.db-progress-fill { + height: 100%; + border-radius: 99px; + transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1); +} + +.db-charts-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + gap: 14px; +} + +.db-chart-card { + background: white; + border-radius: 14px; + padding: 14px 16px; + box-shadow: 0 2px 8px rgba(0,0,0,0.06); +} + +.db-chart-wide { grid-column: 1 / -1; } + +.db-chart-title { + font-size: 11px; + font-weight: 700; + color: #374151; + margin-bottom: 12px; + text-transform: uppercase; + letter-spacing: 0.4px; +} + +.db-chart-card canvas { width: 100% !important; display: block; } + +.db-log-list { + display: flex; + flex-direction: column; + gap: 8px; + max-height: 260px; + overflow-y: auto; +} + +.db-log-item { + display: flex; + align-items: flex-start; + gap: 10px; + padding: 10px 12px; + background: #f8fafc; + border-radius: 10px; + transition: background 0.15s; +} + +.db-log-item:hover { background: #f1f5f9; } + +.db-log-dot { + width: 8px; height: 8px; + border-radius: 50%; + background: #6366f1; + flex-shrink: 0; + margin-top: 5px; +} + +.db-log-info { flex: 1; min-width: 0; } + +.db-log-main { + font-size: 12px; + font-weight: 600; + color: #1e1e2e; + display: flex; + gap: 6px; + flex-wrap: wrap; + align-items: center; +} + +.db-log-tipe { + background: #ede9fe; + color: #4f46e5; + padding: 1px 7px; + border-radius: 99px; + font-size: 11px; + font-weight: 700; +} + +.db-log-kk { color: #374151; } + +.db-log-meta { font-size: 10px; color: #9ca3af; margin-top: 3px; } + +.db-table-wrap { + overflow-x: auto; + border-radius: 8px; + border: 1px solid #e5e7eb; +} + +.db-table { width: 100%; border-collapse: collapse; font-size: 13px; } +.db-table thead tr { background: #f8fafc; } +.db-table th { padding: 10px 14px; text-align: left; font-size: 11px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.4px; border-bottom: 1px solid #e5e7eb; } +.db-table td { padding: 10px 14px; color: #374151; border-bottom: 1px solid #f3f4f6; } +.db-table tbody tr:last-child td { border-bottom: none; } +.db-table tbody tr:hover td { background: #f8fafc; } + +.db-badge { + background: linear-gradient(135deg, #6366f1, #4f46e5); + color: white; + padding: 2px 9px; + border-radius: 99px; + font-size: 11px; + font-weight: 700; +} + +.db-empty { text-align: center; color: #aaa; font-size: 13px; padding: 20px; } diff --git a/assets/js/features/auth.js b/assets/js/features/auth.js index 77fe7a4..6d76deb 100644 --- a/assets/js/features/auth.js +++ b/assets/js/features/auth.js @@ -52,6 +52,8 @@ function updateAuthUI() { if (!authWidget) return; + const dashboardBtn = document.getElementById('menuDashboard'); + if (window.currentUser) { // Logged In state const roleLabel = window.currentUser.role === 'admin' ? 'Admin' : 'Pengelola'; @@ -71,6 +73,9 @@ document.getElementById('authLogoutBtn').addEventListener('click', logout); + // Show Dashboard button for all logged-in users + if (dashboardBtn) dashboardBtn.style.display = 'flex'; + // Show user management button in sidebar for Admin const adminDivider = document.getElementById('sidebarAdminDivider'); if (window.currentUser.role === 'admin') { @@ -87,6 +92,7 @@ `; document.getElementById('authLoginBtn').addEventListener('click', showLoginModal); if (menuUsersBtn) menuUsersBtn.style.display = 'none'; + if (dashboardBtn) dashboardBtn.style.display = 'none'; const adminDivider = document.getElementById('sidebarAdminDivider'); if (adminDivider) adminDivider.style.display = 'none'; } @@ -177,6 +183,14 @@ }); } + // Dashboard Button + const menuDashboardBtn = document.getElementById('menuDashboard'); + if (menuDashboardBtn) { + menuDashboardBtn.addEventListener('click', function() { + if (typeof window.openDashboard === 'function') window.openDashboard(); + }); + } + if (closeUserManagementModal) { closeUserManagementModal.addEventListener('click', function() { userManagementModal.classList.remove('show'); diff --git a/assets/js/features/dashboard.js b/assets/js/features/dashboard.js new file mode 100644 index 0000000..92aae21 --- /dev/null +++ b/assets/js/features/dashboard.js @@ -0,0 +1,350 @@ +// ===== Dashboard Feature ===== +// Dashboard informatif untuk Admin dan Pengelola Rumah Ibadah + +(function () { + 'use strict'; + + // ── State ────────────────────────────────────────────────────────────── + let dashboardData = null; + let chartInstances = {}; + + // ── Modal Element ────────────────────────────────────────────────────── + const modal = document.getElementById('dashboardModal'); + if (!modal) return; + + // ── Open / Close ─────────────────────────────────────────────────────── + window.openDashboard = function () { + modal.classList.add('show'); + loadDashboard(); + }; + + window.closeDashboard = function () { + modal.classList.remove('show'); + }; + + document.getElementById('closeDashboardModal')?.addEventListener('click', window.closeDashboard); + modal.addEventListener('click', function (e) { + if (e.target === modal) window.closeDashboard(); + }); + + // ── Load Data ────────────────────────────────────────────────────────── + function loadDashboard() { + const body = document.getElementById('dashboardBody'); + body.innerHTML = ` +
+ + Memuat data dashboard… +
`; + + fetch('api/dashboard/stats.php') + .then(r => r.json()) + .then(data => { + if (data.status !== 'success') throw new Error(data.message); + dashboardData = data; + renderDashboard(data); + }) + .catch(err => { + body.innerHTML = `
❌ Gagal memuat data: ${err.message}
`; + }); + } + + // ── Render ───────────────────────────────────────────────────────────── + function renderDashboard(data) { + const { stats, distribusi, ibadah_list, ibadah_performa, recent_logs, role } = data; + const isPengelola = role === 'pengelola'; + const ibadah = ibadah_list?.[0] ?? null; + + const body = document.getElementById('dashboardBody'); + + // ── Header info ────────────────────────────────────────────────── + let headerHtml = ''; + if (isPengelola && ibadah) { + const emoji = (window.IBADAH_EMOJI || {})[ibadah.jenis] || '🕌'; + headerHtml = ` +
+ ${emoji} +
+
${esc(ibadah.nama)}
+
${esc(ibadah.jenis)}  ·  Radius ${ibadah.radius} m  ·  ${esc(ibadah.alamat || '-')}
+
+
`; + } + + // ── KPI Cards ──────────────────────────────────────────────────── + const pctTerurus = stats.pct_terurus; + const pctColor = pctTerurus >= 70 ? '#22c55e' : pctTerurus >= 40 ? '#f59e0b' : '#ef4444'; + + let kpiCards = ` +
+ ${isPengelola ? '' : ` +
+
🕌
+
${stats.total_ibadah}
+
Rumah Ibadah
+
`} +
+
🏠
+
${stats.total_miskin}
+
KK Miskin${isPengelola ? ' (radius)' : ''}
+
+
+
👥
+
${stats.total_jiwa}
+
Total Jiwa
+
+
+
📋
+
${stats.total_log}
+
Log Bantuan
+
+
`; + + // ── Coverage bar ────────────────────────────────────────────────── + const coverageHtml = stats.total_miskin > 0 ? ` +
+
📊 Cakupan Penanganan
+
+
+ ✅ Terurus: ${stats.terurus} + ⚠️ Tidak Terurus: ${stats.tidak_terurus} + ${pctTerurus}% +
+
+
+
+
+
` : ''; + + // ── Charts area ─────────────────────────────────────────────────── + const chartsHtml = ` +
+
+
📦 Kategori Bantuan
+ +
+
+
🎁 Tipe Bantuan (Log)
+ +
+ ${!isPengelola ? ` +
+
🕌 Jenis Rumah Ibadah
+ +
` : ''} +
+
📅 Aktivitas Bantuan (6 Bulan)
+ +
+
`; + + // ── Recent logs ─────────────────────────────────────────────────── + let logsHtml = `
🕐 Bantuan Terbaru
`; + if (recent_logs.length === 0) { + logsHtml += `
Belum ada log bantuan
`; + } else { + logsHtml += `
`; + recent_logs.forEach(log => { + const tgl = new Date(log.tanggal).toLocaleDateString('id-ID', { day: '2-digit', month: 'short', year: 'numeric' }); + const emoji = (window.IBADAH_EMOJI || {})[log.jenis_ibadah] || '🕌'; + logsHtml += ` +
+
+
+
+ ${esc(log.tipe_bantuan)} + → ${esc(log.nama_kk)} +
+
${emoji} ${esc(log.nama_ibadah)}  ·  ${tgl}${log.keterangan ? `  ·  ${esc(log.keterangan)}` : ''}
+
+
`; + }); + logsHtml += `
`; + } + logsHtml += `
`; + + // ── Ibadah performa table (admin only) ──────────────────────────── + let perfHtml = ''; + if (!isPengelola && ibadah_performa.length > 0) { + perfHtml = ` +
+
🏆 Performa Rumah Ibadah
+
+ + + + + + + + + + + + ${ibadah_performa.map((ib, i) => ` + + + + + + + `).join('')} + +
#NamaJenisTotal LogPenerima Unik
${i + 1}${esc(ib.nama)}${esc(ib.jenis)}${ib.total_log}${ib.total_penerima}
+
+
`; + } + + // ── Assemble ────────────────────────────────────────────────────── + body.innerHTML = ` + ${headerHtml} + ${kpiCards} + ${coverageHtml} + ${chartsHtml} + ${logsHtml} + ${perfHtml} + `; + + // ── Draw Charts ─────────────────────────────────────────────────── + setTimeout(() => { + drawPieChart('chartKategori', distribusi.kategori, ['#6366f1', '#f59e0b', '#22c55e', '#ef4444', '#06b6d4']); + drawPieChart('chartTipe', distribusi.tipe_bantuan, ['#4f46e5', '#16a34a', '#dc2626', '#d97706', '#0891b2', '#7c3aed']); + if (!isPengelola) drawPieChart('chartJenis', distribusi.jenis_ibadah, ['#f97316', '#6366f1', '#22c55e', '#ec4899', '#14b8a6']); + drawBarChart('chartBulan', distribusi.per_bulan); + }, 50); + } + + // ── Chart helpers ────────────────────────────────────────────────────── + function drawPieChart(canvasId, dataObj, colors) { + const canvas = document.getElementById(canvasId); + if (!canvas) return; + const entries = Object.entries(dataObj || {}); + if (entries.length === 0) { + const ctx = canvas.getContext('2d'); + ctx.clearRect(0, 0, canvas.width, canvas.height); + ctx.fillStyle = '#aaa'; + ctx.font = '13px Inter'; + ctx.textAlign = 'center'; + ctx.fillText('Belum ada data', canvas.width / 2, canvas.height / 2); + return; + } + const labels = entries.map(([k]) => k); + const values = entries.map(([, v]) => v); + const total = values.reduce((a, b) => a + b, 0); + + const ctx = canvas.getContext('2d'); + const cx = canvas.width / 2; + const cy = canvas.height * 0.45; + const r = Math.min(cx, cy) * 0.75; + + ctx.clearRect(0, 0, canvas.width, canvas.height); + + let startAngle = -Math.PI / 2; + values.forEach((v, i) => { + const slice = (v / total) * 2 * Math.PI; + ctx.beginPath(); + ctx.moveTo(cx, cy); + ctx.arc(cx, cy, r, startAngle, startAngle + slice); + ctx.closePath(); + ctx.fillStyle = colors[i % colors.length]; + ctx.fill(); + ctx.strokeStyle = '#fff'; + ctx.lineWidth = 2; + ctx.stroke(); + startAngle += slice; + }); + + // Center text + ctx.fillStyle = '#333'; + ctx.font = 'bold 16px Inter'; + ctx.textAlign = 'center'; + ctx.fillText(total, cx, cy + 5); + + // Legend + const legY = cy + r + 16; + const legItemW = 90; + const perRow = Math.floor(canvas.width / legItemW); + labels.forEach((lbl, i) => { + const row = Math.floor(i / perRow); + const col = i % perRow; + const lx = (canvas.width - Math.min(labels.length, perRow) * legItemW) / 2 + col * legItemW; + const ly = legY + row * 18; + ctx.fillStyle = colors[i % colors.length]; + ctx.fillRect(lx, ly, 10, 10); + ctx.fillStyle = '#555'; + ctx.font = '10px Inter'; + ctx.textAlign = 'left'; + const shortLbl = lbl.length > 10 ? lbl.slice(0, 9) + '…' : lbl; + ctx.fillText(`${shortLbl} (${values[i]})`, lx + 13, ly + 9); + }); + } + + function drawBarChart(canvasId, perBulan) { + const canvas = document.getElementById(canvasId); + if (!canvas) return; + const ctx = canvas.getContext('2d'); + ctx.clearRect(0, 0, canvas.width, canvas.height); + + if (!perBulan || perBulan.length === 0) { + ctx.fillStyle = '#aaa'; + ctx.font = '13px Inter'; + ctx.textAlign = 'center'; + ctx.fillText('Belum ada data bantuan', canvas.width / 2, canvas.height / 2); + return; + } + + const padL = 36, padR = 12, padT = 12, padB = 28; + const W = canvas.width - padL - padR; + const H = canvas.height - padT - padB; + + const values = perBulan.map(d => parseInt(d.cnt)); + const maxVal = Math.max(...values, 1); + const barW = W / perBulan.length * 0.6; + const gap = W / perBulan.length; + + // Grid lines + ctx.strokeStyle = '#e5e7eb'; + ctx.lineWidth = 1; + for (let i = 0; i <= 4; i++) { + const y = padT + H - (i / 4) * H; + ctx.beginPath(); ctx.moveTo(padL, y); ctx.lineTo(padL + W, y); ctx.stroke(); + ctx.fillStyle = '#9ca3af'; + ctx.font = '9px Inter'; + ctx.textAlign = 'right'; + ctx.fillText(Math.round((i / 4) * maxVal), padL - 4, y + 3); + } + + // Bars + perBulan.forEach((d, i) => { + const bh = (parseInt(d.cnt) / maxVal) * H; + const bx = padL + i * gap + (gap - barW) / 2; + const by = padT + H - bh; + + const grad = ctx.createLinearGradient(0, by, 0, padT + H); + grad.addColorStop(0, '#6366f1'); + grad.addColorStop(1, '#a5b4fc'); + ctx.fillStyle = grad; + ctx.beginPath(); + ctx.roundRect ? ctx.roundRect(bx, by, barW, bh, [4, 4, 0, 0]) : ctx.rect(bx, by, barW, bh); + ctx.fill(); + + // Value label + ctx.fillStyle = '#4f46e5'; + ctx.font = 'bold 10px Inter'; + ctx.textAlign = 'center'; + ctx.fillText(d.cnt, bx + barW / 2, by - 4); + + // Month label + const monthLabel = d.bulan ? d.bulan.slice(5) + '/' + d.bulan.slice(2, 4) : ''; + ctx.fillStyle = '#6b7280'; + ctx.font = '9px Inter'; + ctx.fillText(monthLabel, bx + barW / 2, padT + H + 14); + }); + } + + // ── Utility ─────────────────────────────────────────────────────────── + function esc(str) { + if (!str) return ''; + return String(str).replace(/&/g,'&').replace(//g,'>').replace(/"/g,'"'); + } + +})(); diff --git a/assets/js/features/kemiskinan.js b/assets/js/features/kemiskinan.js index 76f1522..f977216 100644 --- a/assets/js/features/kemiskinan.js +++ b/assets/js/features/kemiskinan.js @@ -36,6 +36,18 @@ function makeMiskinIcon(inRadius) { let ibadahDataList = []; let miskinMarkerList = []; // Simpan referensi marker untuk update warna +// Helper: cek apakah koordinat (lat, lng) berada dalam radius ibadah pengelola yang login +function isInMyIbadahRadius(lat, lng) { + if (!window.currentUser || window.currentUser.role !== 'pengelola') return true; // admin selalu bisa + const myIbadahId = window.currentUser.ibadah_id; + if (!myIbadahId) return false; + const ib = ibadahDataList.find(i => i.id == myIbadahId); + if (!ib) return false; + const dist = L.latLng(lat, lng).distanceTo(L.latLng(ib.lat, ib.lng)); + return dist <= ib.radius; +} +window.isInMyIbadahRadius = isInMyIbadahRadius; + let isResizing = false; let resizingCircle = null; let resizingIbadah = null; @@ -177,8 +189,22 @@ function addIbadahMarker(item) { // Konteks Menu untuk Tambah Penduduk Miskin (klik kanan peta) map.on('contextmenu', function(e) { - const canManage = !!(window.currentUser && (window.currentUser.role === 'admin' || window.currentUser.role === 'pengelola')); - if (!canManage) return; + const isAdminOrPengelola = !!(window.currentUser && (window.currentUser.role === 'admin' || window.currentUser.role === 'pengelola')); + if (!isAdminOrPengelola) return; + + const canAddHere = isInMyIbadahRadius(e.latlng.lat, e.latlng.lng); + + if (!canAddHere) { + // Pengelola: lokasi di luar radius ibadahnya + const warnContent = ` +
+

⚠️ Di Luar Radius

+

Anda hanya dapat menambah penduduk miskin di dalam radius rumah ibadah yang Anda kelola.

+
+ `; + L.popup().setLatLng(e.latlng).setContent(warnContent).openOn(map); + return; + } const popupContent = `
@@ -397,7 +423,9 @@ function addMiskinMarker(item) { const lng = parseFloat(item.lng); if (isNaN(lat) || isNaN(lng)) return; - const canManage = !!(window.currentUser && (window.currentUser.role === 'admin' || window.currentUser.role === 'pengelola')); + // Pengelola hanya bisa manage marker yang ada di dalam radius ibadahnya + const isAdminOrPengelola = !!(window.currentUser && (window.currentUser.role === 'admin' || window.currentUser.role === 'pengelola')); + const canManage = isAdminOrPengelola && isInMyIbadahRadius(lat, lng); const marker = L.marker([lat, lng], { icon: makeMiskinIcon(false), draggable: canManage }); marker.miskinData = item; @@ -475,8 +503,8 @@ window.formAddMiskin = function(lat, lng) {
- - + +
@@ -510,7 +538,7 @@ window.saveNewMiskin = function(lat, lng) { const fotoRumahInput = document.getElementById('miskinFotoRumah'); const fotoKKInput = document.getElementById('miskinFotoKK'); - if (!nama) { alert('Nama harus diisi!'); return; } + if (!nama) { alert('Nama kepala keluarga harus diisi!'); return; } const formData = new FormData(); formData.append('nama', nama); @@ -543,7 +571,7 @@ window.openEditMiskinModal = function(id) { const bodyHTML = `
- +
@@ -679,7 +707,7 @@ window.openImportMiskinModal = function() { - + @@ -845,7 +873,7 @@ function handleImportFileChange(e) { parsedImportData = validRows; if (validRows.length === 0) { - errorMsg.textContent = "Tidak ditemukan data valid (pastikan kolom nama, lat, dan lng terisi)."; + errorMsg.textContent = "Tidak ditemukan data valid (pastikan kolom nama_kk/nama, lat, dan lng terisi)."; errorMsg.style.display = 'block'; return; } diff --git a/assets/js/panel.js b/assets/js/panel.js index b9dc6bf..7eeab4b 100644 --- a/assets/js/panel.js +++ b/assets/js/panel.js @@ -165,9 +165,13 @@ rightPanelTitle.textContent = '🏠 Penduduk Miskin'; const canManage = !!(window.currentUser && (window.currentUser.role === 'admin' || window.currentUser.role === 'pengelola')); if (canManage) { + const isPengelola = window.currentUser.role === 'pengelola'; + const addLabel = isPengelola + ? ' Tambah (dalam radius)' + : ' Tambah'; rightPanelActions.innerHTML = ` +
NamaKepala Keluarga Kategori Jiwa Koordinat