feat: add AI deadline extraction frontend page (Phase 2M)
- ExtractionForm: PDF dropzone (react-dropzone) + text textarea + case selector - ExtractionResults: review table with edit/remove per row, confidence color-coding - Page at /ai/extract: upload -> analyze -> review -> adopt deadlines to case - Extended API client with postFormData for multipart uploads - Added ExtractedDeadline and ExtractionResponse types
This commit is contained in:
m
238
frontend/src/components/ai/ExtractionResults.tsx
Normal file
238
frontend/src/components/ai/ExtractionResults.tsx
Normal file
@@ -0,0 +1,238 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Trash2, Check, Pencil, X, Loader2 } from "lucide-react";
|
||||
import type { ExtractedDeadline } from "@/lib/types";
|
||||
|
||||
interface ExtractionResultsProps {
|
||||
deadlines: ExtractedDeadline[];
|
||||
onAdopt: (deadlines: ExtractedDeadline[]) => void;
|
||||
isAdopting: boolean;
|
||||
}
|
||||
|
||||
function confidenceColor(confidence: number): string {
|
||||
if (confidence >= 0.8) return "bg-green-100 text-green-800";
|
||||
if (confidence >= 0.5) return "bg-yellow-100 text-yellow-800";
|
||||
return "bg-red-100 text-red-800";
|
||||
}
|
||||
|
||||
function confidenceLabel(confidence: number): string {
|
||||
if (confidence >= 0.8) return "Hoch";
|
||||
if (confidence >= 0.5) return "Mittel";
|
||||
return "Niedrig";
|
||||
}
|
||||
|
||||
export function ExtractionResults({
|
||||
deadlines: initialDeadlines,
|
||||
onAdopt,
|
||||
isAdopting,
|
||||
}: ExtractionResultsProps) {
|
||||
const [deadlines, setDeadlines] = useState(initialDeadlines);
|
||||
const [editingIndex, setEditingIndex] = useState<number | null>(null);
|
||||
const [editForm, setEditForm] = useState<ExtractedDeadline | null>(null);
|
||||
|
||||
function removeDeadline(index: number) {
|
||||
setDeadlines((prev) => prev.filter((_, i) => i !== index));
|
||||
}
|
||||
|
||||
function startEdit(index: number) {
|
||||
setEditingIndex(index);
|
||||
setEditForm({ ...deadlines[index] });
|
||||
}
|
||||
|
||||
function cancelEdit() {
|
||||
setEditingIndex(null);
|
||||
setEditForm(null);
|
||||
}
|
||||
|
||||
function saveEdit() {
|
||||
if (editingIndex === null || !editForm) return;
|
||||
setDeadlines((prev) =>
|
||||
prev.map((d, i) => (i === editingIndex ? editForm : d)),
|
||||
);
|
||||
setEditingIndex(null);
|
||||
setEditForm(null);
|
||||
}
|
||||
|
||||
if (deadlines.length === 0) {
|
||||
return (
|
||||
<div className="rounded-md border border-neutral-200 bg-neutral-50 p-6 text-center">
|
||||
<p className="text-sm text-neutral-500">
|
||||
Keine Fristen gefunden. Alle extrahierten Fristen wurden entfernt.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-sm font-medium text-neutral-900">
|
||||
{deadlines.length} Frist{deadlines.length !== 1 ? "en" : ""} erkannt
|
||||
</h3>
|
||||
<button
|
||||
onClick={() => onAdopt(deadlines)}
|
||||
disabled={isAdopting || deadlines.length === 0}
|
||||
className="inline-flex items-center gap-2 rounded-md bg-neutral-900 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-neutral-800 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
{isAdopting ? (
|
||||
<>
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
Uebernehme...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Check className="h-4 w-4" />
|
||||
Fristen uebernehmen
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="overflow-hidden rounded-md border border-neutral-200">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-neutral-200 bg-neutral-50">
|
||||
<th className="px-4 py-2.5 text-left font-medium text-neutral-700">
|
||||
Frist
|
||||
</th>
|
||||
<th className="px-4 py-2.5 text-left font-medium text-neutral-700">
|
||||
Faelligkeitsdatum
|
||||
</th>
|
||||
<th className="px-4 py-2.5 text-left font-medium text-neutral-700">
|
||||
Rechtsgrundlage
|
||||
</th>
|
||||
<th className="px-4 py-2.5 text-left font-medium text-neutral-700">
|
||||
Konfidenz
|
||||
</th>
|
||||
<th className="px-4 py-2.5 text-left font-medium text-neutral-700">
|
||||
Quellenangabe
|
||||
</th>
|
||||
<th className="px-4 py-2.5 text-right font-medium text-neutral-700">
|
||||
Aktionen
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{deadlines.map((d, i) => (
|
||||
<tr
|
||||
key={i}
|
||||
className="border-b border-neutral-100 last:border-b-0"
|
||||
>
|
||||
{editingIndex === i && editForm ? (
|
||||
<>
|
||||
<td className="px-4 py-2">
|
||||
<input
|
||||
value={editForm.title}
|
||||
onChange={(e) =>
|
||||
setEditForm({ ...editForm, title: e.target.value })
|
||||
}
|
||||
className="w-full rounded border border-neutral-300 px-2 py-1 text-sm"
|
||||
/>
|
||||
</td>
|
||||
<td className="px-4 py-2">
|
||||
<input
|
||||
type="date"
|
||||
value={editForm.due_date ?? ""}
|
||||
onChange={(e) =>
|
||||
setEditForm({
|
||||
...editForm,
|
||||
due_date: e.target.value || null,
|
||||
})
|
||||
}
|
||||
className="rounded border border-neutral-300 px-2 py-1 text-sm"
|
||||
/>
|
||||
</td>
|
||||
<td className="px-4 py-2">
|
||||
<input
|
||||
value={editForm.rule_reference}
|
||||
onChange={(e) =>
|
||||
setEditForm({
|
||||
...editForm,
|
||||
rule_reference: e.target.value,
|
||||
})
|
||||
}
|
||||
className="w-full rounded border border-neutral-300 px-2 py-1 text-sm"
|
||||
/>
|
||||
</td>
|
||||
<td className="px-4 py-2">
|
||||
<span
|
||||
className={`inline-block rounded-full px-2 py-0.5 text-xs font-medium ${confidenceColor(editForm.confidence)}`}
|
||||
>
|
||||
{confidenceLabel(editForm.confidence)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-2 text-xs text-neutral-500">
|
||||
{editForm.source_quote}
|
||||
</td>
|
||||
<td className="px-4 py-2 text-right">
|
||||
<div className="flex items-center justify-end gap-1">
|
||||
<button
|
||||
onClick={saveEdit}
|
||||
className="rounded p-1 text-green-600 hover:bg-green-50"
|
||||
title="Speichern"
|
||||
>
|
||||
<Check className="h-4 w-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={cancelEdit}
|
||||
className="rounded p-1 text-neutral-400 hover:bg-neutral-100"
|
||||
title="Abbrechen"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<td className="px-4 py-2.5 font-medium text-neutral-900">
|
||||
{d.title}
|
||||
</td>
|
||||
<td className="px-4 py-2.5 text-neutral-700">
|
||||
{d.due_date
|
||||
? new Date(d.due_date).toLocaleDateString("de-DE")
|
||||
: `${d.duration_value} ${d.duration_unit}`}
|
||||
</td>
|
||||
<td className="px-4 py-2.5 text-neutral-600">
|
||||
{d.rule_reference || "-"}
|
||||
</td>
|
||||
<td className="px-4 py-2.5">
|
||||
<span
|
||||
className={`inline-block rounded-full px-2 py-0.5 text-xs font-medium ${confidenceColor(d.confidence)}`}
|
||||
>
|
||||
{confidenceLabel(d.confidence)}{" "}
|
||||
{Math.round(d.confidence * 100)}%
|
||||
</span>
|
||||
</td>
|
||||
<td className="max-w-48 truncate px-4 py-2.5 text-xs text-neutral-500">
|
||||
{d.source_quote || "-"}
|
||||
</td>
|
||||
<td className="px-4 py-2.5 text-right">
|
||||
<div className="flex items-center justify-end gap-1">
|
||||
<button
|
||||
onClick={() => startEdit(i)}
|
||||
className="rounded p-1 text-neutral-400 hover:bg-neutral-100 hover:text-neutral-600"
|
||||
title="Bearbeiten"
|
||||
>
|
||||
<Pencil className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => removeDeadline(i)}
|
||||
className="rounded p-1 text-neutral-400 hover:bg-red-50 hover:text-red-600"
|
||||
title="Entfernen"
|
||||
>
|
||||
<Trash2 className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</>
|
||||
)}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user