armiejean
/
cms-frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

user-management frontend page done

This commit is contained in:
armiejean 2025-04-15 23:04:43 +08:00
parent f1514e7613
commit 3ee7695dc9
6 changed files with 10271 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9998
public/css/bootstrap.min.css vendored
View File

File diff suppressed because one or more lines are too long

6
resources/views/layouts/app.blade.php
View File

@ -188,11 +188,11 @@
<i class="fa-solid fa-user-circle" style="padding-right:5px"></i>
</a>
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-sm">
<li>
<li style="margin-right:5px">
<a class="dropdown-item d-flex align-items-center gap-2"
href="{{ route('my-profile') }}">
<i class="fa-solid fa-user" style="font-size:16px; color:gray;"></i>
<span>My Profile</span>
<span style="margin-left:5px">My Profile</span>
</a>
</li>
<li>
@ -200,7 +200,7 @@
href="{{ route('login') }}">
<i class="fa-solid fa-right-from-bracket"
style="font-size:16px; color:gray;"></i>
<span>Logout</span>
<span style="margin-left:5px">Logout</span>
</a>
</li>
</ul>

39
resources/views/login.blade.php
View File

@ -5,7 +5,7 @@
<div class="row justify-content-center">
<div class="col-12 col-md-6">
<img src="{{ asset('img/logo.png') }}" alt="Unioil Logo" class="img-fluid" style="max-width: 150px;">
<img src="{{ asset('img/logo.png') }}" alt="Unioil Logo" class="img-fluid" style="max-width: 150px;">
<div class="mb-3 text-center">
<h4 class="mb-1 fw-bold">Welcome</h4>
@ -14,15 +14,17 @@
<form>
<div class="mb-3">
<label class="form-label fw-semibold" style="font-size: 13px; color: #003366;">Enter Username</label>
<label class="form-label fw-semibold" style="font-size: 13px; color: #003366;">Enter
Username</label>
<input type="text" class="form-control" placeholder="Username">
</div>
<!-- Mockup password input -->
<div class="mb-3">
<label class="form-label fw-semibold text-primary" style="font-size: 13px; color: #003366 !important;">Enter Password</label>
<input type="password" class="form-control" placeholder="Password">
<label class="form-label fw-semibold text-primary"
style="font-size: 13px; color: #003366 !important;">Enter Password</label>
<input type="password" class="form-control" placeholder="Password">
</div>
<div class="row mt-4">
@ -30,7 +32,8 @@
<a href="#" class="text-decoration-none text-primary">Forgot Username</a>
</div>
<div class="col-6 text-end">
<button type="submit" class="btn btn-primary w-100" style="background-color: #E74610; border-color: #E74610;">
<button type="submit" class="btn btn-primary w-100"
style="background-color: #E74610; border-color: #E74610;">
Login
</button>
</div>
@ -39,21 +42,21 @@
<!-- Modal Simulation -->
<!-- <div class="modal fade show d-block mt-5" tabindex="-1" style="background-color: rgba(0,0,0,0.3); display: none;">
<div class="modal-dialog modal-dialog-centered" style="max-width: 337px;">
<div class="modal-content">
<div class="modal-body">
<h4>Forgot Password</h4>
<p>
To have your password reset, please contact <br>
Unioil's admin at <a href="mailto:admin@unioil.com" class="text-primary">admin@unioil.com</a>
</p>
</div>
<div class="modal-footer justify-content-end">
<button class="btn btn-primary" style="background-color: #E74610; border-color: #E74610; width: 64px;">Ok</button>
<div class="modal-dialog modal-dialog-centered" style="max-width: 337px;">
<div class="modal-content">
<div class="modal-body">
<h4>Forgot Password</h4>
<p>
To have your password reset, please contact <br>
Unioil's admin at <a href="mailto:admin@unioil.com" class="text-primary">admin@unioil.com</a>
</p>
</div>
<div class="modal-footer justify-content-end">
<button class="btn btn-primary" style="background-color: #E74610; border-color: #E74610; width: 64px;">Ok</button>
</div>
</div>
</div>
</div>
</div> -->
</div> -->
</div>
</div>
</div>

