Merge remote-tracking branch 'origin/goutamnextflow' into feat/projects
# Conflicts: # src/app/dashboard/dashboard.css # src/components/dashboard/dashboard.tsx # src/components/dashboard/ui.tsx
This commit is contained in:
abe-kap
@@ -19,17 +19,48 @@ import { MessengerSdk } from "./messenger-sdk";
|
||||
import { InboxSdk } from "./inbox-sdk";
|
||||
import { Settings } from "./settings";
|
||||
import { Projects } from "./projects";
|
||||
import { NotificationCenter } from "./notification-center";
|
||||
import { RealtimeProvider } from "@/lib/realtime";
|
||||
import { SmartGallery } from "./smart-gallery";
|
||||
import { Leads } from "./leads";
|
||||
import { Verify } from "./verify";
|
||||
import "../../app/dashboard/dashboard.css";
|
||||
|
||||
export function Dashboard() {
|
||||
const [theme, setTheme] = useState<"dark" | "light">("dark");
|
||||
const [active, setActive] = useState("dashboard");
|
||||
// Deep link from global search: which conversation to focus once we switch tabs.
|
||||
const [deepLink, setDeepLink] = useState<{ surface: "messenger" | "inbox"; threadId: string } | null>(null);
|
||||
|
||||
function navigateToConversation(surface: "messenger" | "inbox", threadId: string) {
|
||||
setActive(surface);
|
||||
setDeepLink({ surface, threadId });
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
// Sync the persisted theme from localStorage (an external system) on mount.
|
||||
// eslint-disable-next-line react-hooks/set-state-in-effect
|
||||
try { const t = localStorage.getItem("lup_dash_theme"); if (t === "light" || t === "dark") setTheme(t); } catch {}
|
||||
}, []);
|
||||
|
||||
// Deep-link from a clicked push notification. Two paths from the service worker:
|
||||
// - a tab was already open → it postMessages { type: 'notif-click', threadId } to focus here
|
||||
// - no tab was open → it opens /dashboard?thread=<id>, which we read once on mount
|
||||
useEffect(() => {
|
||||
try {
|
||||
const t = new URLSearchParams(window.location.search).get("thread");
|
||||
if (t) {
|
||||
navigateToConversation("messenger", t);
|
||||
window.history.replaceState({}, "", window.location.pathname);
|
||||
}
|
||||
} catch {}
|
||||
if (!("serviceWorker" in navigator)) return;
|
||||
const onMessage = (e: MessageEvent) => {
|
||||
if (e.data?.type === "notif-click" && e.data.threadId) navigateToConversation("messenger", e.data.threadId);
|
||||
};
|
||||
navigator.serviceWorker.addEventListener("message", onMessage);
|
||||
return () => navigator.serviceWorker.removeEventListener("message", onMessage);
|
||||
}, []);
|
||||
function toggle() {
|
||||
setTheme((t) => { const n = t === "dark" ? "light" : "dark"; try { localStorage.setItem("lup_dash_theme", n); } catch {} return n; });
|
||||
}
|
||||
@@ -40,24 +71,30 @@ export function Dashboard() {
|
||||
|
||||
return (
|
||||
<div className="dash-root" data-theme={theme}>
|
||||
<RealtimeProvider>
|
||||
<Sidebar active={active} onSelect={setActive} />
|
||||
<div className="dash-main">
|
||||
<Topbar theme={theme} onToggle={toggle} title={title} subtitle={subtitle} />
|
||||
<Topbar theme={theme} onToggle={toggle} title={title} subtitle={subtitle} onNavigate={navigateToConversation} />
|
||||
<div className="dash-content">
|
||||
<ToastProvider>
|
||||
<NotificationCenter active={active} onNavigate={navigateToConversation} />
|
||||
{active === "profile" ? <Profile />
|
||||
: active === "support" ? <Support />
|
||||
: active === "rules" ? <Rules />
|
||||
: active === "ai" ? <AiAssistant />
|
||||
: active === "messenger" ? <MessengerSdk />
|
||||
: active === "inbox" ? <InboxSdk />
|
||||
: active === "messenger" ? <MessengerSdk focusThreadId={deepLink?.surface === "messenger" ? deepLink.threadId : null} />
|
||||
: active === "inbox" ? <InboxSdk focusThreadId={deepLink?.surface === "inbox" ? deepLink.threadId : null} />
|
||||
: active === "settings" ? <Settings />
|
||||
: active === "gallery" ? <SmartGallery theme={theme} />
|
||||
: active === "leads" ? <Leads />
|
||||
: active === "verify" ? <Verify />
|
||||
: active === "team" ? <TeamManagement />
|
||||
: active === "projects" ? <Projects />
|
||||
: <ComingSoon title={title} icon={item?.icon ?? "dashboard"} onGo={setActive} />}
|
||||
</ToastProvider>
|
||||
</div>
|
||||
</div>
|
||||
</RealtimeProvider>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,86 @@
|
||||
"use client";
|
||||
|
||||
// Global conversation search in the topbar: type → debounced crm.search → dropdown of hits; click a
|
||||
// hit to deep-link to exactly where it lives (mail → Inbox, chat → Messenger, on that thread).
|
||||
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { Icon } from "./ui";
|
||||
import { useGlobalSearch, type SearchResult } from "@/lib/search-api";
|
||||
|
||||
/** Escape HTML but keep the engine's <em> highlight tags — so a match snippet can't inject markup. */
|
||||
function safeSnippet(s: string): string {
|
||||
const esc = s.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">");
|
||||
return esc.replace(/<em>/g, "<em>").replace(/<\/em>/g, "</em>");
|
||||
}
|
||||
|
||||
export function GlobalSearch({ onNavigate }: { onNavigate: (surface: "messenger" | "inbox", threadId: string) => void }) {
|
||||
const search = useGlobalSearch();
|
||||
const [open, setOpen] = useState(false);
|
||||
const [q, setQ] = useState("");
|
||||
const [results, setResults] = useState<SearchResult[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const wrapRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const term = q.trim();
|
||||
if (!term) {
|
||||
setResults([]);
|
||||
return;
|
||||
}
|
||||
let alive = true;
|
||||
setLoading(true);
|
||||
const t = setTimeout(() => {
|
||||
search(term)
|
||||
.then((r) => { if (alive) setResults(r); })
|
||||
.catch(() => { if (alive) setResults([]); })
|
||||
.finally(() => { if (alive) setLoading(false); });
|
||||
}, 220);
|
||||
return () => { alive = false; clearTimeout(t); };
|
||||
}, [q, search]);
|
||||
|
||||
useEffect(() => {
|
||||
function onDown(e: MouseEvent) {
|
||||
if (!wrapRef.current?.contains(e.target as Node)) setOpen(false);
|
||||
}
|
||||
document.addEventListener("mousedown", onDown);
|
||||
return () => document.removeEventListener("mousedown", onDown);
|
||||
}, []);
|
||||
|
||||
function pick(r: SearchResult) {
|
||||
onNavigate(r.surface, r.threadId);
|
||||
setOpen(false);
|
||||
setQ("");
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="gs-wrap" ref={wrapRef}>
|
||||
<div className="gs-field">
|
||||
<Icon name="search" size={16} />
|
||||
<input
|
||||
className="gs-input"
|
||||
placeholder="Search conversations…"
|
||||
value={q}
|
||||
onFocus={() => setOpen(true)}
|
||||
onChange={(e) => { setQ(e.target.value); setOpen(true); }}
|
||||
aria-label="Search conversations"
|
||||
/>
|
||||
</div>
|
||||
{open && q.trim() ? (
|
||||
<div className="gs-pop">
|
||||
{loading && results.length === 0 ? <div className="gs-empty">Searching…</div> : null}
|
||||
{!loading && results.length === 0 ? <div className="gs-empty">No matches.</div> : null}
|
||||
{results.map((r) => (
|
||||
<button key={r.interactionId} type="button" className="gs-row" onClick={() => pick(r)}>
|
||||
<span className="gs-ic"><Icon name={r.surface === "inbox" ? "mail" : "send"} size={14} /></span>
|
||||
<span className="gs-main">
|
||||
<span className="gs-title">{r.title}</span>
|
||||
<span className="gs-snippet" dangerouslySetInnerHTML={{ __html: safeSnippet(r.snippet) }} />
|
||||
</span>
|
||||
<span className="gs-surface">{r.surface === "inbox" ? "Mail" : "Chat"}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -15,7 +15,7 @@ import type { DataDoor } from "@/lib/crm-messaging-adapter";
|
||||
|
||||
const SHELL = isShellConfigured();
|
||||
|
||||
export function InboxSdk() {
|
||||
export function InboxSdk({ focusThreadId }: { focusThreadId?: string | null } = {}) {
|
||||
return (
|
||||
<div className="view">
|
||||
{!SHELL && (
|
||||
@@ -23,26 +23,26 @@ export function InboxSdk() {
|
||||
Demo mode — running on the SDK's mock inbox adapter.
|
||||
</div>
|
||||
)}
|
||||
<div className="miu-host miu-host-inbox">{SHELL ? <LiveInbox /> : <DemoInbox />}</div>
|
||||
<div className="miu-host miu-host-inbox">{SHELL ? <LiveInbox focusThreadId={focusThreadId} /> : <DemoInbox focusThreadId={focusThreadId} />}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function DemoInbox() {
|
||||
function DemoInbox({ focusThreadId }: { focusThreadId?: string | null }) {
|
||||
const adapter = useMemo<InboxAdapter>(() => new MockInboxAdapter(), []);
|
||||
return (
|
||||
<InboxProvider adapter={adapter}>
|
||||
<SdkInbox />
|
||||
<SdkInbox focusThreadId={focusThreadId} />
|
||||
</InboxProvider>
|
||||
);
|
||||
}
|
||||
|
||||
function LiveInbox() {
|
||||
function LiveInbox({ focusThreadId }: { focusThreadId?: string | null }) {
|
||||
const { sdk } = useAppShell();
|
||||
const adapter = useMemo<InboxAdapter>(() => new CrmInboxAdapter(sdk as unknown as DataDoor), [sdk]);
|
||||
return (
|
||||
<InboxProvider adapter={adapter}>
|
||||
<SdkInbox />
|
||||
<SdkInbox focusThreadId={focusThreadId} />
|
||||
</InboxProvider>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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<LeadStatus, { label: string; tone: string }> = {
|
||||
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<LeadPriority, { label: string; tone: string }> = {
|
||||
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; email: string };
|
||||
|
||||
export const REPS: Rep[] = [
|
||||
{ id: "LUP-1040", initials: "CT", name: "Cody Tatum", email: "cody.tatum@lynkeduppro.com" },
|
||||
{ id: "LUP-1041", initials: "HR", name: "Hannah Reyes", email: "hannah.reyes@lynkeduppro.com" },
|
||||
{ id: "LUP-1042", initials: "TB", name: "Travis Boone", email: "travis.boone@lynkeduppro.com" },
|
||||
{ id: "LUP-1043", initials: "SG", name: "Shelby Greer", email: "shelby.greer@lynkeduppro.com" },
|
||||
{ id: "LUP-1044", initials: "DP", name: "Dalton Pruitt", email: "dalton.pruitt@lynkeduppro.com" },
|
||||
];
|
||||
|
||||
export const LEAD_SOURCES = ["Door Knock", "Referral", "Storm Chase", "Mailer / Postcard", "Sign Call", "Insurance Agent Referral", "Repeat Customer", "Social Media", "Other"];
|
||||
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"];
|
||||
@@ -0,0 +1,615 @@
|
||||
"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<Lead | null>(null);
|
||||
const [newOpen, setNewOpen] = useState(false);
|
||||
|
||||
const countByStatus = useMemo(() => {
|
||||
const m: Record<string, number> = {};
|
||||
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 (
|
||||
<div className="view leads">
|
||||
<PageHead
|
||||
eyebrow="Sales"
|
||||
title="Leads"
|
||||
subtitle={`${TOTAL_LEADS} total leads · Plano hail zone · storm 2026-04-28`}
|
||||
icon="leads"
|
||||
actions={<Btn icon="plus" onClick={() => setNewOpen(true)}>New Lead</Btn>}
|
||||
/>
|
||||
|
||||
{/* ---- stat strip ---------------------------------------- */}
|
||||
<div className="leads-stats">
|
||||
<StatCard label="Total leads" value={TOTAL_LEADS} icon="leads" tone="orange" />
|
||||
<StatCard label="New" value={countByStatus.new ?? 0} icon="star" tone="blue" />
|
||||
<StatCard label="Contacted" value={countByStatus.contacted ?? 0} icon="phone" tone="orange" />
|
||||
<StatCard label="Appointed" value={countByStatus.appointed ?? 0} icon="clock" tone="purple" />
|
||||
<StatCard label="Closed" value={countByStatus.closed ?? 0} icon="check-circle" tone="green" />
|
||||
</div>
|
||||
|
||||
{/* ---- toolbar ------------------------------------------- */}
|
||||
<div className="leads-toolbar">
|
||||
<div className="leads-search">
|
||||
<Icon name="search" size={16} />
|
||||
<input
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
placeholder="Search by name, address, source…"
|
||||
aria-label="Search leads"
|
||||
/>
|
||||
{query && <button className="leads-search-x" aria-label="Clear" onClick={() => setQuery("")}><Icon name="x" size={14} /></button>}
|
||||
</div>
|
||||
<div className="leads-tabs" role="tablist">
|
||||
{STATUS_TABS.map((t) => (
|
||||
<button
|
||||
key={t.value}
|
||||
role="tab"
|
||||
aria-selected={filter === t.value}
|
||||
className={`leads-tab ${filter === t.value ? "active" : ""}`}
|
||||
onClick={() => setFilter(t.value)}
|
||||
>
|
||||
{t.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ---- board --------------------------------------------- */}
|
||||
{filtered.length === 0 ? (
|
||||
<div className="card leads-empty">
|
||||
<Icon name="search" size={30} />
|
||||
<h3>No leads match</h3>
|
||||
<p>Try a different search or clear the status filter.</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="leads-grid">
|
||||
{filtered.map((l) => (
|
||||
<LeadCard key={l.id} lead={l} onOpen={() => setSelected(l)} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<LeadDetail lead={selected} onClose={() => setSelected(null)} />
|
||||
<NewLead open={newOpen} onClose={() => setNewOpen(false)} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------- */
|
||||
/* Stat card */
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
function StatCard({ label, value, icon, tone }: { label: string; value: number; icon: string; tone: string }) {
|
||||
return (
|
||||
<div className={`leads-stat tone-${tone}`}>
|
||||
<span className="leads-stat-ic"><Icon name={icon} size={17} /></span>
|
||||
<div className="leads-stat-body">
|
||||
<div className="leads-stat-val">{value}</div>
|
||||
<div className="leads-stat-lbl">{label}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------- */
|
||||
/* 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 (
|
||||
<button className="lead-card" onClick={onOpen}>
|
||||
<div className="lead-card-top">
|
||||
<span className={`lead-ava prio-${lead.priority}`}>
|
||||
<Avatar initials={lead.initials} gradient={lead.gradient} size={46} />
|
||||
</span>
|
||||
<div className="lead-card-id">
|
||||
<div className="lead-card-name">{lead.name}</div>
|
||||
<div className="lead-card-sub"><span className="lead-code">{lead.id}</span> · <Icon name="storm" size={12} /> {lead.tag}</div>
|
||||
</div>
|
||||
<Pill tone={priority.tone}><Icon name="alert" size={11} /> {priority.label}</Pill>
|
||||
</div>
|
||||
|
||||
<div className="lead-card-row"><Icon name="pin" size={14} /><span>{lead.property.address}, {lead.property.city}, {lead.property.state}</span></div>
|
||||
<div className="lead-card-row"><Icon name="phone" size={14} /><span>{primaryPhone?.number}</span></div>
|
||||
|
||||
<div className="lead-card-foot">
|
||||
<Pill tone={status.tone}>{status.label}</Pill>
|
||||
<span className="lead-source"><Icon name="pin" size={12} /> {lead.job.source}</span>
|
||||
<span className="lead-card-spacer" />
|
||||
<span className="lead-rep" title={`Canvasser: ${lead.job.canvasser}`}>{lead.job.canvasser}</span>
|
||||
<span className="lead-updated">{lead.updated}</span>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------- */
|
||||
/* 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 (
|
||||
<Modal
|
||||
open={!!lead}
|
||||
onClose={onClose}
|
||||
size="lg"
|
||||
title={lead.name}
|
||||
subtitle={`${lead.id} · ${lead.tag}`}
|
||||
icon="leads"
|
||||
footer={
|
||||
<>
|
||||
<Btn variant="ghost" icon="phone">Call</Btn>
|
||||
<Btn variant="outline" icon="mail">Email</Btn>
|
||||
<Btn icon="check-circle">Update Status</Btn>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<div className="lead-detail">
|
||||
{/* identity strip */}
|
||||
<div className="ld-identity">
|
||||
<Avatar initials={lead.initials} gradient={lead.gradient} size={54} />
|
||||
<div className="ld-identity-body">
|
||||
<div className="ld-identity-name">{lead.name}</div>
|
||||
<div className="ld-identity-pills">
|
||||
<Pill tone={status.tone}>{status.label}</Pill>
|
||||
<Pill tone={priority.tone}><Icon name="alert" size={11} /> {priority.label}</Pill>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* storm banner */}
|
||||
<div className="ld-storm">
|
||||
<span className="ld-storm-ic"><Icon name="storm" size={18} /></span>
|
||||
<div>
|
||||
<div className="ld-storm-zone">{lead.storm.zone}</div>
|
||||
<div className="ld-storm-meta">{lead.storm.date} · {lead.storm.detail}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="ld-grid">
|
||||
{/* Contact */}
|
||||
<Section title="Contact" icon="user">
|
||||
<div className="ld-sublabel">Phone Numbers</div>
|
||||
{lead.phones.map((p, i) => (
|
||||
<div className="ld-contact-row" key={i}>
|
||||
<Icon name="phone" size={14} />
|
||||
<span className="ld-contact-val">{p.number}</span>
|
||||
<span className="ld-contact-tag">{p.type}</span>
|
||||
{p.primary && <Pill tone="green">Primary</Pill>}
|
||||
</div>
|
||||
))}
|
||||
<div className="ld-sublabel">Email Addresses</div>
|
||||
{lead.emails.map((e, i) => (
|
||||
<div className="ld-contact-row" key={i}>
|
||||
<Icon name="mail" size={14} />
|
||||
<span className="ld-contact-val">{e.address}</span>
|
||||
{e.primary && <Pill tone="green">Primary</Pill>}
|
||||
</div>
|
||||
))}
|
||||
</Section>
|
||||
|
||||
{/* Property */}
|
||||
<Section title="Property" icon="owners">
|
||||
<Dl label="Address" value={lead.property.address} />
|
||||
<Dl label="City" value={lead.property.city} />
|
||||
<Dl label="State" value={lead.property.state} />
|
||||
<Dl label="ZIP" value={lead.property.zip} />
|
||||
<Dl label="Property Type" value={lead.property.type} />
|
||||
</Section>
|
||||
|
||||
{/* Job Details */}
|
||||
<Section title="Job Details" icon="projects">
|
||||
<Dl label="Lead Source" value={lead.job.source} />
|
||||
<Dl label="Lead Type" value={lead.job.leadType} />
|
||||
<Dl label="Work Type" value={lead.job.workType} />
|
||||
<Dl label="Trade Type" value={lead.job.tradeType} />
|
||||
<Dl label="Urgency" value={lead.job.urgency} />
|
||||
<Dl label="Canvasser" value={lead.job.canvasser} />
|
||||
<div className="ld-notes">
|
||||
<div className="ld-sublabel">Field Notes</div>
|
||||
<p>{lead.job.notes}</p>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* Insurance */}
|
||||
<Section title="Insurance" icon="shield">
|
||||
<Dl label="Insurance Company" value={lead.insurance.company} />
|
||||
<Dl label="Claim Status" value={lead.insurance.claimStatus} />
|
||||
<Dl label="Claim Number" value={lead.insurance.claimNumber} />
|
||||
<Dl label="Policy Number" value={lead.insurance.policyNumber} />
|
||||
<Dl label="Adjuster Name" value={lead.insurance.adjusterName} />
|
||||
<Dl label="Adjuster Phone" value={lead.insurance.adjusterPhone} />
|
||||
</Section>
|
||||
|
||||
{/* Assignment */}
|
||||
<Section title="Assignment" icon="team" wide>
|
||||
<div className="ld-assign">
|
||||
<Dl label="Assigned To" value={lead.assignment.assignedTo} />
|
||||
<Dl label="Priority" value={lead.assignment.priority} />
|
||||
<Dl label="Follow-Up Date" value={lead.assignment.followUp} />
|
||||
<Dl label="Created By" value={lead.assignment.createdBy} />
|
||||
<Dl label="Created At" value={lead.assignment.createdAt} />
|
||||
</div>
|
||||
</Section>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
function Section({ title, icon, children, wide }: { title: string; icon: string; children: ReactNode; wide?: boolean }) {
|
||||
return (
|
||||
<div className={`ld-section ${wide ? "wide" : ""}`}>
|
||||
<div className="ld-section-head"><Icon name={icon} size={15} /> {title}</div>
|
||||
<div className="ld-section-body">{children}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Dl({ label, value }: { label: string; value: string }) {
|
||||
return (
|
||||
<div className="ld-dl">
|
||||
<span className="ld-dl-k">{label}</span>
|
||||
<span className="ld-dl-v">{value}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------- */
|
||||
/* 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 FULL_STEPS = [
|
||||
{ value: "contact", label: "Contact", icon: "user" },
|
||||
{ value: "property", label: "Property", icon: "owners" },
|
||||
{ value: "job", label: "Job Details", icon: "projects" },
|
||||
{ value: "insurance", label: "Insurance", icon: "shield" },
|
||||
{ value: "assignment", label: "Assignment", icon: "team" },
|
||||
];
|
||||
|
||||
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: "", referralNote: "", canvasser: "", 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];
|
||||
|
||||
const stepIdx = FULL_STEPS.findIndex((s) => s.value === section);
|
||||
const isFirstStep = stepIdx <= 0;
|
||||
const isLastStep = stepIdx === FULL_STEPS.length - 1;
|
||||
const goNext = () => { if (!isLastStep) setSection(FULL_STEPS[stepIdx + 1].value); };
|
||||
const goBack = () => { if (!isFirstStep) setSection(FULL_STEPS[stepIdx - 1].value); };
|
||||
|
||||
return (
|
||||
<Modal
|
||||
open={open}
|
||||
onClose={close}
|
||||
size="lg"
|
||||
title="New Lead"
|
||||
subtitle="Full lead profile with insurance and assignment details."
|
||||
icon="plus"
|
||||
footer={
|
||||
mode === "full" ? (
|
||||
<>
|
||||
<Btn variant="ghost" onClick={close}>Cancel</Btn>
|
||||
{!isFirstStep && <Btn variant="ghost" onClick={goBack}>Back</Btn>}
|
||||
{isLastStep
|
||||
? <Btn icon="check" onClick={submit}>Create Lead</Btn>
|
||||
: <Btn icon="arrow" onClick={goNext}>Next</Btn>}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Btn variant="ghost" onClick={close}>Cancel</Btn>
|
||||
<Btn icon="check" onClick={submit}>Create Lead</Btn>
|
||||
</>
|
||||
)
|
||||
}
|
||||
>
|
||||
<div className="nl-form">
|
||||
<Segmented
|
||||
value={mode}
|
||||
onChange={(v) => setMode(v as "quick" | "full")}
|
||||
options={[{ value: "quick", label: "Quick", icon: "star" }, { value: "full", label: "Full Form", icon: "edit" }]}
|
||||
/>
|
||||
|
||||
{mode === "quick" ? (
|
||||
<div className="nl-grid">
|
||||
<Field label="First name" required><input className="ds-input" value={f.firstName} onChange={set("firstName")} placeholder="John" /></Field>
|
||||
<Field label="Last name"><input className="ds-input" value={f.lastName} onChange={set("lastName")} placeholder="Smith" /></Field>
|
||||
<Field label="Phone"><input className="ds-input" value={f.phones[0]?.number ?? ""} onChange={(e) => setPhone(0, "number", e.target.value)} placeholder="(555) 000-0000" /></Field>
|
||||
<div className="nl-full"><Field label="Street address"><input className="ds-input" value={f.address} onChange={set("address")} placeholder="123 Main St" /></Field></div>
|
||||
<Field label="City"><input className="ds-input" value={f.city} onChange={set("city")} placeholder="Plano" /></Field>
|
||||
<Field label="State"><input className="ds-input" value={f.state} onChange={set("state")} /></Field>
|
||||
<Field label="ZIP"><input className="ds-input" value={f.zip} onChange={set("zip")} placeholder="75023" /></Field>
|
||||
<Field label="Lead source"><Select value={f.source} onChange={set("source")} options={LEAD_SOURCES} placeholder="How did you find this lead?" /></Field>
|
||||
{f.source === "Referral" && (
|
||||
<div className="nl-full"><Field label="Referral note"><textarea className="ds-textarea" rows={3} value={f.referralNote} onChange={set("referralNote")} placeholder="Who referred this lead? Any details…" /></Field></div>
|
||||
)}
|
||||
{f.source === "Door Knock" && (
|
||||
<div className="nl-full"><Field label="Canvasser"><CanvasserSearch value={f.canvasser} onChange={(v) => setF((s) => ({ ...s, canvasser: v }))} options={REPS} /></Field></div>
|
||||
)}
|
||||
<div className="nl-full"><PriorityPicker value={f.priority} onChange={(p) => setF((s) => ({ ...s, priority: p }))} /></div>
|
||||
<Field label="Follow-up date"><input className="ds-input" type="date" value={f.followUp} onChange={set("followUp")} /></Field>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<SegTabs
|
||||
value={section}
|
||||
onChange={setSection}
|
||||
tabs={FULL_STEPS}
|
||||
/>
|
||||
|
||||
{section === "contact" && (
|
||||
<div className="nl-grid">
|
||||
<Field label="First Name" required><input className="ds-input" value={f.firstName} onChange={set("firstName")} placeholder="John" /></Field>
|
||||
<Field label="Last Name"><input className="ds-input" value={f.lastName} onChange={set("lastName")} placeholder="Smith" /></Field>
|
||||
|
||||
<div className="nl-full">
|
||||
<div className="ds-field-lbl">Phone Numbers</div>
|
||||
{f.phones.map((p, i) => (
|
||||
<div className="nl-multirow" key={i}>
|
||||
<input className="ds-input" value={p.number} onChange={(e) => setPhone(i, "number", e.target.value)} placeholder="(555) 000-0000" />
|
||||
<select className="ds-select nl-typesel" value={p.type} onChange={(e) => setPhone(i, "type", e.target.value)}>
|
||||
{["Mobile", "Home", "Work"].map((t) => <option key={t} value={t}>{t}</option>)}
|
||||
</select>
|
||||
{f.phones.length > 1 && <button type="button" className="nl-rowx" aria-label="Remove phone" onClick={() => removePhone(i)}><Icon name="trash" size={15} /></button>}
|
||||
</div>
|
||||
))}
|
||||
<button type="button" className="nl-add" onClick={addPhone}><Icon name="plus" size={14} /> Add Phone</button>
|
||||
</div>
|
||||
|
||||
<div className="nl-full">
|
||||
<div className="ds-field-lbl">Email Addresses</div>
|
||||
{f.emails.length === 0 && <div className="nl-empty">No emails added yet.</div>}
|
||||
{f.emails.map((em, i) => (
|
||||
<div className="nl-multirow" key={i}>
|
||||
<input className="ds-input" type="email" value={em.address} onChange={(e) => setEmail(i, e.target.value)} placeholder="name@email.com" />
|
||||
<button type="button" className="nl-rowx" aria-label="Remove email" onClick={() => removeEmail(i)}><Icon name="trash" size={15} /></button>
|
||||
</div>
|
||||
))}
|
||||
<button type="button" className="nl-add" onClick={addEmail}><Icon name="plus" size={14} /> Add Email</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{section === "property" && (
|
||||
<div className="nl-grid">
|
||||
<div className="nl-full"><Field label="Street Address"><input className="ds-input" value={f.address} onChange={set("address")} placeholder="123 Main St" /></Field></div>
|
||||
<Field label="City"><input className="ds-input" value={f.city} onChange={set("city")} placeholder="Plano" /></Field>
|
||||
<Field label="State"><input className="ds-input" value={f.state} onChange={set("state")} placeholder="TX" /></Field>
|
||||
<Field label="ZIP"><input className="ds-input" value={f.zip} onChange={set("zip")} placeholder="75023" /></Field>
|
||||
<Field label="Property Type"><Select value={f.propertyType} onChange={set("propertyType")} options={PROPERTY_TYPE_OPTS} placeholder="Residential, Commercial…" /></Field>
|
||||
<div className="nl-full">
|
||||
<div className="ds-field-lbl">Site Photos</div>
|
||||
<button type="button" className="nl-photos" onClick={addPhoto}>
|
||||
<Icon name="camera" size={22} />
|
||||
<span className="nl-photos-t">Tap to add photos</span>
|
||||
<span className="nl-photos-s">Camera · Gallery · Multiple allowed</span>
|
||||
</button>
|
||||
{f.photos.length > 0 && (
|
||||
<div className="nl-photo-chips">
|
||||
{f.photos.map((p, i) => <span key={i} className="nl-photo-chip"><Icon name="check" size={12} /> {p}</span>)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{section === "job" && (
|
||||
<div className="nl-grid">
|
||||
<Field label="Lead Source"><Select value={f.source} onChange={set("source")} options={LEAD_SOURCES} placeholder="How did you find this lead?" /></Field>
|
||||
<Field label="Lead Type"><Select value={f.leadType} onChange={set("leadType")} options={LEAD_TYPE_OPTS} placeholder="Residential, Commercial…" /></Field>
|
||||
<Field label="Work Type"><Select value={f.workType} onChange={set("workType")} options={WORK_TYPES} placeholder="Roof Replacement, Repair…" /></Field>
|
||||
<Field label="Trade Type"><Select value={f.tradeType} onChange={set("tradeType")} options={TRADE_TYPES} placeholder="Roofing, Gutter, Siding…" /></Field>
|
||||
<div className="nl-full"><UrgencyPicker value={f.urgency} onChange={(u) => setF((s) => ({ ...s, urgency: u }))} /></div>
|
||||
<div className="nl-full"><Field label="Notes"><textarea className="ds-textarea" rows={3} value={f.notes} onChange={set("notes")} placeholder="First impression, visible damage, special circumstances…" /></Field></div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{section === "insurance" && (
|
||||
<div className="nl-grid">
|
||||
<div className="nl-full"><Field label="Insurance Company"><input className="ds-input" value={f.insCompany} onChange={set("insCompany")} placeholder="State Farm" /></Field></div>
|
||||
<Field label="Claim Number"><input className="ds-input" value={f.claimNumber} onChange={set("claimNumber")} placeholder="e.g. CLM-2026-00482" /></Field>
|
||||
<Field label="Claim Status"><Select value={f.claimStatus} onChange={set("claimStatus")} options={CLAIM_STATUSES} placeholder="Select status…" /></Field>
|
||||
<Field label="Adjuster Name"><input className="ds-input" value={f.adjusterName} onChange={set("adjusterName")} placeholder="Full name" /></Field>
|
||||
<Field label="Adjuster Phone"><input className="ds-input" value={f.adjusterPhone} onChange={set("adjusterPhone")} placeholder="(555) 000-0000" /></Field>
|
||||
<div className="nl-full"><Field label="Policy Number"><input className="ds-input" value={f.policyNumber} onChange={set("policyNumber")} placeholder="e.g. POL-7734892-A" /></Field></div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{section === "assignment" && (
|
||||
<div className="nl-grid">
|
||||
<div className="nl-full"><Field label="Assign Rep"><RepSelect value={f.assignRep} onChange={set("assignRep")} options={repOptions} /></Field></div>
|
||||
<div className="nl-full"><PriorityPicker value={f.priority} onChange={(p) => setF((s) => ({ ...s, priority: p }))} /></div>
|
||||
<Field label="Follow-up Date"><input className="ds-input" type="date" value={f.followUp} onChange={set("followUp")} /></Field>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
function Select({ value, onChange, options, placeholder }: { value: string; onChange: (e: { target: { value: string } }) => void; options: string[]; placeholder?: string }) {
|
||||
return (
|
||||
<select className={`ds-select ${!value && placeholder ? "is-placeholder" : ""}`} value={value} onChange={onChange}>
|
||||
{placeholder && <option value="" disabled>{placeholder}</option>}
|
||||
{options.map((o) => <option key={o} value={o}>{o}</option>)}
|
||||
</select>
|
||||
);
|
||||
}
|
||||
|
||||
function RepSelect({ value, onChange, options }: { value: string; onChange: (e: { target: { value: string } }) => void; options: { id: string; initials: string; name: string }[] }) {
|
||||
return (
|
||||
<select className="ds-select" value={value} onChange={onChange}>
|
||||
{options.map((r) => <option key={r.id || "none"} value={r.id}>{r.id ? `${r.name} · ${r.id}` : "— Unassigned"}</option>)}
|
||||
</select>
|
||||
);
|
||||
}
|
||||
|
||||
function CanvasserSearch({ value, onChange, options }: { value: string; onChange: (v: string) => void; options: { id: string; initials: string; name: string; email: string }[] }) {
|
||||
const [query, setQuery] = useState("");
|
||||
const [open, setOpen] = useState(false);
|
||||
const selected = options.find((o) => o.id === value);
|
||||
const matches = useMemo(() => {
|
||||
const q = query.trim().toLowerCase();
|
||||
if (!q) return options;
|
||||
return options.filter((o) => o.name.toLowerCase().includes(q) || o.email.toLowerCase().includes(q));
|
||||
}, [query, options]);
|
||||
|
||||
if (selected) {
|
||||
return (
|
||||
<div className="nl-canvasser-chip">
|
||||
<Avatar initials={selected.initials} size={28} />
|
||||
<span className="nl-canvasser-name">{selected.name}</span>
|
||||
<span className="nl-canvasser-email">{selected.email}</span>
|
||||
<button type="button" className="nl-canvasser-clear" onClick={() => { onChange(""); setQuery(""); }} aria-label="Clear canvasser"><Icon name="x" size={14} /></button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="nl-canvasser">
|
||||
<input
|
||||
className="ds-input"
|
||||
value={query}
|
||||
onChange={(e) => { setQuery(e.target.value); setOpen(true); }}
|
||||
onFocus={() => setOpen(true)}
|
||||
onBlur={() => setTimeout(() => setOpen(false), 150)}
|
||||
placeholder="Search canvasser by name or email"
|
||||
/>
|
||||
{open && matches.length > 0 && (
|
||||
<div className="nl-canvasser-menu">
|
||||
{matches.map((o) => (
|
||||
<button key={o.id} type="button" className="nl-canvasser-opt" onMouseDown={(e) => { e.preventDefault(); onChange(o.id); setQuery(""); setOpen(false); }}>
|
||||
<Avatar initials={o.initials} size={26} />
|
||||
<span className="nl-canvasser-name">{o.name}</span>
|
||||
<span className="nl-canvasser-email">{o.email}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{open && matches.length === 0 && (
|
||||
<div className="nl-canvasser-menu"><div className="nl-canvasser-empty">No canvasser found</div></div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function PriorityPicker({ value, onChange }: { value: Priority; onChange: (p: Priority) => void }) {
|
||||
return (
|
||||
<div className="ds-field">
|
||||
<span className="ds-field-lbl">Priority</span>
|
||||
<div className="nl-prio">
|
||||
{(["Low", "Medium", "High"] as Priority[]).map((p) => (
|
||||
<button key={p} type="button" className={`nl-prio-btn ${value === p ? `active ${p.toLowerCase()}` : ""}`} onClick={() => onChange(p)}>{p}</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function UrgencyPicker({ value, onChange }: { value: Urgency; onChange: (u: Urgency) => void }) {
|
||||
return (
|
||||
<div className="ds-field">
|
||||
<span className="ds-field-lbl">Urgency</span>
|
||||
<div className="nl-prio">
|
||||
{(["Standard", "High", "Emergency"] as Urgency[]).map((u) => (
|
||||
<button key={u} type="button" className={`nl-prio-btn urg ${value === u ? `active ${u.toLowerCase()}` : ""}`} onClick={() => onChange(u)}>{u}</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -5,39 +5,18 @@
|
||||
// UI + messaging logic lives in the SDK. Live path = the be-crm data door (CrmMessagingAdapter);
|
||||
// demo path = the SDK's own MockAdapter.
|
||||
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { useAppShell, useAuth, useQuery } from "@abe-kap/appshell-sdk/react";
|
||||
import { MessageSocket } from "@insignia/iios-kernel-client";
|
||||
import { useMemo } from "react";
|
||||
import { useAppShell, useAuth } from "@abe-kap/appshell-sdk/react";
|
||||
import { MessagingProvider, Messenger as SdkMessenger, type MessagingAdapter } from "@insignia/iios-messaging-ui";
|
||||
import { MockAdapter } from "@insignia/iios-messaging-ui/adapters/mock";
|
||||
import "@insignia/iios-messaging-ui/styles.css";
|
||||
import { isShellConfigured } from "@/lib/appshell";
|
||||
import { useRealtime } from "@/lib/realtime";
|
||||
import { CrmMessagingAdapter, type DataDoor } from "@/lib/crm-messaging-adapter";
|
||||
|
||||
interface RealtimeDTO { url: string; audience: string; token?: string }
|
||||
|
||||
/** Open the IIOS message socket with the delegated token the BFF mints (crm.messenger.realtime). */
|
||||
function useRealtimeSocket(): MessageSocket | null {
|
||||
const rt = useQuery<RealtimeDTO>("crm.messenger.realtime", {});
|
||||
const [socket, setSocket] = useState<MessageSocket | null>(null);
|
||||
const url = rt.data?.url;
|
||||
const token = rt.data?.token;
|
||||
useEffect(() => {
|
||||
if (!url || !token) return;
|
||||
const s = new MessageSocket({ serviceUrl: url, token, autoConnect: false });
|
||||
s.connect();
|
||||
setSocket(s);
|
||||
return () => {
|
||||
s.disconnect();
|
||||
setSocket(null);
|
||||
};
|
||||
}, [url, token]);
|
||||
return socket;
|
||||
}
|
||||
|
||||
const SHELL = isShellConfigured();
|
||||
|
||||
export function MessengerSdk() {
|
||||
export function MessengerSdk({ focusThreadId }: { focusThreadId?: string | null } = {}) {
|
||||
return (
|
||||
<div className="view">
|
||||
{!SHELL && (
|
||||
@@ -55,26 +34,26 @@ export function MessengerSdk() {
|
||||
Demo mode — running on the SDK's mock adapter.
|
||||
</div>
|
||||
)}
|
||||
<div className="miu-host">{SHELL ? <LiveHost /> : <DemoHost />}</div>
|
||||
<div className="miu-host">{SHELL ? <LiveHost focusThreadId={focusThreadId} /> : <DemoHost focusThreadId={focusThreadId} />}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// SHELL is a build-time constant, so exactly one of these mounts for the life of the app
|
||||
// (Rules-of-Hooks safe — the other branch never renders).
|
||||
function DemoHost() {
|
||||
function DemoHost({ focusThreadId }: { focusThreadId?: string | null }) {
|
||||
const adapter = useMemo<MessagingAdapter>(() => new MockAdapter(), []);
|
||||
return (
|
||||
<MessagingProvider adapter={adapter}>
|
||||
<SdkMessenger />
|
||||
<SdkMessenger focusThreadId={focusThreadId} />
|
||||
</MessagingProvider>
|
||||
);
|
||||
}
|
||||
|
||||
function LiveHost() {
|
||||
function LiveHost({ focusThreadId }: { focusThreadId?: string | null }) {
|
||||
const { sdk } = useAppShell();
|
||||
const { user } = useAuth();
|
||||
const socket = useRealtimeSocket();
|
||||
const socket = useRealtime();
|
||||
// Rebuilds once the socket connects: the first adapter (no socket) polls; the second runs live.
|
||||
const adapter = useMemo<MessagingAdapter | null>(
|
||||
() => (user?.id ? new CrmMessagingAdapter(sdk as unknown as DataDoor, user.id, socket ?? undefined) : null),
|
||||
@@ -83,7 +62,7 @@ function LiveHost() {
|
||||
if (!adapter) return <div className="miu-empty">Loading…</div>;
|
||||
return (
|
||||
<MessagingProvider adapter={adapter}>
|
||||
<SdkMessenger />
|
||||
<SdkMessenger focusThreadId={focusThreadId} />
|
||||
</MessagingProvider>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,74 @@
|
||||
"use client";
|
||||
|
||||
// Topbar bell → offline-notification control. Click opens a small popover to enable/disable Web Push
|
||||
// for this browser. The dot is lit when this browser is subscribed. Hidden entirely when push isn't
|
||||
// available (demo mode, or a browser without ServiceWorker/PushManager).
|
||||
|
||||
import { useState } from "react";
|
||||
import { Icon } from "./ui";
|
||||
import { usePushNotifications } from "@/lib/push-notifications";
|
||||
|
||||
export function NotificationBell() {
|
||||
const push = usePushNotifications();
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
if (!push.supported) return null;
|
||||
|
||||
const denied = push.permission === "denied";
|
||||
|
||||
return (
|
||||
<div style={{ position: "relative" }}>
|
||||
<button
|
||||
className="ic-btn"
|
||||
aria-label="Notifications"
|
||||
aria-haspopup="menu"
|
||||
aria-expanded={open}
|
||||
style={{ position: "relative" }}
|
||||
onClick={() => setOpen((o) => !o)}
|
||||
>
|
||||
<Icon name="bell" size={18} />
|
||||
<span
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: 9,
|
||||
right: 10,
|
||||
width: 7,
|
||||
height: 7,
|
||||
borderRadius: 99,
|
||||
background: push.subscribed ? "var(--orange)" : "var(--border)",
|
||||
border: "2px solid var(--panel)",
|
||||
}}
|
||||
/>
|
||||
</button>
|
||||
{open && (
|
||||
<>
|
||||
<div className="tm-menu-scrim" onClick={() => setOpen(false)} />
|
||||
<div className="tm-menu-pop" role="menu" style={{ width: 260, padding: 14 }}>
|
||||
<div style={{ fontWeight: 700, fontSize: 13, marginBottom: 4 }}>Offline notifications</div>
|
||||
<p style={{ fontSize: 12, color: "var(--muted)", margin: "0 0 12px", lineHeight: 1.4 }}>
|
||||
{push.subscribed
|
||||
? "You'll get push notifications for new direct messages and mentions, even when this tab is closed."
|
||||
: "Get notified about direct messages and mentions when the CRM isn't open."}
|
||||
</p>
|
||||
|
||||
{denied ? (
|
||||
<p style={{ fontSize: 12, color: "var(--danger, #c0392b)", margin: 0 }}>
|
||||
Notifications are blocked in your browser settings. Allow them for this site, then try again.
|
||||
</p>
|
||||
) : push.subscribed ? (
|
||||
<button className="ds-btn v-ghost full" disabled={push.busy} onClick={() => push.disable()}>
|
||||
{push.busy ? "Turning off…" : "Turn off notifications"}
|
||||
</button>
|
||||
) : (
|
||||
<button className="ds-btn v-primary full" disabled={push.busy} onClick={() => push.enable()}>
|
||||
{push.busy ? "Enabling…" : "Enable notifications"}
|
||||
</button>
|
||||
)}
|
||||
|
||||
{push.error && <p style={{ fontSize: 11.5, color: "var(--danger, #c0392b)", margin: "10px 0 0" }}>{push.error}</p>}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
"use client";
|
||||
|
||||
// App-wide in-app notifications. Uses the shared dashboard socket to watch activity across ALL of
|
||||
// the user's threads (via the adapter's subscribeActivity) and shows a clickable toast when a new
|
||||
// message arrives — unless you're already on the Messenger tab (you'd see it live there). Clicking
|
||||
// deep-links to the conversation. Renders nothing.
|
||||
|
||||
import { useEffect, useMemo, useRef } from "react";
|
||||
import { useAppShell, useAuth } from "@abe-kap/appshell-sdk/react";
|
||||
import type { MessagingAdapter } from "@insignia/iios-messaging-ui";
|
||||
import { isShellConfigured } from "@/lib/appshell";
|
||||
import { useRealtime } from "@/lib/realtime";
|
||||
import { CrmMessagingAdapter, type DataDoor } from "@/lib/crm-messaging-adapter";
|
||||
import { useToast } from "./ui";
|
||||
|
||||
const SHELL = isShellConfigured();
|
||||
|
||||
export function NotificationCenter({ active, onNavigate }: { active: string; onNavigate: (surface: "messenger" | "inbox", threadId: string) => void }) {
|
||||
const socket = useRealtime();
|
||||
const { sdk } = useAppShell();
|
||||
const { user } = useAuth();
|
||||
const toast = useToast();
|
||||
const me = user?.id;
|
||||
|
||||
// Keep the current tab readable inside the (stable) subscription callback.
|
||||
const activeRef = useRef(active);
|
||||
activeRef.current = active;
|
||||
|
||||
const adapter = useMemo<MessagingAdapter | null>(
|
||||
() => (me && socket ? new CrmMessagingAdapter(sdk as unknown as DataDoor, me, socket) : null),
|
||||
[sdk, me, socket],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (!SHELL || !adapter?.subscribeActivity) return;
|
||||
return adapter.subscribeActivity(({ threadId, message }) => {
|
||||
if (message.actorId === me) return; // never notify me about my own message
|
||||
if (activeRef.current === "messenger") return; // already watching chat live
|
||||
toast.push({
|
||||
tone: "info",
|
||||
title: "New message",
|
||||
desc: message.text?.slice(0, 90) || "You have a new message",
|
||||
onClick: () => onNavigate("messenger", threadId),
|
||||
});
|
||||
});
|
||||
}, [adapter, me, toast, onNavigate]);
|
||||
|
||||
return null;
|
||||
}
|
||||
@@ -12,9 +12,11 @@
|
||||
import { useState } from "react";
|
||||
import { Btn, Field, Icon, PageHead, Pill, useToast } from "./ui";
|
||||
import { useSmsSettings } from "@/lib/sms-settings-api";
|
||||
import { useSmtpSettings } from "@/lib/smtp-settings-api";
|
||||
|
||||
const SID_RE = /^AC[0-9a-fA-F]{32}$/;
|
||||
const E164_RE = /^\+[1-9]\d{6,14}$/;
|
||||
const EMAIL_RE = /^[^@\s]+@[^@\s]+\.[^@\s]+$/;
|
||||
|
||||
export function Settings() {
|
||||
return (
|
||||
@@ -29,7 +31,7 @@ export function Settings() {
|
||||
<h3 className="settings-section-title">Integrations</h3>
|
||||
<div className="settings-grid">
|
||||
<TwilioCard />
|
||||
<SmtpComingSoon />
|
||||
<SmtpCard />
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
@@ -120,17 +122,101 @@ function TwilioCard() {
|
||||
);
|
||||
}
|
||||
|
||||
function SmtpComingSoon() {
|
||||
function SmtpCard() {
|
||||
const toast = useToast();
|
||||
const { status, loading, live, configure } = useSmtpSettings();
|
||||
const [editing, setEditing] = useState(false);
|
||||
const [host, setHost] = useState("");
|
||||
const [port, setPort] = useState("587");
|
||||
const [secure, setSecure] = useState(false);
|
||||
const [user, setUser] = useState("");
|
||||
const [pass, setPass] = useState("");
|
||||
const [fromEmail, setFromEmail] = useState("");
|
||||
const [fromName, setFromName] = useState("");
|
||||
const [errors, setErrors] = useState<Record<string, string>>({});
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
const showForm = editing || (!loading && !status.configured);
|
||||
|
||||
function validate(): boolean {
|
||||
const e: Record<string, string> = {};
|
||||
if (!host.trim()) e.host = "SMTP host is required.";
|
||||
const p = Number(port);
|
||||
if (!Number.isInteger(p) || p < 1 || p > 65535) e.port = "Port must be 1–65535.";
|
||||
if (!user.trim()) e.user = "Username is required.";
|
||||
if (!pass.trim()) e.pass = "Password is required.";
|
||||
if (!EMAIL_RE.test(fromEmail.trim())) e.fromEmail = "A valid from-address is required.";
|
||||
setErrors(e);
|
||||
return Object.keys(e).length === 0;
|
||||
}
|
||||
|
||||
async function save() {
|
||||
if (!validate()) return;
|
||||
setSaving(true);
|
||||
try {
|
||||
await configure({ host: host.trim(), port: Number(port), secure, user: user.trim(), pass: pass.trim(), fromEmail: fromEmail.trim(), ...(fromName.trim() ? { fromName: fromName.trim() } : {}) });
|
||||
toast.push({ tone: "success", title: "SMTP connected", desc: "Outbound email now sends from your server." });
|
||||
setHost(""); setPort("587"); setSecure(false); setUser(""); setPass(""); setFromEmail(""); setFromName(""); setErrors({}); setEditing(false);
|
||||
} catch (err) {
|
||||
toast.push({ tone: "error", title: "Couldn't save SMTP settings", desc: (err as Error).message });
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="settings-card is-soon">
|
||||
<div className="settings-card">
|
||||
<div className="settings-card-head">
|
||||
<span className="settings-card-ic" aria-hidden="true"><Icon name="mail" size={20} /></span>
|
||||
<div className="settings-card-titles">
|
||||
<div className="settings-card-name">Email <span className="settings-card-sub">· SMTP</span></div>
|
||||
<div className="settings-card-desc">Bring your own SMTP server for outbound email.</div>
|
||||
<div className="settings-card-desc">Send external email from your own mail server.</div>
|
||||
</div>
|
||||
<Pill tone="muted">Coming soon</Pill>
|
||||
{status.configured ? <Pill tone="green">Connected</Pill> : <Pill tone="muted">Not connected</Pill>}
|
||||
</div>
|
||||
|
||||
{status.configured && !editing ? (
|
||||
<div className="settings-card-body">
|
||||
<dl className="settings-kv">
|
||||
<div><dt>From</dt><dd>{status.fromName ? `${status.fromName} · ` : ""}{status.fromEmail ?? "—"}</dd></div>
|
||||
<div><dt>Server</dt><dd>{status.host ?? "—"}{status.port ? `:${status.port}` : ""}</dd></div>
|
||||
<div><dt>Status</dt><dd>{status.enabled ? "Active" : "Disabled"}</dd></div>
|
||||
</dl>
|
||||
<Btn variant="outline" icon="settings" onClick={() => setEditing(true)}>Update credentials</Btn>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{showForm ? (
|
||||
<div className="settings-card-body">
|
||||
<Field label="SMTP host" required error={errors.host} hint="e.g. smtp.sendgrid.net or your mail server.">
|
||||
<input className="ds-input" value={host} onChange={(e) => setHost(e.target.value)} placeholder="smtp.example.com" autoComplete="off" />
|
||||
</Field>
|
||||
<Field label="Port" required error={errors.port} hint="587 (STARTTLS) or 465 (SSL).">
|
||||
<input className="ds-input" value={port} onChange={(e) => setPort(e.target.value)} placeholder="587" autoComplete="off" />
|
||||
</Field>
|
||||
<label className="settings-check">
|
||||
<input type="checkbox" checked={secure} onChange={(e) => setSecure(e.target.checked)} /> Use SSL/TLS (port 465)
|
||||
</label>
|
||||
<Field label="Username" required error={errors.user} hint="Often your email or an API key.">
|
||||
<input className="ds-input" value={user} onChange={(e) => setUser(e.target.value)} placeholder="apikey / user@example.com" autoComplete="off" />
|
||||
</Field>
|
||||
<Field label="Password" required error={errors.pass} hint="Encrypted on save and never shown again.">
|
||||
<input className="ds-input" type="password" value={pass} onChange={(e) => setPass(e.target.value)} placeholder="••••••••••••" autoComplete="off" />
|
||||
</Field>
|
||||
<Field label="From address" required error={errors.fromEmail}>
|
||||
<input className="ds-input" value={fromEmail} onChange={(e) => setFromEmail(e.target.value)} placeholder="no-reply@example.com" autoComplete="off" />
|
||||
</Field>
|
||||
<Field label="From name" hint="Optional display name on outgoing mail.">
|
||||
<input className="ds-input" value={fromName} onChange={(e) => setFromName(e.target.value)} placeholder="Acme Roofing" autoComplete="off" />
|
||||
</Field>
|
||||
<div className="settings-card-actions">
|
||||
<Btn icon="check-circle" onClick={save} disabled={saving}>{saving ? "Saving…" : status.configured ? "Update" : "Connect SMTP"}</Btn>
|
||||
{status.configured ? <Btn variant="ghost" onClick={() => { setEditing(false); setErrors({}); }}>Cancel</Btn> : null}
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{!live ? <div className="settings-card-note">Demo mode — credentials are stored locally and no email is sent.</div> : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -34,6 +34,7 @@ export const NAV_GROUPS: NavGroup[] = [
|
||||
items: [
|
||||
{ key: "messenger", label: "Messenger", icon: "send", subtitle: "Chat with your team and clients" },
|
||||
{ key: "inbox", label: "Inbox", icon: "bell", subtitle: "Mentions, messages, alerts and mail — all in one" },
|
||||
{ key: "gallery", label: "Smart Gallery", icon: "gallery", subtitle: "Every photo and video for your jobs — searchable, editable and shareable" },
|
||||
],
|
||||
},
|
||||
{
|
||||
@@ -79,7 +80,15 @@ export const NAV_ITEMS: NavItem[] = NAV_GROUPS.flatMap((g) => g.items);
|
||||
// brand-new user with no membership); every other item requires membership, and the
|
||||
// items mapped here additionally require the given permission. Unmapped items are
|
||||
// shown to any member. This is UX only — be-crm still enforces every action.
|
||||
const ALWAYS_VISIBLE = new Set(["dashboard", "profile", "messenger", "inbox"]);
|
||||
//
|
||||
// `gallery` DECISION: it stays in ALWAYS_VISIBLE (nav row always shown to members) rather than
|
||||
// being gated here by `media.view`. The real access gate lives INSIDE the view (SmartGallery reads
|
||||
// `useGalleryFeatures().canView`), which uses the permissive "member with zero media.* perms → all
|
||||
// enabled" fallback. Gating the nav row here would use the stricter sidebar rule (member without the
|
||||
// perm → hidden) and so would hide the gallery from freshly-seeded members before an admin has
|
||||
// configured any Media perms — regressing the demo and the common member. So: always-visible row,
|
||||
// real gating in-view. (be-crm enforces data access regardless of what the nav shows.)
|
||||
const ALWAYS_VISIBLE = new Set(["dashboard", "profile", "messenger", "inbox", "gallery"]);
|
||||
const NAV_PERMISSION: Record<string, string | undefined> = {
|
||||
team: "team.manage",
|
||||
people: "team.manage",
|
||||
|
||||
@@ -0,0 +1,69 @@
|
||||
"use client";
|
||||
|
||||
// ============================================================
|
||||
// The actual @photo-gallery/sdk mount. Split out of smart-gallery.tsx so it can be
|
||||
// loaded with next/dynamic({ ssr: false }) — the SDK is browser-only (matchMedia,
|
||||
// IndexedDB, Leaflet, canvas) and pulls in heavy optional ML models on demand, so it
|
||||
// must stay out of the dashboard's initial bundle and out of the server render.
|
||||
// ============================================================
|
||||
|
||||
import { useMemo } from "react";
|
||||
import { PhotoGallery, type ViewId } from "@photo-gallery/sdk";
|
||||
import { createCrmAIProvider } from "@/lib/gallery-ai";
|
||||
import {
|
||||
GALLERY_THEME_TOKENS,
|
||||
useGalleryFeatures,
|
||||
useGalleryLockProvider,
|
||||
useGalleryStorage,
|
||||
useGalleryUser,
|
||||
} from "@/lib/gallery-api";
|
||||
|
||||
import "@photo-gallery/sdk/styles.css";
|
||||
import "leaflet/dist/leaflet.css";
|
||||
|
||||
export interface SmartGalleryMountProps {
|
||||
/** The dashboard's current appearance — the gallery must never diverge from the host. */
|
||||
theme: "dark" | "light";
|
||||
}
|
||||
|
||||
export default function SmartGalleryMount({ theme }: SmartGalleryMountProps) {
|
||||
const { adapter } = useGalleryStorage();
|
||||
const currentUser = useGalleryUser();
|
||||
// Server-backed Recently Deleted lock when the Shell is wired; `undefined` in demo mode, which
|
||||
// leaves the SDK on its own device-local lock (see useGalleryLockProvider).
|
||||
const lockProvider = useGalleryLockProvider();
|
||||
// Feature toggles resolved from the caller's CRM permissions (Media group). Superadmins/owners and
|
||||
// the demo see everything; see useGalleryFeatures for the safe permissive fallback.
|
||||
const { features } = useGalleryFeatures();
|
||||
|
||||
// Sidebar rows + Collections sections the CRM never wants to surface. The SDK hides both the row and
|
||||
// the matching Collections section for each id. Screenshots + Documents aren't part of a roofing CRM.
|
||||
const hiddenViews: ViewId[] = ["screenshots", "sys:documents"];
|
||||
|
||||
// One provider per mount. Every model is dynamically imported inside it, so constructing
|
||||
// it is cheap; the weight only arrives when a photo is actually analyzed.
|
||||
const ai = useMemo(() => createCrmAIProvider(), []);
|
||||
|
||||
return (
|
||||
<PhotoGallery
|
||||
embedded
|
||||
adapter={adapter}
|
||||
ai={ai}
|
||||
// The CRM owns light/dark, so the in-gallery Appearance switcher is suppressed and the
|
||||
// theme is driven straight off the dashboard's own toggle.
|
||||
theme={theme}
|
||||
chrome={{ titlebar: false, themeSwitcher: false }}
|
||||
themeTokens={GALLERY_THEME_TOKENS}
|
||||
borderRadius={12}
|
||||
currentUser={currentUser}
|
||||
lockProvider={lockProvider}
|
||||
title="Smart Gallery"
|
||||
// The SDK's floating Info panel defaults to 64px from the top — the height of its
|
||||
// OWN toolbar. Inside the dashboard it has to clear the 84px CRM topbar instead.
|
||||
// `style` is applied after the token vars, so this wins over the SDK's inline default.
|
||||
style={{ ["--apg-overlay-top" as string]: "96px" }}
|
||||
hiddenViews={hiddenViews}
|
||||
features={features}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,122 @@
|
||||
"use client";
|
||||
|
||||
// ============================================================
|
||||
// Smart Gallery — the tenant's media library, powered by @photo-gallery/sdk embedded
|
||||
// inside the dashboard shell. The SDK owns the gallery experience (grid, lightbox,
|
||||
// photo + video editors, map, people, versions, comments, AI); this file owns the
|
||||
// LynkedUp chrome around it: page head, demo-mode banner, sizing, and failure
|
||||
// containment so a gallery fault can never take the dashboard down.
|
||||
//
|
||||
// Storage + identity come from `@/lib/gallery-api` (be-crm data door when the Shell is
|
||||
// configured, device-local otherwise). Theming comes from GALLERY_THEME_TOKENS, which
|
||||
// maps the SDK's tokens onto this dashboard's own CSS variables.
|
||||
// ============================================================
|
||||
|
||||
import { Component, type ErrorInfo, type ReactNode } from "react";
|
||||
import dynamic from "next/dynamic";
|
||||
import { Icon } from "./ui";
|
||||
import { useGalleryFeatures, useGalleryStorage } from "@/lib/gallery-api";
|
||||
|
||||
const SmartGalleryMount = dynamic(() => import("./smart-gallery-mount"), {
|
||||
ssr: false,
|
||||
loading: () => <GalleryPlaceholder label="Loading your library…" />,
|
||||
});
|
||||
|
||||
export function SmartGallery({ theme }: { theme: "dark" | "light" }) {
|
||||
const { live } = useGalleryStorage();
|
||||
// Whole-view gate. `media.view` with the same permissive fallback the feature toggles use, so a
|
||||
// superadmin/owner and the demo always pass, and a member is only blocked if they hold some Media
|
||||
// perms but not `media.view`. The sidebar keeps the row visible (see sidebar.tsx §4) — the real
|
||||
// gate is here.
|
||||
const { canView } = useGalleryFeatures();
|
||||
|
||||
return (
|
||||
<div className="view gal">
|
||||
{/* Slim header — the big PageHead ate vertical space the gallery needs. The CRM topbar already
|
||||
shows the "Smart Gallery" title; this compact row (~40px) just adds context and the icon. */}
|
||||
<div className="gal-head">
|
||||
<span className="gal-head-ic">
|
||||
<Icon name="gallery" size={16} />
|
||||
</span>
|
||||
<h1 className="gal-head-title">Smart Gallery</h1>
|
||||
<span className="gal-head-sub">Every photo and video for your jobs — searchable, editable and shareable.</span>
|
||||
</div>
|
||||
|
||||
{!live && (
|
||||
<div className="gal-banner">
|
||||
<Icon name="info" size={14} />
|
||||
<span>Demo mode — stored on this device only. It goes live once the Shell + be-crm are connected.</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{canView ? (
|
||||
<div className="gal-shell">
|
||||
<GalleryBoundary>
|
||||
<SmartGalleryMount theme={theme} />
|
||||
</GalleryBoundary>
|
||||
</div>
|
||||
) : (
|
||||
<div className="gal-shell">
|
||||
<div className="gal-placeholder">
|
||||
<span className="gal-placeholder-ic">
|
||||
<Icon name="lock" size={28} />
|
||||
</span>
|
||||
<h3>You don't have access to the gallery</h3>
|
||||
<p>Ask a workspace admin to grant you the “View Smart Gallery” permission.</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
|
||||
function GalleryPlaceholder({ label }: { label: string }) {
|
||||
return (
|
||||
<div className="gal-placeholder">
|
||||
<span className="gal-placeholder-ic">
|
||||
<Icon name="gallery" size={30} />
|
||||
</span>
|
||||
<p>{label}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface BoundaryState {
|
||||
error: Error | null;
|
||||
}
|
||||
|
||||
/**
|
||||
* The gallery is a large third-party surface with canvas, workers and optional ML models. A render
|
||||
* fault inside it must degrade to a message rather than blanking the whole dashboard, so it gets its
|
||||
* own error boundary. (Error boundaries still require a class component in React 19.)
|
||||
*/
|
||||
class GalleryBoundary extends Component<{ children: ReactNode }, BoundaryState> {
|
||||
state: BoundaryState = { error: null };
|
||||
|
||||
static getDerivedStateFromError(error: Error): BoundaryState {
|
||||
return { error };
|
||||
}
|
||||
|
||||
componentDidCatch(error: Error, info: ErrorInfo): void {
|
||||
console.error("[smart-gallery] render failed", error, info.componentStack);
|
||||
}
|
||||
|
||||
render(): ReactNode {
|
||||
const { error } = this.state;
|
||||
if (!error) return this.props.children;
|
||||
return (
|
||||
<div className="gal-placeholder gal-placeholder-error">
|
||||
<span className="gal-placeholder-ic">
|
||||
<Icon name="alert" size={30} />
|
||||
</span>
|
||||
<h3>The gallery could not be displayed</h3>
|
||||
<p>{error.message || "An unexpected error occurred."}</p>
|
||||
<button className="ds-btn v-outline s-sm" onClick={() => this.setState({ error: null })}>
|
||||
<Icon name="refresh" size={14} /> Try again
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -4,14 +4,15 @@ import { useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { Sun, Moon, ChevronDown, LogOut } from "lucide-react";
|
||||
import { useAuth } from "@abe-kap/appshell-sdk/react";
|
||||
import { Icon } from "./ui";
|
||||
import { GlobalSearch } from "./global-search";
|
||||
import { NotificationBell } from "./notification-bell";
|
||||
import { user } from "./account-data";
|
||||
|
||||
function initialsOf(name: string): string {
|
||||
return name.split(/\s+/).filter(Boolean).slice(0, 2).map((p) => p[0]).join("").toUpperCase() || "?";
|
||||
}
|
||||
|
||||
export function Topbar({ theme, onToggle, title, subtitle }: { theme: "dark" | "light"; onToggle: () => void; title: string; subtitle: string }) {
|
||||
export function Topbar({ theme, onToggle, title, subtitle, onNavigate }: { theme: "dark" | "light"; onToggle: () => void; title: string; subtitle: string; onNavigate: (surface: "messenger" | "inbox", threadId: string) => void }) {
|
||||
// When signed in through the Shell, show the real identity from the App Context
|
||||
// Envelope; otherwise fall back to the static demo user.
|
||||
const router = useRouter();
|
||||
@@ -35,14 +36,11 @@ export function Topbar({ theme, onToggle, title, subtitle }: { theme: "dark" | "
|
||||
<p>{subtitle}</p>
|
||||
</div>
|
||||
<div className="top-actions">
|
||||
<button className="ic-btn" aria-label="Search"><Icon name="search" size={18} /></button>
|
||||
<GlobalSearch onNavigate={onNavigate} />
|
||||
<button className="ic-btn" aria-label="Toggle theme" onClick={onToggle}>
|
||||
{theme === "dark" ? <Moon size={18} /> : <Sun size={18} />}
|
||||
</button>
|
||||
<button className="ic-btn" aria-label="Notifications" style={{ position: "relative" }}>
|
||||
<Icon name="bell" size={18} />
|
||||
<span style={{ position: "absolute", top: 9, right: 10, width: 7, height: 7, borderRadius: 99, background: "var(--orange)", border: "2px solid var(--panel)" }} />
|
||||
</button>
|
||||
<NotificationBell />
|
||||
<div className="top-user-wrap" style={{ position: "relative" }}>
|
||||
<button className="top-user" onClick={() => setMenuOpen((o) => !o)} aria-haspopup="menu" aria-expanded={menuOpen}>
|
||||
<span className="av" style={{ background: user.avatarGradient, display: "grid", placeItems: "center", color: "#fff", fontWeight: 700, fontSize: 12 }}>{initials}</span>
|
||||
|
||||
@@ -24,7 +24,8 @@ import {
|
||||
LayoutDashboard, Building2, FolderKanban, UserPlus, BadgeCheck, Filter,
|
||||
Truck, CloudLightning, Map as MapIcon, PenTool, Calculator, CalendarDays,
|
||||
Trophy, ListChecks, Users, Settings, Sparkles, MoreHorizontal,
|
||||
UsersRound, Download, type LucideIcon,
|
||||
UsersRound, Image as ImageIcon, Images, File, FolderOpen, Download,
|
||||
Video, Play, LayoutGrid, ZoomIn, type LucideIcon,
|
||||
} from "lucide-react";
|
||||
|
||||
/* ---------------------------------------------------------- */
|
||||
@@ -49,7 +50,11 @@ const ICONS: Record<string, LucideIcon> = {
|
||||
storm: CloudLightning, territory: MapIcon, procanvas: PenTool,
|
||||
estimates: Calculator, schedule: CalendarDays, leaderboard: Trophy,
|
||||
subtasks: ListChecks, people: Users, settings: Settings, ai: Sparkles,
|
||||
team: UsersRound, dots: MoreHorizontal, download: Download,
|
||||
team: UsersRound, dots: MoreHorizontal,
|
||||
// media / gallery (also used by messenger.tsx, which already asks for image/file)
|
||||
image: ImageIcon, gallery: Images, file: File, folder: FolderOpen,
|
||||
download: Download, video: Video, play: Play, grid: LayoutGrid,
|
||||
filter: Filter, zoom: ZoomIn, sparkle: Sparkles, "map-pin": MapPin,
|
||||
};
|
||||
|
||||
export function Icon({ name, size = 18, className, strokeWidth = 2 }: { name: string; size?: number; className?: string; strokeWidth?: number }) {
|
||||
@@ -263,7 +268,7 @@ export function Modal({ open, onClose, title, subtitle, icon, children, footer,
|
||||
/* Toast */
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
type Toast = { id: number; tone: "success" | "info" | "error"; title: string; desc?: string };
|
||||
type Toast = { id: number; tone: "success" | "info" | "error"; title: string; desc?: string; onClick?: () => void };
|
||||
type ToastCtx = { push: (t: Omit<Toast, "id">) => void };
|
||||
const ToastContext = createContext<ToastCtx | null>(null);
|
||||
|
||||
@@ -286,9 +291,12 @@ export function ToastProvider({ children }: { children: ReactNode }) {
|
||||
{children}
|
||||
<div className="ds-toasts">
|
||||
{items.map((t) => (
|
||||
<div key={t.id} className={`ds-toast tone-${t.tone}`}>
|
||||
<div key={t.id} className={`ds-toast tone-${t.tone}${t.onClick ? " is-clickable" : ""}`}>
|
||||
<Icon name={t.tone === "success" ? "check-circle" : t.tone === "error" ? "alert" : "info"} size={18} />
|
||||
<div className="ds-toast-body">
|
||||
<div
|
||||
className="ds-toast-body"
|
||||
{...(t.onClick ? { role: "button", tabIndex: 0, onClick: () => { t.onClick?.(); setItems((s) => s.filter((x) => x.id !== t.id)); } } : {})}
|
||||
>
|
||||
<div className="ds-toast-title">{t.title}</div>
|
||||
{t.desc && <div className="ds-toast-desc">{t.desc}</div>}
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,72 @@
|
||||
// ============================================================
|
||||
// LynkedUp Pro — Lead Verification mock data.
|
||||
// The verification desk: door-knocked / web leads move through
|
||||
// an identity + insurance verification workflow before they
|
||||
// become working deals. All client-side.
|
||||
// ============================================================
|
||||
|
||||
export type VStatus = "verified" | "in_progress" | "assigned" | "pending" | "unverified";
|
||||
|
||||
export type VActivity = { text: string; time: string; who: string };
|
||||
|
||||
export type VLead = {
|
||||
id: string;
|
||||
initials: string;
|
||||
name: string;
|
||||
address: string;
|
||||
phone: string;
|
||||
source: string;
|
||||
assignee: { initials: string; name: string } | null;
|
||||
status: VStatus;
|
||||
verification: string; // sub-status text
|
||||
created: string;
|
||||
// detail (optional — derived when absent)
|
||||
email?: string;
|
||||
createdAt?: string; // date + time
|
||||
verifiedAt?: string;
|
||||
notes?: string;
|
||||
activity?: VActivity[];
|
||||
};
|
||||
|
||||
export const V_STATUS_META: Record<VStatus, { label: string; tone: string }> = {
|
||||
verified: { label: "Verified", tone: "green" },
|
||||
in_progress: { label: "In Progress", tone: "orange" },
|
||||
assigned: { label: "Assigned", tone: "blue" },
|
||||
pending: { label: "Pending", tone: "purple" },
|
||||
unverified: { label: "Unverified", tone: "red" },
|
||||
};
|
||||
|
||||
const WADE = { initials: "WH", name: "Wade Hollis" };
|
||||
const DARLENE = { initials: "DB", name: "Darlene Brooks" };
|
||||
const ROY = { initials: "RS", name: "Roy Schaefer" };
|
||||
|
||||
export const V_LEADS: VLead[] = [
|
||||
{
|
||||
id: "LD-V-001", initials: "K", name: "Kevin Hartley", address: "2814 Ravenswood Dr, Plano, TX 75023", phone: "(972) 413-8902", source: "Door Knock", assignee: WADE, status: "verified", verification: "Verified", created: "May 14, 2026",
|
||||
email: "kevin.hartley@gmail.com", createdAt: "May 14, 2026, 2:40 PM", verifiedAt: "May 16, 2026, 7:55 PM",
|
||||
notes: "Ownership confirmed via county records. Hail damage from April 28 storm event verified.",
|
||||
activity: [
|
||||
{ text: "Lead submitted via door knock intake.", time: "May 14, 2026, 2:40 PM", who: "System" },
|
||||
{ text: "Assigned to Wade Hollis.", time: "May 14, 2026, 3:10 PM", who: "Wade Hollis" },
|
||||
{ text: "First contact made — homeowner confirmed damage.", time: "May 15, 2026, 2:00 PM", who: "Wade Hollis" },
|
||||
{ text: "Verified and pushed to New Leads.", time: "May 16, 2026, 7:55 PM", who: "Wade Hollis" },
|
||||
],
|
||||
},
|
||||
{ id: "LD-V-002", initials: "S", name: "Sandra Nguyen", address: "4817 Shady Brook Ln, Plano, TX 75093", phone: "(469) 551-7034", source: "Web Form", assignee: DARLENE, status: "verified", verification: "Verified", created: "May 17, 2026" },
|
||||
{ id: "LD-V-003", initials: "M", name: "Marcus Trevino", address: "1234 Oak Creek Blvd, Plano, TX 75075", phone: "(214) 837-4561", source: "Storm Canvass", assignee: WADE, status: "in_progress", verification: "Verifying Identity", created: "May 22, 2026" },
|
||||
{ id: "LD-V-004", initials: "B", name: "Brenda Kowalski", address: "890 Custer Rd, Plano, TX 75075", phone: "(972) 604-2817", source: "Referral", assignee: ROY, status: "in_progress", verification: "Reviewing Insurance", created: "May 20, 2026" },
|
||||
{ id: "LD-V-005", initials: "J", name: "James Whitaker", address: "3320 Parkhaven Dr, Plano, TX 75075", phone: "(469) 720-1188", source: "Door Knock", assignee: WADE, status: "in_progress", verification: "Confirming Ownership", created: "May 23, 2026" },
|
||||
{ id: "LD-V-006", initials: "P", name: "Priya Sharma", address: "5102 Mapleshade Ln, Plano, TX 75093", phone: "(972) 415-6620", source: "Web Form", assignee: DARLENE, status: "in_progress", verification: "Reviewing Insurance", created: "May 24, 2026" },
|
||||
{ id: "LD-V-007", initials: "C", name: "Carlos Mendez", address: "1470 Coit Rd, Plano, TX 75075", phone: "(214) 902-5533", source: "Storm Canvass", assignee: ROY, status: "in_progress", verification: "Confirming Damage", created: "May 25, 2026" },
|
||||
{ id: "LD-V-008", initials: "E", name: "Emily Carter", address: "2609 Rivercrest Dr, Plano, TX 75023", phone: "(469) 338-4471", source: "Door Knock", assignee: DARLENE, status: "assigned", verification: "Assigned", created: "May 26, 2026" },
|
||||
{ id: "LD-V-009", initials: "T", name: "Tyrone Jackson", address: "744 Legacy Dr, Plano, TX 75023", phone: "(972) 551-9042", source: "Referral", assignee: WADE, status: "assigned", verification: "Assigned", created: "May 26, 2026" },
|
||||
{ id: "LD-V-010", initials: "N", name: "Nicole Foster", address: "3901 Preston Meadow Dr, Plano, TX 75093", phone: "(214) 660-7719", source: "Web Form", assignee: ROY, status: "assigned", verification: "Assigned", created: "May 27, 2026" },
|
||||
{ id: "LD-V-011", initials: "A", name: "Aaron Blake", address: "1188 Alma Dr, Plano, TX 75075", phone: "(469) 471-3350", source: "Door Knock", assignee: null, status: "pending", verification: "Pending Review", created: "May 27, 2026" },
|
||||
{ id: "LD-V-012", initials: "G", name: "Grace Liu", address: "5540 Communications Pkwy, Plano, TX 75093", phone: "(972) 883-2201", source: "Web Form", assignee: null, status: "pending", verification: "Pending Review", created: "May 28, 2026" },
|
||||
{ id: "LD-V-013", initials: "D", name: "Derek Olsen", address: "902 Independence Pkwy, Plano, TX 75075", phone: "(214) 774-6690", source: "Call-In", assignee: null, status: "pending", verification: "Pending Review", created: "May 28, 2026" },
|
||||
{ id: "LD-V-014", initials: "M", name: "Monica Reyes", address: "3115 Rasor Blvd, Plano, TX 75093", phone: "(469) 205-8814", source: "Storm Canvass", assignee: null, status: "unverified", verification: "Unverified", created: "May 29, 2026" },
|
||||
{ id: "LD-V-015", initials: "S", name: "Sam Patterson", address: "677 Spring Creek Pkwy, Plano, TX 75023", phone: "(972) 330-1247", source: "Call-In", assignee: null, status: "unverified", verification: "Unverified", created: "May 29, 2026" },
|
||||
];
|
||||
|
||||
export const V_SOURCES = ["Door Knock", "Web Form", "Storm Canvass", "Referral", "Call-In"];
|
||||
export const V_ASSIGNEES = ["Wade Hollis", "Darlene Brooks", "Roy Schaefer"];
|
||||
@@ -0,0 +1,306 @@
|
||||
"use client";
|
||||
|
||||
// ============================================================
|
||||
// Lead Verification — the verification desk.
|
||||
// · Stat tiles : Verified / In Progress / Assigned / Pending
|
||||
// / Unverified counts (click to filter)
|
||||
// · Toolbar : search + status / source / assignee filters
|
||||
// · Table : Lead ID · Customer · Phone · Source ·
|
||||
// Assigned To · Status · Verification · Created
|
||||
// · Actions (view / verify / ⋯ menu)
|
||||
// · Detail : view → popup with Contact, Assignment,
|
||||
// Verification Notes and an Activity timeline
|
||||
// Data comes from verify-data.ts (client-side mock).
|
||||
// ============================================================
|
||||
|
||||
import { useMemo, useState, useEffect } from "react";
|
||||
import { createPortal } from "react-dom";
|
||||
import { Avatar, Btn, Icon, Modal, PageHead, Pill, useToast } from "./ui";
|
||||
import { V_LEADS, V_STATUS_META, V_SOURCES, V_ASSIGNEES, type VStatus, type VLead, type VActivity } from "./verify-data";
|
||||
|
||||
const STAT_ORDER: VStatus[] = ["verified", "in_progress", "assigned", "pending", "unverified"];
|
||||
const STAT_ICON: Record<VStatus, string> = {
|
||||
verified: "check-circle", in_progress: "refresh", assigned: "user", pending: "clock", unverified: "alert",
|
||||
};
|
||||
|
||||
/* ---- derive detail when the row doesn't carry it ---------- */
|
||||
function deriveEmail(l: VLead) {
|
||||
if (l.email) return l.email;
|
||||
const [first, ...rest] = l.name.toLowerCase().split(" ");
|
||||
return `${first}.${rest.join("")}@gmail.com`;
|
||||
}
|
||||
function deriveCreatedAt(l: VLead) { return l.createdAt ?? `${l.created}, 10:00 AM`; }
|
||||
function buildActivity(l: VLead): VActivity[] {
|
||||
if (l.activity) return l.activity;
|
||||
const who = l.assignee?.name ?? "System";
|
||||
const a: VActivity[] = [{ text: `Lead submitted via ${l.source.toLowerCase()} intake.`, time: deriveCreatedAt(l), who: "System" }];
|
||||
if (l.assignee) a.push({ text: `Assigned to ${l.assignee.name}.`, time: l.created, who: l.assignee.name });
|
||||
if (l.status === "in_progress") a.push({ text: `Verification in progress — ${l.verification.toLowerCase()}.`, time: l.created, who });
|
||||
if (l.status === "verified") a.push({ text: "Verified and pushed to New Leads.", time: l.verifiedAt ?? l.created, who });
|
||||
return a;
|
||||
}
|
||||
|
||||
type MenuState = { lead: VLead; x: number; y: number } | null;
|
||||
|
||||
export function Verify() {
|
||||
const toast = useToast();
|
||||
const [query, setQuery] = useState("");
|
||||
const [status, setStatus] = useState("all");
|
||||
const [source, setSource] = useState("all");
|
||||
const [assignee, setAssignee] = useState("all");
|
||||
const [selected, setSelected] = useState<VLead | null>(null);
|
||||
const [menu, setMenu] = useState<MenuState>(null);
|
||||
|
||||
const counts = useMemo(() => {
|
||||
const m: Record<string, number> = {};
|
||||
for (const l of V_LEADS) m[l.status] = (m[l.status] ?? 0) + 1;
|
||||
return m;
|
||||
}, []);
|
||||
|
||||
const rows = useMemo(() => {
|
||||
const q = query.trim().toLowerCase();
|
||||
return V_LEADS.filter((l) => {
|
||||
const matchQ = !q || `${l.name} ${l.id} ${l.phone} ${l.source} ${l.address}`.toLowerCase().includes(q);
|
||||
const matchStatus = status === "all" || l.status === status;
|
||||
const matchSource = source === "all" || l.source === source;
|
||||
const matchAssignee = assignee === "all" || l.assignee?.name === assignee;
|
||||
return matchQ && matchStatus && matchSource && matchAssignee;
|
||||
});
|
||||
}, [query, status, source, assignee]);
|
||||
|
||||
function act(l: VLead, title: string, desc: string, tone: "success" | "info" = "info") {
|
||||
setMenu(null);
|
||||
toast.push({ tone, title, desc });
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="view lv">
|
||||
<PageHead
|
||||
eyebrow="Sales"
|
||||
title="Lead Verification"
|
||||
subtitle="Identity & insurance checks before a lead becomes a working deal."
|
||||
icon="verify"
|
||||
actions={<Btn variant="outline" icon="refresh" onClick={() => toast.push({ tone: "info", title: "Queue refreshed", desc: "Verification queue is up to date." })}>Refresh</Btn>}
|
||||
/>
|
||||
|
||||
{/* ---- stat tiles ---- */}
|
||||
<div className="lv-stats">
|
||||
{STAT_ORDER.map((s) => {
|
||||
const meta = V_STATUS_META[s];
|
||||
return (
|
||||
<button key={s} className={`lv-stat tone-${meta.tone} ${status === s ? "active" : ""}`} onClick={() => setStatus(status === s ? "all" : s)}>
|
||||
<span className="lv-stat-ic"><Icon name={STAT_ICON[s]} size={16} /></span>
|
||||
<span className="lv-stat-val">{counts[s] ?? 0}</span>
|
||||
<span className="lv-stat-lbl">{meta.label}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* ---- toolbar ---- */}
|
||||
<div className="lv-toolbar">
|
||||
<div className="lv-search">
|
||||
<Icon name="search" size={16} />
|
||||
<input value={query} onChange={(e) => setQuery(e.target.value)} placeholder="Search name, lead ID, phone, source…" aria-label="Search verification leads" />
|
||||
{query && <button className="lv-search-x" aria-label="Clear" onClick={() => setQuery("")}><Icon name="x" size={14} /></button>}
|
||||
</div>
|
||||
<select className="ds-select lv-filter" value={status} onChange={(e) => setStatus(e.target.value)} aria-label="Filter by status">
|
||||
<option value="all">All statuses</option>
|
||||
{STAT_ORDER.map((s) => <option key={s} value={s}>{V_STATUS_META[s].label}</option>)}
|
||||
</select>
|
||||
<select className="ds-select lv-filter" value={source} onChange={(e) => setSource(e.target.value)} aria-label="Filter by source">
|
||||
<option value="all">All sources</option>
|
||||
{V_SOURCES.map((s) => <option key={s} value={s}>{s}</option>)}
|
||||
</select>
|
||||
<select className="ds-select lv-filter" value={assignee} onChange={(e) => setAssignee(e.target.value)} aria-label="Filter by assignee">
|
||||
<option value="all">All assignees</option>
|
||||
{V_ASSIGNEES.map((a) => <option key={a} value={a}>{a}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* ---- table ---- */}
|
||||
<div className="lv-tablewrap">
|
||||
<table className="lv-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Lead ID</th><th>Customer</th><th>Phone</th><th>Source</th>
|
||||
<th>Assigned To</th><th>Status</th><th>Verification</th><th>Created</th>
|
||||
<th className="lv-actions-h">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{rows.length === 0 ? (
|
||||
<tr><td colSpan={9} className="lv-empty">No leads match your filters.</td></tr>
|
||||
) : rows.map((l) => {
|
||||
const meta = V_STATUS_META[l.status];
|
||||
return (
|
||||
<tr key={l.id}>
|
||||
<td><div className="lv-id">{l.id}</div><div className="lv-id-date">{l.created}</div></td>
|
||||
<td>
|
||||
<div className="lv-cust">
|
||||
<Avatar initials={l.initials} size={34} />
|
||||
<div className="lv-cust-body">
|
||||
<div className="lv-cust-name">{l.name}</div>
|
||||
<div className="lv-cust-addr">{l.address}</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="lv-phone">{l.phone}</td>
|
||||
<td><span className="lv-source">{l.source}</span></td>
|
||||
<td>
|
||||
{l.assignee ? (
|
||||
<div className="lv-assignee">
|
||||
<Avatar initials={l.assignee.initials} size={26} gradient="linear-gradient(135deg,#4f8cff,#2c5cff)" />
|
||||
<span>{l.assignee.name}</span>
|
||||
</div>
|
||||
) : <span className="lv-unassigned">— Unassigned</span>}
|
||||
</td>
|
||||
<td><Pill tone={meta.tone}>{meta.label}</Pill></td>
|
||||
<td><span className={`lv-verif v-${l.status}`}><Icon name={STAT_ICON[l.status]} size={13} /> {l.verification}</span></td>
|
||||
<td className="lv-created">{l.created}</td>
|
||||
<td>
|
||||
<div className="lv-rowacts">
|
||||
<button className="lv-act" aria-label="View details" title="View details" onClick={() => setSelected(l)}><Icon name="eye" size={15} /></button>
|
||||
<button className="lv-act primary" aria-label="Verify" title="Verify lead" onClick={() => act(l, "Marked verified", `${l.name} moved to Verified.`, "success")}><Icon name="check-circle" size={15} /></button>
|
||||
<button className="lv-act" aria-label="More actions" title="More actions" onClick={(e) => setMenu(menu?.lead.id === l.id ? null : { lead: l, x: e.clientX, y: e.clientY })}><Icon name="dots" size={15} /></button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div className="lv-count">{rows.length} of {V_LEADS.length} leads</div>
|
||||
|
||||
<ActionsMenu menu={menu} onClose={() => setMenu(null)} onAct={act} onView={(l) => { setSelected(l); setMenu(null); }} />
|
||||
<VerifyDetail lead={selected} onClose={() => setSelected(null)} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------- */
|
||||
/* Row actions dropdown (portalled, fixed-positioned) */
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
function ActionsMenu({ menu, onClose, onAct, onView }: {
|
||||
menu: MenuState; onClose: () => void;
|
||||
onAct: (l: VLead, title: string, desc: string, tone?: "success" | "info") => void;
|
||||
onView: (l: VLead) => void;
|
||||
}) {
|
||||
const [mounted, setMounted] = useState(false);
|
||||
useEffect(() => { setMounted(true); }, []);
|
||||
useEffect(() => {
|
||||
if (!menu) return;
|
||||
const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") onClose(); };
|
||||
document.addEventListener("keydown", onKey);
|
||||
return () => document.removeEventListener("keydown", onKey);
|
||||
}, [menu, onClose]);
|
||||
if (!menu || !mounted) return null;
|
||||
|
||||
const l = menu.lead;
|
||||
const left = Math.max(8, menu.x - 196);
|
||||
const top = Math.min(menu.y + 8, window.innerHeight - 260);
|
||||
|
||||
const items = [
|
||||
{ icon: "eye", label: "View Details", run: () => onView(l) },
|
||||
{ icon: "check-circle", label: "Verify Lead", run: () => onAct(l, "Verified", `${l.name} marked as verified.`, "success") },
|
||||
{ icon: "alert", label: "Mark Unverified", run: () => onAct(l, "Marked unverified", `${l.name} moved to Unverified.`) },
|
||||
{ icon: "user", label: "Change Assignee", run: () => onAct(l, "Change assignee", `Pick a new rep for ${l.name}.`) },
|
||||
{ icon: "refresh", label: "Reassign (In Progress)", run: () => onAct(l, "Reassigned", `${l.name} set to In Progress.`) },
|
||||
{ icon: "clock", label: "Move to Pending", run: () => onAct(l, "Moved to pending", `${l.name} is now Pending review.`) },
|
||||
];
|
||||
|
||||
return createPortal(
|
||||
<>
|
||||
<div className="lv-menu-scrim" onClick={onClose} />
|
||||
<div className="lv-menu" style={{ left, top }} role="menu">
|
||||
{items.map((it) => (
|
||||
<button key={it.label} className="lv-menu-item" role="menuitem" onClick={it.run}>
|
||||
<Icon name={it.icon} size={14} /> {it.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</>,
|
||||
document.body,
|
||||
);
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------- */
|
||||
/* Verification detail popup */
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
function VerifyDetail({ lead, onClose }: { lead: VLead | null; onClose: () => void }) {
|
||||
if (!lead) return null;
|
||||
const meta = V_STATUS_META[lead.status];
|
||||
const activity = buildActivity(lead);
|
||||
|
||||
return (
|
||||
<Modal open={!!lead} onClose={onClose} size="lg" title={lead.name} subtitle={`${lead.id} · ${lead.verification}`} icon="verify"
|
||||
footer={<>
|
||||
<Btn variant="ghost" icon="phone">Call</Btn>
|
||||
<Btn icon="check-circle">Verify Lead</Btn>
|
||||
</>}
|
||||
>
|
||||
<div className="lv-detail">
|
||||
<div className="lv-d-identity">
|
||||
<Avatar initials={lead.initials} size={50} />
|
||||
<div>
|
||||
<div className="lv-d-name">{lead.name}</div>
|
||||
<div className="lv-d-pills">
|
||||
<Pill tone={meta.tone}>{meta.label}</Pill>
|
||||
<span className={`lv-verif v-${lead.status}`}><Icon name={STAT_ICON[lead.status]} size={13} /> {lead.verification}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="lv-d-grid">
|
||||
<div className="lv-d-section">
|
||||
<div className="lv-d-head"><Icon name="user" size={15} /> Contact</div>
|
||||
<Row label="Phone" value={lead.phone} />
|
||||
<Row label="Email" value={deriveEmail(lead)} />
|
||||
<Row label="Address" value={lead.address} />
|
||||
<Row label="Source" value={lead.source} />
|
||||
</div>
|
||||
<div className="lv-d-section">
|
||||
<div className="lv-d-head"><Icon name="team" size={15} /> Assignment</div>
|
||||
<Row label="Assigned To" value={lead.assignee?.name ?? "Unassigned"} />
|
||||
<Row label="Created" value={deriveCreatedAt(lead)} />
|
||||
{lead.verifiedAt && <Row label="Verified At" value={lead.verifiedAt} />}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{lead.notes && (
|
||||
<div className="lv-d-notes">
|
||||
<div className="lv-d-head"><Icon name="edit" size={15} /> Verification Notes</div>
|
||||
<p>{lead.notes}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="lv-d-activity">
|
||||
<div className="lv-d-head"><Icon name="clock" size={15} /> Activity</div>
|
||||
<ul className="lv-timeline">
|
||||
{activity.map((a, i) => (
|
||||
<li key={i} className="lv-tl-item">
|
||||
<span className="lv-tl-dot" />
|
||||
<div className="lv-tl-body">
|
||||
<div className="lv-tl-text">{a.text}</div>
|
||||
<div className="lv-tl-meta">{a.time} · {a.who}</div>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
function Row({ label, value }: { label: string; value: string }) {
|
||||
return (
|
||||
<div className="lv-d-row">
|
||||
<span className="lv-d-k">{label}</span>
|
||||
<span className="lv-d-v">{value}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user