leocrm/frontend/src/App.tsx

import React from 'react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { AppRouter } from '@/routes';
import { setUnauthorizedHandler } from '@/api/client';
import { useAuthStore } from '@/store/authStore';
import { useThemeStore } from '@/store/themeStore';
import { ErrorBoundary } from '@/components/common/ErrorBoundary';
import { useToast } from '@/components/ui/Toast';
import { useOnlineStatus } from '@/hooks/useOnlineStatus';

function QueryClientWrapper({ children }: { children: React.ReactNode }) {
  const toast = useToast();

  const [queryClient] = React.useState(() => new QueryClient({
    defaultOptions: {
      queries: {
        retry: 1,
        staleTime: 5 * 60 * 1000,
        refetchOnWindowFocus: false,
      },
      mutations: {
        retry: 0,
        onError: (error: any) => {
          // Don't show toast for 401 (handled by auth)
          if (error?.status === 401) return;
          const msg = error?.detail || error?.message || 'Ein Fehler ist aufgetreten';
          toast.error(msg);
        },
      },
    },
  }));

  return (
    <QueryClientProvider client={queryClient}>
      {children}
    </QueryClientProvider>
  );
}

function OfflineBanner() {
  const isOnline = useOnlineStatus();

  if (isOnline) return null;

  return (
    <div className="fixed top-0 left-0 right-0 z-[200] bg-warning-500 text-white text-center py-2 px-4 text-sm font-medium shadow-md">
      Sie sind offline. Änderungen werden gespeichert wenn die Verbindung wiederhergestellt ist.
    </div>
  );
}

export default function App() {
  const { logout } = useAuthStore();
  const loadThemeFromStorage = useThemeStore((s) => s.loadFromStorage);
  const toast = useToast();

  React.useEffect(() => {
    setUnauthorizedHandler(() => {
      toast.warning('Ihre Sitzung ist abgelaufen. Sie werden zur Anmeldung weitergeleitet.');
      logout();
      setTimeout(() => { window.location.href = '/login'; }, 1500);
    });
  }, [logout, toast]);

  // Load theme from localStorage on app start
  React.useEffect(() => {
    loadThemeFromStorage();
  }, [loadThemeFromStorage]);

  return (
    <QueryClientWrapper>
      <OfflineBanner />
      <a
        href="#main-content"
        className="sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 focus:z-[300] focus:px-4 focus:py-2 focus:bg-primary-600 focus:text-white focus:rounded-md"
      >
        Zum Hauptinhalt springen
      </a>
      <ErrorBoundary>
        <AppRouter />
      </ErrorBoundary>
    </QueryClientWrapper>
  );
}