From b3a2fd9ff96390c9d95e4111e0fad9302690cf96 Mon Sep 17 00:00:00 2001
From: Matthias Hochmeister <matthias.hochmeister@apple.com>
Date: Tue, 3 Mar 2026 14:59:08 +0100
Subject: [PATCH] feat: responsive widgets, atemschutz permission UX, event
 hard-delete

- fix dashboard grid: use auto-fill instead of auto-fit for equal-width widgets
- atemschutz: skip stats/members API calls for non-privileged users, hide
  empty Aktionen column, add personal status subtitle
- kalender: add permanent delete option for events with confirmation dialog

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/pages/Atemschutz.tsx | 78 +++++++++++++++++--------------
 frontend/src/pages/Dashboard.tsx  |  2 +-
 frontend/src/pages/Kalender.tsx   | 75 ++++++++++++++++++++++++++++-
 3 files changed, 117 insertions(+), 38 deletions(-)

diff --git a/frontend/src/pages/Atemschutz.tsx b/frontend/src/pages/Atemschutz.tsx
index fbbc034..a4643ad 100644
--- a/frontend/src/pages/Atemschutz.tsx
+++ b/frontend/src/pages/Atemschutz.tsx
@@ -183,20 +183,25 @@ function Atemschutz() {
     try {
       setLoading(true);
       setError(null);
-      const [traegerData, statsData, membersData] = await Promise.all([
-        atemschutzApi.getAll(),
-        atemschutzApi.getStats(),
-        membersService.getMembers({ pageSize: 500 }),
-      ]);
-      setTraeger(traegerData);
-      setStats(statsData);
-      setMembers(membersData.items);
+      if (canViewAll) {
+        const [traegerData, statsData, membersData] = await Promise.all([
+          atemschutzApi.getAll(),
+          atemschutzApi.getStats(),
+          membersService.getMembers({ pageSize: 500 }),
+        ]);
+        setTraeger(traegerData);
+        setStats(statsData);
+        setMembers(membersData.items);
+      } else {
+        const traegerData = await atemschutzApi.getAll();
+        setTraeger(traegerData);
+      }
     } catch {
       setError('Atemschutzdaten konnten nicht geladen werden. Bitte versuchen Sie es erneut.');
     } finally {
       setLoading(false);
     }
-  }, []);
+  }, [canViewAll]);
 
   useEffect(() => {
     fetchData();
@@ -361,6 +366,11 @@ function Atemschutz() {
             <Typography variant="h4" gutterBottom sx={{ mb: 0 }}>
               Atemschutzverwaltung
             </Typography>
+            {!loading && !canViewAll && (
+              <Typography variant="body2" color="text.secondary" sx={{ mt: 0.5 }}>
+                Dein persönlicher Atemschutz-Status
+              </Typography>
+            )}
             {!loading && stats && canViewAll && (
               <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1, mt: 0.5 }}>
                 <Typography variant="body2" color="text.secondary">
@@ -471,7 +481,7 @@ function Atemschutz() {
                   <TableCell>Untersuchung gültig bis</TableCell>
                   <TableCell>Leistungstest gültig bis</TableCell>
                   <TableCell align="center">Status</TableCell>
-                  <TableCell align="right">Aktionen</TableCell>
+                  {canWrite && <TableCell align="right">Aktionen</TableCell>}
                 </TableRow>
               </TableHead>
               <TableBody>
@@ -549,31 +559,29 @@ function Atemschutz() {
                           variant="filled"
                         />
                       </TableCell>
-                      <TableCell align="right">
-                        {canWrite && (
-                        <Tooltip title="Bearbeiten">
-                          <Button
-                            size="small"
-                            onClick={() => handleOpenEdit(item)}
-                            sx={{ minWidth: 'auto', mr: 0.5 }}
-                          >
-                            <Edit fontSize="small" />
-                          </Button>
-                        </Tooltip>
-                        )}
-                        {canWrite && (
-                        <Tooltip title="Löschen">
-                          <Button
-                            size="small"
-                            color="error"
-                            onClick={() => setDeleteId(item.id)}
-                            sx={{ minWidth: 'auto' }}
-                          >
-                            <Delete fontSize="small" />
-                          </Button>
-                        </Tooltip>
-                        )}
-                      </TableCell>
+                      {canWrite && (
+                        <TableCell align="right">
+                          <Tooltip title="Bearbeiten">
+                            <Button
+                              size="small"
+                              onClick={() => handleOpenEdit(item)}
+                              sx={{ minWidth: 'auto', mr: 0.5 }}
+                            >
+                              <Edit fontSize="small" />
+                            </Button>
+                          </Tooltip>
+                          <Tooltip title="Löschen">
+                            <Button
+                              size="small"
+                              color="error"
+                              onClick={() => setDeleteId(item.id)}
+                              sx={{ minWidth: 'auto' }}
+                            >
+                              <Delete fontSize="small" />
+                            </Button>
+                          </Tooltip>
+                        </TableCell>
+                      )}
                     </TableRow>
                   );
                 })}
diff --git a/frontend/src/pages/Dashboard.tsx b/frontend/src/pages/Dashboard.tsx
index fe20683..bce7f99 100644
--- a/frontend/src/pages/Dashboard.tsx
+++ b/frontend/src/pages/Dashboard.tsx
@@ -33,7 +33,7 @@ function Dashboard() {
         <Box
           sx={{
             display: 'grid',
-            gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
+            gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))',
             gap: 2.5,
             alignItems: 'start',
           }}
