Stundenkonto und Vorschuss am Einrichtungs-Ticket und beim Kunden

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

src/components/customer/AboStatusCard.jsx

@@ -3,6 +3,7 @@ import { Card, Badge } from '../ui'
 import { getCustomerAboStatus } from '../../lib/teamApi'
 import { fmtDate, productLabelOf } from '../../lib/format'
 import { storageLabel } from '../../lib/storageFormat'
+import StundenkontoLeiste from './StundenkontoLeiste'
 
 // Abo-Status eines Kunden (Reiter "Abo & Angebote"): Appwrite-Spiegel des Stripe-Abos, fuer alle Mitarbeiter
 export default function AboStatusCard({ customerId }) {
@@ -19,13 +20,16 @@ export default function AboStatusCard({ customerId }) {
     return () => { alive = false }
   }, [customerId])
 
+  // Nur ein aktives Wartungs-Abo hat ein Stundenkonto (das Hosting-Abo nicht)
+  const mitKonto = Boolean(abo && abo.productKey === 'wartung' && abo.active)
+
   return (
     <Card title="Abo">
       {error && <div className="msg err" role="alert">{error}</div>}
       {!abo && !error && <div className="loading">Wird geladen …</div>}
       {abo && !abo.status && <p className="muted">kein Abo</p>}
       {abo && abo.status && (
-        <dl className="kv">
+        <dl className={mitKonto ? 'kv mb-2' : 'kv'}>
           <dt>Abo</dt>
           <dd className="flex items-center gap-2 wrap">
             {productLabelOf(abo.productKey)}
@@ -37,6 +41,7 @@ export default function AboStatusCard({ customerId }) {
           <dt>Zusatzspeicher</dt><dd>{storageLabel(abo.storageUnits)}</dd>
         </dl>
       )}
+      {mitKonto && <StundenkontoLeiste customerId={customerId} />}
     </Card>
   )
 }

src/components/customer/StundenkontoLeiste.jsx

@@ -0,0 +1,18 @@
+import { Stat } from '../ui'
+import { useStundenkonto } from '../../hooks/useStundenkonto'
+import { stundenkontoAnsicht } from '../../lib/stundenkontoView'
+
+// Stundenkonto eines Kunden als Kennzahlen: Guthaben, Vorschuss für die Einrichtung, Mehraufwand, nächster Verfall.
+// Hosting-Abo und fehlendes Abo bekommen nur den Hinweis. Ohne brauchbare Antwort (Fehler, altes Portal) steht nichts da.
+export default function StundenkontoLeiste({ customerId, reloadKey = '' }) {
+  const { antwort, loading } = useStundenkonto(customerId, { reloadKey })
+  if (loading) return <p className="muted">Wird geladen …</p>
+  const ansicht = stundenkontoAnsicht(antwort)
+  if (!ansicht) return null
+  if (ansicht.art !== 'konto') return <p className="muted">{ansicht.hinweis}</p>
+  return (
+    <div className="stats">
+      {ansicht.eintraege.map((e) => <Stat key={e.key} label={e.label} value={e.wert} sub={e.sub} tone={e.ton} />)}
+    </div>
+  )
+}