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

adding chat features, admin features and bug fixes

Browse Source
This commit is contained in:
Matthias Hochmeister
2026-03-12 08:16:34 +01:00
parent 7b14e3d5ba
commit 31f1414e06
43 changed files with 2610 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

131
frontend/src/components/admin/NotificationBroadcastTab.tsx Normal file
View File

@@ -0,0 +1,131 @@
import { useState } from 'react';
import {
Box,
TextField,
Button,
MenuItem,
Typography,
Dialog,
DialogTitle,
DialogContent,
DialogContentText,
DialogActions,
CircularProgress,
} from '@mui/material';
import SendIcon from '@mui/icons-material/Send';
import { useMutation } from '@tanstack/react-query';
import { adminApi } from '../../services/admin';
import { useNotification } from '../../contexts/NotificationContext';
import type { BroadcastPayload } from '../../types/admin.types';
function NotificationBroadcastTab() {
const { showSuccess, showError } = useNotification();
const [titel, setTitel] = useState('');
const [nachricht, setNachricht] = useState('');
const [schwere, setSchwere] = useState<'info' | 'warnung' | 'fehler'>('info');
const [targetGroup, setTargetGroup] = useState('');
const [confirmOpen, setConfirmOpen] = useState(false);
const broadcastMutation = useMutation({
mutationFn: (data: BroadcastPayload) => adminApi.broadcast(data),
onSuccess: (result) => {
showSuccess(`Benachrichtigung an ${result.sent} Benutzer gesendet`);
setTitel('');
setNachricht('');
setSchwere('info');
setTargetGroup('');
},
onError: () => {
showError('Fehler beim Senden der Benachrichtigung');
},
});
const handleSubmit = () => {
setConfirmOpen(true);
};
const handleConfirm = () => {
setConfirmOpen(false);
broadcastMutation.mutate({
titel,
nachricht,
schwere,
...(targetGroup.trim() ? { targetGroup: targetGroup.trim() } : {}),
});
};
return (
<Box sx={{ maxWidth: 600 }}>
<Typography variant="h6" sx={{ mb: 2 }}>Benachrichtigung senden</Typography>
<TextField
label="Titel"
fullWidth
value={titel}
onChange={(e) => setTitel(e.target.value)}
sx={{ mb: 2 }}
inputProps={{ maxLength: 200 }}
/>
<TextField
label="Nachricht"
fullWidth
multiline
rows={4}
value={nachricht}
onChange={(e) => setNachricht(e.target.value)}
sx={{ mb: 2 }}
inputProps={{ maxLength: 2000 }}
/>
<TextField
select
label="Schwere"
fullWidth
value={schwere}
onChange={(e) => setSchwere(e.target.value as 'info' | 'warnung' | 'fehler')}
sx={{ mb: 2 }}
>
<MenuItem value="info">Info</MenuItem>
<MenuItem value="warnung">Warnung</MenuItem>
<MenuItem value="fehler">Fehler</MenuItem>
</TextField>
<TextField
label="Zielgruppe (optional)"
fullWidth
value={targetGroup}
onChange={(e) => setTargetGroup(e.target.value)}
helperText="Leer lassen um an alle aktiven Benutzer zu senden"
sx={{ mb: 3 }}
/>
<Button
variant="contained"
startIcon={broadcastMutation.isPending ? <CircularProgress size={18} color="inherit" /> : <SendIcon />}
onClick={handleSubmit}
disabled={!titel.trim() || !nachricht.trim() || broadcastMutation.isPending}
>
Senden
</Button>
<Dialog open={confirmOpen} onClose={() => setConfirmOpen(false)}>
<DialogTitle>Benachrichtigung senden?</DialogTitle>
<DialogContent>
<DialogContentText>
Sind Sie sicher, dass Sie diese Benachrichtigung
{targetGroup.trim() ? ` an die Gruppe "${targetGroup.trim()}"` : ' an alle aktiven Benutzer'} senden moechten?
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={() => setConfirmOpen(false)}>Abbrechen</Button>
<Button onClick={handleConfirm} variant="contained" color="primary">
Bestaetigen
</Button>
</DialogActions>
</Dialog>
</Box>
);
}
export default NotificationBroadcastTab;

205
frontend/src/components/admin/ServiceManagerTab.tsx Normal file
View File

