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/.gitignore
+++ b/gerbil-manager-web/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/gerbil-manager-web/Dockerfile
+++ b/gerbil-manager-web/Dockerfile
@@ -0,0 +1,25 @@
+# Build-Stufe: Vite-Produktionsbuild
+FROM node:22-alpine AS build
+WORKDIR /app
+COPY gerbil-manager-web/package.json gerbil-manager-web/package-lock.json ./
+RUN npm ci
+COPY gerbil-manager-web/ .
+# Basis-URL der API (zur Build-Zeit eingebettet; Browser erreicht die API über den Host)
+ARG VITE_API_BASE_URL=http://localhost:80
+ENV VITE_API_BASE_URL=$VITE_API_BASE_URL
+RUN npm run build
+
+# Laufzeit-Stufe: statische Auslieferung über nginx
+FROM nginx:alpine
+COPY --from=build /app/dist /usr/share/nginx/html
+# SPA-Fallback: alle Pfade auf index.html umleiten (react-router)
+RUN printf 'server {\n\
+    listen 3000;\n\
+    root /usr/share/nginx/html;\n\
+    index index.html;\n\
+    location / {\n\
+        try_files $uri $uri/ /index.html;\n\
+    }\n\
+}\n' > /etc/nginx/conf.d/default.conf
+EXPOSE 3000
+CMD ["nginx", "-g", "daemon off;"]
--- a/gerbil-manager-web/README.md
+++ b/gerbil-manager-web/README.md
@@ -0,0 +1,33 @@
+# gerbil-manager-web
+
+Frontend des Rennmaus-Managers — React + TypeScript + Vite, mobile-first (Smartphone und Laptop).
+
+## Entwicklung
+
+```bash
+npm install
+npm run dev
+```
+
+Erwartet die laufende GerbilManagerWebAPI unter `http://localhost:5179`
+(Profil `http` in `GerbilManagerWebAPI/Properties/launchSettings.json`).
+
+## Konfiguration
+
+| Variable | Standard | Beschreibung |
+|---|---|---|
+| `VITE_API_BASE_URL` | `http://localhost:5179` | Basis-URL der GerbilManagerWebAPI |
+
+## Konventionen
+
+- **Alle für Benutzer sichtbaren Texte sind Deutsch** und liegen zentral in
+  `src/strings/de.ts` — keine Texte direkt in Komponenten hartkodieren.
+- API-Zugriffe laufen über `src/api/client.ts`.
+- Routen werden in `src/App.tsx` registriert, Seiten liegen in `src/pages/`.
+
+## Build
+
+```bash
+npm run build
+npm run preview
+```
--- a/gerbil-manager-web/eslint.config.js
+++ b/gerbil-manager-web/eslint.config.js
@@ -0,0 +1,22 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      globals: globals.browser,
+    },
+  },
+])
--- a/gerbil-manager-web/index.html
+++ b/gerbil-manager-web/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Verwaltung für Rennmäuse, Würfe und Züchter" />
+    <title>Rennmaus-Manager</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/gerbil-manager-web/package-lock.json
+++ b/gerbil-manager-web/package-lock.json
--- a/gerbil-manager-web/package.json
+++ b/gerbil-manager-web/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "gerbil-manager-web",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
+    "react-router-dom": "^7.17.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@types/node": "^24.12.3",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "eslint": "^10.3.0",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.6.0",
+    "typescript": "~6.0.2",
+    "typescript-eslint": "^8.59.2",
+    "vite": "^8.0.12"
+  }
+}
--- a/gerbil-manager-web/public/favicon.svg
+++ b/gerbil-manager-web/public/favicon.svg
--- 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
--- a/gerbil-manager-web/tsconfig.app.json
+++ b/gerbil-manager-web/tsconfig.app.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023", "DOM"],
+    "module": "esnext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}
--- a/gerbil-manager-web/tsconfig.json
+++ b/gerbil-manager-web/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
--- a/gerbil-manager-web/tsconfig.node.json
+++ b/gerbil-manager-web/tsconfig.node.json
@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023"],
+    "module": "esnext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/gerbil-manager-web/vite.config.ts
+++ b/gerbil-manager-web/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})