Redesign Support as bento hub, restore full sidebar, Western names

- Support Center overview rebuilt as a bento grid: large live-chat hero
  tile, support team tile, mini channel tiles and a recent-tickets strip.
- Restore full workspace sidebar (Workspace/Team/Profile groups) with a
  premium golden active state; unbuilt modules show a Coming Soon view.
- Use Western names across the UI (James Carter; Emma Wilson, Liam Foster,
  Sophie Turner, Noah Mitchell) incl. tickets, threads, portal demo user.
- Remove the Allottee card from Profile; add a clean Account & identity
  card and live-editable contacts.
- Relabel "Plot" -> "House number" everywhere; drop the allotment chip in
  favour of the property category.
- Premium visual pass: brand gradients, depth, glow accents, pill tabs.

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

src/components/dashboard/dashboard.tsx

@@ -1,28 +1,23 @@
 "use client";
 
 // ============================================================
-// Dashboard shell — keeps the sidebar + header and swaps the
-// inner content between the Profile, Support and Rules views.
+// 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 } from "./sidebar";
+import { Sidebar, NAV_ITEMS } from "./sidebar";
 import { Topbar } from "./topbar";
-import { ToastProvider } from "./ui";
+import { ToastProvider, PageHead, Btn, Icon } from "./ui";
 import { Profile } from "./profile";
 import { Support } from "./support";
 import { Rules } from "./rules";
 import "../../app/dashboard/dashboard.css";
 
-const HEADINGS: Record<string, { title: string; subtitle: string }> = {
-  profile: { title: "Profile", subtitle: "Your account, identity and preferences" },
-  support: { title: "Support Center", subtitle: "Get help, track requests and find answers" },
-  rules: { title: "Rules Checklist", subtitle: "The 13 rules behind Profile & Support" },
-};
-
 export function Dashboard() {
   const [theme, setTheme] = useState<"dark" | "light">("dark");
-  const [active, setActive] = useState("profile");
+  const [active, setActive] = useState("dashboard");
 
   useEffect(() => {
     // Sync the persisted theme from localStorage (an external system) on mount.
@@ -33,21 +28,44 @@ export function Dashboard() {
     setTheme((t) => { const n = t === "dark" ? "light" : "dark"; try { localStorage.setItem("lup_dash_theme", n); } catch {} return n; });
   }
 
-  const head = HEADINGS[active] ?? HEADINGS.profile;
+  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={head.title} subtitle={head.subtitle} />
+        <Topbar theme={theme} onToggle={toggle} title={title} subtitle={subtitle} />
         <div className="dash-content">
           <ToastProvider>
-            {active === "profile" && <Profile />}
-            {active === "support" && <Support />}
-            {active === "rules" && <Rules />}
+            {active === "profile" ? <Profile />
+              : active === "support" ? <Support />
+              : active === "rules" ? <Rules />
+              : <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>
+  );
+}