feat: add frontend case list, detail, and creation pages (Phase 1F)
- Case list page (/cases) with search, status/type filters, status badges - Case creation page (/cases/new) with reusable CaseForm component - Case detail page (/cases/[id]) with tabs: Timeline, Deadlines, Documents, Parties - CaseTimeline component for chronological case_events display - PartyList component with inline party CRUD (add/delete) - Updated sidebar navigation to route to /cases
This commit is contained in:
m
267
frontend/src/app/(app)/cases/[id]/page.tsx
Normal file
267
frontend/src/app/(app)/cases/[id]/page.tsx
Normal file
@@ -0,0 +1,267 @@
|
||||
"use client";
|
||||
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useParams } from "next/navigation";
|
||||
import { api } from "@/lib/api";
|
||||
import type { Case, CaseEvent, Party, Deadline, Document } from "@/lib/types";
|
||||
import { CaseTimeline } from "@/components/cases/CaseTimeline";
|
||||
import { PartyList } from "@/components/cases/PartyList";
|
||||
import { ArrowLeft, Clock, FileText, Users, Activity } from "lucide-react";
|
||||
import { format } from "date-fns";
|
||||
import { de } from "date-fns/locale";
|
||||
import Link from "next/link";
|
||||
import { useState } from "react";
|
||||
|
||||
interface CaseDetail extends Case {
|
||||
parties: Party[];
|
||||
recent_events: CaseEvent[];
|
||||
deadlines_count: number;
|
||||
}
|
||||
|
||||
const STATUS_BADGE: Record<string, string> = {
|
||||
active: "bg-emerald-50 text-emerald-700",
|
||||
pending: "bg-amber-50 text-amber-700",
|
||||
closed: "bg-neutral-100 text-neutral-600",
|
||||
archived: "bg-neutral-100 text-neutral-400",
|
||||
};
|
||||
|
||||
const TABS = [
|
||||
{ key: "timeline", label: "Verlauf", icon: Activity },
|
||||
{ key: "deadlines", label: "Fristen", icon: Clock },
|
||||
{ key: "documents", label: "Dokumente", icon: FileText },
|
||||
{ key: "parties", label: "Parteien", icon: Users },
|
||||
] as const;
|
||||
|
||||
type TabKey = (typeof TABS)[number]["key"];
|
||||
|
||||
export default function CaseDetailPage() {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const [activeTab, setActiveTab] = useState<TabKey>("timeline");
|
||||
|
||||
const { data: caseDetail, isLoading } = useQuery({
|
||||
queryKey: ["case", id],
|
||||
queryFn: () => api.get<CaseDetail>(`/cases/${id}`),
|
||||
});
|
||||
|
||||
const { data: deadlinesData } = useQuery({
|
||||
queryKey: ["case-deadlines", id],
|
||||
queryFn: () =>
|
||||
api.get<{ deadlines: Deadline[]; total: number }>(
|
||||
`/deadlines?case_id=${id}`,
|
||||
),
|
||||
enabled: activeTab === "deadlines",
|
||||
});
|
||||
|
||||
const { data: documentsData } = useQuery({
|
||||
queryKey: ["case-documents", id],
|
||||
queryFn: () => api.get<Document[]>(`/cases/${id}/documents`),
|
||||
enabled: activeTab === "documents",
|
||||
});
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="py-12 text-center text-sm text-neutral-400">
|
||||
Laden...
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!caseDetail) {
|
||||
return (
|
||||
<div className="py-12 text-center text-sm text-neutral-400">
|
||||
Akte nicht gefunden.
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const deadlines = deadlinesData?.deadlines ?? [];
|
||||
const documents = documentsData ?? [];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Link
|
||||
href="/cases"
|
||||
className="mb-4 inline-flex items-center gap-1 text-sm text-neutral-500 hover:text-neutral-700"
|
||||
>
|
||||
<ArrowLeft className="h-3.5 w-3.5" />
|
||||
Zuruck zu Akten
|
||||
</Link>
|
||||
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<div className="flex items-center gap-3">
|
||||
<h1 className="text-lg font-semibold text-neutral-900">
|
||||
{caseDetail.title}
|
||||
</h1>
|
||||
<span
|
||||
className={`inline-block rounded-full px-2 py-0.5 text-xs font-medium ${STATUS_BADGE[caseDetail.status] ?? "bg-neutral-100 text-neutral-500"}`}
|
||||
>
|
||||
{caseDetail.status}
|
||||
</span>
|
||||
</div>
|
||||
<div className="mt-1 flex gap-4 text-sm text-neutral-500">
|
||||
<span>Az. {caseDetail.case_number}</span>
|
||||
{caseDetail.case_type && <span>{caseDetail.case_type}</span>}
|
||||
{caseDetail.court && <span>{caseDetail.court}</span>}
|
||||
{caseDetail.court_ref && <span>({caseDetail.court_ref})</span>}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right text-xs text-neutral-400">
|
||||
<p>
|
||||
Erstellt:{" "}
|
||||
{format(new Date(caseDetail.created_at), "d. MMM yyyy", {
|
||||
locale: de,
|
||||
})}
|
||||
</p>
|
||||
<p>
|
||||
Aktualisiert:{" "}
|
||||
{format(new Date(caseDetail.updated_at), "d. MMM yyyy", {
|
||||
locale: de,
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{caseDetail.ai_summary && (
|
||||
<div className="mt-4 rounded-md border border-blue-100 bg-blue-50 px-4 py-3 text-sm text-blue-800">
|
||||
{caseDetail.ai_summary}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mt-6 border-b border-neutral-200">
|
||||
<nav className="-mb-px flex gap-4">
|
||||
{TABS.map((tab) => (
|
||||
<button
|
||||
key={tab.key}
|
||||
onClick={() => setActiveTab(tab.key)}
|
||||
className={`inline-flex items-center gap-1.5 border-b-2 px-1 pb-2.5 text-sm font-medium transition-colors ${
|
||||
activeTab === tab.key
|
||||
? "border-neutral-900 text-neutral-900"
|
||||
: "border-transparent text-neutral-400 hover:text-neutral-600"
|
||||
}`}
|
||||
>
|
||||
<tab.icon className="h-4 w-4" />
|
||||
{tab.label}
|
||||
{tab.key === "deadlines" && caseDetail.deadlines_count > 0 && (
|
||||
<span className="ml-1 rounded-full bg-neutral-100 px-1.5 py-0.5 text-xs text-neutral-500">
|
||||
{caseDetail.deadlines_count}
|
||||
</span>
|
||||
)}
|
||||
{tab.key === "parties" && caseDetail.parties.length > 0 && (
|
||||
<span className="ml-1 rounded-full bg-neutral-100 px-1.5 py-0.5 text-xs text-neutral-500">
|
||||
{caseDetail.parties.length}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
{activeTab === "timeline" && (
|
||||
<CaseTimeline events={caseDetail.recent_events ?? []} />
|
||||
)}
|
||||
|
||||
{activeTab === "deadlines" && (
|
||||
<DeadlinesList deadlines={deadlines} />
|
||||
)}
|
||||
|
||||
{activeTab === "documents" && (
|
||||
<DocumentsList documents={documents} />
|
||||
)}
|
||||
|
||||
{activeTab === "parties" && (
|
||||
<PartyList caseId={id} parties={caseDetail.parties ?? []} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function DeadlinesList({ deadlines }: { deadlines: Deadline[] }) {
|
||||
if (deadlines.length === 0) {
|
||||
return (
|
||||
<p className="py-8 text-center text-sm text-neutral-400">
|
||||
Keine Fristen vorhanden.
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
||||
const DEADLINE_STATUS: Record<string, string> = {
|
||||
pending: "bg-amber-50 text-amber-700",
|
||||
completed: "bg-emerald-50 text-emerald-700",
|
||||
overdue: "bg-red-50 text-red-700",
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
{deadlines.map((d) => (
|
||||
<div
|
||||
key={d.id}
|
||||
className="flex items-center justify-between rounded-md border border-neutral-200 bg-white px-4 py-3"
|
||||
>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-neutral-900">{d.title}</p>
|
||||
{d.description && (
|
||||
<p className="mt-0.5 text-sm text-neutral-500">
|
||||
{d.description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<span
|
||||
className={`rounded-full px-2 py-0.5 text-xs font-medium ${DEADLINE_STATUS[d.status] ?? "bg-neutral-100 text-neutral-500"}`}
|
||||
>
|
||||
{d.status}
|
||||
</span>
|
||||
<span className="text-sm text-neutral-500">
|
||||
{format(new Date(d.due_date), "d. MMM yyyy", { locale: de })}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function DocumentsList({ documents }: { documents: Document[] }) {
|
||||
if (documents.length === 0) {
|
||||
return (
|
||||
<p className="py-8 text-center text-sm text-neutral-400">
|
||||
Keine Dokumente vorhanden.
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
{documents.map((doc) => (
|
||||
<div
|
||||
key={doc.id}
|
||||
className="flex items-center justify-between rounded-md border border-neutral-200 bg-white px-4 py-3"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<FileText className="h-4 w-4 text-neutral-400" />
|
||||
<div>
|
||||
<p className="text-sm font-medium text-neutral-900">
|
||||
{doc.title}
|
||||
</p>
|
||||
<div className="flex gap-2 text-xs text-neutral-400">
|
||||
{doc.doc_type && <span>{doc.doc_type}</span>}
|
||||
{doc.file_size && (
|
||||
<span>{(doc.file_size / 1024).toFixed(0)} KB</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a
|
||||
href={`/api/documents/${doc.id}`}
|
||||
className="text-sm text-neutral-500 hover:text-neutral-700"
|
||||
>
|
||||
Herunterladen
|
||||
</a>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
49
frontend/src/app/(app)/cases/new/page.tsx
Normal file
49
frontend/src/app/(app)/cases/new/page.tsx
Normal file
@@ -0,0 +1,49 @@
|
||||
"use client";
|
||||
|
||||
import { useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { toast } from "sonner";
|
||||
import { api } from "@/lib/api";
|
||||
import type { Case } from "@/lib/types";
|
||||
import { CaseForm, type CaseFormData } from "@/components/cases/CaseForm";
|
||||
import { ArrowLeft } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function NewCasePage() {
|
||||
const router = useRouter();
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const mutation = useMutation({
|
||||
mutationFn: (data: CaseFormData) => api.post<Case>("/cases", data),
|
||||
onSuccess: (created) => {
|
||||
queryClient.invalidateQueries({ queryKey: ["cases"] });
|
||||
toast.success("Akte angelegt");
|
||||
router.push(`/cases/${created.id}`);
|
||||
},
|
||||
onError: () => {
|
||||
toast.error("Fehler beim Anlegen der Akte");
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-2xl">
|
||||
<Link
|
||||
href="/cases"
|
||||
className="mb-4 inline-flex items-center gap-1 text-sm text-neutral-500 hover:text-neutral-700"
|
||||
>
|
||||
<ArrowLeft className="h-3.5 w-3.5" />
|
||||
Zuruck zu Akten
|
||||
</Link>
|
||||
<h1 className="text-lg font-semibold text-neutral-900">Neue Akte</h1>
|
||||
<p className="mt-0.5 text-sm text-neutral-500">
|
||||
Neue Akte im System anlegen
|
||||
</p>
|
||||
<div className="mt-6 rounded-md border border-neutral-200 bg-white p-6">
|
||||
<CaseForm
|
||||
onSubmit={(data) => mutation.mutate(data)}
|
||||
isSubmitting={mutation.isPending}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
172
frontend/src/app/(app)/cases/page.tsx
Normal file
172
frontend/src/app/(app)/cases/page.tsx
Normal file
@@ -0,0 +1,172 @@
|
||||
"use client";
|
||||
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { api } from "@/lib/api";
|
||||
import type { Case } from "@/lib/types";
|
||||
import Link from "next/link";
|
||||
import { useSearchParams, useRouter } from "next/navigation";
|
||||
import { Plus, Search } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
|
||||
const STATUS_OPTIONS = [
|
||||
{ value: "", label: "Alle Status" },
|
||||
{ value: "active", label: "Aktiv" },
|
||||
{ value: "pending", label: "Anhangig" },
|
||||
{ value: "closed", label: "Geschlossen" },
|
||||
{ value: "archived", label: "Archiviert" },
|
||||
];
|
||||
|
||||
const TYPE_OPTIONS = [
|
||||
{ value: "", label: "Alle Typen" },
|
||||
{ value: "INF", label: "Verletzungsklage" },
|
||||
{ value: "REV", label: "Widerruf" },
|
||||
{ value: "CCR", label: "Einstweilige Verfugung" },
|
||||
{ value: "APP", label: "Berufung" },
|
||||
{ value: "PI", label: "Vorlaufiger Rechtsschutz" },
|
||||
{ value: "ZPO_CIVIL", label: "ZPO Zivilverfahren" },
|
||||
];
|
||||
|
||||
const STATUS_BADGE: Record<string, string> = {
|
||||
active: "bg-emerald-50 text-emerald-700",
|
||||
pending: "bg-amber-50 text-amber-700",
|
||||
closed: "bg-neutral-100 text-neutral-600",
|
||||
archived: "bg-neutral-100 text-neutral-400",
|
||||
};
|
||||
|
||||
export default function CasesPage() {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
const [search, setSearch] = useState(searchParams.get("search") ?? "");
|
||||
const [status, setStatus] = useState(searchParams.get("status") ?? "");
|
||||
const [type, setType] = useState(searchParams.get("type") ?? "");
|
||||
|
||||
const { data, isLoading } = useQuery({
|
||||
queryKey: ["cases", { search, status, type }],
|
||||
queryFn: () => {
|
||||
const params = new URLSearchParams();
|
||||
if (search) params.set("search", search);
|
||||
if (status) params.set("status", status);
|
||||
if (type) params.set("type", type);
|
||||
params.set("limit", "50");
|
||||
const qs = params.toString();
|
||||
return api.get<{ cases: Case[]; total: number }>(
|
||||
`/cases${qs ? `?${qs}` : ""}`,
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
const cases = data?.cases ?? [];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-lg font-semibold text-neutral-900">Akten</h1>
|
||||
<p className="mt-0.5 text-sm text-neutral-500">
|
||||
{data ? `${data.total} Akten` : "Laden..."}
|
||||
</p>
|
||||
</div>
|
||||
<Link
|
||||
href="/cases/new"
|
||||
className="inline-flex items-center gap-1.5 rounded-md bg-neutral-900 px-3 py-1.5 text-sm font-medium text-white hover:bg-neutral-800"
|
||||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
Neue Akte
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 flex items-center gap-3">
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-neutral-400" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Suchen nach Aktenzeichen, Titel..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
className="w-full rounded-md border border-neutral-200 bg-white py-1.5 pl-9 pr-3 text-sm outline-none focus:border-neutral-400 focus:ring-1 focus:ring-neutral-400"
|
||||
/>
|
||||
</div>
|
||||
<select
|
||||
value={status}
|
||||
onChange={(e) => setStatus(e.target.value)}
|
||||
className="rounded-md border border-neutral-200 bg-white px-2.5 py-1.5 text-sm outline-none focus:border-neutral-400"
|
||||
>
|
||||
{STATUS_OPTIONS.map((o) => (
|
||||
<option key={o.value} value={o.value}>
|
||||
{o.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<select
|
||||
value={type}
|
||||
onChange={(e) => setType(e.target.value)}
|
||||
className="rounded-md border border-neutral-200 bg-white px-2.5 py-1.5 text-sm outline-none focus:border-neutral-400"
|
||||
>
|
||||
{TYPE_OPTIONS.map((o) => (
|
||||
<option key={o.value} value={o.value}>
|
||||
{o.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="mt-4">
|
||||
{isLoading ? (
|
||||
<div className="py-12 text-center text-sm text-neutral-400">
|
||||
Laden...
|
||||
</div>
|
||||
) : cases.length === 0 ? (
|
||||
<div className="py-12 text-center text-sm text-neutral-400">
|
||||
Keine Akten gefunden.
|
||||
</div>
|
||||
) : (
|
||||
<div className="overflow-hidden rounded-md border border-neutral-200 bg-white">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-neutral-100 text-left text-xs font-medium uppercase tracking-wider text-neutral-400">
|
||||
<th className="px-4 py-2.5">Aktenzeichen</th>
|
||||
<th className="px-4 py-2.5">Titel</th>
|
||||
<th className="px-4 py-2.5">Typ</th>
|
||||
<th className="px-4 py-2.5">Gericht</th>
|
||||
<th className="px-4 py-2.5">Status</th>
|
||||
<th className="px-4 py-2.5">Erstellt</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-neutral-100">
|
||||
{cases.map((c) => (
|
||||
<tr
|
||||
key={c.id}
|
||||
onClick={() => router.push(`/cases/${c.id}`)}
|
||||
className="cursor-pointer hover:bg-neutral-50"
|
||||
>
|
||||
<td className="px-4 py-2.5 font-medium text-neutral-900">
|
||||
{c.case_number}
|
||||
</td>
|
||||
<td className="px-4 py-2.5 text-neutral-700">{c.title}</td>
|
||||
<td className="px-4 py-2.5 text-neutral-500">
|
||||
{c.case_type ?? "-"}
|
||||
</td>
|
||||
<td className="px-4 py-2.5 text-neutral-500">
|
||||
{c.court ?? "-"}
|
||||
</td>
|
||||
<td className="px-4 py-2.5">
|
||||
<span
|
||||
className={`inline-block rounded-full px-2 py-0.5 text-xs font-medium ${STATUS_BADGE[c.status] ?? "bg-neutral-100 text-neutral-500"}`}
|
||||
>
|
||||
{c.status}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-2.5 text-neutral-400">
|
||||
{new Date(c.created_at).toLocaleDateString("de-DE")}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user