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

new features

Browse Source
This commit is contained in:
Matthias Hochmeister
2026-03-23 18:43:30 +01:00
parent 202a658b8d
commit 1b13e4f89e
31 changed files with 1022 additions and 517 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/src/components/admin/BestellungenTab.tsx
View File

@@ -19,11 +19,11 @@ import {
import { useQuery } from '@tanstack/react-query';
import { useNavigate } from 'react-router-dom';
import { bestellungApi } from '../../services/bestellung';
import { shopApi } from '../../services/shop';
import { ausruestungsanfrageApi } from '../../services/ausruestungsanfrage';
import { BESTELLUNG_STATUS_LABELS, BESTELLUNG_STATUS_COLORS } from '../../types/bestellung.types';
import { SHOP_STATUS_LABELS, SHOP_STATUS_COLORS } from '../../types/shop.types';
import { AUSRUESTUNG_STATUS_LABELS, AUSRUESTUNG_STATUS_COLORS } from '../../types/ausruestungsanfrage.types';
import type { BestellungStatus } from '../../types/bestellung.types';
import type { ShopAnfrageStatus } from '../../types/shop.types';
import type { AusruestungAnfrageStatus } from '../../types/ausruestungsanfrage.types';
function BestellungenTab() {
const navigate = useNavigate();
@@ -35,8 +35,8 @@ function BestellungenTab() {
});
const { data: requests, isLoading: requestsLoading } = useQuery({
queryKey: ['admin-shop-requests'],
queryFn: () => shopApi.getRequests({ status: 'offen' }),
queryKey: ['admin-ausruestungsanfrage-requests'],
queryFn: () => ausruestungsanfrageApi.getRequests({ status: 'offen' }),
});
const formatCurrency = (value?: number) =>
@@ -44,11 +44,11 @@ function BestellungenTab() {
return (
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
{/* Pending Shop Requests */}
{/* Pending Ausrüstungsanfragen */}
{(requests?.length ?? 0) > 0 && (
<Paper sx={{ p: 2 }}>
<Typography variant="h6" gutterBottom>
Offene Shop-Anfragen ({requests?.length})
Offene Ausrüstungsanfragen ({requests?.length})
</Typography>
{requestsLoading ? (
<CircularProgress size={24} />
@@ -69,14 +69,14 @@ function BestellungenTab() {
key={req.id}
hover
sx={{ cursor: 'pointer' }}
onClick={() => navigate('/shop?tab=2')}
onClick={() => navigate('/ausruestungsanfrage?tab=2')}
>
<TableCell>{req.id}</TableCell>
<TableCell>{req.anfrager_name || '–'}</TableCell>
<TableCell>
<Chip
label={SHOP_STATUS_LABELS[req.status as ShopAnfrageStatus]}
color={SHOP_STATUS_COLORS[req.status as ShopAnfrageStatus]}
label={AUSRUESTUNG_STATUS_LABELS[req.status as AusruestungAnfrageStatus]}
color={AUSRUESTUNG_STATUS_COLORS[req.status as AusruestungAnfrageStatus]}
size="small"
/>
</TableCell>

123
frontend/src/components/admin/DataManagementTab.tsx
View File

@@ -5,6 +5,7 @@ import {
CircularProgress, Divider,
} from '@mui/material';
import DeleteSweepIcon from '@mui/icons-material/DeleteSweep';
import RestartAltIcon from '@mui/icons-material/RestartAlt';
import { api } from '../../services/api';
import { useNotification } from '../../contexts/NotificationContext';
@@ -25,6 +26,18 @@ const SECTIONS: CleanupSection[] = [
{ key: 'equipment-history', label: 'Ausruestungs-Wartungslog', description: 'Alte Ausruestungs-Wartungseintraege entfernen.', defaultDays: 730 },
];
interface ResetSection {
key: string;
label: string;
description: string;
}
const RESET_SECTIONS: ResetSection[] = [
{ key: 'reset-bestellungen', label: 'Bestellungen zuruecksetzen', description: 'Alle Bestellungen, Positionen, Dateien, Erinnerungen und Historie loeschen und Nummern zuruecksetzen.' },
{ key: 'reset-ausruestung-anfragen', label: 'Ausruestungsanfragen zuruecksetzen', description: 'Alle Ausruestungsanfragen und zugehoerige Positionen loeschen und Nummern zuruecksetzen.' },
{ key: 'reset-issues', label: 'Issues zuruecksetzen', description: 'Alle Issues und Kommentare loeschen und Nummern zuruecksetzen.' },
];
interface SectionState {
days: number;
previewCount: number | null;
@@ -41,6 +54,13 @@ export default function DataManagementTab() {
const [confirmDialog, setConfirmDialog] = useState<{ key: string; label: string; count: number } | null>(null);
const [deleting, setDeleting] = useState(false);
// Reset sections state
const [resetStates, setResetStates] = useState<Record<string, { previewCount: number | null; loading: boolean }>>(() =>
Object.fromEntries(RESET_SECTIONS.map(s => [s.key, { previewCount: null, loading: false }]))
);
const [resetConfirmDialog, setResetConfirmDialog] = useState<{ key: string; label: string; count: number } | null>(null);
const [resetDeleting, setResetDeleting] = useState(false);
const updateState = useCallback((key: string, partial: Partial<SectionState>) => {
setStates(prev => ({ ...prev, [key]: { ...prev[key], ...partial } }));
}, []);
@@ -76,6 +96,34 @@ export default function DataManagementTab() {
}
}, [confirmDialog, states, updateState, showSuccess, showError]);
const handleResetPreview = useCallback(async (key: string) => {
setResetStates(prev => ({ ...prev, [key]: { previewCount: null, loading: true } }));
try {
const res = await api.delete(`/api/admin/cleanup/${key}`);
setResetStates(prev => ({ ...prev, [key]: { previewCount: res.data.data.count, loading: false } }));
} catch {
showError('Vorschau konnte nicht geladen werden');
setResetStates(prev => ({ ...prev, [key]: { ...prev[key], loading: false } }));
}
}, [showError]);
const handleResetDelete = useCallback(async () => {
if (!resetConfirmDialog) return;
const { key } = resetConfirmDialog;
setResetDeleting(true);
try {
const res = await api.delete(`/api/admin/cleanup/${key}?confirm=true`);
const deleted = res.data.data.count;
showSuccess(`${deleted} Eintraege geloescht und Nummern zurueckgesetzt`);
setResetStates(prev => ({ ...prev, [key]: { previewCount: null, loading: false } }));
} catch {
showError('Zuruecksetzen fehlgeschlagen');
} finally {
setResetDeleting(false);
setResetConfirmDialog(null);
}
}, [resetConfirmDialog, showSuccess, showError]);
return (
<Box sx={{ maxWidth: 800 }}>
<Typography variant="h6" sx={{ mb: 1 }}>Datenverwaltung</Typography>
@@ -165,6 +213,81 @@ export default function DataManagementTab() {
</Button>
</DialogActions>
</Dialog>
{/* ---- Reset / Truncate sections ---- */}
<Divider sx={{ my: 4 }} />
<Typography variant="h6" sx={{ mb: 1 }}>Daten zuruecksetzen</Typography>
<Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
Alle Eintraege loeschen und Nummern (IDs) auf 1 zuruecksetzen. Abhaengige Daten werden ebenfalls geloescht.
</Typography>
{RESET_SECTIONS.map((section) => {
const rs = resetStates[section.key];
return (
<Paper key={section.key} sx={{ p: 3, mb: 2 }}>
<Typography variant="subtitle1" fontWeight={600}>{section.label}</Typography>
<Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>{section.description}</Typography>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2, flexWrap: 'wrap' }}>
<Button
variant="outlined"
size="small"
onClick={() => handleResetPreview(section.key)}
disabled={rs?.loading}
startIcon={rs?.loading ? <CircularProgress size={16} /> : undefined}
>
Vorschau
</Button>
{rs?.previewCount !== null && rs?.previewCount !== undefined && (
<>
<Alert severity={rs.previewCount > 0 ? 'warning' : 'info'} sx={{ py: 0 }}>
{rs.previewCount} {rs.previewCount === 1 ? 'Eintrag' : 'Eintraege'} vorhanden
</Alert>
{rs.previewCount > 0 && (
<Button
variant="contained"
color="error"
size="small"
startIcon={<RestartAltIcon />}
onClick={() => setResetConfirmDialog({ key: section.key, label: section.label, count: rs.previewCount! })}
>
Zuruecksetzen
</Button>
)}
</>
)}
</Box>
</Paper>
);
})}
<Dialog open={!!resetConfirmDialog} onClose={() => !resetDeleting && setResetConfirmDialog(null)}>
<DialogTitle>Daten zuruecksetzen?</DialogTitle>
<DialogContent>
<DialogContentText>
{resetConfirmDialog && (
<>
<strong>{resetConfirmDialog.count}</strong> {resetConfirmDialog.count === 1 ? 'Eintrag' : 'Eintraege'} aus <strong>{resetConfirmDialog.label}</strong> werden
unwiderruflich geloescht und die Nummerierung auf 1 zurueckgesetzt. Dieser Vorgang kann nicht rueckgaengig gemacht werden.
</>
)}
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={() => setResetConfirmDialog(null)} disabled={resetDeleting}>Abbrechen</Button>
<Button
onClick={handleResetDelete}
color="error"
variant="contained"
disabled={resetDeleting}
startIcon={resetDeleting ? <CircularProgress size={16} /> : <RestartAltIcon />}
>
{resetDeleting ? 'Wird zurueckgesetzt...' : 'Endgueltig zuruecksetzen'}
</Button>
</DialogActions>
</Dialog>
</Box>
);
}

167
frontend/src/components/admin/DebugTab.tsx
View File

@@ -1,18 +1,25 @@
import { useState } from 'react';
import { useState, useRef, useEffect, useCallback } from 'react';
import {
Box, Paper, Typography, Button, Autocomplete, TextField,
Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions,
CircularProgress,
Accordion, AccordionDetails, AccordionSummary,
Box, Button, Card, CardContent, Checkbox, Chip, Paper, Typography,
Autocomplete, TextField, Dialog, DialogTitle, DialogContent,
DialogContentText, DialogActions, CircularProgress, FormControlLabel,
IconButton, Tooltip,
} from '@mui/material';
import DeleteIcon from '@mui/icons-material/Delete';
import { useQuery } from '@tanstack/react-query';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import SyncIcon from '@mui/icons-material/Sync';
import ContentCopyIcon from '@mui/icons-material/ContentCopy';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { adminApi } from '../../services/admin';
import { useNotification } from '../../contexts/NotificationContext';
import type { UserOverview } from '../../types/admin.types';
export default function DebugTab() {
const queryClient = useQueryClient();
const { showSuccess, showError } = useNotification();
// ── Profile deletion ──
const { data: users = [], isLoading: usersLoading } = useQuery<UserOverview[]>({
queryKey: ['admin', 'users'],
queryFn: adminApi.getUsers,
@@ -38,14 +45,55 @@ export default function DebugTab() {
}
};
// ── FDISK Sync ──
const logBoxRef = useRef<HTMLDivElement>(null);
const [force, setForce] = useState(false);
const { data: syncData, isLoading: syncLoading, isError: syncError } = useQuery({
queryKey: ['admin', 'fdisk-sync', 'logs'],
queryFn: adminApi.fdiskSyncLogs,
refetchInterval: 5000,
});
useEffect(() => {
if (logBoxRef.current) {
logBoxRef.current.scrollTop = logBoxRef.current.scrollHeight;
}
}, [syncData?.logs.length]);
const triggerMutation = useMutation({
mutationFn: (forceSync: boolean) => adminApi.fdiskSyncTrigger(forceSync),
onSuccess: () => {
showSuccess('Sync gestartet');
queryClient.invalidateQueries({ queryKey: ['admin', 'fdisk-sync', 'logs'] });
},
onError: (err: unknown) => {
const msg = (err as { response?: { status?: number } })?.response?.status === 409
? 'Sync läuft bereits'
: 'Sync konnte nicht gestartet werden';
showError(msg);
},
});
const running = syncData?.running ?? false;
const copyLogs = useCallback(() => {
const text = (syncData?.logs ?? []).map((e) => e.line).join('\n');
navigator.clipboard.writeText(text).then(
() => showSuccess('Logs kopiert'),
() => showError('Kopieren fehlgeschlagen'),
);
}, [syncData?.logs, showSuccess, showError]);
return (
<Box sx={{ maxWidth: 600 }}>
<Box>
<Typography variant="h6" sx={{ mb: 1 }}>Debug-Werkzeuge</Typography>
<Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
Werkzeuge fuer Fehlersuche und Datenbereinigung.
</Typography>
<Paper sx={{ p: 3 }}>
{/* Profile deletion */}
<Paper sx={{ p: 3, mb: 3, maxWidth: 600 }}>
<Typography variant="subtitle1" fontWeight={600} sx={{ mb: 1 }}>
Profildaten loeschen
</Typography>
@@ -80,6 +128,111 @@ export default function DebugTab() {
</Box>
</Paper>
{/* FDISK Sync */}
<Accordion defaultExpanded={false}>
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
<Typography variant="subtitle1" fontWeight={600}>FDISK Synchronisation</Typography>
</AccordionSummary>
<AccordionDetails>
<Card variant="outlined">
<CardContent sx={{ display: 'flex', alignItems: 'center', gap: 2, flexWrap: 'wrap' }}>
<Box sx={{ flex: 1 }}>
<Typography variant="body2" color="text.secondary">
Synchronisiert Mitgliederdaten und Ausbildungen aus FDISK in die Datenbank.
Läuft automatisch täglich um Mitternacht.
</Typography>
</Box>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
<Chip
label={running ? 'Läuft…' : 'Bereit'}
color={running ? 'warning' : 'success'}
size="small"
icon={running ? <CircularProgress size={12} color="inherit" /> : undefined}
/>
<Button
variant="contained"
startIcon={<SyncIcon />}
onClick={() => triggerMutation.mutate(force)}
disabled={running || triggerMutation.isPending}
>
Jetzt synchronisieren
</Button>
</Box>
<FormControlLabel
control={<Checkbox checked={force} onChange={(e) => setForce(e.target.checked)} />}
label="Alle Mitglieder erzwungen synchronisieren"
/>
</CardContent>
</Card>
<Card variant="outlined" sx={{ mt: 2 }}>
<CardContent>
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 1 }}>
<Typography variant="subtitle2">Protokoll (letzte 500 Zeilen)</Typography>
<Tooltip title="Logs kopieren">
<span>
<IconButton
size="small"
onClick={copyLogs}
disabled={!syncData?.logs?.length}
>
<ContentCopyIcon fontSize="small" />
</IconButton>
</span>
</Tooltip>
</Box>
{syncLoading && (
<Box sx={{ display: 'flex', justifyContent: 'center', py: 4 }}>
<CircularProgress size={28} />
</Box>
)}
{syncError && (
<Typography color="error" variant="body2">
Sync-Dienst nicht erreichbar. Läuft der fdisk-sync Container?
</Typography>
)}
{!syncLoading && !syncError && (
<Box
ref={logBoxRef}
sx={{
fontFamily: 'monospace',
fontSize: '0.75rem',
bgcolor: 'grey.900',
color: 'grey.100',
borderRadius: 1,
p: 1.5,
maxHeight: 500,
overflowY: 'auto',
whiteSpace: 'pre-wrap',
wordBreak: 'break-all',
}}
>
{(syncData?.logs ?? []).length === 0 ? (
<Typography variant="caption" color="grey.500">Noch keine Logs vorhanden.</Typography>
) : (
(syncData?.logs ?? []).map((entry, i) => (
<Box
key={i}
component="span"
sx={{
display: 'block',
color: entry.line.includes('ERROR') || entry.line.includes('WARN')
? (entry.line.includes('ERROR') ? 'error.light' : 'warning.light')
: 'inherit',
}}
>
{entry.line}
</Box>
))
)}
</Box>
)}
</CardContent>
</Card>
</AccordionDetails>
</Accordion>
{/* Delete confirmation dialog */}
<Dialog open={confirmOpen} onClose={() => !deleting && setConfirmOpen(false)}>
<DialogTitle>Profildaten loeschen?</DialogTitle>
<DialogContent>

2
frontend/src/components/admin/PermissionMatrixTab.tsx
View File

@@ -99,7 +99,7 @@ const PERMISSION_SUB_GROUPS: Record<string, Record<string, string[]>> = {
'Erinnerungen': ['manage_reminders'],
'Widget': ['widget'],
},
shop: {
ausruestungsanfrage: {
'Katalog': ['view', 'manage_catalog'],
'Anfragen': ['create_request', 'approve_requests', 'link_orders', 'view_overview', 'order_for_user'],
'Widget': ['widget'],

34
frontend/src/components/dashboard/ShopWidget.tsx → frontend/src/components/dashboard/AusruestungsanfrageWidget.tsx
View File

@@ -1,17 +1,17 @@
import { Card, CardContent, Typography, Box, Chip, List, ListItem, ListItemText, Divider, Skeleton } from '@mui/material';
import { Store } from '@mui/icons-material';
import { Build } from '@mui/icons-material';
import { useQuery } from '@tanstack/react-query';
import { useNavigate } from 'react-router-dom';
import { shopApi } from '../../services/shop';
import { SHOP_STATUS_LABELS, SHOP_STATUS_COLORS } from '../../types/shop.types';
import type { ShopAnfrageStatus } from '../../types/shop.types';
import { ausruestungsanfrageApi } from '../../services/ausruestungsanfrage';
import { AUSRUESTUNG_STATUS_LABELS, AUSRUESTUNG_STATUS_COLORS } from '../../types/ausruestungsanfrage.types';
import type { AusruestungAnfrageStatus } from '../../types/ausruestungsanfrage.types';
function ShopWidget() {
function AusruestungsanfrageWidget() {
const navigate = useNavigate();
const { data: requests, isLoading, isError } = useQuery({
queryKey: ['shop-widget-requests'],
queryFn: () => shopApi.getRequests({ status: 'offen' }),
queryKey: ['ausruestungsanfrage-widget-requests'],
queryFn: () => ausruestungsanfrageApi.getRequests({ status: 'offen' }),
refetchInterval: 5 * 60 * 1000,
retry: 1,
});
@@ -20,7 +20,7 @@ function ShopWidget() {
return (
<Card>
<CardContent>
<Typography variant="h6" gutterBottom>Shop-Anfragen</Typography>
<Typography variant="h6" gutterBottom>Ausrüstungsanfragen</Typography>
<Skeleton variant="rectangular" height={60} />
</CardContent>
</Card>
@@ -31,7 +31,7 @@ function ShopWidget() {
return (
<Card>
<CardContent>
<Typography variant="h6" gutterBottom>Shop-Anfragen</Typography>
<Typography variant="h6" gutterBottom>Ausrüstungsanfragen</Typography>
<Typography variant="body2" color="text.secondary">
Anfragen konnten nicht geladen werden.
</Typography>
@@ -46,9 +46,9 @@ function ShopWidget() {
return (
<Card>
<CardContent>
<Typography variant="h6" gutterBottom>Shop-Anfragen</Typography>
<Typography variant="h6" gutterBottom>Ausrüstungsanfragen</Typography>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, color: 'text.secondary' }}>
<Store fontSize="small" />
<Build fontSize="small" />
<Typography variant="body2">Keine offenen Anfragen</Typography>
</Box>
</CardContent>
@@ -60,7 +60,7 @@ function ShopWidget() {
<Card>
<CardContent>
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 1 }}>
<Typography variant="h6">Shop-Anfragen</Typography>
<Typography variant="h6">Ausrüstungsanfragen</Typography>
<Chip label={`${pendingCount} offen`} size="small" color="warning" />
</Box>
<List dense disablePadding>
@@ -70,7 +70,7 @@ function ShopWidget() {
<ListItem
disablePadding
sx={{ cursor: 'pointer', py: 0.5, '&:hover': { bgcolor: 'action.hover' } }}
onClick={() => navigate('/shop?tab=2')}
onClick={() => navigate('/ausruestungsanfrage?tab=2')}
>
<ListItemText
primary={`Anfrage #${req.id}`}
@@ -79,8 +79,8 @@ function ShopWidget() {
secondaryTypographyProps={{ variant: 'caption' }}
/>
<Chip
label={SHOP_STATUS_LABELS[req.status as ShopAnfrageStatus]}
color={SHOP_STATUS_COLORS[req.status as ShopAnfrageStatus]}
label={AUSRUESTUNG_STATUS_LABELS[req.status as AusruestungAnfrageStatus]}
color={AUSRUESTUNG_STATUS_COLORS[req.status as AusruestungAnfrageStatus]}
size="small"
sx={{ ml: 1 }}
/>
@@ -93,7 +93,7 @@ function ShopWidget() {
variant="caption"
color="primary"
sx={{ cursor: 'pointer', mt: 1, display: 'block' }}
onClick={() => navigate('/shop?tab=2')}
onClick={() => navigate('/ausruestungsanfrage?tab=2')}
>
Alle {pendingCount} Anfragen anzeigen
</Typography>
@@ -103,4 +103,4 @@ function ShopWidget() {
);
}
export default ShopWidget;
export default AusruestungsanfrageWidget;

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

@@ -19,4 +19,4 @@ export { default as BannerWidget } from './BannerWidget';
export { default as LinksWidget } from './LinksWidget';
export { default as WidgetGroup } from './WidgetGroup';
export { default as BestellungenWidget } from './BestellungenWidget';
export { default as ShopWidget } from './ShopWidget';
export { default as AusruestungsanfrageWidget } from './AusruestungsanfrageWidget';

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

@@ -4,14 +4,13 @@ import {
Toolbar,
Typography,
IconButton,
Button,
Menu,
MenuItem,
Avatar,
ListItemIcon,
Divider,
Box,
Tooltip,
Menu,
MenuItem,
} from '@mui/material';
import {
LocalFireDepartment,
@@ -19,14 +18,11 @@ 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 {
@@ -38,14 +34,6 @@ function Header({ onMenuClick }: HeaderProps) {
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);
@@ -55,14 +43,6 @@ function Header({ onMenuClick }: HeaderProps) {
setAnchorEl(null);
};
const handleToolsOpen = (event: React.MouseEvent<HTMLElement>) => {
setToolsAnchorEl(event.currentTarget);
};
const handleToolsClose = () => {
setToolsAnchorEl(null);
};
const handleProfile = () => {
handleMenuClose();
navigate('/profile');
@@ -78,11 +58,6 @@ 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 '?';
@@ -90,19 +65,6 @@ function Header({ onMenuClick }: HeaderProps) {
return initials || user.name?.[0] || '?';
};
const linkEntries = externalLinks
? Object.entries(externalLinks).filter(([key, url]) => key !== 'customLinks' && !!url)
: [];
const customLinks: Array<{ name: string; url: string }> =
externalLinks?.customLinks ?? [];
const linkLabels: Record<string, string> = {
nextcloud: 'Nextcloud Dateien',
bookstack: 'Wissensdatenbank',
vikunja: 'Aufgabenverwaltung',
};
return (
<AppBar
position="fixed"
@@ -128,72 +90,6 @@ function Header({ onMenuClick }: HeaderProps) {
{user && (
<>
{(linkEntries.length > 0 || customLinks.length > 0) && (
<>
<Button
variant="text"
color="inherit"
onClick={handleToolsOpen}
size="small"
startIcon={<Launch />}
aria-label="FF Rems Tools"
aria-controls="tools-menu"
aria-haspopup="true"
sx={{ display: { xs: 'none', sm: 'inline-flex' } }}
>
FF Rems Tools
</Button>
<Tooltip title="FF Rems Tools">
<IconButton
color="inherit"
onClick={handleToolsOpen}
size="small"
aria-label="FF Rems Tools"
sx={{ display: { xs: 'inline-flex', sm: 'none' } }}
>
<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>
))}
{customLinks.length > 0 && linkEntries.length > 0 && <Divider />}
{customLinks.map((link, index) => (
<MenuItem key={`custom-${index}`} onClick={() => handleOpenExternal(link.url)}>
<ListItemIcon>
<Launch fontSize="small" />
</ListItemIcon>
{link.name}
</MenuItem>
))}
</Menu>
</>
)}
<Tooltip title="Chat">
<IconButton
color="inherit"

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

@@ -26,7 +26,6 @@ import {
ExpandMore,
ExpandLess,
LocalShipping,
Store,
BugReport,
} from '@mui/icons-material';
import { useNavigate, useLocation } from 'react-router-dom';
@@ -62,11 +61,10 @@ const adminSubItems: SubItem[] = [
{ text: 'Broadcast', path: '/admin?tab=3' },
{ text: 'Banner', path: '/admin?tab=4' },
{ text: 'Wartung', path: '/admin?tab=5' },
{ text: 'FDISK Sync', path: '/admin?tab=6' },
{ text: 'Berechtigungen', path: '/admin?tab=7' },
{ text: 'Bestellungen', path: '/admin?tab=8' },
{ text: 'Datenverwaltung', path: '/admin?tab=9' },
{ text: 'Debug', path: '/admin?tab=10' },
{ text: 'Berechtigungen', path: '/admin?tab=6' },
{ text: 'Bestellungen', path: '/admin?tab=7' },
{ text: 'Datenverwaltung', path: '/admin?tab=8' },
{ text: 'Debug', path: '/admin?tab=9' },
];
const baseNavigationItems: NavigationItem[] = [
@@ -86,7 +84,7 @@ const baseNavigationItems: NavigationItem[] = [
text: 'Fahrzeuge',
icon: <DirectionsCar />,
path: '/fahrzeuge',
permission: 'fahrzeuge:access',
permission: 'fahrzeuge:view',
},
{
text: 'Ausrüstung',
@@ -123,18 +121,18 @@ const baseNavigationItems: NavigationItem[] = [
permission: 'bestellungen:view',
},
{
text: 'Shop',
icon: <Store />,
path: '/shop',
text: 'Ausrüstungsanfragen',
icon: <Build />,
path: '/ausruestungsanfrage',
// subItems computed dynamically in navigationItems useMemo
permission: 'shop:view',
permission: 'ausruestungsanfrage:view',
},
{
text: 'Issues',
icon: <BugReport />,
path: '/issues',
// subItems computed dynamically in navigationItems useMemo
permission: 'issues:create',
permission: 'issues:view_own',
},
];
@@ -187,24 +185,27 @@ function Sidebar({ mobileOpen, onMobileClose }: SidebarProps) {
permission: 'fahrzeuge:view',
};
// Build Shop sub-items dynamically based on permissions (tab order must match Shop.tsx)
const shopSubItems: SubItem[] = [];
let shopTabIdx = 0;
if (hasPermission('shop:create_request')) { shopSubItems.push({ text: 'Meine Anfragen', path: `/shop?tab=${shopTabIdx}` }); shopTabIdx++; }
if (hasPermission('shop:approve_requests')) { shopSubItems.push({ text: 'Alle Anfragen', path: `/shop?tab=${shopTabIdx}` }); shopTabIdx++; }
if (hasPermission('shop:view_overview')) { shopSubItems.push({ text: 'Übersicht', path: `/shop?tab=${shopTabIdx}` }); shopTabIdx++; }
shopSubItems.push({ text: 'Katalog', path: `/shop?tab=${shopTabIdx}` });
// Build Ausrüstungsanfrage sub-items dynamically based on permissions (tab order must match Ausruestungsanfrage.tsx)
const ausruestungSubItems: SubItem[] = [];
let ausruestungTabIdx = 0;
if (hasPermission('ausruestungsanfrage:create_request')) { ausruestungSubItems.push({ text: 'Meine Anfragen', path: `/ausruestungsanfrage?tab=${ausruestungTabIdx}` }); ausruestungTabIdx++; }
if (hasPermission('ausruestungsanfrage:approve_requests')) { ausruestungSubItems.push({ text: 'Alle Anfragen', path: `/ausruestungsanfrage?tab=${ausruestungTabIdx}` }); ausruestungTabIdx++; }
if (hasPermission('ausruestungsanfrage:view_overview')) { ausruestungSubItems.push({ text: 'Übersicht', path: `/ausruestungsanfrage?tab=${ausruestungTabIdx}` }); ausruestungTabIdx++; }
ausruestungSubItems.push({ text: 'Katalog', path: `/ausruestungsanfrage?tab=${ausruestungTabIdx}` });
// Build Issues sub-items dynamically (tab order must match Issues.tsx)
const issuesSubItems: SubItem[] = [{ text: 'Meine Issues', path: '/issues?tab=0' }];
if (hasPermission('issues:view_all')) {
issuesSubItems.push({ text: 'Alle Issues', path: '/issues?tab=1' });
}
if (hasPermission('issues:manage')) {
issuesSubItems.push({ text: 'Erledigte Issues', path: `/issues?tab=${issuesSubItems.length}` });
}
const items = baseNavigationItems
.map((item) => {
if (item.path === '/fahrzeuge') return fahrzeugeItem;
if (item.path === '/shop') return { ...item, subItems: shopSubItems };
if (item.path === '/ausruestungsanfrage') return { ...item, subItems: ausruestungSubItems };
if (item.path === '/issues') return { ...item, subItems: issuesSubItems };
return item;
})