Merge feature/search-2b: Herkunft filter -> originBreeder + /gerbils/breeders; name search -> nameSearch (separator-insensitive) [god-QA: 47/build/e2e 62]

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

@@ -1,8 +1,8 @@
 import { useMemo, useState } from 'react'
 import { Link } from 'react-router-dom'
 import { de } from '../strings/de'
-import { listGerbils, updateGerbil } from '../api/gerbils'
-import { listColorVarieties, listContacts } from '../api/lookups'
+import { listGerbils, listOriginBreeders, updateGerbil } from '../api/gerbils'
+import { listColorVarieties } from '../api/lookups'
 import { andFilter, condition, type GridifyQuery } from '../api/gridify'
 import { GENDERS, GERBIL_STATUSES, type Gender, type GerbilStatus } from '../api/types'
 import { useApi, useMutation } from '../hooks/useApi'
@@ -11,10 +11,11 @@ import './gerbils.css'
 
 const PAGE_SIZE = 20
 
-// SEARCH-2: name search field. Switches to Pam's separator-insensitive
-// normalized field once SEARCH-1 lands (see conversation SEARCH-1); 'name'
-// works today via the contains hotfix.
-const NAME_SEARCH_FIELD = 'name'
+// SEARCH-2b: separator-insensitive search via Pam's normalized field. The term
+// is normalized the SAME way server-side stores it (lowercase + strip [\s._-]),
+// so 'clan kleine chaoten' matches 'clan-kleine-chaoten'.
+const NAME_SEARCH_FIELD = 'nameSearch'
+const normalizeSearch = (s: string): string => s.toLowerCase().replace(/[\s._-]/g, '')
 
 type SortKey = 'nameAsc' | 'nameDesc' | 'birthDesc' | 'birthAsc'
 const SORT_ORDER_BY: Record<SortKey, string> = {
@@ -30,7 +31,7 @@ export default function GerbilsPage() {
   const [status, setStatus] = useState<GerbilStatus | ''>('Active')
   const [gender, setGender] = useState<Gender | ''>('')
   const [colorVarietyId, setColorVarietyId] = useState('')
-  const [originContactId, setOriginContactId] = useState('')
+  const [originBreeder, setOriginBreeder] = useState('')
   const [sort, setSort] = useState<SortKey>('nameAsc')
   const [page, setPage] = useState(1)
 
@@ -40,14 +41,15 @@ export default function GerbilsPage() {
     for (const cv of colorVarieties.data ?? []) map.set(cv.id, cv.name)
     return map
   }, [colorVarieties.data])
-  const contacts = useApi(() => listContacts(), [])
+  const breeders = useApi(() => listOriginBreeders(), [])
 
   const filter = andFilter(
-    search.trim() && condition({ field: NAME_SEARCH_FIELD, op: 'contains', value: search.trim() }),
+    search.trim() &&
+      condition({ field: NAME_SEARCH_FIELD, op: 'contains', value: normalizeSearch(search) }),
     status && condition({ field: 'status', op: '==', value: status }),
     gender && condition({ field: 'gender', op: '==', value: gender }),
     colorVarietyId && condition({ field: 'colorVarietyId', op: '==', value: colorVarietyId }),
-    originContactId && condition({ field: 'originContactId', op: '==', value: originContactId }),
+    originBreeder && condition({ field: 'originBreeder', op: '==', value: originBreeder }),
   )
   const orderBy = SORT_ORDER_BY[sort]
   const query: GridifyQuery = { filter: filter || undefined, orderBy, page, pageSize: PAGE_SIZE }
@@ -59,7 +61,7 @@ export default function GerbilsPage() {
     setStatus('Active')
     setGender('')
     setColorVarietyId('')
-    setOriginContactId('')
+    setOriginBreeder('')
     setPage(1)
     setSort('nameAsc')
   }
@@ -164,13 +166,13 @@ export default function GerbilsPage() {
         <label className="field">
           <span>{t.fields.origin}</span>
           <select
-            value={originContactId}
-            onChange={(e) => onFilterChange(setOriginContactId)(e.target.value)}
+            value={originBreeder}
+            onChange={(e) => onFilterChange(setOriginBreeder)(e.target.value)}
           >
             <option value="">{t.filters.all}</option>
-            {(contacts.data ?? []).map((c) => (
-              <option key={c.id} value={c.id}>
-                {c.name}
+            {(breeders.data ?? []).map((b) => (
+              <option key={b} value={b}>
+                {b}
               </option>
             ))}
           </select>