feat(dashboard): echtes Drag & Drop statt Pfeil-Buttons, moderneres Kachel-Design

@dnd-kit statt ↑/↓-Buttons zum Anordnen (Griff-Icon, Tastatur-Fallback inklusive). Card-Komponente auf kleineren Radius umgestellt (weniger "Bubble"-Look). Kennzahlen/Mängel-Kachel zeigen jetzt eine große, fette Kopfzahl mit kleinem Label statt reiner Text-Liste - Inspiration: Resgrid Big Board (Statusfarben statt Deko) und moderne SaaS-Dashboards (Linear/Vercel: große Zahlen, dünne Border, wenig Schatten).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01CVgbozhYmuEhiEJHffRXCV

DEVLOG.md

@@ -6342,3 +6342,78 @@ Keine Commits in dieser Session.
 - frontend/src/settings/startseite.ts                            |   30 -
 
 ---
+## 2026-09-07 12:25 – 12:30 (5m)
+**Beschreibung:** Claude Code Session
+**Projekt:** frontend
+
+### Commits
+- a468975 feat(dashboard): Tailwind CSS + shadcn/ui eingeführt, Dashboard modernisiert
+
+### Geänderte Dateien
+- DEVLOG.md                                         |  31 ++++
+- frontend/DEVLOG.md                                |  62 +++++++
+- frontend/package-lock.json                        | 676 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-
+- frontend/package.json                             |   9 +-
+- frontend/src/components/status/ReadinessBadge.tsx |  32 ++--
+- frontend/src/components/ui/badge.tsx              |  25 +++
+- frontend/src/components/ui/button.tsx             |  42 +++++
+- frontend/src/components/ui/card.tsx               |  29 +++
+- frontend/src/lib/utils.ts                         |   6 +
+- frontend/src/main.tsx                             |   1 +
+- frontend/src/pages/dashboard/DashboardPage.tsx    | 105 ++++++++---
+- frontend/src/pages/dashboard/TileFrame.tsx        |  69 +++++--
+- frontend/src/pages/dashboard/layout.ts            |  41 ++++-
+- frontend/src/styles/tailwind.css                  |  23 +++
+- frontend/vite.config.ts                           |   2 +
+
+---
+## 2026-09-07 12:38 – 12:39 (0m)
+**Beschreibung:** Claude Code Session
+**Projekt:** asb-material
+
+### Commits
+Keine Commits in dieser Session.
+
+### Geänderte Dateien
+- DEVLOG.md                                         |  31 ++++
+- frontend/DEVLOG.md                                |  62 +++++++
+- frontend/package-lock.json                        | 676 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-
+- frontend/package.json                             |   9 +-
+- frontend/src/components/status/ReadinessBadge.tsx |  32 ++--
+- frontend/src/components/ui/badge.tsx              |  25 +++
+- frontend/src/components/ui/button.tsx             |  42 +++++
+- frontend/src/components/ui/card.tsx               |  29 +++
+- frontend/src/lib/utils.ts                         |   6 +
+- frontend/src/main.tsx                             |   1 +
+- frontend/src/pages/dashboard/DashboardPage.tsx    | 105 ++++++++---
+- frontend/src/pages/dashboard/TileFrame.tsx        |  69 +++++--
+- frontend/src/pages/dashboard/layout.ts            |  41 ++++-
+- frontend/src/styles/tailwind.css                  |  23 +++
+- frontend/vite.config.ts                           |   2 +
+
+---
+## 2026-09-07 12:40 – 12:40 (0m)
+**Beschreibung:** Claude Code Session
+**Projekt:** asb-material
+
+### Commits
+Keine Commits in dieser Session.
+
+### Geänderte Dateien
+- DEVLOG.md                                         |  31 ++++
+- frontend/DEVLOG.md                                |  62 +++++++
+- frontend/package-lock.json                        | 676 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-
+- frontend/package.json                             |   9 +-
+- frontend/src/components/status/ReadinessBadge.tsx |  32 ++--
+- frontend/src/components/ui/badge.tsx              |  25 +++
+- frontend/src/components/ui/button.tsx             |  42 +++++
+- frontend/src/components/ui/card.tsx               |  29 +++
+- frontend/src/lib/utils.ts                         |   6 +
+- frontend/src/main.tsx                             |   1 +
+- frontend/src/pages/dashboard/DashboardPage.tsx    | 105 ++++++++---
+- frontend/src/pages/dashboard/TileFrame.tsx        |  69 +++++--
+- frontend/src/pages/dashboard/layout.ts            |  41 ++++-
+- frontend/src/styles/tailwind.css                  |  23 +++
+- frontend/vite.config.ts                           |   2 +
+
+---

