RestoFlow

[Overview]

RestoFlow is a simulated restaurant POS that covers a full service from the floor to the end-of-day report. A server can seat a party, take an order, fire courses to the kitchen, print a bill, take payment and close out the day, all from a tablet held in landscape. The restaurant is fictional, but it is modelled closely on how a real one runs: 27 tables across seven dining areas, a menu of about 170 items, and Philippine tax and discount rules. It is a front-end project with no backend. All state lives in the browser, so it runs anywhere as a static site.

[The goal]

Most POS demos stop at a product grid and a cart. RestoFlow sets out to simulate the parts of restaurant service that make a POS hard to get right: tables that change state, courses that fire separately, prices that vary by the day, tax that is already inside the menu price, and an audit trail that never loses a ticket.

[What it does]

• Floor plan. The venue is drawn as a nautical sea chart with all 27 tables. Each table shows one of four states (Open, Serving, Bill, Held) using colour, icon, border and a word, so it stays readable for colour-blind staff.
• Ordering. Eight menu sections with sub-filters, search, modifiers and kitchen notes.
• Course firing. Sending to the kitchen locks and timestamps those lines, and the next round goes out as its own course.
• Market-price seafood. Dishes listed as "market price" open a keypad, so the server keys in the day's price before the item joins the ticket.
• Live wine pricing. Wine prices move every few seconds on a simulated market with an index and sparkline, and the price locks the moment an item is ordered, so a guest's bill never drifts.
• Billing to local rules. Menu prices already include VAT, so the tax is backed out rather than added on top. It also handles the 20% Senior Citizen / PWD discount with VAT exemption, and Happy Hour at 10% off drinks.
• Payment. Cash, card, GCash, or charge-to-room against a mock resort booking folio.
• Receipts. A print stylesheet produces a properly formatted 80mm receipt.
• Audit. Day, week and month reports covering takings, covers, payment mix, best sellers and sales by server, plus a printable Z-reading laid out with the fields a Philippine venue reports to the BIR. Voided tickets are recorded with their reasons, never discarded.

[Tech stack]

• Framework. React 19, TypeScript
• Build. Vite
• Styling. Tailwind CSS 4
• State. Zustand, persisted to localStorage
• Motion. Framer Motion
• Icons. Phosphor Icons
• Charts. Hand-built SVG, no chart library