feat(status): add estimate customer actions

.env.example

@@ -25,3 +25,13 @@ OLYMPUS_INTAKE_API_URL=
 # Optional future server-side Olympus intake token.
 # Leave empty until the Olympus integration is explicitly implemented.
 OLYMPUS_INTAKE_API_TOKEN=
+
+# Server-side Olympus base URL for public repair status links.
+# Docker example when Hermes is reachable in the same network: http://hermes:8000
+# Production example: https://olympus.example.internal
+# This URL must be reachable by the Next.js server, not by the browser.
+OLYMPUS_PUBLIC_STATUS_API_URL=
+
+# Optional server-side token for future protected status API access.
+# Leave empty for Olympus v0.8.1 unless the endpoint is protected later.
+OLYMPUS_PUBLIC_STATUS_API_TOKEN=

README.md

@@ -23,6 +23,7 @@ Version: `0.4.1`
 - `/reparatur`
 - `/ueber-uns`
 - `/kontakt`
+- `/status/[token]`
 - `/impressum`
 - `/datenschutz`
 - `/admin/login`
@@ -109,8 +110,12 @@ Variablen:
 - `AUTH_COOKIE_SECURE`: `true` in Produktion mit HTTPS, lokal `false`
 - `OLYMPUS_INTAKE_API_URL`: vorbereitet für spätere serverseitige Olympus-Anbindung
 - `OLYMPUS_INTAKE_API_TOKEN`: vorbereitet für spätere serverseitige Olympus-Anbindung
+- `OLYMPUS_PUBLIC_STATUS_API_URL`: serverseitig erreichbare Olympus-Basis-URL für öffentliche Reparaturstatuslinks
+- `OLYMPUS_PUBLIC_STATUS_API_TOKEN`: optionaler serverseitiger Token für spätere geschützte Status-API-Zugriffe
 
-Die Olympus-Variablen sind nur für eine spätere serverseitige Integration vorbereitet. Sie werden nicht im Browser verwendet.
+Die Intake-Variablen sind für eine spätere serverseitige Integration vorbereitet. Die Status-Variablen werden für `/status/[token]` serverseitig verwendet. Sie werden nicht im Browser verwendet.
+
+Für Reparaturstatuslinks muss `OLYMPUS_PUBLIC_STATUS_API_URL` vom Next.js-Server erreichbar sein. In Docker kann das je nach Netzwerk z. B. `http://hermes:8000` sein. Produktiv sollte eine interne Server-zu-Server-Adresse oder eine abgesicherte Olympus-URL verwendet werden.
 
 Für lokale Entwicklung kann `AUTH_COOKIE_SECURE=false` bleiben. Produktiv muss HTTPS verwendet und `AUTH_COOKIE_SECURE=true` gesetzt werden. `ADMIN_SESSION_SECRET` muss produktiv ein langer zufälliger Wert sein.
 
@@ -130,6 +135,57 @@ Für lokale Entwicklung kann `AUTH_COOKIE_SECURE=false` bleiben. Produktiv muss
 - `GET /api/media/[filename]`
 - `GET /api/health`
 
+## Öffentlicher Reparaturstatus
+
+Olympus CRM erzeugt sichere Statuslinks für Reparaturen. Die Website stellt dafür die öffentliche Route bereit:
+
+```text
+/status/<token>
+```
+
+Die Seite ruft Olympus ausschließlich serverseitig auf:
+
+```text
+${OLYMPUS_PUBLIC_STATUS_API_URL}/public/repairs/status/<token>
+```
+
+Der Browser sieht weder die Olympus-URL noch optionale Server-Tokens. Die öffentliche Statusseite zeigt nur:
+
+- Reparaturnummer
+- Gerät
+- aktuellen Status
+- letzte Aktualisierung
+- kundenfreundliche Status-Timeline
+- optionalen Kostenvoranschlag aus Olympus CRM v0.8.6
+
+Wenn Olympus einen Kostenvoranschlag im Status `sent` liefert, zeigt die Website:
+
+- Nummer, Titel, Nachricht an den Kunden und Gültigkeit
+- Positionen mit Menge, Einheit und Betrag
+- Zwischensumme, Steuer und Gesamtbetrag
+- Aktionen zum Freigeben, Ablehnen oder für eine Rückfrage
+
+Diese Aktionen laufen nicht direkt vom Browser zu Olympus. Der Browser ruft ausschließlich relative Website-Endpunkte auf:
+
+```text
+POST /api/status/<token>/estimate/approve
+POST /api/status/<token>/estimate/decline
+POST /api/status/<token>/estimate/question
+```
+
+Die Website leitet diese Anfragen serverseitig an Olympus weiter:
+
+```text
+${OLYMPUS_PUBLIC_STATUS_API_URL}/public/repairs/status/<token>/estimate/<action>
+```
+
+Nicht angezeigt werden Kundendaten, interne Notizen, Diagnosedetails oder technische Fehlermeldungen.
+
+Fehlerverhalten:
+
+- ungültiger oder abgelaufener Token: freundliche Meldung mit Links zu Reparatur und Kontakt
+- Olympus nicht erreichbar: neutrale Meldung ohne technische Details
+
 Aktuell validieren die Routen serverseitig, geben klare JSON-Antworten zurück und schreiben nur technische Metadaten in Server-Logs. Es werden keine Nachrichteninhalte oder Tokens geloggt. Kontakt- und Reparaturanfragen werden lokal unter `data/*.json` gespeichert und nicht versioniert.
 
 ## Admin-Bereich
