LITTER-MORTALITY-FE: deathsWithin8Weeks Feld im Wurf-Formular und -Detail (gated auf Pam BE)

gerbil-manager-web/e2e/farbschlag-sync.spec.ts

@@ -0,0 +1,79 @@
+/** FARBSCHLAG-GENOTYPE-SYNC: Bidirektionale Sync im Tier-Formular. */
+import { de, expect, skipUnlessMock, test } from './fixtures'
+
+const t = de.pages.gerbils
+
+test('Farbschlag-Auswahl füllt Gencode automatisch aus', async ({ page }) => {
+  skipUnlessMock()
+  await page.goto('/rennmaeuse/neu')
+
+  const farbschlagSelect = page
+    .locator('label.field', { has: page.locator(`span:text-is("${t.fields.colorVariety}")`) })
+    .locator('select')
+  const genotypeInput = page
+    .locator('label.field', { has: page.locator(`span:text-is("${t.fields.genotype}")`) })
+    .locator('input')
+
+  // Vor der Auswahl ist das Gencode-Feld leer.
+  await expect(genotypeInput).toHaveValue('')
+
+  // 'Agouti' wählen → Gencode wird automatisch befüllt.
+  await farbschlagSelect.selectOption({ label: 'Agouti' })
+  await expect(genotypeInput).toHaveValue('AA CC DD EE GG PP spsp rere')
+})
+
+test('Gencode-Eingabe aktualisiert die Farbschlag-Auswahl', async ({ page }) => {
+  skipUnlessMock()
+  await page.goto('/rennmaeuse/neu')
+
+  const farbschlagSelect = page
+    .locator('label.field', { has: page.locator(`span:text-is("${t.fields.colorVariety}")`) })
+    .locator('select')
+  const genotypeInput = page
+    .locator('label.field', { has: page.locator(`span:text-is("${t.fields.genotype}")`) })
+    .locator('input')
+
+  // Gencode für Schwarz eintippen → Farbschlag-Select springt auf 'Schwarz'.
+  await genotypeInput.fill('aa CC DD EE GG PP spsp rere')
+  await expect(farbschlagSelect).toHaveValue('cv-schwarz')
+})
+
+test('Gencode ohne passende Farbschlag-Auswahl leert das Dropdown', async ({ page }) => {
+  skipUnlessMock()
+  await page.goto('/rennmaeuse/neu')
+
+  const farbschlagSelect = page
+    .locator('label.field', { has: page.locator(`span:text-is("${t.fields.colorVariety}")`) })
+    .locator('select')
+  const genotypeInput = page
+    .locator('label.field', { has: page.locator(`span:text-is("${t.fields.genotype}")`) })
+    .locator('input')
+
+  // Zuerst eine bekannte Farbe wählen, damit das Select belegt ist.
+  await farbschlagSelect.selectOption({ label: 'Agouti' })
+  await expect(farbschlagSelect).not.toHaveValue('')
+
+  // Marder-Genotyp: bekannte Farbe im Engine, aber NICHT im Mock-Dropdown
+  // → Select wird auf '' (kein Eintrag) zurückgesetzt.
+  await genotypeInput.fill('aa cchmcchm DD EE GG PP spsp rere')
+  await expect(farbschlagSelect).toHaveValue('')
+})
+
+test('Unbekannter Genotyp leert das Farbschlag-Dropdown (Unbekannt-Fall)', async ({ page }) => {
+  skipUnlessMock()
+  await page.goto('/rennmaeuse/neu')
+
+  const farbschlagSelect = page
+    .locator('label.field', { has: page.locator(`span:text-is("${t.fields.colorVariety}")`) })
+    .locator('select')
+  const genotypeInput = page
+    .locator('label.field', { has: page.locator(`span:text-is("${t.fields.genotype}")`) })
+    .locator('input')
+
+  await farbschlagSelect.selectOption({ label: 'Blau' })
+  await expect(farbschlagSelect).not.toHaveValue('')
+
+  // aa CC dd EE gg pp → Unbekannter Farbschlag (nicht im Katalog) → Select leert sich.
+  await genotypeInput.fill('aa CC dd EE gg pp spsp rere')
+  await expect(farbschlagSelect).toHaveValue('')
+})

gerbil-manager-web/e2e/litter-mortality.spec.ts

