Geplant Blase offene Ausgaben anzeigen

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" }}
                   />
+                  <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(totals.pending)}`}
+                      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)}`}