Phase 1: Stammdatenverwaltung

Ab hier fuehrt die Wehr ihren Bestand in FLORIAN.

Datenmodell:
- Standort, Geraeteraum, Geraetetyp, Qualifikationstyp und Qualifikation
- Fahrzeug um Fahrgestellnummer, DIN-Typ, Erstzulassung, Sitzplaetze,
  Tankinhalt und UVV-Frist erweitert
- Geraet um Geraetetyp, Lebensdauerkategorie, errechnetes Lebensdauerende,
  Anschaffungspreis und die Lagerung erweitert
- Ein Geraet steht entweder an einem Standort oder ist auf einem Fahrzeug
  verlastet. Eine Pruefbedingung setzt das durch, ein Trigger stellt zusaetzlich
  sicher, dass ein angegebener Geraeteraum zum angegebenen Fahrzeug gehoert.
- RLS auf allen neuen Tabellen, Trigram-Indizes fuer die Volltextsuche

Fachlogik:
- lib/stammdaten/fristen.ts rechnet Prueftermine, Lebensdauer und den
  abgeleiteten Geraetestatus. Der Geraetetyp gibt vor, das Geraet darf
  abweichen.
- lib/stammdaten/qr.ts und qr-parser.ts erzeugen und lesen die Codes
- lib/stammdaten/etiketten.ts baut den A4-Bogen mit 65 Etiketten
- lib/stammdaten/import.ts liest CSV und Excel, erkennt deutsche Datums- und
  Zahlenformate, Windows-1252 und Dubletten innerhalb der Datei
- lib/pdf.ts spricht Gotenberg an

Oberflaeche:
- Geraeteliste mit Volltextsuche, Statusfilter, serverseitiger Sortierung,
  Blaettern, Spaltenauswahl und Massenbearbeitung
- Geraetedetail mit QR-Code, Pruefvorgabe aus dem Geraetetyp und Verlauf
- Fahrzeugliste und -detail mit Beladung nach Beladeordnung
- Mitgliederliste nach Abteilung, Mitgliedsdetail mit Qualifikationen
- Qualifikationen mit Ablaufwarnung je Vorwarnzeit des Typs
- Import-Assistent mit Zuordnung und Vorschau vor dem Uebernehmen
- QR-Scanner ueber die Kamera, mit Eingabefeld als Rueckfallweg

Behoben:
- Fristenrechnung lief ueber startOfDay aus date-fns und damit in der Zeitzone
  des Servers. Ein DATE aus der Datenbank kommt als UTC-Mitternacht und wurde
  dadurch auf den Vortag geschoben — Fristen waeren einen Tag zu frueh faellig
  geworden. Jetzt eigene Kalenderarithmetik auf UTC-Bestandteilen.
- ctx.sitzung blieb in tRPC-Prozeduren nullbar, weil t.middleware() die
  Verengung der vorigen Middleware verwirft. Middleware jetzt direkt an .use().
- CardTitle war ein div und damit keine Ueberschrift. Wer mit einer
  Sprachausgabe arbeitet, springt von Ueberschrift zu Ueberschrift; Karten
  tauchten in dieser Navigation nicht auf.

Daten und Tests:
- Seed um 3 Standorte, 20 Geraeteraeume, 14 Geraetetypen mit echten
  Pruefvorgaben, 49 Geraete und 107 Qualifikationen erweitert
- 104 Vitest-Tests (vorher 32), 44 Playwright-Tests (vorher 10)
- Anleitung um sieben bebilderte Abschnitte erweitert, Changelog, Devlog,
  Aufwandsschaetzung und Roadmap fortgeschrieben

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

src/components/stammdaten/anzeige.tsx

