From c63bced08b49ae80b8dc5f61ed01e952e444adbe Mon Sep 17 00:00:00 2001 From: Mayur Shinde Date: Mon, 27 Jul 2026 18:27:55 +0530 Subject: [PATCH] feat(pipeline): full-page lead detail with Move Stage picker MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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) --- src/app/dashboard/dashboard.css | 115 ++++++++++ src/components/dashboard/pipeline-data.ts | 60 +++++ src/components/dashboard/pipeline.tsx | 257 ++++++++++++++++++++-- 3 files changed, 419 insertions(+), 13 deletions(-) diff --git a/src/app/dashboard/dashboard.css b/src/app/dashboard/dashboard.css index 86930a6..a7eccdc 100644 --- a/src/app/dashboard/dashboard.css +++ b/src/app/dashboard/dashboard.css @@ -1647,7 +1647,122 @@ .dash-root .pl-more { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 44px; border: 0; border-radius: 12px; background: var(--blue); color: #fff; font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: filter .14s; } .dash-root .pl-more:hover { filter: brightness(1.08); } + /* ======================================================================= + Pipeline — full-page lead detail (from the drawer's "More Details") + ======================================================================= */ + .dash-root .pld { display: flex; flex-direction: column; gap: 16px; } + + /* ---- breadcrumb ---- */ + .dash-root .pld-crumbs { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--faint); } + .dash-root .pld-back { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 0; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer; transition: color .14s; } + .dash-root .pld-back:hover { color: var(--orange); } + .dash-root .pld-back-ic { transform: rotate(180deg); } + .dash-root .pld-crumb-now { color: var(--text); font-weight: 600; } + .dash-root .pld-crumb-id { margin-left: 2px; padding: 2px 7px; border-radius: 6px; background: var(--panel-2); border: 1px solid var(--border); font-size: 11px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; } + + /* ---- hero ---- */ + /* No `overflow: hidden` here — it would clip the Move Stage dropdown. The + accent bar rounds its own top corners instead. */ + .dash-root .pld-hero { display: flex; align-items: flex-start; gap: 16px; padding: 18px 20px; border-radius: 16px; border: 1px solid var(--border); background: var(--panel); position: relative; } + .dash-root .pld-hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; border-radius: 16px 16px 0 0; background: linear-gradient(90deg, var(--pl-accent), transparent); } + .dash-root .pld-hero-id { flex: 1; min-width: 0; } + .dash-root .pld-hero-name { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); } + .dash-root .pld-hero-addr { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 13px; color: var(--muted); } + .dash-root .pld-hero-addr svg { flex: 0 0 auto; color: var(--faint); } + .dash-root .pld-hero-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 12px; } + .dash-root .pld-hero-actions { display: flex; gap: 8px; flex: 0 0 auto; } + + /* ---- move stage dropdown ---- */ + .dash-root .pld-move { position: relative; } + .dash-root .pld-move-scrim { position: fixed; inset: 0; z-index: 40; } + .dash-root .pld-move-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 41; width: 232px; max-height: min(60vh, 420px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 6px; border-radius: 14px; border: 1px solid var(--border-2); background: var(--panel); box-shadow: var(--shadow-lg, 0 18px 44px -12px rgba(0,0,0,0.55)); animation: ds-fade .14s ease; } + .dash-root .pld-move-menu::-webkit-scrollbar { width: 6px; } + .dash-root .pld-move-menu::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 99px; } + .dash-root .pld-move-group + .pld-move-group { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--border); } + .dash-root .pld-move-grouphead { padding: 7px 10px 5px; font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--faint); } + .dash-root .pld-move-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border: 0; border-radius: 9px; background: none; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--text-2); text-align: left; cursor: pointer; transition: background .12s, color .12s; } + .dash-root .pld-move-item:hover:not(:disabled) { background: color-mix(in srgb, var(--pl-accent) 12%, transparent); color: var(--text); } + .dash-root .pld-move-item:disabled { cursor: default; color: var(--text); } + .dash-root .pld-move-item.is-current { background: var(--panel-2); } + .dash-root .pld-move-item svg { margin-left: auto; color: var(--pl-accent); flex: 0 0 auto; } + .dash-root .pld-move-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pl-accent); flex: 0 0 auto; box-shadow: 0 0 8px color-mix(in srgb, var(--pl-accent) 55%, transparent); } + .dash-root .pld-move-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } + + /* ---- stage progress ---- */ + .dash-root .pld-progress { padding: 16px 20px; border-radius: 16px; border: 1px solid var(--border); background: var(--panel); } + .dash-root .pld-progress-row { display: flex; align-items: baseline; justify-content: space-between; } + .dash-root .pld-progress-label { font-size: 14px; font-weight: 700; color: var(--text); } + .dash-root .pld-progress-pct { font-size: 13px; font-weight: 700; color: var(--pl-accent); font-variant-numeric: tabular-nums; } + .dash-root .pld-progress-bar { height: 6px; border-radius: 99px; background: var(--track); overflow: hidden; margin: 10px 0 16px; } + .dash-root .pld-progress-bar > span { display: block; height: 100%; background: linear-gradient(90deg, color-mix(in srgb, var(--pl-accent) 55%, transparent), var(--pl-accent)); border-radius: inherit; transition: width .3s ease; } + + .dash-root .pld-steps { display: flex; flex-wrap: wrap; gap: 10px 6px; list-style: none; margin: 0; padding: 0; } + .dash-root .pld-step { display: flex; align-items: center; gap: 7px; flex: 1 1 120px; min-width: 0; position: relative; } + .dash-root .pld-step::after { content: ""; position: absolute; left: 22px; right: 4px; top: 11px; height: 2px; background: var(--border); z-index: 0; } + .dash-root .pld-step:last-child::after { display: none; } + .dash-root .pld-step.done::after { background: var(--pl-accent); } + .dash-root .pld-step.now::after, .dash-root .pld-step.now ~ .pld-step::after { background: var(--border); } + .dash-root .pld-step-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto; background: var(--panel-2); border: 1px solid var(--border-2); color: var(--faint); font-size: 10.5px; font-weight: 700; } + .dash-root .pld-step.done .pld-step-dot { background: var(--pl-accent); border-color: var(--pl-accent); color: #fff; } + .dash-root .pld-step.now .pld-step-dot { box-shadow: 0 0 0 4px color-mix(in srgb, var(--pl-accent) 20%, transparent); } + .dash-root .pld-step-label { font-size: 11.5px; font-weight: 600; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: var(--panel); padding-right: 6px; position: relative; z-index: 1; } + .dash-root .pld-step.done .pld-step-label { color: var(--text-2); } + .dash-root .pld-step.now .pld-step-label { color: var(--text); } + + /* ---- overview grid ---- */ + .dash-root .pld-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } + .dash-root .pld-sec { border: 1px solid var(--border); border-radius: 14px; background: var(--panel); overflow: hidden; } + .dash-root .pld-sec.wide { grid-column: 1 / -1; } + .dash-root .pld-sec-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--panel-2); font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-2); } + .dash-root .pld-sec-head svg { color: var(--pl-accent); } + .dash-root .pld-sec-body { padding: 8px 16px 14px; } + + .dash-root .pld-kv { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px dashed var(--border); } + .dash-root .pld-kv:last-child { border-bottom: 0; } + .dash-root .pld-kv-k { font-size: 12px; color: var(--muted); flex: 0 0 auto; } + .dash-root .pld-kv-v { font-size: 13px; font-weight: 600; color: var(--text); text-align: right; min-width: 0; overflow-wrap: anywhere; } + + .dash-root .pld-sublabel { font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--faint); margin: 12px 0 6px; } + .dash-root .pld-sec-body > .pld-sublabel:first-child { margin-top: 4px; } + .dash-root .pld-contact { display: flex; align-items: center; gap: 9px; padding: 7px 0; font-size: 13px; } + .dash-root .pld-contact svg { color: var(--muted); flex: 0 0 auto; } + .dash-root .pld-contact-val { font-weight: 600; color: var(--text); min-width: 0; overflow-wrap: anywhere; } + .dash-root .pld-contact-tag { font-size: 11px; color: var(--muted); padding: 2px 7px; border-radius: 6px; background: var(--panel-2); border: 1px solid var(--border); } + .dash-root .pld-notes { font-size: 13px; line-height: 1.55; color: var(--text-2); margin: 0; padding: 11px 13px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel-2); } + + .dash-root .pld-assign { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 24px; } + .dash-root .pld-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 12px; color: var(--faint); text-align: center; } + .dash-root .pld-empty p { margin: 0; font-size: 12.5px; } + + @media (max-width: 980px) { + .dash-root .pld-grid { grid-template-columns: 1fr; } + } @media (max-width: 720px) { .dash-root .pl-search { width: 100%; max-width: none; } .dash-root .pl-col { flex-basis: 82vw; width: 82vw; } + .dash-root .pld-hero { flex-wrap: wrap; } + .dash-root .pld-hero-actions { width: 100%; } + .dash-root .pld-hero-actions > * { flex: 1; } + .dash-root .pld-move > .ds-btn { width: 100%; } + .dash-root .pld-step { flex: 1 1 100%; } + .dash-root .pld-step::after { display: none; } + + /* Phones: a bottom sheet can't be clipped or pushed off-screen the way an + anchored dropdown can, and every stage stays thumb-reachable. */ + .dash-root .pld-move-scrim { background: rgba(0,0,0,0.5); z-index: 90; animation: ds-fade .16s ease; } + .dash-root .pld-move-menu { + position: fixed; z-index: 91; + top: auto; right: 12px; left: 12px; bottom: max(12px, env(safe-area-inset-bottom)); + width: auto; max-height: 72vh; padding: 8px; + border-radius: 18px; box-shadow: 0 -10px 44px -12px rgba(0,0,0,0.6); + animation: pld-sheet .2s cubic-bezier(.2,.7,.3,1); + } + .dash-root .pld-move-item { padding: 11px 12px; font-size: 14px; } + } + @keyframes pld-sheet { from { transform: translateY(14px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } + + /* Short viewports (landscape phones, small laptops): keep the anchored menu + inside the screen rather than letting it run past the fold. */ + @media (min-width: 721px) and (max-height: 620px) { + .dash-root .pld-move-menu { max-height: 48vh; } } diff --git a/src/components/dashboard/pipeline-data.ts b/src/components/dashboard/pipeline-data.ts index c43ab83..ac0f7bd 100644 --- a/src/components/dashboard/pipeline-data.ts +++ b/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 = { + 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. */ diff --git a/src/components/dashboard/pipeline.tsx b/src/components/dashboard/pipeline.tsx index 4e721c3..89d2aa2 100644 --- a/src/components/dashboard/pipeline.tsx +++ b/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(LEADS); const [query, setQuery] = useState(""); const [selected, setSelected] = useState(null); + // Full-page detail is keyed by id (not a snapshot) so a stage move stays in sync. + const [detailId, setDetailId] = useState(null); const [dragId, setDragId] = useState(null); const [overStage, setOverStage] = useState(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 ( + setDetailId(null)} + onMoveStage={(stage) => setStage(detail.id, stage)} + /> + ); + } + return (
{/* ---- head -------------------------------------------- */} @@ -119,7 +143,11 @@ export function Pipeline() { })}
- setSelected(null)} /> + setSelected(null)} + onMore={() => { setDetailId(selected?.id ?? null); setSelected(null); }} + /> ); } @@ -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
-
@@ -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 (
{title}
@@ -277,3 +304,207 @@ function DSection({ title, children }: { title: string; children: React.ReactNod
); } + +/* ---------------------------------------------------------- */ +/* 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 ( +
+ {/* ---- breadcrumb -------------------------------------- */} + + + {/* ---- hero -------------------------------------------- */} +
+ +
+

