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

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>

src/components/dashboard/pipeline-data.ts

@@ -198,6 +198,42 @@ function noteFor(reached: StageKey, storm: boolean): string {
   }
 }
 
+/* ---------- detail-page derivations (deterministic, no Date.now) ---------- */
+
+const INSURERS  = ["State Farm", "Allstate", "Farmers", "USAA", "Liberty Mutual", "Travelers"];
+const ADJUSTERS = ["Marcus Powell", "Dana Whitfield", "Renee Alvarez", "Curtis Boyd", "Priya Raman", "Gordon Leach"];
+const SETTERS   = ["Cody Tatum", "Shelby Greer", "Hannah Reyes", "Dalton Pruitt", "Travis Boone"];
+const PROPERTY_TYPES = ["Single Family", "Single Family", "Single Family", "Townhome", "Multi-Family"];
+
+// Claim state tracks how far the job has progressed.
+const CLAIM_BY_STAGE: Record<StageKey, string> = {
+  new: "Not Filed", contacted: "Filed", appt: "Adjuster Scheduled",
+  estimate: "Under Review", signed: "Approved", progress: "Approved",
+  complete: "Paid", stuck: "Stalled", followup: "Filed",
+};
+
+function tradeOf(workType: string): string {
+  const hits = [
+    [/roof|chimney/i, "Roofing"],
+    [/siding/i,       "Siding"],
+    [/gutter|fascia/i,"Gutters"],
+    [/window/i,       "Windows"],
+  ] as const;
+  const matched = hits.filter(([re]) => re.test(workType));
+  if (matched.length > 1) return "Multi-Trade";
+  return matched[0]?.[1] ?? "General";
+}
+
+function urgencyOf(storm: boolean, ageDays: number): string {
+  if (storm && ageDays > 100) return "Emergency";
+  return storm ? "High" : "Standard";
+}
+
+function priorityOf(storm: boolean, ageDays: number): string {
+  if (storm) return "High";
+  return ageDays >= 90 ? "Medium" : "Low";
+}
+
 export const LEADS: PLead[] = ROWS.map(([name, stage, reached, address, workType, leadType, rep, storm, ageDays], i) => ({
   id: `SAL-${(101 + i).toString()}`,
   initials: initialsOf(name),
@@ -218,6 +254,30 @@ export const LEADS: PLead[] = ROWS.map(([name, stage, reached, address, workType
   email: emailOf(name),
   notes: NOTE_OVERRIDE[name] ?? noteFor(reached, storm),
   createdAt: fmt(BASE - ageDays * DAY),
+
+  propertyType: PROPERTY_TYPES[i % PROPERTY_TYPES.length],
+  phones: [
+    { number: phoneOf(i), type: "Mobile", primary: true },
+    { number: phoneOf(i + 17), type: i % 3 === 0 ? "Work" : "Home" },
+  ],
+  source: storm ? "Storm Canvass" : ["Door Knock", "Referral", "Inbound Call", "Web Form"][i % 4],
+  tradeType: tradeOf(workType),
+  urgency: urgencyOf(storm, ageDays),
+  insurance: leadType !== "Insurance" ? null : {
+    company: INSURERS[i % INSURERS.length],
+    claimStatus: CLAIM_BY_STAGE[stage],
+    claimNumber: `CLM-2026-${1100 + i}`,
+    policyNumber: `POL-08${1100 + i}`,
+    adjusterName: ADJUSTERS[i % ADJUSTERS.length],
+    adjusterPhone: phoneOf(i + 31),
+  },
+  assignment: {
+    assignedTo: rep,
+    priority: priorityOf(storm, ageDays),
+    followUp: fmt(BASE + (3 + (i % 7)) * DAY),
+    createdBy: SETTERS[i % SETTERS.length],
+    createdAt: fmt(BASE - ageDays * DAY),
+  },
 }));
 
 /** Build the drawer Activity trail from the stage a lead has reached. */

src/components/dashboard/pipeline.tsx

@@ -10,14 +10,18 @@
 //   · Drawer : click a card → right slide-over with a stage
 //              stepper, Details (contact / job / assignment /
 //              notes / timeline) and an Activity trail.
+//   · Page   : "More Details" in the drawer swaps the board for
+//              a full-width lead record (hero + Move Stage picker
+//              + stage stepper + Contact / Property / Job /
+//              Insurance / Assignment).
 // Data comes from pipeline-data.ts (client-side mock).
 // ============================================================
 
-import { useMemo, useState, type DragEvent } from "react";
-import { Avatar, Icon, useToast } from "./ui";
+import { useMemo, useState, type ReactNode } from "react";
+import { Avatar, Btn, Icon, Pill, useToast } from "./ui";
 import {
   LEADS, STAGES, PROGRESSION, pctFor, buildActivity,
-  type PLead, type StageKey,
+  type PLead, type Stage, type StageKey,
 } from "./pipeline-data";
 
 export function Pipeline() {
@@ -25,6 +29,8 @@ export function Pipeline() {
   const [leads, setLeads] = useState<PLead[]>(LEADS);
   const [query, setQuery] = useState("");
   const [selected, setSelected] = useState<PLead | null>(null);
+  // Full-page detail is keyed by id (not a snapshot) so a stage move stays in sync.
+  const [detailId, setDetailId] = useState<string | null>(null);
   const [dragId, setDragId] = useState<string | null>(null);
   const [overStage, setOverStage] = useState<StageKey | null>(null);
 
@@ -37,25 +43,43 @@ export function Pipeline() {
 
   const byStage = (key: StageKey) => filtered.filter((l) => l.stage === key);
 
-  function moveTo(stage: StageKey) {
-    if (!dragId) return;
+  // Single source of truth for a stage change — used by the board's drag-drop
+  // and by the detail page's "Move Stage" picker.
+  function setStage(id: string, stage: StageKey) {
+    const lead = leads.find((l) => l.id === id);
+    if (!lead || lead.stage === stage) return;
     setLeads((prev) =>
       prev.map((l) => {
-        if (l.id !== dragId) return l;
+        if (l.id !== id) return l;
         // Landing on a progression column advances "reached" if it's further along.
         const inProg = PROGRESSION.indexOf(stage);
         const reached = inProg > PROGRESSION.indexOf(l.reached) ? stage : l.reached;
         return { ...l, stage, reached };
       }));
     const label = STAGES.find((s) => s.key === stage)?.label ?? stage;
-    const lead = leads.find((l) => l.id === dragId);
-    if (lead && lead.stage !== stage) toast.push({ tone: "success", title: "Lead moved", desc: `${lead.name} → ${label}` });
+    toast.push({ tone: "success", title: "Lead moved", desc: `${lead.name} → ${label}` });
+  }
+
+  function moveTo(stage: StageKey) {
+    if (dragId) setStage(dragId, stage);
     setDragId(null);
     setOverStage(null);
   }
 
   const stageCount = STAGES.filter((s) => !s.flag).length;
 
+  // Detail takes over the whole view — the board stays mounted behind it in state only.
+  const detail = detailId ? leads.find((l) => l.id === detailId) ?? null : null;
+  if (detail) {
+    return (
+      <LeadDetailPage
+        lead={detail}
+        onBack={() => setDetailId(null)}
+        onMoveStage={(stage) => setStage(detail.id, stage)}
+      />
+    );
+  }
+
   return (
     <div className="view pl">
       {/* ---- head -------------------------------------------- */}
@@ -119,7 +143,11 @@ export function Pipeline() {
         })}
       </div>
 
-      <LeadDrawer lead={selected} onClose={() => setSelected(null)} />
+      <LeadDrawer
+        lead={selected}
+        onClose={() => setSelected(null)}
+        onMore={() => { setDetailId(selected?.id ?? null); setSelected(null); }}
+      />
     </div>
   );
 }
@@ -167,8 +195,7 @@ function PipelineCard({ lead, onOpen, onDragStart, onDragEnd, dragging }: {
 /* Detail drawer                                               */
 /* ---------------------------------------------------------- */
 
-function LeadDrawer({ lead, onClose }: { lead: PLead | null; onClose: () => void }) {
-  const toast = useToast();
+function LeadDrawer({ lead, onClose, onMore }: { lead: PLead | null; onClose: () => void; onMore: () => void }) {
   const [tab, setTab] = useState<"details" | "activity">("details");
   if (!lead) return null;
 
@@ -260,7 +287,7 @@ function LeadDrawer({ lead, onClose }: { lead: PLead | null; onClose: () => void
         </div>
 
         <div className="pl-drawer-foot">
-          <button className="pl-more" onClick={() => toast.push({ tone: "info", title: "Full lead record", desc: `${lead.id} · ${lead.name}` })}>
+          <button className="pl-more" onClick={onMore}>
             <Icon name="arrow" size={15} /> More Details
           </button>
         </div>
@@ -269,7 +296,7 @@ function LeadDrawer({ lead, onClose }: { lead: PLead | null; onClose: () => void
   );
 }
 
-function DSection({ title, children }: { title: string; children: React.ReactNode }) {
+function DSection({ title, children }: { title: string; children: ReactNode }) {
   return (
     <div className="pl-dsec">
       <div className="pl-dsec-head">{title}</div>
@@ -277,3 +304,207 @@ function DSection({ title, children }: { title: string; children: React.ReactNod
     </div>
   );
 }
+
+/* ---------------------------------------------------------- */
+/* Full-page lead detail — opened from the drawer's            */
+/* "More Details". Takes over the Pipeline view; the board     */
+/* is one "← Pipeline" click away.                             */
+/* ---------------------------------------------------------- */
+
+function LeadDetailPage({ lead, onBack, onMoveStage }: {
+  lead: PLead; onBack: () => void; onMoveStage: (stage: StageKey) => void;
+}) {
+  const toast = useToast();
+  const [moveOpen, setMoveOpen] = useState(false);
+  const stage = STAGES.find((s) => s.key === lead.stage);
+  const pct = pctFor(lead.reached);
+  const reachedIdx = PROGRESSION.indexOf(lead.reached);
+  const progStages = STAGES.filter((s) => PROGRESSION.includes(s.key));
+  const primaryPhone = lead.phones.find((p) => p.primary) ?? lead.phones[0];
+
+  return (
+    <div className="view pld" data-tone={stage?.tone}>
+      {/* ---- breadcrumb -------------------------------------- */}
+      <nav className="pld-crumbs" aria-label="Breadcrumb">
+        <button className="pld-back" onClick={onBack}>
+          <Icon name="arrow" size={15} className="pld-back-ic" /> Pipeline
+        </button>
+        <Icon name="chevron-right" size={14} />
+        <span className="pld-crumb-now">{lead.name}</span>
+        <span className="pld-crumb-id">{lead.id}</span>
+      </nav>
+
+      {/* ---- hero -------------------------------------------- */}
+      <header className="pld-hero">
+        <Avatar initials={lead.initials} gradient={lead.gradient} size={64} square />
+        <div className="pld-hero-id">
+          <h1 className="pld-hero-name">{lead.name}</h1>
+          <div className="pld-hero-addr">
+            <Icon name="pin" size={13} /> {lead.address}, {lead.city} {lead.state} {lead.zip}
+          </div>
+          <div className="pld-hero-pills">
+            <Pill tone={stage?.tone ?? "muted"}>{stage?.label}</Pill>
+            <Pill tone="blue">{lead.leadType}</Pill>
+            <Pill tone="muted">{lead.workType}</Pill>
+            {lead.storm && <Pill tone="orange"><Icon name="storm" size={11} /> Storm</Pill>}
+            <Pill tone="muted"><Icon name="clock" size={11} /> {lead.ageDays}d in pipeline</Pill>
+          </div>
+        </div>
+        <div className="pld-hero-actions">
+          <StagePicker current={lead.stage} open={moveOpen} onToggle={setMoveOpen} onPick={onMoveStage} />
+          <Btn variant="outline" icon="phone" onClick={() => toast.push({ tone: "info", title: "Call", desc: `${lead.name} · ${primaryPhone?.number}` })}>Call</Btn>
+          <Btn variant="outline" icon="mail" onClick={() => toast.push({ tone: "info", title: "Email", desc: lead.email })}>Email</Btn>
+        </div>
+      </header>
+
+      {/* ---- stage progress ---------------------------------- */}
+      <section className="pld-progress">
+        <div className="pld-progress-row">
+          <span className="pld-progress-label">{stage?.label}</span>
+          <span className="pld-progress-pct">{pct}% complete</span>
+        </div>
+        <div className="pld-progress-bar"><span style={{ width: `${pct}%` }} /></div>
+        <ol className="pld-steps">
+          {progStages.map((s, i) => (
+            <li
+              key={s.key}
+              className={`pld-step ${i <= reachedIdx ? "done" : ""} ${i === reachedIdx ? "now" : ""}`}
+              data-tone={s.tone}
+            >
+              <span className="pld-step-dot">{i < reachedIdx ? <Icon name="check" size={11} /> : i + 1}</span>
+              <span className="pld-step-label">{s.label}</span>
+            </li>
+          ))}
+        </ol>
+      </section>
+
+      {/* ---- overview ---------------------------------------- */}
+      <div className="pld-grid">
+        <PSection title="Contact" icon="user">
+          <div className="pld-sublabel">Phone Numbers</div>
+          {lead.phones.map((p, i) => (
+            <div className="pld-contact" key={i}>
+              <Icon name="phone" size={14} />
+              <span className="pld-contact-val">{p.number}</span>
+              <span className="pld-contact-tag">{p.type}</span>
+              {p.primary && <Pill tone="green">Primary</Pill>}
+            </div>
+          ))}
+          <div className="pld-sublabel">Email Address</div>
+          <div className="pld-contact">
+            <Icon name="mail" size={14} />
+            <span className="pld-contact-val">{lead.email}</span>
+            <Pill tone="green">Primary</Pill>
+          </div>
+        </PSection>
+
+        <PSection title="Property" icon="owners">
+          <Kv label="Address" value={lead.address} />
+          <Kv label="City" value={lead.city} />
+          <Kv label="State" value={lead.state} />
+          <Kv label="ZIP" value={lead.zip} />
+          <Kv label="Property Type" value={lead.propertyType} />
+        </PSection>
+
+        <PSection title="Job Details" icon="projects">
+          <Kv label="Lead Source" value={lead.source} />
+          <Kv label="Lead Type" value={lead.leadType} />
+          <Kv label="Work Type" value={lead.workType} />
+          <Kv label="Trade Type" value={lead.tradeType} />
+          <Kv label="Urgency" value={lead.urgency} />
+          <Kv label="Sales Rep" value={lead.rep} />
+          <div className="pld-sublabel">Field Notes</div>
+          <p className="pld-notes">{lead.notes}</p>
+        </PSection>
+
+        <PSection title="Insurance" icon="shield">
+          {lead.insurance ? (
+            <>
+              <Kv label="Insurance Company" value={lead.insurance.company} />
+              <Kv label="Claim Status" value={lead.insurance.claimStatus} />
+              <Kv label="Claim Number" value={lead.insurance.claimNumber} />
+              <Kv label="Policy Number" value={lead.insurance.policyNumber} />
+              <Kv label="Adjuster Name" value={lead.insurance.adjusterName} />
+              <Kv label="Adjuster Phone" value={lead.insurance.adjusterPhone} />
+            </>
+          ) : (
+            <div className="pld-empty">
+              <Icon name="shield" size={22} />
+              <p>Retail job — no insurance claim on file.</p>
+            </div>
+          )}
+        </PSection>
+
+        <PSection title="Assignment" icon="team" wide>
+          <div className="pld-assign">
+            <Kv label="Assigned To" value={lead.assignment.assignedTo} />
+            <Kv label="Priority" value={lead.assignment.priority} />
+            <Kv label="Follow-Up Date" value={lead.assignment.followUp} />
+            <Kv label="Created By" value={lead.assignment.createdBy} />
+            <Kv label="Created At" value={lead.assignment.createdAt} />
+          </div>
+        </PSection>
+      </div>
+    </div>
+  );
+}
+
+/** "Move Stage" dropdown — the detail-page equivalent of dragging a card. */
+function StagePicker({ current, open, onToggle, onPick }: {
+  current: StageKey; open: boolean; onToggle: (open: boolean) => void; onPick: (stage: StageKey) => void;
+}) {
+  const groups: { title: string; stages: Stage[] }[] = [
+    { title: "Pipeline stages", stages: STAGES.filter((s) => !s.flag) },
+    { title: "Flags", stages: STAGES.filter((s) => s.flag) },
+  ];
+
+  return (
+    <div className="pld-move" onKeyDown={(e) => { if (e.key === "Escape") onToggle(false); }}>
+      <Btn icon="pipeline" iconRight="chevron" onClick={() => onToggle(!open)}>Move Stage</Btn>
+      {open && (
+        <>
+          <div className="pld-move-scrim" onClick={() => onToggle(false)} />
+          <div className="pld-move-menu" role="menu" aria-label="Move to stage">
+            {groups.map((g) => (
+              <div className="pld-move-group" key={g.title}>
+                <div className="pld-move-grouphead">{g.title}</div>
+                {g.stages.map((s) => (
+                  <button
+                    key={s.key}
+                    role="menuitem"
+                    data-tone={s.tone}
+                    className={`pld-move-item ${s.key === current ? "is-current" : ""}`}
+                    disabled={s.key === current}
+                    onClick={() => { onPick(s.key); onToggle(false); }}
+                  >
+                    <span className="pld-move-dot" />
+                    <span className="pld-move-label">{s.label}</span>
+                    {s.key === current && <Icon name="check" size={14} />}
+                  </button>
+                ))}
+              </div>
+            ))}
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
+
+function PSection({ title, icon, children, wide }: { title: string; icon: string; children: ReactNode; wide?: boolean }) {
+  return (
+    <section className={`pld-sec ${wide ? "wide" : ""}`}>
+      <div className="pld-sec-head"><Icon name={icon} size={15} /> {title}</div>
+      <div className="pld-sec-body">{children}</div>
+    </section>
+  );
+}
+
+function Kv({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="pld-kv">
+      <span className="pld-kv-k">{label}</span>
+      <span className="pld-kv-v">{value}</span>
+    </div>
+  );
+}