Till POS

The order state is managed with useReducer rather than useState because the order involves multiple interacting sub-operations: adding items, adjusting quantities, applying modifier groups, and clearing. Each operation is a named action dispatched to the reducer, making state transitions predictable and traceable in React DevTools. The modifier modal intercepts the add-to-order action when an item has required modifier groups, completing selection before the item is committed.

Modifier groups are fully data-driven — each menu item in the data model specifies its modifier groups as an array of objects with a selection type (single or multi), a label, and options each carrying a name and price delta. The modal renders radio groups for single-select modifiers and checkboxes for multi-select ones, validating that required groups are completed before the item can be confirmed. Adding a new modifier group requires no UI code changes — only data.

The warm dark palette (deep amber and brown tones) is the default on load, reflecting the real-world POS context: restaurant counters and kitchens are typically dimly lit with warm ambient light, and a dark default reduces screen glare in this environment. Light mode is available as an alternative for operators who prefer a brighter interface or use the system in well-lit front-of-house settings.