Athallah Ghathfan Aqila
379 lines
18 KiB
PHP
379 lines
18 KiB
PHP
<?php
|
|
header('Cache-Control: no-store, no-cache, must-revalidate');
|
|
include 'auth.php';
|
|
requireLogin();
|
|
$user = currentUser();
|
|
$isSuperAdmin = isSuperAdmin();
|
|
$myId = (int)($user['id'] ?? 0);
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Manajemen Pengguna — GeoMiskin</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" rel="stylesheet">
|
|
<style>
|
|
:root{--bg:#0f172a;--bg2:#1e293b;--bg3:#334155;--txt:#e2e8f0;--muted:#64748b;--blue:#3b82f6;--green:#22c55e;--red:#ef4444;--yellow:#f59e0b;--indigo:#6366f1;--radius:12px;--trans:.2s ease}
|
|
*{box-sizing:border-box;margin:0;padding:0}
|
|
body{font-family:'Inter',sans-serif;min-height:100vh;background:var(--bg);color:var(--txt)}
|
|
body::before{content:'';position:fixed;inset:0;background-image:linear-gradient(rgba(59,130,246,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(59,130,246,.03) 1px,transparent 1px);background-size:40px 40px;pointer-events:none}
|
|
.page{max-width:960px;margin:0 auto;padding:40px 24px}
|
|
.topbar{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:36px;gap:16px;flex-wrap:wrap}
|
|
.topbar-left{display:flex;align-items:center;gap:16px}
|
|
.back-btn{display:inline-flex;align-items:center;gap:8px;background:var(--bg2);border:1px solid rgba(255,255,255,.08);color:var(--muted);padding:9px 16px;border-radius:10px;text-decoration:none;font-size:13px;font-weight:500;transition:var(--trans);white-space:nowrap}
|
|
.back-btn:hover{color:var(--txt);border-color:rgba(255,255,255,.18)}
|
|
.page-title{font-size:20px;font-weight:700;display:flex;align-items:center;gap:10px}
|
|
.page-title i{color:var(--blue)}
|
|
.page-sub{font-size:13px;color:var(--muted);margin-top:3px}
|
|
.btn-add{display:inline-flex;align-items:center;gap:8px;background:var(--blue);color:#fff;border:none;border-radius:10px;padding:10px 18px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:var(--trans)}
|
|
.btn-add:hover{background:#2563eb;transform:translateY(-1px)}
|
|
.card{background:var(--bg2);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);overflow:hidden}
|
|
table{width:100%;border-collapse:collapse}
|
|
thead tr{background:rgba(255,255,255,.03)}
|
|
th{padding:12px 16px;text-align:left;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);border-bottom:1px solid rgba(255,255,255,.06)}
|
|
td{padding:14px 16px;font-size:13px;border-bottom:1px solid rgba(255,255,255,.04);vertical-align:middle}
|
|
tbody tr:last-child td{border-bottom:none}
|
|
tbody tr:hover td{background:rgba(255,255,255,.02)}
|
|
.avatar-sm{width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:#fff;flex-shrink:0}
|
|
.user-row{display:flex;align-items:center;gap:12px}
|
|
.u-name{font-weight:600;font-size:13px}
|
|
.u-un{font-size:11px;color:var(--muted);margin-top:2px;font-family:monospace}
|
|
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600}
|
|
.badge-admin{background:rgba(99,102,241,.2);color:#a5b4fc}
|
|
.badge-operator{background:rgba(100,116,139,.2);color:#94a3b8}
|
|
.me-tag{display:inline-flex;align-items:center;gap:4px;font-size:10px;background:rgba(245,158,11,.15);color:#fbbf24;padding:2px 8px;border-radius:8px;margin-left:8px;font-weight:600}
|
|
.btn-sm{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:8px;font-size:12px;font-weight:500;cursor:pointer;font-family:inherit;transition:var(--trans);border:none}
|
|
.btn-edit{background:rgba(59,130,246,.1);color:var(--blue);border:1px solid rgba(59,130,246,.2)}
|
|
.btn-edit:hover{background:rgba(59,130,246,.2)}
|
|
.btn-del{background:rgba(239,68,68,.1);color:var(--red);border:1px solid rgba(239,68,68,.2);margin-left:6px}
|
|
.btn-del:hover{background:rgba(239,68,68,.2)}
|
|
.state-row td{padding:48px;text-align:center;color:var(--muted)}
|
|
.state-row i{font-size:32px;display:block;margin-bottom:10px;opacity:.4}
|
|
.no-access{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.2);border-radius:10px;padding:20px;text-align:center;color:#fca5a5;font-size:14px;margin-bottom:24px}
|
|
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;padding:16px;z-index:999;opacity:0;pointer-events:none;transition:opacity .2s;backdrop-filter:blur(4px)}
|
|
.overlay.show{opacity:1;pointer-events:all}
|
|
.modal{background:var(--bg2);border:1px solid rgba(255,255,255,.08);border-radius:20px;width:100%;max-width:460px;transform:translateY(14px);transition:transform .2s;box-shadow:0 25px 60px rgba(0,0,0,.5)}
|
|
.overlay.show .modal{transform:translateY(0)}
|
|
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(255,255,255,.06)}
|
|
.modal-head h3{font-size:16px;font-weight:700;display:flex;align-items:center;gap:8px}
|
|
.modal-head h3 i{color:var(--blue)}
|
|
.close-btn{background:none;border:none;color:var(--muted);cursor:pointer;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:8px;transition:var(--trans)}
|
|
.close-btn:hover{background:rgba(255,255,255,.08);color:var(--txt)}
|
|
.modal-body{padding:20px 24px}
|
|
.modal-foot{padding:16px 24px;border-top:1px solid rgba(255,255,255,.06);display:flex;gap:10px;justify-content:flex-end}
|
|
.fg{margin-bottom:16px}
|
|
.fg label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:6px}
|
|
.fg label .req{color:var(--red);margin-left:2px}
|
|
.fg input,.fg select{width:100%;background:var(--bg);border:1.5px solid rgba(255,255,255,.08);border-radius:10px;padding:10px 14px;font-size:13px;font-family:inherit;color:var(--txt);outline:none;transition:var(--trans)}
|
|
.fg input:focus,.fg select:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(59,130,246,.15)}
|
|
.fg input::placeholder{color:var(--muted)}
|
|
.fg input:disabled{opacity:.45;cursor:not-allowed}
|
|
.fg select option{background:var(--bg2)}
|
|
.fg .hint{font-size:11px;color:var(--muted);margin-top:4px}
|
|
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
|
|
.btn-primary{background:var(--blue);color:#fff;border:none;border-radius:10px;padding:10px 20px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:var(--trans)}
|
|
.btn-primary:hover{background:#2563eb}
|
|
.btn-secondary{background:rgba(255,255,255,.06);color:var(--txt);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:10px 20px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:var(--trans)}
|
|
.btn-secondary:hover{background:rgba(255,255,255,.1)}
|
|
.toast-wrap{position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:8px}
|
|
.toast{background:var(--bg2);border:1px solid rgba(255,255,255,.08);color:var(--txt);padding:12px 18px;border-radius:12px;font-size:13px;font-weight:500;box-shadow:0 8px 24px rgba(0,0,0,.4);display:flex;align-items:center;gap:10px;min-width:220px;animation:slideUp .25s ease;border-left:4px solid var(--blue)}
|
|
.toast.success{border-left-color:var(--green)}.toast.error{border-left-color:var(--red)}
|
|
@keyframes slideUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="page">
|
|
|
|
<div class="topbar">
|
|
<div class="topbar-left">
|
|
<a href="index.php" class="back-btn"><i class="fas fa-arrow-left"></i> Kembali</a>
|
|
<div>
|
|
<div class="page-title"><i class="fas fa-users-cog"></i>Manajemen Pengguna</div>
|
|
<div class="page-sub">Login sebagai: <strong><?= htmlspecialchars($user['nama']) ?></strong> <span style="color:var(--muted)">(<?= $user['role'] ?>)</span></div>
|
|
</div>
|
|
</div>
|
|
<?php if ($isSuperAdmin): ?>
|
|
<button class="btn-add" onclick="openAdd()"><i class="fas fa-user-plus"></i> Tambah Pengguna</button>
|
|
<?php endif; ?>
|
|
</div>
|
|
|
|
<?php if (!$isSuperAdmin): ?>
|
|
<div class="no-access"><i class="fas fa-lock" style="margin-right:8px"></i>Hanya admin yang dapat mengelola pengguna. Role kamu: <strong><?= $user['role'] ?></strong></div>
|
|
<?php endif; ?>
|
|
|
|
<div class="card">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Pengguna</th>
|
|
<th>Role</th>
|
|
<th>Bergabung</th>
|
|
<?php if ($isSuperAdmin): ?><th style="text-align:right">Aksi</th><?php endif; ?>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="user-tbody">
|
|
<tr class="state-row"><td colspan="<?= $isSuperAdmin ? 4 : 3 ?>">
|
|
<i class="fas fa-spinner fa-spin"></i>Memuat data...
|
|
</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="toast-wrap" class="toast-wrap"></div>
|
|
|
|
<!-- Modal Add / Edit (superadmin only) -->
|
|
<?php if ($isSuperAdmin): ?>
|
|
<div class="overlay" id="overlay" onclick="closeModal(event)">
|
|
<div class="modal" onclick="event.stopPropagation()">
|
|
<div class="modal-head">
|
|
<h3><i class="fas fa-user-edit"></i> <span id="modal-title">Tambah Pengguna</span></h3>
|
|
<button class="close-btn" onclick="closeModal()"><i class="fas fa-times"></i></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="fg">
|
|
<label>Nama Lengkap <span class="req">*</span></label>
|
|
<input type="text" id="f-nama" placeholder="cth. Ahmad Fauzi">
|
|
</div>
|
|
<div class="row2">
|
|
<div class="fg">
|
|
<label>Username <span class="req">*</span></label>
|
|
<input type="text" id="f-username" placeholder="username" autocomplete="off">
|
|
</div>
|
|
<div class="fg">
|
|
<label>Role <span class="req">*</span></label>
|
|
<select id="f-role">
|
|
<option value="admin">Admin</option>
|
|
<option value="operator">Operator</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="fg">
|
|
<label>Password <span class="req" id="pass-req">*</span></label>
|
|
<input type="password" id="f-pass" placeholder="Minimal 6 karakter" autocomplete="new-password">
|
|
<div class="hint" id="pass-hint">Minimal 6 karakter.</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-foot">
|
|
<button class="btn-secondary" onclick="closeModal()">Batal</button>
|
|
<button class="btn-primary" id="btn-save" onclick="saveUser()"><i class="fas fa-save"></i> Simpan</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<script>
|
|
const IS_SUPER = <?= $isSuperAdmin ? 'true' : 'false' ?>;
|
|
const MY_ID = <?= $myId ?>;
|
|
const COLORS = ['#3b82f6','#10b981','#f59e0b','#ef4444','#6366f1','#ec4899','#14b8a6','#8b5cf6'];
|
|
let editingId = null;
|
|
|
|
// ── avatar color (same hash as PHP version)
|
|
function avatarColor(name) {
|
|
let h = 0;
|
|
for (const c of (name || '?')) h = (h * 31 + c.charCodeAt(0)) % COLORS.length;
|
|
return COLORS[h];
|
|
}
|
|
|
|
// ── date format
|
|
function fmtDate(dt) {
|
|
if (!dt) return '—';
|
|
const d = new Date(dt);
|
|
const m = ['Jan','Feb','Mar','Apr','Mei','Jun','Jul','Agu','Sep','Okt','Nov','Des'];
|
|
return d.getDate() + ' ' + m[d.getMonth()] + ' ' + d.getFullYear();
|
|
}
|
|
|
|
function esc(s) {
|
|
return String(s||'').replace(/[&<>"']/g, c=>({'&':'&','<':'<','>':'>','"':'"',"'":'''}[c]));
|
|
}
|
|
|
|
// ── LOAD users via AJAX
|
|
async function loadUsers() {
|
|
document.getElementById('user-tbody').innerHTML =
|
|
`<tr class="state-row"><td colspan="${IS_SUPER?4:3}"><i class="fas fa-spinner fa-spin"></i>Memuat data...</td></tr>`;
|
|
try {
|
|
const r = await fetch('api/users.php?action=list');
|
|
const text = await r.text();
|
|
let d;
|
|
try { d = JSON.parse(text); }
|
|
catch(e) {
|
|
showTableError('Respons server tidak valid: ' + text.substring(0,80));
|
|
return;
|
|
}
|
|
if (d.status !== 'success') { showTableError('Error: ' + d.message); return; }
|
|
renderUsers(d.data || []);
|
|
} catch(e) {
|
|
showTableError('Gagal memuat: ' + e.message);
|
|
}
|
|
}
|
|
|
|
function showTableError(msg) {
|
|
document.getElementById('user-tbody').innerHTML =
|
|
`<tr class="state-row"><td colspan="${IS_SUPER?4:3}">
|
|
<i class="fas fa-exclamation-circle" style="color:var(--red)"></i>
|
|
<div style="color:var(--red);font-size:13px;margin-top:4px">${esc(msg)}</div>
|
|
<button onclick="loadUsers()" style="margin-top:12px;background:var(--blue);color:#fff;border:none;border-radius:8px;padding:8px 16px;font-size:12px;cursor:pointer;font-family:inherit">Coba Lagi</button>
|
|
</td></tr>`;
|
|
}
|
|
|
|
function renderUsers(rows) {
|
|
const cols = IS_SUPER ? 4 : 3;
|
|
if (!rows.length) {
|
|
document.getElementById('user-tbody').innerHTML =
|
|
`<tr class="state-row"><td colspan="${cols}"><i class="fas fa-users"></i>Belum ada pengguna</td></tr>`;
|
|
return;
|
|
}
|
|
document.getElementById('user-tbody').innerHTML = rows.map(u => {
|
|
const isMe = parseInt(u.id) === MY_ID;
|
|
const color = avatarColor(u.nama || u.username);
|
|
const init = (u.nama || u.username || '?')[0].toUpperCase();
|
|
const roleC = u.role === 'admin' ? 'badge-admin' : 'badge-operator';
|
|
const roleI = u.role === 'admin' ? 'shield-alt' : 'user';
|
|
const acols = IS_SUPER ? `
|
|
<td style="text-align:right;white-space:nowrap">
|
|
<button class="btn-sm btn-edit" onclick='openEdit(${JSON.stringify(u)})'>
|
|
<i class="fas fa-pen"></i> Edit
|
|
</button>
|
|
${!isMe ? `<button class="btn-sm btn-del" onclick="deleteUser(${u.id},'${esc(u.nama||u.username).replace(/'/g,"\\'")}')">
|
|
<i class="fas fa-trash"></i> Hapus
|
|
</button>` : ''}
|
|
</td>` : '';
|
|
return `<tr>
|
|
<td>
|
|
<div class="user-row">
|
|
<div class="avatar-sm" style="background:${color}">${init}</div>
|
|
<div>
|
|
<div class="u-name">${esc(u.nama||'—')}${isMe ? ' <span class="me-tag"><i class="fas fa-user"></i> Anda</span>' : ''}</div>
|
|
<div class="u-un">@${esc(u.username)}</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td><span class="badge ${roleC}"><i class="fas fa-${roleI}" style="font-size:9px"></i> ${esc(u.role)}</span></td>
|
|
<td style="color:var(--muted);font-size:12px">${fmtDate(u.created_at)}</td>
|
|
${acols}
|
|
</tr>`;
|
|
}).join('');
|
|
}
|
|
|
|
// ── MODAL
|
|
function openAdd() {
|
|
editingId = null;
|
|
document.getElementById('modal-title').textContent = 'Tambah Pengguna';
|
|
document.getElementById('f-nama').value = '';
|
|
document.getElementById('f-username').value = '';
|
|
document.getElementById('f-pass').value = '';
|
|
document.getElementById('f-role').value = 'admin';
|
|
document.getElementById('f-username').disabled = false;
|
|
document.getElementById('pass-hint').textContent = 'Minimal 6 karakter.';
|
|
document.getElementById('pass-req').style.display = 'inline';
|
|
document.getElementById('overlay').classList.add('show');
|
|
setTimeout(() => document.getElementById('f-nama').focus(), 50);
|
|
}
|
|
|
|
function openEdit(u) {
|
|
if (typeof u === 'string') u = JSON.parse(u);
|
|
editingId = u.id;
|
|
document.getElementById('modal-title').textContent = 'Edit Pengguna';
|
|
document.getElementById('f-nama').value = u.nama || '';
|
|
document.getElementById('f-username').value = u.username || '';
|
|
document.getElementById('f-pass').value = '';
|
|
document.getElementById('f-role').value = u.role || 'admin';
|
|
document.getElementById('f-username').disabled = true;
|
|
document.getElementById('pass-hint').textContent = 'Kosongkan jika tidak ingin mengubah password.';
|
|
document.getElementById('pass-req').style.display = 'none';
|
|
document.getElementById('overlay').classList.add('show');
|
|
setTimeout(() => document.getElementById('f-nama').focus(), 50);
|
|
}
|
|
|
|
function closeModal(e) {
|
|
if (!e || e.target === document.getElementById('overlay'))
|
|
document.getElementById('overlay').classList.remove('show');
|
|
}
|
|
|
|
// ── SAVE
|
|
async function saveUser() {
|
|
const nama = document.getElementById('f-nama').value.trim();
|
|
const un = document.getElementById('f-username').value.trim();
|
|
const pass = document.getElementById('f-pass').value;
|
|
const role = document.getElementById('f-role').value;
|
|
if (!nama || !un) { toast('Nama dan username wajib diisi', 'error'); return; }
|
|
if (!editingId && pass.length < 6) { toast('Password minimal 6 karakter', 'error'); return; }
|
|
if (editingId && pass && pass.length < 6) { toast('Password minimal 6 karakter', 'error'); return; }
|
|
|
|
const btn = document.getElementById('btn-save');
|
|
btn.disabled = true;
|
|
btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Menyimpan...';
|
|
|
|
const fd = new FormData();
|
|
fd.append('action', editingId ? 'update' : 'add');
|
|
fd.append('nama', nama);
|
|
fd.append('role', role);
|
|
if (editingId) { fd.append('id', editingId); if (pass) fd.append('password', pass); }
|
|
else { fd.append('username', un); fd.append('password', pass); }
|
|
|
|
try {
|
|
const r = await fetch('api/users.php', {method:'POST', body:fd});
|
|
const text = await r.text();
|
|
let d;
|
|
try { d = JSON.parse(text); }
|
|
catch(e) { toast('Server error: ' + text.substring(0,120), 'error'); return; }
|
|
if (d.status === 'success') {
|
|
closeModal();
|
|
toast(editingId ? 'Pengguna diperbarui!' : 'Pengguna ditambahkan!', 'success');
|
|
loadUsers();
|
|
} else {
|
|
toast('Error: ' + d.message, 'error');
|
|
}
|
|
} catch(e) {
|
|
toast('Gagal: ' + e.message, 'error');
|
|
} finally {
|
|
btn.disabled = false;
|
|
btn.innerHTML = '<i class="fas fa-save"></i> Simpan';
|
|
}
|
|
}
|
|
|
|
// ── DELETE
|
|
async function deleteUser(id, name) {
|
|
if (!confirm(`Hapus pengguna "${name}"?\n\nTindakan ini tidak dapat dibatalkan.`)) return;
|
|
const fd = new FormData();
|
|
fd.append('action', 'delete');
|
|
fd.append('id', id);
|
|
try {
|
|
const r = await fetch('api/users.php', {method:'POST', body:fd});
|
|
const text = await r.text();
|
|
let d;
|
|
try { d = JSON.parse(text); }
|
|
catch(e) { toast('Server error: ' + text.substring(0,100), 'error'); return; }
|
|
if (d.status === 'success') {
|
|
toast('Pengguna berhasil dihapus', 'success');
|
|
loadUsers();
|
|
} else {
|
|
toast('Gagal: ' + d.message, 'error');
|
|
}
|
|
} catch(e) {
|
|
toast('Gagal: ' + e.message, 'error');
|
|
}
|
|
}
|
|
|
|
// ── TOAST
|
|
function toast(msg, type='info') {
|
|
const icons = {success:'fa-check-circle', error:'fa-exclamation-circle', info:'fa-info-circle'};
|
|
const t = document.createElement('div');
|
|
t.className = `toast ${type}`;
|
|
t.innerHTML = `<i class="fas ${icons[type]||icons.info}"></i><span>${msg}</span>`;
|
|
document.getElementById('toast-wrap').appendChild(t);
|
|
setTimeout(() => { t.style.cssText='opacity:0;transform:translateY(8px);transition:.3s'; setTimeout(()=>t.remove(),300); }, 4000);
|
|
}
|
|
|
|
document.addEventListener('keydown', e => {
|
|
if (e.key === 'Escape') document.getElementById('overlay')?.classList.remove('show');
|
|
});
|
|
|
|
// ── init
|
|
loadUsers();
|
|
</script>
|
|
</body>
|
|
</html>
|