Which module would you like me to implement next?

10. Candidates Module

10.1 Candidates Hook ( src/hooks/useCandidates.ts )

typescript
import { useState, useEffect, useCallback } from 'react';
import { Candidate, TimelineEvent } from '../types';
import { api } from '../services/api';

interface UseCandidatesParams {
search?: string;
stage?: string;
page?: number;
pageSize?: number;
}

interface UseCandidatesReturn {
candidates: Candidate[];
loading: boolean;
error: string | null;
total: number;
totalPages: number;
currentPage: number;
refetch: () => Promise<void>;
updateCandidate: (id: string, updates: Partial<Candidate>) => Promise<void>;
moveCandidateStage: (candidateId: string, newStage: Candidate['stage']) => Promise<void>;
getCandidateTimeline: (id: string) => Promise<TimelineEvent[]>;
hasNextPage: boolean;
fetchNextPage: () => Promise<void>;
}

export const useCandidates = (params: UseCandidatesParams = {}): UseCandidatesReturn => {

const [candidates, setCandidates] = useState<Candidate[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const [total, setTotal] = useState(0);
const [totalPages, setTotalPages] = useState(0);
const [currentPage, setCurrentPage] = useState(params.page || 1);
const [hasNextPage, setHasNextPage] = useState(false);

const fetchCandidates = useCallback(async (page = 1, append = false) => {

try {
if (!append) setLoading(true);
setError(null);

const response = await api.getCandidates({

...params,
page,
 pageSize: params.pageSize || 50
});

if (append) {
setCandidates(prev => [...prev, ...response.data]);
} else {
setCandidates(response.data);
}

setTotal(response.total);
setTotalPages(response.totalPages);
setCurrentPage(page);
setHasNextPage(page < response.totalPages);
} catch (err) {
setError(err instanceof Error ? err.message : 'Failed to fetch candidates');
} finally {
setLoading(false);
}
}, [params]);

const fetchNextPage = async () => {

if (hasNextPage && !loading) {
await fetchCandidates(currentPage + 1, true);
}
};

useEffect(() => {
fetchCandidates(1, false);
}, [fetchCandidates]);

const updateCandidate = async (id: string, updates: Partial<Candidate>) => {

try {
setError(null);
await api.updateCandidate(id, updates);

// Optimistic update
setCandidates(prev =>
prev.map(candidate =>
candidate.id === id ? { ...candidate, ...updates } : candidate
)
);
} catch (err) {
setError(err instanceof Error ? err.message : 'Failed to update candidate');
await fetchCandidates(1, false); // Revert optimistic update
 throw err;
}
};

const moveCandidateStage = async (candidateId: string, newStage: Candidate['stage']) => {

await updateCandidate(candidateId, { stage: newStage });
};

const getCandidateTimeline = async (id: string): Promise<TimelineEvent[]> => {

try {
const timeline = await api.getCandidateTimeline(id);
return timeline;
} catch (err) {
console.error('Failed to fetch timeline:', err);
return [];
}
};

return {
candidates,
loading,
error,
total,
totalPages,
currentPage,
refetch: () => fetchCandidates(1, false),
updateCandidate,
moveCandidateStage,
getCandidateTimeline,
hasNextPage,
fetchNextPage
};
};

10.2 Candidate Card Component ( src/components/candidates/CandidateCard.tsx )

typescript
import React from 'react';
import { Candidate } from '../../types';
import { Mail, Calendar, User } from 'lucide-react';
import { formatDate, getInitials } from '../../utils/helpers';
import clsx from 'clsx';

interface CandidateCardProps {
candidate: Candidate;
onClick?: (candidate: Candidate) => void;
isDragging?: boolean;
showStage?: boolean;
}

const stageColors = {
applied: 'bg-blue-100 text-blue-800',
screen: 'bg-yellow-100 text-yellow-800',
tech: 'bg-purple-100 text-purple-800',
offer: 'bg-green-100 text-green-800',
hired: 'bg-emerald-100 text-emerald-800',
rejected: 'bg-red-100 text-red-800'
};

const stageLabels = {
applied: 'Applied',
screen: 'Screening',
tech: 'Technical',
offer: 'Offer',
hired: 'Hired',
rejected: 'Rejected'
};

export const CandidateCard: React.FC<CandidateCardProps> = ({

candidate,
onClick,
isDragging = false,
showStage = true
}) => {
return (
<div
onClick={() => onClick?.(candidate)}
className={clsx(
'bg-white rounded-lg border border-gray-200 p-4 transition-all duration-200',
{
 'cursor-pointer hover:shadow-md hover:border-gray-300': onClick,
'opacity-50': isDragging,
}
)}
>
<div className="flex items-start space-x-3">
{/* Avatar */}
<div className="flex-shrink-0">
<div className="h-10 w-10 rounded-full bg-blue-500 flex items-center justify-center text-white font-mediu
{getInitials(candidate.name)}
</div>
</div>

{/* Content */}

<div className="flex-1 min-w-0">
<div className="flex items-center justify-between">
<h3 className="text-sm font-medium text-gray-900 truncate">
{candidate.name}
</h3>
{showStage && (
<span
className={clsx(
'inline-flex items-center px-2 py-1 rounded-full text-xs font-medium',
stageColors[candidate.stage]
)}
>
{stageLabels[candidate.stage]}
</span>
)}
</div>

<div className="mt-1 flex items-center space-x-4 text-xs text-gray-500">

<div className="flex items-center">
<Mail className="h-3 w-3 mr-1" />
<span className="truncate">{candidate.email}</span>
</div>
</div>

<div className="mt-2 flex items-center text-xs text-gray-500">

<Calendar className="h-3 w-3 mr-1" />
<span>Applied {formatDate(candidate.createdAt)}</span>
</div>

{candidate.notes && candidate.notes.length > 0 && (

 <div className="mt-2">
<div className="text-xs text-gray-500">
{candidate.notes.length} note{candidate.notes.length !== 1 ? 's' : ''}
</div>
</div>
)}
</div>
</div>
</div>
);
};

10.3 Virtualized Candidates List ( src/components/candidates/CandidatesList.tsx )

typescript
import React, { useCallback, useMemo } from 'react';
import { FixedSizeList as List } from 'react-window';
import InfiniteLoader from 'react-window-infinite-loader';
import { Candidate } from '../../types';
import { CandidateCard } from './CandidateCard';
import { Input } from '../ui/Input';
import { Select } from '../ui/Select';
import { Search, Users } from 'lucide-react';

interface CandidatesListProps {
candidates: Candidate[];
loading: boolean;
hasNextPage: boolean;
onCandidateClick: (candidate: Candidate) => void;
onLoadMore: () => Promise<void>;
search: string;
stage: string;
onSearchChange: (search: string) => void;
onStageChange: (stage: string) => void;
}

const ITEM_HEIGHT = 120;

const LIST_HEIGHT = 600;

export const CandidatesList: React.FC<CandidatesListProps> = ({

candidates,
loading,
hasNextPage,
onCandidateClick,
onLoadMore,
search,
stage,
onSearchChange,
onStageChange
}) => {
// Filter candidates locally for search
const filteredCandidates = useMemo(() => {
if (!search) return candidates;

const searchLower = search.toLowerCase();

return candidates.filter(candidate =>
candidate.name.toLowerCase().includes(searchLower) ||
candidate.email.toLowerCase().includes(searchLower)
 );
}, [candidates, search]);

const itemCount = hasNextPage ? filteredCandidates.length + 1 : filteredCandidates.length;

const isItemLoaded = useCallback((index: number) => {
return !!filteredCandidates[index];
}, [filteredCandidates]);

const CandidateItem = ({ index, style }: { index: number; style: React.CSSProperties }) => {

const candidate = filteredCandidates[index];

if (!candidate) {
return (
<div style={style} className="flex items-center justify-center">
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
</div>
);
}

return (
<div style={style} className="px-4 py-2">
<CandidateCard
candidate={candidate}
onClick={onCandidateClick}
/>
</div>
);
};

const stageOptions = [
{ value: '', label: 'All Stages' },
{ value: 'applied', label: 'Applied' },
{ value: 'screen', label: 'Screening' },
{ value: 'tech', label: 'Technical' },
{ value: 'offer', label: 'Offer' },
{ value: 'hired', label: 'Hired' },
{ value: 'rejected', label: 'Rejected' }
];

if (loading && candidates.length === 0) {

return (
<div className="flex items-center justify-center h-64">
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
</div>
 );
}

return (
<div className="bg-white shadow rounded-lg overflow-hidden">
{/* Filters */}
<div className="p-4 border-b border-gray-200">
<div className="flex flex-col sm:flex-row gap-4">
<div className="flex-1 relative">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
<Input
placeholder="Search candidates by name or email..."
value={search}
onChange={(e) => onSearchChange(e.target.value)}
className="pl-10"
/>
</div>

<Select
value={stage}
onChange={(e) => onStageChange(e.target.value)}
options={stageOptions}
className="w-full sm:w-48"
/>
</div>

<div className="mt-2 text-sm text-gray-500 flex items-center">

<Users className="h-4 w-4 mr-1" />
{filteredCandidates.length} candidates
</div>
</div>

{/* Virtualized List */}

{filteredCandidates.length > 0 ? (
<InfiniteLoader
isItemLoaded={isItemLoaded}
itemCount={itemCount}
loadMoreItems={onLoadMore}
>
{({ onItemsRendered, ref }) => (
<List
ref={ref}
height={LIST_HEIGHT}
itemCount={itemCount}
 itemSize={ITEM_HEIGHT}
onItemsRendered={onItemsRendered}
>
{CandidateItem}
</List>
)}
</InfiniteLoader>
):(
<div className="text-center py-12">
<Users className="mx-auto h-12 w-12 text-gray-400" />
<h3 className="mt-2 text-sm font-medium text-gray-900">No candidates found</h3>
<p className="mt-1 text-sm text-gray-500">
{search ? 'Try adjusting your search terms.' : 'No candidates match the selected criteria.'}
</p>
</div>
)}
</div>
);
};

10.4 Kanban Board Component ( src/components/candidates/KanbanBoard.tsx )

typescript
import React, { useState, useMemo } from 'react';
import {
DndContext,
DragEndEvent,
DragOverlay,
DragStartEvent,
PointerSensor,
useSensor,
useSensors,
closestCorners,
} from '@dnd-kit/core';
import {
SortableContext,
verticalListSortingStrategy,
} from '@dnd-kit/sortable';
import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import { Candidate } from '../../types';
import { CandidateCard } from './CandidateCard';
import clsx from 'clsx';

interface KanbanColumnProps {
title: string;
stage: Candidate['stage'];
candidates: Candidate[];
onCandidateClick: (candidate: Candidate) => void;
count: number;
}

const KanbanColumn: React.FC<KanbanColumnProps> = ({

title,
stage,
candidates,
onCandidateClick,
count
}) => {
const stageColors = {
applied: 'border-blue-500 bg-blue-50',
screen: 'border-yellow-500 bg-yellow-50',
tech: 'border-purple-500 bg-purple-50',
offer: 'border-green-500 bg-green-50',
hired: 'border-emerald-500 bg-emerald-50',
rejected: 'border-red-500 bg-red-50'
 };

return (
<div className="flex-1 min-w-80">
<div className={clsx(
'rounded-lg border-2 border-dashed h-full min-h-[600px]',
stageColors[stage]
)}>
<div className="p-4 border-b border-gray-200 bg-white rounded-t-lg">
<div className="flex items-center justify-between">
<h3 className="font-medium text-gray-900">{title}</h3>
<span className="bg-gray-100 text-gray-600 px-2 py-1 rounded-full text-sm">
{count}
</span>
</div>
</div>

<div className="p-4 space-y-3 overflow-y-auto max-h-[500px]">

<SortableContext items={candidates.map(c => c.id)} strategy={verticalListSortingStrategy}>
{candidates.map(candidate => (
<SortableCandidateCard
key={candidate.id}
candidate={candidate}
onClick={onCandidateClick}
/>
))}
</SortableContext>

{candidates.length === 0 && (

<div className="text-center py-8 text-gray-400">
<div className="text-sm">No candidates in this stage</div>
</div>
)}
</div>
</div>
</div>
);
};

interface SortableCandidateCardProps {
candidate: Candidate;
onClick: (candidate: Candidate) => void;
}
const SortableCandidateCard: React.FC<SortableCandidateCardProps> = ({
candidate,
onClick
}) => {
const {
attributes,
listeners,
setNodeRef,
transform,
transition,
isDragging,
} = useSortable({ id: candidate.id });

const style = {
transform: CSS.Transform.toString(transform),
transition,
};

return (
<div ref={setNodeRef} style={style} {...attributes} {...listeners}>
<CandidateCard
candidate={candidate}
onClick={onClick}
isDragging={isDragging}
showStage={false}
/>
</div>
);
};

interface KanbanBoardProps {
candidates: Candidate[];
onCandidateClick: (candidate: Candidate) => void;
onMoveCandidate: (candidateId: string, newStage: Candidate['stage']) => Promise<void>;
}

const stages: { stage: Candidate['stage']; title: string }[] = [

{ stage: 'applied', title: 'Applied' },
{ stage: 'screen', title: 'Screening' },
{ stage: 'tech', title: 'Technical' },
{ stage: 'offer', title: 'Offer' },
{ stage: 'hired', title: 'Hired' },
{ stage: 'rejected', title: 'Rejected' },
];
export const KanbanBoard: React.FC<KanbanBoardProps> = ({
candidates,
onCandidateClick,
onMoveCandidate
}) => {
const [activeCandidate, setActiveCandidate] = useState<Candidate | null>(null);
const sensors = useSensors(useSensor(PointerSensor));

const candidatesByStage = useMemo(() => {

return stages.reduce((acc, { stage }) => {
acc[stage] = candidates.filter(candidate => candidate.stage === stage);
return acc;
}, {} as Record<Candidate['stage'], Candidate[]>);
}, [candidates]);

const handleDragStart = (event: DragStartEvent) => {

const candidate = candidates.find(c => c.id === event.active.id);
setActiveCandidate(candidate || null);
};

const handleDragEnd = async (event: DragEndEvent) => {

const { active, over } = event;
setActiveCandidate(null);

if (!over) return;

const candidateId = active.id as string;

const newStage = over.id as Candidate['stage'];

const candidate = candidates.find(c => c.id === candidateId);

if (!candidate || candidate.stage === newStage) return;

try {
await onMoveCandidate(candidateId, newStage);
} catch (error) {
console.error('Failed to move candidate:', error);
}
};

return (
<DndContext
sensors={sensors}
collisionDetection={closestCorners}
 onDragStart={handleDragStart}
onDragEnd={handleDragEnd}
>
<div className="flex gap-6 overflow-x-auto pb-4">
{stages.map(({ stage, title }) => (
<KanbanColumn
key={stage}
title={title}
stage={stage}
candidates={candidatesByStage[stage]}
onCandidateClick={onCandidateClick}
count={candidatesByStage[stage].length}
/>
))}
</div>

<DragOverlay>
{activeCandidate && (
<CandidateCard
candidate={activeCandidate}
isDragging
showStage={false}
/>
)}
</DragOverlay>
</DndContext>
);
};

10.5 Timeline Component ( src/components/candidates/Timeline.tsx )

typescript
import React from 'react';
import { TimelineEvent } from '../../types';
import { formatDateTime } from '../../utils/helpers';
import {
ArrowRight,
MessageSquare,
FileText,
User,
CheckCircle,
XCircle,
Clock
} from 'lucide-react';
import clsx from 'clsx';

interface TimelineProps {
events: TimelineEvent[];
loading?: boolean;
}

const getEventIcon = (type: TimelineEvent['type']) => {

switch (type) {
case 'stage_change':
return ArrowRight;
case 'note_added':
return MessageSquare;
case 'assessment_completed':
return FileText;
default:
return User;
}
};

const getEventColor = (type: TimelineEvent['type'], data?: any) => {

switch (type) {
case 'stage_change':
if (data?.to === 'hired') return 'text-green-600 bg-green-100';
if (data?.to === 'rejected') return 'text-red-600 bg-red-100';
return 'text-blue-600 bg-blue-100';
case 'note_added':
return 'text-purple-600 bg-purple-100';
case 'assessment_completed':
return 'text-orange-600 bg-orange-100';
default:
 return 'text-gray-600 bg-gray-100';
}
};

const formatEventDescription = (event: TimelineEvent): string => {

switch (event.type) {
case 'stage_change':
return `Moved from ${event.data.from} to ${event.data.to}`;
case 'note_added':
return `Added note: "${event.data.content.substring(0, 100)}${event.data.content.length > 100 ? '...' : ''}"`;
case 'assessment_completed':
return `Completed assessment: ${event.data.assessmentTitle}`;
default:
return 'Unknown event';
}
};

export const Timeline: React.FC<TimelineProps> = ({ events, loading = false }) => {

if (loading) {
return (
<div className="space-y-4">
{[...Array(3)].map((_, i) => (
<div key={i} className="flex items-start space-x-3 animate-pulse">
<div className="w-8 h-8 bg-gray-200 rounded-full"></div>
<div className="flex-1 space-y-2">
<div className="h-4 bg-gray-200 rounded w-3/4"></div>
<div className="h-3 bg-gray-200 rounded w-1/2"></div>
</div>
</div>
))}
</div>
);
}

if (events.length === 0) {
return (
<div className="text-center py-8">
<Clock className="mx-auto h-12 w-12 text-gray-400" />
<h3 className="mt-2 text-sm font-medium text-gray-900">No activity yet</h3>
<p className="mt-1 text-sm text-gray-500">
Timeline events will appear here as the candidate progresses.
</p>
</div>
);
}

return (
<div className="flow-root">
<ul className="-mb-8">
{events.map((event, eventIdx) => {
const Icon = getEventIcon(event.type);
const colorClasses = getEventColor(event.type, event.data);
const isLast = eventIdx === events.length - 1;

return (
<li key={event.id}>
<div className="relative pb-8">
{!isLast && (
<span
className="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200"
aria-hidden="true"
/>
)}
<div className="relative flex space-x-3">
<div>
<span className={clsx(
'h-8 w-8 rounded-full flex items-center justify-center ring-8 ring-white',
colorClasses
)}>
<Icon className="h-4 w-4" aria-hidden="true" />
</span>
</div>
<div className="flex min-w-0 flex-1 justify-between space-x-4 pt-1.5">
<div>
<p className="text-sm text-gray-900">
{formatEventDescription(event)}
</p>
</div>
<div className="whitespace-nowrap text-right text-sm text-gray-500">
<time dateTime={event.createdAt.toISOString()}>
{formatDateTime(event.createdAt)}
</time>
</div>
</div>
</div>
</div>
</li>
);
 })}
</ul>
</div>
);
};

10.6 Candidate Profile Component ( src/components/candidates/CandidateProfile.tsx )

typescript
import React, { useState } from 'react';
import { Candidate, TimelineEvent } from '../../types';
import { Timeline } from './Timeline';
import { Button } from '../ui/Button';
import { Input } from '../ui/Input';
import { Select } from '../ui/Select';
import {
Mail,
Calendar,
User,
MessageSquare,
ArrowLeft,
Save,
Plus
} from 'lucide-react';
import { formatDate, getInitials } from '../../utils/helpers';
import clsx from 'clsx';

interface CandidateProfileProps {
candidate: Candidate;
timeline: TimelineEvent[];
timelineLoading: boolean;
onBack: () => void;
onUpdateStage: (newStage: Candidate['stage']) => Promise<void>;
onAddNote: (note: string) => Promise<void>;
}

const stageOptions = [
{ value: 'applied', label: 'Applied' },
{ value: 'screen', label: 'Screening' },
{ value: 'tech', label: 'Technical' },
{ value: 'offer', label: 'Offer' },
{ value: 'hired', label: 'Hired' },
{ value: 'rejected', label: 'Rejected' }
];

const stageColors = {
applied: 'bg-blue-100 text-blue-800 border-blue-200',
screen: 'bg-yellow-100 text-yellow-800 border-yellow-200',
tech: 'bg-purple-100 text-purple-800 border-purple-200',
offer: 'bg-green-100 text-green-800 border-green-200',
hired: 'bg-emerald-100 text-emerald-800 border-emerald-200',
rejected: 'bg-red-100 text-red-800 border-red-200'
};

export const CandidateProfile: React.FC<CandidateProfileProps> = ({

candidate,
timeline,
timelineLoading,
onBack,
onUpdateStage,
onAddNote
}) => {
const [newNote, setNewNote] = useState('');
const [selectedStage, setSelectedStage] = useState(candidate.stage);
const [isUpdatingStage, setIsUpdatingStage] = useState(false);
const [isAddingNote, setIsAddingNote] = useState(false);

const handleStageUpdate = async () => {

if (selectedStage === candidate.stage) return;

try {
setIsUpdatingStage(true);
await onUpdateStage(selectedStage);
} catch (error) {
console.error('Failed to update stage:', error);
setSelectedStage(candidate.stage); // Reset on error
} finally {
setIsUpdatingStage(false);
}
};

const handleAddNote = async () => {

if (!newNote.trim()) return;

try {
setIsAddingNote(true);
await onAddNote(newNote.trim());
setNewNote('');
} catch (error) {
console.error('Failed to add note:', error);
} finally {
setIsAddingNote(false);
}
};

const stageChanged = selectedStage !== candidate.stage;

return (
<div className="min-h-screen bg-gray-50">
{/* Header */}
<div className="bg-white shadow">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex items-center justify-between py-6">
<div className="flex items-center">
<Button
variant="ghost"
onClick={onBack}
className="mr-4"
>
<ArrowLeft className="h-4 w-4 mr-2" />
Back
</Button>
<div className="flex items-center">
<div className="h-12 w-12 rounded-full bg-blue-500 flex items-center justify-center text-white font-m
{getInitials(candidate.name)}
</div>
<div>
<h1 className="text-2xl font-bold text-gray-900">{candidate.name}</h1>
<p className="text-sm text-gray-500">{candidate.email}</p>
</div>
</div>
</div>

<div className={clsx(
'px-4 py-2 rounded-full text-sm font-medium border',
stageColors[candidate.stage]
)}>
{stageOptions.find(opt => opt.value === candidate.stage)?.label}
</div>
</div>
</div>
</div>

{/* Content */}

<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
{/* Candidate Info & Actions */}
<div className="lg:col-span-1">
<div className="bg-white shadow rounded-lg p-6 mb-6">
<h2 className="text-lg font-medium text-gray-900 mb-4">Candidate Information</h2>
 <div className="space-y-4">
<div className="flex items-center text-sm text-gray-600">
<Mail className="h-4 w-4 mr-2" />
{candidate.email}
</div>

<div className="flex items-center text-sm text-gray-600">

<Calendar className="h-4 w-4 mr-2" />
Applied on {formatDate(candidate.createdAt)}
</div>

<div className="flex items-center text-sm text-gray-600">

<User className="h-4 w-4 mr-2" />
ID: {candidate.id}
</div>
</div>
</div>

{/* Stage Management */}

<div className="bg-white shadow rounded-lg p-6 mb-6">
<h2 className="text-lg font-medium text-gray-900 mb-4">Update Stage</h2>

<div className="space-y-4">
<Select
label="Current Stage"
value={selectedStage}
onChange={(e) => setSelectedStage(e.target.value as Candidate['stage'])}
options={stageOptions}
/>

{stageChanged && (
<Button
onClick={handleStageUpdate}
loading={isUpdatingStage}
className="w-full"
>
<Save className="h-4 w-4 mr-2" />
Update Stage
</Button>
)}
</div>
</div>
 {/* Add Note */}
<div className="bg-white shadow rounded-lg p-6">
<h2 className="text-lg font-medium text-gray-900 mb-4">Add Note</h2>

<div className="space-y-4">
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
Note Content
</label>
<textarea
value={newNote}
onChange={(e) => setNewNote(e.target.value)}
rows={4}
className="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-no
placeholder="Add a note about this candidate..."
/>
</div>

<Button
onClick={handleAddNote}
loading={isAddingNote}
disabled={!newNote.trim()}
className="w-full"
>
<Plus className="h-4 w-4 mr-2" />
Add Note
</Button>
</div>
</div>
</div>

{/* Timeline */}

<div className="lg:col-span-2">
<div className="bg-white shadow rounded-lg p-6">
<div className="flex items-center mb-6">
<MessageSquare className="h-5 w-5 text-gray-500 mr-2" />
<h2 className="text-lg font-medium text-gray-900">Activity Timeline</h2>
</div>

<Timeline events={timeline} loading={timelineLoading} />

</div>
</div>
</div>
</div>
 </div>
);
};

10.7 Candidates Page Component ( src/pages/CandidatesPage.tsx )

typescript
import React, { useState, useCallback } from 'react';
import { useNavigate } from 'react-router-dom';
import { CandidatesList } from '../components/candidates/CandidatesList';
import { KanbanBoard } from '../components/candidates/KanbanBoard';
import { Button } from '../components/ui/Button';
import { useCandidates } from '../hooks/useCandidates';
import { Candidate } from '../types';
import { List, Kanban, AlertCircle } from 'lucide-react';
import { debounce } from '../utils/helpers';

type ViewMode = 'list' | 'kanban';

export const CandidatesPage: React.FC = () => {

const navigate = useNavigate();
const [viewMode, setViewMode] = useState<ViewMode>('list');
const [search, setSearch] = useState('');
const [stage, setStage] = useState('');

const {
candidates,
loading,
error,
moveCandidateStage,
hasNextPage,
fetchNextPage,
refetch
} = useCandidates({
search: search.length >= 2 ? search : '', // Only search if 2+ characters
stage,
pageSize: 50
});

const debouncedSetSearch = useCallback(

debounce((value: string) => setSearch(value), 300),
[]
);

const handleCandidateClick = (candidate: Candidate) => {

navigate(`/candidates/${candidate.id}`);
};

const handleMoveCandidate = async (candidateId: string, newStage: Candidate['stage']) => {

try {
 await moveCandidateStage(candidateId, newStage);
} catch (error) {
console.error('Failed to move candidate:', error);
}
};

return (
<div className="min-h-screen bg-gray-50">
{/* Header */}
<div className="bg-white shadow">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex justify-between items-center py-6">
<div>
<h1 className="text-3xl font-bold text-gray-900">Candidates</h1>
<p className="mt-1 text-sm text-gray-500">
Manage candidate applications and track their progress
</p>
</div>

<div className="flex items-center space-x-2">

<Button
variant={viewMode === 'list' ? 'primary' : 'secondary'}
size="sm"
onClick={() => setViewMode('list')}
>
<List className="h-4 w-4 mr-1" />
List
</Button>
<Button
variant={viewMode === 'kanban' ? 'primary' : 'secondary'}
size="sm"
onClick={() => setViewMode('kanban')}
>
<Kanban className="h-4 w-4 mr-1" />
Kanban
</Button>
</div>
</div>
</div>
</div>

{/* Content */}

<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
{error && (
 <div className="bg-red-50 border-l-4 border-red-400 p-4 mb-6">
<div className="flex">
<AlertCircle className="h-5 w-5 text-red-400" />
<div className="ml-3">
<p className="text-sm text-red-700">{error}</p>
<button
onClick={refetch}
className="mt-2 text-sm text-red-600 hover:text-red-500 underline"
>
Try again
</button>
</div>
</div>
</div>
)}

{viewMode === 'list' ? (

<CandidatesList
candidates={candidates}
loading={loading}
hasNextPage={hasNextPage}
onCandidateClick={handleCandidateClick}
onLoadMore={fetchNextPage}
search={search}
stage={stage}
onSearchChange={debouncedSetSearch}
onStageChange={setStage}
/>
):(
<KanbanBoard
candidates={candidates}
onCandidateClick={handleCandidateClick}
onMoveCandidate={handleMoveCandidate}
/>
)}
</div>
</div>
);
};

This completes the Candidates module with:

✅ Virtualized list with infinite scrolling for 1000+ candidates ✅ Client-side search with debouncing
for name/email ✅ Server-like filtering by stage ✅ Kanban board with drag & drop between stages
✅ Candidate profile pages with timeline ✅ **Notes system # TalentFlow - Mini Hiring Platform
Implementation Guide

1. Project Setup

Prerequisites
Node.js (v16 or higher)
npm or yarn

Git

Initial Setup

bash

# Create React app with TypeScript

npx create-react-app talentflow --template typescript
cd talentflow

# Install required dependencies

npm install @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities
npm install react-router-dom
npm install react-hook-form
npm install react-window react-window-infinite-loader
npm install dexie
npm install msw
npm install lucide-react
npm install clsx
npm install @types/react-window

# Install dev dependencies

npm install -D @types/node
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Configure Tailwind CSS

Update tailwind.config.js :

js
 module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}

