fixing table component

resources/views/components/layouts/app.blade.php

@@ -26,3 +26,5 @@
     @stack('scripts')
 </body>
 </html>
+
+

resources/views/components/table-component.blade.php

@@ -11,7 +11,7 @@
     'showViewModal' => false
 ])
 
-
+<div class="card">
     <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">{{ $pageTitle }}</h5>
@@ -81,7 +81,7 @@
             </nav>
         </div>
     </div>
-
+</div>
 
 <!-- Edit Modal -->
 @if ($showEditModal)
@@ -142,6 +142,9 @@
                     </div>
                 </div>
                 <div class="modal-footer">
+                    @if ($pageTitle === 'Locked Account')
+                        <button type="button" class="btn btn-success" id="activateAccountBtn">Activate Account</button>
+                    @endif
                     <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                 </div>
             </div>
@@ -149,9 +152,8 @@
     </div>
 @endif
 
-<!-- CSS (same as your original, included for completeness) -->
+<!-- CSS (unchanged from your original) -->
 <style>
-    /* Your original CSS styles here */
     .card,
     .table,
     .btn,
@@ -162,65 +164,43 @@
         font-weight: 400;
         line-height: 1.5;
     }
-     /* Font Styling */
-     .card,
-        .table,
-        .btn,
-        .form-control,
-        .input-group-text,
-        .modal-content {
-            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: 500;
     }
-
     .table thead th {
         font-weight: 500;
         font-size: 0.8rem;
     }
-
     .form-label {
         font-weight: 500;
         font-size: 0.9rem;
     }
-
     .card {
         border-radius: 10px;
     }
-
     .card-header {
         background-color: transparent;
     }
-
     .btn-primary {
         background-color: #E74610;
         border-color: #E74610;
     }
-
     .btn-primary:hover {
         background-color: #E74610;
         border-color: #E74610;
     }
-
     .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;
@@ -229,76 +209,61 @@
         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),
     .table th:nth-child(5) {
         width: 100px;
     }
-
     .table td:nth-child(6),
     .table th:nth-child(6) {
         max-width: 200px;
     }
-
     .table td:nth-child(7),
     .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 thead .sortable i {
         font-size: 0.7rem;
         vertical-align: middle;
     }
-
     .table-container {
         overflow-x: hidden;
     }
-
     .modal-content {
         border-radius: 8px;
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
     }
-
     .modal-header {
         border-bottom: 1px solid #e9ecef;
         position: relative;
     }
-
     .modal-footer {
         border-top: 1px solid #e9ecef;
     }
-
     .form-control,
     .form-select {
         font-size: 0.9rem;
         border-radius: 5px;
     }
-
     .modal-close-btn {
         background: none;
         border: none;
@@ -309,120 +274,96 @@
         top: 15px;
         cursor: pointer;
     }
-
     .modal-close-btn:hover {
         color: #343a40;
     }
