Jan/RFP_Finanzen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Dashboardbreite und mobile Spendenauswahl verbessern
CI / Build and Deploy (push) Successful in 2m36s
Details

Browse Source
This commit is contained in:
jan
2026-05-28 21:21:00 +02:00
parent 35fe771f59
commit 8d3524622c
1 changed files with 39 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/dashboard/dashboard-shell.tsx
+15 -7
View File
@@ -225,6 +225,7 @@ type MobileAction =
type FinanceViewMode = "monthly" | "yearly" | "cutoff"; type FinanceViewMode = "monthly" | "yearly" | "cutoff";
type FinancePresentation = "charts" | "table"; type FinancePresentation = "charts" | "table";
type DesktopSection = "overview" | "finance" | "budgetGroups" | "periods" | "users" | "logs"; type DesktopSection = "overview" | "finance" | "budgetGroups" | "periods" | "users" | "logs";
const GENERAL_DONATIONS_MOBILE_ID = "__general_donations__";
type CutoffSelectionOption = { type CutoffSelectionOption = {
value: string; value: string;
cutoffId: string; cutoffId: string;
@@ -657,6 +658,10 @@ export function DashboardShell({
}, [router, searchParams, visibleGroups]); }, [router, searchParams, visibleGroups]);
useEffect(() => { useEffect(() => {
if (selectedMobileGroupId === GENERAL_DONATIONS_MOBILE_ID) {
return;
}
if (!visibleGroups.some((group) => group.id === selectedMobileGroupId)) { if (!visibleGroups.some((group) => group.id === selectedMobileGroupId)) {
setSelectedMobileGroupId(visibleGroups[0]?.id ?? ""); setSelectedMobileGroupId(visibleGroups[0]?.id ?? "");
} }
@@ -3402,8 +3407,10 @@ export function DashboardShell({
</Card> </Card>
) : null; ) : null;
const selectedMobileGroup = visibleGroups.find((group) => group.id === selectedMobileGroupId) ?? visibleGroups[0] ?? null; const isMobileGeneralDonationsSelected = isCompactLayout && selectedMobileGroupId === GENERAL_DONATIONS_MOBILE_ID;
const overviewGroups = isCompactLayout && selectedMobileGroup ? [selectedMobileGroup] : visibleGroups; const selectedMobileGroup =
isMobileGeneralDonationsSelected ? null : visibleGroups.find((group) => group.id === selectedMobileGroupId) ?? visibleGroups[0] ?? null;
const overviewGroups = isCompactLayout ? (selectedMobileGroup ? [selectedMobileGroup] : []) : visibleGroups;
const generalDonations = donations.filter((donation) => !donation.expenseId); const generalDonations = donations.filter((donation) => !donation.expenseId);
function renderDonationEditor(donation: DashboardDonation) { function renderDonationEditor(donation: DashboardDonation) {
@@ -3573,11 +3580,11 @@ export function DashboardShell({
const overviewContent = ( const overviewContent = (
<Stack spacing={2.5}> <Stack spacing={2.5}>
{isCompactLayout && visibleGroups.length > 1 ? ( {isCompactLayout ? (
<TextField <TextField
select select
label="AG auswählen" label="AG auswählen"
value={selectedMobileGroup?.id ?? ""} value={isMobileGeneralDonationsSelected ? GENERAL_DONATIONS_MOBILE_ID : selectedMobileGroup?.id ?? ""}
onChange={(event) => { onChange={(event) => {
setSelectedMobileGroupId(event.target.value); setSelectedMobileGroupId(event.target.value);
setFocusedBudgetId(null); setFocusedBudgetId(null);
@@ -3590,6 +3597,7 @@ export function DashboardShell({
{group.name} {group.name}
</MenuItem> </MenuItem>
))} ))}
<MenuItem value={GENERAL_DONATIONS_MOBILE_ID}>Spenden</MenuItem>
</TextField> </TextField>
) : null} ) : null}
{isCompactLayout ? ( {isCompactLayout ? (
@@ -3633,7 +3641,7 @@ export function DashboardShell({
/> />
</Box> </Box>
))} ))}
{generalDonationsColumn} {isMobileGeneralDonationsSelected ? generalDonationsColumn : null}
</Stack> </Stack>
</Box> </Box>
) : ( ) : (
@@ -3953,7 +3961,7 @@ export function DashboardShell({
return ( return (
<Box sx={{ pb: 8 }}> <Box sx={{ pb: 8 }}>
<Box sx={{ px: 2, py: { xs: 3, md: 5 } }}> <Box sx={{ px: 2, py: { xs: 3, md: 5 } }}>
<Container maxWidth={false} sx={{ maxWidth: 1640 }}> <Container maxWidth={false} sx={{ width: "100%", maxWidth: "none" }}>
<Card <Card
sx={{ sx={{
background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, isDark ? 0.78 : 0.96)} 0%, ${alpha(isDark ? "#080D19" : "#17203A", 0.96)} 72%)`, background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, isDark ? 0.78 : 0.96)} 0%, ${alpha(isDark ? "#080D19" : "#17203A", 0.96)} 72%)`,
@@ -4163,7 +4171,7 @@ export function DashboardShell({
</DialogActions> </DialogActions>
</Dialog> </Dialog>
<Container maxWidth={false} sx={{ maxWidth: 1640 }}> <Container maxWidth={false} sx={{ width: "100%", maxWidth: "none" }}>
<Stack spacing={3} px={2}> <Stack spacing={3} px={2}>
{message ? <Alert severity={message.type} sx={{ whiteSpace: "pre-line" }}>{message.text}</Alert> : null} {message ? <Alert severity={message.type} sx={{ whiteSpace: "pre-line" }}>{message.text}</Alert> : null}
{periodOverviewCard} {periodOverviewCard}