Merge feature/status-model-fe (STATUS-MODEL-FE): Dropdown Zucht/Liebhaber/Abzugeben; Verstorben/Abgegeben read-only abgeleitet; Labels+Filter

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

@@ -3,7 +3,7 @@ import { Link, useNavigate, useParams, useSearchParams } from 'react-router-dom'
 import { de } from '../strings/de'
 import { createGerbil, getGerbil, updateGerbil } from '../api/gerbils'
 import { listColorVarieties, listContacts, listEnclosures, listLitters } from '../api/lookups'
-import { GENDERS, GERBIL_STATUSES, type CreateGerbil, type Gender, type GerbilStatus } from '../api/types'
+import { GENDERS, SELECTABLE_STATUSES, type CreateGerbil, type Gender, type GerbilStatus } from '../api/types'
 import { useApi, useMutation } from '../hooks/useApi'
 import { genderLabel, statusLabel } from '../format/labels'
 import { fromDisplayString, genotypeToFarbschlag, UNKNOWN_FARBSCHLAG } from '../genetics'
@@ -34,7 +34,7 @@ interface FormState {
 const EMPTY: FormState = {
   name: '',
   gender: '',
-  status: 'Active',
+  status: 'Breeding',
   dateOfBirth: '',
   dateOfDeath: '',
   causeOfDeath: '',
@@ -245,16 +245,29 @@ export default function GerbilFormPage() {
           {errors.gender && <small className="error-text">{errors.gender}</small>}
         </label>
 
-        <label className="field">
-          <span>{t.fields.status}</span>
-          <select value={form.status} onChange={(e) => set('status', e.target.value as GerbilStatus)}>
-            {GERBIL_STATUSES.map((s) => (
-              <option key={s} value={s}>
-                {statusLabel(s)}
-              </option>
-            ))}
-          </select>
-        </label>
+        {/* STATUS-MODEL: Deceased/GivenAway are derived by the backend — show as read-only with hint */}
+        {form.status === 'Deceased' || form.status === 'GivenAway' ? (
+          <div className="field">
+            <span>{t.fields.status}</span>
+            <span className="muted">
+              {statusLabel(form.status)}
+              <small className="muted" style={{ marginLeft: '0.5rem' }}>
+                ({t.form.statusDerivedHint[form.status]})
+              </small>
+            </span>
+          </div>
+        ) : (
+          <label className="field">
+            <span>{t.fields.status}</span>
+            <select value={form.status} onChange={(e) => set('status', e.target.value as GerbilStatus)}>
+              {SELECTABLE_STATUSES.map((s) => (
+                <option key={s} value={s}>
+                  {statusLabel(s)}
+                </option>
+              ))}
+            </select>
+          </label>
+        )}
 
         <label className="field">
           <span>{t.fields.dateOfBirth}</span>

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

@@ -29,7 +29,7 @@ const SORT_ORDER_BY: Record<SortKey, string> = {
 export default function GerbilsPage() {
   const t = de.pages.gerbils
   const [search, setSearch] = useState('')
-  const [status, setStatus] = useState<GerbilStatus | ''>('Active')
+  const [status, setStatus] = useState<GerbilStatus | ''>('Breeding')
   const [gender, setGender] = useState<Gender | ''>('')
   const [colorVarietyId, setColorVarietyId] = useState('')
   const [originBreeder, setOriginBreeder] = useState('')
@@ -64,7 +64,7 @@ export default function GerbilsPage() {
 
   const resetFilters = () => {
     setSearch('')
-    setStatus('Active')
+    setStatus('Breeding')
     setGender('')
     setColorVarietyId('')
     setOriginBreeder('')
@@ -85,7 +85,7 @@ export default function GerbilsPage() {
 
   // UX-MOBILE-1: count non-default filter values for the badge.
   const activeFilterCount =
-    (status !== 'Active' ? 1 : 0) +
+    (status !== 'Breeding' ? 1 : 0) +
     (gender !== '' ? 1 : 0) +
     (colorVarietyId !== '' ? 1 : 0) +
     (originBreeder !== '' ? 1 : 0) +