Car Wash Dashboard

The problem

The shop needed one operations surface in Arabic RTL — not a LTR English admin flipped with CSS. Staff had to manage bookings, working hours, vacations, services, and coupons without leaving the console.

Approach

1. 01

   React 18 + TypeScript with MUI, Emotion RTL (stylis-plugin-rtl), Tailwind, and Tajawal typography on a purple operations theme.

2. 02

   Redux Toolkit for auth and RTK Query for home stats, reservations, users, and employees, behind protected routes.

3. 03

   Full reservation lifecycle: list, details, create/edit forms, plus services, locations, coupons, and employee working times / vacations.

4. 04

   Dashboard home with month filters, KPI cards, Recharts weekly bars, and jsPDF-ready operational tables.

Outcome

A production-shaped Arabic operations console: sign-in, a collapsible sidebar, and the day-to-day tools a car-wash manager actually uses.

RTL as a product constraint

The app is not a translated English dashboard. Emotion cache is wired with stylis-plugin-rtl, MUI theme uses Tajawal, and navigation, tables, and forms are authored for Arabic. That is the difference between supporting a locale and shipping for one.

Operations, not a single table

Reservations sit next to staff (info, working periods, vacations), wash services, locations, and coupons. Protected routing and Redux auth keep the console gated. The home board turns those records into weekly booking volume a manager can scan in one sitting.