@@ -0,0 +1,144 @@
+"use client";
+
+import * as React from "react";
+import type { GeraetStatus } from "@prisma/client";
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+import { alsDatum } from "@/lib/utils";
+import { fristzustand, tageBis, type Fristzustand } from "@/lib/stammdaten/fristen";
+
+/**
+ * Anzeigebausteine für Stammdaten.
+ *
+ * Farbe bedeutet überall dasselbe: grün einsatzbereit, gelb läuft ab, rot
+ * gesperrt oder überfällig, grau ausgesondert. Wer die Farbe einmal gelernt
+ * hat, muss den Text nicht mehr lesen — und genau darum geht es bei einer
+ * Liste mit dreihundert Zeilen.
+ *
+ * Farbe allein reicht aber nicht: jede Angabe trägt zusätzlich Klartext.
+ * Rot-Grün-Sehschwäche ist häufig, und im Gerätehaus arbeitet niemand mit
+ * kalibriertem Bildschirm.
+ */
+
+const STATUS_TEXT: Record<GeraetStatus, string> = {
+  EINSATZBEREIT: "einsatzbereit",
+  PRUEFUNG_FAELLIG: "Prüfung fällig",
+  GESPERRT: "gesperrt",
+  AUSGESONDERT: "ausgesondert",
+  IN_REPARATUR: "in Reparatur",
+};
+
+const STATUS_VARIANTE: Record<
+  GeraetStatus,
+  "einsatzbereit" | "pruefungFaellig" | "gesperrt" | "ausgesondert" | "secondary"
+> = {
+  EINSATZBEREIT: "einsatzbereit",
+  PRUEFUNG_FAELLIG: "pruefungFaellig",
+  GESPERRT: "gesperrt",
+  AUSGESONDERT: "ausgesondert",
+  IN_REPARATUR: "secondary",
+};
+
+export function StatusAbzeichen({ status }: { status: GeraetStatus }) {
+  return <Badge variant={STATUS_VARIANTE[status]}>{STATUS_TEXT[status]}</Badge>;
+}
+
+export const GERAET_STATUS_TEXT = STATUS_TEXT;
+
+/**
+ * Ein Datum mit Ampel. Zeigt zusätzlich, wie viele Tage noch bleiben —
+ * "in 12 Tagen" sagt mehr als ein Datum, das man erst im Kopf ausrechnen muss.
+ */
+export function FristAnzeige({
+  datum,
+  vorwarnTage = 30,
+  ohneAngabe = "—",
+}: {
+  datum: Date | string | null | undefined;
+  vorwarnTage?: number;
+  ohneAngabe?: string;
+}) {
+  if (!datum) {
+    return <span className="text-[var(--muted-foreground)]">{ohneAngabe}</span>;
+  }
+
+  const alsDate = datum instanceof Date ? datum : new Date(datum);
+  const zustand = fristzustand(alsDate, vorwarnTage);
+  const tage = tageBis(alsDate);
+
+  const farbe: Record<Fristzustand, string> = {
+    ueberfaellig: "text-[var(--gesperrt)] font-medium",
+    faellig: "text-[var(--gesperrt)] font-medium",
+    bald_faellig: "text-[var(--pruefung-faellig)]",
+    in_ordnung: "",
+    ohne_frist: "text-[var(--muted-foreground)]",
+  };
+
+  const zusatz =
+    tage === null
+      ? ""
+      : tage < 0
+        ? `seit ${Math.abs(tage)} ${Math.abs(tage) === 1 ? "Tag" : "Tagen"}`
+        : tage === 0
+          ? "heute"
+          : `in ${tage} ${tage === 1 ? "Tag" : "Tagen"}`;
+
+  return (
+    <span className={cn("tabellenzahlen whitespace-nowrap", farbe[zustand])}>
+      {alsDatum(alsDate)}
+      {zusatz && (
+        <span className="ml-1.5 text-xs text-[var(--muted-foreground)]">({zusatz})</span>
+      )}
+    </span>
+  );
+}
+
+/** Leerer Zustand einer Liste — mit einem Hinweis, was als Nächstes zu tun ist. */
+export function NichtsGefunden({
+  titel,
+  hinweis,
+  aktion,
+}: {
+  titel: string;
+  hinweis?: string;
+  aktion?: React.ReactNode;
+}) {
+  return (
+    <div className="flex flex-col items-center justify-center gap-3 rounded-lg border border-dashed border-[var(--border)] px-6 py-16 text-center">
+      <p className="font-medium">{titel}</p>
+      {hinweis && (
+        <p className="max-w-md text-sm text-[var(--muted-foreground)]">{hinweis}</p>
+      )}
+      {aktion}
+    </div>
+  );
+}
+
+/** Platzhalterzeilen, solange geladen wird. */
+export function LadeZeilen({ zeilen = 8, spalten = 6 }: { zeilen?: number; spalten?: number }) {
+  return (
+    <>
+      {Array.from({ length: zeilen }).map((_, zeile) => (
+        <tr key={zeile} className="border-b border-[var(--border)]">
+          {Array.from({ length: spalten }).map((__, spalte) => (
+            <td key={spalte} className="px-3 py-3">
+              <div className="h-4 animate-pulse rounded bg-[var(--muted)]" />
+            </td>
+          ))}
+        </tr>
+      ))}
+    </>
+  );
+}
+
+/** Fehlermeldung, die sagt, was schiefging — nicht nur, dass etwas schiefging. */
+export function Fehlermeldung({ meldung }: { meldung: string }) {
+  return (
+    <div
+      role="alert"
+      className="rounded-md border border-[var(--destructive)]/40 bg-[var(--destructive)]/10 p-3 text-sm text-[var(--destructive)]"
+    >
+      {meldung}
+    </div>
+  );
+}