feat: add deadline management frontend (Phase 1G)
This commit is contained in:
m
@@ -39,6 +39,17 @@ func (h *DeadlineRuleHandlers) List(w http.ResponseWriter, r *http.Request) {
|
||||
writeJSON(w, http.StatusOK, rules)
|
||||
}
|
||||
|
||||
// ListProceedingTypes handles GET /api/proceeding-types
|
||||
func (h *DeadlineRuleHandlers) ListProceedingTypes(w http.ResponseWriter, r *http.Request) {
|
||||
types, err := h.rules.ListProceedingTypes()
|
||||
if err != nil {
|
||||
writeError(w, http.StatusInternalServerError, "failed to list proceeding types")
|
||||
return
|
||||
}
|
||||
|
||||
writeJSON(w, http.StatusOK, types)
|
||||
}
|
||||
|
||||
// GetRuleTree handles GET /api/deadline-rules/{type}
|
||||
// {type} is the proceeding type code (e.g., "INF", "REV")
|
||||
func (h *DeadlineRuleHandlers) GetRuleTree(w http.ResponseWriter, r *http.Request) {
|
||||
|
||||
@@ -20,6 +20,23 @@ func NewDeadlineHandlers(ds *services.DeadlineService, db *sqlx.DB) *DeadlineHan
|
||||
return &DeadlineHandlers{deadlines: ds, db: db}
|
||||
}
|
||||
|
||||
// ListAll handles GET /api/deadlines
|
||||
func (h *DeadlineHandlers) ListAll(w http.ResponseWriter, r *http.Request) {
|
||||
tenantID, err := resolveTenant(r, h.db)
|
||||
if err != nil {
|
||||
handleTenantError(w, err)
|
||||
return
|
||||
}
|
||||
|
||||
deadlines, err := h.deadlines.ListAll(tenantID)
|
||||
if err != nil {
|
||||
writeError(w, http.StatusInternalServerError, "failed to list deadlines")
|
||||
return
|
||||
}
|
||||
|
||||
writeJSON(w, http.StatusOK, deadlines)
|
||||
}
|
||||
|
||||
// ListForCase handles GET /api/cases/{caseID}/deadlines
|
||||
func (h *DeadlineHandlers) ListForCase(w http.ResponseWriter, r *http.Request) {
|
||||
tenantID, err := resolveTenant(r, h.db)
|
||||
|
||||
@@ -81,6 +81,7 @@ func New(db *sqlx.DB, authMW *auth.Middleware, cfg *config.Config) http.Handler
|
||||
scoped.HandleFunc("DELETE /api/parties/{partyId}", partyH.Delete)
|
||||
|
||||
// Deadlines
|
||||
scoped.HandleFunc("GET /api/deadlines", deadlineH.ListAll)
|
||||
scoped.HandleFunc("GET /api/cases/{caseID}/deadlines", deadlineH.ListForCase)
|
||||
scoped.HandleFunc("POST /api/cases/{caseID}/deadlines", deadlineH.Create)
|
||||
scoped.HandleFunc("PUT /api/deadlines/{deadlineID}", deadlineH.Update)
|
||||
@@ -90,6 +91,7 @@ func New(db *sqlx.DB, authMW *auth.Middleware, cfg *config.Config) http.Handler
|
||||
// Deadline rules (reference data)
|
||||
scoped.HandleFunc("GET /api/deadline-rules", ruleH.List)
|
||||
scoped.HandleFunc("GET /api/deadline-rules/{type}", ruleH.GetRuleTree)
|
||||
scoped.HandleFunc("GET /api/proceeding-types", ruleH.ListProceedingTypes)
|
||||
|
||||
// Deadline calculator
|
||||
scoped.HandleFunc("POST /api/deadlines/calculate", calcH.Calculate)
|
||||
|
||||
@@ -21,6 +21,23 @@ func NewDeadlineService(db *sqlx.DB) *DeadlineService {
|
||||
return &DeadlineService{db: db}
|
||||
}
|
||||
|
||||
// ListAll returns all deadlines for a tenant, ordered by due_date
|
||||
func (s *DeadlineService) ListAll(tenantID uuid.UUID) ([]models.Deadline, error) {
|
||||
query := `SELECT id, tenant_id, case_id, title, description, due_date, original_due_date,
|
||||
warning_date, source, rule_id, status, completed_at,
|
||||
caldav_uid, caldav_etag, notes, created_at, updated_at
|
||||
FROM deadlines
|
||||
WHERE tenant_id = $1
|
||||
ORDER BY due_date ASC`
|
||||
|
||||
var deadlines []models.Deadline
|
||||
err := s.db.Select(&deadlines, query, tenantID)
|
||||
if err != nil {
|
||||
return nil, fmt.Errorf("listing all deadlines: %w", err)
|
||||
}
|
||||
return deadlines, nil
|
||||
}
|
||||
|
||||
// ListForCase returns all deadlines for a case, scoped to tenant
|
||||
func (s *DeadlineService) ListForCase(tenantID, caseID uuid.UUID) ([]models.Deadline, error) {
|
||||
query := `SELECT id, tenant_id, case_id, title, description, due_date, original_due_date,
|
||||
|
||||
73
frontend/src/app/(app)/fristen/page.tsx
Normal file
73
frontend/src/app/(app)/fristen/page.tsx
Normal file
@@ -0,0 +1,73 @@
|
||||
"use client";
|
||||
|
||||
import { DeadlineList } from "@/components/deadlines/DeadlineList";
|
||||
import { DeadlineCalendarView } from "@/components/deadlines/DeadlineCalendarView";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { api } from "@/lib/api";
|
||||
import type { Deadline } from "@/lib/types";
|
||||
import { Calendar, List, Calculator } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { useState } from "react";
|
||||
|
||||
type ViewMode = "list" | "calendar";
|
||||
|
||||
export default function FristenPage() {
|
||||
const [view, setView] = useState<ViewMode>("list");
|
||||
|
||||
const { data: deadlines } = useQuery({
|
||||
queryKey: ["deadlines"],
|
||||
queryFn: () => api.get<Deadline[]>("/api/deadlines"),
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-lg font-semibold text-neutral-900">Fristen</h1>
|
||||
<p className="mt-0.5 text-sm text-neutral-500">
|
||||
Alle Fristen im Uberblick
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Link
|
||||
href="/fristen/rechner"
|
||||
className="flex items-center gap-1.5 rounded-md border border-neutral-200 bg-white px-3 py-1.5 text-sm text-neutral-700 transition-colors hover:bg-neutral-50"
|
||||
>
|
||||
<Calculator className="h-3.5 w-3.5" />
|
||||
Fristenrechner
|
||||
</Link>
|
||||
<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" ? (
|
||||
<DeadlineList />
|
||||
) : (
|
||||
<DeadlineCalendarView deadlines={deadlines || []} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
26
frontend/src/app/(app)/fristen/rechner/page.tsx
Normal file
26
frontend/src/app/(app)/fristen/rechner/page.tsx
Normal file
@@ -0,0 +1,26 @@
|
||||
"use client";
|
||||
|
||||
import { DeadlineCalculator } from "@/components/deadlines/DeadlineCalculator";
|
||||
import { ArrowLeft } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function FristenrechnerPage() {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<Link
|
||||
href="/fristen"
|
||||
className="mb-2 inline-flex items-center gap-1 text-sm text-neutral-500 hover:text-neutral-700"
|
||||
>
|
||||
<ArrowLeft className="h-3.5 w-3.5" />
|
||||
Zuruck zu Fristen
|
||||
</Link>
|
||||
<h1 className="text-lg font-semibold text-neutral-900">Fristenrechner</h1>
|
||||
<p className="mt-0.5 text-sm text-neutral-500">
|
||||
Berechnen Sie Fristen basierend auf Verfahrensart und Auslosedatum
|
||||
</p>
|
||||
</div>
|
||||
<DeadlineCalculator />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
178
frontend/src/components/deadlines/DeadlineCalculator.tsx
Normal file
178
frontend/src/components/deadlines/DeadlineCalculator.tsx
Normal file
@@ -0,0 +1,178 @@
|
||||
"use client";
|
||||
|
||||
import { useQuery, useMutation } from "@tanstack/react-query";
|
||||
import { api } from "@/lib/api";
|
||||
import type { ProceedingType, CalculateResponse, CalculatedDeadline } from "@/lib/types";
|
||||
import { format, parseISO, isPast, isThisWeek } from "date-fns";
|
||||
import { de } from "date-fns/locale";
|
||||
import { Calculator, Calendar, ArrowRight, AlertTriangle } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
|
||||
function getTimelineUrgency(dueDate: string): "red" | "amber" | "green" {
|
||||
const due = parseISO(dueDate);
|
||||
if (isPast(due)) return "red";
|
||||
if (isThisWeek(due, { weekStartsOn: 1 })) return "amber";
|
||||
return "green";
|
||||
}
|
||||
|
||||
const dotColors = {
|
||||
red: "bg-red-500",
|
||||
amber: "bg-amber-500",
|
||||
green: "bg-green-500",
|
||||
};
|
||||
|
||||
export function DeadlineCalculator() {
|
||||
const [proceedingType, setProceedingType] = useState("");
|
||||
const [triggerDate, setTriggerDate] = useState("");
|
||||
|
||||
const { data: proceedingTypes, isLoading: typesLoading } = useQuery({
|
||||
queryKey: ["proceeding-types"],
|
||||
queryFn: () => api.get<ProceedingType[]>("/api/proceeding-types"),
|
||||
});
|
||||
|
||||
const calculateMutation = useMutation({
|
||||
mutationFn: (params: { proceeding_type: string; trigger_event_date: string }) =>
|
||||
api.post<CalculateResponse>("/api/deadlines/calculate", params),
|
||||
});
|
||||
|
||||
function handleCalculate(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
if (!proceedingType || !triggerDate) return;
|
||||
calculateMutation.mutate({
|
||||
proceeding_type: proceedingType,
|
||||
trigger_event_date: triggerDate,
|
||||
});
|
||||
}
|
||||
|
||||
const results = calculateMutation.data;
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Input form */}
|
||||
<form onSubmit={handleCalculate} className="rounded-lg border border-neutral-200 bg-white p-5">
|
||||
<div className="flex items-center gap-2 text-sm font-medium text-neutral-900">
|
||||
<Calculator className="h-4 w-4" />
|
||||
Fristenberechnung
|
||||
</div>
|
||||
<div className="mt-4 grid gap-4 sm:grid-cols-3">
|
||||
<div>
|
||||
<label className="mb-1 block text-xs font-medium text-neutral-500">
|
||||
Verfahrensart
|
||||
</label>
|
||||
<select
|
||||
value={proceedingType}
|
||||
onChange={(e) => setProceedingType(e.target.value)}
|
||||
disabled={typesLoading}
|
||||
className="w-full rounded-md border border-neutral-200 bg-white px-3 py-2 text-sm text-neutral-900"
|
||||
>
|
||||
<option value="">Bitte wahlen...</option>
|
||||
{proceedingTypes?.map((pt) => (
|
||||
<option key={pt.id} value={pt.code}>
|
||||
{pt.name} ({pt.code})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="mb-1 block text-xs font-medium text-neutral-500">
|
||||
Auslosedatum
|
||||
</label>
|
||||
<input
|
||||
type="date"
|
||||
value={triggerDate}
|
||||
onChange={(e) => setTriggerDate(e.target.value)}
|
||||
className="w-full rounded-md border border-neutral-200 bg-white px-3 py-2 text-sm text-neutral-900"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-end">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!proceedingType || !triggerDate || calculateMutation.isPending}
|
||||
className="flex w-full items-center justify-center gap-2 rounded-md bg-neutral-900 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-neutral-800 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
{calculateMutation.isPending ? "Berechne..." : "Berechnen"}
|
||||
<ArrowRight className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{/* Error */}
|
||||
{calculateMutation.isError && (
|
||||
<div className="flex items-center gap-2 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
|
||||
<AlertTriangle className="h-4 w-4 shrink-0" />
|
||||
Fehler bei der Berechnung. Bitte Eingaben prufen.
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Results */}
|
||||
{results && results.deadlines && (
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-sm font-medium text-neutral-900">
|
||||
Berechnete Fristen
|
||||
</h3>
|
||||
<span className="text-xs text-neutral-500">
|
||||
{results.deadlines.length} Fristen ab{" "}
|
||||
{format(parseISO(results.trigger_event_date), "dd. MMM yyyy", { locale: de })}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Timeline */}
|
||||
<div className="relative rounded-lg border border-neutral-200 bg-white">
|
||||
{results.deadlines.map((d: CalculatedDeadline, i: number) => {
|
||||
const urgency = getTimelineUrgency(d.due_date);
|
||||
const isLast = i === results.deadlines.length - 1;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={d.rule_id}
|
||||
className={`flex gap-3 px-4 py-3 ${!isLast ? "border-b border-neutral-100" : ""}`}
|
||||
>
|
||||
{/* Timeline dot + line */}
|
||||
<div className="flex flex-col items-center pt-1">
|
||||
<div className={`h-2.5 w-2.5 shrink-0 rounded-full ${dotColors[urgency]}`} />
|
||||
{!isLast && <div className="mt-1 w-px flex-1 bg-neutral-200" />}
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<span className="text-sm font-medium text-neutral-900">
|
||||
{d.title}
|
||||
</span>
|
||||
<span className="shrink-0 text-sm font-medium tabular-nums text-neutral-700">
|
||||
{format(parseISO(d.due_date), "dd.MM.yyyy")}
|
||||
</span>
|
||||
</div>
|
||||
<div className="mt-0.5 flex items-center gap-2 text-xs text-neutral-500">
|
||||
{d.rule_code && <span>{d.rule_code}</span>}
|
||||
{d.was_adjusted && (
|
||||
<>
|
||||
{d.rule_code && <span>·</span>}
|
||||
<span className="text-amber-600">
|
||||
Angepasst (Original: {format(parseISO(d.original_due_date), "dd.MM.yyyy")})
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Empty state */}
|
||||
{!results && !calculateMutation.isPending && (
|
||||
<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">
|
||||
Verfahrensart und Auslosedatum wahlen, um Fristen zu berechnen
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
154
frontend/src/components/deadlines/DeadlineCalendarView.tsx
Normal file
154
frontend/src/components/deadlines/DeadlineCalendarView.tsx
Normal file
@@ -0,0 +1,154 @@
|
||||
"use client";
|
||||
|
||||
import type { Deadline } from "@/lib/types";
|
||||
import {
|
||||
format,
|
||||
startOfMonth,
|
||||
endOfMonth,
|
||||
startOfWeek,
|
||||
endOfWeek,
|
||||
eachDayOfInterval,
|
||||
isSameMonth,
|
||||
isToday,
|
||||
parseISO,
|
||||
isPast,
|
||||
isThisWeek,
|
||||
addMonths,
|
||||
subMonths,
|
||||
} from "date-fns";
|
||||
import { de } from "date-fns/locale";
|
||||
import { ChevronLeft, ChevronRight } from "lucide-react";
|
||||
import { useState, useMemo } from "react";
|
||||
|
||||
interface DeadlineCalendarViewProps {
|
||||
deadlines: Deadline[];
|
||||
}
|
||||
|
||||
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 dotColors = {
|
||||
red: "bg-red-500",
|
||||
amber: "bg-amber-500",
|
||||
green: "bg-green-500",
|
||||
};
|
||||
|
||||
export function DeadlineCalendarView({ deadlines }: DeadlineCalendarViewProps) {
|
||||
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 deadlinesByDay = useMemo(() => {
|
||||
const map = new Map<string, Deadline[]>();
|
||||
for (const d of deadlines) {
|
||||
if (d.status === "completed") continue;
|
||||
const key = d.due_date.slice(0, 10);
|
||||
const existing = map.get(key) || [];
|
||||
existing.push(d);
|
||||
map.set(key, existing);
|
||||
}
|
||||
return map;
|
||||
}, [deadlines]);
|
||||
|
||||
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 dayDeadlines = deadlinesByDay.get(key) || [];
|
||||
const inMonth = isSameMonth(day, currentMonth);
|
||||
const today = isToday(day);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={i}
|
||||
className={`min-h-[4.5rem] border-b border-r border-neutral-100 p-1.5 ${
|
||||
!inMonth ? "bg-neutral-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">
|
||||
{dayDeadlines.slice(0, 3).map((dl) => {
|
||||
const urgency = getUrgency(dl);
|
||||
return (
|
||||
<div
|
||||
key={dl.id}
|
||||
className="flex items-center gap-1 truncate"
|
||||
title={dl.title}
|
||||
>
|
||||
<div className={`h-1.5 w-1.5 shrink-0 rounded-full ${dotColors[urgency]}`} />
|
||||
<span className="truncate text-[10px] text-neutral-700">
|
||||
{dl.title}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{dayDeadlines.length > 3 && (
|
||||
<div className="text-[10px] text-neutral-400">
|
||||
+{dayDeadlines.length - 3} mehr
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -69,6 +69,13 @@ class ApiClient {
|
||||
});
|
||||
}
|
||||
|
||||
patch<T>(path: string, body?: unknown) {
|
||||
return this.request<T>(path, {
|
||||
method: "PATCH",
|
||||
body: body ? JSON.stringify(body) : undefined,
|
||||
});
|
||||
}
|
||||
|
||||
delete<T>(path: string) {
|
||||
return this.request<T>(path, { method: "DELETE" });
|
||||
}
|
||||
|
||||
@@ -104,49 +104,52 @@ export interface Document {
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export interface DeadlineSummary {
|
||||
overdue_count: number;
|
||||
due_this_week: number;
|
||||
due_next_week: number;
|
||||
ok_count: number;
|
||||
}
|
||||
|
||||
export interface CaseSummary {
|
||||
active_count: number;
|
||||
new_this_month: number;
|
||||
closed_count: number;
|
||||
}
|
||||
|
||||
export interface UpcomingDeadline {
|
||||
export interface DeadlineRule {
|
||||
id: string;
|
||||
proceeding_type_id?: number;
|
||||
parent_id?: string;
|
||||
code?: string;
|
||||
name: string;
|
||||
description?: string;
|
||||
primary_party?: string;
|
||||
event_type?: string;
|
||||
is_mandatory: boolean;
|
||||
duration_value: number;
|
||||
duration_unit: string;
|
||||
timing?: string;
|
||||
rule_code?: string;
|
||||
deadline_notes?: string;
|
||||
sequence_order: number;
|
||||
}
|
||||
|
||||
export interface RuleTreeNode extends DeadlineRule {
|
||||
children?: RuleTreeNode[];
|
||||
}
|
||||
|
||||
export interface ProceedingType {
|
||||
id: number;
|
||||
code: string;
|
||||
name: string;
|
||||
description?: string;
|
||||
jurisdiction?: string;
|
||||
default_color: string;
|
||||
sort_order: number;
|
||||
is_active: boolean;
|
||||
}
|
||||
|
||||
export interface CalculatedDeadline {
|
||||
rule_code: string;
|
||||
rule_id: string;
|
||||
title: string;
|
||||
due_date: string;
|
||||
case_number: string;
|
||||
case_title: string;
|
||||
status: string;
|
||||
original_due_date: string;
|
||||
was_adjusted: boolean;
|
||||
}
|
||||
|
||||
export interface UpcomingAppointment {
|
||||
id: string;
|
||||
title: string;
|
||||
start_at: string;
|
||||
case_number: string | null;
|
||||
location: string | null;
|
||||
}
|
||||
|
||||
export interface RecentActivityItem {
|
||||
event_type: string | null;
|
||||
title: string;
|
||||
case_number: string;
|
||||
event_date: string | null;
|
||||
}
|
||||
|
||||
export interface DashboardData {
|
||||
deadline_summary: DeadlineSummary;
|
||||
case_summary: CaseSummary;
|
||||
upcoming_deadlines: UpcomingDeadline[];
|
||||
upcoming_appointments: UpcomingAppointment[];
|
||||
recent_activity: RecentActivityItem[];
|
||||
export interface CalculateResponse {
|
||||
proceeding_type: string;
|
||||
trigger_event_date: string;
|
||||
deadlines: CalculatedDeadline[];
|
||||
}
|
||||
|
||||
export interface ApiError {
|
||||
|
||||
Reference in New Issue
Block a user