Recruitment Pipeline

The recruitment module provides a complete hiring pipeline from job posting to candidate evaluation. It includes job listing management, a drag-ready kanban board for applicant tracking, and detailed candidate profiles with interview timelines.

Job Postings

Route: /recruitment

Overview of all open positions with pipeline summaries.

• Job cards -- each card shows job title, department, location, posted date, application count, and pipeline mini chart
• Status indicators -- Open, Closed, Draft badges
• Pipeline summary -- mini horizontal bar showing applicant distribution across stages
• Actions -- View Applicants, Edit, Close Position

import { JobCard } from "@/components/recruitment/job-card"
import { PipelineMini } from "@/components/recruitment/pipeline-mini"

Job Card Layout

┌──────────────────────────────────────┐
│ Senior Backend Engineer              │
│ Engineering · Remote · Posted Mar 15 │
│                                       │
│ 24 applicants                        │
│ ██████░░░░░ Applied → Interview → Offer │
│                                       │
│ [View Applicants]  [Edit]  [Close]   │
└──────────────────────────────────────┘

Applicant Kanban Board

Route: /recruitment/[jobId]/applicants

A visual kanban board for tracking applicants through hiring stages.

• Stage columns -- Applied, Screening, Interview, Technical, Offer, Hired, Rejected
• Applicant cards -- avatar, name, current role, applied date, and rating stars
• Column headers -- stage name with applicant count
• Card actions -- click to view full profile, quick actions for move to next stage or reject
• Drag-ready -- card layout designed for drag-and-drop (wire up @hello-pangea/dnd or similar)

import { KanbanBoard } from "@/components/recruitment/kanban-board"
import { ApplicantCard } from "@/components/recruitment/applicant-card"

Kanban Board Layout

┌──────────┬──────────┬──────────┬──────────┬──────────┐
│ Applied  │ Screen   │ Interview│ Technical│ Offer    │
│ 12       │ 5        │ 3        │ 2        │ 1        │
├──────────┼──────────┼──────────┼──────────┼──────────┤
│ ┌──────┐ │ ┌──────┐ │ ┌──────┐ │ ┌──────┐ │ ┌──────┐ │
│ │ Card │ │ │ Card │ │ │ Card │ │ │ Card │ │ │ Card │ │
│ └──────┘ │ └──────┘ │ └──────┘ │ └──────┘ │ └──────┘ │
│ ┌──────┐ │ ┌──────┐ │ ┌──────┐ │ ┌──────┐ │          │
│ │ Card │ │ │ Card │ │ │ Card │ │ │ Card │ │          │
│ └──────┘ │ └──────┘ │ └──────┘ │ └──────┘ │          │
└──────────┴──────────┴──────────┴──────────┴──────────┘

Applicant Profile

Route: /recruitment/applicants/[id]

Detailed view of an individual candidate.

Applicant Header

Hero section with avatar, name, current position, email, phone, location, applied position, and current stage badge.

import { ApplicantHeader } from "@/components/recruitment/applicant-header"

Interview Timeline

A vertical timeline showing all interview stages with:

• Stage name and scheduled date/time
• Interviewer name and role
• Status -- Completed, Scheduled, Pending
• Rating scorecard -- interviewer's rating (1-5 stars) and notes
• Feedback -- qualitative comments from each interviewer

import { InterviewTimeline } from "@/components/recruitment/interview-timeline"

Timeline Layout

● Applied                    Mar 10
│ Resume received and logged
│
● Phone Screening            Mar 12  ★★★★☆
│ Sarah Chen · HR Manager
│ "Strong communication, relevant experience"
│
● Technical Interview        Mar 15  ★★★★★
│ Marcus Johnson · VP Eng
│ "Excellent system design answers"
│
○ Final Interview            Mar 20  (Scheduled)
│ Leadership panel
│
○ Offer Decision             Pending

Candidate Actions

• Move to Next Stage -- advance the candidate to the next pipeline stage
• Schedule Interview -- create an interview with date, time, and interviewer selection
• Reject -- reject with reason selection and optional feedback email
• Download Resume -- download the candidate's uploaded resume

Data Sources

Data	Source	Location
Job postings	jobPostings	data/seed.ts
Applicants	applicants	data/seed.ts

Next Steps

• Design Tokens -- oklch color system and theming
• Customization -- adapting the kit for your needs