FEAT-12a: ForSale scaffolding — status+ForSale, abgabe strings, /abgabe route+nav, sale-ad API stub, detail action, jszip

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

@@ -0,0 +1,11 @@
+import { de } from '../strings/de'
+
+export default function AbgabePage() {
+  // Fleshed out in the next FEAT-12a increments (grouping + listing composer + export).
+  return (
+    <section className="page">
+      <h2>{de.pages.abgabe.title}</h2>
+      <p className="muted">{de.pages.abgabe.subtitle}</p>
+    </section>
+  )
+}

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

@@ -1,9 +1,9 @@
 import { useMemo, useState, type ReactNode } from 'react'
 import { Link, useParams } from 'react-router-dom'
 import { de } from '../strings/de'
-import { getGerbil } from '../api/gerbils'
+import { getGerbil, updateGerbil } from '../api/gerbils'
 import { listColorVarieties, listContacts, listEnclosures, listLitters } from '../api/lookups'
-import { useApi } from '../hooks/useApi'
+import { useApi, useMutation } from '../hooks/useApi'
 import { formatDate, genderLabel, statusLabel } from '../format/labels'
 import { fromDisplayString, genotypeToFarbschlag, toDisplayString } from '../genetics'
 import FarbschlagImage from '../components/FarbschlagImage'
@@ -42,6 +42,7 @@ export default function GerbilDetailPage() {
   const [tab, setTab] = useState<DetailTab>('photos')
 
   const gerbil = useApi(() => getGerbil(id), [id])
+  const forSale = useMutation(() => updateGerbil(id, { status: 'ForSale' }))
   const colorVarieties = useApi(() => listColorVarieties(), [])
   const enclosures = useApi(() => listEnclosures(), [])
   const contacts = useApi(() => listContacts(), [])
@@ -96,6 +97,19 @@ export default function GerbilDetailPage() {
           <Link to={`/genetik?parent=${g.id}`} className="btn">
             {t.detail.testMating}
           </Link>
+          {g.status !== 'ForSale' && (
+            <button
+              type="button"
+              className="btn"
+              disabled={forSale.pending}
+              onClick={async () => {
+                const r = await forSale.run()
+                if (r.ok) gerbil.reload()
+              }}
+            >
+              {de.pages.abgabe.markAction}
+            </button>
+          )}
           <Link to={`/rennmaeuse/${g.id}/stammbaum`} className="btn">
             {de.pages.stammbaum.openButton}
           </Link>