STAMMBAUM-AVATAR: Tier-Foto als Avatar in Pedigree-Karte, GerbilIcon-Fallback (profilePhotoUrl-Contract)

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

@@ -1,46 +0,0 @@
-/** 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

@@ -108,6 +108,7 @@ function gerbil(
     notes: null,
     // BESTAND-FILTER: default = eigener Bestand; einzelne externe Ahnen unten gesetzt.
     isResident: true,
+    profilePhotoUrl: null,
   }
 }
 
@@ -120,7 +121,7 @@ export function seedDb(): MockDb {
       originContactId: 'con-meier',
       originBreeder: 'Clan-Kleine-Chaoten',
     },
-    { ...gerbil('fridolin', 'Fridolin', 'male', '2023-05-01', 'w-fridolin', 'cv-schwarz', 'aa CC DD EE GG PP spsp rere'), enclosureId: 'enc-gross', originBreeder: 'Zoohandlung Meier' },
+    { ...gerbil('fridolin', 'Fridolin', 'male', '2023-05-01', 'w-fridolin', 'cv-schwarz', 'aa CC DD EE GG PP spsp rere'), enclosureId: 'enc-gross', originBreeder: 'Zoohandlung Meier', profilePhotoUrl: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==' },
     gerbil('luna', 'Luna', 'female', '2023-08-15', 'w-luna', 'cv-gold', 'AA CC DD EE GG pp spsp rere'),
     gerbil('balu', 'Balu', 'male', '2021-04-20', 'w-balu', 'cv-agouti'),
     gerbil('maja', 'Maja', 'female', '2021-06-11', null, 'cv-schwarz-schecke', 'aa CC DD EE GG PP Spsp rere'),
@@ -156,7 +157,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', deathsWithin8Weeks: 1 },
+    { id: 'w-kruemel', name: 'Wurf K', date: '2025-03-12', totalBorn: 5, expectedGoHomeDate: '2025-04-16', notes: null, fatherId: 'fridolin', motherId: 'luna' },
     { 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

@@ -154,3 +154,20 @@ test('Gencode-Chip zeigt Genotyp statt Farbname (STAMMBAUM-GENCODE)', async ({ p
   const fridolinCard = page.locator('.pedigree-card').filter({ hasText: 'Fridolin' })
   await expect(fridolinCard.locator('.pedigree-chip')).toContainText('aa CC')
 })
+
+test('Tier mit Foto zeigt Avatar-Bild, Tier ohne Foto zeigt Rennmaus-Icon (STAMMBAUM-AVATAR)', async ({ page }) => {
+  skipUnlessMock()
+  // Fridolin hat profilePhotoUrl (data URI) → <img.pedigree-card__avatar> sichtbar
+  // Krümel hat profilePhotoUrl=null → kein img, SVG-Icon sichtbar
+  await page.goto('/rennmaeuse/kruemel/stammbaum')
+  await expect(page.locator('.pedigree-card').first()).toBeVisible()
+
+  // Fridolin ist Vater von Krümel → seine Karte enthält ein <img>
+  const fridolinCard = page.locator('.pedigree-card').filter({ hasText: 'Fridolin' })
+  await expect(fridolinCard.locator('img.pedigree-card__avatar')).toBeVisible()
+
+  // Krümel (root) hat kein Foto → SVG-Icon im Foto-Slot
+  const rootCard = page.locator('.pedigree-card.pedigree-card--root')
+  await expect(rootCard.locator('img.pedigree-card__avatar')).not.toBeAttached()
+  await expect(rootCard.locator('svg[role="img"]')).toBeVisible()
+})

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

@@ -56,6 +56,8 @@ export interface Gerbil {
   isResident?: boolean
   /** FORM-FIELDS-1: true=gehörlos, false=hörend, null=unbekannt. */
   isDeaf?: boolean | null
+  /** STAMMBAUM-AVATAR: URL des Profilfotos (erstes Foto nach sortOrder); null = kein Foto. API-relativ oder absolut. */
+  profilePhotoUrl?: string | null
 }
 
 /** Payload for POST /gerbils. */
