75 lines
2.7 KiB
JavaScript
75 lines
2.7 KiB
JavaScript
import { NavLink, Outlet } from 'react-router-dom'
|
|
import { NAV_GROUPS, STAGES } from '../api/config.js'
|
|
import UserMenu from './UserMenu.jsx'
|
|
import logo from '../assets/brand/zurich_logo.webp'
|
|
import './Shell.css'
|
|
|
|
/**
|
|
* The sidebar groups the pipeline by WHO IS HOLDING each lead, not by where it
|
|
* sits in the process. Fourteen flat stages answer "what is the process?", which
|
|
* is not the question anyone signing in has; these answer "is anything waiting
|
|
* on me?". Queues that need a person are named by what they want done.
|
|
*
|
|
* It deliberately carries no counts. A tally here can only come from fetching
|
|
* every lead on a timer and counting client-side, which is a second full list
|
|
* call per open tab that disagrees with the queue's own total the moment either
|
|
* one is paged. The count belongs on the queue, which already has it from the
|
|
* server.
|
|
*/
|
|
export default function Shell() {
|
|
return (
|
|
<div className="shell">
|
|
<header className="shell__top">
|
|
<div className="shell__brand">
|
|
<img src={logo} alt="Zurich Kotak General Insurance" />
|
|
<div className="shell__brandtext">
|
|
<strong>Lead Desk</strong>
|
|
<span>Lead to Policy</span>
|
|
</div>
|
|
</div>
|
|
<UserMenu />
|
|
</header>
|
|
|
|
<div className="shell__body">
|
|
<nav className="shell__nav" aria-label="Pipeline">
|
|
<NavLink to="/add" className="shell__add">
|
|
<svg viewBox="0 0 16 16" aria-hidden="true">
|
|
<path d="M8 3.2v9.6M3.2 8h9.6" fill="none" stroke="currentColor" strokeWidth="1.7"
|
|
strokeLinecap="round" />
|
|
</svg>
|
|
Add a lead
|
|
</NavLink>
|
|
|
|
{NAV_GROUPS.map((group) => {
|
|
const stages = STAGES.filter((s) => s.kind === group.kind)
|
|
if (!stages.length) return null
|
|
return (
|
|
<div className="shell__group" key={group.kind}>
|
|
<p className="shell__navlabel">{group.label}</p>
|
|
<div className="shell__stages">
|
|
{stages.map((s) => (
|
|
<NavLink
|
|
key={s.uid}
|
|
to={`/stage/${s.uid}`}
|
|
title={s.need ? s.name : undefined}
|
|
className={({ isActive }) =>
|
|
'shell__stage' + (isActive ? ' is-active' : '') + (s.kind === 'needs' ? ' is-needed' : '')
|
|
}
|
|
>
|
|
<span className="shell__stagename">{s.need ?? s.name}</span>
|
|
</NavLink>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</nav>
|
|
|
|
<main className="shell__main">
|
|
<Outlet />
|
|
</main>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|