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

1import { Fragment, useMemo, useState } from 'react' 2import { Building2, ChevronDown, ChevronRight, DollarSign, ExternalLink, RefreshCw, Radio, Search, Trophy } from 'lucide-react' 3import { useGalapagosAwards, useIncumbents, useSamOpportunities, useWages } from '../lib/queries' 4import type { FederalAward, OpportunityFilters, SamOpportunity } from '../lib/types' 5import { Badge, Panel } from '../components/ui' 6import { fmtDate, fmtUSD, GALAPAGOS, NAICS_LABELS, timeAgo } from '../lib/format' 7 8type Agency = 'af_sf' | 'dod' | 'air_force' | 'space_force' 9const agencyOptions: { key: Agency; label: string }[] = [ 10 { key: 'af_sf', label: 'Air Force + Space Force' }, 11 { key: 'dod', label: 'All DoD' }, 12 { key: 'air_force', label: 'Air Force' }, 13 { key: 'space_force', label: 'Space Force' }, 14] 15 16const chip = (on: boolean) => 17 `rounded-full px-3 py-1 text-xs font-semibold transition ${ 18 on 19 ? 'bg-blue/25 text-blue-soft shadow-[inset_0_0_0_1px_var(--color-blue)]' 20 : 'bg-navy-900 text-faint hover:text-muted border border-line/60' 21 }` 22 23const selectCls = 24 'rounded-lg border border-line/70 bg-navy-900 px-3 py-1.5 text-sm text-ink outline-none focus:border-blue' 25 26// freshestSync returns the most recent synced_at across the rows, driving the "synced {relative}" badge. 27function freshestSync(rows: SamOpportunity[]): string { 28 let best = '' 29 for (const r of rows) if (r.synced_at && r.synced_at > best) best = r.synced_at 30 return best 31} 32 33export function Requirements() { 34 // Default the dashboard to the Galapagos profile so it opens on relevant federal opportunities. 35 // Open on the relevant, non empty slice: Galapagos NAICS with their customers (Air Force and Space 36 // Force). 8(a) and HI, NM are one click narrowers that surface their set aside and location stories. 37 const [naics, setNaics] = useState<string[]>([...GALAPAGOS.naics]) 38 const [states, setStates] = useState<string[]>([]) 39 const [eightA, setEightA] = useState(false) 40 const [agency, setAgency] = useState<Agency>('af_sf') 41 const [q, setQ] = useState('') 42 43 const filters: OpportunityFilters = useMemo(() => { 44 const f: OpportunityFilters = { limit: 200, active_only: true } 45 if (naics.length) f.naics = naics 46 if (states.length) f.state = states 47 if (eightA) f.set_aside = [...GALAPAGOS.setAside] 48 if (agency === 'af_sf') f.sub_agency = ['AIR FORCE', 'SPACE FORCE'] 49 if (agency === 'dod') f.department = [...GALAPAGOS.departments] 50 if (agency === 'air_force') f.sub_agency = ['AIR FORCE'] 51 if (agency === 'space_force') f.sub_agency = ['SPACE FORCE'] 52 if (q.trim()) f.q = q.trim() 53 return f 54 }, [naics, states, eightA, agency, q]) 55 56 const { data, isLoading, isError, error, isFetching, refetch } = useSamOpportunities(filters) 57 const rows = data ?? [] 58 const synced = freshestSync(rows) 59 const [openId, setOpenId] = useState<string | null>(null) 60 61 const toggle = (list: string[], set: (v: string[]) => void, v: string) => 62 set(list.includes(v) ? list.filter((x) => x !== v) : [...list, v]) 63 64 return ( 65 <div className="space-y-4"> 66 {/* Live feed banner */} 67 <Panel className="flex flex-wrap items-center justify-between gap-3 p-4"> 68 <div className="flex items-center gap-3"> 69 <span className="grid size-9 place-items-center rounded-lg bg-gold/15 text-gold"> 70 <Radio size={18} /> 71 </span> 72 <div> 73 <div className="text-sm font-bold">Federal Contract Opportunities</div> 74 <div className="text-xs text-faint"> 75 Shaped for Galapagos Federal Systems, 8(a) DoD IT and cyber, Air Force and Space Force, HI and NM 76 </div> 77 </div> 78 </div> 79 <div className="flex items-center gap-3"> 80 {isError ? ( 81 <Badge color="var(--color-warn)" subtle> 82 <span className="inline-flex items-center gap-1.5"> 83 <span className="size-1.5 rounded-full bg-[var(--color-warn)]" /> 84 SAM.gov cache unavailable 85 </span> 86 </Badge> 87 ) : ( 88 <Badge color="var(--color-ok)" subtle> 89 <span className="inline-flex items-center gap-1.5"> 90 <span className="size-1.5 rounded-full bg-[var(--color-ok)]" /> 91 Live from SAM.gov{synced ? ` · synced ${timeAgo(synced)}` : ' · not yet synced'} 92 </span> 93 </Badge> 94 )} 95 <button 96 onClick={() => refetch()} 97 className="grid size-8 place-items-center rounded-lg border border-line/70 text-muted hover:text-ink" 98 title="Refresh from cache" 99 > 100 <RefreshCw size={14} className={isFetching ? 'animate-spin' : ''} /> 101 </button> 102 </div> 103 </Panel> 104 105 {/* Filters */} 106 <Panel className="space-y-3 p-4"> 107 <div className="flex flex-wrap items-center gap-4"> 108 <div className="flex items-center gap-2"> 109 <span className="text-[11px] font-bold uppercase tracking-wider text-muted">Agency</span> 110 <select className={selectCls} value={agency} onChange={(e) => setAgency(e.target.value as Agency)}> 111 {agencyOptions.map((a) => ( 112 <option key={a.key} value={a.key}> 113 {a.label} 114 </option> 115 ))} 116 </select> 117 </div> 118 <button className={chip(eightA)} onClick={() => setEightA((v) => !v)}> 119 8(a) set aside 120 </button> 121 <div className="flex items-center gap-1.5"> 122 <span className="text-[11px] font-bold uppercase tracking-wider text-muted">State</span> 123 {['HI', 'NM'].map((s) => ( 124 <button key={s} className={chip(states.includes(s))} onClick={() => toggle(states, setStates, s)}> 125 {s} 126 </button> 127 ))} 128 </div> 129 <label className="ml-auto flex items-center gap-2 rounded-lg border border-line/70 bg-navy-900 px-2.5 py-1.5"> 130 <Search size={14} className="text-faint" /> 131 <input 132 value={q} 133 onChange={(e) => setQ(e.target.value)} 134 placeholder="Search titles…" 135 className="w-44 bg-transparent text-sm text-ink outline-none placeholder:text-faint" 136 /> 137 </label> 138 </div> 139 <div className="flex flex-wrap items-center gap-1.5"> 140 <span className="mr-1 text-[11px] font-bold uppercase tracking-wider text-muted">NAICS</span> 141 {GALAPAGOS.naics.map((code) => ( 142 <button key={code} className={chip(naics.includes(code))} onClick={() => toggle(naics, setNaics, code)}> 143 {code} 144 <span className="ml-1 text-[10px] opacity-70">{NAICS_LABELS[code]}</span> 145 </button> 146 ))} 147 </div> 148 </Panel> 149 150 {/* Galapagos own past performance (USASpending) */} 151 <PastPerformance /> 152 153 {/* Regional wage baseline (BLS OEWS) */} 154 <WageBaselinePanel /> 155 156 {/* Results */} 157 <Panel title="Opportunities" hint={`${rows.length} matching, expand a row for incumbents`}> 158 {isLoading ? ( 159 <p className="py-6 text-center text-muted">Loading opportunities…</p> 160 ) : isError ? ( 161 <p className="py-6 text-center text-warn"> 162 {(error as Error)?.message ?? 'Failed to load opportunities.'} 163 </p> 164 ) : rows.length === 0 ? ( 165 <EmptyState /> 166 ) : ( 167 <table className="w-full text-sm"> 168 <thead> 169 <tr className="text-left text-[11px] uppercase tracking-wider text-faint"> 170 <th className="pb-2 font-semibold">Opportunity</th> 171 <th className="pb-2 font-semibold">Agency</th> 172 <th className="pb-2 font-semibold">NAICS</th> 173 <th className="pb-2 font-semibold">Set Aside</th> 174 <th className="pb-2 font-semibold">Response Due</th> 175 <th className="pb-2" /> 176 </tr> 177 </thead> 178 <tbody className="divide-y divide-line/50"> 179 {rows.map((o) => { 180 const open = openId === o.notice_id 181 return ( 182 <Fragment key={o.notice_id}> 183 <tr 184 className="cursor-pointer align-top hover:bg-navy-800/40" 185 onClick={() => setOpenId(open ? null : o.notice_id)} 186 > 187 <td className="py-3 pr-3"> 188 <div className="flex items-start gap-1.5"> 189 {open ? ( 190 <ChevronDown size={14} className="mt-0.5 shrink-0 text-faint" /> 191 ) : ( 192 <ChevronRight size={14} className="mt-0.5 shrink-0 text-faint" /> 193 )} 194 <div> 195 <div className="font-semibold leading-snug">{o.title || '(untitled notice)'}</div> 196 <div className="mt-0.5 text-xs text-faint"> 197 {o.solicitation_number || 'No solicitation number'} 198 {o.place_of_performance.state ? ` · ${placeLabel(o)}` : ''} 199 </div> 200 </div> 201 </div> 202 </td> 203 <td className="py-3 pr-3 text-muted">{o.sub_agency || o.department || 'n/a'}</td> 204 <td className="py-3 pr-3"> 205 <span className="tabular-nums">{o.naics_code || 'n/a'}</span> 206 {NAICS_LABELS[o.naics_code] && ( 207 <div className="text-[11px] text-faint">{NAICS_LABELS[o.naics_code]}</div> 208 )} 209 </td> 210 <td className="py-3 pr-3"> 211 {o.set_aside_code ? ( 212 <Badge color="var(--color-gold)" subtle> 213 {o.set_aside_code} 214 </Badge> 215 ) : ( 216 <span className="text-faint">n/a</span> 217 )} 218 </td> 219 <td className="py-3 pr-3 tabular-nums text-muted">{fmtDate(o.response_deadline)}</td> 220 <td className="py-3 text-right"> 221 {o.ui_link && ( 222 <a 223 href={o.ui_link} 224 target="_blank" 225 rel="noopener noreferrer" 226 onClick={(e) => e.stopPropagation()} 227 className="inline-flex items-center gap-1.5 rounded-md border border-line/70 px-2.5 py-1 text-xs font-semibold text-muted hover:border-blue/60 hover:text-blue-soft" 228 > 229 SAM.gov <ExternalLink size={12} /> 230 </a> 231 )} 232 </td> 233 </tr> 234 {open && ( 235 <tr> 236 <td colSpan={6} className="bg-navy-950/40 px-3 py-3"> 237 <IncumbentsPanel naics={o.naics_code} /> 238 </td> 239 </tr> 240 )} 241 </Fragment> 242 ) 243 })} 244 </tbody> 245 </table> 246 )} 247 </Panel> 248 </div> 249 ) 250} 251 252// IncumbentsPanel shows who currently holds comparable work in this NAICS, largest awards first, so 253// the team can spot recompetes and teaming targets. Reads the USASpending cache only. 254function IncumbentsPanel({ naics }: { naics: string }) { 255 const { data, isLoading } = useIncumbents(naics || null) 256 if (!naics) return <p className="text-xs text-faint">No NAICS on this notice.</p> 257 if (isLoading) return <p className="text-xs text-muted">Loading incumbents and similar awards…</p> 258 const awards = data ?? [] 259 return ( 260 <div> 261 <div className="mb-2 flex items-center gap-1.5 text-[11px] font-bold uppercase tracking-wider text-gold"> 262 <Building2 size={13} /> Incumbents and similar awards, NAICS {naics} 263 </div> 264 {awards.length === 0 ? ( 265 <p className="text-xs text-faint">No cached awards for this NAICS yet. Run make sync-awards.</p> 266 ) : ( 267 <div className="space-y-1.5"> 268 {awards.map((a) => ( 269 <AwardRow key={a.award_uid} a={a} /> 270 ))} 271 </div> 272 )} 273 </div> 274 ) 275} 276 277// PastPerformance shows Galapagos own award history (their proof they have done this work). 278function PastPerformance() { 279 const { data, isLoading } = useGalapagosAwards() 280 const awards = data ?? [] 281 if (!isLoading && awards.length === 0) return null 282 return ( 283 <Panel 284 title="Galapagos past performance" 285 hint={isLoading ? 'loading' : `${awards.length} awards from USASpending`} 286 > 287 <div className="flex items-center gap-1.5 pb-2 text-[11px] text-faint"> 288 <Trophy size={13} className="text-gold" /> Their own federal award history, evidence of relevant experience. 289 </div> 290 <div className="grid gap-1.5 md:grid-cols-2"> 291 {awards.slice(0, 6).map((a) => ( 292 <AwardRow key={a.award_uid} a={a} /> 293 ))} 294 </div> 295 </Panel> 296 ) 297} 298 299// WageBaselinePanel shows the BLS OEWS regional wage baseline for the Galapagos roles in Hawaii and 300// New Mexico. It is a regional wage baseline, current year, useful for pricing a proposal. 301function WageBaselinePanel() { 302 const { data, isLoading } = useWages() 303 const rows = data ?? [] 304 if (!isLoading && rows.length === 0) return null 305 const year = rows[0]?.year ?? '' 306 return ( 307 <Panel title="Regional wage baseline" hint={isLoading ? 'loading' : `BLS OEWS ${year}, Hawaii and New Mexico`}> 308 <div className="flex items-center gap-1.5 pb-2 text-[11px] text-faint"> 309 <DollarSign size={13} className="text-gold" /> Annual mean wage by role and state, a baseline for proposal pricing. 310 </div> 311 <table className="w-full text-sm"> 312 <thead> 313 <tr className="text-left text-[11px] uppercase tracking-wider text-faint"> 314 <th className="pb-2 font-semibold">Role</th> 315 <th className="pb-2 font-semibold">Occupation (SOC)</th> 316 <th className="pb-2 text-right font-semibold">Hawaii</th> 317 <th className="pb-2 text-right font-semibold">New Mexico</th> 318 </tr> 319 </thead> 320 <tbody className="divide-y divide-line/50"> 321 {rows.map((w) => { 322 const hi = w.areas.find((a) => a.area === 'HI') 323 const nm = w.areas.find((a) => a.area === 'NM') 324 return ( 325 <tr key={w.occupation_code} className="hover:bg-navy-800/40"> 326 <td className="py-2.5 font-semibold">{w.role}</td> 327 <td className="py-2.5 text-xs text-muted">{w.occupation_title}</td> 328 <td className="py-2.5 text-right font-bold tabular-nums text-blue-soft">{fmtUSD(hi?.annual_mean ?? '')}</td> 329 <td className="py-2.5 text-right font-bold tabular-nums text-blue-soft">{fmtUSD(nm?.annual_mean ?? '')}</td> 330 </tr> 331 ) 332 })} 333 </tbody> 334 </table> 335 </Panel> 336 ) 337} 338 339function AwardRow({ a }: { a: FederalAward }) { 340 return ( 341 <div className="flex items-center justify-between gap-3 rounded-lg bg-surface/70 px-3 py-2"> 342 <div className="min-w-0"> 343 <div className="truncate text-sm font-semibold">{a.recipient_name || 'Unknown recipient'}</div> 344 <div className="truncate text-[11px] text-faint"> 345 {a.awarding_sub_agency || a.awarding_agency || 'Federal'} 346 {a.pop_end_date ? ` · ends ${a.pop_end_date}` : ''} 347 </div> 348 </div> 349 <span className="shrink-0 text-sm font-bold tabular-nums text-blue-soft">{fmtUSD(a.award_amount)}</span> 350 </div> 351 ) 352} 353 354function placeLabel(o: SamOpportunity): string { 355 const { city, state } = o.place_of_performance 356 return [city, state].filter(Boolean).join(', ') 357} 358 359function EmptyState() { 360 return ( 361 <div className="py-10 text-center"> 362 <p className="text-sm text-muted">No cached opportunities match these filters yet.</p> 363 <p className="mt-1 text-xs text-faint"> 364 Populate the cache with a real pull:{' '} 365 <code className="rounded bg-navy-900 px-1.5 py-0.5 text-blue-soft">make sync-sam</code> (or{' '} 366 <code className="rounded bg-navy-900 px-1.5 py-0.5 text-blue-soft">npm run sync:sam</code>) with{' '} 367 <code className="rounded bg-navy-900 px-1.5 py-0.5 text-blue-soft">SAM_API_KEY</code> set, then refresh. 368 </p> 369 </div> 370 ) 371} 372