fix(buchhaltung): clean up tab labels, remove badge indicator, add session notification for pending transactions
This commit is contained in:
@@ -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;
|
||||||
@@ -2,7 +2,6 @@ import React, { useState, useEffect } from 'react';
|
|||||||
import DashboardLayout from '../components/dashboard/DashboardLayout';
|
import DashboardLayout from '../components/dashboard/DashboardLayout';
|
||||||
import {
|
import {
|
||||||
Alert,
|
Alert,
|
||||||
Badge,
|
|
||||||
Box,
|
Box,
|
||||||
Button,
|
Button,
|
||||||
Card,
|
Card,
|
||||||
@@ -1252,7 +1251,7 @@ function TransaktionenTab({ haushaltsjahre, selectedJahrId, onJahrChange }: {
|
|||||||
<Box sx={{ borderBottom: 1, borderColor: 'divider', mb: 2 }}>
|
<Box sx={{ borderBottom: 1, borderColor: 'divider', mb: 2 }}>
|
||||||
<Tabs value={txSubTab} onChange={(_, v) => setTxSubTab(v)}>
|
<Tabs value={txSubTab} onChange={(_, v) => setTxSubTab(v)}>
|
||||||
<Tab label="Offene Buchungen" />
|
<Tab label="Offene Buchungen" />
|
||||||
<Tab label="Gebuchte Buchungen" />
|
<Tab label="Buchungen" />
|
||||||
<Tab label="Wiederkehrende Buchungen" />
|
<Tab label="Wiederkehrende Buchungen" />
|
||||||
</Tabs>
|
</Tabs>
|
||||||
</Box>
|
</Box>
|
||||||
@@ -2091,13 +2090,6 @@ export default function Buchhaltung() {
|
|||||||
}
|
}
|
||||||
}, [haushaltsjahre]);
|
}, [haushaltsjahre]);
|
||||||
|
|
||||||
const { data: pendingCount } = useQuery({
|
|
||||||
queryKey: ['buchhaltungPending', selectedJahrId],
|
|
||||||
queryFn: () => buchhaltungApi.getPendingCount(selectedJahrId || undefined),
|
|
||||||
enabled: !!selectedJahrId,
|
|
||||||
refetchInterval: 30000,
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<DashboardLayout>
|
<DashboardLayout>
|
||||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 3 }}>
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 3 }}>
|
||||||
@@ -2105,7 +2097,7 @@ export default function Buchhaltung() {
|
|||||||
</Box>
|
</Box>
|
||||||
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
|
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
|
||||||
<Tabs value={tabValue} onChange={handleTabChange} variant="scrollable" scrollButtons="auto">
|
<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="Übersicht" />
|
||||||
<Tab label="Konten" />
|
<Tab label="Konten" />
|
||||||
</Tabs>
|
</Tabs>
|
||||||
|
|||||||
@@ -47,6 +47,7 @@ import VikunjaMyTasksWidget from '../components/dashboard/VikunjaMyTasksWidget';
|
|||||||
import VikunjaQuickAddWidget from '../components/dashboard/VikunjaQuickAddWidget';
|
import VikunjaQuickAddWidget from '../components/dashboard/VikunjaQuickAddWidget';
|
||||||
import VikunjaOverdueNotifier from '../components/dashboard/VikunjaOverdueNotifier';
|
import VikunjaOverdueNotifier from '../components/dashboard/VikunjaOverdueNotifier';
|
||||||
import AtemschutzExpiryNotifier from '../components/dashboard/AtemschutzExpiryNotifier';
|
import AtemschutzExpiryNotifier from '../components/dashboard/AtemschutzExpiryNotifier';
|
||||||
|
import BuchhaltungPendingNotifier from '../components/dashboard/BuchhaltungPendingNotifier';
|
||||||
import AdminStatusWidget from '../components/dashboard/AdminStatusWidget';
|
import AdminStatusWidget from '../components/dashboard/AdminStatusWidget';
|
||||||
import AnnouncementBanner from '../components/dashboard/AnnouncementBanner';
|
import AnnouncementBanner from '../components/dashboard/AnnouncementBanner';
|
||||||
import VehicleBookingQuickAddWidget from '../components/dashboard/VehicleBookingQuickAddWidget';
|
import VehicleBookingQuickAddWidget from '../components/dashboard/VehicleBookingQuickAddWidget';
|
||||||
@@ -495,6 +496,7 @@ function Dashboard() {
|
|||||||
<DashboardLayout>
|
<DashboardLayout>
|
||||||
<VikunjaOverdueNotifier />
|
<VikunjaOverdueNotifier />
|
||||||
<AtemschutzExpiryNotifier />
|
<AtemschutzExpiryNotifier />
|
||||||
|
<BuchhaltungPendingNotifier />
|
||||||
|
|
||||||
<Container maxWidth={false} disableGutters>
|
<Container maxWidth={false} disableGutters>
|
||||||
<DndContext
|
<DndContext
|
||||||
|
|||||||
Reference in New Issue
Block a user