import React, { useState } from 'react'; const AIBusinessROICalculator = () => { // State for managing the active tab const [activeTab, setActiveTab] = useState('sales'); // State for input values const [inputs, setInputs] = useState({ // Department-specific timeframes sales: { taskName: 'Lead qualification & follow-up', currentHours: 10, withAIHours: 4, timesPerWeek: 5 }, marketing: { taskName: 'Content creation & distribution', currentHours: 12, withAIHours: 5, timesPerWeek: 3 }, customerSuccess: { taskName: 'Customer query resolution', currentHours: 8, withAIHours: 3, timesPerWeek: 10 }, cro: { taskName: 'Pipeline analysis & forecasting', currentHours: 14, withAIHours: 5, timesPerWeek: 2 }, enablement: { taskName: 'Training material creation', currentHours: 16, withAIHours: 7, timesPerWeek: 2 }, businessDevelopment: { taskName: 'Prospect research & outreach', currentHours: 9, withAIHours: 3, timesPerWeek: 8 }, // Common financial inputs employeeHourlyCost: 50, employeeCount: 5, aiMonthlyCost: 80, implementationHours: 20, monthsToCalculate: 12, // Quality/outcome impacts qualityMultiplier: 1.2, // Represents a 20% improvement in quality/outcomes }); // Handler for input changes const handleInputChange = (e, section) => { const { name, value } = e.target; if (section) { setInputs({ ...inputs, [section]: { ...inputs[section], [name]: parseFloat(value) || 0 } }); } else { setInputs({ ...inputs, [name]: parseFloat(value) || 0 }); } }; // Calculate results const calculateResults = () => { const department = inputs[activeTab]; // Time calculations const currentWeeklyHours = department.currentHours * department.timesPerWeek; const withAIWeeklyHours = department.withAIHours * department.timesPerWeek; const hoursReducedPerWeek = currentWeeklyHours - withAIWeeklyHours; const hoursReducedPerTeamWeek = hoursReducedPerWeek * inputs.employeeCount; const hoursReducedTotal = hoursReducedPerTeamWeek * 4.33 * inputs.monthsToCalculate; // 4.33 weeks per month avg // Financial impact const hourlyValueSaved = hoursReducedTotal * inputs.employeeHourlyCost; // Quality impact const qualityAdjustedValue = hourlyValueSaved * inputs.qualityMultiplier; // Cost of AI const aiSubscriptionCost = inputs.aiMonthlyCost * inputs.monthsToCalculate; const implementationCost = inputs.implementationHours * inputs.employeeHourlyCost; const totalAICost = aiSubscriptionCost + implementationCost; // ROI calculations const netReturn = qualityAdjustedValue - totalAICost; const roi = (netReturn / totalAICost) * 100; // Payback period (in months) const monthlySavings = (qualityAdjustedValue / inputs.monthsToCalculate); const paybackPeriod = totalAICost / monthlySavings; // Productivity increase const productivityIncrease = ((currentWeeklyHours - withAIWeeklyHours) / currentWeeklyHours) * 100; // Outcomes const additionalCapacity = hoursReducedTotal / inputs.employeeCount; const fteEquivalent = additionalCapacity / (40 * 4.33 * inputs.monthsToCalculate); return { currentWeeklyHours, withAIWeeklyHours, hoursReducedPerWeek, hoursReducedPerTeamWeek, hoursReducedTotal, hourlyValueSaved, qualityAdjustedValue, aiSubscriptionCost, implementationCost, totalAICost, netReturn, roi, paybackPeriod, productivityIncrease, additionalCapacity, fteEquivalent }; }; const results = calculateResults(); // Department tabs const departments = [ { id: 'sales', label: 'Sales', icon: '💼' }, { id: 'marketing', label: 'Marketing', icon: '📣' }, { id: 'customerSuccess', label: 'Customer Success', icon: '🤝' }, { id: 'cro', label: 'CRO Office', icon: '📈' }, { id: 'enablement', label: 'Enablement', icon: '🎓' }, { id: 'businessDevelopment', label: 'Business Dev', icon: '🔍' }, ]; return ( ); }; export default AIBusinessROICalculator;