diff --git a/frontend/src/pages/Kalender.tsx b/frontend/src/pages/Kalender.tsx
index cbca6a3..b9311c9 100644
--- a/frontend/src/pages/Kalender.tsx
+++ b/frontend/src/pages/Kalender.tsx
@@ -51,6 +51,7 @@ import {
   ChevronLeft,
   ChevronRight,
   ContentCopy as CopyIcon,
+  DeleteForever as DeleteForeverIcon,
   DirectionsCar as CarIcon,
   Edit as EditIcon,
   Event as EventIcon,
@@ -453,11 +454,12 @@ interface DayPopoverProps {
   onClose: () => void;
   onTrainingClick: (id: string) => void;
   onEventEdit: (ev: VeranstaltungListItem) => void;
+  onEventDelete: (id: string) => void;
 }
 
 function DayPopover({
   anchorEl, day, trainingForDay, eventsForDay,
-  canWriteEvents, onClose, onTrainingClick, onEventEdit,
+  canWriteEvents, onClose, onTrainingClick, onEventEdit, onEventDelete,
 }: DayPopoverProps) {
   if (!day) return null;
   const hasContent = trainingForDay.length > 0 || eventsForDay.length > 0;
@@ -589,6 +591,15 @@ function DayPopover({
                     <EditIcon fontSize="small" />
                   </IconButton>
                 )}
+                {canWriteEvents && (
+                  <IconButton
+                    size="small"
+                    color="error"
+                    onClick={() => { onEventDelete(ev.id); onClose(); }}
+                  >
+                    <DeleteForeverIcon fontSize="small" />
+                  </IconButton>
+                )}
               </ListItem>
             ))}
           </List>
@@ -610,11 +621,12 @@ interface CombinedListViewProps {
   onTrainingClick: (id: string) => void;
   onEventEdit: (ev: VeranstaltungListItem) => void;
   onEventCancel: (id: string) => void;
+  onEventDelete: (id: string) => void;
 }
 
 function CombinedListView({
   trainingEvents, veranstaltungen, selectedKategorie,
-  canWriteEvents, onTrainingClick, onEventEdit, onEventCancel,
+  canWriteEvents, onTrainingClick, onEventEdit, onEventCancel, onEventDelete,
 }: CombinedListViewProps) {
   type ListEntry =
     | { kind: 'training'; item: UebungListItem }
@@ -742,6 +754,18 @@ function CombinedListView({
                   </IconButton>
                 </Box>
               )}
+              {!isTraining && canWriteEvents && (
+                <Box sx={{ display: 'flex', gap: 0.5, ml: item.abgesagt ? 1 : 0 }}>
+                  <IconButton
+                    size="small"
+                    color="error"
+                    onClick={() => onEventDelete(item.id)}
+                    title="Endgültig löschen"
+                  >
+                    <DeleteForeverIcon fontSize="small" />
+                  </IconButton>
+                </Box>
+              )}
             </ListItem>
           </Box>
         );
