# CRM Step 08 — Frontend: Comms Log + Media (Manual Entry Polish)

## Context
Read `.claude/crm-build-plan.md` for full context and IMPORTANT NOTES.
Steps 01–07 must be complete.

## Task
Two things:
1. A standalone **Inbox** page — unified comms view across all customers
2. Polish the Comms and Media tabs on CustomerDetail (from Step 06) — improve the UI

## Files to create/update

### `frontend/src/crm/inbox/InboxPage.jsx`
- Fetch `GET /api/crm/comms?customer_id=ALL` — wait, this doesn't exist yet.
  → Instead, fetch all customers, then fetch comms for each? No — too many requests.
  → Add a new backend endpoint first (see below).
- Show a unified timeline of all comms entries across all customers, sorted by occurred_at desc
- Each entry shows: customer name (link), type badge, direction, subject/body preview, date
- Filter by type (email/whatsapp/call/note/etc), direction, customer (dropdown)
- Pagination or virtual scroll (limit to last 100 entries)

### Backend addition needed — add to `backend/crm/router.py` and `service.py`:
`GET /api/crm/comms/all` — fetch all comms (no customer_id filter), sorted by occurred_at DESC, limit 200.
`list_all_comms(type=None, direction=None, limit=200) -> List[CommInDB]` in service.

### Comms tab improvements (update CustomerDetail.jsx)
- Full timeline view with visual connector line between entries
- Each entry is expandable — click to see full body
- Entry form as an inline slide-down panel (not a modal)
- Form fields: type (icons + labels), direction, subject, body (textarea), occurred_at (datetime-local input, defaults to now), attachments (add nextcloud_path manually for now)
- After save, refresh comms list

### Media tab improvements (update CustomerDetail.jsx)
- Group media by direction: "Received" section, "Sent" section, "Internal" section
- Show filename, tags as pills, date
- "Add Media" inline form: filename (required), nextcloud_path (required), direction (dropdown), tags (pill input)
- Delete button per item with confirmation

## Routing in `frontend/src/App.jsx`
```jsx
<Route path="/crm/inbox" element={<InboxPage />} />
```

## Sidebar update
Add to CRM section (at top of CRM group):
- Inbox → `/crm/inbox`

## Notes
- This step is mostly UI polish + the inbox page. No new integrations.
- The inbox page is the "central comms view" from the original requirements — all messages in one place
- Keep the comms entry form simple: only show attachment fields if user clicks "Add attachment"
- Type badges: email=blue, whatsapp=green, call=amber, sms=teal, note=grey, in_person=purple