@@ -0,0 +1,205 @@
import { useState } from 'react';
import {
Box,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
Paper,
Button,
Dialog,
DialogTitle,
DialogContent,
DialogActions,
TextField,
IconButton,
Typography,
CircularProgress,
} from '@mui/material';
import DeleteIcon from '@mui/icons-material/Delete';
import AddIcon from '@mui/icons-material/Add';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { adminApi } from '../../services/admin';
import type { PingResult } from '../../types/admin.types';
function ServiceManagerTab() {
const queryClient = useQueryClient();
const [dialogOpen, setDialogOpen] = useState(false);
const [newName, setNewName] = useState('');
const [newUrl, setNewUrl] = useState('');
const { data: services, isLoading: servicesLoading } = useQuery({
queryKey: ['admin', 'services'],
queryFn: adminApi.getServices,
refetchInterval: 15000,
});
const { data: pingResults, isLoading: pingLoading } = useQuery({
queryKey: ['admin', 'services', 'ping'],
queryFn: adminApi.pingAll,
refetchInterval: 15000,
});
const createMutation = useMutation({
mutationFn: (data: { name: string; url: string }) => adminApi.createService(data),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['admin', 'services'] });
setDialogOpen(false);
setNewName('');
setNewUrl('');
},
});
const deleteMutation = useMutation({
mutationFn: (id: string) => adminApi.deleteService(id),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['admin', 'services'] });
},
});
const getPingForUrl = (url: string): PingResult | undefined => {
return pingResults?.find((p) => p.url === url);
};
const handleCreate = () => {
if (newName.trim() && newUrl.trim()) {
createMutation.mutate({ name: newName.trim(), url: newUrl.trim() });
}
};
if (servicesLoading) {
return <Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}><CircularProgress /></Box>;
}
const allItems = [
...(services ?? []).map((s) => ({
id: s.id,
name: s.name,
url: s.url,
type: s.type,
isCustom: s.type === 'custom',
})),
];
// Also include internal services from ping results that aren't in the DB
if (pingResults) {
for (const pr of pingResults) {
if (!allItems.find((item) => item.url === pr.url)) {
allItems.push({
id: pr.url,
name: pr.name,
url: pr.url,
type: 'internal' as const,
isCustom: false,
});
}
}
}
return (
<Box>
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
<Typography variant="h6">Service Monitor</Typography>
<Button startIcon={<AddIcon />} variant="contained" onClick={() => setDialogOpen(true)}>
Service hinzufuegen
</Button>
</Box>
<TableContainer component={Paper}>
<Table>
<TableHead>
<TableRow>
<TableCell>Status</TableCell>
<TableCell>Name</TableCell>
<TableCell>URL</TableCell>
<TableCell>Typ</TableCell>
<TableCell>Latenz</TableCell>
<TableCell>Aktionen</TableCell>
</TableRow>
</TableHead>
<TableBody>
{allItems.map((item) => {
const ping = getPingForUrl(item.url);
return (
<TableRow key={item.id}>
<TableCell>
{pingLoading ? (
<CircularProgress size={16} />
) : (
<Box
sx={{
width: 12,
height: 12,
borderRadius: '50%',
bgcolor: ping?.status === 'up' ? 'success.main' : ping ? 'error.main' : 'grey.400',
}}
/>
)}
</TableCell>
<TableCell>{item.name}</TableCell>
<TableCell sx={{ maxWidth: 300, overflow: 'hidden', textOverflow: 'ellipsis' }}>
{item.url}
</TableCell>
<TableCell>{item.type}</TableCell>
<TableCell>{ping ? `${ping.latencyMs}ms` : '-'}</TableCell>
<TableCell>
{item.isCustom && (
<IconButton
size="small"
color="error"
onClick={() => deleteMutation.mutate(item.id)}
disabled={deleteMutation.isPending}
>
<DeleteIcon fontSize="small" />
</IconButton>
)}
</TableCell>
</TableRow>
);
})}
{allItems.length === 0 && (
<TableRow>
<TableCell colSpan={6} align="center">Keine Services konfiguriert</TableCell>
</TableRow>
)}
</TableBody>
</Table>
</TableContainer>
<Dialog open={dialogOpen} onClose={() => setDialogOpen(false)} maxWidth="sm" fullWidth>
<DialogTitle>Neuen Service hinzufuegen</DialogTitle>
<DialogContent>
<TextField
autoFocus
margin="dense"
label="Name"
fullWidth
value={newName}
onChange={(e) => setNewName(e.target.value)}
/>
<TextField
margin="dense"
label="URL"
fullWidth
value={newUrl}
onChange={(e) => setNewUrl(e.target.value)}
/>
</DialogContent>
<DialogActions>
<Button onClick={() => setDialogOpen(false)}>Abbrechen</Button>
<Button
onClick={handleCreate}
variant="contained"
disabled={createMutation.isPending || !newName.trim() || !newUrl.trim()}
>
Erstellen
</Button>
</DialogActions>
</Dialog>
</Box>
);
}
export default ServiceManagerTab;

117
frontend/src/components/admin/SystemHealthTab.tsx Normal file
View File

