- 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
54 lines
1.3 KiB
TypeScript
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>
|
|
);
|
|
}
|