feat: add document management frontend (Phase 2N)

- DocumentUpload: dropzone with multi-file support, upload via
  POST /api/cases/{id}/documents, progress feedback with toast
- DocumentList: type badges, file size, upload date, download links,
  delete with inline confirmation
- Integrated as Dokumente tab in case detail page with count badge
- Eagerly fetches document count for tab badge display

frontend/src/app/(app)/cases/[id]/page.tsx

@@ -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>
-  );
-}

frontend/src/app/(app)/termine/page.tsx

@@ -1,99 +0,0 @@
-"use client";
-
-import { AppointmentList } from "@/components/appointments/AppointmentList";
-import { AppointmentCalendar } from "@/components/appointments/AppointmentCalendar";
-import { AppointmentModal } from "@/components/appointments/AppointmentModal";
-import { useQuery } from "@tanstack/react-query";
-import { api } from "@/lib/api";
-import type { Appointment } from "@/lib/types";
-import { Calendar, List, Plus } from "lucide-react";
-import { useState } from "react";
-
-type ViewMode = "list" | "calendar";
-
-export default function TerminePage() {
-  const [view, setView] = useState<ViewMode>("list");
-  const [modalOpen, setModalOpen] = useState(false);
-  const [editingAppointment, setEditingAppointment] = useState<Appointment | null>(null);
-
-  const { data: appointments } = useQuery({
-    queryKey: ["appointments"],
-    queryFn: () => api.get<Appointment[]>("/api/appointments"),
-  });
-
-  function handleEdit(appointment: Appointment) {
-    setEditingAppointment(appointment);
-    setModalOpen(true);
-  }
-
-  function handleCreate() {
-    setEditingAppointment(null);
-    setModalOpen(true);
-  }
-
-  function handleClose() {
-    setModalOpen(false);
-    setEditingAppointment(null);
-  }
-
-  return (
-    <div className="space-y-4">
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-lg font-semibold text-neutral-900">Termine</h1>
-          <p className="mt-0.5 text-sm text-neutral-500">
-            Alle Termine im Uberblick
-          </p>
-        </div>
-        <div className="flex items-center gap-2">
-          <button
-            onClick={handleCreate}
-            className="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-3.5 w-3.5" />
-            Neuer Termin
-          </button>
-          <div className="flex rounded-md border border-neutral-200 bg-white">
-            <button
-              onClick={() => setView("list")}
-              className={`flex items-center gap-1 rounded-l-md px-2.5 py-1.5 text-sm transition-colors ${
-                view === "list"
-                  ? "bg-neutral-100 font-medium text-neutral-900"
-                  : "text-neutral-500 hover:text-neutral-700"
-              }`}
-            >
-              <List className="h-3.5 w-3.5" />
-              Liste
-            </button>
-            <button
-              onClick={() => setView("calendar")}
-              className={`flex items-center gap-1 rounded-r-md px-2.5 py-1.5 text-sm transition-colors ${
-                view === "calendar"
-                  ? "bg-neutral-100 font-medium text-neutral-900"
-                  : "text-neutral-500 hover:text-neutral-700"
-              }`}
-            >
-              <Calendar className="h-3.5 w-3.5" />
-              Kalender
-            </button>
-          </div>
-        </div>
-      </div>
-
-      {view === "list" ? (
-        <AppointmentList onEdit={handleEdit} />
-      ) : (
-        <AppointmentCalendar
-          appointments={appointments || []}
-          onAppointmentClick={handleEdit}
-        />
-      )}
-
-      <AppointmentModal
-        open={modalOpen}
-        onClose={handleClose}
-        appointment={editingAppointment}
-      />
-    </div>
-  );
-}

frontend/src/components/appointments/AppointmentCalendar.tsx

