Merge branch 'main' of github.com:netalertx/NetAlertX

front/css/app.css

@@ -1413,15 +1413,48 @@ textarea[readonly],
 
 
 #columnFilters {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 10px; /* Add spacing between items */
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
+    gap: 0.75em;
+    padding: 0.5em 0;
+}
+
+#columnFilters::before,
+#columnFilters::after {
+    display: none !important;
 }
 
 .filter-group {
-    box-sizing: border-box; /* Ensure padding and borders are included in the width */
-    padding: 1em;
-    padding-top: 0;
+    box-sizing: border-box;
+    padding: 0.4em;
+    margin: 0;
+    border-radius: 3px;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.15em;
+    white-space: normal;
+}
+
+.filter-group label {
+    box-sizing: border-box;
+    margin: 0;
+    border-radius: 3px;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.15em;
+    white-space: normal;
+    padding-left: 15px;
+    padding-right: 0px;
+}
+
+.filter-dropdown {
+    width: 100%;
+}
+.filter-group select {
+    margin-left: 15px;
+    padding-right: 0px;
 }
 
 .filter-dropdown

front/devices.php

@@ -430,29 +430,35 @@ function initFilters() {
                       filters: []
                     };
 
-                    // Group data by columnName
-                    resultJSON.forEach(entry => {
-                      const existingFilter = transformed.filters.find(filter => filter.column === entry.columnName);
+                    // Build filters in the exact order of columnFilters
+                    columnFilters.forEach(([columnName, headerKey]) => {
+                      // Get matching entries for this column
+                      const entries = resultJSON.filter(e => e.columnName === columnName);
 
-                      if (existingFilter) {
-                        // Add the unique columnValue to options if not already present
-                        if (!existingFilter.options.some(opt => opt.value === entry.columnValue)) {
-                          existingFilter.options.push({
-                            value: entry.columnValue,
-                            label: entry.columnLabel || entry.columnValue
-                          });
+                      if (entries.length === 0) return;
+
+                      // Build options (unique)
+                      const optionsMap = new Map();
+
+                      entries.forEach(entry => {
+                        const value = entry.columnValue;
+                        const label = entry.columnLabel || value;
+
+                        if (!optionsMap.has(value)) {
+                          optionsMap.set(value, { value, label });
                         }
-                      } else {
-                        // Create a new filter entry
-                        transformed.filters.push({
-                          column: entry.columnName,
-                          headerKey: entry.columnHeaderStringKey,
-                          options: [{
-                            value: entry.columnValue,
-                            label: entry.columnLabel || entry.columnValue
-                          }]
-                        });
-                      }
+                      });
+
+                      const options = Array.from(optionsMap.values());
+
+                      // Sort options alphabetically
+                      options.sort((a, b) => a.label.localeCompare(b.label));
+
+                      transformed.filters.push({
+                        column: columnName,
+                        headerKey: headerKey,
+                        options: options
+                      });
                     });
 
                     // Sort options alphabetically by label for better readability