+ {COLUMNS.map((col) => {
+ const columnTasks = tasks.filter((t) => t.Status === col.key);
+ return (
+
e.preventDefault()}
+ onDrop={(e) => {
+ e.preventDefault();
+ const id = e.dataTransfer.getData("text/plain") || draggingId;
+ if (id) {
+ void move(id, col.key);
+ }
+ setDraggingId(null);
+ }}
+ style={{
+ flex: 1,
+ minWidth: 220,
+ border: "1px solid var(--shl-color-border, #d0d5dd)",
+ borderRadius: 8,
+ padding: 12,
+ minHeight: 160,
+ background: "var(--shl-color-surface, #f9fafb)",
+ }}
+ >
+
+ {col.label} ({columnTasks.length})
+
+ {columnTasks.length === 0 ? (
+
Keine Aufgaben.
+ ) : (
+
+ {columnTasks.map((t) => (
+ - {
+ e.dataTransfer.setData("text/plain", t.ID);
+ setDraggingId(t.ID);
+ }}
+ onDragEnd={() => setDraggingId(null)}
+ style={{
+ border: "1px solid var(--shl-color-border, #d0d5dd)",
+ borderRadius: 6,
+ padding: 8,
+ marginBottom: 8,
+ background: "var(--shl-color-background, #ffffff)",
+ }}
+ >
+
{t.Title}
+
+ {t.AssigneeID} · {t.Priority}
+ {t.DueDate ? ` · ${new Date(t.DueDate).toLocaleDateString("de-DE")}` : ""}
+
+
+ {COLUMNS.filter((c) => c.key !== col.key).map((target) => (
+
+ ))}
+
+
+ ))}
+
+ )}
+