import React, { useState, useEffect } from 'react'; import { LineChart, Line, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, ComposedChart, Area } from 'recharts'; const DephiGrowthProjection = () => { // Constants const MONTHLY_FLAT_FEE = 12500; const CLIENT_ONBOARDING_FEE = 2500; const CLIENT_ANNUAL_FEE = 1000; const AFFILIATE_COMMISSION_RATE = 0.4; const DELPHI_MONTHLY_PRICE = 97; const DELPHI_ANNUAL_PRICE = 970; const ANNUAL_CONVERSION_RATE = 0.7; // 70% of customers choose annual plan const [clientsPerWeek, setClientsPerWeek] = useState(1.5); const [clientGrowthRate, setClientGrowthRate] = useState(1.2); // 20% monthly growth const [creatorCampaignImpact, setCreatorCampaignImpact] = useState(1.5); // 50% boost during campaign const [augustBoost, setAugustBoost] = useState(3); // 3x boost from August marketing event const [clientRetentionRate, setClientRetentionRate] = useState(0.95); // 95% retention rate const [projectionMonths, setProjectionMonths] = useState(12); const [campaignStartMonth, setCampaignStartMonth] = useState(1); // 0-indexed, so 1 = May const [campaignDuration, setCampaignDuration] = useState(2); // 2 months // Generate dates for the next 12 months const generateDates = (months) => { const dates = []; const startDate = new Date(); for (let i = 0; i < months; i++) { const date = new Date(startDate); date.setMonth(startDate.getMonth() + i); dates.push({ month: date.toLocaleString('default', { month: 'short' }), year: date.getFullYear(), fullDate: date }); } return dates; }; // Generate projection data const generateProjectionData = () => { const dates = generateDates(projectionMonths); const projectionData = []; let cumulativeClients = 0; let activeClients = 0; let affiliateClients = 0; for (let i = 0; i < dates.length; i++) { const date = dates[i]; const month = date.month; const isAugust = month === 'Aug'; const isInCampaign = i >= campaignStartMonth && i < campaignStartMonth + campaignDuration; // Calculate growth multiplier let growthMultiplier = Math.pow(clientGrowthRate, i); // Apply creator campaign boost if in campaign months if (isInCampaign) { growthMultiplier *= creatorCampaignImpact; } // Apply August marketing event boost if (isAugust) { growthMultiplier *= augustBoost; } // Calculate new clients this month const baseClientsPerMonth = clientsPerWeek * 4; const newClients = Math.round(baseClientsPerMonth * growthMultiplier); // Update active clients with retention activeClients = Math.round(activeClients * clientRetentionRate) + newClients; cumulativeClients += newClients; // Calculate affiliate clients (assuming 2 referrals per client per month) const newAffiliateClients = Math.round(activeClients * 0.5); affiliateClients += newAffiliateClients; // Calculate revenue const flatFeeRevenue = MONTHLY_FLAT_FEE; const onboardingRevenue = newClients * CLIENT_ONBOARDING_FEE; const continuationRevenue = (activeClients - newClients) * (CLIENT_ANNUAL_FEE / 12); // Calculate affiliate revenue const affiliateMonthlyRevenue = newAffiliateClients * DELPHI_MONTHLY_PRICE * AFFILIATE_COMMISSION_RATE * (1 - ANNUAL_CONVERSION_RATE); const affiliateAnnualRevenue = newAffiliateClients * DELPHI_ANNUAL_PRICE * AFFILIATE_COMMISSION_RATE * ANNUAL_CONVERSION_RATE; const totalAffiliateRevenue = affiliateMonthlyRevenue + affiliateAnnualRevenue; // Total revenue const totalRevenue = flatFeeRevenue + onboardingRevenue + continuationRevenue + totalAffiliateRevenue; projectionData.push({ month: `${month} ${date.year}`, flatFeeRevenue, onboardingRevenue, continuationRevenue, affiliateRevenue: totalAffiliateRevenue, totalRevenue, newClients, activeClients, cumulativeClients, affiliateClients: newAffiliateClients, isAugust, isInCampaign }); } return projectionData; }; const projectionData = generateProjectionData(); // Calculate KPIs const totalRevenue = projectionData.reduce((sum, item) => sum + item.totalRevenue, 0); const peakMonthlyRevenue = Math.max(...projectionData.map(item => item.totalRevenue)); const totalClients = projectionData[projectionData.length - 1].cumulativeClients; const totalAffiliateClients = projectionData.reduce((sum, item) => sum + item.affiliateClients, 0); return ( ); }; export default DephiGrowthProjection;