feat(roadmaps): Ticket-Integration — Roadmap-Panel + Projekt-Kontextbox

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

src/App.jsx

@@ -8,6 +8,8 @@ import DashboardPage from './pages/DashboardPage'
 import AssetsPage from './pages/AssetsPage'
 import PlanboardPage from './pages/PlanboardPage'
 import ProjectsPage from './pages/ProjectsPage'
+import RoadmapsPage from './pages/RoadmapsPage'
+import RoadmapDetailPage from './pages/RoadmapDetailPage'
 import ReportsPage from './pages/ReportsPage'
 import DocsPage from './pages/DocsPage'
 import AdminPage from './pages/AdminPage'
@@ -53,6 +55,8 @@ function AppRoutes() {
       <Route path="/assets" element={<ProtectedRoute><AssetsPage /></ProtectedRoute>} />
       <Route path="/planboard" element={<ProtectedRoute><PlanboardPage /></ProtectedRoute>} />
       <Route path="/projects" element={<ProtectedRoute><ProjectsPage /></ProtectedRoute>} />
+      <Route path="/roadmaps" element={<ProtectedRoute><RoadmapsPage /></ProtectedRoute>} />
+      <Route path="/roadmaps/:id" element={<ProtectedRoute><RoadmapDetailPage /></ProtectedRoute>} />
       <Route path="/reports" element={<ProtectedRoute><ReportsPage /></ProtectedRoute>} />
       <Route path="/docs" element={<ProtectedRoute><DocsPage /></ProtectedRoute>} />
       <Route path="/admin" element={<ProtectedRoute><AdminPage /></ProtectedRoute>} />

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/ProjectContextPanel.jsx

@@ -0,0 +1,97 @@
+import { useEffect, useState } from 'react'
+import { Link } from 'react-router-dom'
+import { IconFolders } from '@tabler/icons-react'
+import { StatusPill } from './ui/StatusPill'
+import { databases, DATABASE_ID, COLLECTIONS, Query } from '../lib/appwrite'
+import { fetchRoadmapByTicketId } from '../lib/roadmaps'
+import { useWebsiteProjects } from '../hooks/useWebsiteProjects'
+
+/**
+ * Projekt-Kontextbox im Ticket: zeigt automatisch das zugehoerige Projekt,
+ * alle anderen Tickets desselben Kunden (klickbar) und den Link zum aktiven Plan.
+ * Rendert nichts, wenn das Ticket keinen Projektbezug hat.
+ */
+export default function ProjectContextPanel({ ticket }) {
+  const { fetchByTicketId } = useWebsiteProjects()
+  const [context, setContext] = useState(null)
+
+  useEffect(() => {
+    let cancelled = false
+    async function load() {
+      try {
+        // Projektbezug: Roadmap dieses Tickets oder direkt zugewiesenes Projekt
+        const [roadmap, assignedProjects] = await Promise.all([
+          fetchRoadmapByTicketId(ticket.$id).catch(() => null),
+          fetchByTicketId(ticket.$id),
+        ])
+        const projectName = roadmap?.projectName || assignedProjects[0]?.projectName || ''
+        if (!roadmap && !assignedProjects.length) {
+          if (!cancelled) setContext(null)
+          return
+        }
+
+        let otherTickets = []
+        if (ticket.customerId) {
+          const res = await databases.listDocuments(DATABASE_ID, COLLECTIONS.WORKORDERS, [
+            Query.equal('customerId', ticket.customerId),
+            Query.orderDesc('$createdAt'),
+            Query.limit(50),
+          ])
+          otherTickets = res.documents.filter((t) => t.$id !== ticket.$id)
+        }
+        if (!cancelled) setContext({ roadmap, projectName, otherTickets })
+      } catch {
+        if (!cancelled) setContext(null)
+      }
+    }
+    load()
+    return () => { cancelled = true }
+  }, [ticket.$id, ticket.customerId, fetchByTicketId])
+
+  if (!context) return null
+  const { roadmap, projectName, otherTickets } = context
+
+  return (
+    <div className="ui-card pad" style={{ marginTop: 16 }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12, flexWrap: 'wrap', marginBottom: 10 }}>
+        <h5 style={{ fontWeight: 700, margin: 0, display: 'flex', alignItems: 'center', gap: 8 }}>
+          <IconFolders size={18} /> Projekt: {projectName || '-'}
+        </h5>
+        {roadmap && (
+          <Link to={`/roadmaps/${roadmap.$id}`} className="ui-btn">
+            Plan: {roadmap.title}
+          </Link>
+        )}
+      </div>
+
+      {!ticket.customerId ? (
+        <p className="faint" style={{ fontSize: 13, margin: 0 }}>
+          Kein Kunde zugeordnet — andere Tickets koennen nicht automatisch verknuepft werden.
+        </p>
+      ) : !otherTickets.length ? (
+        <p className="faint" style={{ fontSize: 13, margin: 0 }}>
+          Keine weiteren Tickets zu diesem Kunden/Projekt.
+        </p>
+      ) : (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+          {otherTickets.map((t) => (
+            <Link
+              key={t.$id}
+              to={`/tickets?woid=${t.woid}`}
+              style={{
+                display: 'flex', alignItems: 'center', gap: 10, fontSize: 13,
+                padding: '6px 8px', borderRadius: 8, border: '1px solid var(--border)',
+              }}
+            >
+              <span className="muted" style={{ minWidth: 48, fontWeight: 700 }}>{t.woid}</span>
+              <span style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                {t.topic || t.title || '-'}
+              </span>
+              <StatusPill status={t.status} />
+            </Link>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

src/components/TicketCard.jsx

@@ -12,6 +12,8 @@ import WorksheetList from './WorksheetList'
 import WorksheetStats from './WorksheetStats'
 import TicketAssignedProjectsPanel from './TicketAssignedProjectsPanel'
 import TicketProjectsModal from './TicketProjectsModal'
+import TicketRoadmapPanel from './TicketRoadmapPanel'
+import ProjectContextPanel from './ProjectContextPanel'
 import InvoicePanel from './InvoicePanel'
 import DocumentsPanel from './DocumentsPanel'
 import Tabs from './ui/Tabs'
@@ -80,7 +82,7 @@ export default function TicketCard({ ticket, onUpdate }) {
         <div className="tcard-body">
           <div className="tcard-row1">
             <span className="tcard-customer">{ticket.customerName || 'Unbekannt'}</span>
-            {ticket.customerLocation && <span className="tcard-loc"><EFBFBD> {ticket.customerLocation}</span>}
+            {ticket.customerLocation && <span className="tcard-loc"><EFBFBD> {ticket.customerLocation}</span>}
           </div>
           <div className="tcard-topic">{ticket.topic || ticket.title || 'Kein Betreff'}</div>
           <div className="tcard-badges">
@@ -118,11 +120,14 @@ export default function TicketCard({ ticket, onUpdate }) {
 
           <div className="ticket-tab-content">
             {activeTab === 'details' && (
-              <div className="ui-card pad">
-                <h5 style={{ fontWeight: 700, marginBottom: 12 }}>Ticket-Beschreibung</h5>
-                <p style={{ whiteSpace: 'pre-wrap', color: 'var(--text-muted)', lineHeight: 1.7, margin: 0 }}>
-                  {ticket.details || 'Keine Details vorhanden.'}
-                </p>
+              <div>
+                <div className="ui-card pad">
+                  <h5 style={{ fontWeight: 700, marginBottom: 12 }}>Ticket-Beschreibung</h5>
+                  <p style={{ whiteSpace: 'pre-wrap', color: 'var(--text-muted)', lineHeight: 1.7, margin: 0 }}>
+                    {ticket.details || 'Keine Details vorhanden.'}
+                  </p>
+                </div>
+                <ProjectContextPanel ticket={ticket} />
               </div>
             )}
 
@@ -148,6 +153,7 @@ export default function TicketCard({ ticket, onUpdate }) {
             {activeTab === 'documents' && <DocumentsPanel ticket={ticket} />}
             {activeTab === 'project' && (
               <div>
+                <TicketRoadmapPanel ticket={ticket} />
                 <button className="ui-btn ui-btn-primary" style={{ marginBottom: 12 }} onClick={() => setShowProjectsModal(true)}>
                   <FaPen /> Projekte zuweisen / bearbeiten
                 </button>

src/components/TicketRoadmapPanel.jsx

@@ -0,0 +1,94 @@
+import { useEffect, useState } from 'react'
+import { Link } from 'react-router-dom'
+import { IconRoute, IconAlertTriangle } from '@tabler/icons-react'
+import RoadmapProgressBar from './roadmap/RoadmapProgressBar'
+import {
+  fetchRoadmapByTicketId,
+  fetchRoadmapNodes,
+  computeProgress,
+  isNodeOverdue,
+  NODE_KIND,
+  NODE_STATUS,
+  ROADMAP_STATUS,
+} from '../lib/roadmaps'
+
+/**
+ * Roadmap-Tracking im Projektticket: Fortschritt, Mini-Uebersicht und Link zum Board.
+ * Rendert nichts, wenn zum Ticket keine Roadmap existiert.
+ */
+export default function TicketRoadmapPanel({ ticket }) {
+  const [roadmap, setRoadmap] = useState(null)
+  const [nodes, setNodes] = useState([])
+  const [loaded, setLoaded] = useState(false)
+
+  useEffect(() => {
+    let cancelled = false
+    async function load() {
+      try {
+        const doc = await fetchRoadmapByTicketId(ticket.$id)
+        if (cancelled) return
+        setRoadmap(doc)
+        if (doc) setNodes(await fetchRoadmapNodes(doc.$id))
+      } catch {
+        /* Panel ist optional */
+      } finally {
+        if (!cancelled) setLoaded(true)
+      }
+    }
+    load()
+    return () => { cancelled = true }
+  }, [ticket.$id])
+
+  if (!loaded || !roadmap) return null
+
+  const progress = computeProgress(nodes)
+  const relevant = nodes.filter((n) => n.kind !== NODE_KIND.START)
+  const counts = {
+    open: relevant.filter((n) => (n.status || NODE_STATUS.OPEN) === NODE_STATUS.OPEN).length,
+    inProgress: relevant.filter((n) => n.status === NODE_STATUS.IN_PROGRESS).length,
+    done: relevant.filter((n) => n.status === NODE_STATUS.DONE).length,
+  }
+  const nextDue = relevant
+    .filter((n) => n.deadline && n.status !== NODE_STATUS.DONE)
+    .sort((a, b) => a.deadline.localeCompare(b.deadline))
+    .slice(0, 3)
+  const closedButActive = ticket.status === 'Closed' && roadmap.status === ROADMAP_STATUS.ACTIVE
+
+  return (
+    <div className="ui-card pad" style={{ marginBottom: 16 }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12, flexWrap: 'wrap', marginBottom: 10 }}>
+        <h5 style={{ fontWeight: 700, margin: 0, display: 'flex', alignItems: 'center', gap: 8 }}>
+          <IconRoute size={18} /> Roadmap: {roadmap.title}
+        </h5>
+        <Link to={`/roadmaps/${roadmap.$id}`} className="ui-btn">Zur Roadmap</Link>
+      </div>
+
+      <RoadmapProgressBar progress={progress} />
+
+      <div className="muted" style={{ display: 'flex', gap: 14, fontSize: 13, marginTop: 10, flexWrap: 'wrap' }}>
+        <span>Offen: {counts.open}</span>
+        <span>In Arbeit: {counts.inProgress}</span>
+        <span>Fertig: {counts.done}</span>
+        {roadmap.status === ROADMAP_STATUS.COMPLETED && <span style={{ color: '#34d399' }}>Plan abgeschlossen</span>}
+      </div>
+
+      {nextDue.length > 0 && (
+        <div style={{ marginTop: 10, fontSize: 13 }}>
+          <span className="faint">Naechste Deadlines: </span>
+          {nextDue.map((n, i) => (
+            <span key={n.$id} style={isNodeOverdue(n) ? { color: 'var(--danger, #ef4444)', fontWeight: 700 } : undefined}>
+              {i > 0 && ' · '}{n.title} ({n.deadline.split('-').reverse().join('.')})
+            </span>
+          ))}
+        </div>
+      )}
+
+      {closedButActive && (
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 12, fontSize: 13, color: '#fbbf24' }}>
+          <IconAlertTriangle size={16} style={{ flexShrink: 0 }} />
+          Ticket ist geschlossen, aber der Plan ist erst zu {progress.percent}% fertig.
+        </div>
+      )}
+    </div>
+  )
+}

src/components/roadmap/NodeDetailPanel.jsx

@@ -0,0 +1,166 @@
+import { useEffect, useState } from 'react'
+import { IconTrash, IconX } from '@tabler/icons-react'
+import { Card, Button, Field } from '../ui'
+import { useEmployees } from '../../hooks/useEmployees'
+import { NODE_KIND, NODE_STATUS, NODE_STATUS_LABELS } from '../../lib/roadmaps'
+
+const STATUS_ORDER = [NODE_STATUS.OPEN, NODE_STATUS.IN_PROGRESS, NODE_STATUS.DONE]
+
+/**
+ * Seitliches Detail-Panel fuer den ausgewaehlten Knoten:
+ * Titel, Status, Zustaendiger, Deadline, Notizen, eingehende Verbindungen.
+ */
+export default function NodeDetailPanel({
+  node,
+  nodes,
+  readOnly,
+  onClose,
+  onSave,
+  onSetStatus,
+  onDelete,
+  onDisconnect,
+}) {
+  const { employees } = useEmployees()
+  const [form, setForm] = useState({ title: '', assignedTo: '', deadline: '', notes: '' })
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState('')
+
+  useEffect(() => {
+    setForm({
+      title: node.title || '',
+      assignedTo: node.assignedTo || '',
+      deadline: node.deadline || '',
+      notes: node.notes || '',
+    })
+    setError('')
+  }, [node.$id]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  const isStart = node.kind === NODE_KIND.START
+  const incoming = (node.sourceIds || [])
+    .map((id) => nodes.find((n) => n.$id === id))
+    .filter(Boolean)
+
+  const handleSave = async () => {
+    if (!form.title.trim()) {
+      setError('Titel darf nicht leer sein.')
+      return
+    }
+    setSaving(true)
+    setError('')
+    const employee = employees.find((e) => e.userId === form.assignedTo)
+    const result = await onSave(node, {
+      title: form.title.trim(),
+      assignedTo: form.assignedTo,
+      assignedName: employee?.displayName || '',
+      deadline: form.deadline,
+      notes: form.notes,
+    })
+    setSaving(false)
+    if (!result.success) setError(result.error)
+  }
+
+  return (
+    <Card
+      title={isStart ? 'Start-Knoten' : node.kind === NODE_KIND.GOAL ? 'Ziel-Knoten' : 'Schritt'}
+      actions={<Button variant="ghost" onClick={onClose}><IconX size={16} /></Button>}
+    >
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+        <Field label="Titel">
+          <input
+            type="text"
+            value={form.title}
+            maxLength={128}
+            disabled={readOnly}
+            onChange={(e) => setForm((f) => ({ ...f, title: e.target.value }))}
+          />
+        </Field>
+
+        {!isStart && (
+          <Field label="Status">
+            <div style={{ display: 'flex', gap: 6 }}>
+              {STATUS_ORDER.map((status) => (
+                <Button
+                  key={status}
+                  variant={node.status === status ? 'primary' : 'default'}
+                  disabled={readOnly}
+                  onClick={() => onSetStatus(node, status)}
+                >
+                  {NODE_STATUS_LABELS[status]}
+                </Button>
+              ))}
+            </div>
+          </Field>
+        )}
+
+        {!isStart && (
+          <Field label="Zustaendig">
+            <select
+              value={form.assignedTo}
+              disabled={readOnly}
+              onChange={(e) => setForm((f) => ({ ...f, assignedTo: e.target.value }))}
+            >
+              <option value="">Niemand</option>
+              {employees.map((e) => (
+                <option key={e.userId} value={e.userId}>{e.displayName}</option>
+              ))}
+            </select>
+          </Field>
+        )}
+
+        {!isStart && (
+          <Field label="Deadline">
+            <input
+              type="date"
+              value={form.deadline}
+              disabled={readOnly}
+              onChange={(e) => setForm((f) => ({ ...f, deadline: e.target.value }))}
+            />
+          </Field>
+        )}
+
+        <Field label="Notizen">
+          <textarea
+            rows={4}
+            value={form.notes}
+            maxLength={2000}
+            disabled={readOnly}
+            placeholder="Details, Anforderungen, Links…"
+            onChange={(e) => setForm((f) => ({ ...f, notes: e.target.value }))}
+          />
+        </Field>
+
+        {incoming.length > 0 && (
+          <Field label="Eingehende Verbindungen">
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+              {incoming.map((source) => (
+                <div key={source.$id} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 13 }}>
+                  <span className="muted">{source.title}</span>
+                  {!readOnly && (
+                    <Button variant="ghost" title="Verbindung loesen" onClick={() => onDisconnect(source.$id, node)}>
+                      <IconX size={14} />
+                    </Button>
+                  )}
+                </div>
+              ))}
+            </div>
+          </Field>
+        )}
+
+        {error && <p style={{ color: 'var(--danger, #ef4444)', fontSize: 13 }}>{error}</p>}
+
+        {!readOnly && (
+          <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 8 }}>
+            {!isStart ? (
+              <Button variant="ghost" onClick={() => onDelete(node)} title="Knoten loeschen">
+                <IconTrash size={15} /> Loeschen
+              </Button>
+            ) : <span />}
+            <Button variant="primary" onClick={handleSave} disabled={saving}>
+              {saving ? 'Speichere…' : 'Speichern'}
+            </Button>
+          </div>
+        )}
+      </div>
+    </Card>
+  )
+}

src/components/roadmap/RoadmapBoard.jsx

@@ -0,0 +1,168 @@
+import { useLayoutEffect, useRef, useState, useCallback } from 'react'
+import { IconPlus } from '@tabler/icons-react'
+import RoadmapNodeCard from './RoadmapNodeCard'
+import { NODE_KIND } from '../../lib/roadmaps'
+
+const COLUMN_WIDTH = 230
+const COLUMN_GAP = 48
+
+/**
+ * Steckbrett: Spalten von links (Start) nach rechts (Ziele), Knoten vertikal
+ * gestapelt, Kanten als SVG-Overlay. Verbinden per Klick-Modus:
+ * Connect-Handle am Quellknoten -> gueltige Ziele (Spalte weiter rechts) anklicken.
+ */
+export default function RoadmapBoard({
+  roadmap,
+  nodes,
+  selectedNode,
+  readOnly,
+  onSelectNode,
+  onAddNode,
+  onConnect,
+}) {
+  const containerRef = useRef(null)
+  const nodeRefs = useRef({})
+  const [edges, setEdges] = useState([])
+  const [connectSource, setConnectSource] = useState(null)
+
+  const columnCount = Math.max(roadmap.columnCount || 3, 2)
+  const columns = Array.from({ length: columnCount }, (_, c) =>
+    nodes.filter((n) => n.column === c).sort((a, b) => (a.row || 0) - (b.row || 0))
+  )
+
+  const setNodeRef = useCallback((id) => (el) => {
+    if (el) nodeRefs.current[id] = el
+    else delete nodeRefs.current[id]
+  }, [])
+
+  // Kanten-Geometrie nach jedem Layout neu berechnen (Anker relativ zum Board)
+  useLayoutEffect(() => {
+    const container = containerRef.current
+    if (!container) return
+    const compute = () => {
+      const base = container.getBoundingClientRect()
+      const next = []
+      for (const node of nodes) {
+        for (const sourceId of node.sourceIds || []) {
+          const sourceEl = nodeRefs.current[sourceId]
+          const targetEl = nodeRefs.current[node.$id]
+          if (!sourceEl || !targetEl) continue
+          const s = sourceEl.getBoundingClientRect()
+          const t = targetEl.getBoundingClientRect()
+          next.push({
+            id: `${sourceId}-${node.$id}`,
+            x1: s.right - base.left,
+            y1: s.top + s.height / 2 - base.top,
+            x2: t.left - base.left,
+            y2: t.top + t.height / 2 - base.top,
+          })
+        }
+      }
+      setEdges(next)
+    }
+    compute()
+    const observer = new ResizeObserver(compute)
+    observer.observe(container)
+    return () => observer.disconnect()
+  }, [nodes, columnCount])
+
+  const handleStartConnect = (node) => setConnectSource(node)
+
+  const handleSelect = async (node) => {
+    if (connectSource) {
+      if (node.column > connectSource.column) {
+        await onConnect(connectSource, node)
+      }
+      setConnectSource(null)
+      return
+    }
+    onSelectNode(node)
+  }
+
+  const columnLabel = (c) => {
+    if (c === 0) return 'Start'
+    if (c === columnCount - 1) return 'Ziele'
+    return `Phase ${c}`
+  }
+
+  return (
+    <div style={{ overflowX: 'auto', paddingBottom: 8 }}>
+      {connectSource && (
+        <div
+          className="muted"
+          style={{ fontSize: 13, marginBottom: 8, display: 'flex', alignItems: 'center', gap: 10 }}
+        >
+          Verbinden von <strong>{connectSource.title}</strong>: Zielknoten rechts davon anklicken.
+          <button type="button" className="ui-btn" onClick={() => setConnectSource(null)}>Abbrechen</button>
+        </div>
+      )}
+      <div
+        ref={containerRef}
+        style={{
+          position: 'relative',
+          display: 'grid',
+          gridTemplateColumns: `repeat(${columnCount}, ${COLUMN_WIDTH}px)`,
+          gap: `16px ${COLUMN_GAP}px`,
+          alignItems: 'start',
+          minWidth: columnCount * (COLUMN_WIDTH + COLUMN_GAP),
+          padding: '8px 4px',
+        }}
+      >
+        <svg
+          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', pointerEvents: 'none', zIndex: 0 }}
+        >
+          <defs>
+            <marker id="roadmap-arrow" markerWidth="8" markerHeight="8" refX="7" refY="4" orient="auto">
+              <path d="M0,0 L8,4 L0,8 Z" fill="var(--text-muted, #94a3b8)" />
+            </marker>
+          </defs>
+          {edges.map((e) => {
+            const dx = Math.max((e.x2 - e.x1) / 2, 24)
+            return (
+              <path
+                key={e.id}
+                d={`M ${e.x1} ${e.y1} C ${e.x1 + dx} ${e.y1}, ${e.x2 - dx} ${e.y2}, ${e.x2} ${e.y2}`}
+                fill="none"
+                stroke="var(--text-muted, #94a3b8)"
+                strokeWidth="1.5"
+                markerEnd="url(#roadmap-arrow)"
+                opacity="0.7"
+              />
+            )
+          })}
+        </svg>
+
+        {columns.map((columnNodes, c) => (
+          <div key={c} style={{ display: 'flex', flexDirection: 'column', gap: 14, zIndex: 1 }}>
+            <div className="faint" style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: 0.5 }}>
+              {columnLabel(c)}
+            </div>
+            {columnNodes.map((node) => (
+              <RoadmapNodeCard
+                key={node.$id}
+                node={node}
+                selected={selectedNode?.$id === node.$id}
+                readOnly={readOnly}
+                connectSource={connectSource}
+                isValidTarget={Boolean(connectSource) && node.column > connectSource.column}
+                onSelect={handleSelect}
+                onStartConnect={handleStartConnect}
+                nodeRef={setNodeRef(node.$id)}
+              />
+            ))}
+            {!readOnly && c > 0 && (
+              <button
+                type="button"
+                className="ui-btn"
+                style={{ borderStyle: 'dashed', fontSize: 12 }}
+                onClick={() => onAddNode(c, c === columnCount - 1 ? NODE_KIND.GOAL : NODE_KIND.STEP, columnNodes.length)}
+              >
+                <IconPlus size={14} /> {c === columnCount - 1 ? 'Ziel' : 'Schritt'}
+              </button>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

src/components/roadmap/RoadmapNodeCard.jsx

@@ -0,0 +1,101 @@
+import { IconFlag, IconPlayerPlay, IconLink } from '@tabler/icons-react'
+import { NODE_KIND, NODE_STATUS, isNodeOverdue } from '../../lib/roadmaps'
+
+const STATUS_COLORS = {
+  [NODE_STATUS.OPEN]: 'var(--text-muted, #94a3b8)',
+  [NODE_STATUS.IN_PROGRESS]: '#fbbf24',
+  [NODE_STATUS.DONE]: '#34d399',
+}
+
+/**
+ * Knoten-Kachel im Steckbrett.
+ * connectMode: Board wartet auf Zielauswahl; isValidTarget markiert erlaubte Ziele.
+ */
+export default function RoadmapNodeCard({
+  node,
+  selected,
+  readOnly,
+  connectSource,
+  isValidTarget,
+  onSelect,
+  onStartConnect,
+  nodeRef,
+}) {
+  const overdue = isNodeOverdue(node)
+  const isStart = node.kind === NODE_KIND.START
+  const isGoal = node.kind === NODE_KIND.GOAL
+  const connecting = Boolean(connectSource)
+  const isConnectSource = connectSource?.$id === node.$id
+
+  const borderColor = isConnectSource
+    ? 'var(--accent, #3b82f6)'
+    : connecting && isValidTarget
+      ? '#34d399'
+      : selected
+        ? 'var(--accent, #3b82f6)'
+        : overdue
+          ? 'var(--danger, #ef4444)'
+          : 'var(--border)'
+
+  return (
+    <div
+      ref={nodeRef}
+      onClick={() => onSelect(node)}
+      style={{
+        position: 'relative',
+        background: isGoal ? 'rgba(59,130,246,0.10)' : 'var(--surface-2, rgba(45,55,72,0.65))',
+        border: `2px solid ${borderColor}`,
+        borderRadius: 10,
+        padding: '10px 12px',
+        cursor: 'pointer',
+        opacity: connecting && !isValidTarget && !isConnectSource ? 0.45 : 1,
+        transition: 'border-color 0.15s ease, opacity 0.15s ease',
+      }}
+    >
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+        {isStart && <IconPlayerPlay size={15} style={{ flexShrink: 0 }} />}
+        {isGoal && <IconFlag size={15} style={{ flexShrink: 0, color: '#93c5fd' }} />}
+        {!isStart && (
+          <span
+            title={`Status: ${node.status || 'open'}`}
+            style={{
+              width: 10, height: 10, borderRadius: 5, flexShrink: 0,
+              background: STATUS_COLORS[node.status] || STATUS_COLORS.open,
+            }}
+          />
+        )}
+        <span style={{ fontWeight: 600, fontSize: 13, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+          {node.title}
+        </span>
+      </div>
+
+      {(node.assignedName || node.deadline) && (
+        <div style={{ display: 'flex', gap: 8, marginTop: 6, fontSize: 11 }} className="faint">
+          {node.assignedName && <span>{node.assignedName}</span>}
+          {node.deadline && (
+            <span style={overdue ? { color: 'var(--danger, #ef4444)', fontWeight: 700 } : undefined}>
+              bis {node.deadline.split('-').reverse().join('.')}
+            </span>
+          )}
+        </div>
+      )}
+
+      {!readOnly && !isGoal && !connecting && (
+        <button
+          type="button"
+          title="Verbindung von hier starten"
+          onClick={(e) => { e.stopPropagation(); onStartConnect(node) }}
+          style={{
+            position: 'absolute', right: -11, top: '50%', transform: 'translateY(-50%)',
+            width: 22, height: 22, borderRadius: 11,
+            border: '1px solid var(--border)', background: 'var(--surface, #1e293b)',
+            color: 'var(--text-muted)', display: 'flex', alignItems: 'center',
+            justifyContent: 'center', cursor: 'crosshair', padding: 0,
+          }}
+        >
+          <IconLink size={12} />
+        </button>
+      )}
+    </div>
+  )
+}

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>
+  )
+}

src/hooks/useRoadmapNodes.js

@@ -0,0 +1,135 @@
+import { useState, useCallback } from 'react'
+import { databases, DATABASE_ID, COLLECTIONS, ID, isDemoMode } from '../lib/appwrite'
+import {
+  fetchRoadmapNodes,
+  logNodeStatusWorksheet,
+  allGoalsDone,
+  NODE_KIND,
+  NODE_STATUS,
+} from '../lib/roadmaps'
+
+export function useRoadmapNodes() {
+  const [nodes, setNodes] = useState([])
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState(null)
+
+  const fetchNodes = useCallback(async (roadmapId) => {
+    if (!roadmapId || isDemoMode) return []
+    setLoading(true)
+    setError(null)
+    try {
+      const docs = await fetchRoadmapNodes(roadmapId)
+      setNodes(docs)
+      return docs
+    } catch (err) {
+      setError(err.message)
+      return []
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  const createNode = async (roadmapId, { title, column, row, kind }) => {
+    if (isDemoMode) return { success: false, error: 'Demo-Modus' }
+    try {
+      const now = new Date().toISOString()
+      const doc = await databases.createDocument(DATABASE_ID, COLLECTIONS.ROADMAP_NODES, ID.unique(), {
+        roadmapId,
+        title: title || 'Neuer Schritt',
+        kind: kind || NODE_KIND.STEP,
+        column,
+        row,
+        status: NODE_STATUS.OPEN,
+        createdAt: now,
+        updatedAt: now,
+      })
+      setNodes((prev) => [...prev, doc])
+      return { success: true, data: doc }
+    } catch (err) {
+      return { success: false, error: err.message }
+    }
+  }
+
+  const updateNode = async (nodeId, data) => {
+    if (isDemoMode) return { success: false, error: 'Demo-Modus' }
+    try {
+      const doc = await databases.updateDocument(DATABASE_ID, COLLECTIONS.ROADMAP_NODES, nodeId, {
+        ...data,
+        updatedAt: new Date().toISOString(),
+      })
+      setNodes((prev) => prev.map((n) => (n.$id === nodeId ? doc : n)))
+      return { success: true, data: doc }
+    } catch (err) {
+      return { success: false, error: err.message }
+    }
+  }
+
+  /** Knoten loeschen inkl. Bereinigung eingehender Kanten bei den Nachfolgern. */
+  const deleteNode = async (node) => {
+    if (isDemoMode) return { success: false, error: 'Demo-Modus' }
+    if (node.kind === NODE_KIND.START) {
+      return { success: false, error: 'Der Start-Knoten kann nicht geloescht werden.' }
+    }
+    if (node.kind === NODE_KIND.GOAL && nodes.filter((n) => n.kind === NODE_KIND.GOAL).length <= 1) {
+      return { success: false, error: 'Ein Plan braucht mindestens ein Ziel.' }
+    }
+    try {
+      const successors = nodes.filter((n) => (n.sourceIds || []).includes(node.$id))
+      await Promise.all(successors.map((n) =>
+        databases.updateDocument(DATABASE_ID, COLLECTIONS.ROADMAP_NODES, n.$id, {
+          sourceIds: (n.sourceIds || []).filter((id) => id !== node.$id),
+          updatedAt: new Date().toISOString(),
+        })
+      ))
+      await databases.deleteDocument(DATABASE_ID, COLLECTIONS.ROADMAP_NODES, node.$id)
+      setNodes((prev) => prev
+        .filter((n) => n.$id !== node.$id)
+        .map((n) => ((n.sourceIds || []).includes(node.$id)
+          ? { ...n, sourceIds: n.sourceIds.filter((id) => id !== node.$id) }
+          : n))
+      )
+      return { success: true }
+    } catch (err) {
+      return { success: false, error: err.message }
+    }
+  }
+
+  /** Kante anlegen: immer vorwaerts (Zielspalte > Quellspalte), keine Duplikate. */
+  const connectNodes = async (source, target) => {
+    if (isDemoMode) return { success: false, error: 'Demo-Modus' }
+    if (source.$id === target.$id) return { success: false, error: 'Knoten kann nicht mit sich selbst verbunden werden.' }
+    if (target.column <= source.column) {
+      return { success: false, error: 'Verbindungen laufen immer vorwaerts (nach rechts).' }
+    }
+    if ((target.sourceIds || []).includes(source.$id)) {
+      return { success: false, error: 'Diese Verbindung existiert bereits.' }
+    }
+    return updateNode(target.$id, { sourceIds: [...(target.sourceIds || []), source.$id] })
+  }
+
+  const disconnectNodes = async (sourceId, target) => {
+    return updateNode(target.$id, { sourceIds: (target.sourceIds || []).filter((id) => id !== sourceId) })
+  }
+
+  /** Statuswechsel inkl. Worksheet-Log am Projektticket; meldet, ob alle Ziele fertig sind. */
+  const setNodeStatus = async (roadmap, node, newStatus, user) => {
+    if (isDemoMode) return { success: false, error: 'Demo-Modus' }
+    const oldStatus = node.status || NODE_STATUS.OPEN
+    if (oldStatus === newStatus) return { success: true, allGoalsDone: false }
+    const result = await updateNode(node.$id, { status: newStatus })
+    if (!result.success) return result
+    try {
+      await logNodeStatusWorksheet(roadmap, node, oldStatus, newStatus, user)
+    } catch {
+      /* Verlaufslog ist optional - Statuswechsel bleibt gueltig */
+    }
+    const updatedNodes = nodes.map((n) => (n.$id === node.$id ? { ...n, status: newStatus } : n))
+    return { success: true, data: result.data, allGoalsDone: allGoalsDone(updatedNodes) }
+  }
+
+  return {
+    nodes, loading, error, setNodes,
+    fetchNodes, createNode, updateNode, deleteNode,
+    connectNodes, disconnectNodes, setNodeStatus,
+  }
+}

src/hooks/useRoadmaps.js

@@ -0,0 +1,100 @@
+import { useState, useCallback } from 'react'
+import { databases, DATABASE_ID, COLLECTIONS, Query, isDemoMode } from '../lib/appwrite'
+import {
+  createRoadmapPlan,
+  deleteRoadmapPlan,
+  completeRoadmap,
+  fetchRoadmapByTicketId,
+} from '../lib/roadmaps'
+
+export function useRoadmaps() {
+  const [roadmaps, setRoadmaps] = useState([])
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState(null)
+
+  const fetchAll = useCallback(async () => {
+    if (isDemoMode) return []
+    setLoading(true)
+    setError(null)
+    try {
+      const response = await databases.listDocuments(
+        DATABASE_ID, COLLECTIONS.ROADMAPS,
+        [Query.orderDesc('$createdAt'), Query.limit(500)]
+      )
+      setRoadmaps(response.documents)
+      return response.documents
+    } catch (err) {
+      setError(err.message)
+      return []
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  const fetchById = useCallback(async (roadmapId) => {
+    if (!roadmapId || isDemoMode) return null
+    try {
+      return await databases.getDocument(DATABASE_ID, COLLECTIONS.ROADMAPS, roadmapId)
+    } catch {
+      return null
+    }
+  }, [])
+
+  const fetchByTicketId = useCallback(async (ticketId) => {
+    if (isDemoMode) return null
+    try {
+      return await fetchRoadmapByTicketId(ticketId)
+    } catch {
+      return null
+    }
+  }, [])
+
+  const createRoadmap = async (project, data, user) => {
+    if (isDemoMode) return { success: false, error: 'Demo-Modus' }
+    try {
+      const result = await createRoadmapPlan(project, data, user)
+      setRoadmaps((prev) => [result.roadmap, ...prev])
+      return { success: true, data: result }
+    } catch (err) {
+      return { success: false, error: err.message }
+    }
+  }
+
+  const updateRoadmap = async (roadmapId, data) => {
+    if (isDemoMode) return { success: false, error: 'Demo-Modus' }
+    try {
+      const doc = await databases.updateDocument(DATABASE_ID, COLLECTIONS.ROADMAPS, roadmapId, {
+        ...data,
+        updatedAt: new Date().toISOString(),
+      })
+      setRoadmaps((prev) => prev.map((r) => (r.$id === roadmapId ? doc : r)))
+      return { success: true, data: doc }
+    } catch (err) {
+      return { success: false, error: err.message }
+    }
+  }
+
+  const deleteRoadmap = async (roadmap, user) => {
+    if (isDemoMode) return { success: false, error: 'Demo-Modus' }
+    try {
+      await deleteRoadmapPlan(roadmap, user)
+      setRoadmaps((prev) => prev.filter((r) => r.$id !== roadmap.$id))
+      return { success: true }
+    } catch (err) {
+      return { success: false, error: err.message }
+    }
+  }
+
+  const completePlan = async (roadmap, user) => {
+    if (isDemoMode) return { success: false, error: 'Demo-Modus' }
+    try {
+      const updated = await completeRoadmap(roadmap, user)
+      setRoadmaps((prev) => prev.map((r) => (r.$id === updated.$id ? updated : r)))
+      return { success: true, data: updated }
+    } catch (err) {
+      return { success: false, error: err.message }
+    }
+  }
+
+  return { roadmaps, loading, error, fetchAll, fetchById, fetchByTicketId, createRoadmap, updateRoadmap, deleteRoadmap, completePlan }
+}

src/lib/appwrite.js

@@ -43,9 +43,12 @@ export const COLLECTIONS = {
   LEADS: 'leads',
   LEAD_SETTINGS: 'leadSettings',
   LEAD_PIPELINE: 'leadPipeline',
+  ROADMAPS: 'roadmaps',
+  ROADMAP_NODES: 'roadmapNodes',
 }
 
 export const WEBPAGE_TICKET_TYPE = 'Webpage'
+export const PROJECT_TICKET_TYPE = 'Project'
 export const PREVIEW_TEMPLATE_NAME = 'webklar-preview-template'
 
 export const BUCKET_ID = import.meta.env.VITE_APPWRITE_BUCKET_ID || 'woms-attachments'

src/lib/roadmaps.js

@@ -0,0 +1,292 @@
+import { databases, DATABASE_ID, COLLECTIONS, PROJECT_TICKET_TYPE, Query, ID } from './appwrite'
+
+/**
+ * Roadmaps: projektspezifische Plaene als Steckbrett (Spalten-Raster).
+ * Ein Dokument pro Knoten; Kanten als sourceIds (Vorgaenger) am Zielknoten.
+ * Genau 1 aktiver Plan pro Projekt (Pruefung hier, nicht per Index erzwingbar).
+ * Jeder Plan erzeugt automatisch ein Projektticket (Vorbild: createAcquisitionTicket in leads.js).
+ */
+
+export const ROADMAP_STATUS = { ACTIVE: 'active', COMPLETED: 'completed' }
+export const NODE_STATUS = { OPEN: 'open', IN_PROGRESS: 'in_progress', DONE: 'done' }
+export const NODE_KIND = { START: 'start', STEP: 'step', GOAL: 'goal' }
+
+export const NODE_STATUS_LABELS = {
+  open: 'Offen',
+  in_progress: 'In Arbeit',
+  done: 'Fertig',
+}
+
+/** Fortschritt in Prozent: fertige Knoten / alle Knoten ausser Start. */
+export function computeProgress(nodes) {
+  const relevant = (nodes || []).filter((n) => n.kind !== NODE_KIND.START)
+  if (!relevant.length) return { percent: 0, done: 0, total: 0 }
+  const done = relevant.filter((n) => n.status === NODE_STATUS.DONE).length
+  return { percent: Math.round((done / relevant.length) * 100), done, total: relevant.length }
+}
+
+export function allGoalsDone(nodes) {
+  const goals = (nodes || []).filter((n) => n.kind === NODE_KIND.GOAL)
+  return goals.length > 0 && goals.every((n) => n.status === NODE_STATUS.DONE)
+}
+
+export function isNodeOverdue(node) {
+  if (!node?.deadline || node.status === NODE_STATUS.DONE) return false
+  return node.deadline < new Date().toISOString().slice(0, 10)
+}
+
+/** Aktiver Plan eines Projekts (oder null). */
+export async function fetchActiveRoadmapByProject(projectId) {
+  const res = await databases.listDocuments(DATABASE_ID, COLLECTIONS.ROADMAPS, [
+    Query.equal('projectId', projectId),
+    Query.equal('status', ROADMAP_STATUS.ACTIVE),
+    Query.limit(1),
+  ])
+  return res.documents[0] || null
+}
+
+export async function fetchRoadmapByTicketId(ticketId) {
+  if (!ticketId) return null
+  const res = await databases.listDocuments(DATABASE_ID, COLLECTIONS.ROADMAPS, [
+    Query.equal('ticketId', ticketId),
+    Query.limit(1),
+  ])
+  return res.documents[0] || null
+}
+
+export async function fetchRoadmapNodes(roadmapId) {
+  const res = await databases.listDocuments(DATABASE_ID, COLLECTIONS.ROADMAP_NODES, [
+    Query.equal('roadmapId', roadmapId),
+    Query.limit(500),
+  ])
+  return res.documents
+}
+
+async function nextWoid() {
+  try {
+    const res = await databases.listDocuments(DATABASE_ID, COLLECTIONS.WORKORDERS, [
+      Query.orderDesc('$createdAt'),
+      Query.limit(200),
+    ])
+    const nums = res.documents.map((d) => parseInt(d.woid)).filter((n) => !isNaN(n) && n > 0)
+    return String((nums.length ? Math.max(...nums) : 9999) + 1)
+  } catch {
+    return String(10000)
+  }
+}
+
+async function nextWsid() {
+  try {
+    const res = await databases.listDocuments(DATABASE_ID, COLLECTIONS.WORKSHEETS, [
+      Query.orderDesc('wsid'),
+      Query.limit(1),
+    ])
+    const highest = parseInt(res.documents[0]?.wsid)
+    return String(isNaN(highest) ? 100000 : highest + 1)
+  } catch {
+    return String(100000)
+  }
+}
+
+/** Automatisches Projektticket fuer einen neuen Plan. */
+async function createRoadmapTicket(roadmap, project, user) {
+  const woid = await nextWoid()
+  const data = {
+    topic: `Projekt: ${project.projectName}`,
+    status: 'Open',
+    priority: 2,
+    woid,
+    type: PROJECT_TICKET_TYPE,
+    systemType: 'n/a',
+    serviceType: 'Remote',
+    assignedTo: user?.$id || '',
+    details:
+      `Automatisch erstelltes Projektticket fuer die Roadmap "${roadmap.title}" ` +
+      `zum Projekt "${project.projectName}".\n\n` +
+      `Der Planfortschritt wird hier getrackt: Jede Statusaenderung eines Roadmap-Knotens ` +
+      `erzeugt einen Verlaufseintrag (Worksheet). Sind alle Ziel-Knoten fertig, wird das ` +
+      `Ticket geschlossen und der Plan archiviert.`,
+    createdAt: new Date().toISOString(),
+  }
+  if (project.customerId) {
+    data.customerId = project.customerId
+    if (roadmap.customerName) data.customerName = roadmap.customerName
+  }
+  return databases.createDocument(DATABASE_ID, COLLECTIONS.WORKORDERS, ID.unique(), data)
+}
+
+/**
+ * Legt einen neuen Plan an: Roadmap-Dokument + Start-Knoten + Ziel-Knoten + Auto-Ticket.
+ * Wirft, wenn das Projekt bereits einen aktiven Plan hat.
+ */
+export async function createRoadmapPlan(project, { title, goalTitle }, user) {
+  const existing = await fetchActiveRoadmapByProject(project.$id)
+  if (existing) {
+    throw new Error(`Das Projekt "${project.projectName}" hat bereits einen aktiven Plan.`)
+  }
+
+  let customerName = ''
+  if (project.customerId) {
+    try {
+      const customer = await databases.getDocument(DATABASE_ID, COLLECTIONS.CUSTOMERS, project.customerId)
+      customerName = customer.name || ''
+    } catch {
+      /* Kunde optional */
+    }
+  }
+
+  const now = new Date().toISOString()
+  const columnCount = 3
+  const roadmap = await databases.createDocument(DATABASE_ID, COLLECTIONS.ROADMAPS, ID.unique(), {
+    projectId: project.$id,
+    projectName: project.projectName || '',
+    customerId: project.customerId || '',
+    customerName,
+    title: title || `Plan: ${project.projectName}`,
+    status: ROADMAP_STATUS.ACTIVE,
+    columnCount,
+    createdBy: user?.$id || '',
+    createdAt: now,
+    updatedAt: now,
+  })
+
+  await Promise.all([
+    databases.createDocument(DATABASE_ID, COLLECTIONS.ROADMAP_NODES, ID.unique(), {
+      roadmapId: roadmap.$id,
+      title: 'Start',
+      kind: NODE_KIND.START,
+      column: 0,
+      row: 0,
+      status: NODE_STATUS.OPEN,
+      createdAt: now,
+      updatedAt: now,
+    }),
+    databases.createDocument(DATABASE_ID, COLLECTIONS.ROADMAP_NODES, ID.unique(), {
+      roadmapId: roadmap.$id,
+      title: goalTitle || 'Ziel',
+      kind: NODE_KIND.GOAL,
+      column: columnCount - 1,
+      row: 0,
+      status: NODE_STATUS.OPEN,
+      createdAt: now,
+      updatedAt: now,
+    }),
+  ])
+
+  let ticket = null
+  try {
+    ticket = await createRoadmapTicket(roadmap, project, user)
+    await databases.updateDocument(DATABASE_ID, COLLECTIONS.ROADMAPS, roadmap.$id, {
+      ticketId: ticket.$id,
+      woid: ticket.woid,
+    })
+    roadmap.ticketId = ticket.$id
+    roadmap.woid = ticket.woid
+  } catch {
+    /* Ticket ist optional - Plan bleibt bestehen */
+  }
+  return { roadmap, ticket }
+}
+
+/** Verlaufseintrag (Worksheet-Kommentar) am Projektticket, ohne den Ticket-Status zu aendern. */
+export async function logRoadmapWorksheet(roadmap, detailsText, user) {
+  if (!roadmap?.ticketId) return null
+  let ticket
+  try {
+    ticket = await databases.getDocument(DATABASE_ID, COLLECTIONS.WORKORDERS, roadmap.ticketId)
+  } catch {
+    return null // Ticket geloescht -> kein Log
+  }
+  const today = new Date().toISOString().slice(0, 10)
+  const wsid = await nextWsid()
+  return databases.createDocument(DATABASE_ID, COLLECTIONS.WORKSHEETS, ID.unique(), {
+    wsid,
+    woid: ticket.woid || roadmap.woid || '',
+    workorderId: ticket.$id,
+    employeeId: user?.$id || 'system',
+    employeeName: user?.name || user?.email || 'System',
+    serviceType: 'Remote',
+    oldStatus: ticket.status,
+    newStatus: ticket.status,
+    totalTime: 0,
+    startDate: today,
+    endDate: today,
+    details: detailsText,
+    isComment: true,
+    createdAt: new Date().toISOString(),
+  })
+}
+
+/** Knoten-Statuswechsel im Ticketverlauf dokumentieren. */
+export async function logNodeStatusWorksheet(roadmap, node, oldStatus, newStatus, user) {
+  const from = NODE_STATUS_LABELS[oldStatus] || oldStatus || '-'
+  const to = NODE_STATUS_LABELS[newStatus] || newStatus
+  return logRoadmapWorksheet(roadmap, `Roadmap-Knoten "${node.title}": ${from} -> ${to}`, user)
+}
+
+/**
+ * Plan abschliessen: Roadmap archivieren, Ticket schliessen (falls noch offen)
+ * und den Abschluss im Verlauf dokumentieren.
+ */
+export async function completeRoadmap(roadmap, user) {
+  const now = new Date().toISOString()
+  const updated = await databases.updateDocument(DATABASE_ID, COLLECTIONS.ROADMAPS, roadmap.$id, {
+    status: ROADMAP_STATUS.COMPLETED,
+    completedAt: now,
+    updatedAt: now,
+  })
+  if (roadmap.ticketId) {
+    try {
+      const ticket = await databases.getDocument(DATABASE_ID, COLLECTIONS.WORKORDERS, roadmap.ticketId)
+      if (ticket.status !== 'Closed') {
+        const wsid = await nextWsid()
+        const today = now.slice(0, 10)
+        await databases.createDocument(DATABASE_ID, COLLECTIONS.WORKSHEETS, ID.unique(), {
+          wsid,
+          woid: ticket.woid || '',
+          workorderId: ticket.$id,
+          employeeId: user?.$id || 'system',
+          employeeName: user?.name || user?.email || 'System',
+          serviceType: 'Remote',
+          oldStatus: ticket.status,
+          newStatus: 'Closed',
+          totalTime: 0,
+          startDate: today,
+          endDate: today,
+          details: `Roadmap "${roadmap.title}" abgeschlossen: alle Ziel-Knoten fertig. Ticket automatisch geschlossen.`,
+          isComment: true,
+          createdAt: now,
+        })
+        await databases.updateDocument(DATABASE_ID, COLLECTIONS.WORKORDERS, ticket.$id, { status: 'Closed' })
+      } else {
+        await logRoadmapWorksheet({ ...roadmap, status: ROADMAP_STATUS.COMPLETED }, `Roadmap "${roadmap.title}" abgeschlossen (Ticket war bereits geschlossen).`, user)
+      }
+    } catch {
+      /* Ticket fehlt -> nur archivieren */
+    }
+  }
+  return updated
+}
+
+/**
+ * Aktiven Plan loeschen (destruktiv): alle Knoten + Roadmap entfernen,
+ * Auto-Ticket auf Cancelled setzen. Abgeschlossene Plaene werden nie geloescht.
+ */
+export async function deleteRoadmapPlan(roadmap, user) {
+  const nodes = await fetchRoadmapNodes(roadmap.$id)
+  await logRoadmapWorksheet(roadmap, `Roadmap "${roadmap.title}" geloescht. Ticket wird abgebrochen.`, user)
+  for (const node of nodes) {
+    await databases.deleteDocument(DATABASE_ID, COLLECTIONS.ROADMAP_NODES, node.$id)
+  }
+  await databases.deleteDocument(DATABASE_ID, COLLECTIONS.ROADMAPS, roadmap.$id)
+  if (roadmap.ticketId) {
+    try {
+      const ticket = await databases.getDocument(DATABASE_ID, COLLECTIONS.WORKORDERS, roadmap.ticketId)
+      if (ticket.status !== 'Closed' && ticket.status !== 'Cancelled') {
+        await databases.updateDocument(DATABASE_ID, COLLECTIONS.WORKORDERS, ticket.$id, { status: 'Cancelled' })
+      }
+    } catch {
+      /* Ticket fehlt -> nichts zu tun */
+    }
+  }
+}

src/pages/RoadmapDetailPage.jsx

@@ -0,0 +1,205 @@
+import { useCallback, useEffect, useState } from 'react'
+import { Link, useNavigate, useParams } from 'react-router-dom'
+import { IconArrowLeft, IconColumnInsertRight, IconTicket, IconAlertTriangle } from '@tabler/icons-react'
+import { PageHeader, Card, Button, Badge } from '../components/ui'
+import RoadmapBoard from '../components/roadmap/RoadmapBoard'
+import NodeDetailPanel from '../components/roadmap/NodeDetailPanel'
+import RoadmapProgressBar from '../components/roadmap/RoadmapProgressBar'
+import { useAuth } from '../context/AuthContext'
+import { useRoadmaps } from '../hooks/useRoadmaps'
+import { useRoadmapNodes } from '../hooks/useRoadmapNodes'
+import { databases, DATABASE_ID, COLLECTIONS } from '../lib/appwrite'
+import { computeProgress, NODE_KIND, ROADMAP_STATUS } from '../lib/roadmaps'
+
+export default function RoadmapDetailPage() {
+  const { id } = useParams()
+  const navigate = useNavigate()
+  const { user } = useAuth()
+  const { fetchById, updateRoadmap, completePlan } = useRoadmaps()
+  const {
+    nodes, fetchNodes, createNode, updateNode, deleteNode,
+    connectNodes, disconnectNodes, setNodeStatus,
+  } = useRoadmapNodes()
+
+  const [roadmap, setRoadmap] = useState(null)
+  const [ticketStatus, setTicketStatus] = useState(null)
+  const [selectedNode, setSelectedNode] = useState(null)
+  const [notFound, setNotFound] = useState(false)
+
+  const load = useCallback(async () => {
+    const doc = await fetchById(id)
+    if (!doc) {
+      setNotFound(true)
+      return
+    }
+    setRoadmap(doc)
+    await fetchNodes(doc.$id)
+    if (doc.ticketId) {
+      try {
+        const ticket = await databases.getDocument(DATABASE_ID, COLLECTIONS.WORKORDERS, doc.ticketId)
+        setTicketStatus(ticket.status)
+      } catch {
+        setTicketStatus(null)
+      }
+    }
+  }, [id, fetchById, fetchNodes])
+
+  useEffect(() => { load() }, [load])
+
+  // Teamarbeit: bei Fenster-Fokus neu laden (einfacher Schutz gegen veraltete Ansicht)
+  useEffect(() => {
+    const onFocus = () => load()
+    window.addEventListener('focus', onFocus)
+    return () => window.removeEventListener('focus', onFocus)
+  }, [load])
+
+  // Ausgewaehlten Knoten mit frischen Daten aus der Liste spiegeln
+  useEffect(() => {
+    if (!selectedNode) return
+    const fresh = nodes.find((n) => n.$id === selectedNode.$id)
+    if (!fresh) setSelectedNode(null)
+    else if (fresh !== selectedNode) setSelectedNode(fresh)
+  }, [nodes]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  if (notFound) {
+    return (
+      <div className="page">
+        <PageHeader title="Roadmap nicht gefunden" />
+        <Button onClick={() => navigate('/roadmaps')}><IconArrowLeft size={16} /> Zur Uebersicht</Button>
+      </div>
+    )
+  }
+  if (!roadmap) {
+    return <div className="page"><p className="muted">Lade Roadmap…</p></div>
+  }
+
+  const readOnly = roadmap.status === ROADMAP_STATUS.COMPLETED
+  const progress = computeProgress(nodes)
+  const ticketClosedButActive = !readOnly && ticketStatus === 'Closed'
+
+  const handleAddNode = async (column, kind, rowCount) => {
+    const result = await createNode(roadmap.$id, {
+      title: kind === NODE_KIND.GOAL ? 'Neues Ziel' : 'Neuer Schritt',
+      column,
+      row: rowCount,
+      kind,
+    })
+    if (result.success) setSelectedNode(result.data)
+    else window.alert(result.error)
+  }
+
+  const handleConnect = async (source, target) => {
+    const result = await connectNodes(source, target)
+    if (!result.success) window.alert(result.error)
+  }
+
+  const handleSaveNode = async (node, data) => updateNode(node.$id, data)
+
+  const handleSetStatus = async (node, status) => {
+    const result = await setNodeStatus(roadmap, node, status, user)
+    if (!result.success) {
+      window.alert(result.error)
+      return
+    }
+    if (result.allGoalsDone) {
+      const ok = window.confirm(
+        'Alle Ziel-Knoten sind fertig!\n\n' +
+        'Plan abschliessen und archivieren? Das Projektticket wird dabei geschlossen.'
+      )
+      if (ok) {
+        const done = await completePlan(roadmap, user)
+        if (done.success) setRoadmap(done.data)
+        else window.alert(`Abschliessen fehlgeschlagen: ${done.error}`)
+      }
+    }
+  }
+
+  const handleDeleteNode = async (node) => {
+    if (!window.confirm(`Knoten "${node.title}" loeschen?`)) return
+    const result = await deleteNode(node)
+    if (!result.success) window.alert(result.error)
+    else setSelectedNode(null)
+  }
+
+  const handleDisconnect = async (sourceId, target) => {
+    const result = await disconnectNodes(sourceId, target)
+    if (!result.success) window.alert(result.error)
+  }
+
+  /** Neue Phase vor den Zielen einfuegen: Ziel-Knoten ruecken eine Spalte nach rechts. */
+  const handleAddColumn = async () => {
+    const newCount = (roadmap.columnCount || 3) + 1
+    if (newCount > 50) return
+    const goals = nodes.filter((n) => n.kind === NODE_KIND.GOAL)
+    for (const goal of goals) {
+      await updateNode(goal.$id, { column: newCount - 1 })
+    }
+    const result = await updateRoadmap(roadmap.$id, { columnCount: newCount })
+    if (result.success) setRoadmap(result.data)
+    else window.alert(result.error)
+  }
+
+  return (
+    <div className="page">
+      <PageHeader
+        title={roadmap.title}
+        subtitle={`Projekt: ${roadmap.projectName || '-'}${roadmap.customerName ? ` · Kunde: ${roadmap.customerName}` : ''}`}
+        actions={
+          <div className="flex gap-2 items-center" style={{ flexWrap: 'wrap' }}>
+            <RoadmapProgressBar progress={progress} compact />
+            {readOnly && <Badge tone="ok">Abgeschlossen</Badge>}
+            {roadmap.woid && (
+              <Link to={`/tickets?woid=${roadmap.woid}`}>
+                <Button variant="ghost"><IconTicket size={16} /> Ticket {roadmap.woid}</Button>
+              </Link>
+            )}
+            {!readOnly && (
+              <Button variant="ghost" onClick={handleAddColumn} title="Neue Phase vor den Zielen einfuegen">
+                <IconColumnInsertRight size={16} /> Spalte
+              </Button>
+            )}
+            <Button variant="ghost" onClick={() => navigate('/roadmaps')}><IconArrowLeft size={16} /> Zurueck</Button>
+          </div>
+        }
+      />
+
+      {ticketClosedButActive && (
+        <Card style={{ marginBottom: 16, borderColor: 'rgba(245,158,11,0.5)' }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 13 }}>
+            <IconAlertTriangle size={18} style={{ color: '#fbbf24', flexShrink: 0 }} />
+            <span>
+              Das Projektticket wurde manuell geschlossen, der Plan ist aber erst zu {progress.percent}% fertig.
+              Statusaenderungen werden weiterhin im Ticketverlauf dokumentiert.
+            </span>
+          </div>
+        </Card>
+      )}
+
+      <div style={{ display: 'grid', gridTemplateColumns: selectedNode ? 'minmax(0, 1fr) 320px' : '1fr', gap: 20, alignItems: 'start' }}>
+        <Card pad={false} bodyStyle={{ padding: 12 }} style={{ padding: 12 }}>
+          <RoadmapBoard
+            roadmap={roadmap}
+            nodes={nodes}
+            selectedNode={selectedNode}
+            readOnly={readOnly}
+            onSelectNode={setSelectedNode}
+            onAddNode={handleAddNode}
+            onConnect={handleConnect}
+          />
+        </Card>
+        {selectedNode && (
+          <NodeDetailPanel
+            node={selectedNode}
+            nodes={nodes}
+            readOnly={readOnly}
+            onClose={() => setSelectedNode(null)}
+            onSave={handleSaveNode}
+            onSetStatus={handleSetStatus}
+            onDelete={handleDeleteNode}
+            onDisconnect={handleDisconnect}
+          />
+        )}
+      </div>
+    </div>
+  )
+}

src/pages/RoadmapsPage.jsx

@@ -0,0 +1,221 @@
+import { useEffect, useMemo, useState } from 'react'
+import { Link, useNavigate } from 'react-router-dom'
+import { FaTimes } from 'react-icons/fa'
+import { IconRoute, IconPlus, IconTrash, IconTicket } from '@tabler/icons-react'
+import { PageHeader, Card, Button, Badge, EmptyState, Field } from '../components/ui'
+import { useAuth } from '../context/AuthContext'
+import { useRoadmaps } from '../hooks/useRoadmaps'
+import { useWebsiteProjects } from '../hooks/useWebsiteProjects'
+import { fetchRoadmapNodes, computeProgress, ROADMAP_STATUS } from '../lib/roadmaps'
+import RoadmapProgress from '../components/roadmap/RoadmapProgressBar'
+
+export default function RoadmapsPage() {
+  const { user } = useAuth()
+  const navigate = useNavigate()
+  const { roadmaps, loading, fetchAll, createRoadmap, deleteRoadmap } = useRoadmaps()
+  const { fetchAllProjects } = useWebsiteProjects()
+
+  const [projects, setProjects] = useState([])
+  const [progressById, setProgressById] = useState({})
+  const [showCreate, setShowCreate] = useState(false)
+  const [form, setForm] = useState({ projectId: '', title: '', goalTitle: '' })
+  const [creating, setCreating] = useState(false)
+  const [error, setError] = useState('')
+
+  useEffect(() => {
+    let cancelled = false
+    async function load() {
+      const [allProjects, allRoadmaps] = await Promise.all([fetchAllProjects(), fetchAll()])
+      if (cancelled) return
+      setProjects(allProjects.filter((p) => !p.isTemplate && !p.archived))
+      const active = allRoadmaps.filter((r) => r.status === ROADMAP_STATUS.ACTIVE)
+      const entries = await Promise.all(active.map(async (r) => {
+        try {
+          return [r.$id, computeProgress(await fetchRoadmapNodes(r.$id))]
+        } catch {
+          return [r.$id, null]
+        }
+      }))
+      if (!cancelled) setProgressById(Object.fromEntries(entries.filter(([, p]) => p)))
+    }
+    load()
+    return () => { cancelled = true }
+  }, [fetchAll, fetchAllProjects])
+
+  const activeRoadmaps = roadmaps.filter((r) => r.status === ROADMAP_STATUS.ACTIVE)
+  const completedRoadmaps = roadmaps.filter((r) => r.status === ROADMAP_STATUS.COMPLETED)
+
+  // Nur Projekte ohne aktiven Plan anbieten (genau 1 aktiver Plan pro Projekt)
+  const availableProjects = useMemo(() => {
+    const withActivePlan = new Set(activeRoadmaps.map((r) => r.projectId))
+    return projects.filter((p) => !withActivePlan.has(p.$id))
+  }, [projects, activeRoadmaps])
+
+  const openCreate = () => {
+    setForm({ projectId: availableProjects[0]?.$id || '', title: '', goalTitle: '' })
+    setError('')
+    setShowCreate(true)
+  }
+
+  const handleCreate = async (e) => {
+    e.preventDefault()
+    const project = projects.find((p) => p.$id === form.projectId)
+    if (!project) {
+      setError('Bitte ein Projekt auswaehlen.')
+      return
+    }
+    setCreating(true)
+    setError('')
+    const result = await createRoadmap(project, { title: form.title.trim(), goalTitle: form.goalTitle.trim() }, user)
+    setCreating(false)
+    if (!result.success) {
+      setError(result.error)
+      return
+    }
+    setShowCreate(false)
+    navigate(`/roadmaps/${result.data.roadmap.$id}`)
+  }
+
+  const handleDelete = async (roadmap) => {
+    const ok = window.confirm(
+      `Plan "${roadmap.title}" wirklich loeschen?\n\n` +
+      `Alle Knoten werden entfernt und das Projektticket (WOID ${roadmap.woid || '-'}) wird abgebrochen.`
+    )
+    if (!ok) return
+    const result = await deleteRoadmap(roadmap, user)
+    if (!result.success) window.alert(`Loeschen fehlgeschlagen: ${result.error}`)
+  }
+
+  const renderRoadmapCard = (roadmap) => {
+    const progress = progressById[roadmap.$id]
+    return (
+      <Card key={roadmap.$id}>
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12, flexWrap: 'wrap' }}>
+          <div style={{ minWidth: 0 }}>
+            <Link to={`/roadmaps/${roadmap.$id}`} style={{ fontWeight: 700, fontSize: 15 }}>
+              {roadmap.title}
+            </Link>
+            <div className="muted" style={{ fontSize: 13, marginTop: 2 }}>
+              Projekt: {roadmap.projectName || '-'}
+              {roadmap.customerName ? ` · Kunde: ${roadmap.customerName}` : ''}
+            </div>
+            {roadmap.woid && (
+              <div className="faint" style={{ fontSize: 12, marginTop: 4, display: 'flex', alignItems: 'center', gap: 4 }}>
+                <IconTicket size={14} />
+                <Link to={`/tickets?woid=${roadmap.woid}`}>Projektticket WOID {roadmap.woid}</Link>
+              </div>
+            )}
+          </div>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+            {roadmap.status === ROADMAP_STATUS.COMPLETED
+              ? <Badge tone="ok">Abgeschlossen</Badge>
+              : progress && <RoadmapProgress progress={progress} />}
+            <div style={{ display: 'flex', gap: 6 }}>
+              <Button variant="ghost" onClick={() => navigate(`/roadmaps/${roadmap.$id}`)}>Oeffnen</Button>
+              {roadmap.status === ROADMAP_STATUS.ACTIVE && (
+                <Button variant="ghost" title="Plan loeschen" onClick={() => handleDelete(roadmap)}>
+                  <IconTrash size={16} />
+                </Button>
+              )}
+            </div>
+          </div>
+        </div>
+      </Card>
+    )
+  }
+
+  return (
+    <div className="page">
+      <PageHeader
+        title="Roadmaps"
+        subtitle="Projektspezifische Plaene — jeder Plan trackt sich automatisch in einem Projektticket"
+        actions={
+          <Button variant="primary" onClick={openCreate} disabled={!availableProjects.length && !loading}>
+            <IconPlus size={16} /> Plan erstellen
+          </Button>
+        }
+      />
+
+      {loading && !roadmaps.length ? (
+        <p className="muted">Lade Roadmaps…</p>
+      ) : (
+        <>
+          {!activeRoadmaps.length ? (
+            <EmptyState
+              icon={<IconRoute size={40} />}
+              title="Noch keine aktiven Plaene"
+              hint="Erstelle zu einem Projekt einen Plan — das zugehoerige Projektticket wird automatisch angelegt."
+              action={availableProjects.length
+                ? <Button variant="primary" onClick={openCreate}><IconPlus size={16} /> Plan erstellen</Button>
+                : null}
+            />
+          ) : (
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+              {activeRoadmaps.map(renderRoadmapCard)}
+            </div>
+          )}
+
+          {completedRoadmaps.length > 0 && (
+            <>
+              <h3 style={{ margin: '28px 0 12px' }}>Archiv</h3>
+              <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+                {completedRoadmaps.map(renderRoadmapCard)}
+              </div>
+            </>
+          )}
+        </>
+      )}
+
+      {showCreate && (
+        <div className="overlay">
+          <span className="overlay-close" onClick={() => setShowCreate(false)}><FaTimes /></span>
+          <div className="overlay-content" style={{ maxWidth: 480 }}>
+            <h2 style={{ marginTop: 0 }}>Neuen Plan erstellen</h2>
+            <p className="muted" style={{ fontSize: 13 }}>
+              Zum Plan wird automatisch ein Projektticket erstellt, in dem der Fortschritt getrackt wird.
+            </p>
+            <form onSubmit={handleCreate} style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
+              <Field label="Projekt *">
+                <select
+                  value={form.projectId}
+                  onChange={(e) => setForm((f) => ({ ...f, projectId: e.target.value }))}
+                  required
+                >
+                  <option value="" disabled>Projekt auswaehlen…</option>
+                  {availableProjects.map((p) => (
+                    <option key={p.$id} value={p.$id}>{p.projectName}</option>
+                  ))}
+                </select>
+              </Field>
+              <Field label="Titel des Plans" hint="Leer lassen fuer 'Plan: <Projektname>'">
+                <input
+                  type="text"
+                  value={form.title}
+                  maxLength={128}
+                  placeholder="z.B. Website-Relaunch"
+                  onChange={(e) => setForm((f) => ({ ...f, title: e.target.value }))}
+                />
+              </Field>
+              <Field label="Erstes Ziel" hint="Der Zielknoten ganz rechts — weitere Ziele kannst du im Board hinzufuegen">
+                <input
+                  type="text"
+                  value={form.goalTitle}
+                  maxLength={128}
+                  placeholder="z.B. Website live"
+                  onChange={(e) => setForm((f) => ({ ...f, goalTitle: e.target.value }))}
+                />
+              </Field>
+              {error && <p style={{ color: 'var(--danger, #ef4444)', fontSize: 13 }}>{error}</p>}
+              <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
+                <Button type="button" variant="ghost" onClick={() => setShowCreate(false)}>Abbrechen</Button>
+                <Button type="submit" variant="primary" disabled={creating}>
+                  {creating ? 'Erstelle…' : 'Plan + Ticket erstellen'}
+                </Button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}