Add to src/index.css :

css

@tailwind base;
@tailwind components;
@tailwind utilities;

2. Project Structure

src/
├── components/
│ ├── ui/
│ │ ├── Button.tsx
│ │ ├── Input.tsx
│ │ ├── Modal.tsx
│ │ ├── Select.tsx
│ │ └── Pagination.tsx
│ ├── jobs/
│ │ ├── JobsList.tsx
│ │ ├── JobCard.tsx
│ │ ├── JobForm.tsx
│ │ └── JobFilters.tsx
│ ├── candidates/
│ │ ├── CandidatesList.tsx
│ │ ├── CandidateCard.tsx
│ │ ├── CandidateProfile.tsx
│ │ ├── KanbanBoard.tsx
│ │ └── Timeline.tsx
│ ├── assessments/
│ │ ├── AssessmentBuilder.tsx
│ │ ├── AssessmentPreview.tsx
 │ │ ├── QuestionEditor.tsx
│ │ └── AssessmentForm.tsx
│ └── layout/
│ ├── Header.tsx
│ ├── Sidebar.tsx
│ └── Layout.tsx
├── hooks/
│ ├── useJobs.ts
│ ├── useCandidates.ts
│ ├── useAssessments.ts
│ └── useLocalStorage.ts
├── services/
│ ├── api.ts
│ ├── database.ts
│ └── mockData.ts
├── types/
│ └── index.ts
├── pages/
│ ├── JobsPage.tsx
│ ├── CandidatesPage.tsx
│ ├── CandidateDetailPage.tsx
│ └── AssessmentsPage.tsx
├── utils/
│ ├── validation.ts
│ └── helpers.ts
├── mocks/
│ ├── handlers.ts
│ └── browser.ts
├── App.tsx
├── index.tsx
└── index.css

