Mobile Budgetauswahl ergaenzen

src/components/dashboard/budget-column.tsx

@@ -22,9 +22,11 @@ import {
   Divider,
   IconButton,
   Link,
+  MenuItem,
   Stack,
   TextField,
-  Typography
+  Typography,
+  useMediaQuery
 } from "@mui/material";
 import { alpha, useTheme } from "@mui/material/styles";
 import { useEffect, useMemo, useState } from "react";
@@ -153,10 +155,12 @@ export function BudgetColumn({
 }: BudgetColumnProps) {
   const theme = useTheme();
   const isDark = theme.palette.mode === "dark";
+  const isCompactLayout = useMediaQuery(theme.breakpoints.down("lg"));
   const [budgetDrafts, setBudgetDrafts] = useState<Record<string, BudgetDraft>>({});
   const [editingBudgetId, setEditingBudgetId] = useState<string | null>(null);
   const [isEditingGroup, setIsEditingGroup] = useState(false);
   const [groupDraftName, setGroupDraftName] = useState(group.name);
+  const [selectedBudgetId, setSelectedBudgetId] = useState(group.budgets[0]?.id ?? "");
   const [proofFileDrafts, setProofFileDrafts] = useState<Record<string, { file: File; invoiceDate: string }[]>>({});
   const [expandedRecurringExpenses, setExpandedRecurringExpenses] = useState<Record<string, boolean>>({});
 
@@ -183,6 +187,12 @@ export function BudgetColumn({
     setGroupDraftName(group.name);
   }, [group.name]);
 
+  useEffect(() => {
+    if (!group.budgets.some((budget) => budget.id === selectedBudgetId)) {
+      setSelectedBudgetId(group.budgets[0]?.id ?? "");
+    }
+  }, [group.budgets, selectedBudgetId]);
+
   const approvedSpend = useMemo(
     () => group.budgets.reduce((sum, budget) => sum + getApprovedSpend(budget.expenses), 0),
     [group.budgets]
@@ -251,6 +261,9 @@ export function BudgetColumn({
     }));
   }
 
+  const selectedBudget = group.budgets.find((budget) => budget.id === selectedBudgetId) ?? group.budgets[0] ?? null;
+  const visibleBudgets = isCompactLayout && selectedBudget ? [selectedBudget] : group.budgets;
+
   return (
     <Card
       sx={{
@@ -413,6 +426,22 @@ export function BudgetColumn({
             </Box>
           ) : null}
 
+          {isCompactLayout && group.budgets.length > 1 ? (
+            <TextField
+              select
+              label="Budget auswählen"
+              value={selectedBudget?.id ?? ""}
+              onChange={(event) => setSelectedBudgetId(event.target.value)}
+              fullWidth
+            >
+              {group.budgets.map((budget) => (
+                <MenuItem key={budget.id} value={budget.id}>
+                  {budget.name}
+                </MenuItem>
+              ))}
+            </TextField>
+          ) : null}
+
 	          <Box
 	            sx={{
 	              display: "flex",
@@ -420,11 +449,11 @@ export function BudgetColumn({
 	              overflow: "visible",
 	              pb: 0,
 	              alignItems: "stretch",
-	              width: { md: desktopBudgetListWidth },
-	              minWidth: { md: desktopBudgetListWidth }
+	              width: isCompactLayout ? "100%" : desktopBudgetListWidth,
+	              minWidth: isCompactLayout ? 0 : desktopBudgetListWidth
 	            }}
           >
-            {group.budgets.map((budget) => {
+            {visibleBudgets.map((budget) => {
               const draft = getDraft(budget);
               const isEditing = editingBudgetId === budget.id;
               const budgetApproved = getApprovedSpend(budget.expenses);
@@ -444,9 +473,9 @@ export function BudgetColumn({
                 <Box
                   key={budget.id}
                   sx={{
-                    minWidth: { xs: 280, sm: 312, md: budgetCardWidth },
-                    width: { xs: "84vw", sm: 312, md: budgetCardWidth },
-                    maxWidth: { xs: 360, md: budgetCardWidth },
+                    minWidth: isCompactLayout ? 0 : budgetCardWidth,
+                    width: isCompactLayout ? "100%" : budgetCardWidth,
+                    maxWidth: isCompactLayout ? "100%" : budgetCardWidth,
                     flex: "0 0 auto",
                     scrollSnapAlign: "start"
                   }}