update

README.md

@@ -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