3. Core Implementation Files

3.1 Types Definition ( src/types/index.ts )

typescript
export interface Job {
id: string;
title: string;
slug: string;
status: 'active' | 'archived';
tags: string[];
order: number;
description?: string;
createdAt: Date;
updatedAt: Date;
}

export interface Candidate {

id: string;
name: string;
email: string;
stage: 'applied' | 'screen' | 'tech' | 'offer' | 'hired' | 'rejected';
jobId: string;
createdAt: Date;
updatedAt: Date;
notes?: Note[];
}

export interface Note {

id: string;
content: string;
mentions: string[];
createdAt: Date;
authorId: string;
}

export interface TimelineEvent {

id: string;
candidateId: string;
type: 'stage_change' | 'note_added' | 'assessment_completed';
data: any;
createdAt: Date;
}

export interface Assessment {

id: string;
jobId: string;
title: string;
 sections: AssessmentSection[];
createdAt: Date;
updatedAt: Date;
}

export interface AssessmentSection {

id: string;
title: string;
questions: Question[];
order: number;
}

export interface Question {

id: string;
type: 'single-choice' | 'multi-choice' | 'short-text' | 'long-text' | 'numeric' | 'file-upload';
title: string;
required: boolean;
options?: string[];
validation?: {
min?: number;
max?: number;
maxLength?: number;
};
conditionalLogic?: {
showIf: {
questionId: string;
value: any;
};
};
order: number;
}

