Webgis-Poverty/pages/daftar_pm.php

<div class="dashboard-content">

      <!-- Page Header -->
      <div class="page-header">
        <div class="page-title-group">
          <h1>👥 Daftar Penduduk Miskin</h1>
          <p>Data lengkap seluruh penduduk miskin yang terdata dalam sistem.</p>
        </div>
        <div class="page-actions">
          <button class="btn btn-ghost" id="btn-export" onclick="exportCSV()">📥 Ekspor CSV</button>
          <button class="btn btn-primary admin-only" onclick="window.location.href='?page=map'">＋ Tambah Data</button>
        </div>
      </div>

      <!-- Summary Stats -->
      <div class="summary-bar" id="summary-bar">
        <div class="summary-item">
          <div class="summary-icon purple">👥</div>
          <div>
            <div class="summary-val" id="sum-total">—</div>
            <div class="summary-label">Total KK</div>
          </div>
        </div>
        <div class="summary-item">
          <div class="summary-icon purple">👨‍👩‍👧‍👦</div>
          <div>
            <div class="summary-val" id="sum-jiwa">—</div>
            <div class="summary-label">Total Jiwa</div>
          </div>
        </div>
        <div class="summary-item">
          <div class="summary-icon green">✅</div>
          <div>
            <div class="summary-val" id="sum-dalam">—</div>
            <div class="summary-label">Dalam Radius</div>
          </div>
        </div>
        <div class="summary-item">
          <div class="summary-icon red">❌</div>
          <div>
            <div class="summary-val" id="sum-luar">—</div>
            <div class="summary-label">Luar Radius</div>
          </div>
        </div>
        <div class="summary-item">
          <div class="summary-icon blue">🎁</div>
          <div>
            <div class="summary-val" id="sum-bantuan">—</div>
            <div class="summary-label">Penerima Bantuan</div>
          </div>
        </div>
      </div>

      <!-- Filter Bar -->
      <div class="filter-bar">
        <div class="filter-search">
          <span class="filter-search-icon">⌕</span>
          <input type="search" id="search-input" placeholder="Cari nama, NIK, atau alamat…" autocomplete="off"
            oninput="applyFilters()">
        </div>
        <select class="filter-select" id="filter-proximity" onchange="applyFilters()">
          <option value="">Semua Status</option>
          <option value="dalam_radius">Dalam Radius</option>
          <option value="luar_radius">Luar Radius</option>
        </select>
        <select class="filter-select" id="filter-ri" onchange="applyFilters()">
          <option value="">Semua Rumah Ibadah</option>
        </select>
        <select class="filter-select" id="filter-bantuan" onchange="applyFilters()">
          <option value="">Semua Bantuan</option>
          <option value="pernah">Pernah Menerima</option>
          <option value="belum">Belum Pernah</option>
        </select>
        <span class="filter-count" id="filter-count">—</span>
      </div>

      <!-- Table -->
      <div class="table-container">
        <div class="table-scrollwrap">
          <table class="pm-table" id="pm-table">
            <thead>
              <tr>
                <th onclick="sortBy('nama')">Nama <span class="sort-icon"></span></th>
                <th onclick="sortBy('nik')">NIK <span class="sort-icon"></span></th>
                <th onclick="sortBy('jumlah_anggota')">Keluarga <span class="sort-icon"></span></th>
                <th>Status</th>
                <th>Rumah Ibadah</th>
                <th onclick="sortBy('total_bantuan')">Bantuan <span class="sort-icon"></span></th>
                <th>Aksi</th>
              </tr>
            </thead>
            <tbody id="pm-tbody">
              <tr>
                <td colspan="7" class="loading" style="text-align:center;padding:40px"><span class="spinner"></span>
                  Memuat data…</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="pagination" id="pagination" style="display:none">
          <div class="pagination-info" id="pagination-info"></div>
          <div class="pagination-btns" id="pagination-btns"></div>
        </div>
      </div>

    </div>

  <div class="detail-overlay" id="detail-overlay" onclick="closeDrawer(event)">
    <div class="detail-drawer" id="detail-drawer">
      <div class="drawer-head">
        <h2 id="drawer-title">Detail Penduduk Miskin</h2>
        <button class="drawer-close" onclick="closeDrawer()">✕</button>
      </div>
      <div class="drawer-body" id="drawer-body">
        <div class="loading-spinner-wrap"><span class="spinner" style="width:20px;height:20px;border-width:3px;"></span>
        </div>
      </div>
    </div>
  </div>