its-consulting/Rentenversicherer
2
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

feat: AcroForm-Fill via Claude CLI, Multi-Source, Kanagawa, Docker-Deploy

Browse source 
Komplettes Rework der AI-Studio-Vorlage zu einem produktiven Werkzeug fuer
deutsche AcroForm-Formulare (Reha-Antraege, Arzt-Befundberichte):

- Backend: Express spawnt headless Claude CLI ('claude -p --output-format json'
  via stdin-Pipe). Prompt enthaelt die Feldnamen als Ziel-Schema plus die
  Arbeitsregeln (Stichwortstil, feste Zeichen-Kaestchen ohne Leerzeichen,
  Vordrucke respektieren, keine geratenen Werte, nur medizinisch).
- PDF-Handling: pdfjs-dist statt pdf-lib — pdf-lib scheitert an verschluesselten
  Object-Streams in DRV-Formularen. annotationStorage + saveDocument, kein
  Flatten. Worker-Patch zur Laufzeit forciert Auto-Size und schwarze Schrift.
- Multi-Source-Upload: beliebig viele PDFs/Bilder + optional Freitext.
- Design: Kanagawa Design System (Preset aus ../kanagawa-design-system),
  Tailwind lokal gebaut statt CDN, Dark/Light-Toggle, Progress-Indicator.
- Deployment: Multi-Stage-Dockerfile, docker-compose in matrix_default-Netz,
  Claude-Credentials vom Host per Volume. PLAN.md + AGENTS.md (Alex-Schema).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Kenearos 2026-04-20 22:48:32 +02:00
parent d6cab4aeb5
commit 3c669fb003
28 changed files with 6756 additions and 934 deletions
Download patch file Download diff file Expand all files Collapse all files

151
components/SourceInput.tsx Normal file
View file

@ -0,0 +1,151 @@
import React, { useRef, useState } from 'react';
import { Upload, FileText, X, Image as ImageIcon } from 'lucide-react';
import type { FileData } from '../types';
interface SourceInputProps {
files: FileData[];
text: string;
onFilesChange: (files: FileData[]) => void;
onTextChange: (text: string) => void;
}
const ACCEPT = 'application/pdf,image/png,image/jpeg,image/webp';
function readFile(file: File): Promise<FileData> {
return new Promise((resolve, reject) => {
const objectUrl = URL.createObjectURL(file);
const reader = new FileReader();
reader.onload = () => {
const dataUrl = reader.result as string;
const base64 = dataUrl.split(',')[1];
resolve({
file,
previewUrl: objectUrl,
base64,
type: file.type as FileData['type'],
});
};
reader.onerror = () => reject(reader.error);
reader.readAsDataURL(file);
});
}
export const SourceInput: React.FC<SourceInputProps> = ({
files,
text,
onFilesChange,
onTextChange,
}) => {
const inputRef = useRef<HTMLInputElement>(null);
const [isDragging, setIsDragging] = useState(false);
const handleIncoming = async (fileList: FileList | null) => {
if (!fileList || fileList.length === 0) return;
const incoming: FileData[] = [];
for (const f of Array.from(fileList)) {
if (!ACCEPT.split(',').includes(f.type)) continue;
incoming.push(await readFile(f));
}
onFilesChange([...files, ...incoming]);
};
const removeAt = (index: number) => {
const removed = files[index];
if (removed.previewUrl?.startsWith('blob:')) {
URL.revokeObjectURL(removed.previewUrl);
}
onFilesChange(files.filter((_, i) => i !== index));
};
return (
<div className="space-y-3">
<div
onClick={() => inputRef.current?.click()}
onDragOver={(e) => {
e.preventDefault();
setIsDragging(true);
}}
onDragLeave={() => setIsDragging(false)}
onDrop={(e) => {
e.preventDefault();
setIsDragging(false);
void handleIncoming(e.dataTransfer.files);
}}
className={`relative border-2 border-dashed rounded-kng-lg p-6 text-center cursor-pointer transition-all duration-200 ${
isDragging
? 'border-kng-accent bg-kng-surface'
: 'border-kng-border hover:border-kng-accent hover:bg-kng-surface'
}`}
>
<input
ref={inputRef}
type="file"
multiple
className="hidden"
accept={ACCEPT}
onChange={(e) => void handleIncoming(e.target.files)}
/>
<div className="flex flex-col items-center justify-center space-y-2">
<div className="p-2 bg-kng-bg-elevated rounded-kng-full shadow-kng-sm">
<Upload className="w-5 h-5 text-kng-accent" />
</div>
<div>
<p className="text-sm font-semibold text-kng-text">
Dateien hinzufügen (Klick oder Drop)
</p>
<p className="text-xs text-kng-text-muted mt-1">
Scans, Briefe, Ausweise — PDF oder Bild. Mehrere möglich.
</p>
</div>
</div>
</div>
{files.length > 0 && (
<ul className="space-y-2">
{files.map((f, idx) => (
<li
key={idx}
className="flex items-center gap-3 border border-kng-border bg-kng-surface rounded-kng-md px-3 py-2"
>
<div className="w-8 h-8 bg-kng-bg-elevated rounded-kng-sm flex items-center justify-center flex-shrink-0 overflow-hidden">
{f.type === 'application/pdf' ? (
<FileText className="w-4 h-4 text-kng-text-secondary" />
) : (
<ImageIcon className="w-4 h-4 text-kng-text-secondary" />
)}
</div>
<div className="flex-1 min-w-0">
<p className="text-sm font-medium text-kng-text truncate">
{f.file.name}
</p>
<p className="text-xs text-kng-text-muted">
{(f.file.size / 1024 / 1024).toFixed(2)} MB
</p>
</div>
<button
onClick={() => removeAt(idx)}
className="p-1 hover:bg-kng-surface-hover rounded-kng-full transition-colors text-kng-text-muted hover:text-kng-error"
aria-label="Entfernen"
>
<X className="w-4 h-4" />
</button>
</li>
))}
</ul>
)}
<div>
<label className="block text-xs font-semibold uppercase tracking-wider text-kng-text-secondary mb-1">
Zusätzlicher Text (optional)
</label>
<textarea
value={text}
onChange={(e) => onTextChange(e.target.value)}
rows={4}
placeholder="Notizen, E-Mail-Text, Werte die nicht in den Dokumenten stehen …"
className="block w-full rounded-kng-md border border-kng-border bg-kng-surface px-3 py-2 text-sm text-kng-text placeholder-kng-text-muted focus:border-kng-accent focus:outline-none focus:ring-1 focus:ring-kng-accent resize-y"
/>
</div>
</div>
);
};