feat: add deadline management frontend (Phase 1G)
- Fristen page with list view (sortable, filterable by status/case) - Calendar view with month navigation and deadline dots - Deadline calculator page (proceeding type + trigger date = timeline) - Traffic light urgency: red (overdue), amber (this week), green (OK) - Backend: GET /api/deadlines (all tenant deadlines), GET /api/proceeding-types - API client: added patch() method - Types: DeadlineRule, ProceedingType, CalculatedDeadline, RuleTreeNode
This commit is contained in:
m
257
frontend/src/components/deadlines/DeadlineList.tsx
Normal file
257
frontend/src/components/deadlines/DeadlineList.tsx
Normal file
@@ -0,0 +1,257 @@
|
||||
"use client";
|
||||
|
||||
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import { api } from "@/lib/api";
|
||||
import type { Deadline, Case } from "@/lib/types";
|
||||
import { format, isPast, isThisWeek, parseISO } from "date-fns";
|
||||
import { de } from "date-fns/locale";
|
||||
import { Check, Clock, Filter } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
import { useState, useMemo } from "react";
|
||||
|
||||
type StatusFilter = "all" | "pending" | "completed" | "overdue";
|
||||
|
||||
function getUrgency(deadline: Deadline): "red" | "amber" | "green" {
|
||||
if (deadline.status === "completed") return "green";
|
||||
const due = parseISO(deadline.due_date);
|
||||
if (isPast(due)) return "red";
|
||||
if (isThisWeek(due, { weekStartsOn: 1 })) return "amber";
|
||||
return "green";
|
||||
}
|
||||
|
||||
const urgencyConfig = {
|
||||
red: {
|
||||
bg: "bg-red-50",
|
||||
border: "border-red-200",
|
||||
badge: "bg-red-100 text-red-700",
|
||||
dot: "bg-red-500",
|
||||
label: "Uberschritten",
|
||||
},
|
||||
amber: {
|
||||
bg: "bg-amber-50",
|
||||
border: "border-amber-200",
|
||||
badge: "bg-amber-100 text-amber-700",
|
||||
dot: "bg-amber-500",
|
||||
label: "Diese Woche",
|
||||
},
|
||||
green: {
|
||||
bg: "bg-white",
|
||||
border: "border-neutral-200",
|
||||
badge: "bg-green-100 text-green-700",
|
||||
dot: "bg-green-500",
|
||||
label: "OK",
|
||||
},
|
||||
};
|
||||
|
||||
export function DeadlineList() {
|
||||
const queryClient = useQueryClient();
|
||||
const [statusFilter, setStatusFilter] = useState<StatusFilter>("all");
|
||||
const [caseFilter, setCaseFilter] = useState<string>("all");
|
||||
|
||||
const { data: deadlines, isLoading } = useQuery({
|
||||
queryKey: ["deadlines"],
|
||||
queryFn: () => api.get<Deadline[]>("/api/deadlines"),
|
||||
});
|
||||
|
||||
const { data: cases } = useQuery({
|
||||
queryKey: ["cases"],
|
||||
queryFn: () => api.get<Case[]>("/api/cases"),
|
||||
});
|
||||
|
||||
const completeMutation = useMutation({
|
||||
mutationFn: (id: string) =>
|
||||
api.patch<Deadline>(`/api/deadlines/${id}/complete`),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["deadlines"] });
|
||||
toast.success("Frist als erledigt markiert");
|
||||
},
|
||||
onError: () => {
|
||||
toast.error("Fehler beim Abschliessen der Frist");
|
||||
},
|
||||
});
|
||||
|
||||
const caseMap = useMemo(() => {
|
||||
const map = new Map<string, Case>();
|
||||
cases?.forEach((c) => map.set(c.id, c));
|
||||
return map;
|
||||
}, [cases]);
|
||||
|
||||
const filtered = useMemo(() => {
|
||||
if (!deadlines) return [];
|
||||
return deadlines.filter((d) => {
|
||||
if (statusFilter === "pending" && d.status !== "pending") return false;
|
||||
if (statusFilter === "completed" && d.status !== "completed") return false;
|
||||
if (statusFilter === "overdue") {
|
||||
if (d.status === "completed") return false;
|
||||
if (!isPast(parseISO(d.due_date))) return false;
|
||||
}
|
||||
if (caseFilter !== "all" && d.case_id !== caseFilter) return false;
|
||||
return true;
|
||||
});
|
||||
}, [deadlines, statusFilter, caseFilter]);
|
||||
|
||||
const counts = useMemo(() => {
|
||||
if (!deadlines) return { overdue: 0, thisWeek: 0, ok: 0 };
|
||||
let overdue = 0, thisWeek = 0, ok = 0;
|
||||
for (const d of deadlines) {
|
||||
if (d.status === "completed") continue;
|
||||
const urgency = getUrgency(d);
|
||||
if (urgency === "red") overdue++;
|
||||
else if (urgency === "amber") thisWeek++;
|
||||
else ok++;
|
||||
}
|
||||
return { overdue, thisWeek, ok };
|
||||
}, [deadlines]);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{[1, 2, 3, 4, 5].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">
|
||||
<button
|
||||
onClick={() => setStatusFilter(statusFilter === "overdue" ? "all" : "overdue")}
|
||||
className={`rounded-lg border p-3 text-left transition-colors ${
|
||||
statusFilter === "overdue"
|
||||
? "border-red-300 bg-red-50"
|
||||
: "border-neutral-200 bg-white hover:bg-neutral-50"
|
||||
}`}
|
||||
>
|
||||
<div className="text-2xl font-semibold text-red-600">{counts.overdue}</div>
|
||||
<div className="text-xs text-neutral-500">Uberschritten</div>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setStatusFilter(statusFilter === "pending" ? "all" : "pending")}
|
||||
className={`rounded-lg border p-3 text-left transition-colors ${
|
||||
statusFilter === "pending"
|
||||
? "border-amber-300 bg-amber-50"
|
||||
: "border-neutral-200 bg-white hover:bg-neutral-50"
|
||||
}`}
|
||||
>
|
||||
<div className="text-2xl font-semibold text-amber-600">{counts.thisWeek}</div>
|
||||
<div className="text-xs text-neutral-500">Diese Woche</div>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setStatusFilter("all")}
|
||||
className={`rounded-lg border p-3 text-left transition-colors ${
|
||||
statusFilter === "all"
|
||||
? "border-green-300 bg-green-50"
|
||||
: "border-neutral-200 bg-white hover:bg-neutral-50"
|
||||
}`}
|
||||
>
|
||||
<div className="text-2xl font-semibold text-green-600">{counts.ok}</div>
|
||||
<div className="text-xs text-neutral-500">OK</div>
|
||||
</button>
|
||||
</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={statusFilter}
|
||||
onChange={(e) => setStatusFilter(e.target.value as StatusFilter)}
|
||||
className="rounded-md border border-neutral-200 bg-white px-2.5 py-1 text-sm text-neutral-700"
|
||||
>
|
||||
<option value="all">Alle Status</option>
|
||||
<option value="pending">Offen</option>
|
||||
<option value="completed">Erledigt</option>
|
||||
<option value="overdue">Uberschritten</option>
|
||||
</select>
|
||||
{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.map((c) => (
|
||||
<option key={c.id} value={c.id}>
|
||||
{c.case_number} — {c.title}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Deadline list */}
|
||||
{filtered.length === 0 ? (
|
||||
<div className="rounded-lg border border-neutral-200 bg-white p-8 text-center">
|
||||
<Clock className="mx-auto h-8 w-8 text-neutral-300" />
|
||||
<p className="mt-2 text-sm text-neutral-500">Keine Fristen gefunden</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{filtered.map((deadline) => {
|
||||
const urgency = getUrgency(deadline);
|
||||
const config = urgencyConfig[urgency];
|
||||
const caseInfo = caseMap.get(deadline.case_id);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={deadline.id}
|
||||
className={`flex items-center gap-3 rounded-lg border px-4 py-3 ${config.bg} ${config.border}`}
|
||||
>
|
||||
<div className={`h-2.5 w-2.5 shrink-0 rounded-full ${config.dot}`} />
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="truncate text-sm font-medium text-neutral-900">
|
||||
{deadline.title}
|
||||
</span>
|
||||
<span className={`shrink-0 rounded px-1.5 py-0.5 text-xs font-medium ${config.badge}`}>
|
||||
{config.label}
|
||||
</span>
|
||||
{deadline.status === "completed" && (
|
||||
<span className="shrink-0 rounded bg-neutral-100 px-1.5 py-0.5 text-xs font-medium text-neutral-500">
|
||||
Erledigt
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="mt-0.5 flex items-center gap-2 text-xs text-neutral-500">
|
||||
<span>
|
||||
{format(parseISO(deadline.due_date), "dd. MMM yyyy", { locale: de })}
|
||||
</span>
|
||||
{caseInfo && (
|
||||
<>
|
||||
<span>·</span>
|
||||
<span className="truncate">
|
||||
{caseInfo.case_number} — {caseInfo.title}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
{deadline.source !== "manual" && (
|
||||
<>
|
||||
<span>·</span>
|
||||
<span>{deadline.source}</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{deadline.status !== "completed" && (
|
||||
<button
|
||||
onClick={() => completeMutation.mutate(deadline.id)}
|
||||
disabled={completeMutation.isPending}
|
||||
title="Als erledigt markieren"
|
||||
className="shrink-0 rounded-md p-1.5 text-neutral-400 hover:bg-white hover:text-green-600"
|
||||
>
|
||||
<Check className="h-4 w-4" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user