filter

app.js

@@ -7,7 +7,8 @@ let allData = [];
 let filteredData = [];
 let currentSort = { column: null, direction: null };
 let filters = {};
-let globalSearch = '';
+let columnTextFilters = {};
+let hideOkFilter = false;
 let apiCredentials = null;
 
 // API Configuration
@@ -140,14 +141,21 @@ async function loadData() {
 // ===================================
 
 function applyFilters() {
-    let result = filteredData.filter(item => {
-        if (!globalSearch) return true;
-        const searchLower = globalSearch.toLowerCase();
-        return Object.values(item).some(value => 
-            value !== null && value.toString().toLowerCase().includes(searchLower)
-        );
+    let result = [...filteredData];
+
+    // Apply column text filters
+    Object.entries(columnTextFilters).forEach(([column, searchText]) => {
+        if (searchText && searchText.trim()) {
+            const searchLower = searchText.toLowerCase().trim();
+            result = result.filter(item => {
+                const value = item[column];
+                return value !== null && value !== undefined && 
+                    String(value).toLowerCase().includes(searchLower);
+            });
+        }
     });
 
+    // Apply checkbox filters
     Object.entries(filters).forEach(([column, selectedValues]) => {
         if (selectedValues.length > 0) {
             result = result.filter(item => 
@@ -156,12 +164,25 @@ function applyFilters() {
         }
     });
 
+    // Apply "hide OK" filter
+    if (hideOkFilter) {
+        result = result.filter(item => {
+            const remark = item.Remark || '';
+            return !String(remark).trim().toLowerCase().includes('ok');
+        });
+    }
+
     renderTable(result);
     updateStats(result.length);
     
     console.group('%c Table View', 'background: #06b6d4; color: white; padding: 4px 8px; border-radius: 4px; font-weight: bold;');
     console.log('%c Rendering', 'font-weight: bold;', result.length, 'records');
-    console.log('%c View range:', 'color: #64748b;', '1-', result.length);
+    console.log('%c Active text filters:', Object.entries(columnTextFilters)
+        .filter(([_, v]) => v && v.trim())
+        .map(([k, v]) => `${k}: "${v}"`), 'color: #64748b;');
+    if (hideOkFilter) {
+        console.log('%c Filter:', 'color: #10b981;', 'Hide OK remarks is ON');
+    }
     console.groupEnd();
 }
 
@@ -292,9 +313,9 @@ function getRemarkIcon(remark) {
 // Recheck Action
 // ===================================
 
-async function handleRecheck(orderId, isChecked) {
+async function handleRecheck(id, isChecked) {
     console.group('%c Recheck', 'background: #6366f1; color: white; padding: 4px 8px; border-radius: 4px; font-weight: bold;');
-    console.log('%c Order ID:', 'font-weight: bold;', orderId);
+    console.log('%c ID:', 'font-weight: bold;', id);
     console.log('%c Status:', isChecked ? 'color: #10b981' : 'color: #94a3b8', isChecked ? 'Checked' : 'Unchecked');
     
     try {
@@ -307,7 +328,7 @@ async function handleRecheck(orderId, isChecked) {
                 } : {})
             },
             body: JSON.stringify({
-                Order_ID: orderId,
+                ID: id,
                 recheck: isChecked
             })
         });
@@ -461,11 +482,63 @@ function setupClickOutside() {
     });
 }
 
-function handleGlobalSearch(search) {
-    globalSearch = search;
+function handleColumnFilter(input) {
+    const column = input.dataset.column;
+    const value = input.value;
+    
+    if (value) {
+        columnTextFilters[column] = value;
+        input.parentElement.classList.add('filter-active');
+    } else {
+        delete columnTextFilters[column];
+        input.parentElement.classList.remove('filter-active');
+    }
+    
     applyFilters();
 }
 
+function clearAllFilters() {
+    // Clear column text filters
+    columnTextFilters = {};
+    
+    // Clear checkbox filters
+    filters = {};
+    
+    // Reset hide OK filter
+    hideOkFilter = false;
+    updateHideOkButton();
+    
+    // Clear all input fields
+    document.querySelectorAll('.column-filter').forEach(input => {
+        input.value = '';
+        input.parentElement.classList.remove('filter-active');
+    });
+    
+    // Reset filter indicators
+    document.querySelectorAll('.filter-indicator').forEach(indicator => {
+        indicator.classList.remove('active');
+    });
+    
+    applyFilters();
+}
+
+function toggleHideOkFilter() {
+    hideOkFilter = !hideOkFilter;
+    updateHideOkButton();
+    applyFilters();
+}
+
+function updateHideOkButton() {
+    const btn = document.getElementById('hideOkBtn');
+    if (!btn) return;
+    
+    if (hideOkFilter) {
+        btn.style.boxShadow = '0 0 0 2px var(--danger)';
+    } else {
+        btn.style.boxShadow = 'none';
+    }
+}
+
 // ===================================
 // Statistics
 // ===================================