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
@@ -25,16 +25,19 @@ export function Header() {
|
||||
|
||||
return (
|
||||
<header className="flex h-14 items-center justify-between border-b border-neutral-200 bg-white px-4">
|
||||
<div />
|
||||
<div className="flex items-center gap-3">
|
||||
{/* Spacer for mobile hamburger */}
|
||||
<div className="w-8 lg:w-0" />
|
||||
<div className="flex items-center gap-2 sm:gap-3">
|
||||
<TenantSwitcher />
|
||||
{email && (
|
||||
<span className="text-sm text-neutral-500">{email}</span>
|
||||
<span className="hidden text-sm text-neutral-500 sm:inline">
|
||||
{email}
|
||||
</span>
|
||||
)}
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
title="Abmelden"
|
||||
className="rounded-md p-1.5 text-neutral-400 hover:bg-neutral-100 hover:text-neutral-600"
|
||||
className="rounded-md p-1.5 text-neutral-400 transition-colors hover:bg-neutral-100 hover:text-neutral-600"
|
||||
>
|
||||
<LogOut className="h-4 w-4" />
|
||||
</button>
|
||||
|
||||
@@ -9,11 +9,14 @@ import {
|
||||
Calendar,
|
||||
Brain,
|
||||
Settings,
|
||||
Menu,
|
||||
X,
|
||||
} from "lucide-react";
|
||||
import { useState, useEffect } from "react";
|
||||
|
||||
const navigation = [
|
||||
{ name: "Dashboard", href: "/dashboard", icon: LayoutDashboard },
|
||||
{ name: "Akten", href: "/akten", icon: FolderOpen },
|
||||
{ name: "Akten", href: "/cases", icon: FolderOpen },
|
||||
{ name: "Fristen", href: "/fristen", icon: Clock },
|
||||
{ name: "Termine", href: "/termine", icon: Calendar },
|
||||
{ name: "AI Analyse", href: "/ai/extract", icon: Brain },
|
||||
@@ -22,20 +25,43 @@ const navigation = [
|
||||
|
||||
export function Sidebar() {
|
||||
const pathname = usePathname();
|
||||
const [mobileOpen, setMobileOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<aside className="flex h-full w-56 flex-col border-r border-neutral-200 bg-white">
|
||||
<div className="flex h-14 items-center border-b border-neutral-200 px-4">
|
||||
// Close on route change
|
||||
useEffect(() => {
|
||||
setMobileOpen(false);
|
||||
}, [pathname]);
|
||||
|
||||
// Close on escape
|
||||
useEffect(() => {
|
||||
function onKeyDown(e: KeyboardEvent) {
|
||||
if (e.key === "Escape") setMobileOpen(false);
|
||||
}
|
||||
document.addEventListener("keydown", onKeyDown);
|
||||
return () => document.removeEventListener("keydown", onKeyDown);
|
||||
}, []);
|
||||
|
||||
const navContent = (
|
||||
<>
|
||||
<div className="flex h-14 items-center justify-between border-b border-neutral-200 px-4">
|
||||
<span className="text-sm font-semibold text-neutral-900">KanzlAI</span>
|
||||
<button
|
||||
onClick={() => setMobileOpen(false)}
|
||||
className="rounded-md p-1 text-neutral-400 transition-colors hover:bg-neutral-100 hover:text-neutral-600 lg:hidden"
|
||||
aria-label="Menü schließen"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
<nav className="flex-1 space-y-0.5 p-2">
|
||||
{navigation.map((item) => {
|
||||
const isActive = pathname.startsWith(item.href);
|
||||
const isActive =
|
||||
pathname === item.href || pathname.startsWith(item.href + "/");
|
||||
return (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className={`flex items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm transition-colors ${
|
||||
className={`flex items-center gap-2.5 rounded-md px-2.5 py-2 text-sm transition-colors ${
|
||||
isActive
|
||||
? "bg-neutral-100 font-medium text-neutral-900"
|
||||
: "text-neutral-600 hover:bg-neutral-50 hover:text-neutral-900"
|
||||
@@ -47,6 +73,39 @@ export function Sidebar() {
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
</aside>
|
||||
</>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Mobile hamburger button */}
|
||||
<button
|
||||
onClick={() => setMobileOpen(true)}
|
||||
className="fixed left-3 top-3.5 z-40 rounded-md bg-white p-1.5 shadow-sm ring-1 ring-neutral-200 transition-colors hover:bg-neutral-50 lg:hidden"
|
||||
aria-label="Menü öffnen"
|
||||
>
|
||||
<Menu className="h-5 w-5 text-neutral-700" />
|
||||
</button>
|
||||
|
||||
{/* Mobile overlay */}
|
||||
{mobileOpen && (
|
||||
<div
|
||||
className="fixed inset-0 z-40 bg-black/20 backdrop-blur-sm lg:hidden"
|
||||
onClick={() => setMobileOpen(false)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Mobile sidebar */}
|
||||
{mobileOpen && (
|
||||
<aside className="animate-slide-in-left fixed inset-y-0 left-0 z-50 flex w-56 flex-col border-r border-neutral-200 bg-white shadow-lg lg:hidden">
|
||||
{navContent}
|
||||
</aside>
|
||||
)}
|
||||
|
||||
{/* Desktop sidebar */}
|
||||
<aside className="hidden h-full w-56 flex-col border-r border-neutral-200 bg-white lg:flex">
|
||||
{navContent}
|
||||
</aside>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -12,17 +12,20 @@ export function TenantSwitcher() {
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
api.get<TenantWithRole[]>("/tenants").then((data) => {
|
||||
setTenants(data);
|
||||
const savedId = localStorage.getItem("kanzlai_tenant_id");
|
||||
const match = data.find((t) => t.id === savedId) || data[0];
|
||||
if (match) {
|
||||
setCurrent(match);
|
||||
localStorage.setItem("kanzlai_tenant_id", match.id);
|
||||
}
|
||||
}).catch(() => {
|
||||
// Not authenticated or no tenants
|
||||
});
|
||||
api
|
||||
.get<TenantWithRole[]>("/tenants")
|
||||
.then((data) => {
|
||||
setTenants(data);
|
||||
const savedId = localStorage.getItem("kanzlai_tenant_id");
|
||||
const match = data.find((t) => t.id === savedId) || data[0];
|
||||
if (match) {
|
||||
setCurrent(match);
|
||||
localStorage.setItem("kanzlai_tenant_id", match.id);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
// Not authenticated or no tenants
|
||||
});
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -48,14 +51,16 @@ export function TenantSwitcher() {
|
||||
<div ref={ref} className="relative">
|
||||
<button
|
||||
onClick={() => setOpen(!open)}
|
||||
className="flex items-center gap-1.5 rounded-md border border-neutral-200 bg-white px-2.5 py-1.5 text-sm text-neutral-700 hover:bg-neutral-50"
|
||||
className="flex items-center gap-1.5 rounded-md border border-neutral-200 bg-white px-2.5 py-1.5 text-sm text-neutral-700 transition-colors hover:bg-neutral-50"
|
||||
>
|
||||
<span className="max-w-[160px] truncate">{current.name}</span>
|
||||
<span className="max-w-[120px] truncate sm:max-w-[160px]">
|
||||
{current.name}
|
||||
</span>
|
||||
<ChevronsUpDown className="h-3.5 w-3.5 text-neutral-400" />
|
||||
</button>
|
||||
|
||||
{open && tenants.length > 1 && (
|
||||
<div className="absolute right-0 top-full z-50 mt-1 w-56 rounded-md border border-neutral-200 bg-white py-1 shadow-lg">
|
||||
<div className="animate-fade-in absolute right-0 top-full z-50 mt-1 w-56 rounded-md border border-neutral-200 bg-white py-1 shadow-lg">
|
||||
{tenants.map((tenant) => (
|
||||
<button
|
||||
key={tenant.id}
|
||||
|
||||
Reference in New Issue
Block a user