routes

src/App.jsx

@@ -4,48 +4,18 @@ import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
 import { useAuth } from './auth/useAuth';
 import LoginPage from './components/LoginPage';
 import AppShell from './components/AppShell';
-import SectionPage from './pages/SectionPage';
+import SectionLayout from './components/SectionLayout';
-import SubPage from './pages/SubPage';
+import HomePage from './pages/index';
-import { NAV_ITEMS, SUB_NAV } from './nav';
+import ArtikelUebersichtPage from './pages/artikel/index';
-
+import ArtikelKategorienPage from './pages/artikel/kategorien';
-function sectionRoutes(path) {
+import ArtikelLagerPage from './pages/artikel/lager';
-  const subNav = SUB_NAV[path];
+import LieferungPage from './pages/lieferung/index';
-  const routePath = path === '/' ? undefined : path.slice(1);
+import AuftragAktivePage from './pages/auftrag/index';
-
+import AuftragArchivPage from './pages/auftrag/archiv';
-  if (subNav) {
+import KundeListePage from './pages/kunde/index';
-    return (
+import KundeGruppenPage from './pages/kunde/gruppen';
-      <Route key={path} path={routePath} element={<SectionPage sectionPath={path} />}>
+import KundeKontaktePage from './pages/kunde/kontakte';
-        {subNav.map(({ segment, label }) =>
+import InfosPage from './pages/infos/index';
-          segment ? (
-            <Route
-              key={segment}
-              path={segment}
-              element={<SubPage title={label} />}
-            />
-          ) : (
-            <Route key="index" index element={<SubPage title={label} />} />
-          ),
-        )}
-      </Route>
-    );
-  }
-
-  const label = NAV_ITEMS.find((n) => n.path === path)?.label;
-
-  if (path === '/') {
-    return (
-      <Route key={path} index element={<SectionPage sectionPath={path}><SubPage title={label} /></SectionPage>} />
-    );
-  }
-
-  return (
-    <Route
-      key={path}
-      path={routePath}
-      element={<SectionPage sectionPath={path}><SubPage title={label} /></SectionPage>}
-    />
-  );
-}
 
 export default function App() {
   const { status } = useAuth();
@@ -74,7 +44,23 @@ export default function App() {
     <BrowserRouter>
       <Routes>
         <Route path="/" element={<AppShell />}>
-          {NAV_ITEMS.map((item) => sectionRoutes(item.path))}
+          <Route index element={<HomePage />} />
+          <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>
+          <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="/" replace />} />
         </Route>
       </Routes>

src/components/SectionLayout.jsx

@@ -1,8 +1,8 @@
 import { Outlet, useLocation } from 'react-router-dom';
-import PageLayout from '../components/PageLayout';
+import PageLayout from './PageLayout';
 import { NAV_ITEMS, SUB_NAV } from '../nav';
 
-export default function SectionPage({ sectionPath, children }) {
+export default function SectionLayout({ sectionPath }) {
   const { pathname } = useLocation();
   const title = NAV_ITEMS.find((item) => item.path === sectionPath)?.label ?? '';
   const subNav = SUB_NAV[sectionPath];
@@ -14,7 +14,7 @@ export default function SectionPage({ sectionPath, children }) {
 
   return (
     <PageLayout title={pageTitle} subNav={subNav} basePath={sectionPath}>
-      {children ?? <Outlet />}
+      <Outlet />
     </PageLayout>
   );
 }

src/pages/SubPage.jsx

@@ -1,9 +0,0 @@
-import Typography from '@mui/material/Typography';
-
-export default function SubPage({ title, description }) {
-  return (
-    <Typography color="text.secondary">
-      {description ?? `${title} — Inhalt folgt.`}
-    </Typography>
-  );
-}

src/pages/artikel/index.jsx

@@ -0,0 +1,7 @@
+import Typography from '@mui/material/Typography';
+
+export default function ArtikelUebersichtPage() {
+  return (
+    <Typography color="text.secondary">Übersicht — Inhalt folgt.</Typography>
+  );
+}

src/pages/artikel/kategorien.jsx

@@ -0,0 +1,7 @@
+import Typography from '@mui/material/Typography';
+
+export default function ArtikelKategorienPage() {
+  return (
+    <Typography color="text.secondary">Kategorien — Inhalt folgt.</Typography>
+  );
+}

src/pages/artikel/lager.jsx

@@ -0,0 +1,7 @@
+import Typography from '@mui/material/Typography';
+
+export default function ArtikelLagerPage() {
+  return (
+    <Typography color="text.secondary">Lager — Inhalt folgt.</Typography>
+  );
+}

src/pages/auftrag/archiv.jsx

@@ -0,0 +1,7 @@
+import Typography from '@mui/material/Typography';
+
+export default function AuftragArchivPage() {
+  return (
+    <Typography color="text.secondary">Archiv — Inhalt folgt.</Typography>
+  );
+}

src/pages/auftrag/index.jsx

@@ -0,0 +1,7 @@
+import Typography from '@mui/material/Typography';
+
+export default function AuftragAktivePage() {
+  return (
+    <Typography color="text.secondary">Aktive Aufträge — Inhalt folgt.</Typography>
+  );
+}

src/pages/index.jsx

@@ -0,0 +1,10 @@
+import Typography from '@mui/material/Typography';
+import PageLayout from '../components/PageLayout';
+
+export default function HomePage() {
+  return (
+    <PageLayout title="Home">
+      <Typography color="text.secondary">Home — Inhalt folgt.</Typography>
+    </PageLayout>
+  );
+}

src/pages/infos/index.jsx

@@ -0,0 +1,10 @@
+import Typography from '@mui/material/Typography';
+import PageLayout from '../../components/PageLayout';
+
+export default function InfosPage() {
+  return (
+    <PageLayout title="Infos">
+      <Typography color="text.secondary">Infos — Inhalt folgt.</Typography>
+    </PageLayout>
+  );
+}

src/pages/kunde/gruppen.jsx

@@ -0,0 +1,7 @@
+import Typography from '@mui/material/Typography';
+
+export default function KundeGruppenPage() {
+  return (
+    <Typography color="text.secondary">Gruppen — Inhalt folgt.</Typography>
+  );
+}

src/pages/kunde/index.jsx

@@ -0,0 +1,7 @@
+import Typography from '@mui/material/Typography';
+
+export default function KundeListePage() {
+  return (
+    <Typography color="text.secondary">Kundenliste — Inhalt folgt.</Typography>
+  );
+}

src/pages/kunde/kontakte.jsx

@@ -0,0 +1,7 @@
+import Typography from '@mui/material/Typography';
+
+export default function KundeKontaktePage() {
+  return (
+    <Typography color="text.secondary">Kontakte — Inhalt folgt.</Typography>
+  );
+}

src/pages/lieferung/index.jsx

@@ -0,0 +1,10 @@
+import Typography from '@mui/material/Typography';
+import PageLayout from '../../components/PageLayout';
+
+export default function LieferungPage() {
+  return (
+    <PageLayout title="Lieferung">
+      <Typography color="text.secondary">Lieferung — Inhalt folgt.</Typography>
+    </PageLayout>
+  );
+}