import { useState } from 'react' import { Button } from "/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "/components/ui/card" import { Input } from "/components/ui/input" import { Label } from "/components/ui/label" export default function ReturnsCalculator() { const [inputs, setInputs] = useState({ oneYear: '', twoYear: '', threeYear: '' }) const [results, setResults] = useState({ oneYearReturn: null, twoYearReturn: null, threeYearReturn: null }) const [error, setError] = useState('') const handleInputChange = (e: React.ChangeEvent) => { const { name, value } = e.target setInputs(prev => ({ ...prev, [name]: value })) } const calculateReturns = () => { setError('') try { // Parse and validate inputs const oneYear = inputs.oneYear ? parseFloat(inputs.oneYear) : null const twoYear = inputs.twoYear ? parseFloat(inputs.twoYear) : null const threeYear = inputs.threeYear ? parseFloat(inputs.threeYear) : null if (oneYear === null && twoYear === null && threeYear === null) { throw new Error('Please enter at least one average return') } // Calculate yearly returns const newResults = { oneYearReturn: oneYear, twoYearReturn: twoYear ? twoYear / 2 : null, threeYearReturn: threeYear ? threeYear / 3 : null } setResults(newResults) } catch (err) { setError(err instanceof Error ? err.message : 'Invalid input') setResults({ oneYearReturn: null, twoYearReturn: null, threeYearReturn: null }) } } const resetCalculator = () => { setInputs({ oneYear: '', twoYear: '', threeYear: '' }) setResults({ oneYearReturn: null, twoYearReturn: null, threeYearReturn: null }) setError('') } return (

Investment Returns Calculator

1-Year Average Return (%)

2-Year Average Return (%)

3-Year Average Return (%)

{error && (

{error}

)} {(results.oneYearReturn !== null || results.twoYearReturn !== null || results.threeYearReturn !== null) && (

Annualized Returns

{results.oneYearReturn !== null && (

1-Year Return: {results.oneYearReturn.toFixed(2)}%

Same as input

)} {results.twoYearReturn !== null && (

Annual 2-Year Return: {results.twoYearReturn.toFixed(2)}%

(Total return ÷ 2 years)

)} {results.threeYearReturn !== null && (

Annual 3-Year Return: {results.threeYearReturn.toFixed(2)}%

(Total return ÷ 3 years)

)}

) }