feat: add document management frontend (Phase 2N)

This commit is contained in:
m
2026-03-25 14:04:28 +01:00
3 changed files with 300 additions and 43 deletions

View File

@@ -6,6 +6,8 @@ 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 { DocumentUpload } from "@/components/documents/DocumentUpload";
import { DocumentList } from "@/components/documents/DocumentList";
import { ArrowLeft, Clock, FileText, Users, Activity } from "lucide-react";
import { format } from "date-fns";
import { de } from "date-fns/locale";
@@ -55,7 +57,7 @@ export default function CaseDetailPage() {
const { data: documentsData } = useQuery({
queryKey: ["case-documents", id],
queryFn: () => api.get<Document[]>(`/cases/${id}/documents`),
enabled: activeTab === "documents",
enabled: activeTab === "documents" || activeTab === "timeline",
});
if (isLoading) {
@@ -147,6 +149,11 @@ export default function CaseDetailPage() {
{caseDetail.deadlines_count}
</span>
)}
{tab.key === "documents" && documents.length > 0 && (
<span className="ml-1 rounded-full bg-neutral-100 px-1.5 py-0.5 text-xs text-neutral-500">
{documents.length}
</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}
@@ -167,7 +174,10 @@ export default function CaseDetailPage() {
)}
{activeTab === "documents" && (
<DocumentsList documents={documents} />
<div className="space-y-6">
<DocumentUpload caseId={id} />
<DocumentList documents={documents} caseId={id} />
</div>
)}
{activeTab === "parties" && (
@@ -224,44 +234,3 @@ function DeadlinesList({ deadlines }: { deadlines: Deadline[] }) {
);
}
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>
);
}