feat: add AI extraction frontend page (Phase 2M)

frontend/src/components/ai/ExtractionForm.tsx

@@ -0,0 +1,169 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import { useDropzone } from "react-dropzone";
+import { Upload, FileText, X, Loader2 } from "lucide-react";
+import type { Case } from "@/lib/types";
+
+interface ExtractionFormProps {
+  cases: Case[];
+  selectedCaseId: string;
+  onCaseChange: (caseId: string) => void;
+  onExtract: (file: File | null, text: string) => void;
+  isLoading: boolean;
+}
+
+export function ExtractionForm({
+  cases,
+  selectedCaseId,
+  onCaseChange,
+  onExtract,
+  isLoading,
+}: ExtractionFormProps) {
+  const [file, setFile] = useState<File | null>(null);
+  const [text, setText] = useState("");
+
+  const onDrop = useCallback((acceptedFiles: File[]) => {
+    if (acceptedFiles.length > 0) {
+      setFile(acceptedFiles[0]);
+      setText("");
+    }
+  }, []);
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    onDrop,
+    accept: { "application/pdf": [".pdf"] },
+    maxFiles: 1,
+    disabled: isLoading,
+  });
+
+  function removeFile() {
+    setFile(null);
+  }
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!selectedCaseId || (!file && !text.trim())) return;
+    onExtract(file, text.trim());
+  }
+
+  const hasInput = file !== null || text.trim().length > 0;
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-5">
+      {/* Case selector */}
+      <div>
+        <label
+          htmlFor="case-select"
+          className="mb-1.5 block text-sm font-medium text-neutral-700"
+        >
+          Akte
+        </label>
+        <select
+          id="case-select"
+          value={selectedCaseId}
+          onChange={(e) => onCaseChange(e.target.value)}
+          className="w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-sm text-neutral-900 focus:border-neutral-500 focus:outline-none focus:ring-1 focus:ring-neutral-500"
+          disabled={isLoading}
+        >
+          <option value="">Akte auswaehlen...</option>
+          {cases.map((c) => (
+            <option key={c.id} value={c.id}>
+              {c.case_number} - {c.title}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      {/* PDF dropzone */}
+      <div>
+        <label className="mb-1.5 block text-sm font-medium text-neutral-700">
+          PDF hochladen
+        </label>
+        {file ? (
+          <div className="flex items-center gap-3 rounded-md border border-neutral-200 bg-neutral-50 px-4 py-3">
+            <FileText className="h-5 w-5 shrink-0 text-neutral-500" />
+            <div className="min-w-0 flex-1">
+              <p className="truncate text-sm font-medium text-neutral-900">
+                {file.name}
+              </p>
+              <p className="text-xs text-neutral-500">
+                {(file.size / 1024).toFixed(0)} KB
+              </p>
+            </div>
+            <button
+              type="button"
+              onClick={removeFile}
+              disabled={isLoading}
+              className="rounded p-1 text-neutral-400 hover:bg-neutral-200 hover:text-neutral-600"
+            >
+              <X className="h-4 w-4" />
+            </button>
+          </div>
+        ) : (
+          <div
+            {...getRootProps()}
+            className={`cursor-pointer rounded-md border-2 border-dashed px-6 py-8 text-center transition-colors ${
+              isDragActive
+                ? "border-neutral-500 bg-neutral-50"
+                : "border-neutral-300 hover:border-neutral-400"
+            } ${isLoading ? "pointer-events-none opacity-50" : ""}`}
+          >
+            <input {...getInputProps()} />
+            <Upload className="mx-auto h-8 w-8 text-neutral-400" />
+            <p className="mt-2 text-sm text-neutral-600">
+              PDF hierher ziehen oder{" "}
+              <span className="font-medium text-neutral-900">durchsuchen</span>
+            </p>
+            <p className="mt-1 text-xs text-neutral-400">Nur PDF-Dateien</p>
+          </div>
+        )}
+      </div>
+
+      {/* Divider */}
+      <div className="flex items-center gap-3">
+        <div className="h-px flex-1 bg-neutral-200" />
+        <span className="text-xs text-neutral-400">oder</span>
+        <div className="h-px flex-1 bg-neutral-200" />
+      </div>
+
+      {/* Text input */}
+      <div>
+        <label
+          htmlFor="text-input"
+          className="mb-1.5 block text-sm font-medium text-neutral-700"
+        >
+          Text eingeben
+        </label>
+        <textarea
+          id="text-input"
+          value={text}
+          onChange={(e) => {
+            setText(e.target.value);
+            if (e.target.value.trim()) setFile(null);
+          }}
+          placeholder="Gerichtsschriftsatz, Beschluss oder sonstigen Text hier einfuegen..."
+          rows={6}
+          disabled={isLoading}
+          className="w-full rounded-md border border-neutral-300 px-3 py-2 text-sm text-neutral-900 placeholder:text-neutral-400 focus:border-neutral-500 focus:outline-none focus:ring-1 focus:ring-neutral-500 disabled:opacity-50"
+        />
+      </div>
+
+      {/* Submit */}
+      <button
+        type="submit"
+        disabled={isLoading || !hasInput || !selectedCaseId}
+        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"
+      >
+        {isLoading ? (
+          <>
+            <Loader2 className="h-4 w-4 animate-spin" />
+            Analysiere...
+          </>
+        ) : (
+          "Analysieren"
+        )}
+      </button>
+    </form>
+  );
+}

frontend/src/components/ai/ExtractionResults.tsx

@@ -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>
+  );
+}

frontend/src/components/layout/Sidebar.tsx

@@ -16,7 +16,7 @@ const navigation = [
   { name: "Akten", href: "/akten", icon: FolderOpen },
   { name: "Fristen", href: "/fristen", icon: Clock },
   { name: "Termine", href: "/termine", icon: Calendar },
-  { name: "AI Analyse", href: "/ai", icon: Brain },
+  { name: "AI Analyse", href: "/ai/extract", icon: Brain },
   { name: "Einstellungen", href: "/einstellungen", icon: Settings },
 ];