feat(status): add estimate customer actions

README.md

@@ -156,6 +156,28 @@ Der Browser sieht weder die Olympus-URL noch optionale Server-Tokens. Die öffen
 - 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.
 

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

@@ -638,6 +638,222 @@ h3 {
   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;
@@ -1427,14 +1643,30 @@ h3 {
   }
 
   .status-title-row,
-  .timeline-content {
+  .timeline-content,
+  .estimate-header,
+  .estimate-item {
     display: grid;
   }
 
-  .status-badge {
+  .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

@@ -1,6 +1,11 @@
 import type { Metadata } from "next";
 import Link from "next/link";
-import { fetchOlympusRepairStatus, type OlympusRepairStatus } from "@/lib/olympus/status";
+import { EstimateActions } from "@/components/status/EstimateActions";
+import {
+  fetchOlympusRepairStatus,
+  type OlympusEstimate,
+  type OlympusRepairStatus,
+} from "@/lib/olympus/status";
 
 type PageProps = {
   params: Promise<{
@@ -26,6 +31,130 @@ function formatDate(value: string) {
   }).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">
@@ -126,6 +255,8 @@ export default async function RepairStatusPage({ params }: PageProps) {
             </div>
           </dl>
 
+          <EstimateCard estimate={status.estimate} token={token} />
+
           <div className="status-timeline-section">
             <h2>Statusverlauf</h2>
             <StatusTimeline status={status} />

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>
+  );
+}

lib/olympus/status.ts

@@ -6,6 +6,29 @@ export type OlympusRepairStatusHistoryItem = {
   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;
@@ -13,12 +36,19 @@ export type OlympusRepairStatus = {
   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(/\/$/, "") ?? "";
 }
@@ -68,3 +98,48 @@ export async function fetchOlympusRepairStatus(token: string): Promise<RepairSta
     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 };
+}