@@ -0,0 +1,46 @@
+/** LITTER-MORTALITY: deathsWithin8Weeks im Wurf-Formular und -Detail. */
+import { de, expect, skipUnlessMock, test, uniqueName } from './fixtures'
+
+const t = de.pages.litters
+
+test('Wurf-Detail zeigt Frühverluste wenn gesetzt', async ({ page }) => {
+  skipUnlessMock()
+  await page.goto('/wuerfe/w-kruemel')
+  await expect(page.getByRole('heading', { name: 'Wurf K' })).toBeVisible()
+  // Frühverluste-Zeile im def-list: Label + Wert '1'
+  const mortalityRow = page.locator('.def-row', {
+    has: page.locator('dt', { hasText: t.fields.deathsWithin8Weeks }),
+  })
+  await expect(mortalityRow).toBeVisible()
+  await expect(mortalityRow.locator('dd')).toHaveText('1')
+})
+
+test('Wurf-Formular speichert Frühverluste und zeigt sie im Detail', async ({ page }) => {
+  skipUnlessMock()
+  const name = uniqueName('WurfM')
+  await page.goto('/wuerfe/neu')
+  await page.getByLabel(`${t.fields.name} *`).fill(name)
+  await page.getByLabel(`${t.fields.date} *`).fill('2026-01-10')
+
+  // Frühverluste eingeben
+  await page.getByLabel(t.fields.deathsWithin8Weeks).fill('2')
+  await expect(page.getByText(t.validation.deathsExceedTotalBorn)).not.toBeVisible()
+
+  await page.getByRole('button', { name: t.form.save, exact: true }).click()
+  await expect(page.getByRole('heading', { name })).toBeVisible()
+  // Frühverluste-Zeile im Detail
+  const mortalityRow = page.locator('.def-row', {
+    has: page.locator('dt', { hasText: t.fields.deathsWithin8Weeks }),
+  })
+  await expect(mortalityRow).toBeVisible()
+  await expect(mortalityRow.locator('dd')).toHaveText('2')
+})
+
+test('Frühverluste > Wurfstärke zeigt Warnmeldung', async ({ page }) => {
+  skipUnlessMock()
+  await page.goto('/wuerfe/neu')
+
+  await page.getByLabel(t.fields.totalBorn).fill('3')
+  await page.getByLabel(t.fields.deathsWithin8Weeks).fill('5')
+  await expect(page.getByText(t.validation.deathsExceedTotalBorn)).toBeVisible()
+})

gerbil-manager-web/e2e/mock-data.ts

@@ -156,7 +156,7 @@ export function seedDb(): MockDb {
   ]
 
   const litters: Litter[] = [
-    { id: 'w-kruemel', name: 'Wurf K', date: '2025-03-12', totalBorn: 5, expectedGoHomeDate: '2025-04-16', notes: null, fatherId: 'fridolin', motherId: 'luna' },
+    { id: 'w-kruemel', name: 'Wurf K', date: '2025-03-12', totalBorn: 5, expectedGoHomeDate: '2025-04-16', notes: null, fatherId: 'fridolin', motherId: 'luna', deathsWithin8Weeks: 1 },
     { id: 'w-fridolin', name: 'Wurf F', date: '2023-05-01', totalBorn: 4, expectedGoHomeDate: null, notes: null, fatherId: 'balu', motherId: 'maja' },
     { id: 'w-luna', name: 'Wurf L', date: '2023-08-15', totalBorn: 6, expectedGoHomeDate: null, notes: null, fatherId: 'karlsson', motherId: 'smilla' },
     { id: 'w-balu', name: 'Wurf B', date: '2021-04-20', totalBorn: 3, expectedGoHomeDate: null, notes: null, fatherId: 'anton', motherId: 'greta' },

gerbil-manager-web/e2e/stammbaum.spec.ts

@@ -137,3 +137,20 @@ test('Kein Würfe-Panel wenn Wurzeltier keine Würfe hat (STAMMBAUM-LITTERS)', a
   await expect(page.locator('.pedigree-card').first()).toBeVisible()
   await expect(page.locator('.stammbaum-litters-panel')).not.toBeVisible()
 })
+
+test('Knoten-Karte zeigt volles Geburtsdatum (STAMMBAUM-FULLDATE)', async ({ page }) => {
+  skipUnlessMock()
+  // Krümel: dateOfBirth '2025-03-12' → formatDate → '12.03.2025'
+  await page.goto('/rennmaeuse/kruemel/stammbaum')
+  await expect(page.locator('.pedigree-card').first()).toBeVisible()
+  await expect(page.locator('.pedigree-card__year').first()).toContainText('12.03.2025')
+})
+
+test('Gencode-Chip zeigt Genotyp statt Farbname (STAMMBAUM-GENCODE)', async ({ page }) => {
+  skipUnlessMock()
+  // Fridolin ist Vater von Krümel — genotype 'aa CC DD EE GG PP spsp rere'
+  await page.goto('/rennmaeuse/kruemel/stammbaum')
+  await expect(page.locator('.pedigree-card').first()).toBeVisible()
+  const fridolinCard = page.locator('.pedigree-card').filter({ hasText: 'Fridolin' })
+  await expect(fridolinCard.locator('.pedigree-chip')).toContainText('aa CC')
+})

