Restaurant Point of Sale System — Online Web App

RestoPOS is a production-grade, white-label Point of Sale system built with Next.js 15 (App Router), TypeScript, Tailwind CSS, and Framer Motion — designed to be re-branded and sold to any restaurant client as a standalone product. The architecture is fully offline-first: all data lives in localStorage via a typed CRUD layer, meaning there is no backend, no database, and no hosting cost beyond a static deployment.

The core billing terminal is a split-screen POS interface — left 60% is a touch-friendly menu browser with real-time search, horizontal category tabs (Starters, BBQ, Karahi, Biryani, Fast Food, Drinks, Desserts, Breads), a popular items quick-add strip, and a responsive 4-column product grid with Unsplash food images, shimmer loading skeletons, and graceful error fallback emojis. The right 40% is the live order panel built on a useReducer state machine — supporting item quantity controls, per-item notes, hold/park orders, flat and percentage discounts, and configurable tax. The full-screen PaymentModal handles four methods: Cash (with change-due calculation and quick-amount buttons), JazzCash, EasyPaisa, and Card — each with its own UX flow.

Table management shows a 16-table floor plan with color-coded status indicators (green=available, red=occupied, orange=bill-requested, yellow=reserved), real-time elapsed seating timer, guest count, and current order total per table. The Kitchen Display Screen (KDS) runs as a separate fullscreen dark view — live order cards sorted by urgency with color-coded timers (green under 5 min, yellow 5–10 min, red over 10 min) and a one-click status flow: New → Preparing → Ready → Delivered. Cross-tab sync is implemented via the BroadcastChannel API so the kitchen screen updates live when the cashier places an order.

The receipt system generates an 80mm thermal receipt layout (print-ready via window.print()) and a formatted WhatsApp message opened via wa.me link — both fully driven by the restaurant's configurable branding. The reports dashboard includes a 4-card stats grid (revenue, orders, average order value, pending), a pure SVG hourly bar chart with peak-hour highlighting (no chart library), top-8 items ranked by quantity sold with animated progress bars, and a payment method breakdown — all filterable by Today, Yesterday, 7 Days, or This Month.

The Settings module allows full runtime white-labeling: restaurant name, tagline, logo URL, address, WhatsApp number, tax rate, currency symbol, receipt footer, and show/hide toggles for logo, tax, and footer. The menu editor supports inline CRUD for all 42 seed Pakistani restaurant items, category management, popular/spicy flags, active toggles, and stock management with low-stock alerts. User management supports multiple roles (admin, cashier, kitchen) each with their own numeric PIN.

Built as a reusable Claude Code skill (/restopos-scaffold) — the entire system can be re-scaffolded for any business niche (pharmacy, clothing store, cafe, grocery, salon) in minutes by swapping seed data, accent color, and terminology. Each client gets their own branded, fully independent deployment.