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

Source identity

Field	Recorded value
Source type	GitHub source
Original record	Janady13/missionmatch / frontend/src/components/AppShell.tsx
Date	Not specified in source
Repository	Janady13/missionmatch
Revision	2178e7298d0e5d9af83afa12402fd587f0ba6ed8
Branch	feature/aioe-upgrade
Path or archive member	frontend/src/components/AppShell.tsx
Original SHA-256	82b524a271815425ce14e5e3154263fff0be26ba87d0fb75a4796dc74443dc04
Git blob SHA	5d5a5f13521d9508d310f1dcf818c397d4f974ff
Reading-copy SHA-256	82b524a271815425ce14e5e3154263fff0be26ba87d0fb75a4796dc74443dc04
Original source ↗
Recovered source transcript

Download complete source text ↓282 lines · 11.0 KB
import type { ComponentType, CSSProperties } from 'react'
import { NavLink, Outlet, useLocation } from 'react-router-dom'
import {
  BrainCircuit,
  Briefcase,
  Users2,
  FileDown,
  TrendingUp,
  CheckSquare,
  Building2,
  ClipboardList,
  Crosshair,
  Layers,
  LogOut,
  Radar,
  Scale,
  Settings as SettingsIcon,
  ShieldCheck,
  Users,
} from 'lucide-react'
import { useAuth } from '../lib/useAuth'
import { hasTool } from '../lib/can'
import { CAP, can } from '../lib/can'
import { orgLogoURL } from '../lib/org'
import { useOrgBranding } from '../lib/orgQueries'

type Icon = ComponentType<{ size?: number; className?: string; style?: CSSProperties }>
type NavItem = { to: string; label: string; icon: Icon }
type Tool = {
  key: string
  // tool is the server side entitlement name this group belongs to. The navigation is filtered by it, so
  // a user without the grant never sees the group. The API refuses independently.
  tool: string
  name: string
  tagline: string
  accent: string
  basePath: string
  icon: Icon
  match: (path: string) => boolean
  nav: NavItem[]
}

// The three tools under the missionMATCH umbrella. The switcher routes between them; each owns its
// accent and its own nav. missionMATCH (gold) is the home tool and the default after login.
const TOOLS: Tool[] = [
  {
    key: 'mission',
    tool: 'missionmatch',
    name: 'missionMATCH',
    tagline: 'Command Center',
    accent: 'var(--color-gold)',
    basePath: '/command',
    icon: Radar,
    match: (p) => p === '/' || p.startsWith('/command') || p.startsWith('/compliance'),
    nav: [
      { to: '/command', label: 'Command Center', icon: Radar },
      { to: '/command/candidates', label: 'Candidates', icon: Users },
      { to: '/command/ask', label: 'Ask the Brain', icon: BrainCircuit },
      { to: '/compliance', label: 'Compliance', icon: Scale },
    ],
  },
  {
    key: 'screen',
    tool: 'screenmatch',
    name: 'screenMATCH',
    tagline: 'Qualification',
    accent: 'var(--color-screen)',
    basePath: '/screen',
    icon: Crosshair,
    match: (p) => p.startsWith('/screen') || p.startsWith('/requirements') || p.startsWith('/evaluate'),
    nav: [
      { to: '/screen', label: 'Screen Candidate', icon: Crosshair },
      { to: '/requirements', label: 'Opportunities', icon: ClipboardList },
    ],
  },
  {
    key: 'slate',
    tool: 'slatematch',
    name: 'slateMATCH',
    tagline: 'Proposal Slates',
    accent: 'var(--color-slate-accent)',
    basePath: '/slate',
    icon: Layers,
    match: (p) => p.startsWith('/slate'),
    nav: [{ to: '/slate', label: 'Candidate Slate', icon: Layers }],
  },
  {
    key: 'recruit',
    tool: 'recruitmatch',
    name: 'recruitMATCH',
    tagline: 'Recruiting Operations',
    accent: 'var(--color-recruit)',
    basePath: '/recruit',
    icon: ClipboardList,
    match: (p) => p.startsWith('/recruit'),
    nav: [
      { to: '/recruit', label: 'Dashboard', icon: ClipboardList },
      { to: '/recruit/clients', label: 'Clients', icon: Building2 },
      { to: '/recruit/requisitions', label: 'Job orders', icon: Briefcase },
      { to: '/recruit/tasks', label: 'My work', icon: CheckSquare },
      { to: '/recruit/analytics', label: 'Analytics', icon: TrendingUp },
      { to: '/recruit/reports', label: 'Reports', icon: FileDown },
    ],
  },
]

