diff --git a/src/components/InvestmentForm.tsx b/src/components/InvestmentForm.tsx index 214a6f8..df7b000 100644 --- a/src/components/InvestmentForm.tsx +++ b/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 (
@@ -170,7 +183,7 @@ const InvestmentForm = ({ assetId }: { assetId: string }) => { {type === 'single' ? (
- + { />
+ {showIntervalWarning && ( +

+ Warning: Using short intervals (days/weeks) may result in longer calculation times due to the higher number of investments to process. +

+ )}
- + 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 (
@@ -137,7 +159,11 @@ export const EditSavingsPlanModal = ({
- +
+ {showIntervalWarning && ( +

+ Warning: Using short intervals (days/weeks) may result in longer calculation times due to the higher number of investments to process. +

+ )}
@@ -220,6 +251,20 @@ export const EditSavingsPlanModal = ({ )} +
+ + 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" + /> +
+
+
+ + +
- -
- - + +
+
diff --git a/src/components/PortfolioTable.tsx b/src/components/PortfolioTable.tsx index d805359..b559607 100644 --- a/src/components/PortfolioTable.tsx +++ b/src/components/PortfolioTable.tsx @@ -82,9 +82,9 @@ export default function PortfolioTable() {

The performance of your portfolio is {performance.summary.performancePercentage.toFixed(2)}%

The average (acc.) performance of all positions is {averagePerformance}%

-

The average (p.a.) performance of every year is {performance.summary.performancePerAnnoPerformance.toFixed(2)}%

-

Best p.a.: {performance.summary.bestPerformancePerAnno?.[0]?.percentage?.toFixed(2) || "0.00"}% ({performance.summary.bestPerformancePerAnno?.[0]?.year || "N/A"})

-

Worst p.a.: {performance.summary.worstPerformancePerAnno?.[0]?.percentage?.toFixed(2) || "0.00"}% ({performance.summary.worstPerformancePerAnno?.[0]?.year || "N/A"})

+

The average (p.a.) performance of every year is {(performance.summary.performancePerAnnoPerformance || 0)?.toFixed(2)}%

+

Best p.a.: {(performance.summary.bestPerformancePerAnno?.[0]?.percentage || 0)?.toFixed(2)}% ({performance.summary.bestPerformancePerAnno?.[0]?.year || "N/A"})

+

Worst p.a.: {(performance.summary.worstPerformancePerAnno?.[0]?.percentage || 0)?.toFixed(2)}% ({performance.summary.worstPerformancePerAnno?.[0]?.year || "N/A"})

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)}%

  • (avg. acc. {averagePerformance}%)
    • -
  • (avg. p.a. {performance.summary.performancePerAnnoPerformance.toFixed(2)}%)
    • +
  • (avg. p.a. {(performance.summary.performancePerAnnoPerformance || 0).toFixed(2)}%)
  • (best p.a. {performance.summary.bestPerformancePerAnno?.[0]?.percentage?.toFixed(2) || "0.00"}% {performance.summary.bestPerformancePerAnno?.[0]?.year || "N/A"})
  • (worst p.a. {performance.summary.worstPerformancePerAnno?.[0]?.percentage?.toFixed(2) || "0.00"}% {performance.summary.worstPerformancePerAnno?.[0]?.year || "N/A"})
diff --git a/src/components/utils/DateRangePicker.tsx b/src/components/utils/DateRangePicker.tsx index 98e5aaa..2125107 100644 --- a/src/components/utils/DateRangePicker.tsx +++ b/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(null); const endDateRef = useRef(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 (
- +
- +
diff --git a/src/hooks/useLocalDateFormat.tsx b/src/hooks/useLocalDateFormat.tsx new file mode 100644 index 0000000..b5951a4 --- /dev/null +++ b/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'); + }, []); +}; diff --git a/src/utils/calculations/futureProjection.ts b/src/utils/calculations/futureProjection.ts index 7609c1a..25b465c 100644 --- a/src/utils/calculations/futureProjection.ts +++ b/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(); + // 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) { diff --git a/src/utils/calculations/portfolioValue.ts b/src/utils/calculations/portfolioValue.ts index d7e4482..4a2f5bf 100644 --- a/src/utils/calculations/portfolioValue.ts +++ b/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; diff --git a/src/utils/formatters.ts b/src/utils/formatters.ts index 3b0188a..01ed4b1 100644 --- a/src/utils/formatters.ts +++ b/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, 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));