# Order Dashboard

A modern, professional dashboard for managing orders with filtering and sorting capabilities.

## Features

- 📊 **Real-time Data**: Fetches data from your webhook API
- 🔍 **Advanced Filtering**: Filter by any column with checkboxes
- 🔄 **Sorting**: Sort by any column in ascending/descending order
- 📱 **Responsive Design**: Works on desktop and mobile devices
- 🎨 **Modern UI**: Clean, professional design with smooth animations
- 📈 **Stats Dashboard**: Quick overview of key metrics

## Usage

### Starting the Dashboard

```bash
./start.sh
```

Or open `index.html` directly in your browser.

### API Configuration

The dashboard automatically fetches data from:
```
https://n8n.finorbrands.com/webhook/61f89d5c-8474-4045-b52c-50ee608435c0
```

If the API requires authentication, you may need to configure the API endpoint in `index.html`.

## Data Structure

The dashboard expects data in the following format:
```json
{
  "data": [
    {
      "Month": "8",
      "Odoo_AR_Nr": "1563",
      "Order_ID": "29810",
      "Country_Name": "Finnland",
      "VAT": null,
      "Remark": "Ref not found"
    }
  ]
}
```

## Customization

### Changing the API Endpoint

Edit the `loadData()` function in `index.html`:
```javascript
const response = await fetch('YOUR_API_ENDPOINT_HERE');
```

### Modifying the Theme

Update the CSS variables in `:root` at the top of the `<style>` section:
```css
:root {
    --primary: #6366f1;       /* Main accent color */
    --dark: #0f172a;          /* Dark background */
    --light: #f8fafc;         /* Light background */
    --border: #e2e8f0;        /* Border color */
}
```

## Notes

- If the API returns a 401 error, the dashboard will use sample data for demonstration
- All filtering and sorting is done client-side for instant response
- The dashboard is fully responsive and adapts to screen size