feat(roadmaps): Hooks, Routing, Sidebar-Tab und Übersichtsseite

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

src/components/Navbar.jsx

@@ -9,6 +9,7 @@ import {
   IconFiles,
   IconFolders,
   IconCalendar,
+  IconRoute,
   IconLayoutDashboard,
   IconReport,
   IconDeviceDesktop,
@@ -36,6 +37,7 @@ export default function Sidebar() {
       links: [
         { label: 'Tickets', href: '/tickets', icon: <IconTicket /> },
         { label: 'Planboard', href: '/planboard', icon: <IconCalendar /> },
+        { label: 'Roadmaps', href: '/roadmaps', icon: <IconRoute /> },
         { label: 'Projekte', href: '/projects', icon: <IconFolders /> },
       ],
     },

src/components/roadmap/RoadmapProgressBar.jsx

@@ -0,0 +1,23 @@
+/** Fortschrittsbalken fuer Roadmaps: Prozent + "x von y Knoten fertig". */
+export default function RoadmapProgressBar({ progress, compact = false }) {
+  const { percent, done, total } = progress || { percent: 0, done: 0, total: 0 }
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 4, minWidth: compact ? 120 : 180 }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12 }}>
+        <span className="muted">{percent}%</span>
+        {!compact && <span className="faint">{done} von {total} fertig</span>}
+      </div>
+      <div style={{ height: 6, borderRadius: 3, background: 'var(--border)', overflow: 'hidden' }}>
+        <div
+          style={{
+            width: `${percent}%`,
+            height: '100%',
+            borderRadius: 3,
+            background: percent >= 100 ? 'var(--ok, #22c55e)' : 'var(--accent, #3b82f6)',
+            transition: 'width 0.3s ease',
+          }}
+        />
+      </div>
+    </div>
+  )
+}