frontend/package-lock.json

@@ -8,6 +8,9 @@
       "name": "mabea-frontend",
       "version": "0.1.0",
       "dependencies": {
+        "@dnd-kit/core": "^6.3.1",
+        "@dnd-kit/sortable": "^10.0.0",
+        "@dnd-kit/utilities": "^3.2.2",
         "@radix-ui/react-slot": "^1.3.3",
         "@zxing/browser": "^0.1.5",
         "class-variance-authority": "^0.7.1",
@@ -1622,6 +1625,59 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@dnd-kit/accessibility": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/accessibility/-/accessibility-3.1.1.tgz",
+      "integrity": "sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/core": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/core/-/core-6.3.1.tgz",
+      "integrity": "sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@dnd-kit/accessibility": "^3.1.1",
+        "@dnd-kit/utilities": "^3.2.2",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/sortable": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/sortable/-/sortable-10.0.0.tgz",
+      "integrity": "sha512-+xqhmIIzvAYMGfBYYnbKuNicfSsk4RksY2XdmJhT+HAC01nix6fHCztU68jooFiMUB01Ky3F0FyOvhG/BZrWkg==",
+      "license": "MIT",
+      "dependencies": {
+        "@dnd-kit/utilities": "^3.2.2",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "@dnd-kit/core": "^6.3.0",
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/utilities": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/utilities/-/utilities-3.2.2.tgz",
+      "integrity": "sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
@@ -6272,6 +6328,12 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
     "node_modules/type-fest": {
       "version": "0.16.0",
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.16.0.tgz",

frontend/package.json

@@ -11,6 +11,9 @@
     "test:e2e:ui": "playwright test --ui"
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@radix-ui/react-slot": "^1.3.3",
     "@zxing/browser": "^0.1.5",
     "class-variance-authority": "^0.7.1",

frontend/src/components/ui/card.tsx

@@ -5,7 +5,7 @@ import { cn } from "../../lib/utils";
 export const Card = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("rounded-xl border border-border bg-surface text-foreground shadow-sm", className)}
+    className={cn("rounded-lg border border-border bg-surface text-foreground shadow-sm", className)}
     {...props}
   />
 ));

frontend/src/pages/dashboard/DashboardPage.tsx

@@ -1,3 +1,6 @@
+import type { DragEndEvent } from "@dnd-kit/core";
+import { DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors } from "@dnd-kit/core";
+import { arrayMove, rectSortingStrategy, SortableContext, sortableKeyboardCoordinates } from "@dnd-kit/sortable";
 import { useCallback, useEffect, useState } from "react";
 
 import { apiRequest } from "../../api/client";
@@ -86,13 +89,18 @@ export function DashboardPage() {
     return () => document.removeEventListener("fullscreenchange", fullscreenGeaendert);
   }, []);
 
