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
This commit is contained in:
m
2026-03-25 14:16:30 +01:00
parent 2cf01073a3
commit f81a2492c6
23 changed files with 834 additions and 288 deletions

View File

@@ -26,19 +26,19 @@ export default function NewCasePage() {
});
return (
<div className="mx-auto max-w-2xl">
<div className="animate-fade-in mx-auto max-w-2xl">
<Link
href="/cases"
className="mb-4 inline-flex items-center gap-1 text-sm text-neutral-500 hover:text-neutral-700"
className="mb-4 inline-flex items-center gap-1 text-sm text-neutral-500 transition-colors hover:text-neutral-700"
>
<ArrowLeft className="h-3.5 w-3.5" />
Zuruck zu Akten
Zurück zu Akten
</Link>
<h1 className="text-lg font-semibold text-neutral-900">Neue Akte</h1>
<p className="mt-0.5 text-sm text-neutral-500">
Neue Akte im System anlegen
</p>
<div className="mt-6 rounded-md border border-neutral-200 bg-white p-6">
<div className="mt-6 rounded-md border border-neutral-200 bg-white p-4 sm:p-6">
<CaseForm
onSubmit={(data) => mutation.mutate(data)}
isSubmitting={mutation.isPending}