add start from 0€ for future projection, minor improvements

src/components/InvestmentForm.tsx

@@ -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 => ({
+                                onChange={(e) => handleIntervalUnitChange(e.target.value as IntervalConfig['unit'])}
-                                    ...prev,
-                                    unit: 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}

src/components/Modals/EditSavingsPlanModal.tsx

@@ -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"

src/components/Modals/FutureProjectionModal.tsx

@@ -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">
+                            <div className="space-y-4">
-                                Project for next {years} years
+                                <div className="flex items-center gap-2">
-                            </i>
-                            <div className="flex gap-4">
-                                <div>
                                     <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}
+                                <div className="flex items-center gap-2">
-                                    disabled={isCalculating}
+                                    <label className="relative inline-flex items-center cursor-pointer">
-                                    className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed"
+                                        <input
-                                >
+                                            type="checkbox"
-                                    {isCalculating ? (
+                                            className="sr-only peer"
-                                        <Loader2 className="animate-spin" size={16} />
+                                            checked={startFromZero}
-                                    ) : (
+                                            onChange={(e) => setStartFromZero(e.target.checked)}
-                                        'Calculate'
+                                        />
-                                    )}
+                                        <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>
-                                </button>
+                                        <span className="ml-2 text-sm font-medium dark:text-gray-300">
-                                <div className="flex gap-2 ml-auto">
+                                            <InfoTooltip content="Simulate how your savings plan would perform if you started from zero capital today">
-                                    <button
+                                                Start from 0€
-                                        onClick={() => setChartType('line')}
+                                            </InfoTooltip>
-                                        className={`p-2 rounded ${chartType === 'line' ? 'bg-blue-100 dark:bg-blue-900' : 'hover:bg-gray-100 dark:hover:bg-slate-700'}`}
+                                        </span>
-                                        title="Line Chart"
+                                    </label>
-                                    >
-                                        <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>
                             <div className="mt-10 text-sm text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-slate-700/50 p-3 rounded">

src/components/PortfolioTable.tsx

@@ -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>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?.toFixed(2) || "0.00"}% ({performance.summary.bestPerformancePerAnno?.[0]?.year || "N/A"})</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?.toFixed(2) || "0.00"}% ({performance.summary.worstPerformancePerAnno?.[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
+                                                            interval: 1,
-                                                            // Add dynamic settings if available
                                                         })}
                                                         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>

src/components/utils/DateRangePicker.tsx

@@ -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 localeDateFormat = useLocaleDateFormat();
-    const formatDateToISO = (date: Date) => {
-        return format(date, 'yyyy-MM-dd');
-    };
-
-    const isValidDate = (dateString: string) => {
-        const parsed = parseISO(dateString);
-        return isValid(parsed);
-    };
 
     const debouncedStartDateChange = useDebouncedCallback(
         (dateString: string) => {
             if (isValidDate(dateString)) {
-                const newDate = new Date(Date.UTC(
+                const newDate = new Date(dateString);
-                    parseISO(dateString).getUTCFullYear(),
-                    parseISO(dateString).getUTCMonth(),
-                    parseISO(dateString).getUTCDate()
-                ));
 
                 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(
+                const newDate = new Date(dateString);
-                    parseISO(dateString).getUTCFullYear(),
-                    parseISO(dateString).getUTCMonth(),
-                    parseISO(dateString).getUTCDate()
-                ));
 
                 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>

src/hooks/useLocalDateFormat.tsx

@@ -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');
+    }, []);
+};

src/utils/calculations/futureProjection.ts

@@ -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(
+    // Initialize totalInvested based on startFromZero flag
-            (assetSum, inv) => assetSum + inv.amount, 0
+    let totalInvested = 0;
-        ), 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) {

src/utils/calculations/portfolioValue.ts

@@ -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;
 

src/utils/formatters.ts

@@ -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));