Add LynkedUp Pro dashboard (dark + light) from Figma

- Full dashboard at /dashboard matching the Figma Linkedup-Web frame
- Dark/light theme toggle (persisted to localStorage)
- Live animated charts: stat sparkbars, P&L grouped bars, donut, gauge,
  pipeline bars, progress, revenue-potential
- Sidebar, topbar, stat cards, weather, top sales reps
- 29 icons exported from Figma (currentColor) + lucide fallbacks
- Fix: bar charts had zero height (percentage in indefinite flex parent)
- Fix: removed content max-width that left a right-side gap

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-06-27 20:12:35 +05:30
parent 8c5df83d63
commit 5ff655d786
38 changed files with 1223 additions and 48 deletions
+33
View File
@@ -0,0 +1,33 @@
"use client";
import { Sun, ChevronDown } from "lucide-react";
import { FigIcon } from "./figicon";
export function Topbar({ theme, onToggle }: { theme: "dark" | "light"; onToggle: () => void }) {
return (
<header className="dash-topbar">
<div className="dash-title">
<h1>Dashboard Overview</h1>
<p>Welcome back, here&apos;s what&apos;s happening with your territory</p>
</div>
<div className="top-actions">
<button className="ic-btn" aria-label="Search"><FigIcon name="i_search" size={18} /></button>
<button className="ic-btn" aria-label="Toggle theme" onClick={onToggle}>
{theme === "dark" ? <FigIcon name="i_theme" size={18} /> : <Sun size={18} />}
</button>
<button className="ic-btn" aria-label="Notifications" style={{ position: "relative" }}>
<FigIcon name="i_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>
<button className="top-user">
<span className="av" style={{ background: "linear-gradient(135deg,#fda913,#fd6d13)", display: "grid", placeItems: "center", color: "#fff", fontWeight: 700, fontSize: 12 }}>JJ</span>
<div style={{ textAlign: "left" }}>
<div className="nm">Justin Johnson</div>
<div className="rl">Owner</div>
</div>
<ChevronDown size={16} />
</button>
</div>
</header>
);
}