Janady13/missionmatch / frontend/src/tools/slatematch/BuildRequirements.tsx

1import { useState } from 'react' 2import { AlertTriangle, ArrowLeft, ShieldCheck, Sparkles } from 'lucide-react' 3import { Link, useParams } from 'react-router-dom' 4 5import { ToolHeader } from '../../components/ToolHeader' 6import { Modal, Panel } from '../../components/ui' 7import { slateBrand } from './brand' 8import { inputCls } from './captureConstants' 9import { useTrackedOpportunity } from './captureQueries' 10import { CLEARANCE_LEVELS, POLYGRAPHS } from './scopeConstants' 11import type { RequirementDraft } from './scopeApi' 12import { useApproveDraft, useDrafts, useGenerateDrafts, usePatchDraft, useRejectDraft } from './scopeQueries' 13 14// SECTION 6 SCREEN 5, BUILD REQUIREMENTS: generate drafts from accepted staffing scope, show missing required 15// fields, allow manual completion, require named approval, promote, preserve lineage. 16// 17// THIS IS THE ONLY DOOR TO THE SCORING ENGINE, and the screen is written to feel like one. Promotion is a 18// separate, deliberate act with a confirmation that states what is about to become real and who is about to be 19// recorded as having said so. The API enforces it at a higher capability than everything else on the review 20// path, so the UI is the second line and not the only one. 21// 22// MISSING FIELDS ARE SHOWN AS GAPS, NEVER PREFILLED. A draft whose clearance the document never stated arrives 23// as unknown, and unknown is rendered as a blocker rather than as a value. A plausible default in that box 24// would produce a requirement that no candidate can fail on clearance, which silently removes the heaviest 25// component of the score. 26 27function missingFields(d: RequirementDraft): string[] { 28 const missing: string[] = [] 29 if (!d.labor_category.trim()) missing.push('labor category') 30 if (!d.clearance_level || d.clearance_level === 'unknown') missing.push('clearance level') 31 if (d.quantity < 1) missing.push('quantity') 32 return missing 33} 34 35export function BuildRequirements() { 36 const { id = '' } = useParams() 37 const opp = useTrackedOpportunity(id) 38 const drafts = useDrafts(id) 39 const generate = useGenerateDrafts(id) 40 const patch = usePatchDraft(id) 41 const approve = useApproveDraft(id) 42 const reject = useRejectDraft(id) 43 44 const [editing, setEditing] = useState<RequirementDraft | null>(null) 45 const [form, setForm] = useState({ labor_category: '', quantity: 1, clearance_level: 'unknown', polygraph: 'none', minimum_years_experience: 0, work_location: '' }) 46 const [confirming, setConfirming] = useState<RequirementDraft | null>(null) 47 const [rejecting, setRejecting] = useState<RequirementDraft | null>(null) 48 const [rejectReason, setRejectReason] = useState('') 49 const [note, setNote] = useState('') 50 const [err, setErr] = useState('') 51 52 const run = async (fn: () => Promise<unknown>) => { 53 setErr('') 54 try { 55 await fn() 56 } catch (e) { 57 setErr(e instanceof Error ? e.message : 'the action failed') 58 } 59 } 60 61 const all = drafts.data ?? [] 62 const pending = all.filter((d) => d.review_status === 'draft' || d.review_status === 'in_review') 63 const decided = all.filter((d) => d.review_status === 'approved' || d.review_status === 'rejected') 64 65 return ( 66 <div className="space-y-6"> 67 <ToolHeader name={slateBrand.name} tagline="Build requirements" accent={slateBrand.accent} /> 68 69 {/* Which opportunity this is. Every one of these screens is scoped to a single pursuit, and a 70 reviewer arriving from a link needs to know which one before they start accepting things. */} 71 {opp.data?.title && <p className="text-sm font-semibold text-ink">{opp.data.title}</p>} 72 73 <div className="flex flex-wrap items-center justify-between gap-3"> 74 <Link to={`/slate/capture/${id}/scope`} className="inline-flex items-center gap-1.5 text-sm font-semibold text-muted hover:text-ink"> 75 <ArrowLeft size={14} /> Back to scope review 76 </Link> 77 <button 78 type="button" 79 disabled={generate.isPending} 80 onClick={() => 81 void run(async () => { 82 const r = await generate.mutateAsync() 83 setNote( 84 r.created === 0 && r.skipped_existing === 0 85 ? 'No accepted staffing scope to derive from yet. Accept staffing items on the review screen first.' 86 : `Generated ${r.created} draft${r.created === 1 ? '' : 's'}, skipped ${r.skipped_existing} that already existed.`, 87 ) 88 }) 89 } 90 className="inline-flex items-center gap-1.5 rounded-md bg-navy px-3 py-1.5 text-sm font-semibold text-white hover:opacity-90 disabled:opacity-40" 91 > 92 <Sparkles size={14} /> Generate from accepted scope 93 </button> 94 </div> 95 96 {note && <p className="rounded bg-sky-50 p-3 text-sm text-sky-900">{note}</p>} 97 {err && <p className="rounded bg-rose-50 p-3 text-sm font-semibold text-rose-800">{err}</p>} 98 99 <Panel title={`Awaiting a decision, ${pending.length}`}> 100 {drafts.isLoading && <p className="text-sm text-faint">Loading drafts.</p>} 101 {!drafts.isLoading && pending.length === 0 && ( 102 <p className="text-sm text-faint"> 103 No drafts waiting. Generation is idempotent, so pressing it again after accepting more scope only adds 104 what is new. 105 </p> 106 )} 107 <ul className="space-y-3"> 108 {pending.map((d) => { 109 const gaps = missingFields(d) 110 return ( 111 <li key={d.id} className="rounded-md border border-slate-200 p-3"> 112 <div className="flex flex-wrap items-center gap-2"> 113 <span className="text-sm font-semibold text-ink">{d.labor_category || '(no labor category)'}</span> 114 <span className="rounded-full bg-slate-100 px-2 py-0.5 text-xs font-semibold text-slate-600"> 115 {d.quantity} needed 116 </span> 117 <span className="rounded-full bg-slate-100 px-2 py-0.5 text-xs font-semibold text-slate-600"> 118 {d.clearance_level} 119 </span> 120 {d.polygraph !== 'none' && ( 121 <span className="rounded-full bg-slate-100 px-2 py-0.5 text-xs font-semibold text-slate-600"> 122 {d.polygraph} polygraph 123 </span> 124 )} 125 <span className="rounded-full bg-slate-100 px-2 py-0.5 text-xs font-semibold text-slate-600"> 126 derived by {d.derivation_method || 'unknown'} 127 </span> 128 </div> 129 130 {gaps.length > 0 && ( 131 <p className="mt-2 inline-flex items-start gap-1.5 rounded bg-amber-50 p-2 text-xs font-semibold text-amber-800"> 132 <AlertTriangle size={13} className="mt-0.5 shrink-0" /> 133 <span> 134 Missing before this can be promoted: {gaps.join(', ')}. The document did not state these, so 135 they are blank rather than guessed. 136 </span> 137 </p> 138 )} 139 140 <div className="mt-3 flex flex-wrap gap-2"> 141 <button 142 type="button" 143 onClick={() => { 144 setEditing(d) 145 setForm({ 146 labor_category: d.labor_category, 147 quantity: d.quantity, 148 clearance_level: d.clearance_level, 149 polygraph: d.polygraph, 150 minimum_years_experience: d.minimum_years_experience, 151 work_location: d.work_location, 152 }) 153 }} 154 className="rounded border border-sky-300 px-2 py-1 text-xs font-semibold text-sky-700 hover:bg-sky-50" 155 > 156 Complete by hand 157 </button> 158 <button 159 type="button" 160 disabled={gaps.length > 0} 161 title={gaps.length > 0 ? 'Complete the missing fields first' : 'Promote to a live requirement'} 162 onClick={() => setConfirming(d)} 163 className="inline-flex items-center gap-1 rounded bg-emerald-600 px-2 py-1 text-xs font-semibold text-white hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-40" 164 > 165 <ShieldCheck size={12} /> Approve and promote 166 </button> 167 <button 168 type="button" 169 onClick={() => { 170 setRejecting(d) 171 setRejectReason('') 172 }} 173 className="rounded border border-rose-300 px-2 py-1 text-xs font-semibold text-rose-700 hover:bg-rose-50" 174 > 175 Reject 176 </button> 177 </div> 178 </li> 179 ) 180 })} 181 </ul> 182 </Panel> 183 184 {decided.length > 0 && ( 185 <Panel title={`Decided, ${decided.length}`}> 186 <ul className="space-y-1"> 187 {decided.map((d) => ( 188 <li key={d.id} className="flex flex-wrap items-center gap-2 text-sm"> 189 <span 190 className={`rounded-full px-2 py-0.5 text-xs font-semibold ${ 191 d.review_status === 'approved' ? 'bg-emerald-50 text-emerald-700' : 'bg-slate-100 text-slate-500' 192 }`} 193 > 194 {d.review_status} 195 </span> 196 <span className={d.review_status === 'rejected' ? 'text-slate-500 line-through' : 'text-ink'}> 197 {d.labor_category} 198 </span> 199 {d.approved_requirement_id && ( 200 <span className="text-xs text-faint">requirement {d.approved_requirement_id.slice(0, 8)}</span> 201 )} 202 </li> 203 ))} 204 </ul> 205 </Panel> 206 )} 207 208 {editing && ( 209 <Modal open title="Complete this draft" onClose={() => setEditing(null)}> 210 <div className="space-y-3"> 211 <p className="text-xs text-faint"> 212 You are filling in what the document did not state. This is recorded as your edit, and the draft keeps 213 its lineage back to the cited scope item it came from. 214 </p> 215 <div> 216 <label className="mb-1 block text-xs font-semibold uppercase tracking-wide text-muted" htmlFor="d-cat"> 217 Labor category 218 </label> 219 <input id="d-cat" className={inputCls} value={form.labor_category} onChange={(e) => setForm({ ...form, labor_category: e.target.value })} /> 220 </div> 221 <div className="grid grid-cols-2 gap-3"> 222 <div> 223 <label className="mb-1 block text-xs font-semibold uppercase tracking-wide text-muted" htmlFor="d-qty"> 224 Quantity 225 </label> 226 <input id="d-qty" type="number" min={0} className={inputCls} value={form.quantity} onChange={(e) => setForm({ ...form, quantity: Number(e.target.value) })} /> 227 </div> 228 <div> 229 <label className="mb-1 block text-xs font-semibold uppercase tracking-wide text-muted" htmlFor="d-years"> 230 Minimum years 231 </label> 232 <input id="d-years" type="number" min={0} className={inputCls} value={form.minimum_years_experience} onChange={(e) => setForm({ ...form, minimum_years_experience: Number(e.target.value) })} /> 233 </div> 234 </div> 235 <div className="grid grid-cols-2 gap-3"> 236 <div> 237 <label className="mb-1 block text-xs font-semibold uppercase tracking-wide text-muted" htmlFor="d-clear"> 238 Clearance level 239 </label> 240 <select id="d-clear" className={inputCls} value={form.clearance_level} onChange={(e) => setForm({ ...form, clearance_level: e.target.value })}> 241 {CLEARANCE_LEVELS.map((c) => ( 242 <option key={c} value={c}> 243 {c} 244 </option> 245 ))} 246 </select> 247 </div> 248 <div> 249 <label className="mb-1 block text-xs font-semibold uppercase tracking-wide text-muted" htmlFor="d-poly"> 250 Polygraph 251 </label> 252 <select id="d-poly" className={inputCls} value={form.polygraph} onChange={(e) => setForm({ ...form, polygraph: e.target.value })}> 253 {POLYGRAPHS.map((p) => ( 254 <option key={p} value={p}> 255 {p} 256 </option> 257 ))} 258 </select> 259 </div> 260 </div> 261 <div> 262 <label className="mb-1 block text-xs font-semibold uppercase tracking-wide text-muted" htmlFor="d-loc"> 263 Work location 264 </label> 265 <input id="d-loc" className={inputCls} value={form.work_location} onChange={(e) => setForm({ ...form, work_location: e.target.value })} /> 266 </div> 267 <div className="flex justify-end gap-2"> 268 <button type="button" onClick={() => setEditing(null)} className="rounded-md border border-slate-300 px-3 py-1.5 text-sm font-semibold"> 269 Cancel 270 </button> 271 <button 272 type="button" 273 onClick={() => 274 void run(async () => { 275 await patch.mutateAsync({ draftId: editing.id, patch: form }) 276 setEditing(null) 277 }) 278 } 279 className="rounded-md bg-navy px-3 py-1.5 text-sm font-semibold text-white" 280 > 281 Save draft 282 </button> 283 </div> 284 </div> 285 </Modal> 286 )} 287 288 {confirming && ( 289 <Modal open title="Promote to a live requirement" onClose={() => setConfirming(null)}> 290 <div className="space-y-3"> 291 {/* THE CONFIRMATION SAYS WHAT BECOMES REAL. This is the only step on the whole review path that 292 crosses into what the scoring engine can see, and a reviewer should feel the difference. */} 293 <p className="text-sm text-ink"> 294 This creates a live requirement the scoring engine will match candidates against. Your name is recorded 295 as the approver, the draft is latched to approved, and the lineage back to the cited scope item is kept. 296 </p> 297 <dl className="rounded bg-slate-50 p-3 text-sm"> 298 <div className="flex justify-between gap-4 py-0.5"> 299 <dt className="text-muted">Labor category</dt> 300 <dd className="font-semibold text-ink">{confirming.labor_category}</dd> 301 </div> 302 <div className="flex justify-between gap-4 py-0.5"> 303 <dt className="text-muted">Quantity</dt> 304 <dd className="font-semibold text-ink">{confirming.quantity}</dd> 305 </div> 306 <div className="flex justify-between gap-4 py-0.5"> 307 <dt className="text-muted">Clearance</dt> 308 <dd className="font-semibold text-ink"> 309 {confirming.clearance_level} 310 {confirming.polygraph !== 'none' ? ` with ${confirming.polygraph} polygraph` : ''} 311 </dd> 312 </div> 313 </dl> 314 <p className="text-xs text-faint"> 315 Approving is not reversible by editing. A requirement that turns out wrong is corrected by a new 316 decision, and the audit trail keeps the whole sequence. 317 </p> 318 <div className="flex justify-end gap-2"> 319 <button type="button" onClick={() => setConfirming(null)} className="rounded-md border border-slate-300 px-3 py-1.5 text-sm font-semibold"> 320 Cancel 321 </button> 322 <button 323 type="button" 324 onClick={() => 325 void run(async () => { 326 await approve.mutateAsync(confirming.id) 327 setConfirming(null) 328 setNote('Promoted. The requirement is live and the draft is latched to approved.') 329 }) 330 } 331 className="rounded-md bg-emerald-600 px-3 py-1.5 text-sm font-semibold text-white" 332 > 333 Approve and promote 334 </button> 335 </div> 336 </div> 337 </Modal> 338 )} 339 340 {rejecting && ( 341 <Modal open title="Reject this draft" onClose={() => setRejecting(null)}> 342 <div className="space-y-3"> 343 <p className="text-xs text-faint"> 344 A rejection is recorded with your name and is kept. Nothing is deleted, so the record shows what was 345 proposed and declined. 346 </p> 347 <div> 348 <label className="mb-1 block text-xs font-semibold uppercase tracking-wide text-muted" htmlFor="rej"> 349 Reason 350 </label> 351 <textarea id="rej" rows={3} className={inputCls} value={rejectReason} onChange={(e) => setRejectReason(e.target.value)} /> 352 </div> 353 <div className="flex justify-end gap-2"> 354 <button type="button" onClick={() => setRejecting(null)} className="rounded-md border border-slate-300 px-3 py-1.5 text-sm font-semibold"> 355 Cancel 356 </button> 357 <button 358 type="button" 359 onClick={() => 360 void run(async () => { 361 await reject.mutateAsync({ draftId: rejecting.id, reason: rejectReason }) 362 setRejecting(null) 363 }) 364 } 365 className="rounded-md bg-rose-600 px-3 py-1.5 text-sm font-semibold text-white" 366 > 367 Reject draft 368 </button> 369 </div> 370 </div> 371 </Modal> 372 )} 373 </div> 374 ) 375} 376