Janady13/missionmatch / frontend/src/tools/recruitmatch/Analytics.tsx

1import { useMemo, useState } from 'react' 2import { AlertTriangle, ArrowRight, Globe, Info, TrendingUp } from 'lucide-react' 3 4import { ToolHeader } from '../../components/ToolHeader' 5import { Panel } from '../../components/ui' 6import type { RTimeToFill } from '../../lib/types' 7import { recruitBrand } from './brand' 8import { useAnalytics } from './analyticsQueries' 9 10const chip = (on: boolean) => 11 `rounded-full px-3 py-1 text-xs font-semibold transition ${ 12 on 13 ? 'bg-recruit/25 text-recruit shadow-[inset_0_0_0_1px_var(--color-recruit)]' 14 : 'bg-navy-900 text-faint hover:text-muted border border-line/60' 15 }` 16 17const money = (v?: string) => { 18 if (!v) return '' 19 const [w, f = ''] = v.split('.') 20 const t = f.replace(/0+$/, '') 21 return '$' + w + '.' + (t.length <= 2 ? t.padEnd(2, '0') : t) 22} 23 24// The time to fill card, which is the whole point of this screen. 25// 26// Both figures are shown side by side and labelled. The naive one is what every other tool reports; the 27// corrected one keeps the still open orders in the calculation. When they differ, the gap IS the 28// survivorship bias, and showing only one of them is how that bias goes unnoticed. 29function TimeToFillCard({ title, hint, ttf }: { title: string; hint: string; ttf: RTimeToFill }) { 30 const biased = 31 ttf.median_reached && ttf.naive_median_days && ttf.median_days 32 ? Number(ttf.median_days) - Number(ttf.naive_median_days) 33 : null 34 35 return ( 36 <Panel title={title} hint={hint}> 37 {ttf.cohort === 0 ? ( 38 <p className="py-6 text-center text-[11px] text-faint">No requisitions opened in this window.</p> 39 ) : ( 40 <> 41 <div className="grid grid-cols-2 gap-3"> 42 <div className="rounded-xl border border-recruit/40 bg-navy-950/40 p-3"> 43 <p className="text-[10px] font-bold uppercase tracking-wider text-faint">Median, corrected</p> 44 {ttf.median_reached ? ( 45 <p className="mt-1 text-2xl font-extrabold tracking-tight text-recruit"> 46 {Number(ttf.median_days).toFixed(1)} 47 <span className="ml-1 text-sm font-semibold text-muted">days</span> 48 </p> 49 ) : ( 50 // Absent is not zero. Fewer than half the cohort has filled, so a median does not exist 51 // yet, and inventing one would be a fabrication. 52 <p className="mt-1 text-lg font-extrabold tracking-tight text-warn">Not yet reached</p> 53 )} 54 <p className="mt-0.5 text-[10px] text-faint"> 55 keeps the {ttf.still_open} still open in the calculation 56 </p> 57 </div> 58 <div className="rounded-xl border border-line/60 bg-navy-950/40 p-3"> 59 <p className="text-[10px] font-bold uppercase tracking-wider text-faint">Median, filled only</p> 60 <p className="mt-1 text-2xl font-extrabold tracking-tight text-muted"> 61 {ttf.naive_median_days ? Number(ttf.naive_median_days).toFixed(1) : '—'} 62 {ttf.naive_median_days && <span className="ml-1 text-sm font-semibold text-faint">days</span>} 63 </p> 64 <p className="mt-0.5 text-[10px] text-faint">ignores everything still open</p> 65 </div> 66 </div> 67 68 {!ttf.median_reached && ttf.naive_median_days && ( 69 <p className="mt-3 rounded-lg border border-warn/40 bg-navy-950/40 p-3 text-[11px] text-muted"> 70 <AlertTriangle size={11} className="mr-1 inline" /> 71 Only {ttf.filled} of {ttf.cohort} have filled, so half the cohort has not finished and there 72 is no median yet. The {Number(ttf.naive_median_days).toFixed(1)} day figure beside it counts 73 only the ones that finished, which is why it looks fast. 74 </p> 75 )} 76 {biased !== null && biased > 0.05 && ( 77 <p className="mt-3 rounded-lg border border-line/60 bg-navy-950/40 p-3 text-[11px] text-muted"> 78 <Info size={11} className="mr-1 inline" /> 79 Counting only filled orders understates this by {biased.toFixed(1)} days. 80 </p> 81 )} 82 83 <p className="mt-3 text-[10px] text-faint"> 84 {ttf.cohort} opened · {ttf.filled} filled · {ttf.still_open} still open 85 </p> 86 </> 87 )} 88 </Panel> 89 ) 90} 91 92export function Analytics() { 93 const [days, setDays] = useState(90) 94 // Memoised on the window length, not recomputed per render. 95 // 96 // Without this, Date.now() produces a slightly different instant every render, the query key changes 97 // with it, and React Query refetches forever: the screen sits on "Computing" while the API answers 98 // correctly every time. The API being right is exactly why this only shows up by looking at the page. 99 const since = useMemo(() => new Date(Date.now() - days * 864e5).toISOString(), [days]) 100 const q = useAnalytics(since) 101 102 if (q.isLoading) return <Panel className="grid place-items-center py-24 text-muted">Computing…</Panel> 103 if (q.isError || !q.data) { 104 return ( 105 <Panel className="grid place-items-center py-24 text-warn"> 106 Could not load analytics. {(q.error as Error)?.message} 107 </Panel> 108 ) 109 } 110 const v = q.data 111 const maxRung = v.funnel.length ? v.funnel[0].count : 0 112 const maxAging = Math.max(1, ...v.aging.map((a) => a.count)) 113 114 return ( 115 <div className="space-y-4"> 116 <ToolHeader name={recruitBrand.name} tagline="Analytics" accent={recruitBrand.accent}> 117 <span className="flex items-center gap-1.5 text-[11px] text-faint"> 118 <Globe size={11} /> 119 {v.time_zone} 120 </span> 121 </ToolHeader> 122 123 <div className="flex flex-wrap items-center gap-2"> 124 {[30, 90, 180, 365].map((d) => ( 125 <button key={d} className={chip(days === d)} onClick={() => setDays(d)}> 126 {d} days 127 </button> 128 ))} 129 <span className="ml-auto text-[11px] text-faint"> 130 Cohort is every job order OPENED in the window, not every one filled. 131 </span> 132 </div> 133 134 <div className="grid gap-4 lg:grid-cols-2"> 135 <TimeToFillCard title="Time to offer" hint="opened until an offer was accepted" ttf={v.time_to_offer} /> 136 <TimeToFillCard title="Time to start" hint="opened until someone started" ttf={v.time_to_start} /> 137 </div> 138 <TimeToFillCard 139 title="Working time to start" 140 hint="time to start, minus time the order spent on hold" 141 ttf={v.worked_time_to_start} 142 /> 143 144 <div className="grid gap-4 lg:grid-cols-2"> 145 <Panel title="Outcomes" hint="both denominators"> 146 <div className="grid grid-cols-4 gap-2"> 147 {[ 148 { l: 'Filled', n: v.fill_rate.filled }, 149 { l: 'Closed', n: v.fill_rate.closed_unfilled }, 150 { l: 'Cancelled', n: v.fill_rate.cancelled }, 151 { l: 'Open', n: v.fill_rate.still_open }, 152 ].map((x) => ( 153 <div key={x.l} className="rounded-lg border border-line/60 bg-navy-950/40 p-2 text-center"> 154 <p className="text-[10px] font-bold uppercase tracking-wider text-faint">{x.l}</p> 155 <p className="text-xl font-extrabold">{x.n}</p> 156 </div> 157 ))} 158 </div> 159 {v.fill_rate.suppressed ? ( 160 // The counts are always shown; only the ratio is withheld, because a rate over a handful of 161 // orders is arithmetically correct and meaningless. 162 <p className="mt-3 rounded-lg border border-line/60 bg-navy-950/40 p-3 text-[11px] text-muted"> 163 Too few resolved job orders to report a rate. The counts above are exact. 164 </p> 165 ) : ( 166 <div className="mt-3 space-y-1.5 text-[11px]"> 167 <p className="flex justify-between"> 168 <span className="text-muted">Fill rate, counting cancellations</span> 169 <span className="font-semibold">{v.fill_rate.rate_of_resolved}%</span> 170 </p> 171 <p className="flex justify-between"> 172 <span className="text-muted">Fill rate, excluding cancellations</span> 173 <span className="font-semibold">{v.fill_rate.rate_of_decided ?? '—'}%</span> 174 </p> 175 <p className="text-[10px] text-faint"> 176 A cancelled order is a role the client pulled. Both denominators are shown because the 177 definition genuinely forks and picking one silently makes two reports disagree. 178 </p> 179 </div> 180 )} 181 </Panel> 182 183 <Panel title="Open job orders by age" hint={`oldest ${v.oldest_open_days}d`}> 184 {v.fill_rate.still_open === 0 ? ( 185 <p className="py-6 text-center text-[11px] text-faint">Nothing open.</p> 186 ) : ( 187 <div className="space-y-2"> 188 {v.aging.map((a) => ( 189 <div key={a.label} className="flex items-center gap-3"> 190 <span className="w-28 shrink-0 text-[11px] text-muted">{a.label}</span> 191 <div className="h-5 flex-1 overflow-hidden rounded bg-navy-950/60"> 192 <div 193 className="h-full rounded" 194 style={{ 195 width: `${Math.max((a.count / maxAging) * 100, a.count > 0 ? 6 : 0)}%`, 196 background: 197 a.min_days >= 60 198 ? 'var(--color-risk)' 199 : a.min_days >= 30 200 ? 'var(--color-warn)' 201 : 'var(--color-blue-soft)', 202 }} 203 /> 204 </div> 205 <span className="w-8 shrink-0 text-right text-[11px] font-semibold">{a.count}</span> 206 </div> 207 ))} 208 <p className="text-[10px] text-faint"> 209 A distribution, not an average. An average age hides the tail, and the tail is the problem. 210 </p> 211 </div> 212 )} 213 </Panel> 214 </div> 215 216 <div className="grid gap-4 lg:grid-cols-2"> 217 <Panel title="Candidate funnel" hint="everyone who ever reached each stage"> 218 <div className="space-y-2"> 219 {v.funnel.map((s) => ( 220 <div key={s.stage} className="flex items-center gap-3"> 221 <span className="w-24 shrink-0 text-[11px] text-muted">{s.label}</span> 222 <div className="h-5 flex-1 overflow-hidden rounded bg-navy-950/60"> 223 <div 224 className="h-full rounded bg-gradient-to-r from-blue to-recruit" 225 style={{ width: `${maxRung > 0 ? Math.max((s.count / maxRung) * 100, s.count > 0 ? 6 : 0) : 0}%` }} 226 /> 227 </div> 228 <span className="w-16 shrink-0 text-right text-[11px]"> 229 {s.count} · {s.pct}% 230 </span> 231 </div> 232 ))} 233 </div> 234 {v.conversion.length > 0 && v.funnel[0].count > 0 && ( 235 <ul className="mt-3 space-y-1 border-t border-line/50 pt-3"> 236 {v.conversion.map((c) => ( 237 <li key={`${c.from}-${c.to}`} className="flex justify-between text-[11px]"> 238 <span className="text-muted"> 239 {c.from_label} <ArrowRight size={9} className="inline" /> {c.to_label} 240 </span> 241 <span className="font-semibold">{c.rate}%</span> 242 </li> 243 ))} 244 </ul> 245 )} 246 </Panel> 247 248 <Panel title="Source effectiveness" hint="attributed on first touch"> 249 {v.sources.length === 0 ? ( 250 <p className="py-6 text-center text-[11px] text-faint">No candidates in this window.</p> 251 ) : ( 252 <ul className="space-y-1.5"> 253 {v.sources.map((s) => ( 254 <li key={s.source} className="flex items-center justify-between gap-3 text-[11px]"> 255 <span className="min-w-0 truncate text-muted">{s.source}</span> 256 <span className="shrink-0 text-faint"> 257 {s.applications} candidates · {s.placed} placed 258 {s.suppressed ? ( 259 <span className="ml-2 text-faint">rate withheld</span> 260 ) : ( 261 <span className="ml-2 font-semibold text-ink">{s.rate}%</span> 262 )} 263 </span> 264 </li> 265 ))} 266 </ul> 267 )} 268 <p className="mt-3 text-[10px] text-faint"> 269 First touch, never last. Attributing a placement to the most recent contact is how every 270 channel eventually looks like a referral. 271 </p> 272 </Panel> 273 </div> 274 275 <div className="grid gap-4 lg:grid-cols-2"> 276 <Panel title="Placements" hint="contract and permanent kept apart"> 277 <div className="grid grid-cols-3 gap-2"> 278 {[ 279 { l: 'Live', n: v.placements.live }, 280 { l: 'Started', n: v.placements.started }, 281 { l: 'Fell off', n: v.placements.fell_off }, 282 ].map((x) => ( 283 <div key={x.l} className="rounded-lg border border-line/60 bg-navy-950/40 p-2 text-center"> 284 <p className="text-[10px] font-bold uppercase tracking-wider text-faint">{x.l}</p> 285 <p className="text-xl font-extrabold">{x.n}</p> 286 </div> 287 ))} 288 </div> 289 <div className="mt-3 space-y-1 text-[11px]"> 290 {v.placements.contract_gross_per_hour && ( 291 <p className="flex justify-between"> 292 <span className="text-muted">Live contract margin</span> 293 <span className="font-semibold">{money(v.placements.contract_gross_per_hour)}/hr</span> 294 </p> 295 )} 296 {v.placements.direct_hire_fees && ( 297 <p className="flex justify-between"> 298 <span className="text-muted">Direct hire fees</span> 299 <span className="font-semibold">{money(v.placements.direct_hire_fees)}</span> 300 </p> 301 )} 302 {v.placements.guarantee_breaches > 0 && ( 303 <p className="flex justify-between" style={{ color: 'var(--color-risk)' }}> 304 <span>Guarantee breaches</span> 305 <span className="font-semibold">{v.placements.guarantee_breaches}</span> 306 </p> 307 )} 308 <p className="text-[10px] text-faint"> 309 Hourly margin is not annualised. Doing so would assume a full time full year assignment 310 nobody agreed to. 311 </p> 312 </div> 313 </Panel> 314 315 <Panel title="Recruiter effort" hint="logged, not captured"> 316 {v.recruiters.length === 0 ? ( 317 <p className="py-6 text-center text-[11px] text-faint">No activity logged in this window.</p> 318 ) : ( 319 <ul className="space-y-1.5"> 320 {v.recruiters.map((r) => ( 321 <li key={r.user_id || r.name} className="flex items-center justify-between gap-3 text-[11px]"> 322 <span className="min-w-0 truncate">{r.name}</span> 323 <span className="shrink-0 text-faint"> 324 {r.logged} logged · {r.connects} connected 325 {r.connect_rate && <span className="ml-2 font-semibold text-ink">{r.connect_rate}%</span>} 326 </span> 327 </li> 328 ))} 329 </ul> 330 )} 331 <p className="mt-3 text-[10px] text-faint"> 332 <TrendingUp size={10} className="mr-1 inline" /> 333 Attempts and conversations are counted separately. A hundred dials with two conversations is a 334 different day from a hundred conversations. 335 </p> 336 </Panel> 337 </div> 338 </div> 339 ) 340} 341