fix(admin-v2): Restore complete admin-v2 application
The admin-v2 application was incomplete in the repository. This commit restores all missing components: - Admin pages (76 pages): dashboard, ai, compliance, dsgvo, education, infrastructure, communication, development, onboarding, rbac - SDK pages (45 pages): tom, dsfa, vvt, loeschfristen, einwilligungen, vendor-compliance, tom-generator, dsr, and more - Developer portal (25 pages): API docs, SDK guides, frameworks - All components, lib files, hooks, and types - Updated package.json with all dependencies The issue was caused by incomplete initial repository state - the full admin-v2 codebase existed in backend/admin-v2 and docs-src/admin-v2 but was never fully synced to the main admin-v2 directory. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
BreakPilot Dev
293
admin-v2/components/sdk/dsr/DSRErasureChecklist.tsx
Normal file
293
admin-v2/components/sdk/dsr/DSRErasureChecklist.tsx
Normal file
@@ -0,0 +1,293 @@
|
||||
'use client'
|
||||
|
||||
import React, { useState } from 'react'
|
||||
import {
|
||||
DSRErasureChecklist,
|
||||
DSRErasureChecklistItem,
|
||||
ERASURE_EXCEPTIONS
|
||||
} from '@/lib/sdk/dsr/types'
|
||||
|
||||
interface DSRErasureChecklistProps {
|
||||
checklist?: DSRErasureChecklist
|
||||
onChange?: (checklist: DSRErasureChecklist) => void
|
||||
readOnly?: boolean
|
||||
}
|
||||
|
||||
export function DSRErasureChecklistComponent({
|
||||
checklist,
|
||||
onChange,
|
||||
readOnly = false
|
||||
}: DSRErasureChecklistProps) {
|
||||
const [localChecklist, setLocalChecklist] = useState<DSRErasureChecklist>(() => {
|
||||
if (checklist) return checklist
|
||||
return {
|
||||
items: ERASURE_EXCEPTIONS.map(exc => ({
|
||||
...exc,
|
||||
checked: false,
|
||||
applies: false
|
||||
})),
|
||||
canProceedWithErasure: true
|
||||
}
|
||||
})
|
||||
|
||||
const handleItemChange = (
|
||||
itemId: string,
|
||||
field: 'checked' | 'applies' | 'notes',
|
||||
value: boolean | string
|
||||
) => {
|
||||
const updatedItems = localChecklist.items.map(item => {
|
||||
if (item.id !== itemId) return item
|
||||
return { ...item, [field]: value }
|
||||
})
|
||||
|
||||
// Calculate if erasure can proceed (no exceptions apply)
|
||||
const canProceedWithErasure = !updatedItems.some(item => item.checked && item.applies)
|
||||
|
||||
const updatedChecklist: DSRErasureChecklist = {
|
||||
...localChecklist,
|
||||
items: updatedItems,
|
||||
canProceedWithErasure
|
||||
}
|
||||
|
||||
setLocalChecklist(updatedChecklist)
|
||||
onChange?.(updatedChecklist)
|
||||
}
|
||||
|
||||
const appliedExceptions = localChecklist.items.filter(item => item.checked && item.applies)
|
||||
const allChecked = localChecklist.items.every(item => item.checked)
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-gray-900">
|
||||
Art. 17(3) Ausnahmen-Pruefung
|
||||
</h3>
|
||||
<p className="text-sm text-gray-500 mt-1">
|
||||
Pruefen Sie, ob eine der Ausnahmen zur Loeschung zutrifft
|
||||
</p>
|
||||
</div>
|
||||
{/* Status Badge */}
|
||||
<div className={`
|
||||
px-3 py-1.5 rounded-lg text-sm font-medium
|
||||
${localChecklist.canProceedWithErasure
|
||||
? 'bg-green-100 text-green-700 border border-green-200'
|
||||
: 'bg-red-100 text-red-700 border border-red-200'
|
||||
}
|
||||
`}>
|
||||
{localChecklist.canProceedWithErasure
|
||||
? 'Loeschung moeglich'
|
||||
: `${appliedExceptions.length} Ausnahme(n)`
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Info Box */}
|
||||
<div className="bg-blue-50 border border-blue-200 rounded-xl p-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<svg className="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<div className="text-sm text-blue-700">
|
||||
<p className="font-medium">Hinweis</p>
|
||||
<p className="mt-1">
|
||||
Nach Art. 17(3) DSGVO bestehen Ausnahmen vom Loeschungsanspruch.
|
||||
Pruefen Sie jeden Punkt und dokumentieren Sie, ob eine Ausnahme greift.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Checklist Items */}
|
||||
<div className="space-y-3">
|
||||
{localChecklist.items.map((item, index) => (
|
||||
<ChecklistItem
|
||||
key={item.id}
|
||||
item={item}
|
||||
index={index}
|
||||
readOnly={readOnly}
|
||||
onChange={(field, value) => handleItemChange(item.id, field, value)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Summary */}
|
||||
{allChecked && (
|
||||
<div className={`
|
||||
rounded-xl p-4 border
|
||||
${localChecklist.canProceedWithErasure
|
||||
? 'bg-green-50 border-green-200'
|
||||
: 'bg-red-50 border-red-200'
|
||||
}
|
||||
`}>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className={`
|
||||
w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0
|
||||
${localChecklist.canProceedWithErasure ? 'bg-green-100' : 'bg-red-100'}
|
||||
`}>
|
||||
{localChecklist.canProceedWithErasure ? (
|
||||
<svg className="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
) : (
|
||||
<svg className="w-5 h-5 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<div className={`font-medium ${localChecklist.canProceedWithErasure ? 'text-green-800' : 'text-red-800'}`}>
|
||||
{localChecklist.canProceedWithErasure
|
||||
? 'Alle Ausnahmen geprueft - Loeschung kann durchgefuehrt werden'
|
||||
: 'Ausnahme(n) greifen - Loeschung nicht oder nur teilweise moeglich'
|
||||
}
|
||||
</div>
|
||||
{!localChecklist.canProceedWithErasure && (
|
||||
<ul className="mt-2 space-y-1">
|
||||
{appliedExceptions.map(exc => (
|
||||
<li key={exc.id} className="text-sm text-red-700">
|
||||
- {exc.article}: {exc.label}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Progress Indicator */}
|
||||
{!allChecked && (
|
||||
<div className="text-sm text-gray-500 text-center">
|
||||
{localChecklist.items.filter(i => i.checked).length} von {localChecklist.items.length} Ausnahmen geprueft
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// Individual Checklist Item Component
|
||||
function ChecklistItem({
|
||||
item,
|
||||
index,
|
||||
readOnly,
|
||||
onChange
|
||||
}: {
|
||||
item: DSRErasureChecklistItem
|
||||
index: number
|
||||
readOnly: boolean
|
||||
onChange: (field: 'checked' | 'applies' | 'notes', value: boolean | string) => void
|
||||
}) {
|
||||
const [expanded, setExpanded] = useState(false)
|
||||
|
||||
return (
|
||||
<div className={`
|
||||
rounded-xl border transition-all
|
||||
${item.checked
|
||||
? item.applies
|
||||
? 'border-red-200 bg-red-50'
|
||||
: 'border-green-200 bg-green-50'
|
||||
: 'border-gray-200 bg-white'
|
||||
}
|
||||
`}>
|
||||
{/* Main Row */}
|
||||
<div className="p-4">
|
||||
<div className="flex items-start gap-4">
|
||||
{/* Checkbox */}
|
||||
<label className="flex items-center cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={item.checked}
|
||||
onChange={(e) => onChange('checked', e.target.checked)}
|
||||
disabled={readOnly}
|
||||
className="w-5 h-5 rounded border-gray-300 text-purple-600 focus:ring-purple-500 disabled:opacity-50"
|
||||
/>
|
||||
</label>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<span className="text-xs font-mono text-gray-500 bg-gray-100 px-1.5 py-0.5 rounded">
|
||||
{item.article}
|
||||
</span>
|
||||
<span className="font-medium text-gray-900">{item.label}</span>
|
||||
</div>
|
||||
<p className="text-sm text-gray-600">{item.description}</p>
|
||||
</div>
|
||||
|
||||
{/* Toggle Expand */}
|
||||
<button
|
||||
onClick={() => setExpanded(!expanded)}
|
||||
className="p-1 text-gray-400 hover:text-gray-600 rounded"
|
||||
>
|
||||
<svg
|
||||
className={`w-5 h-5 transition-transform ${expanded ? 'rotate-180' : ''}`}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Applies Toggle - Show when checked */}
|
||||
{item.checked && (
|
||||
<div className="mt-3 ml-9 flex items-center gap-4">
|
||||
<span className="text-sm text-gray-600">Trifft diese Ausnahme zu?</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => onChange('applies', false)}
|
||||
disabled={readOnly}
|
||||
className={`
|
||||
px-3 py-1 text-sm rounded-lg transition-colors
|
||||
${!item.applies
|
||||
? 'bg-green-600 text-white'
|
||||
: 'bg-gray-100 text-gray-600 hover:bg-gray-200'
|
||||
}
|
||||
${readOnly ? 'opacity-50 cursor-not-allowed' : ''}
|
||||
`}
|
||||
>
|
||||
Nein
|
||||
</button>
|
||||
<button
|
||||
onClick={() => onChange('applies', true)}
|
||||
disabled={readOnly}
|
||||
className={`
|
||||
px-3 py-1 text-sm rounded-lg transition-colors
|
||||
${item.applies
|
||||
? 'bg-red-600 text-white'
|
||||
: 'bg-gray-100 text-gray-600 hover:bg-gray-200'
|
||||
}
|
||||
${readOnly ? 'opacity-50 cursor-not-allowed' : ''}
|
||||
`}
|
||||
>
|
||||
Ja
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Expanded Notes Section */}
|
||||
{expanded && (
|
||||
<div className="px-4 pb-4 pt-0 border-t border-gray-100">
|
||||
<div className="ml-9 mt-3">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Notizen / Begruendung
|
||||
</label>
|
||||
<textarea
|
||||
value={item.notes || ''}
|
||||
onChange={(e) => onChange('notes', e.target.value)}
|
||||
disabled={readOnly}
|
||||
placeholder="Dokumentieren Sie Ihre Pruefung..."
|
||||
rows={3}
|
||||
className="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 resize-none disabled:bg-gray-50 disabled:text-gray-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user