genesis

client/src/components/SummaryHeader.js

@@ -0,0 +1,128 @@
+import React, { Component } from 'react';
+import {
+  Box,
+  Paper,
+  Typography,
+  Select,
+  MenuItem,
+  FormControl,
+  InputLabel,
+  Grid,
+  Button,
+} from '@mui/material';
+import {
+  Download as DownloadIcon,
+} from '@mui/icons-material';
+
+class SummaryHeader extends Component {
+  formatAmount = (amount) => {
+    return new Intl.NumberFormat('de-DE', {
+      style: 'currency',
+      currency: 'EUR'
+    }).format(amount);
+  };
+
+  getMonthName = (monthYear) => {
+    if (!monthYear) return '';
+    const [year, month] = monthYear.split('-');
+    const date = new Date(year, month - 1);
+    return date.toLocaleDateString('de-DE', { month: 'long', year: 'numeric' });
+  };
+
+  render() {
+    const { 
+      months, 
+      selectedMonth, 
+      summary, 
+      loading, 
+      onMonthChange, 
+      onDownloadDatev 
+    } = this.props;
+
+    if (!summary) return null;
+
+    return (
+      <Paper elevation={1} sx={{ p: { xs: 1.5, sm: 2 }, mb: 2 }}>
+        <Grid container alignItems="center" spacing={{ xs: 1, sm: 2 }}>
+          <Grid item xs={12} md={3}>
+            <FormControl fullWidth size="small">
+              <InputLabel>Monat</InputLabel>
+              <Select
+                value={selectedMonth}
+                onChange={onMonthChange}
+                label="Month"
+              >
+                {months.map((month) => (
+                  <MenuItem key={month} value={month}>
+                    {this.getMonthName(month)}
+                  </MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+          </Grid>
+          <Grid item xs={6} sm={4} md={2}>
+            <Box textAlign="center">
+              <Typography variant="caption" color="textSecondary">Transaktionen</Typography>
+              <Typography variant="h6" sx={{ fontWeight: 'bold', color: '#1976d2', fontSize: { xs: '0.9rem', sm: '1.25rem' } }}>
+                {summary.totalTransactions}
+              </Typography>
+            </Box>
+          </Grid>
+          <Grid item xs={6} sm={4} md={2}>
+            <Box textAlign="center">
+              <Typography variant="caption" color="textSecondary">Einnahmen</Typography>
+              <Typography variant="h6" sx={{ fontWeight: 'bold', color: '#388e3c', fontSize: { xs: '0.9rem', sm: '1.25rem' } }}>
+                {this.formatAmount(summary.totalIncome)}
+              </Typography>
+            </Box>
+          </Grid>
+          <Grid item xs={6} sm={4} md={2}>
+            <Box textAlign="center">
+              <Typography variant="caption" color="textSecondary">Ausgaben</Typography>
+              <Typography variant="h6" sx={{ fontWeight: 'bold', color: '#d32f2f', fontSize: { xs: '0.9rem', sm: '1.25rem' } }}>
+                {this.formatAmount(summary.totalExpenses)}
+              </Typography>
+            </Box>
+          </Grid>
+          <Grid item xs={6} sm={4} md={2}>
+            <Box textAlign="center">
+              <Typography variant="caption" color="textSecondary">Nettobetrag</Typography>
+              <Typography 
+                variant="h6" 
+                sx={{ 
+                  fontWeight: 'bold',
+                  color: summary.netAmount >= 0 ? '#388e3c' : '#d32f2f',
+                  fontSize: { xs: '0.9rem', sm: '1.25rem' }
+                }}
+              >
+                {this.formatAmount(summary.netAmount)}
+              </Typography>
+            </Box>
+          </Grid>
+          <Grid item xs={6} sm={4} md={1}>
+            <Box textAlign="center">
+              <Typography variant="caption" color="textSecondary">JTL ✓</Typography>
+              <Typography variant="h6" sx={{ fontWeight: 'bold', color: '#388e3c', fontSize: { xs: '0.9rem', sm: '1.25rem' } }}>
+                {summary.jtlMatches || 0}
+              </Typography>
+            </Box>
+          </Grid>
+          <Grid item xs={12} sm={4} md={2}>
+            <Button
+              variant="contained"
+              startIcon={<DownloadIcon />}
+              onClick={onDownloadDatev}
+              disabled={!selectedMonth || loading}
+              size="small"
+              sx={{ height: 'fit-content' }}
+            >
+              DATEV Export
+            </Button>
+          </Grid>
+        </Grid>
+      </Paper>
+    );
+  }
+}
+
+export default SummaryHeader;