# 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