m/KanzlAI-mGMT
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Phase B — interactive dashboard, breadcrumbs, clickable navigation

Browse Source 
- Breadcrumb component: reusable nav with items array (label+href)
- DeadlineTrafficLights: buttons → Links to /fristen?status={filter}
- CaseOverviewGrid: static metrics → clickable Links to /cases?status={filter}
- UpcomingTimeline: items → clickable Links to /fristen/{id} or /termine/{id}
  with case number links and hover chevron
- QuickActions: swap CalDAV Sync for "Neuer Termin" → /termine/neu,
  fix "Frist eintragen" → /fristen/neu
- AISummaryCard: add RefreshCw button with spinning animation
- RecentActivityList: new component showing recent case events
- DeadlineList: accept initialStatus prop, add this_week/ok filters
- fristen/page.tsx: read searchParams.status for initial filter
- Add breadcrumbs to dashboard, fristen, cases, termine pages
- Add RecentActivity type, update DashboardData type
This commit is contained in:
m
2026-03-25 19:29:13 +01:00
parent 9ad58e1ba3
commit 84b178edbf
13 changed files with 357 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
frontend/src/app/(app)/fristen/page.tsx
View File

@@ -2,16 +2,20 @@
import { DeadlineList } from "@/components/deadlines/DeadlineList";
import { DeadlineCalendarView } from "@/components/deadlines/DeadlineCalendarView";
import { Breadcrumb } from "@/components/layout/Breadcrumb";
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";
import { useSearchParams } from "next/navigation";
type ViewMode = "list" | "calendar";
export default function FristenPage() {
const searchParams = useSearchParams();
const initialStatus = searchParams.get("status") ?? undefined;
const [view, setView] = useState<ViewMode>("list");
const { data: deadlines } = useQuery({
@@ -21,50 +25,58 @@ export default function FristenPage() {
return (
<div className="animate-fade-in space-y-4">
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm: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 Überblick
</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"
}`}
<div>
<Breadcrumb
items={[
{ label: "Dashboard", href: "/dashboard" },
{ label: "Fristen" },
]}
/>
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm: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 Überblick
</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"
>
<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>
<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>
</div>
{view === "list" ? (
<DeadlineList />
<DeadlineList initialStatus={initialStatus} />
) : (
<DeadlineCalendarView deadlines={Array.isArray(deadlines) ? deadlines : []} />
)}