Phase 2: Dokumentation Guide

import { useSDK } from '@breakpilot/compliance-sdk'
import type { AIActRiskCategory } from '@breakpilot/compliance-sdk'

function AIActClassification() {
  const { state, dispatch } = useSDK()

  const classifyUseCase = (useCaseId: string, classification: AIActRiskCategory) => {
    dispatch({
      type: 'UPDATE_USE_CASE',
      payload: {
        id: useCaseId,
        assessmentResult: {
          ...state.useCases.find(uc => uc.id === useCaseId)?.assessmentResult,
          aiActClassification: classification,
        },
      },
    })

    // Wenn Hochrisiko, zusaetzliche Pflichten aktivieren
    if (classification === 'HIGH_RISK') {
      dispatch({
        type: 'SET_AI_ACT_RESULT',
        payload: {
          classification,
          conformityRequired: true,
          documentationRequired: true,
          humanOversightRequired: true,
        },
      })
    }
  }

  return (
    <div>
      {state.useCases.map(uc => (
        <div key={uc.id}>
          <h3>{uc.name}</h3>
          <select
            value={uc.assessmentResult?.aiActClassification || ''}
            onChange={(e) => classifyUseCase(uc.id, e.target.value as AIActRiskCategory)}
          >
            <option value="">Bitte waehlen...</option>
            <option value="PROHIBITED">Verboten</option>
            <option value="HIGH_RISK">Hochrisiko</option>
            <option value="LIMITED">Begrenzt</option>
            <option value="MINIMAL">Minimal</option>
          </select>
        </div>
      ))}
    </div>
  )
}

import { useSDK, getSDKBackendClient } from '@breakpilot/compliance-sdk'

function DSFAGeneration() {
  const { state, dispatch } = useSDK()
  const [generating, setGenerating] = useState(false)

  const generateDSFA = async () => {
    setGenerating(true)

    const client = getSDKBackendClient()
    const dsfa = await client.generateDSFA({
      useCases: state.useCases,
      risks: state.risks,
      controls: state.controls,
    })

    dispatch({
      type: 'SET_DSFA',
      payload: dsfa,
    })

    setGenerating(false)
  }

  // DSFA nur anzeigen wenn erforderlich
  const dsfaRequired = state.useCases.some(
    uc => uc.assessmentResult?.dsfaRequired
  )

  if (!dsfaRequired) {
    return <p>Keine DSFA erforderlich fuer die aktuellen Use Cases.</p>
  }

  return (
    <div>
      {state.dsfa ? (
        <div>
          <h3>DSFA generiert</h3>
          <p>Status: {state.dsfa.status}</p>
          <p>Gesamtrisiko: {state.dsfa.conclusion?.overallRisk}</p>

          {/* DSFA-Sektionen anzeigen */}
          {Object.entries(state.dsfa.sections || {}).map(([key, section]) => (
            <div key={key}>
              <h4>{section.title}</h4>
              <p>{section.content}</p>
            </div>
          ))}
        </div>
      ) : (
        <button onClick={generateDSFA} disabled={generating}>
          {generating ? 'Generiere DSFA...' : 'DSFA generieren'}
        </button>
      )}
    </div>
  )
}

import { useSDK, getSDKBackendClient } from '@breakpilot/compliance-sdk'

function TOMsView() {
  const { state, dispatch } = useSDK()

  const generateTOMs = async () => {
    const client = getSDKBackendClient()
    const toms = await client.generateTOM({
      risks: state.risks,
      controls: state.controls,
    })

    dispatch({
      type: 'SET_TOMS',
      payload: toms,
    })
  }

  const tomCategories = [
    { id: 'access_control', label: 'Zugangskontrolle' },
    { id: 'access_rights', label: 'Zugriffskontrolle' },
    { id: 'transfer_control', label: 'Weitergabekontrolle' },
    { id: 'input_control', label: 'Eingabekontrolle' },
    { id: 'availability', label: 'Verfuegbarkeitskontrolle' },
    { id: 'separation', label: 'Trennungsgebot' },
  ]

  return (
    <div>
      <h2>TOMs: {state.toms.length}</h2>

      {tomCategories.map(cat => {
        const tomsInCategory = state.toms.filter(t => t.category === cat.id)
        return (
          <div key={cat.id}>
            <h3>{cat.label} ({tomsInCategory.length})</h3>
            <ul>
              {tomsInCategory.map(tom => (
                <li key={tom.id}>
                  <strong>{tom.title}</strong>
                  <p>{tom.description}</p>
                  <span>Status: {tom.implementationStatus}</span>
                </li>
              ))}
            </ul>
          </div>
        )
      })}

      <button onClick={generateTOMs}>TOMs generieren</button>
    </div>
  )
}

import { useSDK } from '@breakpilot/compliance-sdk'

function VVTView() {
  const { state, dispatch } = useSDK()

  const addProcessingActivity = () => {
    dispatch({
      type: 'ADD_PROCESSING_ACTIVITY',
      payload: {
        id: `pa-${Date.now()}`,
        name: 'Kundendatenverarbeitung',
        purpose: 'Vertragserfuellung',
        legalBasis: 'Art. 6 Abs. 1 lit. b DSGVO',
        dataCategories: ['Kontaktdaten', 'Vertragsdaten'],
        dataSubjects: ['Kunden'],
        recipients: [],
        retentionPeriod: '10 Jahre',
        technicalMeasures: ['Verschluesselung', 'Zugriffskontrolle'],
      },
    })
  }

  return (
    <div>
      <h2>Verarbeitungstaetigkeiten: {state.vvt.length}</h2>

      {state.vvt.map(activity => (
        <div key={activity.id} className="border p-4 rounded mb-4">
          <h3>{activity.name}</h3>
          <p><strong>Zweck:</strong> {activity.purpose}</p>
          <p><strong>Rechtsgrundlage:</strong> {activity.legalBasis}</p>
          <p><strong>Datenkategorien:</strong> {activity.dataCategories.join(', ')}</p>
          <p><strong>Betroffene:</strong> {activity.dataSubjects.join(', ')}</p>
          <p><strong>Loeschfrist:</strong> {activity.retentionPeriod}</p>
        </div>
      ))}

      <button onClick={addProcessingActivity}>
        Verarbeitungstaetigkeit hinzufuegen
      </button>
    </div>
  )
}

import { useSDK } from '@breakpilot/compliance-sdk'

function ExportAll() {
  const { exportState, completionPercentage } = useSDK()

  const handleExport = async (format: 'pdf' | 'zip' | 'json') => {
    const blob = await exportState(format)

    // Download ausloesen
    const url = URL.createObjectURL(blob)
    const a = document.createElement('a')
    a.href = url
    a.download = `compliance-export.${format === 'json' ? 'json' : format}`
    a.click()
    URL.revokeObjectURL(url)
  }

  return (
    <div>
      <h2>Compliance Fortschritt: {completionPercentage}%</h2>

      <div className="flex gap-4 mt-4">
        <button onClick={() => handleExport('pdf')}>
          PDF Export
        </button>
        <button onClick={() => handleExport('zip')}>
          ZIP Export (alle Dokumente)
        </button>
        <button onClick={() => handleExport('json')}>
          JSON Backup
        </button>
      </div>
    </div>
  )
}