Verlauf: Bewegungsart als Sinnbild statt als Wort

"Eingelagert"/"Ausgelagert"/"Korrektur" standen als Textbadge in einer eigenen
Spalte - in der schmalen Ansicht als dritte beschriftete Zeile je Eintrag. Jetzt
eine getoente Kachel mit Icon: Kiste mit Pfeil hinein, Kiste mit Pfeil heraus,
Stapel mit Stift (aus open-box (1).svg, open-box.svg, edit-server.svg). Die
Farbe traegt dieselbe Bedeutung wie vorher das Badge - gruen rein, orange raus,
neutral Korrektur; Titel und aria-label behalten das Wort.

Die Dashboard-Karte bekommt dabei das Layout aus der Skizze: Kachel links,
Zeitpunkt ueber Produkt, ohne Tabelle. Die Verlaufs-SEITE bleibt eine Tabelle -
dort stehen noch Menge und Benutzer -, dort weicht nur das Wort der Kachel.

Die Icon-Komponente kann jetzt auch GEFUELLTE Grafiken mit eigenem viewBox; die
vorhandenen sind Strichzeichnungen (fill:none, stroke:currentColor) und
vertragen sich damit nicht. Die Pfaddaten sind per Skript aus den SVGs
uebernommen, nicht abgetippt.

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

web/src/pages/History.jsx

@@ -1,10 +1,9 @@
 import { useEffect, useState } from "react";
 import { api } from "../api";
 import Icon from "../components/Icon";
+import BewegungIcon from "../components/BewegungIcon";
 import { articlePrimary, articleSecondary } from "../units";
 
-const TYPE_LABEL = { in: "Eingelagert", out: "Ausgelagert", adjust: "Korrektur" };
-
 export default function History() {
   const [movements, setMovements] = useState([]);
   const [error, setError] = useState(null);
@@ -39,12 +38,10 @@ export default function History() {
               {movements.map((m) => (
                 <tr key={m.id}>
                   <td data-label="Zeitpunkt" className="muted">{new Date(m.created_at).toLocaleString("de-DE")}</td>
-                  <td data-label="Aktion">
-                    <span className={`badge ${m.type === "in" ? "ok" : m.type === "out" ? "warn" : ""}`}>
-                      <Icon name={m.type === "in" ? "checkin" : m.type === "out" ? "checkout" : "edit"} size={13} />
-                      {TYPE_LABEL[m.type] || m.type}
-                    </span>
-                  </td>
+                  {/* Nur das Sinnbild – die Tabelle hat noch Menge und
+                      Benutzer zu zeigen, und das Wort stand ohnehin dreimal
+                      untereinander. Titel und aria-label tragen es weiter. */}
+                  <td data-label="Aktion"><BewegungIcon typ={m.type} /></td>
                   <td data-label="Produkt">{m.product_name}</td>
                   <td data-label="Menge" className="num">
                     {articlePrimary(m)}