style(dashboard): Kacheln modernisiert - Karten, Einsatzbereitschaft-Balken, Termin-Listen, Skeleton

Card: 14px Radius, weicherer Schatten, Hover-Lift über box-shadow (nicht transform, würde von react-grid-layouts Inline-Positionierung überschrieben). Einsatzbereitschaft-Kachel: große Zahl "X/Y einsatzbereit", proportionaler gestapelter Statusbalken, Vierer-Zeile mit Farbpunkten+Zahl, Detail-Liste bleibt aufklappbar. Prüftermine/Ablaufdaten/Qualifikationsablauf: auf 5 Zeilen begrenzt mit "Alle anzeigen", Status-Badge links (überfällig gefüllt rot, bald fällig Outline amber, FristBadge zeigt nur noch Status), Countdown rechts tabular-nums. Neue --status-ok/warn/unknown/critical CSS-Variablen als Alias auf bestehende Farb-Tokens. Skeleton-Platzhalter statt "Lade…"-Text während des initialen Ladens. Keine API-/Datenänderungen. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01CVgbozhYmuEhiEJHffRXCV
2026-09-07 13:52:43 +02:00
parent 74ed250ad7
commit a2a44fb780
11 changed files with 204 additions and 74 deletions
@@ -249,7 +249,13 @@ export function DashboardPage() {
          </Button>
        </div>
      )}
