375 lines
15 KiB
JavaScript
375 lines
15 KiB
JavaScript
/* ============================================================
|
|
Talent Pool — the prototype's card grid, now fed by GET /candidate/fetch.
|
|
|
|
The layout, the toolbar, the card and the 8-tab profile modal are the
|
|
originals, unchanged. Only the data source moved.
|
|
|
|
The endpoint returns name, email, experience, application_status, suggested
|
|
job titles and the attached job_posts (with department). It has no skills or
|
|
currentCompany on list rows — those still come from the seed overlay. Each
|
|
record is therefore OVERLAID on a seed candidate: real values win, seed fills
|
|
the rest, so the card renders exactly as it always did.
|
|
|
|
Clicking a card opens CandidateProfile in place. It used to deep-link into
|
|
/candidates, which stopped resolving once the ids became real user_ids.
|
|
|
|
The card is seed-overlaid, but the MODAL is not: it re-reads the candidate by
|
|
`userId` through GET /candidate/fetch?user_id=, which is a far richer payload
|
|
than the list rows — résumé text, the agent's verdict, documents, and the
|
|
interviews / notes / activity / feedback collections, all writable from their
|
|
own tabs. That switch happens inside CandidateProfile; passing `userId` is the
|
|
whole trigger.
|
|
|
|
A SECOND read fires on that same click: GET /pipeline/candidate/score/fetch,
|
|
the pipeline board's score endpoint, which returns the candidate's current
|
|
ats_results row. The two run concurrently — this screen owns the score call,
|
|
CandidateProfile owns the detail call — and the score wins over both the
|
|
list row's denormalised ai_score and the seed placeholder. It is deliberately
|
|
NOT fetched for the grid: 100 cards would be 100 requests, and the card only
|
|
ever needed a number good enough to sort by eye.
|
|
============================================================ */
|
|
|
|
import { useMemo, useState } from 'react'
|
|
import { useNavigate } from 'react-router-dom'
|
|
import { useQuery } from '@tanstack/react-query'
|
|
|
|
import { DEFAULT_PAGE_SIZE, PageSizeField } from '../ui/DataTable'
|
|
import PageHeader from '../ui/PageHeader'
|
|
import { Avatar, Badge, EmptyState, Icon, ScoreChip } from '../ui/primitives'
|
|
import { useToast } from '../ui/Toast'
|
|
import CandidateProfile from './CandidateProfile'
|
|
import { AtsMatch } from './Candidates'
|
|
import { seedQuery, useSeedMutation } from '../data/seedQueries'
|
|
import { qk } from '../lib/queryKeys'
|
|
import { exportStyledXlsx } from '../lib/exportXlsx'
|
|
import { friendlyAuthError } from '../lib/errors'
|
|
import * as candidatesApi from '../api/candidates'
|
|
import * as jobPostsApi from '../api/jobPosts'
|
|
import * as pipelineApi from '../api/pipeline'
|
|
import { avatarColor, initials as initialsOf } from '../data/seed'
|
|
|
|
/** Backend GET /candidate/fetch caps `limit` at 100. */
|
|
const PAGE_SIZE_MAX = 100
|
|
|
|
const STAGE_ORDER = ['Shortlist', 'Screening', 'Assessment', 'Interview', 'Offer', 'Approved', 'Hired']
|
|
|
|
/** "6 years" -> 6. The column is free text, so anything unparseable defers to seed. */
|
|
function years(value) {
|
|
const n = parseInt(value, 10)
|
|
return Number.isFinite(n) ? n : null
|
|
}
|
|
|
|
/**
|
|
* Distinct departments from the candidate's assigned + suggested job posts.
|
|
* Seed templates also carry a department, but that is a prototype leftover and
|
|
* must not drive the toolbar filter — it would never match /job/departments/fetch.
|
|
*/
|
|
function departmentsOf(row) {
|
|
const seen = new Set()
|
|
const out = []
|
|
const add = (value) => {
|
|
const d = typeof value === 'string' ? value : ''
|
|
if (!d || seen.has(d)) return
|
|
seen.add(d)
|
|
out.push(d)
|
|
}
|
|
add(row.assigned_job_post?.department)
|
|
for (const jp of row.job_posts || []) add(jp.department)
|
|
return out
|
|
}
|
|
|
|
/**
|
|
* One API record overlaid on one seed candidate.
|
|
*
|
|
* `id` deliberately stays the SEED id: the favourite/advance seed mutations key
|
|
* off it, so a UUID here would silently drop those writes. The real identifier
|
|
* rides along on `userId`, and that is what the profile modal reads its live
|
|
* record with.
|
|
*/
|
|
function merge(row, template) {
|
|
const name = row.name || template.name
|
|
const title = (row.job_posts || []).map((j) => j.title).find(Boolean)
|
|
|| row.job_title
|
|
|| row.current_title
|
|
const stage = pipelineApi.STAGE_FROM_STATUS[row.application_status] || template.stage
|
|
const experience = years(row.experience)
|
|
const departments = departmentsOf(row)
|
|
|
|
return {
|
|
...template,
|
|
userId: row.user_id,
|
|
name,
|
|
initials: initialsOf(name),
|
|
color: avatarColor(name),
|
|
email: row.email || template.email,
|
|
experience: experience ?? template.experience,
|
|
stage,
|
|
status: stage,
|
|
currentTitle: title || template.currentTitle,
|
|
jobTitle: title || template.jobTitle,
|
|
// Live job-post departments only. Seed department is left on `department`
|
|
// for the seed-only profile modal, but the filter reads `departments`.
|
|
departments,
|
|
department: departments[0] || template.department,
|
|
// Prefer real Form / platform tags from manual_upload; seed only as fallback.
|
|
source: row.source || template.source,
|
|
// NO seed fallback. `ai_score` is the candidate's current ats_results row,
|
|
// resolved server-side; null means the scoring engine never scored this
|
|
// person, and the card renders nothing rather than a plausible fake number
|
|
// a recruiter would read as a real match.
|
|
aiScore: row.ai_score ?? null,
|
|
recommendation: row.recommendation ?? null,
|
|
}
|
|
}
|
|
|
|
/**
|
|
* `inbox` holds one row per (user, message), so a candidate who mailed us three
|
|
* times arrives three times. Collapse onto the person before pairing templates,
|
|
* otherwise one candidate would occupy three cards and three seed identities.
|
|
*/
|
|
function buildPool(rows, templates) {
|
|
if (!templates.length) return []
|
|
const byPerson = new Map()
|
|
for (const row of rows) {
|
|
const key = row.user_id ?? `inbox-${row.inbox_id}`
|
|
if (!byPerson.has(key)) byPerson.set(key, row)
|
|
}
|
|
return [...byPerson.values()].map((row, i) => merge(row, templates[i % templates.length]))
|
|
}
|
|
|
|
export default function TalentPool() {
|
|
const { toast } = useToast()
|
|
const { data: templates = [] } = useQuery(seedQuery('candidates'))
|
|
const updateCandidates = useSeedMutation('candidates')
|
|
|
|
const [q, setQ] = useState('')
|
|
const [dept, setDept] = useState('')
|
|
const [pageSize, setPageSize] = useState(DEFAULT_PAGE_SIZE)
|
|
const [profileFor, setProfileFor] = useState(null)
|
|
const [atsFor, setAtsFor] = useState(null)
|
|
const navigate = useNavigate()
|
|
|
|
// Real candidates get the full profile PAGE; the in-place modal remains only
|
|
// for seed cards that have no user account to deep-link.
|
|
const openProfile = (c) => {
|
|
if (c.userId) navigate(`/candidate/${c.userId}`)
|
|
else setProfileFor(c)
|
|
}
|
|
|
|
const query = useQuery({
|
|
queryKey: qk.candidates.list({ limit: pageSize }),
|
|
queryFn: () => candidatesApi.list({ limit: pageSize }),
|
|
})
|
|
const deptsQuery = useQuery({
|
|
queryKey: qk.jobPosts.departments(),
|
|
queryFn: async () => {
|
|
const res = await jobPostsApi.listDepartments()
|
|
return Array.isArray(res?.data) ? res.data : []
|
|
},
|
|
})
|
|
const departments = deptsQuery.data ?? []
|
|
|
|
const pool = useMemo(
|
|
() => buildPool(candidatesApi.toRows(query.data), templates),
|
|
[query.data, templates],
|
|
)
|
|
|
|
/**
|
|
* The clicked candidate's current ATS score, from the pipeline board's own
|
|
* endpoint. `enabled` is the "only on click" rule: with no open profile there
|
|
* is no userId, and the query never runs. React Query caches it per user, so
|
|
* re-opening the same card repaints from cache.
|
|
*
|
|
* Sent WITHOUT job_post_id on purpose. The pool is a cross-job view — it has
|
|
* no job filter and most rows carry no assigned post — so pinning would only
|
|
* ever hide a score that exists under some other post. Unpinned, the endpoint
|
|
* answers with the newest current score the candidate has anywhere.
|
|
*/
|
|
const scoreQuery = useQuery({
|
|
queryKey: qk.pipeline.candidateScore({ userId: profileFor?.userId ?? null }),
|
|
queryFn: () => pipelineApi.fetchCandidateScore({ userId: profileFor.userId }),
|
|
select: pipelineApi.toAtsScore,
|
|
enabled: Boolean(profileFor?.userId),
|
|
})
|
|
|
|
// A candidate with no ats_results row answers `null`, which must read as "no
|
|
// live score" and leave the existing value alone — not as a score of zero.
|
|
const atsScore = scoreQuery.data?.overall_score ?? null
|
|
|
|
const list = useMemo(
|
|
() =>
|
|
pool.filter((c) => {
|
|
if (dept && !(c.departments || []).includes(dept)) return false
|
|
if (q && !(c.name + c.currentCompany + c.skills.join(' ')).toLowerCase().includes(q.toLowerCase())) return false
|
|
return true
|
|
}),
|
|
[pool, q, dept],
|
|
)
|
|
|
|
// Both mirror Candidates.jsx so a change made here shows up there too. The
|
|
// card renders neither favourite nor stage, so only the open modal restates.
|
|
// Favourite is a real PATCH once the modal holds a userId; this seed path is
|
|
// the fallback for inbox rows that were never linked to a user.
|
|
function toggleFav(c) {
|
|
updateCandidates((cs) => cs.map((x) => (x.id === c.id ? { ...x, favorite: !x.favorite } : x)))
|
|
setProfileFor((p) => (p && p.id === c.id ? { ...p, favorite: !p.favorite } : p))
|
|
toast(c.favorite ? 'Removed from favorites' : `${c.name} added to favorites`, 'success')
|
|
}
|
|
|
|
function advance(c) {
|
|
const i = STAGE_ORDER.indexOf(c.stage)
|
|
if (i === -1 || i >= STAGE_ORDER.length - 1) {
|
|
toast(`${c.name} cannot be advanced further`, 'warning')
|
|
return
|
|
}
|
|
const stage = STAGE_ORDER[i + 1]
|
|
updateCandidates((cs) => cs.map((x) => (x.id === c.id ? { ...x, stage, status: stage } : x)))
|
|
setProfileFor((p) => (p && p.id === c.id ? { ...p, stage, status: stage } : p))
|
|
toast(`${c.name} moved to ${stage}`, 'success')
|
|
}
|
|
|
|
/* CSV of the FILTERED grid, built client-side — there is no /candidate export
|
|
endpoint (jobs and reports each own theirs). Exporting `list` rather than
|
|
`pool` means the file always matches what the recruiter is looking at,
|
|
search and department filter included. Company/skills are seed-overlay
|
|
values, same as the cards render. */
|
|
async function exportCsv() {
|
|
if (!list.length) {
|
|
toast('Nothing to export — current filters match no candidates', 'warning')
|
|
return
|
|
}
|
|
try {
|
|
await exportStyledXlsx({
|
|
filename: `talent-pool-${new Date().toISOString().slice(0, 10)}`,
|
|
title: 'Talent Pool',
|
|
subtitle: `${list.length} candidate${list.length === 1 ? '' : 's'} · exported ${new Date().toLocaleDateString()}`,
|
|
columns: [
|
|
{ header: 'Name', key: 'name', width: 24 },
|
|
{ header: 'Email', key: 'email', width: 28 },
|
|
{ header: 'Current Title', key: 'title', width: 24 },
|
|
{ header: 'Company', key: 'company', width: 20 },
|
|
{ header: 'Departments', key: 'departments', width: 22 },
|
|
{ header: 'Stage', key: 'stage', width: 13 },
|
|
{ header: 'Experience (yrs)', key: 'experience', width: 14 },
|
|
{ header: 'Source', key: 'source', width: 16 },
|
|
{ header: 'AI Score', key: 'aiScore', width: 10 },
|
|
{ header: 'Skills', key: 'skills', width: 40 },
|
|
],
|
|
rows: list.map((c) => ({
|
|
name: c.name, email: c.email, title: c.currentTitle, company: c.currentCompany,
|
|
departments: (c.departments || []).join('; '), stage: c.stage,
|
|
experience: c.experience, source: c.source, aiScore: c.aiScore ?? '',
|
|
skills: (c.skills || []).join('; '),
|
|
})),
|
|
})
|
|
toast(`Exported ${list.length} candidate${list.length === 1 ? '' : 's'}`, 'success')
|
|
} catch {
|
|
toast('Export failed', 'error')
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="page">
|
|
<PageHeader
|
|
title="Talent Pool"
|
|
sub={<>{pool.length} silver-medalists & passive candidates to re-engage</>}
|
|
actions={
|
|
<button className="btn btn-primary" onClick={() => toast('Talent campaign created', 'success')}>
|
|
<Icon name="send" /> Start Campaign
|
|
</button>
|
|
}
|
|
/>
|
|
|
|
<div className="card mb-18">
|
|
<div className="card-body" style={{ padding: 16 }}>
|
|
<div className="toolbar" style={{ marginBottom: 0 }}>
|
|
<div className="toolbar-search">
|
|
<Icon name="search" />
|
|
<input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Search by name, skill, company…" />
|
|
</div>
|
|
<select className="select" value={dept} onChange={(e) => setDept(e.target.value)}>
|
|
<option value="">All Departments</option>
|
|
{departments.map((d) => <option key={d} value={d}>{d}</option>)}
|
|
</select>
|
|
<button className="btn btn-secondary" onClick={exportCsv}>
|
|
<Icon name="download" /> Export
|
|
</button>
|
|
<PageSizeField
|
|
value={pageSize}
|
|
onChange={setPageSize}
|
|
max={PAGE_SIZE_MAX}
|
|
label="Show"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid g-3">
|
|
{list.length === 0 ? (
|
|
<div style={{ gridColumn: '1/-1' }}>
|
|
{/* Same slot, same component — a failed fetch must not read as "no results". */}
|
|
{query.isError ? (
|
|
<EmptyState title="Could not load talent pool">
|
|
{friendlyAuthError(query.error, 'Please try again.')}
|
|
</EmptyState>
|
|
) : query.isPending ? (
|
|
<EmptyState title="Loading talent pool…">Fetching candidates.</EmptyState>
|
|
) : (
|
|
<EmptyState title="No talent found">Try a different search or department.</EmptyState>
|
|
)}
|
|
</div>
|
|
) : (
|
|
list.map((c) => (
|
|
<div
|
|
key={c.id}
|
|
className="card"
|
|
style={{ cursor: 'pointer' }}
|
|
onClick={() => openProfile(c)}
|
|
>
|
|
<div className="card-body">
|
|
<div className="flex items-center gap-12" style={{ marginBottom: 12 }}>
|
|
<Avatar name={c.name} initials={c.initials} color={c.color} className="avatar-lg" />
|
|
<div style={{ flex: 1, minWidth: 0 }}>
|
|
<div className="lr-title">{c.name}</div>
|
|
<div className="lr-sub">{c.currentTitle}</div>
|
|
</div>
|
|
{c.aiScore != null && <ScoreChip score={c.aiScore} />}
|
|
</div>
|
|
<div className="k-tags" style={{ marginBottom: 12 }}>
|
|
{(c.skills ?? []).slice(0, 4).map((s) => <span className="tag" key={s}>{s}</span>)}
|
|
</div>
|
|
<div className="divider" style={{ margin: '12px 0' }} />
|
|
<div className="flex items-center" style={{ justifyContent: 'space-between' }}>
|
|
<span className="cell-sub"><Icon name="briefcase" /> {c.experience} yrs</span>
|
|
<span className="cell-sub">{c.currentCompany}</span>
|
|
<Badge className="b-gray">{c.source}</Badge>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
|
|
{atsFor && (
|
|
<AtsMatch
|
|
candidate={atsFor}
|
|
onClose={() => setAtsFor(null)}
|
|
onProfile={(c) => { setAtsFor(null); openProfile(c) }}
|
|
/>
|
|
)}
|
|
|
|
{profileFor && (
|
|
<CandidateProfile
|
|
candidate={profileFor}
|
|
atsScore={atsScore}
|
|
recommendation={scoreQuery.data?.band ?? null}
|
|
onClose={() => setProfileFor(null)}
|
|
onAdvance={advance}
|
|
onToggleFav={toggleFav}
|
|
onAtsMatch={(c) => { setProfileFor(null); setAtsFor(c) }}
|
|
/>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|