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

13
frontend/src/pages/AdminDashboard.tsx
View File

@@ -8,7 +8,6 @@ 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';
@@ -26,7 +25,7 @@ function TabPanel({ children, value, index }: TabPanelProps) {
return <Box sx={{ pt: 3 }}>{children}</Box>;
}
const ADMIN_TAB_COUNT = 11;
const ADMIN_TAB_COUNT = 10;
function AdminDashboard() {
const navigate = useNavigate();
@@ -58,7 +57,6 @@ function AdminDashboard() {
<Tab label="Broadcast" />
<Tab label="Banner" />
<Tab label="Wartung" />
<Tab label="FDISK Sync" />
<Tab label="Berechtigungen" />
<Tab label="Bestellungen" />
<Tab label="Datenverwaltung" />
@@ -85,18 +83,15 @@ function AdminDashboard() {
<ServiceModeTab />
</TabPanel>
<TabPanel value={tab} index={6}>
<FdiskSyncTab />
</TabPanel>
<TabPanel value={tab} index={7}>
<PermissionMatrixTab />
</TabPanel>
<TabPanel value={tab} index={8}>
<TabPanel value={tab} index={7}>
<BestellungenTab />
</TabPanel>
<TabPanel value={tab} index={9}>
<TabPanel value={tab} index={8}>
<DataManagementTab />
</TabPanel>
<TabPanel value={tab} index={10}>
<TabPanel value={tab} index={9}>
<DebugTab />
</TabPanel>
</DashboardLayout>

306
frontend/src/pages/Shop.tsx → frontend/src/pages/Ausruestungsanfrage.tsx
View File

@@ -17,15 +17,15 @@ import DashboardLayout from '../components/dashboard/DashboardLayout';
import ChatAwareFab from '../components/shared/ChatAwareFab';
import { useNotification } from '../contexts/NotificationContext';
import { usePermissionContext } from '../contexts/PermissionContext';
import { shopApi } from '../services/shop';
import { ausruestungsanfrageApi } from '../services/ausruestungsanfrage';
import { bestellungApi } from '../services/bestellung';
import { SHOP_STATUS_LABELS, SHOP_STATUS_COLORS } from '../types/shop.types';
import type { ShopArtikel, ShopArtikelFormData, ShopAnfrageFormItem, ShopAnfrageDetailResponse, ShopAnfrageStatus, ShopAnfrage, ShopOverview } from '../types/shop.types';
import { AUSRUESTUNG_STATUS_LABELS, AUSRUESTUNG_STATUS_COLORS } from '../types/ausruestungsanfrage.types';
import type { AusruestungArtikel, AusruestungArtikelFormData, AusruestungAnfrageFormItem, AusruestungAnfrageDetailResponse, AusruestungAnfrageStatus, AusruestungAnfrage, AusruestungOverview } from '../types/ausruestungsanfrage.types';
import type { Bestellung } from '../types/bestellung.types';
// ─── Helpers ─────────────────────────────────────────────────────────────────
function formatOrderId(r: ShopAnfrage): string {
function formatOrderId(r: AusruestungAnfrage): string {
if (r.bestell_jahr && r.bestell_nummer) {
return `${r.bestell_jahr}/${String(r.bestell_nummer).padStart(3, '0')}`;
}
@@ -46,8 +46,8 @@ function KatalogTab() {
const { hasPermission } = usePermissionContext();
const queryClient = useQueryClient();
const canManage = hasPermission('shop:manage_catalog');
const canCreate = hasPermission('shop:create_request');
const canManage = hasPermission('ausruestungsanfrage:manage_catalog');
const canCreate = hasPermission('ausruestungsanfrage:create_request');
const [filterKategorie, setFilterKategorie] = useState<string>('');
const [draft, setDraft] = useState<DraftItem[]>([]);
@@ -55,38 +55,38 @@ function KatalogTab() {
const [submitOpen, setSubmitOpen] = useState(false);
const [submitNotizen, setSubmitNotizen] = useState('');
const [artikelDialogOpen, setArtikelDialogOpen] = useState(false);
const [editArtikel, setEditArtikel] = useState<ShopArtikel | null>(null);
const [artikelForm, setArtikelForm] = useState<ShopArtikelFormData>({ bezeichnung: '' });
const [editArtikel, setEditArtikel] = useState<AusruestungArtikel | null>(null);
const [artikelForm, setArtikelForm] = useState<AusruestungArtikelFormData>({ bezeichnung: '' });
const { data: items = [], isLoading } = useQuery({
queryKey: ['shop', 'items', filterKategorie],
queryFn: () => shopApi.getItems(filterKategorie ? { kategorie: filterKategorie } : undefined),
queryKey: ['ausruestungsanfrage', 'items', filterKategorie],
queryFn: () => ausruestungsanfrageApi.getItems(filterKategorie ? { kategorie: filterKategorie } : undefined),
});
const { data: categories = [] } = useQuery({
queryKey: ['shop', 'categories'],
queryFn: () => shopApi.getCategories(),
queryKey: ['ausruestungsanfrage', 'categories'],
queryFn: () => ausruestungsanfrageApi.getCategories(),
});
const createItemMut = useMutation({
mutationFn: (data: ShopArtikelFormData) => shopApi.createItem(data),
onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['shop'] }); showSuccess('Artikel erstellt'); setArtikelDialogOpen(false); },
mutationFn: (data: AusruestungArtikelFormData) => ausruestungsanfrageApi.createItem(data),
onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['ausruestungsanfrage'] }); showSuccess('Artikel erstellt'); setArtikelDialogOpen(false); },
onError: () => showError('Fehler beim Erstellen'),
});
const updateItemMut = useMutation({
mutationFn: ({ id, data }: { id: number; data: Partial<ShopArtikelFormData> }) => shopApi.updateItem(id, data),
onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['shop'] }); showSuccess('Artikel aktualisiert'); setArtikelDialogOpen(false); },
mutationFn: ({ id, data }: { id: number; data: Partial<AusruestungArtikelFormData> }) => ausruestungsanfrageApi.updateItem(id, data),
onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['ausruestungsanfrage'] }); showSuccess('Artikel aktualisiert'); setArtikelDialogOpen(false); },
onError: () => showError('Fehler beim Aktualisieren'),
});
const deleteItemMut = useMutation({
mutationFn: (id: number) => shopApi.deleteItem(id),
onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['shop'] }); showSuccess('Artikel gelöscht'); },
mutationFn: (id: number) => ausruestungsanfrageApi.deleteItem(id),
onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['ausruestungsanfrage'] }); showSuccess('Artikel gelöscht'); },
onError: () => showError('Fehler beim Löschen'),
});
const createRequestMut = useMutation({
mutationFn: ({ items, notizen }: { items: ShopAnfrageFormItem[]; notizen?: string }) => shopApi.createRequest(items, notizen),
mutationFn: ({ items, notizen }: { items: AusruestungAnfrageFormItem[]; notizen?: string }) => ausruestungsanfrageApi.createRequest(items, notizen),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['shop'] });
queryClient.invalidateQueries({ queryKey: ['ausruestungsanfrage'] });
showSuccess('Anfrage gesendet');
setDraft([]);
setSubmitOpen(false);
@@ -95,7 +95,7 @@ function KatalogTab() {
onError: () => showError('Fehler beim Senden der Anfrage'),
});
const addToDraft = (item: ShopArtikel) => {
const addToDraft = (item: AusruestungArtikel) => {
setDraft(prev => {
const existing = prev.find(d => d.artikel_id === item.id);
if (existing) return prev.map(d => d.artikel_id === item.id ? { ...d, menge: d.menge + 1 } : d);
@@ -121,7 +121,7 @@ function KatalogTab() {
setArtikelForm({ bezeichnung: '' });
setArtikelDialogOpen(true);
};
const openEditArtikel = (a: ShopArtikel) => {
const openEditArtikel = (a: AusruestungArtikel) => {
setEditArtikel(a);
setArtikelForm({ bezeichnung: a.bezeichnung, beschreibung: a.beschreibung, kategorie: a.kategorie });
setArtikelDialogOpen(true);
@@ -279,78 +279,180 @@ function KatalogTab() {
function MeineAnfragenTab() {
const [expandedId, setExpandedId] = useState<number | null>(null);
const { hasPermission } = usePermissionContext();
const queryClient = useQueryClient();
const { showSuccess, showError } = useNotification();
const canCreate = hasPermission('ausruestungsanfrage:create_request');
const [createDialogOpen, setCreateDialogOpen] = useState(false);
const [newBezeichnung, setNewBezeichnung] = useState('');
const [newBemerkung, setNewBemerkung] = useState('');
const [selectedArtikel, setSelectedArtikel] = useState<AusruestungArtikel[]>([]);
const { data: requests = [], isLoading } = useQuery({
queryKey: ['shop', 'myRequests'],
queryFn: () => shopApi.getMyRequests(),
queryKey: ['ausruestungsanfrage', 'myRequests'],
queryFn: () => ausruestungsanfrageApi.getMyRequests(),
});
const { data: detail } = useQuery<ShopAnfrageDetailResponse>({
queryKey: ['shop', 'request', expandedId],
queryFn: () => shopApi.getRequest(expandedId!),
const { data: detail } = useQuery<AusruestungAnfrageDetailResponse>({
queryKey: ['ausruestungsanfrage', 'request', expandedId],
queryFn: () => ausruestungsanfrageApi.getRequest(expandedId!),
enabled: expandedId != null,
});
const { data: catalogItems = [] } = useQuery({
queryKey: ['ausruestungsanfrage', 'items-for-create'],
queryFn: () => ausruestungsanfrageApi.getItems({ aktiv: true }),
enabled: createDialogOpen,
});
const createMut = useMutation({
mutationFn: ({ items, notizen }: { items: AusruestungAnfrageFormItem[]; notizen?: string }) =>
ausruestungsanfrageApi.createRequest(items, notizen),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['ausruestungsanfrage'] });
showSuccess('Anfrage erstellt');
setCreateDialogOpen(false);
setNewBezeichnung('');
setNewBemerkung('');
setSelectedArtikel([]);
},
onError: () => showError('Fehler beim Erstellen der Anfrage'),
});
const handleCreateSubmit = () => {
const items: AusruestungAnfrageFormItem[] = [];
// Add selected catalog items
for (const a of selectedArtikel) {
items.push({ artikel_id: a.id, bezeichnung: a.bezeichnung, menge: 1 });
}
// Add free-text item if provided
const text = newBezeichnung.trim();
if (text) {
items.push({ bezeichnung: text, menge: 1 });
}
if (items.length === 0) return;
createMut.mutate({ items, notizen: newBemerkung || undefined });
};
if (isLoading) return <Typography color="text.secondary">Lade Anfragen...</Typography>;
if (requests.length === 0) return <Typography color="text.secondary">Keine Anfragen vorhanden.</Typography>;
if (requests.length === 0 && !canCreate) return <Typography color="text.secondary">Keine Anfragen vorhanden.</Typography>;
return (
<TableContainer component={Paper} variant="outlined">
<Table size="small">
<TableHead>
<TableRow>
<TableCell width={40} />
<TableCell>Anfrage</TableCell>
<TableCell>Status</TableCell>
<TableCell>Positionen</TableCell>
<TableCell>Erstellt am</TableCell>
<TableCell>Admin Notizen</TableCell>
</TableRow>
</TableHead>
<TableBody>
{requests.map(r => (
<>
<TableRow key={r.id} hover sx={{ cursor: 'pointer' }} onClick={() => setExpandedId(prev => prev === r.id ? null : r.id)}>
<TableCell>{expandedId === r.id ? <ExpandLess fontSize="small" /> : <ExpandMore fontSize="small" />}</TableCell>
<TableCell>{formatOrderId(r)}</TableCell>
<TableCell><Chip label={SHOP_STATUS_LABELS[r.status]} color={SHOP_STATUS_COLORS[r.status]} size="small" /></TableCell>
<TableCell>{r.positionen_count ?? r.items_count ?? '-'}</TableCell>
<TableCell>{new Date(r.erstellt_am).toLocaleDateString('de-AT')}</TableCell>
<TableCell>{r.admin_notizen || '-'}</TableCell>
<Box>
{requests.length === 0 ? (
<Typography color="text.secondary" sx={{ mb: 2 }}>Keine Anfragen vorhanden.</Typography>
) : (
<TableContainer component={Paper} variant="outlined">
<Table size="small">
<TableHead>
<TableRow>
<TableCell width={40} />
<TableCell>Anfrage</TableCell>
<TableCell>Status</TableCell>
<TableCell>Positionen</TableCell>
<TableCell>Erstellt am</TableCell>
<TableCell>Admin Notizen</TableCell>
</TableRow>
{expandedId === r.id && (
<TableRow key={`${r.id}-detail`}>
<TableCell colSpan={6} sx={{ py: 0 }}>
<Collapse in timeout="auto" unmountOnExit>
<Box sx={{ p: 2 }}>
{r.notizen && <Typography variant="body2" sx={{ mb: 1 }}>Notizen: {r.notizen}</Typography>}
{detail ? (
<>
{detail.positionen.map(p => (
<Typography key={p.id} variant="body2">- {p.menge}x {p.bezeichnung}{p.notizen ? ` (${p.notizen})` : ''}</Typography>
))}
{detail.linked_bestellungen && detail.linked_bestellungen.length > 0 && (
<Box sx={{ mt: 1 }}>
<Typography variant="caption" color="text.secondary">Verknüpfte Bestellungen:</Typography>
{detail.linked_bestellungen.map(b => (
<Chip key={b.id} label={`#${b.id} ${b.bezeichnung}`} size="small" sx={{ ml: 0.5 }} />
</TableHead>
<TableBody>
{requests.map(r => (
<>
<TableRow key={r.id} hover sx={{ cursor: 'pointer' }} onClick={() => setExpandedId(prev => prev === r.id ? null : r.id)}>
<TableCell>{expandedId === r.id ? <ExpandLess fontSize="small" /> : <ExpandMore fontSize="small" />}</TableCell>
<TableCell>{formatOrderId(r)}</TableCell>
<TableCell><Chip label={AUSRUESTUNG_STATUS_LABELS[r.status]} color={AUSRUESTUNG_STATUS_COLORS[r.status]} size="small" /></TableCell>
<TableCell>{r.positionen_count ?? r.items_count ?? '-'}</TableCell>
<TableCell>{new Date(r.erstellt_am).toLocaleDateString('de-AT')}</TableCell>
<TableCell>{r.admin_notizen || '-'}</TableCell>
</TableRow>
{expandedId === r.id && (
<TableRow key={`${r.id}-detail`}>
<TableCell colSpan={6} sx={{ py: 0 }}>
<Collapse in timeout="auto" unmountOnExit>
<Box sx={{ p: 2 }}>
{r.notizen && <Typography variant="body2" sx={{ mb: 1 }}>Notizen: {r.notizen}</Typography>}
{detail ? (
<>
{detail.positionen.map(p => (
<Typography key={p.id} variant="body2">- {p.menge}x {p.bezeichnung}{p.notizen ? ` (${p.notizen})` : ''}</Typography>
))}
</Box>
{detail.linked_bestellungen && detail.linked_bestellungen.length > 0 && (
<Box sx={{ mt: 1 }}>
<Typography variant="caption" color="text.secondary">Verknüpfte Bestellungen:</Typography>
{detail.linked_bestellungen.map(b => (
<Chip key={b.id} label={`#${b.id} ${b.bezeichnung}`} size="small" sx={{ ml: 0.5 }} />
))}
</Box>
)}
</>
) : (
<Typography variant="body2" color="text.secondary">Lade Details...</Typography>
)}
</>
) : (
<Typography variant="body2" color="text.secondary">Lade Details...</Typography>
)}
</Box>
</Collapse>
</TableCell>
</TableRow>
)}
</>
))}
</TableBody>
</Table>
</TableContainer>
</Box>
</Collapse>
</TableCell>
</TableRow>
)}
</>
))}
</TableBody>
</Table>
</TableContainer>
)}
{/* Create Request Dialog */}
<Dialog open={createDialogOpen} onClose={() => setCreateDialogOpen(false)} maxWidth="sm" fullWidth>
<DialogTitle>Neue Ausrüstungsanfrage</DialogTitle>
<DialogContent sx={{ display: 'flex', flexDirection: 'column', gap: 2, pt: 2 }}>
<TextField
label="Bezeichnung"
placeholder="Was wird benötigt?"
value={newBezeichnung}
onChange={e => setNewBezeichnung(e.target.value)}
fullWidth
/>
<Autocomplete
multiple
options={catalogItems}
getOptionLabel={o => o.bezeichnung}
value={selectedArtikel}
onChange={(_, v) => setSelectedArtikel(v)}
renderInput={params => <TextField {...params} label="Aus Katalog auswählen (optional)" />}
/>
<TextField
label="Bemerkung (optional)"
value={newBemerkung}
onChange={e => setNewBemerkung(e.target.value)}
multiline
rows={2}
fullWidth
/>
</DialogContent>
<DialogActions>
<Button onClick={() => setCreateDialogOpen(false)}>Abbrechen</Button>
<Button
variant="contained"
onClick={handleCreateSubmit}
disabled={createMut.isPending || (!newBezeichnung.trim() && selectedArtikel.length === 0)}
>
Anfrage erstellen
</Button>
</DialogActions>
</Dialog>
{/* FAB for creating new request */}
{canCreate && (
<ChatAwareFab onClick={() => setCreateDialogOpen(true)} aria-label="Neue Anfrage erstellen">
<AddIcon />
</ChatAwareFab>
)}
</Box>
);
}
@@ -368,13 +470,13 @@ function AlleAnfragenTab() {
const [selectedBestellung, setSelectedBestellung] = useState<Bestellung | null>(null);
const { data: requests = [], isLoading } = useQuery({
queryKey: ['shop', 'requests', statusFilter],
queryFn: () => shopApi.getRequests(statusFilter ? { status: statusFilter } : undefined),
queryKey: ['ausruestungsanfrage', 'requests', statusFilter],
queryFn: () => ausruestungsanfrageApi.getRequests(statusFilter ? { status: statusFilter } : undefined),
});
const { data: detail } = useQuery<ShopAnfrageDetailResponse>({
queryKey: ['shop', 'request', expandedId],
queryFn: () => shopApi.getRequest(expandedId!),
const { data: detail } = useQuery<AusruestungAnfrageDetailResponse>({
queryKey: ['ausruestungsanfrage', 'request', expandedId],
queryFn: () => ausruestungsanfrageApi.getRequest(expandedId!),
enabled: expandedId != null,
});
@@ -385,9 +487,9 @@ function AlleAnfragenTab() {
});
const statusMut = useMutation({
mutationFn: ({ id, status, notes }: { id: number; status: string; notes?: string }) => shopApi.updateRequestStatus(id, status, notes),
mutationFn: ({ id, status, notes }: { id: number; status: string; notes?: string }) => ausruestungsanfrageApi.updateRequestStatus(id, status, notes),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['shop'] });
queryClient.invalidateQueries({ queryKey: ['ausruestungsanfrage'] });
showSuccess('Status aktualisiert');
setActionDialog(null);
setAdminNotizen('');
@@ -396,9 +498,9 @@ function AlleAnfragenTab() {
});
const linkMut = useMutation({
mutationFn: ({ anfrageId, bestellungId }: { anfrageId: number; bestellungId: number }) => shopApi.linkToOrder(anfrageId, bestellungId),
mutationFn: ({ anfrageId, bestellungId }: { anfrageId: number; bestellungId: number }) => ausruestungsanfrageApi.linkToOrder(anfrageId, bestellungId),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['shop'] });
queryClient.invalidateQueries({ queryKey: ['ausruestungsanfrage'] });
showSuccess('Verknüpfung erstellt');
setLinkDialog(null);
setSelectedBestellung(null);
@@ -419,8 +521,8 @@ function AlleAnfragenTab() {
<InputLabel>Status Filter</InputLabel>
<Select value={statusFilter} label="Status Filter" onChange={e => setStatusFilter(e.target.value)}>
<MenuItem value="">Alle</MenuItem>
{(Object.keys(SHOP_STATUS_LABELS) as ShopAnfrageStatus[]).map(s => (
<MenuItem key={s} value={s}>{SHOP_STATUS_LABELS[s]}</MenuItem>
{(Object.keys(AUSRUESTUNG_STATUS_LABELS) as AusruestungAnfrageStatus[]).map(s => (
<MenuItem key={s} value={s}>{AUSRUESTUNG_STATUS_LABELS[s]}</MenuItem>
))}
</Select>
</FormControl>
@@ -448,7 +550,7 @@ function AlleAnfragenTab() {
<TableCell>{expandedId === r.id ? <ExpandLess fontSize="small" /> : <ExpandMore fontSize="small" />}</TableCell>
<TableCell>{formatOrderId(r)}</TableCell>
<TableCell>{r.anfrager_name || r.anfrager_id}</TableCell>
<TableCell><Chip label={SHOP_STATUS_LABELS[r.status]} color={SHOP_STATUS_COLORS[r.status]} size="small" /></TableCell>
<TableCell><Chip label={AUSRUESTUNG_STATUS_LABELS[r.status]} color={AUSRUESTUNG_STATUS_COLORS[r.status]} size="small" /></TableCell>
<TableCell>{r.positionen_count ?? r.items_count ?? '-'}</TableCell>
<TableCell>{new Date(r.erstellt_am).toLocaleDateString('de-AT')}</TableCell>
<TableCell onClick={e => e.stopPropagation()}>
@@ -570,9 +672,9 @@ function AlleAnfragenTab() {
// ─── Overview Tab ────────────────────────────────────────────────────────────
function UebersichtTab() {
const { data: overview, isLoading } = useQuery<ShopOverview>({
queryKey: ['shop', 'overview'],
queryFn: () => shopApi.getOverview(),
const { data: overview, isLoading } = useQuery<AusruestungOverview>({
queryKey: ['ausruestungsanfrage', 'overview'],
queryFn: () => ausruestungsanfrageApi.getOverview(),
});
if (isLoading) return <Typography color="text.secondary">Lade Übersicht...</Typography>;
@@ -631,14 +733,14 @@ function UebersichtTab() {
// ─── Main Page ──────────────────────────────────────────────────────────────
export default function Shop() {
export default function Ausruestungsanfrage() {
const [searchParams, setSearchParams] = useSearchParams();
const { hasPermission } = usePermissionContext();
const canView = hasPermission('shop:view');
const canCreate = hasPermission('shop:create_request');
const canApprove = hasPermission('shop:approve_requests');
const canViewOverview = hasPermission('shop:view_overview');
const canView = hasPermission('ausruestungsanfrage:view');
const canCreate = hasPermission('ausruestungsanfrage:create_request');
const canApprove = hasPermission('ausruestungsanfrage:approve_requests');
const canViewOverview = hasPermission('ausruestungsanfrage:view_overview');
const tabCount = 1 + (canCreate ? 1 : 0) + (canApprove ? 1 : 0) + (canViewOverview ? 1 : 0);
@@ -672,7 +774,7 @@ export default function Shop() {
return (
<DashboardLayout>
<Typography variant="h5" fontWeight={700} sx={{ mb: 2 }}>Shop</Typography>
<Typography variant="h5" fontWeight={700} sx={{ mb: 2 }}>Ausrüstungsanfragen</Typography>
<Box sx={{ borderBottom: 1, borderColor: 'divider', mb: 3 }}>
<Tabs value={activeTab} onChange={handleTabChange} variant="scrollable" scrollButtons="auto">

12
frontend/src/pages/BestellungDetail.tsx
View File

@@ -100,7 +100,7 @@ export default function BestellungDetail() {
const [deleteReminderTarget, setDeleteReminderTarget] = useState<number | null>(null);
// ── Query ──
const { data, isLoading, isError } = useQuery({
const { data, isLoading, isError, error, refetch } = useQuery({
queryKey: ['bestellung', orderId],
queryFn: () => bestellungApi.getOrder(orderId),
enabled: !!orderId,
@@ -263,11 +263,17 @@ export default function BestellungDetail() {
}
if (isError || !bestellung) {
const is404 = (error as any)?.response?.status === 404 || !bestellung;
return (
<DashboardLayout>
<Box sx={{ p: 4, textAlign: 'center' }}>
<Typography color="error">Bestellung nicht gefunden.</Typography>
<Button sx={{ mt: 2 }} onClick={() => navigate('/bestellungen')}>Zurück</Button>
<Typography color="error">
{is404 ? 'Bestellung nicht gefunden.' : 'Fehler beim Laden der Bestellung.'}
</Typography>
{!is404 && (
<Button sx={{ mt: 2 }} variant="outlined" onClick={() => refetch()}>Erneut versuchen</Button>
)}
<Button sx={{ mt: 2, ml: !is404 ? 1 : 0 }} onClick={() => navigate('/bestellungen')}>Zurück</Button>
</Box>
</DashboardLayout>
);

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

@@ -29,7 +29,7 @@ import LinksWidget from '../components/dashboard/LinksWidget';
import BannerWidget from '../components/dashboard/BannerWidget';
import WidgetGroup from '../components/dashboard/WidgetGroup';
import BestellungenWidget from '../components/dashboard/BestellungenWidget';
import ShopWidget from '../components/dashboard/ShopWidget';
import AusruestungsanfrageWidget from '../components/dashboard/AusruestungsanfrageWidget';
import { preferencesApi } from '../services/settings';
import { configApi } from '../services/config';
import { WidgetKey } from '../constants/widgets';
@@ -141,10 +141,10 @@ function Dashboard() {
</Fade>
)}
{hasPermission('shop:widget') && widgetVisible('shopRequests') && (
{hasPermission('ausruestungsanfrage:widget') && widgetVisible('ausruestungsanfragen') && (
<Fade in={!dataLoading} timeout={600} style={{ transitionDelay: '470ms' }}>
<Box>
<ShopWidget />
<AusruestungsanfrageWidget />
</Box>
</Fade>
)}

62
frontend/src/pages/Issues.tsx
View File

@@ -3,7 +3,7 @@ import {
Box, Tab, Tabs, Typography, Table, TableBody, TableCell, TableContainer,
TableHead, TableRow, Paper, Chip, IconButton, Button, Dialog, DialogTitle,
DialogContent, DialogActions, TextField, MenuItem, Select, FormControl,
InputLabel, Collapse, Divider, CircularProgress,
InputLabel, Collapse, Divider, CircularProgress, FormControlLabel, Switch,
} from '@mui/material';
import {
Add as AddIcon, Delete as DeleteIcon, ExpandMore, ExpandLess,
@@ -216,7 +216,7 @@ function IssueRow({
</Typography>
)}
{canManage && (
{(canManage || isOwner) && (
<Box sx={{ display: 'flex', gap: 1, mb: 2, flexWrap: 'wrap' }}>
<FormControl size="small" sx={{ minWidth: 160 }}>
<InputLabel>Status</InputLabel>
@@ -232,19 +232,21 @@ function IssueRow({
<MenuItem value="abgelehnt">Abgelehnt</MenuItem>
</Select>
</FormControl>
<FormControl size="small" sx={{ minWidth: 140 }}>
<InputLabel>Priorität</InputLabel>
<Select
value={issue.prioritaet}
label="Priorität"
onChange={(e) => updateMut.mutate({ prioritaet: e.target.value as Issue['prioritaet'] })}
onClick={(e) => e.stopPropagation()}
>
<MenuItem value="niedrig">Niedrig</MenuItem>
<MenuItem value="mittel">Mittel</MenuItem>
<MenuItem value="hoch">Hoch</MenuItem>
</Select>
</FormControl>
{canManage && (
<FormControl size="small" sx={{ minWidth: 140 }}>
<InputLabel>Priorität</InputLabel>
<Select
value={issue.prioritaet}
label="Priorität"
onChange={(e) => updateMut.mutate({ prioritaet: e.target.value as Issue['prioritaet'] })}
onClick={(e) => e.stopPropagation()}
>
<MenuItem value="niedrig">Niedrig</MenuItem>
<MenuItem value="mittel">Mittel</MenuItem>
<MenuItem value="hoch">Hoch</MenuItem>
</Select>
</FormControl>
)}
</Box>
)}
@@ -328,9 +330,6 @@ function IssueTable({ issues, canManage, userId }: { issues: Issue[]; canManage:
export default function Issues() {
const [searchParams, setSearchParams] = useSearchParams();
const tabParam = parseInt(searchParams.get('tab') || '0', 10);
const tab = isNaN(tabParam) || tabParam < 0 || tabParam > 1 ? 0 : tabParam;
const { showSuccess, showError } = useNotification();
const { hasPermission } = usePermissionContext();
const { user } = useAuth();
@@ -341,6 +340,11 @@ export default function Issues() {
const canCreate = hasPermission('issues:create');
const userId = user?.id || '';
const tabParam = parseInt(searchParams.get('tab') || '0', 10);
const maxTab = canManage ? 2 : (canViewAll ? 1 : 0);
const tab = isNaN(tabParam) || tabParam < 0 || tabParam > maxTab ? 0 : tabParam;
const [showDone, setShowDone] = useState(false);
const [createOpen, setCreateOpen] = useState(false);
const [form, setForm] = useState<CreateIssuePayload>({ titel: '', typ: 'bug', prioritaet: 'mittel' });
@@ -365,6 +369,8 @@ export default function Issues() {
};
const myIssues = issues.filter((i: Issue) => i.erstellt_von === userId);
const myIssuesFiltered = myIssues.filter((i: Issue) => showDone || (i.status !== 'erledigt' && i.status !== 'abgelehnt'));
const doneIssues = issues.filter((i: Issue) => i.status === 'erledigt' || i.status === 'abgelehnt');
return (
<DashboardLayout>
@@ -374,15 +380,21 @@ export default function Issues() {
<Tabs value={tab} onChange={handleTabChange} sx={{ mb: 0 }}>
<Tab label="Meine Issues" />
{canViewAll && <Tab label="Alle Issues" />}
{canManage && <Tab label="Erledigte Issues" />}
</Tabs>
<TabPanel value={tab} index={0}>
<FormControlLabel
control={<Switch checked={showDone} onChange={(e) => setShowDone(e.target.checked)} size="small" />}
label="Erledigte anzeigen"
sx={{ mb: 1 }}
/>
{isLoading ? (
<Box sx={{ display: 'flex', justifyContent: 'center', py: 4 }}>
<CircularProgress />
</Box>
) : (
<IssueTable issues={myIssues} canManage={canManage} userId={userId} />
<IssueTable issues={myIssuesFiltered} canManage={canManage} userId={userId} />
)}
</TabPanel>
@@ -397,6 +409,18 @@ export default function Issues() {
)}
</TabPanel>
)}
{canManage && (
<TabPanel value={tab} index={canViewAll ? 2 : 1}>
{isLoading ? (
<Box sx={{ display: 'flex', justifyContent: 'center', py: 4 }}>
<CircularProgress />
</Box>
) : (
<IssueTable issues={doneIssues} canManage={canManage} userId={userId} />
)}
</TabPanel>
)}
</Box>
{/* Create Issue Dialog */}