@@ -1,160 +0,0 @@
-"use client";
-
-import type { Appointment } from "@/lib/types";
-import {
-  format,
-  startOfMonth,
-  endOfMonth,
-  startOfWeek,
-  endOfWeek,
-  eachDayOfInterval,
-  isSameMonth,
-  isToday,
-  parseISO,
-  addMonths,
-  subMonths,
-} from "date-fns";
-import { de } from "date-fns/locale";
-import { ChevronLeft, ChevronRight } from "lucide-react";
-import { useState, useMemo } from "react";
-
-const TYPE_DOT_COLORS: Record<string, string> = {
-  hearing: "bg-blue-500",
-  meeting: "bg-violet-500",
-  consultation: "bg-emerald-500",
-  deadline_hearing: "bg-amber-500",
-  other: "bg-neutral-400",
-};
-
-interface AppointmentCalendarProps {
-  appointments: Appointment[];
-  onDayClick?: (date: string) => void;
-  onAppointmentClick?: (appointment: Appointment) => void;
-}
-
-export function AppointmentCalendar({
-  appointments,
-  onDayClick,
-  onAppointmentClick,
-}: AppointmentCalendarProps) {
-  const [currentMonth, setCurrentMonth] = useState(new Date());
-
-  const monthStart = startOfMonth(currentMonth);
-  const monthEnd = endOfMonth(currentMonth);
-  const calStart = startOfWeek(monthStart, { weekStartsOn: 1 });
-  const calEnd = endOfWeek(monthEnd, { weekStartsOn: 1 });
-  const days = eachDayOfInterval({ start: calStart, end: calEnd });
-
-  const appointmentsByDay = useMemo(() => {
-    const map = new Map<string, Appointment[]>();
-    for (const a of appointments) {
-      const key = a.start_at.slice(0, 10);
-      const existing = map.get(key) || [];
-      existing.push(a);
-      map.set(key, existing);
-    }
-    return map;
-  }, [appointments]);
-
-  const weekDays = ["Mo", "Di", "Mi", "Do", "Fr", "Sa", "So"];
-
-  return (
-    <div className="rounded-lg border border-neutral-200 bg-white">
-      {/* Header */}
-      <div className="flex items-center justify-between border-b border-neutral-200 px-4 py-3">
-        <button
-          onClick={() => setCurrentMonth(subMonths(currentMonth, 1))}
-          className="rounded-md p-1 text-neutral-400 hover:bg-neutral-100 hover:text-neutral-600"
-        >
-          <ChevronLeft className="h-4 w-4" />
-        </button>
-        <span className="text-sm font-medium text-neutral-900">
-          {format(currentMonth, "MMMM yyyy", { locale: de })}
-        </span>
-        <button
-          onClick={() => setCurrentMonth(addMonths(currentMonth, 1))}
-          className="rounded-md p-1 text-neutral-400 hover:bg-neutral-100 hover:text-neutral-600"
-        >
-          <ChevronRight className="h-4 w-4" />
-        </button>
-      </div>
-
-      {/* Weekday labels */}
-      <div className="grid grid-cols-7 border-b border-neutral-100">
-        {weekDays.map((d) => (
-          <div key={d} className="px-2 py-2 text-center text-xs font-medium text-neutral-400">
-            {d}
-          </div>
-        ))}
-      </div>
-
-      {/* Days grid */}
-      <div className="grid grid-cols-7">
-        {days.map((day, i) => {
-          const key = format(day, "yyyy-MM-dd");
-          const dayAppointments = appointmentsByDay.get(key) || [];
-          const inMonth = isSameMonth(day, currentMonth);
-          const today = isToday(day);
-
-          return (
-            <div
-              key={i}
-              onClick={() => onDayClick?.(key)}
-              className={`min-h-[5rem] cursor-pointer border-b border-r border-neutral-100 p-1.5 transition-colors hover:bg-neutral-50 ${
-                !inMonth ? "bg-neutral-50/50" : ""
-              }`}
-            >
-              <div
-                className={`mb-1 text-right text-xs ${
-                  today
-                    ? "font-bold text-neutral-900"
-                    : inMonth
-                      ? "text-neutral-600"
-                      : "text-neutral-300"
-                }`}
-              >
-                {today ? (
-                  <span className="inline-flex h-5 w-5 items-center justify-center rounded-full bg-neutral-900 text-white">
-                    {format(day, "d")}
-                  </span>
-                ) : (
-                  format(day, "d")
-                )}
-              </div>
-              <div className="space-y-0.5">
-                {dayAppointments.slice(0, 3).map((appt) => {
-                  const dotColor =
-                    TYPE_DOT_COLORS[appt.appointment_type ?? "other"] ?? TYPE_DOT_COLORS.other;
-                  return (
-                    <div
-                      key={appt.id}
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        onAppointmentClick?.(appt);
-                      }}
-                      className="flex items-center gap-1 truncate rounded px-0.5 hover:bg-neutral-100"
-                      title={`${format(parseISO(appt.start_at), "HH:mm")} ${appt.title}`}
-                    >
-                      <div className={`h-1.5 w-1.5 shrink-0 rounded-full ${dotColor}`} />
-                      <span className="truncate text-[10px] text-neutral-700">
-                        <span className="font-medium">
-                          {format(parseISO(appt.start_at), "HH:mm")}
-                        </span>{" "}
-                        {appt.title}
-                      </span>
-                    </div>
-                  );
-                })}
-                {dayAppointments.length > 3 && (
-                  <div className="text-[10px] text-neutral-400">
-                    +{dayAppointments.length - 3} mehr
-                  </div>
-                )}
-              </div>
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-}

frontend/src/components/appointments/AppointmentList.tsx

@@ -1,265 +0,0 @@
-"use client";
-
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import { api } from "@/lib/api";
-import type { Appointment, Case } from "@/lib/types";
-import { format, parseISO, isToday, isTomorrow, isThisWeek, isPast } from "date-fns";
-import { de } from "date-fns/locale";
-import { Calendar, Filter, MapPin, Trash2 } from "lucide-react";
-import { toast } from "sonner";
-import { useState, useMemo } from "react";
-
-const TYPE_LABELS: Record<string, string> = {
-  hearing: "Verhandlung",
-  meeting: "Besprechung",
-  consultation: "Beratung",
-  deadline_hearing: "Fristanhorung",
-  other: "Sonstiges",
-};
-
-const TYPE_COLORS: Record<string, string> = {
-  hearing: "bg-blue-100 text-blue-700",
-  meeting: "bg-violet-100 text-violet-700",
-  consultation: "bg-emerald-100 text-emerald-700",
-  deadline_hearing: "bg-amber-100 text-amber-700",
-  other: "bg-neutral-100 text-neutral-600",
-};
-
-interface AppointmentListProps {
-  onEdit: (appointment: Appointment) => void;
-}
-
-function groupByDate(appointments: Appointment[]): Map<string, Appointment[]> {
-  const groups = new Map<string, Appointment[]>();
-  for (const a of appointments) {
-    const key = a.start_at.slice(0, 10);
-    const group = groups.get(key) || [];
-    group.push(a);
-    groups.set(key, group);
-  }
-  return groups;
-}
-
-function formatDateLabel(dateStr: string): string {
-  const d = parseISO(dateStr);
-  if (isToday(d)) return "Heute";
-  if (isTomorrow(d)) return "Morgen";
-  return format(d, "EEEE, d. MMMM yyyy", { locale: de });
-}
-
-export function AppointmentList({ onEdit }: AppointmentListProps) {
-  const queryClient = useQueryClient();
-  const [caseFilter, setCaseFilter] = useState("all");
-  const [typeFilter, setTypeFilter] = useState("all");
-
-  const { data: appointments, isLoading } = useQuery({
-    queryKey: ["appointments"],
-    queryFn: () => api.get<Appointment[]>("/api/appointments"),
-  });
-
-  const { data: cases } = useQuery({
-    queryKey: ["cases"],
-    queryFn: () => api.get<{ cases: Case[]; total: number }>("/api/cases"),
-  });
-
-  const deleteMutation = useMutation({
-    mutationFn: (id: string) => api.delete(`/api/appointments/${id}`),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["appointments"] });
-      toast.success("Termin geloscht");
-    },
-    onError: () => toast.error("Fehler beim Loschen"),
-  });
-
-  const caseMap = useMemo(() => {
-    const map = new Map<string, Case>();
-    cases?.cases?.forEach((c) => map.set(c.id, c));
-    return map;
-  }, [cases]);
-
-  const filtered = useMemo(() => {
-    if (!appointments) return [];
-    return appointments
-      .filter((a) => {
-        if (caseFilter !== "all" && a.case_id !== caseFilter) return false;
-        if (typeFilter !== "all" && a.appointment_type !== typeFilter) return false;
-        return true;
-      })
-      .sort((a, b) => a.start_at.localeCompare(b.start_at));
-  }, [appointments, caseFilter, typeFilter]);
-
-  const grouped = useMemo(() => groupByDate(filtered), [filtered]);
-
-  const counts = useMemo(() => {
-    if (!appointments) return { today: 0, thisWeek: 0, total: 0 };
-    let today = 0;
-    let thisWeek = 0;
-    for (const a of appointments) {
-      const d = parseISO(a.start_at);
-      if (isToday(d)) today++;
-      if (isThisWeek(d, { weekStartsOn: 1 })) thisWeek++;
-    }
-    return { today, thisWeek, total: appointments.length };
-  }, [appointments]);
-
-  if (isLoading) {
-    return (
-      <div className="space-y-3">
-        {[1, 2, 3, 4].map((i) => (
-          <div key={i} className="h-16 animate-pulse rounded-lg bg-neutral-100" />
-        ))}
-      </div>
-    );
-  }
-
-  return (
-    <div className="space-y-4">
-      {/* Summary cards */}
-      <div className="grid grid-cols-3 gap-3">
-        <div className="rounded-lg border border-neutral-200 bg-white p-3">
-          <div className="text-2xl font-semibold text-neutral-900">{counts.today}</div>
-          <div className="text-xs text-neutral-500">Heute</div>
-        </div>
-        <div className="rounded-lg border border-neutral-200 bg-white p-3">
-          <div className="text-2xl font-semibold text-neutral-900">{counts.thisWeek}</div>
-          <div className="text-xs text-neutral-500">Diese Woche</div>
-        </div>
-        <div className="rounded-lg border border-neutral-200 bg-white p-3">
-          <div className="text-2xl font-semibold text-neutral-900">{counts.total}</div>
-          <div className="text-xs text-neutral-500">Gesamt</div>
-        </div>
-      </div>
-
-      {/* Filters */}
-      <div className="flex items-center gap-3">
-        <div className="flex items-center gap-1.5 text-sm text-neutral-500">
-          <Filter className="h-3.5 w-3.5" />
-          <span>Filter:</span>
-        </div>
-        <select
-          value={typeFilter}
-          onChange={(e) => setTypeFilter(e.target.value)}
-          className="rounded-md border border-neutral-200 bg-white px-2.5 py-1 text-sm text-neutral-700"
-        >
-          <option value="all">Alle Typen</option>
-          {Object.entries(TYPE_LABELS).map(([value, label]) => (
-            <option key={value} value={value}>
-              {label}
-            </option>
-          ))}
-        </select>
-        {cases?.cases && cases.cases.length > 0 && (
-          <select
-            value={caseFilter}
-            onChange={(e) => setCaseFilter(e.target.value)}
-            className="rounded-md border border-neutral-200 bg-white px-2.5 py-1 text-sm text-neutral-700"
-          >
-            <option value="all">Alle Akten</option>
-            {cases.cases.map((c) => (
-              <option key={c.id} value={c.id}>
-                {c.case_number} — {c.title}
-              </option>
-            ))}
-          </select>
-        )}
-      </div>
-
-      {/* Grouped list */}
-      {filtered.length === 0 ? (
-        <div className="rounded-lg border border-neutral-200 bg-white p-8 text-center">
-          <Calendar className="mx-auto h-8 w-8 text-neutral-300" />
-          <p className="mt-2 text-sm text-neutral-500">Keine Termine gefunden</p>
-        </div>
-      ) : (
-        <div className="space-y-4">
-          {Array.from(grouped.entries()).map(([dateKey, dayAppointments]) => {
-            const dateIsPast = isPast(parseISO(dateKey + "T23:59:59"));
-            return (
-              <div key={dateKey}>
-                <div className={`mb-2 text-xs font-medium uppercase tracking-wider ${dateIsPast ? "text-neutral-400" : "text-neutral-600"}`}>
-                  {formatDateLabel(dateKey)}
-                </div>
-                <div className="space-y-1.5">
-                  {dayAppointments.map((appt) => {
-                    const caseInfo = appt.case_id ? caseMap.get(appt.case_id) : null;
-                    const typeBadge = appt.appointment_type
-                      ? TYPE_COLORS[appt.appointment_type] ?? TYPE_COLORS.other
-                      : null;
-                    const typeLabel = appt.appointment_type
-                      ? TYPE_LABELS[appt.appointment_type] ?? appt.appointment_type
-                      : null;
-
-                    return (
-                      <div
-                        key={appt.id}
-                        onClick={() => onEdit(appt)}
-                        className={`flex cursor-pointer items-start gap-3 rounded-lg border px-4 py-3 transition-colors hover:bg-neutral-50 ${
-                          dateIsPast
-                            ? "border-neutral-150 bg-neutral-50/50"
-                            : "border-neutral-200 bg-white"
-                        }`}
-                      >
-                        <div className="shrink-0 pt-0.5 text-center">
-                          <div className="text-xs font-medium text-neutral-900">
-                            {format(parseISO(appt.start_at), "HH:mm")}
-                          </div>
-                          {appt.end_at && (
-                            <div className="text-[10px] text-neutral-400">
-                              {format(parseISO(appt.end_at), "HH:mm")}
-                            </div>
-                          )}
-                        </div>
-                        <div className="min-w-0 flex-1">
-                          <div className="flex items-center gap-2">
-                            <span className={`truncate text-sm font-medium ${dateIsPast ? "text-neutral-500" : "text-neutral-900"}`}>
-                              {appt.title}
-                            </span>
-                            {typeBadge && typeLabel && (
-                              <span className={`shrink-0 rounded px-1.5 py-0.5 text-xs font-medium ${typeBadge}`}>
-                                {typeLabel}
-                              </span>
-                            )}
-                          </div>
-                          <div className="mt-0.5 flex items-center gap-2 text-xs text-neutral-500">
-                            {appt.location && (
-                              <span className="flex items-center gap-0.5">
-                                <MapPin className="h-3 w-3" />
-                                {appt.location}
-                              </span>
-                            )}
-                            {appt.location && caseInfo && <span>·</span>}
-                            {caseInfo && (
-                              <span className="truncate">
-                                {caseInfo.case_number} — {caseInfo.title}
-                              </span>
-                            )}
-                          </div>
-                          {appt.description && (
-                            <p className="mt-1 truncate text-xs text-neutral-400">
-                              {appt.description}
-                            </p>
-                          )}
-                        </div>
-                        <button
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            deleteMutation.mutate(appt.id);
-                          }}
-                          disabled={deleteMutation.isPending}
-                          title="Loschen"
-                          className="shrink-0 rounded-md p-1.5 text-neutral-300 hover:bg-red-50 hover:text-red-500"
-                        >
-                          <Trash2 className="h-3.5 w-3.5" />
-                        </button>
-                      </div>
-                    );
-                  })}
-                </div>
-              </div>
-            );
-          })}
-        </div>
-      )}
-    </div>
-  );
-}

