feat(frontend): implement unified design system with 17 reusable template components, skeleton loading states, and golden-ratio-based layouts

frontend/src/pages/Atemschutz.tsx

@@ -12,7 +12,6 @@ import {
   Dialog,
   DialogActions,
   DialogContent,
-  DialogContentText,
   DialogTitle,
   FormControl,
   FormControlLabel,
@@ -21,12 +20,6 @@ import {
   InputLabel,
   MenuItem,
   Select,
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableRow,
   TextField,
   Tooltip,
   Typography,
@@ -41,6 +34,8 @@ import {
 } from '@mui/icons-material';
 import DashboardLayout from '../components/dashboard/DashboardLayout';
 import ChatAwareFab from '../components/shared/ChatAwareFab';
+import { DataTable } from '../components/templates';
+import type { Column } from '../components/templates';
 import { atemschutzApi } from '../services/atemschutz';
 import { membersService } from '../services/members';
 import { useNotification } from '../contexts/NotificationContext';
@@ -54,6 +49,7 @@ import type {
   UntersuchungErgebnis,
 } from '../types/atemschutz.types';
 import { UntersuchungErgebnisLabel } from '../types/atemschutz.types';
+import { ConfirmDialog } from '../components/templates';
 import type { MemberListItem } from '../types/member.types';
 
 // ── Helpers ──────────────────────────────────────────────────────────────────
@@ -480,116 +476,86 @@ function Atemschutz() {
         )}
 
         {/* Table */}
-        {!loading && !error && filtered.length > 0 && (
-          <TableContainer>
-            <Table size="small">
-              <TableHead>
-                <TableRow>
-                  <TableCell>Name</TableCell>
-                  <TableCell align="center">Lehrgang</TableCell>
-                  <TableCell>Untersuchung gültig bis</TableCell>
-                  <TableCell>Leistungstest gültig bis</TableCell>
-                  <TableCell align="center">Status</TableCell>
-                  {canWrite && <TableCell align="right">Aktionen</TableCell>}
-                </TableRow>
-              </TableHead>
-              <TableBody>
-                {filtered.map((item) => {
-                  const untersuchungColor = getValidityColor(
-                    item.untersuchung_gueltig_bis,
-                    item.untersuchung_tage_rest,
-                    90
-                  );
-                  const leistungstestColor = getValidityColor(
-                    item.leistungstest_gueltig_bis,
-                    item.leistungstest_tage_rest,
-                    30
-                  );
+        {!loading && !error && filtered.length > 0 && (() => {
+          const columns: Column<AtemschutzUebersicht>[] = [
+            { key: 'user_name', label: 'Name', render: (item) => (
+              <Typography variant="body2" fontWeight={500}>{getDisplayName(item)}</Typography>
+            )},
+            { key: 'atemschutz_lehrgang', label: 'Lehrgang', align: 'center', render: (item) => (
+              item.atemschutz_lehrgang ? (
+                <Tooltip title={item.lehrgang_datum ? `Lehrgang am ${formatDate(item.lehrgang_datum)}` : 'Lehrgang absolviert'}>
+                  <Check color="success" fontSize="small" />
+                </Tooltip>
+              ) : (
+                <Close color="disabled" fontSize="small" />
+              )
+            )},
+            { key: 'untersuchung_gueltig_bis', label: 'Untersuchung gültig bis', render: (item) => (
+              <Tooltip title={
+                item.untersuchung_tage_rest !== null
+                  ? item.untersuchung_tage_rest < 0
+                    ? `Seit ${Math.abs(item.untersuchung_tage_rest)} Tagen abgelaufen`
+                    : `Noch ${item.untersuchung_tage_rest} Tage gültig`
+                  : 'Keine Untersuchung eingetragen'
+              }>
+                <Typography variant="body2" color={getValidityColor(item.untersuchung_gueltig_bis, item.untersuchung_tage_rest, 90)} fontWeight={500}>
+                  {formatDate(item.untersuchung_gueltig_bis)}
+                </Typography>
+              </Tooltip>
+            )},
+            { key: 'leistungstest_gueltig_bis', label: 'Leistungstest gültig bis', render: (item) => (
+              <Tooltip title={
+                item.leistungstest_tage_rest !== null
+                  ? item.leistungstest_tage_rest < 0
+                    ? `Seit ${Math.abs(item.leistungstest_tage_rest)} Tagen abgelaufen`
+                    : `Noch ${item.leistungstest_tage_rest} Tage gültig`
+                  : 'Kein Leistungstest eingetragen'
+              }>
+                <Typography variant="body2" color={getValidityColor(item.leistungstest_gueltig_bis, item.leistungstest_tage_rest, 30)} fontWeight={500}>
+                  {formatDate(item.leistungstest_gueltig_bis)}
+                </Typography>
+              </Tooltip>
+            )},
+            { key: 'einsatzbereit', label: 'Status', align: 'center', render: (item) => (
+              <Chip
+                label={item.einsatzbereit ? 'Einsatzbereit' : 'Nicht einsatzbereit'}
+                color={item.einsatzbereit ? 'success' : 'error'}
+                size="small"
+                variant="filled"
+              />
+            )},
+          ];
 
-                  return (
-                    <TableRow key={item.id} hover>
-                      <TableCell>
-                        <Typography variant="body2" fontWeight={500}>
-                          {getDisplayName(item)}
-                        </Typography>
-                      </TableCell>
-                      <TableCell align="center">
-                        {item.atemschutz_lehrgang ? (
-                          <Tooltip title={item.lehrgang_datum ? `Lehrgang am ${formatDate(item.lehrgang_datum)}` : 'Lehrgang absolviert'}>
-                            <Check color="success" fontSize="small" />
-                          </Tooltip>
-                        ) : (
-                          <Close color="disabled" fontSize="small" />
-                        )}
-                      </TableCell>
-                      <TableCell>
-                        <Tooltip
-                          title={
-                            item.untersuchung_tage_rest !== null
-                              ? item.untersuchung_tage_rest < 0
-                                ? `Seit ${Math.abs(item.untersuchung_tage_rest)} Tagen abgelaufen`
-                                : `Noch ${item.untersuchung_tage_rest} Tage gültig`
-                              : 'Keine Untersuchung eingetragen'
-                          }
-                        >
-                          <Typography variant="body2" color={untersuchungColor} fontWeight={500}>
-                            {formatDate(item.untersuchung_gueltig_bis)}
-                          </Typography>
-                        </Tooltip>
-                      </TableCell>
-                      <TableCell>
-                        <Tooltip
-                          title={
-                            item.leistungstest_tage_rest !== null
-                              ? item.leistungstest_tage_rest < 0
-                                ? `Seit ${Math.abs(item.leistungstest_tage_rest)} Tagen abgelaufen`
-                                : `Noch ${item.leistungstest_tage_rest} Tage gültig`
-                              : 'Kein Leistungstest eingetragen'
-                          }
-                        >
-                          <Typography variant="body2" color={leistungstestColor} fontWeight={500}>
-                            {formatDate(item.leistungstest_gueltig_bis)}
-                          </Typography>
-                        </Tooltip>
-                      </TableCell>
-                      <TableCell align="center">
-                        <Chip
-                          label={item.einsatzbereit ? 'Einsatzbereit' : 'Nicht einsatzbereit'}
-                          color={item.einsatzbereit ? 'success' : 'error'}
-                          size="small"
-                          variant="filled"
-                        />
-                      </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>
-                  );
-                })}
-              </TableBody>
-            </Table>
-          </TableContainer>
-        )}
+          if (canWrite) {
+            columns.push({
+              key: 'actions', label: 'Aktionen', align: 'right', sortable: false, searchable: false, render: (item) => (
+                <>
+                  <Tooltip title="Bearbeiten">
+                    <Button size="small" onClick={(e) => { e.stopPropagation(); handleOpenEdit(item); }} sx={{ minWidth: 'auto', mr: 0.5 }}>
+                      <Edit fontSize="small" />
+                    </Button>
+                  </Tooltip>
+                  <Tooltip title="Löschen">
+                    <Button size="small" color="error" onClick={(e) => { e.stopPropagation(); setDeleteId(item.id); }} sx={{ minWidth: 'auto' }}>
+                      <Delete fontSize="small" />
+                    </Button>
+                  </Tooltip>
+                </>
+              ),
+            });
+          }
+
+          return (
+            <DataTable
+              columns={columns}
+              data={filtered}
+              rowKey={(item) => item.id}
+              emptyMessage={traeger.length === 0 ? 'Keine Atemschutzträger vorhanden' : 'Keine Ergebnisse gefunden'}
+              searchEnabled={false}
+              paginationEnabled={false}
+            />
+          );
+        })()}
 
         {/* FAB to create */}
         {canWrite && (
@@ -808,29 +774,16 @@ function Atemschutz() {
         </Dialog>
 
         {/* ── Delete Confirmation Dialog ──────────────────────────────────── */}
-        <Dialog open={deleteId !== null} onClose={() => setDeleteId(null)}>
-          <DialogTitle>Atemschutzträger löschen</DialogTitle>
-          <DialogContent>
-            <DialogContentText>
-              Soll dieser Atemschutzträger-Eintrag wirklich gelöscht werden? Diese Aktion kann
-              nicht rückgängig gemacht werden.
-            </DialogContentText>
-          </DialogContent>
-          <DialogActions>
-            <Button onClick={() => setDeleteId(null)} disabled={deleteLoading}>
-              Abbrechen
-            </Button>
-            <Button
-              color="error"
-              variant="contained"
-              onClick={handleDeleteConfirm}
-              disabled={deleteLoading}
-              startIcon={deleteLoading ? <CircularProgress size={16} /> : undefined}
-            >
-              Löschen
-            </Button>
-          </DialogActions>
-        </Dialog>
+        <ConfirmDialog
+          open={deleteId !== null}
+          onClose={() => setDeleteId(null)}
+          onConfirm={handleDeleteConfirm}
+          title="Atemschutzträger löschen"
+          message="Soll dieser Atemschutzträger-Eintrag wirklich gelöscht werden? Diese Aktion kann nicht rückgängig gemacht werden."
+          confirmLabel="Löschen"
+          confirmColor="error"
+          isLoading={deleteLoading}
+        />
       </Container>
     </DashboardLayout>
   );