Monatsauswahl und Spendenbearbeitung ergaenzen

src/components/dashboard/dashboard-shell.tsx

@@ -429,6 +429,7 @@ export function DashboardShell({
   const [desktopSection, setDesktopSection] = useState<DesktopSection>("overview");
   const [financeViewMode, setFinanceViewMode] = useState<FinanceViewMode>("monthly");
   const [financePresentation, setFinancePresentation] = useState<FinancePresentation>("charts");
+  const [selectedFinanceMonth, setSelectedFinanceMonth] = useState("ALL");
   const [selectedCurrentPeriodId, setSelectedCurrentPeriodId] = useState(currentPeriodId);
   const [selectedMobileGroupId, setSelectedMobileGroupId] = useState(visibleGroups[0]?.id ?? "");
   const [focusedBudgetId, setFocusedBudgetId] = useState<string | null>(null);
@@ -3259,6 +3260,8 @@ export function DashboardShell({
                 onDeleteBudget={handleDeleteBudget}
                 onDeleteExpense={handleDeleteExpense}
                 onUpdateExpense={handleUpdateExpense}
+                onUpdateDonation={handleUpdateDonation}
+                onDeleteDonation={handleDeleteDonation}
               />
             </Box>
             ))}
@@ -3309,6 +3312,8 @@ export function DashboardShell({
                   onDeleteBudget={handleDeleteBudget}
                   onDeleteExpense={handleDeleteExpense}
                   onUpdateExpense={handleUpdateExpense}
+                  onUpdateDonation={handleUpdateDonation}
+                  onDeleteDonation={handleDeleteDonation}
                 />
               </Box>
             ))}
@@ -3350,7 +3355,10 @@ export function DashboardShell({
         row.donations += donation.amount;
         rows.set(key, row);
       }
-      return [...rows.entries()].sort(([left], [right]) => left.localeCompare(right)).map(([, row]) => row);
+      return [...rows.entries()]
+        .sort(([left], [right]) => left.localeCompare(right))
+        .filter(([key]) => selectedFinanceMonth === "ALL" || key === selectedFinanceMonth)
+        .map(([, row]) => row);
     }
 
     if (financeViewMode === "cutoff") {
@@ -3397,6 +3405,20 @@ export function DashboardShell({
       }
     ];
   })();
+  const financeMonthOptions = (() => {
+    const rows = new Map<string, string>();
+    for (const expense of allExpenses) {
+      const date = new Date(expense.createdAt);
+      const key = `${date.getUTCFullYear()}-${String(date.getUTCMonth() + 1).padStart(2, "0")}`;
+      rows.set(key, new Intl.DateTimeFormat("de-DE", { month: "long", year: "numeric" }).format(date));
+    }
+    for (const donation of donations) {
+      const date = new Date(donation.donatedAt);
+      const key = `${date.getUTCFullYear()}-${String(date.getUTCMonth() + 1).padStart(2, "0")}`;
+      rows.set(key, new Intl.DateTimeFormat("de-DE", { month: "long", year: "numeric" }).format(date));
+    }
+    return [...rows.entries()].sort(([left], [right]) => left.localeCompare(right));
+  })();
 
   const financeOverviewContent = (
     <Stack spacing={2.5}>
@@ -3425,6 +3447,22 @@ export function DashboardShell({
                 <MenuItem value="charts">Grafisch</MenuItem>
                 <MenuItem value="table">Tabellarisch</MenuItem>
               </TextField>
+              {financeViewMode === "monthly" ? (
+                <TextField
+                  select
+                  label="Monat"
+                  value={selectedFinanceMonth}
+                  onChange={(event) => setSelectedFinanceMonth(event.target.value)}
+                  fullWidth
+                >
+                  <MenuItem value="ALL">Alle Monate</MenuItem>
+                  {financeMonthOptions.map(([monthKey, monthLabel]) => (
+                    <MenuItem key={monthKey} value={monthKey}>
+                      {monthLabel}
+                    </MenuItem>
+                  ))}
+                </TextField>
+              ) : null}
             </Stack>
             <Stack direction="row" gap={1} useFlexGap flexWrap="wrap">
               <Chip label={`Budget: ${currencyFormatter.format(totals.budget)}`} />