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>