5a31f52310
Services: Admin-Lehrer, Backend-Lehrer, Studio v2, Website, Klausur-Service, School-Service, Voice-Service, Geo-Service, BreakPilot Drive, Agent-Core Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
404 lines
15 KiB
TypeScript
404 lines
15 KiB
TypeScript
'use client'
|
|
|
|
/**
|
|
* DSR (Data Subject Requests) Admin Page
|
|
*
|
|
* GDPR Article 15-21 Request Management
|
|
*/
|
|
|
|
import AdminLayout from '@/components/admin/AdminLayout'
|
|
import { useEffect, useState, useCallback } from 'react'
|
|
|
|
interface DSRRequest {
|
|
id: string
|
|
request_number: string
|
|
requester_email: string
|
|
requester_name: string
|
|
request_type: string
|
|
status: string
|
|
priority: string
|
|
created_at: string
|
|
deadline: string
|
|
assigned_to?: string
|
|
notes?: string
|
|
}
|
|
|
|
interface DSRStats {
|
|
total: number
|
|
pending: number
|
|
in_progress: number
|
|
completed: number
|
|
overdue: number
|
|
}
|
|
|
|
export default function DSRManagementPage() {
|
|
const [adminToken, setAdminToken] = useState('')
|
|
const [requests, setRequests] = useState<DSRRequest[]>([])
|
|
const [stats, setStats] = useState<DSRStats | null>(null)
|
|
const [loading, setLoading] = useState(false)
|
|
const [selectedRequest, setSelectedRequest] = useState<DSRRequest | null>(null)
|
|
const [filter, setFilter] = useState<string>('all')
|
|
const [error, setError] = useState<string | null>(null)
|
|
|
|
const API_BASE = 'http://localhost:8081/api/v1'
|
|
|
|
// Load saved token
|
|
useEffect(() => {
|
|
const savedToken = localStorage.getItem('adminToken')
|
|
if (savedToken) {
|
|
setAdminToken(savedToken)
|
|
}
|
|
}, [])
|
|
|
|
// Save token
|
|
const saveToken = (token: string) => {
|
|
setAdminToken(token)
|
|
localStorage.setItem('adminToken', token)
|
|
}
|
|
|
|
// Fetch DSR requests
|
|
const fetchRequests = useCallback(async () => {
|
|
if (!adminToken) return
|
|
|
|
setLoading(true)
|
|
setError(null)
|
|
|
|
try {
|
|
const response = await fetch(`${API_BASE}/dsr/requests`, {
|
|
headers: {
|
|
'Authorization': `Bearer ${adminToken}`,
|
|
},
|
|
})
|
|
|
|
if (!response.ok) {
|
|
if (response.status === 401) {
|
|
throw new Error('Nicht autorisiert - Token ungültig')
|
|
}
|
|
throw new Error(`HTTP ${response.status}`)
|
|
}
|
|
|
|
const data = await response.json()
|
|
setRequests(data.requests || [])
|
|
|
|
// Calculate stats
|
|
const allRequests = data.requests || []
|
|
const now = new Date()
|
|
setStats({
|
|
total: allRequests.length,
|
|
pending: allRequests.filter((r: DSRRequest) => r.status === 'pending').length,
|
|
in_progress: allRequests.filter((r: DSRRequest) => r.status === 'in_progress').length,
|
|
completed: allRequests.filter((r: DSRRequest) => r.status === 'completed').length,
|
|
overdue: allRequests.filter((r: DSRRequest) => new Date(r.deadline) < now && r.status !== 'completed').length,
|
|
})
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : 'Fehler beim Laden')
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}, [adminToken])
|
|
|
|
useEffect(() => {
|
|
if (adminToken) {
|
|
fetchRequests()
|
|
}
|
|
}, [adminToken, fetchRequests])
|
|
|
|
// Get status badge color
|
|
const getStatusColor = (status: string) => {
|
|
switch (status) {
|
|
case 'pending':
|
|
return 'bg-yellow-100 text-yellow-800'
|
|
case 'in_progress':
|
|
return 'bg-blue-100 text-blue-800'
|
|
case 'completed':
|
|
return 'bg-green-100 text-green-800'
|
|
case 'rejected':
|
|
return 'bg-red-100 text-red-800'
|
|
default:
|
|
return 'bg-slate-100 text-slate-800'
|
|
}
|
|
}
|
|
|
|
// Get priority badge color
|
|
const getPriorityColor = (priority: string) => {
|
|
switch (priority) {
|
|
case 'urgent':
|
|
return 'bg-red-100 text-red-800'
|
|
case 'high':
|
|
return 'bg-orange-100 text-orange-800'
|
|
case 'normal':
|
|
return 'bg-slate-100 text-slate-800'
|
|
case 'low':
|
|
return 'bg-slate-50 text-slate-600'
|
|
default:
|
|
return 'bg-slate-100 text-slate-800'
|
|
}
|
|
}
|
|
|
|
// Get request type label
|
|
const getTypeLabel = (type: string) => {
|
|
const labels: Record<string, string> = {
|
|
'access': 'Auskunft (Art. 15)',
|
|
'rectification': 'Berichtigung (Art. 16)',
|
|
'erasure': 'Löschung (Art. 17)',
|
|
'restriction': 'Einschränkung (Art. 18)',
|
|
'portability': 'Datenübertragbarkeit (Art. 20)',
|
|
'objection': 'Widerspruch (Art. 21)',
|
|
}
|
|
return labels[type] || type
|
|
}
|
|
|
|
// Filter requests
|
|
const filteredRequests = requests.filter(r => {
|
|
if (filter === 'all') return true
|
|
if (filter === 'overdue') {
|
|
return new Date(r.deadline) < new Date() && r.status !== 'completed'
|
|
}
|
|
return r.status === filter
|
|
})
|
|
|
|
// Format date
|
|
const formatDate = (dateStr: string) => {
|
|
return new Date(dateStr).toLocaleDateString('de-DE', {
|
|
day: '2-digit',
|
|
month: '2-digit',
|
|
year: 'numeric',
|
|
})
|
|
}
|
|
|
|
// Check if overdue
|
|
const isOverdue = (deadline: string, status: string) => {
|
|
return new Date(deadline) < new Date() && status !== 'completed'
|
|
}
|
|
|
|
return (
|
|
<AdminLayout title="Datenschutzanfragen" description="DSGVO Art. 15-21 Anfragen verwalten">
|
|
{/* Token Input */}
|
|
<div className="bg-white rounded-xl border border-slate-200 p-4 mb-6">
|
|
<label className="block text-sm font-medium text-slate-700 mb-2">
|
|
Admin Token
|
|
</label>
|
|
<div className="flex gap-2">
|
|
<input
|
|
type="password"
|
|
value={adminToken}
|
|
onChange={(e) => saveToken(e.target.value)}
|
|
placeholder="JWT Token eingeben..."
|
|
className="flex-1 px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary-500"
|
|
/>
|
|
<button
|
|
onClick={fetchRequests}
|
|
disabled={!adminToken || loading}
|
|
className="px-4 py-2 bg-slate-900 text-white rounded-lg text-sm hover:bg-slate-800 disabled:opacity-50"
|
|
>
|
|
{loading ? 'Laden...' : 'Laden'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Error Message */}
|
|
{error && (
|
|
<div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg mb-6">
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
{/* Stats */}
|
|
{stats && (
|
|
<div className="grid grid-cols-2 md:grid-cols-5 gap-4 mb-6">
|
|
<div className="bg-white rounded-xl border border-slate-200 p-4">
|
|
<div className="text-2xl font-bold text-slate-900">{stats.total}</div>
|
|
<div className="text-sm text-slate-500">Gesamt</div>
|
|
</div>
|
|
<div className="bg-white rounded-xl border border-slate-200 p-4">
|
|
<div className="text-2xl font-bold text-yellow-600">{stats.pending}</div>
|
|
<div className="text-sm text-slate-500">Offen</div>
|
|
</div>
|
|
<div className="bg-white rounded-xl border border-slate-200 p-4">
|
|
<div className="text-2xl font-bold text-blue-600">{stats.in_progress}</div>
|
|
<div className="text-sm text-slate-500">In Bearbeitung</div>
|
|
</div>
|
|
<div className="bg-white rounded-xl border border-slate-200 p-4">
|
|
<div className="text-2xl font-bold text-green-600">{stats.completed}</div>
|
|
<div className="text-sm text-slate-500">Abgeschlossen</div>
|
|
</div>
|
|
<div className="bg-white rounded-xl border border-slate-200 p-4">
|
|
<div className={`text-2xl font-bold ${stats.overdue > 0 ? 'text-red-600' : 'text-slate-400'}`}>
|
|
{stats.overdue}
|
|
</div>
|
|
<div className="text-sm text-slate-500">Überfällig</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Filter Tabs */}
|
|
<div className="flex gap-2 mb-4 overflow-x-auto">
|
|
{[
|
|
{ value: 'all', label: 'Alle' },
|
|
{ value: 'pending', label: 'Offen' },
|
|
{ value: 'in_progress', label: 'In Bearbeitung' },
|
|
{ value: 'completed', label: 'Abgeschlossen' },
|
|
{ value: 'overdue', label: 'Überfällig' },
|
|
].map((tab) => (
|
|
<button
|
|
key={tab.value}
|
|
onClick={() => setFilter(tab.value)}
|
|
className={`px-4 py-2 rounded-lg text-sm font-medium whitespace-nowrap transition-colors ${
|
|
filter === tab.value
|
|
? 'bg-slate-900 text-white'
|
|
: 'bg-white text-slate-700 border border-slate-200 hover:bg-slate-50'
|
|
}`}
|
|
>
|
|
{tab.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Requests Table */}
|
|
<div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
|
|
<table className="w-full">
|
|
<thead className="bg-slate-50 border-b border-slate-200">
|
|
<tr>
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Nr.</th>
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Typ</th>
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Anfragesteller</th>
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Status</th>
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Priorität</th>
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Frist</th>
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Aktionen</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-slate-100">
|
|
{filteredRequests.length === 0 ? (
|
|
<tr>
|
|
<td colSpan={7} className="px-4 py-8 text-center text-slate-500">
|
|
Keine Anfragen gefunden
|
|
</td>
|
|
</tr>
|
|
) : (
|
|
filteredRequests.map((request) => (
|
|
<tr key={request.id} className={isOverdue(request.deadline, request.status) ? 'bg-red-50' : ''}>
|
|
<td className="px-4 py-3 text-sm font-mono text-slate-900">{request.request_number}</td>
|
|
<td className="px-4 py-3 text-sm text-slate-700">{getTypeLabel(request.request_type)}</td>
|
|
<td className="px-4 py-3">
|
|
<div className="text-sm text-slate-900">{request.requester_name}</div>
|
|
<div className="text-xs text-slate-500">{request.requester_email}</div>
|
|
</td>
|
|
<td className="px-4 py-3">
|
|
<span className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusColor(request.status)}`}>
|
|
{request.status}
|
|
</span>
|
|
</td>
|
|
<td className="px-4 py-3">
|
|
<span className={`px-2 py-1 rounded-full text-xs font-medium ${getPriorityColor(request.priority)}`}>
|
|
{request.priority}
|
|
</span>
|
|
</td>
|
|
<td className="px-4 py-3">
|
|
<span className={`text-sm ${isOverdue(request.deadline, request.status) ? 'text-red-600 font-medium' : 'text-slate-700'}`}>
|
|
{formatDate(request.deadline)}
|
|
</span>
|
|
</td>
|
|
<td className="px-4 py-3">
|
|
<button
|
|
onClick={() => setSelectedRequest(request)}
|
|
className="text-primary-600 hover:text-primary-700 text-sm font-medium"
|
|
>
|
|
Details
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
))
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{/* Detail Modal */}
|
|
{selectedRequest && (
|
|
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
|
|
<div className="bg-white rounded-xl shadow-xl max-w-2xl w-full mx-4 max-h-[90vh] overflow-y-auto">
|
|
<div className="px-6 py-4 border-b border-slate-200 flex items-center justify-between">
|
|
<h3 className="font-semibold text-slate-900">
|
|
Anfrage {selectedRequest.request_number}
|
|
</h3>
|
|
<button
|
|
onClick={() => setSelectedRequest(null)}
|
|
className="text-slate-400 hover:text-slate-600"
|
|
>
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div className="p-6 space-y-4">
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<div className="text-sm text-slate-500">Typ</div>
|
|
<div className="font-medium text-slate-900">{getTypeLabel(selectedRequest.request_type)}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-sm text-slate-500">Status</div>
|
|
<span className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusColor(selectedRequest.status)}`}>
|
|
{selectedRequest.status}
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<div className="text-sm text-slate-500">Anfragesteller</div>
|
|
<div className="font-medium text-slate-900">{selectedRequest.requester_name}</div>
|
|
<div className="text-sm text-slate-500">{selectedRequest.requester_email}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-sm text-slate-500">Frist</div>
|
|
<div className={`font-medium ${isOverdue(selectedRequest.deadline, selectedRequest.status) ? 'text-red-600' : 'text-slate-900'}`}>
|
|
{formatDate(selectedRequest.deadline)}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-sm text-slate-500">Eingegangen</div>
|
|
<div className="font-medium text-slate-900">{formatDate(selectedRequest.created_at)}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-sm text-slate-500">Zugewiesen an</div>
|
|
<div className="font-medium text-slate-900">{selectedRequest.assigned_to || '-'}</div>
|
|
</div>
|
|
</div>
|
|
|
|
{selectedRequest.notes && (
|
|
<div>
|
|
<div className="text-sm text-slate-500 mb-1">Notizen</div>
|
|
<div className="bg-slate-50 rounded-lg p-3 text-sm text-slate-700">
|
|
{selectedRequest.notes}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex gap-2 pt-4">
|
|
<button className="flex-1 px-4 py-2 bg-primary-600 text-white rounded-lg text-sm font-medium hover:bg-primary-700">
|
|
Bearbeiten
|
|
</button>
|
|
<button className="px-4 py-2 border border-slate-300 text-slate-700 rounded-lg text-sm font-medium hover:bg-slate-50">
|
|
Abschließen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Info Box */}
|
|
<div className="mt-6 bg-blue-50 border border-blue-200 rounded-xl p-4">
|
|
<h4 className="font-semibold text-blue-900 mb-2">DSGVO-Fristen</h4>
|
|
<ul className="text-sm text-blue-800 space-y-1">
|
|
<li>Art. 15 (Auskunft): 1 Monat, verlängerbar auf 3 Monate</li>
|
|
<li>Art. 16 (Berichtigung): Unverzüglich</li>
|
|
<li>Art. 17 (Löschung): Unverzüglich</li>
|
|
<li>Art. 18 (Einschränkung): Unverzüglich</li>
|
|
<li>Art. 20 (Datenübertragbarkeit): 1 Monat</li>
|
|
<li>Art. 21 (Widerspruch): Unverzüglich</li>
|
|
</ul>
|
|
</div>
|
|
</AdminLayout>
|
|
)
|
|
}
|