add now features

frontend/src/App.tsx

@@ -16,6 +16,7 @@ import FahrzeugForm from './pages/FahrzeugForm';
 import Ausruestung from './pages/Ausruestung';
 import AusruestungForm from './pages/AusruestungForm';
 import AusruestungDetail from './pages/AusruestungDetail';
+import Atemschutz from './pages/Atemschutz';
 import Mitglieder from './pages/Mitglieder';
 import MitgliedDetail from './pages/MitgliedDetail';
 import Kalender from './pages/Kalender';
@@ -135,6 +136,14 @@ function App() {
                 </ProtectedRoute>
               }
             />
+            <Route
+              path="/atemschutz"
+              element={
+                <ProtectedRoute>
+                  <Atemschutz />
+                </ProtectedRoute>
+              }
+            />
             <Route
               path="/mitglieder"
               element={

frontend/src/components/atemschutz/AtemschutzDashboardCard.tsx

@@ -0,0 +1,148 @@
+import React, { useEffect, useState } from 'react';
+import {
+  Box,
+  Card,
+  CardContent,
+  CircularProgress,
+  Link,
+  Typography,
+} from '@mui/material';
+import { Link as RouterLink } from 'react-router-dom';
+import { atemschutzApi } from '../../services/atemschutz';
+import type { AtemschutzStats } from '../../types/atemschutz.types';
+
+interface AtemschutzDashboardCardProps {
+  hideWhenEmpty?: boolean;
+}
+
+const AtemschutzDashboardCard: React.FC<AtemschutzDashboardCardProps> = ({
+  hideWhenEmpty = false,
+}) => {
+  const [stats, setStats] = useState<AtemschutzStats | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let mounted = true;
+    const fetchStats = async () => {
+      try {
+        setLoading(true);
+        setError(null);
+        const data = await atemschutzApi.getStats();
+        if (mounted) setStats(data);
+      } catch {
+        if (mounted) setError('Atemschutzstatus konnte nicht geladen werden.');
+      } finally {
+        if (mounted) setLoading(false);
+      }
+    };
+    fetchStats();
+    return () => {
+      mounted = false;
+    };
+  }, []);
+
+  if (loading) {
+    return (
+      <Card>
+        <CardContent sx={{ display: 'flex', alignItems: 'center', gap: 1, py: 2 }}>
+          <CircularProgress size={16} />
+          <Typography variant="body2" color="text.secondary">
+            Atemschutzstatus wird geladen...
+          </Typography>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (error) {
+    return (
+      <Card>
+        <CardContent>
+          <Typography variant="body2" color="error">
+            {error}
+          </Typography>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (!stats) return null;
+
+  // Determine if there are any concerns
+  const hasConcerns =
+    stats.untersuchungAbgelaufen > 0 ||
+    stats.leistungstestAbgelaufen > 0 ||
+    stats.untersuchungBaldFaellig > 0 ||
+    stats.leistungstestBaldFaellig > 0;
+
+  const allGood = stats.einsatzbereit === stats.total && !hasConcerns;
+
+  // If hideWhenEmpty and everything is fine, render nothing
+  if (hideWhenEmpty && allGood) return null;
+
+  return (
+    <Card>
+      <CardContent>
+        <Typography variant="h6" gutterBottom>
+          Atemschutz
+        </Typography>
+
+        {/* Main metric */}
+        <Typography variant="h4" fontWeight={700} color={allGood ? 'success.main' : 'text.primary'}>
+          {stats.einsatzbereit}/{stats.total}
+        </Typography>
+        <Typography variant="body2" color="text.secondary" sx={{ mb: 1.5 }}>
+          einsatzbereit
+        </Typography>
+
+        {/* Concerns list */}
+        {hasConcerns && (
+          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
+            {stats.untersuchungAbgelaufen > 0 && (
+              <Typography variant="body2" color="error.main">
+                {stats.untersuchungAbgelaufen} Untersuchung{stats.untersuchungAbgelaufen !== 1 ? 'en' : ''} abgelaufen
+              </Typography>
+            )}
+            {stats.leistungstestAbgelaufen > 0 && (
+              <Typography variant="body2" color="error.main">
+                {stats.leistungstestAbgelaufen} Leistungstest{stats.leistungstestAbgelaufen !== 1 ? 's' : ''} abgelaufen
+              </Typography>
+            )}
+            {stats.untersuchungBaldFaellig > 0 && (
+              <Typography variant="body2" color="warning.main">
+                {stats.untersuchungBaldFaellig} Untersuchung{stats.untersuchungBaldFaellig !== 1 ? 'en' : ''} bald fällig
+              </Typography>
+            )}
+            {stats.leistungstestBaldFaellig > 0 && (
+              <Typography variant="body2" color="warning.main">
+                {stats.leistungstestBaldFaellig} Leistungstest{stats.leistungstestBaldFaellig !== 1 ? 's' : ''} bald fällig
+              </Typography>
+            )}
+          </Box>
+        )}
+
+        {/* All good message */}
+        {allGood && (
+          <Typography variant="body2" color="success.main">
+            Alle Atemschutzträger einsatzbereit
+          </Typography>
+        )}
+
+        {/* Link to management page */}
+        <Box sx={{ mt: 2 }}>
+          <Link
+            component={RouterLink}
+            to="/atemschutz"
+            underline="hover"
+            variant="body2"
+          >
+            Zur Verwaltung
+          </Link>
+        </Box>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default AtemschutzDashboardCard;

frontend/src/components/equipment/EquipmentAlerts.tsx

@@ -0,0 +1,251 @@
+import React, { useEffect, useState } from 'react';
+import {
+  Alert,
+  AlertTitle,
+  Box,
+  CircularProgress,
+  Link,
+  Typography,
+} from '@mui/material';
+import { Link as RouterLink } from 'react-router-dom';
+import { equipmentApi } from '../../services/equipment';
+import {
+  AusruestungStatusLabel,
+  AusruestungStatus,
+} from '../../types/equipment.types';
+import type {
+  EquipmentStats,
+  AusruestungListItem,
+} from '../../types/equipment.types';
+
+function formatDate(iso: string): string {
+  return new Date(iso).toLocaleDateString('de-DE', {
+    day: '2-digit',
+    month: '2-digit',
+    year: 'numeric',
+  });
+}
+
+interface EquipmentAlertsProps {
+  daysAhead?: number;
+  hideWhenEmpty?: boolean;
+}
+
+interface AlertGroup {
+  key: string;
+  severity: 'error' | 'warning';
+  title: string;
+  content: React.ReactNode;
+}
+
+const EquipmentAlerts: React.FC<EquipmentAlertsProps> = ({
+  daysAhead = 30,
+  hideWhenEmpty = true,
+}) => {
+  const [stats, setStats] = useState<EquipmentStats | null>(null);
+  const [alerts, setAlerts] = useState<AusruestungListItem[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let mounted = true;
+    const fetchData = async () => {
+      try {
+        setLoading(true);
+        setError(null);
+        const [statsData, alertsData] = await Promise.all([
+          equipmentApi.getStats(),
+          equipmentApi.getAlerts(daysAhead),
+        ]);
+        if (mounted) {
+          setStats(statsData);
+          setAlerts(alertsData);
+        }
+      } catch {
+        if (mounted) setError('Ausrüstungshinweise konnten nicht geladen werden.');
+      } finally {
+        if (mounted) setLoading(false);
+      }
+    };
+    fetchData();
+    return () => { mounted = false; };
+  }, [daysAhead]);
+
+  if (loading) {
+    return (
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, py: 1 }}>
+        <CircularProgress size={16} />
+        <Typography variant="body2" color="text.secondary">
+          Ausrüstungsstatus wird geprüft...
+        </Typography>
+      </Box>
+    );
+  }
+
+  if (error) {
+    return <Alert severity="error">{error}</Alert>;
+  }
+
+  if (!stats) return null;
+
+  // Separate alerts into overdue vs. upcoming inspections
+  const overdueItems = alerts.filter(
+    (a) => a.pruefung_tage_bis_faelligkeit !== null && a.pruefung_tage_bis_faelligkeit < 0
+  );
+  const upcomingItems = alerts.filter(
+    (a) => a.pruefung_tage_bis_faelligkeit !== null && a.pruefung_tage_bis_faelligkeit >= 0
+  );
+
+  // Build alert groups based on stats
+  const groups: AlertGroup[] = [];
+
+  // 1. Overdue inspections
+  if (stats.inspectionsOverdue > 0 && overdueItems.length > 0) {
+    groups.push({
+      key: 'overdue',
+      severity: 'error',
+      title: `Überfällige Prüfungen (${stats.inspectionsOverdue})`,
+      content: (
+        <Box component="ul" sx={{ m: 0, pl: 2 }}>
+          {overdueItems.map((item) => {
+            const tage = Math.abs(item.pruefung_tage_bis_faelligkeit!);
+            const tageText = `seit ${tage} Tag${tage === 1 ? '' : 'en'} überfällig`;
+            return (
+              <Box key={item.id} component="li" sx={{ mb: 0.5 }}>
+                <Link
+                  component={RouterLink}
+                  to={`/ausruestung/${item.id}`}
+                  color="inherit"
+                  underline="hover"
+                  sx={{ fontWeight: 500 }}
+                >
+                  {item.bezeichnung}
+                </Link>
+                {item.kategorie_kurzname ? ` (${item.kategorie_kurzname})` : ''}
+                {' — '}
+                <Typography component="span" variant="body2">
+                  {tageText}
+                  {item.naechste_pruefung_am
+                    ? ` (${formatDate(item.naechste_pruefung_am)})`
+                    : ''}
+                </Typography>
+              </Box>
+            );
+          })}
+        </Box>
+      ),
+    });
+  }
+
+  // 2. Important equipment not ready (affects vehicle readiness)
+  if (stats.wichtigNichtBereit > 0) {
+    groups.push({
+      key: 'wichtig',
+      severity: 'error',
+      title: `Wichtige Ausrüstung nicht einsatzbereit (${stats.wichtigNichtBereit})`,
+      content: (
+        <Typography variant="body2">
+          {stats.wichtigNichtBereit} wichtige{stats.wichtigNichtBereit === 1 ? 's' : ''}
+          {' '}Ausrüstungsteil{stats.wichtigNichtBereit === 1 ? '' : 'e'} nicht
+          einsatzbereit — Fahrzeugbereitschaft kann beeinträchtigt sein.
+        </Typography>
+      ),
+    });
+  }
+
+  // 3. Damaged equipment
+  if (stats.beschaedigt > 0) {
+    groups.push({
+      key: 'beschaedigt',
+      severity: 'error',
+      title: `${AusruestungStatusLabel[AusruestungStatus.Beschaedigt]} (${stats.beschaedigt})`,
+      content: (
+        <Typography variant="body2">
+          {stats.beschaedigt} Ausrüstungsteil{stats.beschaedigt === 1 ? '' : 'e'}{' '}
+          {stats.beschaedigt === 1 ? 'ist' : 'sind'} als{' '}
+          {AusruestungStatusLabel[AusruestungStatus.Beschaedigt].toLowerCase()} gemeldet.
+        </Typography>
+      ),
+    });
+  }
+
+  // 4. Upcoming inspections
+  if (stats.inspectionsDue > 0 && upcomingItems.length > 0) {
+    groups.push({
+      key: 'upcoming',
+      severity: 'warning',
+      title: `Prüfungen fällig in den nächsten ${daysAhead} Tagen (${stats.inspectionsDue})`,
+      content: (
+        <Box component="ul" sx={{ m: 0, pl: 2 }}>
+          {upcomingItems.map((item) => {
+            const tage = item.pruefung_tage_bis_faelligkeit!;
+            const tageText =
+              tage === 0
+                ? 'heute fällig'
+                : `fällig in ${tage} Tag${tage === 1 ? '' : 'en'}`;
+            return (
+              <Box key={item.id} component="li" sx={{ mb: 0.5 }}>
+                <Link
+                  component={RouterLink}
+                  to={`/ausruestung/${item.id}`}
+                  color="inherit"
+                  underline="hover"
+                  sx={{ fontWeight: 500 }}
+                >
+                  {item.bezeichnung}
+                </Link>
+                {item.kategorie_kurzname ? ` (${item.kategorie_kurzname})` : ''}
+                {' — '}
+                <Typography component="span" variant="body2">
+                  {tageText}
+                  {item.naechste_pruefung_am
+                    ? ` (${formatDate(item.naechste_pruefung_am)})`
+                    : ''}
+                </Typography>
+              </Box>
+            );
+          })}
+        </Box>
+      ),
+    });
+  }
+
+  // 5. In maintenance
+  if (stats.inWartung > 0) {
+    groups.push({
+      key: 'wartung',
+      severity: 'warning',
+      title: `${AusruestungStatusLabel[AusruestungStatus.InWartung]} (${stats.inWartung})`,
+      content: (
+        <Typography variant="body2">
+          {stats.inWartung} Ausrüstungsteil{stats.inWartung === 1 ? '' : 'e'}{' '}
+          {stats.inWartung === 1 ? 'befindet' : 'befinden'} sich derzeit in Wartung.
+        </Typography>
+      ),
+    });
+  }
+
+  // Nothing to show
+  if (groups.length === 0) {
+    if (hideWhenEmpty) return null;
+    return (
+      <Alert severity="success">
+        Alle Ausrüstung ist einsatzbereit. Keine Auffälligkeiten in den nächsten{' '}
+        {daysAhead} Tagen.
+      </Alert>
+    );
+  }
+
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
+      {groups.map(({ key, severity, title, content }) => (
+        <Alert key={key} severity={severity} variant="outlined">
+          <AlertTitle sx={{ fontWeight: 600 }}>{title}</AlertTitle>
+          {content}
+        </Alert>
+      ))}
+    </Box>
+  );
+};
+
+export default EquipmentAlerts;

frontend/src/components/shared/Sidebar.tsx

@@ -10,11 +10,10 @@ import {
 } from '@mui/material';
 import {
   Dashboard as DashboardIcon,
-  LocalFireDepartment,
   DirectionsCar,
   Build,
   People,
-  CalendarMonth as CalendarIcon,
+  Air,
 } from '@mui/icons-material';
 import { useNavigate, useLocation } from 'react-router-dom';
 
@@ -32,11 +31,6 @@ const navigationItems: NavigationItem[] = [
     icon: <DashboardIcon />,
     path: '/dashboard',
   },
-  {
-    text: 'Einsätze',
-    icon: <LocalFireDepartment />,
-    path: '/einsaetze',
-  },
   {
     text: 'Fahrzeuge',
     icon: <DirectionsCar />,
@@ -53,9 +47,9 @@ const navigationItems: NavigationItem[] = [
     path: '/mitglieder',
   },
   {
-    text: 'Dienstkalender',
-    icon: <CalendarIcon />,
-    path: '/kalender',
+    text: 'Atemschutz',
+    icon: <Air />,
+    path: '/atemschutz',
   },
 ];
 

frontend/src/pages/Atemschutz.tsx

@@ -0,0 +1,777 @@
+import React, { useEffect, useState, useCallback, useMemo } from 'react';
+import {
+  Alert,
+  Box,
+  Button,
+  Card,
+  CardContent,
+  Checkbox,
+  Chip,
+  CircularProgress,
+  Container,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  Fab,
+  FormControl,
+  FormControlLabel,
+  Grid,
+  InputAdornment,
+  InputLabel,
+  MenuItem,
+  Select,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  TextField,
+  Tooltip,
+  Typography,
+} from '@mui/material';
+import {
+  Add,
+  Check,
+  Close,
+  Edit,
+  Delete,
+  Search,
+} from '@mui/icons-material';
+import DashboardLayout from '../components/dashboard/DashboardLayout';
+import { atemschutzApi } from '../services/atemschutz';
+import { membersService } from '../services/members';
+import { useNotification } from '../contexts/NotificationContext';
+import type {
+  AtemschutzUebersicht,
+  AtemschutzStats,
+  CreateAtemschutzPayload,
+  UpdateAtemschutzPayload,
+  UntersuchungErgebnis,
+} from '../types/atemschutz.types';
+import { UntersuchungErgebnisLabel } from '../types/atemschutz.types';
+import type { MemberListItem } from '../types/member.types';
+
+// ── Helpers ──────────────────────────────────────────────────────────────────
+
+function formatDate(iso: string | null): string {
+  if (!iso) return '—';
+  return new Date(iso).toLocaleDateString('de-DE', {
+    day: '2-digit',
+    month: '2-digit',
+    year: 'numeric',
+  });
+}
+
+function getDisplayName(item: AtemschutzUebersicht): string {
+  if (item.user_family_name || item.user_given_name) {
+    return [item.user_family_name, item.user_given_name].filter(Boolean).join(', ');
+  }
+  return item.user_name || item.user_email;
+}
+
+type ValidityColor = 'success.main' | 'error.main' | 'warning.main' | 'text.secondary';
+
+function getValidityColor(
+  gueltigBis: string | null,
+  tageRest: number | null,
+  soonThresholdDays: number
+): ValidityColor {
+  if (!gueltigBis || tageRest === null) return 'text.secondary';
+  if (tageRest < 0) return 'error.main';
+  if (tageRest <= soonThresholdDays) return 'warning.main';
+  return 'success.main';
+}
+
+// ── Initial form state ───────────────────────────────────────────────────────
+
+interface AtemschutzFormState {
+  user_id: string;
+  atemschutz_lehrgang: boolean;
+  lehrgang_datum: string;
+  untersuchung_datum: string;
+  untersuchung_gueltig_bis: string;
+  untersuchung_ergebnis: UntersuchungErgebnis | '';
+  leistungstest_datum: string;
+  leistungstest_gueltig_bis: string;
+  leistungstest_bestanden: boolean;
+  bemerkung: string;
+}
+
+const EMPTY_FORM: AtemschutzFormState = {
+  user_id: '',
+  atemschutz_lehrgang: false,
+  lehrgang_datum: '',
+  untersuchung_datum: '',
+  untersuchung_gueltig_bis: '',
+  untersuchung_ergebnis: '',
+  leistungstest_datum: '',
+  leistungstest_gueltig_bis: '',
+  leistungstest_bestanden: false,
+  bemerkung: '',
+};
+
+// ── Stats Card ───────────────────────────────────────────────────────────────
+
+interface StatCardProps {
+  label: string;
+  value: number;
+  color?: string;
+  bgcolor?: string;
+}
+
+const StatCard: React.FC<StatCardProps> = ({ label, value, color, bgcolor }) => (
+  <Card sx={{ bgcolor: bgcolor || 'background.paper', height: '100%' }}>
+    <CardContent sx={{ textAlign: 'center', py: 2 }}>
+      <Typography variant="h3" fontWeight={700} color={color || 'text.primary'}>
+        {value}
+      </Typography>
+      <Typography variant="body2" color={color ? color : 'text.secondary'} sx={{ mt: 0.5 }}>
+        {label}
+      </Typography>
+    </CardContent>
+  </Card>
+);
+
+// ── Main Page ────────────────────────────────────────────────────────────────
+
+function Atemschutz() {
+  const notification = useNotification();
+
+  // Data state
+  const [traeger, setTraeger] = useState<AtemschutzUebersicht[]>([]);
+  const [stats, setStats] = useState<AtemschutzStats | null>(null);
+  const [members, setMembers] = useState<MemberListItem[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // Filter state
+  const [search, setSearch] = useState('');
+
+  // Dialog state
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [form, setForm] = useState<AtemschutzFormState>({ ...EMPTY_FORM });
+  const [dialogLoading, setDialogLoading] = useState(false);
+  const [dialogError, setDialogError] = useState<string | null>(null);
+
+  // Delete confirmation
+  const [deleteId, setDeleteId] = useState<string | null>(null);
+  const [deleteLoading, setDeleteLoading] = useState(false);
+
+  // ── Data loading ─────────────────────────────────────────────────────────
+
+  const fetchData = useCallback(async () => {
+    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);
+    } catch {
+      setError('Atemschutzdaten konnten nicht geladen werden. Bitte versuchen Sie es erneut.');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  // ── Filtering ────────────────────────────────────────────────────────────
+
+  const filtered = useMemo(() => {
+    if (!search.trim()) return traeger;
+    const q = search.toLowerCase();
+    return traeger.filter((item) => {
+      const name = getDisplayName(item).toLowerCase();
+      const email = item.user_email.toLowerCase();
+      const dienstgrad = (item.dienstgrad || '').toLowerCase();
+      return name.includes(q) || email.includes(q) || dienstgrad.includes(q);
+    });
+  }, [traeger, search]);
+
+  // Members who do not already have an Atemschutz record
+  const availableMembers = useMemo(() => {
+    const existingUserIds = new Set(traeger.map((t) => t.user_id));
+    return members.filter((m) => !existingUserIds.has(m.id));
+  }, [members, traeger]);
+
+  // ── Dialog handlers ──────────────────────────────────────────────────────
+
+  const handleOpenCreate = () => {
+    setEditingId(null);
+    setForm({ ...EMPTY_FORM });
+    setDialogError(null);
+    setDialogOpen(true);
+  };
+
+  const handleOpenEdit = (item: AtemschutzUebersicht) => {
+    setEditingId(item.id);
+    setForm({
+      user_id: item.user_id,
+      atemschutz_lehrgang: item.atemschutz_lehrgang,
+      lehrgang_datum: item.lehrgang_datum || '',
+      untersuchung_datum: item.untersuchung_datum || '',
+      untersuchung_gueltig_bis: item.untersuchung_gueltig_bis || '',
+      untersuchung_ergebnis: item.untersuchung_ergebnis || '',
+      leistungstest_datum: item.leistungstest_datum || '',
+      leistungstest_gueltig_bis: item.leistungstest_gueltig_bis || '',
+      leistungstest_bestanden: item.leistungstest_bestanden || false,
+      bemerkung: item.bemerkung || '',
+    });
+    setDialogError(null);
+    setDialogOpen(true);
+  };
+
+  const handleDialogClose = () => {
+    setDialogOpen(false);
+    setEditingId(null);
+    setForm({ ...EMPTY_FORM });
+    setDialogError(null);
+  };
+
+  const handleFormChange = (
+    field: keyof AtemschutzFormState,
+    value: string | boolean
+  ) => {
+    setForm((prev) => ({ ...prev, [field]: value }));
+  };
+
+  const handleSubmit = async () => {
+    setDialogError(null);
+
+    if (!editingId && !form.user_id) {
+      setDialogError('Bitte ein Mitglied auswählen.');
+      return;
+    }
+
+    setDialogLoading(true);
+    try {
+      if (editingId) {
+        const payload: UpdateAtemschutzPayload = {
+          atemschutz_lehrgang: form.atemschutz_lehrgang,
+          lehrgang_datum: form.lehrgang_datum || undefined,
+          untersuchung_datum: form.untersuchung_datum || undefined,
+          untersuchung_gueltig_bis: form.untersuchung_gueltig_bis || undefined,
+          untersuchung_ergebnis: (form.untersuchung_ergebnis as UntersuchungErgebnis) || undefined,
+          leistungstest_datum: form.leistungstest_datum || undefined,
+          leistungstest_gueltig_bis: form.leistungstest_gueltig_bis || undefined,
+          leistungstest_bestanden: form.leistungstest_bestanden,
+          bemerkung: form.bemerkung || undefined,
+        };
+        await atemschutzApi.update(editingId, payload);
+        notification.showSuccess('Atemschutzträger erfolgreich aktualisiert.');
+      } else {
+        const payload: CreateAtemschutzPayload = {
+          user_id: form.user_id,
+          atemschutz_lehrgang: form.atemschutz_lehrgang,
+          lehrgang_datum: form.lehrgang_datum || undefined,
+          untersuchung_datum: form.untersuchung_datum || undefined,
+          untersuchung_gueltig_bis: form.untersuchung_gueltig_bis || undefined,
+          untersuchung_ergebnis: (form.untersuchung_ergebnis as UntersuchungErgebnis) || undefined,
+          leistungstest_datum: form.leistungstest_datum || undefined,
+          leistungstest_gueltig_bis: form.leistungstest_gueltig_bis || undefined,
+          leistungstest_bestanden: form.leistungstest_bestanden,
+          bemerkung: form.bemerkung || undefined,
+        };
+        await atemschutzApi.create(payload);
+        notification.showSuccess('Atemschutzträger erfolgreich angelegt.');
+      }
+      handleDialogClose();
+      fetchData();
+    } catch (err: any) {
+      const msg = err?.message || 'Ein Fehler ist aufgetreten.';
+      setDialogError(msg);
+      notification.showError(msg);
+    } finally {
+      setDialogLoading(false);
+    }
+  };
+
+  // ── Delete handlers ──────────────────────────────────────────────────────
+
+  const handleDeleteConfirm = async () => {
+    if (!deleteId) return;
+    setDeleteLoading(true);
+    try {
+      await atemschutzApi.delete(deleteId);
+      notification.showSuccess('Atemschutzträger erfolgreich gelöscht.');
+      setDeleteId(null);
+      fetchData();
+    } catch (err: any) {
+      notification.showError(err?.message || 'Löschen fehlgeschlagen.');
+    } finally {
+      setDeleteLoading(false);
+    }
+  };
+
+  // ── Render ───────────────────────────────────────────────────────────────
+
+  return (
+    <DashboardLayout>
+      <Container maxWidth="lg">
+        {/* Header */}
+        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 3 }}>
+          <Box>
+            <Typography variant="h4" gutterBottom sx={{ mb: 0 }}>
+              Atemschutzverwaltung
+            </Typography>
+            {!loading && stats && (
+              <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1, mt: 0.5 }}>
+                <Typography variant="body2" color="text.secondary">
+                  {stats.total} Gesamt
+                </Typography>
+                <Typography variant="body2" color="text.secondary">{'·'}</Typography>
+                <Typography variant="body2" color="success.main" fontWeight={600}>
+                  {stats.einsatzbereit} Einsatzbereit
+                </Typography>
+                <Typography variant="body2" color="text.secondary">{'·'}</Typography>
+                <Typography
+                  variant="body2"
+                  color={stats.untersuchungAbgelaufen > 0 ? 'error.main' : 'text.secondary'}
+                  fontWeight={stats.untersuchungAbgelaufen > 0 ? 600 : 400}
+                >
+                  {stats.untersuchungAbgelaufen} Untersuchung abgelaufen
+                </Typography>
+              </Box>
+            )}
+          </Box>
+        </Box>
+
+        {/* Stats cards */}
+        {!loading && stats && (
+          <Grid container spacing={2} sx={{ mb: 3 }}>
+            <Grid item xs={6} sm={3}>
+              <StatCard
+                label="Einsatzbereit"
+                value={stats.einsatzbereit}
+                color="#fff"
+                bgcolor="success.main"
+              />
+            </Grid>
+            <Grid item xs={6} sm={3}>
+              <StatCard label="Lehrgang absolviert" value={stats.mitLehrgang} />
+            </Grid>
+            <Grid item xs={6} sm={3}>
+              <StatCard label="Untersuchung gültig" value={stats.untersuchungGueltig} />
+            </Grid>
+            <Grid item xs={6} sm={3}>
+              <StatCard label="Leistungstest gültig" value={stats.leistungstestGueltig} />
+            </Grid>
+          </Grid>
+        )}
+
+        {/* Search bar */}
+        <Box sx={{ mb: 3 }}>
+          <TextField
+            placeholder="Suchen (Name, E-Mail, Dienstgrad...)"
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            size="small"
+            sx={{ minWidth: 280, maxWidth: 480, width: '100%' }}
+            InputProps={{
+              startAdornment: (
+                <InputAdornment position="start">
+                  <Search />
+                </InputAdornment>
+              ),
+            }}
+          />
+        </Box>
+
+        {/* Loading state */}
+        {loading && (
+          <Box sx={{ display: 'flex', justifyContent: 'center', py: 8 }}>
+            <CircularProgress />
+          </Box>
+        )}
+
+        {/* Error state */}
+        {!loading && error && (
+          <Alert
+            severity="error"
+            sx={{ mb: 2 }}
+            action={
+              <Button color="inherit" size="small" onClick={fetchData}>
+                Erneut versuchen
+              </Button>
+            }
+          >
+            {error}
+          </Alert>
+        )}
+
+        {/* Empty state */}
+        {!loading && !error && filtered.length === 0 && (
+          <Box sx={{ textAlign: 'center', py: 8 }}>
+            <Typography variant="h6" color="text.secondary">
+              {traeger.length === 0
+                ? 'Keine Atemschutzträger vorhanden'
+                : 'Keine Ergebnisse gefunden'}
+            </Typography>
+          </Box>
+        )}
+
+        {/* Table */}
+        {!loading && !error && filtered.length > 0 && (
+          <TableContainer>
+            <Table size="small">
+              <TableHead>
+                <TableRow>
+                  <TableCell>Name</TableCell>
+                  <TableCell>Dienstgrad</TableCell>
+                  <TableCell align="center">Lehrgang</TableCell>
+                  <TableCell>Untersuchung gültig bis</TableCell>
+                  <TableCell>Leistungstest gültig bis</TableCell>
+                  <TableCell align="center">Status</TableCell>
+                  <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
+                  );
+
+                  return (
+                    <TableRow key={item.id} hover>
+                      <TableCell>
+                        <Typography variant="body2" fontWeight={500}>
+                          {getDisplayName(item)}
+                        </Typography>
+                        <Typography variant="caption" color="text.secondary">
+                          {item.user_email}
+                        </Typography>
+                      </TableCell>
+                      <TableCell>
+                        <Typography variant="body2">
+                          {item.dienstgrad || '—'}
+                        </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>
+                      <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>
+        )}
+
+        {/* FAB to create */}
+        <Fab
+          color="primary"
+          aria-label="Atemschutzträger hinzufügen"
+          sx={{ position: 'fixed', bottom: 32, right: 32 }}
+          onClick={handleOpenCreate}
+        >
+          <Add />
+        </Fab>
+
+        {/* ── Add / Edit Dialog ───────────────────────────────────────────── */}
+        <Dialog
+          open={dialogOpen}
+          onClose={handleDialogClose}
+          maxWidth="sm"
+          fullWidth
+        >
+          <DialogTitle>
+            {editingId ? 'Atemschutzträger bearbeiten' : 'Neuen Atemschutzträger anlegen'}
+          </DialogTitle>
+          <DialogContent>
+            {dialogError && (
+              <Alert severity="error" sx={{ mb: 2, mt: 1 }}>
+                {dialogError}
+              </Alert>
+            )}
+
+            <Grid container spacing={2} sx={{ mt: 0.5 }}>
+              {/* User selection (only when creating) */}
+              {!editingId && (
+                <Grid item xs={12}>
+                  <FormControl fullWidth size="small" required>
+                    <InputLabel>Mitglied</InputLabel>
+                    <Select
+                      value={form.user_id}
+                      label="Mitglied"
+                      onChange={(e) => handleFormChange('user_id', e.target.value)}
+                    >
+                      {availableMembers.map((m) => {
+                        const displayName = [m.family_name, m.given_name]
+                          .filter(Boolean)
+                          .join(', ') || m.name || m.email;
+                        return (
+                          <MenuItem key={m.id} value={m.id}>
+                            {displayName}
+                            {m.dienstgrad ? ` (${m.dienstgrad})` : ''}
+                          </MenuItem>
+                        );
+                      })}
+                      {availableMembers.length === 0 && (
+                        <MenuItem disabled value="">
+                          Keine verfügbaren Mitglieder
+                        </MenuItem>
+                      )}
+                    </Select>
+                  </FormControl>
+                </Grid>
+              )}
+
+              {/* Lehrgang */}
+              <Grid item xs={12}>
+                <Typography variant="subtitle2" color="text.secondary" sx={{ mb: 1 }}>
+                  Lehrgang
+                </Typography>
+              </Grid>
+              <Grid item xs={6}>
+                <FormControlLabel
+                  control={
+                    <Checkbox
+                      checked={form.atemschutz_lehrgang}
+                      onChange={(e) => handleFormChange('atemschutz_lehrgang', e.target.checked)}
+                    />
+                  }
+                  label="Lehrgang absolviert"
+                />
+              </Grid>
+              <Grid item xs={6}>
+                <TextField
+                  label="Lehrgang Datum"
+                  type="date"
+                  size="small"
+                  fullWidth
+                  value={form.lehrgang_datum}
+                  onChange={(e) => handleFormChange('lehrgang_datum', e.target.value)}
+                  InputLabelProps={{ shrink: true }}
+                />
+              </Grid>
+
+              {/* Untersuchung */}
+              <Grid item xs={12}>
+                <Typography variant="subtitle2" color="text.secondary" sx={{ mb: 1, mt: 1 }}>
+                  Untersuchung
+                </Typography>
+              </Grid>
+              <Grid item xs={6}>
+                <TextField
+                  label="Untersuchung Datum"
+                  type="date"
+                  size="small"
+                  fullWidth
+                  value={form.untersuchung_datum}
+                  onChange={(e) => handleFormChange('untersuchung_datum', e.target.value)}
+                  InputLabelProps={{ shrink: true }}
+                />
+              </Grid>
+              <Grid item xs={6}>
+                <TextField
+                  label="Gültig bis"
+                  type="date"
+                  size="small"
+                  fullWidth
+                  value={form.untersuchung_gueltig_bis}
+                  onChange={(e) => handleFormChange('untersuchung_gueltig_bis', e.target.value)}
+                  InputLabelProps={{ shrink: true }}
+                />
+              </Grid>
+              <Grid item xs={12}>
+                <FormControl fullWidth size="small">
+                  <InputLabel>Ergebnis</InputLabel>
+                  <Select
+                    value={form.untersuchung_ergebnis}
+                    label="Ergebnis"
+                    onChange={(e) => handleFormChange('untersuchung_ergebnis', e.target.value)}
+                  >
+                    <MenuItem value="">— Nicht angegeben —</MenuItem>
+                    {(Object.keys(UntersuchungErgebnisLabel) as UntersuchungErgebnis[]).map(
+                      (key) => (
+                        <MenuItem key={key} value={key}>
+                          {UntersuchungErgebnisLabel[key]}
+                        </MenuItem>
+                      )
+                    )}
+                  </Select>
+                </FormControl>
+              </Grid>
+
+              {/* Leistungstest */}
+              <Grid item xs={12}>
+                <Typography variant="subtitle2" color="text.secondary" sx={{ mb: 1, mt: 1 }}>
+                  Leistungstest
+                </Typography>
+              </Grid>
+              <Grid item xs={6}>
+                <TextField
+                  label="Leistungstest Datum"
+                  type="date"
+                  size="small"
+                  fullWidth
+                  value={form.leistungstest_datum}
+                  onChange={(e) => handleFormChange('leistungstest_datum', e.target.value)}
+                  InputLabelProps={{ shrink: true }}
+                />
+              </Grid>
+              <Grid item xs={6}>
+                <TextField
+                  label="Gültig bis"
+                  type="date"
+                  size="small"
+                  fullWidth
+                  value={form.leistungstest_gueltig_bis}
+                  onChange={(e) => handleFormChange('leistungstest_gueltig_bis', e.target.value)}
+                  InputLabelProps={{ shrink: true }}
+                />
+              </Grid>
+              <Grid item xs={12}>
+                <FormControlLabel
+                  control={
+                    <Checkbox
+                      checked={form.leistungstest_bestanden}
+                      onChange={(e) => handleFormChange('leistungstest_bestanden', e.target.checked)}
+                    />
+                  }
+                  label="Leistungstest bestanden"
+                />
+              </Grid>
+
+              {/* Bemerkung */}
+              <Grid item xs={12}>
+                <TextField
+                  label="Bemerkung"
+                  multiline
+                  rows={3}
+                  size="small"
+                  fullWidth
+                  value={form.bemerkung}
+                  onChange={(e) => handleFormChange('bemerkung', e.target.value)}
+                />
+              </Grid>
+            </Grid>
+          </DialogContent>
+          <DialogActions>
+            <Button onClick={handleDialogClose} disabled={dialogLoading}>
+              Abbrechen
+            </Button>
+            <Button
+              variant="contained"
+              onClick={handleSubmit}
+              disabled={dialogLoading}
+              startIcon={dialogLoading ? <CircularProgress size={16} /> : undefined}
+            >
+              {editingId ? 'Speichern' : 'Anlegen'}
+            </Button>
+          </DialogActions>
+        </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>
+      </Container>
+    </DashboardLayout>
+  );
+}
+
+export default Atemschutz;

