merge: phases 1–5 refactor, CI hardening, docs (coolify → main)

Phase 1: backend-compliance — partial service-layer extraction
Phase 2: ai-compliance-sdk — full hexagonal split; iace/ucca/training handlers
  and stores split into focused files; cmd/server/main.go → internal/app/
Phase 3: admin-compliance — types.ts, tom-generator loader, and major page
  components split; lib document generators extracted
Phase 4: dsms-gateway, consent-sdk, developer-portal, breakpilot-compliance-sdk
Phase 5 CI hardening:
  - loc-budget job now scans whole repo (blocking, no || true)
  - sbom-scan / grype blocking on high+ CVEs
  - ai-compliance-sdk/.golangci.yml: strict golangci-lint config
  - check-loc.sh: skip test_*.py and *.html; loc-exceptions.txt expanded
  - deleted stray routes.py.backup (2512 LOC)
Docs:
  - root README.md with CI badge, service table, quick start, CI pipeline table
  - CONTRIBUTING.md: setup, pre-commit checklist, guardrail marker reference
  - CLAUDE.md: First-Time Setup & Claude Code Onboarding section
  - all 7 service READMEs updated (stale phase refs, current architecture)
  - AGENTS.go/python/typescript.md enhanced with linting, DI, barrel re-export
  - .gitignore: dist/, .turbo/, pnpm-lock.yaml added

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

admin-compliance/app/sdk/iace/[projectId]/components/_components/ComponentForm.tsx

