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 { Bar, 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 spread</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 This is the SPREAD, bill minus pay, before the cost of employing anybody. It is not margin and 310 it is not profit. It is also not annualised, because doing so would assume a full time full year 311 assignment nobody agreed to. 312 </p> 313 </div> 314 </Panel> 315 316 <Panel title="Recruiter effort" hint="logged, not captured"> 317 {v.recruiters.length === 0 ? ( 318 <p className="py-6 text-center text-[11px] text-faint">No activity logged in this window.</p> 319 ) : ( 320 <ul className="space-y-1.5"> 321 {v.recruiters.map((r) => ( 322 <li key={r.user_id || r.name} className="flex items-center justify-between gap-3 text-[11px]"> 323 <span className="min-w-0 truncate">{r.name}</span> 324 <span className="shrink-0 text-faint"> 325 {r.logged} logged · {r.connects} connected 326 {r.connect_rate && <span className="ml-2 font-semibold text-ink">{r.connect_rate}%</span>} 327 </span> 328 </li> 329 ))} 330 </ul> 331 )} 332 <p className="mt-3 text-[10px] text-faint"> 333 <TrendingUp size={10} className="mr-1 inline" /> 334 Attempts and conversations are counted separately. A hundred dials with two conversations is a 335 different day from a hundred conversations. 336 </p> 337 </Panel> 338 339 {/* DESK OUTCOMES sits beside recruiter EFFORT deliberately. Effort says what somebody did, outcomes 340 say what it produced, and a desk logging two hundred calls and placing nobody reads identically to 341 one logging forty and placing four in an effort report alone. */} 342 <Panel title="Desk outcomes" hint="what the effort produced"> 343 {v.desk_outcomes.length === 0 ? ( 344 <p className="py-6 text-center text-[11px] text-faint"> 345 Nothing was submitted or placed in this window. 346 </p> 347 ) : ( 348 <ul className="space-y-1.5"> 349 {v.desk_outcomes.map((d) => ( 350 <li key={d.user_id || d.name} className="flex items-center justify-between gap-3 text-[11px]"> 351 <span className="min-w-0 truncate">{d.name}</span> 352 <span className="shrink-0 text-faint"> 353 {d.submissions} submitted · {d.placements} placed 354 {d.placement_rate && ( 355 <span className="ml-2 font-semibold text-ink">{d.placement_rate}%</span> 356 )} 357 </span> 358 </li> 359 ))} 360 </ul> 361 )} 362 <p className="mt-3 text-[10px] leading-relaxed text-faint"> 363 A submission counts from the stage history, so somebody submitted and later rejected still counts. 364 The work happened. 365 </p> 366 </Panel> 367 368 {/* REDEPLOYMENT is the metric that measures whether the firm keeps what it already won, and nothing 369 in this product could compute it until the redeployment watch existed. */} 370 <Panel 371 title="Redeployment" 372 hint={`within ${v.redeployment.window_days} days of finishing`} 373 > 374 {v.redeployment.ended === 0 ? ( 375 <p className="py-6 text-center text-[11px] text-faint"> 376 Nobody finished an assignment in this window, so there is nothing to measure yet. 377 </p> 378 ) : ( 379 <> 380 <div className="flex items-baseline gap-2"> 381 <span className="text-3xl font-extrabold tabular-nums text-ink"> 382 {v.redeployment.rate ?? '0'}% 383 </span> 384 <span className="text-[11px] text-faint"> 385 {v.redeployment.redeployed} of {v.redeployment.ended} kept 386 </span> 387 </div> 388 <div className="mt-2"> 389 <Bar 390 value={Number(v.redeployment.rate ?? 0)} 391 color={Number(v.redeployment.rate ?? 0) >= 50 ? 'var(--color-ok)' : 'var(--color-warn)'} 392 /> 393 </div> 394 </> 395 )} 396 <p className="mt-3 text-[10px] leading-relaxed text-faint"> 397 A contractor rolling off is already cleared, already known to the client and already proven on the 398 work, which makes them the cheapest placement available. Everyone is counted once however many 399 assignments they ended. 400 </p> 401 </Panel> 402 </div> 403 </div> 404 ) 405} 406