fix(buchhaltung): clean up tab labels, remove badge indicator, add session notification for pending transactions

This commit is contained in:
Matthias Hochmeister
2026-04-14 13:35:40 +02:00
parent 3a8f166121
commit f403c73334
3 changed files with 40 additions and 10 deletions

View File

@@ -0,0 +1,36 @@
import { useEffect } from 'react';
import { buchhaltungApi } from '../../services/buchhaltung';
import { useNotification } from '../../contexts/NotificationContext';
import { usePermissionContext } from '../../contexts/PermissionContext';
const SESSION_KEY = 'buchhaltung-pending-notified';
/**
* Invisible component — checks for pending (entwurf) transactions once per session
* and shows a notification toast if any exist.
*/
function BuchhaltungPendingNotifier() {
const { showNotificationToast } = useNotification();
const { hasPermission } = usePermissionContext();
useEffect(() => {
if (!hasPermission('buchhaltung:view')) return;
if (sessionStorage.getItem(SESSION_KEY)) return;
sessionStorage.setItem(SESSION_KEY, '1');
buchhaltungApi.getPendingCount().then(count => {
if (count > 0) {
showNotificationToast(
`${count} offene Buchung${count > 1 ? 'en' : ''} ausstehend`,
'warning',
);
}
}).catch(() => { /* ignore */ });
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return null;
}
export default BuchhaltungPendingNotifier;

View File

@@ -2,7 +2,6 @@ import React, { useState, useEffect } from 'react';
import DashboardLayout from '../components/dashboard/DashboardLayout';
import {
Alert,
Badge,
Box,
Button,
Card,
@@ -1252,7 +1251,7 @@ function TransaktionenTab({ haushaltsjahre, selectedJahrId, onJahrChange }: {
<Box sx={{ borderBottom: 1, borderColor: 'divider', mb: 2 }}>
<Tabs value={txSubTab} onChange={(_, v) => setTxSubTab(v)}>
<Tab label="Offene Buchungen" />
<Tab label="Gebuchte Buchungen" />
<Tab label="Buchungen" />
<Tab label="Wiederkehrende Buchungen" />
</Tabs>
</Box>
@@ -2091,13 +2090,6 @@ export default function Buchhaltung() {
}
}, [haushaltsjahre]);
const { data: pendingCount } = useQuery({
queryKey: ['buchhaltungPending', selectedJahrId],
queryFn: () => buchhaltungApi.getPendingCount(selectedJahrId || undefined),
enabled: !!selectedJahrId,
refetchInterval: 30000,
});
return (
<DashboardLayout>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 3 }}>
@@ -2105,7 +2097,7 @@ export default function Buchhaltung() {
</Box>
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
<Tabs value={tabValue} onChange={handleTabChange} variant="scrollable" scrollButtons="auto">
<Tab label={<Badge badgeContent={pendingCount || 0} color="warning" invisible={!pendingCount}><span>Transaktionen Übersicht</span></Badge>} />
<Tab label="Transaktionen" />
<Tab label="Übersicht" />
<Tab label="Konten" />
</Tabs>

View File

@@ -47,6 +47,7 @@ import VikunjaMyTasksWidget from '../components/dashboard/VikunjaMyTasksWidget';
import VikunjaQuickAddWidget from '../components/dashboard/VikunjaQuickAddWidget';
import VikunjaOverdueNotifier from '../components/dashboard/VikunjaOverdueNotifier';
import AtemschutzExpiryNotifier from '../components/dashboard/AtemschutzExpiryNotifier';
import BuchhaltungPendingNotifier from '../components/dashboard/BuchhaltungPendingNotifier';
import AdminStatusWidget from '../components/dashboard/AdminStatusWidget';
import AnnouncementBanner from '../components/dashboard/AnnouncementBanner';
import VehicleBookingQuickAddWidget from '../components/dashboard/VehicleBookingQuickAddWidget';
@@ -495,6 +496,7 @@ function Dashboard() {
<DashboardLayout>
<VikunjaOverdueNotifier />
<AtemschutzExpiryNotifier />
<BuchhaltungPendingNotifier />
<Container maxWidth={false} disableGutters>
<DndContext