-  function tileVerschieben(id: DashboardTileId, richtung: -1 | 1) {
+  const sensoren = useSensors(
-    const index = layout.reihenfolge.indexOf(id);
+    useSensor(PointerSensor, { activationConstraint: { distance: 8 } }),
-    const zielIndex = index + richtung;
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
-    if (zielIndex < 0 || zielIndex >= layout.reihenfolge.length) return;
+  );
-    const neueReihenfolge = [...layout.reihenfolge];
+
-    [neueReihenfolge[index], neueReihenfolge[zielIndex]] = [neueReihenfolge[zielIndex], neueReihenfolge[index]];
+  function dragEnde(event: DragEndEvent) {
-    const neuesLayout = { ...layout, reihenfolge: neueReihenfolge };
+    const { active, over } = event;
+    if (!over || active.id === over.id) return;
+    const von = layout.reihenfolge.indexOf(active.id as DashboardTileId);
+    const nach = layout.reihenfolge.indexOf(over.id as DashboardTileId);
+    if (von === -1 || nach === -1) return;
+    const neuesLayout = { ...layout, reihenfolge: arrayMove(layout.reihenfolge, von, nach) };
     setLayout(neuesLayout);
     layoutSpeichern(neuesLayout);
   }
@@ -242,34 +250,35 @@ export function DashboardPage() {
         </div>
       )}
       {!laedt && bereitschaft && (
-        <div className={cn("card-grid mt-4", monitorModus && "text-lg")}>
+        <DndContext sensors={sensoren} onDragEnd={dragEnde}>
-          {layout.reihenfolge.map((id, index) => {
+          <SortableContext items={layout.reihenfolge} strategy={rectSortingStrategy}>
-            const ausgeblendet = layout.ausgeblendet.includes(id);
+            <div className={cn("card-grid mt-4", monitorModus && "text-lg")}>
-            if (ausgeblendet && !bearbeitenModus) return null;
+              {layout.reihenfolge.map((id) => {
-            const inhalt = tileInhalt(id);
+                const ausgeblendet = layout.ausgeblendet.includes(id);
-            if (!inhalt) return null;
+                if (ausgeblendet && !bearbeitenModus) return null;
-            const groesse: DashboardTileGroesse = layout.groessen[id] ?? (id === "aufgaben" ? "voll" : "normal");
+                const inhalt = tileInhalt(id);
-            return (
+                if (!inhalt) return null;
-              <TileFrame
+                const groesse: DashboardTileGroesse = layout.groessen[id] ?? (id === "aufgaben" ? "voll" : "normal");
-                key={id}
+                return (
-                title={TITEL[id]}
+                  <TileFrame
-                flexBasis={flexBasisFuerGroesse(groesse)}
+                    key={id}
-                groesse={groesse}
+                    id={id}
-                akzent={tileAkzent(id)}
+                    title={TITEL[id]}
-                bearbeitenAktiv={bearbeitenModus}
+                    flexBasis={flexBasisFuerGroesse(groesse)}
-                ausgeblendet={ausgeblendet}
+                    groesse={groesse}
-                kannHochVerschieben={index > 0}
+                    akzent={tileAkzent(id)}
-                kannRunterVerschieben={index < layout.reihenfolge.length - 1}
+                    bearbeitenAktiv={bearbeitenModus}
-                onAusblendenUmschalten={() => ausblendenUmschalten(id)}
+                    ausgeblendet={ausgeblendet}
-                onGroesseAendern={() => groesseAendern(id)}
+                    onAusblendenUmschalten={() => ausblendenUmschalten(id)}
-                onHoch={() => tileVerschieben(id, -1)}
+                    onGroesseAendern={() => groesseAendern(id)}
-                onRunter={() => tileVerschieben(id, 1)}
+                  >
-              >
+                    {inhalt}
-                {inhalt}
+                  </TileFrame>
-              </TileFrame>
+                );
-            );
+              })}
-          })}
+            </div>
-        </div>
+          </SortableContext>
+        </DndContext>
       )}
     </main>
   );

frontend/src/pages/dashboard/TileFrame.tsx

@@ -1,9 +1,11 @@
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
 import type { ReactNode } from "react";
 
 import { Button } from "../../components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "../../components/ui/card";
 import { cn } from "../../lib/utils";
-import { GROESSE_LABEL, type DashboardTileGroesse } from "./layout";
+import { GROESSE_LABEL, type DashboardTileGroesse, type DashboardTileId } from "./layout";
 
 export type TileAkzent = "neutral" | "warning" | "danger";
 
@@ -14,65 +16,63 @@ const AKZENT_KLASSE: Record<TileAkzent, string> = {
 };
 
 interface Props {
+  id: DashboardTileId;
   title: string;
   flexBasis: string;
   groesse: DashboardTileGroesse;
   akzent?: TileAkzent;
   bearbeitenAktiv: boolean;
   ausgeblendet: boolean;
-  kannHochVerschieben: boolean;
-  kannRunterVerschieben: boolean;
   onAusblendenUmschalten: () => void;
   onGroesseAendern: () => void;
-  onHoch: () => void;
-  onRunter: () => void;
   children: ReactNode;
 }
 
 export function TileFrame({
+  id,
   title,
   flexBasis,
   groesse,
   akzent = "neutral",
   bearbeitenAktiv,
   ausgeblendet,
-  kannHochVerschieben,
-  kannRunterVerschieben,
   onAusblendenUmschalten,
   onGroesseAendern,
-  onHoch,
-  onRunter,
   children,
 }: Props) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id,
