54 lines
2.5 KiB
Markdown
54 lines
2.5 KiB
Markdown
# 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
|