@@ -0,0 +1,117 @@
import { Box, Card, CardContent, Typography, Chip, LinearProgress, CircularProgress, Grid } from '@mui/material';
import { useQuery } from '@tanstack/react-query';
import { adminApi } from '../../services/admin';
function formatUptime(seconds: number): string {
const days = Math.floor(seconds / 86400);
const hours = Math.floor((seconds % 86400) / 3600);
const mins = Math.floor((seconds % 3600) / 60);
const parts: string[] = [];
if (days > 0) parts.push(`${days}d`);
if (hours > 0) parts.push(`${hours}h`);
parts.push(`${mins}m`);
return parts.join(' ');
}
function formatBytes(bytes: number): string {
const mb = bytes / (1024 * 1024);
return `${mb.toFixed(1)} MB`;
}
function SystemHealthTab() {
const { data: health, isLoading } = useQuery({
queryKey: ['admin', 'system', 'health'],
queryFn: adminApi.getSystemHealth,
refetchInterval: 30000,
});
if (isLoading || !health) {
return <Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}><CircularProgress /></Box>;
}
const heapPercent = (health.memoryUsage.heapUsed / health.memoryUsage.heapTotal) * 100;
return (
<Box>
<Typography variant="h6" sx={{ mb: 2 }}>Systemstatus</Typography>
<Grid container spacing={2}>
<Grid item xs={12} sm={6} md={4}>
<Card>
<CardContent>
<Typography color="text.secondary" gutterBottom>Node.js Version</Typography>
<Chip label={health.nodeVersion} color="primary" />
</CardContent>
</Card>
</Grid>
<Grid item xs={12} sm={6} md={4}>
<Card>
<CardContent>
<Typography color="text.secondary" gutterBottom>Uptime</Typography>
<Typography variant="h5">{formatUptime(health.uptime)}</Typography>
</CardContent>
</Card>
</Grid>
<Grid item xs={12} sm={6} md={4}>
<Card>
<CardContent>
<Typography color="text.secondary" gutterBottom>Datenbank</Typography>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
<Box
sx={{
width: 12,
height: 12,
borderRadius: '50%',
bgcolor: health.dbStatus ? 'success.main' : 'error.main',
}}
/>
<Typography>{health.dbStatus ? 'Verbunden' : 'Nicht erreichbar'}</Typography>
</Box>
<Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>
Groesse: {formatBytes(Number(health.dbSize))}
</Typography>
</CardContent>
</Card>
</Grid>
<Grid item xs={12} sm={6} md={4}>
<Card>
<CardContent>
<Typography color="text.secondary" gutterBottom>Heap Speicher</Typography>
<Typography variant="body2">
{formatBytes(health.memoryUsage.heapUsed)} / {formatBytes(health.memoryUsage.heapTotal)}
</Typography>
<LinearProgress
variant="determinate"
value={heapPercent}
sx={{ mt: 1, height: 8, borderRadius: 4 }}
color={heapPercent > 85 ? 'error' : heapPercent > 70 ? 'warning' : 'primary'}
/>
</CardContent>
</Card>
</Grid>
<Grid item xs={12} sm={6} md={4}>
<Card>
<CardContent>
<Typography color="text.secondary" gutterBottom>RSS Speicher</Typography>
<Typography variant="h5">{formatBytes(health.memoryUsage.rss)}</Typography>
</CardContent>
</Card>
</Grid>
<Grid item xs={12} sm={6} md={4}>
<Card>
<CardContent>
<Typography color="text.secondary" gutterBottom>External Speicher</Typography>
<Typography variant="h5">{formatBytes(health.memoryUsage.external)}</Typography>
</CardContent>
</Card>
</Grid>
</Grid>
</Box>
);
}
export default SystemHealthTab;

166
frontend/src/components/admin/UserOverviewTab.tsx Normal file
View File

