FEAT-6: Gesundheit/Gewicht/Fotos tab components + hand-rolled SVG LineChart (no chart dependency)

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

@@ -0,0 +1,217 @@
+/**
+ * FEAT-6: Gesundheit-Tab — Gesundheitseinträge eines Tieres:
+ * Liste (Datum absteigend) + Inline-Formular zum Anlegen/Bearbeiten,
+ * Löschen mit Bestätigung. Deutsch durchgehend.
+ */
+import { useState, type FormEvent } from 'react'
+import { de } from '../strings/de'
+import {
+  createHealthRecord,
+  deleteHealthRecord,
+  listHealthRecords,
+  updateHealthRecord,
+  HEALTH_RECORD_TYPES,
+  type CreateHealthRecord,
+  type HealthRecord,
+  type HealthRecordType,
+} from '../api/healthRecords'
+import { useApi, useMutation } from '../hooks/useApi'
+import { formatDate } from '../format/labels'
+import { todayISO } from '../format/dates'
+
+interface FormState {
+  date: string
+  type: HealthRecordType
+  description: string
+  veterinarian: string
+}
+
+const emptyForm = (): FormState => ({
+  date: todayISO(),
+  type: 'Examination',
+  description: '',
+  veterinarian: '',
+})
+
+export default function GerbilHealthTab({ gerbilId }: { gerbilId: string }) {
+  const t = de.pages.tierTabs.health
+  const ta = de.pages.tierTabs.actions
+
+  const records = useApi(() => listHealthRecords(gerbilId), [gerbilId])
+
+  // editing: null = kein Formular, 'new' = anlegen, sonst Record-Id (bearbeiten)
+  const [editing, setEditing] = useState<string | null>(null)
+  const [form, setForm] = useState<FormState>(emptyForm)
+  const [errors, setErrors] = useState<Partial<Record<keyof FormState, string>>>({})
+
+  const save = useMutation((body: CreateHealthRecord) =>
+    editing && editing !== 'new'
+      ? updateHealthRecord(editing, body)
+      : createHealthRecord(body),
+  )
+  const removal = useMutation((recordId: string) => deleteHealthRecord(recordId))
+
+  const set = <K extends keyof FormState>(key: K, value: FormState[K]) =>
+    setForm((f) => ({ ...f, [key]: value }))
+
+  function openCreate() {
+    setForm(emptyForm())
+    setErrors({})
+    setEditing('new')
+  }
+
+  function openEdit(r: HealthRecord) {
+    setForm({
+      date: r.date,
+      type: r.type,
+      description: r.description,
+      veterinarian: r.veterinarian ?? '',
+    })
+    setErrors({})
+    setEditing(r.id)
+  }
+
+  async function onSubmit(e: FormEvent) {
+    e.preventDefault()
+    const next: Partial<Record<keyof FormState, string>> = {}
+    if (!form.date) next.date = t.validation.dateRequired
+    if (form.description.trim() === '') next.description = t.validation.descriptionRequired
+    setErrors(next)
+    if (Object.keys(next).length > 0) return
+
+    await save.run({
+      gerbilId,
+      date: form.date,
+      type: form.type,
+      description: form.description.trim(),
+      veterinarian: form.veterinarian.trim() === '' ? null : form.veterinarian.trim(),
+    })
+    setEditing(null)
+    records.reload()
+  }
+
+  async function onDelete(recordId: string) {
+    if (!window.confirm(t.deleteConfirm)) return
+    await removal.run(recordId)
+    records.reload()
+  }
+
+  return (
+    <div>
+      {editing === null && (
+        <button type="button" className="btn btn--primary" onClick={openCreate}>
+          + {t.newButton}
+        </button>
+      )}
+
+      {editing !== null && (
+        <form className="form" onSubmit={onSubmit} noValidate>
+          <h4>{editing === 'new' ? t.createTitle : t.editTitle}</h4>
+
+          <label className="field">
+            <span>{t.fields.date} *</span>
+            <input
+              type="date"
+              className="input"
+              value={form.date}
+              onChange={(e) => set('date', e.target.value)}
+              aria-invalid={Boolean(errors.date)}
+            />
+            {errors.date && <small className="error-text">{errors.date}</small>}
+          </label>
+
+          <label className="field">
+            <span>{t.fields.type}</span>
+            <select
+              value={form.type}
+              onChange={(e) => set('type', e.target.value as HealthRecordType)}
+            >
+              {HEALTH_RECORD_TYPES.map((ty) => (
+                <option key={ty} value={ty}>
+                  {t.typeLabels[ty]}
+                </option>
+              ))}
+            </select>
+          </label>
+
+          <label className="field">
+            <span>{t.fields.description} *</span>
+            <textarea
+              value={form.description}
+              onChange={(e) => set('description', e.target.value)}
+              aria-invalid={Boolean(errors.description)}
+            />
+            {errors.description && <small className="error-text">{errors.description}</small>}
+          </label>
+
+          <label className="field">
+            <span>{t.fields.veterinarian}</span>
+            <input
+              className="input"
+              value={form.veterinarian}
+              onChange={(e) => set('veterinarian', e.target.value)}
+            />
+          </label>
+
+          {save.error && <div className="alert alert--error">{save.error}</div>}
+
+          <div className="form-actions">
+            <button type="submit" className="btn btn--primary" disabled={save.pending}>
+              {save.pending ? ta.saving : ta.save}
+            </button>
+            <button type="button" className="btn" onClick={() => setEditing(null)}>
+              {ta.cancel}
+            </button>
+          </div>
+        </form>
+      )}
+
+      {records.loading && <p className="muted">{de.common.loading}</p>}
+      {records.error && (
+        <div className="alert alert--error">
+          <span>{records.error}</span>
+          <button type="button" className="btn" onClick={records.reload}>
+            {de.common.retry}
+          </button>
+        </div>
+      )}
+      {removal.error && <div className="alert alert--error">{removal.error}</div>}
+
+      {!records.loading && !records.error && (records.data ?? []).length === 0 && (
+        <p className="muted">{t.empty}</p>
+      )}
+
+      {(records.data ?? []).length > 0 && (
+        <ul className="card-list" style={{ marginTop: '1rem' }}>
+          {(records.data ?? []).map((r) => (
+            <li key={r.id} className="record-card">
+              <div className="record-card__head">
+                <span className="record-card__date">{formatDate(r.date)}</span>
+                <span className="badge">{t.typeLabels[r.type]}</span>
+              </div>
+              <p className="record-card__body">{r.description}</p>
+              {r.veterinarian && (
+                <p className="muted">
+                  {t.fields.veterinarian}: {r.veterinarian}
+                </p>
+              )}
+              <div className="record-card__actions">
+                <button type="button" className="btn" onClick={() => openEdit(r)}>
+                  {ta.edit}
+                </button>
+                <button
+                  type="button"
+                  className="btn btn--danger"
+                  onClick={() => onDelete(r.id)}
+                  disabled={removal.pending}
+                >
+                  {ta.delete}
+                </button>
+              </div>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,118 @@
+/**
+ * FEAT-6: Fotos-Tab — Galerie-Raster + Upload (multipart) + Löschen.
+ * Erstes Foto nach sortOrder = Profilfoto (Badge). Endpunkte entstehen in
+ * FEAT-1b Phase 2 (Pam) — bis dahin zeigt der Tab saubere deutsche
+ * Fehler-/Leerzustände.
+ */
+import { useRef, useState, type FormEvent } from 'react'
+import { de } from '../strings/de'
+import {
+  deleteGerbilPhoto,
+  listGerbilPhotos,
+  photoSrc,
+  profilePhoto,
+  uploadGerbilPhoto,
+} from '../api/photos'
+import { useApi, useMutation } from '../hooks/useApi'
+
+export default function GerbilPhotosTab({ gerbilId }: { gerbilId: string }) {
+  const t = de.pages.tierTabs.photos
+
+  const photos = useApi(() => listGerbilPhotos(gerbilId), [gerbilId])
+
+  const fileInput = useRef<HTMLInputElement>(null)
+  const [caption, setCaption] = useState('')
+  const [fileError, setFileError] = useState<string | null>(null)
+
+  const upload = useMutation((file: File) =>
+    uploadGerbilPhoto(gerbilId, file, caption.trim() === '' ? null : caption.trim()),
+  )
+  const removal = useMutation((photoId: string) => deleteGerbilPhoto(photoId))
+
+  async function onUpload(e: FormEvent) {
+    e.preventDefault()
+    const file = fileInput.current?.files?.[0]
+    if (!file) {
+      setFileError(t.validation.fileRequired)
+      return
+    }
+    setFileError(null)
+    await upload.run(file)
+    setCaption('')
+    if (fileInput.current) fileInput.current.value = ''
+    photos.reload()
+  }
+
+  async function onDelete(photoId: string) {
+    if (!window.confirm(t.deleteConfirm)) return
+    await removal.run(photoId)
+    photos.reload()
+  }
+
+  const items = photos.data ?? []
+  const profile = profilePhoto(items)
+
+  return (
+    <div>
+      <form className="form" onSubmit={onUpload} noValidate>
+        <h4>{t.uploadTitle}</h4>
+        <label className="field">
+          <span>{t.chooseFile}</span>
+          <input ref={fileInput} type="file" accept="image/*" className="input" />
+          {fileError && <small className="error-text">{fileError}</small>}
+        </label>
+        <label className="field">
+          <span>{t.captionLabel}</span>
+          <input className="input" value={caption} onChange={(e) => setCaption(e.target.value)} />
+        </label>
+        {upload.error && <div className="alert alert--error">{upload.error}</div>}
+        <div className="form-actions">
+          <button type="submit" className="btn btn--primary" disabled={upload.pending}>
+            {upload.pending ? t.uploading : t.uploadButton}
+          </button>
+        </div>
+      </form>
+
+      {photos.loading && <p className="muted">{de.common.loading}</p>}
+      {photos.error && (
+        <div className="alert alert--error">
+          <span>{photos.error}</span>
+          <button type="button" className="btn" onClick={photos.reload}>
+            {de.common.retry}
+          </button>
+        </div>
+      )}
+      {removal.error && <div className="alert alert--error">{removal.error}</div>}
+
+      {!photos.loading && !photos.error && items.length === 0 && (
+        <p className="muted">{t.empty}</p>
+      )}
+
+      {items.length > 0 && (
+        <ul className="photo-grid">
+          {[...items]
+            .sort((a, b) => a.sortOrder - b.sortOrder)
+            .map((p) => (
+              <li key={p.id} className="photo-card">
+                <img src={photoSrc(p)} alt={p.caption ?? p.fileName} loading="lazy" />
+                <div className="photo-card__bar">
+                  <span className="photo-card__caption">
+                    {profile?.id === p.id && <span className="badge">{t.profileBadge}</span>}{' '}
+                    {p.caption ?? ''}
+                  </span>
+                  <button
+                    type="button"
+                    className="btn btn--danger"
+                    onClick={() => onDelete(p.id)}
+                    disabled={removal.pending}
+                  >
+                    {de.common.delete}
+                  </button>
+                </div>
+              </li>
+            ))}
+        </ul>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,148 @@
+/**
+ * FEAT-6: Gewicht-Tab — Schnell-Erfassung (Datum vorbelegt mit heute,
+ * großes touch-freundliches Gramm-Feld), Wachstumskurve (eigenes SVG,
+ * keine Chart-Bibliothek) + Verlaufsliste mit Löschen.
+ */
+import { useState, type FormEvent } from 'react'
+import { de } from '../strings/de'
+import {
+  createWeightRecord,
+  deleteWeightRecord,
+  listWeightRecords,
+} from '../api/weightRecords'
+import { useApi, useMutation } from '../hooks/useApi'
+import { formatDate } from '../format/labels'
+import { todayISO } from '../format/dates'
+import LineChart from './LineChart'
+
+export default function GerbilWeightTab({ gerbilId }: { gerbilId: string }) {
+  const t = de.pages.tierTabs.weight
+
+  const records = useApi(() => listWeightRecords(gerbilId), [gerbilId])
+
+  const [date, setDate] = useState(todayISO())
+  const [grams, setGrams] = useState('')
+  const [errors, setErrors] = useState<{ date?: string; grams?: string }>({})
+
+  const add = useMutation((weightGrams: number) =>
+    createWeightRecord({ gerbilId, date, weightGrams }),
+  )
+  const removal = useMutation((recordId: string) => deleteWeightRecord(recordId))
+
+  async function onSubmit(e: FormEvent) {
+    e.preventDefault()
+    const value = Number(grams)
+    const next: { date?: string; grams?: string } = {}
+    if (!date) next.date = t.validation.dateRequired
+    if (grams.trim() === '' || Number.isNaN(value)) next.grams = t.validation.weightRequired
+    else if (value < 1 || value > 500 || !Number.isInteger(value))
+      next.grams = t.validation.weightRange
+    setErrors(next)
+    if (Object.keys(next).length > 0) return
+
+    await add.run(value)
+    setGrams('')
+    setDate(todayISO())
+    records.reload()
+  }
+
+  async function onDelete(recordId: string) {
+    if (!window.confirm(t.deleteConfirm)) return
+    await removal.run(recordId)
+    records.reload()
+  }
+
+  const items = records.data ?? []
+
+  return (
+    <div>
+      {/* Schnell-Erfassung: ein Daumen, eine Rennmaus in der anderen Hand. */}
+      <form className="weight-quick-add" onSubmit={onSubmit} noValidate>
+        <h4>{t.addTitle}</h4>
+        <div className="weight-quick-add__row">
+          <label className="field">
+            <span>{t.fields.date}</span>
+            <input
+              type="date"
+              className="input"
+              value={date}
+              onChange={(e) => setDate(e.target.value)}
+              aria-invalid={Boolean(errors.date)}
+            />
+          </label>
+          <label className="field">
+            <span>{t.fields.weightGrams}</span>
+            <input
+              type="number"
+              inputMode="numeric"
+              min={1}
+              max={500}
+              step={1}
+              className="input input--xl"
+              value={grams}
+              placeholder="0"
+              onChange={(e) => setGrams(e.target.value)}
+              aria-invalid={Boolean(errors.grams)}
+            />
+          </label>
+          <button type="submit" className="btn btn--primary" disabled={add.pending}>
+            {add.pending ? t.adding : t.addButton}
+          </button>
+        </div>
+        {errors.date && <small className="error-text">{errors.date}</small>}
+        {errors.grams && <small className="error-text">{errors.grams}</small>}
+        {add.error && <div className="alert alert--error">{add.error}</div>}
+      </form>
+
+      {records.loading && <p className="muted">{de.common.loading}</p>}
+      {records.error && (
+        <div className="alert alert--error">
+          <span>{records.error}</span>
+          <button type="button" className="btn" onClick={records.reload}>
+            {de.common.retry}
+          </button>
+        </div>
+      )}
+      {removal.error && <div className="alert alert--error">{removal.error}</div>}
+
+      {!records.loading && !records.error && items.length === 0 && (
+        <p className="muted">{t.empty}</p>
+      )}
+
+      {items.length > 0 && (
+        <>
+          <h4>{t.chartTitle}</h4>
+          {items.length >= 2 ? (
+            <LineChart
+              title={t.chartTitle}
+              unit={t.gramsSuffix}
+              points={items.map((r) => ({ date: r.date, value: r.weightGrams }))}
+            />
+          ) : (
+            <p className="muted">{t.chartNeedsTwo}</p>
+          )}
+
+          <h4>{t.historyTitle}</h4>
+          <ul className="card-list">
+            {items.map((r) => (
+              <li key={r.id} className="record-card record-card--row">
+                <span className="record-card__date">{formatDate(r.date)}</span>
+                <strong>
+                  {r.weightGrams} {t.gramsSuffix}
+                </strong>
+                <button
+                  type="button"
+                  className="btn btn--danger"
+                  onClick={() => onDelete(r.id)}
+                  disabled={removal.pending}
+                >
+                  {de.common.delete}
+                </button>
+              </li>
+            ))}
+          </ul>
+        </>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,121 @@
+/**
+ * FEAT-6: Schlichtes, responsives SVG-Liniendiagramm (eine Serie) —
+ * bewusst OHNE Chart-Bibliothek (god-Entscheidung für v1).
+ * X-Achse: Datum (TT.MM.JJ), Y-Achse: Wert mit Einheiten-Suffix.
+ */
+
+export interface ChartPoint {
+  /** ISO-Datum "YYYY-MM-DD". */
+  date: string
+  value: number
+}
+
+interface Props {
+  points: ChartPoint[]
+  /** Einheiten-Suffix der Y-Achse, z. B. "g". */
+  unit: string
+  /** Zugänglicher Titel des Diagramms. */
+  title: string
+}
+
+const W = 600
+const H = 260
+const PAD = { top: 16, right: 16, bottom: 36, left: 48 }
+
+function shortDate(iso: string): string {
+  const [y, m, d] = iso.split('-')
+  return y && m && d ? `${d}.${m}.${y.slice(2)}` : iso
+}
+
+export default function LineChart({ points, unit, title }: Props) {
+  // Aufsteigend nach Datum; mindestens 2 Punkte werden vom Aufrufer garantiert.
+  const sorted = [...points].sort((a, b) => a.date.localeCompare(b.date))
+  const xs = sorted.map((p) => Date.parse(p.date))
+  const ys = sorted.map((p) => p.value)
+
+  const xMin = Math.min(...xs)
+  const xMax = Math.max(...xs)
+  const yLo = Math.min(...ys)
+  const yHi = Math.max(...ys)
+  // Y-Skala mit Luft nach oben/unten, auf ganze Werte gerundet.
+  const yPad = Math.max(1, Math.round((yHi - yLo) * 0.15))
+  const yMin = Math.max(0, yLo - yPad)
+  const yMax = yHi + yPad
+
+  const x = (t: number) =>
+    xMax === xMin
+      ? (PAD.left + (W - PAD.right)) / 2
+      : PAD.left + ((t - xMin) / (xMax - xMin)) * (W - PAD.left - PAD.right)
+  const y = (v: number) => H - PAD.bottom - ((v - yMin) / (yMax - yMin)) * (H - PAD.top - PAD.bottom)
+
+  const path = sorted
+    .map((p, i) => `${i === 0 ? 'M' : 'L'}${x(Date.parse(p.date)).toFixed(1)},${y(p.value).toFixed(1)}`)
+    .join(' ')
+
+  const yTicks = [yMin, Math.round((yMin + yMax) / 2), yMax]
+  // X-Ticks: erstes, mittleres und letztes Datum (dedupliziert).
+  const xTickPoints = [...new Set([0, Math.floor((sorted.length - 1) / 2), sorted.length - 1])].map(
+    (i) => sorted[i],
+  )
+
+  return (
+    <svg
+      className="line-chart"
+      viewBox={`0 0 ${W} ${H}`}
+      role="img"
+      aria-label={title}
+      preserveAspectRatio="xMidYMid meet"
+    >
+      {/* Achsen */}
+      <line x1={PAD.left} y1={PAD.top} x2={PAD.left} y2={H - PAD.bottom} className="line-chart__axis" />
+      <line
+        x1={PAD.left}
+        y1={H - PAD.bottom}
+        x2={W - PAD.right}
+        y2={H - PAD.bottom}
+        className="line-chart__axis"
+      />
+
+      {/* Y-Beschriftung + Hilfslinien */}
+      {yTicks.map((v) => (
+        <g key={v}>
+          <line
+            x1={PAD.left}
+            y1={y(v)}
+            x2={W - PAD.right}
+            y2={y(v)}
+            className="line-chart__grid"
+          />
+          <text x={PAD.left - 6} y={y(v) + 4} textAnchor="end" className="line-chart__label">
+            {v} {unit}
+          </text>
+        </g>
+      ))}
+
+      {/* X-Beschriftung */}
+      {xTickPoints.map((p) => (
+        <text
+          key={p.date}
+          x={x(Date.parse(p.date))}
+          y={H - PAD.bottom + 18}
+          textAnchor="middle"
+          className="line-chart__label"
+        >
+          {shortDate(p.date)}
+        </text>
+      ))}
+
+      {/* Serie */}
+      <path d={path} className="line-chart__line" fill="none" />
+      {sorted.map((p) => (
+        <circle
+          key={`${p.date}-${p.value}`}
+          cx={x(Date.parse(p.date))}
+          cy={y(p.value)}
+          r={3.5}
+          className="line-chart__dot"
+        />
+      ))}
+    </svg>
+  )
+}