{lead.name}

+
+ {lead.address}, {lead.city} {lead.state} {lead.zip} +
+
+ {stage?.label} + {lead.leadType} + {lead.workType} + {lead.storm && Storm} + {lead.ageDays}d in pipeline +
+
+
+ + toast.push({ tone: "info", title: "Call", desc: `${lead.name} · ${primaryPhone?.number}` })}>Call + toast.push({ tone: "info", title: "Email", desc: lead.email })}>Email +
+
+ + {/* ---- stage progress ---------------------------------- */} +
+
+ {stage?.label} + {pct}% complete +
+
+
    + {progStages.map((s, i) => ( +
  1. + {i < reachedIdx ? : i + 1} + {s.label} +
    2. + ))} +
+
+ + {/* ---- overview ---------------------------------------- */} +
+ +
Phone Numbers
+ {lead.phones.map((p, i) => ( +
+ + {p.number} + {p.type} + {p.primary && Primary} +
+ ))} +
Email Address
+
+ + {lead.email} + Primary +
+ + + + + + + + + + + + + + + + + +
Field Notes
+

{lead.notes}

+ + + + {lead.insurance ? ( + <> + + + + + + + + ) : ( +
+ +

Retail job — no insurance claim on file.

+
+ )} + + + +
+ + + + + +
+ +
+
+ ); +} + +/** "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 ( +
{ if (e.key === "Escape") onToggle(false); }}> + onToggle(!open)}>Move Stage + {open && ( + <> +
onToggle(false)} /> +
+ {groups.map((g) => ( +
+
{g.title}
+ {g.stages.map((s) => ( + + ))} +
+ ))} +
+ + )} +
+ ); +} + +function PSection({ title, icon, children, wide }: { title: string; icon: string; children: ReactNode; wide?: boolean }) { + return ( +
+
{title}
+
{children}
+
+ ); +} + +function Kv({ label, value }: { label: string; value: string }) { + return ( +
+ {label} + {value} +
+ ); +}