feat(pipeline): Pipeline kanban board + full-page lead detail with Move Stage #36

2026-07-27T13:15:18Z

Mayur7887 commented

2026-07-27 13:15:18 +00:00

Summary

Adds the Pipeline workspace module: a drag-and-drop kanban board of
storm-restoration leads, a slide lead record
reachable from it. All client-side mock data — no backend wiring yet.

1. Pipeline board (`pipeline.tsx`, `pipeline-data.ts`)

Nine columns: seven progression stages (New Lead → Contacted → Appt Scheduled
→ Estimate Sent → Signed → Ino flag columns
(Stuck, Follow-Up) pinned to the right.
Each column header carries a dex (3/7) and a
progress bar.
Drag and drop cards betwegression column
advances the lead's furthest reached stage; dropping on a flag column keeps
reached where it stalled, ss how far it got.
Search across name, address, rep, work type and lead id.
Cards show avatar, name, addrlls, assigned rep,
a storm badge and days-in-pipeline. Keyboard accessible (Enter/Space to open).
44 mock leads spread across a
Adding custom stages was dropped for now, so the stage list is fixed.

2. Lead drawer

Click a card for a right slide-over: stage stepper with percent complete, a
Details tab (contact, job dmeline) and an
Activity tab whose stage-change trail is generated from how far the lead
has progressed.

3. Lead detail page (new)

Opens from the drawer's **Mor only fired a
placeholder toast. The board swaps for a full-width lead record; a
"← Pipeline" breadcrumb retur
Hero — 64px avatar, name, full address, and stage / lead-type /
work-type / storm / age pills.
Stage progress — percent-complete bar and a seven-step connected stepper.
Completed steps get a check irent step gets a ring.
Overview grid — Contact, Property, Job Details, Insurance and Assignment,
matching the section layout oodal so the two
screens stay consistent. Retail leads show an empty state in Insurance
instead of blank fields, sinc

4. Move Stage

A Move Stage dropdown on be re-staged
without going back to the board — previously drag-and-drop was the only way.
Stages are grouped into *Pipeh with its tone dot.
The current stage is highlighted, checked and disabled.
Both paths now route through ached` advancement
and the "Lead moved" toast behave identically whether you drag or pick.
The detail view resolves its lding a snapshot,
so a stage move updates the pills, progress bar, stepper and page accent
colour live, and the board re

5. Data model (`pipeline-dat

PLead gains the fields the de

phones[] (primary mobile +
source, tradeType (derived from work type; Multi-Trade when a job spans
two), urgency
insurance — company, claim status (tracks the stage), claim and policy
numbers, adjuster name and ph
assignment — assigned to, priority, follow-up date, created by / at

All values derive deterministically from the existing rows, with no Date.now()
or Math.random(), so server a

6. Styling (`dashboard.css`)

New pld-* block reusing thes, so the page
recolours to the lead's current stage.
Overview grid collapses to onpper stacks
under 720px.
Move Stage is an anchored mencontained scroll)
and a bottom sheet under 720px with safe-area insets and larger touch
rows, so it can never be cliprt viewports
(landscape phones) get a tighter cap.
Removed overflow: hidden fring the dropdown.
The accent bar rounds its own top corners instead.

Notes for review

Everything is client-side mock data; nothing is wired to be-crm yet.
Insurance / property / assignt taken from the
reference /owner/leads/:id screen — field labels and section order may need
a pass once the real record i
The drawer still has no stage control; from the board it is drag-and-drop or
the detail page. Easy to add ed.

## Summary Adds the **Pipeline** workspace module: a drag-and-drop kanban board of storm-restoration leads, a slide lead record reachable from it. All client-side mock data — no backend wiring yet. ## 1. Pipeline board (`pipeline.tsx`, `pipeline-data.ts`) - Nine columns: seven progression stages (New Lead → Contacted → Appt Scheduled → Estimate Sent → Signed → Ino flag columns (Stuck, Follow-Up) pinned to the right. - Each column header carries a dex (`3/7`) and a progress bar. - **Drag and drop** cards betwegression column advances the lead's furthest `reached` stage; dropping on a flag column keeps `reached` where it stalled, ss how far it got. - Search across name, address, rep, work type and lead id. - Cards show avatar, name, addrlls, assigned rep, a storm badge and days-in-pipeline. Keyboard accessible (Enter/Space to open). - 44 mock leads spread across a - Adding custom stages was dropped for now, so the stage list is fixed. ## 2. Lead drawer Click a card for a right slide-over: stage stepper with percent complete, a **Details** tab (contact, job dmeline) and an **Activity** tab whose stage-change trail is generated from how far the lead has progressed. ## 3. Lead detail page (new) - Opens from the drawer's **Mor only fired a placeholder toast. The board swaps for a full-width lead record; a "← Pipeline" breadcrumb retur - **Hero** — 64px avatar, name, full address, and stage / lead-type / work-type / storm / age pills. - **Stage progress** — percent-complete bar and a seven-step connected stepper. Completed steps get a check irent step gets a ring. - **Overview grid** — Contact, Property, Job Details, Insurance and Assignment, matching the section layout oodal so the two screens stay consistent. Retail leads show an empty state in Insurance instead of blank fields, sinc ## 4. Move Stage - A **Move Stage** dropdown on be re-staged without going back to the board — previously drag-and-drop was the only way. - Stages are grouped into *Pipeh with its tone dot. The current stage is highlighted, checked and disabled. - Both paths now route through ached` advancement and the "Lead moved" toast behave identically whether you drag or pick. - The detail view resolves its lding a snapshot, so a stage move updates the pills, progress bar, stepper and page accent colour live, and the board re ## 5. Data model (`pipeline-dat `PLead` gains the fields the de - `phones[]` (primary mobile + - `source`, `tradeType` (derived from work type; `Multi-Trade` when a job spans two), `urgency` - `insurance` — company, claim status (tracks the stage), claim and policy numbers, adjuster name and ph - `assignment` — assigned to, priority, follow-up date, created by / at All values derive deterministically from the existing rows, with no `Date.now()` or `Math.random()`, so server a ## 6. Styling (`dashboard.css`) - New `pld-*` block reusing thes, so the page recolours to the lead's current stage. - Overview grid collapses to onpper stacks under 720px. - Move Stage is an anchored mencontained scroll) and a **bottom sheet** under 720px with safe-area insets and larger touch rows, so it can never be cliprt viewports (landscape phones) get a tighter cap. - Removed `overflow: hidden` fring the dropdown. The accent bar rounds its own top corners instead. ## Notes for review - Everything is client-side mock data; nothing is wired to be-crm yet. - Insurance / property / assignt taken from the reference `/owner/leads/:id` screen — field labels and section order may need a pass once the real record i - The drawer still has no stage control; from the board it is drag-and-drop or the detail page. Easy to add ed.

Mayur7887 added 3 commits 2026-07-27 13:15:19 +00:00

piplene page 190ef5f58e

feat(pipeline): full-page lead detail with Move Stage picker c63bced08b

Opens from the drawer's "More Details", replacing the placeholder toast.
The board swaps for a full-width lead record; "← Pipeline" goes back.

- Detail page: breadcrumb, hero (avatar, stage/type/storm/age pills,
  Call + Email), stage progress bar + 7-step stepper, and an overview
  grid of Contact / Property / Job Details / Insurance / Assignment.
- Move Stage dropdown so a lead can be re-staged from the detail page,
  not only by dragging on the kanban board. Stage changes now route
  through one setStage() used by both paths, so "reached" advancement
  and the toast behave identically.
- Detail is keyed by lead id rather than a snapshot, so a stage move
  updates the pills, progress, stepper and page accent live.
- pipeline-data: PLead gains phones, propertyType, source, tradeType,
  urgency, insurance (null for Retail jobs) and assignment. All derived
  deterministically from the existing rows — no Date.now, so SSR and
  client render identically.
- Dropdown is a bottom sheet under 720px and an anchored menu above it;
  dropped overflow:hidden on .pld-hero, which was clipping it.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

comment added ec3df3415f

Mayur7887 merged commit 4b86e0d3cc into goutamnextflow

2026-07-29 08:39:51 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: Goutam/lynkeduppro-crm#36