Add customer search and navigation updates

frontend/src/pages/AdministrationPage.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useMemo, useState } from "react";
+import { useLocation } from "react-router-dom";
 import { apiGet, apiPost } from "../lib/api";
 import type { AdministrationOverview, MedicationCategory, PathogenKind } from "../lib/types";
 
@@ -92,10 +93,24 @@ function emptyRow(dataset: DatasetKey): EditableRow {
 }
 
 export default function AdministrationPage() {
+  const location = useLocation();
   const [datasets, setDatasets] = useState<DatasetsState | null>(null);
-  const [selectedDataset, setSelectedDataset] = useState<DatasetKey>("farmers");
   const [saving, setSaving] = useState(false);
   const [message, setMessage] = useState<string | null>(null);
+  const [showValidation, setShowValidation] = useState(false);
+
+  const selectedDataset: DatasetKey = useMemo(() => {
+    if (location.pathname.startsWith("/admin/medikamente")) {
+      return "medications";
+    }
+    if (location.pathname.startsWith("/admin/erreger")) {
+      return "pathogens";
+    }
+    if (location.pathname.startsWith("/admin/antibiogramm")) {
+      return "antibiotics";
+    }
+    return "farmers";
+  }, [location.pathname]);
 
   useEffect(() => {
     async function load() {
@@ -143,6 +158,11 @@ export default function AdministrationPage() {
     if (!datasets) {
       return;
     }
+    setShowValidation(true);
+    if (rows.some((row) => !row.name.trim())) {
+      setMessage("Bitte alle Pflichtfelder ausfuellen.");
+      return;
+    }
     setSaving(true);
     setMessage(null);
     try {
@@ -216,26 +236,13 @@ export default function AdministrationPage() {
             <p className="eyebrow">Datensatz</p>
             <h3>{DATASET_LABELS[selectedDataset]}</h3>
           </div>
-
-          <div className="choice-row">
-            {(Object.keys(DATASET_LABELS) as DatasetKey[]).map((dataset) => (
-              <button
-                key={dataset}
-                type="button"
-                className={`choice-chip ${selectedDataset === dataset ? "is-selected" : ""}`}
-                onClick={() => setSelectedDataset(dataset)}
-              >
-                {DATASET_LABELS[dataset]}
-              </button>
-            ))}
-          </div>
         </div>
 
         <div className="table-shell">
           <table className="data-table">
             <thead>
               <tr>
-                <th>Name</th>
+                <th className="required-label">Name</th>
                 {selectedDataset === "farmers" ? <th>E-Mail</th> : null}
                 {selectedDataset === "medications" ? <th>Kategorie</th> : null}
                 {selectedDataset === "pathogens" || selectedDataset === "antibiotics" ? <th>Kuerzel</th> : null}
@@ -248,6 +255,7 @@ export default function AdministrationPage() {
                 <tr key={`${row.id || "new"}-${index}`}>
                   <td>
                     <input
+                      className={showValidation && !row.name.trim() ? "is-invalid" : ""}
                       value={row.name}
                       onChange={(event) => updateRow(index, { name: event.target.value })}
                     />

frontend/src/pages/AnamnesisPage.tsx

@@ -30,6 +30,7 @@ export default function AnamnesisPage() {
   const [activeQuarter, setActiveQuarter] = useState<QuarterKey | null>(null);
   const [message, setMessage] = useState<string | null>(null);
   const [saving, setSaving] = useState(false);
+  const [showValidation, setShowValidation] = useState(false);
 
   useEffect(() => {
     async function load() {
@@ -70,10 +71,22 @@ export default function AnamnesisPage() {
     }));
   }
 
+  function quarterHasPathogen(quarterKey: QuarterKey) {
+    const quarterState = quarterStates[quarterKey];
+    return Boolean(quarterState?.pathogenBusinessKey || quarterState?.customPathogenName?.trim());
+  }
+
   async function handleSave() {
     if (!sampleId || !sample) {
       return;
     }
+    setShowValidation(true);
+    const missingQuarter = sample.quarters.find((quarter) => !quarterHasPathogen(quarter.quarterKey));
+    if (missingQuarter) {
+      setActiveQuarter(missingQuarter.quarterKey);
+      setMessage("Bitte fuer jede Entnahmestelle einen Erreger auswaehlen oder eingeben.");
+      return;
+    }
     setSaving(true);
     setMessage(null);
 
@@ -134,7 +147,9 @@ export default function AnamnesisPage() {
               <button
                 key={quarter.quarterKey}
                 type="button"
-                className={`tab-chip ${activeQuarter === quarter.quarterKey ? "is-active" : ""}`}
+                className={`tab-chip ${activeQuarter === quarter.quarterKey ? "is-active" : ""} ${
+                  showValidation && !quarterHasPathogen(quarter.quarterKey) ? "is-invalid" : ""
+                }`}
                 onClick={() => setActiveQuarter(quarter.quarterKey)}
               >
                 {quarter.label}
@@ -153,7 +168,8 @@ export default function AnamnesisPage() {
             <div className="info-chip">Auffaelliges Viertel markiert</div>
           ) : null}
 
-          <div className="pathogen-grid">
+          <p className="required-label">Erreger</p>
+          <div className={`pathogen-grid ${showValidation && !quarterHasPathogen(visibleQuarter.quarterKey) ? "is-invalid" : ""}`}>
             {catalogs.pathogens.map((pathogen) => (
               <button
                 key={pathogen.businessKey}
@@ -175,9 +191,10 @@ export default function AnamnesisPage() {
             ))}
           </div>
 
-          <label className="field">
+          <label className="field field--required">
             <span>Erreger manuell eingeben</span>
             <input
+              className={showValidation && !quarterHasPathogen(visibleQuarter.quarterKey) ? "is-invalid" : ""}
               value={state.customPathogenName}
               onChange={(event) =>
                 updateQuarter(visibleQuarter.quarterKey, {

frontend/src/pages/HomePage.tsx

@@ -27,6 +27,7 @@ export default function HomePage() {
   const [sampleNumber, setSampleNumber] = useState("");
   const [message, setMessage] = useState<string | null>(null);
   const [loading, setLoading] = useState(true);
+  const [showValidation, setShowValidation] = useState(false);
 
   useEffect(() => {
     async function loadDashboard() {
@@ -43,6 +44,7 @@ export default function HomePage() {
 
   async function handleLookup(event: FormEvent<HTMLFormElement>) {
     event.preventDefault();
+    setShowValidation(true);
     if (!sampleNumber.trim()) {
       setMessage("Bitte eine Probennummer eingeben.");
       return;
@@ -72,14 +74,15 @@ export default function HomePage() {
           </p>
         </div>
 
-        <form className="hero-card__form" onSubmit={handleLookup}>
-          <label className="field">
+        <form className={`hero-card__form ${showValidation ? "show-validation" : ""}`} onSubmit={handleLookup}>
+          <label className="field field--required">
             <span>Nummer</span>
             <input
               value={sampleNumber}
               onChange={(event) => setSampleNumber(event.target.value)}
               placeholder="z. B. 100203"
               inputMode="numeric"
+              required
             />
           </label>
           <button type="submit" className="accent-button">

frontend/src/pages/LoginPage.tsx

@@ -12,6 +12,8 @@ export default function LoginPage() {
   const [showRegistration, setShowRegistration] = useState(false);
   const [identifier, setIdentifier] = useState("");
   const [password, setPassword] = useState("");
+  const [showLoginValidation, setShowLoginValidation] = useState(false);
+  const [showRegisterValidation, setShowRegisterValidation] = useState(false);
   const [registration, setRegistration] = useState({
     companyName: "",
     street: "",
@@ -28,6 +30,7 @@ export default function LoginPage() {
 
   async function handlePasswordLogin(event: FormEvent<HTMLFormElement>) {
     event.preventDefault();
+    setShowLoginValidation(true);
     if (!identifier.trim() || !password.trim()) {
       setFeedback({
         type: "error",
@@ -49,6 +52,7 @@ export default function LoginPage() {
 
   async function handleRegister(event: FormEvent<HTMLFormElement>) {
     event.preventDefault();
+    setShowRegisterValidation(true);
     if (
       !registration.companyName.trim()
       || !registration.street.trim()
@@ -113,21 +117,23 @@ export default function LoginPage() {
 
           <div className="auth-grid">
             {!showRegistration ? (
-              <form className="login-panel__section" onSubmit={handlePasswordLogin}>
-                <label className="field">
+              <form className={`login-panel__section ${showLoginValidation ? "show-validation" : ""}`} onSubmit={handlePasswordLogin}>
+                <label className="field field--required">
                   <span>E-Mail / Benutzername</span>
                   <input
                     value={identifier}
                     onChange={(event) => setIdentifier(event.target.value)}
                     placeholder="z. B. admin oder name@hof.de"
+                    required
                   />
                 </label>
-                <label className="field">
+                <label className="field field--required">
                   <span>Passwort</span>
                   <input
                     type="password"
                     value={password}
                     onChange={(event) => setPassword(event.target.value)}
+                    required
                   />
                 </label>
                 <div className="page-actions">
@@ -139,6 +145,7 @@ export default function LoginPage() {
                     className="secondary-button"
                     onClick={() => {
                       setFeedback(null);
+                      setShowRegisterValidation(false);
                       setShowRegistration(true);
                     }}
                   >
@@ -147,9 +154,9 @@ export default function LoginPage() {
                 </div>
               </form>
             ) : (
-              <form className="login-panel__section" onSubmit={handleRegister}>
+              <form className={`login-panel__section ${showRegisterValidation ? "show-validation" : ""}`} onSubmit={handleRegister}>
                 <div className="field-grid">
-                  <label className="field field--wide">
+                  <label className="field field--wide field--required">
                     <span>Firmenname</span>
                     <input
                       value={registration.companyName}
@@ -157,9 +164,10 @@ export default function LoginPage() {
                         setRegistration((current) => ({ ...current, companyName: event.target.value }))
                       }
                       placeholder="z. B. Muster Agrar GmbH"
+                      required
                     />
                   </label>
-                  <label className="field">
+                  <label className="field field--required">
                     <span>Strasse</span>
                     <input
                       value={registration.street}
@@ -167,9 +175,10 @@ export default function LoginPage() {
                         setRegistration((current) => ({ ...current, street: event.target.value }))
                       }
                       placeholder="z. B. Dorfstrasse"
+                      required
                     />
                   </label>
-                  <label className="field">
+                  <label className="field field--required">
                     <span>Hausnummer</span>
                     <input
                       value={registration.houseNumber}
@@ -177,9 +186,10 @@ export default function LoginPage() {
                         setRegistration((current) => ({ ...current, houseNumber: event.target.value }))
                       }
                       placeholder="z. B. 12a"
+                      required
                     />
                   </label>
-                  <label className="field">
+                  <label className="field field--required">
                     <span>PLZ</span>
                     <input
                       value={registration.postalCode}
@@ -187,9 +197,10 @@ export default function LoginPage() {
                         setRegistration((current) => ({ ...current, postalCode: event.target.value }))
                       }
                       placeholder="z. B. 12345"
+                      required
                     />
                   </label>
-                  <label className="field">
+                  <label className="field field--required">
                     <span>Ort</span>
                     <input
                       value={registration.city}
@@ -197,9 +208,10 @@ export default function LoginPage() {
                         setRegistration((current) => ({ ...current, city: event.target.value }))
                       }
                       placeholder="z. B. Musterstadt"
+                      required
                     />
                   </label>
-                  <label className="field">
+                  <label className="field field--required">
                     <span>E-Mail</span>
                     <input
                       type="email"
@@ -207,19 +219,22 @@ export default function LoginPage() {
                       onChange={(event) =>
                         setRegistration((current) => ({ ...current, email: event.target.value }))
                       }
+                      required
                     />
                   </label>
-                  <label className="field">
+                  <label className="field field--required">
                     <span>Telefonnummer</span>
                     <input
+                      type="tel"
                       value={registration.phoneNumber}
                       onChange={(event) =>
                         setRegistration((current) => ({ ...current, phoneNumber: event.target.value }))
                       }
                       placeholder="z. B. 04531 181424"
+                      required
                     />
                   </label>
-                  <label className="field field--wide">
+                  <label className="field field--wide field--required">
                     <span>Passwort</span>
                     <input
                       type="password"
@@ -227,19 +242,30 @@ export default function LoginPage() {
                       onChange={(event) =>
                         setRegistration((current) => ({ ...current, password: event.target.value }))
                       }
+                      required
                     />
                   </label>
-                  <label className="field field--wide">
+                  <label className="field field--wide field--required">
                     <span>Passwort wiederholen</span>
                     <input
                       type="password"
                       value={registration.passwordConfirmation}
+                      className={
+                        showRegisterValidation
+                        && registration.password !== registration.passwordConfirmation
+                          ? "is-invalid"
+                          : ""
+                      }
+                      aria-invalid={
+                        showRegisterValidation && registration.password !== registration.passwordConfirmation
+                      }
                       onChange={(event) =>
                         setRegistration((current) => ({
                           ...current,
                           passwordConfirmation: event.target.value,
                         }))
                       }
+                      required
                     />
                   </label>
                 </div>
@@ -252,6 +278,7 @@ export default function LoginPage() {
                     className="secondary-button"
                     onClick={() => {
                       setFeedback(null);
+                      setShowLoginValidation(false);
                       setShowRegistration(false);
                     }}
                   >

frontend/src/pages/PortalPage.tsx

@@ -1,18 +1,8 @@
 import { FormEvent, useEffect, useMemo, useState } from "react";
-import { apiDelete, apiGet, apiPatch, apiPost, pdfUrl } from "../lib/api";
+import { apiDelete, apiGet, apiPost } from "../lib/api";
 import { useSession } from "../lib/session";
 import type { PortalSnapshot, UserRole } from "../lib/types";
 
-function formatDate(value: string | null) {
-  if (!value) {
-    return "-";
-  }
-  return new Intl.DateTimeFormat("de-DE", {
-    dateStyle: "medium",
-    timeStyle: "short",
-  }).format(new Date(value));
-}
-
 export default function PortalPage() {
   const { user } = useSession();
   const [snapshot, setSnapshot] = useState<PortalSnapshot | null>(null);
@@ -27,6 +17,7 @@ export default function PortalPage() {
     role: "CUSTOMER" as UserRole,
   });
   const [passwordDrafts, setPasswordDrafts] = useState<Record<string, string>>({});
+  const [showUserValidation, setShowUserValidation] = useState(false);
   const isAdmin = user?.role === "ADMIN";
 
   async function loadSnapshot() {
@@ -68,6 +59,7 @@ export default function PortalPage() {
 
   async function handleCreateUser(event: FormEvent<HTMLFormElement>) {
     event.preventDefault();
+    setShowUserValidation(true);
     if (!isAdmin) {
       setMessage("Nur Administratoren koennen Benutzer anlegen.");
       return;
@@ -85,6 +77,7 @@ export default function PortalPage() {
         password: "",
         role: "CUSTOMER",
       });
+      setShowUserValidation(false);
       setMessage("Benutzer gespeichert.");
       await loadSnapshot();
     } catch (userError) {
@@ -114,15 +107,6 @@ export default function PortalPage() {
     }
   }
 
-  async function handleToggleBlocked(sampleId: string, blocked: boolean) {
-    try {
-      await apiPatch(`/portal/reports/${sampleId}/block`, { blocked });
-      await loadSnapshot();
-    } catch (blockError) {
-      setMessage((blockError as Error).message);
-    }
-  }
-
   if (!snapshot) {
     return <div className="empty-state">Portal wird geladen ...</div>;
   }
@@ -181,21 +165,23 @@ export default function PortalPage() {
         {isAdmin ? (
           <article className="section-card">
             <p className="eyebrow">Benutzerverwaltung</p>
-            <form className="field-grid" onSubmit={handleCreateUser}>
-              <label className="field">
+            <form className={`field-grid ${showUserValidation ? "show-validation" : ""}`} onSubmit={handleCreateUser}>
+              <label className="field field--required">
                 <span>Kuerzel</span>
                 <input
                   value={userForm.code}
                   onChange={(event) => setUserForm((current) => ({ ...current, code: event.target.value }))}
+                  required
                 />
               </label>
-              <label className="field">
+              <label className="field field--required">
                 <span>Name</span>
                 <input
                   value={userForm.displayName}
                   onChange={(event) =>
                     setUserForm((current) => ({ ...current, displayName: event.target.value }))
                   }
+                  required
                 />
               </label>
               <label className="field">
@@ -288,68 +274,6 @@ export default function PortalPage() {
         ) : null}
       </section>
 
-      <section className="section-card">
-        <div className="section-card__header">
-          <div>
-            <p className="eyebrow">Suchergebnis</p>
-            <h3>Gefundene Milchproben</h3>
-          </div>
-        </div>
-
-        <div className="table-shell">
-          <table className="data-table">
-            <thead>
-              <tr>
-                <th>Probe</th>
-                <th>Anlage</th>
-                <th>Landwirt</th>
-                <th>Kuh</th>
-                <th>Typ</th>
-                <th>Interne Bemerkung</th>
-                <th>PDF</th>
-                <th>Versand</th>
-              </tr>
-            </thead>
-            <tbody>
-              {snapshot.samples.map((sample) => (
-                <tr key={sample.sampleId}>
-                  <td>{sample.sampleNumber}</td>
-                  <td>{formatDate(sample.createdAt)}</td>
-                  <td>{sample.farmerName}</td>
-                  <td>{sample.cowNumber}{sample.cowName ? ` / ${sample.cowName}` : ""}</td>
-                  <td>{sample.sampleKindLabel === "DRY_OFF" ? "Trockensteller" : "Milchprobe"}</td>
-                  <td>{sample.internalNote ?? "-"}</td>
-                  <td>
-                    {sample.completed ? (
-                      <a className="table-link" href={pdfUrl(sample.sampleId)} target="_blank" rel="noreferrer">
-                        PDF
-                      </a>
-                    ) : (
-                      <span className="muted-text">-</span>
-                    )}
-                  </td>
-                  <td>
-                    <div className="table-actions">
-                      <span className={`status-pill ${sample.reportSent ? "status-pill--completed" : "status-pill--therapy"}`}>
-                        {sample.reportSent ? "versendet" : "offen"}
-                      </span>
-                      {sample.completed ? (
-                        <button
-                          type="button"
-                          className="table-link"
-                          onClick={() => void handleToggleBlocked(sample.sampleId, !sample.reportBlocked)}
-                        >
-                          {sample.reportBlocked ? "freigeben" : "blockieren"}
-                        </button>
-                      ) : null}
-                    </div>
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-      </section>
     </div>
   );
 }

frontend/src/pages/SampleRegistrationPage.tsx

@@ -35,6 +35,7 @@ export default function SampleRegistrationPage() {
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
   const [message, setMessage] = useState<string | null>(null);
+  const [showValidation, setShowValidation] = useState(false);
 
   useEffect(() => {
     async function load() {
@@ -79,6 +80,7 @@ export default function SampleRegistrationPage() {
 
   async function handleSubmit(event: FormEvent<HTMLFormElement>) {
     event.preventDefault();
+    setShowValidation(true);
     if (!user) {
       return;
     }
@@ -118,7 +120,7 @@ export default function SampleRegistrationPage() {
   }
 
   return (
-    <form className="page-stack" onSubmit={handleSubmit}>
+    <form className={`page-stack ${showValidation ? "show-validation" : ""}`} onSubmit={handleSubmit}>
       <section className="section-card section-card--hero">
         <div>
           <p className="eyebrow">Neuanlage</p>
@@ -141,13 +143,14 @@ export default function SampleRegistrationPage() {
       <section className="form-grid form-grid--stacked">
         <article className="section-card">
           <p className="eyebrow">Stammdaten</p>
-          <div className="field-grid">
-            <label className="field">
+          <div className="field-grid field-grid--stacked">
+            <label className="field field--required">
               <span>Landwirt</span>
               <select
                 value={farmerBusinessKey}
                 onChange={(event) => setFarmerBusinessKey(event.target.value)}
                 disabled={!editable}
+                required
               >
                 {catalogs?.farmers.map((farmer) => (
                   <option key={farmer.businessKey} value={farmer.businessKey}>
@@ -157,12 +160,13 @@ export default function SampleRegistrationPage() {
               </select>
             </label>
 
-            <label className="field">
+            <label className="field field--required">
               <span>Kuh-Nummer</span>
               <input
                 value={cowNumber}
                 onChange={(event) => setCowNumber(event.target.value)}
                 disabled={!editable}
+                required
               />
             </label>
 

frontend/src/pages/SearchCalendarPage.tsx

@@ -0,0 +1,90 @@
+import { useNavigate } from "react-router-dom";
+import SampleSearchResultsSection from "../components/SampleSearchResultsSection";
+import { apiGet } from "../lib/api";
+import type { LookupResult, PortalSampleRow } from "../lib/types";
+import { useState } from "react";
+
+function routeForLookup(result: LookupResult) {
+  return result.sampleId && result.routeSegment ? `/samples/${result.sampleId}/${result.routeSegment}` : null;
+}
+
+export default function SearchCalendarPage() {
+  const navigate = useNavigate();
+  const [selectedDate, setSelectedDate] = useState("");
+  const [samples, setSamples] = useState<PortalSampleRow[]>([]);
+  const [message, setMessage] = useState<string | null>(null);
+  const [resultLabel, setResultLabel] = useState("Bitte Datum auswaehlen");
+
+  async function handleDateChange(nextDate: string) {
+    setSelectedDate(nextDate);
+    if (!nextDate) {
+      setSamples([]);
+      setMessage(null);
+      setResultLabel("Bitte Datum auswaehlen");
+      return;
+    }
+
+    try {
+      const rows = await apiGet<PortalSampleRow[]>(
+        `/portal/search/by-date?date=${encodeURIComponent(nextDate)}`,
+      );
+      setSamples(rows);
+      setResultLabel(`Erfasste Proben am ${nextDate.split("-").reverse().join(".")}`);
+      setMessage(rows.length ? null : "An diesem Tag wurden keine Proben erfasst.");
+    } catch (dateError) {
+      setSamples([]);
+      setResultLabel("Keine Treffer");
+      setMessage((dateError as Error).message);
+    }
+  }
+
+  async function openSample(sampleNumber: number) {
+    try {
+      const result = await apiGet<LookupResult>(`/dashboard/lookup/${sampleNumber}`);
+      const target = routeForLookup(result);
+      if (!result.found || !target) {
+        setMessage(result.message);
+        return;
+      }
+      navigate(target);
+    } catch (openError) {
+      setMessage((openError as Error).message);
+    }
+  }
+
+  return (
+    <div className="page-stack">
+      <section className="section-card section-card--hero">
+        <div>
+          <p className="eyebrow">Suche | Kalendar</p>
+          <h3>Proben nach Erfassungsdatum finden</h3>
+          <p className="muted-text">
+            Waehle einen Tag im Kalendar aus, um alle an diesem Datum erfassten Proben in der Liste zu sehen.
+          </p>
+        </div>
+
+        {message ? <div className="alert alert--error">{message}</div> : null}
+      </section>
+
+      <section className="section-card">
+        <label className="field field--required">
+          <span>Kalendar</span>
+          <input
+            type="date"
+            value={selectedDate}
+            onChange={(event) => void handleDateChange(event.target.value)}
+            required
+          />
+        </label>
+      </section>
+
+      <SampleSearchResultsSection
+        eyebrow="Suchergebnisse"
+        title={resultLabel}
+        emptyText="Bitte ein Datum im Kalendar auswaehlen."
+        samples={samples}
+        onOpen={(sampleNumber) => void openSample(sampleNumber)}
+      />
+    </div>
+  );
+}

frontend/src/pages/SearchFarmerPage.tsx

@@ -0,0 +1,141 @@
+import { FormEvent, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import SampleSearchResultsSection from "../components/SampleSearchResultsSection";
+import { apiGet } from "../lib/api";
+import type { FarmerOption, LookupResult, PortalSampleRow, PortalSnapshot } from "../lib/types";
+
+function routeForLookup(result: LookupResult) {
+  return result.sampleId && result.routeSegment ? `/samples/${result.sampleId}/${result.routeSegment}` : null;
+}
+
+export default function SearchFarmerPage() {
+  const navigate = useNavigate();
+  const [farmerQuery, setFarmerQuery] = useState("");
+  const [farmers, setFarmers] = useState<FarmerOption[]>([]);
+  const [samples, setSamples] = useState<PortalSampleRow[]>([]);
+  const [message, setMessage] = useState<string | null>(null);
+  const [showValidation, setShowValidation] = useState(false);
+  const [resultLabel, setResultLabel] = useState("Bitte Landwirt suchen");
+
+  async function loadFarmerSamples(farmer: FarmerOption) {
+    const response = await apiGet<PortalSnapshot>(
+      `/portal/snapshot?farmerBusinessKey=${encodeURIComponent(farmer.businessKey)}`,
+    );
+    setSamples(response.samples);
+    setResultLabel(`Proben von ${farmer.name}`);
+    setMessage(response.samples.length ? null : "Zu diesem Landwirt wurden noch keine Proben gefunden.");
+  }
+
+  async function handleSearch(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setShowValidation(true);
+    if (!farmerQuery.trim()) {
+      setMessage("Bitte einen Landwirt eingeben.");
+      return;
+    }
+
+    try {
+      const response = await apiGet<PortalSnapshot>(
+        `/portal/snapshot?farmerQuery=${encodeURIComponent(farmerQuery.trim())}`,
+      );
+      setFarmers(response.farmers);
+      if (!response.farmers.length) {
+        setSamples([]);
+        setResultLabel("Keine Treffer");
+        setMessage("Kein passender Landwirt gefunden.");
+        return;
+      }
+      if (response.farmers.length === 1) {
+        await loadFarmerSamples(response.farmers[0]);
+        return;
+      }
+      setSamples([]);
+      setResultLabel("Landwirt auswaehlen");
+      setMessage(null);
+    } catch (searchError) {
+      setFarmers([]);
+      setSamples([]);
+      setResultLabel("Keine Treffer");
+      setMessage((searchError as Error).message);
+    }
+  }
+
+  async function openSample(sampleNumber: number) {
+    try {
+      const result = await apiGet<LookupResult>(`/dashboard/lookup/${sampleNumber}`);
+      const target = routeForLookup(result);
+      if (!result.found || !target) {
+        setMessage(result.message);
+        return;
+      }
+      navigate(target);
+    } catch (openError) {
+      setMessage((openError as Error).message);
+    }
+  }
+
+  return (
+    <div className="page-stack">
+      <section className="section-card section-card--hero">
+        <div>
+          <p className="eyebrow">Suche | Landwirt</p>
+          <h3>Proben nach Landwirt finden</h3>
+          <p className="muted-text">
+            Suche nach dem Landwirt und oeffne danach eine der zugehoerigen Proben direkt aus der Trefferliste.
+          </p>
+        </div>
+
+        {message ? <div className="alert alert--error">{message}</div> : null}
+      </section>
+
+      <section className="section-card">
+        <form className={`hero-card__form ${showValidation ? "show-validation" : ""}`} onSubmit={handleSearch}>
+          <label className="field field--required">
+            <span>Landwirt</span>
+            <input
+              value={farmerQuery}
+              onChange={(event) => setFarmerQuery(event.target.value)}
+              placeholder="z. B. Agrar Lindenblick"
+              required
+            />
+          </label>
+          <button type="submit" className="accent-button">
+            Landwirt suchen
+          </button>
+        </form>
+      </section>
+
+      {farmers.length > 1 ? (
+        <section className="section-card">
+          <div className="section-card__header">
+            <div>
+              <p className="eyebrow">Treffer</p>
+              <h3>Gefundene Landwirte</h3>
+            </div>
+          </div>
+          <div className="user-grid">
+            {farmers.map((farmer) => (
+              <button
+                key={farmer.businessKey}
+                type="button"
+                className="user-card"
+                onClick={() => void loadFarmerSamples(farmer)}
+              >
+                <strong>{farmer.name}</strong>
+                <small>{farmer.email ?? "ohne E-Mail"}</small>
+              </button>
+            ))}
+          </div>
+        </section>
+      ) : null}
+
+      <SampleSearchResultsSection
+        eyebrow="Suchergebnisse"
+        title={resultLabel}
+        emptyText="Bitte zuerst einen Landwirt suchen oder aus der Trefferliste auswaehlen."
+        samples={samples}
+        onOpen={(sampleNumber) => void openSample(sampleNumber)}
+      />
+    </div>
+  );
+}

frontend/src/pages/SearchPage.tsx

@@ -0,0 +1,119 @@
+import { FormEvent, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import SampleSearchResultsSection from "../components/SampleSearchResultsSection";
+import { apiGet } from "../lib/api";
+import type { LookupResult, PortalSampleRow, SampleDetail } from "../lib/types";
+
+function routeForLookup(result: LookupResult) {
+  return result.sampleId && result.routeSegment ? `/samples/${result.sampleId}/${result.routeSegment}` : null;
+}
+
+function toPortalRow(sample: SampleDetail): PortalSampleRow {
+  return {
+    sampleId: sample.id,
+    sampleNumber: sample.sampleNumber,
+    createdAt: sample.createdAt,
+    completedAt: sample.completedAt,
+    farmerBusinessKey: sample.farmerBusinessKey,
+    farmerName: sample.farmerName,
+    farmerEmail: sample.farmerEmail,
+    cowNumber: sample.cowNumber,
+    cowName: sample.cowName,
+    sampleKindLabel: sample.sampleKind,
+    internalNote: sample.therapy?.internalNote ?? null,
+    completed: sample.completed,
+    reportSent: sample.reportSent,
+    reportBlocked: sample.reportBlocked,
+  };
+}
+
+export default function SearchPage() {
+  const navigate = useNavigate();
+  const [sampleNumber, setSampleNumber] = useState("");
+  const [samples, setSamples] = useState<PortalSampleRow[]>([]);
+  const [message, setMessage] = useState<string | null>(null);
+  const [showValidation, setShowValidation] = useState(false);
+  const [resultLabel, setResultLabel] = useState("Bitte Probennummer eingeben");
+
+  async function handleSearchByNumber(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setShowValidation(true);
+    if (!sampleNumber.trim()) {
+      setMessage("Bitte eine Probennummer eingeben.");
+      return;
+    }
+
+    try {
+      const result = await apiGet<LookupResult>(`/dashboard/lookup/${sampleNumber.trim()}`);
+      if (!result.found || !result.sampleId) {
+        setMessage(result.message);
+        setSamples([]);
+        setResultLabel("Keine Treffer");
+        return;
+      }
+      const sample = await apiGet<SampleDetail>(`/samples/by-number/${sampleNumber.trim()}`);
+      setSamples([toPortalRow(sample)]);
+      setResultLabel(`Suchtreffer fuer Probe ${sample.sampleNumber}`);
+      setMessage(null);
+    } catch (searchError) {
+      setSamples([]);
+      setMessage((searchError as Error).message);
+    }
+  }
+
+  async function openSample(sampleNumberToOpen: number) {
+    try {
+      const result = await apiGet<LookupResult>(`/dashboard/lookup/${sampleNumberToOpen}`);
+      const target = routeForLookup(result);
+      if (!result.found || !target) {
+        setMessage(result.message);
+        return;
+      }
+      navigate(target);
+    } catch (openError) {
+      setMessage((openError as Error).message);
+    }
+  }
+
+  return (
+    <div className="page-stack">
+      <section className="section-card section-card--hero">
+        <div>
+          <p className="eyebrow">Suche | Probe</p>
+          <h3>Probe per Nummer finden</h3>
+          <p className="muted-text">
+            Suche gezielt nach einer Probennummer und oeffne den passenden Arbeitsschritt direkt aus der Trefferliste.
+          </p>
+        </div>
+
+        {message ? <div className="alert alert--error">{message}</div> : null}
+      </section>
+
+      <section className="section-card">
+        <form className={`hero-card__form ${showValidation ? "show-validation" : ""}`} onSubmit={handleSearchByNumber}>
+          <label className="field field--required">
+            <span>Probennummer</span>
+            <input
+              value={sampleNumber}
+              onChange={(event) => setSampleNumber(event.target.value)}
+              inputMode="numeric"
+              placeholder="z. B. 100203"
+              required
+            />
+          </label>
+          <button type="submit" className="accent-button">
+            Probe suchen
+          </button>
+        </form>
+      </section>
+
+      <SampleSearchResultsSection
+        eyebrow="Suchergebnisse"
+        title={resultLabel}
+        emptyText="Bitte eine Probennummer eingeben und die Suche starten."
+        samples={samples}
+        onOpen={(sampleNumberValue) => void openSample(sampleNumberValue)}
+      />
+    </div>
+  );
+}