Redesign Team, Support, AI & Rules; solid-orange brand system

- Team Management: crew hero, member gallery + list, role rings, invites
- Support Center: command-center Overview (live status, pulse ribbon, signal)
- AI Assistant: animated orb rings + textured stage
- Rules: rulebook cards (watermark, uniform orange), 3-up responsive grid
- Brand: --grad-brand now solid rgba(253,169,19,.92), white text/icons on
  orange, no orange gradients; dark surfaces (--card-grad/--panel-2) #060608
- Segmented tabs get an on-brand orange active state

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/components/dashboard/ai-assistant.tsx

@@ -0,0 +1,201 @@
+"use client";
+
+// ============================================================
+// AI Assistant — "Lynk AI", a creative conversational copilot.
+//   · Empty state : warm greeting, capability cards, prompt chips
+//   · Active chat : message thread with a typing indicator and a
+//                   simulated, keyword-aware assistant reply
+//   · Composer    : auto-suggesting prompt row + send / new chat
+// All responses are canned + client-side so it demos with no API.
+// ============================================================
+
+import { useEffect, useRef, useState } from "react";
+import { user } from "./account-data";
+import { Avatar, Btn, Icon, Pill, useToast } from "./ui";
+
+type Msg = { id: number; from: "me" | "ai"; text: string };
+
+const CAPABILITIES = [
+  { icon: "leads", tone: "var(--orange)", title: "Qualify leads", desc: "Score and summarise new leads, draft the first outreach." },
+  { icon: "estimates", tone: "var(--blue)", title: "Build estimates", desc: "Turn scope notes into a clean, line-itemed proposal." },
+  { icon: "schedule", tone: "var(--green)", title: "Plan the week", desc: "Suggest a crew schedule around weather and priorities." },
+  { icon: "leaderboard", tone: "var(--purple)", title: "Analyse pipeline", desc: "Spot stalled deals and where revenue is leaking." },
+];
+
+const PROMPTS = [
+  { icon: "leads", text: "Summarise my new leads from this week" },
+  { icon: "estimates", text: "Draft an estimate for a 28-square asphalt reroof" },
+  { icon: "storm", text: "Which territories were hit by the last storm?" },
+  { icon: "pipeline", text: "Show deals stuck in the pipeline over 14 days" },
+];
+
+let msgSeq = 1;
+
+export function AiAssistant() {
+  const toast = useToast();
+  const [messages, setMessages] = useState<Msg[]>([]);
+  const [draft, setDraft] = useState("");
+  const [typing, setTyping] = useState(false);
+  const scrollRef = useRef<HTMLDivElement | null>(null);
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const started = messages.length > 0;
+
+  useEffect(() => {
+    scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight, behavior: "smooth" });
+  }, [messages, typing]);
+
+  useEffect(() => () => { if (timer.current) clearTimeout(timer.current); }, []);
+
+  function send(text: string) {
+    const body = text.trim();
+    if (!body || typing) return;
+    setMessages((m) => [...m, { id: msgSeq++, from: "me", text: body }]);
+    setDraft("");
+    setTyping(true);
+    timer.current = setTimeout(() => {
+      setMessages((m) => [...m, { id: msgSeq++, from: "ai", text: replyFor(body) }]);
+      setTyping(false);
+    }, 1100);
+  }
+
+  function reset() {
+    if (timer.current) clearTimeout(timer.current);
+    setMessages([]); setDraft(""); setTyping(false);
+  }
+
+  return (
+    <div className="view ai-view">
+      <div className="ai-head">
+        <div className="ai-head-l">
+          <span className="ai-mark"><Icon name="ai" size={20} /></span>
+          <div>
+            <div className="ai-eyebrow">LynkedUp Pro</div>
+            <h1>Lynk AI <Pill tone="orange">Beta</Pill></h1>
+          </div>
+        </div>
+        <div className="ai-head-actions">
+          <span className="ai-model"><span className="ai-model-dot" /> Opus 4.8</span>
+          {started && <Btn variant="outline" size="sm" icon="plus" onClick={reset}>New chat</Btn>}
+        </div>
+      </div>
+
+      <div className="ai-stage card card-pad-0">
+        <div className="ai-scroll" ref={scrollRef}>
+          {!started ? (
+            <div className="ai-hero">
+              <div className="ai-orb-wrap">
+                <span className="ai-orb-ring" aria-hidden />
+                <span className="ai-orb-ring d2" aria-hidden />
+                <span className="ai-orb-ring d3" aria-hidden />
+                <span className="ai-hero-orb"><Icon name="ai" size={34} /></span>
+              </div>
+              <h2>{greeting()}, {user.firstName}.</h2>
+              <p>I&apos;m your roofing copilot. Ask me to summarise leads, draft estimates, plan crews or dig into your pipeline.</p>
+
+              <div className="ai-caps">
+                {CAPABILITIES.map((c) => (
+                  <button className="ai-cap" key={c.title} style={{ ["--rc" as string]: c.tone }} onClick={() => send(`Help me ${c.title.toLowerCase()}`)}>
+                    <span className="ai-cap-ic"><Icon name={c.icon} size={18} /></span>
+                    <span className="ai-cap-title">{c.title}</span>
+                    <span className="ai-cap-desc">{c.desc}</span>
+                  </button>
+                ))}
+              </div>
+
+              <div className="ai-suggest">
+                <span className="ai-suggest-lbl">Try asking</span>
+                <div className="ai-chips">
+                  {PROMPTS.map((p) => (
+                    <button className="ai-chip" key={p.text} onClick={() => send(p.text)}>
+                      <Icon name={p.icon} size={14} /> {p.text}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            </div>
+          ) : (
+            <div className="ai-thread">
+              {messages.map((m) => (
+                <div className={`ai-msg ${m.from}`} key={m.id}>
+                  {m.from === "ai"
+                    ? <span className="ai-msg-av ai-mark"><Icon name="ai" size={16} /></span>
+                    : <Avatar initials={user.initials} gradient={user.avatarGradient} size={32} />}
+                  <div className="ai-bubble">
+                    {m.text.split("\n").map((line, i) => <p key={i}>{line}</p>)}
+                    {m.from === "ai" && (
+                      <div className="ai-msg-actions">
+                        <button onClick={() => { navigator.clipboard?.writeText(m.text); toast.push({ tone: "success", title: "Copied to clipboard" }); }} aria-label="Copy"><Icon name="copy" size={13} /></button>
+                        <button onClick={() => toast.push({ tone: "success", title: "Thanks for the feedback" })} aria-label="Good response"><Icon name="check" size={13} /></button>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              ))}
+              {typing && (
+                <div className="ai-msg ai">
+                  <span className="ai-msg-av ai-mark"><Icon name="ai" size={16} /></span>
+                  <div className="ai-bubble ai-typing"><span /><span /><span /></div>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+
+        <div className="ai-composer">
+          {started && (
+            <div className="ai-quickrow">
+              {PROMPTS.slice(0, 3).map((p) => (
+                <button key={p.text} className="ai-quick" onClick={() => send(p.text)}><Icon name={p.icon} size={13} /> {p.text}</button>
+              ))}
+            </div>
+          )}
+          <div className="ai-inputbar">
+            <button className="ai-attach" aria-label="Attach" onClick={() => toast.push({ tone: "info", title: "Attachments", desc: "File uploads land here soon." })}><Icon name="paperclip" size={18} /></button>
+            <textarea
+              className="ai-textarea"
+              rows={1}
+              placeholder="Ask Lynk AI anything about your roofing business…"
+              value={draft}
+              onChange={(e) => setDraft(e.target.value)}
+              onKeyDown={(e) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); send(draft); } }}
+            />
+            <button className="ai-send" aria-label="Send" disabled={!draft.trim() || typing} onClick={() => send(draft)}><Icon name="send" size={17} /></button>
+          </div>
+          <div className="ai-foot">Lynk AI can make mistakes. Verify estimates and figures before sending to owners.</div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/* ---------------------------------------------------------- */
+/* helpers                                                     */
+/* ---------------------------------------------------------- */
+
+function greeting(): string {
+  // Deterministic across renders to avoid hydration drift — anchored to a
+  // fixed demo time-of-day rather than the live clock.
+  return "Good evening";
+}
+
+// Lightweight keyword router so the demo feels responsive without an API.
+function replyFor(q: string): string {
+  const t = q.toLowerCase();
+  if (t.includes("lead")) {
+    return "You have 6 new leads this week — 4 inbound from the storm landing page and 2 referrals.\nTop priority: Mark Reynolds (Sector 18) — full roof replacement, insurance claim already filed. I've drafted a first-touch SMS; want me to queue it?";
+  }
+  if (t.includes("estimate") || t.includes("proposal") || t.includes("reroep") || t.includes("reroof")) {
+    return "Here's a starting estimate for a 28-square asphalt reroof:\n• Tear-off & disposal — $3,920\n• Architectural shingles (28 sq) — $7,560\n• Underlayment, flashing & ridge vent — $2,180\n• Labour (3-day crew) — $5,400\nSubtotal $19,060 · 10% margin → $20,966. Want it itemised into a sendable proposal?";
+  }
+  if (t.includes("schedule") || t.includes("crew") || t.includes("week") || t.includes("plan")) {
+    return "Clear weather Tue–Thu, rain Friday. Suggested plan:\n• Tue: Crew A → 181 Sector 18 (reroof, day 1)\n• Wed: Crew A continues; Crew B → inspections in Pocket B\n• Thu: finish 181, start estimates follow-ups\nShould I block these in Team Schedule?";
+  }
+  if (t.includes("storm") || t.includes("territory") || t.includes("weather")) {
+    return "Last cell tracked through Sectors 14, 18 and Pocket B on 26 Jun with 1.5\" hail. 23 owners in those zones are good storm-canvass targets — 9 already have open claims. Want a canvass route?";
+  }
+  if (t.includes("pipeline") || t.includes("stuck") || t.includes("stall") || t.includes("deal")) {
+    return "3 deals have been idle over 14 days:\n• Bennett reroof — $21k, no contact in 18 days\n• Foster gutters — $4.2k, awaiting estimate\n• Turner inspection — booked, never closed\nThe Bennett deal is your biggest risk. Draft a re-engagement email?";
+  }
+  return "Got it. I can pull leads, build estimates, plan crew schedules, read storm/territory data and analyse your pipeline. Tell me which one to start with, or ask a specific question and I'll dig in.";
+}

src/components/dashboard/dashboard.tsx

@@ -13,6 +13,8 @@ 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 "../../app/dashboard/dashboard.css";
 
 export function Dashboard() {
@@ -42,6 +44,8 @@ export function Dashboard() {
             {active === "profile" ? <Profile />
               : active === "support" ? <Support />
               : active === "rules" ? <Rules />
+              : active === "ai" ? <AiAssistant />
+              : active === "team" ? <TeamManagement />
               : <ComingSoon title={title} icon={item?.icon ?? "dashboard"} onGo={setActive} />}
           </ToastProvider>
         </div>

src/components/dashboard/rules.tsx

@@ -2,6 +2,9 @@
 
 // ============================================================
 // Rules Checklist — the 1–13 business rules in one place.
+// A single filter bar + a uniform (brand-orange) card grid:
+// each rule card has a ghost watermark number, an icon and an
+// "enforced" footer. No per-category colours.
 // (house 181 · OTP to registered mobile · KYC two-docs ·
 //  password policy · ticket lifecycle · …)
 // ============================================================
@@ -10,6 +13,12 @@ import { useMemo, useState } from "react";
 import { rules } from "./account-data";
 import { Icon, PageHead, Pill, Segmented } from "./ui";
 
+// Each rule category maps to a glyph so cards read at a glance.
+const TAG_ICON: Record<string, string> = {
+  Profile: "user", Security: "shield", KYC: "verify", Support: "chat",
+  Notifications: "bell", Privacy: "privacy",
+};
+
 export function Rules() {
   const tags = useMemo(() => ["All", ...Array.from(new Set(rules.map((r) => r.tag)))], []);
   const [tag, setTag] = useState("All");
@@ -29,14 +38,16 @@ export function Rules() {
 
       <div className="rules-grid view-body">
         {list.map((r) => (
-          <div className="card rule-card" key={r.n} style={{ ["--accent" as string]: r.tagColor }}>
+          <article className="card rule-card" key={r.n}>
+            <span className="rule-watermark" aria-hidden>{String(r.n).padStart(2, "0")}</span>
             <div className="rule-top">
-              <span className="rule-n">{String(r.n).padStart(2, "0")}</span>
+              <span className="rule-ic"><Icon name={TAG_ICON[r.tag] ?? "check-circle"} size={18} /></span>
-              <Pill tone="custom" style={{ color: r.tagColor, background: `color-mix(in srgb, ${r.tagColor} 16%, transparent)` }}>{r.tag}</Pill>
+              <Pill tone="muted">{r.tag}</Pill>
             </div>
-            <div className="rule-title"><Icon name="check-circle" size={16} /> {r.title}</div>
+            <div className="rule-title">{r.title}</div>
             <p className="rule-detail">{r.detail}</p>
-          </div>
+            <div className="rule-foot"><Icon name="shield-check" size={13} /> Enforced · Rule {r.n}</div>
+          </article>
         ))}
       </div>
     </div>

src/components/dashboard/sidebar.tsx

@@ -34,6 +34,7 @@ export const NAV_GROUPS: NavGroup[] = [
   {
     title: "Team",
     items: [
+      { key: "team", label: "Team Management", icon: "team", subtitle: "Your crew, roles and permissions" },
       { key: "schedule", label: "Team Schedule", icon: "schedule" },
       { key: "leaderboard", label: "Leaderboard", icon: "leaderboard" },
       { key: "subtasks", label: "Subcontractor Tasks", icon: "subtasks" },
@@ -41,10 +42,10 @@ export const NAV_GROUPS: NavGroup[] = [
     ],
   },
   {
-    title: "Team",
+    title: "Workspace AI",
     items: [
       { key: "settings", label: "Org Settings", icon: "settings" },
-      { key: "ai", label: "AI Assistant", icon: "ai" },
+      { key: "ai", label: "AI Assistant", icon: "ai", subtitle: "Lynk AI — your roofing copilot" },
     ],
   },
   {
@@ -65,7 +66,6 @@ export function Sidebar({ active, onSelect }: { active: string; onSelect: (k: st
       <div className="dash-brand">
         {/* eslint-disable-next-line @next/next/no-img-element */}
         <img src="/image/logo.png" alt="LynkedUp Pro" />
-        <span className="bk">LynkedUp Pro</span>
       </div>
 
       <nav className="dash-nav">

src/components/dashboard/support.tsx

@@ -86,10 +86,40 @@ function Overview({ onChannel, onSection }: { onChannel: (id: string) => void; o
   const mini = supportChannels.filter((c) => ["ticket", "callback", "email", "help"].includes(c.id));
   const recent = ticketSeed.slice(0, 4);
 
+  // Derived "live" metrics so the command-center ribbon stays in sync with data.
+  const openCount = ticketSeed.filter((t) => !["resolved", "closed"].includes(t.status)).length;
+  const avgRating = (supportTeam.reduce((s, a) => s + a.rating, 0) / supportTeam.length).toFixed(1);
+  const pulse = [
+    { icon: "people", value: String(online.length), label: "Agents online", live: true },
+    { icon: "clock", value: "< 2m", label: "Avg wait time" },
+    { icon: "ticket", value: String(openCount), label: "Open tickets" },
+    { icon: "star", value: avgRating, label: "Avg CSAT rating" },
+  ];
+
   return (
+    <div className="support-ov">
+      {/* Live command-center ribbon */}
+      <div className="sup-status">
+        <span className="sup-status-l"><span className="sup-status-dot" /> All systems operational</span>
+        <span className="sup-status-r">Support · Live status</span>
+      </div>
+      <div className="sup-pulse">
+        {pulse.map((p) => (
+          <div className="sup-stat" key={p.label}>
+            <span className="sup-stat-ic"><Icon name={p.icon} size={17} /></span>
+            <div className="sup-stat-txt">
+              <b>{p.value}{p.icon === "star" && <Icon name="star" size={12} />}</b>
+              <span>{p.label}</span>
+            </div>
+            {p.live && <span className="sup-stat-live" />}
+          </div>
+        ))}
+      </div>
+
       <div className="support-bento">
       {/* Hero — live chat */}
       <button className="bento-tile bento-chat" onClick={() => onChannel("chat")}>
+        <span className="bento-chat-sig" aria-hidden><span /><span /><span /></span>
         <div className="bento-chat-top">
           <span className="bento-chat-badge"><StatusDot status="online" /> Agents online now</span>
           <span className="bento-chat-wait"><Icon name="clock" size={13} /> Avg wait &lt; 2 min</span>
@@ -149,6 +179,7 @@ function Overview({ onChannel, onSection }: { onChannel: (id: string) => void; o
         </div>
       </div>
       </div>
+    </div>
   );
 }
 

src/components/dashboard/team-data.ts

@@ -0,0 +1,169 @@
+// ============================================================
+// LynkedUp Pro — Team Management mock data.
+// Members, roles and a permission matrix, modelled the way a
+// CRM team module works: every member carries a role, and a
+// role is a named bundle of permissions. All client-side so the
+// screen is fully interactive without a backend.
+// ============================================================
+
+/* ---------------------------------------------------------- */
+/* PERMISSIONS — grouped, the building blocks of a role        */
+/* ---------------------------------------------------------- */
+
+export type Permission = { id: string; label: string; desc: string };
+export type PermissionGroup = { id: string; title: string; icon: string; perms: Permission[] };
+
+export const permissionGroups: PermissionGroup[] = [
+  {
+    id: "sales",
+    title: "Sales",
+    icon: "pipeline",
+    perms: [
+      { id: "leads.manage", label: "Manage leads & contacts", desc: "Create, edit, assign and delete leads" },
+      { id: "pipeline.manage", label: "Manage pipeline & deals", desc: "Move deals across stages and edit values" },
+      { id: "estimates.create", label: "Create estimates & proposals", desc: "Build and send estimates to owners" },
+    ],
+  },
+  {
+    id: "ops",
+    title: "Operations",
+    icon: "dispatch",
+    perms: [
+      { id: "dispatch.manage", label: "Manage dispatch & schedule", desc: "Assign crews and schedule site visits" },
+      { id: "billing.view", label: "View billing & invoices", desc: "See invoices, receipts and payment status" },
+    ],
+  },
+  {
+    id: "insights",
+    title: "Insights",
+    icon: "leaderboard",
+    perms: [
+      { id: "reports.view", label: "View reports & analytics", desc: "Access dashboards and export reports" },
+    ],
+  },
+  {
+    id: "admin",
+    title: "Administration",
+    icon: "settings",
+    perms: [
+      { id: "team.manage", label: "Manage team members", desc: "Invite, edit and deactivate members" },
+      { id: "roles.manage", label: "Manage roles & permissions", desc: "Create roles and edit permission sets" },
+      { id: "settings.manage", label: "Manage org settings", desc: "Billing plan, branding and integrations" },
+    ],
+  },
+];
+
+export const allPermissionIds: string[] = permissionGroups.flatMap((g) => g.perms.map((p) => p.id));
+
+/* ---------------------------------------------------------- */
+/* ROLES — named permission bundles                            */
+/* ---------------------------------------------------------- */
+
+export type Role = {
+  id: string;
+  name: string;
+  color: string;        // token, e.g. var(--orange)
+  description: string;
+  system: boolean;      // system roles can't be deleted
+  perms: string[];      // granted permission ids
+};
+
+export const roles: Role[] = [
+  {
+    id: "owner",
+    name: "Owner",
+    color: "var(--orange)",
+    description: "Full, unrestricted access. There is exactly one account owner.",
+    system: true,
+    perms: [...allPermissionIds],
+  },
+  {
+    id: "admin",
+    name: "Admin",
+    color: "var(--purple)",
+    description: "Runs the workspace — manages people, roles and settings.",
+    system: true,
+    perms: [...allPermissionIds],
+  },
+  {
+    id: "manager",
+    name: "Sales Manager",
+    color: "var(--blue)",
+    description: "Leads the sales floor and oversees the crew's pipeline.",
+    system: false,
+    perms: ["leads.manage", "pipeline.manage", "estimates.create", "dispatch.manage", "billing.view", "reports.view", "team.manage"],
+  },
+  {
+    id: "rep",
+    name: "Sales Rep",
+    color: "var(--green)",
+    description: "Works leads and moves deals through the pipeline.",
+    system: false,
+    perms: ["leads.manage", "pipeline.manage", "estimates.create"],
+  },
+  {
+    id: "dispatcher",
+    name: "Dispatcher",
+    color: "var(--cyan)",
+    description: "Schedules crews and coordinates site visits.",
+    system: false,
+    perms: ["dispatch.manage", "reports.view"],
+  },
+  {
+    id: "estimator",
+    name: "Estimator",
+    color: "var(--yellow)",
+    description: "Prepares estimates and proposals for approved leads.",
+    system: false,
+    perms: ["leads.manage", "estimates.create"],
+  },
+  {
+    id: "viewer",
+    name: "Viewer",
+    color: "var(--muted)",
+    description: "Read-only access to reports and billing — no edits.",
+    system: false,
+    perms: ["reports.view", "billing.view"],
+  },
+];
+
+/* ---------------------------------------------------------- */
+/* MEMBERS                                                     */
+/* ---------------------------------------------------------- */
+
+export type MemberStatus = "active" | "away" | "offline";
+export type Member = {
+  id: string;
+  name: string;
+  initials: string;
+  email: string;
+  title: string;          // job title, free text
+  roleId: string;
+  gradient: string;
+  status: MemberStatus;
+  lastActive: string;
+  deals: number;          // open deals owned
+  joined: string;
+};
+
+export const members: Member[] = [
+  { id: "u1", name: "James Carter", initials: "JC", email: "james.carter@lynkeduppro.com", title: "Founder & CEO", roleId: "owner", gradient: "linear-gradient(135deg,#fda913,#fd6d13)", status: "active", lastActive: "Active now", deals: 12, joined: "Mar 2021" },
+  { id: "u2", name: "Emma Wilson", initials: "EW", email: "emma.wilson@lynkeduppro.com", title: "Head of Sales", roleId: "manager", gradient: "linear-gradient(135deg,#285ef0,#09b9c6)", status: "active", lastActive: "Active now", deals: 21, joined: "Aug 2021" },
+  { id: "u3", name: "Liam Foster", initials: "LF", email: "liam.foster@lynkeduppro.com", title: "Senior Sales Rep", roleId: "rep", gradient: "linear-gradient(135deg,#9036e9,#285ef0)", status: "active", lastActive: "5 min ago", deals: 17, joined: "Jan 2022" },
+  { id: "u4", name: "Sophie Turner", initials: "ST", email: "sophie.turner@lynkeduppro.com", title: "Account Executive", roleId: "rep", gradient: "linear-gradient(135deg,#14bc83,#09b9c6)", status: "away", lastActive: "32 min ago", deals: 9, joined: "May 2022" },
+  { id: "u5", name: "Noah Mitchell", initials: "NM", email: "noah.mitchell@lynkeduppro.com", title: "Dispatch Coordinator", roleId: "dispatcher", gradient: "linear-gradient(135deg,#f0563f,#fda913)", status: "active", lastActive: "Active now", deals: 0, joined: "Sep 2022" },
+  { id: "u6", name: "Olivia Bennett", initials: "OB", email: "olivia.bennett@lynkeduppro.com", title: "Operations Lead", roleId: "admin", gradient: "linear-gradient(135deg,#09b9c6,#285ef0)", status: "away", lastActive: "1 hour ago", deals: 3, joined: "Nov 2021" },
+  { id: "u7", name: "Ethan Brooks", initials: "EB", email: "ethan.brooks@lynkeduppro.com", title: "Lead Estimator", roleId: "estimator", gradient: "linear-gradient(135deg,#ffd60a,#fda913)", status: "offline", lastActive: "Yesterday", deals: 6, joined: "Feb 2023" },
+  { id: "u8", name: "Ava Reynolds", initials: "AR", email: "ava.reynolds@lynkeduppro.com", title: "Finance Analyst", roleId: "viewer", gradient: "linear-gradient(135deg,#9036e9,#f0563f)", status: "offline", lastActive: "2 days ago", deals: 0, joined: "Apr 2023" },
+];
+
+/* ---------------------------------------------------------- */
+/* PENDING INVITES                                             */
+/* ---------------------------------------------------------- */
+
+export type Invite = { id: string; email: string; roleId: string; invitedBy: string; sentAt: string };
+
+export const pendingInvites: Invite[] = [
+  { id: "inv1", email: "daniel.hughes@gmail.com", roleId: "rep", invitedBy: "Emma Wilson", sentAt: "2 days ago" },
+  { id: "inv2", email: "grace.murphy@outlook.com", roleId: "estimator", invitedBy: "James Carter", sentAt: "5 days ago" },
+];

src/components/dashboard/team-management.tsx

@@ -0,0 +1,515 @@
+"use client";
+
+// ============================================================
+// Team Management — a CRM people + roles module, redesigned as
+// a creative "crew" experience.
+//   · Crew hero  : avatar stack, live presence, headline stats
+//   · Members    : people gallery (cards) ⇄ compact list, with
+//                  role filter chips, search, inline role swap,
+//                  deal-load meters and row actions
+//   · Roles      : permission-coverage rings + live toggle matrix
+//   · Invites    : envelope timeline with resend / revoke
+// Everything is local state so the screen is fully clickable.
+// ============================================================
+
+import { useEffect, useMemo, useState } from "react";
+import {
+  Avatar, Btn, Field, Icon, Modal, Pill, StatusDot, Toggle, useToast,
+} from "./ui";
+import {
+  members as seedMembers, roles as seedRoles, pendingInvites as seedInvites,
+  permissionGroups, allPermissionIds, type Member, type Role, type Invite,
+} from "./team-data";
+
+const STATUS_LABEL: Record<Member["status"], string> = { active: "Active", away: "Away", offline: "Offline" };
+const toDot = (s: Member["status"]) => (s === "offline" ? "offline" : s === "away" ? "away" : "online");
+
+export function TeamManagement() {
+  const toast = useToast();
+  const [tab, setTab] = useState("members");
+  const [view, setView] = useState<"grid" | "list">("grid");
+  const [members, setMembers] = useState<Member[]>(seedMembers);
+  const [roles, setRoles] = useState<Role[]>(seedRoles);
+  const [invites, setInvites] = useState<Invite[]>(seedInvites);
+
+  const [query, setQuery] = useState("");
+  const [roleFilter, setRoleFilter] = useState("all");
+  const [inviteOpen, setInviteOpen] = useState(false);
+  const [editing, setEditing] = useState<Member | null>(null);
+  const [confirmRemove, setConfirmRemove] = useState<Member | null>(null);
+
+  const roleById = useMemo(() => Object.fromEntries(roles.map((r) => [r.id, r])), [roles]);
+  const countByRole = useMemo(() => {
+    const m: Record<string, number> = {};
+    for (const mem of members) m[mem.roleId] = (m[mem.roleId] ?? 0) + 1;
+    return m;
+  }, [members]);
+  const maxDeals = useMemo(() => Math.max(1, ...members.map((m) => m.deals)), [members]);
+
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    return members.filter((m) => {
+      const matchRole = roleFilter === "all" || m.roleId === roleFilter;
+      const matchQ = !q || m.name.toLowerCase().includes(q) || m.email.toLowerCase().includes(q) || m.title.toLowerCase().includes(q);
+      return matchRole && matchQ;
+    });
+  }, [members, query, roleFilter]);
+
+  const activeCount = members.filter((m) => m.status === "active").length;
+  const totalDeals = members.reduce((sum, m) => sum + m.deals, 0);
+
+  function changeRole(id: string, roleId: string) {
+    setMembers((list) => list.map((m) => (m.id === id ? { ...m, roleId } : m)));
+    const m = members.find((x) => x.id === id);
+    toast.push({ tone: "success", title: "Role updated", desc: `${m?.name ?? "Member"} is now ${roleById[roleId]?.name ?? roleId}.` });
+  }
+  function removeMember(m: Member) {
+    setMembers((list) => list.filter((x) => x.id !== m.id));
+    setConfirmRemove(null);
+    toast.push({ tone: "info", title: "Member removed", desc: `${m.name} no longer has access.` });
+  }
+  function togglePerm(roleId: string, permId: string) {
+    setRoles((list) => list.map((r) => {
+      if (r.id !== roleId) return r;
+      const has = r.perms.includes(permId);
+      return { ...r, perms: has ? r.perms.filter((p) => p !== permId) : [...r.perms, permId] };
+    }));
+  }
+
+  // Crew stack — show online folks first, capped to 6 with a +N bubble.
+  const stack = [...members].sort((a, b) => Number(b.status === "active") - Number(a.status === "active"));
+  const stackShown = stack.slice(0, 6);
+  const stackRest = members.length - stackShown.length;
+
+  return (
+    <div className="view tm">
+      {/* ---- Crew hero ---------------------------------------- */}
+      <header className="tm-hero">
+        <div className="tm-hero-orbs" aria-hidden />
+        <div className="tm-hero-grid" aria-hidden />
+        <div className="tm-hero-main">
+          <div className="tm-stack" aria-hidden>
+            {stackShown.map((m, i) => (
+              <span key={m.id} className="tm-stack-av" style={{ zIndex: stackShown.length - i }}>
+                <Avatar initials={m.initials} gradient={m.gradient} size={46} status={toDot(m.status)} />
+              </span>
+            ))}
+            {stackRest > 0 && <span className="tm-stack-more">+{stackRest}</span>}
+          </div>
+          <div className="tm-hero-copy">
+            <div className="tm-hero-eyebrow"><Icon name="team" size={13} /> Your crew · LynkedUp Pro</div>
+            <h1>Team Management</h1>
+            <p>Manage your crew, assign roles and control exactly what each person can do.</p>
+            <div className="tm-hero-live">
+              <span className="tm-pulse" /><b>{activeCount}</b> online now
+              <span className="tm-hero-dot" /> {members.length} members
+              <span className="tm-hero-dot" /> {invites.length} invites pending
+            </div>
+          </div>
+        </div>
+        <div className="tm-hero-actions">
+          <Btn icon="plus" onClick={() => setInviteOpen(true)}>Invite member</Btn>
+        </div>
+      </header>
+
+      {/* ---- Metric strip ------------------------------------- */}
+      {/* <div className="tm-stats">
+        <StatCard icon="people" tone="var(--orange)" value={members.length} label="Total members" foot="across the workspace" />
+        <StatCard icon="check-circle" tone="var(--green)" value={activeCount} label="Active now" foot={`${Math.round((activeCount / members.length) * 100)}% of the crew online`} bar={activeCount / members.length} />
+        <StatCard icon="shield" tone="var(--purple)" value={roles.length} label="Roles defined" foot={`${roles.filter((r) => !r.system).length} custom`} />
+        <StatCard icon="pipeline" tone="var(--blue)" value={totalDeals} label="Open deals owned" foot="by the whole team" />
+      </div> */}
+
+      {/* ---- Tabs --------------------------------------------- */}
+      <div className="tm-tabs" role="tablist">
+        {[
+          { value: "members", label: "Members", icon: "people", badge: members.length },
+          { value: "roles", label: "Roles & Permissions", icon: "shield", badge: roles.length },
+          { value: "invites", label: "Invites", icon: "mail", badge: invites.length },
+        ].map((t) => (
+          <button key={t.value} role="tab" aria-selected={tab === t.value} className={`tm-tab ${tab === t.value ? "active" : ""}`} onClick={() => setTab(t.value)}>
+            <Icon name={t.icon} size={16} /> <span>{t.label}</span>
+            <span className="tm-tab-badge">{t.badge}</span>
+          </button>
+        ))}
+      </div>
+
+      {/* ---- MEMBERS ------------------------------------------ */}
+      {tab === "members" && (
+        <div className="view-body">
+          <div className="tm-toolbar">
+            <div className="tm-search">
+              <Icon name="search" size={16} />
+              <input className="ds-input flush" placeholder="Search by name, email or title…" value={query} onChange={(e) => setQuery(e.target.value)} />
+              {query && <button className="tm-search-x" aria-label="Clear" onClick={() => setQuery("")}><Icon name="x" size={14} /></button>}
+            </div>
+            <div className="tm-viewtoggle" role="group" aria-label="Layout">
+              <button className={view === "grid" ? "on" : ""} aria-label="Gallery view" onClick={() => setView("grid")}><Icon name="subtasks" size={15} /></button>
+              <button className={view === "list" ? "on" : ""} aria-label="List view" onClick={() => setView("list")}><Icon name="leaderboard" size={15} /></button>
+            </div>
+          </div>
+
+          {/* Role filter chips */}
+          <div className="tm-chips">
+            <button className={`tm-chip ${roleFilter === "all" ? "on" : ""}`} onClick={() => setRoleFilter("all")}>
+              <span className="tm-chip-dot" style={{ background: "var(--text-2)" }} /> All <i>{members.length}</i>
+            </button>
+            {roles.filter((r) => (countByRole[r.id] ?? 0) > 0).map((r) => (
+              <button key={r.id} className={`tm-chip ${roleFilter === r.id ? "on" : ""}`} style={{ ["--rc" as string]: r.color }} onClick={() => setRoleFilter(r.id)}>
+                <span className="tm-chip-dot" style={{ background: r.color }} /> {r.name} <i>{countByRole[r.id] ?? 0}</i>
+              </button>
+            ))}
+          </div>
+
+          {filtered.length === 0 ? (
+            <div className="card tm-empty"><span className="tm-empty-ic"><Icon name="search" size={24} /></span><p>No members match your search.</p><Btn variant="soft" size="sm" onClick={() => { setQuery(""); setRoleFilter("all"); }}>Clear filters</Btn></div>
+          ) : view === "grid" ? (
+            <div className="tm-gallery">
+              {filtered.map((m) => {
+                const role = roleById[m.roleId];
+                const isOwner = m.roleId === "owner";
+                return (
+                  <article className="card tm-pcard" key={m.id} style={{ ["--rc" as string]: role?.color }}>
+                    <span className="tm-pcard-bg" aria-hidden />
+                    <div className="tm-pcard-top">
+                      <span className="tm-pcard-av"><Avatar initials={m.initials} gradient={m.gradient} size={58} status={toDot(m.status)} /></span>
+                      <RowMenu disabled={isOwner} onEdit={() => setEditing(m)} onRemove={() => setConfirmRemove(m)} />
+                    </div>
+                    <div className="tm-pcard-name">{m.name}{isOwner && <span className="tm-crown" title="Account owner"><Icon name="star" size={13} /></span>}</div>
+                    <div className="tm-pcard-title">{m.title}</div>
+                    <div className="tm-pcard-email"><Icon name="mail" size={12} /> {m.email}</div>
+
+                    <div className="tm-pcard-role">
+                      {isOwner ? (
+                        <span className="tm-rolebadge" style={{ ["--rc" as string]: role?.color }}><Icon name="shield" size={13} /> {role?.name}</span>
+                      ) : (
+                        <div className="tm-roleselect" style={{ ["--rc" as string]: role?.color }}>
+                          <span className="tm-roledot" />
+                          <select className="ds-select" value={m.roleId} onChange={(e) => changeRole(m.id, e.target.value)} aria-label={`Role for ${m.name}`}>
+                            {roles.map((r) => <option key={r.id} value={r.id}>{r.name}</option>)}
+                          </select>
+                        </div>
+                      )}
+                    </div>
+
+                    <div className="tm-meter" title={`${m.deals} open deals`}>
+                      <div className="tm-meter-h"><span>Deal load</span><b>{m.deals}</b></div>
+                      <span className="tm-meter-track"><span className="tm-meter-fill" style={{ width: `${Math.round((m.deals / maxDeals) * 100)}%` }} /></span>
+                    </div>
+
+                    <div className="tm-pcard-foot">
+                      <span className="tm-statuscell"><StatusDot status={toDot(m.status)} /> {STATUS_LABEL[m.status]}</span>
+                      <span className="tm-lastactive">{m.lastActive}</span>
+                    </div>
+                  </article>
+                );
+              })}
+            </div>
+          ) : (
+            <div className="card card-pad-0 tm-table">
+              <div className="tm-row tm-head">
+                <span>Member</span><span>Role</span><span>Status</span><span className="tm-c-num">Open deals</span><span className="tm-c-act" />
+              </div>
+              {filtered.map((m) => {
+                const role = roleById[m.roleId];
+                const isOwner = m.roleId === "owner";
+                return (
+                  <div className="tm-row" key={m.id}>
+                    <div className="tm-member">
+                      <Avatar initials={m.initials} gradient={m.gradient} size={40} status={toDot(m.status)} />
+                      <div className="tm-member-meta">
+                        <div className="tm-name">{m.name}{isOwner && <Pill tone="orange" style={{ marginLeft: 8 }}>You · Owner</Pill>}</div>
+                        <div className="tm-sub">{m.title} · {m.email}</div>
+                      </div>
+                    </div>
+                    <div className="tm-rolecell">
+                      {isOwner ? (
+                        <span className="tm-rolebadge" style={{ ["--rc" as string]: role?.color }}><Icon name="shield" size={13} /> {role?.name}</span>
+                      ) : (
+                        <div className="tm-roleselect" style={{ ["--rc" as string]: role?.color }}>
+                          <span className="tm-roledot" />
+                          <select className="ds-select" value={m.roleId} onChange={(e) => changeRole(m.id, e.target.value)} aria-label={`Role for ${m.name}`}>
+                            {roles.map((r) => <option key={r.id} value={r.id}>{r.name}</option>)}
+                          </select>
+                        </div>
+                      )}
+                    </div>
+                    <div className="tm-statuscell">
+                      <StatusDot status={toDot(m.status)} /><span>{STATUS_LABEL[m.status]}</span>
+                      <span className="tm-lastactive">{m.lastActive}</span>
+                    </div>
+                    <div className="tm-c-num">{m.deals > 0 ? <b>{m.deals}</b> : <span className="tm-dash">—</span>}</div>
+                    <div className="tm-c-act"><RowMenu disabled={isOwner} onEdit={() => setEditing(m)} onRemove={() => setConfirmRemove(m)} /></div>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* ---- ROLES -------------------------------------------- */}
+      {tab === "roles" && (
+        <div className="view-body tm-roles">
+          {roles.map((r) => {
+            const pct = Math.round((r.perms.length / allPermissionIds.length) * 100);
+            return (
+              <div className="card tm-rolecard" key={r.id} style={{ ["--rc" as string]: r.color }}>
+                <div className="tm-rolecard-head">
+                  <span className="tm-ring" style={{ ["--pct" as string]: pct }}>
+                    <span className="tm-ring-in"><Icon name={r.id === "owner" ? "star" : r.system ? "shield-check" : "shield"} size={17} /></span>
+                  </span>
+                  <div className="tm-rolecard-title">
+                    <div className="tm-rolecard-name">{r.name}{r.system && <Pill tone="muted" style={{ marginLeft: 8 }}>System</Pill>}</div>
+                    <div className="tm-rolecard-sub">{countByRole[r.id] ?? 0} {(countByRole[r.id] ?? 0) === 1 ? "member" : "members"} · {r.perms.length}/{allPermissionIds.length} permissions</div>
+                  </div>
+                </div>
+                <p className="tm-rolecard-desc">{r.description}</p>
+
+                <div className="tm-permlist">
+                  {permissionGroups.map((g) => (
+                    <div className="tm-permgroup" key={g.id}>
+                      <div className="tm-permgroup-h"><Icon name={g.icon} size={13} /> {g.title}</div>
+                      {g.perms.map((p) => {
+                        const granted = r.perms.includes(p.id);
+                        const locked = r.id === "owner";
+                        return (
+                          <div className={`tm-perm ${granted ? "on" : ""}`} key={p.id}>
+                            <div className="tm-perm-meta">
+                              <span className="tm-perm-label">{p.label}</span>
+                              <span className="tm-perm-desc">{p.desc}</span>
+                            </div>
+                            <Toggle checked={granted} disabled={locked} onChange={() => togglePerm(r.id, p.id)} label={p.label} />
+                          </div>
+                        );
+                      })}
+                    </div>
+                  ))}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      {/* ---- INVITES ------------------------------------------ */}
+      {tab === "invites" && (
+        <div className="view-body card card-pad-0">
+          <div className="tm-invite-head">
+            <div>
+              <h3>Pending invitations</h3>
+              <p>People you&apos;ve invited who haven&apos;t joined yet.</p>
+            </div>
+            <Btn icon="plus" size="sm" onClick={() => setInviteOpen(true)}>New invite</Btn>
+          </div>
+          {invites.length === 0 ? (
+            <div className="tm-empty"><span className="tm-empty-ic"><Icon name="mail" size={24} /></span><p>No pending invites. Everyone&apos;s on board.</p></div>
+          ) : (
+            <div className="tm-invites">
+              {invites.map((inv) => {
+                const role = roleById[inv.roleId];
+                return (
+                  <div className="tm-inviterow" key={inv.id}>
+                    <span className="tm-invite-ic"><Icon name="mail" size={16} /></span>
+                    <div className="tm-invite-meta">
+                      <div className="tm-name">{inv.email}</div>
+                      <div className="tm-sub">Invited by {inv.invitedBy} · {inv.sentAt}</div>
+                    </div>
+                    <span className="tm-rolebadge" style={{ ["--rc" as string]: role?.color }}><Icon name="shield" size={13} /> {role?.name}</span>
+                    <div className="tm-invite-actions">
+                      <Btn variant="soft" size="sm" icon="refresh" onClick={() => toast.push({ tone: "success", title: "Invite resent", desc: `A fresh link was sent to ${inv.email}.` })}>Resend</Btn>
+                      <Btn variant="ghost" size="sm" icon="x" onClick={() => { setInvites((l) => l.filter((x) => x.id !== inv.id)); toast.push({ tone: "info", title: "Invite revoked" }); }}>Revoke</Btn>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </div>
+      )}
+
+      <InviteModal
+        open={inviteOpen}
+        roles={roles}
+        onClose={() => setInviteOpen(false)}
+        onInvite={(email, roleId) => {
+          setInvites((l) => [{ id: `inv_${l.length + Date.now()}`, email, roleId, invitedBy: "James Carter", sentAt: "Just now" }, ...l]);
+          setInviteOpen(false);
+          setTab("invites");
+          toast.push({ tone: "success", title: "Invitation sent", desc: `${email} was invited as ${roleById[roleId]?.name}.` });
+        }}
+      />
+
+      <EditMemberModal
+        member={editing}
+        roles={roles}
+        onClose={() => setEditing(null)}
+        onSave={(id, patch) => {
+          setMembers((list) => list.map((m) => (m.id === id ? { ...m, ...patch } : m)));
+          setEditing(null);
+          toast.push({ tone: "success", title: "Member updated" });
+        }}
+      />
+
+      <Modal
+        open={!!confirmRemove}
+        onClose={() => setConfirmRemove(null)}
+        title="Remove member"
+        subtitle={confirmRemove ? `${confirmRemove.name} will lose access immediately.` : ""}
+        icon="alert"
+        size="sm"
+        footer={
+          <>
+            <Btn variant="ghost" onClick={() => setConfirmRemove(null)}>Cancel</Btn>
+            <Btn variant="danger" icon="trash" onClick={() => confirmRemove && removeMember(confirmRemove)}>Remove member</Btn>
+          </>
+        }
+      >
+        <p className="tm-confirm-text">Their open deals and assignments stay in the workspace and can be reassigned afterwards. This action can be undone by re-inviting them.</p>
+      </Modal>
+    </div>
+  );
+}
+
+/* ---------------------------------------------------------- */
+/* Stat card                                                   */
+/* ---------------------------------------------------------- */
+
+function StatCard({ icon, tone, value, label, foot, bar }: { icon: string; tone: string; value: number; label: string; foot?: string; bar?: number }) {
+  return (
+    <div className="card tm-stat" style={{ ["--rc" as string]: tone }}>
+      <div className="tm-stat-head">
+        <span className="tm-stat-ic"><Icon name={icon} size={20} /></span>
+        <div className="tm-stat-body">
+          <div className="tm-stat-val">{value}</div>
+          <div className="tm-stat-lbl">{label}</div>
+        </div>
+      </div>
+      {bar != null && <span className="tm-stat-bar"><span style={{ width: `${Math.round(bar * 100)}%` }} /></span>}
+      {foot && <div className="tm-stat-foot"><span className="tm-stat-dot" />{foot}</div>}
+    </div>
+  );
+}
+
+/* ---------------------------------------------------------- */
+/* Row actions menu                                            */
+/* ---------------------------------------------------------- */
+
+function RowMenu({ onEdit, onRemove, disabled }: { onEdit: () => void; onRemove: () => void; disabled?: boolean }) {
+  const [open, setOpen] = useState(false);
+  if (disabled) return <span className="tm-menu-lock" title="The owner can't be edited"><Icon name="lock" size={15} /></span>;
+  return (
+    <div className="tm-menu">
+      <button className="ds-iconbtn" aria-label="Member actions" onClick={() => setOpen((o) => !o)}><Icon name="dots" size={18} /></button>
+      {open && (
+        <>
+          <div className="tm-menu-scrim" onClick={() => setOpen(false)} />
+          <div className="tm-menu-pop" role="menu">
+            <button onClick={() => { setOpen(false); onEdit(); }}><Icon name="edit" size={15} /> Edit member</button>
+            <button onClick={() => { setOpen(false); onEdit(); }}><Icon name="shield" size={15} /> Change role</button>
+            <div className="tm-menu-sep" />
+            <button className="danger" onClick={() => { setOpen(false); onRemove(); }}><Icon name="trash" size={15} /> Remove</button>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
+
+/* ---------------------------------------------------------- */
+/* Invite modal                                                */
+/* ---------------------------------------------------------- */
+
+function InviteModal({ open, roles, onClose, onInvite }: { open: boolean; roles: Role[]; onClose: () => void; onInvite: (email: string, roleId: string) => void }) {
+  const [email, setEmail] = useState("");
+  const [roleId, setRoleId] = useState("rep");
+  const valid = /^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email.trim());
+  const role = roles.find((r) => r.id === roleId);
+
+  function submit() {
+    if (!valid) return;
+    onInvite(email.trim(), roleId);
+    setEmail(""); setRoleId("rep");
+  }
+
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      title="Invite a team member"
+      subtitle="They'll get an email with a secure link to set up their account."
+      icon="people"
+      footer={
+        <>
+          <Btn variant="ghost" onClick={onClose}>Cancel</Btn>
+          <Btn icon="send" disabled={!valid} onClick={submit}>Send invitation</Btn>
+        </>
+      }
+    >
+      <div className="tm-form">
+        <Field label="Work email" required hint={email && !valid ? undefined : "We'll send the invite here."} error={email && !valid ? "Enter a valid email address." : undefined}>
+          <input className="ds-input" type="email" placeholder="name@company.com" value={email} onChange={(e) => setEmail(e.target.value)} />
+        </Field>
+        <Field label="Assign a role" required hint="Roles decide what this person can see and do.">
+          <select className="ds-select" value={roleId} onChange={(e) => setRoleId(e.target.value)}>
+            {roles.filter((r) => r.id !== "owner").map((r) => <option key={r.id} value={r.id}>{r.name}</option>)}
+          </select>
+        </Field>
+        {role && (
+          <div className="tm-roleprev" style={{ ["--rc" as string]: role.color }}>
+            <div className="tm-roleprev-h"><span className="tm-roledot" /> {role.name}<span className="tm-roleprev-count">{role.perms.length} permissions</span></div>
+            <p>{role.description}</p>
+          </div>
+        )}
+      </div>
+    </Modal>
+  );
+}
+
+/* ---------------------------------------------------------- */
+/* Edit member modal                                           */
+/* ---------------------------------------------------------- */
+
+function EditMemberModal({ member, roles, onClose, onSave }: { member: Member | null; roles: Role[]; onClose: () => void; onSave: (id: string, patch: Partial<Member>) => void }) {
+  const [title, setTitle] = useState("");
+  const [roleId, setRoleId] = useState("rep");
+
+  // Sync local form when a different member is opened.
+  const key = member?.id ?? "";
+  useEffect(() => { if (member) { setTitle(member.title); setRoleId(member.roleId); } }, [key]); // eslint-disable-line react-hooks/exhaustive-deps, react-hooks/set-state-in-effect
+
+  if (!member) return null;
+  return (
+    <Modal
+      open={!!member}
+      onClose={onClose}
+      title={`Edit ${member.name}`}
+      subtitle={member.email}
+      icon="edit"
+      footer={
+        <>
+          <Btn variant="ghost" onClick={onClose}>Cancel</Btn>
+          <Btn icon="check" onClick={() => onSave(member.id, { title, roleId })}>Save changes</Btn>
+        </>
+      }
+    >
+      <div className="tm-form">
+        <div className="tm-edit-hero">
+          <Avatar initials={member.initials} gradient={member.gradient} size={52} />
+          <div>
+            <div className="tm-name">{member.name}</div>
+            <div className="tm-sub">Joined {member.joined} · {member.deals} open deals</div>
+          </div>
+        </div>
+        <Field label="Job title">
+          <input className="ds-input" value={title} onChange={(e) => setTitle(e.target.value)} />
+        </Field>
+        <Field label="Role" hint="Changing the role updates this member's permissions instantly.">
+          <select className="ds-select" value={roleId} onChange={(e) => setRoleId(e.target.value)}>
+            {roles.filter((r) => r.id !== "owner").map((r) => <option key={r.id} value={r.id}>{r.name}</option>)}
+          </select>
+        </Field>
+      </div>
+    </Modal>
+  );
+}

src/components/dashboard/ui.tsx

@@ -22,7 +22,8 @@ import {
   CheckCircle2, KeyRound, Pencil, Copy, RefreshCw, AlertTriangle,
   LayoutDashboard, Building2, FolderKanban, UserPlus, BadgeCheck, Filter,
   Truck, CloudLightning, Map as MapIcon, PenTool, Calculator, CalendarDays,
-  Trophy, ListChecks, Users, Settings, Sparkles, type LucideIcon,
+  Trophy, ListChecks, Users, Settings, Sparkles, MoreHorizontal,
+  UsersRound, type LucideIcon,
 } from "lucide-react";
 
 /* ---------------------------------------------------------- */
@@ -47,6 +48,7 @@ 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,
 };
 
 export function Icon({ name, size = 18, className, strokeWidth = 2 }: { name: string; size?: number; className?: string; strokeWidth?: number }) {