diff --git a/src/components/dashboard/dashboard-shell.tsx b/src/components/dashboard/dashboard-shell.tsx
index 4989bf3..0988073 100644
--- a/src/components/dashboard/dashboard-shell.tsx
+++ b/src/components/dashboard/dashboard-shell.tsx
@@ -30,6 +30,7 @@ import {
Tab,
Tabs,
TextField,
+ Tooltip,
Typography,
useMediaQuery
} from "@mui/material";
@@ -1025,6 +1026,24 @@ export function DashboardShell({
() => donations.reduce((sum, donation) => sum + (donation.expenseId ? donation.amount : 0), 0),
[donations]
);
+ const plannedBubble = useMemo(() => {
+ const pendingOpen = allExpenses.reduce(
+ (sum, expense) =>
+ sum + (expense.approvalStatus === "PENDING" && !expense.paidAt ? expense.netPeriodAmount : 0),
+ 0
+ );
+ const approvedOpen = allExpenses.reduce(
+ (sum, expense) =>
+ sum + (expense.approvalStatus === "APPROVED" && !expense.paidAt ? expense.netPeriodAmount : 0),
+ 0
+ );
+
+ return {
+ pendingOpen,
+ approvedOpen,
+ amount: pendingOpen + approvedOpen
+ };
+ }, [allExpenses]);
const plannedUntilCutoffs = useMemo(
() => {
const today = new Date();
@@ -3974,11 +3993,31 @@ export function DashboardShell({
label={`Freigegeben: ${currencyFormatter.format(totals.approved)}`}
sx={{ bgcolor: alpha("#FFFFFF", 0.12), color: "white" }}
/>
- }
- label={`Geplant: ${currencyFormatter.format(totals.pending)}`}
- sx={{ bgcolor: alpha("#FFFFFF", 0.12), color: "white" }}
- />
+
+
+ Berechnung Geplant
+
+
+ {`Geplant offen: ${currencyFormatter.format(plannedBubble.pendingOpen)}`}
+
+
+ {`Freigegeben offen: ${currencyFormatter.format(plannedBubble.approvedOpen)}`}
+
+
+ {`Ergebnis: ${currencyFormatter.format(plannedBubble.amount)}`}
+
+
+ }
+ >
+ }
+ label={`Geplant: ${currencyFormatter.format(plannedBubble.amount)}`}
+ sx={{ bgcolor: alpha("#FFFFFF", 0.12), color: "white" }}
+ />
+
}
label={`Budgets sichtbar: ${currencyFormatter.format(totals.budget)}`}