+    disabled: !bearbeitenAktiv,
+  });
+
   return (
     <Card
-      style={{ flexBasis }}
+      ref={setNodeRef}
-      className={cn("border-l-4 transition-opacity duration-300", AKZENT_KLASSE[akzent], ausgeblendet && "opacity-50")}
+      style={{ flexBasis, transform: CSS.Transform.toString(transform), transition }}
+      className={cn(
+        "border-l-4 transition-opacity duration-300",
+        AKZENT_KLASSE[akzent],
+        ausgeblendet && "opacity-50",
+        isDragging && "z-10 shadow-lg"
+      )}
     >
       <CardHeader>
-        <CardTitle>{title}</CardTitle>
+        <div className="flex items-center gap-2">
+          {bearbeitenAktiv && (
+            <button
+              {...attributes}
+              {...listeners}
+              className="min-h-11 min-w-11 cursor-grab touch-none text-muted-foreground active:cursor-grabbing"
+              title="Ziehen zum Anordnen"
+              aria-label={`${title} verschieben`}
+            >
+              ⠿
+            </button>
+          )}
+          <CardTitle>{title}</CardTitle>
+        </div>
         {bearbeitenAktiv && (
           <div className="flex flex-wrap gap-1.5">
-            <Button
-              variant="secondary"
-              size="icon"
-              className="min-h-11 min-w-11"
-              onClick={onHoch}
-              disabled={!kannHochVerschieben}
-              title="Nach oben"
-            >
-              ↑
-            </Button>
-            <Button
-              variant="secondary"
-              size="icon"
-              className="min-h-11 min-w-11"
-              onClick={onRunter}
-              disabled={!kannRunterVerschieben}
-              title="Nach unten"
-            >
-              ↓
-            </Button>
             <Button variant="secondary" size="sm" className="min-h-11" onClick={onGroesseAendern} title="Größe ändern">
               {GROESSE_LABEL[groesse]}
             </Button>

frontend/src/pages/dashboard/tiles/KennzahlenTile.tsx

@@ -6,14 +6,17 @@ interface Props {
 
 export function KennzahlenTile({ kennzahlen }: Props) {
   return (
-    <ul className="card-list">
+    <div>
-      <li style={{ padding: "0.3rem 0" }}>Offene Fehlbestände: {kennzahlen.anzahl_offener_fehlbestaende}</li>
+      <p className="text-4xl font-bold tabular-nums leading-none">{kennzahlen.anzahl_offener_fehlbestaende}</p>
-      <li style={{ padding: "0.3rem 0" }}>Genehmigte Mindermengen: {kennzahlen.anzahl_genehmigter_mindermengen}</li>
+      <p className="mb-3 text-xs uppercase tracking-wide text-muted-foreground">Offene Fehlbestände</p>
-      <li style={{ padding: "0.3rem 0" }}>
+      <ul className="card-list">
-        Kürzlich erledigt (7 Tage): {kennzahlen.anzahl_kuerzlich_erledigter_fehlbestaende}
+        <li style={{ padding: "0.3rem 0" }}>Genehmigte Mindermengen: {kennzahlen.anzahl_genehmigter_mindermengen}</li>
-      </li>
+        <li style={{ padding: "0.3rem 0" }}>
-      <li style={{ padding: "0.3rem 0" }}>Problematische Objekte: {kennzahlen.anzahl_problematischer_objekte}</li>
+          Kürzlich erledigt (7 Tage): {kennzahlen.anzahl_kuerzlich_erledigter_fehlbestaende}
-      <li style={{ padding: "0.3rem 0" }}>Objekte gesamt: {kennzahlen.anzahl_objekte_gesamt}</li>
+        </li>
-    </ul>
+        <li style={{ padding: "0.3rem 0" }}>Problematische Objekte: {kennzahlen.anzahl_problematischer_objekte}</li>
+        <li style={{ padding: "0.3rem 0" }}>Objekte gesamt: {kennzahlen.anzahl_objekte_gesamt}</li>
+      </ul>
+    </div>
   );
 }

frontend/src/pages/dashboard/tiles/MaengelTile.tsx

@@ -15,16 +15,13 @@ export function MaengelTile({ maengel, maengelNeuAnzahl, maengelKritischAnzahl }
 
   return (
     <>
-      <p className="stat-number">{maengelOffenListe.length} offen</p>
+      <p className="text-4xl font-bold tabular-nums leading-none">{maengelOffenListe.length}</p>
+      <p className="mb-2 text-xs uppercase tracking-wide text-muted-foreground">Offen</p>
       {maengelNeuAnzahl > 0 && (
-        <p className="text-muted" style={{ color: "var(--color-warning)", fontWeight: 600 }}>
+        <p className="font-semibold text-warning">{maengelNeuAnzahl} neu gemeldet</p>
-          {maengelNeuAnzahl} neu gemeldet
-        </p>
       )}
       {maengelKritischAnzahl > 0 && (
-        <p className="text-muted" style={{ color: "var(--color-danger)" }}>
+        <p className="text-danger">{maengelKritischAnzahl} kritisch (blockiert Einsatzbereitschaft)</p>
-          {maengelKritischAnzahl} kritisch (blockiert Einsatzbereitschaft)
-        </p>
       )}
       {maengelOffenListe.length > 0 && (
         <>