{
all other assets are scaled by their % gain/loss and thus scaled to the right YAxis.
- ), [assets, isDarkMode, assetColors, hideAssets, hiddenAssets, processedData, CustomLegend, dateRange, updateDateRange, isFullscreen]);
+ ), [assets, isDarkMode, assetColors, handleUpdateDateRange, hideAssets, hiddenAssets, processedData, CustomLegend, dateRange, isFullscreen]);
+
if (isFullscreen) {
return (
diff --git a/src/components/PortfolioTable.tsx b/src/components/PortfolioTable.tsx
index 87bb8d8..e2e312a 100644
--- a/src/components/PortfolioTable.tsx
+++ b/src/components/PortfolioTable.tsx
@@ -1,246 +1,371 @@
import { format } from "date-fns";
-import { HelpCircle, LineChart, Pencil, RefreshCw, ShoppingBag, Trash2 } from "lucide-react";
+import {
+ Download, FileDown, LineChart, Loader2, Pencil, RefreshCw, ShoppingBag, Trash2
+} from "lucide-react";
import { useCallback, useMemo, useState } from "react";
-import { usePortfolioStore } from "../store/portfolioStore";
+import { usePortfolioSelector } from "../hooks/usePortfolio";
import { Investment } from "../types";
import { calculateInvestmentPerformance } from "../utils/calculations/performance";
-import { EditInvestmentModal } from "./EditInvestmentModal";
-import { FutureProjectionModal } from "./FutureProjectionModal";
+import { downloadTableAsCSV, generatePortfolioPDF } from "../utils/export";
+import { EditInvestmentModal } from "./Modals/EditInvestmentModal";
+import { FutureProjectionModal } from "./Modals/FutureProjectionModal";
+import { Tooltip } from "./utils/ToolTip";
-interface TooltipProps {
- content: string | JSX.Element;
- children: React.ReactNode;
-}
+export default function PortfolioTable() {
+ const { assets, removeInvestment, clearInvestments } = usePortfolioSelector((state) => ({
+ assets: state.assets,
+ removeInvestment: state.removeInvestment,
+ clearInvestments: state.clearInvestments,
+ }));
-const Tooltip = ({ content, children }: TooltipProps) => {
- const [show, setShow] = useState(false);
+ const [editingInvestment, setEditingInvestment] = useState<{
+ investment: Investment;
+ assetId: string;
+ } | null>(null);
+ const [showSavingsPlans, setShowSavingsPlans] = useState(true);
+ const [isGeneratingPDF, setIsGeneratingPDF] = useState(false);
+
+ const performance = useMemo(() => calculateInvestmentPerformance(assets), [assets]);
+
+ const averagePerformance = useMemo(() => {
+ return ((performance.investments.reduce((sum, inv) => sum + inv.performancePercentage, 0) / performance.investments.length) || 0).toFixed(2);
+ }, [performance.investments]);
+
+ const handleDelete = useCallback((investmentId: string, assetId: string) => {
+ if (window.confirm("Are you sure you want to delete this investment?")) {
+ removeInvestment(assetId, investmentId);
+ }
+ }, [removeInvestment]);
+
+ const handleClearAll = useCallback(() => {
+ if (window.confirm("Are you sure you want to clear all investments?")) {
+ clearInvestments();
+ }
+ }, [clearInvestments]);
+
+ const performanceTooltip = useMemo(() => (
+
+
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"})
+
+ 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.
+
+
+ ), [performance.summary.performancePercentage, averagePerformance, performance.summary.performancePerAnnoPerformance, performance.summary.bestPerformancePerAnno, performance.summary.worstPerformancePerAnno]);
+
+ const buyInTooltip = useMemo(() => (
+
+
"Buy-in" shows the asset's price when that position was bought.
+
"Avg" shows the average buy-in price across all positions for that asset.
+
+ ), []);
+
+ const currentAmountTooltip = useMemo(() => (
+ "The current value of your investment based on the latest market price."
+ ), []);
+
+ const ttworTooltip = useMemo(() => (
+
+
Time Travel Without Risk (TTWOR) shows how your portfolio would have performed if all investments had been made at the beginning of the period.
+
+ It helps to evaluate the impact of your investment timing strategy compared to a single early investment.
+
+
+ ), []);
+
+ const [showProjection, setShowProjection] = useState(false);
+
+ const isSavingsPlanOverviewDisabled = useMemo(() => {
+ return !assets.some(asset => asset.investments.some(inv => inv.type === 'periodic'));
+ }, [assets]);
+
+ const savingsPlansPerformance = useMemo(() => {
+ if(isSavingsPlanOverviewDisabled) return [];
+ const performance = [];
+ for (const asset of assets) {
+ const savingsPlans = asset.investments.filter(inv => inv.type === 'periodic');
+ if (savingsPlans.length > 0) {
+ const assetPerformance = calculateInvestmentPerformance([{
+ ...asset,
+ investments: savingsPlans
+ }]);
+ performance.push({
+ assetName: asset.name,
+ amount: savingsPlans[0].amount,
+ ...assetPerformance.summary
+ });
+ }
+ }
+ return performance;
+ }, [assets, isSavingsPlanOverviewDisabled]);
+
+ const handleGeneratePDF = async () => {
+ setIsGeneratingPDF(true);
+ try {
+ await generatePortfolioPDF(
+ assets,
+ performance,
+ savingsPlansPerformance,
+ performance.summary.performancePerAnnoPerformance
+ );
+ } finally {
+ setIsGeneratingPDF(false);
+ }
+ };
return (
-
-
setShow(true)}
- onMouseLeave={() => setShow(false)}
- >
- {children}
-
-
- {show && (
-
- {content}
+
+
+
+
Portfolio's Positions Overview
+
+
+
+
+
+
+
+
+
+ {!isSavingsPlanOverviewDisabled && showSavingsPlans && savingsPlansPerformance.length > 0 && (
+
+
+
Savings Plans Performance
+
+
+
+
+
+ | Asset |
+ Interval Amount |
+ Total Invested |
+ Current Value |
+ Performance (%) |
+ Performance (p.a.) |
+
+
+
+ {savingsPlansPerformance.map((plan) => (
+
+ | {plan.assetName} |
+ {plan.amount} |
+ โฌ{plan.totalInvested.toFixed(2)} |
+ โฌ{plan.currentValue.toFixed(2)} |
+ {plan.performancePercentage.toFixed(2)}% |
+ {plan.performancePerAnnoPerformance.toFixed(2)}% |
+
+ ))}
+
+
+
+ )}
+
+
+
+
Positions Overview
+
+
+
+
+
+
+ | Asset |
+ Type |
+ Date |
+ Invested Amount |
+
+
+ Current Amount
+
+ |
+
+
+ Buy-In (avg)
+
+ |
+
+
+ Performance (%)
+
+ |
+ Actions |
+
+
+
+ {performance.summary && (
+ <>
+
+
+ | Total Portfolio |
+ |
+ |
+ โฌ{performance.summary.totalInvested.toFixed(2)} |
+ โฌ{performance.summary.currentValue.toFixed(2)} |
+ |
+
+ {performance.summary.performancePercentage.toFixed(2)}%
+
+ - (avg. acc. {averagePerformance}%)
+ - (avg. p.a. {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"})
+
+ |
+ |
+
+
+
+
+ | TTWOR |
+ |
+ {new Date(performance.investments[0]?.date).toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' })} |
+ โฌ{performance.summary.totalInvested.toFixed(2)} |
+ โฌ{performance.summary.ttworValue.toFixed(2)} |
+ |
+ {performance.summary.ttworPercentage.toFixed(2)}% |
+ |
+
+
+ )}
+ {performance.investments.sort((a, b) => a.date.localeCompare(b.date)).map((inv, index) => {
+ const asset = assets.find(a => a.name === inv.assetName)!;
+ const investment = asset.investments.find(i => i.id === inv.id)! || inv;
+ const filtered = performance.investments.filter(v => v.assetName === inv.assetName);
+ const avgBuyIn = filtered.reduce((acc, curr) => acc + curr.investedAtPrice, 0) / filtered.length;
+ const isLast = index === performance.investments.length - 1;
+
+ return (
+
+ | {inv.assetName} |
+
+ {investment?.type === 'periodic' ? (
+
+
+ SavingsPlan
+
+ ) : (
+
+
+ OneTime
+
+ )}
+ |
+ {format(new Date(inv.date), 'dd.MM.yyyy')} |
+ โฌ{inv.investedAmount.toFixed(2)} |
+ โฌ{inv.currentValue.toFixed(2)} |
+ โฌ{inv.investedAtPrice.toFixed(2)} (โฌ{avgBuyIn.toFixed(2)}) |
+ {inv.performancePercentage.toFixed(2)}% |
+
+
+
+
+ |
+
+ );
+ })}
+
+
+
+
+
+
+ {editingInvestment && (
+
setEditingInvestment(null)}
+ />
+ )}
+ {showProjection && (
+ setShowProjection(false)}
+ />
)}
);
};
-
-export const PortfolioTable = () => {
- const { assets, removeInvestment, clearInvestments } = usePortfolioStore((state) => ({
- assets: state.assets,
- removeInvestment: state.removeInvestment,
- clearInvestments: state.clearInvestments,
- }));
-
- const [editingInvestment, setEditingInvestment] = useState<{
- investment: Investment;
- assetId: string;
- } | null>(null);
-
- const performance = useMemo(() => calculateInvestmentPerformance(assets), [assets]);
-
- const averagePerformance = useMemo(() => {
- return ((performance.investments.reduce((sum, inv) => sum + inv.performancePercentage, 0) / performance.investments.length) || 0).toFixed(2);
- }, [performance.investments]);
-
- const handleDelete = useCallback((investmentId: string, assetId: string) => {
- if (window.confirm("Are you sure you want to delete this investment?")) {
- removeInvestment(assetId, investmentId);
- }
- }, [removeInvestment]);
-
- const handleClearAll = useCallback(() => {
- if (window.confirm("Are you sure you want to clear all investments?")) {
- clearInvestments();
- }
- }, [clearInvestments]);
-
- const performanceTooltip = useMemo(() => (
-
-
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)}%
-
- 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.
-
-
- ), [performance.summary.performancePercentage, averagePerformance, performance.summary.performancePerAnnoPerformance]);
-
- const buyInTooltip = useMemo(() => (
-
-
"Buy-in" shows the asset's price when that position was bought.
-
"Avg" shows the average buy-in price across all positions for that asset.
-
- ), []);
-
- const currentAmountTooltip = useMemo(() => (
- "The current value of your investment based on the latest market price."
- ), []);
-
- const ttworTooltip = useMemo(() => (
-
-
Time Travel Without Risk (TTWOR) shows how your portfolio would have performed if all investments had been made at the beginning of the period.
-
- It helps to evaluate the impact of your investment timing strategy compared to a single early investment.
-
-
- ), []);
-
- const [showProjection, setShowProjection] = useState(false);
-
- return (
-
-
-
Portfolio's Positions Overview
-
-
-
-
-
-
-
-
-
- | Asset |
- Type |
- Date |
- Invested Amount |
-
-
- Current Amount
-
- |
-
-
- Buy-In (avg)
-
- |
-
-
- Performance (%)
-
- |
- Actions |
-
-
-
- {performance.summary && (
- <>
-
-
- | Total Portfolio |
- |
- |
- โฌ{performance.summary.totalInvested.toFixed(2)} |
- โฌ{performance.summary.currentValue.toFixed(2)} |
- |
-
- {performance.summary.performancePercentage.toFixed(2)}%
-
- - (avg. acc. {averagePerformance}%)
- - (avg. p.a. {performance.summary.performancePerAnnoPerformance.toFixed(2)}%)
-
- |
- |
-
-
-
-
- | TTWOR |
- |
- {new Date(performance.investments[0]?.date).toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' })} |
- โฌ{performance.summary.totalInvested.toFixed(2)} |
- โฌ{performance.summary.ttworValue.toFixed(2)} |
- |
- {performance.summary.ttworPercentage.toFixed(2)}% |
- |
-
-
- )}
- {performance.investments.map((inv, index) => {
- const asset = assets.find(a => a.name === inv.assetName)!;
- const investment = asset.investments.find(i => i.id === inv.id)! || inv;
- const filtered = performance.investments.filter(v => v.assetName === inv.assetName);
- const avgBuyIn = filtered.reduce((acc, curr) => acc + curr.investedAtPrice, 0) / filtered.length;
- const isLast = index === performance.investments.length - 1;
-
- return (
-
- | {inv.assetName} |
-
- {investment?.type === 'periodic' ? (
-
-
- SavingsPlan
-
- ) : (
-
-
- OneTime
-
- )}
- |
- {format(new Date(inv.date), 'dd.MM.yyyy')} |
- โฌ{inv.investedAmount.toFixed(2)} |
- โฌ{inv.currentValue.toFixed(2)} |
- โฌ{inv.investedAtPrice.toFixed(2)} (โฌ{avgBuyIn.toFixed(2)}) |
- {inv.performancePercentage.toFixed(2)}% |
-
-
-
-
- |
-
- );
- })}
-
-
-
- {editingInvestment && (
-
setEditingInvestment(null)}
- />
- )}
- {showProjection && (
- setShowProjection(false)} />
- )}
-
- );
-};
diff --git a/src/components/utils/DateRangePicker.tsx b/src/components/utils/DateRangePicker.tsx
new file mode 100644
index 0000000..0bdb75e
--- /dev/null
+++ b/src/components/utils/DateRangePicker.tsx
@@ -0,0 +1,82 @@
+import { useRef } from "react";
+import { useDebouncedCallback } from "use-debounce";
+
+interface DateRangePickerProps {
+ startDate: string;
+ endDate: string;
+ onStartDateChange: (date: string) => void;
+ onEndDateChange: (date: string) => void;
+}
+
+export const DateRangePicker = ({
+ startDate,
+ endDate,
+ onStartDateChange,
+ onEndDateChange,
+}: DateRangePickerProps) => {
+ const startDateRef = useRef
(null);
+ const endDateRef = useRef(null);
+
+ const isValidDate = (dateString: string) => {
+ const date = new Date(dateString);
+ return date instanceof Date && !isNaN(date.getTime()) && dateString.length === 10;
+ };
+
+ const debouncedStartDateChange = useDebouncedCallback(
+ (newDate: string) => {
+ if (newDate !== startDate && isValidDate(newDate)) {
+ onStartDateChange(newDate);
+ }
+ },
+ 750
+ );
+
+ const debouncedEndDateChange = useDebouncedCallback(
+ (newDate: string) => {
+ if (newDate !== endDate && isValidDate(newDate)) {
+ onEndDateChange(newDate);
+ }
+ },
+ 750
+ );
+
+ const handleStartDateChange = () => {
+ if (startDateRef.current) {
+ debouncedStartDateChange(startDateRef.current.value);
+ }
+ };
+
+ const handleEndDateChange = () => {
+ if (endDateRef.current) {
+ debouncedEndDateChange(endDateRef.current.value);
+ }
+ };
+
+ return (
+
+ );
+};
diff --git a/src/components/utils/LoadingPlaceholder.tsx b/src/components/utils/LoadingPlaceholder.tsx
new file mode 100644
index 0000000..7d89551
--- /dev/null
+++ b/src/components/utils/LoadingPlaceholder.tsx
@@ -0,0 +1,11 @@
+import { Loader2 } from "lucide-react";
+
+interface LoadingPlaceholderProps {
+ className?: string;
+}
+
+export const LoadingPlaceholder = ({ className = "" }: LoadingPlaceholderProps) => (
+
+
+
+);
diff --git a/src/components/utils/ToolTip.tsx b/src/components/utils/ToolTip.tsx
new file mode 100644
index 0000000..0153b13
--- /dev/null
+++ b/src/components/utils/ToolTip.tsx
@@ -0,0 +1,29 @@
+import { HelpCircle } from "lucide-react";
+import { ReactNode, useState } from "react";
+
+interface TooltipProps {
+ content: string | ReactNode;
+ children: ReactNode;
+}
+
+export const Tooltip = ({ content, children }: TooltipProps) => {
+ const [show, setShow] = useState(false);
+
+ return (
+
+
setShow(true)}
+ onMouseLeave={() => setShow(false)}
+ >
+ {children}
+
+
+ {show && (
+
+ {content}
+
+ )}
+