u

src/App.jsx

@@ -1,24 +1,43 @@
+import { lazy, Suspense } from 'react';
 import Box from '@mui/material/Box';
 import CircularProgress from '@mui/material/CircularProgress';
 import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
 import { useAuth } from './auth/useAuth';
 import LoginPage from './components/LoginPage';
+import CompanySetupDialog from './components/CompanySetupDialog';
 import AppShell from './components/AppShell';
 import SectionLayout from './components/SectionLayout';
-import ArtikelUebersichtPage from './pages/artikel/index';
-import ArtikelKategorienPage from './pages/artikel/kategorien';
-import ArtikelLagerPage from './pages/artikel/lager';
-import ArtikelSkuPage from './pages/artikel/sku';
-import LieferungPage from './pages/lieferung/index';
-import AuftragAktivePage from './pages/auftrag/index';
-import AuftragArchivPage from './pages/auftrag/archiv';
-import KundeListePage from './pages/kunde/index';
-import KundeGruppenPage from './pages/kunde/gruppen';
-import KundeKontaktePage from './pages/kunde/kontakte';
-import InfosPage from './pages/infos/index';
+
+const ArtikelUebersichtPage = lazy(() => import('./pages/artikel/index'));
+const ArtikelKategorienPage = lazy(() => import('./pages/artikel/kategorien'));
+const ArtikelLagerPage = lazy(() => import('./pages/artikel/lager'));
+const ArtikelSkuPage = lazy(() => import('./pages/artikel/sku'));
+const LieferungPage = lazy(() => import('./pages/lieferung/index'));
+const AuftragAktivePage = lazy(() => import('./pages/auftrag/index'));
+const AuftragArchivPage = lazy(() => import('./pages/auftrag/archiv'));
+const KundeListePage = lazy(() => import('./pages/kunde/index'));
+const KundeGruppenPage = lazy(() => import('./pages/kunde/gruppen'));
+const KundeKontaktePage = lazy(() => import('./pages/kunde/kontakte'));
+const InfosPage = lazy(() => import('./pages/infos/index'));
+
+function PageFallback() {
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        flex: 1,
+        minHeight: 200,
+      }}
+    >
+      <CircularProgress />
+    </Box>
+  );
+}
 
 export default function App() {
-  const { status } = useAuth();
+  const { status, needsCompanySetup } = useAuth();
 
   if (status === 'loading') {
     return (
@@ -40,31 +59,37 @@ export default function App() {
     return <LoginPage />;
   }
 
+  if (needsCompanySetup) {
+    return <CompanySetupDialog />;
+  }
+
   return (
     <BrowserRouter>
-      <Routes>
-        <Route path="/" element={<AppShell />}>
-          <Route index element={<Navigate to="/artikel" replace />} />
-          <Route path="lieferung" element={<LieferungPage />} />
-          <Route path="infos" element={<InfosPage />} />
-          <Route path="artikel" element={<SectionLayout sectionPath="/artikel" />}>
-            <Route index element={<ArtikelUebersichtPage />} />
-            <Route path="kategorien" element={<ArtikelKategorienPage />} />
-            <Route path="lager" element={<ArtikelLagerPage />} />
-            <Route path=":sku" element={<ArtikelSkuPage />} />
+      <Suspense fallback={<PageFallback />}>
+        <Routes>
+          <Route path="/" element={<AppShell />}>
+            <Route index element={<Navigate to="/artikel" replace />} />
+            <Route path="lieferung" element={<LieferungPage />} />
+            <Route path="infos" element={<InfosPage />} />
+            <Route path="artikel" element={<SectionLayout sectionPath="/artikel" />}>
+              <Route index element={<ArtikelUebersichtPage />} />
+              <Route path="kategorien" element={<ArtikelKategorienPage />} />
+              <Route path="lager" element={<ArtikelLagerPage />} />
+              <Route path=":sku" element={<ArtikelSkuPage />} />
+            </Route>
+            <Route path="auftrag" element={<SectionLayout sectionPath="/auftrag" />}>
+              <Route index element={<AuftragAktivePage />} />
+              <Route path="archiv" element={<AuftragArchivPage />} />
+            </Route>
+            <Route path="kunde" element={<SectionLayout sectionPath="/kunde" />}>
+              <Route index element={<KundeListePage />} />
+              <Route path="gruppen" element={<KundeGruppenPage />} />
+              <Route path="kontakte" element={<KundeKontaktePage />} />
+            </Route>
+            <Route path="*" element={<Navigate to="/artikel" replace />} />
           </Route>
-          <Route path="auftrag" element={<SectionLayout sectionPath="/auftrag" />}>
-            <Route index element={<AuftragAktivePage />} />
-            <Route path="archiv" element={<AuftragArchivPage />} />
-          </Route>
-          <Route path="kunde" element={<SectionLayout sectionPath="/kunde" />}>
-            <Route index element={<KundeListePage />} />
-            <Route path="gruppen" element={<KundeGruppenPage />} />
-            <Route path="kontakte" element={<KundeKontaktePage />} />
-          </Route>
-          <Route path="*" element={<Navigate to="/artikel" replace />} />
-        </Route>
-      </Routes>
+        </Routes>
+      </Suspense>
     </BrowserRouter>
   );
 }