new features

frontend/src/components/admin/BestellungenTab.tsx

@@ -0,0 +1,167 @@
+import { useState } from 'react';
+import {
+  Box,
+  Typography,
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Chip,
+  FormControl,
+  InputLabel,
+  Select,
+  MenuItem,
+  CircularProgress,
+} from '@mui/material';
+import { useQuery } from '@tanstack/react-query';
+import { useNavigate } from 'react-router-dom';
+import { bestellungApi } from '../../services/bestellung';
+import { shopApi } from '../../services/shop';
+import { BESTELLUNG_STATUS_LABELS, BESTELLUNG_STATUS_COLORS } from '../../types/bestellung.types';
+import { SHOP_STATUS_LABELS, SHOP_STATUS_COLORS } from '../../types/shop.types';
+import type { BestellungStatus } from '../../types/bestellung.types';
+import type { ShopAnfrageStatus } from '../../types/shop.types';
+
+function BestellungenTab() {
+  const navigate = useNavigate();
+  const [statusFilter, setStatusFilter] = useState<string>('');
+
+  const { data: orders, isLoading: ordersLoading } = useQuery({
+    queryKey: ['admin-bestellungen', statusFilter],
+    queryFn: () => bestellungApi.getOrders(statusFilter ? { status: statusFilter } : undefined),
+  });
+
+  const { data: requests, isLoading: requestsLoading } = useQuery({
+    queryKey: ['admin-shop-requests'],
+    queryFn: () => shopApi.getRequests({ status: 'offen' }),
+  });
+
+  const formatCurrency = (value?: number) =>
+    value != null ? new Intl.NumberFormat('de-AT', { style: 'currency', currency: 'EUR' }).format(value) : '–';
+
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
+      {/* Pending Shop Requests */}
+      {(requests?.length ?? 0) > 0 && (
+        <Paper sx={{ p: 2 }}>
+          <Typography variant="h6" gutterBottom>
+            Offene Shop-Anfragen ({requests?.length})
+          </Typography>
+          {requestsLoading ? (
+            <CircularProgress size={24} />
+          ) : (
+            <TableContainer>
+              <Table size="small">
+                <TableHead>
+                  <TableRow>
+                    <TableCell>#</TableCell>
+                    <TableCell>Anfrager</TableCell>
+                    <TableCell>Status</TableCell>
+                    <TableCell>Erstellt am</TableCell>
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {(requests ?? []).map((req) => (
+                    <TableRow
+                      key={req.id}
+                      hover
+                      sx={{ cursor: 'pointer' }}
+                      onClick={() => navigate('/shop?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]}
+                          size="small"
+                        />
+                      </TableCell>
+                      <TableCell>{new Date(req.erstellt_am).toLocaleDateString('de-AT')}</TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </TableContainer>
+          )}
+        </Paper>
+      )}
+
+      {/* Orders Overview */}
+      <Paper sx={{ p: 2 }}>
+        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
+          <Typography variant="h6">Bestellungen</Typography>
+          <FormControl size="small" sx={{ minWidth: 180 }}>
+            <InputLabel>Status</InputLabel>
+            <Select
+              value={statusFilter}
+              label="Status"
+              onChange={(e) => setStatusFilter(e.target.value)}
+            >
+              <MenuItem value="">Alle</MenuItem>
+              {Object.entries(BESTELLUNG_STATUS_LABELS).map(([key, label]) => (
+                <MenuItem key={key} value={key}>{label}</MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+        </Box>
+        {ordersLoading ? (
+          <Box sx={{ display: 'flex', justifyContent: 'center', py: 3 }}>
+            <CircularProgress />
+          </Box>
+        ) : (
+          <TableContainer>
+            <Table size="small">
+              <TableHead>
+                <TableRow>
+                  <TableCell>Bezeichnung</TableCell>
+                  <TableCell>Lieferant</TableCell>
+                  <TableCell>Status</TableCell>
+                  <TableCell align="right">Positionen</TableCell>
+                  <TableCell align="right">Gesamt</TableCell>
+                  <TableCell>Erstellt am</TableCell>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {(orders ?? []).length === 0 ? (
+                  <TableRow>
+                    <TableCell colSpan={6} align="center">
+                      <Typography variant="body2" color="text.secondary">Keine Bestellungen</Typography>
+                    </TableCell>
+                  </TableRow>
+                ) : (
+                  (orders ?? []).map((order) => (
+                    <TableRow
+                      key={order.id}
+                      hover
+                      sx={{ cursor: 'pointer' }}
+                      onClick={() => navigate(`/bestellungen/${order.id}`)}
+                    >
+                      <TableCell>{order.bezeichnung}</TableCell>
+                      <TableCell>{order.lieferant_name || '–'}</TableCell>
+                      <TableCell>
+                        <Chip
+                          label={BESTELLUNG_STATUS_LABELS[order.status as BestellungStatus]}
+                          color={BESTELLUNG_STATUS_COLORS[order.status as BestellungStatus]}
+                          size="small"
+                        />
+                      </TableCell>
+                      <TableCell align="right">{order.items_count ?? 0}</TableCell>
+                      <TableCell align="right">{formatCurrency(order.total_cost)}</TableCell>
+                      <TableCell>{new Date(order.erstellt_am).toLocaleDateString('de-AT')}</TableCell>
+                    </TableRow>
+                  ))
+                )}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        )}
+      </Paper>
+    </Box>
+  );
+}
+
+export default BestellungenTab;

frontend/src/components/admin/NotificationBroadcastTab.tsx

@@ -124,8 +124,6 @@ function NotificationBroadcastTab() {
     setTargetDienstgrad(typeof value === 'string' ? value.split(',') : value);
   };
 
-  const filtersActive = !alleBenutzer && (targetGroup.trim() || targetDienstgrad.length > 0);
-
   const filterDescription = (() => {
     if (alleBenutzer) return 'alle aktiven Benutzer';
     const parts: string[] = [];

frontend/src/components/admin/PermissionMatrixTab.tsx

@@ -86,6 +86,38 @@ function buildReverseHierarchy(hierarchy: Record<string, string[]>): Record<stri
   return reverse;
 }
 
+// ── Visual sub-groups for permission matrix ──
+// Maps feature_group → { subGroupLabel: actionSuffix[] }
+// Actions not listed get placed in a default group.
+
+const PERMISSION_SUB_GROUPS: Record<string, Record<string, string[]>> = {
+  kalender: {
+    'Termine': ['view', 'create'],
+    'Buchungen': ['view_bookings', 'manage_bookings'],
+  },
+  bestellungen: {
+    'Bestellungen': ['view', 'create', 'delete', 'export'],
+    'Lieferanten': ['manage_vendors'],
+    'Erinnerungen': ['manage_reminders'],
+    'Widget': ['widget'],
+  },
+  shop: {
+    'Katalog': ['view', 'manage_catalog'],
+    'Anfragen': ['create_request', 'approve_requests', 'link_orders'],
+    'Widget': ['widget'],
+  },
+};
+
+function getSubGroupLabel(featureGroupId: string, permId: string): string | null {
+  const subGroups = PERMISSION_SUB_GROUPS[featureGroupId];
+  if (!subGroups) return null;
+  const action = permId.includes(':') ? permId.split(':')[1] : permId;
+  for (const [label, actions] of Object.entries(subGroups)) {
+    if (actions.includes(action)) return label;
+  }
+  return null;
+}
+
 // ── Component ──
 
 function PermissionMatrixTab() {
@@ -412,11 +444,29 @@ function PermissionMatrixTab() {
                           <Collapse in={isExpanded} timeout="auto" unmountOnExit>
                             <Table size="small">
                               <TableBody>
-                                {fgPerms.map((perm: Permission) => {
-                                  const depTooltip = getDepTooltip(perm.id);
-                                  const tooltipText = [perm.description, depTooltip].filter(Boolean).join('\n');
-                                  return (
-                                    <TableRow key={perm.id} hover>
+                                {(() => {
+                                  let lastSubGroup: string | null | undefined = undefined;
+                                  return fgPerms.map((perm: Permission) => {
+                                    const depTooltip = getDepTooltip(perm.id);
+                                    const tooltipText = [perm.description, depTooltip].filter(Boolean).join('\n');
+                                    const subGroup = getSubGroupLabel(fg.id, perm.id);
+                                    const showSubGroupHeader = subGroup !== lastSubGroup && subGroup !== null;
+                                    lastSubGroup = subGroup;
+                                    return (
+                                      <React.Fragment key={perm.id}>
+                                        {showSubGroupHeader && (
+                                          <TableRow>
+                                            <TableCell
+                                              colSpan={2 + nonAdminGroups.length}
+                                              sx={{ pl: 5, py: 0.5, bgcolor: 'action.selected', position: 'sticky', left: 0, zIndex: 1 }}
+                                            >
+                                              <Typography variant="caption" sx={{ fontWeight: 600, textTransform: 'uppercase', letterSpacing: 0.5, color: 'text.secondary' }}>
+                                                {subGroup}
+                                              </Typography>
+                                            </TableCell>
+                                          </TableRow>
+                                        )}
+                                        <TableRow hover>
                                       <TableCell sx={{ pl: 6, minWidth: 250, position: 'sticky', left: 0, zIndex: 1, bgcolor: 'background.paper' }}>
                                         <Tooltip title={tooltipText || ''} placement="right"><span>{perm.label}</span></Tooltip>
                                       </TableCell>
@@ -441,8 +491,10 @@ function PermissionMatrixTab() {
                                         );
                                       })}
                                     </TableRow>
-                                  );
-                                })}
+                                      </React.Fragment>
+                                    );
+                                  });
+                                })()}
                               </TableBody>
                             </Table>
                           </Collapse>

frontend/src/components/chat/FileMessageContent.tsx

@@ -60,7 +60,7 @@ const ContentOverlay: React.FC<ContentOverlayProps> = ({ open, onClose, mode, co
     onClose={onClose}
     maxWidth="lg"
     fullWidth
-    slotProps={{ paper: { sx: { bgcolor: mode === 'image' ? 'black' : 'background.paper', m: 1 } } }}
+    PaperProps={{ sx: { bgcolor: mode === 'image' ? 'black' : 'background.paper', m: 1 } }}
   >
     <DialogContent sx={{ p: 0, position: 'relative', display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: 200 }}>
       {mode === 'image' && (

frontend/src/components/dashboard/BestellungenWidget.tsx

@@ -0,0 +1,109 @@
+import { Card, CardContent, Typography, Box, Chip, List, ListItem, ListItemText, Divider, Skeleton } from '@mui/material';
+import { LocalShipping } from '@mui/icons-material';
+import { useQuery } from '@tanstack/react-query';
+import { useNavigate } from 'react-router-dom';
+import { bestellungApi } from '../../services/bestellung';
+import { BESTELLUNG_STATUS_LABELS, BESTELLUNG_STATUS_COLORS } from '../../types/bestellung.types';
+import type { BestellungStatus } from '../../types/bestellung.types';
+
+function BestellungenWidget() {
+  const navigate = useNavigate();
+
+  const { data: orders, isLoading, isError } = useQuery({
+    queryKey: ['bestellungen-widget'],
+    queryFn: () => bestellungApi.getOrders(),
+    refetchInterval: 5 * 60 * 1000,
+    retry: 1,
+  });
+
+  const openOrders = (orders ?? []).filter(
+    (o) => !['abgeschlossen'].includes(o.status)
+  );
+
+  if (isLoading) {
+    return (
+      <Card>
+        <CardContent>
+          <Typography variant="h6" gutterBottom>Bestellungen</Typography>
+          <Skeleton variant="rectangular" height={60} />
+          <Skeleton variant="rectangular" height={60} sx={{ mt: 1 }} />
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (isError) {
+    return (
+      <Card>
+        <CardContent>
+          <Typography variant="h6" gutterBottom>Bestellungen</Typography>
+          <Typography variant="body2" color="text.secondary">
+            Bestellungen konnten nicht geladen werden.
+          </Typography>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (openOrders.length === 0) {
+    return (
+      <Card>
+        <CardContent>
+          <Typography variant="h6" gutterBottom>Bestellungen</Typography>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, color: 'text.secondary' }}>
+            <LocalShipping fontSize="small" />
+            <Typography variant="body2">Keine offenen Bestellungen</Typography>
+          </Box>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card>
+      <CardContent>
+        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 1 }}>
+          <Typography variant="h6">Bestellungen</Typography>
+          <Chip label={`${openOrders.length} offen`} size="small" color="primary" />
+        </Box>
+        <List dense disablePadding>
+          {openOrders.slice(0, 5).map((order, idx) => (
+            <Box key={order.id}>
+              {idx > 0 && <Divider />}
+              <ListItem
+                disablePadding
+                sx={{ cursor: 'pointer', py: 0.5, '&:hover': { bgcolor: 'action.hover' } }}
+                onClick={() => navigate(`/bestellungen/${order.id}`)}
+              >
+                <ListItemText
+                  primary={order.bezeichnung}
+                  secondary={order.lieferant_name || 'Kein Lieferant'}
+                  primaryTypographyProps={{ variant: 'body2', noWrap: true }}
+                  secondaryTypographyProps={{ variant: 'caption' }}
+                />
+                <Chip
+                  label={BESTELLUNG_STATUS_LABELS[order.status as BestellungStatus]}
+                  color={BESTELLUNG_STATUS_COLORS[order.status as BestellungStatus]}
+                  size="small"
+                  sx={{ ml: 1 }}
+                />
+              </ListItem>
+            </Box>
+          ))}
+        </List>
+        {openOrders.length > 5 && (
+          <Typography
+            variant="caption"
+            color="primary"
+            sx={{ cursor: 'pointer', mt: 1, display: 'block' }}
+            onClick={() => navigate('/bestellungen')}
+          >
+            Alle {openOrders.length} Bestellungen anzeigen
+          </Typography>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+export default BestellungenWidget;

frontend/src/components/dashboard/ShopWidget.tsx

@@ -0,0 +1,106 @@
+import { Card, CardContent, Typography, Box, Chip, List, ListItem, ListItemText, Divider, Skeleton } from '@mui/material';
+import { Store } 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';
+
+function ShopWidget() {
+  const navigate = useNavigate();
+
+  const { data: requests, isLoading, isError } = useQuery({
+    queryKey: ['shop-widget-requests'],
+    queryFn: () => shopApi.getRequests({ status: 'offen' }),
+    refetchInterval: 5 * 60 * 1000,
+    retry: 1,
+  });
+
+  if (isLoading) {
+    return (
+      <Card>
+        <CardContent>
+          <Typography variant="h6" gutterBottom>Shop-Anfragen</Typography>
+          <Skeleton variant="rectangular" height={60} />
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (isError) {
+    return (
+      <Card>
+        <CardContent>
+          <Typography variant="h6" gutterBottom>Shop-Anfragen</Typography>
+          <Typography variant="body2" color="text.secondary">
+            Anfragen konnten nicht geladen werden.
+          </Typography>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  const pendingCount = requests?.length ?? 0;
+
+  if (pendingCount === 0) {
+    return (
+      <Card>
+        <CardContent>
+          <Typography variant="h6" gutterBottom>Shop-Anfragen</Typography>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, color: 'text.secondary' }}>
+            <Store fontSize="small" />
+            <Typography variant="body2">Keine offenen Anfragen</Typography>
+          </Box>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card>
+      <CardContent>
+        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 1 }}>
+          <Typography variant="h6">Shop-Anfragen</Typography>
+          <Chip label={`${pendingCount} offen`} size="small" color="warning" />
+        </Box>
+        <List dense disablePadding>
+          {(requests ?? []).slice(0, 5).map((req, idx) => (
+            <Box key={req.id}>
+              {idx > 0 && <Divider />}
+              <ListItem
+                disablePadding
+                sx={{ cursor: 'pointer', py: 0.5, '&:hover': { bgcolor: 'action.hover' } }}
+                onClick={() => navigate('/shop?tab=2')}
+              >
+                <ListItemText
+                  primary={`Anfrage #${req.id}`}
+                  secondary={req.anfrager_name || 'Unbekannt'}
+                  primaryTypographyProps={{ variant: 'body2' }}
+                  secondaryTypographyProps={{ variant: 'caption' }}
+                />
+                <Chip
+                  label={SHOP_STATUS_LABELS[req.status as ShopAnfrageStatus]}
+                  color={SHOP_STATUS_COLORS[req.status as ShopAnfrageStatus]}
+                  size="small"
+                  sx={{ ml: 1 }}
+                />
+              </ListItem>
+            </Box>
+          ))}
+        </List>
+        {pendingCount > 5 && (
+          <Typography
+            variant="caption"
+            color="primary"
+            sx={{ cursor: 'pointer', mt: 1, display: 'block' }}
+            onClick={() => navigate('/shop?tab=2')}
+          >
+            Alle {pendingCount} Anfragen anzeigen
+          </Typography>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+export default ShopWidget;

frontend/src/components/dashboard/index.ts

@@ -18,3 +18,5 @@ export { default as AnnouncementBanner } from './AnnouncementBanner';
 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';

frontend/src/components/shared/Sidebar.tsx

@@ -25,6 +25,8 @@ import {
   Menu as MenuIcon,
   ExpandMore,
   ExpandLess,
+  LocalShipping,
+  Store,
 } from '@mui/icons-material';
 import { useNavigate, useLocation } from 'react-router-dom';
 import { useQuery } from '@tanstack/react-query';
@@ -61,6 +63,7 @@ const adminSubItems: SubItem[] = [
   { 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' },
 ];
 
 const baseNavigationItems: NavigationItem[] = [
@@ -106,6 +109,22 @@ const baseNavigationItems: NavigationItem[] = [
     path: '/wissen',
     permission: 'wissen:view',
   },
+  {
+    text: 'Bestellungen',
+    icon: <LocalShipping />,
+    path: '/bestellungen',
+    subItems: [
+      { text: 'Übersicht', path: '/bestellungen?tab=0' },
+      { text: 'Lieferanten', path: '/bestellungen?tab=1' },
+    ],
+    permission: 'bestellungen:view',
+  },
+  {
+    text: 'Shop',
+    icon: <Store />,
+    path: '/shop',
+    permission: 'shop:view',
+  },
 ];
 
 const adminItem: NavigationItem = {