Files
KanzlAI-mGMT/frontend/src/components/dashboard/QuickActions.tsx
m f81a2492c6 feat: UI polish — responsive, loading/empty/error states, German fixes (Phase 3Q)
- Responsive sidebar: collapses on mobile with hamburger menu, slide-in animation
- Skeleton loaders: dashboard cards, case table, case detail page
- Empty states: friendly messages with icons for cases, deadlines, parties, documents
- Error states: retry button on dashboard, proper error message on case not found
- Form validation: inline error messages on case creation form
- German language: fix all missing umlauts (Zurück, wählen, Anhängig, Verfügung, etc.)
- Status labels: display German translations instead of raw status values
- Transitions: fade-in animations on page load, hover/transition-colors on all interactive elements
- Focus states: focus-visible ring for keyboard accessibility
- Mobile layout: stacking for filters, forms, tabs; horizontal scroll for tables
- Extraction results: card layout on mobile, table on desktop
- Missing types: add DashboardData, DeadlineSummary, CaseSummary, ExtractedDeadline etc.
- Fix QuickActions links to use correct routes (/cases/new, /ai/extract)
- Consistent input focus styles across all forms
2026-03-25 14:16:30 +01:00

54 lines
1.3 KiB
TypeScript

"use client";
import Link from "next/link";
import { FolderPlus, Clock, Sparkles, CalendarSync } from "lucide-react";
const actions = [
{
label: "Neue Akte",
href: "/cases/new",
icon: FolderPlus,
color: "text-blue-600 bg-blue-50 hover:bg-blue-100",
},
{
label: "Frist eintragen",
href: "/fristen",
icon: Clock,
color: "text-amber-600 bg-amber-50 hover:bg-amber-100",
},
{
label: "AI Analyse",
href: "/ai/extract",
icon: Sparkles,
color: "text-violet-600 bg-violet-50 hover:bg-violet-100",
},
{
label: "CalDAV Sync",
href: "/einstellungen",
icon: CalendarSync,
color: "text-emerald-600 bg-emerald-50 hover:bg-emerald-100",
},
];
export function QuickActions() {
return (
<div className="rounded-xl border border-neutral-200 bg-white p-5">
<h2 className="text-sm font-semibold text-neutral-900">
Schnellzugriff
</h2>
<div className="mt-3 grid grid-cols-2 gap-2">
{actions.map((action) => (
<Link
key={action.label}
href={action.href}
className={`flex items-center gap-2 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors ${action.color}`}
>
<action.icon className="h-4 w-4" />
{action.label}
</Link>
))}
</div>
</div>
);
}