payments

static/js/crud-list.js

@@ -1,36 +1,73 @@
 document.addEventListener('DOMContentLoaded', function() {
-    const editBtn = document.getElementById('editBtn');
-    const deleteBtn = document.getElementById('deleteBtn');
-    const objectIdInput = document.getElementById('objectIdInput');
-    const rows = document.querySelectorAll('.selectable-row');
+    const table = document.getElementById('objectTable');
+    if (!table) return;
 
-    if (editBtn) {
-        editBtn.setAttribute('disabled', '');
-    }
-    if (deleteBtn) {
-        deleteBtn.setAttribute('disabled', '');
+    const selectionMode = table.dataset.selectionMode || 'single';
+    const toggleSelectAllBtn = document.getElementById('toggleSelectAllBtn');
+
+    if (table.dataset.selectionMode === 'multiple') {
+        toggleSelectAllBtn.style.display = 'inline-block';
     }
 
-    rows.forEach(row => {
-        row.addEventListener('click', function() {
-            // Remove previous selection
-            document.querySelector('.selected-row')?.classList.remove('selected-row');
+    table.addEventListener('click', function(e) {
+        const row = e.target.closest('.selectable-row');
+        if (!row) return;
 
-            // Select current row
-            this.classList.add('selected-row');
+        const checkbox = row.querySelector('input[type="checkbox"]');
+        if (!checkbox) return;
 
-            const objectId = this.dataset.id;
-            if (editBtn) {
-                editBtn.removeAttribute('disabled');  // Remove disabled attribute completely
-                editBtn.href = editBtn.dataset.url.replace('0', objectId);
-            }
-            if (deleteBtn) {
-                deleteBtn.removeAttribute('disabled');
-            }
+        if (selectionMode === 'single') {
+            // Deselect all other rows
+            table.querySelectorAll('.selected-row').forEach(selectedRow => {
+                if (selectedRow !== row) {
+                    selectedRow.classList.remove('selected-row');
+                    selectedRow.querySelector('input[type="checkbox"]').checked = false;
+                }
+            });
+        }
 
-            // Check the hidden radio button
-            const radio = this.querySelector('input[type="radio"]');
-            radio.checked = true;
+        // Toggle current row
+        row.classList.toggle('selected-row');
+        checkbox.checked = !checkbox.checked;
+
+        // Update buttons state
+        const selectedRows = table.querySelectorAll('.selected-row');
+        document.querySelectorAll('[data-requires-selection]').forEach(button => {
+            button.disabled = selectedRows.length === 0;
         });
+
+        // Handle edit/delete buttons from original crud-list.js
+        const objectId = row.dataset.id;
+        const editBtn = document.getElementById('editBtn');
+        const deleteBtn = document.getElementById('deleteBtn');
+
+        if (editBtn) {
+            editBtn.removeAttribute('disabled');
+            editBtn.href = editBtn.dataset.url?.replace('0', objectId);
+        }
+        if (deleteBtn) {
+            deleteBtn.removeAttribute('disabled');
+        }
     });
-});
+
+    let allSelected = false;
+    toggleSelectAllBtn.addEventListener('click', function() {
+        const rows = table.querySelectorAll('.selectable-row');
+        allSelected = !allSelected;
+
+        rows.forEach(row => {
+            const checkbox = row.querySelector('input[type="checkbox"]');
+            checkbox.checked = allSelected;
+            row.classList.toggle('selected-row', allSelected);
+        });
+
+        // Update other buttons state
+        document.querySelectorAll('[data-requires-selection]').forEach(button => {
+            button.disabled = !allSelected;
+        });
+
+        // Update button text
+        this.textContent = allSelected ? 'Unselect All' : 'Select All';
+    });
+
+});

static/styles/forms.css

@@ -246,3 +246,36 @@ button[type="submit"]:hover {
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
     overflow: hidden; /* Ensure content doesn't overflow */
 }
+
+
+.filter-form {
+    background-color: #f8f9fa;
+    padding: 1rem;
+    border-radius: 0.25rem;
+    margin-bottom: 1rem;
+}
+.filter-form form {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    max-width: none;
+    width: 100%;
+}
+.filter-form .form-group {
+    display: flex;
+    align-items: center;
+    margin-bottom: 0;
+}
+.filter-form .form-control {
+    width: auto;
+    min-width: 200px;
+}
+.me-2 {
+    margin-right: 0.5rem;
+}
+
+.filter-form span {
+    display: flex;
+    align-items: center;
+    width: 100%;
+}

static/styles/sidebar.css

@@ -104,4 +104,12 @@
 
 .logout:hover {
     border: 1px solid #a57d52;
+}
+
+a.nav-item,
+a.nav-item:visited,
+a.nav-item:hover,
+a.nav-item:active {
+    color: inherit; /* or specify your desired color */
+    text-decoration: none;
 }

static/styles/tables.css

@@ -97,6 +97,21 @@ tbody tr {
     border-bottom: 1px solid #eee;
 }
 
+.dashboard-table,
+table td {
+    text-align: center;
+}
+
+.dashboard-table,
+table td.td-left {
+    text-align: left;
+}
+
+.dashboard-table,
+table td.td-right {
+    text-align: right;
+}
+
 
  /*Rename dashboard-table to match exactly with your HTML */
 .dashboard-table,
@@ -126,7 +141,6 @@ tfoot {
 table th,
 table td {
     padding: 8px;
-    text-align: center;
     border-right: 1px solid #E1C6A8;  /* Add vertical borders */
     border-bottom: 1px solid #E1C6A8;  /* Add horizontal borders */
 }
@@ -194,3 +208,4 @@ table tr:last-child td {
     color: #990000;
 }
 
+