T07a: frontend core SPA — shell + auth + routing + i18n + UI library + a11y

- React 18 + Vite + TypeScript + Tailwind CSS setup - AppShell with Sidebar (plugin menu) + TopBar (tenant switcher, search, notifications, user menu) - Auth pages: Login, PasswordResetRequest, PasswordResetConfirm - Protected routes with auth guard - API client (axios with interceptors: session cookie, 401 redirect, 422 validation) - TanStack Query hooks for auth, users, companies, contacts, notifications - Zustand stores: authStore, uiStore - i18n setup (de/en locales) with react-i18next - UI component library: Button, Input, Select, Modal, Toast, Table, Card, Badge, Avatar, Pagination, EmptyState, Skeleton, ConfirmDialog - Accessibility: ARIA labels, 44px touch targets, keyboard nav, reduced-motion, sr-only - Design tokens from prototype as CSS custom properties - 111 tests passing across 20 test files - tsc --noEmit: 0 errors - npm run build: success (471KB JS, 24KB CSS)
2026-06-29 07:55:47 +02:00
parent f8193a6ab5
commit 22976abe92
66 changed files with 8598 additions and 0 deletions
@@ -0,0 +1,216 @@
+import React, { useState, useRef, useEffect } from 'react';
+import clsx from 'clsx';
+import { useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { useAuthStore } from '@/store/authStore';
+import { useUIStore } from '@/store/uiStore';
+import { useTenant } from '@/hooks/useTenant';
+import { useLogout } from '@/api/hooks';
+import { Avatar } from '@/components/ui/Avatar';
+import { Badge } from '@/components/ui/Badge';
+
+export function TopBar() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { user } = useAuthStore();
+  const { toggleSidebar } = useUIStore();
+  const { currentTenant, availableTenants, switchTenant, isSwitching } = useTenant();
+  const logoutMutation = useLogout();
+
+  const [tenantMenuOpen, setTenantMenuOpen] = useState(false);
+  const [userMenuOpen, setUserMenuOpen] = useState(false);
+  const [notifOpen, setNotifOpen] = useState(false);
+  const tenantRef = useRef<HTMLDivElement>(null);
+  const userRef = useRef<HTMLDivElement>(null);
+  const notifRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (tenantRef.current && !tenantRef.current.contains(e.target as Node)) setTenantMenuOpen(false);
+      if (userRef.current && !userRef.current.contains(e.target as Node)) setUserMenuOpen(false);
+      if (notifRef.current && !notifRef.current.contains(e.target as Node)) setNotifOpen(false);
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  const handleLogout = async () => {
+    try {
+      await logoutMutation.mutateAsync();
+    } catch {
+      // ignore
+    }
+    navigate('/login');
+  };
+
+  const handleTenantSwitch = async (tenantId: string) => {
+    await switchTenant(tenantId);
+    setTenantMenuOpen(false);
+  };
+
+  const fullName = user ? `${user.first_name} ${user.last_name}` : '';
+
+  return (
+    <header
+      className="h-16 bg-white border-b border-secondary-200 flex items-center justify-between px-4 sticky top-0 z-20"
+      role="banner"
+      data-testid="topbar"
+    >
+      <div className="flex items-center gap-3">
+        <button
+          onClick={toggleSidebar}
+          className="p-2 rounded-md hover:bg-secondary-100 min-h-touch min-w-touch flex items-center justify-center focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
+          aria-label="Seitenleiste ein-/ausklappen"
+          aria-expanded={true}
+        >
+          <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+          </svg>
+        </button>
+
+        {/* Tenant switcher */}
+        <div ref={tenantRef} className="relative">
+          <button
+            onClick={() => setTenantMenuOpen(!tenantMenuOpen)}
+            className="flex items-center gap-2 px-3 py-2 rounded-md hover:bg-secondary-100 min-h-touch focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
+            aria-label={t('topbar.switchTenant')}
+            aria-expanded={tenantMenuOpen}
+            aria-haspopup="listbox"
+          >
+            <svg className="w-4 h-4 text-secondary-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
+            </svg>
+            <span className="text-sm font-medium text-secondary-700 max-w-32 truncate">
+              {currentTenant?.name || t('topbar.tenant')}
+            </span>
+            <svg className="w-4 h-4 text-secondary-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+            </svg>
+          </button>
+          {tenantMenuOpen && (
+            <ul
+              className="absolute top-full left-0 mt-1 w-56 bg-white rounded-md shadow-lg border border-secondary-200 py-1 z-50"
+              role="listbox"
+              aria-label={t('topbar.switchTenant')}
+            >
+              {availableTenants.map((tenant) => (
+                <li key={tenant.id}>
+                  <button
+                    onClick={() => handleTenantSwitch(tenant.id)}
+                    className={clsx(
+                      'w-full text-left px-3 py-2 text-sm hover:bg-secondary-50 min-h-touch flex items-center justify-between focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500',
+                      tenant.id === currentTenant?.id && 'bg-primary-50 text-primary-700'
+                    )}
+                    role="option"
+                    aria-selected={tenant.id === currentTenant?.id}
+                    disabled={isSwitching}
+                  >
+                    {tenant.name}
+                    {tenant.id === currentTenant?.id && (
+                      <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                      </svg>
+                    )}
+                  </button>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+
+        {/* Search */}
+        <div className="hidden md:block relative">
+          <input
+            type="search"
+            placeholder={t('topbar.search')}
+            className="w-64 pl-10 pr-3 py-2 text-sm rounded-md border border-secondary-300 focus:outline-none focus:ring-2 focus:ring-primary-500 min-h-touch"
+            aria-label={t('topbar.search')}
+          />
+          <svg className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-secondary-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+          </svg>
+        </div>
+      </div>
+
+      <div className="flex items-center gap-2">
+        {/* Notifications */}
+        <div ref={notifRef} className="relative">
+          <button
+            onClick={() => setNotifOpen(!notifOpen)}
+            className="p-2 rounded-md hover:bg-secondary-100 min-h-touch min-w-touch flex items-center justify-center focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
+            aria-label={t('topbar.notifications')}
+            aria-expanded={notifOpen}
+          >
+            <svg className="w-5 h-5 text-secondary-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
+            </svg>
+            <Badge variant="danger" className="absolute -top-1 -right-1 px-1.5 py-0">3</Badge>
+          </button>
+          {notifOpen && (
+            <div className="absolute top-full right-0 mt-1 w-80 bg-white rounded-md shadow-lg border border-secondary-200 z-50">
+              <div className="px-4 py-3 border-b border-secondary-200">
+                <h3 className="text-sm font-semibold text-secondary-900">{t('topbar.notifications')}</h3>
+              </div>
+              <ul className="max-h-64 overflow-y-auto py-1" role="list">
+                <li className="px-4 py-2 hover:bg-secondary-50 cursor-pointer text-sm text-secondary-700">
+                  Neuer Kontakt hinzugefügt: Max Mustermann
+                </li>
+                <li className="px-4 py-2 hover:bg-secondary-50 cursor-pointer text-sm text-secondary-700">
+                  Firma aktualisiert: TechCorp GmbH
+                </li>
+                <li className="px-4 py-2 hover:bg-secondary-50 cursor-pointer text-sm text-secondary-700">
+                  Meeting um 14:00 Uhr mit Müller AG
+                </li>
+              </ul>
+            </div>
+          )}
+        </div>
+
+        {/* User menu */}
+        <div ref={userRef} className="relative">
+          <button
+            onClick={() => setUserMenuOpen(!userMenuOpen)}
+            className="flex items-center gap-2 p-1 rounded-md hover:bg-secondary-100 min-h-touch focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
+            aria-label={t('topbar.userMenu')}
+            aria-expanded={userMenuOpen}
+            aria-haspopup="menu"
+          >
+            <Avatar name={fullName || 'User'} src={user?.avatar_url} size="sm" />
+            <span className="hidden md:block text-sm font-medium text-secondary-700 max-w-24 truncate">
+              {user?.first_name || ''}
+            </span>
+            <svg className="w-4 h-4 text-secondary-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+            </svg>
+          </button>
+          {userMenuOpen && (
+            <div
+              className="absolute top-full right-0 mt-1 w-56 bg-white rounded-md shadow-lg border border-secondary-200 py-1 z-50"
+              role="menu"
+              aria-label={t('topbar.userMenu')}
+            >
+              <div className="px-3 py-2 border-b border-secondary-100">
+                <p className="text-sm font-medium text-secondary-900 truncate">{fullName}</p>
+                <p className="text-xs text-secondary-500 truncate">{user?.email}</p>
+              </div>
+              <button
+                onClick={() => { setUserMenuOpen(false); navigate('/settings'); }}
+                className="w-full text-left px-3 py-2 text-sm hover:bg-secondary-50 min-h-touch focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
+                role="menuitem"
+              >
+                {t('topbar.settings')}
+              </button>
+              <button
+                onClick={handleLogout}
+                className="w-full text-left px-3 py-2 text-sm text-danger-600 hover:bg-danger-50 min-h-touch focus:outline-none focus-visible:ring-2 focus-visible:ring-danger-500"
+                role="menuitem"
+              >
+                {t('topbar.logout')}
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+    </header>
+  );
+}