-
+    .view-details p {
-        .view-user-details p {
         margin-bottom: 0.75rem;
         font-size: 0.9rem;
     }
-
+    .view-details strong {
-        .view-user-details strong {
         display: inline-block;
         width: 120px;
         font-weight: 500;
         color: #343a40;
     }
-
+    .view-details span {
-        .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;
     }
-
     @media (max-width: 576px) {
         .table {
             font-size: 0.75rem;
         }
-
         .table thead th {
             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;
         }
-
         .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) {
             max-width: 150px;
         }
-
         .form-control,
         .form-select {
             font-size: 0.85rem;
         }
-
         .modal-close-btn {
             font-size: 0.9rem;
         }
-
+        .view-details p {
-            .view-user-details p {
             font-size: 0.85rem;
         }
-
+        .view-details strong {
-            .view-user-details strong {
             width: 100px;
         }
     }
@@ -437,7 +378,8 @@
         showCheckboxes: {{ json_encode($showCheckboxes) }},
         showBatchDelete: {{ json_encode($showBatchDelete) }},
         showEditModal: {{ json_encode($showEditModal) }},
-        showViewModal: {{ json_encode($showViewModal) }}
+        showViewModal: {{ json_encode($showViewModal) }},
+        pageTitle: @json($pageTitle)
     };
 
     const rowsPerPage = 5;
@@ -445,9 +387,11 @@
     let filteredRows = [...tableConfig.data];
     let originalRows = [...tableConfig.data].map(row => ({ ...row }));
     let sortDirection = {};
+    let currentRowId = null; // Track the row being viewed
 
     function renderTable() {
         const tableBody = document.getElementById('tableBody');
+        if (!tableBody) return;
         tableBody.innerHTML = '';
 
         const start = (currentPage - 1) * rowsPerPage;
@@ -488,7 +432,7 @@
                             </div>
                         </td>`;
                 } else {
-                    rowHtml += `<td>${row[col.key]}</td>`;
+                    rowHtml += `<td>${row[col.key] || ''}</td>`;
                 }
             });
 
@@ -525,6 +469,7 @@
 
     function renderPagination() {
         const pagination = document.getElementById('pagination');
+        if (!pagination) return;
         pagination.innerHTML = '';
 
         const pageCount = Math.ceil(filteredRows.length / rowsPerPage);
@@ -571,17 +516,20 @@
 
     function attachEventListeners() {
         // Search
-        document.getElementById('searchInput').addEventListener('input', function() {
+        const searchInput = document.getElementById('searchInput');
+        if (searchInput) {
+            searchInput.addEventListener('input', function() {
                 const searchTerm = this.value.toLowerCase();
                 filteredRows = tableConfig.data.filter(row => {
                     return Object.values(row).some(value =>
-                    value.toString().toLowerCase().includes(searchTerm)
+                        value && value.toString().toLowerCase().includes(searchTerm)
                     );
                 });
                 currentPage = 1;
                 renderTable();
                 renderPagination();
             });
+        }
 
         // Sort
         document.querySelectorAll('.sortable').forEach(header => {
@@ -596,12 +544,14 @@
                     icon.classList.add('fa-sort');
                 });
                 const icon = this.querySelector('i');
+                if (icon) {
                     icon.classList.remove('fa-sort');
                     icon.classList.add(sortDirection[columnIndex] === 'asc' ? 'fa-sort-up' : 'fa-sort-down');
+                }
 
                 filteredRows.sort((a, b) => {
-                    const aValue = a[key].toString().toLowerCase();
+                    const aValue = (a[key] || '').toString().toLowerCase();
-                    const bValue = b[key].toString().toLowerCase();
+                    const bValue = (b[key] || '').toString().toLowerCase();
                     return sortDirection[columnIndex] === 'asc' ? aValue.localeCompare(bValue) : bValue.localeCompare(aValue);
                 });
 
@@ -612,8 +562,10 @@
         });
 
         // Clear Filters
-        document.getElementById('clearFilters').addEventListener('click', function() {
+        const clearFilters = document.getElementById('clearFilters');
-            document.getElementById('searchInput').value = '';
+        if (clearFilters) {
+            clearFilters.addEventListener('click', function() {
+                if (searchInput) searchInput.value = '';
                 document.querySelectorAll('.sortable i').forEach(icon => {
                     icon.classList.remove('fa-sort-up', 'fa-sort-down');
                     icon.classList.add('fa-sort');
@@ -624,6 +576,7 @@
                 renderTable();
                 renderPagination();
             });
+        }
 
         // Checkboxes
         if (tableConfig.showCheckboxes) {
@@ -665,7 +618,7 @@
 
                         renderTable();
                         renderPagination();
-                        document.getElementById('selectAll').checked = false;
+                        if (selectAll) selectAll.checked = false;
                     }
                 });
             }
@@ -699,19 +652,23 @@
                     const userId = this.getAttribute('data-id');
                     const user = filteredRows.find(row => row.id == userId);
 
+                    if (user) {
                         tableConfig.columns.forEach(col => {
                             const input = document.getElementById(`edit${col.key.charAt(0).toUpperCase() + col.key.slice(1)}`);
                             if (input) {
-                            input.value = user[col.key];
+                                input.value = user[col.key] || '';
                             }
                         });
 
                         const modal = new bootstrap.Modal(document.getElementById('editModal'));
                         modal.show();
+                    }
                 });
             });
 
-            document.getElementById('updateBtn')?.addEventListener('click', function() {
+            const updateBtn = document.getElementById('updateBtn');
+            if (updateBtn) {
+                updateBtn.addEventListener('click', function() {
                     const userId = document.querySelector('.edit-btn[data-id]')?.getAttribute('data-id');
                     const user = filteredRows.find(row => row.id == userId);
                     if (user) {
@@ -727,26 +684,48 @@
                     renderTable();
                 });
             }
+        }
 
         // View
         if (tableConfig.showViewModal) {
             document.querySelectorAll('.view-btn').forEach(button => {
                 button.addEventListener('click', function(e) {
                     e.preventDefault();
-                    const userId = this.getAttribute('data-id');
+                    currentRowId = this.getAttribute('data-id');
-                    const user = filteredRows.find(row => row.id == userId);
+                    const user = filteredRows.find(row => row.id == currentRowId);
 
+                    if (user) {
                         tableConfig.columns.forEach(col => {
                             const span = document.getElementById(`view${col.key.charAt(0).toUpperCase() + col.key.slice(1)}`);
                             if (span) {
-                            span.textContent = user[col.key];
+                                span.textContent = user[col.key] || '';
                             }
                         });
 
                         const modal = new bootstrap.Modal(document.getElementById('viewModal'));
                         modal.show();
+                    }
                 });
             });
+
+            // Activate Account for Locked Account page
+            if (tableConfig.pageTitle === 'Locked Account') {
+                const activateAccountBtn = document.getElementById('activateAccountBtn');
+                if (activateAccountBtn) {
+                    activateAccountBtn.addEventListener('click', function() {
+                        if (currentRowId) {
+                            const user = filteredRows.find(row => row.id == currentRowId);
+                            if (user) {
+                                user.status = 'Active';
+                            }
+                            const modal = bootstrap.Modal.getInstance(document.getElementById('viewModal'));
+                            modal.hide();
+                            renderTable();
+                            currentRowId = null;
+                        }
+                    });
+                }
+            }
         }
 
         // Delete

resources/views/pages/member management/card-member.blade.php

@@ -5,10 +5,6 @@
 @section('content')
     @php
         $members = [
-            ['id' => 1, 'cardNumber' => '1234-5678-9012-3456', 'firstName' => 'John', 'lastName' => 'Doe', 'birthday' => '1990-05-15', 'cardType' => 'Gold', 'status' => 'Active'],
-            ['id' => 2, 'cardNumber' => '9876-5432-1098-7654', 'firstName' => 'Jane', 'lastName' => 'Smith', 'birthday' => '1985-11-22', 'cardType' => 'Silver', 'status' => 'Inactive'],
-            ['id' => 3, 'cardNumber' => '4567-8901-2345-6789', 'firstName' => 'Alice', 'lastName' => 'Johnson', 'birthday' => '1992-03-10', 'cardType' => 'Platinum', 'status' => 'Active'],
-            ['id' => 4, 'cardNumber' => '3210-9876-5432-1098', 'firstName' => 'Bob', 'lastName' => 'Brown', 'birthday' => '1988-07-30', 'cardType' => 'Gold', 'status' => 'Active'],
             ['id' => 1, 'cardNumber' => '1234-5678-9012-3456', 'firstName' => 'John', 'lastName' => 'Doe', 'birthday' => '1990-05-15', 'cardType' => 'Gold', 'status' => 'Active'],
             ['id' => 2, 'cardNumber' => '9876-5432-1098-7654', 'firstName' => 'Jane', 'lastName' => 'Smith', 'birthday' => '1985-11-22', 'cardType' => 'Silver', 'status' => 'Inactive'],
             ['id' => 3, 'cardNumber' => '4567-8901-2345-6789', 'firstName' => 'Alice', 'lastName' => 'Johnson', 'birthday' => '1992-03-10', 'cardType' => 'Platinum', 'status' => 'Active'],

resources/views/pages/member management/locked-accounts.blade.php

@@ -1,14 +1,33 @@
 @extends('layouts.app')
 
-@section('page_title', 'Member Management')
+@section('page_title', 'Locked Account')
 
 @section('content')
-<div class="card" style="min-height: 500px;">
+    @php
-    <div class="card-header">
+        $members = [
-        <i class="fa-solid fa-users-gear" style="color:gray;"> Locked Accounts</i>
+            ['id' => 1, 'cardNumber' => '1234-5678-9012-3456', 'firstName' => 'John', 'lastName' => 'Doe', 'birthday' => '1990-05-15', 'cardType' => 'Gold', 'status' => 'Inactive'],
-    </div>
+            ['id' => 2, 'cardNumber' => '9876-5432-1098-7654', 'firstName' => 'Jane', 'lastName' => 'Smith', 'birthday' => '1985-11-22', 'cardType' => 'Silver', 'status' => 'Inactive'],
-    <div class="card-body">
+            ['id' => 3, 'cardNumber' => '4567-8901-2345-6789', 'firstName' => 'Alice', 'lastName' => 'Johnson', 'birthday' => '1992-03-10', 'cardType' => 'Platinum', 'status' => 'Inactive'],
-        <p>This is the Locked Accounts page content.</p>
+            ['id' => 4, 'cardNumber' => '3210-9876-5432-1098', 'firstName' => 'Bob', 'lastName' => 'Brown', 'birthday' => '1988-07-30', 'cardType' => 'Gold', 'status' => 'Inactive']
-    </div>
+        ];
-</div>
+    @endphp
+
+    @include('components.table-component', [
+        'pageTitle' => 'Locked Account',
+        'data' => $members,
+        'columns' => [
+            ['name' => 'Card Number', 'key' => 'cardNumber', 'sortable' => true],
+            ['name' => 'First Name', 'key' => 'firstName', 'sortable' => true],
+            ['name' => 'Last Name', 'key' => 'lastName', 'sortable' => true],
+            ['name' => 'Birthday', 'key' => 'birthday', 'sortable' => true],
+            ['name' => 'Card Type', 'key' => 'cardType', 'sortable' => true],
+            ['name' => 'Status', 'key' => 'status', 'sortable' => true]
+        ],
+        'actions' => ['view'],
+        'showAddButton' => false,
+        'showCheckboxes' => false,
+        'showBatchDelete' => false,
+        'showEditModal' => false,
+        'showViewModal' => true
+    ])
 @endsection