Kundenseite: Abo-Status und Funktionen; Seite E-Mail-Speicher

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/components/customer/AboStatusCard.jsx

@@ -0,0 +1,44 @@
+import { useEffect, useState } from 'react'
+import { FaSpinner } from 'react-icons/fa6'
+import { Card, Badge } from '../ui'
+import { getCustomerAboStatus } from '../../lib/teamApi'
+import { fmtDate, productLabelOf } from '../../lib/format'
+import { storageLabel } from '../../lib/storageFormat'
+import '../../styles/admin-areas.css'
+
+// Abo-Status eines Kunden (Reiter "Abo & Angebote"): Appwrite-Spiegel des Stripe-Abos, fuer alle Mitarbeiter
+export default function AboStatusCard({ customerId }) {
+  const [abo, setAbo] = useState(null)
+  const [error, setError] = useState(null)
+
+  useEffect(() => {
+    let alive = true
+    setAbo(null)
+    setError(null)
+    getCustomerAboStatus(customerId)
+      .then((a) => { if (alive) setAbo(a) })
+      .catch((err) => { if (alive) setError(err.message || 'Abo konnte nicht geladen werden.') })
+    return () => { alive = false }
+  }, [customerId])
+
+  return (
+    <Card title="Abo">
+      {error && <div className="area-error">{error}</div>}
+      {!abo && !error && <FaSpinner className="spinner" />}
+      {abo && !abo.status && <span className="area-muted">kein Abo</span>}
+      {abo && abo.status && (
+        <dl className="area-kv">
+          <dt>Abo</dt>
+          <dd className="area-inline">
+            {productLabelOf(abo.productKey)}
+            <Badge tone={abo.active ? 'ok' : 'danger'}>{abo.active ? 'aktiv' : abo.status}</Badge>
+          </dd>
+          <dt>Leistungsbeginn</dt><dd>{fmtDate(abo.serviceStart)}</dd>
+          {abo.active && <><dt>Nächste Abbuchung</dt><dd>{fmtDate(abo.currentPeriodEnd)}</dd></>}
+          {abo.cancelAt && <><dt>Gekündigt zum</dt><dd>{fmtDate(abo.cancelAt)}</dd></>}
+          <dt>Zusatzspeicher</dt><dd>{storageLabel(abo.storageUnits)}</dd>
+        </dl>
+      )}
+    </Card>
+  )
+}