Janady13/missionmatch / frontend/src/tools/missionmatch/WhoCanSupport.tsx

Source identity

Field	Recorded value
Source type	GitHub source
Original record	Janady13/missionmatch / frontend/src/tools/missionmatch/WhoCanSupport.tsx
Date	Not specified in source
Repository	Janady13/missionmatch
Revision	720d47fae476b0d38477ae4401697d372b1ea2bc
Branch	feature/opportunity-to-outcome
Path or archive member	frontend/src/tools/missionmatch/WhoCanSupport.tsx
Original SHA-256	875afca8cbcd48033a3c09db89c8681e13ede91fff4e1b9e8e1383e0f8cfb9d4
Git blob SHA	ac0c12a345324f7f5e92266fd33b39d881891bab
Reading-copy SHA-256	875afca8cbcd48033a3c09db89c8681e13ede91fff4e1b9e8e1383e0f8cfb9d4

Original source ↗

Every recorded occurrence

These 2 records contain identical original source bytes. Their paths and revisions remain part of the archive.

Original record	Branch or archive	Revision / identifier	Original location
Janady13/missionmatch / frontend/src/tools/missionmatch/WhoCanSupport.tsx	feature/opportunity-to-outcome	720d47fae476b0d38477ae4401697d372b1ea2bc	Open original
Janady13/missionmatch / frontend/src/tools/missionmatch/WhoCanSupport.tsx	feature/aioe-upgrade	2178e7298d0e5d9af83afa12402fd587f0ba6ed8	Open original

Recovered source transcript

Download complete source text ↓72 lines · 3.1 KB

import { useEffect, useState } from 'react'
import { useMissionRequirements, useWhoCanSupport } from './queries'
import { Badge, Panel } from '../../components/ui'
import { bandColor, num } from '../../lib/format'

const selectCls =
  'rounded-lg border border-line/70 bg-navy-900 px-3 py-2 text-sm text-ink outline-none focus:border-gold min-w-[20rem]'

// WhoCanSupport reads the persisted screenMATCH qualifications for one requirement (the stored
// artifact, never a rescore) and shows who can support that mission today, best first.
export function WhoCanSupport() {
  const requirements = useMissionRequirements()
  const [reqId, setReqId] = useState('')
  useEffect(() => {
    if (!reqId && requirements.data?.length) setReqId(requirements.data[0].id)
  }, [requirements.data, reqId])
  const support = useWhoCanSupport(reqId || null)

  return (
    <Panel title="Who can support this mission today" hint="read from the stored screenMATCH evaluations">
      <label className="mb-3 flex flex-col gap-1.5">
        <span className="text-[11px] font-bold uppercase tracking-wider text-muted">Requirement</span>
        <select className={selectCls} value={reqId} onChange={(e) => setReqId(e.target.value)}>
          {requirements.data?.map((r) => (
            <option key={r.id} value={r.id}>
              {r.title}
            </option>
          ))}
        </select>
      </label>

      {support.isLoading ? (
        <p className="py-4 text-center text-muted">Loading…</p>
      ) : support.isError ? (
        // A failed request is not "nobody has been screened yet": that phrasing sends the user off to run
        // a screen that already exists, to fix a problem that is an outage.
        <p className="py-4 text-center text-sm text-warn">
          Could not load who can support this requirement. {(support.error as Error)?.message}
        </p>
      ) : !support.data?.length ? (
        <p className="py-4 text-center text-sm text-faint">
          No one has been screened against this requirement yet. Run a screen in screenMATCH, the
          qualification is stored and appears here.
        </p>
      ) : (
        <ul className="space-y-2">
          {support.data.map((s) => (
            <li
              key={s.candidate_id}
              className="flex items-center gap-4 rounded-xl border border-line/60 bg-surface/70 px-4 py-2.5"
            >
              <div className="min-w-0 flex-1">
                <div className="font-semibold">{s.full_name}</div>
                <div className="text-xs text-faint">screened {s.evaluated_at}</div>
              </div>
              <Badge color={s.available ? 'var(--color-ok)' : 'var(--color-warn)'} subtle>
                {s.available ? 'Available' : 'Engaged'}
              </Badge>
              <Badge color={bandColor(s.band)} subtle>
                {s.band_label}
              </Badge>
              <div className="w-12 text-right text-lg font-extrabold tabular-nums" style={{ color: bandColor(s.band) }}>
                {num(s.total_score).toFixed(0)}
              </div>
            </li>
          ))}
        </ul>
      )}
    </Panel>
  )
}