Update index.html

index.html

@@ -346,6 +346,37 @@
             color: var(--danger);
         }
 
+        .cell-remark.remark-nok {
+            color: var(--danger);
+            font-weight: 600;
+        }
+
+        .cell-remark.remark-danger {
+            color: var(--danger);
+        }
+
+        .cell-remark.remark-success {
+            color: var(--success);
+        }
+
+        .recheck-checkbox {
+            width: 1.25rem;
+            height: 1.25rem;
+            cursor: pointer;
+            accent-color: var(--primary);
+            border: 2px solid var(--border);
+            border-radius: 4px;
+        }
+
+        .recheck-checkbox:checked {
+            background-color: var(--primary);
+            border-color: var(--primary);
+        }
+
+        .recheck-checkbox:hover {
+            border-color: var(--primary);
+        }
+
         /* Filter Dropdown */
         .filter-dropdown {
             position: absolute;
@@ -608,11 +639,21 @@
                                     <i class="fas fa-arrow-down"></i>
                                 </div>
                             </th>
+                            <th>
+                                Recheck
+                                <div class="filter-indicator" onclick="toggleFilter('recheck')">
+                                    <i class="fas fa-filter"></i>
+                                </div>
+                                <div class="sort-indicator" onclick="sortTable('recheck')">
+                                    <i class="fas fa-arrow-up"></i>
+                                    <i class="fas fa-arrow-down"></i>
+                                </div>
+                            </th>
                         </tr>
                     </thead>
                     <tbody id="tableBody">
                         <tr>
-                            <td colspan="6" class="loading">
+                            <td colspan="7" class="loading">
                                 <div class="spinner"></div>
                                 <span>Loading data...</span>
                             </td>
@@ -795,7 +836,7 @@
             if (data.length === 0) {
                 tableBody.innerHTML = `
                     <tr>
-                        <td colspan="6" class="empty-state">
+                        <td colspan="7" class="empty-state">
                             <i class="fas fa-search"></i>
                             <p>No orders found matching your filters</p>
                         </td>
@@ -823,9 +864,15 @@
                     <td>
                         <div class="cell-remark ${getRemarkClass(item.Remark)}">
                             <i class="fas ${getRemarkIcon(item.Remark)}"></i>
-                            ${item.Remark}
+                            ${item.Remark || 'N/A'}
                         </div>
                     </td>
+                    <td>
+                        <input type="checkbox" 
+                               class="recheck-checkbox"
+                               ${item.recheck ? 'checked' : ''}
+                               onchange="handleRecheck('${item.Order_ID}', this.checked)">
+                    </td>
                 </tr>
             `).join('');
         }
@@ -840,21 +887,56 @@
         }
 
         function getRemarkClass(remark) {
-            if (remark === null || remark === undefined) return 'danger';
+            if (remark === null || remark === undefined) return '';
             const str = String(remark);
-            if (str.includes('found')) return 'danger';
+            if (str.includes('NOK')) return 'remark-nok';
-            if (str.includes('valid') || str.includes('OK')) return 'success';
+            if (str.includes('found')) return 'remark-danger';
+            if (str.includes('valid') || str.includes('OK')) return 'remark-success';
             return '';
         }
 
         function getRemarkIcon(remark) {
-            if (remark === null || remark === undefined) return 'fa-exclamation-triangle';
+            if (remark === null || remark === undefined) return 'fa-file-alt';
             const str = String(remark);
+            if (str.includes('NOK')) return 'fa-times-circle';
             if (str.includes('found')) return 'fa-exclamation-triangle';
             if (str.includes('valid') || str.includes('OK')) return 'fa-check-circle';
             return 'fa-file-alt';
         }
 
+        async function handleRecheck(orderId, 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 Status:', isChecked ? 'color: #10b981' : 'color: #94a3b8', isChecked ? 'Checked' : 'Unchecked');
+            
+            try {
+                const response = await fetch('https://n8n.finorbrands.com/webhook/61f89d5c-8474-4045-b52c-50ee608435c0', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        ...(apiCredentials ? {
+                            'Authorization': `Basic ${btoa(`${apiCredentials.username}:${apiCredentials.password}`)}`
+                        } : {})
+                    },
+                    body: JSON.stringify({
+                        Order_ID: orderId,
+                        recheck: isChecked
+                    })
+                });
+                
+                if (response.ok) {
+                    console.log('%c Success:', 'color: #10b981; font-weight: bold;', 'Recheck status updated');
+                } else {
+                    console.error('%c Error:', 'background: #ef4444; color: white; padding: 4px 8px; border-radius: 4px;', response.status, response.statusText);
+                }
+                
+                console.groupEnd();
+            } catch (error) {
+                console.error('%c Request Error:', 'background: #ef4444; color: white; padding: 4px 8px; border-radius: 4px;', error.message);
+                console.groupEnd();
+            }
+        }
+
         function sortTable(column) {
             const direction = currentSort.column === column && currentSort.direction === 'asc' ? 'desc' : 'asc';