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

1import { useState } from 'react' 2import { ArrowLeft, Briefcase, CalendarClock, CheckCircle2, FileText, ShieldAlert } from 'lucide-react' 3import { Link, useParams } from 'react-router-dom' 4 5import { ToolHeader } from '../../components/ToolHeader' 6import { Modal, Panel } from '../../components/ui' 7import type { ROffer, RPlacement } from '../../lib/types' 8import { recruitBrand } from './brand' 9import { 10 useAssignment, 11 useCreatePlacement, 12 useEndPlacement, 13 useExtendOffer, 14 useRespondToOffer, 15 useScheduleInterview, 16 useUpdateInterview, 17} from './assignmentQueries' 18import { useDispositions } from './pipelineQueries' 19import { ActivityFeed } from './ActivityFeed' 20 21const inputCls = 22 'w-full rounded-lg border border-line/70 bg-navy-900 px-3 py-2 text-sm text-ink outline-none focus:border-recruit' 23 24const money = (v?: string) => { 25 if (!v) return '' 26 const [w, f = ''] = v.split('.') 27 const t = f.replace(/0+$/, '') 28 return '$' + w + '.' + (t.length <= 2 ? t.padEnd(2, '0') : t) 29} 30 31function statusPill(status: string): string { 32 switch (status) { 33 case 'accepted': 34 case 'active': 35 return 'var(--color-ok)' 36 case 'extended': 37 case 'pending_start': 38 return 'var(--color-gold)' 39 case 'declined': 40 case 'rescinded': 41 case 'fell_off': 42 case 'terminated': 43 return 'var(--color-risk)' 44 default: 45 return 'var(--color-muted)' 46 } 47} 48 49function Pill({ text }: { text: string }) { 50 return ( 51 <span 52 className="rounded-full px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide" 53 style={{ 54 color: statusPill(text), 55 background: `color-mix(in srgb, ${statusPill(text)} 16%, transparent)`, 56 }} 57 > 58 {text.replace(/_/g, ' ')} 59 </span> 60 ) 61} 62 63export function Assignment() { 64 const { appId } = useParams() 65 const q = useAssignment(appId ?? null) 66 const disp = useDispositions() 67 const schedule = useScheduleInterview(appId ?? '') 68 const updateIv = useUpdateInterview(appId ?? '') 69 const extend = useExtendOffer(appId ?? '') 70 const respond = useRespondToOffer(appId ?? '') 71 const place = useCreatePlacement(appId ?? '') 72 const end = useEndPlacement(appId ?? '') 73 74 const [ivOpen, setIvOpen] = useState(false) 75 const [round, setRound] = useState('1') 76 const [kind, setKind] = useState('client') 77 const [when, setWhen] = useState('') 78 const [who, setWho] = useState('') 79 80 const [offerOpen, setOfferOpen] = useState(false) 81 const [empType, setEmpType] = useState('contract') 82 const [bill, setBill] = useState('') 83 const [pay, setPay] = useState('') 84 const [salary, setSalary] = useState('') 85 const [feePct, setFeePct] = useState('') 86 87 const [placeOpen, setPlaceOpen] = useState(false) 88 const [startDate, setStartDate] = useState('') 89 const [guarantee, setGuarantee] = useState('90') 90 91 const [ending, setEnding] = useState<RPlacement | null>(null) 92 const [endStatus, setEndStatus] = useState('completed') 93 const [endDate, setEndDate] = useState('') 94 const [endCode, setEndCode] = useState('') 95 96 if (q.isLoading) return <Panel className="grid place-items-center py-24 text-muted">Loading assignment…</Panel> 97 if (q.isError || !q.data) { 98 return ( 99 <Panel className="grid place-items-center py-24 text-warn"> 100 Could not load this assignment. {(q.error as Error)?.message} 101 </Panel> 102 ) 103 } 104 const a = q.data 105 const livePlacement = a.placements.find((p) => p.live) 106 const acceptedOffer = a.offers.find((o) => o.status === 'accepted') 107 108 const marginLine = (o: ROffer | RPlacement) => { 109 if (o.margin.fee) return `Fee ${money(o.margin.fee)}` 110 if (!o.margin.gross_per_hour) return '' 111 const pct = o.margin.margin_pct ? ` · ${o.margin.margin_pct}%` : '' 112 return `Margin ${money(o.margin.gross_per_hour)}/hr${pct}` 113 } 114 115 return ( 116 <div className="space-y-4"> 117 <ToolHeader name={recruitBrand.name} tagline="Assignment" accent={recruitBrand.accent}> 118 <Link 119 to="/recruit/requisitions" 120 className="flex items-center gap-2 rounded-lg border border-line/70 px-3 py-2 text-sm font-semibold text-muted hover:text-ink" 121 > 122 <ArrowLeft size={14} /> 123 Job orders 124 </Link> 125 </ToolHeader> 126 127 <Panel> 128 <div className="flex flex-wrap items-baseline justify-between gap-3"> 129 <h2 className="text-lg font-extrabold tracking-tight">{a.candidate_name}</h2> 130 <Pill text={a.stage} /> 131 </div> 132 </Panel> 133 134 <Panel title="Interviews" hint={`${a.interviews.length} round${a.interviews.length === 1 ? '' : 's'}`}> 135 <div className="mb-3 flex justify-end"> 136 <button 137 onClick={() => { 138 setRound(String(a.interviews.length + 1)) 139 setIvOpen(true) 140 }} 141 className="flex items-center gap-2 rounded-lg border border-line/70 px-3 py-1.5 text-xs font-semibold text-muted hover:text-ink" 142 > 143 <CalendarClock size={13} /> 144 Schedule a round 145 </button> 146 </div> 147 {a.interviews.length === 0 ? ( 148 <p className="py-4 text-center text-[11px] text-faint">No interviews scheduled.</p> 149 ) : ( 150 <ul className="divide-y divide-line/50"> 151 {a.interviews.map((v) => ( 152 <li key={v.id} className="flex flex-wrap items-center justify-between gap-3 py-2.5"> 153 <div className="min-w-0"> 154 <p className="flex items-center gap-2 text-sm font-semibold"> 155 Round {v.round} · {v.kind.replace(/_/g, ' ')} 156 <Pill text={v.outcome} /> 157 </p> 158 <p className="text-[11px] text-faint"> 159 {v.scheduled_at ? new Date(v.scheduled_at).toLocaleString() : 'No time set'} 160 {v.interviewer ? ` · ${v.interviewer}` : ''} 161 </p> 162 </div> 163 {v.outcome === 'scheduled' && ( 164 <div className="flex gap-1.5"> 165 {/* A concluded outcome needs a time, so completing one stamps the moment it was 166 recorded rather than asking for a date nobody has to hand. */} 167 {(['passed', 'failed', 'no_show'] as const).map((o) => ( 168 <button 169 key={o} 170 onClick={() => 171 updateIv.mutate({ 172 id: v.id, 173 patch: { 174 expected_updated_at: v.updated_at, 175 outcome: o, 176 completed_at: new Date().toISOString(), 177 }, 178 }) 179 } 180 disabled={updateIv.isPending} 181 className="rounded border border-line/60 px-2 py-0.5 text-[10px] font-semibold text-faint hover:text-ink disabled:opacity-50" 182 > 183 {o.replace(/_/g, ' ')} 184 </button> 185 ))} 186 </div> 187 )} 188 </li> 189 ))} 190 </ul> 191 )} 192 {updateIv.isError && <p className="mt-2 text-xs text-risk">{(updateIv.error as Error).message}</p>} 193 </Panel> 194 195 <Panel title="Offers" hint={`${a.offers.length}`}> 196 <div className="mb-3 flex justify-end"> 197 {/* Only one offer may be live at a time, so the button says why it is unavailable rather than 198 vanishing and leaving the reason to be guessed. */} 199 <button 200 onClick={() => setOfferOpen(true)} 201 disabled={a.offers.some((o) => o.status === 'extended')} 202 className="flex items-center gap-2 rounded-lg border border-line/70 px-3 py-1.5 text-xs font-semibold text-muted hover:text-ink disabled:cursor-not-allowed disabled:opacity-40" 203 title={ 204 a.offers.some((o) => o.status === 'extended') 205 ? 'An offer is already out to this candidate' 206 : undefined 207 } 208 > 209 <FileText size={13} /> 210 Extend an offer 211 </button> 212 </div> 213 {a.offers.length === 0 ? ( 214 <p className="py-4 text-center text-[11px] text-faint">No offers extended.</p> 215 ) : ( 216 <ul className="divide-y divide-line/50"> 217 {a.offers.map((o) => ( 218 <li key={o.id} className="flex flex-wrap items-center justify-between gap-3 py-2.5"> 219 <div className="min-w-0"> 220 <p className="flex items-center gap-2 text-sm font-semibold"> 221 {o.employment_type.replace(/_/g, ' ')} 222 <Pill text={o.status} /> 223 </p> 224 <p className="text-[11px] text-faint"> 225 {o.bill_rate ? `Bill ${money(o.bill_rate)}/hr · Pay ${money(o.pay_rate)}/hr · ` : ''} 226 {o.salary ? `Salary ${money(o.salary)} · ` : ''} 227 {marginLine(o)} 228 </p> 229 {o.decline_reason && <p className="text-[11px] text-muted">{o.decline_reason}</p>} 230 </div> 231 <div className="flex flex-wrap gap-1.5"> 232 {/* Only the moves the database will accept are offered. */} 233 {o.next_statuses.map((s) => ( 234 <button 235 key={s} 236 onClick={() => 237 respond.mutate({ id: o.id, expected_status: o.status, status: s }) 238 } 239 disabled={respond.isPending} 240 className="rounded border border-line/60 px-2 py-0.5 text-[10px] font-semibold text-faint hover:text-ink disabled:opacity-50" 241 > 242 {s} 243 </button> 244 ))} 245 </div> 246 </li> 247 ))} 248 </ul> 249 )} 250 {(respond.isError || extend.isError) && ( 251 <p className="mt-2 text-xs text-risk"> 252 {((respond.error ?? extend.error) as Error)?.message} 253 </p> 254 )} 255 </Panel> 256 257 <Panel title="Placement" hint={a.placements.length ? `${a.placements.length}` : 'none'}> 258 <div className="mb-3 flex justify-end"> 259 <button 260 onClick={() => { 261 setEmpType(acceptedOffer?.employment_type ?? 'contract') 262 setBill(acceptedOffer?.bill_rate ?? '') 263 setPay(acceptedOffer?.pay_rate ?? '') 264 setSalary(acceptedOffer?.salary ?? '') 265 setPlaceOpen(true) 266 }} 267 disabled={!!livePlacement} 268 className="flex items-center gap-2 rounded-lg bg-gradient-to-r from-blue to-navy-700 px-4 py-2 text-xs font-bold text-white hover:brightness-110 disabled:cursor-not-allowed disabled:opacity-40" 269 title={livePlacement ? 'This candidate already has a live assignment' : undefined} 270 > 271 <Briefcase size={13} /> 272 Record a placement 273 </button> 274 </div> 275 {a.placements.length === 0 ? ( 276 <p className="py-4 text-center text-[11px] text-faint"> 277 No placement yet. Recording one moves this candidate to placed and takes a seat on the job order. 278 </p> 279 ) : ( 280 <ul className="divide-y divide-line/50"> 281 {a.placements.map((p) => ( 282 <li key={p.id} className="flex flex-wrap items-center justify-between gap-3 py-2.5"> 283 <div className="min-w-0"> 284 <p className="flex items-center gap-2 text-sm font-semibold"> 285 {p.requisition_title || 'Assignment'} 286 <Pill text={p.status} /> 287 {p.guarantee.breached && ( 288 <span 289 className="flex items-center gap-1 text-[10px] font-bold uppercase" 290 style={{ color: 'var(--color-risk)' }} 291 title="Ended inside the guarantee window, so the fee is at risk" 292 > 293 <ShieldAlert size={10} /> 294 guarantee breached 295 </span> 296 )} 297 </p> 298 <p className="text-[11px] text-faint"> 299 {p.start_date} 300 {p.end_date ? ` to ${p.end_date}` : ''} · {marginLine(p)} 301 {p.guarantee.ends_on && !p.end_date 302 ? ` · guarantee to ${p.guarantee.ends_on}${ 303 p.guarantee.days_remaining !== undefined 304 ? p.guarantee.days_remaining >= 0 305 ? ` (${p.guarantee.days_remaining}d left)` 306 : ' (elapsed)' 307 : '' 308 }` 309 : ''} 310 </p> 311 </div> 312 {p.live && ( 313 <button 314 onClick={() => { 315 setEnding(p) 316 setEndStatus('completed') 317 setEndDate('') 318 setEndCode('') 319 }} 320 className="rounded-lg border border-line/70 px-3 py-1.5 text-xs font-semibold text-muted hover:text-ink" 321 > 322 End assignment 323 </button> 324 )} 325 </li> 326 ))} 327 </ul> 328 )} 329 {(place.isError || end.isError) && ( 330 <p className="mt-2 text-xs text-risk">{((place.error ?? end.error) as Error)?.message}</p> 331 )} 332 </Panel> 333 334 <ActivityFeed applicationId={a.application_id} title="Activity on this candidate" /> 335 336 <Modal open={ivOpen} onClose={() => setIvOpen(false)} title="Schedule an interview"> 337 <div className="space-y-3"> 338 <div className="grid grid-cols-2 gap-3"> 339 <label className="flex flex-col gap-1.5"> 340 <span className="text-[11px] font-bold uppercase tracking-wider text-muted">Round</span> 341 <input type="number" min="1" max="20" value={round} onChange={(e) => setRound(e.target.value)} className={inputCls} /> 342 </label> 343 <label className="flex flex-col gap-1.5"> 344 <span className="text-[11px] font-bold uppercase tracking-wider text-muted">Type</span> 345 <select value={kind} onChange={(e) => setKind(e.target.value)} className={inputCls}> 346 {['phone_screen', 'technical', 'client', 'panel', 'final'].map((k) => ( 347 <option key={k} value={k}> 348 {k.replace(/_/g, ' ')} 349 </option> 350 ))} 351 </select> 352 </label> 353 </div> 354 <label className="flex flex-col gap-1.5"> 355 <span className="text-[11px] font-bold uppercase tracking-wider text-muted">When</span> 356 <input type="datetime-local" value={when} onChange={(e) => setWhen(e.target.value)} className={inputCls} /> 357 </label> 358 <label className="flex flex-col gap-1.5"> 359 <span className="text-[11px] font-bold uppercase tracking-wider text-muted">Interviewer</span> 360 <input value={who} onChange={(e) => setWho(e.target.value)} className={inputCls} /> 361 </label> 362 {schedule.isError && <p className="text-xs text-risk">{(schedule.error as Error).message}</p>} 363 <div className="flex justify-end gap-2 pt-1"> 364 <button onClick={() => setIvOpen(false)} className="rounded-lg border border-line/70 px-3 py-2 text-sm font-semibold text-muted hover:text-ink"> 365 Cancel 366 </button> 367 <button 368 onClick={() => 369 schedule.mutate( 370 { 371 round: Number(round) || 1, 372 kind, 373 scheduled_at: when ? new Date(when).toISOString() : '', 374 interviewer: who, 375 }, 376 { onSuccess: () => setIvOpen(false) }, 377 ) 378 } 379 disabled={schedule.isPending} 380 className="rounded-lg bg-gradient-to-r from-blue to-navy-700 px-4 py-2 text-sm font-bold text-white hover:brightness-110 disabled:opacity-50" 381 > 382 Schedule 383 </button> 384 </div> 385 </div> 386 </Modal> 387 388 <Modal open={offerOpen} onClose={() => setOfferOpen(false)} title="Extend an offer"> 389 <div className="space-y-3"> 390 <label className="flex flex-col gap-1.5"> 391 <span className="text-[11px] font-bold uppercase tracking-wider text-muted">Employment type</span> 392 <select value={empType} onChange={(e) => setEmpType(e.target.value)} className={inputCls}> 393 {['contract', 'contract_to_hire', 'direct_hire'].map((k) => ( 394 <option key={k} value={k}> 395 {k.replace(/_/g, ' ')} 396 </option> 397 ))} 398 </select> 399 </label> 400 {empType === 'direct_hire' ? ( 401 <div className="grid grid-cols-2 gap-3"> 402 <label className="flex flex-col gap-1.5"> 403 <span className="text-[11px] font-bold uppercase tracking-wider text-muted">Salary</span> 404 <input value={salary} onChange={(e) => setSalary(e.target.value)} placeholder="150000.00" className={inputCls} /> 405 </label> 406 <label className="flex flex-col gap-1.5"> 407 <span className="text-[11px] font-bold uppercase tracking-wider text-muted">Fee</span> 408 {/* Stored as a fraction. Accepting 20 and storing it would turn a 150000 salary into a 409 three million dollar fee, so the field says so. */} 410 <input value={feePct} onChange={(e) => setFeePct(e.target.value)} placeholder="0.20 for 20%" className={inputCls} /> 411 </label> 412 </div> 413 ) : ( 414 <div className="grid grid-cols-2 gap-3"> 415 <label className="flex flex-col gap-1.5"> 416 <span className="text-[11px] font-bold uppercase tracking-wider text-muted">Bill rate</span> 417 <input value={bill} onChange={(e) => setBill(e.target.value)} placeholder="165.00" className={inputCls} /> 418 </label> 419 <label className="flex flex-col gap-1.5"> 420 <span className="text-[11px] font-bold uppercase tracking-wider text-muted">Pay rate</span> 421 <input value={pay} onChange={(e) => setPay(e.target.value)} placeholder="110.00" className={inputCls} /> 422 </label> 423 </div> 424 )} 425 {extend.isError && <p className="text-xs text-risk">{(extend.error as Error).message}</p>} 426 <div className="flex justify-end gap-2 pt-1"> 427 <button onClick={() => setOfferOpen(false)} className="rounded-lg border border-line/70 px-3 py-2 text-sm font-semibold text-muted hover:text-ink"> 428 Cancel 429 </button> 430 <button 431 onClick={() => 432 extend.mutate( 433 { employment_type: empType, bill_rate: bill, pay_rate: pay, salary, fee_pct: feePct }, 434 { onSuccess: () => setOfferOpen(false) }, 435 ) 436 } 437 disabled={extend.isPending} 438 className="rounded-lg bg-gradient-to-r from-blue to-navy-700 px-4 py-2 text-sm font-bold text-white hover:brightness-110 disabled:opacity-50" 439 > 440 Extend 441 </button> 442 </div> 443 </div> 444 </Modal> 445 446 <Modal open={placeOpen} onClose={() => setPlaceOpen(false)} title="Record a placement"> 447 <div className="space-y-3"> 448 <p className="rounded-lg border border-line/60 bg-navy-950/40 p-3 text-[11px] text-muted"> 449 This moves {a.candidate_name} to placed and takes a seat on the job order. If the job order is 450 already full it will be refused. 451 </p> 452 <div className="grid grid-cols-2 gap-3"> 453 <label className="flex flex-col gap-1.5"> 454 <span className="text-[11px] font-bold uppercase tracking-wider text-muted">Start date</span> 455 <input type="date" value={startDate} onChange={(e) => setStartDate(e.target.value)} className={inputCls} /> 456 </label> 457 <label className="flex flex-col gap-1.5"> 458 <span className="text-[11px] font-bold uppercase tracking-wider text-muted">Guarantee days</span> 459 <input type="number" min="0" value={guarantee} onChange={(e) => setGuarantee(e.target.value)} className={inputCls} /> 460 </label> 461 </div> 462 {empType === 'direct_hire' ? ( 463 <label className="flex flex-col gap-1.5"> 464 <span className="text-[11px] font-bold uppercase tracking-wider text-muted">Salary</span> 465 <input value={salary} onChange={(e) => setSalary(e.target.value)} className={inputCls} /> 466 </label> 467 ) : ( 468 <div className="grid grid-cols-2 gap-3"> 469 <label className="flex flex-col gap-1.5"> 470 <span className="text-[11px] font-bold uppercase tracking-wider text-muted">Bill rate</span> 471 <input value={bill} onChange={(e) => setBill(e.target.value)} className={inputCls} /> 472 </label> 473 <label className="flex flex-col gap-1.5"> 474 <span className="text-[11px] font-bold uppercase tracking-wider text-muted">Pay rate</span> 475 <input value={pay} onChange={(e) => setPay(e.target.value)} className={inputCls} /> 476 </label> 477 </div> 478 )} 479 {place.isError && <p className="text-xs text-risk">{(place.error as Error).message}</p>} 480 <div className="flex justify-end gap-2 pt-1"> 481 <button onClick={() => setPlaceOpen(false)} className="rounded-lg border border-line/70 px-3 py-2 text-sm font-semibold text-muted hover:text-ink"> 482 Cancel 483 </button> 484 <button 485 onClick={() => 486 place.mutate( 487 { 488 offer_id: acceptedOffer?.id ?? '', 489 employment_type: empType, 490 start_date: startDate, 491 bill_rate: bill, 492 pay_rate: pay, 493 salary, 494 guarantee_days: Number(guarantee) || 0, 495 }, 496 { onSuccess: () => setPlaceOpen(false) }, 497 ) 498 } 499 disabled={!startDate || place.isPending} 500 className="rounded-lg bg-gradient-to-r from-blue to-navy-700 px-4 py-2 text-sm font-bold text-white hover:brightness-110 disabled:opacity-50" 501 > 502 Record 503 </button> 504 </div> 505 </div> 506 </Modal> 507 508 <Modal open={!!ending} onClose={() => setEnding(null)} title="End this assignment"> 509 <div className="space-y-3"> 510 <div className="flex flex-wrap gap-2"> 511 {(['completed', 'terminated', 'fell_off'] as const).map((s) => ( 512 <button 513 key={s} 514 onClick={() => setEndStatus(s)} 515 className={`rounded-full px-3 py-1 text-xs font-semibold ${ 516 endStatus === s 517 ? 'bg-recruit/25 text-recruit shadow-[inset_0_0_0_1px_var(--color-recruit)]' 518 : 'border border-line/60 bg-navy-900 text-faint hover:text-muted' 519 }`} 520 > 521 {s.replace(/_/g, ' ')} 522 </button> 523 ))} 524 </div> 525 {/* A completed assignment never breaches the guarantee, however short. Ending it early was the 526 client's call, not a failure to deliver. */} 527 {endStatus !== 'completed' && ending?.guarantee.ends_on && ( 528 <p className="rounded-lg border border-warn/40 bg-navy-950/40 p-3 text-[11px] text-muted"> 529 The guarantee runs to {ending.guarantee.ends_on}. Ending this way inside that window puts the 530 fee at risk. 531 </p> 532 )} 533 <label className="flex flex-col gap-1.5"> 534 <span className="text-[11px] font-bold uppercase tracking-wider text-muted">End date</span> 535 <input type="date" value={endDate} onChange={(e) => setEndDate(e.target.value)} className={inputCls} /> 536 </label> 537 <label className="flex flex-col gap-1.5"> 538 <span className="text-[11px] font-bold uppercase tracking-wider text-muted"> 539 Move the candidate out of the pipeline (optional) 540 </span> 541 <select value={endCode} onChange={(e) => setEndCode(e.target.value)} className={inputCls}> 542 <option value="">Leave them at placed</option> 543 {(disp.data?.dispositions ?? []).map((dd) => ( 544 <option key={dd.code} value={dd.code}> 545 {dd.label} 546 </option> 547 ))} 548 </select> 549 </label> 550 {end.isError && <p className="text-xs text-risk">{(end.error as Error).message}</p>} 551 <div className="flex justify-end gap-2 pt-1"> 552 <button onClick={() => setEnding(null)} className="rounded-lg border border-line/70 px-3 py-2 text-sm font-semibold text-muted hover:text-ink"> 553 Cancel 554 </button> 555 <button 556 onClick={() => 557 ending && 558 end.mutate( 559 { 560 id: ending.id, 561 patch: { status: endStatus, end_date: endDate, disposition_code: endCode }, 562 }, 563 { onSuccess: () => setEnding(null) }, 564 ) 565 } 566 disabled={!endDate || end.isPending} 567 className="rounded-lg bg-gradient-to-r from-blue to-navy-700 px-4 py-2 text-sm font-bold text-white hover:brightness-110 disabled:opacity-50" 568 > 569 <CheckCircle2 size={13} className="mr-1 inline" /> 570 End 571 </button> 572 </div> 573 </div> 574 </Modal> 575 </div> 576 ) 577} 578