From f1514e7613edc01a8ae96112de94a59f422c3135 Mon Sep 17 00:00:00 2001
From: armiejean <armie.miranda@qlicqer.com>
Date: Tue, 15 Apr 2025 17:09:39 +0800
Subject: [PATCH] user-management page for frontend fix

---
 resources/views/layouts/app.blade.php         |   2 +-
 .../views/pages/user-management.blade.php     | 740 +++++++++++++++++-
 2 files changed, 736 insertions(+), 6 deletions(-)

diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index a3e3ff3..9a138e1 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -5,7 +5,7 @@
     <!-- Required meta tags -->
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
+
     <title>CMS-Laravel
     </title>
     <link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}">
diff --git a/resources/views/pages/user-management.blade.php b/resources/views/pages/user-management.blade.php
index f2b2e6f..df693c7 100644
--- a/resources/views/pages/user-management.blade.php
+++ b/resources/views/pages/user-management.blade.php
@@ -3,13 +3,743 @@
 @section('page_title', 'User Management')
 
 @section('content')
-    <div class="card" style="min-height: 500px;">
-        <div class="card-header">
-            <i class="fa-solid fa-users" style="color:gray;"> User Management</i>
+    <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">
+                    <i class="fa-solid fa-plus me-1"></i> Add User
+                </a>
+            </div>
         </div>
         <div class="card-body">
-            <p>This is the User Management page content.
-            </p>
+            <!-- Search and Filters -->
+            <div class="row mb-3 align-items-center">
+                <div class="col-12 col-md-6 mb-2 mb-md-0">
+                    <div class="input-group input-group-sm">
+                        <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">
+                    </div>
+                </div>
+                <div class="col-12 col-md-6 d-flex justify-content-end">
+                    <button class="btn btn-outline-secondary btn-sm" id="clearFilters">
+                        <i class="fa-solid fa-filter-circle-xmark me-1"></i> Clear Filters
+                    </button>
+                </div>
+            </div>
+
+            <!-- User Table -->
+            <div class="table-container">
+                <table class="table table-hover align-middle">
+                    <thead class="table-light">
+                        <tr>
+                            <th class="text-center" style="width: 40px;">
+                                <input type="checkbox" id="selectAll">
+                            </th>
+                            <th class="sortable" data-column="1">Username <i class="fa-solid fa-sort"></i></th>
+                            <th class="sortable" data-column="2">First Name <i class="fa-solid fa-sort"></i></th>
+                            <th class="sortable" data-column="3">Last Name <i class="fa-solid fa-sort"></i></th>
+                            <th class="sortable" data-column="4">User Role <i class="fa-solid fa-sort"></i></th>
+                            <th class="sortable" data-column="5">Email <i class="fa-solid fa-sort"></i></th>
+                            <th class="sortable" data-column="6">Status <i class="fa-solid fa-sort"></i></th>
+                            <th class="text-center" style="width: 120px;">Action</th>
+                        </tr>
+                    </thead>
+                    <tbody id="userTableBody">
+                        <!-- Rows will be populated dynamically via JavaScript -->
+                    </tbody>
+                </table>
+            </div>
+
+            <!-- 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 -->
+                    </ul>
+                </nav>
+            </div>
         </div>
     </div>
