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

feat: bug fixes, layout improvements, and new features

Browse Source 
Bug fixes:
- Remove non-existent `role` column from admin users SQL query (A1)
- Fix Nextcloud Talk chat API path v4 → v1 for messages/send/read (A2)
- Fix ServiceModeTab sync: useState → useEffect to reflect DB state (A3)
- Guard BookStack book_slug with book_id fallback to avoid broken URLs (A4)

Layout & UI:
- Chat panel: sticky full-height positioning, main content scrolls independently (B1)
- Vehicle booking datetime inputs: explicit text color for dark mode (B2)
- AnnouncementBanner moved into grid with full-width span (B3)

Features:
- Per-user widget visibility preferences stored in users.preferences JSONB (C1)
- Link collections: grouped external links in admin UI and dashboard widget (C2)
- Admin ping history: migration 026, checked_at timestamps, expandable history rows (C4)
- Service mode end date picker with scheduled deactivation display (C5)
- Vikunja startup config logging and configured:false warnings (C7)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Matthias Hochmeister
2026-03-12 14:57:54 +01:00
parent 81174c2498
commit a5cd78f01f
29 changed files with 593 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
frontend/src/components/admin/ServiceManagerTab.tsx
View File

@@ -1,4 +1,4 @@
import { useState } from 'react';
import React, { useState } from 'react';
import {
Box,
Table,
@@ -9,6 +9,7 @@ import {
TableRow,
Paper,
Button,
Collapse,
Dialog,
DialogTitle,
DialogContent,
@@ -24,10 +25,12 @@ import {
} from '@mui/material';
import DeleteIcon from '@mui/icons-material/Delete';
import AddIcon from '@mui/icons-material/Add';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import ExpandLessIcon from '@mui/icons-material/ExpandLess';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { adminApi } from '../../services/admin';
import { useNotification } from '../../contexts/NotificationContext';
import type { PingResult } from '../../types/admin.types';
import type { PingResult, PingHistoryEntry } from '../../types/admin.types';
function ServiceManagerTab() {
const queryClient = useQueryClient();
@@ -36,6 +39,9 @@ function ServiceManagerTab() {
const [newName, setNewName] = useState('');
const [newUrl, setNewUrl] = useState('');
const [refreshInterval, setRefreshInterval] = useState(15000);
const [expandedService, setExpandedService] = useState<string | null>(null);
const [historyData, setHistoryData] = useState<PingHistoryEntry[]>([]);
const [historyLoading, setHistoryLoading] = useState(false);
const { data: services, isLoading: servicesLoading } = useQuery({
queryKey: ['admin', 'services'],
@@ -79,6 +85,23 @@ function ServiceManagerTab() {
return pingResults?.find((p) => p.url === url);
};
const toggleHistory = async (serviceName: string) => {
if (expandedService === serviceName) {
setExpandedService(null);
return;
}
setExpandedService(serviceName);
setHistoryLoading(true);
try {
const data = await adminApi.getPingHistory(serviceName);
setHistoryData(data);
} catch {
setHistoryData([]);
} finally {
setHistoryLoading(false);
}
};
const handleCreate = () => {
if (newName.trim() && newUrl.trim()) {
createMutation.mutate({ name: newName.trim(), url: newUrl.trim() });
@@ -148,14 +171,20 @@ function ServiceManagerTab() {
<TableCell>URL</TableCell>
<TableCell>Typ</TableCell>
<TableCell>Latenz</TableCell>
<TableCell>Geprüft</TableCell>
<TableCell>Aktionen</TableCell>
</TableRow>
</TableHead>
<TableBody>
{allItems.map((item) => {
const ping = getPingForUrl(item.url);
const isExpanded = expandedService === item.name;
return (
<TableRow key={item.id}>
<React.Fragment key={item.id}>
<TableRow
sx={{ cursor: 'pointer', '& > *': { borderBottom: isExpanded ? 'unset' : undefined } }}
onClick={() => toggleHistory(item.name)}
>
<TableCell>
{pingLoading ? (
<CircularProgress size={16} />
@@ -177,23 +206,77 @@ function ServiceManagerTab() {
<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" />
{ping?.checked_at ? new Date(ping.checked_at).toLocaleString('de-DE') : '-'}
</TableCell>
<TableCell>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
{item.isCustom && (
<IconButton
size="small"
color="error"
onClick={(e) => { e.stopPropagation(); deleteMutation.mutate(item.id); }}
disabled={deleteMutation.isPending}
>
<DeleteIcon fontSize="small" />
</IconButton>
)}
<IconButton size="small">
{isExpanded ? <ExpandLessIcon fontSize="small" /> : <ExpandMoreIcon fontSize="small" />}
</IconButton>
)}
</Box>
</TableCell>
</TableRow>
<TableRow>
<TableCell sx={{ py: 0 }} colSpan={7}>
<Collapse in={isExpanded} timeout="auto" unmountOnExit>
<Box sx={{ py: 1, px: 2 }}>
<Typography variant="subtitle2" sx={{ mb: 1 }}>Ping-Verlauf (letzte 20)</Typography>
{historyLoading ? (
<CircularProgress size={20} />
) : historyData.length === 0 ? (
<Typography variant="body2" color="text.secondary">Keine Historie vorhanden</Typography>
) : (
<Table size="small">
<TableHead>
<TableRow>
<TableCell>Status</TableCell>
<TableCell>Antwortzeit</TableCell>
<TableCell>Zeitpunkt</TableCell>
</TableRow>
</TableHead>
<TableBody>
{historyData.map((h) => (
<TableRow key={h.id}>
<TableCell>
<Box
sx={{
width: 10,
height: 10,
borderRadius: '50%',
bgcolor: h.status === 'up' ? 'success.main' : 'error.main',
display: 'inline-block',
mr: 1,
}}
/>
{h.status}
</TableCell>
<TableCell>{h.response_time_ms != null ? `${h.response_time_ms}ms` : '-'}</TableCell>
<TableCell>{new Date(h.checked_at).toLocaleString('de-DE')}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
)}
</Box>
</Collapse>
</TableCell>
</TableRow>
</React.Fragment>
);
})}
{allItems.length === 0 && (
<TableRow>
<TableCell colSpan={6} align="center">Keine Services konfiguriert</TableCell>
<TableCell colSpan={7} align="center">Keine Services konfiguriert</TableCell>
</TableRow>
)}
</TableBody>

29
frontend/src/components/admin/ServiceModeTab.tsx
View File

@@ -1,4 +1,4 @@
import { useState } from 'react';
import { useState, useEffect } from 'react';
import {
Box, Card, CardContent, Typography, Switch, FormControlLabel,
TextField, Button, Alert, CircularProgress,
@@ -20,17 +20,19 @@ export default function ServiceModeTab() {
const currentValue = setting?.value ?? { active: false, message: '' };
const [active, setActive] = useState<boolean>(currentValue.active ?? false);
const [message, setMessage] = useState<string>(currentValue.message ?? '');
const [endsAt, setEndsAt] = useState<string>('');
// Sync state when data loads
useState(() => {
useEffect(() => {
if (setting?.value) {
setActive(setting.value.active ?? false);
setMessage(setting.value.message ?? '');
setEndsAt(setting.value.ends_at ?? '');
}
});
}, [setting]);
const mutation = useMutation({
mutationFn: (value: { active: boolean; message: string }) =>
mutationFn: (value: { active: boolean; message: string; ends_at?: string | null }) =>
settingsApi.update('service_mode', value),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['service-mode'] });
@@ -41,7 +43,7 @@ export default function ServiceModeTab() {
});
const handleSave = () => {
mutation.mutate({ active, message });
mutation.mutate({ active, message, ends_at: endsAt || null });
};
if (isLoading) {
@@ -63,6 +65,12 @@ export default function ServiceModeTab() {
</Alert>
)}
{active && endsAt && (
<Alert severity="info" sx={{ mb: 2 }}>
Wartungsmodus endet automatisch am {new Date(endsAt).toLocaleString('de-DE')}.
</Alert>
)}
<FormControlLabel
control={
<Switch
@@ -87,6 +95,17 @@ export default function ServiceModeTab() {
helperText="Diese Nachricht sehen Benutzer auf der Wartungsseite."
/>
<TextField
fullWidth
label="Automatisch deaktivieren am"
type="datetime-local"
value={endsAt}
onChange={(e) => setEndsAt(e.target.value)}
InputLabelProps={{ shrink: true }}
helperText="Optional: Wartungsmodus wird automatisch zu diesem Zeitpunkt deaktiviert."
sx={{ mb: 3, '& input': { color: 'text.primary' } }}
/>
<Button
variant="contained"
color={active ? 'error' : 'primary'}