# DASHBOARD Wireframe

## Source Screen

- Screen: Dashboard
- Purpose: Show active leads, follow-ups, and simple pipeline status with enough context to decide the next action.
- Data needed: Summary counters, prioritized list, next action date, recent notes, and simple status or stage.

## Layout Sections

- Top summary row with active leads, due follow-ups, and simple revenue pipeline status.
- Priority list of leads with status, next action date, and latest note.
- Inline quick-add action for a new lead or note.
- Empty-state panel that routes back to the first lead CTA.

## Components

- Summary counters
- Lead list
- Status pill
- Quick-add button
- Empty-state panel
- Recoverable error alert

## Primary CTA

- Label: Add first lead
- Placement: first viewport and repeated near the workflow completion point.
- Behavior: advances to the next MVP step without opening external tools.

## State Handling

- Empty: Explain that no leads exist yet and keep the first-create CTA prominent.
- Success: User can scan current work, add or update a record, and leave with a visible next action.
- Error: If records fail to load, show a recoverable error with retry and no destructive action.

## Mobile Notes

- Collapse summary counters into two columns, then show lead cards with next action first.
- Avoid side-by-side dependencies; each section must scan as a single column on narrow screens.

## Copy Direction

- Use action-first labels such as Due today, Add note, and Move stage. Avoid enterprise CRM jargon.
- Keep copy concrete, short, and tied to the user action on the current screen.

## Acceptance Criteria

- The screen has one visually dominant primary CTA.
- Required data, empty, success, and error states are represented in the layout.
- Mobile layout preserves the CTA and next action without horizontal scrolling.
- The wireframe does not specify production app code, network integrations, or entitlement gates.
- No Figma, Lovable, v0, or full app-builder replacement behavior is claimed.