frontend/src/components/appointments/AppointmentModal.tsx

@@ -1,280 +0,0 @@
-"use client";
-
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { api } from "@/lib/api";
-import type { Appointment, Case } from "@/lib/types";
-import { format, parseISO } from "date-fns";
-import { X } from "lucide-react";
-import { toast } from "sonner";
-import { useEffect, useState } from "react";
-
-const APPOINTMENT_TYPES = [
-  { value: "hearing", label: "Verhandlung" },
-  { value: "meeting", label: "Besprechung" },
-  { value: "consultation", label: "Beratung" },
-  { value: "deadline_hearing", label: "Fristanhorung" },
-  { value: "other", label: "Sonstiges" },
-];
-
-interface AppointmentModalProps {
-  open: boolean;
-  onClose: () => void;
-  appointment?: Appointment | null;
-}
-
-function toLocalDatetime(iso: string): string {
-  const d = parseISO(iso);
-  return format(d, "yyyy-MM-dd'T'HH:mm");
-}
-
-export function AppointmentModal({ open, onClose, appointment }: AppointmentModalProps) {
-  const queryClient = useQueryClient();
-  const isEdit = !!appointment;
-
-  const [title, setTitle] = useState("");
-  const [description, setDescription] = useState("");
-  const [startAt, setStartAt] = useState("");
-  const [endAt, setEndAt] = useState("");
-  const [location, setLocation] = useState("");
-  const [appointmentType, setAppointmentType] = useState("");
-  const [caseId, setCaseId] = useState("");
-
-  const { data: cases } = useQuery({
-    queryKey: ["cases"],
-    queryFn: () => api.get<{ cases: Case[]; total: number }>("/api/cases"),
-  });
-
-  useEffect(() => {
-    if (appointment) {
-      setTitle(appointment.title);
-      setDescription(appointment.description ?? "");
-      setStartAt(toLocalDatetime(appointment.start_at));
-      setEndAt(appointment.end_at ? toLocalDatetime(appointment.end_at) : "");
-      setLocation(appointment.location ?? "");
-      setAppointmentType(appointment.appointment_type ?? "");
-      setCaseId(appointment.case_id ?? "");
-    } else {
-      setTitle("");
-      setDescription("");
-      setStartAt("");
-      setEndAt("");
-      setLocation("");
-      setAppointmentType("");
-      setCaseId("");
-    }
-  }, [appointment]);
-
-  const createMutation = useMutation({
-    mutationFn: (body: Record<string, unknown>) =>
-      api.post<Appointment>("/api/appointments", body),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["appointments"] });
-      queryClient.invalidateQueries({ queryKey: ["dashboard"] });
-      toast.success("Termin erstellt");
-      onClose();
-    },
-    onError: () => toast.error("Fehler beim Erstellen des Termins"),
-  });
-
-  const updateMutation = useMutation({
-    mutationFn: (body: Record<string, unknown>) =>
-      api.put<Appointment>(`/api/appointments/${appointment!.id}`, body),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["appointments"] });
-      queryClient.invalidateQueries({ queryKey: ["dashboard"] });
-      toast.success("Termin aktualisiert");
-      onClose();
-    },
-    onError: () => toast.error("Fehler beim Aktualisieren des Termins"),
-  });
-
-  const deleteMutation = useMutation({
-    mutationFn: () => api.delete(`/api/appointments/${appointment!.id}`),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["appointments"] });
-      queryClient.invalidateQueries({ queryKey: ["dashboard"] });
-      toast.success("Termin geloscht");
-      onClose();
-    },
-    onError: () => toast.error("Fehler beim Loschen des Termins"),
-  });
-
-  function handleSubmit(e: React.FormEvent) {
-    e.preventDefault();
-    if (!title.trim() || !startAt) return;
-
-    const body: Record<string, unknown> = {
-      title: title.trim(),
-      start_at: new Date(startAt).toISOString(),
-    };
-    if (description.trim()) body.description = description.trim();
-    if (endAt) body.end_at = new Date(endAt).toISOString();
-    if (location.trim()) body.location = location.trim();
-    if (appointmentType) body.appointment_type = appointmentType;
-    if (caseId) body.case_id = caseId;
-
-    if (isEdit) {
-      updateMutation.mutate(body);
-    } else {
-      createMutation.mutate(body);
-    }
-  }
-
-  const isPending = createMutation.isPending || updateMutation.isPending;
-
-  if (!open) return null;
-
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/30">
-      <div className="w-full max-w-lg rounded-lg border border-neutral-200 bg-white shadow-lg">
-        <div className="flex items-center justify-between border-b border-neutral-200 px-5 py-3">
-          <h2 className="text-sm font-semibold text-neutral-900">
-            {isEdit ? "Termin bearbeiten" : "Neuer Termin"}
-          </h2>
-          <button
-            onClick={onClose}
-            className="rounded-md p-1 text-neutral-400 hover:bg-neutral-100 hover:text-neutral-600"
-          >
-            <X className="h-4 w-4" />
-          </button>
-        </div>
-
-        <form onSubmit={handleSubmit} className="space-y-4 p-5">
-          <div>
-            <label className="mb-1 block text-xs font-medium text-neutral-600">
-              Titel *
-            </label>
-            <input
-              type="text"
-              value={title}
-              onChange={(e) => setTitle(e.target.value)}
-              required
-              className="w-full rounded-md border border-neutral-200 px-3 py-1.5 text-sm outline-none focus:border-neutral-400 focus:ring-1 focus:ring-neutral-400"
-              placeholder="z.B. Mundliche Verhandlung"
-            />
-          </div>
-
-          <div className="grid grid-cols-2 gap-3">
-            <div>
-              <label className="mb-1 block text-xs font-medium text-neutral-600">
-                Beginn *
-              </label>
-              <input
-                type="datetime-local"
-                value={startAt}
-                onChange={(e) => setStartAt(e.target.value)}
-                required
-                className="w-full rounded-md border border-neutral-200 px-3 py-1.5 text-sm outline-none focus:border-neutral-400 focus:ring-1 focus:ring-neutral-400"
-              />
-            </div>
-            <div>
-              <label className="mb-1 block text-xs font-medium text-neutral-600">
-                Ende
-              </label>
-              <input
-                type="datetime-local"
-                value={endAt}
-                onChange={(e) => setEndAt(e.target.value)}
-                className="w-full rounded-md border border-neutral-200 px-3 py-1.5 text-sm outline-none focus:border-neutral-400 focus:ring-1 focus:ring-neutral-400"
-              />
-            </div>
-          </div>
-
-          <div className="grid grid-cols-2 gap-3">
-            <div>
-              <label className="mb-1 block text-xs font-medium text-neutral-600">
-                Typ
-              </label>
-              <select
-                value={appointmentType}
-                onChange={(e) => setAppointmentType(e.target.value)}
-                className="w-full rounded-md border border-neutral-200 px-3 py-1.5 text-sm outline-none focus:border-neutral-400"
-              >
-                <option value="">Kein Typ</option>
-                {APPOINTMENT_TYPES.map((t) => (
-                  <option key={t.value} value={t.value}>
-                    {t.label}
-                  </option>
-                ))}
-              </select>
-            </div>
-            <div>
-              <label className="mb-1 block text-xs font-medium text-neutral-600">
-                Akte
-              </label>
-              <select
-                value={caseId}
-                onChange={(e) => setCaseId(e.target.value)}
-                className="w-full rounded-md border border-neutral-200 px-3 py-1.5 text-sm outline-none focus:border-neutral-400"
-              >
-                <option value="">Keine Akte</option>
-                {cases?.cases?.map((c) => (
-                  <option key={c.id} value={c.id}>
-                    {c.case_number} — {c.title}
-                  </option>
-                ))}
-              </select>
-            </div>
-          </div>
-
-          <div>
-            <label className="mb-1 block text-xs font-medium text-neutral-600">
-              Ort
-            </label>
-            <input
-              type="text"
-              value={location}
-              onChange={(e) => setLocation(e.target.value)}
-              className="w-full rounded-md border border-neutral-200 px-3 py-1.5 text-sm outline-none focus:border-neutral-400 focus:ring-1 focus:ring-neutral-400"
-              placeholder="z.B. UPC Munchen, Saal 3"
-            />
-          </div>
-
-          <div>
-            <label className="mb-1 block text-xs font-medium text-neutral-600">
-              Beschreibung
-            </label>
-            <textarea
-              value={description}
-              onChange={(e) => setDescription(e.target.value)}
-              rows={3}
-              className="w-full rounded-md border border-neutral-200 px-3 py-1.5 text-sm outline-none focus:border-neutral-400 focus:ring-1 focus:ring-neutral-400"
-              placeholder="Optionale Notizen zum Termin"
-            />
-          </div>
-
-          <div className="flex items-center justify-between pt-2">
-            <div>
-              {isEdit && (
-                <button
-                  type="button"
-                  onClick={() => deleteMutation.mutate()}
-                  disabled={deleteMutation.isPending}
-                  className="rounded-md px-3 py-1.5 text-sm text-red-600 hover:bg-red-50"
-                >
-                  Loschen
-                </button>
-              )}
-            </div>
-            <div className="flex items-center gap-2">
-              <button
-                type="button"
-                onClick={onClose}
-                className="rounded-md border border-neutral-200 bg-white px-3 py-1.5 text-sm text-neutral-700 hover:bg-neutral-50"
-              >
-                Abbrechen
-              </button>
-              <button
-                type="submit"
-                disabled={isPending || !title.trim() || !startAt}
-                className="rounded-md bg-neutral-900 px-3 py-1.5 text-sm font-medium text-white hover:bg-neutral-800 disabled:opacity-50"
-              >
-                {isPending ? "Speichern..." : isEdit ? "Aktualisieren" : "Erstellen"}
-              </button>
-            </div>
-          </div>
-        </form>
-      </div>
-    </div>
-  );
-}

