[V0_FILE]typescriptreact:file="sales-calculator-with-tooltips.tsx" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Button } from "@/components/ui/button" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" import { InfoIcon } from "lucide-react" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" export default function Component() { const [quota, setQuota] = useState("") const [acv, setAcv] = useState("") const [winRate, setWinRate] = useState("") const [salesCycle, setSalesCycle] = useState("") const [closedWonDeals, setClosedWonDeals] = useState(0) const [qualifiedOpps, setQualifiedOpps] = useState(0) const [openQualifiedOpps, setOpenQualifiedOpps] = useState(0) const [summary, setSummary] = useState("") const [quotaPeriod, setQuotaPeriod] = useState<"annual" | "quarterly" | "monthly">("annual") useEffect(() => { const quotaNum = Number.parseFloat(quota) || 0 const acvNum = Number.parseFloat(acv) || 0 const winRateNum = Number.parseFloat(winRate) || 0 const salesCycleNum = Number.parseFloat(salesCycle) || 0 if (quotaNum && acvNum && winRateNum && salesCycleNum) { let annualizedQuota = quotaNum if (quotaPeriod === "quarterly") annualizedQuota *= 4 if (quotaPeriod === "monthly") annualizedQuota *= 12 const closedWon = Math.round(annualizedQuota / acvNum) setClosedWonDeals(closedWon) const qualified = Math.round(closedWon / (winRateNum / 100)) setQualifiedOpps(qualified) const openQualified = Math.round((qualified * salesCycleNum) / 365) setOpenQualifiedOpps(openQualified) } else { setClosedWonDeals(0) setQualifiedOpps(0) setOpenQualifiedOpps(0) } }, [quota, acv, winRate, salesCycle, quotaPeriod]) const formatCurrency = (value: number) => { return new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", maximumFractionDigits: 0 }).format( value, ) } const generateSummary = () => { const quotaNum = Number.parseFloat(quota) || 0 const acvNum = Number.parseFloat(acv) || 0 const winRateNum = Number.parseFloat(winRate) || 0 const salesCycleNum = Number.parseFloat(salesCycle) || 0 if (quotaNum && acvNum && winRateNum && salesCycleNum) { let annualizedQuota = quotaNum if (quotaPeriod === "quarterly") annualizedQuota *= 4 if (quotaPeriod === "monthly") annualizedQuota *= 12 const closedWon = Math.round(annualizedQuota / acvNum) const qualified = Math.round(closedWon / (winRateNum / 100)) const openQualified = Math.round((qualified * salesCycleNum) / 365) const periodMultiplier = quotaPeriod === "annual" ? 1 : quotaPeriod === "quarterly" ? 4 : 12 const periodClosedWon = Math.round(closedWon / periodMultiplier) const periodQualified = Math.round(qualified / periodMultiplier) const summaryText = ` Based on your inputs, here's a summary of your sales metrics: To achieve your ${quotaPeriod} quota of ${formatCurrency(quotaNum)}, you need to close ${periodClosedWon} deals ${quotaPeriod === "annual" ? "per year" : quotaPeriod === "quarterly" ? "per quarter" : "per month"} at an average contract value of ${formatCurrency(acvNum)}. With a win rate of ${winRateNum}%, you should aim to generate ${periodQualified} qualified opportunities ${quotaPeriod === "annual" ? "per year" : quotaPeriod === "quarterly" ? "per quarter" : "per month"}. Given your average sales cycle of ${salesCycleNum} days, you should maintain about ${openQualified} open qualified opportunities at any given time to meet your targets. ${ quotaPeriod !== "annual" ? ` ${quotaPeriod.charAt(0).toUpperCase() + quotaPeriod.slice(1)} metrics: - ${quotaPeriod.charAt(0).toUpperCase() + quotaPeriod.slice(1)} quota: ${formatCurrency(quotaNum)} - Closed won deals per ${quotaPeriod}: ${periodClosedWon} - Qualified opportunities per ${quotaPeriod}: ${periodQualified} ` : "" } Annualized metrics: - Annual quota: ${formatCurrency(annualizedQuota)} - Closed won deals per year: ${closedWon} - Qualified opportunities per year: ${qualified} Key Action Items: 1. Focus on maintaining a pipeline of ${openQualified} active qualified opportunities. 2. Aim to generate ${periodQualified} new qualified opportunities ${quotaPeriod === "annual" ? "per year" : quotaPeriod === "quarterly" ? "per quarter" : "per month"}. 3. Work on improving your win rate to reduce the number of required opportunities. 4. Consider strategies to shorten your sales cycle or increase your average contract value to optimize your sales process. Remember, consistently reviewing and adjusting these metrics will help you stay on track to meet your ${quotaPeriod} quota. ` setSummary(summaryText) } else { setSummary("Please fill in all the input fields with valid numbers to generate a summary.") } } return ( Reverse Funnel Math for Sales Determine key sales metrics based on your inputs

Quota

Quota for the selected period

setQuota(e.target.value)} />

Quota Period

ACV

Average Contract Value

setAcv(e.target.value)} />

Win Rate (%) setWinRate(e.target.value)} />

Sales Cycle (days) setSalesCycle(e.target.value)} />

Closed Won Deals ({quotaPeriod})

{quotaPeriod === "annual" ? closedWonDeals : Math.round(closedWonDeals / (quotaPeriod === "quarterly" ? 4 : 12))}

{formatCurrency(Number.parseFloat(quota) || 0)} / {formatCurrency(Number.parseFloat(acv) || 0)}

Qualified Opportunities ({quotaPeriod})

{quotaPeriod === "annual" ? qualifiedOpps : Math.round(qualifiedOpps / (quotaPeriod === "quarterly" ? 4 : 12))}

{closedWonDeals} / {winRate}%

Open Qualified Opps

{openQualifiedOpps}

({qualifiedOpps} * {salesCycle}) / 365

{summary && ( Executive Summary

{summary}

)}

) }