@@ -0,0 +1,166 @@
import { useState, useMemo } from 'react';
import {
Box,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
TableSortLabel,
Paper,
TextField,
Chip,
Typography,
CircularProgress,
} from '@mui/material';
import { useQuery } from '@tanstack/react-query';
import { adminApi } from '../../services/admin';
import type { UserOverview } from '../../types/admin.types';
type SortKey = 'name' | 'email' | 'role' | 'is_active' | 'last_login_at';
type SortDir = 'asc' | 'desc';
function formatRelativeTime(dateStr: string | null): string {
if (!dateStr) return 'Nie';
const date = new Date(dateStr);
const now = new Date();
const diffMs = now.getTime() - date.getTime();
const diffMins = Math.floor(diffMs / 60000);
if (diffMins < 1) return 'Gerade eben';
if (diffMins < 60) return `vor ${diffMins}m`;
const diffHours = Math.floor(diffMins / 60);
if (diffHours < 24) return `vor ${diffHours}h`;
const diffDays = Math.floor(diffHours / 24);
return `vor ${diffDays}d`;
}
function UserOverviewTab() {
const [search, setSearch] = useState('');
const [sortKey, setSortKey] = useState<SortKey>('name');
const [sortDir, setSortDir] = useState<SortDir>('asc');
const { data: users, isLoading } = useQuery({
queryKey: ['admin', 'users'],
queryFn: adminApi.getUsers,
});
const handleSort = (key: SortKey) => {
if (sortKey === key) {
setSortDir(sortDir === 'asc' ? 'desc' : 'asc');
} else {
setSortKey(key);
setSortDir('asc');
}
};
const filtered = useMemo(() => {
if (!users) return [];
const q = search.toLowerCase();
let result = users.filter(
(u) => u.name?.toLowerCase().includes(q) || u.email?.toLowerCase().includes(q)
);
result.sort((a, b) => {
const valA = a[sortKey];
const valB = b[sortKey];
let cmp = 0;
if (valA == null && valB == null) cmp = 0;
else if (valA == null) cmp = -1;
else if (valB == null) cmp = 1;
else if (typeof valA === 'string' && typeof valB === 'string') {
cmp = valA.localeCompare(valB);
} else if (typeof valA === 'boolean' && typeof valB === 'boolean') {
cmp = valA === valB ? 0 : valA ? 1 : -1;
}
return sortDir === 'asc' ? cmp : -cmp;
});
return result;
}, [users, search, sortKey, sortDir]);
if (isLoading) {
return <Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}><CircularProgress /></Box>;
}
return (
<Box>
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
<Typography variant="h6">Benutzer ({filtered.length})</Typography>
<TextField
size="small"
placeholder="Suche nach Name oder E-Mail..."
value={search}
onChange={(e) => setSearch(e.target.value)}
sx={{ minWidth: 280 }}
/>
</Box>
<TableContainer component={Paper}>
<Table>
<TableHead>
<TableRow>
<TableCell>
<TableSortLabel active={sortKey === 'name'} direction={sortKey === 'name' ? sortDir : 'asc'} onClick={() => handleSort('name')}>
Name
</TableSortLabel>
</TableCell>
<TableCell>
<TableSortLabel active={sortKey === 'email'} direction={sortKey === 'email' ? sortDir : 'asc'} onClick={() => handleSort('email')}>
E-Mail
</TableSortLabel>
</TableCell>
<TableCell>
<TableSortLabel active={sortKey === 'role'} direction={sortKey === 'role' ? sortDir : 'asc'} onClick={() => handleSort('role')}>
Rolle
</TableSortLabel>
</TableCell>
<TableCell>Gruppen</TableCell>
<TableCell>
<TableSortLabel active={sortKey === 'is_active'} direction={sortKey === 'is_active' ? sortDir : 'asc'} onClick={() => handleSort('is_active')}>
Status
</TableSortLabel>
</TableCell>
<TableCell>
<TableSortLabel active={sortKey === 'last_login_at'} direction={sortKey === 'last_login_at' ? sortDir : 'asc'} onClick={() => handleSort('last_login_at')}>
Letzter Login
</TableSortLabel>
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{filtered.map((user: UserOverview) => (
<TableRow key={user.id}>
<TableCell>{user.name}</TableCell>
<TableCell>{user.email}</TableCell>
<TableCell>
<Chip
label={user.role}
size="small"
color={user.role === 'admin' ? 'error' : 'default'}
/>
</TableCell>
<TableCell>
<Box sx={{ display: 'flex', gap: 0.5, flexWrap: 'wrap' }}>
{(user.groups ?? []).map((g) => (
<Chip key={g} label={g} size="small" variant="outlined" />
))}
</Box>
</TableCell>
<TableCell>
<Chip
label={user.is_active ? 'Aktiv' : 'Inaktiv'}
size="small"
color={user.is_active ? 'success' : 'default'}
/>
</TableCell>
<TableCell>{formatRelativeTime(user.last_login_at)}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</Box>
);
}
export default UserOverviewTab;

72
frontend/src/components/chat/ChatMessage.tsx Normal file
View File

@@ -0,0 +1,72 @@
import React from 'react';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import Paper from '@mui/material/Paper';
import type { NextcloudMessage } from '../../types/nextcloud.types';
interface ChatMessageProps {
message: NextcloudMessage;
isOwnMessage: boolean;
}
const ChatMessage: React.FC<ChatMessageProps> = ({ message, isOwnMessage }) => {
const time = new Date(message.timestamp * 1000).toLocaleTimeString('de-DE', {
hour: '2-digit',
minute: '2-digit',
});
if (message.systemMessage) {
return (
<Box sx={{ display: 'flex', justifyContent: 'center', my: 0.5 }}>
<Typography variant="caption" sx={{ fontStyle: 'italic', color: 'text.secondary' }}>
{message.message} - {time}
</Typography>
</Box>
);
}
return (
<Box
sx={{
display: 'flex',
justifyContent: isOwnMessage ? 'flex-end' : 'flex-start',
my: 0.5,
px: 1,
}}
>
<Paper
elevation={0}
sx={{
px: 1.5,
py: 0.75,
maxWidth: '80%',
bgcolor: isOwnMessage ? 'primary.main' : (theme) => theme.palette.mode === 'dark' ? 'grey.800' : 'grey.200',
color: isOwnMessage ? 'primary.contrastText' : 'text.primary',
borderRadius: 2,
}}
>
{!isOwnMessage && (
<Typography variant="caption" sx={{ fontWeight: 600, display: 'block' }}>
{message.actorDisplayName}
</Typography>
)}
<Typography variant="body2" sx={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>
{message.message}
</Typography>
<Typography
variant="caption"
sx={{
display: 'block',
textAlign: 'right',
mt: 0.25,
opacity: 0.7,
}}
>
{time}
</Typography>
</Paper>
</Box>
);
};
export default ChatMessage;

119
frontend/src/components/chat/ChatMessageView.tsx Normal file
View File

@@ -0,0 +1,119 @@
import React, { useEffect, useRef, useState } from 'react';
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';
import IconButton from '@mui/material/IconButton';
import Typography from '@mui/material/Typography';
import SendIcon from '@mui/icons-material/Send';
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { nextcloudApi } from '../../services/nextcloud';
import { useChat } from '../../contexts/ChatContext';
import { useLayout } from '../../contexts/LayoutContext';
import ChatMessage from './ChatMessage';
const ChatMessageView: React.FC = () => {
const { selectedRoomToken, selectRoom, rooms, loginName } = useChat();
const { chatPanelOpen } = useLayout();
const queryClient = useQueryClient();
const messagesEndRef = useRef<HTMLDivElement>(null);
const [input, setInput] = useState('');
const room = rooms.find((r) => r.token === selectedRoomToken);
const { data: messages } = useQuery({
queryKey: ['nextcloud', 'messages', selectedRoomToken],
queryFn: () => nextcloudApi.getMessages(selectedRoomToken!),
enabled: !!selectedRoomToken && chatPanelOpen,
refetchInterval: 5000,
});
const sendMutation = useMutation({
mutationFn: (message: string) => nextcloudApi.sendMessage(selectedRoomToken!, message),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['nextcloud', 'messages', selectedRoomToken] });
queryClient.invalidateQueries({ queryKey: ['nextcloud', 'rooms'] });
},
});
useEffect(() => {
if (selectedRoomToken && chatPanelOpen) {
nextcloudApi.markAsRead(selectedRoomToken).then(() => {
queryClient.invalidateQueries({ queryKey: ['nextcloud', 'rooms'] });
}).catch(() => {});
}
}, [selectedRoomToken, chatPanelOpen, queryClient]);
useEffect(() => {
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
}, [messages]);
const handleSend = () => {
const trimmed = input.trim();
if (!trimmed || !selectedRoomToken) return;
sendMutation.mutate(trimmed);
setInput('');
};
const handleKeyDown = (e: React.KeyboardEvent) => {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
handleSend();
}
};
if (!selectedRoomToken) {
return (
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 1 }}>
<Typography color="text.secondary" variant="body2">
Raum auswählen
</Typography>
</Box>
);
}
return (
<Box sx={{ display: 'flex', flexDirection: 'column', flex: 1, minHeight: 0 }}>
<Box sx={{ px: 1.5, py: 1, borderBottom: 1, borderColor: 'divider', display: 'flex', alignItems: 'center', gap: 1 }}>
<IconButton size="small" onClick={() => selectRoom(null)}>
<ArrowBackIcon fontSize="small" />
</IconButton>
<Typography variant="subtitle2" noWrap>
{room?.displayName ?? selectedRoomToken}
</Typography>
</Box>
<Box sx={{ flex: 1, overflow: 'auto', py: 1 }}>
{messages?.map((msg) => (
<ChatMessage
key={msg.id}
message={msg}
isOwnMessage={msg.actorType === 'users' && msg.actorId === loginName}
/>
))}
<div ref={messagesEndRef} />
</Box>
<Box sx={{ p: 1, borderTop: 1, borderColor: 'divider', display: 'flex', gap: 0.5 }}>
<TextField
size="small"
fullWidth
placeholder="Nachricht..."
value={input}
onChange={(e) => setInput(e.target.value)}
onKeyDown={handleKeyDown}
multiline
maxRows={3}
/>
<IconButton
color="primary"
onClick={handleSend}
disabled={!input.trim() || sendMutation.isPending}
>
<SendIcon />
</IconButton>
</Box>
</Box>
);
};
export default ChatMessageView;

