mirror of
https://github.com/Tomato6966/investment-portfolio-simulator.git
synced 2025-04-03 21:10:35 +02:00
add start from 0€ for future projection, minor improvements
Some checks failed
Deploy to GitHub Pages / build-and-deploy (push) Has been cancelled
Some checks failed
Deploy to GitHub Pages / build-and-deploy (push) Has been cancelled
This commit is contained in:
tomato6966
parent
0aa0425938
commit
8d46e2bd06
9 changed files with 186 additions and 84 deletions
|
|
@ -2,6 +2,7 @@ import { Loader2 } from "lucide-react";
|
|||
import React, { useState } from "react";
|
||||
import toast from "react-hot-toast";
|
||||
|
||||
import { useLocaleDateFormat } from "../hooks/useLocalDateFormat";
|
||||
import { usePortfolioSelector } from "../hooks/usePortfolio";
|
||||
import { generatePeriodicInvestments } from "../utils/calculations/assetValue";
|
||||
|
||||
|
|
@ -82,6 +83,9 @@ const InvestmentForm = ({ assetId }: { assetId: string }) => {
|
|||
value: 1,
|
||||
unit: 'months'
|
||||
});
|
||||
const [showIntervalWarning, setShowIntervalWarning] = useState(false);
|
||||
|
||||
const localeDateFormat = useLocaleDateFormat();
|
||||
|
||||
const { dateRange, addInvestment } = usePortfolioSelector((state) => ({
|
||||
dateRange: state.dateRange,
|
||||
|
|
@ -140,6 +144,15 @@ const InvestmentForm = ({ assetId }: { assetId: string }) => {
|
|||
}, 10);
|
||||
};
|
||||
|
||||
const handleIntervalUnitChange = (unit: IntervalConfig['unit']) => {
|
||||
setIntervalConfig(prev => ({
|
||||
...prev,
|
||||
unit
|
||||
}));
|
||||
|
||||
setShowIntervalWarning(['days', 'weeks'].includes(unit));
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div>
|
||||
|
|
@ -170,7 +183,7 @@ const InvestmentForm = ({ assetId }: { assetId: string }) => {
|
|||
|
||||
{type === 'single' ? (
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1">Date</label>
|
||||
<label className="block text-sm font-medium mb-1">Date {localeDateFormat && <span className="text-xs text-gray-500">({localeDateFormat})</span>}</label>
|
||||
<input
|
||||
type="date"
|
||||
value={date}
|
||||
|
|
@ -214,10 +227,7 @@ const InvestmentForm = ({ assetId }: { assetId: string }) => {
|
|||
/>
|
||||
<select
|
||||
value={intervalConfig.unit}
|
||||
onChange={(e) => setIntervalConfig(prev => ({
|
||||
...prev,
|
||||
unit: e.target.value as IntervalConfig['unit']
|
||||
}))}
|
||||
onChange={(e) => handleIntervalUnitChange(e.target.value as IntervalConfig['unit'])}
|
||||
className="flex-1 p-2 border rounded dark:bg-slate-800 dark:border-slate-700 dark:outline-none dark:text-gray-300"
|
||||
>
|
||||
<option value="days">Days</option>
|
||||
|
|
@ -227,10 +237,15 @@ const InvestmentForm = ({ assetId }: { assetId: string }) => {
|
|||
<option value="years">Years</option>
|
||||
</select>
|
||||
</div>
|
||||
{showIntervalWarning && (
|
||||
<p className="mt-2 text-sm text-amber-500 dark:text-amber-400">
|
||||
Warning: Using short intervals (days/weeks) may result in longer calculation times due to the higher number of investments to process.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1">SavingsPlan-Start Datum</label>
|
||||
<label className="block text-sm font-medium mb-1">SavingsPlan-Start Datum {localeDateFormat && <span className="text-xs text-gray-500">({localeDateFormat})</span>}</label>
|
||||
<input
|
||||
type="date"
|
||||
value={date}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,13 @@
|
|||
import { format } from "date-fns";
|
||||
import { Loader2, X } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { useEffect, useState } from "react";
|
||||
import toast from "react-hot-toast";
|
||||
|
||||
import { useLocaleDateFormat } from "../../hooks/useLocalDateFormat";
|
||||
import { usePortfolioSelector } from "../../hooks/usePortfolio";
|
||||
import { PeriodicSettings } from "../../types";
|
||||
import { generatePeriodicInvestments } from "../../utils/calculations/assetValue";
|
||||
import { Tooltip } from "../utils/ToolTip";
|
||||
|
||||
interface EditSavingsPlanModalProps {
|
||||
assetId: string;
|
||||
|
|
@ -20,6 +23,11 @@ interface EditSavingsPlanModalProps {
|
|||
onClose: () => void;
|
||||
}
|
||||
|
||||
interface IntervalConfig {
|
||||
value: number;
|
||||
unit: 'days' | 'months' | 'years';
|
||||
}
|
||||
|
||||
export const EditSavingsPlanModal = ({
|
||||
assetId,
|
||||
groupId,
|
||||
|
|
@ -38,6 +46,9 @@ export const EditSavingsPlanModal = ({
|
|||
const [dynamicValue, setDynamicValue] = useState(initialDynamic?.value.toString() || '');
|
||||
const [yearInterval, setYearInterval] = useState(initialDynamic?.yearInterval.toString() || '1');
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [showIntervalWarning, setShowIntervalWarning] = useState(false);
|
||||
const [startDate, setStartDate] = useState('');
|
||||
const localeDateFormat = useLocaleDateFormat();
|
||||
|
||||
const { dateRange, addInvestment, removeInvestment, assets } = usePortfolioSelector((state) => ({
|
||||
dateRange: state.dateRange,
|
||||
|
|
@ -46,6 +57,13 @@ export const EditSavingsPlanModal = ({
|
|||
assets: state.assets,
|
||||
}));
|
||||
|
||||
useEffect(() => {
|
||||
const asset = assets.find(a => a.id === assetId)!;
|
||||
const investments = asset.investments.filter(inv => inv.periodicGroupId === groupId);
|
||||
const firstInvestmentDate = investments[0].date!;
|
||||
setStartDate(format(firstInvestmentDate, 'yyyy-MM-dd'));
|
||||
}, [assetId, groupId, assets]);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
|
@ -56,15 +74,14 @@ export const EditSavingsPlanModal = ({
|
|||
// First, remove all existing investments for this savings plan
|
||||
const asset = assets.find(a => a.id === assetId)!;
|
||||
const investments = asset.investments.filter(inv => inv.periodicGroupId === groupId);
|
||||
const startDate = investments[0].date!; // Keep original start date
|
||||
|
||||
investments.forEach(inv => {
|
||||
removeInvestment(assetId, inv.id);
|
||||
});
|
||||
|
||||
// Generate and add new investments
|
||||
// Generate and add new investments with the new start date
|
||||
const periodicSettings: PeriodicSettings = {
|
||||
startDate: new Date(startDate),
|
||||
startDate: new Date(startDate), // Use the new start date
|
||||
dayOfMonth: parseInt(dayOfMonth),
|
||||
interval: parseInt(interval),
|
||||
intervalUnit: intervalUnit,
|
||||
|
|
@ -95,6 +112,11 @@ export const EditSavingsPlanModal = ({
|
|||
}, 10);
|
||||
};
|
||||
|
||||
const handleIntervalUnitChange = (unit: IntervalConfig['unit']) => {
|
||||
setIntervalUnit(unit);
|
||||
setShowIntervalWarning(['days', 'weeks'].includes(unit));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||
<div className="bg-white dark:bg-slate-800 rounded-lg p-6 w-full max-w-lg">
|
||||
|
|
@ -137,7 +159,11 @@ export const EditSavingsPlanModal = ({
|
|||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1 dark:text-gray-200">Interval</label>
|
||||
<label className="block text-sm font-medium mb-1 dark:text-gray-200">
|
||||
<Tooltip content="Choose the interval for your regular investments. For monthly payments on the 1st of a month, investments will automatically be executed on the 1st of each month.">
|
||||
Interval
|
||||
</Tooltip>
|
||||
</label>
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type="number"
|
||||
|
|
@ -149,7 +175,7 @@ export const EditSavingsPlanModal = ({
|
|||
/>
|
||||
<select
|
||||
value={intervalUnit}
|
||||
onChange={(e) => setIntervalUnit(e.target.value as 'days' | 'weeks' | 'months' | 'quarters' | 'years')}
|
||||
onChange={(e) => handleIntervalUnitChange(e.target.value as IntervalConfig['unit'])}
|
||||
className="flex-1 p-2 border rounded dark:bg-slate-800 dark:border-slate-700 dark:outline-none dark:text-gray-300"
|
||||
>
|
||||
<option value="days">Days</option>
|
||||
|
|
@ -159,6 +185,11 @@ export const EditSavingsPlanModal = ({
|
|||
<option value="years">Years</option>
|
||||
</select>
|
||||
</div>
|
||||
{showIntervalWarning && (
|
||||
<p className="mt-2 text-sm text-amber-500 dark:text-amber-400">
|
||||
Warning: Using short intervals (days/weeks) may result in longer calculation times due to the higher number of investments to process.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
|
@ -220,6 +251,20 @@ export const EditSavingsPlanModal = ({
|
|||
</>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1 dark:text-gray-200">
|
||||
Start Date {localeDateFormat && <span className="text-xs text-gray-500">({localeDateFormat})</span>}
|
||||
</label>
|
||||
<input
|
||||
type="date"
|
||||
value={startDate}
|
||||
onChange={(e) => setStartDate(e.target.value)}
|
||||
className="w-full p-2 border rounded dark:bg-slate-800 dark:border-slate-700 dark:outline-none dark:text-gray-300 [&::-webkit-calendar-picker-indicator]:dark:invert"
|
||||
required
|
||||
lang="de"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-2">
|
||||
<button
|
||||
type="button"
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import {
|
|||
import { usePortfolioSelector } from "../../hooks/usePortfolio";
|
||||
import { calculateFutureProjection } from "../../utils/calculations/futureProjection";
|
||||
import { formatCurrency } from "../../utils/formatters";
|
||||
import { Tooltip as InfoTooltip } from "../utils/ToolTip";
|
||||
|
||||
import type { ProjectionData, SustainabilityAnalysis, WithdrawalPlan } from "../../types";
|
||||
interface FutureProjectionModalProps {
|
||||
|
|
@ -49,6 +50,7 @@ export const FutureProjectionModal = ({
|
|||
},
|
||||
});
|
||||
const [sustainabilityAnalysis, setSustainabilityAnalysis] = useState<SustainabilityAnalysis | null>(null);
|
||||
const [startFromZero, setStartFromZero] = useState(false);
|
||||
|
||||
const { assets } = usePortfolioSelector((state) => ({
|
||||
assets: state.assets,
|
||||
|
|
@ -62,6 +64,7 @@ export const FutureProjectionModal = ({
|
|||
parseInt(years),
|
||||
performancePerAnno,
|
||||
withdrawalPlan.enabled ? withdrawalPlan : undefined,
|
||||
startFromZero
|
||||
);
|
||||
setProjectionData(projection);
|
||||
setSustainabilityAnalysis(sustainability);
|
||||
|
|
@ -101,7 +104,7 @@ export const FutureProjectionModal = ({
|
|||
} finally {
|
||||
setIsCalculating(false);
|
||||
}
|
||||
}, [assets, years, withdrawalPlan, performancePerAnno, bestPerformancePerAnno, worstPerformancePerAnno]);
|
||||
}, [assets, years, withdrawalPlan, performancePerAnno, bestPerformancePerAnno, worstPerformancePerAnno, startFromZero]);
|
||||
|
||||
const CustomTooltip = ({ active, payload, label }: any) => {
|
||||
if (active && payload && payload.length) {
|
||||
|
|
@ -413,11 +416,8 @@ export const FutureProjectionModal = ({
|
|||
<div className="grid grid-cols-2 gap-6">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-3 dark:text-gray-200">Projection Settings</h3>
|
||||
<i className="block text-sm font-medium mb-1 dark:text-gray-300">
|
||||
Project for next {years} years
|
||||
</i>
|
||||
<div className="flex gap-4">
|
||||
<div>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="number"
|
||||
value={years}
|
||||
|
|
@ -426,33 +426,50 @@ export const FutureProjectionModal = ({
|
|||
max="50"
|
||||
className="w-24 p-2 border rounded dark:bg-slate-700 dark:border-slate-600 dark:text-gray-200"
|
||||
/>
|
||||
<button
|
||||
onClick={calculateProjection}
|
||||
disabled={isCalculating}
|
||||
className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{isCalculating ? (
|
||||
<Loader2 className="animate-spin" size={16} />
|
||||
) : (
|
||||
'Calculate'
|
||||
)}
|
||||
</button>
|
||||
<div className="flex gap-2 ml-auto">
|
||||
<button
|
||||
onClick={() => setChartType('line')}
|
||||
className={`p-2 rounded ${chartType === 'line' ? 'bg-blue-100 dark:bg-blue-900' : 'hover:bg-gray-100 dark:hover:bg-slate-700'}`}
|
||||
title="Line Chart"
|
||||
>
|
||||
<LineChartIcon size={20} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setChartType('bar')}
|
||||
className={`p-2 rounded ${chartType === 'bar' ? 'bg-blue-100 dark:bg-blue-900' : 'hover:bg-gray-100 dark:hover:bg-slate-700'}`}
|
||||
title="Bar Chart"
|
||||
>
|
||||
<BarChartIcon size={20} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={calculateProjection}
|
||||
disabled={isCalculating}
|
||||
className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{isCalculating ? (
|
||||
<Loader2 className="animate-spin" size={16} />
|
||||
) : (
|
||||
'Calculate'
|
||||
)}
|
||||
</button>
|
||||
<div className="flex gap-2 ml-auto">
|
||||
<button
|
||||
onClick={() => setChartType('line')}
|
||||
className={`p-2 rounded ${chartType === 'line' ? 'bg-blue-100 dark:bg-blue-900' : 'hover:bg-gray-100 dark:hover:bg-slate-700'}`}
|
||||
title="Line Chart"
|
||||
>
|
||||
<LineChartIcon size={20} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setChartType('bar')}
|
||||
className={`p-2 rounded ${chartType === 'bar' ? 'bg-blue-100 dark:bg-blue-900' : 'hover:bg-gray-100 dark:hover:bg-slate-700'}`}
|
||||
title="Bar Chart"
|
||||
>
|
||||
<BarChartIcon size={20} />
|
||||
</button>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<label className="relative inline-flex items-center cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="sr-only peer"
|
||||
checked={startFromZero}
|
||||
onChange={(e) => setStartFromZero(e.target.checked)}
|
||||
/>
|
||||
<div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
|
||||
<span className="ml-2 text-sm font-medium dark:text-gray-300">
|
||||
<InfoTooltip content="Simulate how your savings plan would perform if you started from zero capital today">
|
||||
Start from 0€
|
||||
</InfoTooltip>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-10 text-sm text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-slate-700/50 p-3 rounded">
|
||||
|
|
|
|||
|
|
@ -82,9 +82,9 @@ export default function PortfolioTable() {
|
|||
<div className="space-y-2">
|
||||
<p>The performance of your portfolio is {performance.summary.performancePercentage.toFixed(2)}%</p>
|
||||
<p>The average (acc.) performance of all positions is {averagePerformance}%</p>
|
||||
<p>The average (p.a.) performance of every year is {performance.summary.performancePerAnnoPerformance.toFixed(2)}%</p>
|
||||
<p>Best p.a.: {performance.summary.bestPerformancePerAnno?.[0]?.percentage?.toFixed(2) || "0.00"}% ({performance.summary.bestPerformancePerAnno?.[0]?.year || "N/A"})</p>
|
||||
<p>Worst p.a.: {performance.summary.worstPerformancePerAnno?.[0]?.percentage?.toFixed(2) || "0.00"}% ({performance.summary.worstPerformancePerAnno?.[0]?.year || "N/A"})</p>
|
||||
<p>The average (p.a.) performance of every year is {(performance.summary.performancePerAnnoPerformance || 0)?.toFixed(2)}%</p>
|
||||
<p>Best p.a.: {(performance.summary.bestPerformancePerAnno?.[0]?.percentage || 0)?.toFixed(2)}% ({performance.summary.bestPerformancePerAnno?.[0]?.year || "N/A"})</p>
|
||||
<p>Worst p.a.: {(performance.summary.worstPerformancePerAnno?.[0]?.percentage || 0)?.toFixed(2)}% ({performance.summary.worstPerformancePerAnno?.[0]?.year || "N/A"})</p>
|
||||
<p className="text-xs mt-2">
|
||||
Note: An average performance of positions doesn't always match your entire portfolio's average,
|
||||
especially with single investments or investments on different time ranges.
|
||||
|
|
@ -307,8 +307,7 @@ export default function PortfolioTable() {
|
|||
groupId,
|
||||
amount: firstInvestment.amount,
|
||||
dayOfMonth: firstInvestment.date?.getDate() || 0,
|
||||
interval: 30, // You might want to store this in the investment object
|
||||
// Add dynamic settings if available
|
||||
interval: 1,
|
||||
})}
|
||||
className="p-1 hover:bg-gray-100 dark:hover:bg-slate-700 rounded transition-colors"
|
||||
>
|
||||
|
|
@ -349,7 +348,7 @@ export default function PortfolioTable() {
|
|||
investedAmount: performance.summary.totalInvested.toFixed(2),
|
||||
investedAtPrice: "",
|
||||
currentValue: performance.summary.currentValue.toFixed(2),
|
||||
performancePercentage: `${performance.summary.performancePercentage.toFixed(2)}% (avg. acc. ${averagePerformance}%) (avg. p.a. ${performance.summary.performancePerAnnoPerformance.toFixed(2)}%)`,
|
||||
performancePercentage: `${performance.summary.performancePercentage.toFixed(2)}% (avg. acc. ${averagePerformance}%) (avg. p.a. ${(performance.summary.performancePerAnnoPerformance || 0).toFixed(2)}%)`,
|
||||
periodicGroupId: "",
|
||||
},
|
||||
{
|
||||
|
|
@ -411,7 +410,7 @@ export default function PortfolioTable() {
|
|||
{performance.summary.performancePercentage.toFixed(2)}%
|
||||
<ul>
|
||||
<li className="text-xs text-gray-500 dark:text-gray-400">(avg. acc. {averagePerformance}%)</li>
|
||||
<li className="text-xs text-gray-500 dark:text-gray-400">(avg. p.a. {performance.summary.performancePerAnnoPerformance.toFixed(2)}%)</li>
|
||||
<li className="text-xs text-gray-500 dark:text-gray-400">(avg. p.a. {(performance.summary.performancePerAnnoPerformance || 0).toFixed(2)}%)</li>
|
||||
<li className="text-[10px] text-gray-500 dark:text-gray-400 italic">(best p.a. {performance.summary.bestPerformancePerAnno?.[0]?.percentage?.toFixed(2) || "0.00"}% {performance.summary.bestPerformancePerAnno?.[0]?.year || "N/A"})</li>
|
||||
<li className="text-[10px] text-gray-500 dark:text-gray-400 italic">(worst p.a. {performance.summary.worstPerformancePerAnno?.[0]?.percentage?.toFixed(2) || "0.00"}% {performance.summary.worstPerformancePerAnno?.[0]?.year || "N/A"})</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
import { format, isValid, parseISO } from "date-fns";
|
||||
import { useRef } from "react";
|
||||
import { useDebouncedCallback } from "use-debounce";
|
||||
|
||||
import { useLocaleDateFormat } from "../../hooks/useLocalDateFormat";
|
||||
import { formatDateToISO, isValidDate } from "../../utils/formatters";
|
||||
|
||||
interface DateRangePickerProps {
|
||||
startDate: Date;
|
||||
endDate: Date;
|
||||
|
|
@ -17,24 +19,12 @@ export const DateRangePicker = ({
|
|||
}: DateRangePickerProps) => {
|
||||
const startDateRef = useRef<HTMLInputElement>(null);
|
||||
const endDateRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const formatDateToISO = (date: Date) => {
|
||||
return format(date, 'yyyy-MM-dd');
|
||||
};
|
||||
|
||||
const isValidDate = (dateString: string) => {
|
||||
const parsed = parseISO(dateString);
|
||||
return isValid(parsed);
|
||||
};
|
||||
const localeDateFormat = useLocaleDateFormat();
|
||||
|
||||
const debouncedStartDateChange = useDebouncedCallback(
|
||||
(dateString: string) => {
|
||||
if (isValidDate(dateString)) {
|
||||
const newDate = new Date(Date.UTC(
|
||||
parseISO(dateString).getUTCFullYear(),
|
||||
parseISO(dateString).getUTCMonth(),
|
||||
parseISO(dateString).getUTCDate()
|
||||
));
|
||||
const newDate = new Date(dateString);
|
||||
|
||||
if (newDate.getTime() !== startDate.getTime()) {
|
||||
onStartDateChange(newDate);
|
||||
|
|
@ -47,11 +37,7 @@ export const DateRangePicker = ({
|
|||
const debouncedEndDateChange = useDebouncedCallback(
|
||||
(dateString: string) => {
|
||||
if (isValidDate(dateString)) {
|
||||
const newDate = new Date(Date.UTC(
|
||||
parseISO(dateString).getUTCFullYear(),
|
||||
parseISO(dateString).getUTCMonth(),
|
||||
parseISO(dateString).getUTCDate()
|
||||
));
|
||||
const newDate = new Date(dateString);
|
||||
|
||||
if (newDate.getTime() !== endDate.getTime()) {
|
||||
onEndDateChange(newDate);
|
||||
|
|
@ -76,7 +62,9 @@ export const DateRangePicker = ({
|
|||
return (
|
||||
<div className="flex gap-4 items-center mb-4 dark:text-gray-300">
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1">From</label>
|
||||
<label className="block text-sm font-medium mb-1">
|
||||
From {localeDateFormat && <span className="text-xs text-gray-500">({localeDateFormat})</span>}
|
||||
</label>
|
||||
<input
|
||||
ref={startDateRef}
|
||||
type="date"
|
||||
|
|
@ -84,11 +72,12 @@ export const DateRangePicker = ({
|
|||
onChange={handleStartDateChange}
|
||||
max={formatDateToISO(endDate)}
|
||||
className="w-full p-2 border rounded dark:bg-slate-800 dark:border-slate-700 dark:outline-none dark:text-gray-300 [&::-webkit-calendar-picker-indicator]:dark:invert"
|
||||
lang="de"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1">To</label>
|
||||
<label className="block text-sm font-medium mb-1">
|
||||
To {localeDateFormat && <span className="text-xs text-gray-500">({localeDateFormat})</span>}
|
||||
</label>
|
||||
<input
|
||||
ref={endDateRef}
|
||||
type="date"
|
||||
|
|
@ -97,7 +86,6 @@ export const DateRangePicker = ({
|
|||
min={formatDateToISO(startDate)}
|
||||
max={formatDateToISO(new Date())}
|
||||
className="w-full p-2 border rounded dark:bg-slate-800 dark:border-slate-700 dark:outline-none dark:text-gray-300 [&::-webkit-calendar-picker-indicator]:dark:invert"
|
||||
lang="de"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
20
src/hooks/useLocalDateFormat.tsx
Normal file
20
src/hooks/useLocalDateFormat.tsx
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
import { useMemo } from "react";
|
||||
|
||||
export const useLocaleDateFormat = () => {
|
||||
return useMemo(() => {
|
||||
const formatter = new Intl.DateTimeFormat(undefined, {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
});
|
||||
|
||||
const testDate = new Date(2024, 0, 1);
|
||||
const formattedParts = formatter.formatToParts(testDate);
|
||||
|
||||
const order = formattedParts
|
||||
.filter(part => part.type !== 'literal') // Entferne Trennzeichen
|
||||
.map(part => part.type);
|
||||
|
||||
return order.join('/').toUpperCase().replace(/DAY/g, 'DD').replace(/MONTH/g, 'MM').replace(/YEAR/g, 'YYYY');
|
||||
}, []);
|
||||
};
|
||||
|
|
@ -52,6 +52,7 @@ export const calculateFutureProjection = async (
|
|||
yearsToProject: number,
|
||||
annualReturnRate: number,
|
||||
withdrawalPlan?: WithdrawalPlan,
|
||||
startFromZero: boolean = false
|
||||
): Promise<{
|
||||
projection: ProjectionData[];
|
||||
sustainability: SustainabilityAnalysis;
|
||||
|
|
@ -67,6 +68,7 @@ export const calculateFutureProjection = async (
|
|||
const periodicInvestments = currentAssets.flatMap(asset => {
|
||||
const patterns = new Map<string, Investment[]>();
|
||||
|
||||
// When startFromZero is true, only include periodic investments
|
||||
asset.investments.forEach(inv => {
|
||||
if (inv.type === 'periodic' && inv.periodicGroupId) {
|
||||
if (!patterns.has(inv.periodicGroupId)) {
|
||||
|
|
@ -115,17 +117,27 @@ export const calculateFutureProjection = async (
|
|||
|
||||
// Calculate monthly values
|
||||
let currentDate = new Date();
|
||||
let totalInvested = currentAssets.reduce(
|
||||
(sum, asset) => sum + asset.investments.reduce(
|
||||
(assetSum, inv) => assetSum + inv.amount, 0
|
||||
), 0
|
||||
);
|
||||
|
||||
// Initialize totalInvested based on startFromZero flag
|
||||
let totalInvested = 0;
|
||||
if (!startFromZero) {
|
||||
// Include all investments if not starting from zero
|
||||
totalInvested = currentAssets.reduce(
|
||||
(sum, asset) => sum + asset.investments.reduce(
|
||||
(assetSum, inv) => assetSum + inv.amount, 0
|
||||
), 0
|
||||
);
|
||||
} else {
|
||||
// Start from zero when startFromZero is true
|
||||
totalInvested = 0;
|
||||
// Don't initialize with any periodic investments - they'll accumulate over time
|
||||
}
|
||||
|
||||
let totalWithdrawn = 0;
|
||||
let yearsToReachTarget = 0;
|
||||
let targetValue = 0;
|
||||
let sustainableYears: number | 'infinite' = 'infinite';
|
||||
let portfolioValue = totalInvested; // Initialize portfolio value with current investments
|
||||
let portfolioValue = startFromZero ? 0 : totalInvested; // Start from 0 if startFromZero is true
|
||||
let withdrawalsStarted = false;
|
||||
let withdrawalStartDate: Date | null = null;
|
||||
let portfolioDepletionDate: Date | null = null;
|
||||
|
|
@ -172,11 +184,12 @@ export const calculateFutureProjection = async (
|
|||
const monthlyInvestment = monthInvestments.reduce(
|
||||
(sum, inv) => sum + inv.amount, 0
|
||||
);
|
||||
|
||||
// Always add periodic investments to both totalInvested and portfolioValue
|
||||
totalInvested += monthlyInvestment;
|
||||
portfolioValue += monthlyInvestment;
|
||||
}
|
||||
|
||||
|
||||
// Handle withdrawals
|
||||
let monthlyWithdrawal = 0;
|
||||
if (withdrawalsStarted && portfolioValue > 0) {
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ export const calculatePortfolioValue = (assets: Asset[], dateRange: DateRange) =
|
|||
for (const asset of assets) {
|
||||
// calculate the invested kapital
|
||||
for (const investment of asset.investments) {
|
||||
if (!isAfter(new Date(investment.date!), currentDate)) {
|
||||
if (!isAfter(new Date(investment.date!), currentDate) && !isSameDay(new Date(investment.date!), currentDate)) {
|
||||
dayData.invested += investment.amount;
|
||||
}
|
||||
}
|
||||
|
|
@ -75,7 +75,7 @@ export const calculatePortfolioValue = (assets: Asset[], dateRange: DateRange) =
|
|||
const totalInvested = dayData.invested; // Total invested amount for the day
|
||||
const totalCurrentValue = dayData.total; // Total current value for the day
|
||||
|
||||
dayData.percentageChange = totalInvested > 0
|
||||
dayData.percentageChange = totalInvested > 0 && totalCurrentValue > 0
|
||||
? ((totalCurrentValue - totalInvested) / totalInvested) * 100
|
||||
: 0;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
import { formatDate, isValid, parseISO } from "date-fns";
|
||||
|
||||
export const formatCurrency = (value: number): string => {
|
||||
return `€${value.toLocaleString('de-DE', {
|
||||
minimumFractionDigits: 2,
|
||||
|
|
@ -34,3 +36,6 @@ export const getHexColor = (usedColors: Set<string>, isDarkMode: boolean): strin
|
|||
// Fallback to random color if all predefined colors are used
|
||||
return `#${Math.floor(Math.random() * 16777215).toString(16)}`;
|
||||
};
|
||||
|
||||
export const formatDateToISO = (date: Date) => formatDate(date, 'yyyy-MM-dd');
|
||||
export const isValidDate = (dateString: string) => isValid(parseISO(dateString));
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue