luthfihadinugroho79
1759 lines
88 KiB
PHP
1759 lines
88 KiB
PHP
<?php
|
||
require_once '../includes/config.php';
|
||
requireLogin(['masyarakat']);
|
||
$user = currentUser();
|
||
$uid = (int)$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 Masyarakat — WebGIS Pontianak</title>
|
||
<link href="https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
|
||
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
|
||
<style>
|
||
:root{
|
||
--bg:#080c14;--surface:#0f1522;--card:#141b2d;--card2:#1a2235;
|
||
--border:rgba(99,179,237,0.1);--accent:#3b82f6;--accent2:#06b6d4;
|
||
--green:#10b981;--red:#ef4444;--amber:#f59e0b;--purple:#8b5cf6;
|
||
--text:#e2e8f0;--text2:#7c93b5;--glow:rgba(59,130,246,0.2);
|
||
}
|
||
*{box-sizing:border-box;margin:0;padding:0}
|
||
html,body{height:100%;overflow:hidden}
|
||
body{font-family:'Sora',sans-serif;background:var(--bg);color:var(--text);display:flex;flex-direction:column}
|
||
|
||
/* ── TOPBAR ── */
|
||
.topbar{
|
||
background:var(--surface);border-bottom:1px solid var(--border);
|
||
padding:0 18px;height:56px;display:flex;align-items:center;
|
||
justify-content:space-between;z-index:200;flex-shrink:0;
|
||
box-shadow:0 2px 20px rgba(0,0,0,0.4);
|
||
}
|
||
.tb-left{display:flex;align-items:center;gap:10px}
|
||
.logo{width:34px;height:34px;background:linear-gradient(135deg,var(--accent),var(--accent2));border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px}
|
||
.tb-title{font-size:14px;font-weight:800}
|
||
.tb-sub{font-size:10px;color:var(--text2)}
|
||
.tb-right{display:flex;align-items:center;gap:8px}
|
||
.notif-wrap{position:relative}
|
||
.notif-btn{width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,0.05);border:1px solid var(--border);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--text);transition:all 0.2s}
|
||
.notif-btn:hover{background:rgba(59,130,246,0.1);border-color:var(--accent)}
|
||
.nb-badge{position:absolute;top:-4px;right:-4px;background:var(--red);color:#fff;font-size:9px;font-weight:800;min-width:15px;height:15px;border-radius:8px;display:none;align-items:center;justify-content:center}
|
||
.user-chip{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,0.04);border:1px solid var(--border);padding:5px 11px;border-radius:20px;font-size:11px;font-weight:600}
|
||
.user-av{width:22px;height:22px;background:linear-gradient(135deg,var(--green),var(--accent));border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px}
|
||
.logout{background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.2);color:var(--red);padding:5px 10px;border-radius:8px;font-family:'Sora',sans-serif;font-size:11px;font-weight:700;cursor:pointer;transition:all 0.2s}
|
||
.logout:hover{background:rgba(239,68,68,0.2)}
|
||
|
||
/* ── MAIN LAYOUT ── */
|
||
.main{display:flex;flex:1;overflow:hidden;height:calc(100vh - 56px);flex-direction:row}
|
||
|
||
/* ── SIDEBAR ── */
|
||
.sidebar{
|
||
width:340px;min-width:340px;background:var(--surface);
|
||
border-right:1px solid var(--border);
|
||
display:flex;flex-direction:column;overflow:hidden;
|
||
}
|
||
/* ── PRIMARY NAV (OVERVIEW / PETA) ── */
|
||
.primary-nav{
|
||
display:flex;gap:6px;padding:10px 12px 0;
|
||
background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0;
|
||
}
|
||
.pnav-btn{
|
||
flex:1;padding:9px 8px;background:rgba(255,255,255,0.04);border:1px solid var(--border);
|
||
color:var(--text2);font-family:'Sora',sans-serif;font-size:11px;font-weight:800;
|
||
cursor:pointer;border-radius:10px 10px 0 0;transition:all 0.2s;letter-spacing:0.3px;
|
||
display:flex;align-items:center;justify-content:center;gap:6px;
|
||
}
|
||
.pnav-btn.active{
|
||
background:rgba(59,130,246,0.12);border-color:var(--accent);color:var(--accent);
|
||
border-bottom-color:var(--surface);box-shadow:0 -2px 12px rgba(59,130,246,0.15);
|
||
}
|
||
.pnav-btn:hover:not(.active){color:var(--text);background:rgba(255,255,255,0.07)}
|
||
|
||
/* ── SECONDARY NAV (per-panel sub-tabs) ── */
|
||
.sec-nav{
|
||
display:flex;gap:0;border-bottom:1px solid var(--border);flex-shrink:0;
|
||
background:rgba(255,255,255,0.015);
|
||
}
|
||
.snav-btn{
|
||
flex:1;padding:8px 6px;background:none;border:none;border-bottom:2px solid transparent;
|
||
color:var(--text2);font-family:'Sora',sans-serif;font-size:10px;font-weight:800;
|
||
cursor:pointer;transition:all 0.18s;letter-spacing:0.4px;
|
||
display:flex;align-items:center;justify-content:center;gap:4px;
|
||
}
|
||
.snav-btn.active{color:var(--accent);border-bottom-color:var(--accent)}
|
||
.snav-btn:hover:not(.active){color:var(--text);background:rgba(255,255,255,0.02)}
|
||
|
||
/* ── PANELS ── */
|
||
.s-panel{display:none;flex:1;overflow-y:auto;flex-direction:column}
|
||
.s-panel.active{display:flex}
|
||
/* sub-panels inside a primary panel */
|
||
.sub-panel{display:none;flex:1;flex-direction:column;overflow-y:auto}
|
||
.sub-panel.active{display:flex}
|
||
|
||
/* ── PANEL HEADER ── */
|
||
.ph{padding:13px 15px 10px;border-bottom:1px solid var(--border);flex-shrink:0}
|
||
.ph-title{font-size:13px;font-weight:800}
|
||
.ph-sub{font-size:10px;color:var(--text2);margin-top:2px}
|
||
|
||
/* ── STAT GRID ── */
|
||
.sg{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px 12px}
|
||
.sc{background:var(--card2);border:1px solid var(--border);border-radius:11px;padding:11px 12px}
|
||
.sc-n{font-size:22px;font-weight:800;line-height:1;margin-bottom:3px}
|
||
.sc-l{font-size:9px;color:var(--text2);font-weight:700;text-transform:uppercase;letter-spacing:0.5px}
|
||
.c-b .sc-n{color:var(--accent)}.c-g .sc-n{color:var(--green)}.c-a .sc-n{color:var(--amber)}.c-p .sc-n{color:var(--purple)}
|
||
|
||
/* ── FILTER ── */
|
||
.filter-box{padding:10px 13px;border-bottom:1px solid var(--border);flex-shrink:0}
|
||
.filter-box label{font-size:10px;font-weight:800;color:var(--text2);display:block;margin-bottom:5px;letter-spacing:0.4px;text-transform:uppercase}
|
||
.filter-box select{
|
||
width:100%;background:rgba(255,255,255,0.04);border:1px solid var(--border);
|
||
color:var(--text);padding:7px 10px;border-radius:9px;
|
||
font-family:'Sora',sans-serif;font-size:11px;outline:none;margin-bottom:8px;
|
||
}
|
||
.filter-box select:focus{border-color:var(--accent)}
|
||
.fb-row{display:flex;gap:6px}
|
||
.fb{
|
||
flex:1;padding:6px 4px;background:rgba(255,255,255,0.04);border:1px solid var(--border);
|
||
color:var(--text2);border-radius:8px;cursor:pointer;
|
||
font-family:'Sora',sans-serif;font-size:10px;font-weight:700;transition:all 0.2s;
|
||
}
|
||
.fb:hover,.fb.on{background:rgba(59,130,246,0.1);border-color:var(--accent);color:var(--accent)}
|
||
|
||
/* ── LEGENDA ── */
|
||
.legenda-box{padding:10px 13px;border-top:1px solid var(--border);flex-shrink:0}
|
||
.leg-t{font-size:9px;font-weight:800;color:var(--text2);letter-spacing:0.5px;text-transform:uppercase;margin-bottom:6px}
|
||
.leg-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px}
|
||
.leg-item{font-size:10px;color:var(--text2);display:flex;align-items:center;gap:4px}
|
||
.leg-note{margin-top:6px;padding:6px 8px;background:rgba(59,130,246,0.06);border:1px solid rgba(59,130,246,0.15);border-radius:7px;font-size:10px;color:rgba(147,197,253,0.8);line-height:1.5}
|
||
|
||
/* ── KK LIST ── */
|
||
.kk-list{display:flex;flex-direction:column;gap:6px;padding:8px 10px}
|
||
.kk-item{
|
||
background:var(--card2);border:1px solid var(--border);
|
||
border-radius:10px;padding:10px 11px;cursor:pointer;transition:all 0.2s;
|
||
}
|
||
.kk-item:hover{border-color:var(--accent);background:rgba(59,130,246,0.05)}
|
||
.kk-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:4px}
|
||
.kk-nama{font-size:12px;font-weight:700;flex:1}
|
||
.kk-meta{font-size:10px;color:var(--text2);display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}
|
||
.kk-hint{font-size:10px;color:var(--accent);margin-top:4px}
|
||
|
||
/* ── BADGES ── */
|
||
.badge{padding:2px 7px;border-radius:5px;font-size:9px;font-weight:800;white-space:nowrap}
|
||
.bb{background:rgba(59,130,246,.15);color:#93c5fd}
|
||
.bg{background:rgba(16,185,129,.15);color:#6ee7b7}
|
||
.ba{background:rgba(245,158,11,.15);color:#fcd34d}
|
||
.br{background:rgba(239,68,68,.15);color:#fca5a5}
|
||
.bp{background:rgba(139,92,246,.15);color:#c4b5fd}
|
||
.bgr{background:rgba(255,255,255,.07);color:var(--text2)}
|
||
|
||
/* ── ANGGOTA ── */
|
||
.ak-card{background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:9px;padding:10px;margin-bottom:7px}
|
||
.ak-row{display:flex;gap:9px;align-items:flex-start}
|
||
.ak-av{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
|
||
.ak-nama{font-size:12px;font-weight:700}
|
||
.ak-meta{font-size:10px;color:var(--text2);margin-top:2px}
|
||
.ak-pend{font-size:10px;color:var(--accent);margin-top:3px}
|
||
|
||
/* ── BANTUAN CARD ── */
|
||
.bc{background:rgba(16,185,129,.05);border:1px solid rgba(16,185,129,.15);border-radius:9px;padding:10px;margin-bottom:7px}
|
||
.bc-top{display:flex;justify-content:space-between;margin-bottom:4px}
|
||
.bc-jenis{font-size:12px;font-weight:700;color:var(--green)}
|
||
.bc-tgl{font-size:10px;color:var(--text2)}
|
||
.bc-detail{font-size:11px;color:var(--text2);line-height:1.5}
|
||
.bc-src{margin-top:5px;padding:4px 8px;background:rgba(59,130,246,.06);border:1px solid var(--border);border-radius:6px;font-size:10px;color:var(--text2)}
|
||
|
||
/* ── MAP ── */
|
||
.map-wrap{flex:1;position:relative;min-width:0}
|
||
#map{position:absolute;top:0;left:0;width:100%;height:100%}
|
||
|
||
/* ── MAP FAB ── */
|
||
.fab-wrap{position:absolute;bottom:24px;right:14px;z-index:400;display:flex;flex-direction:column;gap:8px}
|
||
.fab{
|
||
width:44px;height:44px;border-radius:13px;border:none;cursor:pointer;
|
||
display:flex;align-items:center;justify-content:center;font-size:20px;
|
||
box-shadow:0 4px 16px rgba(0,0,0,0.4);transition:all 0.2s;
|
||
}
|
||
.fab:hover{transform:scale(1.1)}
|
||
.fab-loc{background:linear-gradient(135deg,var(--accent),var(--accent2))}
|
||
.fab-reset{background:rgba(255,255,255,0.1);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.15)}
|
||
|
||
/* ── NOTIF PANEL ── */
|
||
.np{
|
||
position:absolute;top:44px;right:0;width:290px;
|
||
background:var(--card);border:1px solid var(--border);
|
||
border-radius:12px;box-shadow:0 16px 48px rgba(0,0,0,.5);
|
||
z-index:200;overflow:hidden;animation:dropIn .2s;
|
||
}
|
||
@keyframes dropIn{from{opacity:0;transform:translateY(-8px)}}
|
||
.np-hd{padding:10px 13px;font-size:12px;font-weight:800;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
|
||
.ni{padding:9px 13px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s}
|
||
.ni:hover{background:rgba(59,130,246,0.06)}
|
||
.ni.unread{background:rgba(59,130,246,0.04)}
|
||
.ni-t{font-size:11px;font-weight:700;margin-bottom:2px}
|
||
.ni-i{font-size:10px;color:var(--text2);line-height:1.4}
|
||
.ni-d{font-size:9px;color:var(--text2);margin-top:3px}
|
||
|
||
/* ── MODAL ── */
|
||
.mo{position:fixed;inset:0;background:rgba(0,0,0,.78);z-index:600;display:flex;align-items:flex-end;justify-content:center;backdrop-filter:blur(4px);animation:fadeIn .2s}
|
||
@keyframes fadeIn{from{opacity:0}}
|
||
.mo.hidden{display:none}
|
||
.md{background:var(--card);border:1px solid var(--border);border-radius:20px 20px 0 0;width:100%;max-width:600px;max-height:92vh;overflow-y:auto;box-shadow:0 -8px 40px rgba(0,0,0,.6);animation:slideUp .3s cubic-bezier(.23,1,.32,1)}
|
||
@keyframes slideUp{from{transform:translateY(30px);opacity:0}}
|
||
.mh{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--card);z-index:2}
|
||
.mh-drag{width:40px;height:4px;background:rgba(255,255,255,0.15);border-radius:2px;margin:0 auto 14px}
|
||
.mt-m{font-size:15px;font-weight:800}
|
||
.mc{background:rgba(255,255,255,.05);border:none;color:var(--text2);width:28px;height:28px;border-radius:8px;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:all .2s}
|
||
.mc:hover{background:rgba(239,68,68,.2);color:var(--red)}
|
||
.mb-m{padding:16px 20px}
|
||
|
||
/* ── LAPORAN FORM ── */
|
||
.lap-section{margin-bottom:14px}
|
||
.fl{margin-bottom:11px}
|
||
.fl label{display:block;font-size:10px;font-weight:800;color:var(--text2);margin-bottom:5px;letter-spacing:0.4px;text-transform:uppercase}
|
||
.fl select,.fl input,.fl textarea{
|
||
width:100%;background:rgba(255,255,255,.05);border:1px solid var(--border);
|
||
color:var(--text);padding:9px 11px;border-radius:9px;
|
||
font-family:'Sora',sans-serif;font-size:12px;transition:all .2s;outline:none;
|
||
}
|
||
.fl select:focus,.fl input:focus,.fl textarea:focus{
|
||
border-color:var(--accent);background:rgba(59,130,246,.05);box-shadow:0 0 0 3px var(--glow);
|
||
}
|
||
.fl select option{background:var(--card)}
|
||
.fl textarea{resize:vertical;min-height:80px}
|
||
|
||
.kk-preview{
|
||
background:rgba(59,130,246,.07);border:1px solid rgba(59,130,246,.2);
|
||
border-radius:10px;padding:11px 13px;margin-bottom:14px;
|
||
}
|
||
.kk-preview-title{font-size:10px;font-weight:800;color:var(--text2);text-transform:uppercase;letter-spacing:0.4px;margin-bottom:5px}
|
||
.kk-preview-nama{font-size:13px;font-weight:800;margin-bottom:3px}
|
||
.kk-preview-meta{font-size:11px;color:var(--text2)}
|
||
|
||
.info-tip{
|
||
padding:9px 12px;background:rgba(245,158,11,.07);border:1px solid rgba(245,158,11,.2);
|
||
border-radius:9px;font-size:10px;color:rgba(253,211,77,.85);line-height:1.5;margin-bottom:14px;
|
||
}
|
||
|
||
/* ── BUTTONS ── */
|
||
.btn{padding:9px 14px;border-radius:9px;border:none;font-family:'Sora',sans-serif;font-size:12px;font-weight:700;cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;gap:5px}
|
||
.btn-p{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;box-shadow:0 4px 12px var(--glow)}
|
||
.btn-p:hover{transform:translateY(-1px);box-shadow:0 8px 20px var(--glow)}
|
||
.btn-p:disabled{opacity:.6;cursor:not-allowed;transform:none}
|
||
.btn-g{background:rgba(255,255,255,.04);border:1px solid var(--border);color:var(--text2)}
|
||
.btn-full{width:100%;justify-content:center}
|
||
|
||
/* ── SPINNER ── */
|
||
.spinner{width:14px;height:14px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
|
||
@keyframes spin{to{transform:rotate(360deg)}}
|
||
|
||
/* ── RIWAYAT LAPORAN ── */
|
||
.lap-item{background:var(--card2);border:1px solid var(--border);border-radius:10px;padding:10px 12px;margin-bottom:7px}
|
||
.lap-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px}
|
||
.lap-nama{font-size:12px;font-weight:700}
|
||
.lap-meta{font-size:10px;color:var(--text2)}
|
||
.lap-desk{font-size:11px;color:var(--text2);margin-top:4px;line-height:1.4}
|
||
.lap-catatan{margin-top:6px;padding:5px 8px;background:rgba(16,185,129,.08);border:1px solid rgba(16,185,129,.2);border-radius:7px;font-size:10px;color:var(--green)}
|
||
|
||
/* ── TOAST ── */
|
||
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:9999;padding:11px 18px;border-radius:11px;font-size:12px;font-weight:700;pointer-events:none;animation:ti .3s cubic-bezier(.23,1,.32,1);white-space:nowrap}
|
||
@keyframes ti{from{opacity:0;transform:translateX(-50%) translateY(12px)}}
|
||
.ts{background:#065f46;border:1px solid var(--green);color:#6ee7b7}
|
||
.te{background:#7f1d1d;border:1px solid var(--red);color:#fca5a5}
|
||
.ti-c{background:#1e3a5f;border:1px solid var(--accent);color:#93c5fd}
|
||
|
||
/* ── EMPTY ── */
|
||
.empty{text-align:center;padding:28px 16px;color:var(--text2)}
|
||
.ei{font-size:32px;margin-bottom:8px}
|
||
.ep{font-size:12px}
|
||
|
||
/* ── SECTION DIV ── */
|
||
.sdiv{font-size:9px;font-weight:800;color:var(--text2);letter-spacing:1px;text-transform:uppercase;padding:8px 13px 5px;border-bottom:1px solid var(--border);flex-shrink:0}
|
||
|
||
/* ── OVERVIEW PAGE (redesigned) ── */
|
||
.overview{width:100%;overflow-y:auto;padding:22px 24px 32px;display:flex;flex-direction:column;gap:22px}
|
||
|
||
/* greeting banner */
|
||
.ov-greeting{background:linear-gradient(135deg,rgba(59,130,246,0.12) 0%,rgba(6,182,212,0.08) 50%,rgba(139,92,246,0.06) 100%);border:1px solid rgba(99,179,237,0.14);border-radius:18px;padding:20px 24px;display:flex;align-items:center;gap:18px;position:relative;overflow:hidden}
|
||
.ov-greeting::before{content:'';position:absolute;top:-40px;right:-40px;width:180px;height:180px;background:radial-gradient(circle,rgba(59,130,246,0.1) 0%,transparent 70%);pointer-events:none}
|
||
.ov-greeting-icon{font-size:40px;filter:drop-shadow(0 0 12px rgba(59,130,246,0.5));flex-shrink:0}
|
||
.ov-greeting-text h2{font-size:17px;font-weight:800;line-height:1.2;margin-bottom:4px}
|
||
.ov-greeting-text p{font-size:11px;color:var(--text2);line-height:1.6}
|
||
.ov-greeting-time{margin-left:auto;text-align:right;flex-shrink:0}
|
||
.ov-greeting-time .time-big{font-size:28px;font-weight:800;letter-spacing:-1px;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
|
||
.ov-greeting-time .time-date{font-size:10px;color:var(--text2);margin-top:1px}
|
||
|
||
/* KPI grid */
|
||
.kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
|
||
.kpi2{background:var(--card2);border:1px solid var(--border);border-radius:16px;padding:18px 16px 14px;position:relative;overflow:hidden;cursor:default;transition:transform 0.18s,border-color 0.18s,box-shadow 0.18s}
|
||
.kpi2:hover{transform:translateY(-3px);border-color:var(--kpi-c,var(--accent));box-shadow:0 8px 28px rgba(0,0,0,0.25)}
|
||
.kpi2-glow{position:absolute;inset:0;border-radius:16px;opacity:0;transition:opacity 0.18s;background:radial-gradient(ellipse at 20% 30%,var(--kpi-c,var(--accent)) 0%,transparent 65%);opacity:0.06;pointer-events:none}
|
||
.kpi2-stripe{position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--kpi-c,var(--accent)),transparent);border-radius:16px 16px 0 0}
|
||
.kpi2-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:10px}
|
||
.kpi2-icon{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:center;font-size:18px}
|
||
.kpi2-trend{font-size:9px;font-weight:800;padding:3px 7px;border-radius:20px}
|
||
.kpi2-trend.up{background:rgba(16,185,129,0.12);color:#34d399}
|
||
.kpi2-trend.down{background:rgba(239,68,68,0.12);color:#f87171}
|
||
.kpi2-trend.neutral{background:rgba(124,147,181,0.12);color:var(--text2)}
|
||
.kpi2-num{font-size:30px;font-weight:900;line-height:1;letter-spacing:-1px;color:var(--kpi-c,var(--text));margin-bottom:5px}
|
||
.kpi2-label{font-size:10px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:0.7px;margin-bottom:3px}
|
||
.kpi2-bar{height:3px;border-radius:2px;background:rgba(255,255,255,0.05);margin-top:10px;overflow:hidden}
|
||
.kpi2-bar-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--kpi-c,var(--accent)),transparent);transition:width 1s cubic-bezier(.4,0,.2,1)}
|
||
|
||
/* section header */
|
||
.ov-sec-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px}
|
||
.ov-sec-title{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:0.8px;color:var(--text2);display:flex;align-items:center;gap:7px}
|
||
.ov-sec-title::before{content:'';width:3px;height:14px;background:var(--accent);border-radius:2px;display:inline-block}
|
||
.ov-sec-pill{font-size:9px;padding:3px 9px;background:rgba(99,179,237,0.08);border:1px solid rgba(99,179,237,0.15);border-radius:20px;color:var(--text2)}
|
||
|
||
/* chart cards */
|
||
.ov-charts{display:grid;grid-template-columns:1.6fr 1fr;gap:14px}
|
||
.ov-ccard{background:var(--card2);border:1px solid var(--border);border-radius:16px;padding:18px 20px;overflow:hidden}
|
||
.ov-ccard-title{font-size:13px;font-weight:800;margin-bottom:2px}
|
||
.ov-ccard-sub{font-size:10px;color:var(--text2);margin-bottom:14px}
|
||
|
||
/* status breakdown custom */
|
||
.status-list{display:flex;flex-direction:column;gap:10px}
|
||
.sl-row{display:flex;align-items:center;gap:10px}
|
||
.sl-dot{width:10px;height:10px;border-radius:3px;flex-shrink:0}
|
||
.sl-name{font-size:11px;font-weight:700;flex:1}
|
||
.sl-bar-track{flex:2;height:6px;background:rgba(255,255,255,0.05);border-radius:3px;overflow:hidden}
|
||
.sl-bar-fill{height:100%;border-radius:3px;transition:width 1s cubic-bezier(.4,0,.2,1)}
|
||
.sl-val{font-size:11px;font-weight:800;min-width:32px;text-align:right}
|
||
.sl-pct{font-size:9px;color:var(--text2);min-width:30px;text-align:right}
|
||
|
||
/* activity feed */
|
||
.ov-activity{background:var(--card2);border:1px solid var(--border);border-radius:16px;padding:18px 20px}
|
||
.act-list{display:flex;flex-direction:column;gap:0}
|
||
.act-item{display:flex;align-items:flex-start;gap:12px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,0.04)}
|
||
.act-item:last-child{border-bottom:none;padding-bottom:0}
|
||
.act-icon-wrap{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
|
||
.act-body{flex:1;min-width:0}
|
||
.act-title{font-size:11px;font-weight:700;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||
.act-sub{font-size:10px;color:var(--text2)}
|
||
.act-time{font-size:9px;color:var(--text2);flex-shrink:0;margin-top:2px}
|
||
|
||
/* ibadah mini-cards */
|
||
.ov-ibadah-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
|
||
.ov-icard{background:rgba(59,130,246,0.04);border:1px solid rgba(59,130,246,0.1);border-radius:12px;padding:12px 14px;display:flex;align-items:center;gap:10px;transition:background 0.15s,border-color 0.15s;cursor:default}
|
||
.ov-icard:hover{background:rgba(59,130,246,0.08);border-color:rgba(59,130,246,0.2)}
|
||
.ov-icard-icon{font-size:22px;flex-shrink:0}
|
||
.ov-icard-body{flex:1;min-width:0}
|
||
.ov-icard-name{font-size:11px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:1px}
|
||
.ov-icard-kk{font-size:10px;color:var(--text2)}
|
||
|
||
/* bottom row: 3 cols */
|
||
.ov-bottom{display:grid;grid-template-columns:1fr 1fr;gap:14px}
|
||
|
||
@media(max-width:768px){
|
||
.sidebar{width:100%;min-width:100%;position:absolute;bottom:0;z-index:50;height:55vh;border-right:none;border-top:1px solid var(--border)}
|
||
.map-wrap{height:45vh}
|
||
.md{border-radius:16px 16px 0 0}
|
||
}
|
||
/* ── CHAT ── */
|
||
.chat-panel-wrap{display:flex;flex-direction:column;flex:1;overflow:hidden}
|
||
.chat-ibadah-sel{padding:10px 12px;border-bottom:1px solid var(--border);flex-shrink:0}
|
||
.chat-ibadah-sel select{width:100%;background:rgba(255,255,255,0.04);border:1px solid var(--border);color:var(--text);padding:8px 10px;border-radius:9px;font-family:'Sora',sans-serif;font-size:11px;outline:none;margin-bottom:6px}
|
||
.chat-ibadah-sel select:focus{border-color:var(--accent)}
|
||
.chat-msgs{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px}
|
||
.ch-bw{display:flex;flex-direction:column}
|
||
.ch-bw.me{align-items:flex-end}
|
||
.ch-bw.them{align-items:flex-start}
|
||
.ch-b{max-width:78%;padding:9px 13px;border-radius:12px;font-size:11px;line-height:1.6;word-break:break-word}
|
||
.ch-b.me{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border-bottom-right-radius:3px}
|
||
.ch-b.them{background:var(--card2);border:1px solid var(--border);border-bottom-left-radius:3px}
|
||
.ch-meta{font-size:9px;color:var(--text2);margin-top:2px}
|
||
.chat-input-row{padding:10px 12px;border-top:1px solid var(--border);display:flex;gap:7px;flex-shrink:0}
|
||
.chat-inp{flex:1;background:rgba(255,255,255,0.05);border:1px solid var(--border);color:var(--text);padding:9px 12px;border-radius:9px;font-family:'Sora',sans-serif;font-size:11px;outline:none;resize:none}
|
||
.chat-inp:focus{border-color:var(--accent)}
|
||
.chat-sbtn{padding:9px 14px;background:var(--accent);color:#fff;border:none;border-radius:9px;cursor:pointer;font-weight:700;font-size:11px;font-family:'Sora',sans-serif;transition:all 0.2s;flex-shrink:0}
|
||
.chat-sbtn:hover{background:var(--accent2)}
|
||
.chat-badge{display:inline-flex;align-items:center;justify-content:center;background:var(--red);color:#fff;font-size:9px;font-weight:800;padding:1px 5px;border-radius:7px;min-width:15px;margin-left:4px}
|
||
/* ── CHAT MODAL ── */
|
||
.chat-modal-overlay{
|
||
position:fixed;inset:0;background:rgba(0,0,0,0.72);z-index:700;
|
||
display:flex;align-items:flex-end;justify-content:center;
|
||
backdrop-filter:blur(4px);
|
||
transition:opacity 0.2s, visibility 0.2s;
|
||
}
|
||
.chat-modal-overlay.hidden{
|
||
opacity:0;visibility:hidden;pointer-events:none;
|
||
}
|
||
.chat-modal{
|
||
background:var(--card);border:1px solid var(--border);
|
||
border-radius:20px 20px 0 0;width:100%;max-width:520px;
|
||
height:72vh;display:flex;flex-direction:column;
|
||
box-shadow:0 -8px 40px rgba(0,0,0,.6);
|
||
transform:translateY(0);transition:transform 0.3s cubic-bezier(.23,1,.32,1);
|
||
}
|
||
.chat-modal-overlay.hidden .chat-modal{
|
||
transform:translateY(100%);
|
||
}
|
||
.chat-modal-hd{
|
||
padding:14px 18px 12px;border-bottom:1px solid var(--border);
|
||
display:flex;align-items:center;gap:10px;flex-shrink:0;
|
||
}
|
||
.chat-modal-drag{width:36px;height:4px;background:rgba(255,255,255,0.15);border-radius:2px;position:absolute;top:10px;left:50%;transform:translateX(-50%)}
|
||
.chat-modal-icon{font-size:24px;flex-shrink:0}
|
||
.chat-modal-info{flex:1;min-width:0}
|
||
.chat-modal-name{font-size:13px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||
.chat-modal-sub{font-size:10px;color:var(--text2);margin-top:1px}
|
||
.chat-modal-close{
|
||
width:30px;height:30px;background:rgba(255,255,255,0.05);border:1px solid var(--border);
|
||
color:var(--text2);border-radius:8px;cursor:pointer;font-size:14px;
|
||
display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0;
|
||
}
|
||
.chat-modal-close:hover{background:rgba(239,68,68,.2);color:var(--red);border-color:rgba(239,68,68,.3)}
|
||
.chat-modal-msgs{
|
||
flex:1;overflow-y:auto;padding:12px 16px;display:flex;flex-direction:column;gap:8px;
|
||
}
|
||
.chat-modal-input{
|
||
padding:10px 14px;border-top:1px solid var(--border);display:flex;gap:8px;flex-shrink:0;
|
||
}
|
||
.chat-modal-inp{
|
||
flex:1;background:rgba(255,255,255,0.05);border:1px solid var(--border);
|
||
color:var(--text);padding:9px 12px;border-radius:10px;
|
||
font-family:'Sora',sans-serif;font-size:11px;outline:none;resize:none;
|
||
}
|
||
.chat-modal-inp:focus{border-color:var(--accent)}
|
||
.chat-modal-send{
|
||
padding:9px 14px;background:var(--accent);color:#fff;border:none;
|
||
border-radius:10px;cursor:pointer;font-size:14px;transition:all 0.2s;flex-shrink:0;
|
||
}
|
||
.chat-modal-send:hover{background:var(--accent2)}
|
||
/* badge on ibadah card */
|
||
.ov-icard-chat{
|
||
width:26px;height:26px;background:rgba(59,130,246,0.12);border:1px solid rgba(59,130,246,0.2);
|
||
border-radius:8px;display:flex;align-items:center;justify-content:center;
|
||
font-size:13px;flex-shrink:0;cursor:pointer;transition:all 0.15s;
|
||
}
|
||
.ov-icard-chat:hover{background:rgba(59,130,246,0.25);border-color:var(--accent)}
|
||
.ov-icard{cursor:pointer}
|
||
</style>
|
||
|
||
<!-- ── TOPBAR ── -->
|
||
<div class="topbar">
|
||
<div class="tb-left">
|
||
<div class="logo">🗺️</div>
|
||
<div>
|
||
<div class="tb-title">Portal Masyarakat</div>
|
||
<div class="tb-sub">WebGIS Kota Pontianak</div>
|
||
</div>
|
||
</div>
|
||
<div class="tb-right">
|
||
<div class="notif-wrap">
|
||
<button class="notif-btn" onclick="toggleNotif(this)" id="nb-btn">🔔
|
||
<div class="nb-badge" id="nb-badge"></div>
|
||
</button>
|
||
<div id="np" class="np" style="display:none">
|
||
<div class="np-hd">🔔 Notifikasi
|
||
<button onclick="bacaSemua()" style="background:none;border:none;color:var(--accent);font-size:10px;cursor:pointer;font-family:inherit;font-weight:700">Baca semua</button>
|
||
</div>
|
||
<div id="np-list"></div>
|
||
</div>
|
||
</div>
|
||
<div class="user-chip">
|
||
<div class="user-av">👤</div>
|
||
<span><?= htmlspecialchars($user['nama']) ?></span>
|
||
</div>
|
||
<button class="logout" onclick="location.href='../api/auth.php?action=logout'">Keluar</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ── MAIN ── -->
|
||
<div class="main">
|
||
|
||
<!-- ── SIDEBAR ── -->
|
||
<div class="sidebar">
|
||
|
||
<!-- ══ PRIMARY NAVBAR ══ -->
|
||
<div class="primary-nav">
|
||
<button class="pnav-btn active" id="pnav-overview" onclick="switchPrimary('overview')">
|
||
📊 OVERVIEW
|
||
</button>
|
||
<button class="pnav-btn" id="pnav-peta" onclick="switchPrimary('peta')">
|
||
🗺️ PETA
|
||
</button>
|
||
<button class="pnav-btn" id="pnav-bantuan" onclick="switchPrimary('bantuan')">
|
||
🤝 BANTUAN
|
||
</button>
|
||
<button class="pnav-btn" id="pnav-riwayat" onclick="switchPrimary('riwayat')">
|
||
📋 LAPORAN
|
||
</button>
|
||
</div>
|
||
|
||
<!-- ══ PANEL: OVERVIEW ══ -->
|
||
<div class="s-panel active" id="tab-overview" style="overflow:auto">
|
||
|
||
<!-- Secondary navbar for overview -->
|
||
<div class="sec-nav">
|
||
<button class="snav-btn active" id="ovnav-stat" onclick="switchOverviewSub('stat')">📈 Statistik</button>
|
||
<button class="snav-btn" id="ovnav-ibadah" onclick="switchOverviewSub('ibadah')">🕌 Ibadah</button>
|
||
<button class="snav-btn" id="ovnav-aktivitas" onclick="switchOverviewSub('aktivitas')">📋 Aktivitas</button>
|
||
</div>
|
||
|
||
<!-- Sub-panel: Statistik -->
|
||
<div class="sub-panel active" id="ovpanel-stat">
|
||
<div class="overview">
|
||
|
||
<!-- Greeting Banner -->
|
||
<div class="ov-greeting">
|
||
<div class="ov-greeting-icon" id="ov-greeting-icon">🌤️</div>
|
||
<div class="ov-greeting-text">
|
||
<h2 id="ov-greeting-title">Selamat datang</h2>
|
||
<p id="ov-greeting-sub">Portal Masyarakat · WebGIS Kota Pontianak</p>
|
||
</div>
|
||
<div class="ov-greeting-time">
|
||
<div class="time-big" id="ov-clock">--:--</div>
|
||
<div class="time-date" id="ov-date">--</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- KPI Grid -->
|
||
<div>
|
||
<div class="ov-sec-hd" style="margin-bottom:12px">
|
||
<div class="ov-sec-title">Statistik Utama</div>
|
||
<div class="ov-sec-pill" id="ov-last-update">Memuat...</div>
|
||
</div>
|
||
<div class="kpi-grid">
|
||
<div class="kpi2" style="--kpi-c:var(--accent)">
|
||
<div class="kpi2-glow"></div><div class="kpi2-stripe"></div>
|
||
<div class="kpi2-head"><div class="kpi2-icon">🏘️</div><div class="kpi2-trend neutral" id="kpi-trend-kk">KK</div></div>
|
||
<div class="kpi2-num" id="ov-kk">—</div>
|
||
<div class="kpi2-label">Kepala Keluarga</div>
|
||
<div class="kpi2-bar"><div class="kpi2-bar-fill" id="bar-kk" style="width:0%"></div></div>
|
||
</div>
|
||
<div class="kpi2" style="--kpi-c:var(--accent2)">
|
||
<div class="kpi2-glow"></div><div class="kpi2-stripe"></div>
|
||
<div class="kpi2-head"><div class="kpi2-icon">👥</div><div class="kpi2-trend neutral" id="kpi-trend-jiwa">Jiwa</div></div>
|
||
<div class="kpi2-num" id="ov-jiwa">—</div>
|
||
<div class="kpi2-label">Total Jiwa</div>
|
||
<div class="kpi2-bar"><div class="kpi2-bar-fill" style="width:80%;background:linear-gradient(90deg,var(--accent2),transparent)"></div></div>
|
||
</div>
|
||
<div class="kpi2" style="--kpi-c:var(--green)">
|
||
<div class="kpi2-glow"></div><div class="kpi2-stripe"></div>
|
||
<div class="kpi2-head"><div class="kpi2-icon">🤝</div><div class="kpi2-trend up">Aktif</div></div>
|
||
<div class="kpi2-num" id="ov-bantuan">—</div>
|
||
<div class="kpi2-label">Bantuan Disalurkan</div>
|
||
<div class="kpi2-bar"><div class="kpi2-bar-fill" style="width:55%;background:linear-gradient(90deg,var(--green),transparent)"></div></div>
|
||
</div>
|
||
<div class="kpi2" style="--kpi-c:var(--red)">
|
||
<div class="kpi2-glow"></div><div class="kpi2-stripe"></div>
|
||
<div class="kpi2-head"><div class="kpi2-icon">⚠️</div><div class="kpi2-trend down">Prioritas</div></div>
|
||
<div class="kpi2-num" id="ov-sm">—</div>
|
||
<div class="kpi2-label">Sangat Miskin</div>
|
||
<div class="kpi2-bar"><div class="kpi2-bar-fill" id="bar-sm" style="width:0%;background:linear-gradient(90deg,var(--red),transparent)"></div></div>
|
||
</div>
|
||
<div class="kpi2" style="--kpi-c:var(--amber)">
|
||
<div class="kpi2-glow"></div><div class="kpi2-stripe"></div>
|
||
<div class="kpi2-head"><div class="kpi2-icon">🟠</div><div class="kpi2-trend neutral">Pantau</div></div>
|
||
<div class="kpi2-num" id="ov-miskin">—</div>
|
||
<div class="kpi2-label">Kategori Miskin</div>
|
||
<div class="kpi2-bar"><div class="kpi2-bar-fill" id="bar-mis" style="width:0%;background:linear-gradient(90deg,var(--amber),transparent)"></div></div>
|
||
</div>
|
||
<div class="kpi2" style="--kpi-c:var(--purple)">
|
||
<div class="kpi2-glow"></div><div class="kpi2-stripe"></div>
|
||
<div class="kpi2-head"><div class="kpi2-icon">🕌</div><div class="kpi2-trend up">Aktif</div></div>
|
||
<div class="kpi2-num" id="ov-ibadah">—</div>
|
||
<div class="kpi2-label">Rumah Ibadah</div>
|
||
<div class="kpi2-bar"><div class="kpi2-bar-fill" style="width:70%;background:linear-gradient(90deg,var(--purple),transparent)"></div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Charts -->
|
||
<div>
|
||
<div class="ov-sec-hd" style="margin-bottom:12px">
|
||
<div class="ov-sec-title">Distribusi Status Ekonomi</div>
|
||
</div>
|
||
<div class="ov-charts">
|
||
<div class="ov-ccard">
|
||
<div class="ov-ccard-title">📊 KK per Kecamatan</div>
|
||
<div class="ov-ccard-sub">Jumlah kepala keluarga berdasarkan wilayah</div>
|
||
<div style="position:relative;height:168px"><canvas id="ov-chart-kecamatan"></canvas></div>
|
||
</div>
|
||
<div class="ov-ccard">
|
||
<div class="ov-ccard-title">📉 Tingkat Kemiskinan</div>
|
||
<div class="ov-ccard-sub">Komposisi status ekonomi warga</div>
|
||
<div class="status-list" id="ov-status-list" style="margin-top:4px">
|
||
<div class="sl-row">
|
||
<div class="sl-dot" style="background:var(--red)"></div>
|
||
<div class="sl-name">Sangat Miskin</div>
|
||
<div class="sl-bar-track"><div class="sl-bar-fill" id="slb-sm" style="width:0%;background:var(--red)"></div></div>
|
||
<div class="sl-val" id="slv-sm">—</div>
|
||
<div class="sl-pct" id="slp-sm">—</div>
|
||
</div>
|
||
<div class="sl-row">
|
||
<div class="sl-dot" style="background:var(--amber)"></div>
|
||
<div class="sl-name">Miskin</div>
|
||
<div class="sl-bar-track"><div class="sl-bar-fill" id="slb-mis" style="width:0%;background:var(--amber)"></div></div>
|
||
<div class="sl-val" id="slv-mis">—</div>
|
||
<div class="sl-pct" id="slp-mis">—</div>
|
||
</div>
|
||
<div class="sl-row">
|
||
<div class="sl-dot" style="background:var(--accent)"></div>
|
||
<div class="sl-name">Hampir Miskin</div>
|
||
<div class="sl-bar-track"><div class="sl-bar-fill" id="slb-hm" style="width:0%;background:var(--accent)"></div></div>
|
||
<div class="sl-val" id="slv-hm">—</div>
|
||
<div class="sl-pct" id="slp-hm">—</div>
|
||
</div>
|
||
<div class="sl-row">
|
||
<div class="sl-dot" style="background:var(--green)"></div>
|
||
<div class="sl-name">Tidak Miskin</div>
|
||
<div class="sl-bar-track"><div class="sl-bar-fill" id="slb-tm" style="width:0%;background:var(--green)"></div></div>
|
||
<div class="sl-val" id="slv-tm">—</div>
|
||
<div class="sl-pct" id="slp-tm">—</div>
|
||
</div>
|
||
</div>
|
||
<div style="margin-top:18px;position:relative;height:110px"><canvas id="ov-chart-donut"></canvas></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div><!-- /ovpanel-stat -->
|
||
|
||
<!-- Sub-panel: Rumah Ibadah -->
|
||
<div class="sub-panel" id="ovpanel-ibadah">
|
||
<div class="overview">
|
||
<div class="ov-sec-hd" style="margin-bottom:12px">
|
||
<div class="ov-sec-title">Rumah Ibadah Terdekat</div>
|
||
</div>
|
||
<div class="ov-ibadah-grid" id="ov-ibadah-list">
|
||
<div style="grid-column:span 2;text-align:center;padding:20px;color:var(--text2);font-size:11px">Memuat data...</div>
|
||
</div>
|
||
</div>
|
||
</div><!-- /ovpanel-ibadah -->
|
||
|
||
<!-- Sub-panel: Aktivitas -->
|
||
<div class="sub-panel" id="ovpanel-aktivitas">
|
||
<div class="overview">
|
||
<div class="ov-sec-hd" style="margin-bottom:12px">
|
||
<div class="ov-sec-title">Aktivitas Terkini</div>
|
||
</div>
|
||
<div id="ov-activity-list">
|
||
<div style="text-align:center;padding:20px;color:var(--text2);font-size:11px">Memuat...</div>
|
||
</div>
|
||
</div>
|
||
</div><!-- /ovpanel-aktivitas -->
|
||
|
||
</div><!-- /tab-overview -->
|
||
|
||
<!-- ══ PANEL: PETA ══ -->
|
||
<div class="s-panel" id="tab-peta">
|
||
|
||
<!-- Secondary navbar for peta -->
|
||
<div class="sec-nav">
|
||
<button class="snav-btn active" id="pnav2-filter" onclick="switchPetaSub('filter')">🔍 Filter</button>
|
||
<button class="snav-btn" id="pnav2-legenda" onclick="switchPetaSub('legenda')">🗺️ Legenda</button>
|
||
<button class="snav-btn" id="pnav2-aksi" onclick="switchPetaSub('aksi')">⚡ Aksi</button>
|
||
</div>
|
||
|
||
<!-- Sub-panel: Filter -->
|
||
<div class="sub-panel active" id="petapanel-filter">
|
||
<div style="padding:12px 13px;display:flex;flex-direction:column;gap:10px">
|
||
<div>
|
||
<label style="font-size:10px;font-weight:800;color:var(--text2);display:block;margin-bottom:5px;letter-spacing:0.4px;text-transform:uppercase">Filter Status Ekonomi</label>
|
||
<select id="filter-ekonomi" onchange="loadPenduduk()" style="width:100%;background:rgba(255,255,255,0.04);border:1px solid var(--border);color:var(--text);padding:8px 10px;border-radius:9px;font-family:'Sora',sans-serif;font-size:11px;outline:none">
|
||
<option value="all">Semua Status</option>
|
||
<option value="sangat_miskin">🔴 Sangat Miskin</option>
|
||
<option value="miskin">🟠 Miskin</option>
|
||
<option value="rentan">🟡 Rentan</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label style="font-size:10px;font-weight:800;color:var(--text2);display:block;margin-bottom:5px;letter-spacing:0.4px;text-transform:uppercase">Tampilkan Layer</label>
|
||
<div style="display:flex;gap:6px">
|
||
<button class="fb on" id="fb-ibadah" onclick="toggleLayer('ibadah',this)" style="flex:1">🕌 Ibadah</button>
|
||
<button class="fb on" id="fb-radius" onclick="toggleLayer('radius',this)" style="flex:1">⭕ Radius</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Sub-panel: Legenda -->
|
||
<div class="sub-panel" id="petapanel-legenda">
|
||
<div style="padding:12px 13px">
|
||
<div style="font-size:10px;font-weight:800;color:var(--text2);letter-spacing:0.5px;text-transform:uppercase;margin-bottom:8px">Simbol Peta</div>
|
||
<div class="leg-grid" style="margin-bottom:10px">
|
||
<div class="leg-item">⚠️ Sangat Miskin</div>
|
||
<div class="leg-item">🟠 Miskin</div>
|
||
<div class="leg-item">🟡 Rentan</div>
|
||
<div class="leg-item">📍 Lokasi Saya</div>
|
||
<div class="leg-item">🕌 Masjid</div>
|
||
<div class="leg-item">⛪ Gereja</div>
|
||
<div class="leg-item">🏯 Vihara</div>
|
||
<div class="leg-item">⭕ Radius</div>
|
||
</div>
|
||
<div class="leg-note">
|
||
💡 <b>Cara kirim laporan:</b><br>
|
||
Klik marker penduduk di peta → pilih "Laporan Kejadian" → isi formulir
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Sub-panel: Aksi -->
|
||
<div class="sub-panel" id="petapanel-aksi">
|
||
<div style="padding:12px 13px;display:flex;flex-direction:column;gap:8px">
|
||
<button class="fb" onclick="goMyLocation()" style="padding:11px;font-size:11px">📍 Tampilkan Lokasi Saya</button>
|
||
<button class="fb" onclick="resetMap()" style="padding:11px;font-size:11px">🔄 Reset Peta</button>
|
||
<div style="padding:9px 11px;background:rgba(59,130,246,0.06);border:1px solid rgba(59,130,246,0.15);border-radius:9px;font-size:10px;color:rgba(147,197,253,0.85);line-height:1.6;margin-top:4px">
|
||
ℹ️ Klik marker pada peta untuk melihat detail penduduk dan mengirim laporan kejadian.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div><!-- /tab-peta -->
|
||
|
||
<!-- ── TAB: BANTUAN ── -->
|
||
<div class="s-panel" id="tab-bantuan">
|
||
<div class="ph"><div class="ph-title">🤝 Riwayat Bantuan</div><div class="ph-sub">Bantuan yang diterima keluarga</div></div>
|
||
<div id="bantuan-list" style="padding:12px">
|
||
<div class="empty"><div class="ei">⏳</div><p>Memuat riwayat bantuan...</p></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ── TAB: RIWAYAT LAPORAN ── -->
|
||
<div class="s-panel" id="tab-riwayat">
|
||
<div class="ph"><div class="ph-title">📋 Riwayat Laporan</div><div class="ph-sub">Laporan yang pernah Anda kirim</div></div>
|
||
<div id="riwayat-list" style="padding:12px">
|
||
<div class="empty"><div class="ei">⏳</div><p>Memuat...</p></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ── TAB: CHAT ── -->
|
||
|
||
</div>
|
||
|
||
<!-- ── CHAT MODAL ── -->
|
||
<div class="chat-modal-overlay hidden" id="chat-modal-overlay" onclick="closeChatModal(event)">
|
||
<div class="chat-modal">
|
||
<div style="position:relative">
|
||
<div class="chat-modal-drag"></div>
|
||
</div>
|
||
<div class="chat-modal-hd">
|
||
<div class="chat-modal-icon" id="cmo-icon">🕌</div>
|
||
<div class="chat-modal-info">
|
||
<div class="chat-modal-name" id="cmo-name">Rumah Ibadah</div>
|
||
<div class="chat-modal-sub" id="cmo-sub">Chat langsung dengan pengurus</div>
|
||
</div>
|
||
<button class="chat-modal-close" onclick="closeChatModal()">✕</button>
|
||
</div>
|
||
<div class="chat-modal-msgs" id="chat-msgs-body">
|
||
<div class="empty" style="height:100%;justify-content:center">
|
||
<div class="ei">💬</div>
|
||
<p>Memuat pesan...</p>
|
||
</div>
|
||
</div>
|
||
<div class="chat-modal-input">
|
||
<textarea class="chat-modal-inp" id="chat-mas-input" rows="1" placeholder="Tulis pesan..."
|
||
onkeydown="if(event.key==='Enter'&&!event.shiftKey){event.preventDefault();sendChatMasyarakat();}"></textarea>
|
||
<button class="chat-modal-send" onclick="sendChatMasyarakat()">📤</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ── MAP ── -->
|
||
<div class="map-wrap">
|
||
<div id="map"></div>
|
||
<div class="fab-wrap">
|
||
<button class="fab fab-loc" onclick="goMyLocation()" title="Lokasi Saya">📍</button>
|
||
<button class="fab fab-reset" onclick="resetMap()" title="Reset Peta">🔄</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══════════════ MODAL: DETAIL KK + LAPORAN ══════════════ -->
|
||
<div class="mo hidden" id="modal-kk">
|
||
<div class="md">
|
||
<div class="mh">
|
||
<div class="mt-m" id="modal-kk-title">Detail Penduduk</div>
|
||
<button class="mc" onclick="closeModal()">✕</button>
|
||
</div>
|
||
<div class="mb-m" id="modal-kk-body"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══════════════ MODAL: FORM LAPORAN ══════════════ -->
|
||
<div class="mo hidden" id="modal-laporan">
|
||
<div class="md">
|
||
<div class="mh">
|
||
<div class="mt-m">📢 Kirim Laporan Kejadian</div>
|
||
<button class="mc" onclick="closeLaporan()">✕</button>
|
||
</div>
|
||
<div class="mb-m">
|
||
<!-- Preview KK yang dilaporkan -->
|
||
<div class="kk-preview" id="lap-kk-preview">
|
||
<div class="kk-preview-title">📍 Terkait Penduduk</div>
|
||
<div class="kk-preview-nama" id="lap-kk-nama">—</div>
|
||
<div class="kk-preview-meta" id="lap-kk-meta">—</div>
|
||
</div>
|
||
|
||
<div class="info-tip">
|
||
⚡ Laporan akan langsung diteruskan ke pengurus rumah ibadah di wilayah penduduk ini.
|
||
</div>
|
||
|
||
<div class="lap-section">
|
||
<div class="fl">
|
||
<label>Jenis Kejadian *</label>
|
||
<select id="lap-jenis">
|
||
<option value="kelahiran">🍼 Kelahiran — Ada bayi baru lahir</option>
|
||
<option value="kematian">⚰️ Kematian — Ada yang meninggal dunia</option>
|
||
<option value="pindah_masuk">📦 Pindah Masuk — Ada penduduk pindah ke sini</option>
|
||
<option value="pindah_keluar">🚚 Pindah Keluar — Penduduk pindah keluar</option>
|
||
<option value="pernikahan">💒 Pernikahan — Ada pernikahan baru</option>
|
||
<option value="perubahan_data">📝 Perubahan Data — Koreksi data penduduk</option>
|
||
<option value="lainnya">📌 Lainnya</option>
|
||
</select>
|
||
</div>
|
||
<div class="fl">
|
||
<label>Nama yang Terlibat</label>
|
||
<input type="text" id="lap-nama" placeholder="Nama orang yang terkait kejadian...">
|
||
</div>
|
||
<div class="fl">
|
||
<label>Tanggal Kejadian *</label>
|
||
<input type="date" id="lap-tgl">
|
||
</div>
|
||
<div class="fl">
|
||
<label>Deskripsi Lengkap *</label>
|
||
<textarea id="lap-desk" rows="4" placeholder="Ceritakan apa yang terjadi secara singkat dan jelas... Contoh: Bapak Sukirman (50 th) warga RT03/RW02 telah meninggal dunia pada hari ini pukul 08.00 WIB karena sakit."></textarea>
|
||
</div>
|
||
<div class="fl">
|
||
<label>Foto Pendukung (opsional)</label>
|
||
<input type="file" id="lap-foto" accept="image/*" style="font-size:11px">
|
||
</div>
|
||
<div style="display:flex;gap:8px">
|
||
<button class="btn btn-g" onclick="closeLaporan()" style="flex:1;justify-content:center">Batal</button>
|
||
<button class="btn btn-p" id="btn-lap-kirim" onclick="kirimLaporan()" style="flex:2;justify-content:center">📤 Kirim Laporan</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- NOTIF PANEL backdrop -->
|
||
<div id="notif-back" onclick="tutupNotif()" style="display:none;position:fixed;inset:0;z-index:150"></div>
|
||
|
||
<!-- TOAST -->
|
||
<div id="toast" style="display:none" class="toast"></div>
|
||
|
||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
||
<script>
|
||
// ══════════════════════════════════════════
|
||
// MAP SETUP
|
||
// ══════════════════════════════════════════
|
||
let map = L.map('map', {
|
||
center: [-0.0263, 109.3425],
|
||
zoom: 13,
|
||
zoomControl: false
|
||
});
|
||
window.map = map; // buat accessible dari Leaflet popup onclick
|
||
// Paksa Leaflet hitung ulang ukuran kontainer (retry beberapa kali agar pasti)
|
||
[100,300,600,1000].forEach(ms => setTimeout(() => map.invalidateSize(), ms));
|
||
|
||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||
attribution: '© OpenStreetMap',
|
||
maxZoom: 19
|
||
}).addTo(map);
|
||
|
||
L.control.zoom({ position: 'bottomright' }).addTo(map);
|
||
|
||
// Layer groups
|
||
const LG = {
|
||
ibadah: L.layerGroup().addTo(map),
|
||
penduduk: L.layerGroup().addTo(map),
|
||
radius: L.layerGroup().addTo(map),
|
||
myLoc: L.layerGroup().addTo(map),
|
||
};
|
||
const LV = { ibadah: true, radius: true };
|
||
|
||
// ── ICONS ──
|
||
function mkIcon(color, emoji, sz = 30, opacity = 1) {
|
||
return L.divIcon({
|
||
className: '',
|
||
html: `<div style="
|
||
width:${sz}px;height:${sz}px;background:${color};border-radius:50%;
|
||
display:flex;align-items:center;justify-content:center;font-size:${Math.round(sz*0.47)}px;
|
||
box-shadow:0 3px 12px rgba(0,0,0,0.5);
|
||
border:2px solid rgba(255,255,255,0.3);
|
||
opacity:${opacity};cursor:pointer;
|
||
transition:transform 0.15s;
|
||
">${emoji}</div>`,
|
||
iconSize: [sz, sz],
|
||
iconAnchor: [sz/2, sz/2],
|
||
popupAnchor: [0, -sz/2 - 4]
|
||
});
|
||
}
|
||
|
||
const IMAP = {
|
||
masjid: mkIcon('#3b82f6','🕌',32),
|
||
gereja: mkIcon('#8b5cf6','⛪',32),
|
||
vihara: mkIcon('#f59e0b','🏯',32),
|
||
pura: mkIcon('#10b981','🛕',32),
|
||
klenteng: mkIcon('#06b6d4','⛩️',32),
|
||
lainnya: mkIcon('#64748b','🏢',32),
|
||
sangat_miskin: mkIcon('#ef4444','⚠️',34),
|
||
miskin: mkIcon('#f97316','🔸',30),
|
||
rentan: mkIcon('#eab308','🔶',28),
|
||
mampu: mkIcon('#22c55e','🔷',26),
|
||
me: mkIcon('#06b6d4','📍',36),
|
||
};
|
||
|
||
function iIcon(j) { return IMAP[(j||'').toLowerCase()] || IMAP.lainnya; }
|
||
function pIcon(se){ return IMAP[se] || IMAP.miskin; }
|
||
|
||
function toggleLayer(key, btn) {
|
||
if (LV[key]) {
|
||
map.removeLayer(LG[key]); LV[key] = false;
|
||
btn && btn.classList.remove('on');
|
||
} else {
|
||
map.addLayer(LG[key]); LV[key] = true;
|
||
btn && btn.classList.add('on');
|
||
}
|
||
}
|
||
function resetMap() { map.setView([-0.0263, 109.3425], 13); }
|
||
|
||
// ══════════════════════════════════════════
|
||
// LOAD DATA
|
||
// ══════════════════════════════════════════
|
||
async function loadDashboard() {
|
||
try {
|
||
const d = await fetch('../api/penduduk.php?action=dashboard').then(r => r.json());
|
||
document.getElementById('s-kk').textContent = d.total_kk || 0;
|
||
document.getElementById('s-jiwa').textContent = d.total_jiwa || 0;
|
||
document.getElementById('s-ibadah').textContent = d.total_ibadah|| 0;
|
||
document.getElementById('s-bantuan').textContent = d.total_bantuan||0;
|
||
} catch(e) {}
|
||
}
|
||
|
||
async function loadIbadah() {
|
||
try {
|
||
const gj = await fetch('../api/rumah_ibadah.php?action=geojson').then(r => r.json());
|
||
LG.ibadah.clearLayers();
|
||
LG.radius.clearLayers();
|
||
(gj.features || []).forEach(f => {
|
||
const p = f.properties, [lng, lat] = f.geometry.coordinates;
|
||
L.circle([lat, lng], {
|
||
radius: p.radius, color: '#3b82f6', fillColor: '#3b82f6',
|
||
fillOpacity: 0.05, weight: 1, dashArray: '5,4'
|
||
}).addTo(LG.radius);
|
||
|
||
const ico = p.jenis==='Masjid'?'🕌':p.jenis==='Gereja'?'⛪':p.jenis==='Vihara'?'🏯':'🛕';
|
||
const m = L.marker([lat, lng], { icon: iIcon(p.jenis) }).addTo(LG.ibadah);
|
||
|
||
m.bindPopup(`
|
||
<div style="font-family:'Sora',sans-serif;padding:4px 2px;min-width:200px">
|
||
<div style="display:flex;align-items:center;gap:8px;margin-bottom:8px">
|
||
<span style="font-size:22px">${ico}</span>
|
||
<div>
|
||
<div style="font-size:13px;font-weight:800;line-height:1.2">${p.nama||'-'}</div>
|
||
<div style="font-size:10px;color:#7c93b5;margin-top:1px">${p.jenis||''}</div>
|
||
</div>
|
||
</div>
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-bottom:10px">
|
||
<div style="background:rgba(59,130,246,0.08);border:1px solid rgba(59,130,246,0.15);border-radius:8px;padding:6px 8px;text-align:center">
|
||
<div style="font-size:16px;font-weight:800;color:#3b82f6">${p.jumlah_kk||0}</div>
|
||
<div style="font-size:9px;color:#7c93b5;font-weight:700">KK Binaan</div>
|
||
</div>
|
||
<div style="background:rgba(16,185,129,0.08);border:1px solid rgba(16,185,129,0.15);border-radius:8px;padding:6px 8px;text-align:center">
|
||
<div style="font-size:16px;font-weight:800;color:#10b981">${p.jumlah_bantuan||0}</div>
|
||
<div style="font-size:9px;color:#7c93b5;font-weight:700">Bantuan</div>
|
||
</div>
|
||
</div>
|
||
${p.kecamatan ? `<div style="font-size:10px;color:#7c93b5;margin-bottom:8px">📍 ${p.kecamatan}</div>` : ''}
|
||
<button class="popup-chat-btn"
|
||
style="width:100%;padding:8px;background:linear-gradient(135deg,#3b82f6,#06b6d4);
|
||
color:#fff;border:none;border-radius:9px;font-family:'Sora',sans-serif;
|
||
font-size:11px;font-weight:700;cursor:pointer;display:flex;align-items:center;
|
||
justify-content:center;gap:6px">
|
||
💬 Chat dengan Pengurus
|
||
</button>
|
||
</div>`, { maxWidth: 240 });
|
||
|
||
// Bind klik tombol chat via event listener (aman dari quote-escape)
|
||
m.on('popupopen', () => {
|
||
const btn = m.getPopup().getElement().querySelector('.popup-chat-btn');
|
||
if (btn) btn.onclick = () => openChatModal(p.id, ico, p.nama||'');
|
||
});
|
||
});
|
||
} catch(e) {}
|
||
}
|
||
|
||
// Data KK cache untuk sidebar
|
||
let kkCache = [];
|
||
|
||
async function loadPenduduk() {
|
||
try {
|
||
const se = document.getElementById('filter-ekonomi').value;
|
||
const url = `../api/penduduk.php?action=geojson${se !== 'all' ? '&status_ekonomi=' + se : ''}`;
|
||
const gj = await fetch(url).then(r => r.json());
|
||
LG.penduduk.clearLayers();
|
||
kkCache = gj.features || [];
|
||
|
||
kkCache.forEach(f => {
|
||
const p = f.properties, [lng, lat] = f.geometry.coordinates;
|
||
const m = L.marker([lat, lng], { icon: pIcon(p.status_ekonomi) }).addTo(LG.penduduk);
|
||
|
||
// Buat popup dengan tombol laporan
|
||
m.bindPopup(buildKKPopup(p), { maxWidth: 260 });
|
||
|
||
// Saat popup dibuka, set penduduk aktif
|
||
m.on('popupopen', () => { activeKK = p; });
|
||
});
|
||
|
||
// Update sidebar KK list
|
||
renderKKList(kkCache);
|
||
} catch(e) {}
|
||
}
|
||
|
||
// Penduduk aktif (dipilih di peta)
|
||
let activeKK = null;
|
||
|
||
function buildKKPopup(p) {
|
||
return `<div style="font-family:'Sora',sans-serif;padding:4px;min-width:220px">
|
||
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:6px">
|
||
<b style="font-size:13px;flex:1">${p.nama_kepala_keluarga}</b>
|
||
${seBadge(p.status_ekonomi)}
|
||
</div>
|
||
<div style="font-size:11px;color:#64748b;line-height:1.8;margin-bottom:8px">
|
||
📍 ${p.alamat||'-'}${p.rt?`, RT${p.rt}/RW${p.rw}`:''}<br>
|
||
👥 ${p.jumlah_anggota} jiwa ·
|
||
🕌 ${p.nama_ibadah||'-'}<br>
|
||
🤝 ${p.jumlah_bantuan||0}x bantuan diterima
|
||
</div>
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:6px">
|
||
<button onclick="openDetailKK(${p.id})"
|
||
style="padding:6px;background:#1e3a5f;border:1px solid #3b82f6;color:#93c5fd;border-radius:8px;cursor:pointer;font-size:10px;font-weight:700;font-family:'Sora',sans-serif">
|
||
🔍 Detail
|
||
</button>
|
||
<button onclick="bukaFormLaporan(${p.id},'${escQ(p.nama_kepala_keluarga)}','${escQ(p.alamat||'')}','${escQ(p.kelurahan||'')}',${p.id_rumah_ibadah||0})"
|
||
style="padding:6px;background:linear-gradient(135deg,#3b82f6,#06b6d4);border:none;color:#fff;border-radius:8px;cursor:pointer;font-size:10px;font-weight:700;font-family:'Sora',sans-serif">
|
||
📢 Laporan
|
||
</button>
|
||
</div>
|
||
</div>`;
|
||
}
|
||
|
||
function escQ(s) { return (s||'').replace(/'/g,"'").replace(/"/g,'"').replace(/\n/g,' '); }
|
||
|
||
function seBadge(se) {
|
||
const m = {
|
||
sangat_miskin: ['#fca5a5','rgba(239,68,68,0.15)','Sangat Miskin'],
|
||
miskin: ['#fcd34d','rgba(245,158,11,0.15)','Miskin'],
|
||
rentan: ['#c4b5fd','rgba(139,92,246,0.15)','Rentan'],
|
||
mampu: ['#6ee7b7','rgba(16,185,129,0.15)','Mampu'],
|
||
};
|
||
const v = m[se] || ['#94a3b8','rgba(255,255,255,0.08)', se||'-'];
|
||
return `<span style="padding:2px 8px;border-radius:5px;font-size:9px;font-weight:800;color:${v[0]};background:${v[1]}">${v[2]}</span>`;
|
||
}
|
||
|
||
function renderKKList(features) {
|
||
// Tidak ada sidebar KK list di tab peta — panduan cukup di legenda
|
||
}
|
||
|
||
// ══════════════════════════════════════════
|
||
// DETAIL KK MODAL
|
||
// ══════════════════════════════════════════
|
||
async function openDetailKK(id) {
|
||
map.closePopup();
|
||
document.getElementById('modal-kk').classList.remove('hidden');
|
||
document.getElementById('modal-kk-body').innerHTML =
|
||
'<div style="text-align:center;padding:30px;color:var(--text2)">⏳ Memuat data...</div>';
|
||
|
||
try {
|
||
const f = await fetch(`../api/penduduk.php?action=get&id=${id}`).then(r => r.json());
|
||
const p = f.properties;
|
||
const anggota = p.anggota || [];
|
||
const bantuan = (p.histori_bantuan || []).slice(0, 5);
|
||
|
||
document.getElementById('modal-kk-title').textContent = p.nama_kepala_keluarga;
|
||
document.getElementById('modal-kk-body').innerHTML = `
|
||
<div style="margin-bottom:14px">
|
||
<div style="display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px">
|
||
${seBadge(p.status_ekonomi)}
|
||
${p.nama_ibadah ? `<span style="padding:2px 8px;border-radius:5px;font-size:9px;font-weight:800;color:#93c5fd;background:rgba(59,130,246,0.15)">🕌 ${p.nama_ibadah}</span>` : ''}
|
||
</div>
|
||
<div style="font-size:11px;color:var(--text2);line-height:1.8">
|
||
📍 ${p.alamat||'-'}${p.rt?`, RT${p.rt}/RW${p.rw}`:''}
|
||
${p.kelurahan?`<br>🏘️ Kel. ${p.kelurahan}, Kec. ${p.kecamatan||'-'}`:''}
|
||
${p.jarak_ke_ibadah?`<br>📏 Jarak ke ibadah: ${p.jarak_ke_ibadah}m`:''}
|
||
</div>
|
||
</div>
|
||
|
||
<div style="font-size:10px;font-weight:800;color:var(--text2);letter-spacing:0.5px;text-transform:uppercase;padding-bottom:8px;border-bottom:1px solid var(--border);margin-bottom:10px">
|
||
👥 Anggota Keluarga (${anggota.length})
|
||
</div>
|
||
${anggota.length ? anggota.map(a => `
|
||
<div class="ak-card">
|
||
<div class="ak-row">
|
||
<div class="ak-av" style="background:${a.jenis_kelamin==='L'?'rgba(59,130,246,0.15)':'rgba(236,72,153,0.15)'}">
|
||
${a.jenis_kelamin==='L'?'👦':'👧'}
|
||
</div>
|
||
<div style="flex:1">
|
||
<div class="ak-nama">${a.nama} ${a.status_hidup!=='hidup'?`<span class="badge br" style="font-size:9px">${a.status_hidup}</span>`:''}</div>
|
||
<div class="ak-meta">${a.hubungan} · ${a.umur||0} tahun · ${a.agama||'-'}</div>
|
||
${a.pendidikan_terakhir ? `<div class="ak-pend">📚 ${a.pendidikan_terakhir.jenjang}${a.pendidikan_terakhir.nama_institusi ? ' — '+a.pendidikan_terakhir.nama_institusi : ''}${a.pendidikan_terakhir.status_pendidikan==='sedang_berjalan'?' (aktif)':''}</div>` : ''}
|
||
${a.pekerjaan ? `<div style="font-size:10px;color:var(--text2);margin-top:2px">💼 ${a.pekerjaan}</div>` : ''}
|
||
</div>
|
||
</div>
|
||
</div>`).join('') : '<div class="empty" style="padding:14px"><p>Belum ada data anggota</p></div>'}
|
||
|
||
<div style="font-size:10px;font-weight:800;color:var(--text2);letter-spacing:0.5px;text-transform:uppercase;padding:10px 0 8px;border-top:1px solid var(--border);margin-top:4px">
|
||
🤝 Riwayat Bantuan (${(p.histori_bantuan||[]).length}x)
|
||
</div>
|
||
${bantuan.length ? bantuan.map(b => `
|
||
<div class="bc">
|
||
<div class="bc-top">
|
||
<div class="bc-jenis">${b.jenis_bantuan}</div>
|
||
<div class="bc-tgl">${fDate(b.tanggal_bantuan)}</div>
|
||
</div>
|
||
<div class="bc-detail">
|
||
📦 ${b.bentuk_bantuan}
|
||
${b.jumlah_nominal?`<br>💰 Rp${Number(b.jumlah_nominal).toLocaleString('id')}`:''}
|
||
</div>
|
||
<div class="bc-src">🕌 ${b.nama_ibadah||b.sumber_bantuan||'-'}${b.nama_mitra?` + mitra: ${b.nama_mitra}`:''}</div>
|
||
</div>`).join('') : '<div class="empty" style="padding:12px"><p>Belum ada bantuan tercatat</p></div>'}
|
||
|
||
<div style="margin-top:14px">
|
||
<button class="btn btn-p btn-full"
|
||
onclick="closeModal();bukaFormLaporan(${p.id},'${escQ(p.nama_kepala_keluarga)}','${escQ(p.alamat||'')}','${escQ(p.kelurahan||'')}',${p.id_rumah_ibadah||0})">
|
||
📢 Laporkan Kejadian pada Keluarga Ini
|
||
</button>
|
||
</div>`;
|
||
} catch(e) {
|
||
document.getElementById('modal-kk-body').innerHTML =
|
||
'<p style="text-align:center;color:var(--red);padding:20px">Gagal memuat data</p>';
|
||
}
|
||
}
|
||
|
||
function closeModal() { document.getElementById('modal-kk').classList.add('hidden'); }
|
||
|
||
// ══════════════════════════════════════════
|
||
// FORM LAPORAN
|
||
// ══════════════════════════════════════════
|
||
let lapKKId = null;
|
||
|
||
function bukaFormLaporan(kkId, nama, alamat, kelurahan, ibadahId) {
|
||
// Tutup popup & modal lain
|
||
map.closePopup();
|
||
document.getElementById('modal-kk').classList.add('hidden');
|
||
|
||
lapKKId = kkId;
|
||
|
||
// Set preview KK
|
||
document.getElementById('lap-kk-nama').textContent = nama;
|
||
document.getElementById('lap-kk-meta').textContent =
|
||
`📍 ${alamat}${kelurahan ? ', Kel. '+kelurahan : ''}`;
|
||
|
||
// Reset form
|
||
document.getElementById('lap-jenis').value = 'kelahiran';
|
||
document.getElementById('lap-nama').value = '';
|
||
document.getElementById('lap-tgl').value = today();
|
||
document.getElementById('lap-desk').value = '';
|
||
document.getElementById('lap-foto').value = '';
|
||
const btn = document.getElementById('btn-lap-kirim');
|
||
btn.disabled = false;
|
||
btn.innerHTML = '📤 Kirim Laporan';
|
||
|
||
document.getElementById('modal-laporan').classList.remove('hidden');
|
||
}
|
||
|
||
function closeLaporan() {
|
||
document.getElementById('modal-laporan').classList.add('hidden');
|
||
lapKKId = null;
|
||
}
|
||
|
||
async function kirimLaporan() {
|
||
const desk = document.getElementById('lap-desk').value.trim();
|
||
const tgl = document.getElementById('lap-tgl').value;
|
||
|
||
if (!lapKKId) { showToast('Pilih penduduk di peta terlebih dahulu','error'); return; }
|
||
if (!desk) { showToast('Deskripsi wajib diisi','error'); return; }
|
||
if (!tgl) { showToast('Tanggal kejadian wajib diisi','error'); return; }
|
||
|
||
const btn = document.getElementById('btn-lap-kirim');
|
||
btn.disabled = true;
|
||
btn.innerHTML = '<div class="spinner"></div> Mengirim...';
|
||
|
||
const fd = new FormData();
|
||
fd.append('id_penduduk', lapKKId);
|
||
fd.append('jenis_laporan', document.getElementById('lap-jenis').value);
|
||
fd.append('nama_terkait', document.getElementById('lap-nama').value.trim());
|
||
fd.append('tanggal_kejadian', tgl);
|
||
fd.append('deskripsi', desk);
|
||
const foto = document.getElementById('lap-foto').files[0];
|
||
if (foto) fd.append('lampiran', foto);
|
||
|
||
try {
|
||
const d = await fetch('../api/laporan.php?action=kirim', { method:'POST', body: fd }).then(r => r.json());
|
||
if (d.success) {
|
||
showToast('✅ Laporan berhasil dikirim! Terima kasih.', 'success');
|
||
closeLaporan();
|
||
// Refresh riwayat jika tab aktif
|
||
if (document.getElementById('tab-riwayat').classList.contains('active')) loadRiwayat();
|
||
} else {
|
||
showToast(d.error || 'Gagal mengirim laporan', 'error');
|
||
btn.disabled = false;
|
||
btn.innerHTML = '📤 Kirim Laporan';
|
||
}
|
||
} catch(e) {
|
||
showToast('Kesalahan koneksi', 'error');
|
||
btn.disabled = false;
|
||
btn.innerHTML = '📤 Kirim Laporan';
|
||
}
|
||
}
|
||
|
||
// ══════════════════════════════════════════
|
||
// GEOLOCATION
|
||
// ══════════════════════════════════════════
|
||
function goMyLocation() {
|
||
if (!navigator.geolocation) { showToast('Geolokasi tidak didukung browser ini', 'error'); return; }
|
||
showToast('🔍 Mencari lokasi Anda...', 'info');
|
||
navigator.geolocation.getCurrentPosition(pos => {
|
||
const lat = pos.coords.latitude, lng = pos.coords.longitude;
|
||
LG.myLoc.clearLayers();
|
||
L.marker([lat, lng], { icon: IMAP.me })
|
||
.addTo(LG.myLoc)
|
||
.bindPopup(`<div style="font-family:'Sora',sans-serif">
|
||
<b>📍 Lokasi Saya</b><br>
|
||
<span style="font-size:11px;color:#64748b">
|
||
${lat.toFixed(5)}, ${lng.toFixed(5)}<br>
|
||
Akurasi ±${Math.round(pos.coords.accuracy)}m
|
||
</span>
|
||
</div>`).openPopup();
|
||
L.circle([lat, lng], {
|
||
radius: pos.coords.accuracy,
|
||
color: '#06b6d4', fillColor: '#06b6d4', fillOpacity: 0.08, weight: 1
|
||
}).addTo(LG.myLoc);
|
||
map.flyTo([lat, lng], 16, { animate: true, duration: 1 });
|
||
showToast('✅ Lokasi ditemukan!', 'success');
|
||
}, err => {
|
||
const msgs = {1:'Izin ditolak. Aktifkan lokasi di browser.',2:'Sinyal GPS lemah.',3:'Timeout. Coba lagi.'};
|
||
showToast(msgs[err.code]||'Gagal mendapat lokasi', 'error');
|
||
}, { enableHighAccuracy: true, timeout: 10000 });
|
||
}
|
||
|
||
// ══════════════════════════════════════════
|
||
// OVERVIEW
|
||
// ══════════════════════════════════════════
|
||
// ── Clock & greeting ──────────────────────────────────────
|
||
(function tickClock() {
|
||
const pad = n => String(n).padStart(2,'0');
|
||
function update() {
|
||
const now = new Date();
|
||
const h = now.getHours(), m = now.getMinutes();
|
||
const el = document.getElementById('ov-clock');
|
||
const de = document.getElementById('ov-date');
|
||
const gi = document.getElementById('ov-greeting-icon');
|
||
const gt = document.getElementById('ov-greeting-title');
|
||
if (el) el.textContent = `${pad(h)}:${pad(m)}`;
|
||
const days = ['Minggu','Senin','Selasa','Rabu','Kamis','Jumat','Sabtu'];
|
||
const months = ['Jan','Feb','Mar','Apr','Mei','Jun','Jul','Ags','Sep','Okt','Nov','Des'];
|
||
if (de) de.textContent = `${days[now.getDay()]}, ${now.getDate()} ${months[now.getMonth()]} ${now.getFullYear()}`;
|
||
if (gi && gt) {
|
||
if (h < 6) { gi.textContent='🌙'; gt.textContent='Selamat malam di Portal Masyarakat'; }
|
||
else if (h < 11) { gi.textContent='🌅'; gt.textContent='Selamat pagi di Portal Masyarakat'; }
|
||
else if (h < 15) { gi.textContent='☀️'; gt.textContent='Selamat siang di Portal Masyarakat'; }
|
||
else if (h < 19) { gi.textContent='🌤️'; gt.textContent='Selamat sore di Portal Masyarakat'; }
|
||
else { gi.textContent='🌙'; gt.textContent='Selamat malam di Portal Masyarakat'; }
|
||
}
|
||
}
|
||
update();
|
||
setInterval(update, 30000);
|
||
})();
|
||
|
||
async function loadOverview() {
|
||
try {
|
||
const d = await fetch('../api/penduduk.php?action=dashboard').then(r => r.json());
|
||
|
||
// Animate numbers counting up
|
||
const animNum = (id, target) => {
|
||
const el = document.getElementById(id); if (!el) return;
|
||
const dur = 900, start = performance.now();
|
||
const step = ts => {
|
||
const p = Math.min((ts - start) / dur, 1);
|
||
const ease = 1 - Math.pow(1 - p, 3);
|
||
el.textContent = Math.round(ease * target).toLocaleString('id-ID');
|
||
if (p < 1) requestAnimationFrame(step);
|
||
};
|
||
requestAnimationFrame(step);
|
||
};
|
||
|
||
animNum('ov-kk', d.total_kk || 0);
|
||
animNum('ov-jiwa', d.total_jiwa || 0);
|
||
animNum('ov-sm', d.sangat_miskin|| 0);
|
||
animNum('ov-miskin', d.miskin || 0);
|
||
animNum('ov-bantuan', d.total_bantuan|| 0);
|
||
animNum('ov-ibadah', d.total_ibadah|| 0);
|
||
|
||
// Progress bars on KPI cards
|
||
const kk = d.total_kk || 1;
|
||
setTimeout(() => {
|
||
const setBar = (id, pct) => {
|
||
const el = document.getElementById(id); if (el) el.style.width = Math.min(pct,100) + '%';
|
||
};
|
||
setBar('bar-kk', 85);
|
||
setBar('bar-sm', ((d.sangat_miskin || 0) / kk) * 100 * 3);
|
||
setBar('bar-mis', ((d.miskin || 0) / kk) * 100 * 3);
|
||
}, 100);
|
||
|
||
// Update last-update badge
|
||
const upd = document.getElementById('ov-last-update');
|
||
if (upd) { const now = new Date(); upd.textContent = `Diperbarui ${now.getHours()}:${String(now.getMinutes()).padStart(2,'0')}`; }
|
||
|
||
// Status breakdown bars
|
||
const total = (d.sangat_miskin||0) + (d.miskin||0) + (d.hampir_miskin||0) + (d.tidak_miskin||0) || kk;
|
||
const setPct = (barId, valId, pctId, val) => {
|
||
setTimeout(() => {
|
||
const b = document.getElementById(barId); if (b) b.style.width = ((val/total)*100).toFixed(1) + '%';
|
||
}, 200);
|
||
const v = document.getElementById(valId); if (v) v.textContent = (val||0).toLocaleString('id-ID');
|
||
const p = document.getElementById(pctId); if (p) p.textContent = total > 0 ? ((val/total)*100).toFixed(1)+'%' : '0%';
|
||
};
|
||
setPct('slb-sm', 'slv-sm', 'slp-sm', d.sangat_miskin || 0);
|
||
setPct('slb-mis', 'slv-mis', 'slp-mis', d.miskin || 0);
|
||
setPct('slb-hm', 'slv-hm', 'slp-hm', d.hampir_miskin || 0);
|
||
setPct('slb-tm', 'slv-tm', 'slp-tm', d.tidak_miskin || 0);
|
||
|
||
if (d.kecamatan_data) renderOVCharts(d.kecamatan_data, d.status_counts);
|
||
renderActivityFeed(d);
|
||
renderIbadahCards(d.ibadah_list);
|
||
} catch(e) { console.error('Load overview error:', e); }
|
||
}
|
||
|
||
function renderOVCharts(kecData, statusCounts) {
|
||
const fontCfg = { family: "'Sora', sans-serif", size: 10 };
|
||
const gridColor = 'rgba(99,179,237,0.08)';
|
||
const textColor = '#7c93b5';
|
||
|
||
// Donut (mini, horizontal legend)
|
||
if (window.ovChartDonut) window.ovChartDonut.destroy();
|
||
const ctx = document.getElementById('ov-chart-donut')?.getContext('2d');
|
||
if (ctx && statusCounts) {
|
||
const labels = Object.keys(statusCounts);
|
||
const data = Object.values(statusCounts);
|
||
const palette = { 'Sangat Miskin':'#ef4444','Miskin':'#f59e0b','Hampir Miskin':'#3b82f6','Tidak Miskin':'#10b981' };
|
||
const colors = labels.map(l => palette[l] || '#6366f1');
|
||
window.ovChartDonut = new Chart(ctx, {
|
||
type: 'doughnut',
|
||
data: { labels, datasets: [{ data, backgroundColor: colors.map(c=>c+'22'), borderColor: colors, borderWidth: 2, hoverBorderWidth: 3 }] },
|
||
options: {
|
||
responsive: true, maintainAspectRatio: false, cutout: '68%',
|
||
plugins: {
|
||
legend: { position: 'bottom', labels: { color: textColor, font: fontCfg, padding: 10, boxWidth: 10, boxHeight: 10 } },
|
||
tooltip: { callbacks: { label: ctx => ` ${ctx.label}: ${ctx.parsed.toLocaleString('id-ID')} KK` } }
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
// Bar chart per kecamatan
|
||
if (kecData && Object.keys(kecData).length > 0) {
|
||
if (window.ovChartKecamatan) window.ovChartKecamatan.destroy();
|
||
const kctx = document.getElementById('ov-chart-kecamatan')?.getContext('2d');
|
||
if (kctx) {
|
||
const kecLabels = Object.keys(kecData);
|
||
const kecValues = Object.values(kecData);
|
||
const max = Math.max(...kecValues);
|
||
const bgColors = kecValues.map(v => {
|
||
const pct = v / max;
|
||
return `rgba(${Math.round(59 + (6-59)*pct)},${Math.round(130 + (182-130)*pct)},${Math.round(246 + (212-246)*pct)},0.7)`;
|
||
});
|
||
window.ovChartKecamatan = new Chart(kctx, {
|
||
type: 'bar',
|
||
data: {
|
||
labels: kecLabels,
|
||
datasets: [{ label: 'Jumlah KK', data: kecValues, backgroundColor: bgColors,
|
||
borderColor: 'rgba(99,179,237,0.4)', borderWidth: 1, borderRadius: 7, borderSkipped: false }]
|
||
},
|
||
options: {
|
||
responsive: true, maintainAspectRatio: false,
|
||
plugins: { legend: { display: false },
|
||
tooltip: { callbacks: { label: ctx => ` ${ctx.parsed.y.toLocaleString('id-ID')} KK` } } },
|
||
scales: {
|
||
y: { grid: { color: gridColor }, ticks: { color: textColor, font: fontCfg },
|
||
border: { color: 'transparent' } },
|
||
x: { grid: { display: false }, ticks: { color: textColor, font: fontCfg, maxRotation: 35 },
|
||
border: { color: 'transparent' } }
|
||
}
|
||
}
|
||
});
|
||
}
|
||
}
|
||
}
|
||
|
||
function renderActivityFeed(d) {
|
||
const el = document.getElementById('ov-activity-list');
|
||
if (!el) return;
|
||
const items = [];
|
||
if (d.total_bantuan > 0)
|
||
items.push({ icon:'🤝', bg:'rgba(16,185,129,0.1)', title:`${(d.total_bantuan||0).toLocaleString('id-ID')} Bantuan Disalurkan`, sub:'Total program bantuan aktif', time:'Terkini' });
|
||
if (d.sangat_miskin > 0)
|
||
items.push({ icon:'⚠️', bg:'rgba(239,68,68,0.1)', title:`${(d.sangat_miskin||0).toLocaleString('id-ID')} KK Prioritas Penanganan`, sub:'Kategori sangat miskin butuh perhatian', time:'Data terbaru' });
|
||
if (d.total_ibadah > 0)
|
||
items.push({ icon:'🕌', bg:'rgba(139,92,246,0.1)', title:`${d.total_ibadah} Rumah Ibadah Aktif`, sub:'Melayani wilayah Kota Pontianak', time:'Terverifikasi' });
|
||
items.push({ icon:'📊', bg:'rgba(59,130,246,0.1)', title:`${(d.total_jiwa||0).toLocaleString('id-ID')} Jiwa Terdaftar`, sub:'Data kependudukan terverifikasi', time:'Real-time' });
|
||
if (!items.length) { el.innerHTML='<div style="text-align:center;padding:20px;color:var(--text2);font-size:11px">Belum ada aktivitas</div>'; return; }
|
||
el.innerHTML = items.map(it => `
|
||
<div class="act-item">
|
||
<div class="act-icon-wrap" style="background:${it.bg}">${it.icon}</div>
|
||
<div class="act-body">
|
||
<div class="act-title">${it.title}</div>
|
||
<div class="act-sub">${it.sub}</div>
|
||
</div>
|
||
<div class="act-time">${it.time}</div>
|
||
</div>`).join('');
|
||
}
|
||
|
||
function renderIbadahCards(ibadahList) {
|
||
const el = document.getElementById('ov-ibadah-list');
|
||
if (!el) return;
|
||
const icons = { masjid:'🕌', gereja:'⛪', vihara:'🏯', pura:'🛕', klenteng:'🔴' };
|
||
const makeCard = (p) => {
|
||
const ico = icons[(p.jenis||'').toLowerCase()] || '🕍';
|
||
const id = p.id || p.id_rumah_ibadah || 0;
|
||
const nm = (p.nama||'-').replace(/'/g,"\\'");
|
||
return `<div class="ov-icard" onclick="openChatModal(${id},'${ico}','${nm}')">
|
||
<div class="ov-icard-icon">${ico}</div>
|
||
<div class="ov-icard-body">
|
||
<div class="ov-icard-name">${p.nama||'-'}</div>
|
||
<div class="ov-icard-kk">👥 ${p.jumlah_kk||0} KK binaan</div>
|
||
</div>
|
||
<div class="ov-icard-chat" title="Chat">🗨️</div>
|
||
</div>`;
|
||
};
|
||
if (!ibadahList || !ibadahList.length) {
|
||
fetch('../api/rumah_ibadah.php?action=geojson').then(r=>r.json()).then(gj => {
|
||
const list = (gj.features||[]).slice(0,6).map(f=>({...f.properties, id:f.properties.id||f.id}));
|
||
if (!list.length) { el.innerHTML='<div style="grid-column:span 2;text-align:center;padding:16px;color:var(--text2);font-size:11px">Belum ada data rumah ibadah</div>'; return; }
|
||
el.innerHTML = list.map(makeCard).join('');
|
||
}).catch(()=>{ el.innerHTML='<div style="grid-column:span 2;text-align:center;padding:16px;color:var(--text2);font-size:11px">Data tidak tersedia</div>'; });
|
||
return;
|
||
}
|
||
el.innerHTML = ibadahList.slice(0,6).map(makeCard).join('');
|
||
}
|
||
|
||
// ══════════════════════════════════════════
|
||
// KELUARGA & BANTUAN
|
||
// ══════════════════════════════════════════
|
||
async function loadKeluarga() {
|
||
const el = document.getElementById('keluarga-content');
|
||
try {
|
||
const gj = await fetch('../api/penduduk.php?action=geojson').then(r => r.json());
|
||
const features = gj.features || [];
|
||
if (!features.length) {
|
||
el.innerHTML = `<div class="empty">
|
||
<div class="ei">👨👩👧</div>
|
||
<p>Data keluarga belum terdaftar.<br>Hubungi pengurus rumah ibadah setempat.</p>
|
||
</div>`; return;
|
||
}
|
||
const f = features[0], p = f.properties, anggota = p.anggota || [];
|
||
el.innerHTML = `
|
||
<div style="background:var(--card2);border:1px solid var(--border);border-radius:12px;padding:13px;margin-bottom:12px">
|
||
<div style="font-size:14px;font-weight:800;margin-bottom:6px">🏘️ ${p.nama_kepala_keluarga}</div>
|
||
<div style="font-size:11px;color:var(--text2);line-height:1.8">
|
||
📍 ${p.alamat||'-'}${p.rt?`, RT${p.rt}/RW${p.rw}`:''}
|
||
${p.kelurahan?`<br>🏘️ Kel. ${p.kelurahan}, Kec. ${p.kecamatan||'-'}`:''}
|
||
${p.nama_ibadah?`<br>🕌 ${p.nama_ibadah}`:''}
|
||
</div>
|
||
<div style="margin-top:8px">${seBadge(p.status_ekonomi)}</div>
|
||
</div>
|
||
<div style="font-size:10px;font-weight:800;color:var(--text2);letter-spacing:0.5px;text-transform:uppercase;margin-bottom:8px">
|
||
👥 ANGGOTA (${anggota.length})
|
||
</div>
|
||
${anggota.map(a => `
|
||
<div class="ak-card">
|
||
<div class="ak-row">
|
||
<div class="ak-av" style="background:${a.jenis_kelamin==='L'?'rgba(59,130,246,0.15)':'rgba(236,72,153,0.15)'}">
|
||
${a.jenis_kelamin==='L'?'👦':'👧'}
|
||
</div>
|
||
<div style="flex:1">
|
||
<div class="ak-nama">${a.nama} ${a.status_hidup!=='hidup'?`<span class="badge br">${a.status_hidup}</span>`:''}</div>
|
||
<div class="ak-meta">${a.hubungan} · ${a.umur||0} tahun · ${a.agama||'-'}</div>
|
||
${a.pendidikan_terakhir?`<div class="ak-pend">📚 ${a.pendidikan_terakhir.jenjang}${a.pendidikan_terakhir.status_pendidikan==='sedang_berjalan'?' (aktif)':''}</div>`:'<div style="font-size:10px;color:var(--text2);margin-top:2px">📚 Belum ada data pendidikan</div>'}
|
||
${a.pekerjaan?`<div style="font-size:10px;color:var(--text2);margin-top:2px">💼 ${a.pekerjaan}</div>`:''}
|
||
</div>
|
||
</div>
|
||
</div>`).join('') || '<div class="empty" style="padding:16px"><p>Belum ada anggota terdaftar</p></div>'}
|
||
<button class="btn btn-p btn-full" style="margin-top:8px" onclick="switchTab('peta',null);goMyLocation()">
|
||
📍 Tampilkan Lokasi Saya di Peta
|
||
</button>`;
|
||
} catch(e) {
|
||
el.innerHTML = '<div class="empty"><div class="ei">⚠️</div><p>Gagal memuat data</p></div>';
|
||
}
|
||
}
|
||
|
||
async function loadBantuan() {
|
||
const el = document.getElementById('bantuan-list');
|
||
try {
|
||
const data = await fetch('../api/bantuan.php?action=list').then(r => r.json());
|
||
if (!data.length) {
|
||
el.innerHTML = '<div class="empty"><div class="ei">🤝</div><p>Belum ada bantuan tercatat</p></div>';
|
||
return;
|
||
}
|
||
el.innerHTML = data.slice(0, 20).map(b => `
|
||
<div class="bc">
|
||
<div class="bc-top">
|
||
<div class="bc-jenis">${b.jenis_bantuan}</div>
|
||
<div class="bc-tgl">${fDate(b.tanggal_bantuan)}</div>
|
||
</div>
|
||
<div style="font-size:12px;font-weight:700;color:var(--text);margin-bottom:4px">${b.nama_kepala_keluarga}</div>
|
||
<div class="bc-detail">
|
||
📦 ${b.bentuk_bantuan}
|
||
${b.jumlah_nominal?`<br>💰 Rp${Number(b.jumlah_nominal).toLocaleString('id')}`:''}
|
||
${b.kondisi_saat_diberikan?`<br>📋 ${(b.kondisi_saat_diberikan).substring(0,60)}`:''}
|
||
</div>
|
||
<div class="bc-src">
|
||
🕌 ${b.nama_ibadah||b.sumber_bantuan||'-'}
|
||
${b.nama_mitra?` + mitra: ${b.nama_mitra}`:''}
|
||
</div>
|
||
</div>`).join('');
|
||
} catch(e) {
|
||
el.innerHTML = '<div class="empty"><div class="ei">⚠️</div><p>Gagal memuat</p></div>';
|
||
}
|
||
}
|
||
|
||
async function loadRiwayat() {
|
||
const el = document.getElementById('riwayat-list');
|
||
try {
|
||
const data = await fetch('../api/laporan.php?action=list').then(r => r.json());
|
||
if (!data.length) {
|
||
el.innerHTML = `<div class="empty">
|
||
<div class="ei">📋</div>
|
||
<p>Belum ada laporan yang dikirim.<br>Klik marker penduduk di peta untuk melaporkan.</p>
|
||
</div>`; return;
|
||
}
|
||
el.innerHTML = data.slice(0, 20).map(l => `
|
||
<div class="lap-item">
|
||
<div class="lap-top">
|
||
<div class="lap-nama">${jenisL(l.jenis_laporan)}</div>
|
||
${svBadge(l.status_verifikasi)}
|
||
</div>
|
||
${l.nama_kepala_keluarga?`<div style="font-size:11px;font-weight:600;color:var(--text2)">👥 ${l.nama_kepala_keluarga}</div>`:''}
|
||
<div class="lap-meta">📅 ${fDate(l.tanggal_kejadian)}${l.nama_terkait?' · 👤 '+l.nama_terkait:''}</div>
|
||
<div class="lap-desk">${(l.deskripsi||'').substring(0,100)}${(l.deskripsi||'').length>100?'...':''}</div>
|
||
${l.catatan_pengurus?`<div class="lap-catatan">✅ ${l.catatan_pengurus}</div>`:''}
|
||
</div>`).join('');
|
||
} catch(e) {
|
||
el.innerHTML = '<div class="empty"><div class="ei">⚠️</div><p>Gagal memuat</p></div>';
|
||
}
|
||
}
|
||
|
||
// ══════════════════════════════════════════
|
||
// NOTIFIKASI
|
||
// ══════════════════════════════════════════
|
||
let notifOpen = false;
|
||
async function loadNotif() {
|
||
try {
|
||
const d = await fetch('../api/notifikasi.php?unread=1').then(r => r.json());
|
||
const badge = document.getElementById('nb-badge');
|
||
badge.style.display = d.unread > 0 ? 'flex' : 'none';
|
||
if (d.unread > 0) badge.textContent = d.unread > 9 ? '9+' : d.unread;
|
||
|
||
const el = document.getElementById('np-list');
|
||
if (!d.notifikasi || !d.notifikasi.length) {
|
||
el.innerHTML = '<div class="empty" style="padding:18px"><div class="ei">🔔</div><p>Tidak ada notifikasi baru</p></div>';
|
||
return;
|
||
}
|
||
el.innerHTML = d.notifikasi.map(n => `
|
||
<div class="ni ${n.is_read?'':'unread'}" onclick="bacaN(${n.id})">
|
||
<div class="ni-t">${n.judul}</div>
|
||
<div class="ni-i">${n.isi}</div>
|
||
<div class="ni-d">${fTime(n.created_at)}</div>
|
||
</div>`).join('');
|
||
} catch(e) {}
|
||
}
|
||
|
||
function toggleNotif() {
|
||
const p = document.getElementById('np'), back = document.getElementById('notif-back');
|
||
notifOpen = !notifOpen;
|
||
p.style.display = notifOpen ? 'block' : 'none';
|
||
back.style.display = notifOpen ? 'block' : 'none';
|
||
if (notifOpen) loadNotif();
|
||
}
|
||
function tutupNotif() {
|
||
document.getElementById('np').style.display = 'none';
|
||
document.getElementById('notif-back').style.display = 'none';
|
||
notifOpen = false;
|
||
}
|
||
async function bacaN(id) {
|
||
await fetch('../api/notifikasi.php', { method:'PUT', headers:{'Content-Type':'application/json'}, body:JSON.stringify({id}) });
|
||
loadNotif();
|
||
}
|
||
async function bacaSemua() {
|
||
await fetch('../api/notifikasi.php', { method:'PUT', headers:{'Content-Type':'application/json'}, body:JSON.stringify({id:0}) });
|
||
loadNotif();
|
||
}
|
||
|
||
// ══════════════════════════════════════════
|
||
// NAVIGATION
|
||
// ══════════════════════════════════════════
|
||
function switchPrimary(tab) {
|
||
// primary nav buttons
|
||
document.querySelectorAll('.pnav-btn').forEach(b => b.classList.remove('active'));
|
||
const btn = document.getElementById('pnav-' + tab);
|
||
if (btn) btn.classList.add('active');
|
||
// panels
|
||
document.querySelectorAll('.s-panel').forEach(p => p.classList.remove('active'));
|
||
const panel = document.getElementById('tab-' + tab);
|
||
if (panel) panel.classList.add('active');
|
||
// trigger loads
|
||
if (tab === 'bantuan') loadBantuan();
|
||
if (tab === 'riwayat') loadRiwayat();
|
||
if (tab === 'chat') initChatTab();
|
||
}
|
||
|
||
function switchOverviewSub(sub) {
|
||
document.querySelectorAll('#tab-overview .snav-btn').forEach(b => b.classList.remove('active'));
|
||
const btn = document.getElementById('ovnav-' + sub);
|
||
if (btn) btn.classList.add('active');
|
||
document.querySelectorAll('#tab-overview .sub-panel').forEach(p => p.classList.remove('active'));
|
||
const panel = document.getElementById('ovpanel-' + sub);
|
||
if (panel) panel.classList.add('active');
|
||
}
|
||
|
||
function switchPetaSub(sub) {
|
||
document.querySelectorAll('#tab-peta .snav-btn').forEach(b => b.classList.remove('active'));
|
||
const btn = document.getElementById('pnav2-' + sub);
|
||
if (btn) btn.classList.add('active');
|
||
document.querySelectorAll('#tab-peta .sub-panel').forEach(p => p.classList.remove('active'));
|
||
const panel = document.getElementById('petapanel-' + sub);
|
||
if (panel) panel.classList.add('active');
|
||
}
|
||
|
||
// legacy alias (used by btn-full "Lihat di Peta" etc.)
|
||
function switchTab(tab, el) { switchPrimary(tab); }
|
||
|
||
// ══════════════════════════════════════════
|
||
// HELPERS
|
||
// ══════════════════════════════════════════
|
||
function jenisL(j) {
|
||
const m = {kelahiran:'🍼 Kelahiran',kematian:'⚰️ Kematian',pindah_masuk:'📦 Pindah Masuk',pindah_keluar:'🚚 Pindah Keluar',pernikahan:'💒 Pernikahan',perubahan_data:'📝 Perubahan Data',lainnya:'📌 Lainnya'};
|
||
return m[j] || j;
|
||
}
|
||
function svBadge(s) {
|
||
const m = {pending:'ba',diproses:'bb',disetujui:'bg',ditolak:'br'};
|
||
return `<span class="badge ${m[s]||'bgr'}">${s}</span>`;
|
||
}
|
||
function fDate(d) { if(!d)return'—'; return new Date(d).toLocaleDateString('id-ID',{day:'numeric',month:'short',year:'numeric'}); }
|
||
function fTime(d) { if(!d)return'—'; return new Date(d).toLocaleString('id-ID',{day:'numeric',month:'short',hour:'2-digit',minute:'2-digit'}); }
|
||
function today() { return new Date().toISOString().split('T')[0]; }
|
||
|
||
function showToast(msg, type = 'info') {
|
||
const t = document.getElementById('toast');
|
||
t.className = 'toast ' + (type==='success'?'ts':type==='error'?'te':'ti-c');
|
||
t.textContent = msg;
|
||
t.style.display = 'block';
|
||
setTimeout(() => t.style.display = 'none', 3500);
|
||
}
|
||
|
||
// Tutup modal klik overlay
|
||
document.querySelectorAll('.mo').forEach(mo => {
|
||
mo.addEventListener('click', e => { if (e.target === mo) mo.classList.add('hidden'); });
|
||
});
|
||
|
||
// ══════════════════════════════════════════
|
||
// CHAT
|
||
// ══════════════════════════════════════════
|
||
let masChatIbadahId = null;
|
||
let masChatPoll = null;
|
||
let chatIbadahLoaded = false;
|
||
|
||
// ══════════════════════════════════════════
|
||
// CHAT MODAL
|
||
// ══════════════════════════════════════════
|
||
async function openChatModal(ibadahId, icon, nama) {
|
||
if (!ibadahId) return;
|
||
if (window.map) window.map.closePopup();
|
||
masChatIbadahId = parseInt(ibadahId);
|
||
document.getElementById('cmo-icon').textContent = icon || '🕌';
|
||
document.getElementById('cmo-name').textContent = nama || 'Rumah Ibadah';
|
||
document.getElementById('cmo-sub').textContent = 'Chat dengan pengurus';
|
||
const overlay = document.getElementById('chat-modal-overlay');
|
||
overlay.classList.remove('hidden');
|
||
document.getElementById('chat-msgs-body').innerHTML =
|
||
'<div class="empty" style="height:100%;justify-content:center"><div class="ei">⏳</div><p>Memuat pesan...</p></div>';
|
||
clearInterval(masChatPoll);
|
||
await loadChatMsgs();
|
||
masChatPoll = setInterval(() => loadChatMsgs(true), 5000);
|
||
setTimeout(() => document.getElementById('chat-mas-input')?.focus(), 200);
|
||
}
|
||
window.openChatModal = openChatModal;
|
||
|
||
function closeChatModal(e) {
|
||
if (e && e.target !== document.getElementById('chat-modal-overlay')) return;
|
||
document.getElementById('chat-modal-overlay').classList.add('hidden');
|
||
clearInterval(masChatPoll);
|
||
masChatIbadahId = null;
|
||
}
|
||
window.closeChatModal = closeChatModal;
|
||
|
||
// alias kept for any legacy call
|
||
async function initChatTab() {}
|
||
function onSelectIbadahChat() {}
|
||
|
||
async function loadChatMsgs(silent=false) {
|
||
if (!masChatIbadahId) return;
|
||
const data = await fetch(`../api/chat.php?action=messages&id_rumah_ibadah=${masChatIbadahId}`)
|
||
.then(r=>r.json()).catch(()=>[]);
|
||
const el = document.getElementById('chat-msgs-body');
|
||
if (!el) return;
|
||
if (!data||!data.length) {
|
||
if (!silent) el.innerHTML='<div class="empty" style="height:100%;justify-content:center"><div class="ei">💬</div><p>Belum ada pesan. Mulai percakapan!</p></div>';
|
||
return;
|
||
}
|
||
const wasBottom = el.scrollHeight-el.scrollTop-el.clientHeight < 60;
|
||
el.innerHTML = data.map(m => {
|
||
const isMe = (m.pengirim_role==='masyarakat');
|
||
return `<div class="ch-bw ${isMe?'me':'them'}">
|
||
<div class="ch-b ${isMe?'me':'them'}">${escH(m.isi_pesan)}</div>
|
||
<div class="ch-meta">${isMe?'👤 Anda':'🕌 '+escH(m.nama_ibadah||'')} · ${fTime(m.created_at)}</div>
|
||
</div>`;
|
||
}).join('');
|
||
if (wasBottom||!silent) el.scrollTop = el.scrollHeight;
|
||
if (!silent) loadChatUnread();
|
||
}
|
||
|
||
async function sendChatMasyarakat() {
|
||
if (!masChatIbadahId) return;
|
||
const inp = document.getElementById('chat-mas-input');
|
||
const isi = (inp?.value||'').trim();
|
||
if (!isi) return;
|
||
inp.value = ''; inp.disabled = true;
|
||
const d = await fetch('../api/chat.php', {
|
||
method:'POST', headers:{'Content-Type':'application/json'},
|
||
body: JSON.stringify({ id_rumah_ibadah: masChatIbadahId, isi })
|
||
}).then(r=>r.json()).catch(()=>({success:false}));
|
||
inp.disabled = false; inp.focus();
|
||
if (d.success) loadChatMsgs();
|
||
else showToast(d.error||'Gagal mengirim', 'error');
|
||
}
|
||
|
||
async function loadChatUnread() {
|
||
const d = await fetch('../api/chat.php?action=unread').then(r=>r.json()).catch(()=>({unread:0}));
|
||
const badge = document.getElementById('chat-badge');
|
||
if (badge) {
|
||
badge.textContent = d.unread||'';
|
||
badge.style.display = d.unread>0 ? 'inline-flex' : 'none';
|
||
}
|
||
}
|
||
|
||
function escH(s) { return String(s||'').replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>'); }
|
||
|
||
// ══════════════════════════════════════════
|
||
// INIT
|
||
// ══════════════════════════════════════════
|
||
loadDashboard();
|
||
loadOverview();
|
||
loadIbadah();
|
||
loadPenduduk();
|
||
loadNotif();
|
||
loadChatUnread();
|
||
setInterval(loadNotif, 30000);
|
||
setInterval(loadChatUnread, 30000);
|
||
</script>
|
||
</body>
|
||
</html>
|