From 976c802b112c5db3dad2deba6a0f9f90cf8a75d5 Mon Sep 17 00:00:00 2001
From: sebseb7 <sebgreenbus@gmail.com>
Date: Fri, 1 Aug 2025 10:39:41 +0200
Subject: [PATCH] Enhance App component with view management by adding Tabs for
 Dashboard and Table views. Update DataViewer to receive current view and
 handle export data accordingly. Refactor BUTable to improve form validation
 and handle vst values more robustly. Update admin routes to ensure vst is
 correctly processed.

---
 client/src/App.js                      | 51 +++++++++++++++++++++++---
 client/src/components/DataViewer.js    | 20 +++-------
 client/src/components/admin/BUTable.js | 19 ++++++++--
 src/routes/admin.js                    |  4 +-
 4 files changed, 68 insertions(+), 26 deletions(-)

diff --git a/client/src/App.js b/client/src/App.js
index 1306eb3..7db0e2b 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -1,10 +1,11 @@
 import React, { Component } from 'react';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
-import { Container, AppBar, Toolbar, Typography, Button, Box } from '@mui/material';
+import { Container, AppBar, Toolbar, Typography, Button, Box, Tabs, Tab } from '@mui/material';
 import LoginIcon from '@mui/icons-material/Login';
 import DashboardIcon from '@mui/icons-material/Dashboard';
 import DownloadIcon from '@mui/icons-material/Download';
+import TableChart from '@mui/icons-material/TableChart';
 import AuthService from './services/AuthService';
 import DataViewer from './components/DataViewer';
 import Login from './components/Login';
@@ -29,6 +30,7 @@ class App extends Component {
       user: null,
       loading: true,
       exportData: null, // { selectedMonth, canExport, onExport }
+      currentView: 'dashboard', // 'dashboard' or 'tables'
     };
     this.authService = new AuthService();
   }
@@ -77,8 +79,12 @@ class App extends Component {
     this.setState({ exportData });
   };
 
