Merge remote gitea/main — resolve conflicts keeping local (origin) state

Local origin is 20+ commits ahead of remote gitea. All conflicts
resolved by keeping HEAD (our version) which includes the full
56→138 check expansion and doc_checks package split.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

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

@@ -2,12 +2,12 @@
 
 import { useState } from 'react'
 import { useParams } from 'next/navigation'
-import { REDUCTION_TYPES } from './_components/types'
+import { REDUCTION_TYPES, Mitigation } from './_components/types'
 import { HierarchyWarning } from './_components/HierarchyWarning'
 import { MeasuresLibraryModal } from './_components/MeasuresLibraryModal'
 import { SuggestMeasuresModal } from './_components/SuggestMeasuresModal'
 import { MitigationForm } from './_components/MitigationForm'
-import { MitigationCard } from './_components/MitigationCard'
+import { StatusBadge } from './_components/StatusBadge'
 import { ProtectiveMeasure } from './_components/types'
 import { useMitigations } from './_hooks/useMitigations'
 
@@ -26,6 +26,47 @@ export default function MitigationsPage() {
   const [showLibrary, setShowLibrary] = useState(false)
   const [libraryFilter, setLibraryFilter] = useState<string | undefined>()
   const [showSuggest, setShowSuggest] = useState(false)
+  const [expanded, setExpanded] = useState<Record<string, boolean>>({ design: true, protection: true, information: true })
+  const [selected, setSelected] = useState<Set<string>>(new Set())
+  const [batchAction, setBatchAction] = useState<'verify' | 'delete' | null>(null)
+
+  function toggleSection(type: string) {
+    setExpanded((prev) => ({ ...prev, [type]: !prev[type] }))
+  }
+
+  function toggleSelect(id: string) {
+    setSelected((prev) => {
+      const next = new Set(prev)
+      if (next.has(id)) next.delete(id); else next.add(id)
+      return next
+    })
+  }
+
+  function selectAllInType(type: string) {
+    const items = byType[type as keyof typeof byType]
+    setSelected((prev) => {
+      const next = new Set(prev)
+      const allSelected = items.every((m) => next.has(m.id))
+      if (allSelected) { items.forEach((m) => next.delete(m.id)) }
+      else { items.forEach((m) => next.add(m.id)) }
+      return next
+    })
+  }
+
+  async function handleBatchVerify() {
+    setBatchAction('verify')
+    for (const id of selected) { await handleVerify(id) }
+    setSelected(new Set())
+    setBatchAction(null)
+  }
+
+  async function handleBatchDelete() {
+    if (!confirm(`${selected.size} Massnahmen wirklich loeschen?`)) return
+    setBatchAction('delete')
+    for (const id of selected) { await handleDelete(id) }
+    setSelected(new Set())
+    setBatchAction(null)
+  }
 
   function handleOpenLibrary(type?: string) {
     setLibraryFilter(type)
@@ -39,11 +80,6 @@ export default function MitigationsPage() {
     setPreselectedType(measure.reduction_type as 'design' | 'protection' | 'information')
   }
 
-  function handleAddForType(type: 'design' | 'protection' | 'information') {
-    setPreselectedType(type)
-    setShowForm(true)
-  }
-
   if (loading) {
     return (
       <div className="flex items-center justify-center h-64">
@@ -52,42 +88,51 @@ export default function MitigationsPage() {
     )
   }
 
+  const totalMeasures = byType.design.length + byType.protection.length + byType.information.length
+
   return (
-    <div className="space-y-6">
+    <div className="space-y-4">
       {/* Header */}
       <div className="flex items-center justify-between">
         <div>
           <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Massnahmen</h1>
-          <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
-            Risikominderung nach dem 3-Stufen-Verfahren: Design &rarr; Schutz &rarr; Information.
+          <p className="mt-1 text-sm text-gray-500">
+            {totalMeasures} Massnahmen nach 3-Stufen-Verfahren: Design ({byType.design.length}) &rarr; Schutz ({byType.protection.length}) &rarr; Information ({byType.information.length})
           </p>
         </div>
-        <div className="flex items-center gap-3">
-          {hazards.length > 0 && (
-            <button onClick={() => setShowSuggest(true)}
-              className="flex items-center gap-2 px-3 py-2 border border-green-300 text-green-700 rounded-lg hover:bg-green-50 transition-colors text-sm">
-              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
-              </svg>
-              Vorschlaege
-            </button>
+        <div className="flex items-center gap-2">
+          {selected.size > 0 && (
+            <>
+              <span className="text-xs text-gray-500">{selected.size} ausgewaehlt</span>
+              <button onClick={handleBatchVerify} disabled={batchAction !== null}
+                className="px-3 py-1.5 text-xs bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50">
+                {batchAction === 'verify' ? 'Verifiziere...' : 'Verifizieren'}
+              </button>
+              <button onClick={handleBatchDelete} disabled={batchAction !== null}
+                className="px-3 py-1.5 text-xs bg-red-600 text-white rounded-lg hover:bg-red-700 disabled:opacity-50">
+                Loeschen
+              </button>
+              <button onClick={() => setSelected(new Set())} className="px-2 py-1.5 text-xs text-gray-500 hover:text-gray-700">
+                Abbrechen
+              </button>
+            </>
+          )}
+          {selected.size === 0 && (
+            <>
+              <button onClick={() => setShowSuggest(true)}
+                className="px-3 py-1.5 text-xs border border-green-300 text-green-700 rounded-lg hover:bg-green-50">
+                Vorschlaege
+              </button>
+              <button onClick={() => handleOpenLibrary()}
+                className="px-3 py-1.5 text-xs border border-purple-300 text-purple-700 rounded-lg hover:bg-purple-50">
+                Bibliothek
+              </button>
+              <button onClick={() => { setPreselectedType(undefined); setShowForm(true) }}
+                className="px-3 py-1.5 text-xs bg-purple-600 text-white rounded-lg hover:bg-purple-700">
+                + Hinzufuegen
+              </button>
+            </>
           )}
-          <button onClick={() => handleOpenLibrary()}
-            className="flex items-center gap-2 px-4 py-2 bg-white border border-purple-300 text-purple-700 rounded-lg hover:bg-purple-50 transition-colors">
-            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
-            </svg>
-            Bibliothek
-          </button>
-          <button
-            onClick={() => { setPreselectedType(undefined); setShowForm(true) }}
-            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>
-            Massnahme hinzufuegen
-          </button>
         </div>
       </div>
 
@@ -95,76 +140,80 @@ export default function MitigationsPage() {
 
       {showForm && (
         <MitigationForm
-          onSubmit={async (data) => {
-            const ok = await handleSubmit(data)
-            if (ok) { setShowForm(false); setPreselectedType(undefined) }
-          }}
-          onCancel={() => { setShowForm(false); setPreselectedType(undefined) }}
-          hazards={hazards}
-          preselectedType={preselectedType}
-          onOpenLibrary={handleOpenLibrary}
+          onSubmit={async (data) => { const ok = await handleSubmit(data); if (ok) setShowForm(false) }}
+          onCancel={() => setShowForm(false)} hazards={hazards} preselectedType={preselectedType} onOpenLibrary={handleOpenLibrary}
         />
       )}
+      {showLibrary && <MeasuresLibraryModal measures={measures} onSelect={handleSelectMeasure} onClose={() => setShowLibrary(false)} filterType={libraryFilter} />}
+      {showSuggest && <SuggestMeasuresModal hazards={hazards} projectId={projectId} onAddMeasure={handleAddSuggestedMeasure} onClose={() => setShowSuggest(false)} />}
 
-      {showLibrary && (
-        <MeasuresLibraryModal
-          measures={measures} onSelect={handleSelectMeasure}
-          onClose={() => setShowLibrary(false)} filterType={libraryFilter}
-        />
-      )}
+      {/* 3-Step Accordions */}
+      {(['design', 'protection', 'information'] as const).map((type) => {
+        const config = REDUCTION_TYPES[type]
+        const items = byType[type]
+        const isExpanded = expanded[type]
+        const allSelected = items.length > 0 && items.every((m) => selected.has(m.id))
 
-      {showSuggest && (
-        <SuggestMeasuresModal
-          hazards={hazards} projectId={projectId}
-          onAddMeasure={handleAddSuggestedMeasure}
-          onClose={() => setShowSuggest(false)}
-        />
-      )}
+        return (
+          <div key={type} className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
+            {/* Accordion Header */}
+            <button onClick={() => toggleSection(type)}
+              className={`w-full flex items-center gap-3 px-4 py-3 text-left transition-colors ${config.headerColor}`}>
+              <svg className={`w-4 h-4 transition-transform ${isExpanded ? '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>
+              {config.icon}
+              <div className="flex-1">
+                <span className="text-sm font-semibold">{config.label}</span>
+                <span className="ml-2 text-xs opacity-75">{config.description}</span>
+              </div>
+              <span className="text-sm font-bold">{items.length}</span>
+            </button>
 
-      {/* 3-Column Layout */}
-      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-        {(['design', 'protection', 'information'] as const).map((type) => {
-          const config = REDUCTION_TYPES[type]
-          const items = byType[type]
-          return (
-            <div key={type} className={`rounded-xl border ${config.color} p-4`}>
-              <div className={`flex items-center gap-2 px-3 py-2 rounded-lg ${config.headerColor} mb-3`}>
-                {config.icon}
-                <div>
-                  <h3 className="text-sm font-semibold">{config.label}</h3>
-                  <p className="text-xs opacity-75">{config.description}</p>
+            {/* Accordion Content — Table rows */}
+            {isExpanded && items.length > 0 && (
+              <div className="border-t border-gray-100 dark:border-gray-700">
+                {/* Table header */}
+                <div className="flex items-center gap-2 px-4 py-2 bg-gray-50 dark:bg-gray-750 text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  <div className="w-6">
+                    <input type="checkbox" checked={allSelected} onChange={() => selectAllInType(type)}
+                      className="accent-purple-600" title="Alle auswaehlen" />
+                  </div>
+                  <div className="flex-1">Massnahme</div>
+                  <div className="w-24">Status</div>
+                  <div className="w-32">Gefaehrdung</div>
                 </div>
-                <span className="ml-auto text-sm font-bold">{items.length}</span>
-              </div>
-              <div className="mb-3 flex flex-wrap gap-1">
-                {config.subTypes.map((st) => (
-                  <span key={st.value} className="text-xs px-1.5 py-0.5 rounded bg-white/60 text-gray-500 border border-gray-200/50">
-                    {st.label}
-                  </span>
-                ))}
-              </div>
-              <div className="space-y-3">
+                {/* Rows */}
                 {items.map((m) => (
-                  <MitigationCard key={m.id} mitigation={m} onVerify={handleVerify} onDelete={handleDelete} />
+                  <div key={m.id}
+                    className={`flex items-center gap-2 px-4 py-2 border-t border-gray-50 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-750 transition-colors ${selected.has(m.id) ? 'bg-purple-50 dark:bg-purple-900/10' : ''}`}>
+                    <div className="w-6">
+                      <input type="checkbox" checked={selected.has(m.id)} onChange={() => toggleSelect(m.id)}
+                        className="accent-purple-600" />
+                    </div>
+                    <div className="flex-1 min-w-0">
+                      <div className="text-sm text-gray-900 dark:text-white truncate">{m.title || ''}</div>
+                      {m.description && <div className="text-xs text-gray-400 truncate">{m.description}</div>}
+                    </div>
+                    <div className="w-24">
+                      <StatusBadge status={m.status} />
+                    </div>
+                    <div className="w-32 text-xs text-gray-500 truncate">
+                      {(m.linked_hazard_names || []).join(', ') || '-'}
+                    </div>
+                  </div>
                 ))}
               </div>
-              <div className="mt-3 flex gap-2">
-                <button onClick={() => handleAddForType(type)}
-                  className="flex-1 py-2 text-sm text-gray-500 hover:text-purple-600 hover:bg-white rounded-lg border border-dashed border-gray-300 hover:border-purple-300 transition-colors">
-                  + Hinzufuegen
-                </button>
-                <button onClick={() => handleOpenLibrary(type)}
-                  className="py-2 px-3 text-sm text-gray-400 hover:text-purple-600 hover:bg-white rounded-lg border border-dashed border-gray-300 hover:border-purple-300 transition-colors"
-                  title="Aus Bibliothek waehlen">
-                  <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
-                  </svg>
-                </button>
+            )}
+
+            {isExpanded && items.length === 0 && (
+              <div className="px-4 py-6 text-center text-sm text-gray-400 border-t border-gray-100">
+                Keine Massnahmen in dieser Stufe
               </div>
-            </div>
-          )
-        })}
-      </div>
+            )}
+          </div>
+        )
+      })}
     </div>
   )
 }