update
This commit is contained in:
@@ -0,0 +1,76 @@
|
|||||||
|
# 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
|
||||||
+1348
File diff suppressed because it is too large
Load Diff
@@ -1,8 +1,5 @@
|
|||||||
#!/bin/bash
|
#!/bin/bash
|
||||||
|
|
||||||
|
|
||||||
#!/bin/bash
|
|
||||||
|
|
||||||
# Simple static file server with live reload
|
# Simple static file server with live reload
|
||||||
# Requires Node.js and live-server
|
# Requires Node.js and live-server
|
||||||
|
|
||||||
@@ -16,6 +13,3 @@ fi
|
|||||||
# Serve the current directory with auto-reload
|
# Serve the current directory with auto-reload
|
||||||
echo "Starting live-server on http://localhost:8080 ..."
|
echo "Starting live-server on http://localhost:8080 ..."
|
||||||
live-server .
|
live-server .
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Reference in New Issue
Block a user