+  handleViewChange = (event, newValue) => {
+    this.setState({ currentView: newValue });
+  };
+
   render() {
-    const { isAuthenticated, user, loading } = this.state;
+    const { isAuthenticated, user, loading, currentView } = this.state;
 
     if (loading) {
       return (
@@ -99,7 +105,7 @@ class App extends Component {
         <AppBar position="static">
           <Toolbar>
             <DashboardIcon sx={{ mr: { xs: 1, sm: 2 } }} />
-            <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
+            <Typography variant="h6" component="div" sx={{ mr: 3 }}>
               FibDash
             </Typography>
             {isAuthenticated && user && (
@@ -107,12 +113,42 @@ class App extends Component {
                 <Typography 
                   variant="body2" 
                   sx={{ 
-                    mr: { xs: 1, sm: 2 }, 
+                    mr: { xs: 2, sm: 3 }, 
                     display: { xs: 'none', sm: 'block' } 
                   }}
                 >
                   Willkommen, {user.name}
                 </Typography>
+                <Tabs
+                  value={currentView}
+                  onChange={this.handleViewChange}
+                  sx={{ 
+                    mr: 'auto',
+                    '& .MuiTab-root': { 
+                      color: 'rgba(255, 255, 255, 0.7)',
+                      minHeight: 48,
+                      '&.Mui-selected': {
+                        color: 'white'
+                      }
+                    },
+                    '& .MuiTabs-indicator': {
+                      backgroundColor: 'white'
+                    }
+                  }}
+                >
+                  <Tab 
+                    icon={<DashboardIcon />} 
+                    label="Dashboard" 
+                    value="dashboard"
+                    sx={{ minHeight: 48 }}
+                  />
+                  <Tab 
+                    icon={<TableChart />} 
+                    label="Stammdaten" 
+                    value="tables"
+                    sx={{ minHeight: 48 }}
+                  />
+                </Tabs>
                 {this.state.exportData && (
                   <Button 
                     color="inherit" 
@@ -153,7 +189,12 @@ class App extends Component {
         <Box sx={{ height: 'calc(100vh - 64px)', display: 'flex', flexDirection: 'column' }}>
           <Container maxWidth={false} sx={{ mt: 4, flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column', width: '100%' }}>
             {isAuthenticated ? (
-              <DataViewer user={user} onUpdateExportData={this.updateExportData} />
+              <DataViewer 
+                user={user} 
+                onUpdateExportData={this.updateExportData}
+                currentView={currentView}
+                onViewChange={this.handleViewChange}
+              />
             ) : (
               <Login onLogin={this.handleLogin} />
             )}
diff --git a/client/src/components/DataViewer.js b/client/src/components/DataViewer.js
index bf4aa2a..e3f734c 100644
--- a/client/src/components/DataViewer.js
+++ b/client/src/components/DataViewer.js
@@ -7,7 +7,6 @@ import {
 import AuthService from '../services/AuthService';
 import SummaryHeader from './SummaryHeader';
 import TransactionsTable from './TransactionsTable';
-import Navigation from './Navigation';
 import Dashboard from './Dashboard';
 import TableManagement from './TableManagement';
 
@@ -21,7 +20,7 @@ class DataViewer extends Component {
       summary: null,
       loading: true,
       error: null,
-      currentView: 'dashboard', // 'dashboard' or 'tables'
+
     };
     this.authService = new AuthService();
   }
@@ -114,21 +113,17 @@ class DataViewer extends Component {
     if (this.props.onUpdateExportData) {
       this.props.onUpdateExportData({
         selectedMonth,
-        canExport: !!selectedMonth && !this.state.loading && this.state.currentView === 'dashboard',
+        canExport: !!selectedMonth && !this.state.loading && this.props.currentView === 'dashboard',
         onExport: this.downloadDatev
       });
     }
   };
 
-  handleViewChange = (event, newView) => {
-    this.setState({ currentView: newView });
-    // Update export data when view changes
-    this.updateExportData();
-  };
+
 
   render() {
-    const { months, selectedMonth, transactions, summary, loading, error, currentView } = this.state;
-    const { user } = this.props;
+    const { months, selectedMonth, transactions, summary, loading, error } = this.state;
+    const { user, currentView } = this.props;
 
     if (loading && !transactions.length) {
       return (
@@ -148,11 +143,6 @@ class DataViewer extends Component {
 
     return (
       <Box sx={{ height: '100vh', display: 'flex', flexDirection: 'column' }}>
-        <Navigation 
-          currentView={currentView}
-          onViewChange={this.handleViewChange}
-        />
-        
         {currentView === 'dashboard' ? (
           <>
             <Box sx={{ flexShrink: 0 }}>
diff --git a/client/src/components/admin/BUTable.js b/client/src/components/admin/BUTable.js
index af58f02..aaf91e3 100644
--- a/client/src/components/admin/BUTable.js
+++ b/client/src/components/admin/BUTable.js
@@ -72,7 +72,7 @@ class BUTable extends Component {
       formData: bu ? {
         bu: bu.bu,
         name: bu.name,
-        vst: bu.vst || '',
+        vst: bu.vst !== null && bu.vst !== undefined ? bu.vst.toString() : '',
       } : {
         bu: '',
         name: '',
@@ -102,13 +102,20 @@ class BUTable extends Component {
     });
   };
 
+  isFormValid = () => {
+    const { formData } = this.state;
+    return formData.bu.trim() !== '' && 
+           formData.name.trim() !== '' && 
+           formData.vst !== '';
+  };
+
   handleSave = async () => {
     const { editingBU, formData } = this.state;
     
     // Convert vst to number or null
     const payload = {
       ...formData,
-      vst: formData.vst ? parseFloat(formData.vst) : null,
+      vst: formData.vst !== '' ? parseFloat(formData.vst) : null,
     };
     
     try {
@@ -220,7 +227,7 @@ class BUTable extends Component {
                   <TableCell>{bu.bu}</TableCell>
                   <TableCell>{bu.name}</TableCell>
                   <TableCell align="right">
-                    {bu.vst ? `${bu.vst}%` : '-'}
+                    {bu.vst !== null && bu.vst !== undefined ? `${bu.vst}%` : '-'}
                   </TableCell>
                   <TableCell align="right">
                     <IconButton
@@ -287,7 +294,11 @@ class BUTable extends Component {
           </DialogContent>
           <DialogActions>
             <Button onClick={this.handleCloseDialog}>Abbrechen</Button>
-            <Button onClick={this.handleSave} variant="contained">
+            <Button 
+              onClick={this.handleSave} 
+              variant="contained"
+              disabled={!this.isFormValid()}
+            >
               Speichern
             </Button>
           </DialogActions>
diff --git a/src/routes/admin.js b/src/routes/admin.js
index 7ce59a8..b5a404b 100644
--- a/src/routes/admin.js
+++ b/src/routes/admin.js
@@ -199,7 +199,7 @@ router.post('/buchungsschluessel', authenticateToken, async (req, res) => {
   try {
     await executeQuery(
       'INSERT INTO fibdash.BU (bu, name, vst) VALUES (@bu, @name, @vst)',
-      { bu, name, vst: vst || null }
+      { bu, name, vst: vst !== undefined && vst !== '' ? vst : null }
     );
     res.json({ message: 'Buchungsschlüssel erfolgreich erstellt' });
   } catch (error) {
@@ -224,7 +224,7 @@ router.put('/buchungsschluessel/:id', authenticateToken, async (req, res) => {
   try {
     await executeQuery(
       'UPDATE fibdash.BU SET bu = @bu, name = @name, vst = @vst WHERE id = @id',
-      { bu, name, vst: vst || null, id }
+      { bu, name, vst: vst !== undefined && vst !== '' ? vst : null, id }
     );
     res.json({ message: 'Buchungsschlüssel erfolgreich aktualisiert' });
   } catch (error) {