feat: frontend AI tab — KI-Strategie, KI-Entwurf, Aehnliche Faelle
New "KI" tab on case detail page with three sub-panels: - KI-Strategie: one-click strategic analysis with next steps, risks, timeline - KI-Entwurf: document drafting with template selection, language, instructions - Aehnliche Faelle: UPC similar case search with relevance scores Components: CaseStrategy, DocumentDrafter, SimilarCaseFinder Types: StrategyRecommendation, DocumentDraft, SimilarCase, etc.
This commit is contained in:
m
226
frontend/src/components/ai/CaseStrategy.tsx
Normal file
226
frontend/src/components/ai/CaseStrategy.tsx
Normal file
@@ -0,0 +1,226 @@
|
||||
"use client";
|
||||
|
||||
import { useMutation } from "@tanstack/react-query";
|
||||
import { api } from "@/lib/api";
|
||||
import type { StrategyRecommendation } from "@/lib/types";
|
||||
import {
|
||||
Loader2,
|
||||
Brain,
|
||||
AlertTriangle,
|
||||
ArrowRight,
|
||||
Shield,
|
||||
Calendar,
|
||||
RefreshCw,
|
||||
} from "lucide-react";
|
||||
|
||||
interface CaseStrategyProps {
|
||||
caseId: string;
|
||||
}
|
||||
|
||||
const PRIORITY_STYLES = {
|
||||
high: "bg-red-50 text-red-700 border-red-200",
|
||||
medium: "bg-amber-50 text-amber-700 border-amber-200",
|
||||
low: "bg-emerald-50 text-emerald-700 border-emerald-200",
|
||||
} as const;
|
||||
|
||||
const IMPORTANCE_STYLES = {
|
||||
critical: "border-l-red-500",
|
||||
important: "border-l-amber-500",
|
||||
routine: "border-l-neutral-300",
|
||||
} as const;
|
||||
|
||||
export function CaseStrategy({ caseId }: CaseStrategyProps) {
|
||||
const mutation = useMutation({
|
||||
mutationFn: () =>
|
||||
api.post<StrategyRecommendation>("/ai/case-strategy", {
|
||||
case_id: caseId,
|
||||
}),
|
||||
});
|
||||
|
||||
if (!mutation.data && !mutation.isPending && !mutation.isError) {
|
||||
return (
|
||||
<div className="flex flex-col items-center gap-3 py-8 text-center">
|
||||
<div className="rounded-xl bg-neutral-100 p-3">
|
||||
<Brain className="h-6 w-6 text-neutral-400" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-neutral-900">
|
||||
KI-Strategieanalyse
|
||||
</p>
|
||||
<p className="mt-1 text-sm text-neutral-500">
|
||||
Claude analysiert die Akte und gibt strategische Empfehlungen.
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => mutation.mutate()}
|
||||
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"
|
||||
>
|
||||
<Brain className="h-4 w-4" />
|
||||
Strategie analysieren
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (mutation.isPending) {
|
||||
return (
|
||||
<div className="flex flex-col items-center gap-3 py-12 text-center">
|
||||
<Loader2 className="h-6 w-6 animate-spin text-neutral-400" />
|
||||
<p className="text-sm text-neutral-500">
|
||||
Claude analysiert die Akte...
|
||||
</p>
|
||||
<p className="text-xs text-neutral-400">
|
||||
Dies kann bis zu 30 Sekunden dauern.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (mutation.isError) {
|
||||
return (
|
||||
<div className="flex flex-col items-center gap-3 py-8 text-center">
|
||||
<div className="rounded-xl bg-red-50 p-3">
|
||||
<AlertTriangle className="h-6 w-6 text-red-500" />
|
||||
</div>
|
||||
<p className="text-sm text-neutral-900">Analyse fehlgeschlagen</p>
|
||||
<button
|
||||
onClick={() => mutation.mutate()}
|
||||
className="inline-flex items-center gap-1 text-sm text-neutral-500 transition-colors hover:text-neutral-700"
|
||||
>
|
||||
<RefreshCw className="h-3.5 w-3.5" />
|
||||
Erneut versuchen
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const data = mutation.data!;
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-sm font-semibold text-neutral-900">
|
||||
KI-Strategieanalyse
|
||||
</h3>
|
||||
<button
|
||||
onClick={() => mutation.mutate()}
|
||||
className="inline-flex items-center gap-1 rounded-md border border-neutral-200 px-2.5 py-1.5 text-xs font-medium text-neutral-600 transition-colors hover:bg-neutral-50"
|
||||
>
|
||||
<RefreshCw className="h-3.5 w-3.5" />
|
||||
Aktualisieren
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Summary */}
|
||||
<div className="rounded-md border border-blue-100 bg-blue-50 px-4 py-3 text-sm text-blue-800">
|
||||
{data.summary}
|
||||
</div>
|
||||
|
||||
{/* Next Steps */}
|
||||
{data.next_steps?.length > 0 && (
|
||||
<div>
|
||||
<h4 className="mb-2 flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wide text-neutral-500">
|
||||
<ArrowRight className="h-3.5 w-3.5" />
|
||||
Naechste Schritte
|
||||
</h4>
|
||||
<div className="space-y-2">
|
||||
{data.next_steps.map((step, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="rounded-md border border-neutral-200 bg-white px-4 py-3"
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<span
|
||||
className={`mt-0.5 inline-block shrink-0 rounded-full border px-2 py-0.5 text-xs font-medium ${PRIORITY_STYLES[step.priority]}`}
|
||||
>
|
||||
{step.priority === "high"
|
||||
? "Hoch"
|
||||
: step.priority === "medium"
|
||||
? "Mittel"
|
||||
: "Niedrig"}
|
||||
</span>
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm font-medium text-neutral-900">
|
||||
{step.action}
|
||||
</p>
|
||||
<p className="mt-1 text-sm text-neutral-500">
|
||||
{step.reasoning}
|
||||
</p>
|
||||
{step.deadline && (
|
||||
<p className="mt-1 text-xs text-neutral-400">
|
||||
Frist: {step.deadline}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Risk Assessment */}
|
||||
{data.risk_assessment?.length > 0 && (
|
||||
<div>
|
||||
<h4 className="mb-2 flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wide text-neutral-500">
|
||||
<Shield className="h-3.5 w-3.5" />
|
||||
Risikobewertung
|
||||
</h4>
|
||||
<div className="space-y-2">
|
||||
{data.risk_assessment.map((risk, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="rounded-md border border-neutral-200 bg-white px-4 py-3"
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<span
|
||||
className={`mt-0.5 inline-block shrink-0 rounded-full border px-2 py-0.5 text-xs font-medium ${PRIORITY_STYLES[risk.level]}`}
|
||||
>
|
||||
{risk.level === "high"
|
||||
? "Hoch"
|
||||
: risk.level === "medium"
|
||||
? "Mittel"
|
||||
: "Niedrig"}
|
||||
</span>
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm font-medium text-neutral-900">
|
||||
{risk.risk}
|
||||
</p>
|
||||
<p className="mt-1 text-sm text-neutral-500">
|
||||
Massnahme: {risk.mitigation}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Timeline */}
|
||||
{data.timeline?.length > 0 && (
|
||||
<div>
|
||||
<h4 className="mb-2 flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wide text-neutral-500">
|
||||
<Calendar className="h-3.5 w-3.5" />
|
||||
Zeitplan
|
||||
</h4>
|
||||
<div className="space-y-1">
|
||||
{data.timeline.map((item, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className={`border-l-2 py-2 pl-4 ${IMPORTANCE_STYLES[item.importance]}`}
|
||||
>
|
||||
<div className="flex items-baseline gap-2">
|
||||
<span className="shrink-0 text-xs font-medium text-neutral-400">
|
||||
{item.date}
|
||||
</span>
|
||||
<span className="text-sm text-neutral-900">{item.event}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user