Service Bay Board

Install

Or by hand, in a Next.js project with shadcn set up. It writes components/pastetaste/service-bay-board.tsx.

Install the pastetaste component "Service Bay Board" (service-bay-board) into this Next.js project and use it.

What it is: A workshop floor: one tile per bay with car, job, technician, progress ring and a countdown to the promise time, plus a side panel with six stages and one action that really moves the bay on.

Before you place it, ask me (one short message, in my language; "skip" = sensible default): which page and section it goes in, my brand colour (hex), the text, labels or images it should show, and whether I want my logo or my own copy in the demo content. Then:

Steps:
1. If the project has no components.json, run: npx shadcn@latest init -y -d. Then run: npx shadcn@latest add https://pastetaste.com/r/service-bay-board.json
   (it writes components/pastetaste/service-bay-board.tsx; install any npm packages it reports).
2. Import it: import { ServiceBayBoard } from "@/components/pastetaste/service-bay-board" (check the file for the exact named export).
3. Put it where it fits on the page I name, keep the rest of the page untouched, and pass props for my colours instead of editing the installed file.
4. It does not depend on Tailwind; colours come from CSS variables (--pt-*) or props.
5. It supports prefers-reduced-motion with a still state; do not remove it.

Props (all optional unless the type has no default):
- bays: Bay[] = 6 bays — Each bay: n, status (In progress, Diagnosing, Waiting parts, Quality check, Ready, Open), car, plate, tech, job, pct, promised (minutes), value, sold, note, next.
- now: number = 642 — Current time in minutes since midnight, used for time left and late.
- stages: string[] = 6 repair stages — Stage names in the side panel.
- nextJob: Omit<Bay, 'n' | 'status'> = a Jeep oil change — Job that starts when an open bay is used.
- accent: string = #e3342f — Accent for progress, late times and selection.

Live preview: https://pastetaste.com/c/service-bay-board
Then run the dev server, check it in the browser at desktop and mobile width, and tell me the page URL.

Props 5