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

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