# AI Strategy Modal Plan

## Overview
Make "Today's Mission" card clickable to open an AI-powered strategy modal that analyzes current state and generates a prioritized action plan.

**Status:** COMPLETE
**Created:** 2026-01-16

---

## User Flow

1. User taps "Today's Mission" card
2. Modal opens with loading state
3. AI analyzes: SMS waiting, callbacks, hot leads, calls to target, time of day
4. Shows prioritized action plan with time estimates
5. Each step has action button → navigates directly to task

---

## API Endpoint

### GET /api/dashboard/strategy

**Response:**
```json
{
  "summary": "You have 3 SMS replies waiting and 2 overdue callbacks. Focus on the warm responses first - they're your fastest path to conversations today.",
  "totalTime": "45 mins",
  "expectedOutcome": "2-3 meaningful conversations, clear callback backlog",
  "steps": [
    {
      "order": 1,
      "action": "Reply to Sarah K's SMS",
      "reason": "She asked about pricing - hot buying signal",
      "timeEstimate": "5 mins",
      "type": "sms",
      "leadId": "uuid",
      "leadName": "Sarah K",
      "company": "BuildRight"
    },
    {
      "order": 2,
      "action": "Call back Tony M",
      "reason": "Callback overdue by 2 hours - he requested this",
      "timeEstimate": "10 mins",
      "type": "callback",
      "leadId": "uuid",
      "leadName": "Tony M"
    },
    {
      "order": 3,
      "action": "Work through hot leads",
      "reason": "5 hot leads haven't been contacted in 48hrs",
      "timeEstimate": "30 mins",
      "type": "call_list",
      "leadCount": 5
    }
  ],
  "context": {
    "smsWaiting": 3,
    "overdueCallbacks": 2,
    "hotLeadsStale": 5,
    "callsToTarget": 8,
    "timeOfDay": "midday",
    "hoursRemaining": 5
  }
}
```

---

## OpenAI Prompt

```
You're a sales manager for a construction industry rep in Australia.

Current situation:
- Time: {timeOfDay} ({hoursRemaining} hours left in work day)
- SMS replies waiting: {count}
  {list each: name, company, message preview, hours waiting}
- Overdue callbacks: {count}
  {list each: name, company, hours overdue, reason}
- Hot leads not contacted 48hrs: {count}
  {list each: name, company, hours since contact}
- Calls to hit target: {callsToTarget} / {callTarget}
- Available leads: {hotCount} hot, {warmCount} warm

Create a prioritized action plan for the next hour.

Rules:
1. Start with highest-impact, lowest-effort tasks (warm responses first)
2. Be specific - name the leads
3. Give realistic time estimates
4. Max 5 steps
5. Consider time of day (don't plan 2 hours of work at 4pm)

Return JSON:
{
  "summary": "One paragraph tactical summary",
  "totalTime": "X mins",
  "expectedOutcome": "What they'll achieve if they follow this",
  "steps": [
    {
      "order": 1,
      "action": "Specific action with lead name",
      "reason": "Why this is priority",
      "timeEstimate": "X mins",
      "type": "sms|callback|call_list|hot_lead",
      "leadId": "uuid or null",
      "leadName": "Name or null",
      "company": "Company or null",
      "leadCount": "number if type is call_list"
    }
  ]
}
```

---

## Implementation Steps

### Step 1: Backend - Strategy Endpoint
**File:** `src/routes/dashboard.js`

Add `GET /api/dashboard/strategy`:
- Fetch current dashboard data (reuse existing queries)
- Build context for OpenAI
- Generate strategy with AI
- Return structured action plan

### Step 2: Frontend - StrategyModal Component
**File:** `admin/src/components/StrategyModal.jsx`

Props:
- `isOpen: boolean`
- `onClose: () => void`
- `onActionClick: (type, data) => void`

Features:
- Loading state with spinner
- Summary paragraph at top
- Numbered action steps
- Each step shows: action, reason, time estimate
- Action button per step (color-coded by type)
- Total time + expected outcome at bottom

Display:
```
┌─────────────────────────────────────────────────────┐
│ YOUR 1-HOUR GAME PLAN                            ✕ │
├─────────────────────────────────────────────────────┤
│                                                     │
│ "You have 3 SMS replies waiting and 2 overdue      │
│ callbacks. Focus on warm responses first..."       │
│                                                     │
├─────────────────────────────────────────────────────┤
│                                                     │
│ 1. Reply to Sarah K's SMS              [View] 💬   │
│    She asked about pricing - hot signal            │
│    ⏱ 5 mins                                        │
│                                                     │
│ 2. Call back Tony M                    [Call] 📞   │
│    Callback overdue by 2 hours                     │
│    ⏱ 10 mins                                       │
│                                                     │
│ 3. Work through hot leads              [Start] 🔥  │
│    5 leads cooling - need contact                  │
│    ⏱ 30 mins                                       │
│                                                     │
├─────────────────────────────────────────────────────┤
│ Total: 45 mins                                     │
│ Expected: 2-3 conversations, cleared backlog       │
└─────────────────────────────────────────────────────┘
```

### Step 3: Update TodaysMission Component
**File:** `admin/src/components/TodaysMission.jsx`

Changes:
- Add `onClick` prop
- Make entire card clickable
- Add visual indicator (tap hint or chevron)
- Cursor pointer

### Step 4: Update TimeAwareSection
**File:** `admin/src/components/TimeAwareSection.jsx`

Changes:
- Add `onMissionClick` prop
- Pass to TodaysMission

### Step 5: Update Dashboard.jsx
**File:** `admin/src/pages/Dashboard.jsx`

Changes:
- Add strategy modal state
- Add `loadStrategy()` function
- Handle modal open/close
- Handle action button clicks (navigate)
- Render StrategyModal

### Step 6: API Client Update
**File:** `admin/src/api/client.js`

Add to dashboardApi:
```javascript
getStrategy: () => request('/api/dashboard/strategy'),
```

---

## Files to Create

| File | Description |
|------|-------------|
| `admin/src/components/StrategyModal.jsx` | AI strategy modal |

## Files to Modify

| File | Changes |
|------|---------|
| `src/routes/dashboard.js` | Add /strategy endpoint |
| `admin/src/components/TodaysMission.jsx` | Make clickable |
| `admin/src/components/TimeAwareSection.jsx` | Pass onClick |
| `admin/src/pages/Dashboard.jsx` | Add modal + handlers |
| `admin/src/api/client.js` | Add getStrategy() |

---

## Build Order

1. [ ] Backend: Add /api/dashboard/strategy endpoint
2. [ ] Frontend: Create StrategyModal component
3. [ ] Update TodaysMission to be clickable
4. [ ] Update TimeAwareSection to pass onClick
5. [ ] Update Dashboard.jsx with modal + navigation
6. [ ] Update API client
7. [ ] Build and deploy

---

## Action Button Mappings

| Type | Button | Navigation |
|------|--------|------------|
| `sms` | "View" | `/leads/{leadId}` |
| `callback` | "Call" | `/leads/{leadId}` |
| `hot_lead` | "Call" | `/leads/{leadId}` |
| `call_list` | "Start" | `/calls` |

---

## Testing Checklist

- [ ] Tapping Today's Mission opens modal
- [ ] Loading state shows while fetching
- [ ] AI generates relevant strategy
- [ ] Steps are numbered and clear
- [ ] Action buttons navigate correctly
- [ ] Modal closes on X or outside click
- [ ] Works on mobile (full screen)
- [ ] Fallback if AI fails