About
Company
Clients and Industries
Team
Careers
Reviews
Services
Services Overview
HCM Technology Platform Expertise
What We Do
HR Technology Transformation
Human Capital Strategic Business Advisory
Optimization and Enhancement
Learn
Blog
Case Studies
Media
White Papers
Contact
About
Company
Clients and Industries
Team
Careers
Reviews
Services
Services Overview
HCM Technology Platform Expertise
What We Do
HR Technology Transformation
Human Capital Strategic Business Advisory
Optimization and Enhancement
Learn
Blog
Case Studies
Media
White Papers
Contact
About
Company
Clients and Industries
Team
Careers
Reviews
Services
Services Overview
HCM Technology Platform Expertise
What We Do
HR Technology Transformation
Human Capital Strategic Business Advisory
Optimization and Enhancement
Learn
Blog
Case Studies
Media
White Papers
Contact
Hamburger Toggle Menu
value.toLocaleString(); const parseNumber = (str, fallback = 0) => { const parsed = Number(str.replace(/,/g, '')); return isNaN(parsed) ? fallback : parsed; }; export default function ROI_Calculator() { // State for inputs const [recCount, setRecCount] = useState(1); const [recHoursSaved, setRecHoursSaved] = useState(2); const [annualRecSalary, setAnnualRecSalary] = useState(60000); const [hmCount, setHmCount] = useState(1); const [hmHoursSaved, setHmHoursSaved] = useState(2); const [annualHMSalary, setAnnualHMSalary] = useState(90000); const [implementationCost, setImplementationCost] = useState(20000); const [breakdownOpen, setBreakdownOpen] = useState(false); // Handlers for text inputs const handleTextChange = (setter) => (e) => setter(parseNumber(e.target.value)); // Hourly rates (2,080 hrs/year) const recHourlyRate = useMemo(() => annualRecSalary / 2080, [annualRecSalary]); const hmHourlyRate = useMemo(() => annualHMSalary / 2080, [annualHMSalary]); // Savings calculations const recSavings = useMemo( () => recCount * recHoursSaved * recHourlyRate, [recCount, recHoursSaved, recHourlyRate] ); const hmSavings = useMemo( () => hmCount * hmHoursSaved * hmHourlyRate, [hmCount, hmHoursSaved, hmHourlyRate] ); const monthlySavings = useMemo( () => recSavings + hmSavings, [recSavings, hmSavings] ); const breakEvenMonths = useMemo( () => monthlySavings > 0 ? implementationCost / monthlySavings : 0, [implementationCost, monthlySavings] ); const valueMultiplier = useMemo( () => monthlySavings > 0 ? monthlySavings / (implementationCost / 12) : 0, [monthlySavings, implementationCost] ); // Chart data for 24 months const chartData = useMemo(() => { const data = []; let cum = -implementationCost; for (let m = 1; m <= 24; m++) { cum += monthlySavings; data.push({ month: m, netBenefit: cum }); } return data; }, [monthlySavings, implementationCost]); // Display strings const recHourlyRateStr = recHourlyRate.toFixed(2); const hmHourlyRateStr = hmHourlyRate.toFixed(2); const recSavingsStr = recSavings.toFixed(2); const hmSavingsStr = hmSavings.toFixed(2); const monthlySavingsStr = monthlySavings.toFixed(2); const breakEvenStr = breakEvenMonths.toFixed(2); const valueMultiplierStr = valueMultiplier.toFixed(2); return ( <div className="max-w-4xl mx-auto p-4"> <Card className="mb-6"> <CardHeader className="text-xl font-semibold">ROI Calculator: HR Implementation Efficiency</CardHeader> <CardContent> {/* Chart */} <div className="h-64 mb-6"> <ResponsiveContainer width="100%" height="100%"> <LineChart data={chartData} margin={{ top: 10, right: 30, left: 0, bottom: 5 }}> <CartesianGrid strokeDasharray="3 3" /> <XAxis dataKey="month" label={{ value: 'Month', position: 'insideBottomRight', offset: -5 }} /> <YAxis label={{ value: 'Cumulative Net Benefit ($)', angle: -90, position: 'insideLeft' }} /> <Tooltip formatter={(value) => `$${formatNumber(Number(value).toFixed(2))}`} /> <Line type="monotone" dataKey="netBenefit" dot={false} /> <ReferenceLine x={breakEvenMonths} stroke="#ff7300" strokeDasharray="3 3" label={{ position: 'top', value: 'Break-Even' }} /> <ReferenceDot x={breakEvenMonths} y={0} r={6} fill="#ff7300" stroke="#fff" label="×" /> </LineChart> </ResponsiveContainer> </div> {/* Inputs & Sections */} <div className="grid grid-cols-1 md:grid-cols-2 gap-6"> {/* Recruiters */} <div className="p-4 border rounded-lg space-y-6"> <h3 className="text-lg font-semibold">Recruiters</h3> <div> <label className="block font-medium mb-1">Number of Recruiters:</label> <div className="flex items-center gap-4"> <Slider value={[recCount]} min={1} max={500} step={1} onValueChange={([v]) => setRecCount(v)} /> <input type="text" className="w-20 border border-gray-300 rounded px-2 py-1 focus:outline-none focus:ring-1 focus:ring-blue-500" value={formatNumber(recCount)} onChange={handleTextChange(setRecCount)} /> </div> </div> <div> <label className="block font-medium mb-1">Recruiter Hours Saved (Monthly):</label> <div className="flex items-center gap-4"> <Slider value={[recHoursSaved]} min={0} max={500} step={1} onValueChange={([v]) => setRecHoursSaved(v)} /> <input type="text" className="w-16 border border-gray-300 rounded px-2 py-1 focus:outline-none focus:ring-1 focus:ring-blue-500" value={formatNumber(recHoursSaved)} onChange={handleTextChange(setRecHoursSaved)} /> </div> </div> <div> <label className="block font-medium mb-1">Annual Recruiter Salary ($):</label> <div className="flex items-center gap-4"> <Slider value={[annualRecSalary]} min={30000} max={300000} step={1000} onValueChange={([v]) => setAnnualRecSalary(v)} /> <input type="text" className="w-32 border border-gray-300 rounded px-2 py-1 focus:outline-none focus:ring-1 focus:ring-blue-500" value={formatNumber(annualRecSalary)} onChange={handleTextChange(setAnnualRecSalary)} /> </div> </div> </div> {/* Hiring Managers */} <div className="p-4 border rounded-lg space-y-6"> <h3 className="text-lg font-semibold">Hiring Managers</h3> <div> <label className="block font-medium mb-1">Number of Hiring Managers:</label> <div className="flex items-center gap-4"> <Slider value={[hmCount]} min={1} max={500} step={1} onValueChange={([v]) => setHmCount(v)} /> <input type="text" className="w-20 border rounded px-2 py-1" value={formatNumber(hmCount)} onChange={handleTextChange(setHmCount)} /> </div> </div> <div> <label className="block font-medium mb-1">Hiring Manager Hours Saved (Monthly):</label> <div className="flex items-center gap-4"> <Slider value={[hmHoursSaved]} min={0} max={500} step={1} onValueChange={([v]) => setHmHoursSaved(v)} /> <input type="text" className="w-16 border rounded px-2 py-1" value={formatNumber(hmHoursSaved)} onChange={handleTextChange(setHmHoursSaved)} /> </div> </div> <div> <label className="block font-medium mb-1">Annual Hiring Manager Salary ($):</label> <div className="flex items-center gap-4"> <Slider value={[annualHMSalary]} min={30000} max={300000} step={1000} onValueChange={([v]) => setAnnualHMSalary(v)} /> <input type="text" className="w-32 border rounded px-2 py-1" value={formatNumber(annualHMSalary)} onChange={handleTextChange(setAnnualHMSalary)} /> </div> </div> </div> {/* Implementation & Breakdown */} <div className="md:col-span-2 space-y-4"> <div className="p-4 border rounded-lg space-y-4"> <div> <label className="block font-medium mb-1">Implementation Cost ($):</label> <div className="flex items-center gap-4"> <Slider value={[implementationCost]} min={1000} max={10000000} step={10000} onValueChange={([v]) => setImplementationCost(v)} /> <input type="text" className="w-32 border rounded px-2 py-1" value={formatNumber(implementationCost)} onChange={handleTextChange(setImplementationCost)} /> </div> </div> <div className="bg-gray-50 p-4 rounded-lg"> <p className="text-lg">Monthly Savings: <strong>${formatNumber(Number(monthlySavingsStr))}</strong></p> <p className="text-lg">Break-even Point: <strong>{formatNumber(Number(breakEvenStr))} months</strong></p> <p className="text-lg">Value Multiplier (Annualized ROI): <strong>{formatNumber(Number(valueMultiplierStr))}×</strong></p> </div> <button className="flex items-center gap-2 text-sm font-medium" onClick={() => setBreakdownOpen(!breakdownOpen)}> {breakdownOpen ? <ChevronDown /> : <ChevronRight />} <span>Calculation Breakdown</span> </button> {breakdownOpen && ( <div className="bg-white p-4 rounded-lg border space-y-2"> <p>Recruiter hourly rate = ${formatNumber(recHourlyRateStr)}</p> <p>Recruiter savings = {recCount} × {recHoursSaved}h × ${formatNumber(recHourlyRateStr)} = ${formatNumber(recSavingsStr)}</p> <p>Hiring Manager hourly rate = ${formatNumber(hmHourlyRateStr)}</p> <p>Hiring Manager savings = {hmCount} × {hmHoursSaved}h × ${formatNumber(hmHourlyRateStr)} = ${formatNumber(hmSavingsStr)}</p> <p>Total monthly savings = ${formatNumber(recSavingsStr)} + ${formatNumber(hmSavingsStr)} = <strong>${formatNumber(monthlySavingsStr)}</strong></p> <p>Break-even months = ${formatNumber(implementationCost)} ÷ ${formatNumber(monthlySavingsStr)} = <strong>{formatNumber(breakEvenStr)} months</strong></p> <p>Annualized ROI = ${formatNumber(monthlySavingsStr)} ÷ (${formatNumber(implementationCost)} ÷ 12) = <strong>{formatNumber(valueMultiplierStr)}×</strong></p> </div> )} </div> </div> </div> </CardContent> </Card> </div> ); } ">
