Skip to content

UX Surface Specification

Overview

This document maps the current user-facing surfaces from the routed frontend rather than from historical product briefs.

Global Shell

  • Routing and provider composition are defined in src/App.tsx
  • Global providers include auth, user profile, enums, company phones, chat navigation, assistant thread state, realtime follow-up state, and AI review queue state
  • Global search is wrapped by GlobalSearchWrapper
  • a global assistant modal is mounted for authenticated users

Main Product Surfaces

Message Center

Route: - / - /message-center - /message-center/ai-review

UX shape: - three-panel desktop layout - mobile-specific thread workflow - inbox, thread view, detail/context panel - follow-up dialogs, send-later modal, voicemail/call actions, OCR image preview support

Assessment: - this is the deepest and most integrated UX surface in the repository

Leads / Contact Management

Route: - /leads

UX shape: - classic contact-management table UI - gated “new” UI mode for leads only - contact type toggle for leads vs customers - server-backed filtering plus summary/count widgets

Assessment: - mature operational surface with the strongest shared-table integration

Contact Search / New UI Surfaces

Routes: - /contact-search - /campaign-intelligence - /business-rules

UX shape: - gated by isNewUiUser - intended as newer workflow surfaces adjacent to classic leads management

Broadcasts

Routes: - /broadcasts - /broadcasts/:campaignId/leads - /broadcast-analytics

UX shape: - campaign list with inline editing - campaign-leads drilldown - wizard-driven campaign creation - analytics dashboard with mixed real and placeholder chart content

Jobs

Route: - /jobs

UX shape: - board or map toggle - drag/drop scheduling - sheet-based job detail

Assessment: - presentationally rich, but still mock-data based in the current page implementation

Field Sales

Route: - /field-sales

UX shape: - three-panel desktop layout with territory list, map, and lead details - mobile variant

Assessment: - UX shell exists, but workflow depth is not at the same maturity as Message Center or Leads

Admin

Route: - /admin

UX shape: - collapsible admin sections - AI administration - system health - module overview - internal data tooling

Assessment: - this is the main operator-facing configuration surface for AI runtime control

Shared UX Infrastructure

  • PageLayout is the main page wrapper for standard app surfaces
  • ThreePanelLayout is the structural base for Message Center and Field Sales style pages
  • Antd-based shared tables support large operational datasets
  • the app uses mobile-aware variants selectively rather than enforcing one uniform responsive pattern

UX Quality Assessment

Strongest surfaces

  • Message Center
  • Leads
  • Broadcast operations

Most transitional surfaces

  • Broadcast analytics
  • Field Sales
  • Jobs

UX Rule Of Thumb

Treat Message Center and Leads as the reference quality bar for production behavior. Treat Jobs, Field Sales, and portions of analytics as evolving product surfaces that still need deeper backend alignment.