9787450d91
Refactors the monolithic cases/[id]/page.tsx into Next.js nested routes with a shared layout for the case header and tab navigation bar. Route structure: - cases/[id]/layout.tsx — case header + tab bar (active tab from URL) - cases/[id]/page.tsx — redirects to ./verlauf - cases/[id]/verlauf/page.tsx — timeline tab - cases/[id]/fristen/page.tsx — deadlines tab - cases/[id]/dokumente/page.tsx — documents tab (with upload) - cases/[id]/parteien/page.tsx — parties tab - cases/[id]/notizen/page.tsx — notes tab (new, uses NotesList) New shared components: - Breadcrumb.tsx — reusable breadcrumb navigation - NotesList.tsx — reusable notes CRUD (inline create/edit/delete) - Note type added to types.ts Benefits: deep linking, browser back/forward, bookmarkable tabs.
36 lines
934 B
TypeScript
36 lines
934 B
TypeScript
"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} />;
|
|
}
|