gerbil-manager-web/src/api/types.ts

@@ -122,6 +122,8 @@ export interface Litter {
   notes?: string | null
   fatherId: string | null
   motherId: string | null
+  /** LITTER-MORTALITY: pups that died within the first 8 weeks. */
+  deathsWithin8Weeks?: number | null
 }
 
 /** Payload for POST /litters. */
@@ -133,6 +135,7 @@ export interface CreateLitter {
   notes?: string | null
   fatherId?: string | null
   motherId?: string | null
+  deathsWithin8Weeks?: number | null
 }
 
 export type UpdateLitter = Partial<CreateLitter>

gerbil-manager-web/src/components/AppShell.tsx

@@ -1,19 +1,21 @@
 import { useState } from 'react'
+import type { ReactNode } from 'react'
 import { NavLink, Outlet } from 'react-router-dom'
 import { de } from '../strings/de'
+import GerbilIcon from './GerbilIcon'
 import './appShell.css'
 
 interface NavItem {
   to: string
   label: string
-  icon: string
+  icon: ReactNode
   end?: boolean
 }
 
 // Primary items are always visible in the phone bottom bar; secondary items
 // move into the "Mehr" sheet on phones and appear inline in the desktop sidebar.
 const PRIMARY: NavItem[] = [
-  { to: '/rennmaeuse', label: de.nav.gerbils, icon: '🐭' },
+  { to: '/rennmaeuse', label: de.nav.gerbils, icon: <GerbilIcon size="1.25em" /> },
   { to: '/wuerfe', label: de.nav.litters, icon: '🍼' },
   { to: '/genetik', label: de.nav.genetics, icon: '🧬' },
 ]
