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

./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:

{
  "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:

const response = await fetch('YOUR_API_ENDPOINT_HERE');

Modifying the Theme

Update the CSS variables in :root at the top of the <style> section:

: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

1.8 KiB Raw Permalink Blame History