frontend/src/components/documents/DocumentList.tsx

@@ -0,0 +1,144 @@
+"use client";
+
+import { useState } from "react";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { FileText, Download, Trash2, Loader2 } from "lucide-react";
+import { format } from "date-fns";
+import { de } from "date-fns/locale";
+import { toast } from "sonner";
+import { api } from "@/lib/api";
+import type { Document } from "@/lib/types";
+
+const DOC_TYPE_BADGE: Record<string, string> = {
+  schriftsatz: "bg-blue-50 text-blue-700",
+  beschluss: "bg-violet-50 text-violet-700",
+  urteil: "bg-emerald-50 text-emerald-700",
+  gutachten: "bg-amber-50 text-amber-700",
+  vertrag: "bg-cyan-50 text-cyan-700",
+  korrespondenz: "bg-neutral-100 text-neutral-600",
+};
+
+interface DocumentListProps {
+  documents: Document[];
+  caseId: string;
+}
+
+export function DocumentList({ documents, caseId }: DocumentListProps) {
+  const [deleteId, setDeleteId] = useState<string | null>(null);
+  const queryClient = useQueryClient();
+
+  const deleteMutation = useMutation({
+    mutationFn: (docId: string) => api.delete(`/documents/${docId}`),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["case-documents", caseId] });
+      queryClient.invalidateQueries({ queryKey: ["case", caseId] });
+      toast.success("Dokument geloescht");
+      setDeleteId(null);
+    },
+    onError: (err) => {
+      const msg =
+        err && typeof err === "object" && "error" in err
+          ? (err as { error: string }).error
+          : "Unbekannter Fehler";
+      toast.error(`Fehler beim Loeschen: ${msg}`);
+      setDeleteId(null);
+    },
+  });
+
+  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 min-w-0">
+            <FileText className="h-4 w-4 shrink-0 text-neutral-400" />
+            <div className="min-w-0">
+              <p className="truncate text-sm font-medium text-neutral-900">
+                {doc.title}
+              </p>
+              <div className="mt-0.5 flex flex-wrap items-center gap-2 text-xs text-neutral-400">
+                {doc.doc_type && (
+                  <span
+                    className={`rounded-full px-2 py-0.5 text-xs font-medium ${
+                      DOC_TYPE_BADGE[doc.doc_type.toLowerCase()] ??
+                      "bg-neutral-100 text-neutral-600"
+                    }`}
+                  >
+                    {doc.doc_type}
+                  </span>
+                )}
+                {doc.file_size != null && (
+                  <span>{formatFileSize(doc.file_size)}</span>
+                )}
+                <span>
+                  {format(new Date(doc.created_at), "d. MMM yyyy", {
+                    locale: de,
+                  })}
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-1 shrink-0 ml-3">
+            <a
+              href={`/api/documents/${doc.id}`}
+              className="rounded p-1.5 text-neutral-400 hover:bg-neutral-100 hover:text-neutral-600"
+              title="Herunterladen"
+            >
+              <Download className="h-4 w-4" />
+            </a>
+
+            {deleteId === doc.id ? (
+              <div className="flex items-center gap-1">
+                <button
+                  type="button"
+                  onClick={() => deleteMutation.mutate(doc.id)}
+                  disabled={deleteMutation.isPending}
+                  className="rounded px-2 py-1 text-xs font-medium text-red-600 hover:bg-red-50"
+                >
+                  {deleteMutation.isPending ? (
+                    <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                  ) : (
+                    "Loeschen"
+                  )}
+                </button>
+                <button
+                  type="button"
+                  onClick={() => setDeleteId(null)}
+                  className="rounded px-2 py-1 text-xs text-neutral-500 hover:bg-neutral-100"
+                >
+                  Abbrechen
+                </button>
+              </div>
+            ) : (
+              <button
+                type="button"
+                onClick={() => setDeleteId(doc.id)}
+                className="rounded p-1.5 text-neutral-400 hover:bg-neutral-100 hover:text-red-500"
+                title="Loeschen"
+              >
+                <Trash2 className="h-4 w-4" />
+              </button>
+            )}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function formatFileSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}

