D1041231092-webgis-povertymap/app/views/admin/users.php

<!-- HEADER ROW -->
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:20px">
  <div>
    <h2 style="font-size:1.2rem;font-weight:700">Manajemen User</h2>
    <p class="text-muted text-sm">Kelola seluruh pengguna sistem SINERGI</p>
  </div>
  <button class="btn btn-primary" onclick="App.showModal('modal-tambah')">➕ Tambah User</button>
</div>

<!-- SEARCH -->
<div class="filters-bar">
  <input type="text" id="search-user" class="form-control" placeholder="🔍 Cari nama, username, email..." style="max-width:300px">
</div>

<!-- TABLE -->
<div class="card">
  <div class="card-body no-pad">
    <div class="table-wrap">
      <table id="table-users">
        <thead>
          <tr>
            <th>#</th><th>Nama</th><th>Username</th><th>Role</th>
            <th>Wilayah</th><th>No HP</th><th>Status</th><th>Login Terakhir</th><th>Aksi</th>
          </tr>
        </thead>
        <tbody>
          <?php foreach ($users as $i => $u): ?>
          <tr>
            <td class="text-muted text-sm"><?= $i+1 ?></td>
            <td>
              <div style="display:flex;align-items:center;gap:10px">
                <div style="width:32px;height:32px;border-radius:50%;background:var(--clr-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.85rem;flex-shrink:0">
                  <?= strtoupper(substr($u['nama'],0,1)) ?>
                </div>
                <div>
                  <div style="font-weight:600;font-size:0.875rem"><?= e($u['nama']) ?></div>
                  <div class="text-muted text-xs"><?= e($u['email']) ?></div>
                </div>
              </div>
            </td>
            <td><code style="font-size:0.78rem;background:#f1f5f9;padding:2px 6px;border-radius:4px"><?= e($u['username']) ?></code></td>
            <td>
              <?php $roleColors = ['superadmin'=>'purple','verifikator'=>'blue','rumah_ibadah'=>'green','dinsos'=>'teal','walikota'=>'orange']; ?>
              <span class="badge badge-<?= $roleColors[$u['role_slug']] ?? 'gray' ?>"><?= e($u['role_nama']) ?></span>
            </td>
            <td class="text-sm"><?= e($u['kelurahan_nama'] ?? '—') ?></td>
            <td class="text-sm"><?= e($u['no_hp'] ?? '—') ?></td>
            <td><?= $u['is_active'] ? '<span class="badge badge-green">Aktif</span>' : '<span class="badge badge-gray">Nonaktif</span>' ?></td>
            <td class="text-xs text-muted"><?= $u['last_login'] ? formatTanggal($u['last_login'],true) : '—' ?></td>
            <td>
              <div style="display:flex;gap:6px">
                <?php if ($u['id'] != Auth::id()): ?>
                <button class="btn btn-ghost btn-sm" onclick='openEditModal(<?= json_encode($u) ?>)'>✏️</button>
                <form method="POST" action="<?= APP_URL ?>/admin/users/<?= $u['id'] ?>/delete" style="display:inline"
                      onsubmit="return confirm('Nonaktifkan user <?= addslashes($u['nama']) ?>?')">
                  <?= csrfField() ?>
                  <button type="submit" class="btn btn-ghost btn-sm" style="color:var(--clr-danger)">🗑</button>
                </form>
                <?php else: ?>
                <span class="text-xs text-muted">Akun Anda</span>
                <?php endif; ?>
              </div>
            </td>
          </tr>
          <?php endforeach; ?>
        </tbody>
      </table>
    </div>
  </div>
</div>

