# Dashboard flow map (for approval)

**Library:** shadcn/ui + Tailwind CSS + `@dnd-kit` Kanban with **mobile tabs** (not tiny H-scroll).  
See `ui-library-decision.md`.

## Three levels

```mermaid
flowchart TD
  subgraph L1["Level 1 — Agent switcher"]
    Home["Home: Unseen Matters"]
    A1["Programmer 🔴 n"]
    A2["Sales Admin 🔴 n"]
    A3["Business Admin 🔴 n"]
    A4["Sourcing / Designer / Learning"]
    Home --> A1 & A2 & A3 & A4
  end

  subgraph L2["Level 2 — Groups for that agent"]
    G1["Claim form — 3 of 6 done · 🔴 3"]
    G2["Tracker dashboard — …"]
    G3["Catalogue images · Claude · Hosting · Docs"]
    A1 --> G1 & G2 & G3
  end

  subgraph L3["Level 3 — Kanban inside a group"]
    Tabs["Phone: segmented tabs  Needs you | Waiting | Done"]
    Desk["Desktop ≥1024: 3 columns side-by-side"]
    G1 --> Tabs & Desk
    NY["Needs you cards"]
    W["Waiting on others"]
    D["Done"]
    Tabs --> NY & W & D
    Desk --> NY & W & D
  end

  subgraph Card["Card actions (optimistic)"]
    NY --> Act["Approve / Reject / Reply / Mark done"]
    Act -->|Approve or Reject or Reply| Sent["Toast: Sent to <agent> → moves to Waiting"]
    Act -->|Mark done| DoneCol["Moves to Done · progress ++"]
    Act -->|Reply| Sheet["Bottom sheet + quick picks → Send to agent"]
  end
```

## Rule for agents

Every open question to Yong Lin = **one card** under its **group**.  
Documented in `dashboard-format.md`. Example group **Claim form**:

| Card | Column |
|------|--------|
| Add OpenAI credit (account at $0) — you add it or I use the vault card? | Needs you |
| QuickBooks connection | Needs you |
| Real end-to-end test | Needs you |
| OpenAI key created and working | Done |
| Google Cloud project set up under personal Gmail | Done |
| Receipt claim form demo link | Done |

## Navigation

```mermaid
sequenceDiagram
  actor Y as Yong Lin (phone)
  participant H as Agent home
  participant G as Group list
  participant K as Kanban
  participant S as Reply sheet
  participant P as Programmer (webhook/queue)

  Y->>H: Opens dashboard
  H-->>Y: Agents with red need-you counts
  Y->>G: Taps Programmer
  G-->>Y: Groups + progress + red flags
  Y->>K: Taps Claim form
  K-->>Y: Needs you tab (default)
  Y->>K: Approve / Reject / Mark done
  K-->>Y: Optimistic move + toast
  K->>P: Forward via DASH_REPLY_WEBHOOK (or queue)
  Y->>S: Reply
  S->>P: Send to Programmer
  S-->>Y: Card → Waiting
```

## Storage (proposed for real build — not in this mockup)

Extend existing reply-thread store (`DASH_REPLY_DIR` / memory) so Approve/Reject/Reply/Done persist; optional CF KV later. Mockup is client-only (in-memory).