this repo has no description
feat(growth): rename and use years
+25
-16
+24
-15
src/app/fire/page.tsx
src/app/growth/page.tsx
+24
-15
src/app/fire/page.tsx
src/app/growth/page.tsx
···
26
26
} from "@/components/ui/chart";
27
27
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field";
28
28
import { Input } from "@/components/ui/input";
29
-
import { getPeriodsToTarget, getTarget, getTotalFv } from "@/lib/math";
29
+
import { getTarget, getTotalFv } from "@/lib/math";
30
30
31
31
const chartConfig = {
32
32
contribution: { label: "Contribution" },
···
47
47
});
48
48
}
49
49
50
-
export default function Fire() {
50
+
export default function Growth() {
51
51
const [principal, setPrincipal] = useState(100000);
52
+
const [periods, setPeriods] = useState(10);
52
53
const [payment, setPayment] = useState(20000);
53
54
const [rate, setRate] = useState(7 / 100);
54
55
const [spending, setSpending] = useState(40000);
55
56
const [withdrawal, setWithDrawal] = useState(4 / 100);
56
57
const [target, setTarget] = useState(0);
57
-
const [periods, setPeriods] = useState(0);
58
58
const [history, setHistory] = useState<ReturnType<typeof calculate>>([]);
59
59
60
60
useEffect(() => {
61
61
if (
62
62
Number.isNaN(principal) ||
63
+
Number.isNaN(periods) ||
63
64
Number.isNaN(payment) ||
64
65
Number.isNaN(rate) ||
65
66
Number.isNaN(spending) ||
66
67
Number.isNaN(withdrawal)
67
68
)
68
69
return;
69
-
const target = getTarget(spending, withdrawal);
70
-
const periods = getPeriodsToTarget(target, principal, payment, rate);
71
-
const history = calculate(principal, payment, rate, Math.ceil(periods) + 5);
72
-
setTarget(target);
73
-
setPeriods(periods);
74
-
setHistory(history);
75
-
}, [principal, payment, rate, spending, withdrawal]);
70
+
71
+
setTarget(getTarget(spending, withdrawal));
72
+
setHistory(calculate(principal, payment, rate, periods));
73
+
}, [principal, periods, payment, rate, spending, withdrawal]);
76
74
77
75
return (
78
76
<main className="flex flex-1 items-center justify-center p-4">
79
77
<Card className="w-full max-w-4xl">
80
78
<CardHeader>
81
-
<CardTitle>Fire</CardTitle>
82
-
<CardDescription> A simple Fire visualizer </CardDescription>
79
+
<CardTitle>Growth</CardTitle>
80
+
<CardDescription>
81
+
See how you money can change with time
82
+
</CardDescription>
83
83
<CardAction>
84
84
In{" "}
85
85
<span className="text-lg leading-none font-bold sm:text-3xl">
···
113
113
</CardContent>
114
114
<CardFooter>
115
115
<FieldGroup>
116
-
<div className="grid grid-cols-3 gap-4">
116
+
<div className="grid grid-cols-2 gap-4">
117
117
<Field>
118
118
<FieldLabel htmlFor="principal">Principal</FieldLabel>
119
119
<Input
···
126
126
/>
127
127
</Field>
128
128
<Field>
129
+
<FieldLabel htmlFor="periods">Periods</FieldLabel>
130
+
<Input
131
+
id="periods"
132
+
type="number"
133
+
value={periods}
134
+
onChange={(e) =>
135
+
setPeriods(Number.parseInt(e.target.value, 10))
136
+
}
137
+
/>
138
+
</Field>
139
+
<Field>
129
140
<FieldLabel htmlFor="payment">Payment</FieldLabel>
130
141
<Input
131
142
id="payment"
···
145
156
onChange={(e) => setRate(Number.parseFloat(e.target.value))}
146
157
/>
147
158
</Field>
148
-
</div>
149
-
<div className="grid grid-cols-2 gap-4">
150
159
<Field>
151
160
<FieldLabel htmlFor="spending">Spending</FieldLabel>
152
161
<Input