simple-pos-system/PLANS AND STRATEGIES/03_MANAGER_DASHBOARD.md

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