93
frontend/src/components/chat/ChatPanel.tsx Normal file
View File

@@ -0,0 +1,93 @@
import React from 'react';
import Box from '@mui/material/Box';
import Paper from '@mui/material/Paper';
import IconButton from '@mui/material/IconButton';
import ChatIcon from '@mui/icons-material/Chat';
import Typography from '@mui/material/Typography';
import { useLayout } from '../../contexts/LayoutContext';
import { ChatProvider, useChat } from '../../contexts/ChatContext';
import ChatRoomList from './ChatRoomList';
import ChatMessageView from './ChatMessageView';
const ChatPanelInner: React.FC = () => {
const { chatPanelOpen, setChatPanelOpen } = useLayout();
const { selectedRoomToken, connected } = useChat();
if (!chatPanelOpen) {
return (
<Paper
elevation={2}
sx={{
width: 60,
height: '100%',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
pt: 1,
flexShrink: 0,
transition: 'width 0.2s ease',
}}
>
<IconButton onClick={() => setChatPanelOpen(true)}>
<ChatIcon />
</IconButton>
</Paper>
);
}
return (
<Paper
elevation={2}
sx={{
width: 360,
height: '100%',
display: 'flex',
flexDirection: 'column',
flexShrink: 0,
transition: 'width 0.2s ease',
overflow: 'hidden',
}}
>
<Box
sx={{
px: 1.5,
py: 1,
borderBottom: 1,
borderColor: 'divider',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
}}
>
<Typography variant="subtitle1" fontWeight={600}>
Chat
</Typography>
<IconButton size="small" onClick={() => setChatPanelOpen(false)}>
<ChatIcon fontSize="small" />
</IconButton>
</Box>
{!connected ? (
<Box sx={{ p: 2 }}>
<Typography variant="body2" color="text.secondary">
Nextcloud nicht verbunden. Bitte verbinden Sie sich in den Einstellungen.
</Typography>
</Box>
) : selectedRoomToken ? (
<ChatMessageView />
) : (
<ChatRoomList />
)}
</Paper>
);
};
const ChatPanel: React.FC = () => {
return (
<ChatProvider>
<ChatPanelInner />
</ChatProvider>
);
};
export default ChatPanel;

