From f403c733345aeb6a635bc54f0e7ce747212ba5c8 Mon Sep 17 00:00:00 2001
From: Matthias Hochmeister <matthias.hochmeister@apple.com>
Date: Tue, 14 Apr 2026 13:35:40 +0200
Subject: [PATCH] fix(buchhaltung): clean up tab labels, remove badge
 indicator, add session notification for pending transactions

---
 .../dashboard/BuchhaltungPendingNotifier.tsx  | 36 +++++++++++++++++++
 frontend/src/pages/Buchhaltung.tsx            | 12 ++-----
 frontend/src/pages/Dashboard.tsx              |  2 ++
 3 files changed, 40 insertions(+), 10 deletions(-)
 create mode 100644 frontend/src/components/dashboard/BuchhaltungPendingNotifier.tsx

diff --git a/frontend/src/components/dashboard/BuchhaltungPendingNotifier.tsx b/frontend/src/components/dashboard/BuchhaltungPendingNotifier.tsx
new file mode 100644
index 0000000..f0cecc8
--- /dev/null
+++ b/frontend/src/components/dashboard/BuchhaltungPendingNotifier.tsx
@@ -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;
diff --git a/frontend/src/pages/Buchhaltung.tsx b/frontend/src/pages/Buchhaltung.tsx
index cd97232..fd652a5 100644
--- a/frontend/src/pages/Buchhaltung.tsx
+++ b/frontend/src/pages/Buchhaltung.tsx
@@ -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>
diff --git a/frontend/src/pages/Dashboard.tsx b/frontend/src/pages/Dashboard.tsx
index 2681a0d..2ffbd20 100644
--- a/frontend/src/pages/Dashboard.tsx
+++ b/frontend/src/pages/Dashboard.tsx
@@ -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