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
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user