253
resources/views/pages/user-management.blade.php
View File

@ -3,11 +3,11 @@
@section('page_title', 'User Management')
@section('content')
<div class="card border-0 shadow-sm" style="min-height: 500px;">
<div class="card-header border-0 bg-transparent">
<div class="d-flex justify-content-between align-items-center">
<h5 class="mb-0 fw-bold text-dark">User Management</h5>
<a href="#" class="btn btn-primary btn-sm px-3">
<a href="{{ url('add-user') }}" class="btn btn-primary btn-sm px-3">
<i class="fa-solid fa-plus me-1"></i> Add User
</a>
</div>
@ -20,8 +20,7 @@
<span class="input-group-text bg-light border-end-0">
<i class="fa-solid fa-magnifying-glass text-muted"></i>
</span>
<input type="text" class="form-control border-start-0" placeholder="Search users..."
id="searchInput">
<input type="text" class="form-control border-start-0" placeholder="Search users..." id="searchInput">
</div>
</div>
<div class="col-12 col-md-6 d-flex justify-content-end">
@ -56,13 +55,11 @@
<!-- Delete Selected Button and Pagination -->
<div class="d-flex justify-content-between align-items-center mt-4">
<!-- Delete Selected Button -->
<div>
<button class="btn btn-danger btn-sm" id="deleteSelected" disabled>
<i class="fa-solid fa-trash-can me-1"></i> Delete Selected
</button>
</div>
<!-- Pagination -->
<nav aria-label="Page navigation">
<ul class="pagination pagination-sm" id="pagination">
<!-- Pagination links will be generated dynamically -->
@ -70,7 +67,7 @@
</nav>
</div>
</div>
</div>
<!-- Edit User Modal -->
<div class="modal fade" id="editUserModal" tabindex="-1" aria-labelledby="editUserModalLabel" aria-hidden="true">
@ -78,7 +75,9 @@
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="editUserModalLabel">Edit User</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<button type="button" class="modal-close-btn" data-bs-dismiss="modal" aria-label="Close">
<i class="fa-solid fa-xmark"></i>
</button>
</div>
<div class="modal-body">
<form id="editUserForm">
@ -119,6 +118,34 @@
</div>
</div>
<!-- View User Modal -->
<div class="modal fade" id="viewUserModal" tabindex="-1" aria-labelledby="viewUserModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="viewUserModalLabel">View User Details</h5>
<button type="button" class="modal-close-btn" data-bs-dismiss="modal" aria-label="Close">
<i class="fa-solid fa-xmark"></i>
</button>
</div>
<div class="modal-body">
<div class="view-user-details">
<p><strong>ID:</strong> <span id="viewId"></span></p>
<p><strong>Username:</strong> <span id="viewUsername"></span></p>
<p><strong>First Name:</strong> <span id="viewFirstName"></span></p>
<p><strong>Last Name:</strong> <span id="viewLastName"></span></p>
<p><strong>User Role:</strong> <span id="viewUserRole"></span></p>
<p><strong>Email:</strong> <span id="viewEmail"></span></p>
<p><strong>Status:</strong> <span id="viewStatus"></span></p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Custom CSS for Styling -->
<style>
/* Font Styling */
@ -128,18 +155,19 @@
.form-control,
.input-group-text,
.modal-content {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
font-weight: 400;
line-height: 1.5;
}
.card-header h5,
.modal-title {
font-weight: 600;
font-weight: 500;
}
.table th {
.table thead th {
font-weight: 500;
font-size: 0.8rem;
}
.form-label {
@ -156,13 +184,13 @@
}
.btn-primary {
background-color: #007bff;
border-color: #007bff;
background-color: #E74610;
border-color: #E74610;
}
.btn-primary:hover {
background-color: #0056b3;
border-color: #0056b3;
background-color: #E74610;
border-color: #E74610;
}
.sortable {
@ -201,19 +229,16 @@
}
.table td:nth-child(5),
/* User Role */
.table th:nth-child(5) {
width: 100px;
}
.table td:nth-child(6),
/* Email */
.table th:nth-child(6) {
max-width: 200px;
}
.table td:nth-child(7),
/* Status */
.table th:nth-child(7) {
width: 120px;
}
@ -231,12 +256,15 @@
font-size: 0.85rem;
}
/* Table Container to Prevent Scrollbar */
.table thead .sortable i {
font-size: 0.7rem;
vertical-align: middle;
}
.table-container {
overflow-x: hidden;
}
/* Modal Styling */
.modal-content {
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
@ -244,6 +272,7 @@
.modal-header {
border-bottom: 1px solid #e9ecef;
position: relative;
}
.modal-footer {
@ -256,18 +285,81 @@
border-radius: 5px;
}
/* Pagination Styling */
.modal-close-btn {
background: none;
border: none;
font-size: 1rem;
color: #6c757d;
position: absolute;
right: 15px;
top: 15px;
cursor: pointer;
}
.modal-close-btn:hover {
color: #343a40;
}
.view-user-details p {
margin-bottom: 0.75rem;
font-size: 0.9rem;
}
.view-user-details strong {
display: inline-block;
width: 120px;
font-weight: 500;
color: #343a40;
}
.view-user-details span {
color: #495057;
}
.pagination-sm .page-link {
padding: 0.25rem 0.5rem;
font-size: 0.85rem;
border-color: #E74610;
color: #E74610;
}
.pagination-sm .page-item.active .page-link {
background-color: #E74610;
border-color: #E74610;
color: #fff;
}
.pagination-sm .page-link:hover {
background-color: #E74610;
border-color: #E74610;
color: #fff;
}
.pagination-sm .page-item.disabled .page-link {
border-color: #dee2e6;
color: #6c757d;
}
.edit-btn {
border-color: #E74610;
color: #E74610;
}
.edit-btn:hover {
background-color: #E74610;
border-color: #E74610;
color: #fff;
}
/* Responsive adjustments */
@media (max-width: 576px) {
.table {
font-size: 0.75rem;
}
.table thead th {
font-size: 0.75rem;
}
.table th,
.table td {
padding: 0.3rem;
@ -290,13 +382,16 @@
font-size: 0.75rem;
}
.table thead .sortable i {
font-size: 0.65rem;
}
.pagination-sm .page-link {
padding: 0.2rem 0.4rem;
font-size: 0.75rem;
}
.table td:nth-child(6) {
/* Email */
max-width: 150px;
}
@ -304,12 +399,24 @@
.form-select {
font-size: 0.85rem;
}
.modal-close-btn {
font-size: 0.9rem;
}
.view-user-details p {
font-size: 0.85rem;
}
.view-user-details strong {
width: 100px;
}
}
</style>
<!-- JavaScript for Interactivity -->
<script>
// Sample data (replace with dynamic data from backend in real implementation)
// Sample data
const allRows = [{
id: 1,
username: 'superadmin',
@ -375,15 +482,11 @@
}
];
// Pagination settings
const rowsPerPage = 5;
let currentPage = 1;
let filteredRows = [...allRows];
let originalRows = [...allRows].map(row => ({
...row
})); // Deep copy for original data
let originalRows = [...allRows].map(row => ({ ...row }));
// Function to render table rows for the current page
function renderTable() {
const tableBody = document.getElementById('userTableBody');
tableBody.innerHTML = '';
@ -424,10 +527,10 @@
</div>
</td>
<td class="text-center">
<a href="#" class="btn btn-sm btn-outline-primary me-1 edit-btn" title="Edit" data-id="${row.id}">
<a href="#" class="btn btn-sm edit-btn me-1" title="Edit" data-id="${row.id}">
<i class="fa-solid fa-pen-to-square"></i>
</a>
<a href="#" class="btn btn-sm btn-outline-secondary me-1" title="View">
<a href="#" class="btn btn-sm btn-outline-secondary me-1 view-btn" title="View" data-id="${row.id}">
<i class="fa-solid fa-eye"></i>
</a>
<button class="btn btn-sm btn-outline-danger" onclick="confirmDelete(${row.id})" title="Delete">
@ -438,21 +541,19 @@
tableBody.appendChild(tr);
});
// Reattach event listeners
attachStatusListeners();
attachCheckboxListeners();
attachEditListeners();
attachViewListeners();
updateDeleteButtonState();
}
// Function to render pagination
function renderPagination() {
const pagination = document.getElementById('pagination');
pagination.innerHTML = '';
const pageCount = Math.ceil(filteredRows.length / rowsPerPage);
// Previous button
const prevLi = document.createElement('li');
prevLi.className = `page-item ${currentPage === 1 ? 'disabled' : ''}`;
prevLi.innerHTML = `<a class="page-link" href="#" aria-label="Previous"><span aria-hidden="true">«</span></a>`;
@ -466,7 +567,6 @@
});
pagination.appendChild(prevLi);
// Page numbers
for (let i = 1; i <= pageCount; i++) {
const li = document.createElement('li');
li.className = `page-item ${currentPage === i ? 'active' : ''}`;
@ -480,7 +580,6 @@
pagination.appendChild(li);
}
// Next button
const nextLi = document.createElement('li');
nextLi.className = `page-item ${currentPage === pageCount ? 'disabled' : ''}`;
nextLi.innerHTML = `<a class="page-link" href="#" aria-label="Next"><span aria-hidden="true">»</span></a>`;
@ -495,7 +594,6 @@
pagination.appendChild(nextLi);
}
// Search Functionality
document.getElementById('searchInput').addEventListener('input', function() {
const searchTerm = this.value.toLowerCase();
filteredRows = allRows.filter(row => {
@ -503,12 +601,11 @@
value.toString().toLowerCase().includes(searchTerm)
);
});
currentPage = 1; // Reset to first page
currentPage = 1;
renderTable();
renderPagination();
});
// Sorting Functionality
let sortDirection = {};
document.querySelectorAll('.sortable').forEach(header => {
header.addEventListener('click', function() {
@ -523,11 +620,8 @@
};
const key = columnMap[column];
// Toggle sort direction
sortDirection[column] = !sortDirection[column] ? 'asc' : sortDirection[column] === 'asc' ?
'desc' : 'asc';
sortDirection[column] = !sortDirection[column] ? 'asc' : sortDirection[column] === 'asc' ? 'desc' : 'asc';
// Update sort icons
document.querySelectorAll('.sortable i').forEach(icon => {
icon.classList.remove('fa-sort-up', 'fa-sort-down');
icon.classList.add('fa-sort');
@ -536,7 +630,6 @@
icon.classList.remove('fa-sort');
icon.classList.add(sortDirection[column] === 'asc' ? 'fa-sort-up' : 'fa-sort-down');
// Sort filtered rows
filteredRows.sort((a, b) => {
const aValue = a[key].toLowerCase();
const bValue = b[key].toLowerCase();
@ -547,32 +640,25 @@
}
});
currentPage = 1; // Reset to first page
currentPage = 1;
renderTable();
renderPagination();
});
});
// Clear Filters and Reset Sorting
document.getElementById('clearFilters').addEventListener('click', function() {
// Clear search input
document.getElementById('searchInput').value = '';
// Reset sort icons
document.querySelectorAll('.sortable i').forEach(icon => {
icon.classList.remove('fa-sort-up', 'fa-sort-down');
icon.classList.add('fa-sort');
});
sortDirection = {};
// Reset filtered rows to original
filteredRows = [...allRows];
currentPage = 1;
renderTable();
renderPagination();
});
// Select All Checkbox Functionality
document.getElementById('selectAll').addEventListener('change', function() {
const checkboxes = document.querySelectorAll('.rowCheckbox');
checkboxes.forEach(checkbox => {
@ -581,7 +667,6 @@
updateDeleteButtonState();
});
// Checkbox Listeners for Batch Delete
function attachCheckboxListeners() {
const checkboxes = document.querySelectorAll('.rowCheckbox');
checkboxes.forEach(checkbox => {
@ -589,7 +674,6 @@
});
}
// Update Delete Button State
function updateDeleteButtonState() {
const checkboxes = document.querySelectorAll('.rowCheckbox');
const checkedCount = Array.from(checkboxes).filter(cb => cb.checked).length;
@ -597,7 +681,6 @@
deleteButton.disabled = checkedCount < 2;
}
// Delete Selected (UI Only)
document.getElementById('deleteSelected').addEventListener('click', function() {
if (confirm('Are you sure you want to delete the selected users?')) {
const checkboxes = document.querySelectorAll('.rowCheckbox');
@ -605,12 +688,10 @@
.filter(cb => cb.checked)
.map(cb => cb.closest('tr').getAttribute('data-id'));
// Simulate deletion by removing from allRows and filteredRows
allRows = allRows.filter(row => !selectedIds.includes(row.id.toString()));
filteredRows = filteredRows.filter(row => !selectedIds.includes(row.id.toString()));
originalRows = originalRows.filter(row => !selectedIds.includes(row.id.toString()));
// Reset to first page if necessary
const maxPage = Math.ceil(filteredRows.length / rowsPerPage);
if (currentPage > maxPage) {
currentPage = maxPage || 1;
@ -618,13 +699,10 @@
renderTable();
renderPagination();
// Reset select all checkbox
document.getElementById('selectAll').checked = false;
}
});
// Status Dropdown Functionality
function attachStatusListeners() {
const options = document.querySelectorAll('.status-option');
options.forEach(option => {
@ -640,12 +718,10 @@
const userId = row.getAttribute('data-id');
const statusText = row.querySelector('.status-text');
// Update the button text
if (statusText) {
statusText.textContent = newStatus;
}
// Update the data in allRows, filteredRows, and originalRows
const rowData = allRows.find(r => r.id == userId);
if (rowData) {
rowData.status = newStatus;
@ -659,11 +735,9 @@
originalRowData.status = newStatus;
}
// Simulate an API call to update the status
updateUserStatus(userId, newStatus);
}
// Edit Button Functionality
function attachEditListeners() {
const editButtons = document.querySelectorAll('.edit-btn');
editButtons.forEach(button => {
@ -672,7 +746,6 @@
const userId = this.getAttribute('data-id');
const user = allRows.find(row => row.id == userId);
// Populate modal fields with user data
document.getElementById('editUsername').value = user.username;
document.getElementById('editFirstName').value = user.firstName;
document.getElementById('editLastName').value = user.lastName;
@ -680,54 +753,49 @@
document.getElementById('editEmail').value = user.email;
document.getElementById('editStatus').value = user.status;
// Show the modal
const modal = new bootstrap.Modal(document.getElementById('editUserModal'));
modal.show();
});
});
}
// Update Button in Modal (Static for now)
function attachViewListeners() {
const viewButtons = document.querySelectorAll('.view-btn');
viewButtons.forEach(button => {
button.addEventListener('click', function(e) {
e.preventDefault();
const userId = this.getAttribute('data-id');
const user = allRows.find(row => row.id == userId);
document.getElementById('viewId').textContent = user.id;
document.getElementById('viewUsername').textContent = user.username;
document.getElementById('viewFirstName').textContent = user.firstName;
document.getElementById('viewLastName').textContent = user.lastName;
document.getElementById('viewUserRole').textContent = user.role;
document.getElementById('viewEmail').textContent = user.email;
document.getElementById('viewStatus').textContent = user.status;
const modal = new bootstrap.Modal(document.getElementById('viewUserModal'));
modal.show();
});
});
}
document.getElementById('updateUserBtn').addEventListener('click', function() {
// For static purposes, just close the modal
const modal = bootstrap.Modal.getInstance(document.getElementById('editUserModal'));
modal.hide();
});
// Simulated API call to update status
function updateUserStatus(userId, status) {
console.log(`Updating user ${userId} status to ${status}`);
// Replace with actual AJAX call to your backend, e.g.:
/*
fetch(`/user/update-status/${userId}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
},
body: JSON.stringify({ status: status })
})
.then(response => response.json())
.then(data => {
if (data.success) {
console.log('Status updated successfully');
} else {
console.error('Failed to update status');
}
})
.catch(error => console.error('Error:', error));
*/
}
// Delete Confirmation
function confirmDelete(id) {
if (confirm('Are you sure you want to delete this user?')) {
// Simulate deletion by removing from allRows and filteredRows
allRows = allRows.filter(row => row.id != id);
filteredRows = filteredRows.filter(row => row.id != id);
originalRows = originalRows.filter(row => row.id != id);
// Reset to first page if necessary
const maxPage = Math.ceil(filteredRows.length / rowsPerPage);
if (currentPage > maxPage) {
currentPage = maxPage || 1;
@ -738,7 +806,6 @@
}
}
// Initial render
renderTable();
renderPagination();
</script>

82
resources/views/pages/user-management/add-user.blade.php Normal file
View File

@ -0,0 +1,82 @@
@extends('layouts.app')
@section('page_title', 'Add User')
@section('content')
<div class="card-header border-0 bg-transparent py-2">
<h5 class="mb-0 fw-bold text-dark" style="font-size: 1.25rem;">Add New User</h5>
</div>
<div class="card-body py-2">
<form action="#" method="POST" id="addUserForm">
@csrf
<div class="mb-2">
<label for="username" class="form-label mb-1">Username</label>
<input type="text" class="form-control form-control-sm" id="username" name="username" required>
</div>
<div class="mb-2">
<label for="firstName" class="form-label mb-1">First Name</label>
<input type="text" class="form-control form-control-sm" id="firstName" name="firstName" required>
</div>
<div class="mb-2">
<label for="lastName" class="form-label mb-1">Last Name</label>
<input type="text" class="form-control form-control-sm" id="lastName" name="lastName" required>
</div>
<div class="mb-2">
<label for="role" class="form-label mb-1">User Role</label>
<input type="text" class="form-control form-control-sm" id="role" name="role" required>
</div>
<div class="mb-2">
<label for="email" class="form-label mb-1">Email</label>
<input type="email" class="form-control form-control-sm" id="email" name="email" required>
</div>
<div class="mb-2">
<label for="status" class="form-label mb-1">Status</label>
<select class="form-select form-select-sm" id="status" name="status" required>
<option value="Active">Active</option>
<option value="Inactive">Inactive</option>
</select>
</div>
<div class="d-flex justify-content-end mt-3">
<a href="{{ url('user-management') }}" class="btn btn-outline-secondary btn-sm me-2" style="margin-right:5px">Cancel</a>
<button type="submit" class="btn btn-primary btn-sm">Add User</button>
</div>
</form>
</div>
<style>
.card {
border-radius: 8px;
}
.form-control,
.form-select {
font-size: 0.85rem;
border-radius: 4px;
padding: 0.375rem 0.75rem;
}
.form-label {
font-weight: 500;
font-size: 0.85rem;
line-height: 1.2;
}
.btn-primary {
background-color: #E74610;
border-color: #E74610;
font-size: 0.85rem;
padding: 0.375rem 0.75rem;
}
.btn-primary:hover {
background-color: #d63f0e;
border-color: #d63f0e;
}
.btn-outline-secondary {
font-size: 0.85rem;
padding: 0.375rem 0.75rem;
}
.form-control-sm,
.form-select-sm {
height: calc(1.5em + 0.5rem + 2px);
}
</style>
@endsection

4
routes/web.php
View File

@ -83,3 +83,7 @@ Route::get('/fuels', function () {
Route::get('/my-profile', function () {
return view('pages.my-profile');
})->name('my-profile');
Route::get('add-user', function () {
return view('pages.user-management.add-user');
})->name('add-user');