Files
bellsystems-cp/.claude/crm-step-08.md

2.5 KiB
Raw Blame History

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

Context

Read .claude/crm-build-plan.md for full context and IMPORTANT NOTES. Steps 0107 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

<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