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

1import { useEffect, useState } from 'react' 2import { Check, FileDown, Layers, Loader2, X } from 'lucide-react' 3import { 4 useSlateCandidates, 5 useSlateRequirements, 6 useGenerateSlateTool, 7 useDecideMember, 8 useSlateReadiness, 9 useSlateDetail, 10 useSlatesFor, 11} from './queries' 12import { slateApi } from './api' 13import { slateBrand } from './brand' 14import { Badge, Panel } from '../../components/ui' 15import { ToolHeader } from '../../components/ToolHeader' 16import { bandColor, num } from '../../lib/format' 17import type { ProposalReadinessView, SlateMemberDetailView } from '../../lib/types' 18 19const selectCls = 20 'rounded-lg border border-line/70 bg-navy-900 px-3 py-2 text-sm text-ink outline-none focus:border-slate-accent min-w-[16rem]' 21 22export function Slate() { 23 const requirements = useSlateRequirements() 24 const candidates = useSlateCandidates() 25 const gen = useGenerateSlateTool() 26 const [reqId, setReqId] = useState('') 27 const [name, setName] = useState('Proposal Candidate Slate') 28 // The active slate is whichever was just generated or selected from the recent list. Its members, 29 // decisions, and notes are read from the stored slate, so a reload or revisit rehydrates them. 30 const [slateId, setSlateId] = useState<string | null>(null) 31 32 const slates = useSlatesFor(reqId || null) 33 const detail = useSlateDetail(slateId) 34 const readiness = useSlateReadiness(slateId) 35 36 useEffect(() => { 37 if (!reqId && requirements.data?.length) setReqId(requirements.data[0].id) 38 }, [requirements.data, reqId]) 39 // A new requirement clears the open slate until one is generated or picked. 40 useEffect(() => { 41 setSlateId(null) 42 }, [reqId]) 43 44 const names = new Map((candidates.data ?? []).map((c) => [c.id, c.full_name])) 45 46 return ( 47 <div className="space-y-4"> 48 <ToolHeader name={slateBrand.name} tagline={slateBrand.tagline} accent={slateBrand.accent} /> 49 50 <Panel className="flex flex-wrap items-end gap-4 p-4"> 51 <label className="flex flex-col gap-1.5"> 52 <span className="text-[11px] font-bold uppercase tracking-wider text-muted">Requirement</span> 53 <select className={selectCls} value={reqId} onChange={(e) => setReqId(e.target.value)}> 54 {requirements.data?.map((r) => ( 55 <option key={r.id} value={r.id}> 56 {r.title} 57 </option> 58 ))} 59 </select> 60 </label> 61 <label className="flex flex-col gap-1.5"> 62 <span className="text-[11px] font-bold uppercase tracking-wider text-muted">Slate name</span> 63 <input className={selectCls} value={name} onChange={(e) => setName(e.target.value)} /> 64 </label> 65 <button 66 onClick={() => { 67 if (reqId) { 68 gen.mutate({ requirementId: reqId, name }, { onSuccess: (s) => setSlateId(s.slate_id) }) 69 } 70 }} 71 disabled={!reqId || gen.isPending} 72 className="flex items-center gap-2 rounded-lg px-5 py-2.5 text-sm font-bold text-white hover:brightness-110 disabled:opacity-50" 73 style={{ background: 'linear-gradient(to right, var(--color-slate-accent), #6d28d9)' }} 74 > 75 {gen.isPending ? <Loader2 size={16} className="animate-spin" /> : <Layers size={16} />} 76 Generate Slate 77 </button> 78 </Panel> 79 80 {!!slates.data?.length && ( 81 <Panel title="Slates for this requirement" hint={`${slates.data.length}`}> 82 <div className="flex flex-wrap gap-2"> 83 {slates.data.map((s) => ( 84 <button 85 key={s.slate_id} 86 onClick={() => setSlateId(s.slate_id)} 87 className={`rounded-lg border px-3 py-2 text-left text-xs transition hover:border-slate-accent/70 ${ 88 s.slate_id === slateId ? 'border-slate-accent bg-navy-800/60' : 'border-line/60 bg-surface/70' 89 }`} 90 > 91 <div className="font-semibold text-ink">{s.name}</div> 92 <div className="text-faint"> 93 {s.member_count} members · {s.created_at} 94 </div> 95 </button> 96 ))} 97 </div> 98 </Panel> 99 )} 100 101 {gen.isError && ( 102 <Panel> 103 <p className="text-sm text-risk">Slate generation failed: {(gen.error as Error).message}</p> 104 </Panel> 105 )} 106 107 {slateId && ( 108 <> 109 <ReadinessPanel readiness={readiness.data} slateId={slateId} /> 110 111 <Panel 112 title={detail.data?.name ?? 'Slate'} 113 hint={detail.data ? `${detail.data.members.length} candidates ranked` : 'loading'} 114 > 115 {detail.isLoading ? ( 116 <p className="py-6 text-center text-muted">Loading the slate…</p> 117 ) : ( 118 <div className="space-y-2.5"> 119 {detail.data?.members.map((m) => ( 120 <MemberRow key={m.candidate_id} m={m} slateId={slateId} fallbackName={names.get(m.candidate_id)} /> 121 ))} 122 </div> 123 )} 124 <p className="mt-3 text-xs text-faint"> 125 A human approves or rejects every candidate, optionally with a note. The engine never auto 126 rejects. Each decision is recorded with the actor and the time for the AEDT audit trail. 127 </p> 128 </Panel> 129 </> 130 )} 131 </div> 132 ) 133} 134 135function MemberRow({ 136 m, 137 slateId, 138 fallbackName, 139}: { 140 m: SlateMemberDetailView 141 slateId: string 142 fallbackName?: string 143}) { 144 const decide = useDecideMember() 145 const [note, setNote] = useState('') 146 const decided = m.decision === 'approved' || m.decision === 'rejected' 147 148 return ( 149 <div className="flex flex-wrap items-center gap-4 rounded-xl border border-line/60 bg-surface/70 px-4 py-3"> 150 <div 151 className="grid size-9 shrink-0 place-items-center rounded-lg text-sm font-extrabold" 152 style={{ color: '#06121f', background: bandColor(m.band) }} 153 > 154 {m.rank} 155 </div> 156 <div className="min-w-0 flex-1"> 157 <div className="font-semibold">{m.full_name || fallbackName || m.candidate_id.slice(0, 8)}</div> 158 <div className="truncate text-xs text-muted">{m.explanation}</div> 159 </div> 160 <div className="text-right"> 161 <div className="text-lg font-extrabold tabular-nums" style={{ color: bandColor(m.band) }}> 162 {num(m.total_score).toFixed(0)}% 163 </div> 164 <Badge color={bandColor(m.band)} subtle> 165 {m.band_label} 166 </Badge> 167 </div> 168 <div className="flex shrink-0 flex-col items-end gap-1.5"> 169 {decided ? ( 170 <> 171 <Badge color={m.decision === 'approved' ? 'var(--color-ok)' : 'var(--color-risk)'} subtle> 172 {m.decision === 'approved' ? <Check size={12} /> : <X size={12} />} 173 {m.decision === 'approved' ? 'Approved' : 'Rejected'} 174 </Badge> 175 {m.decision_note ? <span className="max-w-56 truncate text-[11px] text-faint">{m.decision_note}</span> : null} 176 </> 177 ) : ( 178 <> 179 <input 180 value={note} 181 onChange={(e) => setNote(e.target.value)} 182 placeholder="Reviewer note (optional)" 183 className="w-56 rounded-lg border border-line/70 bg-navy-900 px-2.5 py-1.5 text-xs text-ink outline-none focus:border-slate-accent" 184 /> 185 <div className="flex items-center gap-1.5"> 186 <button 187 onClick={() => decide.mutate({ slateId, candidateId: m.candidate_id, decision: 'approved', note })} 188 disabled={decide.isPending} 189 className="flex items-center gap-1 rounded-lg border border-line/70 px-2.5 py-1.5 text-xs font-semibold text-muted hover:text-ink disabled:opacity-50" 190 style={{ borderColor: 'var(--color-ok)' }} 191 title="Approve this candidate for the proposal slate" 192 > 193 <Check size={14} style={{ color: 'var(--color-ok)' }} /> Approve 194 </button> 195 <button 196 onClick={() => decide.mutate({ slateId, candidateId: m.candidate_id, decision: 'rejected', note })} 197 disabled={decide.isPending} 198 className="flex items-center gap-1 rounded-lg border border-line/70 px-2.5 py-1.5 text-xs font-semibold text-muted hover:text-ink disabled:opacity-50" 199 title="Reject this candidate" 200 > 201 <X size={14} style={{ color: 'var(--color-risk)' }} /> Reject 202 </button> 203 </div> 204 </> 205 )} 206 </div> 207 </div> 208 ) 209} 210 211function ReadinessPanel({ readiness, slateId }: { readiness: ProposalReadinessView | undefined; slateId: string }) { 212 return ( 213 <Panel title="Proposal Readiness" hint="rolled up from the stored slate"> 214 <div className="flex flex-wrap items-center gap-x-8 gap-y-3"> 215 <div> 216 <div className="text-[11px] uppercase tracking-wider text-faint">Status</div> 217 <div className="text-lg font-extrabold" style={{ color: 'var(--color-slate-soft)' }}> 218 {readiness?.status ?? '...'} 219 </div> 220 </div> 221 <Stat label="Members" value={readiness?.total_members} /> 222 <Stat label="Approved" value={readiness?.approved} color="var(--color-ok)" /> 223 <Stat label="Rejected" value={readiness?.rejected} color="var(--color-risk)" /> 224 <Stat label="Pending" value={readiness?.pending} color="var(--color-warn)" /> 225 <Stat label="Proposal Ready" value={readiness?.proposal_ready} /> 226 <div> 227 <div className="text-[11px] uppercase tracking-wider text-faint">Approved share</div> 228 <div className="text-lg font-bold tabular-nums">{readiness ? `${readiness.readiness_pct}%` : '...'}</div> 229 </div> 230 <a 231 href={slateApi.exportUrl(slateId)} 232 className="ml-auto flex items-center gap-1.5 rounded-lg border border-line/70 px-3.5 py-2 text-sm font-semibold text-muted hover:text-ink" 233 style={{ borderColor: 'var(--color-slate-accent)' }} 234 > 235 <FileDown size={14} style={{ color: 'var(--color-slate-soft)' }} /> Export CSV 236 </a> 237 </div> 238 </Panel> 239 ) 240} 241 242function Stat({ label, value, color }: { label: string; value: number | undefined; color?: string }) { 243 return ( 244 <div> 245 <div className="text-[11px] uppercase tracking-wider text-faint">{label}</div> 246 <div className="text-lg font-bold tabular-nums" style={color ? { color } : undefined}> 247 {value ?? '...'} 248 </div> 249 </div> 250 ) 251} 252