164 lines
5.0 KiB
Markdown
164 lines
5.0 KiB
Markdown
# 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
|
|
|
|
```javascript
|
|
{
|
|
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
|
|
|
|
```bash
|
|
# 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
|