feat(status): add estimate customer actions

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} />