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 FinancePresentation = "charts" | "table";
type DesktopSection = "overview" | "finance" | "budgetGroups" | "periods" | "users" | "logs";
const GENERAL_DONATIONS_MOBILE_ID = "__general_donations__";
type CutoffSelectionOption = {
value: string;
cutoffId: string;
@@ -657,6 +658,10 @@ export function DashboardShell({
}, [router, searchParams, visibleGroups]);
useEffect(() => {
if (selectedMobileGroupId === GENERAL_DONATIONS_MOBILE_ID) {
return;
}
if (!visibleGroups.some((group) => group.id === selectedMobileGroupId)) {
setSelectedMobileGroupId(visibleGroups[0]?.id ?? "");
}
@@ -3402,8 +3407,10 @@ export function DashboardShell({
</Card>
) : null;
const selectedMobileGroup = visibleGroups.find((group) => group.id === selectedMobileGroupId) ?? visibleGroups[0] ?? null;
const overviewGroups = isCompactLayout && selectedMobileGroup ? [selectedMobileGroup] : visibleGroups;
const isMobileGeneralDonationsSelected = isCompactLayout && selectedMobileGroupId === GENERAL_DONATIONS_MOBILE_ID;
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);
function renderDonationEditor(donation: DashboardDonation) {
@@ -3573,11 +3580,11 @@ export function DashboardShell({
const overviewContent = (
<Stack spacing={2.5}>
{isCompactLayout && visibleGroups.length > 1 ? (
{isCompactLayout ? (
<TextField
select
label="AG auswählen"
value={selectedMobileGroup?.id ?? ""}
value={isMobileGeneralDonationsSelected ? GENERAL_DONATIONS_MOBILE_ID : selectedMobileGroup?.id ?? ""}
onChange={(event) => {
setSelectedMobileGroupId(event.target.value);
setFocusedBudgetId(null);
@@ -3590,6 +3597,7 @@ export function DashboardShell({
{group.name}
</MenuItem>
))}
<MenuItem value={GENERAL_DONATIONS_MOBILE_ID}>Spenden</MenuItem>
</TextField>
) : null}
{isCompactLayout ? (
@@ -3608,32 +3616,32 @@ export function DashboardShell({
>
<Stack direction="row" gap={2} sx={{ width: "100%", minWidth: "100%", alignItems: "stretch" }}>
{overviewGroups.map((group) => (
<Box key={group.id} sx={{ width: "100%", flex: "0 0 auto", scrollSnapAlign: "start" }}>
<BudgetColumn
group={group}
workingGroups={visibleGroups}
cutoffs={currentCutoffs}
viewer={viewer}
busy={busy}
approvalThreshold={approvalThreshold}
requiredApprovalTypes={settings.requiredApprovalTypes}
focusBudgetId={focusedBudgetId}
onApprove={handleApprove}
onMarkPaid={handleMarkPaid}
onDocument={handleDocument}
onUploadProof={handleUploadProof}
onSaveWorkingGroup={handleSaveWorkingGroup}
onDeleteWorkingGroup={handleDeleteWorkingGroup}
onSaveBudget={handleSaveBudget}
onDeleteBudget={handleDeleteBudget}
onDeleteExpense={handleDeleteExpense}
onUpdateExpense={handleUpdateExpense}
onUpdateDonation={handleUpdateDonation}
onDeleteDonation={handleDeleteDonation}
/>
</Box>
<Box key={group.id} sx={{ width: "100%", flex: "0 0 auto", scrollSnapAlign: "start" }}>
<BudgetColumn
group={group}
workingGroups={visibleGroups}
cutoffs={currentCutoffs}
viewer={viewer}
busy={busy}
approvalThreshold={approvalThreshold}
requiredApprovalTypes={settings.requiredApprovalTypes}
focusBudgetId={focusedBudgetId}
onApprove={handleApprove}
onMarkPaid={handleMarkPaid}
onDocument={handleDocument}
onUploadProof={handleUploadProof}
onSaveWorkingGroup={handleSaveWorkingGroup}
onDeleteWorkingGroup={handleDeleteWorkingGroup}
onSaveBudget={handleSaveBudget}
onDeleteBudget={handleDeleteBudget}
onDeleteExpense={handleDeleteExpense}
onUpdateExpense={handleUpdateExpense}
onUpdateDonation={handleUpdateDonation}
onDeleteDonation={handleDeleteDonation}
/>
</Box>
))}
{generalDonationsColumn}
{isMobileGeneralDonationsSelected ? generalDonationsColumn : null}
</Stack>
</Box>
) : (
@@ -3953,7 +3961,7 @@ export function DashboardShell({
return (
<Box sx={{ pb: 8 }}>
<Box sx={{ px: 2, py: { xs: 3, md: 5 } }}>
<Container maxWidth={false} sx={{ maxWidth: 1640 }}>
<Container maxWidth={false} sx={{ width: "100%", maxWidth: "none" }}>
<Card
sx={{
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>
</Dialog>
<Container maxWidth={false} sx={{ maxWidth: 1640 }}>
<Container maxWidth={false} sx={{ width: "100%", maxWidth: "none" }}>
<Stack spacing={3} px={2}>
{message ? <Alert severity={message.type} sx={{ whiteSpace: "pre-line" }}>{message.text}</Alert> : null}
{periodOverviewCard}