seb/fibdash
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Enhance Accounting Items Management with JTL Kontierung Integration

Browse Source 
- Added a new API route to fetch JTL Kontierung data based on transaction ID.
- Implemented loading of JTL Kontierung data in the AccountingItemsManager component.
- Updated UI to display JTL Kontierung data for debugging purposes.
- Enhanced user feedback during processing tasks in the App component with tooltips and progress indicators.
This commit is contained in:
sebseb7
2025-08-08 11:32:57 +02:00
parent bcd7eea1b4
commit fee9f02faa
3 changed files with 160 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
client/src/App.js
View File

@@ -1,7 +1,7 @@
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, Tabs, Tab, Badge, Chip, Divider, Snackbar, Alert } from '@mui/material';
import { Container, AppBar, Toolbar, Typography, Button, Box, Tabs, Tab, Badge, Chip, Divider, Snackbar, Alert, LinearProgress, Tooltip, CircularProgress } from '@mui/material';
import LoginIcon from '@mui/icons-material/Login';
import DashboardIcon from '@mui/icons-material/Dashboard';
import DownloadIcon from '@mui/icons-material/Download';
@@ -302,6 +302,8 @@ class App extends Component {
</Tabs>
<Divider orientation="vertical" flexItem sx={{ mx: 2, backgroundColor: 'rgba(255, 255, 255, 0.3)' }} />
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
<Tooltip title={processingStatus.markdown ? 'Running markdown conversion… this can take a while' : 'Process markdown conversion'} arrow>
<span>
<Button
color="inherit"
size="small"
@@ -312,7 +314,6 @@ class App extends Component {
px: 1,
'&:hover': { backgroundColor: 'rgba(255, 255, 255, 0.1)' }
}}
title="Process markdown conversion"
>
<Badge
badgeContent={documentStatus?.needMarkdown || 0}
@@ -322,8 +323,14 @@ class App extends Component {
>
<DocumentScannerIcon fontSize="small" />
</Badge>
{processingStatus.markdown && <PlayArrowIcon fontSize="small" />}
{processingStatus.markdown && (
<CircularProgress size={14} color="inherit" />
)}
</Button>
</span>
</Tooltip>
<Tooltip title={processingStatus.extraction ? 'Running data extraction… this can take a while' : 'Process data extraction'} arrow>
<span>
<Button
color="inherit"
size="small"
@@ -334,7 +341,6 @@ class App extends Component {
px: 1,
'&:hover': { backgroundColor: 'rgba(255, 255, 255, 0.1)' }
}}
title="Process data extraction"
>
<Badge
badgeContent={documentStatus?.needExtraction || 0}
@@ -344,8 +350,14 @@ class App extends Component {
>
<ExtractIcon fontSize="small" />
</Badge>
{processingStatus.extraction && <PlayArrowIcon fontSize="small" />}
{processingStatus.extraction && (
<CircularProgress size={14} color="inherit" />
)}
</Button>
</span>
</Tooltip>
<Tooltip title={processingStatus.datevSync ? 'Running DATEV sync… this can take a while' : 'Process Datev sync'} arrow>
<span>
<Button
color="inherit"
size="small"
@@ -356,7 +368,6 @@ class App extends Component {
px: 1,
'&:hover': { backgroundColor: 'rgba(255, 255, 255, 0.1)' }
}}
title="Process Datev sync"
>
<Badge
badgeContent={documentStatus?.needDatevSync || 0}
@@ -366,8 +377,12 @@ class App extends Component {
>
<EmailIcon fontSize="small" />
</Badge>
{processingStatus.datevSync && <PlayArrowIcon fontSize="small" />}
{processingStatus.datevSync && (
<CircularProgress size={14} color="inherit" />
)}
</Button>
</span>
</Tooltip>
<Button
color="inherit"
size="small"
@@ -426,6 +441,9 @@ class App extends Component {
</>
)}
</Toolbar>
{(processingStatus.markdown || processingStatus.extraction || processingStatus.datevSync) && (
<LinearProgress color="secondary" />
)}
</AppBar>
<Box sx={{ height: 'calc(100vh - 64px)', display: 'flex', flexDirection: 'column' }}>

