Goutam/lynkeduppro-crm
2
1
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace dashboard with Profile, Support Center & Rules modules

Browse Source 
- Remove old dashboard stats/charts content; keep sidebar + header shell
  which now routes between Profile, Support Center and Rules views.
- Profile: hero card + 6 tabs (Personal Info with verify-to-reveal +
  editable contacts via OTP, KYC two-doc rule + completion %, Security
  password policy + 2FA, Notifications matrix + contact windows, Privacy
  consents, Devices + activity timeline).
- Support Center: 5 channel cards, support team, Message Center with
  typing, New Ticket category->department routing + attachment rules,
  My Tickets + status-timeline modal, Live Chat handshake, Callback/Email
  modals, Help Center search + accordion.
- Rules: the 1-13 business-rules checklist.
- Shared design system (Icon, Avatar, PageHead, Pill, Toggle, OtpField,
  Modal, Toast, Field, Tabs) + full mock data in account-data.ts.
- Premium dark visual pass: brand gradients, depth, glow accents, pill tabs.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Goutam Patidar
2026-06-29 21:52:34 +05:30
parent 5ff655d786
commit 3ab6768c1c
13 changed files with 2663 additions and 512 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/dashboard/topbar.tsx
+12 -11
View File
@@ -1,29 +1,30 @@
"use client";
import { Sun, ChevronDown } from "lucide-react";
import { FigIcon } from "./figicon";
import { Sun, Moon, ChevronDown } from "lucide-react";
import { Icon } from "./ui";
import { user } from "./account-data";
export function Topbar({ theme, onToggle }: { theme: "dark" | "light"; onToggle: () => void }) {
export function Topbar({ theme, onToggle, title, subtitle }: { theme: "dark" | "light"; onToggle: () => void; title: string; subtitle: string }) {
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>
<h1>{title}</h1>
<p>{subtitle}</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="Search"><Icon name="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} />}
{theme === "dark" ? <Moon size={18} /> : <Sun size={18} />}
</button>
<button className="ic-btn" aria-label="Notifications" style={{ position: "relative" }}>
<FigIcon name="i_bell" size={18} />
<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>
<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>
<span className="av" style={{ background: user.avatarGradient, display: "grid", placeItems: "center", color: "#fff", fontWeight: 700, fontSize: 12 }}>{user.initials}</span>
<div style={{ textAlign: "left" }}>
<div className="nm">Justin Johnson</div>
<div className="rl">Owner</div>
<div className="nm">{user.name}</div>
<div className="rl">{user.role}</div>
</div>
<ChevronDown size={16} />
</button>