Initial MUH app implementation

frontend/src/pages/HomePage.tsx

@@ -0,0 +1,179 @@
+import { FormEvent, useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { apiGet } from "../lib/api";
+import type { DashboardOverview, LookupResult } from "../lib/types";
+
+function formatDate(value: string) {
+  return new Intl.DateTimeFormat("de-DE", {
+    dateStyle: "medium",
+    timeStyle: "short",
+  }).format(new Date(value));
+}
+
+function routeForSample(sampleId: string, routeSegment: string) {
+  return `/samples/${sampleId}/${routeSegment}`;
+}
+
+const STEP_LABELS: Record<string, string> = {
+  ANAMNESIS: "Anamnese",
+  ANTIBIOGRAM: "Antibiogramm",
+  THERAPY: "Therapie",
+  COMPLETED: "Abgeschlossen",
+};
+
+export default function HomePage() {
+  const navigate = useNavigate();
+  const [dashboard, setDashboard] = useState<DashboardOverview | null>(null);
+  const [sampleNumber, setSampleNumber] = useState("");
+  const [message, setMessage] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    async function loadDashboard() {
+      try {
+        const response = await apiGet<DashboardOverview>("/dashboard");
+        setDashboard(response);
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    void loadDashboard();
+  }, []);
+
+  async function handleLookup(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    if (!sampleNumber.trim()) {
+      setMessage("Bitte eine Probennummer eingeben.");
+      return;
+    }
+
+    try {
+      const response = await apiGet<LookupResult>(`/dashboard/lookup/${sampleNumber.trim()}`);
+      if (!response.found || !response.sampleId || !response.routeSegment) {
+        setMessage(response.message);
+        return;
+      }
+      setMessage(null);
+      navigate(routeForSample(response.sampleId, response.routeSegment));
+    } catch (lookupError) {
+      setMessage((lookupError as Error).message);
+    }
+  }
+
+  return (
+    <div className="page-stack">
+      <section className="hero-card">
+        <div>
+          <p className="eyebrow">Startseite</p>
+          <h3>Bearbeitungsstand sofort finden</h3>
+          <p className="muted-text">
+            Eine bekannte Probennummer oeffnet direkt den passenden Arbeitsschritt.
+          </p>
+        </div>
+
+        <form className="hero-card__form" onSubmit={handleLookup}>
+          <label className="field">
+            <span>Nummer</span>
+            <input
+              value={sampleNumber}
+              onChange={(event) => setSampleNumber(event.target.value)}
+              placeholder="z. B. 100203"
+              inputMode="numeric"
+            />
+          </label>
+          <button type="submit" className="accent-button">
+            Probe oeffnen
+          </button>
+          <button type="button" className="secondary-button" onClick={() => navigate("/samples/new")}>
+            Neuanlage einer Probe
+          </button>
+        </form>
+
+        {message ? <div className="alert alert--error">{message}</div> : null}
+      </section>
+
+      <section className="metrics-grid">
+        <article className="metric-card">
+          <span className="metric-card__label">Naechste Nummer</span>
+          <strong>{dashboard?.nextSampleNumber ?? "..."}</strong>
+        </article>
+        <article className="metric-card">
+          <span className="metric-card__label">Offene Proben</span>
+          <strong>{dashboard?.openSamples ?? "..."}</strong>
+        </article>
+        <article className="metric-card">
+          <span className="metric-card__label">Heute abgeschlossen</span>
+          <strong>{dashboard?.completedToday ?? "..."}</strong>
+        </article>
+      </section>
+
+      <section className="section-card">
+        <div className="section-card__header">
+          <div>
+            <p className="eyebrow">Arbeitsvorrat</p>
+            <h3>Zuletzt bearbeitete Proben</h3>
+          </div>
+        </div>
+
+        {loading ? (
+          <div className="empty-state">Dashboard wird geladen ...</div>
+        ) : dashboard?.recentSamples.length ? (
+          <div className="table-shell">
+            <table className="data-table">
+              <thead>
+                <tr>
+                  <th>Probe</th>
+                  <th>Landwirt</th>
+                  <th>Kuh</th>
+                  <th>Typ</th>
+                  <th>Status</th>
+                  <th>Aktualisiert</th>
+                  <th />
+                </tr>
+              </thead>
+              <tbody>
+                {dashboard.recentSamples.map((sample) => (
+                  <tr key={sample.id}>
+                    <td>{sample.sampleNumber}</td>
+                    <td>{sample.farmerName}</td>
+                    <td>{sample.cowLabel}</td>
+                    <td>{sample.sampleKind === "DRY_OFF" ? "Trockensteller" : "Laktation"}</td>
+                    <td>
+                      <span className={`status-pill status-pill--${sample.currentStep.toLowerCase()}`}>
+                        {STEP_LABELS[sample.currentStep]}
+                      </span>
+                    </td>
+                    <td>{formatDate(sample.updatedAt)}</td>
+                    <td>
+                      <button
+                        type="button"
+                        className="table-link"
+                        onClick={() =>
+                          navigate(
+                            routeForSample(
+                              sample.id,
+                              sample.currentStep === "ANTIBIOGRAM"
+                                ? "antibiogram"
+                                : sample.currentStep === "THERAPY" || sample.currentStep === "COMPLETED"
+                                  ? "therapy"
+                                  : "anamnesis",
+                            ),
+                          )
+                        }
+                      >
+                        Oeffnen
+                      </button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        ) : (
+          <div className="empty-state">Noch keine Proben vorhanden.</div>
+        )}
+      </section>
+    </div>
+  );
+}