@@ -46,7 +48,7 @@ export default function AppShell() {
   return (
     <div className="app-shell">
       <header className="app-header">
-        <span className="app-logo" aria-hidden="true">🐭</span>
+        <span className="app-logo" aria-hidden="true"><GerbilIcon size="1.5rem" /></span>
         <h1 className="app-title">{de.app.title}</h1>
       </header>
 

gerbil-manager-web/src/components/GerbilIcon.tsx

@@ -0,0 +1,35 @@
+import type { CSSProperties } from 'react'
+
+interface Props {
+  size?: string | number
+  style?: CSSProperties
+  className?: string
+}
+
+/** Reusable gerbil silhouette icon — upright sitting pose, long tail with tuft. fill=currentColor. */
+export default function GerbilIcon({ size = '1em', style, className }: Props) {
+  return (
+    <svg
+      viewBox="0 0 64 64"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      style={{ display: 'inline-block', verticalAlign: '-0.125em', flexShrink: 0, ...style }}
+      className={className}
+      role="img"
+      aria-label="Rennmaus"
+    >
+      {/* body — sitting upright */}
+      <path d="M40 14c6 0 11 5 11 12 0 4-2 7-2 11 0 10-6 16-15 16-8 0-14-6-14-15 0-13 9-24 20-24z" />
+      {/* ear */}
+      <circle cx="46" cy="15" r="5" />
+      {/* hind paw */}
+      <ellipse cx="24" cy="52" rx="9" ry="3.5" />
+      {/* long curved tail with tuft */}
+      <path d="M16 51c-7 1-13-2-15-9-1-4 0-8 3-10 1 3 1 6 3 8 3 3 7 4 11 4z" />
+      {/* front paw */}
+      <path d="M30 45c3 0 5 1 5 4-3 1-6 1-7-2 0-1 1-2 2-2z" />
+    </svg>
+  )
+}

gerbil-manager-web/src/pages/GerbilFormPage.tsx

@@ -6,7 +6,7 @@ import { listColorVarieties, listContacts, listEnclosures, listLitters } from '.
 import { GENDERS, GERBIL_STATUSES, type CreateGerbil, type Gender, type GerbilStatus } from '../api/types'
 import { useApi, useMutation } from '../hooks/useApi'
 import { genderLabel, statusLabel } from '../format/labels'
-import { fromDisplayString } from '../genetics'
+import { fromDisplayString, genotypeToFarbschlag, UNKNOWN_FARBSCHLAG } from '../genetics'
 import FarbschlagImage from '../components/FarbschlagImage'
 import NameSuggestPanel from '../components/NameSuggestPanel'
 import '../components/NameSuggestPanel.css'
@@ -307,7 +307,14 @@ export default function GerbilFormPage() {
           <span className="farbschlag-value">
             <select
               value={form.colorVarietyId}
-              onChange={(e) => set('colorVarietyId', e.target.value)}
+              onChange={(e) => {
+                const newId = e.target.value
+                set('colorVarietyId', newId)
+                if (newId) {
+                  const variety = (colorVarieties.data ?? []).find((cv) => cv.id === newId)
+                  if (variety?.canonicalGenotype) set('genotype', variety.canonicalGenotype)
+                }
+              }}
             >
               <option value="">{t.form.none}</option>
               {(colorVarieties.data ?? []).map((cv) => (
@@ -387,7 +394,23 @@ export default function GerbilFormPage() {
             className="input"
             value={form.genotype}
             placeholder="Aa CC Dd EE GG Pp Spsp rere"
-            onChange={(e) => set('genotype', e.target.value)}
+            onChange={(e) => {
+              const val = e.target.value
+              set('genotype', val)
+              if (val.trim() !== '' && isGenotypeValid(val)) {
+                try {
+                  const name = genotypeToFarbschlag(fromDisplayString(val))
+                  if (name === UNKNOWN_FARBSCHLAG) {
+                    set('colorVarietyId', '')
+                  } else {
+                    const match = (colorVarieties.data ?? []).find((cv) => cv.name === name)
+                    set('colorVarietyId', match?.id ?? '')
+                  }
+                } catch {
+                  // invalid while typing — leave colorVarietyId unchanged
+                }
+              }
+            }}
             aria-invalid={Boolean(errors.genotype)}
           />
           <small className={errors.genotype ? 'error-text' : 'muted'}>

gerbil-manager-web/src/pages/StammbaumPage.tsx

@@ -28,6 +28,7 @@ import { getInbreedingCoefficient } from '../api/pedigree'
 import type { Gender, Gerbil, Litter } from '../api/types'
 import { useApi } from '../hooks/useApi'
 import { formatDate, genderLabel } from '../format/labels'
+import GerbilIcon from '../components/GerbilIcon'
 import { UNKNOWN_FARBSCHLAG, fromDisplayString, genotypeToFarbschlag, toDisplayString } from '../genetics'
 import {
   DEFAULT_GENERATIONS,
@@ -379,7 +380,7 @@ function PedigreeCard({
   const t = de.pages.stammbaum
   const g = node.gerbil
   const chip = farbschlag ? chipColorFor(farbschlag) : null
-  const year = g.dateOfBirth ? g.dateOfBirth.slice(0, 4) : null
+  const dob = g.dateOfBirth ? formatDate(g.dateOfBirth) : null
   return (
     <div
       className={isRoot ? 'pedigree-card pedigree-card--root' : 'pedigree-card'}
@@ -389,7 +390,7 @@ function PedigreeCard({
     >
       {/* Foto-Platzhalter — echte Fotos kommen mit FEAT-6. */}
       <div className="pedigree-card__photo" aria-hidden="true">
-        🐭
+        <GerbilIcon size="1.6rem" />
       </div>
       <div className="pedigree-card__body">
         <div className="pedigree-card__name">
@@ -406,11 +407,12 @@ function PedigreeCard({
           <span
             className="pedigree-chip"
             style={chip ? { background: chip.bg, color: chip.fg } : undefined}
+            title={farbschlag}
           >
-            {farbschlag}
+            {g.genotype || farbschlag}
           </span>
         )}
-        {year && <span className="pedigree-card__year">* {year}</span>}
+        {dob && <span className="pedigree-card__year">* {dob}</span>}
       </div>
       {node.expandable && (
         <button

gerbil-manager-web/src/pages/WurfDetailPage.tsx

@@ -92,6 +92,12 @@ export default function WurfDetailPage() {
             {l.totalBorn != null ? ` / ${l.totalBorn}` : ''}
           </dd>
         </div>
+        {l.deathsWithin8Weeks != null && (
+          <div className="def-row">
+            <dt>{t.fields.deathsWithin8Weeks}</dt>
+            <dd>{l.deathsWithin8Weeks}</dd>
+          </div>
+        )}
         <div className="def-row">
           <dt>{t.fields.expectedGoHomeDate}</dt>
           <dd>{formatDate(l.expectedGoHomeDate)}</dd>

gerbil-manager-web/src/pages/WurfFormPage.tsx

@@ -16,6 +16,7 @@ interface FormState {
   motherId: string
   motherName: string
   totalBorn: string
+  deathsWithin8Weeks: string
   expectedGoHomeDate: string
   notes: string
 }
@@ -28,6 +29,7 @@ const EMPTY: FormState = {
   motherId: '',
   motherName: '',
   totalBorn: '',
+  deathsWithin8Weeks: '',
   expectedGoHomeDate: '',
   notes: '',
 }
@@ -75,6 +77,7 @@ export default function WurfFormPage() {
       motherId: l.motherId ?? '',
       motherName: l.motherId ? (nameById.get(l.motherId) || de.pages.gerbils.nameless) : '',
       totalBorn: l.totalBorn != null ? String(l.totalBorn) : '',
+      deathsWithin8Weeks: l.deathsWithin8Weeks != null ? String(l.deathsWithin8Weeks) : '',
       expectedGoHomeDate: l.expectedGoHomeDate ?? '',
       notes: l.notes ?? '',
     })
@@ -109,12 +112,14 @@ export default function WurfFormPage() {
     e.preventDefault()
     if (!validate()) return
     const totalBornNum = form.totalBorn.trim() === '' ? null : Number(form.totalBorn)
+    const deathsNum = form.deathsWithin8Weeks.trim() === '' ? null : Number(form.deathsWithin8Weeks)
     const body: CreateLitter = {
       name: form.name.trim(),
       date: form.date,
       fatherId: nn(form.fatherId),
       motherId: nn(form.motherId),
       totalBorn: totalBornNum != null && Number.isFinite(totalBornNum) ? totalBornNum : null,
+      deathsWithin8Weeks: deathsNum != null && Number.isFinite(deathsNum) ? deathsNum : null,
       expectedGoHomeDate: nn(form.expectedGoHomeDate),
       notes: nn(form.notes),
     }
@@ -215,6 +220,26 @@ export default function WurfFormPage() {
           />
         </label>
 
+        <label className="field">
+          <span>{t.fields.deathsWithin8Weeks}</span>
+          <input
+            type="number"
+            min="0"
+            className="input"
+            value={form.deathsWithin8Weeks}
+            onChange={(e) => set('deathsWithin8Weeks', e.target.value)}
+          />
+          {(() => {
+            const d = Number(form.deathsWithin8Weeks)
+            const tb = Number(form.totalBorn)
+            return form.deathsWithin8Weeks.trim() !== '' &&
+              form.totalBorn.trim() !== '' &&
+              d > tb ? (
+              <small className="error-text">{t.validation.deathsExceedTotalBorn}</small>
+            ) : null
+          })()}
+        </label>
+
         <label className="field">
           <span>{t.fields.expectedGoHomeDate}</span>
           <input

gerbil-manager-web/src/pages/stammbaum.css

@@ -285,14 +285,15 @@
 .pedigree-chip {
   align-self: flex-start;
   max-width: 100%;
-  font-size: 0.68rem;
+  font-size: 0.62rem;
   padding: 0.1rem 0.45rem;
   border-radius: 1rem;
   background: var(--color-accent-soft);
   color: var(--color-accent);
-  white-space: nowrap;
+  white-space: normal;
+  word-break: break-word;
   overflow: hidden;
-  text-overflow: ellipsis;
+  line-height: 1.3;
 }
 
 .pedigree-card__year {

gerbil-manager-web/src/strings/de.ts

@@ -172,6 +172,7 @@ export const de = {
         father: 'Vater',
         mother: 'Mutter',
         totalBorn: 'Wurfstärke',
+        deathsWithin8Weeks: 'In den ersten 8 Wochen verstorben',
         expectedGoHomeDate: 'Voraussichtliches Abgabedatum',
         notes: 'Notizen',
       },
@@ -204,6 +205,7 @@ export const de = {
         nameRequired: 'Bitte eine Bezeichnung eingeben.',
         dateRequired: 'Bitte ein Wurfdatum angeben.',
         invalidParentGender: 'Der Vater muss männlich und die Mutter weiblich sein.',
+        deathsExceedTotalBorn: 'Die Anzahl der Frühverluste darf die Wurfstärke nicht überschreiten.',
       },
       // Zuchtpaar-Übersicht
       pairs: {