Admin Dashboard

I built the original version of this dashboard as a way for one dealership to stop losing paperwork, and it grew into the system they ran their business on. It was a React and Firebase application, and after a couple of years of features being bolted on, it had reached the point where changing one thing risked breaking another.

Rather than keep patching it, I rebuilt it from scratch for Heel & Toe Cars on a modern stack. Only the private plate listings were carried across from the old database - everything else was redesigned and rewritten. It is now the sole system they use to run the dealership day to day.

Cars are added by registration and mileage, with vehicle details and a live valuation fetched automatically. Adding a vehicle also creates a purchase in Xero automatically, with the purchase receipt attached. From there, a vehicle carries its own inspection, its costs and its paperwork. Interactive inspection sheets built from a 57-point template can be completed on a phone or tablet in the workshop, and every change is attributed so managers can see who did what and when.

HPI checks can be run against any registration and the results are stored permanently, so a check never has to be paid for twice. Sales invoices are generated from the vehicle record and post straight into Xero, and dedicated print views produce clean paper copies of invoices, inspections and HPI reports.

The finances page breaks down purchase, parts, labour, transport and listing costs with VAT margin handling, and tracks revenue, current stock value and net profit over any date range. There are two roles: admin users get the whole system, while staff users can add vehicles and complete inspections but cannot see financial data, run HPI checks or issue invoices. Enquiries from the public website land in the dashboard as contact requests, exportable to CSV.

The rebuild is a Next.js 16 application using the App Router, written in TypeScript and styled with Tailwind CSS and shadcn/ui. Mutations run as server actions rather than through a separate API layer, so validation and authorisation live next to the data access they protect.

Data is stored in Neon Postgres and accessed with Drizzle ORM, with migrations generated and committed alongside the code. Moving from a document database to a relational one is what made the finances page possible - margin and profit calculations that were awkward in Firestore became straightforward SQL.

Authentication uses Neon Auth, built on Better Auth, with the admin or staff role held on the user record and enforced on every protected route. Vehicle data comes from the Check Car Details API, invoicing integrates with Xero over OAuth, and purchase receipts are uploaded to Vercel Blob.

Because this system is what the business runs on, correctness matters more than speed of delivery. The money and inspection logic is covered by Vitest unit tests, and a Playwright suite exercises the critical path end to end before anything ships.