Sofreh (Persian for the cloth a shared meal is laid on) is a complete restaurant system for Next.js: the POS, the kitchen display, the floor, reservations, the menu, stock, guests, money, reports and the team, designed as one product. The demo restaurant, Golnar Kitchen & Grill, keeps cooking while you click around: orders arrive, tickets fire, tables turn.
Service
- POS: dine-in, takeaway and delivery; a menu of real photos with diet marks, search and keyboard shortcuts; modifiers, combos, courses and seats; fire by course, hold, split the bill equally, by seat, by item or by amount, discounts and coupons; cash, card, wallet and QR payments; receipts and kitchen tickets ready to print.
- Kitchen display: stations, lanes (new, cooking, ready) with drag and drop, grid and expo views, all-day counts, rush and late tickets, bump and recall, sounds.
- Floor plan: zones and tables on a live map with timers, occupancy and tonight's arrivals; seat walk-ins, move parties and push tables together; a layout editor.
- Reservations: a drag-and-resize timeline with conflict checks, list and calendar views, a waitlist, and a booking sheet that suggests the best table.
- Guest QR menu: each table's own menu on the guest's phone, ordering with staff approval, a live order tracker, call the waiter, pay at the table and leave a review.
- Customer display and order board: what the guest sees at the counter, and the "preparing / ready" board for pickup.
Back office
- Dashboard with widgets you arrange, and twelve reports: sales summary, sales by time (heatmap), items and categories, channels, payments, discounts, taxes, customers and cohorts, and more, all exportable.
- Orders as a table or a board, with filters, saved views, a timeline per order, refunds and bulk actions.
- Menu: items with prices, margins, recipes and availability; categories, modifier groups, combos, promotions and coupons; menu engineering (stars, plowhorses, puzzles, dogs) and "what sells with what".
- Inventory: stock levels and cover days, recipes with food cost, suppliers, purchase orders from low stock, receiving, waste log and stock counts.
- Guests: profiles with favourite dishes, allergies and habits, loyalty tiers and rewards, reviews with replies.
- Finance: A4 invoices, payments, cash drawers and shifts with X and Z reports.
- Team: staff, a weekly schedule with drag, labour cost and conflicts, a timeclock with a PIN kiosk, roles, and a permissions matrix with "view as role".
- Settings in fourteen sections, from store and taxes to receipts, devices and security, plus a notification centre.
Two languages, light and dark
English and Persian with true right-to-left layout, the Jalali calendar and Persian digits; light, dark and five colour presets (Saffron Hour, Pomegranate, Pistachio, Lapis, Midnight Kitchen), with contrast checked for each.
Also inside
- Sign in, staff PIN, register, password recovery, a lock screen and a five-step onboarding.
- Error and system pages (404, 403, 500, maintenance, offline, coming soon) drawn in the same style, a design-system page, and twelve illustrations drawn in code.
- 46 real dish photos (Unsplash licence, credited), installable apps (PWA) for the back office, POS, kitchen and guest menu.
Your data
The restaurant comes from a seed: 120 days of history (about 20,000 orders), consistent across every screen, and a live service simulation. Reads, writes and live updates each go through one seam, so connecting your own API is a matter of replacing the mock layer; docs/BACKEND.md shows how. Until then, every change stays in the browser.
Stack
Next.js 16 (App Router, TypeScript strict) · React 19 · Tailwind CSS 4 · shadcn/ui (Radix) · next-intl · zustand + Immer · TanStack Table and Query · react-hook-form + zod · Recharts · Motion · dnd-kit · lucide-react
Quality
354 unit tests (the pricing engine at 100 % coverage), end-to-end browser checks, an i18n check that keeps both languages complete, keyboard support and screen-reader labels throughout, and reduced motion respected.
Run it
Download the ZIP under Extra downloads, then pnpm install and pnpm dev (Node.js 20+). The README covers renaming, your logo and colours, languages, photos and connecting a backend.