function activeTool(path: string): Tool {
  return TOOLS.find((t) => t.match(path)) ?? TOOLS[0]
}

// Shared and legacy routes belong to no tool; give them their own header title so it never reads the
// fallback tool's first nav label (for example the Settings page must not show "Command Center").
const SHARED_TITLES: Record<string, string> = {
  '/settings': 'Settings',
  '/admin': 'Accounts and access',
  '/people': 'Accounts and access',
}

function isSharedPath(path: string): boolean {
  return path in SHARED_TITLES
}

function headerTitle(tool: Tool, path: string): string {
  if (SHARED_TITLES[path]) return SHARED_TITLES[path]
  const item = tool.nav.find((n) => (path === n.to ? true : path.startsWith(n.to) && n.to !== tool.basePath))
  return item?.label ?? tool.nav[0]?.label ?? tool.name
}

export function AppShell() {
  const { pathname } = useLocation()
  const { principal, logout } = useAuth()
  const tool = activeTool(pathname)
  // On a shared or legacy route no tool is truly active, so no tool chip lights and the header stays
  // neutral rather than borrowing the fallback tool's identity.
  const shared = isSharedPath(pathname)
  // Only the tools this user was granted. Filtered from the same list the switcher and the header read,
  // so an unentitled tool cannot appear in one and not the other.
  const visibleTools = TOOLS.filter((t) => hasTool(principal, t.tool))
  const branding = useOrgBranding()
  const orgLogo = orgLogoURL(branding.data)
  const orgName = branding.data?.display_name || branding.data?.name || ""

  return (
    <div className="grid h-full grid-cols-[248px_1fr]">
      <aside className="flex flex-col border-r border-line/70 bg-navy-950/70 backdrop-blur">
        <div className="flex items-center gap-2.5 px-5 py-5">
          {orgLogo ? (
            // The client's own mark. object-contain so a wide or tall logo is never distorted, and the
            // alt text names the organization so the shell stays readable without images.
            <span className="grid size-9 place-items-center overflow-hidden rounded-lg bg-navy-900">
              <img src={orgLogo} alt={orgName} className="size-9 object-contain" />
            </span>
          ) : (
            <span className="grid size-9 place-items-center rounded-lg bg-gradient-to-br from-blue to-navy-700 text-gold">
              <ShieldCheck size={20} />
            </span>
          )}
          <div className="leading-tight">
            <div className="text-[15px] font-extrabold tracking-tight">
              mission<span className="text-gold">MATCH</span>
              <span className="align-super text-[9px]">™</span>
            </div>
            <div className="truncate text-[10px] uppercase tracking-[0.16em] text-faint" title={orgName}>
              {orgName || 'Enterprise Mission Intelligence™'}
            </div>
          </div>
        </div>

        {/* Tool switcher: one chip per ENTITLED tool, the active tool wears its accent. A tool the user was
            not granted is absent rather than disabled, because a disabled chip advertises a product they
            cannot use and invites a support request. The API refuses those routes independently. */}
        <div className="mx-3 mb-2 space-y-1 rounded-xl border border-line/60 bg-navy-900/50 p-1.5">
          {visibleTools.map((t) => {
            const isActive = t.key === tool.key && !shared
            return (
              <NavLink
                key={t.key}
                to={t.basePath}
                className="flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-semibold transition-colors"
                style={{
                  background: isActive ? 'color-mix(in srgb, ' + t.accent + ' 16%, transparent)' : 'transparent',
                  color: isActive ? 'var(--color-ink)' : 'var(--color-muted)',
                  boxShadow: isActive ? 'inset 2px 0 0 0 ' + t.accent : 'none',
                }}
              >
                <t.icon size={16} style={{ color: t.accent }} />
                {t.name}
              </NavLink>
            )
          })}
        </div>

        <nav className="mt-1 flex-1 space-y-0.5 px-3">
          <div className="px-3 pb-1 pt-2 text-[10px] font-bold uppercase tracking-[0.16em] text-faint">
            {tool.tagline}
          </div>
          {tool.nav.map(({ to, label, icon: ItemIcon }) => (
            <NavLink
              key={to}
              to={to}
              end={to === tool.basePath}
              className={({ isActive }) =>
                `flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors ${
                  isActive ? 'text-ink' : 'text-muted hover:bg-navy-800/60 hover:text-ink'
                }`
              }
              style={({ isActive }) =>
                isActive
                  ? { background: 'color-mix(in srgb, ' + tool.accent + ' 15%, transparent)', boxShadow: 'inset 2px 0 0 0 ' + tool.accent }
                  : undefined
              }
            >
              <ItemIcon size={17} />
              {label}
            </NavLink>
          ))}
        </nav>

        <NavLink
          to="/settings"
          className={({ isActive }) =>
            `mx-3 mb-2 flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors ${
              isActive ? 'bg-navy-800/60 text-ink' : 'text-muted hover:bg-navy-800/60 hover:text-ink'
            }`
          }
        >
          <SettingsIcon size={17} /> Settings
        </NavLink>
        {/* The access screen appears only for someone who can actually manage accounts. Hiding it is a
            courtesy; the API refuses every action independently regardless of what the nav shows. */}
        {can(principal, CAP.userInvite) && (
          <NavLink
            to="/admin"
            className={({ isActive }) =>
              `mx-3 mb-2 flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors ${
                isActive ? 'bg-navy-800/60 text-ink' : 'text-muted hover:bg-navy-800/60 hover:text-ink'
              }`
            }
          >
            <Users2 size={17} /> Accounts and access
          </NavLink>
        )}
        <p className="mt-auto px-5 pb-4 pt-3 text-[10px] leading-relaxed text-faint">
          Powered by the Adaptive Intelligence Optimization Engine™
        </p>
      </aside>

      <div className="flex min-w-0 flex-col">
        <header className="flex items-center justify-between border-b border-line/70 bg-navy-950/40 px-6 py-3.5 backdrop-blur">
          <div className="flex items-center gap-3">
            <span className="h-7 w-1.5 rounded-full" style={{ background: shared ? 'var(--color-line)' : tool.accent }} />
            <div>
              <h1 className="text-lg font-bold tracking-tight">{headerTitle(tool, pathname)}</h1>
              <p className="text-xs text-faint">{shared ? 'missionMATCH' : `${tool.name} · ${tool.tagline}`}</p>
            </div>
          </div>
          <div className="flex items-center gap-3">
            <span className="rounded-full border border-line/70 px-3 py-1 text-[11px] font-semibold text-muted">
              FIPS 140-3 • RLS isolated
            </span>
            {principal && (
              <span className="rounded-full bg-blue/20 px-2.5 py-1 text-[11px] font-semibold uppercase tracking-wide text-blue-soft">
                {principal.role}
              </span>
            )}
            <button
              onClick={() => void logout()}
              title="Sign out"
              className="grid size-8 place-items-center rounded-md border border-line/70 text-muted hover:border-risk/60 hover:text-risk"
            >
              <LogOut size={15} />
            </button>
          </div>
        </header>
        <main className="min-h-0 flex-1 overflow-y-auto p-6">
          <Outlet />
        </main>
      </div>
    </div>
  )
}