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 // THE MONEY LINE SAYS WHICH NUMBER IT IS SHOWING. 109 // 110 // It used to read "Margin 60.00/hr" against a bill minus pay subtraction, so a recruiter deciding whether a 111 // rate was worth taking was reading roughly three times the money the firm would actually keep. The spread 112 // is now named as a spread, the margin appears only when a wrap is known, and when one is not the line says 113 // so rather than leaving a silence somebody fills in with the wrong assumption. 114 const moneyLine = (o: ROffer | RPlacement) => { 115 const e = o.economics 116 if (e.fee) return `Fee ${money(e.fee)}` 117 if (!e.spread_per_hour) return '' 118 const spreadPct = e.spread_pct ? ` · ${e.spread_pct}%` : '' 119 const spread = `Spread ${money(e.spread_per_hour)}/hr${spreadPct}` 120 if (e.margin_per_hour) { 121 const marginPct = e.margin_pct ? ` · ${e.margin_pct}%` : '' 122 return `${spread} · Margin ${money(e.margin_per_hour)}/hr${marginPct}` 123 } 124 if (e.unburdened) return `${spread} · margin needs a wrap rate` 125 return spread 126 } 127 128 return ( 129 <div className="space-y-4"> 130 <ToolHeader name={recruitBrand.name} tagline="Assignment" accent={recruitBrand.accent}> 131 <Link 132 to="/recruit/requisitions" 133 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" 134 > 135 <ArrowLeft size={14} /> 136 Job orders 137 </Link> 138 </ToolHeader> 139 140 <Panel> 141 <div className="flex flex-wrap items-baseline justify-between gap-3"> 142 <h2 className="text-lg font-extrabold tracking-tight">{a.candidate_name}</h2> 143 <Pill text={a.stage} /> 144 </div> 145 </Panel> 146 147 <Panel title="Interviews" hint={`${a.interviews.length} round${a.interviews.length === 1 ? '' : 's'}`}> 148 <div className="mb-3 flex justify-end"> 149 <button 150 onClick={() => { 151 setRound(String(a.interviews.length + 1)) 152 setIvOpen(true) 153 }} 154 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" 155 > 156 <CalendarClock size={13} /> 157 Schedule a round 158 </button> 159 </div> 160 {a.interviews.length === 0 ? ( 161 <p className="py-4 text-center text-[11px] text-faint">No interviews scheduled.</p> 162 ) : ( 163 <ul className="divide-y divide-line/50"> 164 {a.interviews.map((v) => ( 165 <li key={v.id} className="flex flex-wrap items-center justify-between gap-3 py-2.5"> 166 <div className="min-w-0"> 167 <p className="flex items-center gap-2 text-sm font-semibold"> 168 Round {v.round} · {v.kind.replace(/_/g, ' ')} 169 <Pill text={v.outcome} /> 170 </p> 171 <p className="text-[11px] text-faint"> 172 {v.scheduled_at ? new Date(v.scheduled_at).toLocaleString() : 'No time set'} 173 {v.interviewer ? ` · ${v.interviewer}` : ''} 174 </p> 175 </div> 176 {v.outcome === 'scheduled' && ( 177 <div className="flex gap-1.5"> 178 {/* A concluded outcome needs a time, so completing one stamps the moment it was 179 recorded rather than asking for a date nobody has to hand. */} 180 {(['passed', 'failed', 'no_show'] as const).map((o) => ( 181 <button 182 key={o} 183 onClick={() => 184 updateIv.mutate({ 185 id: v.id, 186 patch: { 187 expected_updated_at: v.updated_at, 188 outcome: o, 189 completed_at: new Date().toISOString(), 190 }, 191 }) 192 } 193 disabled={updateIv.isPending} 194 className="rounded border border-line/60 px-2 py-0.5 text-[10px] font-semibold text-faint hover:text-ink disabled:opacity-50" 195 > 196 {o.replace(/_/g, ' ')} 197 </button> 198 ))} 199 </div> 200 )} 201 </li> 202 ))} 203 </ul> 204 )} 205 {updateIv.isError && <p className="mt-2 text-xs text-risk">{(updateIv.error as Error).message}</p>} 206 </Panel> 207 208 <Panel title="Offers" hint={`${a.offers.length}`}> 209 <div className="mb-3 flex justify-end"> 210 {/* Only one offer may be live at a time, so the button says why it is unavailable rather than 211 vanishing and leaving the reason to be guessed. */} 212 <button 213 onClick={() => setOfferOpen(true)} 214 disabled={a.offers.some((o) => o.status === 'extended')} 215 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" 216 title={ 217 a.offers.some((o) => o.status === 'extended') 218 ? 'An offer is already out to this candidate' 219 : undefined 220 } 221 > 222 <FileText size={13} /> 223 Extend an offer 224 </button> 225 </div> 226 {a.offers.length === 0 ? ( 227 <p className="py-4 text-center text-[11px] text-faint">No offers extended.</p> 228 ) : ( 229 <ul className="divide-y divide-line/50"> 230 {a.offers.map((o) => ( 231 <li key={o.id} className="flex flex-wrap items-center justify-between gap-3 py-2.5"> 232 <div className="min-w-0"> 233 <p className="flex items-center gap-2 text-sm font-semibold"> 234 {o.employment_type.replace(/_/g, ' ')} 235 <Pill text={o.status} /> 236 </p> 237 <p className="text-[11px] text-faint"> 238 {o.bill_rate ? `Bill ${money(o.bill_rate)}/hr · Pay ${money(o.pay_rate)}/hr · ` : ''} 239 {o.salary ? `Salary ${money(o.salary)} · ` : ''} 240 {moneyLine(o)} 241 </p> 242 {o.decline_reason && <p className="text-[11px] text-muted">{o.decline_reason}</p>} 243 </div> 244 <div className="flex flex-wrap gap-1.5"> 245 {/* Only the moves the database will accept are offered. */} 246 {o.next_statuses.map((s) => ( 247 <button 248 key={s} 249 onClick={() => 250 respond.mutate({ id: o.id, expected_status: o.status, status: s }) 251 } 252 disabled={respond.isPending} 253 className="rounded border border-line/60 px-2 py-0.5 text-[10px] font-semibold text-faint hover:text-ink disabled:opacity-50" 254 > 255 {s} 256 </button> 257 ))} 258 </div> 259 </li> 260 ))} 261 </ul> 262 )} 263 {(respond.isError || extend.isError) && ( 264 <p className="mt-2 text-xs text-risk"> 265 {((respond.error ?? extend.error) as Error)?.message} 266 </p> 267 )} 268 </Panel> 269 270 <Panel title="Placement" hint={a.placements.length ? `${a.placements.length}` : 'none'}> 271 <div className="mb-3 flex justify-end"> 272 <button 273 onClick={() => { 274 setEmpType(acceptedOffer?.employment_type ?? 'contract') 275 setBill(acceptedOffer?.bill_rate ?? '') 276 setPay(acceptedOffer?.pay_rate ?? '') 277 setSalary(acceptedOffer?.salary ?? '') 278 setPlaceOpen(true) 279 }} 280 disabled={!!livePlacement} 281 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" 282 title={livePlacement ? 'This candidate already has a live assignment' : undefined} 283 > 284 <Briefcase size={13} /> 285 Record a placement 286 </button> 287 </div> 288 {a.placements.length === 0 ? ( 289 <p className="py-4 text-center text-[11px] text-faint"> 290 No placement yet. Recording one moves this candidate to placed and takes a seat on the job order. 291 </p> 292 ) : ( 293 <ul className="divide-y divide-line/50"> 294 {a.placements.map((p) => ( 295 <li key={p.id} className="flex flex-wrap items-center justify-between gap-3 py-2.5"> 296 <div className="min-w-0"> 297 <p className="flex items-center gap-2 text-sm font-semibold"> 298 {p.requisition_title || 'Assignment'} 299 <Pill text={p.status} /> 300 {p.guarantee.breached && ( 301 <span 302 className="flex items-center gap-1 text-[10px] font-bold uppercase" 303 style={{ color: 'var(--color-risk)' }} 304 title="Ended inside the guarantee window, so the fee is at risk" 305 > 306 <ShieldAlert size={10} /> 307 guarantee breached 308 </span> 309 )} 310 </p> 311 <p className="text-[11px] text-faint"> 312 {p.start_date} 313 {p.end_date ? ` to ${p.end_date}` : ''} · {moneyLine(p)} 314 {p.guarantee.ends_on && !p.end_date 315 ? ` · guarantee to ${p.guarantee.ends_on}${ 316 p.guarantee.days_remaining !== undefined 317 ? p.guarantee.days_remaining >= 0 318 ? ` (${p.guarantee.days_remaining}d left)` 319 : ' (elapsed)' 320 : '' 321 }` 322 : ''} 323 </p> 324 </div> 325 {p.live && ( 326 <button 327 onClick={() => { 328 setEnding(p) 329 setEndStatus('completed') 330 setEndDate('') 331 setEndCode('') 332 }} 333 className="rounded-lg border border-line/70 px-3 py-1.5 text-xs font-semibold text-muted hover:text-ink" 334 > 335 End assignment 336 </button> 337 )} 338 </li> 339 ))} 340 </ul> 341 )} 342 {(place.isError || end.isError) && ( 343 <p className="mt-2 text-xs text-risk">{((place.error ?? end.error) as Error)?.message}</p> 344 )} 345 </Panel> 346 347 <ActivityFeed applicationId={a.application_id} title="Activity on this candidate" /> 348 349 <Modal open={ivOpen} onClose={() => setIvOpen(false)} title="Schedule an interview"> 350 <div className="space-y-3"> 351 <div className="grid grid-cols-2 gap-3"> 352 <label className="flex flex-col gap-1.5"> 353 <span className="text-[11px] font-bold uppercase tracking-wider text-muted">Round</span> 354 <input type="number" min="1" max="20" value={round} onChange={(e) => setRound(e.target.value)} className={inputCls} /> 355 </label> 356 <label className="flex flex-col gap-1.5"> 357 <span className="text-[11px] font-bold uppercase tracking-wider text-muted">Type</span> 358 <select value={kind} onChange={(e) => setKind(e.target.value)} className={inputCls}> 359 {['phone_screen', 'technical', 'client', 'panel', 'final'].map((k) => ( 360 <option key={k} value={k}> 361 {k.replace(/_/g, ' ')} 362 </option> 363 ))} 364 </select> 365 </label> 366 </div> 367 <label className="flex flex-col gap-1.5"> 368 <span className="text-[11px] font-bold uppercase tracking-wider text-muted">When</span> 369 <input type="datetime-local" value={when} onChange={(e) => setWhen(e.target.value)} className={inputCls} /> 370 </label> 371 <label className="flex flex-col gap-1.5"> 372 <span className="text-[11px] font-bold uppercase tracking-wider text-muted">Interviewer</span> 373 <input value={who} onChange={(e) => setWho(e.target.value)} className={inputCls} /> 374 </label> 375 {schedule.isError && <p className="text-xs text-risk">{(schedule.error as Error).message}</p>} 376 <div className="flex justify-end gap-2 pt-1"> 377 <button onClick={() => setIvOpen(false)} className="rounded-lg border border-line/70 px-3 py-2 text-sm font-semibold text-muted hover:text-ink"> 378 Cancel 379 </button> 380 <button 381 onClick={() => 382 schedule.mutate( 383 { 384 round: Number(round) || 1, 385 kind, 386 scheduled_at: when ? new Date(when).toISOString() : '', 387 interviewer: who, 388 }, 389 { onSuccess: () => setIvOpen(false) }, 390 ) 391 } 392 disabled={schedule.isPending} 393 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" 394 > 395 Schedule 396 </button> 397 </div> 398 </div> 399 </Modal> 400 401 <Modal open={offerOpen} onClose={() => setOfferOpen(false)} title="Extend an offer"> 402 <div className="space-y-3"> 403 <label className="flex flex-col gap-1.5"> 404 <span className="text-[11px] font-bold uppercase tracking-wider text-muted">Employment type</span> 405 <select value={empType} onChange={(e) => setEmpType(e.target.value)} className={inputCls}> 406 {['contract', 'contract_to_hire', 'direct_hire'].map((k) => ( 407 <option key={k} value={k}> 408 {k.replace(/_/g, ' ')} 409 </option> 410 ))} 411 </select> 412 </label> 413 {empType === 'direct_hire' ? ( 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">Salary</span> 417 <input value={salary} onChange={(e) => setSalary(e.target.value)} placeholder="150000.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">Fee</span> 421 {/* Stored as a fraction. Accepting 20 and storing it would turn a 150000 salary into a 422 three million dollar fee, so the field says so. */} 423 <input value={feePct} onChange={(e) => setFeePct(e.target.value)} placeholder="0.20 for 20%" className={inputCls} /> 424 </label> 425 </div> 426 ) : ( 427 <div className="grid grid-cols-2 gap-3"> 428 <label className="flex flex-col gap-1.5"> 429 <span className="text-[11px] font-bold uppercase tracking-wider text-muted">Bill rate</span> 430 <input value={bill} onChange={(e) => setBill(e.target.value)} placeholder="165.00" className={inputCls} /> 431 </label> 432 <label className="flex flex-col gap-1.5"> 433 <span className="text-[11px] font-bold uppercase tracking-wider text-muted">Pay rate</span> 434 <input value={pay} onChange={(e) => setPay(e.target.value)} placeholder="110.00" className={inputCls} /> 435 </label> 436 </div> 437 )} 438 {extend.isError && <p className="text-xs text-risk">{(extend.error as Error).message}</p>} 439 <div className="flex justify-end gap-2 pt-1"> 440 <button onClick={() => setOfferOpen(false)} className="rounded-lg border border-line/70 px-3 py-2 text-sm font-semibold text-muted hover:text-ink"> 441 Cancel 442 </button> 443 <button 444 onClick={() => 445 extend.mutate( 446 { employment_type: empType, bill_rate: bill, pay_rate: pay, salary, fee_pct: feePct }, 447 { onSuccess: () => setOfferOpen(false) }, 448 ) 449 } 450 disabled={extend.isPending} 451 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" 452 > 453 Extend 454 </button> 455 </div> 456 </div> 457 </Modal> 458 459 <Modal open={placeOpen} onClose={() => setPlaceOpen(false)} title="Record a placement"> 460 <div className="space-y-3"> 461 <p className="rounded-lg border border-line/60 bg-navy-950/40 p-3 text-[11px] text-muted"> 462 This moves {a.candidate_name} to placed and takes a seat on the job order. If the job order is 463 already full it will be refused. 464 </p> 465 <div className="grid grid-cols-2 gap-3"> 466 <label className="flex flex-col gap-1.5"> 467 <span className="text-[11px] font-bold uppercase tracking-wider text-muted">Start date</span> 468 <input type="date" value={startDate} onChange={(e) => setStartDate(e.target.value)} className={inputCls} /> 469 </label> 470 <label className="flex flex-col gap-1.5"> 471 <span className="text-[11px] font-bold uppercase tracking-wider text-muted">Guarantee days</span> 472 <input type="number" min="0" value={guarantee} onChange={(e) => setGuarantee(e.target.value)} className={inputCls} /> 473 </label> 474 </div> 475 {empType === 'direct_hire' ? ( 476 <label className="flex flex-col gap-1.5"> 477 <span className="text-[11px] font-bold uppercase tracking-wider text-muted">Salary</span> 478 <input value={salary} onChange={(e) => setSalary(e.target.value)} className={inputCls} /> 479 </label> 480 ) : ( 481 <div className="grid grid-cols-2 gap-3"> 482 <label className="flex flex-col gap-1.5"> 483 <span className="text-[11px] font-bold uppercase tracking-wider text-muted">Bill rate</span> 484 <input value={bill} onChange={(e) => setBill(e.target.value)} className={inputCls} /> 485 </label> 486 <label className="flex flex-col gap-1.5"> 487 <span className="text-[11px] font-bold uppercase tracking-wider text-muted">Pay rate</span> 488 <input value={pay} onChange={(e) => setPay(e.target.value)} className={inputCls} /> 489 </label> 490 </div> 491 )} 492 {place.isError && <p className="text-xs text-risk">{(place.error as Error).message}</p>} 493 <div className="flex justify-end gap-2 pt-1"> 494 <button onClick={() => setPlaceOpen(false)} className="rounded-lg border border-line/70 px-3 py-2 text-sm font-semibold text-muted hover:text-ink"> 495 Cancel 496 </button> 497 <button 498 onClick={() => 499 place.mutate( 500 { 501 offer_id: acceptedOffer?.id ?? '', 502 employment_type: empType, 503 start_date: startDate, 504 bill_rate: bill, 505 pay_rate: pay, 506 salary, 507 guarantee_days: Number(guarantee) || 0, 508 }, 509 { onSuccess: () => setPlaceOpen(false) }, 510 ) 511 } 512 disabled={!startDate || place.isPending} 513 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" 514 > 515 Record 516 </button> 517 </div> 518 </div> 519 </Modal> 520 521 <Modal open={!!ending} onClose={() => setEnding(null)} title="End this assignment"> 522 <div className="space-y-3"> 523 <div className="flex flex-wrap gap-2"> 524 {(['completed', 'terminated', 'fell_off'] as const).map((s) => ( 525 <button 526 key={s} 527 onClick={() => setEndStatus(s)} 528 className={`rounded-full px-3 py-1 text-xs font-semibold ${ 529 endStatus === s 530 ? 'bg-recruit/25 text-recruit shadow-[inset_0_0_0_1px_var(--color-recruit)]' 531 : 'border border-line/60 bg-navy-900 text-faint hover:text-muted' 532 }`} 533 > 534 {s.replace(/_/g, ' ')} 535 </button> 536 ))} 537 </div> 538 {/* A completed assignment never breaches the guarantee, however short. Ending it early was the 539 client's call, not a failure to deliver. */} 540 {endStatus !== 'completed' && ending?.guarantee.ends_on && ( 541 <p className="rounded-lg border border-warn/40 bg-navy-950/40 p-3 text-[11px] text-muted"> 542 The guarantee runs to {ending.guarantee.ends_on}. Ending this way inside that window puts the 543 fee at risk. 544 </p> 545 )} 546 <label className="flex flex-col gap-1.5"> 547 <span className="text-[11px] font-bold uppercase tracking-wider text-muted">End date</span> 548 <input type="date" value={endDate} onChange={(e) => setEndDate(e.target.value)} className={inputCls} /> 549 </label> 550 <label className="flex flex-col gap-1.5"> 551 <span className="text-[11px] font-bold uppercase tracking-wider text-muted"> 552 Move the candidate out of the pipeline (optional) 553 </span> 554 <select value={endCode} onChange={(e) => setEndCode(e.target.value)} className={inputCls}> 555 <option value="">Leave them at placed</option> 556 {(disp.data?.dispositions ?? []).map((dd) => ( 557 <option key={dd.code} value={dd.code}> 558 {dd.label} 559 </option> 560 ))} 561 </select> 562 </label> 563 {end.isError && <p className="text-xs text-risk">{(end.error as Error).message}</p>} 564 <div className="flex justify-end gap-2 pt-1"> 565 <button onClick={() => setEnding(null)} className="rounded-lg border border-line/70 px-3 py-2 text-sm font-semibold text-muted hover:text-ink"> 566 Cancel 567 </button> 568 <button 569 onClick={() => 570 ending && 571 end.mutate( 572 { 573 id: ending.id, 574 patch: { status: endStatus, end_date: endDate, disposition_code: endCode }, 575 }, 576 { onSuccess: () => setEnding(null) }, 577 ) 578 } 579 disabled={!endDate || end.isPending} 580 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" 581 > 582 <CheckCircle2 size={13} className="mr-1 inline" /> 583 End 584 </button> 585 </div> 586 </div> 587 </Modal> 588 </div> 589 ) 590} 591