Live bay and mechanic dashboard for independent car workshops
Challenge: Independent Malaysian car workshops run on whiteboards and mental models. The taukey juggles phone calls, walk-ins, bay availability, and mechanic workload all at once — leading to double-bookings, missed slots, and the wrong "come down, we're free" answer when the bay is empty but no qualified mechanic is actually available.
Solution: Wee Auto Car Care is a taukey-facing booking dashboard that tracks bays, mechanics, and service skills together. It surfaces the overlooked distinction between a "free bay" and a "bookable bay" — the bay might be empty, but if no mechanic with the right skill is free, it is actually idle, not bookable. The dashboard makes this visible at a glance.
3 bays across 8 hourly slots with 4 colour-coded states: Bookable (green dashed), Idle (yellow), Busy (amber), Multi-slot (red). Cells show mechanic, service, plate, and ready time for bookings; free cells show which mechanics can do which services.
One row per mechanic, one cell per slot. At a glance see who is free when, what service they are doing, and how their day is loaded. Handles multi-slot jobs (timing belt, AC compressor) as spanning bars.
Interactive form that validates in real time: date picker (constrained to open days), service dropdown, slot dropdown (only shows free slots in the matching bay), mechanic dropdown (only shows skill-matched + slot-free mechanics), customer name + plate. Prevents impossible bookings.
Every booking row has a Cancel button. Click → confirm → booking disappears, bay + mechanic slot immediately becomes Bookable in the grid. Good for demo purposes and real-world "customer no-show" handling.
7-day pill strip across the top with utilization % on each pill. Click any day → grid refreshes with that day's bookings. Prev / Next week arrows for range. "Today" button returns to demo default. Sundays greyed out (workshop closed).
Reset button restores the original 142 seed bookings (clears the visitor's localStorage). Download button exports the current state as JSON. Both enable prospects to explore without breaking the demo for the next visitor.
This is the core insight that differentiates the dashboard from a naive "free / busy" grid. Every cell in the bay grid is classified as one of four states:
| State | Meaning | What the taukey does |
|---|---|---|
| BOOKABLE | Bay free AND ≥1 qualified mechanic free | Accept the booking or walk-in |
| IDLE | Bay free BUT no qualified mechanic free | Tell customer to come later — don't wave them in |
| BUSY | Bay occupied (single-slot booking) | Bay back online at next bookable hour |
| MULTI | Bay occupied (multi-slot job like timing belt 3h) | Bay locked for N hours, next bookable after |
Why this matters: a workshop with 3 bays and 3 mechanics has 24 slot-units per day, but the mechanics have different skills. Bay 3 (Hunter alignment) can only be worked by Vishnu. If Vishnu is busy doing tyre work in Bay 1, Bay 3 is physically free but functionally unavailable — a naive grid would show it as "free" and the taukey would wrongly tell the customer to come. The dashboard flags this as IDLE instead.
demo.html is fully self-contained — JSON seed, CSS, and JS all inlined (~96KB). Open it locally or host on any static server.generate_seed.py produces a reproducible 12-day booking seed (142 bookings) with density, bay, and mechanic constraints enforced.build_dashboard.py reads the seed JSON and injects it into the HTML template — regenerate any time the seed changes.The dashboard is a static HTML file with zero backend dependencies. Deploy by copying demo.html to any static host:
POST /bookings, DELETE /bookings/{id}). The UI code stays identical._base-template-staffed/ and is reusable for salon, spa, dental, and GP clinic verticals.