frontend/src/pages/Dashboard.tsx

@@ -7,9 +7,6 @@ import {
   Fade,
 } from '@mui/material';
 import {
-  People,
-  Warning,
-  EventNote,
   DirectionsCar,
 } from '@mui/icons-material';
 import { useAuth } from '../contexts/AuthContext';
@@ -23,13 +20,18 @@ import NextcloudTalkWidget from '../components/dashboard/NextcloudTalkWidget';
 import StatsCard from '../components/dashboard/StatsCard';
 import ActivityFeed from '../components/dashboard/ActivityFeed';
 import InspectionAlerts from '../components/vehicles/InspectionAlerts';
+import EquipmentAlerts from '../components/equipment/EquipmentAlerts';
+import AtemschutzDashboardCard from '../components/atemschutz/AtemschutzDashboardCard';
 import { vehiclesApi } from '../services/vehicles';
+import { equipmentApi } from '../services/equipment';
 import type { VehicleStats } from '../types/vehicle.types';
+import type { VehicleEquipmentWarning } from '../types/equipment.types';
 
 function Dashboard() {
   const { user } = useAuth();
   const [dataLoading, setDataLoading] = useState(true);
   const [vehicleStats, setVehicleStats] = useState<VehicleStats | null>(null);
+  const [vehicleWarnings, setVehicleWarnings] = useState<VehicleEquipmentWarning[]>([]);
 
   useEffect(() => {
     const timer = setTimeout(() => {
@@ -43,6 +45,13 @@ function Dashboard() {
         // Non-critical — KPI will fall back to placeholder
       });
 
+    // Fetch vehicle equipment warnings
+    equipmentApi.getVehicleWarnings()
+      .then((w) => setVehicleWarnings(w))
+      .catch(() => {
+        // Non-critical — warning indicator simply won't appear
+      });
+
     return () => clearTimeout(timer);
   }, []);
 
@@ -80,62 +89,12 @@ function Dashboard() {
             </Grid>
           )}
 
-          {/* Stats Cards Row */}
-          <Grid item xs={12} sm={6} md={3}>
-            {dataLoading ? (
-              <SkeletonCard variant="basic" />
-            ) : (
-              <Fade in={true} timeout={600} style={{ transitionDelay: '200ms' }}>
-                <Box>
-                  <StatsCard
-                    title="Aktive Mitglieder"
-                    value="24"
-                    icon={People}
-                    color="primary.main"
-                  />
-                </Box>
-              </Fade>
-            )}
-          </Grid>
-          <Grid item xs={12} sm={6} md={3}>
-            {dataLoading ? (
-              <SkeletonCard variant="basic" />
-            ) : (
-              <Fade in={true} timeout={600} style={{ transitionDelay: '250ms' }}>
-                <Box>
-                  <StatsCard
-                    title="Einsätze (Jahr)"
-                    value="18"
-                    icon={Warning}
-                    color="error.main"
-                  />
-                </Box>
-              </Fade>
-            )}
-          </Grid>
-          <Grid item xs={12} sm={6} md={3}>
-            {dataLoading ? (
-              <SkeletonCard variant="basic" />
-            ) : (
-              <Fade in={true} timeout={600} style={{ transitionDelay: '300ms' }}>
-                <Box>
-                  <StatsCard
-                    title="Offene Aufgaben"
-                    value="7"
-                    icon={EventNote}
-                    color="warning.main"
-                  />
-                </Box>
-              </Fade>
-            )}
-          </Grid>
-
           {/* Live vehicle KPI — einsatzbereit count from API */}
           <Grid item xs={12} sm={6} md={3}>
             {dataLoading ? (
               <SkeletonCard variant="basic" />
             ) : (
-              <Fade in={true} timeout={600} style={{ transitionDelay: '350ms' }}>
+              <Fade in={true} timeout={600} style={{ transitionDelay: '200ms' }}>
                 <Box>
                   <StatsCard
                     title="Fahrzeuge einsatzbereit"
@@ -147,6 +106,11 @@ function Dashboard() {
                     icon={DirectionsCar}
                     color="success.main"
                   />
+                  {vehicleWarnings.length > 0 && (
+                    <Typography variant="caption" color="warning.main" sx={{ mt: 0.5, display: 'block', textAlign: 'center' }}>
+                      {new Set(vehicleWarnings.map(w => w.fahrzeug_id)).size} Fzg. mit Ausrüstungsmangel
+                    </Typography>
+                  )}
                 </Box>
               </Fade>
             )}
@@ -161,6 +125,24 @@ function Dashboard() {
             </Fade>
           </Grid>
 
+          {/* Equipment Alerts Panel */}
+          <Grid item xs={12}>
+            <Fade in={!dataLoading} timeout={600} style={{ transitionDelay: '400ms' }}>
+              <Box>
+                <EquipmentAlerts daysAhead={30} hideWhenEmpty={true} />
+              </Box>
+            </Fade>
+          </Grid>
+
+          {/* Atemschutz Status Card */}
+          <Grid item xs={12} md={6}>
+            <Fade in={!dataLoading} timeout={600} style={{ transitionDelay: '420ms' }}>
+              <Box>
+                <AtemschutzDashboardCard />
+              </Box>
+            </Fade>
+          </Grid>
+
           {/* Service Integration Cards */}
           <Grid item xs={12}>
             <Typography variant="h6" gutterBottom sx={{ mt: 2 }}>

frontend/src/services/atemschutz.ts

@@ -0,0 +1,64 @@
+import { api } from './api';
+import type {
+  AtemschutzUebersicht,
+  AtemschutzTraeger,
+  AtemschutzStats,
+  CreateAtemschutzPayload,
+  UpdateAtemschutzPayload,
+} from '../types/atemschutz.types';
+
+async function unwrap<T>(
+  promise: ReturnType<typeof api.get<{ success: boolean; data: T }>>
+): Promise<T> {
+  const response = await promise;
+  if (response.data?.data === undefined || response.data?.data === null) {
+    throw new Error('Invalid API response');
+  }
+  return response.data.data;
+}
+
+export const atemschutzApi = {
+  async getAll(): Promise<AtemschutzUebersicht[]> {
+    return unwrap(
+      api.get<{ success: boolean; data: AtemschutzUebersicht[] }>('/api/atemschutz')
+    );
+  },
+
+  async getById(id: string): Promise<AtemschutzUebersicht> {
+    return unwrap(
+      api.get<{ success: boolean; data: AtemschutzUebersicht }>(`/api/atemschutz/${id}`)
+    );
+  },
+
+  async getStats(): Promise<AtemschutzStats> {
+    return unwrap(
+      api.get<{ success: boolean; data: AtemschutzStats }>('/api/atemschutz/stats')
+    );
+  },
+
+  async create(payload: CreateAtemschutzPayload): Promise<AtemschutzTraeger> {
+    const response = await api.post<{ success: boolean; data: AtemschutzTraeger }>(
+      '/api/atemschutz',
+      payload
+    );
+    if (response.data?.data === undefined || response.data?.data === null) {
+      throw new Error('Invalid API response');
+    }
+    return response.data.data;
+  },
+
+  async update(id: string, payload: UpdateAtemschutzPayload): Promise<AtemschutzTraeger> {
+    const response = await api.patch<{ success: boolean; data: AtemschutzTraeger }>(
+      `/api/atemschutz/${id}`,
+      payload
+    );
+    if (response.data?.data === undefined || response.data?.data === null) {
+      throw new Error('Invalid API response');
+    }
+    return response.data.data;
+  },
+
+  async delete(id: string): Promise<void> {
+    await api.delete(`/api/atemschutz/${id}`);
+  },
+};

frontend/src/types/atemschutz.types.ts

@@ -0,0 +1,76 @@
+// =============================================================================
+// Atemschutz (Breathing Apparatus) Carrier Management — Frontend Type Definitions
+// =============================================================================
+
+export type UntersuchungErgebnis = 'tauglich' | 'bedingt_tauglich' | 'nicht_tauglich';
+
+export const UntersuchungErgebnisLabel: Record<UntersuchungErgebnis, string> = {
+  tauglich: 'Tauglich',
+  bedingt_tauglich: 'Bedingt tauglich',
+  nicht_tauglich: 'Nicht tauglich',
+};
+
+// ── Core Entity ────────────────────────────────────────────────────────────
+
+export interface AtemschutzTraeger {
+  id: string;
+  user_id: string;
+  atemschutz_lehrgang: boolean;
+  lehrgang_datum: string | null;
+  untersuchung_datum: string | null;
+  untersuchung_gueltig_bis: string | null;
+  untersuchung_ergebnis: UntersuchungErgebnis | null;
+  leistungstest_datum: string | null;
+  leistungstest_gueltig_bis: string | null;
+  leistungstest_bestanden: boolean | null;
+  bemerkung: string | null;
+  created_at: string;
+  updated_at: string;
+}
+
+// ── List / Overview Shape (joined with user data) ──────────────────────────
+
+export interface AtemschutzUebersicht extends AtemschutzTraeger {
+  user_name: string | null;
+  user_given_name: string | null;
+  user_family_name: string | null;
+  user_email: string;
+  mitglied_status: string | null;
+  dienstgrad: string | null;
+  untersuchung_gueltig: boolean;
+  untersuchung_tage_rest: number | null;
+  leistungstest_gueltig: boolean;
+  leistungstest_tage_rest: number | null;
+  einsatzbereit: boolean;
+}
+
+// ── Dashboard KPI ──────────────────────────────────────────────────────────
+
+export interface AtemschutzStats {
+  total: number;
+  mitLehrgang: number;
+  untersuchungGueltig: number;
+  untersuchungAbgelaufen: number;
+  untersuchungBaldFaellig: number;
+  leistungstestGueltig: number;
+  leistungstestAbgelaufen: number;
+  leistungstestBaldFaellig: number;
+  einsatzbereit: number;
+}
+
+// ── Request Payload Types ──────────────────────────────────────────────────
+
+export interface CreateAtemschutzPayload {
+  user_id: string;
+  atemschutz_lehrgang?: boolean;
+  lehrgang_datum?: string;
+  untersuchung_datum?: string;
+  untersuchung_gueltig_bis?: string;
+  untersuchung_ergebnis?: UntersuchungErgebnis;
+  leistungstest_datum?: string;
+  leistungstest_gueltig_bis?: string;
+  leistungstest_bestanden?: boolean;
+  bemerkung?: string;
+}
+
+export type UpdateAtemschutzPayload = Omit<Partial<CreateAtemschutzPayload>, 'user_id'>;