frontend/src/components/documents/DocumentUpload.tsx

@@ -0,0 +1,144 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import { useDropzone } from "react-dropzone";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { Upload, FileText, X, Loader2 } from "lucide-react";
+import { toast } from "sonner";
+import { api } from "@/lib/api";
+import type { Document } from "@/lib/types";
+
+interface DocumentUploadProps {
+  caseId: string;
+}
+
+export function DocumentUpload({ caseId }: DocumentUploadProps) {
+  const [files, setFiles] = useState<File[]>([]);
+  const queryClient = useQueryClient();
+
+  const uploadMutation = useMutation({
+    mutationFn: async (file: File) => {
+      const formData = new FormData();
+      formData.append("file", file);
+      formData.append("title", file.name);
+      return api.postFormData<Document>(`/cases/${caseId}/documents`, formData);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["case-documents", caseId] });
+      queryClient.invalidateQueries({ queryKey: ["case", caseId] });
+    },
+  });
+
+  const onDrop = useCallback((acceptedFiles: File[]) => {
+    setFiles((prev) => [...prev, ...acceptedFiles]);
+  }, []);
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    onDrop,
+    disabled: uploadMutation.isPending,
+  });
+
+  function removeFile(index: number) {
+    setFiles((prev) => prev.filter((_, i) => i !== index));
+  }
+
+  async function handleUpload() {
+    if (files.length === 0) return;
+
+    let successCount = 0;
+    for (const file of files) {
+      try {
+        await uploadMutation.mutateAsync(file);
+        successCount++;
+      } catch (err) {
+        const msg =
+          err && typeof err === "object" && "error" in err
+            ? (err as { error: string }).error
+            : file.name;
+        toast.error(`Fehler beim Hochladen: ${msg}`);
+      }
+    }
+
+    if (successCount > 0) {
+      toast.success(
+        successCount === 1
+          ? "Dokument hochgeladen"
+          : `${successCount} Dokumente hochgeladen`,
+      );
+      setFiles([]);
+    }
+  }
+
+  return (
+    <div className="space-y-3">
+      <div
+        {...getRootProps()}
+        className={`cursor-pointer rounded-md border-2 border-dashed px-6 py-6 text-center transition-colors ${
+          isDragActive
+            ? "border-neutral-500 bg-neutral-50"
+            : "border-neutral-300 hover:border-neutral-400"
+        } ${uploadMutation.isPending ? "pointer-events-none opacity-50" : ""}`}
+      >
+        <input {...getInputProps()} />
+        <Upload className="mx-auto h-6 w-6 text-neutral-400" />
+        <p className="mt-2 text-sm text-neutral-600">
+          Dateien hierher ziehen oder{" "}
+          <span className="font-medium text-neutral-900">durchsuchen</span>
+        </p>
+        <p className="mt-1 text-xs text-neutral-400">Max. 50 MB pro Datei</p>
+      </div>
+
+      {files.length > 0 && (
+        <div className="space-y-2">
+          {files.map((file, i) => (
+            <div
+              key={`${file.name}-${i}`}
+              className="flex items-center gap-3 rounded-md border border-neutral-200 bg-neutral-50 px-3 py-2"
+            >
+              <FileText className="h-4 w-4 shrink-0 text-neutral-500" />
+              <div className="min-w-0 flex-1">
+                <p className="truncate text-sm text-neutral-900">{file.name}</p>
+                <p className="text-xs text-neutral-400">
+                  {formatFileSize(file.size)}
+                </p>
+              </div>
+              <button
+                type="button"
+                onClick={() => removeFile(i)}
+                disabled={uploadMutation.isPending}
+                className="rounded p-1 text-neutral-400 hover:bg-neutral-200 hover:text-neutral-600"
+              >
+                <X className="h-3.5 w-3.5" />
+              </button>
+            </div>
+          ))}
+
+          <button
+            type="button"
+            onClick={handleUpload}
+            disabled={uploadMutation.isPending}
+            className="inline-flex items-center gap-2 rounded-md bg-neutral-900 px-3 py-1.5 text-sm font-medium text-white hover:bg-neutral-800 disabled:opacity-50"
+          >
+            {uploadMutation.isPending ? (
+              <>
+                <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                Hochladen...
+              </>
+            ) : (
+              <>
+                <Upload className="h-3.5 w-3.5" />
+                {files.length === 1 ? "Hochladen" : `${files.length} Dateien hochladen`}
+              </>
+            )}
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function formatFileSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}