@@ -204,9 +260,9 @@ Bilder für Logo und Social Image werden aus dem Medienbestand ausgewählt. Neue
 
 ## Roadmap Kundenportal
 
-Ein Kundenportal ist vorbereitet, aber noch nicht öffentlich implementiert. Für spätere Ausbaustufen sind folgende Routen vorgesehen:
+Ein vollständiges Kundenportal ist vorbereitet, aber noch nicht öffentlich implementiert. Die öffentliche Statuslink-Seite ist bereits vorhanden. Für spätere Ausbaustufen sind folgende Routen vorgesehen:
 
-- `/status`: öffentliche Status-Einstiegsseite
+- `/status/[token]`: öffentliche Statuslink-Seite für Olympus
 - `/reparatur/status`: Statusabfrage für Reparaturanfragen
 - `/portal/login`: geschützter Kundenlogin
 

app/api/status/[token]/estimate/action-response.ts

@@ -0,0 +1,36 @@
+import { NextResponse } from "next/server";
+import type { EstimateActionResult } from "@/lib/olympus/status";
+
+export function estimateActionResponse(result: EstimateActionResult, successMessage: string) {
+  if (result.ok) {
+    return NextResponse.json({ message: successMessage });
+  }
+
+  if (result.reason === "invalid") {
+    return NextResponse.json(
+      { message: "Dieser Statuslink ist ungültig oder nicht mehr aktiv." },
+      { status: 404 },
+    );
+  }
+
+  if (result.reason === "unavailable") {
+    return NextResponse.json(
+      { message: "Der Reparaturstatus ist momentan nicht abrufbar." },
+      { status: 502 },
+    );
+  }
+
+  return NextResponse.json(
+    { message: "Die Aktion konnte nicht abgeschlossen werden. Bitte versuchen Sie es erneut." },
+    { status: 400 },
+  );
+}
+
+export async function readOptionalMessage(request: Request) {
+  try {
+    const body = await request.json() as { message?: unknown };
+    return typeof body.message === "string" ? body.message : "";
+  } catch {
+    return "";
+  }
+}

app/api/status/[token]/estimate/approve/route.ts

@@ -0,0 +1,15 @@
+import { submitOlympusEstimateAction } from "@/lib/olympus/status";
+import { estimateActionResponse } from "../action-response";
+
+type RouteContext = {
+  params: Promise<{
+    token: string;
+  }>;
+};
+
+export async function POST(_request: Request, { params }: RouteContext) {
+  const { token } = await params;
+  const result = await submitOlympusEstimateAction(token, "approve");
+
+  return estimateActionResponse(result, "Kostenvoranschlag wurde freigegeben.");
+}

app/api/status/[token]/estimate/decline/route.ts

@@ -0,0 +1,16 @@
+import { submitOlympusEstimateAction } from "@/lib/olympus/status";
+import { estimateActionResponse, readOptionalMessage } from "../action-response";
+
+type RouteContext = {
+  params: Promise<{
+    token: string;
+  }>;
+};
+
+export async function POST(request: Request, { params }: RouteContext) {
+  const { token } = await params;
+  const message = await readOptionalMessage(request);
+  const result = await submitOlympusEstimateAction(token, "decline", message);
+
+  return estimateActionResponse(result, "Kostenvoranschlag wurde abgelehnt.");
+}

app/api/status/[token]/estimate/question/route.ts

