Source identity
| Field | Recorded value |
|---|---|
| Source type | GitHub source |
| Original record | Janady13/missionmatch / frontend/src/tools/screenmatch/AliasSettings.tsx |
| Date | Not specified in source |
| Repository | Janady13/missionmatch |
| Revision | 720d47fae476b0d38477ae4401697d372b1ea2bc |
| Branch | feature/opportunity-to-outcome |
| Path or archive member | frontend/src/tools/screenmatch/AliasSettings.tsx |
| Original SHA-256 | 5ab13c2b8501e1ad59a2d7910b037c8df8ae4d0495aeab70cad0936fa0b29cd6 |
| Git blob SHA | 7eff3e602e8b4a67bf1720d3a9bef220f85b4578 |
| Reading-copy SHA-256 | 5ab13c2b8501e1ad59a2d7910b037c8df8ae4d0495aeab70cad0936fa0b29cd6 |
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/screenmatch/AliasSettings.tsx | feature/opportunity-to-outcome | 720d47fae476b0d38477ae4401697d372b1ea2bc | Open original |
| Janady13/missionmatch / frontend/src/tools/screenmatch/AliasSettings.tsx | feature/aioe-upgrade | 2178e7298d0e5d9af83afa12402fd587f0ba6ed8 | Open original |
Recovered source transcript
Download complete source text ↓123 lines · 5.4 KB
import { useState } from 'react'
import { Link } from 'react-router-dom'
import { useMutation, useQueryClient } from '@tanstack/react-query'
import { ArrowLeft, BookOpenText, Globe2, Loader2, Plus, Trash2 } from 'lucide-react'
import { screenApi } from './api'
import { useAliases } from './queries'
import { screenBrand } from './brand'
import { Badge, Panel } from '../../components/ui'
import { ToolHeader } from '../../components/ToolHeader'
// The acronym and term expansion manager: the global GovCon and DoD seed every tenant gets, plus
// this organization's own additions. Terms normalize requirement and resume skill names during
// matching, so JWICS matches Joint Worldwide Intelligence Communications System.
export function AliasSettings() {
const aliases = useAliases()
const qc = useQueryClient()
const [alias, setAlias] = useState('')
const [expansion, setExpansion] = useState('')
const add = useMutation({
mutationFn: () => screenApi.addAlias(alias, expansion),
onSuccess: () => {
setAlias('')
setExpansion('')
void qc.invalidateQueries({ queryKey: ['screenmatch', 'aliases'] })
},
})
const remove = useMutation({
mutationFn: (id: string) => screenApi.deleteAlias(id),
onSuccess: () => void qc.invalidateQueries({ queryKey: ['screenmatch', 'aliases'] }),
})
const terms = aliases.data?.terms ?? []
const globalTerms = terms.filter((t) => t.global)
const orgTerms = terms.filter((t) => !t.global)
return (
<div className="space-y-4">
<ToolHeader name={screenBrand.name} tagline="Acronyms and term expansions" accent={screenBrand.accent} />
<Link to="/screen" className="inline-flex items-center gap-1.5 text-sm text-muted hover:text-ink">
<ArrowLeft size={15} /> Back to Screening Queue
</Link>
<Panel title="Add a term" hint="applies to your organization only">
<div className="flex flex-wrap items-end gap-2">
<label className="flex flex-col gap-1">
<span className="text-[11px] font-bold uppercase tracking-wider text-muted">Term or acronym</span>
<input
className="w-44 rounded-lg border border-line/70 bg-navy-900 px-3 py-2 text-sm text-ink outline-none focus:border-blue"
value={alias}
onChange={(e) => setAlias(e.target.value)}
placeholder="JWICS"
/>
</label>
<label className="flex flex-1 flex-col gap-1">
<span className="text-[11px] font-bold uppercase tracking-wider text-muted">Expansion</span>
<input
className="min-w-64 rounded-lg border border-line/70 bg-navy-900 px-3 py-2 text-sm text-ink outline-none focus:border-blue"
value={expansion}
onChange={(e) => setExpansion(e.target.value)}
placeholder="Joint Worldwide Intelligence Communications System"
/>
</label>
<button
disabled={!alias.trim() || expansion.trim().length < 2 || add.isPending}
onClick={() => add.mutate()}
className="flex items-center gap-1.5 rounded-lg bg-gradient-to-r from-blue to-navy-700 px-3.5 py-2 text-sm font-semibold text-white hover:brightness-110 disabled:opacity-50"
>
{add.isPending ? <Loader2 size={14} className="animate-spin" /> : <Plus size={14} />} Add term
</button>
</div>
{add.isError && <p className="mt-2 text-xs text-risk">{(add.error as Error).message}</p>}
</Panel>
<Panel
title="Your organization's terms"
hint={`${orgTerms.length} term${orgTerms.length === 1 ? '' : 's'}`}
>
{aliases.isLoading ? (
<p className="py-4 text-center text-sm text-muted">Loading…</p>
) : orgTerms.length === 0 ? (
<p className="py-4 text-center text-sm text-faint">
No custom terms yet. Terms you add apply on top of the platform seed below.
</p>
) : (
<ul className="divide-y divide-line/50">
{orgTerms.map((t) => (
<li key={t.id} className="flex items-center gap-3 py-2 text-sm">
<BookOpenText size={14} className="shrink-0 text-blue-soft" />
<span className="font-semibold">{t.alias}</span>
<span className="text-faint">expands to</span>
<span className="min-w-0 flex-1 truncate text-muted">{t.expansion}</span>
<button
onClick={() => remove.mutate(t.id)}
className="rounded p-1 text-faint hover:text-risk"
aria-label={`Remove ${t.alias}`}
>
<Trash2 size={14} />
</button>
</li>
))}
</ul>
)}
</Panel>
<Panel title="Platform seed" hint="GovCon and DoD terms, read only">
<div className="grid grid-cols-1 gap-x-6 md:grid-cols-2">
{globalTerms.map((t) => (
<div key={t.id} className="flex items-center gap-2 border-b border-line/40 py-1.5 text-sm">
<Globe2 size={12} className="shrink-0 text-faint" />
<span className="w-24 shrink-0 font-semibold">{t.alias}</span>
<span className="min-w-0 flex-1 truncate text-muted">{t.expansion}</span>
<Badge color="var(--color-blue)" subtle>
seed
</Badge>
</div>
))}
</div>
</Panel>
</div>
)
}