-      {laedt && <p className="text-muted">Lade…</p>}
+      {laedt && (
+        <div className="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+          {Array.from({ length: 6 }).map((_, i) => (
+            <div key={i} className="h-40 animate-pulse rounded-[14px] border border-border bg-surface-sunken" />
+          ))}
+        </div>
+      )}
      {bearbeitenModus && layout.ausgeblendet.length > 0 && (
        <div className="mt-3 rounded-md border border-border bg-surface-sunken px-4 py-3 text-sm">
          Ausgeblendet:{" "}
@@ -1,30 +1,52 @@
-import { memo } from "react";
+import { memo, useState } from "react";
 import { Link } from "react-router-dom";

 import { InventoryStatus } from "../../../components/status/InventoryStatus";
 import type { Ablaufdatumeintrag } from "../types";

+const ANZAHL_OHNE_AUFKLAPPEN = 5;
+
 interface Props {
  ablaufdaten: Ablaufdatumeintrag[];
 }

 function AblaufdatenTileKomponente({ ablaufdaten }: Props) {
+  const [alleAnzeigen, setAlleAnzeigen] = useState(false);
+
  if (ablaufdaten.length === 0) {
-    return <p className="text-muted">Keine bald ablaufenden Chargen.</p>;
+    return <p className="text-sm text-muted-foreground">Keine bald ablaufenden Chargen.</p>;
  }

+  const sichtbare = alleAnzeigen ? ablaufdaten : ablaufdaten.slice(0, ANZAHL_OHNE_AUFKLAPPEN);
+
  return (
-    <ul className="card-list">
-      {ablaufdaten.map((a) => (
-        <li key={`${a.objekt_id}-${a.material_id}`} className="row-between" style={{ padding: "0.3rem 0" }}>
-          <span>
-            <Link to={`/akte/objekt/${a.objekt_id}`}>{a.objekt_name}</Link> – {a.material_name}{" "}
-            <span className="text-muted">({a.ablaufdatum})</span>
-          </span>
-          <InventoryStatus status={a.status} tage={a.verbleibende_tage} />
-        </li>
-      ))}
-    </ul>
+    <>
+      <ul>
+        {sichtbare.map((a) => (
+          <li
+            key={`${a.objekt_id}-${a.material_id}`}
+            className="flex items-center gap-3 border-b border-border py-2 last:border-0"
+          >
+            <InventoryStatus status={a.status} />
+            <div className="min-w-0 flex-1">
+              <Link to={`/akte/objekt/${a.objekt_id}`} className="block truncate font-medium">
+                {a.objekt_name} – {a.material_name}
+              </Link>
+              <span className="text-xs text-muted-foreground">{a.ablaufdatum}</span>
+            </div>
+            <span className="shrink-0 tabular-nums text-sm font-semibold">{a.verbleibende_tage} Tage</span>
+          </li>
+        ))}
+      </ul>
+      {ablaufdaten.length > ANZAHL_OHNE_AUFKLAPPEN && (
+        <button
+          className="mt-2 text-sm font-medium text-primary underline-offset-2 hover:underline"
+          onClick={() => setAlleAnzeigen(!alleAnzeigen)}
+        >
+          {alleAnzeigen ? "Weniger anzeigen" : `Alle anzeigen (${ablaufdaten.length})`}
+        </button>
+      )}
+    </>
  );
 }

@@ -14,6 +14,12 @@ function readinessVonGruenden(gruende: string[]): Readiness {
  return "not-ready";
 }

+interface Segment {
+  anzahl: number;
+  farbVar: string;
+  label: string;
+}
+
 interface Props {
  bereitschaft: Einsatzbereitschaft;
 }
@@ -21,45 +27,69 @@ interface Props {
 function EinsatzbereitschaftTileKomponente({ bereitschaft }: Props) {
  const [detailsOffen, setDetailsOffen] = useState(false);

+  const segmente: Segment[] = [
+    { anzahl: bereitschaft.einsatzbereit, farbVar: "var(--status-ok)", label: "Einsatzbereit" },
+    { anzahl: bereitschaft.eingeschraenkt_einsatzbereit, farbVar: "var(--status-warn)", label: "Eingeschränkt" },
+    { anzahl: bereitschaft.unbekannt, farbVar: "var(--status-unknown)", label: "Unbekannt" },
+    { anzahl: bereitschaft.nicht_einsatzbereit, farbVar: "var(--status-critical)", label: "Nicht bereit" },
+  ];
+  const gesamt = bereitschaft.gesamt || 1;
+
  return (
    <>
-      <p className="stat-number">
-        {bereitschaft.einsatzbereit}{" "}
-        <span style={{ fontSize: "1rem", fontWeight: 600, color: "var(--color-text-muted)" }}>
-          von {bereitschaft.gesamt} einsatzbereit
-        </span>
+      <p className="leading-none">
+        <span className="text-4xl font-bold tabular-nums">{bereitschaft.einsatzbereit}</span>
+        <span className="text-sm font-semibold text-muted-foreground">/{bereitschaft.gesamt} einsatzbereit</span>
      </p>
-      <div className="row" style={{ flexWrap: "wrap", marginBottom: "0.5rem" }}>
-        <ReadinessBadge status="ready" label={`${bereitschaft.einsatzbereit} einsatzbereit`} />
-        {bereitschaft.eingeschraenkt_einsatzbereit > 0 && (
-          <ReadinessBadge status="limited" label={`${bereitschaft.eingeschraenkt_einsatzbereit} eingeschränkt`} />
-        )}
-        {bereitschaft.unbekannt > 0 && <ReadinessBadge status="unknown" label={`${bereitschaft.unbekannt} unbekannt`} />}
-        {bereitschaft.nicht_einsatzbereit > 0 && (
-          <ReadinessBadge status="not-ready" label={`${bereitschaft.nicht_einsatzbereit} nicht bereit`} />
+
+      <div className="mt-3 flex h-2.5 w-full overflow-hidden rounded-full bg-surface-sunken">
+        {segmente.map(
+          (s) =>
+            s.anzahl > 0 && (
+              <div
+                key={s.label}
+                style={{ width: `${(s.anzahl / gesamt) * 100}%`, backgroundColor: s.farbVar }}
+                title={`${s.label}: ${s.anzahl}`}
+              />
+            )
        )}
      </div>
+
+      <div className="mt-3 grid grid-cols-2 gap-x-3 gap-y-1.5 sm:grid-cols-4">
+        {segmente.map((s) => (
+          <div key={s.label} className="flex items-center gap-1.5 text-sm">
+            <span className="h-2 w-2 shrink-0 rounded-full" style={{ backgroundColor: s.farbVar }} />
+            <span className="text-muted-foreground">{s.label}</span>
+            <span className="ml-auto font-semibold tabular-nums">{s.anzahl}</span>
+          </div>
+        ))}
+      </div>
+
      {bereitschaft.nie_kontrolliert_gesamt > bereitschaft.unbekannt && (
-        <p className="text-muted" style={{ fontSize: "0.85rem" }}>
+        <p className="mt-3 text-xs text-muted-foreground">
          Davon {bereitschaft.nie_kontrolliert_gesamt} insgesamt noch nie kontrolliert (auch bei Objekten mit weiteren
          Problemen).
        </p>
      )}
+
      {bereitschaft.details.length > 0 && (
        <>
-          <button className="btn btn-secondary" onClick={() => setDetailsOffen(!detailsOffen)}>
+          <button
+            className="mt-3 text-sm font-medium text-primary underline-offset-2 hover:underline"
+            onClick={() => setDetailsOffen(!detailsOffen)}
+          >
            {detailsOffen ? "Details ausblenden" : "Details anzeigen"}
          </button>
          {detailsOffen && (
-            <ul className="card-list" style={{ marginTop: "0.5rem" }}>
+            <ul className="mt-2">
              {bereitschaft.details.map((d) => (
-                <li key={d.objekt_id} className="row-between" style={{ padding: "0.3rem 0" }}>
-                  <Link to={`/objekte/${d.objekt_id}/kontrolle`}>
+                <li key={d.objekt_id} className="flex items-center justify-between gap-2 border-b border-border py-2 last:border-0">
+                  <Link to={`/objekte/${d.objekt_id}/kontrolle`} className="truncate font-medium">
                    {d.name} ({d.code})
                  </Link>
-                  <span className="row" style={{ gap: "0.4rem" }}>
+                  <span className="flex shrink-0 items-center gap-2">
                    <ReadinessBadge status={readinessVonGruenden(d.gruende)} />
-                    <span className="text-muted" style={{ fontSize: "0.85rem" }}>
+                    <span className="hidden text-xs text-muted-foreground sm:inline">
                      {d.gruende.map((g) => GRUND_TEXT[g] ?? g).join(", ")}
                    </span>
                  </span>
@@ -1,30 +1,52 @@
+import { memo, useState } from "react";
 import { Link } from "react-router-dom";
-import { memo } from "react";

 import { InspectionStatus } from "../../../components/status/InspectionStatus";
 import type { Prueftermineintrag } from "../types";

+const ANZAHL_OHNE_AUFKLAPPEN = 5;
+
 interface Props {
  prueftermine: Prueftermineintrag[];
 }

 function PrueftermineTileKomponente({ prueftermine }: Props) {
+  const [alleAnzeigen, setAlleAnzeigen] = useState(false);
+
  if (prueftermine.length === 0) {
-    return <p className="text-muted">Keine anstehenden oder überfälligen Geräteprüfungen.</p>;
+    return <p className="text-sm text-muted-foreground">Keine anstehenden oder überfälligen Geräteprüfungen.</p>;
  }

+  const sichtbare = alleAnzeigen ? prueftermine : prueftermine.slice(0, ANZAHL_OHNE_AUFKLAPPEN);
+
  return (
-    <ul className="card-list">
-      {prueftermine.map((p) => (
-        <li key={`${p.typ}-${p.objekt_id}-${p.faelligkeitsdatum}`} className="row-between" style={{ padding: "0.3rem 0" }}>
-          <span>
-            <Link to={`/akte/objekt/${p.objekt_id}`}>{p.bezeichnung}</Link>{" "}
-            <span className="text-muted">({p.faelligkeitsdatum})</span>
-          </span>
-          <InspectionStatus status={p.status} tage={p.verbleibende_tage} />
-        </li>
-      ))}
-    </ul>
+    <>
+      <ul>
+        {sichtbare.map((p) => (
+          <li
+            key={`${p.typ}-${p.objekt_id}-${p.faelligkeitsdatum}`}
+            className="flex items-center gap-3 border-b border-border py-2 last:border-0"
+          >
+            <InspectionStatus status={p.status} />
+            <div className="min-w-0 flex-1">
+              <Link to={`/akte/objekt/${p.objekt_id}`} className="block truncate font-medium">
+                {p.bezeichnung}
+              </Link>
+              <span className="text-xs text-muted-foreground">{p.faelligkeitsdatum}</span>
+            </div>
+            <span className="shrink-0 tabular-nums text-sm font-semibold">{p.verbleibende_tage} Tage</span>
+          </li>
+        ))}
+      </ul>
+      {prueftermine.length > ANZAHL_OHNE_AUFKLAPPEN && (
+        <button
+          className="mt-2 text-sm font-medium text-primary underline-offset-2 hover:underline"
+          onClick={() => setAlleAnzeigen(!alleAnzeigen)}
+        >
+          {alleAnzeigen ? "Weniger anzeigen" : `Alle anzeigen (${prueftermine.length})`}
+        </button>
+      )}
+    </>
  );
 }

@@ -1,29 +1,46 @@
-import { memo } from "react";
+import { memo, useState } from "react";

+import { FristBadge } from "../../../components/status/FristBadge";
 import type { Qualifikationsablauf } from "../types";

+const ANZAHL_OHNE_AUFKLAPPEN = 5;
+
 interface Props {
  qualifikationsablaeufe: Qualifikationsablauf[];
 }

 function QualifikationTileKomponente({ qualifikationsablaeufe }: Props) {
+  const [alleAnzeigen, setAlleAnzeigen] = useState(false);
+
  if (qualifikationsablaeufe.length === 0) {
-    return <p className="text-muted">Keine bald ablaufenden Qualifikationen.</p>;
+    return <p className="text-sm text-muted-foreground">Keine bald ablaufenden Qualifikationen.</p>;
  }

+  const sichtbare = alleAnzeigen ? qualifikationsablaeufe : qualifikationsablaeufe.slice(0, ANZAHL_OHNE_AUFKLAPPEN);
+
  return (
-    <ul className="card-list">
-      {qualifikationsablaeufe.map((q) => (
-        <li key={q.benutzer_qualifikation_id} className="row-between" style={{ padding: "0.3rem 0" }}>
-          <span>
-            {q.benutzer_name} <span className="text-muted">({q.qualifikationstyp_name})</span>
-          </span>
-          <span style={{ color: q.status === "abgelaufen" ? "var(--color-danger)" : undefined }}>
-            {q.gueltig_bis} ({q.verbleibende_tage} Tage)
-          </span>
-        </li>
-      ))}
-    </ul>
+    <>
+      <ul>
+        {sichtbare.map((q) => (
+          <li key={q.benutzer_qualifikation_id} className="flex items-center gap-3 border-b border-border py-2 last:border-0">
+            <FristBadge status={q.status} />
+            <div className="min-w-0 flex-1">
+              <span className="block truncate font-medium">{q.benutzer_name}</span>
+              <span className="text-xs text-muted-foreground">{q.qualifikationstyp_name}</span>
+            </div>
+            <span className="shrink-0 tabular-nums text-sm font-semibold">{q.verbleibende_tage} Tage</span>
+          </li>
+        ))}
+      </ul>
+      {qualifikationsablaeufe.length > ANZAHL_OHNE_AUFKLAPPEN && (
+        <button
+          className="mt-2 text-sm font-medium text-primary underline-offset-2 hover:underline"
+          onClick={() => setAlleAnzeigen(!alleAnzeigen)}
+        >
+          {alleAnzeigen ? "Weniger anzeigen" : `Alle anzeigen (${qualifikationsablaeufe.length})`}
+        </button>
+      )}
+    </>
  );
 }