48
frontend/src/components/chat/ChatRoomList.tsx Normal file
View File

@@ -0,0 +1,48 @@
import React from 'react';
import Box from '@mui/material/Box';
import List from '@mui/material/List';
import ListItemButton from '@mui/material/ListItemButton';
import Badge from '@mui/material/Badge';
import Typography from '@mui/material/Typography';
import { useChat } from '../../contexts/ChatContext';
const ChatRoomList: React.FC = () => {
const { rooms, selectedRoomToken, selectRoom } = useChat();
return (
<Box sx={{ overflow: 'auto', flex: 1 }}>
<List disablePadding>
{rooms.map((room) => (
<ListItemButton
key={room.token}
selected={room.token === selectedRoomToken}
onClick={() => selectRoom(room.token)}
sx={{ py: 1, px: 1.5 }}
>
<Box sx={{ flex: 1, minWidth: 0 }}>
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
<Typography variant="subtitle2" noWrap sx={{ flex: 1 }}>
{room.displayName}
</Typography>
{room.unreadMessages > 0 && (
<Badge
badgeContent={room.unreadMessages}
color="primary"
sx={{ ml: 1 }}
/>
)}
</Box>
{room.lastMessage && (
<Typography variant="caption" color="text.secondary" noWrap>
{room.lastMessage.author}: {room.lastMessage.text}
</Typography>
)}
</Box>
</ListItemButton>
))}
</List>
</Box>
);
};
export default ChatRoomList;

67
frontend/src/components/dashboard/AdminStatusWidget.tsx Normal file
View File

@@ -0,0 +1,67 @@
import { Card, CardContent, Typography, Box, Chip } from '@mui/material';
import { useQuery } from '@tanstack/react-query';
import { useNavigate } from 'react-router-dom';
import { MonitorHeartOutlined } from '@mui/icons-material';
import { adminApi } from '../../services/admin';
import { useCountUp } from '../../hooks/useCountUp';
import { useAuth } from '../../contexts/AuthContext';
function AdminStatusWidget() {
const { user } = useAuth();
const navigate = useNavigate();
const isAdmin = user?.groups?.includes('dashboard_admin') ?? false;
const { data } = useQuery({
queryKey: ['admin-status-summary'],
queryFn: () => adminApi.getStatusSummary(),
refetchInterval: 30_000,
enabled: isAdmin,
});
const up = useCountUp(data?.up ?? 0);
const total = useCountUp(data?.total ?? 0);
if (!isAdmin) return null;
const allUp = data && data.up === data.total;
const majorityDown = data && data.total > 0 && data.up < data.total / 2;
const color = allUp ? 'success' : majorityDown ? 'error' : 'warning';
return (
<Card
sx={{ cursor: 'pointer', '&:hover': { boxShadow: 4 } }}
onClick={() => navigate('/admin')}
>
<CardContent>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1 }}>
<MonitorHeartOutlined color={color} />
<Typography variant="h6" component="div">
Service Status
</Typography>
</Box>
<Box sx={{ display: 'flex', alignItems: 'baseline', gap: 0.5, mb: 1 }}>
<Typography variant="h3" component="span" sx={{ fontWeight: 700 }}>
{up}
</Typography>
<Typography variant="h5" component="span" color="text.secondary">
/ {total}
</Typography>
<Typography variant="body2" color="text.secondary" sx={{ ml: 0.5 }}>
Services online
</Typography>
</Box>
<Chip
label={allUp ? 'Alle aktiv' : majorityDown ? 'Kritisch' : 'Teilweise gestört'}
color={color}
size="small"
variant="outlined"
/>
</CardContent>
</Card>
);
}
export default AdminStatusWidget;

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