+
+    <!-- Edit User Modal -->
+    <div class="modal fade" id="editUserModal" tabindex="-1" aria-labelledby="editUserModalLabel" aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered">
+            <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>
+                </div>
+                <div class="modal-body">
+                    <form id="editUserForm">
+                        <div class="mb-3">
+                            <label for="editUsername" class="form-label">Username</label>
+                            <input type="text" class="form-control" id="editUsername" readonly>
+                        </div>
+                        <div class="mb-3">
+                            <label for="editFirstName" class="form-label">First Name</label>
+                            <input type="text" class="form-control" id="editFirstName">
+                        </div>
+                        <div class="mb-3">
+                            <label for="editLastName" class="form-label">Last Name</label>
+                            <input type="text" class="form-control" id="editLastName">
+                        </div>
+                        <div class="mb-3">
+                            <label for="editUserRole" class="form-label">User Role</label>
+                            <input type="text" class="form-control" id="editUserRole">
+                        </div>
+                        <div class="mb-3">
+                            <label for="editEmail" class="form-label">Email</label>
+                            <input type="email" class="form-control" id="editEmail">
+                        </div>
+                        <div class="mb-3">
+                            <label for="editStatus" class="form-label">Status</label>
+                            <select class="form-select" id="editStatus">
+                                <option value="Active">Active</option>
+                                <option value="Inactive">Inactive</option>
+                            </select>
+                        </div>
+                    </form>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
+                    <button type="button" class="btn btn-primary" id="updateUserBtn">Update</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Custom CSS for Styling -->
+    <style>
+        /* Font Styling */
+        .card,
+        .table,
+        .btn,
+        .form-control,
+        .input-group-text,
+        .modal-content {
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+            font-weight: 400;
+            line-height: 1.5;
+        }
+
+        .card-header h5,
+        .modal-title {
+            font-weight: 600;
+        }
+
+        .table th {
+            font-weight: 500;
+        }
+
+        .form-label {
+            font-weight: 500;
+            font-size: 0.9rem;
+        }
+
+        .card {
+            border-radius: 10px;
+        }
+
+        .card-header {
+            background-color: transparent;
+        }
+
+        .btn-primary {
+            background-color: #007bff;
+            border-color: #007bff;
+        }
+
+        .btn-primary:hover {
+            background-color: #0056b3;
+            border-color: #0056b3;
+        }
+
+        .sortable {
+            cursor: pointer;
+        }
+
+        .sortable:hover {
+            background-color: #f1f3f5;
+        }
+
+        .table {
+            font-size: 0.85rem;
+            width: 100%;
+            table-layout: auto;
+        }
+
+        .table th,
+        .table td {
+            padding: 0.5rem;
+            vertical-align: middle;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        .table th:first-child,
+        .table td:first-child {
+            width: 40px;
+            text-align: center;
+        }
+
+        .table th:last-child,
+        .table td:last-child {
+            width: 120px;
+            text-align: center;
+        }
+
+        .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;
+        }
+
+        .status-btn {
+            font-size: 0.75rem;
+            padding: 0.2rem 0.5rem;
+        }
+
+        .dropdown-menu-sm {
+            min-width: 120px;
+        }
+
+        .dropdown-item {
+            font-size: 0.85rem;
+        }
+
+        /* Table Container to Prevent Scrollbar */
+        .table-container {
+            overflow-x: hidden;
+        }
+
+        /* Modal Styling */
+        .modal-content {
+            border-radius: 8px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+        }
+
+        .modal-header {
+            border-bottom: 1px solid #e9ecef;
+        }
+
+        .modal-footer {
+            border-top: 1px solid #e9ecef;
+        }
+
+        .form-control,
+        .form-select {
+            font-size: 0.9rem;
+            border-radius: 5px;
+        }
+
+        /* Pagination Styling */
+        .pagination-sm .page-link {
+            padding: 0.25rem 0.5rem;
+            font-size: 0.85rem;
+        }
+
+        /* Responsive adjustments */
+        @media (max-width: 576px) {
+            .table {
+                font-size: 0.75rem;
+            }
+
+            .table th,
+            .table td {
+                padding: 0.3rem;
+            }
+
+            .btn-sm {
+                padding: 0.2rem 0.4rem;
+                font-size: 0.75rem;
+            }
+
+            .input-group-sm>.form-control {
+                font-size: 0.75rem;
+            }
+
+            .status-btn {
+                font-size: 0.65rem;
+            }
+
+            .dropdown-item {
+                font-size: 0.75rem;
+            }
+
+            .pagination-sm .page-link {
+                padding: 0.2rem 0.4rem;
+                font-size: 0.75rem;
+            }
+
+            .table td:nth-child(6) {
+                /* Email */
+                max-width: 150px;
+            }
+
+            .form-control,
+            .form-select {
+                font-size: 0.85rem;
+            }
+        }
+    </style>
+
+    <!-- JavaScript for Interactivity -->
+    <script>
+        // Sample data (replace with dynamic data from backend in real implementation)
+        const allRows = [{
+                id: 1,
+                username: 'superadmin',
+                firstName: 'Maryse',
+                lastName: 'Howe',
+                role: 'Admin',
+                email: 'maryse.howe@qqq.com',
+                status: 'Active'
+            },
+            {
+                id: 2,
+                username: 'superadmin1',
+                firstName: 'Joseph',
+                lastName: 'Sazon',
+                role: 'Admin',
+                email: 'mis.specialist@unioil.com',
+                status: 'Active'
+            },
+            {
+                id: 3,
+                username: 'graxia',
+                firstName: 'Graxia',
+                lastName: 'Montino',
+                role: 'Admin',
+                email: 'business.analyst@unioil.com',
+                status: 'Active'
+            },
+            {
+                id: 4,
+                username: 'cinerosimo',
+                firstName: 'Cine',
+                lastName: 'Rosimo',
+                role: 'Admin',
+                email: 'frosimo1@yopmail.com',
+                status: 'Active'
+            },
+            {
+                id: 5,
+                username: 'graxia',
+                firstName: 'Graxia',
+                lastName: 'Montino',
+                role: 'Admin',
+                email: 'business.analyst@unioil.com',
+                status: 'Active'
+            },
+            {
+                id: 6,
+                username: 'graxia',
+                firstName: 'Graxia',
+                lastName: 'Montino',
+                role: 'Admin',
+                email: 'business.analyst@unioil.com',
+                status: 'Active'
+            },
+            {
+                id: 7,
+                username: 'graxia',
+                firstName: 'Graxia',
+                lastName: 'Montino',
+                role: 'Admin',
+                email: 'business.analyst@unioil.com',
+                status: 'Active'
+            }
+        ];
+
+        // Pagination settings
+        const rowsPerPage = 5;
+        let currentPage = 1;
+        let filteredRows = [...allRows];
+        let originalRows = [...allRows].map(row => ({
+            ...row
+        })); // Deep copy for original data
+
+        // Function to render table rows for the current page
+        function renderTable() {
+            const tableBody = document.getElementById('userTableBody');
+            tableBody.innerHTML = '';
+
+            const start = (currentPage - 1) * rowsPerPage;
+            const end = start + rowsPerPage;
+            const paginatedRows = filteredRows.slice(start, end);
+
+            paginatedRows.forEach(row => {
+                const tr = document.createElement('tr');
+                tr.setAttribute('data-id', row.id);
+                tr.innerHTML = `
+                    <td class="text-center"><input type="checkbox" class="rowCheckbox"></td>
+                    <td>${row.username}</td>
+                    <td>${row.firstName}</td>
+                    <td>${row.lastName}</td>
+                    <td>${row.role}</td>
+                    <td>${row.email}</td>
+                    <td>
+                        <div class="dropdown">
+                            <button class="btn btn-sm btn-outline-secondary status-btn" type="button" id="statusDropdown${row.id}" data-bs-toggle="dropdown" aria-expanded="false">
+                                <span class="status-text">${row.status}</span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu-end dropdown-menu-sm" aria-labelledby="statusDropdown${row.id}">
+                                <li>
+                                    <a class="dropdown-item d-flex align-items-center gap-2 status-option" href="#" data-status="Active">
+                                        <i class="fa-solid fa-check text-success" style="font-size: 14px;"></i>
+                                        <span>Active</span>
+                                    </a>
+                                </li>
+                                <li>
+                                    <a class="dropdown-item d-flex align-items-center gap-2 status-option" href="#" data-status="Inactive">
+                                        <i class="fa-solid fa-xmark text-danger" style="font-size: 14px;"></i>
+                                        <span>Inactive</span>
+                                    </a>
+                                </li>
+                            </ul>
+                        </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}">
+                            <i class="fa-solid fa-pen-to-square"></i>
+                        </a>
+                        <a href="#" class="btn btn-sm btn-outline-secondary me-1" title="View">
+                            <i class="fa-solid fa-eye"></i>
+                        </a>
+                        <button class="btn btn-sm btn-outline-danger" onclick="confirmDelete(${row.id})" title="Delete">
+                            <i class="fa-solid fa-trash-can"></i>
+                        </button>
+                    </td>
+                `;
+                tableBody.appendChild(tr);
+            });
+
+            // Reattach event listeners
+            attachStatusListeners();
+            attachCheckboxListeners();
+            attachEditListeners();
+            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>`;
+            prevLi.addEventListener('click', (e) => {
+                e.preventDefault();
+                if (currentPage > 1) {
+                    currentPage--;
+                    renderTable();
+                    renderPagination();
+                }
+            });
+            pagination.appendChild(prevLi);
+
+            // Page numbers
+            for (let i = 1; i <= pageCount; i++) {
+                const li = document.createElement('li');
+                li.className = `page-item ${currentPage === i ? 'active' : ''}`;
+                li.innerHTML = `<a class="page-link" href="#">${i}</a>`;
+                li.addEventListener('click', (e) => {
+                    e.preventDefault();
+                    currentPage = i;
+                    renderTable();
+                    renderPagination();
+                });
+                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>`;
+            nextLi.addEventListener('click', (e) => {
+                e.preventDefault();
+                if (currentPage < pageCount) {
+                    currentPage++;
+                    renderTable();
+                    renderPagination();
+                }
+            });
+            pagination.appendChild(nextLi);
+        }
+
+        // Search Functionality
+        document.getElementById('searchInput').addEventListener('input', function() {
+            const searchTerm = this.value.toLowerCase();
+            filteredRows = allRows.filter(row => {
+                return Object.values(row).some(value =>
+                    value.toString().toLowerCase().includes(searchTerm)
+                );
+            });
+            currentPage = 1; // Reset to first page
+            renderTable();
+            renderPagination();
+        });
+
+        // Sorting Functionality
+        let sortDirection = {};
+        document.querySelectorAll('.sortable').forEach(header => {
+            header.addEventListener('click', function() {
+                const column = parseInt(this.getAttribute('data-column'));
+                const columnMap = {
+                    1: 'username',
+                    2: 'firstName',
+                    3: 'lastName',
+                    4: 'role',
+                    5: 'email',
+                    6: 'status'
+                };
+                const key = columnMap[column];
+
+                // Toggle sort direction
+                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');
+                });
+                const icon = this.querySelector('i');
+                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();
+                    if (sortDirection[column] === 'asc') {
+                        return aValue.localeCompare(bValue);
+                    } else {
+                        return bValue.localeCompare(aValue);
+                    }
+                });
+
+                currentPage = 1; // Reset to first page
+                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 => {
+                checkbox.checked = this.checked;
+            });
+            updateDeleteButtonState();
+        });
+
+        // Checkbox Listeners for Batch Delete
+        function attachCheckboxListeners() {
+            const checkboxes = document.querySelectorAll('.rowCheckbox');
+            checkboxes.forEach(checkbox => {
+                checkbox.addEventListener('change', updateDeleteButtonState);
+            });
+        }
+
+        // Update Delete Button State
+        function updateDeleteButtonState() {
+            const checkboxes = document.querySelectorAll('.rowCheckbox');
+            const checkedCount = Array.from(checkboxes).filter(cb => cb.checked).length;
+            const deleteButton = document.getElementById('deleteSelected');
+            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');
+                const selectedIds = Array.from(checkboxes)
+                    .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;
+                }
+
+                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 => {
+                option.removeEventListener('click', handleStatusChange);
+                option.addEventListener('click', handleStatusChange);
+            });
+        }
+
+        function handleStatusChange(e) {
+            e.preventDefault();
+            const newStatus = this.getAttribute('data-status');
+            const row = this.closest('tr');
+            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;
+            }
+            const filteredRowData = filteredRows.find(r => r.id == userId);
+            if (filteredRowData) {
+                filteredRowData.status = newStatus;
+            }
+            const originalRowData = originalRows.find(r => r.id == userId);
+            if (originalRowData) {
+                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 => {
+                button.addEventListener('click', function(e) {
+                    e.preventDefault();
+                    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;
+                    document.getElementById('editUserRole').value = user.role;
+                    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)
+        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;
+                }
+
+                renderTable();
+                renderPagination();
+            }
+        }
+
+        // Initial render
+        renderTable();
+        renderPagination();
+    </script>
 @endsection