\n {[\n { key: 'bookings', label: 'Bookings', icon: '📅' },\n { key: 'technicians', label: 'Technicians', icon: '👥' },\n { key: 'slots', label: 'Time Slots', icon: '⏰' }\n ].map((tab) => (\n setActiveTab(tab.key as any)}\n className={`py-2 px-1 border-b-2 font-medium text-sm flex items-center space-x-2 ${\n activeTab === tab.key\n ? 'border-blue-500 text-blue-600'\n : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'\n }`}\n >\n {tab.icon}\n {tab.label}\n \n ))}\n

\n );\n\n const renderBookingsTab = () => {\n const filteredBookings = bookings.filter(booking => \n booking.date === selectedDate\n );\n\n return (\n

Bookings Management

\n Date:\n setSelectedDate(e.target.value)}\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 {loading ? (\n

\n ) : (\n

\n {filteredBookings.length === 0 ? (\n

\n No bookings found for {selectedDate}\n

\n ) : (\n filteredBookings.map((booking) => (\n

{booking.customerName}

📞 {booking.customerPhone}

\n {booking.customerEmail && (\n

✉️ {booking.customerEmail}

\n )}\n

\n \n

🚗 {booking.vehicleMake} {booking.vehicleModel}

Year: {booking.vehicleYear}

Reg: {booking.vehicleReg}

\n \n

⏰ {booking.startTime} - {booking.endTime}

📍 Branch ID: {booking.branchId}

👤 Tech ID: {booking.technicianId}

\n \n

\n \n {booking.status.charAt(0).toUpperCase() + booking.status.slice(1)}\n \n \n updateBookingStatus(booking.id, e.target.value)}\n className=\"px-2 py-1 border border-gray-300 rounded text-sm\"\n >\n \n \n \n \n \n

\n \n {booking.notes && (\n

📝 {booking.notes}

\n )}\n

\n ))\n )}\n

\n )}\n

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

Technician Management

\n \n {loading ? (\n

\n ) : (\n

\n {technicians.map((technician) => {\n const branch = branches.find(b => b.id === technician.branchId);\n const todayBookings = bookings.filter(b => \n b.technicianId === technician.id && \n b.date === selectedDate &&\n b.status !== 'cancelled'\n ).length;\n \n return (\n

{technician.name}

📍 {branch?.name || 'Unknown Branch'}

\n {technician.specialties.map((specialty) => (\n \n {specialty}\n \n ))}\n

\n \n

{todayBookings}

Today's Bookings

\n {technician.isActive ? 'Active' : 'Inactive'}\n

\n \n

\n generateTimeSlots(technician.id, technician.branchId)}\n className=\"px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 text-sm\"\n >\n Generate Slots\n \n \n

\n );\n })}\n

\n )}\n

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

Time Slot Management

\n \n

Quick Actions

\n \n \n \n \n

\n \n

Slot Statistics

\n Available Slots Today:\n 24\n

\n Booked Slots Today:\n 18\n

\n Blocked Slots Today:\n 2\n

\n Utilization Rate:\n 75%\n

\n \n

Bulk Slot Generation

\n Start Date\n \n

\n End Date\n \n

\n Branch\n \n

\n \n

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

Admin Panel

Manage bookings, technicians, and time slots

\n \n {renderTabNavigation()}\n \n {activeTab === 'bookings' && renderBookingsTab()}\n {activeTab === 'technicians' && renderTechniciansTab()}\n {activeTab === 'slots' && renderSlotsTab()}\n

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