From 973b22ee108377b7f2bca028f33a4a4508b05c6f Mon Sep 17 00:00:00 2001
From: jan <jannihanewinkel@gmail.com>
Date: Tue, 12 May 2026 02:11:09 +0200
Subject: [PATCH] Geplant Blase offene Ausgaben anzeigen

---
 src/components/dashboard/dashboard-shell.tsx | 49 ++++++++++++++++++--
 1 file changed, 44 insertions(+), 5 deletions(-)

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" }}
                   />
-                  <Chip
-                    icon={<WalletRoundedIcon />}
-                    label={`Geplant: ${currencyFormatter.format(totals.pending)}`}
-                    sx={{ bgcolor: alpha("#FFFFFF", 0.12), color: "white" }}
-                  />
+                  <Tooltip
+                    arrow
+                    title={
+                      <Stack spacing={0.4}>
+                        <Typography variant="caption" sx={{ fontWeight: 700 }}>
+                          Berechnung Geplant
+                        </Typography>
+                        <Typography variant="caption">
+                          {`Geplant offen: ${currencyFormatter.format(plannedBubble.pendingOpen)}`}
+                        </Typography>
+                        <Typography variant="caption">
+                          {`Freigegeben offen: ${currencyFormatter.format(plannedBubble.approvedOpen)}`}
+                        </Typography>
+                        <Typography variant="caption" sx={{ fontWeight: 700 }}>
+                          {`Ergebnis: ${currencyFormatter.format(plannedBubble.amount)}`}
+                        </Typography>
+                      </Stack>
+                    }
+                  >
+                    <Chip
+                      icon={<WalletRoundedIcon />}
+                      label={`Geplant: ${currencyFormatter.format(plannedBubble.amount)}`}
+                      sx={{ bgcolor: alpha("#FFFFFF", 0.12), color: "white" }}
+                    />
+                  </Tooltip>
                   <Chip
                     icon={<SavingsRoundedIcon />}
                     label={`Budgets sichtbar: ${currencyFormatter.format(totals.budget)}`}