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/sidebar.tsx

@@ -4,29 +4,61 @@ import { ChevronsUpDown } from "lucide-react";
 import { Icon } from "./ui";
 import { user } from "./account-data";
 
-type Item = { key: string; label: string; icon: string };
+export type NavItem = { key: string; label: string; icon: string; subtitle?: string };
+export type NavGroup = { title: string; items: NavItem[] };
 
-const GROUPS: { title: string; items: Item[] }[] = [
+// Full workspace navigation. The Account group items (profile/support/rules)
+// render real views; the rest are workspace modules shown via a placeholder.
+export const NAV_GROUPS: NavGroup[] = [
   {
-    title: "Account",
+    title: "Workspace",
     items: [
-      { key: "profile", label: "Profile", icon: "user" },
+      { key: "dashboard", label: "Dashboard", icon: "dashboard", subtitle: "Welcome back — your territory at a glance" },
+      { key: "owners", label: "Owners Box", icon: "owners" },
+      { key: "projects", label: "Projects", icon: "projects" },
+      { key: "leads", label: "Leads", icon: "leads" },
+      { key: "verify", label: "Lead Verification", icon: "verify" },
+      { key: "pipeline", label: "Pipeline", icon: "pipeline" },
     ],
   },
   {
-    title: "Help & Support",
+    title: "Workspace",
     items: [
-      { key: "support", label: "Support Center", icon: "chat" },
+      { key: "dispatch", label: "LynkDispatch", icon: "dispatch" },
+      { key: "storm", label: "Storm Intel", icon: "storm" },
+      { key: "territory", label: "Territory Map", icon: "territory" },
+      { key: "procanvas", label: "ProCanvas", icon: "procanvas" },
+      { key: "estimates", label: "Estimates", icon: "estimates" },
     ],
   },
   {
-    title: "Reference",
+    title: "Team",
     items: [
-      { key: "rules", label: "Rules Checklist", icon: "check-circle" },
+      { key: "schedule", label: "Team Schedule", icon: "schedule" },
+      { key: "leaderboard", label: "Leaderboard", icon: "leaderboard" },
+      { key: "subtasks", label: "Subcontractor Tasks", icon: "subtasks" },
+      { key: "people", label: "People", icon: "people" },
+    ],
+  },
+  {
+    title: "Team",
+    items: [
+      { key: "settings", label: "Org Settings", icon: "settings" },
+      { key: "ai", label: "AI Assistant", icon: "ai" },
+    ],
+  },
+  {
+    title: "Profile & Documents",
+    items: [
+      { key: "profile", label: "Profile", icon: "user", subtitle: "Your account, identity and preferences" },
+      { key: "support", label: "Support Center", icon: "chat", subtitle: "Get help, track requests and find answers" },
+      { key: "rules", label: "Rules Checklist", icon: "check-circle", subtitle: "The 13 rules behind Profile & Support" },
     ],
   },
 ];
 
+export const NAV_ITEMS: NavItem[] = NAV_GROUPS.flatMap((g) => g.items);
+
 export function Sidebar({ active, onSelect }: { active: string; onSelect: (k: string) => void }) {
   return (
     <aside className="dash-sidebar">
@@ -37,13 +69,13 @@ export function Sidebar({ active, onSelect }: { active: string; onSelect: (k: st
       </div>
 
       <nav className="dash-nav">
-        {GROUPS.map((g, gi) => (
-          <div key={gi}>
+        {NAV_GROUPS.map((g, gi) => (
+          <div className="nav-section" key={gi}>
             <div className="nav-group">{g.title}</div>
             {g.items.map((it) => (
               <button key={it.key} className={`nav-item ${active === it.key ? "active" : ""}`} onClick={() => onSelect(it.key)}>
                 <Icon name={it.icon} size={18} />
-                {it.label}
+                <span className="nav-item-label">{it.label}</span>
               </button>
             ))}
           </div>