@@ -4,7 +4,10 @@ import { useState } from 'react'
 import { Component, ComponentFormData, COMPONENT_TYPES } from './types'
 
 export function ComponentForm({
-  onSubmit, onCancel, initialData, parentId,
+  onSubmit,
+  onCancel,
+  initialData,
+  parentId,
 }: {
   onSubmit: (data: ComponentFormData) => void
   onCancel: () => void
@@ -28,47 +31,69 @@ export function ComponentForm({
       <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
         <div>
           <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Name *</label>
-          <input type="text" value={formData.name}
+          <input
+            type="text"
+            value={formData.name}
             onChange={(e) => setFormData({ ...formData, name: e.target.value })}
             placeholder="z.B. Bildverarbeitungsmodul"
-            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600 dark:text-white" />
+            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600 dark:text-white"
+          />
         </div>
         <div>
           <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Typ</label>
-          <select value={formData.type} onChange={(e) => setFormData({ ...formData, type: e.target.value })}
-            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600 dark:text-white">
-            {COMPONENT_TYPES.map((t) => <option key={t.value} value={t.value}>{t.label}</option>)}
+          <select
+            value={formData.type}
+            onChange={(e) => setFormData({ ...formData, type: e.target.value })}
+            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600 dark:text-white"
+          >
+            {COMPONENT_TYPES.map((t) => (
+              <option key={t.value} value={t.value}>{t.label}</option>
+            ))}
           </select>
         </div>
         <div>
           <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Version</label>
-          <input type="text" value={formData.version}
+          <input
+            type="text"
+            value={formData.version}
             onChange={(e) => setFormData({ ...formData, version: e.target.value })}
             placeholder="z.B. 1.2.0"
-            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600 dark:text-white" />
+            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600 dark:text-white"
+          />
         </div>
         <div className="flex items-center gap-3 pt-6">
           <label className="relative inline-flex items-center cursor-pointer">
-            <input type="checkbox" checked={formData.safety_relevant}
+            <input
+              type="checkbox"
+              checked={formData.safety_relevant}
               onChange={(e) => setFormData({ ...formData, safety_relevant: e.target.checked })}
-              className="sr-only peer" />
+              className="sr-only peer"
+            />
             <div className="w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-purple-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-red-500" />
           </label>
           <span className="text-sm text-gray-700 dark:text-gray-300">Sicherheitsrelevant</span>
         </div>
         <div className="md:col-span-2">
           <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Beschreibung</label>
-          <textarea value={formData.description}
+          <textarea
+            value={formData.description}
             onChange={(e) => setFormData({ ...formData, description: e.target.value })}
-            placeholder="Kurze Beschreibung der Komponente..." rows={2}
-            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600 dark:text-white" />
+            placeholder="Kurze Beschreibung der Komponente..."
+            rows={2}
+            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600 dark:text-white"
+          />
         </div>
       </div>
       <div className="mt-4 flex items-center gap-3">
-        <button onClick={() => onSubmit(formData)} disabled={!formData.name}
+        <button
+          onClick={() => onSubmit(formData)}
+          disabled={!formData.name}
           className={`px-6 py-2 rounded-lg font-medium transition-colors ${
-            formData.name ? 'bg-purple-600 text-white hover:bg-purple-700' : 'bg-gray-200 text-gray-400 cursor-not-allowed'
-          }`}>
+            formData.name
+              ? 'bg-purple-600 text-white hover:bg-purple-700'
+              : 'bg-gray-200 text-gray-400 cursor-not-allowed'
+          }`}
+        >
           {initialData ? 'Aktualisieren' : 'Hinzufuegen'}
         </button>
         <button onClick={onCancel} className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">

admin-compliance/app/sdk/iace/[projectId]/components/_components/ComponentLibraryModal.tsx

@@ -5,7 +5,8 @@ import { LibraryComponent, EnergySource, LIBRARY_CATEGORIES } from './types'
 import { ComponentTypeIcon } from './ComponentTypeIcon'
 
 export function ComponentLibraryModal({
-  onAdd, onClose,
+  onAdd,
+  onClose,
 }: {
   onAdd: (components: LibraryComponent[], energySources: EnergySource[]) => void
   onClose: () => void
@@ -26,8 +27,14 @@ export function ComponentLibraryModal({
           fetch('/api/sdk/v1/iace/component-library'),
           fetch('/api/sdk/v1/iace/energy-sources'),
         ])
-        if (compRes.ok) { const json = await compRes.json(); setLibraryComponents(json.components || []) }
-        if (enRes.ok) { const json = await enRes.json(); setEnergySources(json.energy_sources || []) }
+        if (compRes.ok) {
+          const json = await compRes.json()
+          setLibraryComponents(json.components || [])
+        }
+        if (enRes.ok) {
+          const json = await enRes.json()
+          setEnergySources(json.energy_sources || [])
+        }
       } catch (err) {
         console.error('Failed to fetch library:', err)
       } finally {
@@ -38,23 +45,41 @@ export function ComponentLibraryModal({
   }, [])
 
   function toggleComponent(id: string) {
-    setSelectedComponents(prev => { const next = new Set(prev); if (next.has(id)) next.delete(id); else next.add(id); return next })
+    setSelectedComponents(prev => {
+      const next = new Set(prev)
+      if (next.has(id)) next.delete(id)
+      else next.add(id)
+      return next
+    })
   }
+
   function toggleEnergySource(id: string) {
-    setSelectedEnergySources(prev => { const next = new Set(prev); if (next.has(id)) next.delete(id); else next.add(id); return next })
+    setSelectedEnergySources(prev => {
+      const next = new Set(prev)
+      if (next.has(id)) next.delete(id)
+      else next.add(id)
+      return next
+    })
   }
+
   function toggleAllInCategory(category: string) {
     const items = libraryComponents.filter(c => c.category === category)
     const allIds = items.map(i => i.id)
     const allSelected = allIds.every(id => selectedComponents.has(id))
-    setSelectedComponents(prev => { const next = new Set(prev); allIds.forEach(id => allSelected ? next.delete(id) : next.add(id)); return next })
+    setSelectedComponents(prev => {
+      const next = new Set(prev)
+      allIds.forEach(id => allSelected ? next.delete(id) : next.add(id))
+      return next
+    })
   }
+
   function handleAdd() {
     const selComps = libraryComponents.filter(c => selectedComponents.has(c.id))
     const selEnergy = energySources.filter(e => selectedEnergySources.has(e.id))
     onAdd(selComps, selEnergy)
   }
 
+  const categories = Object.keys(LIBRARY_CATEGORIES)
   const filtered = libraryComponents.filter(c => {
     if (filterCategory && c.category !== filterCategory) return false
     if (search) {
@@ -70,7 +95,6 @@ export function ComponentLibraryModal({
     return acc
   }, {})
 
-  const categories = Object.keys(LIBRARY_CATEGORIES)
   const totalSelected = selectedComponents.size + selectedEnergySources.size
 
   if (loading) {
@@ -122,35 +146,37 @@ export function ComponentLibraryModal({
         <div className="flex-1 overflow-auto p-4">
           {activeTab === 'components' ? (
             <div className="space-y-4">
-              {Object.entries(grouped).sort(([a], [b]) => categories.indexOf(a) - categories.indexOf(b)).map(([category, items]) => (
-                <div key={category}>
-                  <div className="flex items-center gap-2 mb-2 sticky top-0 bg-white dark:bg-gray-800 py-1 z-10">
-                    <h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300">{LIBRARY_CATEGORIES[category] || category}</h4>
-                    <span className="text-xs text-gray-400">({items.length})</span>
-                    <button onClick={() => toggleAllInCategory(category)} className="text-xs text-purple-600 hover:text-purple-700 ml-auto">
-                      {items.every(i => selectedComponents.has(i.id)) ? 'Alle abwaehlen' : 'Alle waehlen'}
-                    </button>
-                  </div>
-                  <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
-                    {items.map(comp => (
-                      <label key={comp.id}
-                        className={`flex items-start gap-3 p-3 rounded-lg border cursor-pointer transition-colors ${
-                          selectedComponents.has(comp.id) ? 'border-purple-400 bg-purple-50 dark:bg-purple-900/20' : 'border-gray-200 hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-750'
-                        }`}>
-                        <input type="checkbox" checked={selectedComponents.has(comp.id)} onChange={() => toggleComponent(comp.id)} className="mt-0.5 accent-purple-600" />
-                        <div className="flex-1 min-w-0">
-                          <div className="flex items-center gap-2">
-                            <span className="text-xs font-mono text-gray-400">{comp.id}</span>
-                            <ComponentTypeIcon type={comp.maps_to_component_type} />
+              {Object.entries(grouped)
+                .sort(([a], [b]) => categories.indexOf(a) - categories.indexOf(b))
+                .map(([category, items]) => (
+                  <div key={category}>
+                    <div className="flex items-center gap-2 mb-2 sticky top-0 bg-white dark:bg-gray-800 py-1 z-10">
+                      <h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300">{LIBRARY_CATEGORIES[category] || category}</h4>
+                      <span className="text-xs text-gray-400">({items.length})</span>
+                      <button onClick={() => toggleAllInCategory(category)} className="text-xs text-purple-600 hover:text-purple-700 ml-auto">
+                        {items.every(i => selectedComponents.has(i.id)) ? 'Alle abwaehlen' : 'Alle waehlen'}
+                      </button>
+                    </div>
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+                      {items.map(comp => (
+                        <label key={comp.id}
+                          className={`flex items-start gap-3 p-3 rounded-lg border cursor-pointer transition-colors ${
+                            selectedComponents.has(comp.id) ? 'border-purple-400 bg-purple-50 dark:bg-purple-900/20' : 'border-gray-200 hover:bg-gray-50 dark:border-gray-700'
+                          }`}>
+                          <input type="checkbox" checked={selectedComponents.has(comp.id)} onChange={() => toggleComponent(comp.id)} className="mt-0.5 accent-purple-600" />
+                          <div className="flex-1 min-w-0">
+                            <div className="flex items-center gap-2">
+                              <span className="text-xs font-mono text-gray-400">{comp.id}</span>
+                              <ComponentTypeIcon type={comp.maps_to_component_type} />
+                            </div>
+                            <div className="text-sm font-medium text-gray-900 dark:text-white">{comp.name_de}</div>
+                            {comp.description_de && <div className="text-xs text-gray-500 mt-0.5 line-clamp-2">{comp.description_de}</div>}
                           </div>
-                          <div className="text-sm font-medium text-gray-900 dark:text-white">{comp.name_de}</div>
-                          {comp.description_de && <div className="text-xs text-gray-500 mt-0.5 line-clamp-2">{comp.description_de}</div>}
-                        </div>
-                      </label>
-                    ))}
+                        </label>
+                      ))}
+                    </div>
                   </div>
-                </div>
-              ))}
+                ))}
               {filtered.length === 0 && <div className="text-center py-8 text-gray-500">Keine Komponenten gefunden</div>}
             </div>
           ) : (
@@ -158,7 +184,7 @@ export function ComponentLibraryModal({
               {energySources.map(es => (
                 <label key={es.id}
                   className={`flex items-start gap-3 p-3 rounded-lg border cursor-pointer transition-colors ${
-                    selectedEnergySources.has(es.id) ? 'border-purple-400 bg-purple-50 dark:bg-purple-900/20' : 'border-gray-200 hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-750'
+                    selectedEnergySources.has(es.id) ? 'border-purple-400 bg-purple-50 dark:bg-purple-900/20' : 'border-gray-200 hover:bg-gray-50 dark:border-gray-700'
                   }`}>
                   <input type="checkbox" checked={selectedEnergySources.has(es.id)} onChange={() => toggleEnergySource(es.id)} className="mt-0.5 accent-purple-600" />
                   <div className="flex-1 min-w-0">
@@ -173,7 +199,9 @@ export function ComponentLibraryModal({
         </div>
 
         <div className="p-4 border-t border-gray-200 dark:border-gray-700 flex items-center justify-between">
-          <span className="text-sm text-gray-500">{selectedComponents.size} Komponenten, {selectedEnergySources.size} Energiequellen ausgewaehlt</span>
+          <span className="text-sm text-gray-500">
+            {selectedComponents.size} Komponenten, {selectedEnergySources.size} Energiequellen ausgewaehlt
+          </span>
           <div className="flex gap-3">
             <button onClick={onClose} className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">Abbrechen</button>
             <button onClick={handleAdd} disabled={totalSelected === 0}

admin-compliance/app/sdk/iace/[projectId]/components/_components/ComponentTreeNode.tsx

@@ -5,7 +5,11 @@ import { Component } from './types'
 import { ComponentTypeIcon } from './ComponentTypeIcon'
 
 export function ComponentTreeNode({
-  component, depth, onEdit, onDelete, onAddChild,
+  component,
+  depth,
+  onEdit,
+  onDelete,
+  onAddChild,
 }: {
   component: Component
   depth: number
@@ -22,9 +26,14 @@ export function ComponentTreeNode({
         className="flex items-center gap-2 py-2 px-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 group transition-colors"
         style={{ paddingLeft: `${depth * 24 + 12}px` }}
       >
-        <button onClick={() => setExpanded(!expanded)}
-          className={`w-5 h-5 flex items-center justify-center text-gray-400 ${hasChildren ? 'visible' : 'invisible'}`}>
-          <svg className={`w-4 h-4 transition-transform ${expanded ? 'rotate-90' : ''}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <button
+          onClick={() => setExpanded(!expanded)}
+          className={`w-5 h-5 flex items-center justify-center text-gray-400 ${hasChildren ? 'visible' : 'invisible'}`}
+        >
+          <svg
+            className={`w-4 h-4 transition-transform ${expanded ? 'rotate-90' : ''}`}
+            fill="none" viewBox="0 0 24 24" stroke="currentColor"
+          >
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
           </svg>
         </button>
@@ -47,7 +56,9 @@ export function ComponentTreeNode({
         </div>
 
         {component.description && (
-          <span className="text-xs text-gray-400 truncate max-w-[200px] hidden lg:block">{component.description}</span>
+          <span className="text-xs text-gray-400 truncate max-w-[200px] hidden lg:block">
+            {component.description}
+          </span>
         )}
 
         <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
@@ -75,8 +86,14 @@ export function ComponentTreeNode({
       {expanded && hasChildren && (
         <div>
           {component.children.map((child) => (
-            <ComponentTreeNode key={child.id} component={child} depth={depth + 1}
-              onEdit={onEdit} onDelete={onDelete} onAddChild={onAddChild} />
+            <ComponentTreeNode
+              key={child.id}
+              component={child}
+              depth={depth + 1}
+              onEdit={onEdit}
+              onDelete={onDelete}
+              onAddChild={onAddChild}
+            />
           ))}
         </div>
       )}

admin-compliance/app/sdk/iace/[projectId]/components/_components/ComponentTypeIcon.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 export function ComponentTypeIcon({ type }: { type: string }) {
   const colors: Record<string, string> = {
     SW: 'bg-blue-100 text-blue-700',

admin-compliance/app/sdk/iace/[projectId]/components/_components/types.ts

@@ -75,7 +75,11 @@ export const COMPONENT_TYPES = [
 export function buildTree(components: Component[]): Component[] {
   const map = new Map<string, Component>()
   const roots: Component[] = []
-  components.forEach((c) => { map.set(c.id, { ...c, children: [] }) })
+
+  components.forEach((c) => {
+    map.set(c.id, { ...c, children: [] })
+  })
+
   components.forEach((c) => {
     const node = map.get(c.id)!
     if (c.parent_id && map.has(c.parent_id)) {
@@ -84,5 +88,6 @@ export function buildTree(components: Component[]): Component[] {
       roots.push(node)
     }
   })
+
   return roots
 }

admin-compliance/app/sdk/iace/[projectId]/components/_hooks/useComponents.ts

@@ -1,22 +1,23 @@
 'use client'
 
 import { useState, useEffect } from 'react'
-import { Component, LibraryComponent, EnergySource, ComponentFormData, buildTree } from '../_components/types'
+import { Component, ComponentFormData, LibraryComponent, EnergySource, buildTree } from '../_components/types'
 
 export function useComponents(projectId: string) {
   const [components, setComponents] = useState<Component[]>([])
   const [loading, setLoading] = useState(true)
-  const [showForm, setShowForm] = useState(false)
-  const [editingComponent, setEditingComponent] = useState<Component | null>(null)
-  const [addingParentId, setAddingParentId] = useState<string | null>(null)
-  const [showLibrary, setShowLibrary] = useState(false)
 
-  useEffect(() => { fetchComponents() }, [projectId])
+  useEffect(() => {
+    fetchComponents()
+  }, [projectId]) // eslint-disable-line react-hooks/exhaustive-deps
 
   async function fetchComponents() {
     try {
       const res = await fetch(`/api/sdk/v1/iace/projects/${projectId}/components`)
-      if (res.ok) { const json = await res.json(); setComponents(json.components || json || []) }
+      if (res.ok) {
+        const json = await res.json()
+        setComponents(json.components || json || [])
+      }
     } catch (err) {
       console.error('Failed to fetch components:', err)
     } finally {
@@ -24,15 +25,26 @@ export function useComponents(projectId: string) {
     }
   }
 
-  async function handleSubmit(data: ComponentFormData) {
+  async function handleSubmit(data: ComponentFormData, editingId?: string) {
     try {
-      const url = editingComponent
-        ? `/api/sdk/v1/iace/projects/${projectId}/components/${editingComponent.id}`
+      const url = editingId
+        ? `/api/sdk/v1/iace/projects/${projectId}/components/${editingId}`
         : `/api/sdk/v1/iace/projects/${projectId}/components`
-      const method = editingComponent ? 'PUT' : 'POST'
-      const res = await fetch(url, { method, headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) })
-      if (res.ok) { setShowForm(false); setEditingComponent(null); setAddingParentId(null); await fetchComponents() }
-    } catch (err) { console.error('Failed to save component:', err) }
+      const method = editingId ? 'PUT' : 'POST'
+
+      const res = await fetch(url, {
+        method,
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(data),
+      })
+      if (res.ok) {
+        await fetchComponents()
+        return true
+      }
+    } catch (err) {
+      console.error('Failed to save component:', err)
+    }
+    return false
   }
 
   async function handleDelete(id: string) {
@@ -40,41 +52,41 @@ export function useComponents(projectId: string) {
     try {
       const res = await fetch(`/api/sdk/v1/iace/projects/${projectId}/components/${id}`, { method: 'DELETE' })
       if (res.ok) await fetchComponents()
-    } catch (err) { console.error('Failed to delete component:', err) }
-  }
-
-  function handleEdit(component: Component) {
-    setEditingComponent(component); setAddingParentId(null); setShowForm(true)
-  }
-
-  function handleAddChild(parentId: string) {
-    setAddingParentId(parentId); setEditingComponent(null); setShowForm(true)
+    } catch (err) {
+      console.error('Failed to delete component:', err)
+    }
   }
 
   async function handleAddFromLibrary(libraryComps: LibraryComponent[], energySrcs: EnergySource[]) {
-    setShowLibrary(false)
     const energySourceIds = energySrcs.map(e => e.id)
     for (const comp of libraryComps) {
       try {
         await fetch(`/api/sdk/v1/iace/projects/${projectId}/components`, {
-          method: 'POST', headers: { 'Content-Type': 'application/json' },
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify({
-            name: comp.name_de, type: comp.maps_to_component_type,
-            description: comp.description_de, safety_relevant: false,
-            library_component_id: comp.id, energy_source_ids: energySourceIds, tags: comp.tags,
+            name: comp.name_de,
+            type: comp.maps_to_component_type,
+            description: comp.description_de,
+            safety_relevant: false,
+            library_component_id: comp.id,
+            energy_source_ids: energySourceIds,
+            tags: comp.tags,
           }),
         })
-      } catch (err) { console.error(`Failed to add component ${comp.id}:`, err) }
+      } catch (err) {
+        console.error(`Failed to add component ${comp.id}:`, err)
+      }
     }
     await fetchComponents()
   }
 
-  const tree = buildTree(components)
-
   return {
-    components, loading, tree,
-    showForm, setShowForm, editingComponent, setEditingComponent,
-    addingParentId, setAddingParentId, showLibrary, setShowLibrary,
-    handleSubmit, handleDelete, handleEdit, handleAddChild, handleAddFromLibrary,
+    components,
+    loading,
+    tree: buildTree(components),
+    handleSubmit,
+    handleDelete,
+    handleAddFromLibrary,
   }
 }

admin-compliance/app/sdk/iace/[projectId]/components/page.tsx

@@ -1,17 +1,43 @@
 'use client'
 
+import { useState } from 'react'
 import { useParams } from 'next/navigation'
-import { ComponentForm } from './_components/ComponentForm'
+import { Component } from './_components/types'
 import { ComponentTreeNode } from './_components/ComponentTreeNode'
+import { ComponentForm } from './_components/ComponentForm'
 import { ComponentLibraryModal } from './_components/ComponentLibraryModal'
 import { useComponents } from './_hooks/useComponents'
 
 export default function ComponentsPage() {
   const params = useParams()
   const projectId = params.projectId as string
-  const c = useComponents(projectId)
 
-  if (c.loading) {
+  const { loading, tree, handleSubmit, handleDelete, handleAddFromLibrary } = useComponents(projectId)
+
+  const [showForm, setShowForm] = useState(false)
+  const [editingComponent, setEditingComponent] = useState<Component | null>(null)
+  const [addingParentId, setAddingParentId] = useState<string | null>(null)
+  const [showLibrary, setShowLibrary] = useState(false)
+
+  function handleEdit(component: Component) {
+    setEditingComponent(component)
+    setAddingParentId(null)
+    setShowForm(true)
+  }
+
+  function handleAddChild(parentId: string) {
+    setAddingParentId(parentId)
+    setEditingComponent(null)
+    setShowForm(true)
+  }
+
+  function resetForm() {
+    setShowForm(false)
+    setEditingComponent(null)
+    setAddingParentId(null)
+  }
+
+  if (loading) {
     return (
       <div className="flex items-center justify-center h-64">
         <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600" />
@@ -39,8 +65,9 @@ export default function ComponentsPage() {
               Aus Bibliothek waehlen
             </button>
             <button
-              onClick={() => { c.setShowForm(true); c.setEditingComponent(null); c.setAddingParentId(null) }}
-              className="flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors">
+              onClick={() => { setShowForm(true); setEditingComponent(null); setAddingParentId(null) }}
+              className="flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors"
+            >
               <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
               </svg>
@@ -50,15 +77,22 @@ export default function ComponentsPage() {
         )}
       </div>
 
-      {c.showLibrary && (
-        <ComponentLibraryModal onAdd={c.handleAddFromLibrary} onClose={() => c.setShowLibrary(false)} />
+      {showLibrary && (
+        <ComponentLibraryModal
+          onAdd={async (comps, energy) => { setShowLibrary(false); await handleAddFromLibrary(comps, energy) }}
+          onClose={() => setShowLibrary(false)}
+        />
       )}
 
-      {c.showForm && (
+      {showForm && (
         <ComponentForm
-          onSubmit={c.handleSubmit}
-          onCancel={() => { c.setShowForm(false); c.setEditingComponent(null); c.setAddingParentId(null) }}
-          initialData={c.editingComponent} parentId={c.addingParentId}
+          onSubmit={async (data) => {
+            const ok = await handleSubmit(data, editingComponent?.id)
+            if (ok) resetForm()
+          }}
+          onCancel={resetForm}
+          initialData={editingComponent}
+          parentId={addingParentId}
         />
       )}