<!-- MODAL TAMBAH -->
<div class="modal-overlay" id="modal-tambah">
  <div class="modal">
    <div class="modal-header">
      <h3>➕ Tambah User Baru</h3>
      <button class="modal-close" onclick="App.hideModal('modal-tambah')">✕</button>
    </div>
    <form method="POST" action="<?= APP_URL ?>/admin/users/store">
      <?= csrfField() ?>
      <div class="modal-body">
        <div class="form-row cols-2">
          <div class="form-group">
            <label class="form-label">Nama Lengkap <span class="required">*</span></label>
            <input type="text" name="nama" class="form-control" required>
          </div>
          <div class="form-group">
            <label class="form-label">Username <span class="required">*</span></label>
            <input type="text" name="username" class="form-control" required>
          </div>
        </div>
        <div class="form-group">
          <label class="form-label">Email <span class="required">*</span></label>
          <input type="email" name="email" class="form-control" required>
        </div>
        <div class="form-row cols-2">
          <div class="form-group">
            <label class="form-label">Password <span class="required">*</span></label>
            <input type="password" name="password" class="form-control" required minlength="6">
          </div>
          <div class="form-group">
            <label class="form-label">No HP</label>
            <input type="text" name="no_hp" class="form-control">
          </div>
        </div>
        <div class="form-row cols-2">
          <div class="form-group">
            <label class="form-label">Role <span class="required">*</span></label>
            <select name="id_role" class="form-control" required>
              <?php foreach ($roles as $r): ?>
              <option value="<?= $r['id'] ?>"><?= e($r['nama']) ?></option>
              <?php endforeach; ?>
            </select>
          </div>
          <div class="form-group">
            <label class="form-label">Kelurahan Tugas</label>
            <select name="id_kelurahan" class="form-control">
              <option value="">— Semua Wilayah —</option>
              <?php foreach ($kelurahan as $k): ?>
              <option value="<?= $k['id'] ?>"><?= e($k['nama']) ?></option>
              <?php endforeach; ?>
            </select>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-ghost" onclick="App.hideModal('modal-tambah')">Batal</button>
        <button type="submit" class="btn btn-primary">Simpan User</button>
      </div>
    </form>
  </div>
</div>

<!-- MODAL EDIT -->
<div class="modal-overlay" id="modal-edit">
  <div class="modal">
    <div class="modal-header">
      <h3>✏️ Edit User</h3>
      <button class="modal-close" onclick="App.hideModal('modal-edit')">✕</button>
    </div>
    <form method="POST" id="edit-form">
      <?= csrfField() ?>
      <input type="hidden" name="id" id="edit-id">
      <div class="modal-body">
        <div class="form-row cols-2">
          <div class="form-group">
            <label class="form-label">Nama Lengkap <span class="required">*</span></label>
            <input type="text" name="nama" id="edit-nama" class="form-control" required>
          </div>
          <div class="form-group">
            <label class="form-label">Username <span class="required">*</span></label>
            <input type="text" name="username" id="edit-username" class="form-control" required>
          </div>
        </div>
        <div class="form-group">
          <label class="form-label">Email <span class="required">*</span></label>
          <input type="email" name="email" id="edit-email" class="form-control" required>
        </div>
        <div class="form-row cols-2">
          <div class="form-group">
            <label class="form-label">Password Baru <span class="text-muted">(kosongkan jika tidak diubah)</span></label>
            <input type="password" name="password" class="form-control" minlength="6">
          </div>
          <div class="form-group">
            <label class="form-label">No HP</label>
            <input type="text" name="no_hp" id="edit-no_hp" class="form-control">
          </div>
        </div>
        <div class="form-row cols-2">
          <div class="form-group">
            <label class="form-label">Role</label>
            <select name="id_role" id="edit-id_role" class="form-control">
              <?php foreach ($roles as $r): ?>
              <option value="<?= $r['id'] ?>"><?= e($r['nama']) ?></option>
              <?php endforeach; ?>
            </select>
          </div>
          <div class="form-group">
            <label class="form-label">Status</label>
            <select name="is_active" id="edit-is_active" class="form-control">
              <option value="1">Aktif</option>
              <option value="0">Nonaktif</option>
            </select>
          </div>
        </div>
        <div class="form-group">
          <label class="form-label">Kelurahan Tugas</label>
          <select name="id_kelurahan" id="edit-id_kelurahan" class="form-control">
            <option value="">— Semua Wilayah —</option>
            <?php foreach ($kelurahan as $k): ?>
            <option value="<?= $k['id'] ?>"><?= e($k['nama']) ?></option>
            <?php endforeach; ?>
          </select>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-ghost" onclick="App.hideModal('modal-edit')">Batal</button>
        <button type="submit" class="btn btn-primary">Simpan Perubahan</button>
      </div>
    </form>
  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
  App.initTableSearch('search-user', 'table-users');
});

function openEditModal(u) {
  document.getElementById('edit-id').value           = u.id;
  document.getElementById('edit-nama').value         = u.nama;
  document.getElementById('edit-username').value     = u.username;
  document.getElementById('edit-email').value        = u.email;
  document.getElementById('edit-no_hp').value        = u.no_hp || '';
  document.getElementById('edit-id_role').value      = u.id_role;
  document.getElementById('edit-id_kelurahan').value = u.id_kelurahan || '';
  document.getElementById('edit-is_active').value    = u.is_active;
  document.getElementById('edit-form').action        = '<?= APP_URL ?>/admin/users/' + u.id + '/update';
  App.showModal('modal-edit');
}
</script>