42
client/src/components/AccountingItemsManager.js
View File

@@ -44,6 +44,7 @@ class AccountingItemsManager extends Component {
editingItem: null,
showCreateDialog: false,
showCreateKontoDialog: false,
jtlKontierung: null,
newItem: {
umsatz_brutto: '',
soll_haben_kz: 'S',
@@ -65,6 +66,7 @@ class AccountingItemsManager extends Component {
componentDidMount() {
this.loadData();
this.loadJtlKontierung();
}
loadData = async () => {
@@ -88,6 +90,31 @@ class AccountingItemsManager extends Component {
}
};
loadJtlKontierung = async () => {
try {
const { transaction } = this.props;
if (!transaction || !transaction.jtlId) {
this.setState({ jtlKontierung: undefined });
return;
}
const response = await this.authService.apiCall(`/data/jtl-kontierung/${transaction.jtlId}`);
if (!response) return;
if (response.ok) {
const data = await response.json();
this.setState({ jtlKontierung: data });
} else {
const err = await response.json();
console.error('Failed to load JTL Kontierung:', err);
this.setState({ jtlKontierung: undefined });
}
} catch (e) {
console.error('Error loading JTL Kontierung:', e);
this.setState({ jtlKontierung: undefined });
}
}
loadAccountingItems = async () => {
const { transaction } = this.props;
if (!transaction?.id) return;
@@ -319,6 +346,21 @@ class AccountingItemsManager extends Component {
/>
</Box>
{transaction?.jtlId && (
<Box sx={{ mb: 2, p: 2, border: '1px dashed #999', borderRadius: 1 }}>
<Typography variant="subtitle2">Debug: tUmsatzKontierung.data</Typography>
<Typography variant="caption" component="div" sx={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>
{this.state.jtlKontierung === undefined
? 'undefined'
: this.state.jtlKontierung === null
? 'null'
: typeof this.state.jtlKontierung === 'object'
? JSON.stringify(this.state.jtlKontierung, null, 2)
: String(this.state.jtlKontierung)}
</Typography>
</Box>
)}
<TableContainer component={Paper}>
<Table size="small">
<TableHead>

33
src/routes/data/accountingItems.js
View File

@@ -3,6 +3,39 @@ const { authenticateToken } = require('../../middleware/auth');
const router = express.Router();
// Debug: Get JTL Kontierung data for a specific JTL Umsatz (by kZahlungsabgleichUmsatz)
router.get('/jtl-kontierung/:jtlId', authenticateToken, async (req, res) => {
try {
const { executeQuery } = require('../../config/database');
const { jtlId } = req.params;
const query = `
SELECT
uk.data
FROM eazybusiness.dbo.tZahlungsabgleichUmsatz z
LEFT JOIN eazybusiness.dbo.tUmsatzKontierung uk
ON uk.kZahlungsabgleichUmsatz = z.kZahlungsabgleichUmsatz
WHERE z.kZahlungsabgleichUmsatz = @jtlId
`;
const result = await executeQuery(query, { jtlId: parseInt(jtlId, 10) });
// Return undefined when no data found (do not lie with empty array/string)
if (!result.recordset || result.recordset.length === 0) {
return res.json({ data: undefined });
}
// If multiple rows exist, return all; otherwise single object
const rows = result.recordset.map(r => ({ data: r.data }));
if (rows.length === 1) {
return res.json(rows[0]);
}
return res.json(rows);
} catch (error) {
console.error('Error fetching JTL Kontierung data:', error);
res.status(500).json({ error: 'Failed to fetch JTL Kontierung data' });
}
});
// Get accounting items for a specific transaction
router.get('/accounting-items/:transactionId', authenticateToken, async (req, res) => {
try {