@@ -0,0 +1,16 @@
+import { submitOlympusEstimateAction } from "@/lib/olympus/status";
+import { estimateActionResponse, readOptionalMessage } from "../action-response";
+
+type RouteContext = {
+  params: Promise<{
+    token: string;
+  }>;
+};
+
+export async function POST(request: Request, { params }: RouteContext) {
+  const { token } = await params;
+  const message = await readOptionalMessage(request);
+  const result = await submitOlympusEstimateAction(token, "question", message);
+
+  return estimateActionResponse(result, "Ihre Rückfrage wurde gesendet.");
+}

app/globals.css

@@ -488,6 +488,372 @@ h3 {
   line-height: 1;
 }
 
+.status-page {
+  min-height: calc(100vh - 78px);
+  padding: 72px 0;
+  background:
+    linear-gradient(135deg, rgba(244, 246, 248, 0.96), rgba(232, 238, 246, 0.94)),
+    url("/workbench-signal.svg");
+  background-position: center;
+  background-size: cover;
+}
+
+.status-page-inner {
+  display: grid;
+  align-items: start;
+}
+
+.status-card {
+  border: 1px solid rgba(8, 42, 96, 0.12);
+  border-radius: var(--radius);
+  background: rgba(255, 255, 255, 0.97);
+  padding: 34px;
+  box-shadow: var(--shadow);
+}
+
+.status-card-narrow {
+  width: min(760px, 100%);
+  margin: 0 auto;
+}
+
+.status-card h1 {
+  margin-bottom: 10px;
+  color: var(--ink);
+  font-size: clamp(36px, 5vw, 58px);
+  line-height: 1;
+}
+
+.status-title-row {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 24px;
+  margin-bottom: 26px;
+}
+
+.status-badge,
+.status-pill {
+  display: inline-flex;
+  min-height: 32px;
+  align-items: center;
+  border-radius: 999px;
+  border: 1px solid rgba(30, 159, 184, 0.24);
+  background: rgba(30, 159, 184, 0.1);
+  color: var(--navy);
+  font-size: 13px;
+  font-weight: 800;
+  padding: 0 12px;
+  white-space: nowrap;
+}
+
+.status-summary {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 14px;
+  margin: 0 0 34px;
+}
+
+.status-summary div {
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: #f8fafc;
+  padding: 16px;
+}
+
+.status-summary dt {
+  margin-bottom: 8px;
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
+.status-summary dd {
+  margin: 0;
+  color: var(--ink);
+  font-size: 17px;
+  font-weight: 800;
+}
+
+.status-timeline-section h2 {
+  margin-bottom: 20px;
+  font-size: clamp(26px, 3vw, 34px);
+}
+
+.public-status-timeline {
+  display: grid;
+  gap: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.public-status-timeline li {
+  position: relative;
+  border-left: 2px solid #d7e0ea;
+  padding: 0 0 18px 26px;
+}
+
+.public-status-timeline li:last-child {
+  padding-bottom: 0;
+}
+
+.timeline-dot {
+  position: absolute;
+  left: -8px;
+  top: 15px;
+  width: 14px;
+  height: 14px;
+  border: 3px solid #fff;
+  border-radius: 999px;
+  background: var(--steel);
+  box-shadow: 0 0 0 1px rgba(8, 42, 96, 0.12);
+}
+
+.public-status-timeline li.is-current .timeline-dot {
+  background: var(--orange);
+}
+
+.timeline-content {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 18px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: #fff;
+  padding: 16px;
+}
+
+.timeline-title {
+  margin-bottom: 8px;
+  color: var(--ink);
+  font-size: 17px;
+  font-weight: 800;
+}
+
+.timeline-content time,
+.status-muted {
+  color: var(--muted);
+  font-size: 14px;
+}
+
+.estimate-card {
+  display: grid;
+  gap: 22px;
+  border: 1px solid rgba(8, 42, 96, 0.12);
+  border-radius: var(--radius);
+  background: #f8fafc;
+  margin: 0 0 34px;
+  padding: 24px;
+}
+
+.estimate-header,
+.estimate-item,
+.estimate-totals div,
+.estimate-form-actions {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 18px;
+}
+
+.estimate-header h2 {
+  margin: 0 0 8px;
+  color: var(--ink);
+  font-size: clamp(26px, 3vw, 34px);
+}
+
+.estimate-status {
+  display: inline-flex;
+  min-height: 32px;
+  align-items: center;
+  border: 1px solid rgba(232, 124, 46, 0.28);
+  border-radius: 999px;
+  background: rgba(232, 124, 46, 0.12);
+  color: #8b420d;
+  font-size: 13px;
+  font-weight: 800;
+  padding: 0 12px;
+  white-space: nowrap;
+}
+
+.estimate-message,
+.estimate-status-text {
+  border-left: 4px solid var(--steel);
+  background: #fff;
+  color: var(--ink);
+  margin: 0;
+  padding: 14px 16px;
+}
+
+.estimate-meta {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+  margin: 0;
+}
+
+.estimate-meta div {
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: #fff;
+  padding: 14px;
+}
+
+.estimate-meta dt,
+.estimate-totals dt {
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
+.estimate-meta dd,
+.estimate-totals dd {
+  margin: 6px 0 0;
+  color: var(--ink);
+  font-weight: 800;
+}
+
+.estimate-items {
+  display: grid;
+  gap: 12px;
+}
+
+.estimate-item {
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: #fff;
+  padding: 16px;
+}
+
+.estimate-item h3 {
+  margin: 6px 0;
+  color: var(--ink);
+  font-size: 18px;
+}
+
+.estimate-item p {
+  margin: 0;
+  color: var(--muted);
+}
+
+.estimate-item-type {
+  color: var(--steel);
+  font-size: 12px;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
+.estimate-item-price {
+  display: grid;
+  gap: 6px;
+  min-width: 150px;
+  text-align: right;
+}
+
+.estimate-item-price span {
+  color: var(--muted);
+  font-size: 14px;
+}
+
+.estimate-item-price strong {
+  color: var(--ink);
+  font-size: 18px;
+}
+
+.estimate-totals {
+  display: grid;
+  gap: 8px;
+  width: min(380px, 100%);
+  justify-self: end;
+  margin: 0;
+}
+
+.estimate-totals div {
+  border-bottom: 1px solid var(--line);
+  padding: 8px 0;
+}
+
+.estimate-totals .estimate-total-highlight {
+  border-bottom: 0;
+  color: var(--ink);
+  font-size: 20px;
+}
+
+.estimate-actions-panel {
+  display: grid;
+  gap: 16px;
+  border-top: 1px solid var(--line);
+  padding-top: 18px;
+}
+
+.estimate-action-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.button.danger {
+  border-color: #a33a2d;
+  background: #a33a2d;
+  color: #fff;
+}
+
+.button.danger:hover {
+  background: #842f25;
+}
+
+.button:disabled {
+  cursor: not-allowed;
+  opacity: 0.64;
+}
+
+.estimate-action-form {
+  display: grid;
+  gap: 10px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: #fff;
+  padding: 16px;
+}
+
+.estimate-action-form label {
+  color: var(--ink);
+  font-weight: 800;
+}
+
+.estimate-action-form textarea {
+  width: 100%;
+  border: 1px solid #cfd8e5;
+  border-radius: 8px;
+  color: var(--ink);
+  padding: 12px;
+  resize: vertical;
+}
+
+.estimate-form-actions {
+  justify-content: flex-start;
+  flex-wrap: wrap;
+}
+
+.estimate-feedback {
+  border: 1px solid rgba(46, 125, 50, 0.24);
+  border-radius: 8px;
+  background: rgba(46, 125, 50, 0.08);
+  color: #1b5e20;
+  font-weight: 800;
+  margin: 0;
+  padding: 12px 14px;
+}
+
+.estimate-feedback.error {
+  border-color: rgba(163, 58, 45, 0.26);
+  background: rgba(163, 58, 45, 0.08);
+  color: #842f25;
+}
+
 .admin-login-page {
   min-height: 100vh;
   display: grid;
@@ -1263,10 +1629,44 @@ h3 {
   .admin-shell,
   .admin-kpis,
   .admin-detail-grid,
-  .media-grid {
+  .media-grid,
+  .status-summary {
     grid-template-columns: 1fr;
   }
 
+  .status-page {
+    padding: 38px 0;
+  }
+
+  .status-card {
+    padding: 22px;
+  }
+
+  .status-title-row,
+  .timeline-content,
+  .estimate-header,
+  .estimate-item {
+    display: grid;
+  }
+
+  .status-badge,
+  .estimate-status {
+    width: fit-content;
+  }
+
+  .estimate-meta {
+    grid-template-columns: 1fr;
+  }
+
+  .estimate-item-price {
+    min-width: 0;
+    text-align: left;
+  }
+
+  .estimate-totals {
+    justify-self: stretch;
+  }
+
   .admin-sidebar {
     position: static;
     height: auto;

app/status/[token]/page.tsx

@@ -0,0 +1,268 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { EstimateActions } from "@/components/status/EstimateActions";
+import {
+  fetchOlympusRepairStatus,
+  type OlympusEstimate,
+  type OlympusRepairStatus,
+} from "@/lib/olympus/status";
+
+type PageProps = {
+  params: Promise<{
+    token: string;
+  }>;
+};
+
+export const dynamic = "force-dynamic";
+
+export const metadata: Metadata = {
+  title: "Reparaturstatus | Funktechnik Schubert",
+  description: "Öffentlicher Reparaturstatus für Kunden von Funktechnik Schubert.",
+  robots: {
+    index: false,
+    follow: false,
+  },
+};
+
+function formatDate(value: string) {
+  return new Intl.DateTimeFormat("de-DE", {
+    dateStyle: "medium",
+    timeStyle: "short",
+  }).format(new Date(value));
+}
+
+function formatDateOnly(value: string | null) {
+  if (!value) {
+    return "Nicht angegeben";
+  }
+
+  return new Intl.DateTimeFormat("de-DE", {
+    dateStyle: "medium",
+  }).format(new Date(value));
+}
+
+function formatMoney(cents: number, currency: string) {
+  return new Intl.NumberFormat("de-DE", {
+    style: "currency",
+    currency: currency || "EUR",
+  }).format(cents / 100);
+}
+
+function estimateStatusLabel(status: string) {
+  const labels: Record<string, string> = {
+    draft: "In Vorbereitung",
+    sent: "Zur Freigabe",
+    approved: "Freigegeben",
+    declined: "Abgelehnt",
+    expired: "Abgelaufen",
+    cancelled: "Storniert",
+  };
+
+  return labels[status] ?? status;
+}
+
+function estimateStatusText(status: string) {
+  const texts: Record<string, string> = {
+    sent: "Bitte prüfen Sie den Kostenvoranschlag. Sie können ihn freigeben, ablehnen oder eine Rückfrage senden.",
+    approved: "Dieser Kostenvoranschlag wurde freigegeben.",
+    declined: "Dieser Kostenvoranschlag wurde abgelehnt.",
+    expired: "Dieser Kostenvoranschlag ist nicht mehr gültig.",
+    cancelled: "Dieser Kostenvoranschlag wurde storniert.",
+  };
+
+  return texts[status] ?? "Der Kostenvoranschlag ist aktuell nicht zur Bearbeitung freigegeben.";
+}
+
+function estimateItemTypeLabel(type: string) {
+  const labels: Record<string, string> = {
+    labor: "Arbeitszeit",
+    part: "Ersatzteil",
+    material: "Material",
+    service: "Service",
+    shipping: "Versand",
+    other: "Sonstiges",
+  };
+
+  return labels[type] ?? "Position";
+}
+
+function EstimateCard({ estimate, token }: { estimate: OlympusEstimate | null | undefined; token: string }) {
+  if (!estimate) {
+    return null;
+  }
+
+  return (
+    <section className="estimate-card" aria-labelledby="estimate-title">
+      <div className="estimate-header">
+        <div>
+          <p className="eyebrow">Kostenvoranschlag</p>
+          <h2 id="estimate-title">{estimate.title || "Kostenvoranschlag"}</h2>
+          <p className="status-muted">Nummer {estimate.estimate_number}</p>
+        </div>
+        <span className="estimate-status">{estimateStatusLabel(estimate.status)}</span>
+      </div>
+
+      {estimate.customer_message && <p className="estimate-message">{estimate.customer_message}</p>}
+
+      <dl className="estimate-meta">
+        <div>
+          <dt>Gültig bis</dt>
+          <dd>{formatDateOnly(estimate.valid_until)}</dd>
+        </div>
+        <div>
+          <dt>Status</dt>
+          <dd>{estimateStatusLabel(estimate.status)}</dd>
+        </div>
+      </dl>
+
+      <div className="estimate-items" aria-label="Positionen des Kostenvoranschlags">
+        {estimate.items.map((item, index) => (
+          <div className="estimate-item" key={`${item.title}-${index}`}>
+            <div>
+              <span className="estimate-item-type">{estimateItemTypeLabel(item.item_type)}</span>
+              <h3>{item.title}</h3>
+              {item.description && <p>{item.description}</p>}
+            </div>
+            <div className="estimate-item-price">
+              <span>
+                {item.quantity} {item.unit}
+              </span>
+              <strong>{formatMoney(item.total_cents, estimate.currency)}</strong>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <dl className="estimate-totals">
+        <div>
+          <dt>Zwischensumme</dt>
+          <dd>{formatMoney(estimate.subtotal_cents, estimate.currency)}</dd>
+        </div>
+        <div>
+          <dt>Mehrwertsteuer</dt>
+          <dd>{formatMoney(estimate.tax_cents, estimate.currency)}</dd>
+        </div>
+        <div className="estimate-total-highlight">
+          <dt>Gesamt</dt>
+          <dd>{formatMoney(estimate.total_cents, estimate.currency)}</dd>
+        </div>
+      </dl>
+
+      <p className="estimate-status-text">{estimateStatusText(estimate.status)}</p>
+
+      {estimate.status === "sent" && <EstimateActions token={token} />}
+    </section>
+  );
+}
+
+function StatusError({ title, text }: { title: string; text: string }) {
+  return (
+    <section className="status-page">
+      <div className="container status-page-inner">
+        <div className="status-card status-card-narrow">
+          <p className="eyebrow">Reparaturstatus</p>
+          <h1>{title}</h1>
+          <p className="lead">{text}</p>
+          <div className="actions">
+            <Link className="button" href="/reparatur">Reparatur anfragen</Link>
+            <Link className="button light" href="/kontakt">Kontakt aufnehmen</Link>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function StatusTimeline({ status }: { status: OlympusRepairStatus }) {
+  if (status.status_history_public.length === 0) {
+    return <p className="status-muted">Noch keine Statushistorie vorhanden.</p>;
+  }
+
+  const latestIndex = status.status_history_public.length - 1;
+
+  return (
+    <ol className="public-status-timeline">
+      {status.status_history_public.map((item, index) => (
+        <li key={`${item.status}-${item.created_at}-${index}`} className={index === latestIndex ? "is-current" : ""}>
+          <span className="timeline-dot" aria-hidden="true" />
+          <div className="timeline-content">
+            <div>
+              <p className="timeline-title">{item.status_label}</p>
+              {index === latestIndex && <span className="status-pill">Aktueller Status</span>}
+            </div>
+            <time dateTime={item.created_at}>{formatDate(item.created_at)}</time>
+          </div>
+        </li>
+      ))}
+    </ol>
+  );
+}
+
+export default async function RepairStatusPage({ params }: PageProps) {
+  const { token } = await params;
+  const result = await fetchOlympusRepairStatus(token);
+
+  if (!result.ok && result.reason === "invalid") {
+    return (
+      <StatusError
+        title="Statuslink nicht aktiv"
+        text="Dieser Statuslink ist ungültig oder nicht mehr aktiv."
+      />
+    );
+  }
+
+  if (!result.ok) {
+    return (
+      <StatusError
+        title="Status momentan nicht abrufbar"
+        text="Der Reparaturstatus ist momentan nicht abrufbar. Bitte versuchen Sie es später erneut oder kontaktieren Sie uns direkt."
+      />
+    );
+  }
+
+  const status = result.status;
+  const device = `${status.device_manufacturer} ${status.device_model}`.trim();
+
+  return (
+    <section className="status-page">
+      <div className="container status-page-inner">
+        <div className="status-card">
+          <p className="eyebrow">Reparaturstatus</p>
+          <div className="status-title-row">
+            <div>
+              <h1>Reparaturstatus</h1>
+              <p className="lead">Hier sehen Sie den aktuellen Stand Ihrer Reparatur.</p>
+            </div>
+            <span className="status-badge">{status.public_status_label}</span>
+          </div>
+
+          <dl className="status-summary">
+            <div>
+              <dt>Reparaturnummer</dt>
+              <dd>{status.repair_number}</dd>
+            </div>
+            <div>
+              <dt>Gerät</dt>
+              <dd>{device || "Nicht angegeben"}</dd>
+            </div>
+            <div>
+              <dt>Aktueller Status</dt>
+              <dd>{status.public_status_label}</dd>
+            </div>
+            <div>
+              <dt>Letzte Aktualisierung</dt>
+              <dd>{formatDate(status.updated_at)}</dd>
+            </div>
+          </dl>
+
+          <EstimateCard estimate={status.estimate} token={token} />
+
+          <div className="status-timeline-section">
+            <h2>Statusverlauf</h2>
+            <StatusTimeline status={status} />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

components/status/EstimateActions.tsx

@@ -0,0 +1,153 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+type EstimateAction = "approve" | "decline" | "question";
+
+type EstimateActionsProps = {
+  token: string;
+};
+
+type ActionResponse = {
+  message?: string;
+};
+
+const actionLabels: Record<EstimateAction, string> = {
+  approve: "Freigeben",
+  decline: "Ablehnen",
+  question: "Rückfrage senden",
+};
+
+async function readActionMessage(response: Response) {
+  try {
+    const body = await response.json() as ActionResponse;
+    return body.message || "Die Aktion konnte nicht abgeschlossen werden.";
+  } catch {
+    return "Die Aktion konnte nicht abgeschlossen werden.";
+  }
+}
+
+export function EstimateActions({ token }: EstimateActionsProps) {
+  const router = useRouter();
+  const [activeForm, setActiveForm] = useState<Exclude<EstimateAction, "approve"> | null>(null);
+  const [message, setMessage] = useState("");
+  const [pendingAction, setPendingAction] = useState<EstimateAction | null>(null);
+  const [feedback, setFeedback] = useState<{ type: "success" | "error"; text: string } | null>(null);
+
+  async function submitAction(action: EstimateAction, actionMessage = "") {
+    setPendingAction(action);
+    setFeedback(null);
+
+    try {
+      const response = await fetch(`/api/status/${encodeURIComponent(token)}/estimate/${action}`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ message: actionMessage.trim() || null }),
+      });
+      const responseMessage = await readActionMessage(response);
+
+      if (!response.ok) {
+        setFeedback({ type: "error", text: responseMessage });
+        return;
+      }
+
+      setMessage("");
+      setActiveForm(null);
+      setFeedback({ type: "success", text: responseMessage });
+      router.refresh();
+    } catch {
+      setFeedback({
+        type: "error",
+        text: "Die Aktion konnte momentan nicht gesendet werden. Bitte versuchen Sie es erneut.",
+      });
+    } finally {
+      setPendingAction(null);
+    }
+  }
+
+  const isPending = pendingAction !== null;
+
+  return (
+    <div className="estimate-actions-panel">
+      <div className="estimate-action-buttons">
+        <button
+          className="button"
+          disabled={isPending}
+          type="button"
+          onClick={() => void submitAction("approve")}
+        >
+          {pendingAction === "approve" ? "Wird freigegeben..." : actionLabels.approve}
+        </button>
+        <button
+          className="button light"
+          disabled={isPending}
+          type="button"
+          onClick={() => {
+            setActiveForm("question");
+            setFeedback(null);
+          }}
+        >
+          Rückfrage
+        </button>
+        <button
+          className="button danger"
+          disabled={isPending}
+          type="button"
+          onClick={() => {
+            setActiveForm("decline");
+            setFeedback(null);
+          }}
+        >
+          Ablehnen
+        </button>
+      </div>
+
+      {activeForm && (
+        <form
+          className="estimate-action-form"
+          onSubmit={(event) => {
+            event.preventDefault();
+            void submitAction(activeForm, message);
+          }}
+        >
+          <label htmlFor={`estimate-${activeForm}-message`}>
+            {activeForm === "decline" ? "Nachricht zur Ablehnung" : "Ihre Rückfrage"}
+          </label>
+          <textarea
+            id={`estimate-${activeForm}-message`}
+            name="message"
+            rows={4}
+            value={message}
+            placeholder={activeForm === "decline" ? "Optionaler Hinweis für uns" : "Ihre Frage zum Kostenvoranschlag"}
+            onChange={(event) => setMessage(event.currentTarget.value)}
+          />
+          <div className="estimate-form-actions">
+            <button className="button" disabled={isPending} type="submit">
+              {pendingAction === activeForm ? "Wird gesendet..." : actionLabels[activeForm]}
+            </button>
+            <button
+              className="button light"
+              disabled={isPending}
+              type="button"
+              onClick={() => {
+                setActiveForm(null);
+                setMessage("");
+              }}
+            >
+              Abbrechen
+            </button>
+          </div>
+        </form>
+      )}
+
+      {feedback && (
+        <p className={`estimate-feedback ${feedback.type === "error" ? "error" : "success"}`} role="status">
+          {feedback.text}
+        </p>
+      )}
+    </div>
+  );
+}

docker-compose.yml

@@ -15,6 +15,8 @@ services:
       AUTH_COOKIE_SECURE: ${AUTH_COOKIE_SECURE:-false}
       OLYMPUS_INTAKE_API_URL: ${OLYMPUS_INTAKE_API_URL:-}
       OLYMPUS_INTAKE_API_TOKEN: ${OLYMPUS_INTAKE_API_TOKEN:-}
+      OLYMPUS_PUBLIC_STATUS_API_URL: ${OLYMPUS_PUBLIC_STATUS_API_URL:-}
+      OLYMPUS_PUBLIC_STATUS_API_TOKEN: ${OLYMPUS_PUBLIC_STATUS_API_TOKEN:-}
       DOCKER_ENV: "true"
     volumes:
       - funktechnik-data:/app/data

lib/olympus/status.ts

@@ -0,0 +1,145 @@
+import "server-only";
+
+export type OlympusRepairStatusHistoryItem = {
+  status: string;
+  status_label: string;
+  created_at: string;
+};
+
+export type OlympusEstimateItem = {
+  item_type: string;
+  title: string;
+  description: string | null;
+  quantity: string | number;
+  unit: string;
+  unit_price_cents: number;
+  total_cents: number;
+};
+
+export type OlympusEstimate = {
+  estimate_number: string;
+  status: "draft" | "sent" | "approved" | "declined" | "expired" | "cancelled" | string;
+  title: string;
+  customer_message: string | null;
+  subtotal_cents: number;
+  tax_cents: number;
+  total_cents: number;
+  currency: string;
+  valid_until: string | null;
+  items: OlympusEstimateItem[];
+};
+
+export type OlympusRepairStatus = {
+  repair_number: string;
+  public_status_label: string;
+  device_manufacturer: string;
+  device_model: string;
+  status_history_public: OlympusRepairStatusHistoryItem[];
+  updated_at: string;
+  estimate?: OlympusEstimate | null;
+};
+
+export type RepairStatusResult =
+  | { ok: true; status: OlympusRepairStatus }
+  | { ok: false; reason: "invalid" | "unavailable" };
+
+export type EstimateAction = "approve" | "decline" | "question";
+
+export type EstimateActionResult =
+  | { ok: true }
+  | { ok: false; reason: "invalid" | "unavailable" | "failed" };
+
+function getStatusApiBaseUrl() {
+  return process.env.OLYMPUS_PUBLIC_STATUS_API_URL?.replace(/\/$/, "") ?? "";
+}
+
+function getStatusApiToken() {
+  return process.env.OLYMPUS_PUBLIC_STATUS_API_TOKEN ?? "";
+}
+
+export async function fetchOlympusRepairStatus(token: string): Promise<RepairStatusResult> {
+  const baseUrl = getStatusApiBaseUrl();
+
+  if (!baseUrl || !token.trim()) {
+    return { ok: false, reason: "unavailable" };
+  }
+
+  const headers: HeadersInit = {
+    Accept: "application/json",
+  };
+  const apiToken = getStatusApiToken();
+
+  if (apiToken) {
+    headers.Authorization = `Bearer ${apiToken}`;
+  }
+
+  let response: Response;
+
+  try {
+    response = await fetch(`${baseUrl}/public/repairs/status/${encodeURIComponent(token)}`, {
+      headers,
+      cache: "no-store",
+    });
+  } catch {
+    return { ok: false, reason: "unavailable" };
+  }
+
+  if (response.status === 401 || response.status === 403 || response.status === 404) {
+    return { ok: false, reason: "invalid" };
+  }
+
+  if (!response.ok) {
+    return { ok: false, reason: "unavailable" };
+  }
+
+  try {
+    return { ok: true, status: await response.json() as OlympusRepairStatus };
+  } catch {
+    return { ok: false, reason: "unavailable" };
+  }
+}
+
+export async function submitOlympusEstimateAction(
+  token: string,
+  action: EstimateAction,
+  message?: string,
+): Promise<EstimateActionResult> {
+  const baseUrl = getStatusApiBaseUrl();
+
+  if (!baseUrl || !token.trim()) {
+    return { ok: false, reason: "unavailable" };
+  }
+
+  const headers: HeadersInit = {
+    Accept: "application/json",
+    "Content-Type": "application/json",
+  };
+  const apiToken = getStatusApiToken();
+
+  if (apiToken) {
+    headers.Authorization = `Bearer ${apiToken}`;
+  }
+
+  let response: Response;
+
+  try {
+    response = await fetch(`${baseUrl}/public/repairs/status/${encodeURIComponent(token)}/estimate/${action}`, {
+      method: "POST",
+      headers,
+      body: JSON.stringify({ message: message?.trim() || null }),
+      cache: "no-store",
+    });
+  } catch {
+    return { ok: false, reason: "unavailable" };
+  }
+
+  if (response.status === 401 || response.status === 403 || response.status === 404) {
+    return { ok: false, reason: "invalid" };
+  }
+
+  if (!response.ok) {
+    return { ok: false, reason: "failed" };
+  }
+
+  return { ok: true };
+}