<div class="bg-white dark:bg-gray-800 shadow rounded-lg">
<!-- Header with Add User Button -->
<div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center">
<h2 class="text-xl font-semibold text-gray-800 dark:text-white">User Management</h2>
<button onclick="openModal('addUserModal')" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center">
<i class="fas fa-user-plus mr-2"></i>
Add User
</button>
</div>
<!-- Users Table -->
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
<thead class="bg-gray-50 dark:bg-gray-700">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
User
</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
Role
</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
Status
</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
Last Login
</th>
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
Actions
</th>
</tr>
</thead>
<tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
<?php foreach ($users as $user): ?>
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<i class="fas fa-user-circle text-gray-400 text-2xl"></i>
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900 dark:text-white">
<?= htmlspecialchars($user['name']) ?>
</div>
<div class="text-sm text-gray-500 dark:text-gray-400">
<?= htmlspecialchars($user['email']) ?>
</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full
<?= $user['role'] === 'admin' ? 'bg-purple-100 text-purple-800' : 'bg-green-100 text-green-800' ?>">
<?= ucfirst(htmlspecialchars($user['role'])) ?>
</span>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
Active
</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
<?= $user['last_login'] ?? 'Never' ?>
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<button onclick="openModal('editUserModal', <?= htmlspecialchars(json_encode($user)) ?>)"
class="text-blue-600 hover:text-blue-900 mr-3">
<i class="fas fa-edit"></i>
</button>
<button onclick="confirmDelete(<?= $user['id'] ?>)"
class="text-red-600 hover:text-red-900">
<i class="fas fa-trash"></i>
</button>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</div>
<!-- Add User Modal -->
<div id="addUserModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden overflow-y-auto h-full w-full">
<div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white dark:bg-gray-800 dark:border-gray-700">
<div class="mt-3">
<h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Add New User</h3>
<form id="addUserForm" action="<?php echo BASE_URL ?>/dashboard/users/add" method="POST" class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Name</label>
<input type="text" name="name" required
class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email</label>
<input type="email" name="email" required
class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
<input type="password" name="password" required
class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Role</label>
<select name="role" required
class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500">
<option value="user">User</option>
<option value="admin">Admin</option>
</select>
</div>
<div class="flex justify-end space-x-3">
<button type="button" onclick="closeModal('addUserModal')"
class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-300 px-4 py-2 rounded-md hover:bg-gray-300 dark:hover:bg-gray-600">
Cancel
</button>
<button type="submit"
class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700">
Add User
</button>
</div>
</form>
</div>
</div>
</div>
<!-- Edit User Modal -->
<div id="editUserModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden overflow-y-auto h-full w-full">
<div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white dark:bg-gray-800 dark:border-gray-700">
<div class="mt-3">
<h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Edit User</h3>
<form id="editUserForm" action="<?php echo BASE_URL ?>/dashboard/users/edit" method="POST" class="space-y-4">
<input type="hidden" name="id" id="editUserId">
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Name</label>
<input type="text" name="name" id="editUserName" required
class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email</label>
<input type="email" name="email" id="editUserEmail" required
class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
<input type="password" name="password" id="editUserPassword"
class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500"
placeholder="Leave empty to keep current password">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Role</label>
<select name="role" id="editUserRole" required
class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500">
<option value="user">User</option>
<option value="admin">Admin</option>
</select>
</div>
<div class="flex justify-end space-x-3">
<button type="button" onclick="closeModal('editUserModal')"
class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-300 px-4 py-2 rounded-md hover:bg-gray-300 dark:hover:bg-gray-600">
Cancel
</button>
<button type="submit"
class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700">
Save Changes
</button>
</div>
</form>
</div>
</div>
</div>
<script>
const BASE_URL = '<?php echo BASE_URL ?>';
function openModal(modalId, userData = null) {
document.getElementById(modalId).classList.remove('hidden');
if (modalId === 'editUserModal' && userData) {
document.getElementById('editUserId').value = userData.id;
document.getElementById('editUserName').value = userData.name;
document.getElementById('editUserEmail').value = userData.email;
document.getElementById('editUserRole').value = userData.role;
}
}
function closeModal(modalId) {
document.getElementById(modalId).classList.add('hidden');
}
function confirmDelete(userId) {
if (confirm('Are you sure you want to delete this user?')) {
window.location.href = `${BASE_URL}/dashboard/users/delete/?userid=${userId}`;
}
}
// Close modals when clicking outside
window.onclick = function(event) {
if (event.target.classList.contains('fixed')) {
event.target.classList.add('hidden');
}
}
</script>
|
Download
