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
+39 -31
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 ? (
@@ -3608,32 +3616,32 @@ export function DashboardShell({
> >
<Stack direction="row" gap={2} sx={{ width: "100%", minWidth: "100%", alignItems: "stretch" }}> <Stack direction="row" gap={2} sx={{ width: "100%", minWidth: "100%", alignItems: "stretch" }}>
{overviewGroups.map((group) => ( {overviewGroups.map((group) => (
<Box key={group.id} sx={{ width: "100%", flex: "0 0 auto", scrollSnapAlign: "start" }}> <Box key={group.id} sx={{ width: "100%", flex: "0 0 auto", scrollSnapAlign: "start" }}>
<BudgetColumn <BudgetColumn
group={group} group={group}
workingGroups={visibleGroups} workingGroups={visibleGroups}
cutoffs={currentCutoffs} cutoffs={currentCutoffs}
viewer={viewer} viewer={viewer}
busy={busy} busy={busy}
approvalThreshold={approvalThreshold} approvalThreshold={approvalThreshold}
requiredApprovalTypes={settings.requiredApprovalTypes} requiredApprovalTypes={settings.requiredApprovalTypes}
focusBudgetId={focusedBudgetId} focusBudgetId={focusedBudgetId}
onApprove={handleApprove} onApprove={handleApprove}
onMarkPaid={handleMarkPaid} onMarkPaid={handleMarkPaid}
onDocument={handleDocument} onDocument={handleDocument}
onUploadProof={handleUploadProof} onUploadProof={handleUploadProof}
onSaveWorkingGroup={handleSaveWorkingGroup} onSaveWorkingGroup={handleSaveWorkingGroup}
onDeleteWorkingGroup={handleDeleteWorkingGroup} onDeleteWorkingGroup={handleDeleteWorkingGroup}
onSaveBudget={handleSaveBudget} onSaveBudget={handleSaveBudget}
onDeleteBudget={handleDeleteBudget} onDeleteBudget={handleDeleteBudget}
onDeleteExpense={handleDeleteExpense} onDeleteExpense={handleDeleteExpense}
onUpdateExpense={handleUpdateExpense} onUpdateExpense={handleUpdateExpense}
onUpdateDonation={handleUpdateDonation} onUpdateDonation={handleUpdateDonation}
onDeleteDonation={handleDeleteDonation} onDeleteDonation={handleDeleteDonation}
/> />
</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}