Replace Next.js app with Vite React app (gerbil-manager-web)

- Remove gerbil-manager-nextjs (unused scaffold; recoverable from history) - Scaffold gerbil-manager-web: Vite + React 19 + TypeScript - German-only UI (lang=de, central strings in src/strings/de.ts) - Mobile-first shell: bottom tab bar on phones, sidebar on >=768px - react-router with skeleton routes (Start, Rennmaeuse, Wuerfe, Zuechter) - API client (src/api/client.ts) pointing at GerbilManagerWebAPI, configurable via VITE_API_BASE_URL (default http://localhost:5179) - nginx-based Dockerfile with SPA fallback; docker-compose frontend service now builds gerbil-manager-web Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-05 23:30:34 +02:00
parent 42a43ae24e
commit 6ee85bc909
41 changed files with 3436 additions and 4758 deletions
--- a/gerbil-manager-web/src/App.tsx
+++ b/gerbil-manager-web/src/App.tsx
@@ -0,0 +1,23 @@
+import { BrowserRouter, Route, Routes } from 'react-router-dom'
+import AppShell from './components/AppShell'
+import BreedersPage from './pages/BreedersPage'
+import GerbilsPage from './pages/GerbilsPage'
+import HomePage from './pages/HomePage'
+import LittersPage from './pages/LittersPage'
+import NotFoundPage from './pages/NotFoundPage'
+
+export default function App() {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route element={<AppShell />}>
+          <Route index element={<HomePage />} />
+          <Route path="rennmaeuse" element={<GerbilsPage />} />
+          <Route path="wuerfe" element={<LittersPage />} />
+          <Route path="zuechter" element={<BreedersPage />} />
+          <Route path="*" element={<NotFoundPage />} />
+        </Route>
+      </Routes>
+    </BrowserRouter>
+  )
+}
--- a/gerbil-manager-web/src/api/client.ts
+++ b/gerbil-manager-web/src/api/client.ts
@@ -0,0 +1,66 @@
+import { de } from '../strings/de'
+
+/**
+ * Basis-URL der GerbilManagerWebAPI.
+ * Per VITE_API_BASE_URL konfigurierbar (z. B. in Docker / Aspire);
+ * Standard ist das lokale Dev-Profil der API (launchSettings.json, Profil "http").
+ */
+export const API_BASE_URL: string =
+  import.meta.env.VITE_API_BASE_URL ?? 'http://localhost:5179'
+
+export class ApiError extends Error {
+  readonly status: number | null
+
+  constructor(message: string, status: number | null) {
+    super(message)
+    this.name = 'ApiError'
+    this.status = status
+  }
+}
+
+function errorMessageFor(status: number): string {
+  if (status === 404) return de.api.errors.notFound
+  if (status >= 500) return de.api.errors.server
+  return de.api.errors.unknown
+}
+
+async function request<T>(path: string, init?: RequestInit): Promise<T> {
+  let response: Response
+  try {
+    response = await fetch(`${API_BASE_URL}${path}`, {
+      headers: { 'Content-Type': 'application/json', ...init?.headers },
+      ...init,
+    })
+  } catch {
+    throw new ApiError(de.api.errors.network, null)
+  }
+
+  if (!response.ok) {
+    throw new ApiError(errorMessageFor(response.status), response.status)
+  }
+
+  if (response.status === 204) {
+    return undefined as T
+  }
+  return (await response.json()) as T
+}
+
+export const api = {
+  get: <T>(path: string) => request<T>(path),
+  post: <T>(path: string, body: unknown) =>
+    request<T>(path, { method: 'POST', body: JSON.stringify(body) }),
+  put: <T>(path: string, body: unknown) =>
+    request<T>(path, { method: 'PUT', body: JSON.stringify(body) }),
+  delete: (path: string) => request<void>(path, { method: 'DELETE' }),
+}
+
+/**
+ * Ressourcen-Pfade der API (siehe GerbilManagerWebAPI/Controllers).
+ * Alle drei Ressourcen bieten volle CRUD-Endpunkte:
+ * GET /{resource}, GET /{resource}/{id}, POST, PUT /{id}, DELETE /{id}
+ */
+export const resources = {
+  gerbils: '/gerbils',
+  litters: '/litters',
+  breeders: '/breeders',
+} as const
--- a/gerbil-manager-web/src/components/AppShell.tsx
+++ b/gerbil-manager-web/src/components/AppShell.tsx
@@ -0,0 +1,47 @@
+import { NavLink, Outlet } from 'react-router-dom'
+import { de } from '../strings/de'
+
+const navItems = [
+  { to: '/', label: de.nav.home, icon: '🏠', end: true },
+  { to: '/rennmaeuse', label: de.nav.gerbils, icon: '🐭', end: false },
+  { to: '/wuerfe', label: de.nav.litters, icon: '🍼', end: false },
+  { to: '/zuechter', label: de.nav.breeders, icon: '🧑‍🌾', end: false },
+]
+
+/**
+ * App-Grundgerüst, mobile-first:
+ * - Smartphone: Kopfzeile oben, Tab-Leiste unten
+ * - Laptop (ab 768px): Seitenleiste links, Inhalt rechts
+ */
+export default function AppShell() {
+  return (
+    <div className="app-shell">
+      <header className="app-header">
+        <span className="app-logo" aria-hidden="true">🐭</span>
+        <h1 className="app-title">{de.app.title}</h1>
+      </header>
+
+      <nav className="app-nav" aria-label={de.nav.mainNavigation}>
+        {navItems.map((item) => (
+          <NavLink
+            key={item.to}
+            to={item.to}
+            end={item.end}
+            className={({ isActive }) =>
+              isActive ? 'nav-link nav-link--active' : 'nav-link'
+            }
+          >
+            <span className="nav-icon" aria-hidden="true">
+              {item.icon}
+            </span>
+            <span className="nav-label">{item.label}</span>
+          </NavLink>
+        ))}
+      </nav>
+
+      <main className="app-main">
+        <Outlet />
+      </main>
+    </div>
+  )
+}
--- a/gerbil-manager-web/src/index.css
+++ b/gerbil-manager-web/src/index.css
@@ -0,0 +1,157 @@
+/* Mobile-first Grundlayout: Tab-Leiste unten auf dem Smartphone,
+   Seitenleiste links ab 768px (Laptop). */
+
+:root {
+  --color-bg: #faf7f2;
+  --color-surface: #ffffff;
+  --color-border: #e5ddd0;
+  --color-text: #3b3026;
+  --color-text-muted: #8a7d6b;
+  --color-accent: #b5651d;
+  --color-accent-soft: #f6e7d7;
+
+  font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  color: var(--color-text);
+  background-color: var(--color-bg);
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-height: 100dvh;
+}
+
+h1,
+h2,
+h3 {
+  margin: 0 0 0.5rem;
+}
+
+a {
+  color: var(--color-accent);
+}
+
+/* --- Grundgerüst (Smartphone) --- */
+
+.app-shell {
+  display: grid;
+  min-height: 100dvh;
+  grid-template-rows: auto 1fr auto;
+  grid-template-areas:
+    'header'
+    'main'
+    'nav';
+}
+
+.app-header {
+  grid-area: header;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  background: var(--color-surface);
+  border-bottom: 1px solid var(--color-border);
+  position: sticky;
+  top: 0;
+}
+
+.app-logo {
+  font-size: 1.5rem;
+}
+
+.app-title {
+  font-size: 1.15rem;
+  margin: 0;
+}
+
+.app-main {
+  grid-area: main;
+  padding: 1rem;
+  max-width: 60rem;
+  width: 100%;
+}
+
+/* Tab-Leiste unten */
+.app-nav {
+  grid-area: nav;
+  display: flex;
+  justify-content: space-around;
+  background: var(--color-surface);
+  border-top: 1px solid var(--color-border);
+  position: sticky;
+  bottom: 0;
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+.nav-link {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.15rem;
+  padding: 0.5rem 0.75rem;
+  flex: 1;
+  font-size: 0.7rem;
+  text-decoration: none;
+  color: var(--color-text-muted);
+  min-height: 44px; /* Touch-Ziel */
+}
+
+.nav-link--active {
+  color: var(--color-accent);
+  font-weight: 600;
+}
+
+.nav-icon {
+  font-size: 1.25rem;
+}
+
+/* --- Laptop / Tablet (ab 768px): Seitenleiste links --- */
+
+@media (min-width: 768px) {
+  .app-shell {
+    grid-template-columns: 14rem 1fr;
+    grid-template-rows: auto 1fr;
+    grid-template-areas:
+      'header header'
+      'nav    main';
+  }
+
+  .app-nav {
+    flex-direction: column;
+    justify-content: flex-start;
+    gap: 0.25rem;
+    border-top: none;
+    border-right: 1px solid var(--color-border);
+    padding: 1rem 0.5rem;
+    position: static;
+  }
+
+  .nav-link {
+    flex-direction: row;
+    flex: 0 0 auto;
+    gap: 0.6rem;
+    font-size: 0.95rem;
+    padding: 0.6rem 0.75rem;
+    border-radius: 0.5rem;
+  }
+
+  .nav-link:hover {
+    background: var(--color-accent-soft);
+  }
+
+  .nav-link--active {
+    background: var(--color-accent-soft);
+  }
+
+  .app-main {
+    padding: 1.5rem 2rem;
+  }
+}
--- a/gerbil-manager-web/src/main.tsx
+++ b/gerbil-manager-web/src/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)
--- a/gerbil-manager-web/src/pages/BreedersPage.tsx
+++ b/gerbil-manager-web/src/pages/BreedersPage.tsx
@@ -0,0 +1,10 @@
+import { de } from '../strings/de'
+
+export default function BreedersPage() {
+  return (
+    <section>
+      <h2>{de.pages.breeders.title}</h2>
+      <p>{de.pages.breeders.comingSoon}</p>
+    </section>
+  )
+}
--- a/gerbil-manager-web/src/pages/GerbilsPage.tsx
+++ b/gerbil-manager-web/src/pages/GerbilsPage.tsx
@@ -0,0 +1,10 @@
+import { de } from '../strings/de'
+
+export default function GerbilsPage() {
+  return (
+    <section>
+      <h2>{de.pages.gerbils.title}</h2>
+      <p>{de.pages.gerbils.comingSoon}</p>
+    </section>
+  )
+}
--- a/gerbil-manager-web/src/pages/HomePage.tsx
+++ b/gerbil-manager-web/src/pages/HomePage.tsx
@@ -0,0 +1,10 @@
+import { de } from '../strings/de'
+
+export default function HomePage() {
+  return (
+    <section>
+      <h2>{de.pages.home.title}</h2>
+      <p>{de.pages.home.intro}</p>
+    </section>
+  )
+}
--- a/gerbil-manager-web/src/pages/LittersPage.tsx
+++ b/gerbil-manager-web/src/pages/LittersPage.tsx
@@ -0,0 +1,10 @@
+import { de } from '../strings/de'
+
+export default function LittersPage() {
+  return (
+    <section>
+      <h2>{de.pages.litters.title}</h2>
+      <p>{de.pages.litters.comingSoon}</p>
+    </section>
+  )
+}
--- a/gerbil-manager-web/src/pages/NotFoundPage.tsx
+++ b/gerbil-manager-web/src/pages/NotFoundPage.tsx
@@ -0,0 +1,12 @@
+import { Link } from 'react-router-dom'
+import { de } from '../strings/de'
+
+export default function NotFoundPage() {
+  return (
+    <section>
+      <h2>{de.pages.notFound.title}</h2>
+      <p>{de.pages.notFound.message}</p>
+      <Link to="/">{de.pages.notFound.backHome}</Link>
+    </section>
+  )
+}
--- a/gerbil-manager-web/src/strings/de.ts
+++ b/gerbil-manager-web/src/strings/de.ts
@@ -0,0 +1,57 @@
+/**
+ * Zentrale deutsche Texte der Anwendung.
+ * Alle für Benutzer sichtbaren Zeichenketten gehören hierher —
+ * niemals Texte direkt in Komponenten hartkodieren.
+ */
+export const de = {
+  app: {
+    title: 'Rennmaus-Manager',
+    tagline: 'Verwaltung für Rennmäuse, Würfe und Züchter',
+  },
+  nav: {
+    home: 'Start',
+    gerbils: 'Rennmäuse',
+    litters: 'Würfe',
+    breeders: 'Züchter',
+    openMenu: 'Menü öffnen',
+    closeMenu: 'Menü schließen',
+    mainNavigation: 'Hauptnavigation',
+  },
+  pages: {
+    home: {
+      title: 'Willkommen',
+      intro:
+        'Hier verwaltest du deine Rennmäuse, Würfe und Züchter. Wähle einen Bereich aus der Navigation.',
+    },
+    gerbils: {
+      title: 'Rennmäuse',
+      comingSoon: 'Die Rennmaus-Verwaltung entsteht gerade. Bald kannst du hier deine Tiere anlegen und pflegen.',
+    },
+    litters: {
+      title: 'Würfe',
+      comingSoon: 'Die Wurf-Verwaltung entsteht gerade. Bald kannst du hier Würfe dokumentieren.',
+    },
+    breeders: {
+      title: 'Züchter',
+      comingSoon: 'Die Züchter-Verwaltung entsteht gerade. Bald kannst du hier Züchter erfassen.',
+    },
+    notFound: {
+      title: 'Seite nicht gefunden',
+      message: 'Die angeforderte Seite existiert nicht.',
+      backHome: 'Zur Startseite',
+    },
+  },
+  api: {
+    errors: {
+      network: 'Verbindung zum Server fehlgeschlagen. Bitte später erneut versuchen.',
+      notFound: 'Der Eintrag wurde nicht gefunden.',
+      server: 'Auf dem Server ist ein Fehler aufgetreten.',
+      unknown: 'Ein unbekannter Fehler ist aufgetreten.',
+    },
+  },
+  common: {
+    loading: 'Lädt …',
+  },
+} as const
+
+export type Strings = typeof de