feat: add appointment calendar frontend (Phase 1H)
- /termine page with list/calendar view toggle - AppointmentList: date-grouped list with type/case filtering, summary cards - AppointmentCalendar: month grid with colored type dots, clickable days/appointments - AppointmentModal: create/edit/delete with case linking, type selection, location
This commit is contained in:
m
99
frontend/src/app/(app)/termine/page.tsx
Normal file
99
frontend/src/app/(app)/termine/page.tsx
Normal file
@@ -0,0 +1,99 @@
|
|||||||
|
"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>
|
||||||
|
);
|
||||||
|
}
|
||||||
160
frontend/src/components/appointments/AppointmentCalendar.tsx
Normal file
160
frontend/src/components/appointments/AppointmentCalendar.tsx
Normal file
@@ -0,0 +1,160 @@
|
|||||||
|
"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>
|
||||||
|
);
|
||||||
|
}
|
||||||
265
frontend/src/components/appointments/AppointmentList.tsx
Normal file
265
frontend/src/components/appointments/AppointmentList.tsx
Normal file
@@ -0,0 +1,265 @@
|
|||||||
|
"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>
|
||||||
|
);
|
||||||
|
}
|
||||||
280
frontend/src/components/appointments/AppointmentModal.tsx
Normal file
280
frontend/src/components/appointments/AppointmentModal.tsx
Normal file
@@ -0,0 +1,280 @@
|
|||||||
|
"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>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user