Goutam
102b66dfca
Leads: card board with status stats, search + status tabs, a rich lead-detail popup (contact, property, job, insurance, assignment, storm banner) and a New Lead intake form (Quick / Full Form) with multi-phone/email rows, site-photo dropzone and urgency picker. Lead Verification: clickable stat tiles, status/source/assignee filters, a full verification table, a detail popup with an activity timeline, and a per-row actions menu (verify / reassign / pending…). Both wired into the dashboard view switcher and styled with the existing orange brand + glass-card system (dark & light themes). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
84 lines
3.6 KiB
TypeScript
84 lines
3.6 KiB
TypeScript
"use client";
|
|
|
|
// ============================================================
|
|
// Dashboard shell — premium dark theme. Keeps the sidebar +
|
|
// header and swaps the inner content. Profile / Support / Rules
|
|
// render real views; other workspace modules show a placeholder.
|
|
// ============================================================
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { Sidebar, NAV_ITEMS } from "./sidebar";
|
|
import { Topbar } from "./topbar";
|
|
import { ToastProvider, PageHead, Btn, Icon } from "./ui";
|
|
import { Profile } from "./profile";
|
|
import { Support } from "./support";
|
|
import { Rules } from "./rules";
|
|
import { AiAssistant } from "./ai-assistant";
|
|
import { TeamManagement } from "./team-management";
|
|
import { Messenger } from "./messenger";
|
|
import { Inbox } from "./inbox";
|
|
import { Leads } from "./leads";
|
|
import { Verify } from "./verify";
|
|
import "../../app/dashboard/dashboard.css";
|
|
|
|
export function Dashboard() {
|
|
const [theme, setTheme] = useState<"dark" | "light">("dark");
|
|
const [active, setActive] = useState("dashboard");
|
|
|
|
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 {}
|
|
}, []);
|
|
function toggle() {
|
|
setTheme((t) => { const n = t === "dark" ? "light" : "dark"; try { localStorage.setItem("lup_dash_theme", n); } catch {} return n; });
|
|
}
|
|
|
|
const item = NAV_ITEMS.find((i) => i.key === active);
|
|
const title = item?.label ?? "Dashboard";
|
|
const subtitle = item?.subtitle ?? "Workspace module";
|
|
|
|
return (
|
|
<div className="dash-root" data-theme={theme}>
|
|
<Sidebar active={active} onSelect={setActive} />
|
|
<div className="dash-main">
|
|
<Topbar theme={theme} onToggle={toggle} title={title} subtitle={subtitle} />
|
|
<div className="dash-content">
|
|
<ToastProvider>
|
|
{active === "profile" ? <Profile />
|
|
: active === "support" ? <Support />
|
|
: active === "rules" ? <Rules />
|
|
: active === "ai" ? <AiAssistant />
|
|
: active === "messenger" ? <Messenger />
|
|
: active === "inbox" ? <Inbox />
|
|
: active === "leads" ? <Leads />
|
|
: active === "verify" ? <Verify />
|
|
: active === "team" ? <TeamManagement />
|
|
: <ComingSoon title={title} icon={item?.icon ?? "dashboard"} onGo={setActive} />}
|
|
</ToastProvider>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Placeholder for workspace modules that don't have a view yet — keeps the
|
|
// full navigation coherent and points users to the live sections.
|
|
function ComingSoon({ title, icon, onGo }: { title: string; icon: string; onGo: (k: string) => void }) {
|
|
return (
|
|
<div className="view">
|
|
<PageHead eyebrow="Workspace" title={title} subtitle="This module is part of the LynkedUp Pro workspace." icon={icon} />
|
|
<div className="card coming-soon">
|
|
<span className="coming-soon-ic"><Icon name={icon} size={34} /></span>
|
|
<h3>{title} is coming soon</h3>
|
|
<p>This area is reserved for the {title} module. In the meantime, the account experience is fully built out.</p>
|
|
<div className="coming-soon-actions">
|
|
<Btn icon="user" onClick={() => onGo("profile")}>Open Profile</Btn>
|
|
<Btn variant="outline" icon="chat" onClick={() => onGo("support")}>Support Center</Btn>
|
|
<Btn variant="ghost" icon="check-circle" onClick={() => onGo("rules")}>Rules</Btn>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|