@@ -1141,6 +1165,8 @@ export default function Kalender() {
   const [cancelEventId, setCancelEventId] = useState<string | null>(null);
   const [cancelEventGrund, setCancelEventGrund] = useState('');
   const [cancelEventLoading, setCancelEventLoading] = useState(false);
+  const [deleteEventId, setDeleteEventId] = useState<string | null>(null);
+  const [deleteEventLoading, setDeleteEventLoading] = useState(false);
 
   // ── Bookings tab state ───────────────────────────────────────────────────────
   const [currentWeekStart, setCurrentWeekStart] = useState<Date>(() =>
@@ -1326,6 +1352,21 @@ export default function Kalender() {
     }
   };
 
+  const handleDeleteEvent = async () => {
+    if (!deleteEventId) return;
+    setDeleteEventLoading(true);
+    try {
+      await eventsApi.deleteEvent(deleteEventId);
+      notification.showSuccess('Veranstaltung wurde endgültig gelöscht');
+      setDeleteEventId(null);
+      loadCalendarData();
+    } catch (e: unknown) {
+      notification.showError((e as any)?.message || 'Fehler beim Löschen');
+    } finally {
+      setDeleteEventLoading(false);
+    }
+  };
+
   // ── Booking helpers ──────────────────────────────────────────────────────────
 
   const getBookingsForCell = (vehicleId: string, day: Date): FahrzeugBuchungListItem[] =>
@@ -1642,6 +1683,7 @@ export default function Kalender() {
                     setCancelEventId(id);
                     setCancelEventGrund('');
                   }}
+                  onEventDelete={(id) => setDeleteEventId(id)}
                 />
               </Paper>
             )}
@@ -1673,6 +1715,7 @@ export default function Kalender() {
                 setVeranstEditing(ev);
                 setVeranstFormOpen(true);
               }}
+              onEventDelete={(id) => setDeleteEventId(id)}
             />
 
             {/* Veranstaltung Form Dialog */}
@@ -1720,6 +1763,34 @@ export default function Kalender() {
               </DialogActions>
             </Dialog>
 
+            {/* Endgültig löschen Dialog */}
+            <Dialog
+              open={Boolean(deleteEventId)}
+              onClose={() => setDeleteEventId(null)}
+              maxWidth="xs"
+              fullWidth
+            >
+              <DialogTitle>Veranstaltung endgültig löschen?</DialogTitle>
+              <DialogContent>
+                <DialogContentText>
+                  Diese Veranstaltung wird endgültig gelöscht. Diese Aktion kann nicht rückgängig gemacht werden.
+                </DialogContentText>
+              </DialogContent>
+              <DialogActions>
+                <Button onClick={() => setDeleteEventId(null)} disabled={deleteEventLoading}>
+                  Abbrechen
+                </Button>
+                <Button
+                  variant="contained"
+                  color="error"
+                  onClick={handleDeleteEvent}
+                  disabled={deleteEventLoading}
+                >
+                  {deleteEventLoading ? <CircularProgress size={20} /> : 'Endgültig löschen'}
+                </Button>
+              </DialogActions>
+            </Dialog>
+
             {/* iCal Event subscription dialog */}
             <Dialog open={icalEventOpen} onClose={() => setIcalEventOpen(false)} maxWidth="sm" fullWidth>
               <DialogTitle>Kalender abonnieren</DialogTitle>