schulze/fire
schulze/fire
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Releases Activity

result style

Browse Source
This commit is contained in:
Felix Schulze 2025-04-30 19:37:28 +02:00
parent ffb8e8d506
commit 0f6cd57f3d
1 changed files with 185 additions and 159 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

122
src/app/components/FireCalculatorForm.tsx
View File

@ -541,55 +541,89 @@ export default function FireCalculatorForm() {
</Card> </Card>
{result && ( {result && (
<div className="mb-8 grid grid-cols-1 gap-4 md:grid-cols-2">
{result.error ? (
<Card className="col-span-full">
<CardContent className="pt-6">
<p className="text-destructive">{result.error}</p>
</CardContent>
</Card>
) : (
<> <>
<Card className="mb-8"> <Card>
<CardHeader> <CardHeader>
<CardTitle>Results</CardTitle> <CardTitle>FIRE Number</CardTitle>
<CardDescription className="text-xs">
Required capital at retirement using{" "}
{form.getValues().retirementStrategy}
</CardDescription>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
{result.error ? ( <div className="space-y-2">
<p className="text-destructive">{result.error}</p> <p className="text-3xl font-bold">
) : (
<div className="space-y-4">
<div>
<Label>
FIRE Number (Required Capital at Retirement - Strategy:{" "}
{form.getValues().retirementStrategy})
</Label>
<p className="text-2xl font-bold">
{formatNumber(result.fireNumber)} {formatNumber(result.fireNumber)}
</p> </p>
</div> </div>
<div>
<Label>Estimated Retirement Age</Label>
<p className="text-2xl font-bold">
{result.retirementAge ?? "N/A"}
</p>
</div>
{result.inflationAdjustedAllowance && (
<div>
<Label>
Monthly Allowance at Retirement (Inflation Adjusted)
</Label>
<p className="text-2xl font-bold">
{formatNumber(result.inflationAdjustedAllowance)}
</p>
</div>
)}
{result.retirementYears && (
<div>
<Label>Retirement Duration (Years)</Label>
<p className="text-2xl font-bold">
{result.retirementYears}
</p>
</div>
)}
</div>
)}
</CardContent> </CardContent>
</Card> </Card>
{result.yearlyData && result.yearlyData.length > 0 && ( <Card>
<CardHeader>
<CardTitle>Retirement Age</CardTitle>
<CardDescription className="text-xs">
Estimated age when you can retire
</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-2">
<p className="text-3xl font-bold">
{result.retirementAge ?? "N/A"}
</p>
</div>
</CardContent>
</Card>
{result.inflationAdjustedAllowance && (
<Card>
<CardHeader>
<CardTitle>Monthly Allowance</CardTitle>
<CardDescription className="text-xs">
At retirement (inflation adjusted)
</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-2">
<p className="text-3xl font-bold">
{formatNumber(result.inflationAdjustedAllowance)}
</p>
</div>
</CardContent>
</Card>
)}
{result.retirementYears && (
<Card>
<CardHeader>
<CardTitle>Retirement Duration</CardTitle>
<CardDescription className="text-xs">
Years in retirement
</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-2">
<p className="text-3xl font-bold">
{result.retirementYears}
</p>
</div>
</CardContent>
</Card>
)}
</>
)}
</div>
)}
{result?.yearlyData && result.yearlyData.length > 0 && (
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle>Financial Projection</CardTitle> <CardTitle>Financial Projection</CardTitle>
@ -655,13 +689,7 @@ export default function FireCalculatorForm() {
}} }}
/> />
<defs> <defs>
<linearGradient <linearGradient id="fillBalance" x1="0" y1="0" x2="0" y2="1">
id="fillBalance"
x1="0"
y1="0"
x2="0"
y2="1"
>
<stop <stop
offset="5%" offset="5%"
stopColor="var(--chart-1)" stopColor="var(--chart-1)"
@ -714,8 +742,6 @@ export default function FireCalculatorForm() {
</CardContent> </CardContent>
</Card> </Card>
)} )}
</>
)}
</div> </div>
); );
} }