- {STAGES.map((stage) => {
- const n = job[stage.key] || 0
- if (!n) return null
- return (
-
- )
- })}
+
+
+ {[job.department, job.recruiterName || 'Unassigned'].filter(Boolean).join(' · ')}
+
+
+
+
+ )
+}
+
+function StageRow({ job, stage }) {
+ const count = job[stage.key] || 0
+ const pct = job.total ? Math.round((count / job.total) * 100) : 0
+ return (
+
+
+
+ {stage.label}
+
+
+
+
+
{count.toLocaleString()}
+
{pct}%
+
+ )
+}
+
+function JobDetail({ job }) {
+ const interviewRate = job.total ? Math.round((job.interviewed / job.total) * 100) : null
+ const offerRate = job.offered ? Math.round((job.hired / job.offered) * 100) : null
+ const active = job.shortlist + job.screened + job.assessment + job.interviewed
+ const used = STAGES.reduce((n, stage) => n + (job[stage.key] || 0), 0)
+ const barBase = Math.max(used, job.total, 1)
+
+ return (
+
+
+
+
+ {job.department && {job.department}}
+
+ {job.status}
+
+
+
{job.title}
+
+ {job.location && {job.location}}
+
+ Recruiter ·{' '}
+ {job.recruiterName
+ ? {job.recruiterName}
+ : Unassigned}
+
+ {job.daysOpen != null && (
+ Open {job.daysOpen} day{job.daysOpen === 1 ? '' : 's'}
+ )}
+
+
+
+ {job.total.toLocaleString()}
+ unique applicants
+
+
+
+
+
+ Candidate distribution by current stage
+ {job.total.toLocaleString()} applicants
+
+
+ {STAGES.map((stage) => {
+ const n = job[stage.key] || 0
+ if (!n) return null
+ return (
+
+ )
+ })}
+
+
+
+
+
+
Pipeline breakdown
+ Count · share of applicants
+
+
+ {STAGES.map((stage) => (
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+
Attention needed
+
+
+ Candidates on hold
+ {job.onHold}
+
+
+ Job aging
+
+ {job.daysOpen == null ? '—' : `${job.daysOpen} day${job.daysOpen === 1 ? '' : 's'}`}
+
+
+
+ Rejected
+ {job.rejected}
+
+
+
+
+
+
+
Hiring outcome
+
+
+
+
+
+
+
+
)
@@ -79,9 +206,10 @@ export default function Progress() {
const [searchParams, setSearchParams] = useSearchParams()
const deepLinkJobId = searchParams.get('job') || ''
- const [tab, setTab] = useState('overview')
const [selectedId, setSelectedId] = useState(deepLinkJobId)
const [query, setQuery] = useState('')
+ const [status, setStatus] = useState('all')
+ const [page, setPage] = useState(0)
const statsQuery = useQuery({
queryKey: qk.jobs.stats({ top: 500, skip: 0 }),
@@ -94,6 +222,39 @@ export default function Progress() {
const jobs = statsQuery.data ?? []
+ const filtered = useMemo(() => {
+ const term = query.trim().toLowerCase()
+ return jobs
+ .filter((job) => {
+ if (status !== 'all' && String(job.requisitionStatus || '').toLowerCase() !== status) {
+ return false
+ }
+ if (!term) return true
+ return (
+ job.title.toLowerCase().includes(term)
+ || (job.department || '').toLowerCase().includes(term)
+ || (job.location || '').toLowerCase().includes(term)
+ || (job.recruiterName || '').toLowerCase().includes(term)
+ )
+ })
+ .sort((a, b) => (b.total - a.total) || a.title.localeCompare(b.title))
+ }, [jobs, query, status])
+
+ const pageCount = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE))
+ const safePage = Math.min(page, pageCount - 1)
+ const pageRows = filtered.slice(safePage * PAGE_SIZE, safePage * PAGE_SIZE + PAGE_SIZE)
+
+ useEffect(() => {
+ setPage(0)
+ }, [query, status])
+
+ // Deep-link: once jobs load, jump the sidebar page to that role.
+ useEffect(() => {
+ if (!deepLinkJobId || !filtered.length) return
+ const idx = filtered.findIndex((j) => String(j.id) === String(deepLinkJobId))
+ if (idx >= 0) setPage(Math.floor(idx / PAGE_SIZE))
+ }, [deepLinkJobId, filtered])
+
useEffect(() => {
if (!jobs.length) {
setSelectedId('')
@@ -102,7 +263,6 @@ export default function Progress() {
const matchId = (id) => jobs.some((j) => String(j.id) === String(id))
if (deepLinkJobId && matchId(deepLinkJobId)) {
setSelectedId(String(deepLinkJobId))
- setTab('overview')
return
}
if (!selectedId || !matchId(selectedId)) {
@@ -113,7 +273,8 @@ export default function Progress() {
const selectJob = (id) => {
const next = String(id || '')
setSelectedId(next)
- setTab('overview')
+ const idx = filtered.findIndex((j) => String(j.id) === next)
+ if (idx >= 0) setPage(Math.floor(idx / PAGE_SIZE))
setSearchParams((prev) => {
const nextParams = new URLSearchParams(prev)
if (next) nextParams.set('job', next)
@@ -122,102 +283,32 @@ export default function Progress() {
}, { replace: true })
}
- const selected = jobs.find((j) => String(j.id) === String(selectedId)) || jobs[0] || null
-
- const visibleJobs = useMemo(() => {
- const q = query.trim().toLowerCase()
- if (!q) return jobs
- return jobs.filter((job) => (
- job.title.toLowerCase().includes(q)
- || (job.department || '').toLowerCase().includes(q)
- || (job.location || '').toLowerCase().includes(q)
- || (job.recruiterName || '').toLowerCase().includes(q)
- ))
- }, [jobs, query])
+ const selected = jobs.find((j) => String(j.id) === String(selectedId))
+ || filtered[0]
+ || jobs[0]
+ || null
const totalApplicants = sumField(jobs, 'total')
- const activePipeline = sumField(jobs, 'shortlist')
- + sumField(jobs, 'screened')
- + sumField(jobs, 'assessment')
- + sumField(jobs, 'interviewed')
-
- const tableColumns = [
- {
- key: 'title',
- label: 'Job post',
- sortable: true,
- render: (j) => (
-
-
{j.title}
-
- {[j.department, j.location].filter(Boolean).join(' · ') || '—'}
-
-
- ),
- },
- {
- key: 'recruiterName',
- label: 'Recruiter',
- sortable: true,
- render: (j) => (
- j.recruiterName
- ?
{j.recruiterName}
- :
Unassigned
- ),
- },
- {
- key: 'status',
- label: 'Status',
- sortable: true,
- render: (j) =>
{j.status},
- },
- { key: 'total', label: 'Applicants', sortable: true, align: 'right', render: (j) =>
{j.total} },
- { key: 'shortlist', label: 'Shortlisted', sortable: true, align: 'right' },
- { key: 'screened', label: 'Screened', sortable: true, align: 'right' },
- { key: 'interviewed', label: 'Interviewed', sortable: true, align: 'right' },
- { key: 'offered', label: 'Offered', sortable: true, align: 'right' },
- {
- key: 'onHold',
- label: 'On hold',
- sortable: true,
- align: 'right',
- render: (j) =>
{j.onHold},
- },
- {
- key: 'rejected',
- label: 'Rejected',
- sortable: true,
- align: 'right',
- render: (j) =>
{j.rejected},
- },
- ]
+ const activeRoles = jobs.filter((j) => String(j.requisitionStatus || '').toLowerCase() === 'open').length
+ const rangeStart = filtered.length ? safePage * PAGE_SIZE + 1 : 0
+ const rangeEnd = Math.min(filtered.length, safePage * PAGE_SIZE + PAGE_SIZE)
return (
+ )}
/>
-
-
-
-
-
{statsQuery.isPending && (
-
+
)}
{statsQuery.isError && (
@@ -237,194 +328,89 @@ export default function Progress() {