Janady13/missionmatch / frontend/src/screens/Compliance.tsx

1import { useState } from 'react' 2import { CheckCircle2, Download, ShieldAlert, ShieldCheck } from 'lucide-react' 3import { 4 useAdverseImpact, 5 useApproveCurationProposal, 6 useCurationProposals, 7 useVerifyCurationProposal, 8} from '../lib/queries' 9import { api } from '../lib/api' 10import { Badge, Panel } from '../components/ui' 11import { flagRatio } from '../lib/format' 12import type { AnalysisSection, CurationProposalView, ImpactRow } from '../lib/types' 13 14export function Compliance() { 15 const report = useAdverseImpact() 16 17 async function downloadExport() { 18 const text = await api.adverseImpactExport() 19 const url = URL.createObjectURL(new Blob([text], { type: 'text/plain' })) 20 const a = document.createElement('a') 21 a.href = url 22 a.download = 'adverse_impact_report.txt' 23 a.click() 24 URL.revokeObjectURL(url) 25 } 26 27 return ( 28 <div className="space-y-4"> 29 <Panel className="flex flex-wrap items-center justify-between gap-3 p-4"> 30 <div> 31 <div className="flex items-center gap-2 text-base font-bold"> 32 <ShieldCheck size={18} style={{ color: 'var(--color-gold)' }} /> Adverse Impact and AEDT Compliance 33 </div> 34 <p className="mt-0.5 text-xs text-faint"> 35 Four fifths analysis over recorded decisions. The platform supplies this data for an 36 independent audit run by the deploying employer. 37 </p> 38 </div> 39 <button 40 onClick={downloadExport} 41 disabled={!report.data} 42 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 disabled:opacity-50" 43 > 44 <Download size={15} /> Export summary 45 </button> 46 </Panel> 47 48 {report.isLoading && <Panel><p className="text-sm text-muted">Loading the report.</p></Panel>} 49 50 {report.isError && ( 51 <Panel> 52 <p className="text-sm text-warn"> 53 The adverse impact report is unavailable. It is read only by the compliance role and requires 54 the compliance database connection. Detail: {(report.error as Error).message} 55 </p> 56 </Panel> 57 )} 58 59 {report.data && ( 60 <> 61 <Panel> 62 <dl className="grid grid-cols-1 gap-2 text-sm sm:grid-cols-2"> 63 <Meta k="Generated" v={report.data.generated_at} /> 64 <Meta k="Data covered" v={`${report.data.data_from || 'not available'} to ${report.data.data_to || 'not available'}`} /> 65 <Meta k="Source" v={report.data.source} wide /> 66 <Meta k="Method" v={report.data.method} wide /> 67 </dl> 68 </Panel> 69 <Section section={report.data.selection} /> 70 <Section section={report.data.screening} /> 71 </> 72 )} 73 74 <CurationProposals /> 75 </div> 76 ) 77} 78 79// CurationProposals surfaces the WS8 teaching curation proposals and the two step human in the loop gate. 80// Approve is the first step and stages an inert ontology edge that changes no score. Verify is a second, 81// distinct step that activates the edge for future scores. Nothing is ever auto applied, and neither step 82// touches the engine math or any already served score. 83function CurationProposals() { 84 const proposals = useCurationProposals() 85 const approve = useApproveCurationProposal() 86 const verify = useVerifyCurationProposal() 87 // verified tracks the proposal ids the user has just verified this session, so the row reads as activated 88 // immediately rather than only after the list refreshes. approvedThisSession lets a freshly approved 89 // proposal show the Verify action before the pending list drops it. 90 const [approvedThisSession, setApprovedThisSession] = useState<CurationProposalView[]>([]) 91 const [verified, setVerified] = useState<Record<string, boolean>>({}) 92 93 async function onApprove(p: CurationProposalView) { 94 const res = await approve.mutateAsync(p.id) 95 setApprovedThisSession((prev) => [...prev.filter((x) => x.id !== p.id), { ...p, status: res.status }]) 96 } 97 98 async function onVerify(id: string) { 99 await verify.mutateAsync(id) 100 setVerified((prev) => ({ ...prev, [id]: true })) 101 } 102 103 const pending = proposals.data ?? [] 104 // Show the still pending proposals plus any approved this session that are not yet verified, so both steps 105 // are visible in one list without a page reload. 106 const approvedIds = new Set(approvedThisSession.map((p) => p.id)) 107 const rows = [ 108 ...pending.filter((p) => !approvedIds.has(p.id)), 109 ...approvedThisSession, 110 ] 111 112 return ( 113 <Panel 114 title="Teaching curation proposals" 115 hint="Two step human gate. Approve stages an inert ontology edge. Verify, a separate action, activates it for future scores. Nothing is auto applied, and no already served score and no engine weight is ever changed." 116 > 117 {proposals.isError && ( 118 <p className="text-sm text-warn"> 119 The curation surface is unavailable. It is gated to the compliance or operator role and requires the 120 migrator database connection. Detail: {(proposals.error as Error).message} 121 </p> 122 )} 123 {!proposals.isError && rows.length === 0 && ( 124 <p className="text-sm text-faint">No pending curation proposals.</p> 125 )} 126 {rows.length > 0 && ( 127 <table className="w-full text-sm"> 128 <thead> 129 <tr className="text-left text-[11px] uppercase tracking-wider text-faint"> 130 <th className="py-1 font-semibold">Kind</th> 131 <th className="py-1 font-semibold">Substitute skill</th> 132 <th className="py-1 font-semibold">For required skill</th> 133 <th className="py-1 text-right font-semibold">Strength</th> 134 <th className="py-1 text-right font-semibold">Evidence</th> 135 <th className="py-1 text-right font-semibold">Action</th> 136 </tr> 137 </thead> 138 <tbody> 139 {rows.map((p) => { 140 const isApproved = p.status === 'approved' || approvedIds.has(p.id) 141 const isVerified = verified[p.id] 142 return ( 143 <tr key={p.id} className="border-t border-line/50"> 144 <td className="py-1.5">{p.kind.replace(/_/g, ' ')}</td> 145 <td className="py-1.5 font-mono text-[11px] text-muted">{p.from_skill_id.slice(0, 8)}</td> 146 <td className="py-1.5 font-mono text-[11px] text-muted">{p.to_skill_id.slice(0, 8)}</td> 147 <td className="py-1.5 text-right tabular-nums">{p.proposed_strength || 'n a'}</td> 148 <td className="py-1.5 text-right tabular-nums text-muted"> 149 {p.evidence_successes} of {p.evidence_observations} 150 </td> 151 <td className="py-1.5 text-right"> 152 {isVerified ? ( 153 <Badge color="var(--color-gold)" subtle> 154 <CheckCircle2 size={12} /> Verified, live 155 </Badge> 156 ) : isApproved ? ( 157 <button 158 onClick={() => onVerify(p.id)} 159 disabled={verify.isPending} 160 className="rounded-lg border border-line/70 px-3 py-1 text-xs font-semibold text-ink hover:bg-line/30 disabled:opacity-50" 161 > 162 Verify, the second step 163 </button> 164 ) : ( 165 <button 166 onClick={() => onApprove(p)} 167 disabled={approve.isPending} 168 className="rounded-lg border border-line/70 px-3 py-1 text-xs font-semibold text-muted hover:text-ink disabled:opacity-50" 169 > 170 Approve, stage inert 171 </button> 172 )} 173 </td> 174 </tr> 175 ) 176 })} 177 </tbody> 178 </table> 179 )} 180 </Panel> 181 ) 182} 183 184function Meta({ k, v, wide }: { k: string; v: string; wide?: boolean }) { 185 return ( 186 <div className={wide ? 'sm:col-span-2' : ''}> 187 <dt className="text-[11px] font-bold uppercase tracking-wider text-muted">{k}</dt> 188 <dd className="text-ink">{v}</dd> 189 </div> 190 ) 191} 192 193function Section({ section }: { section: AnalysisSection }) { 194 return ( 195 <Panel 196 title={section.stage} 197 hint={`${section.total_n} analyzed, ${section.unknown_count} unknown category, ${section.no_demographics_count} with no consented demographics`} 198 > 199 <div className="space-y-4"> 200 <Cut title="By sex" rows={section.by_gender} /> 201 <Cut title="By race or ethnicity" rows={section.by_race_ethnicity} /> 202 <Cut title="Intersectional (sex by race or ethnicity)" rows={section.intersectional} /> 203 </div> 204 </Panel> 205 ) 206} 207 208function Cut({ title, rows }: { title: string; rows: ImpactRow[] }) { 209 return ( 210 <div> 211 <div className="mb-1.5 text-[11px] font-bold uppercase tracking-wider text-muted">{title}</div> 212 {rows.length === 0 ? ( 213 <p className="text-sm text-faint">No data.</p> 214 ) : ( 215 <table className="w-full text-sm"> 216 <thead> 217 <tr className="text-left text-[11px] uppercase tracking-wider text-faint"> 218 <th className="py-1 font-semibold">Group</th> 219 <th className="py-1 text-right font-semibold">Selected</th> 220 <th className="py-1 text-right font-semibold">Rate</th> 221 <th className="py-1 text-right font-semibold">Impact ratio</th> 222 <th className="py-1 text-right font-semibold">Status</th> 223 </tr> 224 </thead> 225 <tbody> 226 {rows.map((r) => ( 227 <tr key={r.group} className="border-t border-line/50"> 228 <td className="py-1.5">{r.group}</td> 229 <td className="py-1.5 text-right tabular-nums text-muted"> 230 {r.selected} of {r.considered} 231 </td> 232 <td className="py-1.5 text-right tabular-nums">{r.rate}</td> 233 <td 234 className="py-1.5 text-right tabular-nums font-semibold" 235 style={{ color: r.flagged ? 'var(--color-risk)' : flagRatio(r.impact_ratio) }} 236 > 237 {r.impact_ratio} 238 </td> 239 <td className="py-1.5 text-right"> 240 {r.flagged ? ( 241 <Badge color="var(--color-risk)" subtle> 242 <ShieldAlert size={12} /> Below 0.80 243 </Badge> 244 ) : ( 245 <span className="text-faint">ok</span> 246 )} 247 </td> 248 </tr> 249 ))} 250 </tbody> 251 </table> 252 )} 253 </div> 254 ) 255} 256