frontend versionierung

webapp/frontend/src/App.css

@@ -358,6 +358,90 @@ button.secondary {
   border: 1px solid var(--line-soft);
 }
 
+.version-footer {
+  border-top: 1px solid var(--line);
+  padding-top: 18px;
+}
+
+.version-button {
+  background: transparent;
+  color: var(--slate);
+  border: 1px solid var(--line);
+  box-shadow: none;
+  font-size: 0.9rem;
+}
+
+.version-button:hover {
+  transform: none;
+  box-shadow: none;
+  background: var(--panel-soft);
+}
+
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 20;
+  display: grid;
+  place-items: center;
+  padding: 24px;
+  background: rgba(0, 0, 0, 0.48);
+}
+
+.version-modal {
+  width: min(560px, 100%);
+  max-height: min(720px, 90vh);
+  overflow: auto;
+  padding: 24px;
+  border: 1px solid var(--line);
+  border-radius: 16px;
+  background: var(--paper);
+  box-shadow: var(--shadow);
+}
+
+.version-modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 16px;
+  margin-bottom: 18px;
+}
+
+.version-modal-header h2 {
+  margin: 0;
+  font-size: 1.35rem;
+}
+
+.modal-close {
+  background: var(--panel-soft);
+  color: var(--ink);
+  border: 1px solid var(--line);
+  box-shadow: none;
+  white-space: nowrap;
+}
+
+.modal-close:hover {
+  transform: none;
+  box-shadow: none;
+}
+
+.version-history {
+  display: grid;
+  gap: 14px;
+}
+
+.version-entry h3 {
+  margin: 0 0 6px;
+  color: var(--ink);
+  font-size: 0.95rem;
+}
+
+.version-entry ul {
+  margin: 0;
+  padding-left: 18px;
+  display: grid;
+  gap: 4px;
+}
+
 @keyframes reveal {
   from {
     opacity: 0;

webapp/frontend/src/App.jsx

@@ -29,6 +29,25 @@ const SOURCE_LABELS = {
   Nochten: "TB Nochten",
   Welzow: "TB Welzow-Süd",
 };
+const APP_VERSION = "v0.1.2";
+const VERSION_HISTORY = [
+  {
+    version: "v0.1.2",
+    fixes: [
+      "Bunkerfix für konsistente Bestands- und Abflusslogik ergänzt.",
+      "Schichtwochenglättung für gleichmäßigere Schichtmengen umgesetzt.",
+    ],
+  },
+  {
+    version: "v0.1.1",
+    fixes: [
+      "Solver-Parameter, Laufzeit und Warmstart-Status werden im Jobbereich angezeigt.",
+      "Live-Logs und Solver-Monitor wurden für laufende Optimierungen ergänzt.",
+      "Monatsflüsse und Kapazitätszeitreihen werden nach erfolgreichem Lauf visualisiert.",
+      "Debug-Ausgaben im Modellaufbau wurden bereinigt.",
+    ],
+  },
+];
 
 function toNumber(value) {
   return typeof value === "number" ? value : Number(value || 0);
@@ -152,6 +171,7 @@ export default function App() {
   const [elapsedSeconds, setElapsedSeconds] = useState(0);
   const [timerRunning, setTimerRunning] = useState(false);
   const [cancelPending, setCancelPending] = useState(false);
+  const [versionHistoryOpen, setVersionHistoryOpen] = useState(false);
 
   const formatDecimalWithDot = (value, digits = 1) => {
     const normalized = String(value ?? "").replace(",", ".");
@@ -1060,6 +1080,59 @@ export default function App() {
           </section>
         )}
       </main>
+
+      <footer className="version-footer">
+        <button
+          type="button"
+          className="version-button"
+          onClick={() => setVersionHistoryOpen(true)}
+        >
+          Version {APP_VERSION}
+        </button>
+      </footer>
+
+      {versionHistoryOpen && (
+        <div
+          className="modal-backdrop"
+          role="presentation"
+          onClick={() => setVersionHistoryOpen(false)}
+        >
+          <section
+            className="version-modal"
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="version-history-title"
+            onClick={(event) => event.stopPropagation()}
+          >
+            <div className="version-modal-header">
+              <div>
+                <p className="eyebrow">History</p>
+                <h2 id="version-history-title">Versionen</h2>
+              </div>
+              <button
+                type="button"
+                className="modal-close"
+                onClick={() => setVersionHistoryOpen(false)}
+                aria-label="Versionshistorie schließen"
+              >
+                Schließen
+              </button>
+            </div>
+            <div className="version-history">
+              {VERSION_HISTORY.map((entry) => (
+                <section className="version-entry" key={entry.version}>
+                  <h3>{entry.version}</h3>
+                  <ul>
+                    {entry.fixes.map((fix) => (
+                      <li key={fix}>{fix}</li>
+                    ))}
+                  </ul>
+                </section>
+              ))}
+            </div>
+          </section>
+        </div>
+      )}
     </div>
   );
 }