173 lines
6.0 KiB
Markdown
173 lines
6.0 KiB
Markdown
# Guide 03 — Manager Dashboard (React + Vite)
|
||
|
||
## Overview
|
||
A full web application used by the restaurant manager on a tablet or laptop. Touch-friendly but not phone-optimized. Clean, minimal UI. Full control over orders, tables, products, waiters, and reports.
|
||
|
||
---
|
||
|
||
## Project Structure
|
||
|
||
```
|
||
manager_dashboard/
|
||
├── src/
|
||
│ ├── main.jsx
|
||
│ ├── App.jsx
|
||
│ ├── api/
|
||
│ │ └── client.js # Same axios setup as waiter PWA
|
||
│ ├── store/
|
||
│ │ └── authStore.js
|
||
│ ├── pages/
|
||
│ │ ├── LoginPage.jsx
|
||
│ │ ├── DashboardPage.jsx # Live table overview (home)
|
||
│ │ ├── OrderDetailPage.jsx
|
||
│ │ ├── ProductsPage.jsx
|
||
│ │ ├── WaitersPage.jsx
|
||
│ │ ├── TablesPage.jsx
|
||
│ │ ├── ReportsPage.jsx
|
||
│ │ └── SettingsPage.jsx
|
||
│ ├── components/
|
||
│ │ ├── Sidebar.jsx
|
||
│ │ ├── TableGrid.jsx
|
||
│ │ ├── OrderItemList.jsx
|
||
│ │ ├── ProductForm.jsx
|
||
│ │ ├── WaiterForm.jsx
|
||
│ │ ├── ConfirmModal.jsx
|
||
│ │ └── ShiftSummaryTable.jsx
|
||
│ └── layouts/
|
||
│ └── AppLayout.jsx # Sidebar + main content area
|
||
├── vite.config.js
|
||
└── package.json
|
||
```
|
||
|
||
---
|
||
|
||
## Layout
|
||
|
||
### AppLayout
|
||
- Left sidebar (collapsible on tablet): navigation links
|
||
- Main content area: renders current page
|
||
- Top bar: current user name, clock, logout button
|
||
|
||
### Sidebar Navigation
|
||
```
|
||
📊 Dashboard (live table overview)
|
||
🪑 Tables (manage table list + floorplan future)
|
||
📦 Products (menu management)
|
||
👥 Waiters (account management)
|
||
📋 Reports (shift summaries + history)
|
||
⚙️ Settings (printer config, system info)
|
||
```
|
||
|
||
---
|
||
|
||
## Pages
|
||
|
||
### LoginPage
|
||
- Username + PIN pad (same component as waiter but slightly larger for tablet)
|
||
- Manager/Sysadmin roles land here
|
||
|
||
### DashboardPage (Home)
|
||
- **Primary view**: Grid of all tables
|
||
- Each table card shows:
|
||
- Table number
|
||
- Status: Free | Active | Partially Paid
|
||
- Assigned waiter name(s)
|
||
- Order total (if active)
|
||
- Time elapsed since order opened
|
||
- Click a table → slide-over panel or modal with `OrderDetailPage` content
|
||
- Auto-refresh every 30 seconds (or use polling)
|
||
- Filter bar: All | Active | Free | Partially Paid
|
||
|
||
### OrderDetailPage
|
||
- Full order details: table, waiter(s), opened at, items list
|
||
- Each item shows: product name, options, notes, quantity, price, status (active/paid/cancelled)
|
||
- Actions:
|
||
- Remove individual item (with confirmation)
|
||
- Cancel entire order (with confirmation + reason optional)
|
||
- Add waiter to order
|
||
- Remove waiter from order
|
||
- Mark specific items as paid (same as waiter partial payment)
|
||
- Close order
|
||
- Print receipt (sends formatted summary to a selected printer)
|
||
|
||
### ProductsPage
|
||
- Left panel: category list with "Add Category" button
|
||
- Right panel: products in selected category
|
||
- Each product card: name, price, availability toggle
|
||
- "Add Product" / "Edit Product" opens a form panel (not a separate page):
|
||
- Name
|
||
- Category (dropdown)
|
||
- Base price
|
||
- Printer zone assignment (which printer this product routes to)
|
||
- Availability toggle
|
||
- Options section: list of options, each with name + extra cost (add/remove)
|
||
- Ingredients section: list of ingredients (add/remove)
|
||
|
||
### WaitersPage
|
||
- Table of all waiter accounts:
|
||
- Username, status (active/blocked), orders today, total today
|
||
- Actions per row:
|
||
- Reset PIN → opens modal to set new PIN
|
||
- Block / Unblock toggle
|
||
- Edit username
|
||
- Delete (with confirmation)
|
||
- Manage assistants → modal showing current assistant assignments
|
||
- "Add Waiter" button → form: username + initial PIN + role
|
||
|
||
### TablesPage
|
||
- List of all tables (number, label, active/inactive)
|
||
- Add table: just a number + optional label
|
||
- Edit: change number or label
|
||
- Deactivate/reactivate table
|
||
- (Future) Floorplan editor placeholder section
|
||
|
||
### ReportsPage
|
||
- **Shift Summary tab**:
|
||
- Date picker (default: today)
|
||
- Per-waiter summary table:
|
||
- Waiter name | Orders completed | Items sold | Total revenue
|
||
- Export as CSV button
|
||
- **Order History tab**:
|
||
- Filterable by date range, waiter, status
|
||
- Paginated table of orders
|
||
- Click order → opens OrderDetailPage in read-only mode
|
||
|
||
### SettingsPage (Manager/Sysadmin)
|
||
- Printer list: name, IP, zone, test print button
|
||
- System info: version, uptime
|
||
- (Sysadmin only): license status, cloud connection status, lock/unlock system button
|
||
|
||
---
|
||
|
||
## UI Design Direction
|
||
- **Theme**: Light. Clean white/light gray. This is used on a well-lit counter or office.
|
||
- **Accent**: Deep teal or navy for primary actions. Red for destructive actions.
|
||
- **Typography**: Slightly larger than standard web — readable at arm's length on a tablet.
|
||
- **Table cards on Dashboard**: Color-coded status indicators. Bold table numbers. Clear waiter attribution.
|
||
- **Touch targets**: 44px minimum on all interactive elements.
|
||
- **Tables/lists**: Comfortable row height (52–64px), clear hover states.
|
||
- **Forms**: Single-column, generous spacing. No cramped inputs.
|
||
- **Modals/panels**: Slide-over from right for detail views. Centered modals only for confirmations.
|
||
|
||
---
|
||
|
||
## State Management
|
||
|
||
### authStore (Zustand) — same as waiter PWA
|
||
|
||
### Per-page state: local React state + React Query
|
||
Use **React Query** (TanStack Query) for all data fetching:
|
||
- Auto-refetch on window focus
|
||
- Background polling for DashboardPage (every 30s)
|
||
- Optimistic updates for quick actions (toggle availability, etc.)
|
||
- Automatic cache invalidation after mutations
|
||
|
||
---
|
||
|
||
## Key UX Rules
|
||
1. **Destructive actions always require confirmation** — modal with clear description of what will happen
|
||
2. **Dashboard is the home** — manager should be able to see everything at a glance without drilling in
|
||
3. **Inline editing where possible** — don't navigate away for simple changes
|
||
4. **Clear feedback on every action** — toast notifications for success/error
|
||
5. **Manager cannot be locked out** — if cloud check-in fails, manager still has full local access
|