kangmin/cms-gov
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit - CMS Gov Bapenda Garut dengan EditorJS

Browse Source
This commit is contained in:
Kangmin
2026-01-05 06:47:36 +07:00
commit bd649bd5f2
634 changed files with 215640 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

460
app/Views/admin/users/index.php Normal file
View File

@@ -0,0 +1,460 @@
<?= $this->extend('admin/layout') ?>
<?= $this->section('content') ?>
<div class="space-y-5 sm:space-y-6">
<!-- Page Header -->
<div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
<div>
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white/90">
Pengguna
</h2>
<p class="text-sm text-gray-500 dark:text-gray-400">
Kelola pengguna sistem
</p>
</div>
<a
href="<?= base_url('admin/users/create') ?>"
class="inline-flex items-center gap-2 rounded-lg bg-brand-500 px-4 py-2.5 text-sm font-medium text-white shadow-theme-xs hover:bg-brand-600"
>
<i class="fe fe-plus"></i>
Tambah Pengguna
</a>
</div>
<!-- Stats Cards -->
<div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
<div class="rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-white/[0.03]">
<div class="flex items-center justify-between">
<div>
<p class="text-sm text-gray-500 dark:text-gray-400">Total Pengguna</p>
<p class="text-2xl font-bold text-gray-800 dark:text-white"><?= $stats['total'] ?></p>
</div>
<div class="w-12 h-12 rounded-full bg-brand-100 dark:bg-brand-900/20 flex items-center justify-center">
<i class="fe fe-users text-brand-600 dark:text-brand-400 text-xl"></i>
</div>
</div>
</div>
<div class="rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-white/[0.03]">
<div class="flex items-center justify-between">
<div>
<p class="text-sm text-gray-500 dark:text-gray-400">Aktif</p>
<p class="text-2xl font-bold text-gray-800 dark:text-white"><?= $stats['active'] ?></p>
</div>
<div class="w-12 h-12 rounded-full bg-success-100 dark:bg-success-900/20 flex items-center justify-center">
<i class="fe fe-check-circle text-success-600 dark:text-success-400 text-xl"></i>
</div>
</div>
</div>
<div class="rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-white/[0.03]">
<div class="flex items-center justify-between">
<div>
<p class="text-sm text-gray-500 dark:text-gray-400">Tidak Aktif</p>
<p class="text-2xl font-bold text-gray-800 dark:text-white"><?= $stats['inactive'] ?></p>
</div>
<div class="w-12 h-12 rounded-full bg-error-100 dark:bg-error-900/20 flex items-center justify-center">
<i class="fe fe-x-circle text-error-600 dark:text-error-400 text-xl"></i>
</div>
</div>
</div>
</div>
<!-- Filters and Search -->
<div class="rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-white/[0.03]">
<form method="get" action="<?= base_url('admin/users') ?>" class="flex flex-col gap-4 sm:flex-row sm:items-center">
<div class="flex-1">
<input
type="text"
name="search"
value="<?= esc($currentSearch ?? '') ?>"
placeholder="Cari pengguna..."
class="h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 shadow-theme-xs placeholder:text-gray-400 focus:border-brand-300 focus:ring-3 focus:ring-brand-500/10 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:focus:border-brand-800"
/>
</div>
<div>
<select
name="role"
class="h-11 rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 shadow-theme-xs focus:border-brand-300 focus:ring-3 focus:ring-brand-500/10 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:focus:border-brand-800"
>
<option value="">Semua Role</option>
<?php foreach ($roles as $role): ?>
<option value="<?= esc($role['name']) ?>" <?= ($currentRole === $role['name']) ? 'selected' : '' ?>>
<?= esc(ucfirst($role['name'])) ?>
</option>
<?php endforeach; ?>
</select>
</div>
<div>
<select
name="status"
class="h-11 rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 shadow-theme-xs focus:border-brand-300 focus:ring-3 focus:ring-brand-500/10 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:focus:border-brand-800"
>
<option value="">Semua Status</option>
<option value="1" <?= ($currentStatus === '1') ? 'selected' : '' ?>>Aktif</option>
<option value="0" <?= ($currentStatus === '0') ? 'selected' : '' ?>>Tidak Aktif</option>
</select>
</div>
<button
type="submit"
class="inline-flex items-center justify-center gap-2 rounded-lg bg-brand-500 px-4 py-2.5 text-sm font-medium text-white shadow-theme-xs hover:bg-brand-600"
>
<i class="fe fe-search"></i>
Cari
</button>
<?php if ($currentSearch || $currentRole || $currentStatus !== null): ?>
<a
href="<?= base_url('admin/users') ?>"
class="inline-flex items-center justify-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm font-medium text-gray-700 shadow-theme-xs hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03]"
>
<i class="fe fe-x"></i>
Reset
</a>
<?php endif; ?>
</form>
</div>
<!-- Users Table -->
<div class="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
<div class="max-w-full overflow-x-auto">
<table class="min-w-full">
<thead>
<tr class="border-b border-gray-100 dark:border-gray-800">
<th class="px-5 py-3 sm:px-6">
<div class="flex items-center">
<p class="font-medium text-gray-500 text-xs dark:text-gray-400">
Username
</p>
</div>
</th>
<th class="px-5 py-3 sm:px-6">
<div class="flex items-center">
<p class="font-medium text-gray-500 text-xs dark:text-gray-400">
Email
</p>
</div>
</th>
<th class="px-5 py-3 sm:px-6">
<div class="flex items-center">
<p class="font-medium text-gray-500 text-xs dark:text-gray-400">
Role
</p>
</div>
</th>
<th class="px-5 py-3 sm:px-6">
<div class="flex items-center">
<p class="font-medium text-gray-500 text-xs dark:text-gray-400">
Status
</p>
</div>
</th>
<th class="px-5 py-3 sm:px-6">
<div class="flex items-center">
<p class="font-medium text-gray-500 text-xs dark:text-gray-400">
Aksi
</p>
</div>
</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-100 dark:divide-gray-800">
<?php if (empty($users)): ?>
<tr>
<td colspan="5" class="px-5 py-8 text-center sm:px-6">
<p class="text-gray-500 dark:text-gray-400">Tidak ada pengguna ditemukan.</p>
</td>
</tr>
<?php else: ?>
<?php foreach ($users as $item): ?>
<tr>
<td class="px-5 py-4 sm:px-6">
<div class="flex items-center">
<div>
<p class="font-medium text-gray-800 text-sm dark:text-white/90">
<?= esc($item['username']) ?>
</p>
<?php if (!empty($item['phone_number'])): ?>
<span class="text-gray-500 text-xs dark:text-gray-400">
<?= esc($item['phone_number']) ?>
</span>
<?php endif; ?>
</div>
</div>
</td>
<td class="px-5 py-4 sm:px-6">
<div class="flex items-center">
<p class="text-gray-500 text-sm dark:text-gray-400">
<?= esc($item['email']) ?>
</p>
</div>
</td>
<td class="px-5 py-4 sm:px-6">
<div class="flex items-center">
<p class="rounded-full bg-brand-50 px-2 py-0.5 text-xs font-medium text-brand-700 dark:bg-brand-500/15 dark:text-brand-500">
<?= esc(ucfirst($item['role_name'] ?? 'Unknown')) ?>
</p>
</div>
</td>
<td class="px-5 py-4 sm:px-6">
<div class="flex items-center">
<?php if ($item['is_active']): ?>
<p class="rounded-full bg-success-50 px-2 py-0.5 text-xs font-medium text-success-700 dark:bg-success-500/15 dark:text-success-500">
Aktif
</p>
<?php else: ?>
<p class="rounded-full bg-error-50 px-2 py-0.5 text-xs font-medium text-error-700 dark:bg-error-500/15 dark:text-error-500">
Tidak Aktif
</p>
<?php endif; ?>
</div>
</td>
<td class="px-5 py-4 sm:px-6">
<div class="flex items-center gap-2">
<a
href="<?= base_url('admin/users/edit/' . $item['id']) ?>"
class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-700 shadow-theme-xs hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03]"
title="Edit"
>
<i class="fe fe-edit text-sm"></i>
<span class="hidden sm:inline">Edit</span>
</a>
<button
type="button"
onclick="showResetPasswordModal(<?= $item['id'] ?>, '<?= esc($item['username']) ?>')"
class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-warning-300 bg-white px-3 py-1.5 text-sm font-medium text-warning-700 shadow-theme-xs hover:bg-warning-50 dark:border-warning-700 dark:bg-gray-800 dark:text-warning-400 dark:hover:bg-warning-900/20"
title="Reset Password"
>
<i class="fe fe-lock text-sm"></i>
<span class="hidden sm:inline">Reset</span>
</button>
<?php if ($item['id'] != session()->get('user_id')): ?>
<button
type="button"
onclick="toggleActive(<?= $item['id'] ?>, <?= $item['is_active'] ? 0 : 1 ?>)"
class="inline-flex items-center justify-center gap-1.5 rounded-lg border <?= $item['is_active'] ? 'border-error-300 text-error-700 hover:bg-error-50' : 'border-success-300 text-success-700 hover:bg-success-50' ?> bg-white px-3 py-1.5 text-sm font-medium shadow-theme-xs dark:bg-gray-800 dark:hover:bg-white/[0.03]"
title="<?= $item['is_active'] ? 'Nonaktifkan' : 'Aktifkan' ?>"
>
<i class="fe <?= $item['is_active'] ? 'fe-x-circle' : 'fe-check-circle' ?> text-sm"></i>
<span class="hidden sm:inline"><?= $item['is_active'] ? 'Nonaktif' : 'Aktif' ?></span>
</button>
<button
type="button"
onclick="deleteUser(<?= $item['id'] ?>, '<?= esc($item['username']) ?>')"
class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-error-300 bg-white px-3 py-1.5 text-sm font-medium text-error-700 shadow-theme-xs hover:bg-error-50 dark:border-error-700 dark:bg-gray-800 dark:text-error-400 dark:hover:bg-error-900/20"
title="Hapus"
>
<i class="fe fe-trash-2 text-sm"></i>
<span class="hidden sm:inline">Hapus</span>
</button>
<?php endif; ?>
</div>
</td>
</tr>
<?php endforeach; ?>
<?php endif; ?>
</tbody>
</table>
</div>
<!-- Pagination -->
<?php if ($pager->hasMore() || $pager->getCurrentPage() > 1): ?>
<div class="flex items-center justify-between border-t border-gray-100 px-5 py-4 dark:border-gray-800 sm:px-6">
<div class="text-sm text-gray-500 dark:text-gray-400">
Menampilkan <?= count($users) ?> dari <?= $pager->getTotal() ?> pengguna
</div>
<div class="flex items-center gap-2">
<?= $pager->links() ?>
</div>
</div>
<?php endif; ?>
</div>
</div>
<!-- Confirmation Modal -->
<div id="confirmModal" class="fixed inset-0 z-50 hidden items-center justify-center bg-black/50">
<div class="rounded-lg border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-gray-900 w-full max-w-md">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-2" id="confirmModalTitle">
Konfirmasi
</h3>
<p class="text-sm text-gray-500 dark:text-gray-400 mb-4" id="confirmModalMessage">
Apakah Anda yakin?
</p>
<div class="flex items-center gap-3 pt-4">
<button
type="button"
id="confirmModalButton"
class="inline-flex items-center justify-center gap-2 rounded-lg bg-brand-500 px-4 py-2.5 text-sm font-medium text-white shadow-theme-xs hover:bg-brand-600"
>
Ya, Lanjutkan
</button>
<button
type="button"
onclick="closeConfirmModal()"
class="inline-flex items-center justify-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm font-medium text-gray-700 shadow-theme-xs hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03]"
>
Batal
</button>
</div>
</div>
</div>
<!-- Reset Password Modal -->
<div id="resetPasswordModal" class="fixed inset-0 z-50 hidden items-center justify-center bg-black/50">
<div class="rounded-lg border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-gray-900 w-full max-w-md">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">
Reset Password
</h3>
<p class="text-sm text-gray-500 dark:text-gray-400 mb-4">
Reset password untuk: <span id="resetUsername" class="font-medium"></span>
</p>
<form id="resetPasswordForm" method="post" action="" class="space-y-4">
<?= csrf_field() ?>
<div>
<label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
Password Baru <span class="text-error-500">*</span>
</label>
<input
type="password"
name="new_password"
placeholder="Masukkan password baru"
class="h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 shadow-theme-xs placeholder:text-gray-400 focus:border-brand-300 focus:ring-3 focus:ring-brand-500/10 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:focus:border-brand-800"
required
minlength="6"
/>
</div>
<div>
<label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
Konfirmasi Password <span class="text-error-500">*</span>
</label>
<input
type="password"
name="confirm_password"
placeholder="Konfirmasi password baru"
class="h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 shadow-theme-xs placeholder:text-gray-400 focus:border-brand-300 focus:ring-3 focus:ring-brand-500/10 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:focus:border-brand-800"
required
minlength="6"
/>
</div>
<div class="flex items-center gap-3 pt-4">
<button
type="submit"
class="inline-flex items-center justify-center gap-2 rounded-lg bg-brand-500 px-4 py-2.5 text-sm font-medium text-white shadow-theme-xs hover:bg-brand-600"
>
Reset Password
</button>
<button
type="button"
onclick="closeResetPasswordModal()"
class="inline-flex items-center justify-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm font-medium text-gray-700 shadow-theme-xs hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03]"
>
Batal
</button>
</div>
</form>
</div>
</div>
<script>
function showResetPasswordModal(userId, username) {
document.getElementById('resetUsername').textContent = username;
document.getElementById('resetPasswordForm').action = '<?= base_url('admin/users/reset-password/') ?>' + userId;
document.getElementById('resetPasswordModal').classList.remove('hidden');
document.getElementById('resetPasswordModal').classList.add('flex');
}
function closeResetPasswordModal() {
document.getElementById('resetPasswordModal').classList.add('hidden');
document.getElementById('resetPasswordModal').classList.remove('flex');
document.getElementById('resetPasswordForm').reset();
}
let confirmCallback = null;
function showConfirmModal(title, message, buttonText, buttonClass, callback) {
document.getElementById('confirmModalTitle').textContent = title;
document.getElementById('confirmModalMessage').textContent = message;
const confirmBtn = document.getElementById('confirmModalButton');
confirmBtn.textContent = buttonText;
confirmBtn.className = `inline-flex items-center justify-center gap-2 rounded-lg px-4 py-2.5 text-sm font-medium text-white shadow-theme-xs hover:opacity-90 ${buttonClass}`;
confirmCallback = callback;
document.getElementById('confirmModal').classList.remove('hidden');
document.getElementById('confirmModal').classList.add('flex');
}
function closeConfirmModal() {
document.getElementById('confirmModal').classList.add('hidden');
document.getElementById('confirmModal').classList.remove('flex');
confirmCallback = null;
}
function toggleActive(userId, newStatus) {
const action = newStatus ? 'mengaktifkan' : 'menonaktifkan';
const actionText = newStatus ? 'mengaktifkan' : 'menonaktifkan';
const buttonClass = newStatus ? 'bg-success-500 hover:bg-success-600' : 'bg-warning-500 hover:bg-warning-600';
showConfirmModal(
'Konfirmasi',
`Apakah Anda yakin ingin ${actionText} pengguna ini?`,
'Ya, Lanjutkan',
buttonClass,
function() {
const form = document.createElement('form');
form.method = 'POST';
form.action = '<?= base_url('admin/users/toggle-active/') ?>' + userId;
const csrf = document.createElement('input');
csrf.type = 'hidden';
csrf.name = '<?= csrf_token() ?>';
csrf.value = '<?= csrf_hash() ?>';
form.appendChild(csrf);
document.body.appendChild(form);
form.submit();
}
);
}
function deleteUser(userId, username) {
showConfirmModal(
'Hapus Pengguna',
`Apakah Anda yakin ingin menghapus pengguna "${username}"? Tindakan ini tidak dapat dibatalkan.`,
'Ya, Hapus',
'bg-error-500 hover:bg-error-600',
function() {
const form = document.createElement('form');
form.method = 'POST';
form.action = '<?= base_url('admin/users/delete/') ?>' + userId;
const csrf = document.createElement('input');
csrf.type = 'hidden';
csrf.name = '<?= csrf_token() ?>';
csrf.value = '<?= csrf_hash() ?>';
form.appendChild(csrf);
document.body.appendChild(form);
form.submit();
}
);
}
// Handle confirm button click
document.getElementById('confirmModalButton').addEventListener('click', function() {
if (confirmCallback) {
confirmCallback();
closeConfirmModal();
}
});
// Close modals on outside click
document.getElementById('resetPasswordModal')?.addEventListener('click', function(e) {
if (e.target === this) {
closeResetPasswordModal();
}
});
document.getElementById('confirmModal')?.addEventListener('click', function(e) {
if (e.target === this) {
closeConfirmModal();
}
});
</script>
<?= $this->endSection() ?>