@@ -122,8 +124,6 @@ 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. */
@@ -135,7 +135,6 @@ export interface CreateLitter {
   notes?: string | null
   fatherId?: string | null
   motherId?: string | null
-  deathsWithin8Weeks?: number | null
 }
 
 export type UpdateLitter = Partial<CreateLitter>

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

@@ -21,7 +21,7 @@ import { Link, useNavigate, useParams } from 'react-router-dom'
 import Tree from 'react-d3-tree'
 import type { CustomNodeElementProps, Point, RawNodeDatum } from 'react-d3-tree'
 import { de } from '../strings/de'
-import { ApiError } from '../api/client'
+import { API_BASE_URL, ApiError } from '../api/client'
 import { listLitters } from '../api/litters'
 import { listColorVarieties } from '../api/lookups'
 import { getInbreedingCoefficient } from '../api/pedigree'
@@ -381,6 +381,14 @@ function PedigreeCard({
   const g = node.gerbil
   const chip = farbschlag ? chipColorFor(farbschlag) : null
   const dob = g.dateOfBirth ? formatDate(g.dateOfBirth) : null
+  const [imgError, setImgError] = useState(false)
+  useEffect(() => setImgError(false), [g.id])
+  const photoUrl =
+    !imgError && g.profilePhotoUrl
+      ? /^(https?:|data:|\/\/)/.test(g.profilePhotoUrl)
+        ? g.profilePhotoUrl
+        : `${API_BASE_URL}${g.profilePhotoUrl}`
+      : null
   return (
     <div
       className={isRoot ? 'pedigree-card pedigree-card--root' : 'pedigree-card'}
@@ -388,9 +396,17 @@ function PedigreeCard({
       role={isRoot ? undefined : 'button'}
       title={isRoot ? undefined : t.tapHint}
     >
-      {/* Foto-Platzhalter — echte Fotos kommen mit FEAT-6. */}
-      <div className="pedigree-card__photo" aria-hidden="true">
-        <GerbilIcon size="1.6rem" />
+      <div className="pedigree-card__photo" aria-hidden={!photoUrl || undefined}>
+        {photoUrl ? (
+          <img
+            src={photoUrl}
+            alt={g.name || ''}
+            className="pedigree-card__avatar"
+            onError={() => setImgError(true)}
+          />
+        ) : (
+          <GerbilIcon size="1.6rem" aria-hidden="true" />
+        )}
       </div>
       <div className="pedigree-card__body">
         <div className="pedigree-card__name">

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

@@ -92,12 +92,6 @@ 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,7 +16,6 @@ interface FormState {
   motherId: string
   motherName: string
   totalBorn: string
-  deathsWithin8Weeks: string
   expectedGoHomeDate: string
   notes: string
 }
@@ -29,7 +28,6 @@ const EMPTY: FormState = {
   motherId: '',
   motherName: '',
   totalBorn: '',
-  deathsWithin8Weeks: '',
   expectedGoHomeDate: '',
   notes: '',
 }
@@ -77,7 +75,6 @@ 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 ?? '',
     })
@@ -112,14 +109,12 @@ 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),
     }
@@ -220,26 +215,6 @@ 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

@@ -236,6 +236,7 @@
   width: 42px;
   height: 42px;
   border-radius: 50%;
+  overflow: hidden;
   background: var(--color-accent-soft);
   display: flex;
   align-items: center;
@@ -243,6 +244,13 @@
   font-size: 1.4rem;
 }
 
+.pedigree-card__avatar {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
 .pedigree-card__body {
   min-width: 0;
   display: flex;

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

@@ -172,7 +172,6 @@ export const de = {
         father: 'Vater',
         mother: 'Mutter',
         totalBorn: 'Wurfstärke',
-        deathsWithin8Weeks: 'In den ersten 8 Wochen verstorben',
         expectedGoHomeDate: 'Voraussichtliches Abgabedatum',
         notes: 'Notizen',
       },
@@ -205,7 +204,6 @@ 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: {