export interface AssessmentResponse {

id: string;
assessmentId: string;
candidateId: string;
responses: Record<string, any>;
completedAt?: Date;
createdAt: Date;
}
3.2 Database Setup ( src/services/database.ts )

typescript

import Dexie, { Table } from 'dexie';

import { Job, Candidate, Assessment, AssessmentResponse, TimelineEvent } from '../types';

export class TalentFlowDB extends Dexie {

jobs!: Table<Job>;
candidates!: Table<Candidate>;
assessments!: Table<Assessment>;
assessmentResponses!: Table<AssessmentResponse>;
timelineEvents!: Table<TimelineEvent>;

constructor() {
super('TalentFlowDB');
this.version(1).stores({
jobs: 'id, title, slug, status, order, createdAt',
candidates: 'id, name, email, stage, jobId, createdAt',
assessments: 'id, jobId, createdAt',
assessmentResponses: 'id, assessmentId, candidateId, createdAt',
timelineEvents: 'id, candidateId, type, createdAt'
});
}
}

export const db = new TalentFlowDB();

3.3 Mock Data Generation ( src/services/mockData.ts )

typescript
import { Job, Candidate, Assessment, AssessmentSection, Question } from '../types';
import { db } from './database';

const jobTitles = [
'Frontend Developer', 'Backend Developer', 'Full Stack Developer',
'Product Manager', 'UI/UX Designer', 'Data Scientist', 'DevOps Engineer',
'QA Engineer', 'Mobile Developer', 'Technical Writer', 'Sales Manager',
'Marketing Specialist', 'HR Manager', 'Business Analyst', 'System Administrator'
];

