Mini Shell
<?php
session_start();
$rootPath = realpath(dirname(__FILE__) . '/..');
require_once $rootPath . '/Portal/AccessControl.php';
require_once $rootPath . '/Portal/include/auth_validate.php';
// Get database instance
$db = getDbInstance();
// Get data from query string
$search_string = filter_input(INPUT_GET, 'search_string', FILTER_SANITIZE_FULL_SPECIAL_CHARS);
$filter_col = filter_input(INPUT_GET, 'filter_col', FILTER_SANITIZE_FULL_SPECIAL_CHARS);
$order_by = filter_input(INPUT_GET, 'order_by', FILTER_SANITIZE_FULL_SPECIAL_CHARS);
$page = filter_input(INPUT_GET, 'page', FILTER_SANITIZE_NUMBER_INT);
$pagelimit = 10;
if (!$page) {
$page = 1;
}
// If filter types are not selected we show latest added data first
if (!$filter_col) {
$filter_col = "accesslevelmanagementID";
}
if (!$order_by) {
$order_by = "desc";
}
// Select the columns
$select = array('accesslevelmanagementID', 'AccessName');
// If user searches
if ($search_string) {
$db->where('AccessName', '%' . $search_string . '%', 'like');
}
if ($order_by) {
$db->orderBy($filter_col, $order_by);
}
$db->pageLimit = $pagelimit;
$result = $db->arraybuilder()->paginate("accesslevelmanagement", $page, $select);
$total_pages = $db->totalPages;
// Get columns for order filter
$filter_options = array();
if (!empty($result)) {
foreach ($result as $value) {
foreach ($value as $col_name => $col_value) {
$filter_options[$col_name] = $col_name;
}
break;
}
}
include_once 'include/AdminHeader.php';
?>
<!-- Add Font Awesome and Bootstrap JS for Modals -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
/* BEAUTIFUL STYLING - Professional Design */
:root {
--primary-green: #2ecc71;
--dark-green: #27ae60;
--light-green: #d4edda;
--soft-white: #f8f9fa;
--pure-white: #ffffff;
--light-gray: #e9ecef;
--medium-gray: #ced4da;
--dark-gray: #495057;
--charcoal: #343a40;
--black: #212529;
--shadow: 0 2px 4px rgba(0,0,0,0.1);
--warning-color: #ffc107;
--danger-color: #dc3545;
}
body {
background-color: #f0f2f5;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
#page-wrapper {
min-height: 100vh;
padding: 15px;
}
/* Main Container */
.form-container {
max-width: 1400px;
margin: 0 auto;
}
/* Header Styles */
.page-header {
background: var(--pure-white);
padding: 15px 25px;
border-radius: 8px;
margin: 0 0 20px 0;
box-shadow: var(--shadow);
border-left: 4px solid var(--primary-green);
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 15px;
}
.page-header h4 {
margin: 0;
font-size: 20px;
font-weight: 600;
color: var(--black);
display: flex;
align-items: center;
gap: 10px;
}
.page-header h4 i {
color: var(--primary-green);
font-size: 24px;
}
/* Action Buttons */
.action-buttons {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.btn-custom {
padding: 8px 16px;
border-radius: 6px;
font-weight: 500;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.3px;
transition: all 0.2s ease;
border: none;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
text-decoration: none;
}
.btn-custom i {
font-size: 14px;
}
.btn-custom-primary {
background: var(--pure-white);
color: var(--black);
border: 1px solid var(--light-gray);
}
.btn-custom-primary:hover {
background: var(--light-gray);
text-decoration: none;
color: var(--black);
}
.btn-custom-success {
background: var(--primary-green);
color: var(--pure-white);
}
.btn-custom-success:hover {
background: var(--dark-green);
text-decoration: none;
color: var(--pure-white);
}
/* Alert Messages */
.alert-custom {
padding: 12px 18px;
border-radius: 6px;
margin-bottom: 20px;
border: none;
display: flex;
align-items: center;
gap: 12px;
font-size: 14px;
box-shadow: var(--shadow);
}
.alert-custom i {
font-size: 18px;
}
.alert-custom-success {
background: var(--light-green);
color: var(--dark-green);
border-left: 4px solid var(--primary-green);
}
.alert-custom-danger {
background: #f8d7da;
color: #721c24;
border-left: 4px solid var(--danger-color);
}
/* Filter Section - One Line */
.filter-section {
background: var(--pure-white);
border-radius: 8px;
padding: 15px 20px;
margin-bottom: 20px;
box-shadow: var(--shadow);
border: 1px solid var(--light-gray);
overflow-x: auto;
}
.filter-form {
display: flex;
align-items: center;
gap: 15px;
min-width: min-content;
}
.filter-form .form-control {
height: 38px;
border: 1px solid var(--light-gray);
border-radius: 6px;
padding: 0 10px;
font-size: 13px;
background: var(--pure-white);
}
.filter-form .form-control:focus {
border-color: var(--primary-green);
outline: none;
box-shadow: 0 0 0 2px rgba(46, 204, 113, 0.1);
}
.filter-form .btn-primary {
height: 38px;
padding: 0 20px;
background: var(--primary-green);
border: none;
border-radius: 6px;
color: white;
font-weight: 500;
font-size: 13px;
display: flex;
align-items: center;
gap: 5px;
white-space: nowrap;
cursor: pointer;
}
.filter-form .btn-primary:hover {
background: var(--dark-green);
}
.filter-label {
display: flex;
align-items: center;
gap: 5px;
color: var(--dark-gray);
font-weight: 500;
font-size: 13px;
white-space: nowrap;
}
.filter-label i {
color: var(--primary-green);
font-size: 14px;
}
/* Table Styles - Beautiful Design */
.table-container {
background: var(--pure-white);
border-radius: 10px;
padding: 15px;
box-shadow: var(--shadow);
margin-bottom: 20px;
overflow-x: auto;
}
.table {
width: 100%;
border-collapse: collapse;
margin-bottom: 0;
}
.table thead tr {
background: linear-gradient(135deg, var(--charcoal) 0%, var(--black) 100%);
}
.table thead th {
padding: 12px 10px;
color: var(--pure-white);
font-weight: 500;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.3px;
border: none;
white-space: nowrap;
}
.table thead th:first-child {
border-radius: 6px 0 0 6px;
}
.table thead th:last-child {
border-radius: 0 6px 6px 0;
}
.table tbody tr {
border-bottom: 1px solid var(--light-gray);
transition: background-color 0.2s ease;
}
.table tbody tr:hover {
background-color: rgba(46, 204, 113, 0.05);
}
.table tbody td {
padding: 12px 10px;
color: var(--dark-gray);
font-size: 13px;
vertical-align: middle;
}
.table tbody td h5 {
margin: 0;
font-size: 13px;
font-weight: 500;
color: var(--black);
}
/* Action Dropdown - Click-based */
.action-dropdown {
position: relative;
display: inline-block;
}
.action-toggle {
background: var(--light-gray);
border: none;
padding: 8px 12px;
border-radius: 6px;
color: var(--dark-gray);
cursor: pointer;
display: flex;
align-items: center;
gap: 5px;
font-size: 12px;
transition: all 0.2s ease;
}
.action-toggle:hover {
background: var(--primary-green);
color: white;
}
.action-menu {
position: absolute;
right: 0;
top: 100%;
background: var(--pure-white);
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
min-width: 200px;
z-index: 1000;
display: none;
margin-top: 5px;
border: 1px solid var(--light-gray);
}
.action-menu.show {
display: block;
}
.action-menu-item {
padding: 12px 15px;
display: flex;
align-items: center;
gap: 12px;
color: var(--dark-gray);
text-decoration: none;
font-size: 13px;
transition: all 0.2s ease;
border-bottom: 1px solid var(--light-gray);
cursor: pointer;
white-space: nowrap;
}
.action-menu-item:last-child {
border-bottom: none;
}
.action-menu-item:hover {
background: rgba(46, 204, 113, 0.1);
color: var(--primary-green);
text-decoration: none;
}
.action-menu-item i {
width: 18px;
font-size: 14px;
text-align: center;
}
/* Modal Styles */
.modal-content-custom {
border-radius: 12px;
border: none;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
overflow: hidden;
}
.modal-header-custom {
background: linear-gradient(135deg, var(--charcoal) 0%, var(--black) 100%);
color: var(--pure-white);
padding: 15px 20px;
border-bottom: none;
}
.modal-header-custom h5 {
margin: 0;
font-weight: 500;
display: flex;
align-items: center;
gap: 10px;
}
.modal-header-custom h5 i {
color: var(--primary-green);
font-size: 20px;
}
.modal-header-custom .close {
color: var(--pure-white);
opacity: 0.8;
}
.modal-header-custom .close:hover {
opacity: 1;
}
.modal-body-custom {
padding: 20px;
background: var(--soft-white);
}
.modal-footer-custom {
padding: 15px 20px;
background: var(--pure-white);
border-top: 1px solid var(--light-gray);
}
/* Modal Buttons */
.modal-btn {
padding: 8px 20px;
border-radius: 6px;
font-weight: 500;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.3px;
transition: all 0.2s ease;
border: none;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
}
.modal-btn-primary {
background: var(--primary-green);
color: var(--pure-white);
}
.modal-btn-primary:hover {
background: var(--dark-green);
}
.modal-btn-default {
background: var(--light-gray);
color: var(--dark-gray);
}
.modal-btn-default:hover {
background: var(--medium-gray);
}
.modal-btn-danger {
background: var(--danger-color);
color: white;
}
.modal-btn-danger:hover {
background: #c82333;
}
/* Pagination */
.pagination-container {
text-align: center;
margin-top: 20px;
}
.pagination {
display: inline-flex;
gap: 5px;
list-style: none;
padding: 0;
margin: 0;
flex-wrap: wrap;
justify-content: center;
}
.pagination li {
display: inline;
}
.pagination li a {
display: inline-block;
padding: 8px 12px;
background: var(--pure-white);
border: 1px solid var(--light-gray);
border-radius: 6px;
color: var(--dark-gray);
font-size: 13px;
text-decoration: none;
transition: all 0.2s ease;
}
.pagination li.active a {
background: var(--primary-green);
color: white;
border-color: var(--primary-green);
}
.pagination li a:hover {
background: var(--light-gray);
text-decoration: none;
}
/* Empty State */
.empty-state {
text-align: center;
padding: 50px;
color: var(--dark-gray);
}
.empty-state i {
font-size: 48px;
color: var(--light-gray);
margin-bottom: 15px;
display: block;
}
/* Responsive */
@media (max-width: 992px) {
.filter-section {
overflow-x: auto;
}
.filter-form {
min-width: 700px;
}
}
@media (max-width: 768px) {
.page-header {
flex-direction: column;
text-align: center;
}
.pagination li a {
padding: 6px 10px;
font-size: 11px;
}
}
</style>
<div id="page-wrapper">
<div class="form-container">
<!-- Header Section -->
<div class="page-header">
<h4>
<i class="fas fa-shield-alt"></i>
Manage Access Levels
</h4>
<div class="action-buttons">
<a href="AddAccessLevel.php?operation=create" class="btn-custom btn-custom-success">
<i class="fas fa-plus-circle"></i>
Add Access Level
</a>
<a href="AccessLevelListing.php" class="btn-custom btn-custom-primary">
<i class="fas fa-sync-alt"></i>
Refresh
</a>
</div>
</div>
<!-- Alert Messages -->
<?php include('include/flash_messages.php'); ?>
<!-- Filter Section -->
<div class="filter-section">
<form class="filter-form" action="" method="GET">
<div class="filter-label">
<i class="fas fa-search"></i>
<span>Search Access Level</span>
</div>
<input type="text" class="form-control" id="input_search" placeholder="Type access level name"
name="search_string" value="<?php echo htmlspecialchars($search_string ?? ''); ?>" style="width: 200px;">
<div class="filter-label" style="margin-left: 5px;">
<i class="fas fa-sort"></i>
<span>Order By</span>
</div>
<select name="filter_col" class="form-control" style="width: 120px;">
<?php
foreach ($filter_options as $option) {
$selected = ($filter_col === $option) ? "selected" : "";
echo '<option value="' . htmlspecialchars($option) . '" ' . $selected . '>' . htmlspecialchars($option) . '</option>';
}
?>
</select>
<select name="order_by" class="form-control" style="width: 100px;">
<option value="asc" <?php echo ($order_by == 'asc') ? "selected" : ""; ?>>Ascending</option>
<option value="desc" <?php echo ($order_by == 'desc') ? "selected" : ""; ?>>Descending</option>
</select>
<button type="submit" class="btn-primary">
<i class="fas fa-filter"></i> Go
</button>
</form>
</div>
<!-- Table Section -->
<div class="table-container">
<table class="table">
<thead>
<tr>
<th>Access Level Name</th>
<th style="width: 100px;">Actions</th>
</tr>
</thead>
<tbody>
<?php if (!empty($result)): ?>
<?php foreach ($result as $row): ?>
<tr>
<td>
<h5><?php echo htmlspecialchars($row['AccessName'] ?? ''); ?></h5>
</td>
<td>
<div class="action-dropdown" id="dropdown-<?php echo $row['accesslevelmanagementID']; ?>">
<button class="action-toggle" onclick="toggleDropdown('<?php echo $row['accesslevelmanagementID']; ?>')">
<i class="fas fa-cog"></i> Actions <i class="fas fa-chevron-down"></i>
</button>
<div class="action-menu" id="menu-<?php echo $row['accesslevelmanagementID']; ?>">
<a href="UpdateAccessLevel.php?Access_id=<?php echo $row['accesslevelmanagementID']; ?>&operation=edit" class="action-menu-item">
<i class="fas fa-edit" style="color: var(--primary-green);"></i>
Update Record
</a>
<a href="#" class="action-menu-item" onclick="showDeleteModal(<?php echo $row['accesslevelmanagementID']; ?>, '<?php echo addslashes(htmlspecialchars($row['AccessName'])); ?>'); return false;">
<i class="fas fa-trash-alt" style="color: var(--danger-color);"></i>
Delete Record
</a>
</div>
</div>
</td>
</tr>
<?php endforeach; ?>
<?php else: ?>
<tr>
<td colspan="2" class="empty-state">
<i class="fas fa-shield-alt"></i>
<h5>No Access Levels found</h5>
<p style="margin-top: 10px;">Click the "Add Access Level" button to create one.</p>
</td>
</tr>
<?php endif; ?>
</tbody>
</table>
</div>
<!-- Pagination -->
<?php if (isset($total_pages) && $total_pages > 1): ?>
<div class="pagination-container">
<?php
// Build query string
$query_params = $_GET;
unset($query_params['page']);
$query_string = !empty($query_params) ? '&' . http_build_query($query_params) : '';
?>
<ul class="pagination">
<?php for ($i = 1; $i <= $total_pages; $i++): ?>
<li class="<?php echo ($page == $i) ? 'active' : ''; ?>">
<a href="?page=<?php echo $i . $query_string; ?>"><?php echo $i; ?></a>
</li>
<?php endfor; ?>
</ul>
</div>
<?php endif; ?>
</div>
</div>
<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content modal-content-custom">
<div class="modal-header modal-header-custom">
<h5 class="modal-title">
<i class="fas fa-exclamation-triangle"></i>
Confirm Deletion
</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form action="DeleteAccessLevel.php" method="POST" id="deleteForm">
<div class="modal-body modal-body-custom">
<input type="hidden" name="del_id" id="delete_id">
<div style="text-align: center; padding: 20px;">
<i class="fas fa-trash-alt" style="font-size: 48px; color: var(--danger-color); margin-bottom: 15px;"></i>
<p style="font-size: 16px; color: var(--dark-gray);">
Are you sure you want to delete the access level <strong id="delete_access_name"></strong>?
</p>
<p style="font-size: 13px; color: #999;">This action cannot be undone.</p>
</div>
</div>
<div class="modal-footer modal-footer-custom">
<button type="button" class="modal-btn modal-btn-default" data-dismiss="modal">
<i class="fas fa-times"></i> Cancel
</button>
<button type="submit" class="modal-btn modal-btn-danger">
<i class="fas fa-trash-alt"></i> Delete
</button>
</div>
</form>
</div>
</div>
</div>
<script>
// Close all dropdowns function
function closeAllDropdowns() {
var dropdowns = document.querySelectorAll('.action-menu');
dropdowns.forEach(function(menu) {
menu.classList.remove('show');
});
}
// Toggle dropdown on click
function toggleDropdown(id) {
var menu = document.getElementById('menu-' + id);
var isShow = menu.classList.contains('show');
// Close all dropdowns first
closeAllDropdowns();
// If current dropdown wasn't shown, show it
if (!isShow) {
menu.classList.add('show');
}
}
// Show delete modal
function showDeleteModal(id, name) {
document.getElementById('delete_id').value = id;
document.getElementById('delete_access_name').innerHTML = name;
$('#deleteModal').modal('show');
}
// Close dropdown when clicking outside
document.addEventListener('click', function(event) {
// Check if click is outside any dropdown
var isDropdownButton = event.target.closest('.action-toggle');
var isDropdownMenu = event.target.closest('.action-menu');
if (!isDropdownButton && !isDropdownMenu) {
closeAllDropdowns();
}
});
// Prevent closing when clicking inside menu
document.querySelectorAll('.action-menu').forEach(function(menu) {
menu.addEventListener('click', function(event) {
event.stopPropagation();
});
});
// Initialize when document is ready
$(document).ready(function() {
// Add escape key handler to close dropdowns
$(document).keydown(function(e) {
if (e.key === 'Escape') {
closeAllDropdowns();
}
});
});
</script>
<?php
include_once 'include/footer.php';
?>