Janady13/missionmatch / frontend/src/components/AppShell.tsx

1import type { ComponentType, CSSProperties } from 'react' 2import { NavLink, Outlet, useLocation } from 'react-router-dom' 3import { 4 BrainCircuit, 5 ClipboardList, 6 Crosshair, 7 Layers, 8 LogOut, 9 Radar, 10 Scale, 11 Settings as SettingsIcon, 12 ShieldCheck, 13 Users, 14} from 'lucide-react' 15import { useAuth } from '../lib/useAuth' 16 17type Icon = ComponentType<{ size?: number; className?: string; style?: CSSProperties }> 18type NavItem = { to: string; label: string; icon: Icon } 19type Tool = { 20 key: string 21 name: string 22 tagline: string 23 accent: string 24 basePath: string 25 icon: Icon 26 match: (path: string) => boolean 27 nav: NavItem[] 28} 29 30// The three tools under the missionMATCH umbrella. The switcher routes between them; each owns its 31// accent and its own nav. missionMATCH (gold) is the home tool and the default after login. 32const TOOLS: Tool[] = [ 33 { 34 key: 'mission', 35 name: 'missionMATCH', 36 tagline: 'Command Center', 37 accent: 'var(--color-gold)', 38 basePath: '/command', 39 icon: Radar, 40 match: (p) => p === '/' || p.startsWith('/command') || p.startsWith('/compliance'), 41 nav: [ 42 { to: '/command', label: 'Command Center', icon: Radar }, 43 { to: '/command/candidates', label: 'Candidates', icon: Users }, 44 { to: '/command/ask', label: 'Ask the Brain', icon: BrainCircuit }, 45 { to: '/compliance', label: 'Compliance', icon: Scale }, 46 ], 47 }, 48 { 49 key: 'screen', 50 name: 'screenMATCH', 51 tagline: 'Qualification', 52 accent: 'var(--color-screen)', 53 basePath: '/screen', 54 icon: Crosshair, 55 match: (p) => p.startsWith('/screen') || p.startsWith('/requirements') || p.startsWith('/evaluate'), 56 nav: [ 57 { to: '/screen', label: 'Screen Candidate', icon: Crosshair }, 58 { to: '/requirements', label: 'Opportunities', icon: ClipboardList }, 59 ], 60 }, 61 { 62 key: 'slate', 63 name: 'slateMATCH', 64 tagline: 'Proposal Slates', 65 accent: 'var(--color-slate-accent)', 66 basePath: '/slate', 67 icon: Layers, 68 match: (p) => p.startsWith('/slate'), 69 nav: [{ to: '/slate', label: 'Candidate Slate', icon: Layers }], 70 }, 71] 72 73function activeTool(path: string): Tool { 74 return TOOLS.find((t) => t.match(path)) ?? TOOLS[0] 75} 76 77// Shared and legacy routes belong to no tool; give them their own header title so it never reads the 78// fallback tool's first nav label (for example the Settings page must not show "Command Center"). 79const SHARED_TITLES: Record<string, string> = { 80 '/settings': 'Settings', 81 '/pipeline': 'Talent Pipeline', 82 '/dashboard': 'Dashboard', 83} 84 85function isSharedPath(path: string): boolean { 86 return path in SHARED_TITLES 87} 88 89function headerTitle(tool: Tool, path: string): string { 90 if (SHARED_TITLES[path]) return SHARED_TITLES[path] 91 const item = tool.nav.find((n) => (path === n.to ? true : path.startsWith(n.to) && n.to !== tool.basePath)) 92 return item?.label ?? tool.nav[0]?.label ?? tool.name 93} 94 95export function AppShell() { 96 const { pathname } = useLocation() 97 const { principal, logout } = useAuth() 98 const tool = activeTool(pathname) 99 // On a shared or legacy route no tool is truly active, so no tool chip lights and the header stays 100 // neutral rather than borrowing the fallback tool's identity. 101 const shared = isSharedPath(pathname) 102 103 return ( 104 <div className="grid h-full grid-cols-[248px_1fr]"> 105 <aside className="flex flex-col border-r border-line/70 bg-navy-950/70 backdrop-blur"> 106 <div className="flex items-center gap-2.5 px-5 py-5"> 107 <span className="grid size-9 place-items-center rounded-lg bg-gradient-to-br from-blue to-navy-700 text-gold"> 108 <ShieldCheck size={20} /> 109 </span> 110 <div className="leading-tight"> 111 <div className="text-[15px] font-extrabold tracking-tight"> 112 mission<span className="text-gold">MATCH</span> 113 <span className="align-super text-[9px]">™</span> 114 </div> 115 <div className="text-[10px] uppercase tracking-[0.16em] text-faint">Mission Workforce</div> 116 </div> 117 </div> 118 119 {/* Tool switcher: one chip per tool, the active tool wears its accent. */} 120 <div className="mx-3 mb-2 space-y-1 rounded-xl border border-line/60 bg-navy-900/50 p-1.5"> 121 {TOOLS.map((t) => { 122 const isActive = t.key === tool.key && !shared 123 return ( 124 <NavLink 125 key={t.key} 126 to={t.basePath} 127 className="flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-semibold transition-colors" 128 style={{ 129 background: isActive ? 'color-mix(in srgb, ' + t.accent + ' 16%, transparent)' : 'transparent', 130 color: isActive ? 'var(--color-ink)' : 'var(--color-muted)', 131 boxShadow: isActive ? 'inset 2px 0 0 0 ' + t.accent : 'none', 132 }} 133 > 134 <t.icon size={16} style={{ color: t.accent }} /> 135 {t.name} 136 </NavLink> 137 ) 138 })} 139 </div> 140 141 <nav className="mt-1 flex-1 space-y-0.5 px-3"> 142 <div className="px-3 pb-1 pt-2 text-[10px] font-bold uppercase tracking-[0.16em] text-faint"> 143 {tool.tagline} 144 </div> 145 {tool.nav.map(({ to, label, icon: ItemIcon }) => ( 146 <NavLink 147 key={to} 148 to={to} 149 end={to === tool.basePath} 150 className={({ isActive }) => 151 `flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors ${ 152 isActive ? 'text-ink' : 'text-muted hover:bg-navy-800/60 hover:text-ink' 153 }` 154 } 155 style={({ isActive }) => 156 isActive 157 ? { background: 'color-mix(in srgb, ' + tool.accent + ' 15%, transparent)', boxShadow: 'inset 2px 0 0 0 ' + tool.accent } 158 : undefined 159 } 160 > 161 <ItemIcon size={17} /> 162 {label} 163 </NavLink> 164 ))} 165 </nav> 166 167 <NavLink 168 to="/settings" 169 className={({ isActive }) => 170 `mx-3 mb-2 flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors ${ 171 isActive ? 'bg-navy-800/60 text-ink' : 'text-muted hover:bg-navy-800/60 hover:text-ink' 172 }` 173 } 174 > 175 <SettingsIcon size={17} /> Settings 176 </NavLink> 177 </aside> 178 179 <div className="flex min-w-0 flex-col"> 180 <header className="flex items-center justify-between border-b border-line/70 bg-navy-950/40 px-6 py-3.5 backdrop-blur"> 181 <div className="flex items-center gap-3"> 182 <span className="h-7 w-1.5 rounded-full" style={{ background: shared ? 'var(--color-line)' : tool.accent }} /> 183 <div> 184 <h1 className="text-lg font-bold tracking-tight">{headerTitle(tool, pathname)}</h1> 185 <p className="text-xs text-faint">{shared ? 'missionMATCH' : `${tool.name} · ${tool.tagline}`}</p> 186 </div> 187 </div> 188 <div className="flex items-center gap-3"> 189 <span className="rounded-full border border-line/70 px-3 py-1 text-[11px] font-semibold text-muted"> 190 FIPS 140-3 • RLS isolated 191 </span> 192 {principal && ( 193 <span className="rounded-full bg-blue/20 px-2.5 py-1 text-[11px] font-semibold uppercase tracking-wide text-blue-soft"> 194 {principal.role} 195 </span> 196 )} 197 <button 198 onClick={() => void logout()} 199 title="Sign out" 200 className="grid size-8 place-items-center rounded-md border border-line/70 text-muted hover:border-risk/60 hover:text-risk" 201 > 202 <LogOut size={15} /> 203 </button> 204 </div> 205 </header> 206 <main className="min-h-0 flex-1 overflow-y-auto p-6"> 207 <Outlet /> 208 </main> 209 </div> 210 </div> 211 ) 212} 213