const tags = ['React', 'Node.js', 'Python', 'JavaScript', 'TypeScript', 'AWS', 'Docker', 'Kubernetes', 'MongoDB', 'Postgre

const firstNames = ['John', 'Jane', 'Mike', 'Sarah', 'David', 'Emma', 'Chris', 'Lisa', 'Tom', 'Anna'];
const lastNames = ['Smith', 'Johnson', 'Williams', 'Brown', 'Jones', 'Garcia', 'Miller', 'Davis', 'Rodriguez', 'Martinez'];

const stages: Candidate['stage'][] = ['applied', 'screen', 'tech', 'offer', 'hired', 'rejected'];

export const generateMockData = async () => {

// Clear existing data
await db.jobs.clear();
await db.candidates.clear();
await db.assessments.clear();

// Generate Jobs
const jobs: Job[] = [];
for (let i = 0; i < 25; i++) {
const title = jobTitles[Math.floor(Math.random() * jobTitles.length)];
const job: Job = {
id: `job-${i + 1}`,
title: `${title} ${i + 1}`,
slug: `${title.toLowerCase().replace(/\s+/g, '-')}-${i + 1}`,
status: Math.random() > 0.3 ? 'active' : 'archived',
tags: tags.slice(0, Math.floor(Math.random() * 4) + 1),
order: i,
description: `Job description for ${title}`,
createdAt: new Date(Date.now() - Math.random() * 90 * 24 * 60 * 60 * 1000),
updatedAt: new Date()
};
jobs.push(job);
}

await db.jobs.bulkAdd(jobs);
// Generate Candidates
const candidates: Candidate[] = [];
for (let i = 0; i < 1000; i++) {
const firstName = firstNames[Math.floor(Math.random() * firstNames.length)];
const lastName = lastNames[Math.floor(Math.random() * lastNames.length)];
const candidate: Candidate = {
id: `candidate-${i + 1}`,
name: `${firstName} ${lastName}`,
email: `${firstName.toLowerCase()}.${lastName.toLowerCase()}${i}@example.com`,
stage: stages[Math.floor(Math.random() * stages.length)],
jobId: jobs[Math.floor(Math.random() * jobs.length)].id,
createdAt: new Date(Date.now() - Math.random() * 60 * 24 * 60 * 60 * 1000),
updatedAt: new Date()
};
candidates.push(candidate);
}

await db.candidates.bulkAdd(candidates);

// Generate Assessments
const assessments: Assessment[] = [];
const activeJobs = jobs.filter(job => job.status === 'active').slice(0, 3);

for (const job of activeJobs) {

const sections: AssessmentSection[] = [
{
id: `section-1-${job.id}`,
title: 'Technical Skills',
order: 0,
questions: generateQuestions(`${job.id}-tech`, 5)
},
{
id: `section-2-${job.id}`,
title: 'Experience',
order: 1,
questions: generateQuestions(`${job.id}-exp`, 3)
},
{
id: `section-3-${job.id}`,
title: 'Cultural Fit',
order: 2,
questions: generateQuestions(`${job.id}-culture`, 4)
}
];
 const assessment: Assessment = {
id: `assessment-${job.id}`,
jobId: job.id,
title: `${job.title} Assessment`,
sections,
createdAt: new Date(),
updatedAt: new Date()
};
assessments.push(assessment);
}

await db.assessments.bulkAdd(assessments);
};

const generateQuestions = (prefix: string, count: number): Question[] => {

const questionTypes: Question['type'][] = ['single-choice', 'multi-choice', 'short-text', 'long-text', 'numeric'];
const questions: Question[] = [];

for (let i = 0; i < count; i++) {

const type = questionTypes[Math.floor(Math.random() * questionTypes.length)];
const question: Question = {
id: `${prefix}-q${i + 1}`,
type,
title: `Sample ${type} question ${i + 1}`,
required: Math.random() > 0.3,
order: i,
options: ['single-choice', 'multi-choice'].includes(type) ?
[`Option A`, `Option B`, `Option C`, `Option D`] : undefined,
validation: type === 'numeric' ? { min: 0, max: 100 } :
type === 'short-text' ? { maxLength: 100 } : undefined
};
questions.push(question);
}

return questions;
};

3.4 MSW Handlers ( src/mocks/handlers.ts )

typescript
import { rest } from 'msw';
import { db } from '../services/database';

const delay = () => new Promise(resolve =>

setTimeout(resolve, 200 + Math.random() * 1000)
);

const shouldError = () => Math.random() < 0.1; // 10% error rate

export const handlers = [

// Jobs endpoints
rest.get('/api/jobs', async (req, res, ctx) => {
await delay();

const url = new URL(req.url);

const search = url.searchParams.get('search') || '';
const status = url.searchParams.get('status') || '';
const page = parseInt(url.searchParams.get('page') || '1');
const pageSize = parseInt(url.searchParams.get('pageSize') || '10');
const sort = url.searchParams.get('sort') || 'order';

let query = db.jobs.orderBy(sort);

if (status) {
query = query.filter(job => job.status === status);
}

let jobs = await query.toArray();

if (search) {
jobs = jobs.filter(job =>
job.title.toLowerCase().includes(search.toLowerCase()) ||
job.tags.some(tag => tag.toLowerCase().includes(search.toLowerCase()))
);
}

const total = jobs.length;

const offset = (page - 1) * pageSize;
const paginatedJobs = jobs.slice(offset, offset + pageSize);

return res(
ctx.json({
data: paginatedJobs,
 total,
page,
pageSize,
totalPages: Math.ceil(total / pageSize)
})
);
}),

rest.post('/api/jobs', async (req, res, ctx) => {

await delay();
if (shouldError()) return res(ctx.status(500));

const jobData = await req.json();

const job = {
...jobData,
id: `job-${Date.now()}`,
createdAt: new Date(),
updatedAt: new Date()
};

await db.jobs.add(job);
return res(ctx.json(job));
}),

rest.patch('/api/jobs/:id', async (req, res, ctx) => {

await delay();
if (shouldError()) return res(ctx.status(500));

const { id } = req.params;
const updates = await req.json();

await db.jobs.update(id as string, { ...updates, updatedAt: new Date() });

const job = await db.jobs.get(id as string);

return res(ctx.json(job));
}),

rest.patch('/api/jobs/:id/reorder', async (req, res, ctx) => {

await delay();
if (shouldError()) return res(ctx.status(500));

const { fromOrder, toOrder } = await req.json();

// Simulate reorder logic

 const jobs = await db.jobs.orderBy('order').toArray();
// Implementation for reordering...

return res(ctx.json({ success: true }));

}),

// Candidates endpoints
rest.get('/api/candidates', async (req, res, ctx) => {
await delay();

const url = new URL(req.url);

const search = url.searchParams.get('search') || '';
const stage = url.searchParams.get('stage') || '';
const page = parseInt(url.searchParams.get('page') || '1');
const pageSize = parseInt(url.searchParams.get('pageSize') || '50');

let candidates = await db.candidates.toArray();

if (search) {
candidates = candidates.filter(candidate =>
candidate.name.toLowerCase().includes(search.toLowerCase()) ||
candidate.email.toLowerCase().includes(search.toLowerCase())
);
}

if (stage) {
candidates = candidates.filter(candidate => candidate.stage === stage);
}

const total = candidates.length;

const offset = (page - 1) * pageSize;
const paginatedCandidates = candidates.slice(offset, offset + pageSize);

return res(
ctx.json({
data: paginatedCandidates,
total,
page,
pageSize,
totalPages: Math.ceil(total / pageSize)
})
);
}),
rest.patch('/api/candidates/:id', async (req, res, ctx) => {
await delay();
if (shouldError()) return res(ctx.status(500));

const { id } = req.params;
const updates = await req.json();

await db.candidates.update(id as string, { ...updates, updatedAt: new Date() });

const candidate = await db.candidates.get(id as string);

return res(ctx.json(candidate));
}),

rest.get('/api/candidates/:id/timeline', async (req, res, ctx) => {

await delay();

const { id } = req.params;
const events = await db.timelineEvents.where('candidateId').equals(id as string).toArray();

return res(ctx.json(events));
}),

// Assessments endpoints
rest.get('/api/assessments/:jobId', async (req, res, ctx) => {
await delay();

const { jobId } = req.params;

const assessment = await db.assessments.where('jobId').equals(jobId as string).first();

return res(ctx.json(assessment));
}),

rest.put('/api/assessments/:jobId', async (req, res, ctx) => {

await delay();
if (shouldError()) return res(ctx.status(500));

const { jobId } = req.params;

const assessmentData = await req.json();

await db.assessments.where('jobId').equals(jobId as string).modify(assessmentData);

const assessment = await db.assessments.where('jobId').equals(jobId as string).first();

return res(ctx.json(assessment));
}),
 rest.post('/api/assessments/:jobId/submit', async (req, res, ctx) => {
await delay();
if (shouldError()) return res(ctx.status(500));

const responseData = await req.json();

await db.assessmentResponses.add({
...responseData,
id: `response-${Date.now()}`,
createdAt: new Date()
});

return res(ctx.json({ success: true }));

})
];

3.5 MSW Browser Setup ( src/mocks/browser.ts )

typescript

import { setupWorker } from 'msw';

import { handlers } from './handlers';

export const worker = setupWorker(...handlers);

3.6 API Service ( src/services/api.ts )

typescript
export class ApiService {
private baseURL = '/api';

private async request<T>(endpoint: string, options?: RequestInit): Promise<T> {

const response = await fetch(`${this.baseURL}${endpoint}`, {
headers: {
'Content-Type': 'application/json',
...options?.headers,
},
...options,
});

if (!response.ok) {
throw new Error(`API Error: ${response.status} ${response.statusText}`);
}

return response.json();
}

// Jobs API
async getJobs(params: {
search?: string;
status?: string;
page?: number;
pageSize?: number;
sort?: string;
}) {
const searchParams = new URLSearchParams();
Object.entries(params).forEach(([key, value]) => {
if (value !== undefined) searchParams.set(key, String(value));
});

return this.request(`/jobs?${searchParams}`);
}

async createJob(job: any) {

return this.request('/jobs', {
method: 'POST',
body: JSON.stringify(job),
});
}

async updateJob(id: string, updates: any) {

 return this.request(`/jobs/${id}`, {
method: 'PATCH',
body: JSON.stringify(updates),
});
}

async reorderJob(id: string, fromOrder: number, toOrder: number) {

return this.request(`/jobs/${id}/reorder`, {
method: 'PATCH',
body: JSON.stringify({ fromOrder, toOrder }),
});
}

// Candidates API
async getCandidates(params: {
search?: string;
stage?: string;
page?: number;
pageSize?: number;
}) {
const searchParams = new URLSearchParams();
Object.entries(params).forEach(([key, value]) => {
if (value !== undefined) searchParams.set(key, String(value));
});

return this.request(`/candidates?${searchParams}`);
}

async updateCandidate(id: string, updates: any) {

return this.request(`/candidates/${id}`, {
method: 'PATCH',
body: JSON.stringify(updates),
});
}

async getCandidateTimeline(id: string) {

return this.request(`/candidates/${id}/timeline`);
}

// Assessments API
async getAssessment(jobId: string) {
return this.request(`/assessments/${jobId}`);
}
 async saveAssessment(jobId: string, assessment: any) {
return this.request(`/assessments/${jobId}`, {
method: 'PUT',
body: JSON.stringify(assessment),
});
}

async submitAssessment(jobId: string, response: any) {

return this.request(`/assessments/${jobId}/submit`, {
method: 'POST',
body: JSON.stringify(response),
});
}
}

export const api = new ApiService();

4. UI Components

4.1 Base UI Components ( src/components/ui/ )

Button Component ( src/components/ui/Button.tsx )

typescript
import React from 'react';
import clsx from 'clsx';

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {

variant?: 'primary' | 'secondary' | 'danger' | 'ghost';
size?: 'sm' | 'md' | 'lg';
loading?: boolean;
}

export const Button: React.FC<ButtonProps> = ({

children,
variant = 'primary',
size = 'md',
loading = false,
className,
disabled,
...props
}) => {
return (
<button
className={clsx(
'inline-flex items-center justify-center font-medium rounded-md transition-colors focus:outline-none focus:rin
{
// Variants
'bg-blue-600 hover:bg-blue-700 text-white focus:ring-blue-500': variant === 'primary',
'bg-gray-100 hover:bg-gray-200 text-gray-900 focus:ring-gray-500': variant === 'secondary',
'bg-red-600 hover:bg-red-700 text-white focus:ring-red-500': variant === 'danger',
'hover:bg-gray-100 text-gray-700 focus:ring-gray-500': variant === 'ghost',

// Sizes
'px-3 py-1.5 text-sm': size === 'sm',
'px-4 py-2 text-sm': size === 'md',
'px-6 py-3 text-base': size === 'lg',

// States
'opacity-50 cursor-not-allowed': disabled || loading,
},
className
)}
disabled={disabled || loading}
{...props}
>
{loading && (
 <svg className="animate-spin -ml-1 mr-2 h-4 w-4" fill="none" viewBox="0 0 24 24">
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.29
</svg>
)}
{children}
</button>
);
};

Input Component ( src/components/ui/Input.tsx )

typescript
import React, { forwardRef } from 'react';
import clsx from 'clsx';

interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {

label?: string;
error?: string;
helperText?: string;
}

export const Input = forwardRef<HTMLInputElement, InputProps>(

({ label, error, helperText, className, ...props }, ref) => {
return (
<div className="w-full">
{label && (
<label className="block text-sm font-medium text-gray-700 mb-1">
{label}
{props.required && <span className="text-red-500 ml-1">*</span>}
</label>
)}
<input
ref={ref}
className={clsx(
'block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue
{
'border-red-300 focus:ring-red-500 focus:border-red-500': error,
},
className
)}
{...props}
/>
{error && (
<p className="mt-1 text-sm text-red-600">{error}</p>
)}
{helperText && !error && (
<p className="mt-1 text-sm text-gray-500">{helperText}</p>
)}
</div>
);
}
);

Input.displayName = 'Input';
Modal Component ( src/components/ui/Modal.tsx )

typescript
import React, { useEffect } from 'react';
import { createPortal } from 'react-dom';
import clsx from 'clsx';
import { X } from 'lucide-react';

interface ModalProps {
isOpen: boolean;
onClose: () => void;
title?: string;
children: React.ReactNode;
size?: 'sm' | 'md' | 'lg' | 'xl';
}

export const Modal: React.FC<ModalProps> = ({

isOpen,
onClose,
title,
children,
size = 'md'
}) => {
useEffect(() => {
if (isOpen) {
document.body.style.overflow = 'hidden';
} else {
document.body.style.overflow = 'unset';
}

return () => {
document.body.style.overflow = 'unset';
};
}, [isOpen]);

if (!isOpen) return null;

return createPortal(
<div className="fixed inset-0 z-50 overflow-y-auto">
<div className="flex min-h-screen items-center justify-center p-4">
{/* Backdrop */}
<div
className="fixed inset-0 bg-black bg-opacity-50 transition-opacity"
onClick={onClose}
/>
 {/* Modal */}
<div
className={clsx(
'relative bg-white rounded-lg shadow-xl w-full transform transition-all',
{
'max-w-sm': size === 'sm',
'max-w-md': size === 'md',
'max-w-2xl': size === 'lg',
'max-w-4xl': size === 'xl',
}
)}
>
{/* Header */}
{title && (
<div className="flex items-center justify-between p-6 border-b">
<h3 className="text-lg font-medium text-gray-900">{title}</h3>
<button
onClick={onClose}
className="text-gray-400 hover:text-gray-500 focus:outline-none"
>
<X className="h-5 w-5" />
</button>
</div>
)}

{/* Content */}

<div className="p-6">
{children}
</div>
</div>
</div>
</div>,
document.body
);
};

Select Component ( src/components/ui/Select.tsx )

typescript
import React, { forwardRef } from 'react';
import clsx from 'clsx';

interface SelectOption {
value: string;
label: string;
}

interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {

label?: string;
error?: string;
options: SelectOption[];
placeholder?: string;
}

export const Select = forwardRef<HTMLSelectElement, SelectProps>(

({ label, error, options, placeholder, className, ...props }, ref) => {
return (
<div className="w-full">
{label && (
<label className="block text-sm font-medium text-gray-700 mb-1">
{label}
{props.required && <span className="text-red-500 ml-1">*</span>}
</label>
)}
<select
ref={ref}
className={clsx(
'block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue
{
'border-red-300 focus:ring-red-500 focus:border-red-500': error,
},
className
)}
{...props}
>
{placeholder && (
<option value="" disabled>
{placeholder}
</option>
)}
{options.map((option) => (
<option key={option.value} value={option.value}>
 {option.label}
</option>
))}
</select>
{error && (
<p className="mt-1 text-sm text-red-600">{error}</p>
)}
</div>
);
}
);

Select.displayName = 'Select';

Pagination Component ( src/components/ui/Pagination.tsx )

typescript
import React from 'react';
import { Button } from './Button';
import { ChevronLeft, ChevronRight } from 'lucide-react';

interface PaginationProps {
currentPage: number;
totalPages: number;
onPageChange: (page: number) => void;
showInfo?: boolean;
total?: number;
pageSize?: number;
}

export const Pagination: React.FC<PaginationProps> = ({

currentPage,
totalPages,
onPageChange,
showInfo = false,
total = 0,
pageSize = 10
}) => {
const getVisiblePages = () => {
const delta = 2;
const range = [];
const rangeWithDots = [];

for (let i = Math.max(2, currentPage - delta);

i <= Math.min(totalPages - 1, currentPage + delta);
i++) {
range.push(i);
}

if (currentPage - delta > 2) {

rangeWithDots.push(1, '...');
} else {
rangeWithDots.push(1);
}

rangeWithDots.push(...range);

if (currentPage + delta < totalPages - 1) {

rangeWithDots.push('...', totalPages);
} else {
 rangeWithDots.push(totalPages);
}

return rangeWithDots;
};

if (totalPages <= 1) return null;

const visiblePages = getVisiblePages();

const startItem = (currentPage - 1) * pageSize + 1;
const endItem = Math.min(currentPage * pageSize, total);

return (
<div className="flex items-center justify-between px-4 py-3 bg-white border-t border-gray-200">
{showInfo && (
<div className="flex-1 flex justify-between sm:hidden">
<p className="text-sm text-gray-700">
Showing {startItem} to {endItem} of {total} results
</p>
</div>
)}

<div className="flex-1 flex items-center justify-between">

{showInfo && (
<div className="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
<p className="text-sm text-gray-700">
Showing <span className="font-medium">{startItem}</span> to{' '}
<span className="font-medium">{endItem}</span> of{' '}
<span className="font-medium">{total}</span> results
</p>
</div>
)}

<nav className="relative z-0 inline-flex rounded-md shadow-sm -space-x-px">

<Button
variant="ghost"
size="sm"
onClick={() => onPageChange(currentPage - 1)}
disabled={currentPage === 1}
className="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white tex
>
<ChevronLeft className="h-4 w-4" />
</Button>
 {visiblePages.map((page, index) => (
<button
key={index}
onClick={() => typeof page === 'number' && onPageChange(page)}
disabled={page === '...'}
className={clsx(
'relative inline-flex items-center px-4 py-2 border text-sm font-medium',
{
'z-10 bg-blue-50 border-blue-500 text-blue-600': page === currentPage,
'bg-white border-gray-300 text-gray-500 hover:bg-gray-50': page !== currentPage && page !== '...',
'bg-white border-gray-300 text-gray-300 cursor-not-allowed': page === '...'
}
)}
>
{page}
</button>
))}

<Button
variant="ghost"
size="sm"
onClick={() => onPageChange(currentPage + 1)}
disabled={currentPage === totalPages}
className="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white tex
>
<ChevronRight className="h-4 w-4" />
</Button>
</nav>
</div>
</div>
);
};

5. Jobs Module

5.1 Jobs Hook ( src/hooks/useJobs.ts )

typescript
import { useState, useEffect, useCallback } from 'react';
import { Job } from '../types';
import { api } from '../services/api';

interface UseJobsParams {
search?: string;
status?: string;
page?: number;
pageSize?: number;
sort?: string;
}

interface UseJobsReturn {
jobs: Job[];
loading: boolean;
error: string | null;
total: number;
totalPages: number;
currentPage: number;
refetch: () => Promise<void>;
createJob: (job: Partial<Job>) => Promise<void>;
updateJob: (id: string, updates: Partial<Job>) => Promise<void>;
reorderJobs: (fromIndex: number, toIndex: number) => Promise<void>;
}

export const useJobs = (params: UseJobsParams = {}): UseJobsReturn => {

const [jobs, setJobs] = useState<Job[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const [total, setTotal] = useState(0);
const [totalPages, setTotalPages] = useState(0);
const [currentPage, setCurrentPage] = useState(params.page || 1);

const fetchJobs = useCallback(async () => {

try {
setLoading(true);
setError(null);
const response = await api.getJobs({
...params,
page: currentPage
});

setJobs(response.data);
 setTotal(response.total);
setTotalPages(response.totalPages);
} catch (err) {
setError(err instanceof Error ? err.message : 'Failed to fetch jobs');
} finally {
setLoading(false);
}
}, [params, currentPage]);

useEffect(() => {
fetchJobs();
}, [fetchJobs]);

const createJob = async (jobData: Partial<Job>) => {

try {
setError(null);
await api.createJob(jobData);
await fetchJobs(); // Refetch to get updated list
} catch (err) {
setError(err instanceof Error ? err.message : 'Failed to create job');
throw err;
}
};

const updateJob = async (id: string, updates: Partial<Job>) => {

try {
setError(null);
await api.updateJob(id, updates);

// Optimistic update
setJobs(prevJobs =>
prevJobs.map(job =>
job.id === id ? { ...job, ...updates } : job
)
);
} catch (err) {
setError(err instanceof Error ? err.message : 'Failed to update job');
await fetchJobs(); // Revert optimistic update
throw err;
}
};

const reorderJobs = async (fromIndex: number, toIndex: number) => {

const reorderedJobs = [...jobs];
 const [movedJob] = reorderedJobs.splice(fromIndex, 1);
reorderedJobs.splice(toIndex, 0, movedJob);

// Optimistic update
setJobs(reorderedJobs);

try {
await api.reorderJob(movedJob.id, fromIndex, toIndex);
} catch (err) {
// Rollback on failure
setJobs(jobs);
setError(err instanceof Error ? err.message : 'Failed to reorder jobs');
throw err;
}
};

return {
jobs,
loading,
error,
total,
totalPages,
currentPage,
refetch: fetchJobs,
createJob,
updateJob,
reorderJobs
};
};

5.2 Job Card Component ( src/components/jobs/JobCard.tsx )

typescript
import React from 'react';
import { Job } from '../../types';
import { Button } from '../ui/Button';
import { Edit, Archive, ArchiveRestore, MoreVertical } from 'lucide-react';
import clsx from 'clsx';

interface JobCardProps {
job: Job;
onEdit: (job: Job) => void;
onArchive: (job: Job) => void;
onUnarchive: (job: Job) => void;
isDragging?: boolean;
}

export const JobCard: React.FC<JobCardProps> = ({

job,
onEdit,
onArchive,
onUnarchive,
isDragging = false
}) => {
return (
<div
className={clsx(
'bg-white rounded-lg border border-gray-200 p-4 hover:shadow-md transition-shadow',
{
'opacity-50': isDragging,
'opacity-60': job.status === 'archived'
}
)}
>
<div className="flex items-start justify-between">
<div className="flex-1">
<div className="flex items-center gap-2 mb-2">
<h3 className="text-lg font-medium text-gray-900">{job.title}</h3>
<span
className={clsx(
'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium',
{
'bg-green-100 text-green-800': job.status === 'active',
'bg-gray-100 text-gray-800': job.status === 'archived'
}
)}
 >
{job.status}
</span>
</div>

{job.description && (
<p className="text-sm text-gray-600 mb-3 line-clamp-2">
{job.description}
</p>
)}

{job.tags.length > 0 && (

<div className="flex flex-wrap gap-1 mb-3">
{job.tags.map((tag, index) => (
<span
key={index}
className="inline-flex items-center px-2 py-1 rounded-md text-xs font-medium bg-blue-50 text-blue-
>
{tag}
</span>
))}
</div>
)}

<div className="text-xs text-gray-500">

Created {new Date(job.createdAt).toLocaleDateString()}
</div>
</div>

<div className="flex items-center gap-2 ml-4">

<Button
variant="ghost"
size="sm"
onClick={() => onEdit(job)}
className="p-1"
>
<Edit className="h-4 w-4" />
</Button>

{job.status === 'active' ? (

<Button
variant="ghost"
size="sm"
onClick={() => onArchive(job)}
 className="p-1 text-orange-600 hover:text-orange-700"
>
<Archive className="h-4 w-4" />
</Button>
):(
<Button
variant="ghost"
size="sm"
onClick={() => onUnarchive(job)}
className="p-1 text-green-600 hover:text-green-700"
>
<ArchiveRestore className="h-4 w-4" />
</Button>
)}
</div>
</div>
</div>
);
};

5.3 Job Form Component ( src/components/jobs/JobForm.tsx )

typescript
import React, { useEffect } from 'react';
import { useForm } from 'react-hook-form';
import { Job } from '../../types';
import { Input } from '../ui/Input';
import { Select } from '../ui/Select';
import { Button } from '../ui/Button';

interface JobFormData {
title: string;
slug: string;
status: 'active' | 'archived';
tags: string;
description: string;
}

interface JobFormProps {
job?: Job;
onSubmit: (data: JobFormData) => Promise<void>;
onCancel: () => void;
loading?: boolean;
}

export const JobForm: React.FC<JobFormProps> = ({

job,
onSubmit,
onCancel,
loading = false
}) => {
const {
register,
handleSubmit,
watch,
setValue,
formState: { errors, isSubmitting }
} = useForm<JobFormData>({
defaultValues: {
title: job?.title || '',
slug: job?.slug || '',
status: job?.status || 'active',
tags: job?.tags.join(', ') || '',
description: job?.description || ''
}
});
const watchTitle = watch('title');

// Auto-generate slug from title

useEffect(() => {
if (watchTitle && !job) {
const slug = watchTitle
.toLowerCase()
.replace(/[^a-z0-9\s-]/g, '')
.replace(/\s+/g, '-')
.replace(/-+/g, '-')
.trim();
setValue('slug', slug);
}
}, [watchTitle, setValue, job]);

const handleFormSubmit = async (data: JobFormData) => {

try {
await onSubmit(data);
} catch (error) {
console.error('Form submission error:', error);
}
};

return (
<form onSubmit={handleSubmit(handleFormSubmit)} className="space-y-6">
<Input
label="Job Title"
{...register('title', {
required: 'Job title is required',
minLength: {
value: 3,
message: 'Job title must be at least 3 characters'
}
})}
error={errors.title?.message}
placeholder="e.g., Frontend Developer"
/>

<Input
label="Slug"
{...register('slug', {
required: 'Slug is required',
pattern: {
 value: /^[a-z0-9-]+$/,
message: 'Slug can only contain lowercase letters, numbers, and hyphens'
}
})}
error={errors.slug?.message}
placeholder="e.g., frontend-developer"
helperText="URL-friendly version of the job title"
/>

<Select
label="Status"
{...register('status', { required: 'Status is required' })}
options={[
{ value: 'active', label: 'Active' },
{ value: 'archived', label: 'Archived' }
]}
error={errors.status?.message}
/>

<Input
label="Tags"
{...register('tags')}
error={errors.tags?.message}
placeholder="e.g., React, TypeScript, Remote"
helperText="Comma-separated tags"
/>

<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Description
</label>
<textarea
{...register('description')}
rows={4}
className="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none foc
placeholder="Job description..."
/>
</div>

<div className="flex justify-end space-x-3">

<Button
type="button"
variant="secondary"
onClick={onCancel}
 disabled={isSubmitting || loading}
>
Cancel
</Button>
<Button
type="submit"
loading={isSubmitting || loading}
>
{job ? 'Update Job' : 'Create Job'}
</Button>
</div>
</form>
);
};

5.4 Job Filters Component ( src/components/jobs/JobFilters.tsx )

typescript
import React from 'react';
import { Input } from '../ui/Input';
import { Select } from '../ui/Select';
import { Button } from '../ui/Button';
import { Search, Filter, X } from 'lucide-react';

interface JobFiltersProps {
search: string;
status: string;
onSearchChange: (search: string) => void;
onStatusChange: (status: string) => void;
onClearFilters: () => void;
hasActiveFilters: boolean;
}

export const JobFilters: React.FC<JobFiltersProps> = ({

search,
status,
onSearchChange,
onStatusChange,
onClearFilters,
hasActiveFilters
}) => {
return (
<div className="bg-white p-4 border-b border-gray-200">
<div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center">
<div className="flex-1 relative">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
<Input
placeholder="Search jobs by title or tags..."
value={search}
onChange={(e) => onSearchChange(e.target.value)}
className="pl-10"
/>
</div>

<div className="flex gap-3 items-center">

<Select
value={status}
onChange={(e) => onStatusChange(e.target.value)}
options={[
{ value: '', label: 'All Status' },
{ value: 'active', label: 'Active' },
 { value: 'archived', label: 'Archived' }
]}
className="w-40"
/>

{hasActiveFilters && (
<Button
variant="ghost"
size="sm"
onClick={onClearFilters}
className="flex items-center gap-1"
>
<X className="h-4 w-4" />
Clear
</Button>
)}

<div className="flex items-center text-sm text-gray-500">

<Filter className="h-4 w-4 mr-1" />
Filters
</div>
</div>
</div>
</div>
);
};

5.5 Jobs List with Drag & Drop ( src/components/jobs/JobsList.tsx )

typescript
import React, { useState } from 'react';
import {
DndContext,
closestCenter,
KeyboardSensor,
PointerSensor,
useSensor,
useSensors,
DragEndEvent,
DragStartEvent,
DragOverlay
} from '@dnd-kit/core';
import {
arrayMove,
SortableContext,
sortableKeyboardCoordinates,
verticalListSortingStrategy
} from '@dnd-kit/sortable';
import {
useSortable
} from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import { Job } from '../../types';
import { JobCard } from './JobCard';
import { Button } from '../ui/Button';
import { GripVertical } from 'lucide-react';

interface SortableJobCardProps {
job: Job;
onEdit: (job: Job) => void;
onArchive: (job: Job) => void;
onUnarchive: (job: Job) => void;
}

const SortableJobCard: React.FC<SortableJobCardProps> = ({

job,
onEdit,
onArchive,
onUnarchive
}) => {
const {
attributes,
listeners,
 setNodeRef,
transform,
transition,
isDragging
} = useSortable({ id: job.id });

const style = {
transform: CSS.Transform.toString(transform),
transition,
};

return (
<div ref={setNodeRef} style={style} className="relative group">
<div
{...attributes}
{...listeners}
className="absolute left-2 top-1/2 transform -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-
>
<GripVertical className="h-5 w-5 text-gray-400" />
</div>
<div className="ml-8">
<JobCard
job={job}
onEdit={onEdit}
onArchive={onArchive}
onUnarchive={onUnarchive}
isDragging={isDragging}
/>
</div>
</div>
);
};

interface JobsListProps {
jobs: Job[];
onEdit: (job: Job) => void;
onArchive: (job: Job) => void;
onUnarchive: (job: Job) => void;
onReorder: (fromIndex: number, toIndex: number) => Promise<void>;
loading?: boolean;
}

export const JobsList: React.FC<JobsListProps> = ({

jobs,
 onEdit,
onArchive,
onUnarchive,
onReorder,
loading = false
}) => {
const [activeId, setActiveId] = useState<string | null>(null);
const sensors = useSensors(
useSensor(PointerSensor),
useSensor(KeyboardSensor, {
coordinateGetter: sortableKeyboardCoordinates,
})
);

const handleDragStart = (event: DragStartEvent) => {

setActiveId(event.active.id as string);
};

const handleDragEnd = async (event: DragEndEvent) => {

const { active, over } = event;
setActiveId(null);

if (over && active.id !== over.id) {

const oldIndex = jobs.findIndex(job => job.id === active.id);
const newIndex = jobs.findIndex(job => job.id === over.id);

try {
await onReorder(oldIndex, newIndex);
} catch (error) {
console.error('Reorder failed:', error);
}
}
};

const activeJob = activeId ? jobs.find(job => job.id === activeId) : null;

if (loading) {
return (
<div className="space-y-4">
{[...Array(5)].map((_, i) => (
<div key={i} className="bg-white rounded-lg border border-gray-200 p-4 animate-pulse">
<div className="h-6 bg-gray-200 rounded w-1/3 mb-2"></div>
<div className="h-4 bg-gray-200 rounded w-2/3 mb-3"></div>
<div className="flex gap-2">
 <div className="h-6 bg-gray-200 rounded w-16"></div>
<div className="h-6 bg-gray-200 rounded w-16"></div>
</div>
</div>
))}
</div>
);
}

if (jobs.length === 0) {
return (
<div className="text-center py-12">
<div className="mx-auto h-12 w-12 text-gray-400">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 13.255A23.931 23.931 0 01
</svg>
</div>
<h3 className="mt-2 text-sm font-medium text-gray-900">No jobs found</h3>
<p className="mt-1 text-sm text-gray-500">Get started by creating a new job.</p>
</div>
);
}

return (
<DndContext
sensors={sensors}
collisionDetection={closestCenter}
onDragStart={handleDragStart}
onDragEnd={handleDragEnd}
>
<SortableContext items={jobs.map(job => job.id)} strategy={verticalListSortingStrategy}>
<div className="space-y-4">
{jobs.map(job => (
<SortableJobCard
key={job.id}
job={job}
onEdit={onEdit}
onArchive={onArchive}
onUnarchive={onUnarchive}
/>
))}
</div>
</SortableContext>
 <DragOverlay>
{activeJob && (
<div className="ml-8">
<JobCard
job={activeJob}
onEdit={onEdit}
onArchive={onArchive}
onUnarchive={onUnarchive}
isDragging
/>
</div>
)}
</DragOverlay>
</DndContext>
);
};

5.6 Jobs Page Component ( src/pages/JobsPage.tsx )

typescript
import React, { useState, useMemo } from 'react';
import { JobsList } from '../components/jobs/JobsList';
import { JobFilters } from '../components/jobs/JobFilters';
import { JobForm } from '../components/jobs/JobForm';
import { Modal } from '../components/ui/Modal';
import { Button } from '../components/ui/Button';
import { Pagination } from '../components/ui/Pagination';
import { useJobs } from '../hooks/useJobs';
import { Job } from '../types';
import { Plus, AlertCircle } from 'lucide-react';

export const JobsPage: React.FC = () => {

const [search, setSearch] = useState('');
const [status, setStatus] = useState('');
const [page, setPage] = useState(1);
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
const [editingJob, setEditingJob] = useState<Job | null>(null);

const {
jobs,
loading,
error,
total,
totalPages,
currentPage,
refetch,
createJob,
updateJob,
reorderJobs
} = useJobs({
search,
status,
page,
pageSize: 10,
sort: 'order'
});

const hasActiveFilters = useMemo(() => {

return search.length > 0 || status.length > 0;
}, [search, status]);

const handleCreateJob = async (data: any) => {

const jobData = {
 ...data,
tags: data.tags ? data.tags.split(',').map((tag: string) => tag.trim()) : [],
order: jobs.length
};

await createJob(jobData);
setIsCreateModalOpen(false);
};

const handleUpdateJob = async (data: any) => {

if (!editingJob) return;

const jobData = {
...data,
tags: data.tags ? data.tags.split(',').map((tag: string) => tag.trim()) : []
};

await updateJob(editingJob.id, jobData);

setEditingJob(null);
};

const handleArchiveJob = async (job: Job) => {

await updateJob(job.id, { status: 'archived' });
};

const handleUnarchiveJob = async (job: Job) => {

await updateJob(job.id, { status: 'active' });
};

const handleClearFilters = () => {

setSearch('');
setStatus('');
setPage(1);
};

const handlePageChange = (newPage: number) => {

setPage(newPage);
};

return (
<div className="min-h-screen bg-gray-50">
{/* Header */}
<div className="bg-white shadow">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 <div className="flex justify-between items-center py-6">
<div>
<h1 className="text-3xl font-bold text-gray-900">Jobs</h1>
<p className="mt-1 text-sm text-gray-500">
Manage job postings and track applications
</p>
</div>
<Button onClick={() => setIsCreateModalOpen(true)}>
<Plus className="h-4 w-4 mr-2" />
Create Job
</Button>
</div>
</div>
</div>

{/* Content */}

<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<div className="bg-white shadow rounded-lg overflow-hidden">
<JobFilters
search={search}
status={status}
onSearchChange={setSearch}
onStatusChange={setStatus}
onClearFilters={handleClearFilters}
hasActiveFilters={hasActiveFilters}
/>

{error && (
<div className="bg-red-50 border-l-4 border-red-400 p-4 m-4">
<div className="flex">
<AlertCircle className="h-5 w-5 text-red-400" />
<div className="ml-3">
<p className="text-sm text-red-700">{error}</p>
<button
onClick={refetch}
className="mt-2 text-sm text-red-600 hover:text-red-500 underline"
>
Try again
</button>
</div>
</div>
</div>
)}
 <div className="p-6">
<JobsList
jobs={jobs}
onEdit={setEditingJob}
onArchive={handleArchiveJob}
onUnarchive={handleUnarchiveJob}
onReorder={reorderJobs}
loading={loading}
/>
</div>

{totalPages > 1 && (

<Pagination
currentPage={currentPage}
totalPages={totalPages}
onPageChange={handlePageChange}
showInfo
total={total}
pageSize={10}
/>
)}
</div>
</div>

{/* Create Job Modal */}

<Modal
isOpen={isCreateModalOpen}
onClose={() => setIsCreateModalOpen(false)}
title="Create New Job"
size="lg"
>
<JobForm
onSubmit={handleCreateJob}
onCancel={() => setIsCreateModalOpen(false)}
/>
</Modal>

{/* Edit Job Modal */}

<Modal
isOpen={!!editingJob}
onClose={() => setEditingJob(null)}
title="Edit Job"
size="lg"
>
 {editingJob && (
<JobForm
job={editingJob}
onSubmit={handleUpdateJob}
onCancel={() => setEditingJob(null)}
/>
)}
</Modal>
</div>
);
};

6. Layout Components

6.1 Header Component ( src/components/layout/Header.tsx )

typescript
import React from 'react';
import { useLocation, Link } from 'react-router-dom';
import { Briefcase, Users, ClipboardList } from 'lucide-react';
import clsx from 'clsx';

const navigation = [
{ name: 'Jobs', href: '/jobs', icon: Briefcase },
{ name: 'Candidates', href: '/candidates', icon: Users },
{ name: 'Assessments', href: '/assessments', icon: ClipboardList },
];

export const Header: React.FC = () => {

const location = useLocation();

return (
<header className="bg-white shadow-sm border-b border-gray-200">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex justify-between items-center h-16">
{/* Logo */}
<div className="flex items-center">
<Link to="/jobs" className="flex items-center">
<div className="flex-shrink-0">
<Briefcase className="h-8 w-8 text-blue-600" />
</div>
<div className="ml-3">
<h1 className="text-xl font-bold text-gray-900">TalentFlow</h1>
</div>
</Link>
</div>

{/* Navigation */}

<nav className="hidden md:flex space-x-8">
{navigation.map((item) => {
const Icon = item.icon;
const isActive = location.pathname.startsWith(item.href);

return (
<Link
key={item.name}
to={item.href}
className={clsx(
'inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium transition-colors',
{
 'border-blue-500 text-gray-900': isActive,
'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700': !isActive,
}
)}
>
<Icon className="h-4 w-4 mr-2" />
{item.name}
</Link>
);
})}
</nav>

{/* Mobile menu button */}

<div className="md:hidden">
<button className="text-gray-500 hover:text-gray-700">
<svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16
</svg>
</button>
</div>
</div>
</div>
</header>
);
};

6.2 Layout Component ( src/components/layout/Layout.tsx )

typescript
 import React from 'react';
import { Header } from './Header';

interface LayoutProps {
children: React.ReactNode;
}

export const Layout: React.FC<LayoutProps> = ({ children }) => {

return (
<div className="min-h-screen bg-gray-50">
<Header />
<main>{children}</main>
</div>
);
};

7. App Setup and Routing

7.1 Main App Component ( src/App.tsx )

typescript
import React, { useEffect } from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
import { Layout } from './components/layout/Layout';
import { JobsPage } from './pages/JobsPage';
import { CandidatesPage } from './pages/CandidatesPage';
import { CandidateDetailPage } from './pages/CandidateDetailPage';
import { AssessmentsPage } from './pages/AssessmentsPage';
import { generateMockData } from './services/mockData';
import { db } from './services/database';

function App() {
useEffect(() => {
const initializeData = async () => {
try {
// Check if data already exists
const jobCount = await db.jobs.count();

// Only generate mock data if database is empty

if (jobCount === 0) {
await generateMockData();
console.log('Mock data generated successfully');
}
} catch (error) {
console.error('Failed to initialize data:', error);
}
};

initializeData();
}, []);

return (
<Router>
<Layout>
<Routes>
<Route path="/" element={<Navigate to="/jobs" replace />} />
<Route path="/jobs" element={<JobsPage />} />
<Route path="/jobs/:jobId" element={<JobsPage />} />
<Route path="/candidates" element={<CandidatesPage />} />
<Route path="/candidates/:id" element={<CandidateDetailPage />} />
<Route path="/assessments" element={<AssessmentsPage />} />
<Route path="/assessments/:jobId" element={<AssessmentsPage />} />
<Route path="*" element={<Navigate to="/jobs" replace />} />
</Routes>
 </Layout>
</Router>
);
}

export default App;

7.2 MSW Integration ( src/index.tsx )

typescript

import React from 'react';

import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

async function enableMocking() {

if (process.env.NODE_ENV !== 'development') {
return;
}

const { worker } = await import('./mocks/browser');

return worker.start({
onUnhandledRequest: 'bypass',
});
}

enableMocking().then(() => {
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);

root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
});
8. Utility Functions

8.1 Validation Utils ( src/utils/validation.ts )

typescript

export const validateEmail = (email: string): boolean => {

const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return emailRegex.test(email);
};

export const validateSlug = (slug: string): boolean => {

const slugRegex = /^[a-z0-9-]+$/;
return slugRegex.test(slug);
};

export const generateSlug = (text: string): string => {

return text
.toLowerCase()
.replace(/[^a-z0-9\s-]/g, '')
.replace(/\s+/g, '-')
.replace(/-+/g, '-')
.trim();
};

export const validateRequired = (value: any): boolean => {

if (typeof value === 'string') {
return value.trim().length > 0;
}
return value !== null && value !== undefined;
};

export const validateNumericRange = (value: number, min?: number, max?: number): boolean => {
if (min !== undefined && value < min) return false;
if (max !== undefined && value > max) return false;
return true;
};

8.2 Helper Functions ( src/utils/helpers.ts )

typescript
export const formatDate = (date: Date | string): string => {
const d = new Date(date);
return d.toLocaleDateString('en-US', {
year: 'numeric',
month: 'short',
day: 'numeric',
});
};

export const formatDateTime = (date: Date | string): string => {

const d = new Date(date);
return d.toLocaleString('en-US', {
year: 'numeric',
month: 'short',
day: 'numeric',
hour: '2-digit',
minute: '2-digit',
});
};

export const debounce = <T extends (...args: any[]) => any>(

func: T,
wait: number
): ((...args: Parameters<T>) => void) => {
let timeout: NodeJS.Timeout;

return (...args: Parameters<T>) => {

clearTimeout(timeout);
timeout = setTimeout(() => func.apply(null, args), wait);
};
};

export const truncateText = (text: string, maxLength: number): string => {

if (text.length <= maxLength) return text;
return text.slice(0, maxLength) + '...';
};

export const getInitials = (name: string): string => {

return name
.split(' ')
.map(word => word.charAt(0).toUpperCase())
.join('')
.slice(0, 2);
 };

export const classNames = (...classes: (string | undefined | null | false)[]): string => {
return classes.filter(Boolean).join(' ');
};

9. Package.json Scripts
Add to your package.json :

json

{
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"lint": "eslint src --ext .js,.jsx,.ts,.tsx",
"lint:fix": "eslint src --ext .js,.jsx,.ts,.tsx --fix",
"type-check": "tsc --noEmit"
}
}

This completes the UI components and Jobs module implementation. The Jobs module includes:

✅ Complete CRUD operations with optimistic updates ✅ Drag & drop reordering with rollback on
failure ✅ Server-like pagination & filtering ✅ Form validation with React Hook Form ✅ Deep
linking support (/jobs/:jobId) ✅ Responsive design with Tailwind CSS ✅ Loading states and error
handling ✅ MSW integration with artificial latency

Next steps available:

1. Candidates Module (Virtualized list, Kanban board, Profile pages)

2. Assessment Builder (Dynamic form builder with live preview)
3. Timeline & Notes system

4. Advanced features (file uploads, @mentions, etc.)

Which module would you like me to implement next?