feat: Phase D — case detail refactor to URL-based nested routes
This commit is contained in:
m
35
frontend/src/app/(app)/cases/[id]/dokumente/page.tsx
Normal file
35
frontend/src/app/(app)/cases/[id]/dokumente/page.tsx
Normal file
@@ -0,0 +1,35 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useQuery } from "@tanstack/react-query";
|
||||||
|
import { useParams } from "next/navigation";
|
||||||
|
import { api } from "@/lib/api";
|
||||||
|
import type { Document } from "@/lib/types";
|
||||||
|
import { DocumentList } from "@/components/documents/DocumentList";
|
||||||
|
import { DocumentUpload } from "@/components/documents/DocumentUpload";
|
||||||
|
import { Loader2 } from "lucide-react";
|
||||||
|
|
||||||
|
export default function DokumentePage() {
|
||||||
|
const { id } = useParams<{ id: string }>();
|
||||||
|
|
||||||
|
const { data, isLoading } = useQuery({
|
||||||
|
queryKey: ["case-documents", id],
|
||||||
|
queryFn: () => api.get<Document[]>(`/cases/${id}/documents`),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (isLoading) {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center justify-center py-8">
|
||||||
|
<Loader2 className="h-5 w-5 animate-spin text-neutral-400" />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const documents = Array.isArray(data) ? data : [];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<DocumentUpload caseId={id} />
|
||||||
|
<DocumentList documents={documents} caseId={id} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
86
frontend/src/app/(app)/cases/[id]/fristen/page.tsx
Normal file
86
frontend/src/app/(app)/cases/[id]/fristen/page.tsx
Normal file
@@ -0,0 +1,86 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useQuery } from "@tanstack/react-query";
|
||||||
|
import { useParams } from "next/navigation";
|
||||||
|
import { api } from "@/lib/api";
|
||||||
|
import type { Deadline } from "@/lib/types";
|
||||||
|
import { format } from "date-fns";
|
||||||
|
import { de } from "date-fns/locale";
|
||||||
|
import { Clock, Loader2 } from "lucide-react";
|
||||||
|
|
||||||
|
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",
|
||||||
|
};
|
||||||
|
|
||||||
|
const DEADLINE_STATUS_LABEL: Record<string, string> = {
|
||||||
|
pending: "Offen",
|
||||||
|
completed: "Erledigt",
|
||||||
|
overdue: "Ueberfaellig",
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function FristenPage() {
|
||||||
|
const { id } = useParams<{ id: string }>();
|
||||||
|
|
||||||
|
const { data, isLoading } = useQuery({
|
||||||
|
queryKey: ["case-deadlines", id],
|
||||||
|
queryFn: () =>
|
||||||
|
api.get<{ deadlines: Deadline[]; total: number }>(
|
||||||
|
`/deadlines?case_id=${id}`,
|
||||||
|
),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (isLoading) {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center justify-center py-8">
|
||||||
|
<Loader2 className="h-5 w-5 animate-spin text-neutral-400" />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const deadlines = Array.isArray(data?.deadlines) ? data.deadlines : [];
|
||||||
|
|
||||||
|
if (deadlines.length === 0) {
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col items-center py-8 text-center">
|
||||||
|
<div className="rounded-xl bg-neutral-100 p-3">
|
||||||
|
<Clock className="h-5 w-5 text-neutral-400" />
|
||||||
|
</div>
|
||||||
|
<p className="mt-2 text-sm text-neutral-500">
|
||||||
|
Keine Fristen vorhanden.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-2">
|
||||||
|
{deadlines.map((d) => (
|
||||||
|
<div
|
||||||
|
key={d.id}
|
||||||
|
className="flex flex-col gap-2 rounded-md border border-neutral-200 bg-white px-4 py-3 sm:flex-row sm:items-center sm:justify-between"
|
||||||
|
>
|
||||||
|
<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"}`}
|
||||||
|
>
|
||||||
|
{DEADLINE_STATUS_LABEL[d.status] ?? d.status}
|
||||||
|
</span>
|
||||||
|
<span className="whitespace-nowrap text-sm text-neutral-500">
|
||||||
|
{format(new Date(d.due_date), "d. MMM yyyy", { locale: de })}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
226
frontend/src/app/(app)/cases/[id]/layout.tsx
Normal file
226
frontend/src/app/(app)/cases/[id]/layout.tsx
Normal file
@@ -0,0 +1,226 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useQuery } from "@tanstack/react-query";
|
||||||
|
import { useParams, usePathname } from "next/navigation";
|
||||||
|
import Link from "next/link";
|
||||||
|
import { api } from "@/lib/api";
|
||||||
|
import type { Case } from "@/lib/types";
|
||||||
|
import { Breadcrumb } from "@/components/layout/Breadcrumb";
|
||||||
|
import { Skeleton } from "@/components/ui/Skeleton";
|
||||||
|
import {
|
||||||
|
ArrowLeft,
|
||||||
|
Activity,
|
||||||
|
Clock,
|
||||||
|
FileText,
|
||||||
|
Users,
|
||||||
|
StickyNote,
|
||||||
|
AlertTriangle,
|
||||||
|
} from "lucide-react";
|
||||||
|
import { format } from "date-fns";
|
||||||
|
import { de } from "date-fns/locale";
|
||||||
|
|
||||||
|
interface CaseDetail extends Case {
|
||||||
|
parties: unknown[];
|
||||||
|
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 STATUS_LABEL: Record<string, string> = {
|
||||||
|
active: "Aktiv",
|
||||||
|
pending: "Anhaengig",
|
||||||
|
closed: "Geschlossen",
|
||||||
|
archived: "Archiviert",
|
||||||
|
};
|
||||||
|
|
||||||
|
const TABS = [
|
||||||
|
{ segment: "verlauf", label: "Verlauf", icon: Activity },
|
||||||
|
{ segment: "fristen", label: "Fristen", icon: Clock },
|
||||||
|
{ segment: "dokumente", label: "Dokumente", icon: FileText },
|
||||||
|
{ segment: "parteien", label: "Parteien", icon: Users },
|
||||||
|
{ segment: "notizen", label: "Notizen", icon: StickyNote },
|
||||||
|
] as const;
|
||||||
|
|
||||||
|
const TAB_LABELS: Record<string, string> = {
|
||||||
|
verlauf: "Verlauf",
|
||||||
|
fristen: "Fristen",
|
||||||
|
dokumente: "Dokumente",
|
||||||
|
parteien: "Parteien",
|
||||||
|
notizen: "Notizen",
|
||||||
|
};
|
||||||
|
|
||||||
|
function CaseDetailSkeleton() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Skeleton className="h-4 w-28" />
|
||||||
|
<div className="mt-4 flex items-start justify-between">
|
||||||
|
<div>
|
||||||
|
<Skeleton className="h-6 w-48" />
|
||||||
|
<Skeleton className="mt-2 h-4 w-64" />
|
||||||
|
</div>
|
||||||
|
<div className="space-y-1">
|
||||||
|
<Skeleton className="h-3 w-24" />
|
||||||
|
<Skeleton className="h-3 w-24" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mt-6 flex gap-4 border-b border-neutral-200 pb-2.5">
|
||||||
|
{[1, 2, 3, 4, 5].map((i) => (
|
||||||
|
<Skeleton key={i} className="h-4 w-20" />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div className="mt-6 space-y-3">
|
||||||
|
{[1, 2, 3].map((i) => (
|
||||||
|
<Skeleton key={i} className="h-14 rounded-md" />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function CaseDetailLayout({
|
||||||
|
children,
|
||||||
|
}: {
|
||||||
|
children: React.ReactNode;
|
||||||
|
}) {
|
||||||
|
const { id } = useParams<{ id: string }>();
|
||||||
|
const pathname = usePathname();
|
||||||
|
|
||||||
|
const {
|
||||||
|
data: caseDetail,
|
||||||
|
isLoading,
|
||||||
|
error,
|
||||||
|
} = useQuery({
|
||||||
|
queryKey: ["case", id],
|
||||||
|
queryFn: () => api.get<CaseDetail>(`/cases/${id}`),
|
||||||
|
});
|
||||||
|
|
||||||
|
// Determine active tab from pathname
|
||||||
|
const segments = pathname.split("/");
|
||||||
|
const activeSegment = segments[segments.length - 1] || "verlauf";
|
||||||
|
const activeTabLabel = TAB_LABELS[activeSegment];
|
||||||
|
|
||||||
|
if (isLoading) {
|
||||||
|
return <CaseDetailSkeleton />;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error || !caseDetail) {
|
||||||
|
return (
|
||||||
|
<div className="py-12 text-center">
|
||||||
|
<div className="mx-auto mb-3 w-fit rounded-xl bg-red-50 p-3">
|
||||||
|
<AlertTriangle className="h-6 w-6 text-red-500" />
|
||||||
|
</div>
|
||||||
|
<p className="text-sm font-medium text-neutral-900">
|
||||||
|
Akte nicht gefunden
|
||||||
|
</p>
|
||||||
|
<p className="mt-1 text-sm text-neutral-500">
|
||||||
|
Die Akte existiert nicht oder Sie haben keine Berechtigung.
|
||||||
|
</p>
|
||||||
|
<Link
|
||||||
|
href="/cases"
|
||||||
|
className="mt-4 inline-flex items-center gap-1 text-sm text-neutral-500 transition-colors hover:text-neutral-700"
|
||||||
|
>
|
||||||
|
<ArrowLeft className="h-3.5 w-3.5" />
|
||||||
|
Zurueck zu Akten
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const breadcrumbItems = [
|
||||||
|
{ label: "Dashboard", href: "/dashboard" },
|
||||||
|
{ label: "Akten", href: "/cases" },
|
||||||
|
{ label: caseDetail.case_number, href: `/cases/${id}/verlauf` },
|
||||||
|
...(activeTabLabel ? [{ label: activeTabLabel }] : []),
|
||||||
|
];
|
||||||
|
|
||||||
|
const partiesCount = Array.isArray(caseDetail.parties)
|
||||||
|
? caseDetail.parties.length
|
||||||
|
: 0;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="animate-fade-in">
|
||||||
|
<Breadcrumb items={breadcrumbItems} />
|
||||||
|
|
||||||
|
<div className="mt-4 flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
|
||||||
|
<div>
|
||||||
|
<div className="flex flex-wrap 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"}`}
|
||||||
|
>
|
||||||
|
{STATUS_LABEL[caseDetail.status] ?? caseDetail.status}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="mt-1 flex flex-wrap gap-x-4 gap-y-1 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-1 overflow-x-auto sm:gap-4">
|
||||||
|
{TABS.map((tab) => {
|
||||||
|
const isActive = activeSegment === tab.segment;
|
||||||
|
return (
|
||||||
|
<Link
|
||||||
|
key={tab.segment}
|
||||||
|
href={`/cases/${id}/${tab.segment}`}
|
||||||
|
className={`inline-flex shrink-0 items-center gap-1.5 border-b-2 px-1 pb-2.5 text-sm font-medium transition-colors ${
|
||||||
|
isActive
|
||||||
|
? "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.segment === "fristen" &&
|
||||||
|
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.segment === "parteien" && partiesCount > 0 && (
|
||||||
|
<span className="ml-1 rounded-full bg-neutral-100 px-1.5 py-0.5 text-xs text-neutral-500">
|
||||||
|
{partiesCount}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-6">{children}</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
10
frontend/src/app/(app)/cases/[id]/notizen/page.tsx
Normal file
10
frontend/src/app/(app)/cases/[id]/notizen/page.tsx
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useParams } from "next/navigation";
|
||||||
|
import { NotesList } from "@/components/notes/NotesList";
|
||||||
|
|
||||||
|
export default function NotizenPage() {
|
||||||
|
const { id } = useParams<{ id: string }>();
|
||||||
|
|
||||||
|
return <NotesList parentType="case" parentId={id} />;
|
||||||
|
}
|
||||||
@@ -1,341 +1,10 @@
|
|||||||
"use client";
|
import { redirect } from "next/navigation";
|
||||||
|
|
||||||
import { useQuery } from "@tanstack/react-query";
|
export default async function CaseDetailPage({
|
||||||
import { useParams } from "next/navigation";
|
params,
|
||||||
import { api } from "@/lib/api";
|
}: {
|
||||||
import type { Case, CaseEvent, Party, Deadline, Document } from "@/lib/types";
|
params: Promise<{ id: string }>;
|
||||||
import { CaseTimeline } from "@/components/cases/CaseTimeline";
|
}) {
|
||||||
import { PartyList } from "@/components/cases/PartyList";
|
const { id } = await params;
|
||||||
import {
|
redirect(`/cases/${id}/verlauf`);
|
||||||
ArrowLeft,
|
|
||||||
Clock,
|
|
||||||
FileText,
|
|
||||||
Users,
|
|
||||||
Activity,
|
|
||||||
AlertTriangle,
|
|
||||||
} from "lucide-react";
|
|
||||||
import { format } from "date-fns";
|
|
||||||
import { de } from "date-fns/locale";
|
|
||||||
import Link from "next/link";
|
|
||||||
import { useState } from "react";
|
|
||||||
import { Skeleton } from "@/components/ui/Skeleton";
|
|
||||||
|
|
||||||
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 STATUS_LABEL: Record<string, string> = {
|
|
||||||
active: "Aktiv",
|
|
||||||
pending: "Anhängig",
|
|
||||||
closed: "Geschlossen",
|
|
||||||
archived: "Archiviert",
|
|
||||||
};
|
|
||||||
|
|
||||||
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"];
|
|
||||||
|
|
||||||
function CaseDetailSkeleton() {
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<Skeleton className="h-4 w-28" />
|
|
||||||
<div className="mt-4 flex items-start justify-between">
|
|
||||||
<div>
|
|
||||||
<Skeleton className="h-6 w-48" />
|
|
||||||
<Skeleton className="mt-2 h-4 w-64" />
|
|
||||||
</div>
|
|
||||||
<div className="space-y-1">
|
|
||||||
<Skeleton className="h-3 w-24" />
|
|
||||||
<Skeleton className="h-3 w-24" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="mt-6 flex gap-4 border-b border-neutral-200 pb-2.5">
|
|
||||||
{[1, 2, 3, 4].map((i) => (
|
|
||||||
<Skeleton key={i} className="h-4 w-20" />
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
<div className="mt-6 space-y-3">
|
|
||||||
{[1, 2, 3].map((i) => (
|
|
||||||
<Skeleton key={i} className="h-14 rounded-md" />
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function CaseDetailPage() {
|
|
||||||
const { id } = useParams<{ id: string }>();
|
|
||||||
const [activeTab, setActiveTab] = useState<TabKey>("timeline");
|
|
||||||
|
|
||||||
const {
|
|
||||||
data: caseDetail,
|
|
||||||
isLoading,
|
|
||||||
error,
|
|
||||||
} = 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 <CaseDetailSkeleton />;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (error || !caseDetail) {
|
|
||||||
return (
|
|
||||||
<div className="py-12 text-center">
|
|
||||||
<div className="mx-auto mb-3 w-fit rounded-xl bg-red-50 p-3">
|
|
||||||
<AlertTriangle className="h-6 w-6 text-red-500" />
|
|
||||||
</div>
|
|
||||||
<p className="text-sm font-medium text-neutral-900">
|
|
||||||
Akte nicht gefunden
|
|
||||||
</p>
|
|
||||||
<p className="mt-1 text-sm text-neutral-500">
|
|
||||||
Die Akte existiert nicht oder Sie haben keine Berechtigung.
|
|
||||||
</p>
|
|
||||||
<Link
|
|
||||||
href="/cases"
|
|
||||||
className="mt-4 inline-flex items-center gap-1 text-sm text-neutral-500 transition-colors hover:text-neutral-700"
|
|
||||||
>
|
|
||||||
<ArrowLeft className="h-3.5 w-3.5" />
|
|
||||||
Zurück zu Akten
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const deadlines = Array.isArray(deadlinesData?.deadlines) ? deadlinesData.deadlines : [];
|
|
||||||
const documents = Array.isArray(documentsData) ? documentsData : [];
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="animate-fade-in">
|
|
||||||
<Link
|
|
||||||
href="/cases"
|
|
||||||
className="mb-4 inline-flex items-center gap-1 text-sm text-neutral-500 transition-colors hover:text-neutral-700"
|
|
||||||
>
|
|
||||||
<ArrowLeft className="h-3.5 w-3.5" />
|
|
||||||
Zurück zu Akten
|
|
||||||
</Link>
|
|
||||||
|
|
||||||
<div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
|
|
||||||
<div>
|
|
||||||
<div className="flex flex-wrap 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"}`}
|
|
||||||
>
|
|
||||||
{STATUS_LABEL[caseDetail.status] ?? caseDetail.status}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="mt-1 flex flex-wrap gap-x-4 gap-y-1 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-1 overflow-x-auto sm:gap-4">
|
|
||||||
{TABS.map((tab) => (
|
|
||||||
<button
|
|
||||||
key={tab.key}
|
|
||||||
onClick={() => setActiveTab(tab.key)}
|
|
||||||
className={`inline-flex shrink-0 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" && Array.isArray(caseDetail.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={Array.isArray(caseDetail.recent_events) ? caseDetail.recent_events : []} />
|
|
||||||
)}
|
|
||||||
|
|
||||||
{activeTab === "deadlines" && (
|
|
||||||
<DeadlinesList deadlines={deadlines} />
|
|
||||||
)}
|
|
||||||
|
|
||||||
{activeTab === "documents" && (
|
|
||||||
<DocumentsList documents={documents} />
|
|
||||||
)}
|
|
||||||
|
|
||||||
{activeTab === "parties" && (
|
|
||||||
<PartyList caseId={id} parties={Array.isArray(caseDetail.parties) ? caseDetail.parties : []} />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function DeadlinesList({ deadlines }: { deadlines: Deadline[] }) {
|
|
||||||
if (deadlines.length === 0) {
|
|
||||||
return (
|
|
||||||
<div className="flex flex-col items-center py-8 text-center">
|
|
||||||
<div className="rounded-xl bg-neutral-100 p-3">
|
|
||||||
<Clock className="h-5 w-5 text-neutral-400" />
|
|
||||||
</div>
|
|
||||||
<p className="mt-2 text-sm text-neutral-500">
|
|
||||||
Keine Fristen vorhanden.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
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",
|
|
||||||
};
|
|
||||||
|
|
||||||
const DEADLINE_STATUS_LABEL: Record<string, string> = {
|
|
||||||
pending: "Offen",
|
|
||||||
completed: "Erledigt",
|
|
||||||
overdue: "Überfällig",
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="space-y-2">
|
|
||||||
{deadlines.map((d) => (
|
|
||||||
<div
|
|
||||||
key={d.id}
|
|
||||||
className="flex flex-col gap-2 rounded-md border border-neutral-200 bg-white px-4 py-3 sm:flex-row sm:items-center sm:justify-between"
|
|
||||||
>
|
|
||||||
<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"}`}
|
|
||||||
>
|
|
||||||
{DEADLINE_STATUS_LABEL[d.status] ?? d.status}
|
|
||||||
</span>
|
|
||||||
<span className="whitespace-nowrap 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 (
|
|
||||||
<div className="flex flex-col items-center py-8 text-center">
|
|
||||||
<div className="rounded-xl bg-neutral-100 p-3">
|
|
||||||
<FileText className="h-5 w-5 text-neutral-400" />
|
|
||||||
</div>
|
|
||||||
<p className="mt-2 text-sm text-neutral-500">
|
|
||||||
Keine Dokumente vorhanden.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
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 transition-colors hover:text-neutral-700"
|
|
||||||
>
|
|
||||||
Herunterladen
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|||||||
35
frontend/src/app/(app)/cases/[id]/parteien/page.tsx
Normal file
35
frontend/src/app/(app)/cases/[id]/parteien/page.tsx
Normal file
@@ -0,0 +1,35 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useQuery } from "@tanstack/react-query";
|
||||||
|
import { useParams } from "next/navigation";
|
||||||
|
import { api } from "@/lib/api";
|
||||||
|
import type { Case, Party } from "@/lib/types";
|
||||||
|
import { PartyList } from "@/components/cases/PartyList";
|
||||||
|
import { Loader2 } from "lucide-react";
|
||||||
|
|
||||||
|
interface CaseDetail extends Case {
|
||||||
|
parties: Party[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function ParteienPage() {
|
||||||
|
const { id } = useParams<{ id: string }>();
|
||||||
|
|
||||||
|
const { data: caseDetail, isLoading } = useQuery({
|
||||||
|
queryKey: ["case", id],
|
||||||
|
queryFn: () => api.get<CaseDetail>(`/cases/${id}`),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (isLoading) {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center justify-center py-8">
|
||||||
|
<Loader2 className="h-5 w-5 animate-spin text-neutral-400" />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const parties = Array.isArray(caseDetail?.parties)
|
||||||
|
? caseDetail.parties
|
||||||
|
: [];
|
||||||
|
|
||||||
|
return <PartyList caseId={id} parties={parties} />;
|
||||||
|
}
|
||||||
35
frontend/src/app/(app)/cases/[id]/verlauf/page.tsx
Normal file
35
frontend/src/app/(app)/cases/[id]/verlauf/page.tsx
Normal file
@@ -0,0 +1,35 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useQuery } from "@tanstack/react-query";
|
||||||
|
import { useParams } from "next/navigation";
|
||||||
|
import { api } from "@/lib/api";
|
||||||
|
import type { Case, CaseEvent } from "@/lib/types";
|
||||||
|
import { CaseTimeline } from "@/components/cases/CaseTimeline";
|
||||||
|
import { Loader2 } from "lucide-react";
|
||||||
|
|
||||||
|
interface CaseDetail extends Case {
|
||||||
|
recent_events: CaseEvent[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function VerlaufPage() {
|
||||||
|
const { id } = useParams<{ id: string }>();
|
||||||
|
|
||||||
|
const { data: caseDetail, isLoading } = useQuery({
|
||||||
|
queryKey: ["case", id],
|
||||||
|
queryFn: () => api.get<CaseDetail>(`/cases/${id}`),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (isLoading) {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center justify-center py-8">
|
||||||
|
<Loader2 className="h-5 w-5 animate-spin text-neutral-400" />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const events = Array.isArray(caseDetail?.recent_events)
|
||||||
|
? caseDetail.recent_events
|
||||||
|
: [];
|
||||||
|
|
||||||
|
return <CaseTimeline events={events} />;
|
||||||
|
}
|
||||||
@@ -176,6 +176,19 @@ export interface CalDAVSyncResponse {
|
|||||||
last_sync_at?: null;
|
last_sync_at?: null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export interface Note {
|
||||||
|
id: string;
|
||||||
|
tenant_id: string;
|
||||||
|
case_id?: string;
|
||||||
|
deadline_id?: string;
|
||||||
|
appointment_id?: string;
|
||||||
|
case_event_id?: string;
|
||||||
|
content: string;
|
||||||
|
created_by?: string;
|
||||||
|
created_at: string;
|
||||||
|
updated_at: string;
|
||||||
|
}
|
||||||
|
|
||||||
export interface ApiError {
|
export interface ApiError {
|
||||||
error: string;
|
error: string;
|
||||||
status: number;
|
status: number;
|
||||||
|
|||||||
Reference in New Issue
Block a user