@@ -4,14 +4,17 @@ import Header from '../shared/Header';
import Sidebar from '../shared/Sidebar';
import { useAuth } from '../../contexts/AuthContext';
import Loading from '../shared/Loading';
import { LayoutProvider, useLayout, DRAWER_WIDTH, DRAWER_WIDTH_COLLAPSED } from '../../contexts/LayoutContext';
import ChatPanel from '../chat/ChatPanel';
interface DashboardLayoutProps {
children: ReactNode;
}
function DashboardLayout({ children }: DashboardLayoutProps) {
function DashboardLayoutInner({ children }: DashboardLayoutProps) {
const [mobileOpen, setMobileOpen] = useState(false);
const { isLoading } = useAuth();
const { sidebarCollapsed, chatPanelOpen } = useLayout();
const handleDrawerToggle = () => {
setMobileOpen(!mobileOpen);
@@ -21,6 +24,9 @@ function DashboardLayout({ children }: DashboardLayoutProps) {
return <Loading message="Lade Dashboard..." />;
}
const sidebarWidth = sidebarCollapsed ? DRAWER_WIDTH_COLLAPSED : DRAWER_WIDTH;
const chatWidth = chatPanelOpen ? 360 : 60;
return (
<Box sx={{ display: 'flex' }}>
<Header onMenuClick={handleDrawerToggle} />
@@ -31,16 +37,27 @@ function DashboardLayout({ children }: DashboardLayoutProps) {
sx={{
flexGrow: 1,
p: 3,
width: { sm: `calc(100% - 240px)` },
width: { sm: `calc(100% - ${sidebarWidth}px - ${chatWidth}px)` },
minHeight: '100vh',
backgroundColor: 'background.default',
transition: 'width 225ms cubic-bezier(0.4, 0, 0.6, 1)',
}}
>
<Toolbar />
{children}
</Box>
<ChatPanel />
</Box>
);
}
function DashboardLayout({ children }: DashboardLayoutProps) {
return (
<LayoutProvider>
<DashboardLayoutInner>{children}</DashboardLayoutInner>
</LayoutProvider>
);
}
export default DashboardLayout;

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

@@ -9,3 +9,4 @@ export { default as BookStackSearchWidget } from './BookStackSearchWidget';
export { default as VikunjaMyTasksWidget } from './VikunjaMyTasksWidget';
export { default as VikunjaQuickAddWidget } from './VikunjaQuickAddWidget';
export { default as VikunjaOverdueNotifier } from './VikunjaOverdueNotifier';
export { default as AdminStatusWidget } from './AdminStatusWidget';

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

@@ -10,6 +10,7 @@ import {
ListItemIcon,
Divider,
Box,
Tooltip,
} from '@mui/material';
import {
LocalFireDepartment,
@@ -17,10 +18,15 @@ import {
Settings,
Logout,
Menu as MenuIcon,
Launch,
Chat,
} from '@mui/icons-material';
import { useQuery } from '@tanstack/react-query';
import { useAuth } from '../../contexts/AuthContext';
import { useNavigate } from 'react-router-dom';
import NotificationBell from './NotificationBell';
import { configApi } from '../../services/config';
import { useLayout } from '../../contexts/LayoutContext';
interface HeaderProps {
onMenuClick: () => void;
@@ -29,7 +35,16 @@ interface HeaderProps {
function Header({ onMenuClick }: HeaderProps) {
const { user, logout } = useAuth();
const navigate = useNavigate();
const { toggleChatPanel } = useLayout();
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
const [toolsAnchorEl, setToolsAnchorEl] = useState<null | HTMLElement>(null);
const { data: externalLinks } = useQuery({
queryKey: ['external-links'],
queryFn: () => configApi.getExternalLinks(),
staleTime: 10 * 60 * 1000,
enabled: !!user,
});
const handleMenuOpen = (event: React.MouseEvent<HTMLElement>) => {
setAnchorEl(event.currentTarget);
@@ -39,6 +54,14 @@ function Header({ onMenuClick }: HeaderProps) {
setAnchorEl(null);
};
const handleToolsOpen = (event: React.MouseEvent<HTMLElement>) => {
setToolsAnchorEl(event.currentTarget);
};
const handleToolsClose = () => {
setToolsAnchorEl(null);
};
const handleProfile = () => {
handleMenuClose();
navigate('/profile');
@@ -54,6 +77,11 @@ function Header({ onMenuClick }: HeaderProps) {
logout();
};
const handleOpenExternal = (url: string) => {
handleToolsClose();
window.open(url, '_blank', 'noopener,noreferrer');
};
// Get initials for avatar
const getInitials = () => {
if (!user) return '?';
@@ -61,6 +89,16 @@ function Header({ onMenuClick }: HeaderProps) {
return initials || user.name?.[0] || '?';
};
const linkEntries = externalLinks
? Object.entries(externalLinks).filter(([, url]) => !!url)
: [];
const linkLabels: Record<string, string> = {
nextcloud: 'Nextcloud',
bookstack: 'BookStack',
vikunja: 'Vikunja',
};
return (
<AppBar
position="fixed"
@@ -71,7 +109,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' } }}
@@ -86,6 +124,63 @@ function Header({ onMenuClick }: HeaderProps) {
{user && (
<>
{linkEntries.length > 0 && (
<>
<Tooltip title="Externe Tools">
<IconButton
color="inherit"
onClick={handleToolsOpen}
size="small"
aria-label="Externe Tools"
aria-controls="tools-menu"
aria-haspopup="true"
>
<Launch />
</IconButton>
</Tooltip>
<Menu
id="tools-menu"
anchorEl={toolsAnchorEl}
open={Boolean(toolsAnchorEl)}
onClose={handleToolsClose}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'right',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'right',
}}
PaperProps={{
elevation: 3,
sx: { minWidth: 180, mt: 1 },
}}
>
{linkEntries.map(([key, url]) => (
<MenuItem key={key} onClick={() => handleOpenExternal(url)}>
<ListItemIcon>
<Launch fontSize="small" />
</ListItemIcon>
{linkLabels[key] || key}
</MenuItem>
))}
</Menu>
</>
)}
<Tooltip title="Chat">
<IconButton
color="inherit"
onClick={toggleChatPanel}
size="small"
aria-label="Chat öffnen"
sx={{ ml: 0.5 }}
>
<Chat />
</IconButton>
</Tooltip>
<NotificationBell />
<IconButton

66
frontend/src/components/shared/Sidebar.tsx
View File

@@ -1,5 +1,8 @@
import { useMemo } from 'react';
import {
Box,
Drawer,
IconButton,
List,
ListItem,
ListItemButton,
@@ -15,10 +18,16 @@ import {
People,
Air,
CalendarMonth,
MenuBook,
AdminPanelSettings,
ChevronLeft,
ChevronRight,
} from '@mui/icons-material';
import { useNavigate, useLocation } from 'react-router-dom';
import { useLayout, DRAWER_WIDTH, DRAWER_WIDTH_COLLAPSED } from '../../contexts/LayoutContext';
import { useAuth } from '../../contexts/AuthContext';
const DRAWER_WIDTH = 240;
export { DRAWER_WIDTH, DRAWER_WIDTH_COLLAPSED };
interface NavigationItem {
text: string;
@@ -26,7 +35,7 @@ interface NavigationItem {
path: string;
}
const navigationItems: NavigationItem[] = [
const baseNavigationItems: NavigationItem[] = [
{
text: 'Dashboard',
icon: <DashboardIcon />,
@@ -57,8 +66,19 @@ const navigationItems: NavigationItem[] = [
icon: <Air />,
path: '/atemschutz',
},
{
text: 'Wissen',
icon: <MenuBook />,
path: '/wissen',
},
];
const adminItem: NavigationItem = {
text: 'Admin',
icon: <AdminPanelSettings />,
path: '/admin',
};
interface SidebarProps {
mobileOpen: boolean;
onMobileClose: () => void;
@@ -67,6 +87,14 @@ interface SidebarProps {
function Sidebar({ mobileOpen, onMobileClose }: SidebarProps) {
const navigate = useNavigate();
const location = useLocation();
const { sidebarCollapsed, toggleSidebar } = useLayout();
const { user } = useAuth();
const isAdmin = user?.groups?.includes('dashboard_admin') ?? false;
const navigationItems = useMemo(() => {
return isAdmin ? [...baseNavigationItems, adminItem] : baseNavigationItems;
}, [isAdmin]);
const handleNavigation = (path: string) => {
navigate(path);
@@ -74,19 +102,25 @@ function Sidebar({ mobileOpen, onMobileClose }: SidebarProps) {
};
const drawerContent = (
<>
<Box sx={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
<Toolbar />
<List>
<List sx={{ flex: 1 }}>
{navigationItems.map((item) => {
const isActive = location.pathname === item.path;
return (
<ListItem key={item.text} disablePadding>
<Tooltip title={item.text} placement="right" arrow>
<Tooltip
title={item.text}
placement="right"
arrow
disableHoverListener={!sidebarCollapsed}
>
<ListItemButton
selected={isActive}
onClick={() => handleNavigation(item.path)}
aria-label={`Zu ${item.text} navigieren`}
sx={{
justifyContent: sidebarCollapsed ? 'center' : 'initial',
'&.Mui-selected': {
backgroundColor: 'primary.light',
color: 'primary.contrastText',
@@ -102,18 +136,30 @@ function Sidebar({ mobileOpen, onMobileClose }: SidebarProps) {
<ListItemIcon
sx={{
color: isActive ? 'inherit' : 'text.secondary',
minWidth: sidebarCollapsed ? 0 : undefined,
justifyContent: 'center',
}}
>
{item.icon}
</ListItemIcon>
<ListItemText primary={item.text} />
<ListItemText
primary={item.text}
sx={{
display: sidebarCollapsed ? 'none' : 'block',
}}
/>
</ListItemButton>
</Tooltip>
</ListItem>
);
})}
</List>
</>
<Box sx={{ display: 'flex', justifyContent: 'center', mb: 1 }}>
<IconButton onClick={toggleSidebar} aria-label="Sidebar umschalten">
{sidebarCollapsed ? <ChevronRight /> : <ChevronLeft />}
</IconButton>
</Box>
</Box>
);
return (
@@ -143,11 +189,13 @@ function Sidebar({ mobileOpen, onMobileClose }: SidebarProps) {
variant="permanent"
sx={{
display: { xs: 'none', sm: 'block' },
width: DRAWER_WIDTH,
width: sidebarCollapsed ? DRAWER_WIDTH_COLLAPSED : DRAWER_WIDTH,
flexShrink: 0,
'& .MuiDrawer-paper': {
width: DRAWER_WIDTH,
width: sidebarCollapsed ? DRAWER_WIDTH_COLLAPSED : DRAWER_WIDTH,
boxSizing: 'border-box',
transition: 'width 225ms cubic-bezier(0.4, 0, 0.6, 1)',
overflowX: 'hidden',
},
}}
open