tmp/agents.md

Order Dashboard - Project Guide

Overview

A professional, modern dashboard for order management that fetches data from a webhook API. Features include real-time data loading, column filtering, sorting, global search, authentication handling, and recheck status tracking.

Files

File	Purpose
index.html	Main HTML structure, links to CSS and JS
style.css	All styling and animations
app.js	Application logic, API calls, state management

API

• Endpoint: https://n8n.finorbrands.com/webhook/61f89d5c-8474-4045-b52c-50ee608435c0
• GET: Fetches order data
• POST: Updates recheck status (body: {Order_ID: string, recheck: boolean})
• Auth: Basic Authentication (username:password) via Authorization: Basic <base64> header
• Response format: {"data": [{Month, Odoo_AR_Nr, Order_ID, Country_Name, VAT, Remark, recheck?}]}

Data Model

{
    Month: string,
    Odoo_AR_Nr: string,
    Order_ID: string,
    Country_Name: string | null,
    VAT: string | null,
    Remark: string | null,
    recheck: boolean | undefined
}

Features

• Real-time data loading from webhook API
• Column-level filtering with checkboxes
• Column sorting (ascending/descending)
• Global search across all fields
• Statistics dashboard (total orders, countries, VAT entries)
• Authentication modal with credential persistence
• Recheck checkboxes with POST updates
• NOK remark detection (red highlighting)
• Country classification with color badges
• Responsive design for mobile/desktop
• Debug console logging

Architecture

State Management

• allData - Raw data from API
• filteredData - Data after global search/filtering
• currentSort - Current sort column and direction
• filters - Column filter selections
• globalSearch - Search term
• apiCredentials - Current auth session

Key Functions

Function	Purpose
loadData()	Fetches data from API, handles auth
applyFilters()	Applies search and column filters
sortTable()	Sorts data by column
renderTable()	Generates HTML table rows
handleRecheck()	POSTs recheck status change
showCredentialPrompt()	Shows auth modal
toggleAuth()	Toggle credential session

Lessons Learned

What Worked Well

1. Null-safe string operations - Always use String(value) or value || '' before calling .includes() or .toString()
2. Modal click handling - Use e.target === this to differentiate clicking overlay vs modal children
3. CSS specificity - Use !important strategically for modal overlay to override other styles
4. Separated concerns - Keeping HTML, CSS, and JS in separate files makes debugging easier
5. Console debugging - Color-coded, grouped console logs make debugging fast

Critical Bug Patterns

1. .includes() on null/undefined - Always guard: if (!val) return ''; val.toString().includes()
2. Event bubbling on modals - Clicking input inside overlay triggers overlay click handler
3. Colspan mismatches - Loading/empty state must match table column count
4. CSS order matters - Modal reset styles must come before modal component styles

Common Pitfalls

• Don't forget to handle null and undefined for API fields
• Don't use item[column] === null ? 'null' : item[column] inconsistently (string 'null' vs actual null)
• Don't nest modal HTML inside overlay div if overlay click handler checks e.target === this
• Don't forget to escape Order_ID in onclick handlers (use single quotes)

Code Style

• No frameworks, vanilla JS only
• CSS custom properties for theming
• CSS Grid for stats, Flexbox for layout
• Async/await for API calls
• IIFE-free, module-style globals
• JSDoc-style comments for functions

Adding New Columns

1. Add <th> in table header with filter/sort indicators
2. Add column to filter data in applyFilters()
3. Add rendering in renderTable()
4. Add null-safe getter function if needed
5. Add CSS classes if special styling required

Authentication Flow

1. API returns 401 → Show credential modal
2. User enters credentials → Save to localStorage
3. Next loadData() call → Include Basic Auth header
4. User clicks auth button when logged in → Clear credentials

Debug Console

All major operations log to console with colored, grouped messages:

• Webhook Call (green header)
• Credentials (purple header)
• Filter State (purple header)
• Table View (cyan header)
• Recheck (green header)
• Errors (red header)

Future Enhancements

• Export to CSV
• Pagination for large datasets
• Column width resizing
• Saved filter presets
• Dark/light theme toggle
• Data caching
• Offline mode

Running Locally

# Start with live-reload
./start.sh

# Or open directly
open index.html

Browser Compatibility

• Chrome/Edge (latest)
• Firefox (latest)
• Safari (latest)
• Requires ES6+ features

Performance Notes

• All filtering/sorting is client-side
• Consider pagination for >1000 records
• Debounce search input for large datasets
• Filter dropdowns are created on-demand