From 102b66dfca86ac1961f60ca1fade54345fc25382 Mon Sep 17 00:00:00 2001 From: Goutam Date: Tue, 21 Jul 2026 19:21:42 +0530 Subject: [PATCH] Add Leads pipeline and Lead Verification workspace pages MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Leads: card board with status stats, search + status tabs, a rich lead-detail popup (contact, property, job, insurance, assignment, storm banner) and a New Lead intake form (Quick / Full Form) with multi-phone/email rows, site-photo dropzone and urgency picker. Lead Verification: clickable stat tiles, status/source/assignee filters, a full verification table, a detail popup with an activity timeline, and a per-row actions menu (verify / reassign / pending…). Both wired into the dashboard view switcher and styled with the existing orange brand + glass-card system (dark & light themes). Co-Authored-By: Claude Opus 4.8 (1M context) --- src/app/dashboard/dashboard.css | 229 ++++++++++ src/components/dashboard/dashboard.tsx | 4 + src/components/dashboard/leads-data.ts | 220 ++++++++++ src/components/dashboard/leads.tsx | 543 ++++++++++++++++++++++++ src/components/dashboard/verify-data.ts | 72 ++++ src/components/dashboard/verify.tsx | 306 +++++++++++++ 6 files changed, 1374 insertions(+) create mode 100644 src/components/dashboard/leads-data.ts create mode 100644 src/components/dashboard/leads.tsx create mode 100644 src/components/dashboard/verify-data.ts create mode 100644 src/components/dashboard/verify.tsx diff --git a/src/app/dashboard/dashboard.css b/src/app/dashboard/dashboard.css index de8381a..d625e32 100644 --- a/src/app/dashboard/dashboard.css +++ b/src/app/dashboard/dashboard.css @@ -1140,4 +1140,233 @@ .dash-root .ai-bubble { max-width: 86%; } .dash-root .ai-view { height: calc(100vh - 150px); } } + + /* ========================================================== */ + /* Leads — pipeline board + rich detail popup */ + /* ========================================================== */ + + /* ---- stat strip ---- */ + .dash-root .leads-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 18px; } + .dash-root .leads-stat { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--border); background: var(--card-grad); box-shadow: var(--card-hi); position: relative; overflow: hidden; } + .dash-root .leads-stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--orange); } + .dash-root .leads-stat.tone-blue::before { background: var(--blue); } + .dash-root .leads-stat.tone-purple::before { background: var(--purple); } + .dash-root .leads-stat.tone-green::before { background: var(--green); } + .dash-root .leads-stat.tone-orange::before { background: var(--orange); } + .dash-root .leads-stat-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: color-mix(in srgb, var(--orange) 14%, transparent); color: var(--orange); flex: 0 0 auto; } + .dash-root .leads-stat.tone-blue .leads-stat-ic { background: color-mix(in srgb, var(--blue) 16%, transparent); color: #6f9bff; } + .dash-root .leads-stat.tone-purple .leads-stat-ic { background: color-mix(in srgb, var(--purple) 16%, transparent); color: #b07bf2; } + .dash-root .leads-stat.tone-green .leads-stat-ic { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); } + .dash-root .leads-stat-val { font-size: 22px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; } + .dash-root .leads-stat-lbl { font-size: 11.5px; color: var(--muted); font-weight: 600; margin-top: 4px; } + + /* ---- toolbar ---- */ + .dash-root .leads-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } + .dash-root .leads-search { display: flex; align-items: center; gap: 9px; flex: 1 1 260px; min-width: 220px; height: 42px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--panel); color: var(--muted); } + .dash-root .leads-search:focus-within { border-color: color-mix(in srgb, var(--orange) 55%, var(--border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--orange) 14%, transparent); } + .dash-root .leads-search input { flex: 1; border: 0; background: none; outline: none; color: var(--text); font-family: inherit; font-size: 13.5px; } + .dash-root .leads-search input::placeholder { color: var(--muted); } + .dash-root .leads-search-x { border: 0; background: none; color: var(--muted); cursor: pointer; display: grid; place-items: center; padding: 2px; border-radius: 6px; } + .dash-root .leads-search-x:hover { color: var(--text); background: var(--panel-3); } + .dash-root .leads-tabs { display: inline-flex; gap: 3px; padding: 4px; border-radius: 12px; border: 1px solid var(--border); background: var(--panel); } + .dash-root .leads-tab { border: 0; background: none; color: var(--muted); font-family: inherit; font-size: 12.5px; font-weight: 600; padding: 7px 13px; border-radius: 9px; cursor: pointer; transition: 0.14s; } + .dash-root .leads-tab:hover { color: var(--text-2); } + .dash-root .leads-tab.active { background: var(--orange); color: #1a1205; box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--orange) 60%, transparent); } + + /* ---- board ---- */ + .dash-root .leads-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; } + .dash-root .lead-card { text-align: left; width: 100%; cursor: pointer; display: flex; flex-direction: column; gap: 11px; padding: 16px 17px; border-radius: 18px; border: 1px solid var(--border); background: var(--card-grad); box-shadow: var(--card-hi), 0 1px 2px rgba(0,0,0,0.18); font-family: inherit; color: var(--text); transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease; } + .dash-root .lead-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--orange) 40%, var(--border)); box-shadow: var(--shadow), 0 14px 34px -20px color-mix(in srgb, var(--orange) 50%, transparent); } + .dash-root .lead-card-top { display: flex; align-items: center; gap: 12px; } + .dash-root .lead-ava { position: relative; border-radius: 50%; padding: 3px; display: inline-flex; } + .dash-root .lead-ava.prio-high { box-shadow: 0 0 0 2px color-mix(in srgb, var(--red) 70%, transparent); } + .dash-root .lead-ava.prio-medium { box-shadow: 0 0 0 2px color-mix(in srgb, var(--orange) 70%, transparent); } + .dash-root .lead-ava.prio-low { box-shadow: 0 0 0 2px var(--border-2); } + .dash-root .lead-card-id { flex: 1; min-width: 0; } + .dash-root .lead-card-name { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; } + .dash-root .lead-card-sub { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--muted); margin-top: 2px; } + .dash-root .lead-card-sub svg { color: var(--orange); } + .dash-root .lead-code { font-family: ui-monospace, monospace; font-size: 11px; color: var(--text-2); } + .dash-root .lead-card-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); } + .dash-root .lead-card-row svg { color: var(--muted); flex: 0 0 auto; } + .dash-root .lead-card-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } + .dash-root .lead-card-foot { display: flex; align-items: center; gap: 8px; margin-top: 3px; padding-top: 11px; border-top: 1px solid var(--border); } + .dash-root .lead-source { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--muted); } + .dash-root .lead-card-spacer { flex: 1; } + .dash-root .lead-rep { font-size: 11.5px; color: var(--text-2); font-weight: 600; } + .dash-root .lead-updated { font-size: 10.5px; color: var(--faint, var(--muted)); } + + .dash-root .leads-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 48px 20px; color: var(--muted); } + .dash-root .leads-empty svg { color: var(--muted); margin-bottom: 6px; } + .dash-root .leads-empty h3 { font-size: 16px; color: var(--text); } + + /* ---- detail popup ---- */ + .dash-root .lead-detail { display: flex; flex-direction: column; gap: 16px; } + .dash-root .ld-identity { display: flex; align-items: center; gap: 14px; } + .dash-root .ld-identity-name { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; } + .dash-root .ld-identity-pills { display: flex; gap: 6px; margin-top: 6px; } + .dash-root .ld-storm { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--orange) 30%, var(--border)); background: color-mix(in srgb, var(--orange) 9%, transparent); } + .dash-root .ld-storm-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--orange) 18%, transparent); color: var(--orange); flex: 0 0 auto; } + .dash-root .ld-storm-zone { font-size: 13.5px; font-weight: 700; } + .dash-root .ld-storm-meta { font-size: 12px; color: var(--muted); margin-top: 2px; } + + .dash-root .ld-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } + .dash-root .ld-section { border: 1px solid var(--border); border-radius: 14px; background: var(--panel-2); padding: 14px 15px; } + .dash-root .ld-section.wide { grid-column: 1 / -1; } + .dash-root .ld-section-head { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--orange); margin-bottom: 12px; } + .dash-root .ld-section-body { display: flex; flex-direction: column; gap: 3px; } + .dash-root .ld-dl { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--border); } + .dash-root .ld-dl:last-child { border-bottom: 0; } + .dash-root .ld-dl-k { font-size: 12px; color: var(--muted); flex: 0 0 auto; } + .dash-root .ld-dl-v { font-size: 12.5px; color: var(--text); font-weight: 600; text-align: right; } + .dash-root .ld-assign { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; } + .dash-root .ld-sublabel { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--faint, var(--muted)); font-weight: 700; margin: 8px 0 6px; } + .dash-root .ld-sublabel:first-child { margin-top: 0; } + .dash-root .ld-contact-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 12.5px; color: var(--text); } + .dash-root .ld-contact-row svg { color: var(--muted); flex: 0 0 auto; } + .dash-root .ld-contact-val { font-weight: 600; } + .dash-root .ld-contact-tag { font-size: 10.5px; color: var(--muted); padding: 2px 7px; border-radius: 99px; background: var(--panel-3); } + .dash-root .ld-notes p { font-size: 12.5px; color: var(--text-2); line-height: 1.5; margin-top: 2px; } + + /* ---- New Lead form ---- */ + .dash-root .nl-form { display: flex; flex-direction: column; gap: 16px; } + .dash-root .nl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; } + .dash-root .nl-grid .ds-field { margin-bottom: 0; } + .dash-root .nl-grid > .ds-field, .dash-root .nl-grid > .nl-full { margin-bottom: 14px; } + .dash-root .nl-full { grid-column: 1 / -1; } + .dash-root .nl-full .ds-field { margin-bottom: 0; } + .dash-root .nl-prio { display: flex; gap: 8px; } + .dash-root .nl-prio-btn { flex: 1; height: 42px; border-radius: 11px; border: 1px solid var(--border-2); background: var(--panel-2); color: var(--muted); font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: 0.14s; } + .dash-root .nl-prio-btn:hover { color: var(--text-2); border-color: var(--muted); } + .dash-root .nl-prio-btn.active.low { background: color-mix(in srgb, var(--muted) 22%, transparent); color: var(--text); border-color: var(--muted); } + .dash-root .nl-prio-btn.active.medium { background: color-mix(in srgb, var(--orange) 18%, transparent); color: var(--orange); border-color: color-mix(in srgb, var(--orange) 55%, transparent); } + .dash-root .nl-prio-btn.active.high { background: color-mix(in srgb, var(--red) 18%, transparent); color: var(--red); border-color: color-mix(in srgb, var(--red) 55%, transparent); } + .dash-root .nl-prio-btn.urg.active.standard { background: color-mix(in srgb, var(--muted) 20%, transparent); color: var(--text); border-color: var(--muted); } + .dash-root .nl-prio-btn.urg.active.high { background: color-mix(in srgb, var(--orange) 18%, transparent); color: var(--orange); border-color: color-mix(in srgb, var(--orange) 55%, transparent); } + .dash-root .nl-prio-btn.urg.active.emergency { background: color-mix(in srgb, var(--red) 20%, transparent); color: var(--red); border-color: color-mix(in srgb, var(--red) 60%, transparent); } + + /* multi-value rows (phones / emails) */ + .dash-root .nl-multirow { display: flex; gap: 8px; margin-bottom: 8px; } + .dash-root .nl-multirow .ds-input { flex: 1; } + .dash-root .nl-typesel { flex: 0 0 108px; width: 108px; } + .dash-root .nl-rowx { flex: 0 0 auto; width: 42px; border-radius: 11px; border: 1px solid var(--border-2); background: var(--panel-2); color: var(--muted); cursor: pointer; display: grid; place-items: center; transition: 0.14s; } + .dash-root .nl-rowx:hover { color: var(--red); border-color: color-mix(in srgb, var(--red) 50%, transparent); } + .dash-root .nl-add { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; padding: 8px 13px; border-radius: 10px; border: 1px dashed var(--border-2); background: none; color: var(--orange); font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: 0.14s; } + .dash-root .nl-add:hover { background: color-mix(in srgb, var(--orange) 10%, transparent); border-color: color-mix(in srgb, var(--orange) 45%, transparent); } + .dash-root .nl-empty { font-size: 12.5px; color: var(--faint, var(--muted)); padding: 8px 0 10px; } + + /* site photos dropzone */ + .dash-root .nl-photos { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 22px; border-radius: 14px; border: 1.5px dashed var(--border-2); background: var(--panel-2); color: var(--muted); cursor: pointer; transition: 0.14s; } + .dash-root .nl-photos:hover { border-color: color-mix(in srgb, var(--orange) 50%, transparent); color: var(--orange); background: color-mix(in srgb, var(--orange) 7%, transparent); } + .dash-root .nl-photos-t { font-size: 13px; font-weight: 700; color: var(--text-2); } + .dash-root .nl-photos:hover .nl-photos-t { color: var(--orange); } + .dash-root .nl-photos-s { font-size: 11px; } + .dash-root .nl-photo-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } + .dash-root .nl-photo-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 5px 10px; border-radius: 99px; background: color-mix(in srgb, var(--green) 15%, transparent); color: var(--green); } + .dash-root .ds-select.is-placeholder { color: var(--faint, var(--muted)); } + + /* ========================================================== */ + /* Lead Verification — stat tiles + filters + table */ + /* ========================================================== */ + .dash-root .lv-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 18px; } + .dash-root .lv-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--border); background: var(--card-grad); box-shadow: var(--card-hi); cursor: pointer; text-align: left; font-family: inherit; transition: 0.15s; position: relative; } + .dash-root .lv-stat:hover { border-color: var(--border-2); transform: translateY(-2px); } + .dash-root .lv-stat.active { border-color: color-mix(in srgb, var(--accent, var(--orange)) 60%, transparent); box-shadow: var(--card-hi), 0 0 0 1px color-mix(in srgb, var(--accent, var(--orange)) 40%, transparent); } + .dash-root .lv-stat-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; margin-bottom: 6px; } + .dash-root .lv-stat-val { font-size: 22px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; } + .dash-root .lv-stat-lbl { font-size: 11.5px; color: var(--muted); font-weight: 600; } + .dash-root .lv-stat.tone-green { --accent: var(--green); } .dash-root .lv-stat.tone-green .lv-stat-ic { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); } + .dash-root .lv-stat.tone-orange { --accent: var(--orange); } .dash-root .lv-stat.tone-orange .lv-stat-ic { background: color-mix(in srgb, var(--orange) 16%, transparent); color: var(--orange); } + .dash-root .lv-stat.tone-blue { --accent: var(--blue); } .dash-root .lv-stat.tone-blue .lv-stat-ic { background: color-mix(in srgb, var(--blue) 18%, transparent); color: #6f9bff; } + .dash-root .lv-stat.tone-purple { --accent: var(--purple); } .dash-root .lv-stat.tone-purple .lv-stat-ic { background: color-mix(in srgb, var(--purple) 18%, transparent); color: #b07bf2; } + .dash-root .lv-stat.tone-red { --accent: var(--red); } .dash-root .lv-stat.tone-red .lv-stat-ic { background: color-mix(in srgb, var(--red) 16%, transparent); color: var(--red); } + + .dash-root .lv-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; } + .dash-root .lv-search { display: flex; align-items: center; gap: 9px; flex: 1 1 240px; min-width: 200px; height: 42px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--panel); color: var(--muted); } + .dash-root .lv-search:focus-within { border-color: color-mix(in srgb, var(--orange) 55%, var(--border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--orange) 14%, transparent); } + .dash-root .lv-search input { flex: 1; border: 0; background: none; outline: none; color: var(--text); font-family: inherit; font-size: 13.5px; } + .dash-root .lv-search input::placeholder { color: var(--muted); } + .dash-root .lv-search-x { border: 0; background: none; color: var(--muted); cursor: pointer; display: grid; place-items: center; padding: 2px; border-radius: 6px; } + .dash-root .lv-search-x:hover { color: var(--text); background: var(--panel-3); } + .dash-root .lv-filter { height: 42px; flex: 0 0 auto; width: auto; min-width: 150px; } + + .dash-root .lv-tablewrap { border: 1px solid var(--border); border-radius: 18px; background: var(--card-grad); box-shadow: var(--card-hi); overflow-x: auto; } + .dash-root .lv-table { width: 100%; border-collapse: collapse; min-width: 940px; } + .dash-root .lv-table thead th { text-align: left; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); padding: 14px 16px; border-bottom: 1px solid var(--border); white-space: nowrap; } + .dash-root .lv-table tbody td { padding: 13px 16px; border-bottom: 1px solid var(--border); font-size: 12.5px; vertical-align: middle; } + .dash-root .lv-table tbody tr:last-child td { border-bottom: 0; } + .dash-root .lv-table tbody tr { transition: background 0.12s; } + .dash-root .lv-table tbody tr:hover { background: color-mix(in srgb, var(--orange) 5%, transparent); } + .dash-root .lv-id { font-family: ui-monospace, monospace; font-size: 12px; font-weight: 700; color: var(--text); white-space: nowrap; } + .dash-root .lv-id-date { font-size: 10.5px; color: var(--faint, var(--muted)); margin-top: 2px; } + .dash-root .lv-cust { display: flex; align-items: center; gap: 10px; min-width: 210px; } + .dash-root .lv-cust-name { font-weight: 700; font-size: 13px; color: var(--text); } + .dash-root .lv-cust-addr { font-size: 11px; color: var(--muted); margin-top: 1px; } + .dash-root .lv-phone { color: var(--text-2); white-space: nowrap; } + .dash-root .lv-source { display: inline-block; font-size: 11.5px; font-weight: 600; color: var(--text-2); padding: 4px 10px; border-radius: 99px; background: var(--panel-3); white-space: nowrap; } + .dash-root .lv-assignee { display: flex; align-items: center; gap: 8px; white-space: nowrap; } + .dash-root .lv-assignee span { font-weight: 600; color: var(--text-2); font-size: 12px; } + .dash-root .lv-unassigned { font-size: 11.5px; color: var(--faint, var(--muted)); } + .dash-root .lv-verif { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; white-space: nowrap; color: var(--muted); } + .dash-root .lv-verif.v-verified { color: var(--green); } + .dash-root .lv-verif.v-in_progress { color: var(--orange); } + .dash-root .lv-verif.v-assigned { color: #6f9bff; } + .dash-root .lv-verif.v-pending { color: #b07bf2; } + .dash-root .lv-verif.v-unverified { color: var(--red); } + .dash-root .lv-created { color: var(--muted); white-space: nowrap; } + .dash-root .lv-rowacts { display: flex; gap: 6px; } + .dash-root .lv-act { width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--border-2); background: var(--panel-2); color: var(--muted); cursor: pointer; display: grid; place-items: center; transition: 0.14s; } + .dash-root .lv-act:hover { color: var(--text); border-color: var(--muted); } + .dash-root .lv-act.primary:hover { color: var(--green); border-color: color-mix(in srgb, var(--green) 50%, transparent); background: color-mix(in srgb, var(--green) 10%, transparent); } + .dash-root .lv-empty { text-align: center; color: var(--muted); padding: 40px 16px; font-size: 13px; } + .dash-root .lv-count { font-size: 11.5px; color: var(--muted); margin-top: 12px; text-align: right; } + + /* ---- row actions dropdown (portalled to body) ---- */ + .lv-menu-scrim { position: fixed; inset: 0; z-index: 90; } + .lv-menu { position: fixed; z-index: 91; width: 188px; padding: 6px; border-radius: 12px; border: 1px solid var(--border-2, rgba(255,255,255,0.12)); background: var(--panel, #0e0e13); box-shadow: 0 18px 44px -18px rgba(0,0,0,0.7); animation: ds-rise 0.13s ease; } + .lv-menu-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 10px; border: 0; border-radius: 9px; background: none; color: var(--text-2, #eaeaea); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; text-align: left; } + .lv-menu-item:hover { background: var(--panel-3, #1b1b22); color: var(--text, #fff); } + .lv-menu-item svg { color: var(--muted, #8c8c8c); flex: 0 0 auto; } + .lv-menu-item:hover svg { color: var(--orange, #fda913); } + + /* ---- verification detail popup ---- */ + .dash-root .lv-detail { display: flex; flex-direction: column; gap: 16px; } + .dash-root .lv-d-identity { display: flex; align-items: center; gap: 14px; } + .dash-root .lv-d-name { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; } + .dash-root .lv-d-pills { display: flex; align-items: center; gap: 8px; margin-top: 6px; } + .dash-root .lv-d-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } + .dash-root .lv-d-section, .dash-root .lv-d-notes, .dash-root .lv-d-activity { border: 1px solid var(--border); border-radius: 14px; background: var(--panel-2); padding: 14px 15px; } + .dash-root .lv-d-head { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--orange); margin-bottom: 12px; } + .dash-root .lv-d-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--border); } + .dash-root .lv-d-row:last-child { border-bottom: 0; } + .dash-root .lv-d-k { font-size: 12px; color: var(--muted); flex: 0 0 auto; } + .dash-root .lv-d-v { font-size: 12.5px; color: var(--text); font-weight: 600; text-align: right; } + .dash-root .lv-d-notes p { font-size: 12.5px; color: var(--text-2); line-height: 1.55; margin-top: 2px; } + + .dash-root .lv-timeline { list-style: none; margin: 0; padding: 0; } + .dash-root .lv-tl-item { position: relative; display: flex; gap: 12px; padding: 0 0 16px 4px; } + .dash-root .lv-tl-item::before { content: ""; position: absolute; left: 8px; top: 14px; bottom: -2px; width: 1.5px; background: var(--border-2); } + .dash-root .lv-tl-item:last-child { padding-bottom: 0; } + .dash-root .lv-tl-item:last-child::before { display: none; } + .dash-root .lv-tl-dot { position: relative; z-index: 1; flex: 0 0 auto; width: 10px; height: 10px; margin-top: 4px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 3px color-mix(in srgb, var(--orange) 20%, transparent); } + .dash-root .lv-tl-text { font-size: 12.5px; color: var(--text); font-weight: 600; } + .dash-root .lv-tl-meta { font-size: 11px; color: var(--muted); margin-top: 2px; } + + @media (max-width: 900px) { + .dash-root .lv-d-grid { grid-template-columns: 1fr; } + } + + @media (max-width: 900px) { + .dash-root .leads-stats { grid-template-columns: repeat(2, 1fr); } + .dash-root .ld-grid { grid-template-columns: 1fr; } + .dash-root .ld-assign { grid-template-columns: 1fr; } + .dash-root .lv-stats { grid-template-columns: repeat(3, 1fr); } + .dash-root .lv-filter { flex: 1 1 45%; } + } + @media (max-width: 560px) { + .dash-root .leads-stats { grid-template-columns: 1fr; } + .dash-root .leads-grid { grid-template-columns: 1fr; } + .dash-root .nl-grid { grid-template-columns: 1fr; } + .dash-root .lv-stats { grid-template-columns: repeat(2, 1fr); } + } \ No newline at end of file diff --git a/src/components/dashboard/dashboard.tsx b/src/components/dashboard/dashboard.tsx index d052a4e..b2a0b7c 100644 --- a/src/components/dashboard/dashboard.tsx +++ b/src/components/dashboard/dashboard.tsx @@ -17,6 +17,8 @@ import { AiAssistant } from "./ai-assistant"; import { TeamManagement } from "./team-management"; import { Messenger } from "./messenger"; import { Inbox } from "./inbox"; +import { Leads } from "./leads"; +import { Verify } from "./verify"; import "../../app/dashboard/dashboard.css"; export function Dashboard() { @@ -49,6 +51,8 @@ export function Dashboard() { : active === "ai" ? : active === "messenger" ? : active === "inbox" ? + : active === "leads" ? + : active === "verify" ? : active === "team" ? : } diff --git a/src/components/dashboard/leads-data.ts b/src/components/dashboard/leads-data.ts new file mode 100644 index 0000000..f11c57e --- /dev/null +++ b/src/components/dashboard/leads-data.ts @@ -0,0 +1,220 @@ +// ============================================================ +// LynkedUp Pro — Leads mock data. +// A storm-restoration roofing pipeline: door-knocked leads in +// the Plano, TX hail zone. Each lead carries a rich detail +// record (contact, property, job, insurance, assignment) that +// powers the lead-detail popup. All client-side so the screen +// is fully interactive without a backend. +// ============================================================ + +export type LeadStatus = "new" | "contacted" | "appointed" | "closed"; +export type LeadPriority = "high" | "medium" | "low"; + +export type Phone = { number: string; type: "Mobile" | "Home" | "Work"; primary?: boolean }; +export type Email = { address: string; type?: string; primary?: boolean }; + +export type Lead = { + id: string; // SAL-001 + initials: string; + name: string; + gradient: string; + priority: LeadPriority; + status: LeadStatus; + tag: string; // "Storm Zone" + updated: string; // "3d ago" + setter: string; // compact chip name + + // storm banner + storm: { zone: string; date: string; detail: string }; + + // contact + phones: Phone[]; + emails: Email[]; + + // property + property: { address: string; city: string; state: string; zip: string; type: string }; + + // job details + job: { + source: string; leadType: string; workType: string; tradeType: string; + urgency: string; canvasser: string; notes: string; + }; + + // insurance + insurance: { + company: string; claimStatus: string; claimNumber: string; + policyNumber: string; adjusterName: string; adjusterPhone: string; + }; + + // assignment + assignment: { + assignedTo: string; priority: string; followUp: string; + createdBy: string; createdAt: string; + }; +}; + +const G = { + orange: "linear-gradient(135deg,#fda913,#fd6d13)", + blue: "linear-gradient(135deg,#4f8cff,#2c5cff)", + purple: "linear-gradient(135deg,#b07bf2,#7b53e0)", + green: "linear-gradient(135deg,#33c98a,#1fa46c)", + cyan: "linear-gradient(135deg,#34c9d6,#1f9aa4)", +}; + +export const LEADS: Lead[] = [ + { + id: "SAL-001", initials: "JM", name: "John Martinez", gradient: G.orange, + priority: "high", status: "contacted", tag: "Storm Zone", updated: "3d ago", setter: "Cody", + storm: { zone: "E Plano / Spring Creek Pkwy", date: "2026-04-28", detail: '2.5" hail (severe)' }, + phones: [ + { number: "(469) 500-1000", type: "Mobile", primary: true }, + { number: "(214) 600-2000", type: "Home" }, + ], + emails: [{ address: "john.martinez@gmail.com", primary: true }], + property: { address: "4821 Spring Creek Pkwy", city: "Plano", state: "TX", zip: "75023", type: "Single Family" }, + job: { + source: "Door Knock", leadType: "Insurance", workType: "Roof Replacement", tradeType: "Roofing", + urgency: "High", canvasser: "Cody Tatum", + notes: "Homeowner showed significant granule loss on south-facing slopes; agreed to inspection.", + }, + insurance: { + company: "State Farm", claimStatus: "Filed", claimNumber: "CLM-2026-1000", + policyNumber: "POL-080000", adjusterName: "Marcus Powell", adjusterPhone: "(972) 700-3000", + }, + assignment: { + assignedTo: "Jesus Gonzales", priority: "High", followUp: "Jun 4, 2026", + createdBy: "Cody Tatum", createdAt: "May 28, 2026", + }, + }, + { + id: "SAL-002", initials: "SK", name: "Sarah Kim", gradient: G.purple, + priority: "high", status: "appointed", tag: "Storm Zone", updated: "2d ago", setter: "Shelby", + storm: { zone: "E Plano / Custer Rd", date: "2026-04-28", detail: '2.5" hail (severe)' }, + phones: [ + { number: "(972) 501-1037", type: "Mobile", primary: true }, + { number: "(214) 601-2044", type: "Home" }, + ], + emails: [{ address: "sarah.kim@outlook.com", primary: true }], + property: { address: "4905 Custer Rd", city: "Plano", state: "TX", zip: "75023", type: "Single Family" }, + job: { + source: "Door Knock", leadType: "Insurance", workType: "Roof Replacement", tradeType: "Roofing", + urgency: "High", canvasser: "Hannah Reyes", + notes: "Visible mat exposure on rear elevation. Appointment set for adjuster meet.", + }, + insurance: { + company: "Allstate", claimStatus: "Approved", claimNumber: "CLM-2026-1037", + policyNumber: "POL-081037", adjusterName: "Dana Whitfield", adjusterPhone: "(972) 700-3037", + }, + assignment: { + assignedTo: "Hannah Reyes", priority: "High", followUp: "Jun 6, 2026", + createdBy: "Shelby Greer", createdAt: "May 29, 2026", + }, + }, + { + id: "SAL-003", initials: "RC", name: "Robert Chen", gradient: G.green, + priority: "high", status: "closed", tag: "Storm Zone", updated: "2d ago", setter: "Dalton", + storm: { zone: "E Plano / Independence Pkwy", date: "2026-04-28", detail: '2.5" hail (severe)' }, + phones: [ + { number: "(469) 502-1074", type: "Mobile", primary: true }, + ], + emails: [{ address: "robert.chen@gmail.com", primary: true }], + property: { address: "5012 Independence Pkwy", city: "Plano", state: "TX", zip: "75023", type: "Single Family" }, + job: { + source: "Door Knock", leadType: "Insurance", workType: "Roof Replacement", tradeType: "Roofing", + urgency: "High", canvasser: "Travis Boone", + notes: "Full replacement approved and installed. Final invoice cleared.", + }, + insurance: { + company: "Farmers", claimStatus: "Paid", claimNumber: "CLM-2026-1074", + policyNumber: "POL-081074", adjusterName: "Leah Ortiz", adjusterPhone: "(972) 700-3074", + }, + assignment: { + assignedTo: "Travis Boone", priority: "High", followUp: "—", + createdBy: "Dalton Pruitt", createdAt: "May 20, 2026", + }, + }, + { + id: "SAL-004", initials: "MG", name: "Maria Garcia", gradient: G.cyan, + priority: "high", status: "closed", tag: "Storm Zone", updated: "2d ago", setter: "Hannah", + storm: { zone: "E Plano / Alma Dr", date: "2026-04-28", detail: '2.5" hail (severe)' }, + phones: [ + { number: "(972) 503-1111", type: "Mobile", primary: true }, + ], + emails: [{ address: "maria.garcia@gmail.com", primary: true }], + property: { address: "4720 Alma Dr", city: "Plano", state: "TX", zip: "75023", type: "Single Family" }, + job: { + source: "Door Knock", leadType: "Insurance", workType: "Roof Replacement", tradeType: "Roofing", + urgency: "High", canvasser: "Shelby Greer", + notes: "Signed contract; build complete. Awaiting review request.", + }, + insurance: { + company: "USAA", claimStatus: "Paid", claimNumber: "CLM-2026-1111", + policyNumber: "POL-081111", adjusterName: "Grant Mueller", adjusterPhone: "(972) 700-3111", + }, + assignment: { + assignedTo: "Shelby Greer", priority: "High", followUp: "—", + createdBy: "Hannah Reyes", createdAt: "May 18, 2026", + }, + }, + { + id: "SAL-005", initials: "DT", name: "David Thompson", gradient: G.blue, + priority: "high", status: "appointed", tag: "Storm Zone", updated: "1d ago", setter: "Travis", + storm: { zone: "E Plano / Spring Creek Pkwy", date: "2026-04-28", detail: '2.5" hail (severe)' }, + phones: [ + { number: "(469) 504-1148", type: "Mobile", primary: true }, + { number: "(214) 604-2148", type: "Work" }, + ], + emails: [{ address: "david.thompson@gmail.com", primary: true }], + property: { address: "5130 Spring Creek Pkwy", city: "Plano", state: "TX", zip: "75023", type: "Single Family" }, + job: { + source: "Door Knock", leadType: "Insurance", workType: "Roof Replacement", tradeType: "Roofing", + urgency: "High", canvasser: "Dalton Pruitt", + notes: "Adjuster appointment confirmed for next week. Bring hail map + photos.", + }, + insurance: { + company: "Liberty Mutual", claimStatus: "Filed", claimNumber: "CLM-2026-1148", + policyNumber: "POL-081148", adjusterName: "Priya Nair", adjusterPhone: "(972) 700-3148", + }, + assignment: { + assignedTo: "Dalton Pruitt", priority: "High", followUp: "Jun 9, 2026", + createdBy: "Travis Boone", createdAt: "May 30, 2026", + }, + }, +]; + +// Header stat — the full book is larger than the loaded page. +export const TOTAL_LEADS = 35; + +export const STATUS_META: Record = { + new: { label: "New", tone: "blue" }, + contacted: { label: "Contacted", tone: "orange" }, + appointed: { label: "Appointed", tone: "purple" }, + closed: { label: "Closed", tone: "green" }, +}; + +export const PRIORITY_META: Record = { + high: { label: "High", tone: "red" }, + medium: { label: "Medium", tone: "orange" }, + low: { label: "Low", tone: "muted" }, +}; + +/* ---------------------------------------------------------- */ +/* Reps + option lists — power the New Lead form */ +/* ---------------------------------------------------------- */ + +export type Rep = { id: string; initials: string; name: string }; + +export const REPS: Rep[] = [ + { id: "LUP-1040", initials: "CT", name: "Cody Tatum" }, + { id: "LUP-1041", initials: "HR", name: "Hannah Reyes" }, + { id: "LUP-1042", initials: "TB", name: "Travis Boone" }, + { id: "LUP-1043", initials: "SG", name: "Shelby Greer" }, + { id: "LUP-1044", initials: "DP", name: "Dalton Pruitt" }, +]; + +export const LEAD_SOURCES = ["Door Knock", "Referral", "Web Form", "Call-In", "Storm Canvass"]; +export const LEAD_TYPES = ["Insurance", "Retail"]; +export const WORK_TYPES = ["Roof Replacement", "Roof Repair", "Inspection", "Gutter Install"]; +export const TRADE_TYPES = ["Roofing", "Gutters", "Siding", "Windows"]; +export const PROPERTY_TYPES = ["Single Family", "Multi Family", "Commercial"]; +export const CLAIM_STATUSES = ["Not Filed", "Filed", "Approved", "Paid", "Denied"]; diff --git a/src/components/dashboard/leads.tsx b/src/components/dashboard/leads.tsx new file mode 100644 index 0000000..22e6e2d --- /dev/null +++ b/src/components/dashboard/leads.tsx @@ -0,0 +1,543 @@ +"use client"; + +// ============================================================ +// Leads — storm-restoration pipeline board. +// · Hero head : storm banner + headline stats (by status) +// · Toolbar : search + status filter tabs +// · Board : lead cards (avatar, priority ring, status, +// address, phone, source, rep, updated) +// · Detail : click a lead → rich popup with Contact, +// Property, Job Details, Insurance, Assignment +// Data comes from leads-data.ts (client-side mock). +// ============================================================ + +import { useMemo, useState, type ReactNode } from "react"; +import { Avatar, Btn, Field, Icon, Modal, PageHead, Pill, Segmented, SegTabs, useToast } from "./ui"; +import { + LEADS, TOTAL_LEADS, STATUS_META, PRIORITY_META, + REPS, LEAD_SOURCES, WORK_TYPES, TRADE_TYPES, CLAIM_STATUSES, + type Lead, type LeadStatus, +} from "./leads-data"; + +const STATUS_TABS: { value: "all" | LeadStatus; label: string }[] = [ + { value: "all", label: "All" }, + { value: "new", label: "New" }, + { value: "contacted", label: "Contacted" }, + { value: "appointed", label: "Appointed" }, + { value: "closed", label: "Closed" }, +]; + +export function Leads() { + const toast = useToast(); + const [query, setQuery] = useState(""); + const [filter, setFilter] = useState<"all" | LeadStatus>("all"); + const [selected, setSelected] = useState(null); + const [newOpen, setNewOpen] = useState(false); + + const countByStatus = useMemo(() => { + const m: Record = {}; + for (const l of LEADS) m[l.status] = (m[l.status] ?? 0) + 1; + return m; + }, []); + + const filtered = useMemo(() => { + const q = query.trim().toLowerCase(); + return LEADS.filter((l) => { + const matchStatus = filter === "all" || l.status === filter; + const hay = `${l.name} ${l.property.address} ${l.property.city} ${l.job.source} ${l.job.canvasser}`.toLowerCase(); + return matchStatus && (!q || hay.includes(q)); + }); + }, [query, filter]); + + return ( +
+ setNewOpen(true)}>New Lead} + /> + + {/* ---- stat strip ---------------------------------------- */} +
+ + + + + +
+ + {/* ---- toolbar ------------------------------------------- */} +
+
+ + setQuery(e.target.value)} + placeholder="Search by name, address, source…" + aria-label="Search leads" + /> + {query && } +
+
+ {STATUS_TABS.map((t) => ( + + ))} +
+
+ + {/* ---- board --------------------------------------------- */} + {filtered.length === 0 ? ( +
+ +

No leads match

+

Try a different search or clear the status filter.

+
+ ) : ( +
+ {filtered.map((l) => ( + setSelected(l)} /> + ))} +
+ )} + + setSelected(null)} /> + setNewOpen(false)} /> +
+ ); +} + +/* ---------------------------------------------------------- */ +/* Stat card */ +/* ---------------------------------------------------------- */ + +function StatCard({ label, value, icon, tone }: { label: string; value: number; icon: string; tone: string }) { + return ( +
+ +
+
{value}
+
{label}
+
+
+ ); +} + +/* ---------------------------------------------------------- */ +/* Lead card */ +/* ---------------------------------------------------------- */ + +function LeadCard({ lead, onOpen }: { lead: Lead; onOpen: () => void }) { + const status = STATUS_META[lead.status]; + const priority = PRIORITY_META[lead.priority]; + const primaryPhone = lead.phones.find((p) => p.primary) ?? lead.phones[0]; + + return ( + + ); +} + +/* ---------------------------------------------------------- */ +/* Lead detail popup */ +/* ---------------------------------------------------------- */ + +function LeadDetail({ lead, onClose }: { lead: Lead | null; onClose: () => void }) { + if (!lead) return null; + const status = STATUS_META[lead.status]; + const priority = PRIORITY_META[lead.priority]; + + return ( + + Call + Email + Update Status + + } + > +
+ {/* identity strip */} +
+ +
+
{lead.name}
+
+ {status.label} + {priority.label} +
+
+
+ + {/* storm banner */} +
+ +
+
{lead.storm.zone}
+
{lead.storm.date} · {lead.storm.detail}
+
+
+ +
+ {/* Contact */} +
+
Phone Numbers
+ {lead.phones.map((p, i) => ( +
+ + {p.number} + {p.type} + {p.primary && Primary} +
+ ))} +
Email Addresses
+ {lead.emails.map((e, i) => ( +
+ + {e.address} + {e.primary && Primary} +
+ ))} +
+ + {/* Property */} +
+
+
+
+
+
+
+ + {/* Job Details */} +
+
+
+
+
+
+
+
+
Field Notes
+

{lead.job.notes}

+
+
+ + {/* Insurance */} +
+
+
+
+
+
+
+
+ + {/* Assignment */} +
+
+
+
+
+
+
+
+
+
+
+ + ); +} + +function Section({ title, icon, children, wide }: { title: string; icon: string; children: ReactNode; wide?: boolean }) { + return ( +
+
{title}
+
{children}
+
+ ); +} + +function Dl({ label, value }: { label: string; value: string }) { + return ( +
+ {label} + {value} +
+ ); +} + +/* ---------------------------------------------------------- */ +/* New Lead — Quick / Full Form intake */ +/* ---------------------------------------------------------- */ + +type Priority = "Low" | "Medium" | "High"; +type Urgency = "Standard" | "High" | "Emergency"; +type PhoneRow = { number: string; type: string }; +type EmailRow = { address: string }; + +const LEAD_TYPE_OPTS = ["Residential", "Commercial", "Multi-Family"]; +const PROPERTY_TYPE_OPTS = ["Residential", "Commercial", "Multi-Family", "Industrial"]; + +const BLANK = { + firstName: "", lastName: "", + phones: [{ number: "", type: "Mobile" }] as PhoneRow[], + emails: [] as EmailRow[], + address: "", city: "", state: "TX", zip: "", propertyType: "", + photos: [] as string[], + source: "", leadType: "", workType: "", tradeType: "", urgency: "Standard" as Urgency, notes: "", + insCompany: "", claimNumber: "", claimStatus: "", adjusterName: "", adjusterPhone: "", policyNumber: "", + assignRep: "", priority: "Medium" as Priority, followUp: "", +}; + +function NewLead({ open, onClose }: { open: boolean; onClose: () => void }) { + const toast = useToast(); + const [mode, setMode] = useState<"quick" | "full">("quick"); + const [section, setSection] = useState("contact"); + const [f, setF] = useState({ ...BLANK }); + + const set = (k: string) => (e: { target: { value: string } }) => + setF((s) => ({ ...s, [k]: e.target.value }) as typeof BLANK); + + // multi-value handlers + const addPhone = () => setF((s) => ({ ...s, phones: [...s.phones, { number: "", type: "Mobile" }] })); + const setPhone = (i: number, key: "number" | "type", v: string) => setF((s) => ({ ...s, phones: s.phones.map((p, j) => (j === i ? { ...p, [key]: v } : p)) })); + const removePhone = (i: number) => setF((s) => ({ ...s, phones: s.phones.filter((_, j) => j !== i) })); + const addEmail = () => setF((s) => ({ ...s, emails: [...s.emails, { address: "" }] })); + const setEmail = (i: number, v: string) => setF((s) => ({ ...s, emails: s.emails.map((e, j) => (j === i ? { address: v } : e)) })); + const removeEmail = (i: number) => setF((s) => ({ ...s, emails: s.emails.filter((_, j) => j !== i) })); + const addPhoto = () => setF((s) => ({ ...s, photos: [...s.photos, `Photo ${s.photos.length + 1}`] })); + + function reset() { setF({ ...BLANK, phones: [{ number: "", type: "Mobile" }], emails: [], photos: [] }); setMode("quick"); setSection("contact"); } + function close() { reset(); onClose(); } + + function submit() { + const name = `${f.firstName} ${f.lastName}`.trim(); + if (!name) { toast.push({ tone: "error", title: "Name required", desc: "Enter the homeowner's first or last name." }); return; } + toast.push({ tone: "success", title: "Lead created", desc: `${name} added to the Plano pipeline.` }); + close(); + } + + const repOptions = [{ id: "", initials: "—", name: "Unassigned" }, ...REPS]; + + return ( + + Cancel + Create Lead + + } + > +
+ setMode(v as "quick" | "full")} + options={[{ value: "quick", label: "Quick", icon: "star" }, { value: "full", label: "Full Form", icon: "edit" }]} + /> + + {mode === "quick" ? ( +
+ + + setPhone(0, "number", e.target.value)} placeholder="(555) 000-0000" /> +
+ + + + +
setF((s) => ({ ...s, priority: p }))} />
+ +
+ ) : ( + <> + + + {section === "contact" && ( +
+ + + +
+
Phone Numbers
+ {f.phones.map((p, i) => ( +
+ setPhone(i, "number", e.target.value)} placeholder="(555) 000-0000" /> + + {f.phones.length > 1 && } +
+ ))} + +
+ +
+
Email Addresses
+ {f.emails.length === 0 &&
No emails added yet.
} + {f.emails.map((em, i) => ( +
+ setEmail(i, e.target.value)} placeholder="name@email.com" /> + +
+ ))} + +
+
+ )} + + {section === "property" && ( +
+
+ + + + + +