Add customer search and navigation updates

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">