matthias/dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

featuer change for calendar

Browse Source
This commit is contained in:
Matthias Hochmeister
2026-03-03 09:52:10 +01:00
parent 146f79cf00
commit d9af34b744
11 changed files with 294 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
frontend/src/components/atemschutz/AtemschutzDashboardCard.tsx
View File

@@ -1,5 +1,7 @@
import React, { useEffect, useState } from 'react';
import {
Alert,
AlertTitle,
Box,
Card,
CardContent,
@@ -96,28 +98,38 @@ const AtemschutzDashboardCard: React.FC<AtemschutzDashboardCardProps> = ({
einsatzbereit
</Typography>
{/* Concerns list */}
{/* Concerns list — using Alert components for consistent warning styling */}
{hasConcerns && (
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
{stats.untersuchungAbgelaufen > 0 && (
<Typography variant="body2" color="error.main">
{stats.untersuchungAbgelaufen} Untersuchung{stats.untersuchungAbgelaufen !== 1 ? 'en' : ''} abgelaufen
</Typography>
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1, mt: 1 }}>
{(stats.untersuchungAbgelaufen > 0 || stats.leistungstestAbgelaufen > 0) && (
<Alert severity="error" variant="outlined" sx={{ py: 0.5 }}>
<AlertTitle sx={{ fontWeight: 600, mb: 0.5 }}>Abgelaufen</AlertTitle>
{stats.untersuchungAbgelaufen > 0 && (
<Typography variant="body2">
{stats.untersuchungAbgelaufen} Untersuchung{stats.untersuchungAbgelaufen !== 1 ? 'en' : ''} abgelaufen
</Typography>
)}
{stats.leistungstestAbgelaufen > 0 && (
<Typography variant="body2">
{stats.leistungstestAbgelaufen} Leistungstest{stats.leistungstestAbgelaufen !== 1 ? 's' : ''} abgelaufen
</Typography>
)}
</Alert>
)}
{stats.leistungstestAbgelaufen > 0 && (
<Typography variant="body2" color="error.main">
{stats.leistungstestAbgelaufen} Leistungstest{stats.leistungstestAbgelaufen !== 1 ? 's' : ''} abgelaufen
</Typography>
)}
{stats.untersuchungBaldFaellig > 0 && (
<Typography variant="body2" color="warning.main">
{stats.untersuchungBaldFaellig} Untersuchung{stats.untersuchungBaldFaellig !== 1 ? 'en' : ''} bald fällig
</Typography>
)}
{stats.leistungstestBaldFaellig > 0 && (
<Typography variant="body2" color="warning.main">
{stats.leistungstestBaldFaellig} Leistungstest{stats.leistungstestBaldFaellig !== 1 ? 's' : ''} bald fällig
</Typography>
{(stats.untersuchungBaldFaellig > 0 || stats.leistungstestBaldFaellig > 0) && (
<Alert severity="warning" variant="outlined" sx={{ py: 0.5 }}>
<AlertTitle sx={{ fontWeight: 600, mb: 0.5 }}>Bald fällig</AlertTitle>
{stats.untersuchungBaldFaellig > 0 && (
<Typography variant="body2">
{stats.untersuchungBaldFaellig} Untersuchung{stats.untersuchungBaldFaellig !== 1 ? 'en' : ''} bald fällig
</Typography>
)}
{stats.leistungstestBaldFaellig > 0 && (
<Typography variant="body2">
{stats.leistungstestBaldFaellig} Leistungstest{stats.leistungstestBaldFaellig !== 1 ? 's' : ''} bald fällig
</Typography>
)}
</Alert>
)}
</Box>
)}

61
frontend/src/components/dashboard/.!60585!PersonalWarningsBanner.tsx Normal file
View File

@@ -0,0 +1,61 @@
import React, { useEffect, useState } from 'react';
import {
Alert,
AlertTitle,
Box,
CircularProgress,
Divider,
Link,
Typography,
} from '@mui/material';
import { NotificationsActive as NotificationsActiveIcon } from '@mui/icons-material';
import { Link as RouterLink } from 'react-router-dom';
import { atemschutzApi } from '../../services/atemschutz';
import type { User } from '../../types/auth.types';
import type { AtemschutzUebersicht } from '../../types/atemschutz.types';
// ── Constants ─────────────────────────────────────────────────────────────────
/** Show a warning banner if a deadline is within this many days. */
const WARNING_THRESHOLD_DAYS = 60;
// ── Types ─────────────────────────────────────────────────────────────────────
interface PersonalWarning {
key: string;
/** Negative = overdue, 0 = today, positive = days remaining. */
tageRest: number;
label: string;
/** Short description of what the user should do */
action: string;
}
// ── Helpers ───────────────────────────────────────────────────────────────────
function buildWarnings(record: AtemschutzUebersicht): PersonalWarning[] {
const warnings: PersonalWarning[] = [];
if (record.untersuchung_tage_rest \!== null && record.untersuchung_tage_rest <= WARNING_THRESHOLD_DAYS) {
warnings.push({
key: 'untersuchung',
tageRest: record.untersuchung_tage_rest,
label: 'Atemschutz-Untersuchung',
action: 'Termin beim Betriebsarzt vereinbaren',
});
}
if (record.leistungstest_tage_rest \!== null && record.leistungstest_tage_rest <= WARNING_THRESHOLD_DAYS) {
warnings.push({
key: 'leistungstest',
tageRest: record.leistungstest_tage_rest,
label: 'Leistungstest',
action: 'Atemschutzwart kontaktieren',
});
}
return warnings;
}
function tageText(tage: number): string {
if (tage < 0) {
const abs = Math.abs(tage);

21
frontend/src/components/dashboard/BookstackCard.tsx
View File

@@ -1,21 +0,0 @@
import React from 'react';
import { MenuBook } from '@mui/icons-material';
import ServiceCard from './ServiceCard';
interface BookstackCardProps {
onClick?: () => void;
}
const BookstackCard: React.FC<BookstackCardProps> = ({ onClick }) => {
return (
<ServiceCard
title="Bookstack"
description="Dokumentation und Wiki"
icon={MenuBook}
status="disconnected"
onClick={onClick}
/>
);
};
export default BookstackCard;

21
frontend/src/components/dashboard/NextcloudCard.tsx
View File

@@ -1,21 +0,0 @@
import React from 'react';
import { Cloud } from '@mui/icons-material';
import ServiceCard from './ServiceCard';
interface NextcloudCardProps {
onClick?: () => void;
}
const NextcloudCard: React.FC<NextcloudCardProps> = ({ onClick }) => {
return (
<ServiceCard
title="Nextcloud"
description="Dateien und Dokumente"
icon={Cloud}
status="disconnected"
onClick={onClick}
/>
);
};
export default NextcloudCard;

165
frontend/src/components/dashboard/PersonalWarningsBanner.tsx
View File

@@ -4,9 +4,11 @@ import {
AlertTitle,
Box,
CircularProgress,
Divider,
Link,
Typography,
} from '@mui/material';
import { NotificationsActive as NotificationsActiveIcon } from '@mui/icons-material';
import { Link as RouterLink } from 'react-router-dom';
import { atemschutzApi } from '../../services/atemschutz';
import type { User } from '../../types/auth.types';
@@ -24,6 +26,8 @@ interface PersonalWarning {
/** Negative = overdue, 0 = today, positive = days remaining. */
tageRest: number;
label: string;
/** Short description of what the user should do */
action: string;
}
// ── Helpers ───────────────────────────────────────────────────────────────────
@@ -31,19 +35,21 @@ interface PersonalWarning {
function buildWarnings(record: AtemschutzUebersicht): PersonalWarning[] {
const warnings: PersonalWarning[] = [];
if (record.untersuchung_tage_rest !== null && record.untersuchung_tage_rest <= WARNING_THRESHOLD_DAYS) {
if (record.untersuchung_tage_rest \!== null && record.untersuchung_tage_rest <= WARNING_THRESHOLD_DAYS) {
warnings.push({
key: 'untersuchung',
tageRest: record.untersuchung_tage_rest,
label: 'Atemschutz-Untersuchung',
action: 'Termin beim Betriebsarzt vereinbaren',
});
}
if (record.leistungstest_tage_rest !== null && record.leistungstest_tage_rest <= WARNING_THRESHOLD_DAYS) {
if (record.leistungstest_tage_rest \!== null && record.leistungstest_tage_rest <= WARNING_THRESHOLD_DAYS) {
warnings.push({
key: 'leistungstest',
tageRest: record.leistungstest_tage_rest,
label: 'Leistungstest',
action: 'Atemschutzwart kontaktieren',
});
}
@@ -63,9 +69,11 @@ function tageText(tage: number): string {
interface PersonalWarningsBannerProps {
user: User;
/** Called with the number of active warnings (for badge display) */
onWarningCount?: (count: number) => void;
}
const PersonalWarningsBanner: React.FC<PersonalWarningsBannerProps> = ({ user: _user }) => {
const PersonalWarningsBanner: React.FC<PersonalWarningsBannerProps> = ({ user: _user, onWarningCount }) => {
const [record, setRecord] = useState<AtemschutzUebersicht | null>(null);
const [loading, setLoading] = useState(true);
const [fetchError, setFetchError] = useState<string | null>(null);
@@ -112,13 +120,18 @@ const PersonalWarningsBanner: React.FC<PersonalWarningsBannerProps> = ({ user: _
// ── No atemschutz record for this user ─────────────────────────────────────
if (!record) return null;
if (\!record) return null;
// ── Build warnings list ────────────────────────────────────────────────────
const warnings = buildWarnings(record);
if (warnings.length === 0) return null;
if (warnings.length === 0) {
onWarningCount?.(0);
return null;
}
onWarningCount?.(warnings.length);
// ── Render ─────────────────────────────────────────────────────────────────
@@ -127,56 +140,100 @@ const PersonalWarningsBanner: React.FC<PersonalWarningsBannerProps> = ({ user: _
const upcoming = warnings.filter((w) => w.tageRest >= 0);
return (
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
{overdue.length > 0 && (
<Alert severity="error" variant="outlined">
<AlertTitle sx={{ fontWeight: 600 }}>Überfällig — Handlungsbedarf</AlertTitle>
<Box component="ul" sx={{ m: 0, pl: 2 }}>
{overdue.map((w) => (
<Box key={w.key} component="li" sx={{ mb: 0.5 }}>
<Link
component={RouterLink}
to="/atemschutz"
color="inherit"
underline="hover"
sx={{ fontWeight: 500 }}
>
{w.label}
</Link>
{' — '}
<Typography component="span" variant="body2">
{tageText(w.tageRest)}
</Typography>
</Box>
))}
</Box>
</Alert>
)}
<Box
sx={{
border: '1px solid',
borderColor: overdue.length > 0 ? 'error.main' : 'warning.main',
borderRadius: 1,
overflow: 'hidden',
}}
>
{/* Banner header */}
<Box
sx={{
display: 'flex',
alignItems: 'center',
gap: 1,
px: 2,
py: 1,
bgcolor: overdue.length > 0 ? 'error.light' : 'warning.light',
}}
>
<NotificationsActiveIcon
fontSize="small"
sx={{ color: overdue.length > 0 ? 'error.dark' : 'warning.dark' }}
/>
<Typography
variant="subtitle2"
sx={{
fontWeight: 700,
color: overdue.length > 0 ? 'error.dark' : 'warning.dark',
}}
>
Persönliche Warnungen ({warnings.length})
</Typography>
</Box>
{upcoming.length > 0 && (
<Alert severity="warning" variant="outlined">
<AlertTitle sx={{ fontWeight: 600 }}>Frist läuft bald ab</AlertTitle>
<Box component="ul" sx={{ m: 0, pl: 2 }}>
{upcoming.map((w) => (
<Box key={w.key} component="li" sx={{ mb: 0.5 }}>
<Link
component={RouterLink}
to="/atemschutz"
color="inherit"
underline="hover"
sx={{ fontWeight: 500 }}
>
{w.label}
</Link>
{' — '}
<Typography component="span" variant="body2">
{tageText(w.tageRest)}
</Typography>
</Box>
))}
</Box>
</Alert>
)}
<Divider />
{/* Warning alerts */}
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5, p: 1.5 }}>
{overdue.length > 0 && (
<Alert severity="error" variant="outlined">
<AlertTitle sx={{ fontWeight: 600 }}>Überfällig — Handlungsbedarf</AlertTitle>
<Box component="ul" sx={{ m: 0, pl: 2 }}>
{overdue.map((w) => (
<Box key={w.key} component="li" sx={{ mb: 0.5 }}>
<Link
component={RouterLink}
to="/atemschutz"
color="inherit"
underline="hover"
sx={{ fontWeight: 500 }}
>
{w.label}
</Link>
{' — '}
<Typography component="span" variant="body2">
{tageText(w.tageRest)}
</Typography>
<Typography variant="body2" color="text.secondary" sx={{ mt: 0.25 }}>
→ {w.action}
</Typography>
</Box>
))}
</Box>
</Alert>
)}
{upcoming.length > 0 && (
<Alert severity="warning" variant="outlined">
<AlertTitle sx={{ fontWeight: 600 }}>Frist läuft bald ab</AlertTitle>
<Box component="ul" sx={{ m: 0, pl: 2 }}>
{upcoming.map((w) => (
<Box key={w.key} component="li" sx={{ mb: 0.5 }}>
<Link
component={RouterLink}
to="/atemschutz"
color="inherit"
underline="hover"
sx={{ fontWeight: 500 }}
>
{w.label}
</Link>
{' — '}
<Typography component="span" variant="body2">
{tageText(w.tageRest)}
</Typography>
<Typography variant="body2" color="text.secondary" sx={{ mt: 0.25 }}>
→ {w.action}
</Typography>
</Box>
))}
</Box>
</Alert>
)}
</Box>
</Box>
);
};

21
frontend/src/components/dashboard/VikunjaCard.tsx
View File

@@ -1,21 +0,0 @@
import React from 'react';
import { Assignment } from '@mui/icons-material';
import ServiceCard from './ServiceCard';
interface VikunjaCardProps {
onClick?: () => void;
}
const VikunjaCard: React.FC<VikunjaCardProps> = ({ onClick }) => {
return (
<ServiceCard
title="Vikunja"
description="Aufgaben und Projekte"
icon={Assignment}
status="disconnected"
onClick={onClick}
/>
);
};
export default VikunjaCard;

3
frontend/src/components/dashboard/index.ts
View File

@@ -1,8 +1,5 @@
export { default as UserProfile } from './UserProfile';
export { default as ServiceCard } from './ServiceCard';
export { default as NextcloudCard } from './NextcloudCard';
export { default as VikunjaCard } from './VikunjaCard';
export { default as BookstackCard } from './BookstackCard';
export { default as StatsCard } from './StatsCard';
export { default as ActivityFeed } from './ActivityFeed';
export { default as DashboardLayout } from './DashboardLayout';

54
frontend/src/components/shared/Header.tsx
View File

@@ -1,6 +1,7 @@
import { useState } from 'react';
import { useState, useEffect } from 'react';
import {
AppBar,
Badge,
Toolbar,
Typography,
IconButton,
@@ -20,6 +21,7 @@ import {
} from '@mui/icons-material';
import { useAuth } from '../../contexts/AuthContext';
import { useNavigate } from 'react-router-dom';
import { atemschutzApi } from '../../services/atemschutz';
interface HeaderProps {
onMenuClick: () => void;
@@ -29,6 +31,22 @@ function Header({ onMenuClick }: HeaderProps) {
const { user, logout } = useAuth();
const navigate = useNavigate();
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
const [warningCount, setWarningCount] = useState(0);
// Fetch personal warning count for badge
useEffect(() => {
if (\!user) return;
atemschutzApi.getMyStatus()
.then((record) => {
if (\!record) return;
let count = 0;
const THRESHOLD = 60;
if (record.untersuchung_tage_rest \!== null && record.untersuchung_tage_rest <= THRESHOLD) count++;
if (record.leistungstest_tage_rest \!== null && record.leistungstest_tage_rest <= THRESHOLD) count++;
setWarningCount(count);
})
.catch(() => { /* non-critical */ });
}, [user]);
const handleMenuOpen = (event: React.MouseEvent<HTMLElement>) => {
setAnchorEl(event.currentTarget);
@@ -55,7 +73,7 @@ function Header({ onMenuClick }: HeaderProps) {
// Get initials for avatar
const getInitials = () => {
if (!user) return '?';
if (\!user) return '?';
const initials = (user.given_name?.[0] || '') + (user.family_name?.[0] || '');
return initials || user.name?.[0] || '?';
};
@@ -70,7 +88,7 @@ function Header({ onMenuClick }: HeaderProps) {
<Toolbar>
<IconButton
color="inherit"
aria-label="Menü öffnen"
aria-label="Men� �ffnen"
edge="start"
onClick={onMenuClick}
sx={{ mr: 2, display: { sm: 'none' } }}
@@ -92,16 +110,23 @@ function Header({ onMenuClick }: HeaderProps) {
aria-controls="user-menu"
aria-haspopup="true"
>
<Avatar
sx={{
bgcolor: 'secondary.main',
width: 32,
height: 32,
fontSize: '0.875rem',
}}
<Badge
badgeContent={warningCount}
color="error"
overlap="circular"
invisible={warningCount === 0}
>
{getInitials()}
</Avatar>
<Avatar
sx={{
bgcolor: 'secondary.main',
width: 32,
height: 32,
fontSize: '0.875rem',
}}
>
{getInitials()}
</Avatar>
</Badge>
</IconButton>
<Menu
@@ -129,6 +154,11 @@ function Header({ onMenuClick }: HeaderProps) {
<Typography variant="body2" color="text.secondary">
{user.email}
</Typography>
{warningCount > 0 && (
<Typography variant="caption" color="error.main" sx={{ display: 'block', mt: 0.5 }}>
{warningCount} persönliche{warningCount !== 1 ? ' Warnungen' : ' Warnung'}
</Typography>
)}
</Box>
<Divider />
<MenuItem onClick={handleProfile}>

27
frontend/src/pages/Dashboard.tsx
View File

@@ -1,5 +1,6 @@
import { useState, useEffect } from 'react';
import {
Alert,
Container,
Box,
Typography,
@@ -116,11 +117,27 @@ function Dashboard() {
icon={DirectionsCar}
color="success.main"
/>
{vehicleWarnings.length > 0 && (
<Typography variant="caption" color="warning.main" sx={{ mt: 0.5, display: 'block', textAlign: 'center' }}>
{new Set(vehicleWarnings.map(w => w.fahrzeug_id)).size} Fzg. mit Ausrüstungsmangel
</Typography>
)}
{vehicleWarnings.length > 0 && (() => {
const errorCount = vehicleWarnings.filter(w =>
w.status === 'beschaedigt' || w.status === 'ausser_dienst'
).length;
const warnCount = vehicleWarnings.filter(w =>
w.status === 'in_wartung'
).length;
const vehicleCount = new Set(vehicleWarnings.map(w => w.fahrzeug_id)).size;
const severity = errorCount > 0 ? 'error' : 'warning';
return (
<Alert
severity={severity}
variant="outlined"
sx={{ mt: 1, py: 0.5, '& .MuiAlert-message': { fontSize: '0.8rem' } }}
>
{vehicleCount} Fahrzeug{vehicleCount \!== 1 ? 'e' : ''} mit Ausrüstungsmangel
{errorCount > 0 && }
{warnCount > 0 && errorCount === 0 && }
</Alert>
);
})()}
</Box>
</Fade>
)}