77 lines
1.8 KiB
Markdown
77 lines
1.8 KiB
Markdown
# 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
|