357 lines
13 KiB
TypeScript
357 lines
13 KiB
TypeScript
'use client'
|
|
|
|
import React, { useState, useCallback } from 'react'
|
|
import { useRouter } from 'next/navigation'
|
|
import {
|
|
type UploadedDocument,
|
|
type DocumentUploadSectionProps,
|
|
formatFileSize,
|
|
detectVersionFromFilename,
|
|
suggestNextVersion,
|
|
} from './DocumentUploadTypes'
|
|
import {
|
|
UploadIcon,
|
|
QRIcon,
|
|
DocumentIcon,
|
|
CheckIcon,
|
|
EditIcon,
|
|
CloseIcon,
|
|
} from './DocumentUploadIcons'
|
|
import { QRCodeModal } from './DocumentUploadQRModal'
|
|
|
|
export type {
|
|
UploadedDocument,
|
|
ExtractedContent,
|
|
ExtractedSection,
|
|
DocumentUploadSectionProps,
|
|
} from './DocumentUploadTypes'
|
|
|
|
// =============================================================================
|
|
// MAIN COMPONENT
|
|
// =============================================================================
|
|
|
|
export function DocumentUploadSection({
|
|
documentType,
|
|
title,
|
|
description,
|
|
acceptedTypes = '.pdf,.docx,.doc',
|
|
onDocumentProcessed,
|
|
onOpenInEditor,
|
|
sessionId,
|
|
className = '',
|
|
}: DocumentUploadSectionProps) {
|
|
const router = useRouter()
|
|
const [isDragging, setIsDragging] = useState(false)
|
|
const [uploadedDocs, setUploadedDocs] = useState<UploadedDocument[]>([])
|
|
const [showQRModal, setShowQRModal] = useState(false)
|
|
const [isExpanded, setIsExpanded] = useState(false)
|
|
|
|
const effectiveSessionId = sessionId || `sdk-${documentType}-${Date.now()}`
|
|
|
|
const defaultTitles: Record<string, string> = {
|
|
tom: 'Bestehende TOMs hochladen',
|
|
dsfa: 'Bestehende DSFA hochladen',
|
|
vvt: 'Bestehendes VVT hochladen',
|
|
loeschfristen: 'Bestehende Löschfristen hochladen',
|
|
consent: 'Bestehende Einwilligungsdokumente hochladen',
|
|
policy: 'Bestehende Richtlinie hochladen',
|
|
custom: 'Dokument hochladen',
|
|
}
|
|
|
|
const defaultDescriptions: Record<string, string> = {
|
|
tom: 'Laden Sie Ihre bestehenden technischen und organisatorischen Maßnahmen hoch. Wir erkennen die Version und zeigen Ihnen, was aktualisiert werden sollte.',
|
|
dsfa: 'Laden Sie Ihre bestehende Datenschutz-Folgenabschätzung hoch. Wir analysieren den Inhalt und schlagen Ergänzungen vor.',
|
|
vvt: 'Laden Sie Ihr bestehendes Verarbeitungsverzeichnis hoch. Wir erkennen die Struktur und helfen bei der Aktualisierung.',
|
|
loeschfristen: 'Laden Sie Ihre bestehenden Löschfristen-Dokumente hoch. Wir analysieren die Fristen und prüfen auf Vollständigkeit.',
|
|
consent: 'Laden Sie Ihre bestehenden Einwilligungsdokumente hoch.',
|
|
policy: 'Laden Sie Ihre bestehende Richtlinie hoch.',
|
|
custom: 'Laden Sie ein bestehendes Dokument hoch.',
|
|
}
|
|
|
|
const displayTitle = title || defaultTitles[documentType]
|
|
const displayDescription = description || defaultDescriptions[documentType]
|
|
|
|
// Drag & Drop handlers
|
|
const handleDragOver = useCallback((e: React.DragEvent) => {
|
|
e.preventDefault()
|
|
setIsDragging(true)
|
|
}, [])
|
|
|
|
const handleDragLeave = useCallback((e: React.DragEvent) => {
|
|
e.preventDefault()
|
|
setIsDragging(false)
|
|
}, [])
|
|
|
|
const processFile = useCallback(async (file: File) => {
|
|
const docId = `doc-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
|
|
|
|
const newDoc: UploadedDocument = {
|
|
id: docId,
|
|
name: file.name,
|
|
type: file.type,
|
|
size: file.size,
|
|
uploadedAt: new Date(),
|
|
extractedVersion: detectVersionFromFilename(file.name),
|
|
status: 'uploading',
|
|
}
|
|
|
|
setUploadedDocs(prev => [...prev, newDoc])
|
|
setIsExpanded(true)
|
|
|
|
try {
|
|
// Upload to API
|
|
const formData = new FormData()
|
|
formData.append('file', file)
|
|
formData.append('documentType', documentType)
|
|
formData.append('sessionId', effectiveSessionId)
|
|
|
|
const response = await fetch('/api/sdk/v1/documents/upload', {
|
|
method: 'POST',
|
|
body: formData,
|
|
})
|
|
|
|
if (!response.ok) {
|
|
throw new Error('Upload fehlgeschlagen')
|
|
}
|
|
|
|
const result = await response.json()
|
|
|
|
const updatedDoc: UploadedDocument = {
|
|
...newDoc,
|
|
status: 'ready',
|
|
extractedVersion: result.extractedVersion || newDoc.extractedVersion,
|
|
extractedContent: result.extractedContent,
|
|
}
|
|
|
|
setUploadedDocs(prev => prev.map(d => d.id === docId ? updatedDoc : d))
|
|
|
|
if (onDocumentProcessed) {
|
|
onDocumentProcessed(updatedDoc)
|
|
}
|
|
} catch (error) {
|
|
setUploadedDocs(prev => prev.map(d =>
|
|
d.id === docId
|
|
? { ...d, status: 'error', error: error instanceof Error ? error.message : 'Fehler' }
|
|
: d
|
|
))
|
|
}
|
|
}, [documentType, effectiveSessionId, onDocumentProcessed])
|
|
|
|
const handleDrop = useCallback((e: React.DragEvent) => {
|
|
e.preventDefault()
|
|
setIsDragging(false)
|
|
|
|
const files = Array.from(e.dataTransfer.files).filter(f =>
|
|
f.type === 'application/pdf' ||
|
|
f.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' ||
|
|
f.type === 'application/msword'
|
|
)
|
|
|
|
files.forEach(processFile)
|
|
}, [processFile])
|
|
|
|
const handleFileSelect = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
|
|
if (!e.target.files) return
|
|
Array.from(e.target.files).forEach(processFile)
|
|
e.target.value = '' // Reset input
|
|
}, [processFile])
|
|
|
|
const removeDocument = useCallback((docId: string) => {
|
|
setUploadedDocs(prev => prev.filter(d => d.id !== docId))
|
|
}, [])
|
|
|
|
const handleOpenInEditor = useCallback((doc: UploadedDocument) => {
|
|
if (onOpenInEditor) {
|
|
onOpenInEditor(doc)
|
|
} else {
|
|
// Default: navigate to workflow editor
|
|
router.push(`/sdk/workflow?documentType=${documentType}&documentId=${doc.id}`)
|
|
}
|
|
}, [documentType, onOpenInEditor, router])
|
|
|
|
return (
|
|
<div className={`bg-white border border-gray-200 rounded-xl overflow-hidden ${className}`}>
|
|
{/* Header */}
|
|
<button
|
|
onClick={() => setIsExpanded(!isExpanded)}
|
|
className="w-full flex items-center justify-between p-4 hover:bg-gray-50 transition-colors"
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-10 h-10 rounded-lg bg-blue-50 flex items-center justify-center text-blue-600">
|
|
<DocumentIcon />
|
|
</div>
|
|
<div className="text-left">
|
|
<h3 className="font-medium text-gray-900">{displayTitle}</h3>
|
|
<p className="text-sm text-gray-500">
|
|
{uploadedDocs.length > 0
|
|
? `${uploadedDocs.length} Dokument(e) hochgeladen`
|
|
: 'Optional - bestehende Dokumente importieren'
|
|
}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<svg
|
|
className={`w-5 h-5 text-gray-400 transition-transform ${isExpanded ? '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>
|
|
|
|
{/* Expanded Content */}
|
|
{isExpanded && (
|
|
<div className="p-4 pt-0 space-y-4">
|
|
<p className="text-sm text-gray-600">{displayDescription}</p>
|
|
|
|
{/* Upload Area */}
|
|
<div
|
|
onDragOver={handleDragOver}
|
|
onDragLeave={handleDragLeave}
|
|
onDrop={handleDrop}
|
|
className={`relative p-6 rounded-lg border-2 border-dashed transition-colors ${
|
|
isDragging
|
|
? 'border-purple-400 bg-purple-50'
|
|
: 'border-gray-200 hover:border-gray-300'
|
|
}`}
|
|
>
|
|
<input
|
|
type="file"
|
|
accept={acceptedTypes}
|
|
multiple
|
|
onChange={handleFileSelect}
|
|
className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
|
|
/>
|
|
<div className="text-center">
|
|
<div className="text-gray-400 mb-2">
|
|
<UploadIcon />
|
|
</div>
|
|
<p className="text-sm font-medium text-gray-700">
|
|
{isDragging ? 'Dateien hier ablegen' : 'Dateien hierher ziehen'}
|
|
</p>
|
|
<p className="text-xs text-gray-500 mt-1">
|
|
oder klicken zum Auswählen (PDF, DOCX)
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* QR Upload Button */}
|
|
<button
|
|
onClick={() => setShowQRModal(true)}
|
|
className="w-full flex items-center justify-center gap-2 px-4 py-2 text-sm text-purple-600 bg-purple-50 hover:bg-purple-100 rounded-lg transition-colors"
|
|
>
|
|
<QRIcon />
|
|
<span>Mit Handy hochladen (QR-Code)</span>
|
|
</button>
|
|
|
|
{/* Uploaded Documents */}
|
|
{uploadedDocs.length > 0 && (
|
|
<div className="space-y-2">
|
|
<p className="text-sm font-medium text-gray-700">Hochgeladene Dokumente:</p>
|
|
{uploadedDocs.map(doc => (
|
|
<div
|
|
key={doc.id}
|
|
className={`flex items-center gap-3 p-3 rounded-lg border ${
|
|
doc.status === 'error'
|
|
? 'bg-red-50 border-red-200'
|
|
: doc.status === 'ready'
|
|
? 'bg-green-50 border-green-200'
|
|
: 'bg-gray-50 border-gray-200'
|
|
}`}
|
|
>
|
|
<div className="flex-shrink-0">
|
|
{doc.status === 'uploading' || doc.status === 'processing' ? (
|
|
<div className="w-5 h-5 border-2 border-purple-500 border-t-transparent rounded-full animate-spin" />
|
|
) : doc.status === 'ready' ? (
|
|
<div className="w-5 h-5 rounded-full bg-green-500 text-white flex items-center justify-center">
|
|
<CheckIcon />
|
|
</div>
|
|
) : (
|
|
<div className="w-5 h-5 rounded-full bg-red-500 text-white flex items-center justify-center text-xs">!</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-sm font-medium text-gray-900 truncate">{doc.name}</p>
|
|
<div className="flex items-center gap-2 text-xs text-gray-500">
|
|
<span>{formatFileSize(doc.size)}</span>
|
|
{doc.extractedVersion && (
|
|
<>
|
|
<span>•</span>
|
|
<span className="text-purple-600">Version {doc.extractedVersion}</span>
|
|
<span>→</span>
|
|
<span className="text-green-600 font-medium">
|
|
Vorschlag: v{suggestNextVersion(doc.extractedVersion)}
|
|
</span>
|
|
</>
|
|
)}
|
|
</div>
|
|
{doc.error && (
|
|
<p className="text-xs text-red-600 mt-1">{doc.error}</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex items-center gap-1">
|
|
{doc.status === 'ready' && (
|
|
<button
|
|
onClick={() => handleOpenInEditor(doc)}
|
|
className="p-2 text-purple-600 hover:bg-purple-100 rounded-lg transition-colors"
|
|
title="Im Editor öffnen"
|
|
>
|
|
<EditIcon />
|
|
</button>
|
|
)}
|
|
<button
|
|
onClick={() => removeDocument(doc.id)}
|
|
className="p-2 text-gray-400 hover:text-red-500 hover:bg-red-50 rounded-lg transition-colors"
|
|
title="Entfernen"
|
|
>
|
|
<CloseIcon />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* Extracted Content Preview */}
|
|
{uploadedDocs.some(d => d.status === 'ready' && d.extractedContent) && (
|
|
<div className="p-4 bg-blue-50 border border-blue-200 rounded-lg">
|
|
<h4 className="text-sm font-medium text-blue-900 mb-2">Erkannte Inhalte</h4>
|
|
{uploadedDocs
|
|
.filter(d => d.status === 'ready' && d.extractedContent)
|
|
.map(doc => (
|
|
<div key={doc.id} className="text-sm text-blue-800">
|
|
{doc.extractedContent?.title && (
|
|
<p><strong>Titel:</strong> {doc.extractedContent.title}</p>
|
|
)}
|
|
{doc.extractedContent?.sections && (
|
|
<p><strong>Abschnitte:</strong> {doc.extractedContent.sections.length} gefunden</p>
|
|
)}
|
|
</div>
|
|
))
|
|
}
|
|
<button
|
|
onClick={() => uploadedDocs.find(d => d.status === 'ready') && handleOpenInEditor(uploadedDocs.find(d => d.status === 'ready')!)}
|
|
className="mt-3 w-full px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 transition-colors"
|
|
>
|
|
Im Änderungsmodus öffnen
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* QR Modal */}
|
|
<QRCodeModal
|
|
isOpen={showQRModal}
|
|
onClose={() => setShowQRModal(false)}
|
|
sessionId={effectiveSessionId}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default DocumentUploadSection
|