Enhances employee statistics page with rich dashboard

Refactors employee statistics view with comprehensive charts and tables
Adds detailed revenue, utilization, and booking tracking components
Introduces dynamic data loading and chart visualization for employee performance
This commit is contained in:
Janus C. H. Knudsen 2026-01-22 23:28:33 +01:00
parent b921e26e48
commit eaae745c42
8 changed files with 543 additions and 70 deletions

View file

@ -0,0 +1,94 @@
{
"stats": {
"bookingsThisMonth": 42,
"bookedServicesValue": "30.825 kr",
"bookedServicesSubtitle": "Baseret på 49 bookinger",
"revenueThisMonth": "28.450 kr",
"returnCustomers": "68%"
},
"revenueUtilization": {
"categories": ["Okt", "Nov", "Dec", "Jan", "Feb", "Mar"],
"actual": {
"revenue": [
{ "x": "Okt", "y": 24500 },
{ "x": "Nov", "y": 28200 },
{ "x": "Dec", "y": 31800 },
{ "x": "Jan", "y": 28450 },
{ "x": "Feb", "y": null },
{ "x": "Mar", "y": null }
],
"utilization": [
{ "x": "Okt", "y": 72 },
{ "x": "Nov", "y": 78 },
{ "x": "Dec", "y": 85 },
{ "x": "Jan", "y": 68 },
{ "x": "Feb", "y": null },
{ "x": "Mar", "y": null }
]
},
"forecast": {
"revenue": [
{ "x": "Okt", "y": null },
{ "x": "Nov", "y": null },
{ "x": "Dec", "y": null },
{ "x": "Jan", "y": null },
{ "x": "Feb", "y": 26000 },
{ "x": "Mar", "y": 29500 }
],
"utilization": [
{ "x": "Okt", "y": null },
{ "x": "Nov", "y": null },
{ "x": "Dec", "y": null },
{ "x": "Jan", "y": null },
{ "x": "Feb", "y": 65 },
{ "x": "Mar", "y": 72 }
]
}
},
"revenue": {
"categories": ["Jul", "Aug", "Sep", "Okt", "Nov", "Dec"],
"series": [
{
"name": "Services",
"color": "#00897b",
"data": [
{ "x": "Jul", "y": 22000 },
{ "x": "Aug", "y": 28500 },
{ "x": "Sep", "y": 26200 },
{ "x": "Okt", "y": 30500 },
{ "x": "Nov", "y": 27100 },
{ "x": "Dec", "y": 26000 }
]
},
{
"name": "Produkter",
"color": "#1976d2",
"data": [
{ "x": "Jul", "y": 2500 },
{ "x": "Aug", "y": 2700 },
{ "x": "Sep", "y": 2600 },
{ "x": "Okt", "y": 2600 },
{ "x": "Nov", "y": 2500 },
{ "x": "Dec", "y": 2450 }
]
}
]
},
"recentBookings": [
{ "customer": "Maria Hansen", "service": "Klip & Farve", "date": "23. dec 2024", "amount": "995 kr" },
{ "customer": "Louise Nielsen", "service": "Balayage", "date": "22. dec 2024", "amount": "1.495 kr" },
{ "customer": "Sofie Andersen", "service": "Dameklip", "date": "22. dec 2024", "amount": "425 kr" },
{ "customer": "Karen Pedersen", "service": "Klip & Farve", "date": "21. dec 2024", "amount": "1.095 kr" },
{ "customer": "Emma Larsen", "service": "Olaplex", "date": "21. dec 2024", "amount": "350 kr" }
],
"completedBookings": [
{ "date": "23. dec 2024", "time": "10:00", "customer": "Maria Hansen", "services": "Dameklip, Bundfarve", "duration": "2t 30m", "amount": "1.510 kr", "status": "Betalt", "statusClass": "paid" },
{ "date": "23. dec 2024", "time": "13:30", "customer": "Louise Nielsen", "services": "Balayage langt hår, Olaplex", "duration": "3t", "amount": "2.700 kr", "status": "Betalt", "statusClass": "paid" },
{ "date": "22. dec 2024", "time": "09:00", "customer": "Sofie Andersen", "services": "Dameklip", "duration": "1t", "amount": "725 kr", "status": "Betalt", "statusClass": "paid" },
{ "date": "22. dec 2024", "time": "11:00", "customer": "Karen Pedersen", "services": "Striber mellemlangt hår, Klip", "duration": "2t 30m", "amount": "2.390 kr", "status": "Afventer", "statusClass": "pending" },
{ "date": "21. dec 2024", "time": "14:00", "customer": "Emma Larsen", "services": "Olaplex Stand alone", "duration": "1t", "amount": "550 kr", "status": "Betalt", "statusClass": "paid" },
{ "date": "21. dec 2024", "time": "10:00", "customer": "Mette Kristensen", "services": "Herreklip", "duration": "1t", "amount": "645 kr", "status": "Betalt", "statusClass": "paid" },
{ "date": "20. dec 2024", "time": "09:30", "customer": "Anne Thomsen", "services": "Glossing mellemlangt hår", "duration": "1t", "amount": "745 kr", "status": "Betalt", "statusClass": "paid" },
{ "date": "20. dec 2024", "time": "12:00", "customer": "Lise Mortensen", "services": "Dameklip, Farvning vipper & bryn", "duration": "1t 30m", "amount": "1.070 kr", "status": "Betalt", "statusClass": "paid" }
]
}