Gutschriften im Ticketsystem: Sammelliste, Pruefung und Entscheidung, Kunden-Reiter
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
ClaudeandClaude Opus 5.5 committed
1 parent
cef0d5465e
commit
109aef6805
8 files changed
+418
-3
No files matched your search
@@ -0,0 +1,285 @@
|
||||
import { useCallback, useEffect, useRef, useState } from 'react'
|
||||
import { FaSpinner, FaArrowUpRightFromSquare } from 'react-icons/fa6'
|
||||
import { Card, Badge, Button } from '../ui'
|
||||
import KundenansichtButton from '../customer/KundenansichtButton'
|
||||
import { applyCredit, calcCredit, decideCredit, getCredit } from '../../lib/teamApi'
|
||||
import { applyMessage, BILLING_MONTHS, calcLine, creditStatus, decisionConfirm, decisionError, decisionMessage, fmtBytes, historyLabel } from '../../lib/creditFormat'
|
||||
import { fmtDate, fmtDateTime, formatCents, productLabelOf } from '../../lib/format'
|
||||
import { storageLabel } from '../../lib/storageFormat'
|
||||
import '../../styles/admin-areas.css'
|
||||
|
||||
const CHECK_TONE = { ok: 'ok', warn: 'warn', info: 'info' }
|
||||
const staffOf = (by) => (by && by !== 'customer' && by !== 'system' ? ` · ${by}` : '')
|
||||
const toCents = (value) => Math.round(Number(value) * 100)
|
||||
|
||||
/**
|
||||
* Antrag auf Uebernahmegutschrift: Pruefung und Entscheidung wie im frueheren Admin-Panel (public/admin.js 684-906).
|
||||
* Waehrend einer Entscheidung sind alle Knoepfe gesperrt (busyRef verhindert auch Doppelklicks vor dem Neuzeichnen).
|
||||
*/
|
||||
export default function CreditDetail({ id, onClose, onChanged, onOpen }) {
|
||||
const [d, setD] = useState(null)
|
||||
const [error, setError] = useState(null)
|
||||
const [message, setMessage] = useState('')
|
||||
const [form, setForm] = useState(null)
|
||||
const [calcText, setCalcText] = useState('')
|
||||
const [actionError, setActionError] = useState('')
|
||||
const [busy, setBusy] = useState(false)
|
||||
const busyRef = useRef(false)
|
||||
const amountTouched = useRef(false)
|
||||
const calcTimer = useRef(null)
|
||||
|
||||
const load = useCallback(async (msg = '') => {
|
||||
setError(null)
|
||||
try {
|
||||
const detail = await getCredit(id)
|
||||
const r = detail.request
|
||||
setD(detail)
|
||||
setMessage(msg)
|
||||
setActionError('')
|
||||
amountTouched.current = false
|
||||
setForm({
|
||||
checks: Object.fromEntries(detail.requiredChecks.map((k) => [k.key, false])),
|
||||
invoiceAmount: (r.invoiceAmountCents / 100).toFixed(2),
|
||||
billingMonths: r.billingMonths,
|
||||
paidUntil: r.paidUntilDate || '',
|
||||
takeoverFrom: r.takeoverFromDate || '',
|
||||
amount: ((detail.calc?.suggestedCents || 0) / 100).toFixed(2),
|
||||
note: '',
|
||||
})
|
||||
setCalcText(detail.calc ? calcLine(detail.calc) : 'Angaben unvollständig')
|
||||
} catch (err) {
|
||||
setError(err.message || 'Antrag konnte nicht geladen werden.')
|
||||
}
|
||||
}, [id])
|
||||
|
||||
useEffect(() => {
|
||||
setD(null)
|
||||
load()
|
||||
return () => clearTimeout(calcTimer.current)
|
||||
}, [load])
|
||||
|
||||
const figures = (f) => ({ invoiceAmountCents: toCents(f.invoiceAmount), billingMonths: Number(f.billingMonths), paidUntil: f.paidUntil, takeoverFrom: f.takeoverFrom })
|
||||
|
||||
const setFigure = (key, value) => {
|
||||
const next = { ...form, [key]: value }
|
||||
setForm(next)
|
||||
clearTimeout(calcTimer.current)
|
||||
calcTimer.current = setTimeout(async () => {
|
||||
try {
|
||||
const { calc } = await calcCredit(figures(next))
|
||||
setCalcText(calcLine(calc))
|
||||
if (!amountTouched.current) setForm((f) => ({ ...f, amount: (calc.suggestedCents / 100).toFixed(2) }))
|
||||
} catch (err) {
|
||||
setCalcText(err.message)
|
||||
}
|
||||
}, 300)
|
||||
}
|
||||
|
||||
const decide = async (action) => {
|
||||
if (busyRef.current) return
|
||||
setActionError('')
|
||||
const problem = decisionError(action, form.note)
|
||||
if (problem) { setActionError(problem); return }
|
||||
const amountCents = toCents(form.amount)
|
||||
if (!window.confirm(decisionConfirm(action, amountCents, d.customer?.name))) return
|
||||
if (busyRef.current) return
|
||||
busyRef.current = true
|
||||
setBusy(true)
|
||||
try {
|
||||
const result = await decideCredit(id, { action, note: form.note.trim(), amountCents, checks: form.checks, ...figures(form) })
|
||||
onChanged?.()
|
||||
await load(decisionMessage(action, result))
|
||||
} catch (err) {
|
||||
setActionError(err.message)
|
||||
} finally {
|
||||
busyRef.current = false
|
||||
setBusy(false)
|
||||
}
|
||||
}
|
||||
|
||||
const apply = async () => {
|
||||
if (busyRef.current) return
|
||||
busyRef.current = true
|
||||
setBusy(true)
|
||||
try {
|
||||
const result = await applyCredit(id)
|
||||
onChanged?.()
|
||||
await load(applyMessage(result))
|
||||
} catch (err) {
|
||||
setActionError(err.message)
|
||||
} finally {
|
||||
busyRef.current = false
|
||||
setBusy(false)
|
||||
}
|
||||
}
|
||||
|
||||
if (error) return <Card><div className="area-error">{error}</div><Button variant="ghost" onClick={onClose}>Schließen</Button></Card>
|
||||
if (!d || !form) return <Card><FaSpinner className="spinner" /></Card>
|
||||
|
||||
const r = d.request
|
||||
const c = d.customer
|
||||
const s = d.subscription
|
||||
const st = creditStatus(r.status)
|
||||
const pending = r.status === 'offen' || r.status === 'rueckfrage'
|
||||
const fileNames = new Map(r.files.map((f) => [f.id, f.name]))
|
||||
const allChecked = Object.values(form.checks).every(Boolean)
|
||||
const canApprove = allChecked && Number(form.amount) > 0 && !busy
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<div className="area-inline" style={{ justifyContent: 'space-between', marginBottom: 12 }}>
|
||||
<div>
|
||||
<h3 style={{ margin: 0 }}>Antrag {r.ref} · {c.name || c.companyName}</h3>
|
||||
<span className="area-muted">eingegangen {fmtDateTime(r.createdAt)}</span> <Badge tone={st.tone}>{st.label}</Badge>
|
||||
</div>
|
||||
<Button variant="ghost" onClick={onClose}>Schließen</Button>
|
||||
</div>
|
||||
{message && <div className="area-message">{message}</div>}
|
||||
<div className="credit-cols">
|
||||
<div>
|
||||
<h4>Antrag</h4>
|
||||
<dl className="area-kv">
|
||||
<dt>Leistung</dt><dd>{r.services}</dd>
|
||||
<dt>Bisher bei</dt><dd>{r.provider}</dd>
|
||||
<dt>Domain</dt><dd>{r.domain ? <a href={`https://${r.domain}`} target="_blank" rel="noreferrer">{r.domain}</a> : '–'}</dd>
|
||||
<dt>Rechnung</dt><dd>{formatCents(r.invoiceAmountCents)} für {r.billingMonths} Monat{r.billingMonths === 1 ? '' : 'e'}</dd>
|
||||
<dt>Bezahlt bis</dt><dd>{fmtDate(r.paidUntil)}</dd>
|
||||
<dt>Antwort an</dt><dd>{r.email}</dd>
|
||||
<dt>Bestätigt</dt><dd>Angaben und Bedingungen (Stand {r.conditionsVersion || '–'}) am {fmtDateTime(r.consentAt)}</dd>
|
||||
</dl>
|
||||
<h4>Grund / Nachricht</h4>
|
||||
<p style={{ whiteSpace: 'pre-wrap' }}>{r.message}</p>
|
||||
<h4>Nachweise</h4>
|
||||
{r.files.length ? (
|
||||
<ul className="credit-files">
|
||||
{r.files.map((f) => (
|
||||
<li key={f.id}>
|
||||
<a href={f.url} target="_blank" rel="noreferrer">{f.name}</a> <span className="area-muted">({fmtBytes(f.size)}, {fmtDate(f.uploadedAt)})</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
) : <p className="area-muted">Keine Nachweise (mehr) vorhanden.</p>}
|
||||
<h4>Verlauf</h4>
|
||||
{r.history.map((h, i) => (
|
||||
<div key={i} className="credit-history">
|
||||
<strong>{historyLabel(h.type)}</strong> <span className="area-muted">{fmtDateTime(h.at)}{staffOf(h.by)}</span>
|
||||
{h.text && <div style={{ whiteSpace: 'pre-wrap' }}>{h.text}</div>}
|
||||
{(h.files || []).length > 0 && <div className="area-muted">Dateien: {h.files.map((fid) => fileNames.get(fid) || 'gelöscht').join(', ')}</div>}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div>
|
||||
<h4>Kunde & Vertrag</h4>
|
||||
<dl className="area-kv">
|
||||
<dt>Kunde</dt><dd>{c.name || c.companyName}{c.code ? ` · Kd.-Nr. ${c.code}` : ''}</dd>
|
||||
<dt>E-Mail</dt><dd>{c.email || '–'}</dd>
|
||||
<dt>Abo</dt>
|
||||
<dd>
|
||||
{s ? <>{productLabelOf(s.productKey)} <Badge tone={s.active ? 'ok' : 'danger'}>{s.status}</Badge><br /><span className="area-muted">Zusatzspeicher: {storageLabel(s.storageUnits)}</span></> : <Badge tone="danger">kein Abo</Badge>}
|
||||
</dd>
|
||||
{s && (
|
||||
<>
|
||||
<dt>Leistungsbeginn</dt><dd>{fmtDate(s.serviceStart)}</dd>
|
||||
<dt>Nächste Abbuchung</dt><dd>{s.active ? fmtDate(s.currentPeriodEnd) : '–'}</dd>
|
||||
{s.cancelAt && <><dt>Gekündigt zum</dt><dd>{fmtDate(s.cancelAt)}</dd></>}
|
||||
<dt>Stripe-Guthaben</dt><dd>{s.creditBalanceCents == null ? '–' : formatCents(s.creditBalanceCents)}</dd>
|
||||
</>
|
||||
)}
|
||||
</dl>
|
||||
<div className="area-inline" style={{ margin: '12px 0' }}>
|
||||
<KundenansichtButton customer={{ $id: c.id }} checkAccess={false} variant="ghost" />
|
||||
{s?.stripeUrl && <Button as="a" href={s.stripeUrl} target="_blank" rel="noreferrer" variant="ghost"><FaArrowUpRightFromSquare /> In Stripe öffnen</Button>}
|
||||
</div>
|
||||
{d.otherRequests.length > 0 && (
|
||||
<>
|
||||
<h4>Weitere Anträge des Kunden</h4>
|
||||
<ul className="credit-files">
|
||||
{d.otherRequests.map((o) => {
|
||||
const ost = creditStatus(o.status)
|
||||
return (
|
||||
<li key={o.id}>
|
||||
<a href="#" onClick={(e) => { e.preventDefault(); onOpen?.(o.id) }}>{o.ref}</a> · {o.services} · {fmtDate(o.createdAt)} <Badge tone={ost.tone}>{ost.label}</Badge>{o.amountCents ? ` ${formatCents(o.amountCents)}` : ''}
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
</>
|
||||
)}
|
||||
<h4>Automatische Prüfung</h4>
|
||||
<ul className="credit-checks">
|
||||
{d.autoChecks.map((k) => (
|
||||
<li key={k.key}><Badge tone={CHECK_TONE[k.status] || 'muted'}>{k.status === 'ok' ? '✓' : k.status === 'warn' ? '!' : 'i'}</Badge> {k.label}{k.detail && <><br /><small className="area-muted">{k.detail}</small></>}</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
{pending ? (
|
||||
<>
|
||||
<h4>Prüfung durch dich</h4>
|
||||
<div className="credit-manual">
|
||||
{d.requiredChecks.map((k) => (
|
||||
<label key={k.key}>
|
||||
<input type="checkbox" checked={form.checks[k.key]} onChange={(e) => setForm({ ...form, checks: { ...form.checks, [k.key]: e.target.checked } })} /> {k.label}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
<h4>Berechnung</h4>
|
||||
<div className="credit-calc">
|
||||
<label>Rechnungsbetrag (€)<input id="calc-amount" className="form-control" type="number" step="0.01" min="0.01" value={form.invoiceAmount} onChange={(e) => setFigure('invoiceAmount', e.target.value)} /></label>
|
||||
<label>Rechnung gilt für
|
||||
<select id="calc-months" className="form-control" value={form.billingMonths} onChange={(e) => setFigure('billingMonths', Number(e.target.value))}>
|
||||
{BILLING_MONTHS.map((m) => <option key={m} value={m}>{m} Monat{m === 1 ? '' : 'e'}</option>)}
|
||||
</select>
|
||||
</label>
|
||||
<label>Bezahlt bis<input id="calc-paid-until" className="form-control" type="date" value={form.paidUntil} onChange={(e) => setFigure('paidUntil', e.target.value)} /></label>
|
||||
<label>Übernahme ab<input id="calc-from" className="form-control" type="date" value={form.takeoverFrom} onChange={(e) => setFigure('takeoverFrom', e.target.value)} /></label>
|
||||
</div>
|
||||
<div className="area-summary">{calcText}</div>
|
||||
<p className="area-muted">Werte weichen von der Rechnung ab? Hier korrigieren – die Korrektur wird beim Genehmigen im Verlauf vermerkt. „Übernahme ab“ ist der Leistungsbeginn des Abos.</p>
|
||||
<label className="credit-field">Gutschrift (€)
|
||||
<input id="credit-amount" className="form-control" type="number" step="0.01" min="0.01" value={form.amount} style={{ maxWidth: 180 }}
|
||||
onChange={(e) => { amountTouched.current = true; setForm({ ...form, amount: e.target.value }) }} />
|
||||
</label>
|
||||
<label className="credit-field">Nachricht an den Kunden (bei Rückfrage und Ablehnung Pflicht, beim Genehmigen optional)
|
||||
<textarea id="credit-note" className="form-control" maxLength={4000} rows={4} value={form.note} onChange={(e) => setForm({ ...form, note: e.target.value })} />
|
||||
</label>
|
||||
<div className="area-inline">
|
||||
<Button variant="primary" onClick={() => decide('approve')} disabled={!canApprove}>Genehmigen & gutschreiben</Button>
|
||||
<Button variant="ghost" onClick={() => decide('question')} disabled={busy}>Rückfrage senden</Button>
|
||||
<Button variant="danger" onClick={() => decide('reject')} disabled={busy}>Ablehnen</Button>
|
||||
{busy && <FaSpinner className="spinner" />}
|
||||
</div>
|
||||
<p className="area-muted">
|
||||
Genehmigen geht, sobald alle Punkte abgehakt sind. Der Kunde bekommt jede Entscheidung per E-Mail.
|
||||
{!s?.active && <strong> Achtung: Der Kunde hat kein laufendes Abo.</strong>}
|
||||
</p>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<h4>Entscheidung</h4>
|
||||
{r.status === 'genehmigt' ? (
|
||||
<>
|
||||
<dl className="area-kv">
|
||||
<dt>Genehmigt</dt><dd>{fmtDateTime(r.decidedAt)} · {r.decidedBy}</dd>
|
||||
<dt>Gutschrift</dt><dd><strong>{formatCents(r.amountCents)}</strong></dd>
|
||||
<dt>Berechnung</dt><dd>{r.calculation}</dd>
|
||||
<dt>Geprüft</dt><dd>{r.checks ? `alle Punkte abgehakt (${r.checks.by || ''})` : '–'}</dd>
|
||||
{r.decisionNote && <><dt>Nachricht</dt><dd style={{ whiteSpace: 'pre-wrap' }}>{r.decisionNote}</dd></>}
|
||||
<dt>Verrechnung</dt>
|
||||
<dd>{r.appliedAt ? <>Stripe-Guthaben gebucht am {fmtDateTime(r.appliedAt)} <span className="area-muted">({r.stripeBalanceTransactionId})</span></> : <Badge tone="warn">noch nicht in Stripe gebucht</Badge>}</dd>
|
||||
</dl>
|
||||
{!r.appliedAt && <div className="area-inline" style={{ marginTop: 12 }}><Button variant="primary" onClick={apply} disabled={busy}>Jetzt in Stripe gutschreiben</Button></div>}
|
||||
</>
|
||||
) : (
|
||||
<dl className="area-kv">
|
||||
<dt>Abgelehnt</dt><dd>{fmtDateTime(r.decidedAt)} · {r.decidedBy}</dd>
|
||||
<dt>Begründung</dt><dd style={{ whiteSpace: 'pre-wrap' }}>{r.decisionNote}</dd>
|
||||
</dl>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{actionError && <div className="area-error">{actionError}</div>}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
Reference in new issue
Block a user