Web: Dashboards in der Seitenleiste, Karten mehrfach, Buchen ohne Seitenwechsel

Drei Dinge in einem, weil sie dieselbe Umstellung brauchen.

Karten sind jetzt Instanzen: Die Anordnung merkt sich neben der Kennung auch
die Art und ein "props" je Karte. Dadurch laesst sich dieselbe Art mehrfach
auflegen, und "Verlauf eines Artikels" merkt sich endlich, welcher Artikel
gemeint ist - vorher lag diese Wahl nur in useState und war nach jedem
Neuladen wieder weg, was die Karte zum Beobachten unbrauchbar machte. Wer
mehrere Artikel im Blick haben will, legt jetzt einfach mehrere Karten an.

Mehrere Dashboards stehen als eingerueckte Eintraege unter "Übersicht" in der
Seitenleiste, anlegen und umbenennen laeuft ueber die Kopfzeile. Ab dem
zweiten werden sie aufgezaehlt; bei einem einzigen waere die Liste nur eine
Verdopplung.

Neu sind die Karten "Einlagern" und "Auslagern": Artikel suchen, Menge
eintragen, gebucht. MHD und Lagerort bleiben bewusst weg - wer die braucht,
ist auf der vollen Seite besser aufgehoben. Die alte Karte "Schnellzugriff"
bleibt als reine Verlinkung bestehen.

Der Bestaetigungsdialog kann jetzt auch nach Text fragen (prompt: true). Das
war noetig, weil Dashboards benannt werden - und window.prompt sieht aus wie
der Browser, nicht wie diese Anwendung; derselbe Grund, aus dem es hier schon
kein window.confirm gibt.

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

web/src/App.jsx

@@ -1,4 +1,6 @@
+import { useEffect, useState } from "react";
 import { NavLink, Navigate, Route, Routes, useNavigate } from "react-router-dom";
+import { api } from "./api";
 import { useAuth } from "./auth";
 import Icon from "./components/Icon";
 import BrandMark from "./components/BrandMark";
@@ -33,6 +35,19 @@ function NavItem({ to, icon, label, end }) {
 function Sidebar() {
   const { user, isAdmin, logout } = useAuth();
   const navigate = useNavigate();
+  const [dashboards, setDashboards] = useState([]);
+
+  // Die Dashboards des Benutzers stehen als eigene Eintraege in der Leiste.
+  // Sie aendern sich beim Anlegen und Loeschen, deshalb horcht die Leiste auf
+  // das Ereignis, das die Dashboard-Seite dabei ausloest.
+  useEffect(() => {
+    function laden() {
+      api.dashboards().then((a) => setDashboards(a.dashboards)).catch(() => {});
+    }
+    laden();
+    window.addEventListener("dashboards-geaendert", laden);
+    return () => window.removeEventListener("dashboards-geaendert", laden);
+  }, []);
 
   function handleLogout() {
     logout();
@@ -46,6 +61,14 @@ function Sidebar() {
       </div>
       <nav className="sidebar-nav">
         <NavItem to="/" end icon="dashboard" label="Übersicht" />
+        {/* Ab dem zweiten Dashboard lohnt die Aufzaehlung; bei einem einzigen
+            waere sie nur eine Verdopplung von "Übersicht". */}
+        {dashboards.length > 1 && dashboards.map((d, index) => (
+          <NavLink key={d.id} to={index === 0 ? "/" : `/d/${d.id}`} end
+                   className={({ isActive }) => (isActive ? "nav-link sub active" : "nav-link sub")}>
+            <span className="label">{d.name}</span>
+          </NavLink>
+        ))}
         <NavItem to="/checkin" icon="checkin" label="Einlagern" />
         <NavItem to="/checkout" icon="checkout" label="Auslagern" />
         <NavItem to="/products" icon="package" label="Produkte" />
@@ -103,6 +126,7 @@ export default function App() {
         element={loading ? null : user ? <Navigate to="/" replace /> : <Login />}
       />
       <Route path="/" element={<Protected><Dashboard /></Protected>} />
+      <Route path="/d/:id" element={<Protected><Dashboard /></Protected>} />
       <Route path="/checkin" element={<Protected><CheckIn /></Protected>} />
       <Route path="/checkout" element={<Protected><CheckOut /></Protected>} />
       <Route path="/products" element={<Protected><Products /></Protected>} />