feat: Phase C frontend detail pages for deadlines, appointments, events
- Deadline detail page (/fristen/[id]) with status badge, due date, case context, complete button, and notes - Appointment detail page (/termine/[id]) with datetime, location, type badge, case link, description, and notes - Case event detail page (/cases/[id]/ereignisse/[eventId]) with event type icon, description, metadata, and notes - Standalone deadline creation (/fristen/neu) with case dropdown - Standalone appointment creation (/termine/neu) with optional case - Reusable Breadcrumb component for navigation hierarchy - Reusable NotesList component with inline create/edit/delete - Added Note and RecentActivity types to lib/types.ts
This commit is contained in:
m
230
frontend/src/app/(app)/cases/[id]/ereignisse/[eventId]/page.tsx
Normal file
230
frontend/src/app/(app)/cases/[id]/ereignisse/[eventId]/page.tsx
Normal file
@@ -0,0 +1,230 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useQuery } from "@tanstack/react-query";
|
||||||
|
import { useParams } from "next/navigation";
|
||||||
|
import { api } from "@/lib/api";
|
||||||
|
import type { CaseEvent, Case } from "@/lib/types";
|
||||||
|
import { Breadcrumb } from "@/components/layout/Breadcrumb";
|
||||||
|
import { NotesList } from "@/components/notes/NotesList";
|
||||||
|
import { Skeleton } from "@/components/ui/Skeleton";
|
||||||
|
import { format, parseISO } from "date-fns";
|
||||||
|
import { de } from "date-fns/locale";
|
||||||
|
import {
|
||||||
|
AlertTriangle,
|
||||||
|
FileText,
|
||||||
|
Scale,
|
||||||
|
ArrowRightLeft,
|
||||||
|
Calendar,
|
||||||
|
MessageSquare,
|
||||||
|
Gavel,
|
||||||
|
Info,
|
||||||
|
} from "lucide-react";
|
||||||
|
import Link from "next/link";
|
||||||
|
|
||||||
|
const EVENT_TYPE_CONFIG: Record<
|
||||||
|
string,
|
||||||
|
{ label: string; icon: typeof Info; color: string }
|
||||||
|
> = {
|
||||||
|
status_changed: {
|
||||||
|
label: "Statusaenderung",
|
||||||
|
icon: ArrowRightLeft,
|
||||||
|
color: "bg-blue-50 text-blue-700",
|
||||||
|
},
|
||||||
|
deadline_created: {
|
||||||
|
label: "Frist erstellt",
|
||||||
|
icon: Calendar,
|
||||||
|
color: "bg-amber-50 text-amber-700",
|
||||||
|
},
|
||||||
|
deadline_completed: {
|
||||||
|
label: "Frist erledigt",
|
||||||
|
icon: Calendar,
|
||||||
|
color: "bg-emerald-50 text-emerald-700",
|
||||||
|
},
|
||||||
|
document_uploaded: {
|
||||||
|
label: "Dokument hochgeladen",
|
||||||
|
icon: FileText,
|
||||||
|
color: "bg-violet-50 text-violet-700",
|
||||||
|
},
|
||||||
|
hearing_scheduled: {
|
||||||
|
label: "Verhandlung angesetzt",
|
||||||
|
icon: Gavel,
|
||||||
|
color: "bg-rose-50 text-rose-700",
|
||||||
|
},
|
||||||
|
note_added: {
|
||||||
|
label: "Notiz hinzugefuegt",
|
||||||
|
icon: MessageSquare,
|
||||||
|
color: "bg-neutral-100 text-neutral-700",
|
||||||
|
},
|
||||||
|
case_created: {
|
||||||
|
label: "Akte erstellt",
|
||||||
|
icon: Scale,
|
||||||
|
color: "bg-emerald-50 text-emerald-700",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const DEFAULT_EVENT_CONFIG = {
|
||||||
|
label: "Ereignis",
|
||||||
|
icon: Info,
|
||||||
|
color: "bg-neutral-100 text-neutral-600",
|
||||||
|
};
|
||||||
|
|
||||||
|
function DetailSkeleton() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Skeleton className="h-4 w-64" />
|
||||||
|
<div className="mt-6 space-y-4">
|
||||||
|
<Skeleton className="h-8 w-48" />
|
||||||
|
<Skeleton className="h-4 w-32" />
|
||||||
|
<Skeleton className="h-32 rounded-lg" />
|
||||||
|
<Skeleton className="h-48 rounded-lg" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function CaseEventDetailPage() {
|
||||||
|
const { id: caseId, eventId } = useParams<{
|
||||||
|
id: string;
|
||||||
|
eventId: string;
|
||||||
|
}>();
|
||||||
|
|
||||||
|
const { data: caseData } = useQuery({
|
||||||
|
queryKey: ["case", caseId],
|
||||||
|
queryFn: () => api.get<Case>(`/cases/${caseId}`),
|
||||||
|
});
|
||||||
|
|
||||||
|
const {
|
||||||
|
data: event,
|
||||||
|
isLoading,
|
||||||
|
error,
|
||||||
|
} = useQuery({
|
||||||
|
queryKey: ["case-event", eventId],
|
||||||
|
queryFn: () => api.get<CaseEvent>(`/case-events/${eventId}`),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (isLoading) return <DetailSkeleton />;
|
||||||
|
|
||||||
|
if (error || !event) {
|
||||||
|
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">
|
||||||
|
Ereignis nicht gefunden
|
||||||
|
</p>
|
||||||
|
<p className="mt-1 text-sm text-neutral-500">
|
||||||
|
Das Ereignis existiert nicht oder Sie haben keine Berechtigung.
|
||||||
|
</p>
|
||||||
|
<Link
|
||||||
|
href={`/cases/${caseId}`}
|
||||||
|
className="mt-4 inline-block text-sm text-neutral-500 transition-colors hover:text-neutral-700"
|
||||||
|
>
|
||||||
|
Zurueck zur Akte
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const typeConfig =
|
||||||
|
EVENT_TYPE_CONFIG[event.event_type ?? ""] ?? DEFAULT_EVENT_CONFIG;
|
||||||
|
const TypeIcon = typeConfig.icon;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="animate-fade-in">
|
||||||
|
<Breadcrumb
|
||||||
|
items={[
|
||||||
|
{ label: "Dashboard", href: "/dashboard" },
|
||||||
|
{ label: "Akten", href: "/cases" },
|
||||||
|
{
|
||||||
|
label: caseData?.case_number
|
||||||
|
? `Az. ${caseData.case_number}`
|
||||||
|
: "Akte",
|
||||||
|
href: `/cases/${caseId}`,
|
||||||
|
},
|
||||||
|
{ label: "Verlauf", href: `/cases/${caseId}` },
|
||||||
|
{ label: event.title },
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex flex-wrap items-center gap-3">
|
||||||
|
<div className={`rounded-lg p-2 ${typeConfig.color}`}>
|
||||||
|
<TypeIcon className="h-5 w-5" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h1 className="text-lg font-semibold text-neutral-900">
|
||||||
|
{event.title}
|
||||||
|
</h1>
|
||||||
|
<p className="text-sm text-neutral-500">
|
||||||
|
{event.event_date
|
||||||
|
? format(parseISO(event.event_date), "d. MMMM yyyy, HH:mm", {
|
||||||
|
locale: de,
|
||||||
|
})
|
||||||
|
: format(parseISO(event.created_at), "d. MMMM yyyy, HH:mm", {
|
||||||
|
locale: de,
|
||||||
|
})}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Description */}
|
||||||
|
{event.description && (
|
||||||
|
<div className="mt-4 rounded-lg border border-neutral-200 bg-white px-4 py-3">
|
||||||
|
<p className="text-xs font-medium uppercase tracking-wide text-neutral-400">
|
||||||
|
Beschreibung
|
||||||
|
</p>
|
||||||
|
<p className="mt-1 whitespace-pre-wrap text-sm text-neutral-700">
|
||||||
|
{event.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Metadata */}
|
||||||
|
<div className="mt-3 rounded-lg border border-neutral-200 bg-white px-4 py-3">
|
||||||
|
<p className="text-xs font-medium uppercase tracking-wide text-neutral-400">
|
||||||
|
Metadaten
|
||||||
|
</p>
|
||||||
|
<dl className="mt-2 space-y-1.5">
|
||||||
|
<div className="flex gap-2 text-sm">
|
||||||
|
<dt className="text-neutral-500">Typ:</dt>
|
||||||
|
<dd>
|
||||||
|
<span
|
||||||
|
className={`inline-block rounded-full px-2 py-0.5 text-xs font-medium ${typeConfig.color}`}
|
||||||
|
>
|
||||||
|
{typeConfig.label}
|
||||||
|
</span>
|
||||||
|
</dd>
|
||||||
|
</div>
|
||||||
|
{event.created_by && (
|
||||||
|
<div className="flex gap-2 text-sm">
|
||||||
|
<dt className="text-neutral-500">Erstellt von:</dt>
|
||||||
|
<dd className="text-neutral-900">{event.created_by}</dd>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="flex gap-2 text-sm">
|
||||||
|
<dt className="text-neutral-500">Erstellt am:</dt>
|
||||||
|
<dd className="text-neutral-900">
|
||||||
|
{format(parseISO(event.created_at), "d. MMMM yyyy, HH:mm", {
|
||||||
|
locale: de,
|
||||||
|
})}
|
||||||
|
</dd>
|
||||||
|
</div>
|
||||||
|
{event.metadata &&
|
||||||
|
Object.keys(event.metadata).length > 0 &&
|
||||||
|
Object.entries(event.metadata).map(([key, value]) => (
|
||||||
|
<div key={key} className="flex gap-2 text-sm">
|
||||||
|
<dt className="text-neutral-500">{key}:</dt>
|
||||||
|
<dd className="text-neutral-900">{String(value)}</dd>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</dl>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Notes */}
|
||||||
|
<div className="mt-6">
|
||||||
|
<NotesList parentType="case_event" parentId={eventId} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
250
frontend/src/app/(app)/fristen/[id]/page.tsx
Normal file
250
frontend/src/app/(app)/fristen/[id]/page.tsx
Normal file
@@ -0,0 +1,250 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
||||||
|
import { useParams, useRouter } from "next/navigation";
|
||||||
|
import { api } from "@/lib/api";
|
||||||
|
import type { Deadline } from "@/lib/types";
|
||||||
|
import { Breadcrumb } from "@/components/layout/Breadcrumb";
|
||||||
|
import { NotesList } from "@/components/notes/NotesList";
|
||||||
|
import { Skeleton } from "@/components/ui/Skeleton";
|
||||||
|
import { format, parseISO, formatDistanceToNow, isPast } from "date-fns";
|
||||||
|
import { de } from "date-fns/locale";
|
||||||
|
import {
|
||||||
|
AlertTriangle,
|
||||||
|
CheckCircle2,
|
||||||
|
Clock,
|
||||||
|
ExternalLink,
|
||||||
|
} from "lucide-react";
|
||||||
|
import Link from "next/link";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
|
||||||
|
interface DeadlineDetail extends Deadline {
|
||||||
|
case_number?: string;
|
||||||
|
case_title?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const STATUS_CONFIG: Record<
|
||||||
|
string,
|
||||||
|
{ label: string; bg: string; icon: typeof Clock }
|
||||||
|
> = {
|
||||||
|
pending: { label: "Offen", bg: "bg-amber-50 text-amber-700", icon: Clock },
|
||||||
|
completed: {
|
||||||
|
label: "Erledigt",
|
||||||
|
bg: "bg-emerald-50 text-emerald-700",
|
||||||
|
icon: CheckCircle2,
|
||||||
|
},
|
||||||
|
overdue: {
|
||||||
|
label: "Ueberfaellig",
|
||||||
|
bg: "bg-red-50 text-red-700",
|
||||||
|
icon: AlertTriangle,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
function getEffectiveStatus(d: DeadlineDetail): string {
|
||||||
|
if (d.status === "completed") return "completed";
|
||||||
|
if (isPast(parseISO(d.due_date))) return "overdue";
|
||||||
|
return "pending";
|
||||||
|
}
|
||||||
|
|
||||||
|
function DetailSkeleton() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Skeleton className="h-4 w-48" />
|
||||||
|
<div className="mt-6 space-y-4">
|
||||||
|
<Skeleton className="h-8 w-64" />
|
||||||
|
<Skeleton className="h-4 w-40" />
|
||||||
|
<Skeleton className="h-32 rounded-lg" />
|
||||||
|
<Skeleton className="h-48 rounded-lg" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function DeadlineDetailPage() {
|
||||||
|
const { id } = useParams<{ id: string }>();
|
||||||
|
const router = useRouter();
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
|
||||||
|
const {
|
||||||
|
data: deadline,
|
||||||
|
isLoading,
|
||||||
|
error,
|
||||||
|
} = useQuery({
|
||||||
|
queryKey: ["deadline", id],
|
||||||
|
queryFn: () => api.get<DeadlineDetail>(`/deadlines/${id}`),
|
||||||
|
});
|
||||||
|
|
||||||
|
const completeMutation = useMutation({
|
||||||
|
mutationFn: () => api.patch<Deadline>(`/deadlines/${id}/complete`),
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ["deadline", id] });
|
||||||
|
queryClient.invalidateQueries({ queryKey: ["deadlines"] });
|
||||||
|
queryClient.invalidateQueries({ queryKey: ["dashboard"] });
|
||||||
|
toast.success("Frist als erledigt markiert");
|
||||||
|
},
|
||||||
|
onError: () => toast.error("Fehler beim Abschliessen der Frist"),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (isLoading) return <DetailSkeleton />;
|
||||||
|
|
||||||
|
if (error || !deadline) {
|
||||||
|
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">
|
||||||
|
Frist nicht gefunden
|
||||||
|
</p>
|
||||||
|
<p className="mt-1 text-sm text-neutral-500">
|
||||||
|
Die Frist existiert nicht oder Sie haben keine Berechtigung.
|
||||||
|
</p>
|
||||||
|
<Link
|
||||||
|
href="/fristen"
|
||||||
|
className="mt-4 inline-block text-sm text-neutral-500 transition-colors hover:text-neutral-700"
|
||||||
|
>
|
||||||
|
Zurueck zu Fristen
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const status = getEffectiveStatus(deadline);
|
||||||
|
const config = STATUS_CONFIG[status] ?? STATUS_CONFIG.pending;
|
||||||
|
const StatusIcon = config.icon;
|
||||||
|
const dueDate = parseISO(deadline.due_date);
|
||||||
|
const relativeTime = formatDistanceToNow(dueDate, {
|
||||||
|
addSuffix: true,
|
||||||
|
locale: de,
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="animate-fade-in">
|
||||||
|
<Breadcrumb
|
||||||
|
items={[
|
||||||
|
{ label: "Dashboard", href: "/dashboard" },
|
||||||
|
{ label: "Fristen", href: "/fristen" },
|
||||||
|
{ label: deadline.title },
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Header */}
|
||||||
|
<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">
|
||||||
|
<span
|
||||||
|
className={`inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium ${config.bg}`}
|
||||||
|
>
|
||||||
|
<StatusIcon className="h-3 w-3" />
|
||||||
|
{config.label}
|
||||||
|
</span>
|
||||||
|
<h1 className="text-lg font-semibold text-neutral-900">
|
||||||
|
{deadline.title}
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
{deadline.description && (
|
||||||
|
<p className="mt-1 text-sm text-neutral-500">
|
||||||
|
{deadline.description}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{deadline.status !== "completed" && (
|
||||||
|
<button
|
||||||
|
onClick={() => completeMutation.mutate()}
|
||||||
|
disabled={completeMutation.isPending}
|
||||||
|
className="shrink-0 rounded-md bg-emerald-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-emerald-700 disabled:opacity-50"
|
||||||
|
>
|
||||||
|
{completeMutation.isPending ? "Wird erledigt..." : "Erledigen"}
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Due date */}
|
||||||
|
<div className="mt-4 rounded-lg border border-neutral-200 bg-white px-4 py-3">
|
||||||
|
<div className="flex items-baseline gap-2">
|
||||||
|
<span className="text-sm font-medium text-neutral-900">
|
||||||
|
Faellig: {format(dueDate, "d. MMMM yyyy", { locale: de })}
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
className={`text-xs ${status === "overdue" ? "font-medium text-red-600" : "text-neutral-500"}`}
|
||||||
|
>
|
||||||
|
({relativeTime})
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{deadline.warning_date && (
|
||||||
|
<p className="mt-1 text-xs text-neutral-500">
|
||||||
|
Warnung am:{" "}
|
||||||
|
{format(parseISO(deadline.warning_date), "d. MMMM yyyy", {
|
||||||
|
locale: de,
|
||||||
|
})}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
{deadline.original_due_date &&
|
||||||
|
deadline.original_due_date !== deadline.due_date && (
|
||||||
|
<p className="mt-1 text-xs text-neutral-500">
|
||||||
|
Urspruengliches Datum:{" "}
|
||||||
|
{format(parseISO(deadline.original_due_date), "d. MMMM yyyy", {
|
||||||
|
locale: de,
|
||||||
|
})}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
{deadline.completed_at && (
|
||||||
|
<p className="mt-1 text-xs text-emerald-600">
|
||||||
|
Erledigt am:{" "}
|
||||||
|
{format(parseISO(deadline.completed_at), "d. MMMM yyyy, HH:mm", {
|
||||||
|
locale: de,
|
||||||
|
})}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Case context */}
|
||||||
|
{deadline.case_id && (
|
||||||
|
<div className="mt-3 rounded-lg border border-neutral-200 bg-white px-4 py-3">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<p className="text-xs font-medium uppercase tracking-wide text-neutral-400">
|
||||||
|
Akte
|
||||||
|
</p>
|
||||||
|
<p className="mt-0.5 text-sm text-neutral-900">
|
||||||
|
{deadline.case_number
|
||||||
|
? `Az. ${deadline.case_number}`
|
||||||
|
: "Verknuepfte Akte"}
|
||||||
|
{deadline.case_title && ` — ${deadline.case_title}`}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<Link
|
||||||
|
href={`/cases/${deadline.case_id}`}
|
||||||
|
className="flex items-center gap-1 text-xs text-neutral-500 transition-colors hover:text-neutral-700"
|
||||||
|
>
|
||||||
|
Zur Akte
|
||||||
|
<ExternalLink className="h-3 w-3" />
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Source info */}
|
||||||
|
{deadline.source && deadline.source !== "manual" && (
|
||||||
|
<div className="mt-3 rounded-lg border border-neutral-200 bg-white px-4 py-3">
|
||||||
|
<p className="text-xs font-medium uppercase tracking-wide text-neutral-400">
|
||||||
|
Quelle
|
||||||
|
</p>
|
||||||
|
<p className="mt-0.5 text-sm text-neutral-700">
|
||||||
|
{deadline.source === "calculated"
|
||||||
|
? "Berechnet"
|
||||||
|
: deadline.source === "caldav"
|
||||||
|
? "CalDAV Sync"
|
||||||
|
: deadline.source}
|
||||||
|
{deadline.rule_id && ` (Regel: ${deadline.rule_id})`}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Notes */}
|
||||||
|
<div className="mt-6">
|
||||||
|
<NotesList parentType="deadline" parentId={id} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
180
frontend/src/app/(app)/fristen/neu/page.tsx
Normal file
180
frontend/src/app/(app)/fristen/neu/page.tsx
Normal file
@@ -0,0 +1,180 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
import { api } from "@/lib/api";
|
||||||
|
import type { Case, Deadline } from "@/lib/types";
|
||||||
|
import { Breadcrumb } from "@/components/layout/Breadcrumb";
|
||||||
|
import { useState } from "react";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
|
||||||
|
const inputClass =
|
||||||
|
"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";
|
||||||
|
const labelClass = "mb-1 block text-xs font-medium text-neutral-600";
|
||||||
|
|
||||||
|
export default function NewDeadlinePage() {
|
||||||
|
const router = useRouter();
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
|
||||||
|
const [caseId, setCaseId] = useState("");
|
||||||
|
const [title, setTitle] = useState("");
|
||||||
|
const [description, setDescription] = useState("");
|
||||||
|
const [dueDate, setDueDate] = useState("");
|
||||||
|
const [warningDate, setWarningDate] = useState("");
|
||||||
|
const [notes, setNotes] = useState("");
|
||||||
|
|
||||||
|
const { data: casesData } = useQuery({
|
||||||
|
queryKey: ["cases"],
|
||||||
|
queryFn: () => api.get<{ cases: Case[]; total: number } | Case[]>("/cases"),
|
||||||
|
});
|
||||||
|
|
||||||
|
const cases = Array.isArray(casesData)
|
||||||
|
? casesData
|
||||||
|
: Array.isArray(casesData?.cases)
|
||||||
|
? casesData.cases
|
||||||
|
: [];
|
||||||
|
|
||||||
|
const createMutation = useMutation({
|
||||||
|
mutationFn: (body: Record<string, unknown>) =>
|
||||||
|
api.post<Deadline>(`/cases/${caseId}/deadlines`, body),
|
||||||
|
onSuccess: (data) => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ["deadlines"] });
|
||||||
|
queryClient.invalidateQueries({ queryKey: ["dashboard"] });
|
||||||
|
toast.success("Frist erstellt");
|
||||||
|
router.push(`/fristen/${data.id}`);
|
||||||
|
},
|
||||||
|
onError: () => toast.error("Fehler beim Erstellen der Frist"),
|
||||||
|
});
|
||||||
|
|
||||||
|
function handleSubmit(e: React.FormEvent) {
|
||||||
|
e.preventDefault();
|
||||||
|
if (!caseId || !title.trim() || !dueDate) return;
|
||||||
|
|
||||||
|
const body: Record<string, unknown> = {
|
||||||
|
title: title.trim(),
|
||||||
|
due_date: new Date(dueDate).toISOString(),
|
||||||
|
source: "manual",
|
||||||
|
};
|
||||||
|
if (description.trim()) body.description = description.trim();
|
||||||
|
if (warningDate) body.warning_date = new Date(warningDate).toISOString();
|
||||||
|
if (notes.trim()) body.notes = notes.trim();
|
||||||
|
|
||||||
|
createMutation.mutate(body);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="animate-fade-in">
|
||||||
|
<Breadcrumb
|
||||||
|
items={[
|
||||||
|
{ label: "Dashboard", href: "/dashboard" },
|
||||||
|
{ label: "Fristen", href: "/fristen" },
|
||||||
|
{ label: "Neue Frist" },
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<h1 className="text-lg font-semibold text-neutral-900">
|
||||||
|
Neue Frist anlegen
|
||||||
|
</h1>
|
||||||
|
<p className="mt-0.5 text-sm text-neutral-500">
|
||||||
|
Erstellen Sie eine neue Frist fuer eine Akte.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<form
|
||||||
|
onSubmit={handleSubmit}
|
||||||
|
className="mt-6 max-w-lg space-y-4 rounded-lg border border-neutral-200 bg-white p-5"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<label className={labelClass}>Akte *</label>
|
||||||
|
<select
|
||||||
|
value={caseId}
|
||||||
|
onChange={(e) => setCaseId(e.target.value)}
|
||||||
|
required
|
||||||
|
className={inputClass}
|
||||||
|
>
|
||||||
|
<option value="">Akte auswaehlen...</option>
|
||||||
|
{cases.map((c) => (
|
||||||
|
<option key={c.id} value={c.id}>
|
||||||
|
{c.case_number} — {c.title}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className={labelClass}>Bezeichnung *</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={title}
|
||||||
|
onChange={(e) => setTitle(e.target.value)}
|
||||||
|
required
|
||||||
|
className={inputClass}
|
||||||
|
placeholder="z.B. Klageschrift einreichen"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className={labelClass}>Beschreibung</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={description}
|
||||||
|
onChange={(e) => setDescription(e.target.value)}
|
||||||
|
className={inputClass}
|
||||||
|
placeholder="Optionale Beschreibung"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-2 gap-3">
|
||||||
|
<div>
|
||||||
|
<label className={labelClass}>Faellig am *</label>
|
||||||
|
<input
|
||||||
|
type="date"
|
||||||
|
value={dueDate}
|
||||||
|
onChange={(e) => setDueDate(e.target.value)}
|
||||||
|
required
|
||||||
|
className={inputClass}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className={labelClass}>Warnung am</label>
|
||||||
|
<input
|
||||||
|
type="date"
|
||||||
|
value={warningDate}
|
||||||
|
onChange={(e) => setWarningDate(e.target.value)}
|
||||||
|
className={inputClass}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className={labelClass}>Notizen</label>
|
||||||
|
<textarea
|
||||||
|
value={notes}
|
||||||
|
onChange={(e) => setNotes(e.target.value)}
|
||||||
|
rows={3}
|
||||||
|
className={inputClass}
|
||||||
|
placeholder="Optionale Notizen zur Frist"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center justify-end gap-2 pt-2">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => router.push("/fristen")}
|
||||||
|
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={
|
||||||
|
createMutation.isPending || !caseId || !title.trim() || !dueDate
|
||||||
|
}
|
||||||
|
className="rounded-md bg-neutral-900 px-3 py-1.5 text-sm font-medium text-white hover:bg-neutral-800 disabled:opacity-50"
|
||||||
|
>
|
||||||
|
{createMutation.isPending ? "Erstellen..." : "Frist anlegen"}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
201
frontend/src/app/(app)/termine/[id]/page.tsx
Normal file
201
frontend/src/app/(app)/termine/[id]/page.tsx
Normal file
@@ -0,0 +1,201 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useQuery } from "@tanstack/react-query";
|
||||||
|
import { useParams } from "next/navigation";
|
||||||
|
import { api } from "@/lib/api";
|
||||||
|
import type { Appointment } from "@/lib/types";
|
||||||
|
import { Breadcrumb } from "@/components/layout/Breadcrumb";
|
||||||
|
import { NotesList } from "@/components/notes/NotesList";
|
||||||
|
import { Skeleton } from "@/components/ui/Skeleton";
|
||||||
|
import { format, parseISO } from "date-fns";
|
||||||
|
import { de } from "date-fns/locale";
|
||||||
|
import {
|
||||||
|
AlertTriangle,
|
||||||
|
Calendar,
|
||||||
|
ExternalLink,
|
||||||
|
MapPin,
|
||||||
|
} from "lucide-react";
|
||||||
|
import Link from "next/link";
|
||||||
|
|
||||||
|
interface AppointmentDetail extends Appointment {
|
||||||
|
case_number?: string;
|
||||||
|
case_title?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const TYPE_LABELS: Record<string, string> = {
|
||||||
|
hearing: "Verhandlung",
|
||||||
|
meeting: "Besprechung",
|
||||||
|
consultation: "Beratung",
|
||||||
|
deadline_hearing: "Fristanhoerung",
|
||||||
|
other: "Sonstiges",
|
||||||
|
};
|
||||||
|
|
||||||
|
const TYPE_COLORS: Record<string, string> = {
|
||||||
|
hearing: "bg-blue-50 text-blue-700",
|
||||||
|
meeting: "bg-violet-50 text-violet-700",
|
||||||
|
consultation: "bg-emerald-50 text-emerald-700",
|
||||||
|
deadline_hearing: "bg-amber-50 text-amber-700",
|
||||||
|
other: "bg-neutral-100 text-neutral-600",
|
||||||
|
};
|
||||||
|
|
||||||
|
function DetailSkeleton() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Skeleton className="h-4 w-48" />
|
||||||
|
<div className="mt-6 space-y-4">
|
||||||
|
<Skeleton className="h-8 w-64" />
|
||||||
|
<Skeleton className="h-4 w-40" />
|
||||||
|
<Skeleton className="h-32 rounded-lg" />
|
||||||
|
<Skeleton className="h-48 rounded-lg" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function AppointmentDetailPage() {
|
||||||
|
const { id } = useParams<{ id: string }>();
|
||||||
|
|
||||||
|
const {
|
||||||
|
data: appointment,
|
||||||
|
isLoading,
|
||||||
|
error,
|
||||||
|
} = useQuery({
|
||||||
|
queryKey: ["appointment", id],
|
||||||
|
queryFn: () => api.get<AppointmentDetail>(`/appointments/${id}`),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (isLoading) return <DetailSkeleton />;
|
||||||
|
|
||||||
|
if (error || !appointment) {
|
||||||
|
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">
|
||||||
|
Termin nicht gefunden
|
||||||
|
</p>
|
||||||
|
<p className="mt-1 text-sm text-neutral-500">
|
||||||
|
Der Termin existiert nicht oder Sie haben keine Berechtigung.
|
||||||
|
</p>
|
||||||
|
<Link
|
||||||
|
href="/termine"
|
||||||
|
className="mt-4 inline-block text-sm text-neutral-500 transition-colors hover:text-neutral-700"
|
||||||
|
>
|
||||||
|
Zurueck zu Termine
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const startDate = parseISO(appointment.start_at);
|
||||||
|
const typeBadge = appointment.appointment_type
|
||||||
|
? TYPE_COLORS[appointment.appointment_type] ?? TYPE_COLORS.other
|
||||||
|
: null;
|
||||||
|
const typeLabel = appointment.appointment_type
|
||||||
|
? TYPE_LABELS[appointment.appointment_type] ?? appointment.appointment_type
|
||||||
|
: null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="animate-fade-in">
|
||||||
|
<Breadcrumb
|
||||||
|
items={[
|
||||||
|
{ label: "Dashboard", href: "/dashboard" },
|
||||||
|
{ label: "Termine", href: "/termine" },
|
||||||
|
{ label: appointment.title },
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Header */}
|
||||||
|
<div>
|
||||||
|
<div className="flex flex-wrap items-center gap-3">
|
||||||
|
<h1 className="text-lg font-semibold text-neutral-900">
|
||||||
|
{appointment.title}
|
||||||
|
</h1>
|
||||||
|
{typeBadge && typeLabel && (
|
||||||
|
<span
|
||||||
|
className={`inline-block rounded-full px-2.5 py-0.5 text-xs font-medium ${typeBadge}`}
|
||||||
|
>
|
||||||
|
{typeLabel}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Date & Time */}
|
||||||
|
<div className="mt-4 rounded-lg border border-neutral-200 bg-white px-4 py-3">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Calendar className="h-4 w-4 text-neutral-400" />
|
||||||
|
<span className="text-sm font-medium text-neutral-900">
|
||||||
|
{format(startDate, "EEEE, d. MMMM yyyy", { locale: de })}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<p className="mt-1 pl-6 text-sm text-neutral-600">
|
||||||
|
{format(startDate, "HH:mm", { locale: de })} Uhr
|
||||||
|
{appointment.end_at && (
|
||||||
|
<>
|
||||||
|
{" "}
|
||||||
|
– {format(parseISO(appointment.end_at), "HH:mm", { locale: de })}{" "}
|
||||||
|
Uhr
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Location */}
|
||||||
|
{appointment.location && (
|
||||||
|
<div className="mt-3 rounded-lg border border-neutral-200 bg-white px-4 py-3">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<MapPin className="h-4 w-4 text-neutral-400" />
|
||||||
|
<span className="text-sm text-neutral-900">
|
||||||
|
{appointment.location}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Case context */}
|
||||||
|
{appointment.case_id && (
|
||||||
|
<div className="mt-3 rounded-lg border border-neutral-200 bg-white px-4 py-3">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<p className="text-xs font-medium uppercase tracking-wide text-neutral-400">
|
||||||
|
Akte
|
||||||
|
</p>
|
||||||
|
<p className="mt-0.5 text-sm text-neutral-900">
|
||||||
|
{appointment.case_number
|
||||||
|
? `Az. ${appointment.case_number}`
|
||||||
|
: "Verknuepfte Akte"}
|
||||||
|
{appointment.case_title && ` — ${appointment.case_title}`}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<Link
|
||||||
|
href={`/cases/${appointment.case_id}`}
|
||||||
|
className="flex items-center gap-1 text-xs text-neutral-500 transition-colors hover:text-neutral-700"
|
||||||
|
>
|
||||||
|
Zur Akte
|
||||||
|
<ExternalLink className="h-3 w-3" />
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Description */}
|
||||||
|
{appointment.description && (
|
||||||
|
<div className="mt-3 rounded-lg border border-neutral-200 bg-white px-4 py-3">
|
||||||
|
<p className="text-xs font-medium uppercase tracking-wide text-neutral-400">
|
||||||
|
Beschreibung
|
||||||
|
</p>
|
||||||
|
<p className="mt-1 whitespace-pre-wrap text-sm text-neutral-700">
|
||||||
|
{appointment.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Notes */}
|
||||||
|
<div className="mt-6">
|
||||||
|
<NotesList parentType="appointment" parentId={id} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
206
frontend/src/app/(app)/termine/neu/page.tsx
Normal file
206
frontend/src/app/(app)/termine/neu/page.tsx
Normal file
@@ -0,0 +1,206 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
import { api } from "@/lib/api";
|
||||||
|
import type { Case, Appointment } from "@/lib/types";
|
||||||
|
import { Breadcrumb } from "@/components/layout/Breadcrumb";
|
||||||
|
import { useState } from "react";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
|
||||||
|
const APPOINTMENT_TYPES = [
|
||||||
|
{ value: "hearing", label: "Verhandlung" },
|
||||||
|
{ value: "meeting", label: "Besprechung" },
|
||||||
|
{ value: "consultation", label: "Beratung" },
|
||||||
|
{ value: "deadline_hearing", label: "Fristanhoerung" },
|
||||||
|
{ value: "other", label: "Sonstiges" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const inputClass =
|
||||||
|
"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";
|
||||||
|
const labelClass = "mb-1 block text-xs font-medium text-neutral-600";
|
||||||
|
|
||||||
|
export default function NewAppointmentPage() {
|
||||||
|
const router = useRouter();
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
|
||||||
|
const [caseId, setCaseId] = useState("");
|
||||||
|
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 { data: casesData } = useQuery({
|
||||||
|
queryKey: ["cases"],
|
||||||
|
queryFn: () => api.get<{ cases: Case[]; total: number } | Case[]>("/cases"),
|
||||||
|
});
|
||||||
|
|
||||||
|
const cases = Array.isArray(casesData)
|
||||||
|
? casesData
|
||||||
|
: Array.isArray(casesData?.cases)
|
||||||
|
? casesData.cases
|
||||||
|
: [];
|
||||||
|
|
||||||
|
const createMutation = useMutation({
|
||||||
|
mutationFn: (body: Record<string, unknown>) =>
|
||||||
|
api.post<Appointment>("/appointments", body),
|
||||||
|
onSuccess: (data) => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ["appointments"] });
|
||||||
|
queryClient.invalidateQueries({ queryKey: ["dashboard"] });
|
||||||
|
toast.success("Termin erstellt");
|
||||||
|
router.push(`/termine/${data.id}`);
|
||||||
|
},
|
||||||
|
onError: () => toast.error("Fehler beim Erstellen 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;
|
||||||
|
|
||||||
|
createMutation.mutate(body);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="animate-fade-in">
|
||||||
|
<Breadcrumb
|
||||||
|
items={[
|
||||||
|
{ label: "Dashboard", href: "/dashboard" },
|
||||||
|
{ label: "Termine", href: "/termine" },
|
||||||
|
{ label: "Neuer Termin" },
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<h1 className="text-lg font-semibold text-neutral-900">
|
||||||
|
Neuer Termin
|
||||||
|
</h1>
|
||||||
|
<p className="mt-0.5 text-sm text-neutral-500">
|
||||||
|
Erstellen Sie einen neuen Termin.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<form
|
||||||
|
onSubmit={handleSubmit}
|
||||||
|
className="mt-6 max-w-lg space-y-4 rounded-lg border border-neutral-200 bg-white p-5"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<label className={labelClass}>Titel *</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={title}
|
||||||
|
onChange={(e) => setTitle(e.target.value)}
|
||||||
|
required
|
||||||
|
className={inputClass}
|
||||||
|
placeholder="z.B. Muendliche Verhandlung"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-2 gap-3">
|
||||||
|
<div>
|
||||||
|
<label className={labelClass}>Beginn *</label>
|
||||||
|
<input
|
||||||
|
type="datetime-local"
|
||||||
|
value={startAt}
|
||||||
|
onChange={(e) => setStartAt(e.target.value)}
|
||||||
|
required
|
||||||
|
className={inputClass}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className={labelClass}>Ende</label>
|
||||||
|
<input
|
||||||
|
type="datetime-local"
|
||||||
|
value={endAt}
|
||||||
|
onChange={(e) => setEndAt(e.target.value)}
|
||||||
|
className={inputClass}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-2 gap-3">
|
||||||
|
<div>
|
||||||
|
<label className={labelClass}>Typ</label>
|
||||||
|
<select
|
||||||
|
value={appointmentType}
|
||||||
|
onChange={(e) => setAppointmentType(e.target.value)}
|
||||||
|
className={inputClass}
|
||||||
|
>
|
||||||
|
<option value="">Kein Typ</option>
|
||||||
|
{APPOINTMENT_TYPES.map((t) => (
|
||||||
|
<option key={t.value} value={t.value}>
|
||||||
|
{t.label}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className={labelClass}>Akte (optional)</label>
|
||||||
|
<select
|
||||||
|
value={caseId}
|
||||||
|
onChange={(e) => setCaseId(e.target.value)}
|
||||||
|
className={inputClass}
|
||||||
|
>
|
||||||
|
<option value="">Keine Akte</option>
|
||||||
|
{cases.map((c) => (
|
||||||
|
<option key={c.id} value={c.id}>
|
||||||
|
{c.case_number} — {c.title}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className={labelClass}>Ort</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={location}
|
||||||
|
onChange={(e) => setLocation(e.target.value)}
|
||||||
|
className={inputClass}
|
||||||
|
placeholder="z.B. UPC Muenchen, Saal 3"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className={labelClass}>Beschreibung</label>
|
||||||
|
<textarea
|
||||||
|
value={description}
|
||||||
|
onChange={(e) => setDescription(e.target.value)}
|
||||||
|
rows={3}
|
||||||
|
className={inputClass}
|
||||||
|
placeholder="Optionale Beschreibung zum Termin"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center justify-end gap-2 pt-2">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => router.push("/termine")}
|
||||||
|
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={
|
||||||
|
createMutation.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"
|
||||||
|
>
|
||||||
|
{createMutation.isPending ? "Erstellen..." : "Termin anlegen"}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
29
frontend/src/components/layout/Breadcrumb.tsx
Normal file
29
frontend/src/components/layout/Breadcrumb.tsx
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
import Link from "next/link";
|
||||||
|
import { ChevronRight } from "lucide-react";
|
||||||
|
|
||||||
|
export interface BreadcrumbItem {
|
||||||
|
label: string;
|
||||||
|
href?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Breadcrumb({ items }: { items: BreadcrumbItem[] }) {
|
||||||
|
return (
|
||||||
|
<nav className="mb-4 flex items-center gap-1 text-sm text-neutral-500">
|
||||||
|
{items.map((item, i) => (
|
||||||
|
<span key={i} className="flex items-center gap-1">
|
||||||
|
{i > 0 && <ChevronRight className="h-3.5 w-3.5 text-neutral-300" />}
|
||||||
|
{item.href ? (
|
||||||
|
<Link
|
||||||
|
href={item.href}
|
||||||
|
className="transition-colors hover:text-neutral-700"
|
||||||
|
>
|
||||||
|
{item.label}
|
||||||
|
</Link>
|
||||||
|
) : (
|
||||||
|
<span className="font-medium text-neutral-900">{item.label}</span>
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</nav>
|
||||||
|
);
|
||||||
|
}
|
||||||
209
frontend/src/components/notes/NotesList.tsx
Normal file
209
frontend/src/components/notes/NotesList.tsx
Normal file
@@ -0,0 +1,209 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
||||||
|
import { api } from "@/lib/api";
|
||||||
|
import type { Note } from "@/lib/types";
|
||||||
|
import { format, parseISO } from "date-fns";
|
||||||
|
import { de } from "date-fns/locale";
|
||||||
|
import { Plus, Pencil, Trash2, X, Check, MessageSquare } from "lucide-react";
|
||||||
|
import { useState } from "react";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
|
||||||
|
interface NotesListProps {
|
||||||
|
parentType: "case" | "deadline" | "appointment" | "case_event";
|
||||||
|
parentId: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function NotesList({ parentType, parentId }: NotesListProps) {
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
const queryKey = ["notes", parentType, parentId];
|
||||||
|
|
||||||
|
const [newContent, setNewContent] = useState("");
|
||||||
|
const [showNew, setShowNew] = useState(false);
|
||||||
|
const [editingId, setEditingId] = useState<string | null>(null);
|
||||||
|
const [editContent, setEditContent] = useState("");
|
||||||
|
|
||||||
|
const { data: notes, isLoading } = useQuery({
|
||||||
|
queryKey,
|
||||||
|
queryFn: () =>
|
||||||
|
api.get<Note[]>(`/notes?${parentType}_id=${parentId}`),
|
||||||
|
});
|
||||||
|
|
||||||
|
const createMutation = useMutation({
|
||||||
|
mutationFn: (content: string) => {
|
||||||
|
const body: Record<string, string> = {
|
||||||
|
content,
|
||||||
|
[`${parentType}_id`]: parentId,
|
||||||
|
};
|
||||||
|
return api.post<Note>("/notes", body);
|
||||||
|
},
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.invalidateQueries({ queryKey });
|
||||||
|
setNewContent("");
|
||||||
|
setShowNew(false);
|
||||||
|
toast.success("Notiz erstellt");
|
||||||
|
},
|
||||||
|
onError: () => toast.error("Fehler beim Erstellen der Notiz"),
|
||||||
|
});
|
||||||
|
|
||||||
|
const updateMutation = useMutation({
|
||||||
|
mutationFn: ({ id, content }: { id: string; content: string }) =>
|
||||||
|
api.put<Note>(`/notes/${id}`, { content }),
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.invalidateQueries({ queryKey });
|
||||||
|
setEditingId(null);
|
||||||
|
toast.success("Notiz aktualisiert");
|
||||||
|
},
|
||||||
|
onError: () => toast.error("Fehler beim Aktualisieren der Notiz"),
|
||||||
|
});
|
||||||
|
|
||||||
|
const deleteMutation = useMutation({
|
||||||
|
mutationFn: (id: string) => api.delete(`/notes/${id}`),
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.invalidateQueries({ queryKey });
|
||||||
|
toast.success("Notiz geloescht");
|
||||||
|
},
|
||||||
|
onError: () => toast.error("Fehler beim Loeschen der Notiz"),
|
||||||
|
});
|
||||||
|
|
||||||
|
function handleCreate() {
|
||||||
|
if (!newContent.trim()) return;
|
||||||
|
createMutation.mutate(newContent.trim());
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleUpdate(id: string) {
|
||||||
|
if (!editContent.trim()) return;
|
||||||
|
updateMutation.mutate({ id, content: editContent.trim() });
|
||||||
|
}
|
||||||
|
|
||||||
|
function startEdit(note: Note) {
|
||||||
|
setEditingId(note.id);
|
||||||
|
setEditContent(note.content);
|
||||||
|
}
|
||||||
|
|
||||||
|
const notesList = Array.isArray(notes) ? notes : [];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="rounded-lg border border-neutral-200 bg-white">
|
||||||
|
<div className="flex items-center justify-between border-b border-neutral-100 px-4 py-3">
|
||||||
|
<h3 className="text-sm font-medium text-neutral-900">Notizen</h3>
|
||||||
|
{!showNew && (
|
||||||
|
<button
|
||||||
|
onClick={() => setShowNew(true)}
|
||||||
|
className="flex items-center gap-1 rounded-md px-2 py-1 text-xs text-neutral-500 transition-colors hover:bg-neutral-50 hover:text-neutral-700"
|
||||||
|
>
|
||||||
|
<Plus className="h-3.5 w-3.5" />
|
||||||
|
Neu
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{showNew && (
|
||||||
|
<div className="border-b border-neutral-100 p-4">
|
||||||
|
<textarea
|
||||||
|
value={newContent}
|
||||||
|
onChange={(e) => setNewContent(e.target.value)}
|
||||||
|
rows={3}
|
||||||
|
autoFocus
|
||||||
|
placeholder="Notiz schreiben..."
|
||||||
|
className="w-full rounded-md border border-neutral-200 px-3 py-2 text-sm outline-none focus:border-neutral-400 focus:ring-1 focus:ring-neutral-400"
|
||||||
|
/>
|
||||||
|
<div className="mt-2 flex justify-end gap-2">
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
setShowNew(false);
|
||||||
|
setNewContent("");
|
||||||
|
}}
|
||||||
|
className="rounded-md px-2.5 py-1 text-xs text-neutral-500 hover:bg-neutral-50"
|
||||||
|
>
|
||||||
|
Abbrechen
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={handleCreate}
|
||||||
|
disabled={!newContent.trim() || createMutation.isPending}
|
||||||
|
className="rounded-md bg-neutral-900 px-2.5 py-1 text-xs font-medium text-white hover:bg-neutral-800 disabled:opacity-50"
|
||||||
|
>
|
||||||
|
{createMutation.isPending ? "Speichern..." : "Speichern"}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{isLoading ? (
|
||||||
|
<div className="space-y-2 p-4">
|
||||||
|
{[1, 2].map((i) => (
|
||||||
|
<div key={i} className="h-12 animate-pulse rounded-md bg-neutral-100" />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : notesList.length === 0 ? (
|
||||||
|
<div className="flex flex-col items-center py-8 text-center">
|
||||||
|
<MessageSquare className="h-5 w-5 text-neutral-300" />
|
||||||
|
<p className="mt-2 text-sm text-neutral-400">
|
||||||
|
Keine Notizen vorhanden.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="divide-y divide-neutral-100">
|
||||||
|
{notesList.map((note) => (
|
||||||
|
<div key={note.id} className="group px-4 py-3">
|
||||||
|
{editingId === note.id ? (
|
||||||
|
<div>
|
||||||
|
<textarea
|
||||||
|
value={editContent}
|
||||||
|
onChange={(e) => setEditContent(e.target.value)}
|
||||||
|
rows={3}
|
||||||
|
autoFocus
|
||||||
|
className="w-full rounded-md border border-neutral-200 px-3 py-2 text-sm outline-none focus:border-neutral-400 focus:ring-1 focus:ring-neutral-400"
|
||||||
|
/>
|
||||||
|
<div className="mt-2 flex justify-end gap-2">
|
||||||
|
<button
|
||||||
|
onClick={() => setEditingId(null)}
|
||||||
|
className="rounded-md p-1 text-neutral-400 hover:bg-neutral-50 hover:text-neutral-600"
|
||||||
|
>
|
||||||
|
<X className="h-3.5 w-3.5" />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => handleUpdate(note.id)}
|
||||||
|
disabled={!editContent.trim() || updateMutation.isPending}
|
||||||
|
className="rounded-md p-1 text-neutral-400 hover:bg-neutral-50 hover:text-green-600"
|
||||||
|
>
|
||||||
|
<Check className="h-3.5 w-3.5" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div>
|
||||||
|
<div className="flex items-start justify-between">
|
||||||
|
<p className="whitespace-pre-wrap text-sm text-neutral-700">
|
||||||
|
{note.content}
|
||||||
|
</p>
|
||||||
|
<div className="ml-4 flex shrink-0 gap-1 opacity-0 transition-opacity group-hover:opacity-100">
|
||||||
|
<button
|
||||||
|
onClick={() => startEdit(note)}
|
||||||
|
className="rounded p-1 text-neutral-400 hover:bg-neutral-50 hover:text-neutral-600"
|
||||||
|
>
|
||||||
|
<Pencil className="h-3 w-3" />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => deleteMutation.mutate(note.id)}
|
||||||
|
className="rounded p-1 text-neutral-400 hover:bg-red-50 hover:text-red-500"
|
||||||
|
>
|
||||||
|
<Trash2 className="h-3 w-3" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p className="mt-1 text-xs text-neutral-400">
|
||||||
|
{format(parseISO(note.created_at), "d. MMM yyyy, HH:mm", {
|
||||||
|
locale: de,
|
||||||
|
})}
|
||||||
|
{note.updated_at !== note.created_at && " (bearbeitet)"}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -230,6 +230,31 @@ export interface DashboardData {
|
|||||||
upcoming_appointments: UpcomingAppointment[];
|
upcoming_appointments: UpcomingAppointment[];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Notes
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Recent Activity
|
||||||
|
export interface RecentActivity {
|
||||||
|
id: string;
|
||||||
|
event_type?: string;
|
||||||
|
title: string;
|
||||||
|
case_id: string;
|
||||||
|
case_number: string;
|
||||||
|
event_date?: string;
|
||||||
|
created_at: string;
|
||||||
|
}
|
||||||
|
|
||||||
// AI Extraction types
|
// AI Extraction types
|
||||||
|
|
||||||
export interface ExtractedDeadline {
|
export interface ExtractedDeadline {
|
||||||
|
|||||||
Reference in New Issue
Block a user