{title}

{value}

{icon}

\n );\n\n const renderUtilizationChart = () => {\n if (!dashboardData?.utilizationByTechnician) return null;\n\n return (\n

Technician Utilization

\n {dashboardData.utilizationByTechnician.map((tech, index) => (\n

\n {tech.technicianName}\n {tech.utilization}%\n

\n = 80 ? 'bg-red-500' :\n tech.utilization >= 60 ? 'bg-yellow-500' :\n 'bg-green-500'\n }`}\n style={{ width: `${Math.min(tech.utilization, 100)}%` }}\n >

\n {tech.bookedSlots} booked\n {tech.totalSlots} total slots\n

\n ))}\n

\n \n );\n };\n\n const renderServiceBreakdown = () => {\n if (!dashboardData?.bookingsByService) return null;\n\n const total = dashboardData.bookingsByService.reduce((sum, service) => sum + service.count, 0);\n\n return (\n

Service Breakdown

\n {dashboardData.bookingsByService.map((service, index) => {\n const percentage = total > 0 ? (service.count / total) * 100 : 0;\n return (\n

\n {service.serviceName}\n {service.count} bookings\n

\n {percentage.toFixed(1)}%\n

\n );\n })}\n

\n \n );\n };\n\n const renderQuickActions = () => (\n

Quick Actions

\n \n 📧\n Send Daily Summary\n \n \n onNotification('info', 'Feature coming soon')}\n className=\"flex items-center justify-center space-x-2 px-4 py-3 bg-green-600 text-white rounded hover:bg-green-700 transition-colors\"\n >\n 📊\n Export Report\n \n \n onNotification('info', 'Feature coming soon')}\n className=\"flex items-center justify-center space-x-2 px-4 py-3 bg-orange-600 text-white rounded hover:bg-orange-700 transition-colors\"\n >\n ⚖️\n Auto-Balance Load\n \n \n \n 🔄\n Refresh Data\n \n

\n );\n\n const renderRecentActivity = () => (\n

Recent Activity

✅

New booking confirmed

John Smith - Tyre Replacement

2 min ago

\n \n

🔧

Service completed

Sarah Johnson - Wheel Alignment

15 min ago

\n \n

⏰

Reminder sent

Mike Wilson - Tomorrow's appointment

1 hour ago

\n \n

👥

New technician added

Emma Davis - London East branch

3 hours ago

\n );\n\n if (loading) {\n return (\n

\n );\n }\n\n return (\n

\n {/* Header */}\n

Dashboard

Overview of your Protyre operations

\n \n

\n setSelectedPeriod(e.target.value as any)}\n className=\"px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n >\n \n \n \n \n

\n\n {/* Key Metrics */}\n

\n {renderStatCard(\n 'Total Bookings',\n dashboardData?.totalBookings || 0,\n '📅',\n 'bg-gradient-to-r from-blue-50 to-blue-100'\n )}\n {renderStatCard(\n 'Today\\'s Bookings',\n dashboardData?.todayBookings || 0,\n '🎯',\n 'bg-gradient-to-r from-green-50 to-green-100'\n )}\n {renderStatCard(\n 'Busiest Slot',\n dashboardData?.busiestSlot?.time || 'N/A',\n '⏰',\n 'bg-gradient-to-r from-orange-50 to-orange-100'\n )}\n {renderStatCard(\n 'Idle Capacity',\n dashboardData?.idleCapacity || 0,\n '💤',\n 'bg-gradient-to-r from-purple-50 to-purple-100'\n )}\n

\n\n {/* Charts and Analytics */}\n

\n {renderUtilizationChart()}\n {renderServiceBreakdown()}\n

\n\n {/* Additional Sections */}\n

\n {renderQuickActions()}\n {renderRecentActivity()}\n

\n\n {/* Performance Insights */}\n

Performance Insights

85%

Customer Satisfaction

↗️ +5% from last month

\n \n

12 min

Avg. Response Time

↗️ 2 min faster

\n \n

£2,450

Today's Revenue

↗️ +12% vs yesterday

\n );\n};\n\nexport default Dashboard;","deleted","label",[171,172,154],"frontend","components","permalink","https://www.val.town/x/Mastermind/Protyre_SmartServiceScheduler/code/frontend/components/Dashboard.tsx","extension","actionData","errors"]