# Phase 3: Agent Portal Shell - Context **Gathered:** 2026-03-19 **Status:** Ready for planning ## Phase Boundary Private authenticated area where Teressa manages clients (create, list, view profiles, edit, delete) and monitors all documents with their current status from a central dashboard. This phase builds the shell and client data model. Real documents are added in Phase 4 — placeholder data is seeded in this phase so the UI looks populated. ## Implementation Decisions ### Portal Navigation - Top nav (horizontal nav bar) — not sidebar - Agent lands on Dashboard after login - All portal routes live under a `/portal` prefix (e.g., `/portal/dashboard`, `/portal/clients`, `/portal/clients/[id]`) - Visual feel: same brand as marketing site (shared colors/fonts) but cleaner and more utilitarian — clearly a logged-in app, not a marketing page ### Client List Design - Card grid layout (not table/list) - Each card shows: client name, email, document count, last activity date - New client created via modal/dialog triggered from the client list page (not a separate page) - Empty state: friendly message ("No clients yet") with a prominent "+ Add your first client" CTA button ### Dashboard Document View - Table layout with color-coded status badges: Draft=gray, Sent=blue, Viewed=amber/yellow, Signed=green - Columns: Document name, Client, Status badge, Date sent - Controls: filter by status (dropdown) + sort by date (most recent first) - Phase 3 seeds a few placeholder document rows (real documents arrive in Phase 4) - Empty state not needed since data is seeded ### Client Profile Page - Two-section layout: client details header (name, email, edit button) above a documents table - Back link to Clients list - Edit client: modal/dialog (consistent with create pattern) — no inline editing - Documents section: same table style as dashboard (doc name, status badge, date) - Delete client: delete button on profile with confirmation dialog before removing ### Claude's Discretion - Exact card dimensions and spacing on client grid - Color palette values for status badges (within brand colors) - Skeleton/loading states - Exact wording for empty states and confirmation dialogs - Mobile responsiveness details ## Specific Ideas - Portal nav should feel like a real web app (not the marketing site) — utilitarian, clean - Consistent modal pattern for both create and edit client (same component, different mode) - Dashboard is the post-login landing page — it should feel like "command central" ## Deferred Ideas - None — discussion stayed within phase scope --- *Phase: 03-agent-portal-shell* *Context gathered: 2026-03-19*