Files
dashboard/frontend/src/pages/AdminDashboard.tsx
Matthias Hochmeister 8c66492b27 new features
2026-03-23 16:09:42 +01:00

107 lines
3.6 KiB
TypeScript

import { useState, useEffect } from 'react';
import { Box, Tabs, Tab, Typography } from '@mui/material';
import { Navigate, useNavigate, useSearchParams } from 'react-router-dom';
import DashboardLayout from '../components/dashboard/DashboardLayout';
import ServiceManagerTab from '../components/admin/ServiceManagerTab';
import SystemHealthTab from '../components/admin/SystemHealthTab';
import UserOverviewTab from '../components/admin/UserOverviewTab';
import NotificationBroadcastTab from '../components/admin/NotificationBroadcastTab';
import BannerManagementTab from '../components/admin/BannerManagementTab';
import ServiceModeTab from '../components/admin/ServiceModeTab';
import FdiskSyncTab from '../components/admin/FdiskSyncTab';
import PermissionMatrixTab from '../components/admin/PermissionMatrixTab';
import BestellungenTab from '../components/admin/BestellungenTab';
import DataManagementTab from '../components/admin/DataManagementTab';
import DebugTab from '../components/admin/DebugTab';
import { usePermissionContext } from '../contexts/PermissionContext';
interface TabPanelProps {
children: React.ReactNode;
index: number;
value: number;
}
function TabPanel({ children, value, index }: TabPanelProps) {
if (value !== index) return null;
return <Box sx={{ pt: 3 }}>{children}</Box>;
}
const ADMIN_TAB_COUNT = 11;
function AdminDashboard() {
const navigate = useNavigate();
const [searchParams] = useSearchParams();
const [tab, setTab] = useState(() => {
const t = Number(searchParams.get('tab'));
return t >= 0 && t < ADMIN_TAB_COUNT ? t : 0;
});
useEffect(() => {
const t = Number(searchParams.get('tab'));
if (t >= 0 && t < ADMIN_TAB_COUNT) setTab(t);
}, [searchParams]);
const { hasPermission } = usePermissionContext();
if (!hasPermission('admin:view')) {
return <Navigate to="/dashboard" replace />;
}
return (
<DashboardLayout>
<Typography variant="h4" sx={{ mb: 3 }}>Administration</Typography>
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
<Tabs value={tab} onChange={(_e, v) => { setTab(v); navigate(`/admin?tab=${v}`, { replace: true }); }} variant="scrollable" scrollButtons="auto">
<Tab label="Services" />
<Tab label="System" />
<Tab label="Benutzer" />
<Tab label="Broadcast" />
<Tab label="Banner" />
<Tab label="Wartung" />
<Tab label="FDISK Sync" />
<Tab label="Berechtigungen" />
<Tab label="Bestellungen" />
<Tab label="Datenverwaltung" />
<Tab label="Debug" />
</Tabs>
</Box>
<TabPanel value={tab} index={0}>
<ServiceManagerTab />
</TabPanel>
<TabPanel value={tab} index={1}>
<SystemHealthTab />
</TabPanel>
<TabPanel value={tab} index={2}>
<UserOverviewTab />
</TabPanel>
<TabPanel value={tab} index={3}>
<NotificationBroadcastTab />
</TabPanel>
<TabPanel value={tab} index={4}>
<BannerManagementTab />
</TabPanel>
<TabPanel value={tab} index={5}>
<ServiceModeTab />
</TabPanel>
<TabPanel value={tab} index={6}>
<FdiskSyncTab />
</TabPanel>
<TabPanel value={tab} index={7}>
<PermissionMatrixTab />
</TabPanel>
<TabPanel value={tab} index={8}>
<BestellungenTab />
</TabPanel>
<TabPanel value={tab} index={9}>
<DataManagementTab />
</TabPanel>
<TabPanel value={tab} index={10}>
<DebugTab />
</TabPanel>
</DashboardLayout>
);
}
export default AdminDashboard;