@hanzo/ui 5.3.36 → 5.3.39

package/dist/src/billing/components/subscription-portal.js

@@ -18,40 +18,53 @@ function formatDate(date) {
 const statusTone = {
     active: {
         label: 'Active',
-        className: 'bg-emerald-50 text-emerald-700 ring-emerald-600/20',
+        className: 'bg-emerald-500/10 text-emerald-500 ring-emerald-500/20',
     },
     canceled: {
         label: 'Canceled',
-        className: 'bg-rose-50 text-rose-700 ring-rose-600/20',
+        className: 'bg-rose-500/10 text-rose-500 ring-rose-500/20',
     },
     past_due: {
         label: 'Past due',
-        className: 'bg-amber-50 text-amber-800 ring-amber-600/20',
+        className: 'bg-amber-500/10 text-amber-500 ring-amber-500/20',
     },
     trialing: {
         label: 'Trialing',
-        className: 'bg-sky-50 text-sky-700 ring-sky-600/20',
+        className: 'bg-sky-500/10 text-sky-500 ring-sky-500/20',
     },
     unpaid: {
         label: 'Unpaid',
-        className: 'bg-rose-50 text-rose-700 ring-rose-600/20',
+        className: 'bg-rose-500/10 text-rose-500 ring-rose-500/20',
     },
     incomplete: {
         label: 'Incomplete',
-        className: 'bg-zinc-100 text-zinc-700 ring-zinc-600/20',
+        className: 'bg-text-dim/10 text-text-muted ring-text-dim/20',
     },
 };
 export function SubscriptionPortal(props) {
-    const { subscription, availablePlans, usageMetrics = [], retentionOffers = [], subscriptionHistory = [], onUpgrade, onDowngrade, defaultView = 'overview', } = props;
+    const { subscription, availablePlans, usageMetrics = [], retentionOffers = [], subscriptionHistory = [], onUpgrade, onDowngrade, onCancel, onApplyDiscount, defaultView = 'overview', } = props;
     const [view, setView] = React.useState(defaultView);
     const [busyPlanId, setBusyPlanId] = React.useState(null);
+    // Discount code state
+    const [discountCode, setDiscountCode] = React.useState('');
+    const [applyingDiscount, setApplyingDiscount] = React.useState(false);
+    const [discountResult, setDiscountResult] = React.useState(null);
+    // Cancel confirmation
+    const [showCancelConfirm, setShowCancelConfirm] = React.useState(false);
+    const [cancelReason, setCancelReason] = React.useState('');
+    const [canceling, setCanceling] = React.useState(false);
     const currentPlan = React.useMemo(() => availablePlans.find((p) => p.id === subscription.planId), [availablePlans, subscription.planId]);
     const handlePlanChange = React.useCallback(async (plan) => {
-        if (!currentPlan || plan.id === currentPlan.id)
+        // External / contact-sales plans
+        if (plan.externalUrl) {
+            window.open(plan.externalUrl, '_blank', 'noopener,noreferrer');
+            return;
+        }
+        if (plan.id === currentPlan?.id)
             return;
         setBusyPlanId(plan.id);
         try {
-            if (plan.price >= currentPlan.price) {
+            if (!currentPlan || plan.price >= (currentPlan?.price ?? 0)) {
                 await onUpgrade?.(plan.id);
             }
             else {
@@ -62,27 +75,111 @@ export function SubscriptionPortal(props) {
             setBusyPlanId(null);
         }
     }, [currentPlan, onDowngrade, onUpgrade]);
-    return (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "overflow-hidden rounded-2xl border border-zinc-200 bg-gradient-to-b from-zinc-50 to-white p-6", children: [_jsxs("div", { className: "flex flex-wrap items-start justify-between gap-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-xs font-semibold uppercase tracking-[0.14em] text-zinc-500", children: "Subscription Control" }), _jsx("h2", { className: "text-2xl font-semibold text-zinc-900", children: currentPlan?.name ?? 'No active plan' }), _jsxs("p", { className: "text-sm text-zinc-600", children: ["Billing period ends on ", formatDate(subscription.currentPeriodEnd)] })] }), _jsx("span", { className: `inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold ring-1 ${statusTone[subscription.status].className}`, children: statusTone[subscription.status].label })] }), _jsxs("div", { className: "mt-6 flex flex-wrap gap-2 rounded-xl border border-zinc-200 bg-white p-1", children: [_jsx("button", { type: "button", onClick: () => setView('overview'), className: `rounded-lg px-3 py-1.5 text-sm transition ${view === 'overview'
-                                    ? 'bg-zinc-900 text-white'
-                                    : 'text-zinc-600 hover:bg-zinc-100'}`, children: "Overview" }), _jsx("button", { type: "button", onClick: () => setView('plans'), className: `rounded-lg px-3 py-1.5 text-sm transition ${view === 'plans'
-                                    ? 'bg-zinc-900 text-white'
-                                    : 'text-zinc-600 hover:bg-zinc-100'}`, children: "Plans" }), _jsx("button", { type: "button", onClick: () => setView('history'), className: `rounded-lg px-3 py-1.5 text-sm transition ${view === 'history'
-                                    ? 'bg-zinc-900 text-white'
-                                    : 'text-zinc-600 hover:bg-zinc-100'}`, children: "History" })] })] }), view === 'overview' && (_jsxs("div", { className: "grid gap-4 md:grid-cols-3", children: [_jsxs("div", { className: "rounded-xl border border-zinc-200 bg-white p-4", children: [_jsx("p", { className: "text-xs uppercase tracking-wide text-zinc-500", children: "Current spend" }), _jsxs("p", { className: "mt-2 text-2xl font-semibold text-zinc-900", children: [formatCurrency(currentPlan?.price ?? 0), _jsxs("span", { className: "text-sm font-normal text-zinc-500", children: ["/", currentPlan?.billingPeriod ?? 'monthly'] })] })] }), _jsxs("div", { className: "rounded-xl border border-zinc-200 bg-white p-4", children: [_jsx("p", { className: "text-xs uppercase tracking-wide text-zinc-500", children: "Next invoice" }), _jsx("p", { className: "mt-2 text-lg font-semibold text-zinc-900", children: formatDate(subscription.currentPeriodEnd) })] }), _jsxs("div", { className: "rounded-xl border border-zinc-200 bg-white p-4", children: [_jsx("p", { className: "text-xs uppercase tracking-wide text-zinc-500", children: "Cancellation" }), _jsx("p", { className: "mt-2 text-lg font-semibold text-zinc-900", children: subscription.cancelAtPeriodEnd ? 'At period end' : 'Auto-renewing' })] }), usageMetrics.length > 0 && (_jsxs("div", { className: "md:col-span-3 rounded-xl border border-zinc-200 bg-white p-4", children: [_jsx("p", { className: "text-xs uppercase tracking-wide text-zinc-500", children: "Usage metrics" }), _jsx("div", { className: "mt-3 grid gap-3 md:grid-cols-2 xl:grid-cols-4", children: usageMetrics.map((metric) => {
+    const handleApplyDiscount = React.useCallback(async () => {
+        if (!onApplyDiscount || !discountCode.trim())
+            return;
+        setApplyingDiscount(true);
+        setDiscountResult(null);
+        try {
+            const result = await onApplyDiscount(discountCode.trim());
+            if (result && result.valid) {
+                const desc = result.kind === 'percent'
+                    ? `${result.value}% off`
+                    : `${formatCurrency(result.value)} off`;
+                setDiscountResult({ success: true, message: `Applied: ${result.name || result.code} (${desc})` });
+                setDiscountCode('');
+            }
+            else {
+                setDiscountResult({ success: false, message: 'Invalid or expired discount code' });
+            }
+        }
+        catch (err) {
+            setDiscountResult({ success: false, message: err instanceof Error ? err.message : 'Failed to apply code' });
+        }
+        finally {
+            setApplyingDiscount(false);
+        }
+    }, [onApplyDiscount, discountCode]);
+    const handleCancel = React.useCallback(async () => {
+        if (!onCancel || !cancelReason.trim())
+            return;
+        setCanceling(true);
+        try {
+            await onCancel(cancelReason.trim());
+            setShowCancelConfirm(false);
+            setCancelReason('');
+        }
+        finally {
+            setCanceling(false);
+        }
+    }, [onCancel, cancelReason]);
+    return (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "overflow-hidden rounded-2xl border border-border bg-bg-card p-6", children: [_jsxs("div", { className: "flex flex-wrap items-start justify-between gap-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-xs font-semibold uppercase tracking-[0.14em] text-text-muted", children: "Subscription" }), _jsx("h2", { className: "text-2xl font-semibold text-text", children: currentPlan?.name ?? 'No active plan' }), _jsx("p", { className: "text-sm text-text-secondary", children: subscription.id
+                                            ? `Billing period ends on ${formatDate(subscription.currentPeriodEnd)}`
+                                            : 'Select a plan to get started' }), subscription.discount && (_jsxs("p", { className: "text-sm text-emerald-500", children: ["Discount: ", subscription.discount.name || subscription.discount.code, " (", subscription.discount.kind === 'percent'
+                                                ? `${subscription.discount.value}% off`
+                                                : `${formatCurrency(subscription.discount.value)} off`, subscription.discount.duration === 'repeating' && subscription.discount.durationInMonths
+                                                ? ` for ${subscription.discount.durationInMonths} months`
+                                                : subscription.discount.duration === 'forever'
+                                                    ? ' forever'
+                                                    : '', ")"] }))] }), subscription.id && (_jsx("span", { className: `inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold ring-1 ${statusTone[subscription.status].className}`, children: statusTone[subscription.status].label }))] }), _jsxs("div", { className: "mt-6 flex flex-wrap gap-2 rounded-xl border border-border bg-bg-elevated p-1", children: [_jsx("button", { type: "button", onClick: () => setView('overview'), className: `rounded-lg px-3 py-1.5 text-sm transition ${view === 'overview'
+                                    ? 'bg-text text-bg'
+                                    : 'text-text-muted hover:bg-bg-card hover:text-text'}`, children: "Overview" }), _jsx("button", { type: "button", onClick: () => setView('plans'), className: `rounded-lg px-3 py-1.5 text-sm transition ${view === 'plans'
+                                    ? 'bg-text text-bg'
+                                    : 'text-text-muted hover:bg-bg-card hover:text-text'}`, children: "Plans" }), _jsx("button", { type: "button", onClick: () => setView('history'), className: `rounded-lg px-3 py-1.5 text-sm transition ${view === 'history'
+                                    ? 'bg-text text-bg'
+                                    : 'text-text-muted hover:bg-bg-card hover:text-text'}`, children: "History" })] })] }), view === 'overview' && (_jsxs("div", { className: "grid gap-4 md:grid-cols-3", children: [_jsxs("div", { className: "rounded-xl border border-border bg-bg-card p-4", children: [_jsx("p", { className: "text-xs uppercase tracking-wide text-text-muted", children: "Current spend" }), _jsxs("p", { className: "mt-2 text-2xl font-semibold text-text", children: [formatCurrency(currentPlan?.price ?? 0), _jsxs("span", { className: "text-sm font-normal text-text-muted", children: ["/", currentPlan?.billingPeriod ?? 'monthly'] })] })] }), _jsxs("div", { className: "rounded-xl border border-border bg-bg-card p-4", children: [_jsx("p", { className: "text-xs uppercase tracking-wide text-text-muted", children: "Next invoice" }), _jsx("p", { className: "mt-2 text-lg font-semibold text-text", children: subscription.id ? formatDate(subscription.currentPeriodEnd) : '\u2014' })] }), _jsxs("div", { className: "rounded-xl border border-border bg-bg-card p-4", children: [_jsx("p", { className: "text-xs uppercase tracking-wide text-text-muted", children: "Status" }), _jsx("p", { className: "mt-2 text-lg font-semibold text-text", children: subscription.cancelAtPeriodEnd
+                                    ? 'Cancels at period end'
+                                    : subscription.id
+                                        ? 'Auto-renewing'
+                                        : 'No subscription' })] }), onApplyDiscount && subscription.id && (_jsxs("div", { className: "md:col-span-3 rounded-xl border border-border bg-bg-card p-4", children: [_jsx("p", { className: "text-xs uppercase tracking-wide text-text-muted", children: "Discount code" }), _jsxs("div", { className: "mt-3 flex gap-2", children: [_jsx("input", { value: discountCode, onChange: (e) => {
+                                            setDiscountCode(e.target.value.toUpperCase());
+                                            setDiscountResult(null);
+                                        }, placeholder: "Enter promo code", className: "flex-1 rounded-lg border border-border bg-bg-input px-3 py-2 text-sm font-mono uppercase text-text outline-none transition focus:border-brand" }), _jsx("button", { type: "button", disabled: !discountCode.trim() || applyingDiscount, onClick: handleApplyDiscount, className: "rounded-lg bg-text px-4 py-2 text-sm font-medium text-bg transition hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-60", children: applyingDiscount ? 'Applying\u2026' : 'Apply' })] }), discountResult && (_jsx("p", { className: `mt-2 text-sm ${discountResult.success ? 'text-success' : 'text-danger'}`, children: discountResult.message }))] })), usageMetrics.length > 0 && (_jsxs("div", { className: "md:col-span-3 rounded-xl border border-border bg-bg-card p-4", children: [_jsx("p", { className: "text-xs uppercase tracking-wide text-text-muted", children: "Usage metrics" }), _jsx("div", { className: "mt-3 grid gap-3 md:grid-cols-2 xl:grid-cols-4", children: usageMetrics.map((metric) => {
                                     const utilization = metric.limit && metric.limit > 0
                                         ? Math.min((metric.current / metric.limit) * 100, 100)
                                         : 0;
-                                    return (_jsxs("div", { className: "rounded-lg border border-zinc-200 p-3", children: [_jsx("p", { className: "text-sm text-zinc-600", children: metric.label }), _jsxs("p", { className: "mt-1 text-lg font-semibold text-zinc-900", children: [metric.current.toLocaleString(), metric.unit ? ` ${metric.unit}` : ''] }), metric.limit ? (_jsxs(_Fragment, { children: [_jsxs("p", { className: "text-xs text-zinc-500", children: ["of ", metric.limit.toLocaleString(), " ", metric.unit ?? ''] }), _jsx("div", { className: "mt-2 h-2 rounded-full bg-zinc-100", children: _jsx("div", { className: "h-2 rounded-full bg-zinc-900", style: { width: `${utilization}%` } }) })] })) : null] }, metric.id));
-                                }) })] })), retentionOffers.length > 0 && (_jsxs("div", { className: "md:col-span-3 rounded-xl border border-amber-200 bg-amber-50/60 p-4", children: [_jsx("p", { className: "text-xs uppercase tracking-wide text-amber-700", children: "Retention offers" }), _jsx("div", { className: "mt-3 grid gap-3 md:grid-cols-2", children: retentionOffers.map((offer) => (_jsxs("div", { className: "rounded-lg border border-amber-200 bg-white p-3", children: [_jsx("p", { className: "font-medium text-zinc-900", children: offer.title }), _jsx("p", { className: "mt-1 text-sm text-zinc-600", children: offer.description }), _jsxs("p", { className: "mt-2 text-sm font-semibold text-amber-700", children: ["Save ", offer.discount, "% for ", offer.durationMonths, " months"] })] }, offer.id))) })] }))] })), view === 'plans' && (_jsx("div", { className: "grid gap-4 md:grid-cols-2 xl:grid-cols-3", children: availablePlans.map((plan) => {
+                                    return (_jsxs("div", { className: "rounded-lg border border-border p-3", children: [_jsx("p", { className: "text-sm text-text-secondary", children: metric.label }), _jsxs("p", { className: "mt-1 text-lg font-semibold text-text", children: [metric.current.toLocaleString(), metric.unit ? ` ${metric.unit}` : ''] }), metric.limit ? (_jsxs(_Fragment, { children: [_jsxs("p", { className: "text-xs text-text-muted", children: ["of ", metric.limit.toLocaleString(), " ", metric.unit ?? ''] }), _jsx("div", { className: "mt-2 h-2 rounded-full bg-bg-elevated", children: _jsx("div", { className: "h-2 rounded-full bg-brand transition-all", style: { width: `${utilization}%` } }) })] })) : null] }, metric.id));
+                                }) })] })), retentionOffers.length > 0 && (_jsxs("div", { className: "md:col-span-3 rounded-xl border border-warning/30 bg-warning/5 p-4", children: [_jsx("p", { className: "text-xs uppercase tracking-wide text-warning", children: "Retention offers" }), _jsx("div", { className: "mt-3 grid gap-3 md:grid-cols-2", children: retentionOffers.map((offer) => (_jsxs("div", { className: "rounded-lg border border-warning/30 bg-bg-card p-3", children: [_jsx("p", { className: "font-medium text-text", children: offer.title }), _jsx("p", { className: "mt-1 text-sm text-text-secondary", children: offer.description }), _jsxs("p", { className: "mt-2 text-sm font-semibold text-warning", children: ["Save ", offer.discount, "% for ", offer.durationMonths, " months"] })] }, offer.id))) })] })), subscription.id && subscription.status === 'active' && !subscription.cancelAtPeriodEnd && onCancel && (_jsx("div", { className: "md:col-span-3", children: showCancelConfirm ? (_jsxs("div", { className: "rounded-xl border border-rose-500/30 bg-rose-500/5 p-4", children: [_jsx("p", { className: "text-sm font-medium text-rose-400", children: "Cancel subscription" }), _jsxs("p", { className: "mt-1 text-sm text-text-muted", children: ["Your subscription will remain active until ", formatDate(subscription.currentPeriodEnd), "."] }), _jsx("textarea", { value: cancelReason, onChange: (e) => setCancelReason(e.target.value), placeholder: "Why are you canceling? (required)", rows: 2, className: "mt-3 w-full rounded-lg border border-rose-500/30 bg-bg-input px-3 py-2 text-sm text-text outline-none transition focus:border-rose-500" }), _jsxs("div", { className: "mt-3 flex gap-2", children: [_jsx("button", { type: "button", disabled: !cancelReason.trim() || canceling, onClick: handleCancel, className: "rounded-lg bg-rose-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-rose-500 disabled:cursor-not-allowed disabled:opacity-60", children: canceling ? 'Canceling\u2026' : 'Confirm cancellation' }), _jsx("button", { type: "button", onClick: () => {
+                                                setShowCancelConfirm(false);
+                                                setCancelReason('');
+                                            }, className: "rounded-lg border border-border px-4 py-2 text-sm font-medium text-text-secondary transition hover:bg-bg-elevated", children: "Keep subscription" })] })] })) : (_jsx("button", { type: "button", onClick: () => setShowCancelConfirm(true), className: "text-sm text-text-muted transition hover:text-rose-500", children: "Cancel subscription" })) }))] })), view === 'plans' && (_jsx("div", { className: "grid gap-4 md:grid-cols-2 xl:grid-cols-4", children: availablePlans.map((plan) => {
                     const isCurrent = plan.id === subscription.planId;
                     const isBusy = busyPlanId === plan.id;
-                    const periodPrice = `${formatCurrency(plan.price)}/${plan.billingPeriod}`;
-                    return (_jsxs("div", { className: `rounded-xl border p-5 ${isCurrent
-                            ? 'border-zinc-900 bg-zinc-900 text-white'
-                            : 'border-zinc-200 bg-white text-zinc-900'}`, children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsxs("div", { children: [_jsx("p", { className: "text-lg font-semibold", children: plan.name }), _jsx("p", { className: `text-sm ${isCurrent ? 'text-zinc-300' : 'text-zinc-600'}`, children: plan.description })] }), plan.badge ? (_jsx("span", { className: `rounded-full px-2 py-1 text-xs font-semibold ${isCurrent ? 'bg-zinc-700 text-zinc-100' : 'bg-zinc-100 text-zinc-700'}`, children: plan.badge })) : null] }), _jsx("p", { className: "mt-4 text-2xl font-semibold", children: periodPrice }), _jsx("ul", { className: `mt-4 space-y-2 text-sm ${isCurrent ? 'text-zinc-200' : 'text-zinc-700'}`, children: plan.features.map((feature) => (_jsxs("li", { children: ["\u2022 ", feature] }, feature))) }), _jsx("button", { type: "button", disabled: isCurrent || isBusy, onClick: () => handlePlanChange(plan), className: `mt-5 w-full rounded-lg px-3 py-2 text-sm font-medium transition ${isCurrent
-                                    ? 'cursor-not-allowed bg-zinc-700 text-zinc-300'
+                    const isFree = plan.price === 0;
+                    const hasTrial = (plan.trialDays ?? 0) > 0;
+                    const isExternal = !!plan.externalUrl || plan.contactSales;
+                    const periodPrice = isFree ? 'Free' : `$${plan.price}/mo`;
+                    const buttonLabel = isCurrent
+                        ? 'Current plan'
+                        : isBusy
+                            ? 'Applying\u2026'
+                            : isExternal
+                                ? plan.contactSales ? 'Contact Sales \u2192' : 'Get started \u2192'
+                                : hasTrial && !subscription.id
+                                    ? `Start ${plan.trialDays}-day free trial`
+                                    : currentPlan && plan.price < (currentPlan?.price ?? 0)
+                                        ? 'Downgrade'
+                                        : 'Upgrade';
+                    return (_jsxs("div", { className: `relative flex flex-col rounded-2xl border p-5 transition ${plan.highlighted && !isCurrent
+                            ? 'border-white/[0.2] bg-[#141419]'
+                            : isCurrent
+                                ? 'border-white/[0.25] bg-[#141419]'
+                                : 'border-white/[0.08] bg-[#141419]'}`, children: [plan.highlighted && !isCurrent && (_jsx("div", { className: "absolute -top-px left-0 right-0 h-px rounded-t-2xl bg-gradient-to-r from-transparent via-white/40 to-transparent" })), _jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsx("p", { className: "text-[15px] font-semibold text-white", children: plan.name }), plan.badge ? (_jsx("span", { className: `rounded-full px-2 py-1 text-[11px] font-semibold flex-shrink-0 ${isCurrent
+                                            ? 'bg-white/10 text-white/60'
+                                            : plan.contactSales
+                                                ? 'bg-amber-500/15 text-amber-400'
+                                                : hasTrial
+                                                    ? 'bg-sky-500/15 text-sky-400'
+                                                    : 'bg-white/[0.07] text-white/40'}`, children: plan.badge })) : null] }), _jsxs("div", { className: "mt-4", children: [_jsxs("p", { className: "text-2xl font-bold text-white", children: [isExternal && !isFree ? `$${formatCurrency(plan.price).replace('$', '').split('.')[0]}` : periodPrice, !isFree && !isExternal && _jsx("span", { className: "text-sm font-normal text-white/40", children: "/mo" }), isExternal && !isFree && _jsx("span", { className: "text-sm font-normal text-white/40", children: "/mo+" })] }), plan.annualPrice && !isCurrent && (_jsxs("p", { className: "mt-0.5 text-[12px] text-emerald-400", children: ["$", plan.annualPrice, "/yr ", '\u2014', " save $", plan.price * 12 - plan.annualPrice] })), (plan.trialCreditCents ?? 0) > 0 && !isCurrent && (_jsxs("p", { className: "mt-0.5 text-[12px] text-emerald-400", children: ["+$", (plan.trialCreditCents / 100).toFixed(0), " credit included"] }))] }), _jsx("p", { className: "mt-3 text-[13px] leading-relaxed text-white/40", children: plan.description }), _jsx("ul", { className: "mt-4 flex-1 space-y-1.5", children: plan.features.map((feature) => (_jsxs("li", { className: "flex items-start gap-2 text-[13px] text-white/50", children: [_jsx("span", { className: "mt-0.5 flex-shrink-0 text-white/30", children: _jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M20 6L9 17l-5-5" }) }) }), feature] }, feature))) }), _jsx("button", { type: "button", disabled: isCurrent || isBusy, onClick: () => handlePlanChange(plan), className: `mt-5 w-full rounded-xl px-3 py-2.5 text-sm font-semibold transition active:scale-[0.98] ${isCurrent
+                                    ? 'cursor-not-allowed bg-white/[0.06] text-white/30'
                                     : isBusy
-                                        ? 'cursor-wait bg-zinc-300 text-zinc-600'
-                                        : 'bg-zinc-900 text-white hover:bg-zinc-700'}`, children: isCurrent ? 'Current plan' : isBusy ? 'Applying…' : 'Switch plan' })] }, plan.id));
-                }) })), view === 'history' && (_jsxs("div", { className: "rounded-xl border border-zinc-200 bg-white", children: [_jsx("div", { className: "border-b border-zinc-200 px-4 py-3", children: _jsx("h3", { className: "text-sm font-semibold text-zinc-900", children: "Subscription timeline" }) }), subscriptionHistory.length === 0 ? (_jsx("div", { className: "p-6 text-sm text-zinc-500", children: "No history entries yet." })) : (_jsx("div", { className: "divide-y divide-zinc-200", children: subscriptionHistory.map((entry) => (_jsxs("div", { className: "flex flex-wrap items-start justify-between gap-2 px-4 py-3", children: [_jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium text-zinc-900", children: entry.action }), _jsx("p", { className: "text-sm text-zinc-600", children: entry.details }), entry.fromPlan || entry.toPlan ? (_jsxs("p", { className: "text-xs text-zinc-500", children: [entry.fromPlan ?? '—', " \u2192 ", entry.toPlan ?? '—'] })) : null] }), _jsx("p", { className: "text-xs text-zinc-500", children: formatDate(entry.date) })] }, entry.id))) }))] }))] }));
+                                        ? 'cursor-wait bg-white/[0.06] text-white/30'
+                                        : plan.highlighted
+                                            ? 'bg-white text-black hover:bg-white/90'
+                                            : isExternal
+                                                ? 'bg-white/[0.08] text-white/70 hover:bg-white/[0.12] hover:text-white'
+                                                : hasTrial && !subscription.id
+                                                    ? 'bg-sky-500/20 text-sky-300 hover:bg-sky-500/30'
+                                                    : 'bg-white/[0.08] text-white/70 hover:bg-white/[0.12] hover:text-white'}`, children: buttonLabel })] }, plan.id));
+                }) })), view === 'history' && (_jsxs("div", { className: "rounded-xl border border-border bg-bg-card", children: [_jsx("div", { className: "border-b border-border px-4 py-3", children: _jsx("h3", { className: "text-sm font-semibold text-text", children: "Subscription timeline" }) }), subscriptionHistory.length === 0 ? (_jsx("div", { className: "p-6 text-sm text-text-muted", children: "No history entries yet." })) : (_jsx("div", { className: "divide-y divide-border", children: subscriptionHistory.map((entry) => (_jsxs("div", { className: "flex flex-wrap items-start justify-between gap-2 px-4 py-3", children: [_jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium text-text", children: entry.action }), _jsx("p", { className: "text-sm text-text-secondary", children: entry.details }), entry.fromPlan || entry.toPlan ? (_jsxs("p", { className: "text-xs text-text-muted", children: [entry.fromPlan ?? '\u2014', " ", '\u2192', " ", entry.toPlan ?? '\u2014'] })) : null] }), _jsx("p", { className: "text-xs text-text-muted", children: formatDate(entry.date) })] }, entry.id))) }))] }))] }));
 }

package/dist/src/billing/components/support-tiers-panel.d.ts

@@ -0,0 +1,6 @@
+export interface SupportTiersPanelProps {
+    currentTier?: string;
+    onSubscribe?: (tierId: string) => Promise<void>;
+}
+export declare function SupportTiersPanel({ currentTier, onSubscribe }: SupportTiersPanelProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=support-tiers-panel.d.ts.map

package/dist/src/billing/components/support-tiers-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"support-tiers-panel.d.ts","sourceRoot":"","sources":["../../../../src/billing/components/support-tiers-panel.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,sBAAsB;IACrC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;CAChD;AAsDD,wBAAgB,iBAAiB,CAAC,EAAE,WAAW,EAAE,WAAW,EAAE,EAAE,sBAAsB,2CA6FrF"}

package/dist/src/billing/components/support-tiers-panel.js

@@ -0,0 +1,90 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+const SUPPORT_TIERS = [
+    {
+        id: 'community',
+        name: 'Community',
+        price: 0,
+        billingPeriod: 'monthly',
+        features: [
+            'Community forum access',
+            'Public documentation',
+            'GitHub issues',
+            '72-hour response SLA',
+        ],
+    },
+    {
+        id: 'priority',
+        name: 'Priority',
+        price: 99,
+        billingPeriod: 'monthly',
+        highlighted: true,
+        features: [
+            'Email support',
+            'Dedicated support channel',
+            '24-hour response SLA',
+            'Priority bug fixes',
+            'Quarterly architecture review',
+        ],
+    },
+    {
+        id: 'enterprise',
+        name: 'Enterprise',
+        price: 499,
+        billingPeriod: 'monthly',
+        features: [
+            'Dedicated support engineer',
+            'Slack/Teams integration',
+            '4-hour response SLA',
+            'Custom SLAs available',
+            'Onboarding assistance',
+            'Monthly strategy calls',
+        ],
+    },
+];
+function formatCurrency(value) {
+    if (value === 0)
+        return 'Free';
+    return new Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency: 'USD',
+        maximumFractionDigits: 0,
+    }).format(value);
+}
+export function SupportTiersPanel({ currentTier, onSubscribe }) {
+    const [busyTierId, setBusyTierId] = React.useState(null);
+    const handleSubscribe = React.useCallback(async (tierId) => {
+        if (!onSubscribe)
+            return;
+        setBusyTierId(tierId);
+        try {
+            await onSubscribe(tierId);
+        }
+        finally {
+            setBusyTierId(null);
+        }
+    }, [onSubscribe]);
+    const activeTier = currentTier ?? 'community';
+    return (_jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: "overflow-hidden rounded-xl border border-border bg-bg-card", children: _jsxs("div", { className: "border-b border-border p-4", children: [_jsx("h3", { className: "text-lg font-semibold text-text", children: "Support plans" }), _jsx("p", { className: "text-sm text-text-muted", children: "Choose the level of support that fits your needs. Upgrade anytime." })] }) }), _jsx("div", { className: "grid gap-4 md:grid-cols-3", children: SUPPORT_TIERS.map((tier) => {
+                    const isCurrent = tier.id === activeTier;
+                    const isBusy = busyTierId === tier.id;
+                    return (_jsxs("div", { className: `relative rounded-xl border p-5 transition ${tier.highlighted && !isCurrent
+                            ? 'border-2 border-brand bg-bg-card'
+                            : isCurrent
+                                ? 'border-brand bg-brand/10'
+                                : 'border-border bg-bg-card'}`, children: [tier.highlighted && !isCurrent && (_jsx("span", { className: "absolute -top-3 left-4 rounded-full bg-brand px-3 py-0.5 text-xs font-semibold text-brand-foreground", children: "Recommended" })), _jsx("p", { className: "text-lg font-semibold text-text", children: tier.name }), _jsxs("p", { className: "mt-2 text-2xl font-bold text-text", children: [formatCurrency(tier.price), tier.price > 0 && (_jsxs("span", { className: "text-sm font-normal text-text-muted", children: ["/", tier.billingPeriod] }))] }), _jsx("ul", { className: "mt-4 space-y-2 text-sm text-text-secondary", children: tier.features.map((feature) => (_jsxs("li", { className: "flex items-start gap-2", children: [_jsx("span", { className: "mt-0.5 text-emerald-500", children: '\u2713' }), feature] }, feature))) }), _jsx("button", { type: "button", disabled: isCurrent || isBusy || !onSubscribe, onClick: () => handleSubscribe(tier.id), className: `mt-5 w-full rounded-lg px-3 py-2 text-sm font-medium transition ${isCurrent
+                                    ? 'cursor-not-allowed bg-bg-elevated text-text-dim'
+                                    : isBusy
+                                        ? 'cursor-wait bg-bg-elevated text-text-muted'
+                                        : tier.highlighted
+                                            ? 'bg-brand text-brand-foreground hover:bg-brand-hover active:scale-[0.97]'
+                                            : 'bg-text text-bg hover:opacity-80'}`, children: isCurrent
+                                    ? 'Current plan'
+                                    : isBusy
+                                        ? 'Subscribing...'
+                                        : tier.price === 0
+                                            ? 'Downgrade'
+                                            : 'Upgrade' })] }, tier.id));
+                }) })] }));
+}

package/dist/src/billing/components/tax-compliance-panel.js

@@ -4,19 +4,19 @@ import * as React from 'react';
 const complianceTone = {
     complete: {
         label: 'Complete',
-        className: 'bg-emerald-50 text-emerald-700 ring-emerald-600/20',
+        className: 'bg-emerald-500/10 text-emerald-500 ring-emerald-500/20',
     },
     required: {
         label: 'Required',
-        className: 'bg-rose-50 text-rose-700 ring-rose-600/20',
+        className: 'bg-rose-500/10 text-rose-500 ring-rose-500/20',
     },
     review: {
         label: 'Review',
-        className: 'bg-amber-50 text-amber-700 ring-amber-600/20',
+        className: 'bg-amber-500/10 text-amber-500 ring-amber-500/20',
     },
     blocked: {
         label: 'Blocked',
-        className: 'bg-zinc-100 text-zinc-700 ring-zinc-600/20',
+        className: 'bg-text-dim/10 text-text-muted ring-text-dim/20',
     },
 };
 export function TaxCompliancePanel(props) {
@@ -37,5 +37,5 @@ export function TaxCompliancePanel(props) {
             setSaving(false);
         }
     }, [automaticTax, onToggleAutomaticTax]);
-    return (_jsx("div", { className: "space-y-4", children: _jsxs("div", { className: "grid gap-4 xl:grid-cols-5", children: [_jsxs("div", { className: "xl:col-span-2 overflow-hidden rounded-xl border border-zinc-200 bg-white", children: [_jsxs("div", { className: "border-b border-zinc-200 p-4", children: [_jsx("h3", { className: "text-lg font-semibold text-zinc-900", children: "Tax settings" }), _jsx("p", { className: "text-sm text-zinc-500", children: "Manage registrations, nexus, and tax collection behavior" })] }), _jsxs("div", { className: "space-y-4 p-4", children: [_jsxs("div", { className: "flex items-start justify-between gap-4 rounded-lg border border-zinc-200 p-3", children: [_jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium text-zinc-900", children: "Automatic tax" }), _jsx("p", { className: "text-xs text-zinc-500", children: "Calculate and collect tax where required" })] }), _jsx("button", { type: "button", onClick: handleToggle, disabled: saving, className: `relative inline-flex h-6 w-11 items-center rounded-full transition ${automaticTax ? 'bg-zinc-900' : 'bg-zinc-300'}`, children: _jsx("span", { className: `inline-block h-4 w-4 transform rounded-full bg-white transition ${automaticTax ? 'translate-x-6' : 'translate-x-1'}` }) })] }), _jsxs("div", { children: [_jsx("p", { className: "mb-2 text-sm font-medium text-zinc-900", children: "Registrations" }), _jsx("div", { className: "space-y-2", children: taxSettings.registrations.length === 0 ? (_jsx("p", { className: "rounded-lg border border-dashed border-zinc-300 p-3 text-sm text-zinc-500", children: "No tax registrations configured." })) : (taxSettings.registrations.map((registration) => (_jsxs("div", { className: "rounded-lg border border-zinc-200 p-3", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("p", { className: "text-sm font-medium text-zinc-900", children: registration.region }), _jsx("span", { className: "rounded-full bg-zinc-100 px-2 py-1 text-[10px] font-semibold uppercase tracking-wide text-zinc-700", children: registration.status })] }), _jsxs("p", { className: "mt-1 text-xs text-zinc-500", children: [registration.type.toUpperCase(), " \u00B7 ", registration.registrationId] })] }, registration.id)))) })] })] })] }), _jsxs("div", { className: "xl:col-span-3 overflow-hidden rounded-xl border border-zinc-200 bg-white", children: [_jsxs("div", { className: "border-b border-zinc-200 p-4", children: [_jsx("h3", { className: "text-lg font-semibold text-zinc-900", children: "Compliance checklist" }), _jsx("p", { className: "text-sm text-zinc-500", children: "Track KYC/KYB, tax filings, and policy requirements" })] }), _jsx("div", { className: "divide-y divide-zinc-200", children: complianceItems.length === 0 ? (_jsx("div", { className: "p-6 text-sm text-zinc-500", children: "No compliance tasks yet." })) : (complianceItems.map((item) => (_jsxs("div", { className: "flex flex-wrap items-start justify-between gap-3 p-4", children: [_jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium text-zinc-900", children: item.title }), _jsx("p", { className: "mt-1 text-sm text-zinc-600", children: item.description }), _jsxs("p", { className: "mt-1 text-xs text-zinc-500", children: ["Category: ", item.category.toUpperCase(), item.owner ? ` · Owner: ${item.owner}` : ''] })] }), _jsxs("div", { className: "flex flex-col items-end gap-2", children: [_jsx("span", { className: `inline-flex rounded-full px-2 py-1 text-xs font-semibold ring-1 ${complianceTone[item.status].className}`, children: complianceTone[item.status].label }), item.actionLabel ? (_jsx("button", { type: "button", className: "rounded-md border border-zinc-300 px-3 py-1.5 text-xs font-medium text-zinc-700 transition hover:bg-zinc-100", children: item.actionLabel })) : null] })] }, item.id)))) })] })] }) }));
+    return (_jsx("div", { className: "space-y-4", children: _jsxs("div", { className: "grid gap-4 xl:grid-cols-5", children: [_jsxs("div", { className: "xl:col-span-2 overflow-hidden rounded-xl border border-border bg-bg-card", children: [_jsxs("div", { className: "border-b border-border p-4", children: [_jsx("h3", { className: "text-lg font-semibold text-text", children: "Tax settings" }), _jsx("p", { className: "text-sm text-text-muted", children: "Manage registrations, nexus, and tax collection behavior" })] }), _jsxs("div", { className: "space-y-4 p-4", children: [_jsxs("div", { className: "flex items-start justify-between gap-4 rounded-lg border border-border p-3", children: [_jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium text-text", children: "Automatic tax" }), _jsx("p", { className: "text-xs text-text-muted", children: "Calculate and collect tax where required" })] }), _jsx("button", { type: "button", onClick: handleToggle, disabled: saving, className: `relative inline-flex h-6 w-11 items-center rounded-full transition ${automaticTax ? 'bg-brand' : 'bg-border-strong'}`, children: _jsx("span", { className: `inline-block h-4 w-4 transform rounded-full bg-white transition ${automaticTax ? 'translate-x-6' : 'translate-x-1'}` }) })] }), _jsxs("div", { children: [_jsx("p", { className: "mb-2 text-sm font-medium text-text", children: "Registrations" }), _jsx("div", { className: "space-y-2", children: taxSettings.registrations.length === 0 ? (_jsx("p", { className: "rounded-lg border border-dashed border-border p-3 text-sm text-text-muted", children: "No tax registrations configured." })) : (taxSettings.registrations.map((registration) => (_jsxs("div", { className: "rounded-lg border border-border p-3", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("p", { className: "text-sm font-medium text-text", children: registration.region }), _jsx("span", { className: "rounded-full bg-bg-elevated px-2 py-1 text-[10px] font-semibold uppercase tracking-wide text-text-secondary", children: registration.status })] }), _jsxs("p", { className: "mt-1 text-xs text-text-muted", children: [registration.type.toUpperCase(), " ", '\u00b7', " ", registration.registrationId] })] }, registration.id)))) })] })] })] }), _jsxs("div", { className: "xl:col-span-3 overflow-hidden rounded-xl border border-border bg-bg-card", children: [_jsxs("div", { className: "border-b border-border p-4", children: [_jsx("h3", { className: "text-lg font-semibold text-text", children: "Compliance checklist" }), _jsx("p", { className: "text-sm text-text-muted", children: "Track KYC/KYB, tax filings, and policy requirements" })] }), _jsx("div", { className: "divide-y divide-border", children: complianceItems.length === 0 ? (_jsx("div", { className: "p-6 text-sm text-text-muted", children: "No compliance tasks yet." })) : (complianceItems.map((item) => (_jsxs("div", { className: "flex flex-wrap items-start justify-between gap-3 p-4", children: [_jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium text-text", children: item.title }), _jsx("p", { className: "mt-1 text-sm text-text-secondary", children: item.description }), _jsxs("p", { className: "mt-1 text-xs text-text-muted", children: ["Category: ", item.category.toUpperCase(), item.owner ? ` \u00b7 Owner: ${item.owner}` : ''] })] }), _jsxs("div", { className: "flex flex-col items-end gap-2", children: [_jsx("span", { className: `inline-flex rounded-full px-2 py-1 text-xs font-semibold ring-1 ${complianceTone[item.status].className}`, children: complianceTone[item.status].label }), item.actionLabel ? (_jsx("button", { type: "button", className: "rounded-md border border-border px-3 py-1.5 text-xs font-medium text-text-secondary transition hover:bg-bg-elevated", children: item.actionLabel })) : null] })] }, item.id)))) })] })] }) }));
 }

package/dist/src/billing/components/transactions-panel.d.ts

@@ -0,0 +1,8 @@
+import type { TransactionRecord } from '../types';
+export interface TransactionsPanelProps {
+    transactions: TransactionRecord[];
+    loading?: boolean;
+    pageSize?: number;
+}
+export declare function TransactionsPanel({ transactions, loading, pageSize }: TransactionsPanelProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=transactions-panel.d.ts.map

package/dist/src/billing/components/transactions-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"transactions-panel.d.ts","sourceRoot":"","sources":["../../../../src/billing/components/transactions-panel.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,iBAAiB,EAAmB,MAAM,UAAU,CAAA;AAElE,MAAM,WAAW,sBAAsB;IACrC,YAAY,EAAE,iBAAiB,EAAE,CAAA;IACjC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAqCD,wBAAgB,iBAAiB,CAAC,EAAE,YAAY,EAAE,OAAe,EAAE,QAAa,EAAE,EAAE,sBAAsB,2CAqIzG"}

package/dist/src/billing/components/transactions-panel.js

@@ -0,0 +1,64 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+function formatCurrency(value, currency = 'USD') {
+    return new Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency,
+        minimumFractionDigits: 2,
+    }).format(value);
+}
+function formatDate(dateStr) {
+    return new Intl.DateTimeFormat('en-US', {
+        month: 'short',
+        day: 'numeric',
+        year: 'numeric',
+        hour: 'numeric',
+        minute: '2-digit',
+    }).format(new Date(dateStr));
+}
+const TYPE_LABELS = {
+    deposit: { label: 'Deposit', color: 'text-emerald-500' },
+    withdraw: { label: 'Withdrawal', color: 'text-rose-500' },
+    hold: { label: 'Hold', color: 'text-amber-500' },
+    'hold-removed': { label: 'Hold Released', color: 'text-sky-500' },
+    transfer: { label: 'Transfer', color: 'text-violet-500' },
+};
+const typeFilterOptions = [
+    'all',
+    'deposit',
+    'withdraw',
+    'hold',
+    'hold-removed',
+    'transfer',
+];
+export function TransactionsPanel({ transactions, loading = false, pageSize = 20 }) {
+    const [typeFilter, setTypeFilter] = React.useState('all');
+    const [page, setPage] = React.useState(1);
+    const filtered = React.useMemo(() => {
+        if (typeFilter === 'all')
+            return transactions;
+        return transactions.filter((t) => t.type === typeFilter);
+    }, [transactions, typeFilter]);
+    const totalPages = Math.max(1, Math.ceil(filtered.length / pageSize));
+    const pageRows = React.useMemo(() => {
+        const safePage = Math.min(page, totalPages);
+        const start = (safePage - 1) * pageSize;
+        return filtered.slice(start, start + pageSize);
+    }, [filtered, page, pageSize, totalPages]);
+    React.useEffect(() => {
+        if (page > totalPages)
+            setPage(totalPages);
+    }, [page, totalPages]);
+    if (loading) {
+        return (_jsxs("div", { className: "overflow-hidden rounded-xl border border-border bg-bg-card p-8 text-center", children: [_jsx("div", { className: "mx-auto h-6 w-6 animate-spin rounded-full border-2 border-text-dim border-t-brand" }), _jsx("p", { className: "mt-3 text-sm text-text-muted", children: "Loading transactions..." })] }));
+    }
+    return (_jsx("div", { className: "space-y-4", children: _jsxs("div", { className: "overflow-hidden rounded-xl border border-border bg-bg-card", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3 border-b border-border p-4", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold text-text", children: "Transactions" }), _jsxs("p", { className: "text-sm text-text-muted", children: [filtered.length, " transaction(s)"] })] }), _jsx("select", { value: typeFilter, onChange: (e) => {
+                                setTypeFilter(e.target.value);
+                                setPage(1);
+                            }, className: "rounded-lg border border-border bg-bg-input px-3 py-2 text-sm text-text-secondary outline-none transition focus:border-brand", children: typeFilterOptions.map((t) => (_jsx("option", { value: t, children: t === 'all' ? 'All types' : TYPE_LABELS[t].label }, t))) })] }), _jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full min-w-[640px]", children: [_jsx("thead", { className: "bg-bg-elevated", children: _jsxs("tr", { children: [_jsx("th", { className: "px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-text-muted", children: "Date" }), _jsx("th", { className: "px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-text-muted", children: "Type" }), _jsx("th", { className: "px-4 py-3 text-right text-xs font-semibold uppercase tracking-wide text-text-muted", children: "Amount" }), _jsx("th", { className: "px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-text-muted", children: "Description" }), _jsx("th", { className: "px-4 py-3 text-right text-xs font-semibold uppercase tracking-wide text-text-muted", children: "Balance" })] }) }), _jsx("tbody", { className: "divide-y divide-border", children: pageRows.length === 0 ? (_jsx("tr", { children: _jsx("td", { colSpan: 5, className: "px-4 py-10 text-center text-sm text-text-muted", children: "No transactions found." }) })) : (pageRows.map((tx) => {
+                                    const typeInfo = TYPE_LABELS[tx.type] ?? { label: tx.type, color: 'text-text-muted' };
+                                    const isPositive = tx.type === 'deposit' || tx.type === 'hold-removed';
+                                    return (_jsxs("tr", { children: [_jsx("td", { className: "px-4 py-3 text-sm text-text-secondary", children: formatDate(tx.createdAt) }), _jsx("td", { className: "px-4 py-3 text-sm", children: _jsx("span", { className: `font-medium ${typeInfo.color}`, children: typeInfo.label }) }), _jsxs("td", { className: `px-4 py-3 text-right text-sm font-medium ${isPositive ? 'text-emerald-500' : 'text-rose-500'}`, children: [isPositive ? '+' : '-', formatCurrency(Math.abs(tx.amountCents) / 100, tx.currency)] }), _jsx("td", { className: "px-4 py-3 text-sm text-text-muted", children: tx.description || '\u2014' }), _jsx("td", { className: "px-4 py-3 text-right text-sm text-text-secondary", children: tx.balanceAfter != null ? formatCurrency(tx.balanceAfter / 100, tx.currency) : '\u2014' })] }, tx.id));
+                                })) })] }) }), totalPages > 1 && (_jsxs("div", { className: "flex items-center justify-between border-t border-border p-4", children: [_jsxs("p", { className: "text-xs text-text-muted", children: ["Page ", Math.min(page, totalPages), " of ", totalPages] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("button", { type: "button", onClick: () => setPage((p) => Math.max(1, p - 1)), disabled: page <= 1, className: "rounded-md border border-border px-3 py-1.5 text-xs font-medium text-text-secondary transition hover:bg-bg-elevated disabled:cursor-not-allowed disabled:opacity-60", children: "Previous" }), _jsx("button", { type: "button", onClick: () => setPage((p) => Math.min(totalPages, p + 1)), disabled: page >= totalPages, className: "rounded-md border border-border px-3 py-1.5 text-xs font-medium text-text-secondary transition hover:bg-bg-elevated disabled:cursor-not-allowed disabled:opacity-60", children: "Next" })] })] }))] }) }));
+}

package/dist/src/billing/components/usage-panel.d.ts

@@ -0,0 +1,7 @@
+import type { UsageSummary } from '../types';
+export interface UsagePanelProps {
+    usage: UsageSummary | null;
+    loading?: boolean;
+}
+export declare function UsagePanel(props: UsagePanelProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=usage-panel.d.ts.map

package/dist/src/billing/components/usage-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usage-panel.d.ts","sourceRoot":"","sources":["../../../../src/billing/components/usage-panel.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,YAAY,EAAe,MAAM,UAAU,CAAA;AAEzD,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,YAAY,GAAG,IAAI,CAAA;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAwGD,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,2CAoDhD"}

package/dist/src/billing/components/usage-panel.js

@@ -0,0 +1,64 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function formatCurrency(value, currency = 'USD') {
+    return new Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency,
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2,
+    }).format(value);
+}
+function formatNumber(value) {
+    if (value >= 1000000)
+        return `${(value / 1000000).toFixed(1)}M`;
+    if (value >= 1000)
+        return `${(value / 1000).toFixed(1)}k`;
+    return value.toLocaleString();
+}
+function formatDate(dateStr) {
+    return new Intl.DateTimeFormat('en-US', {
+        month: 'short',
+        day: 'numeric',
+    }).format(new Date(dateStr));
+}
+const METER_ICONS = {
+    ai: '\u{1F916}',
+    storage: '\u{1F4BE}',
+    network: '\u{1F310}',
+    network_egress: '\u{1F4E4}',
+    gpu: '\u26A1',
+    api_calls: '\u{1F4E1}',
+};
+const METER_COLORS = {
+    ai: 'bg-violet-500',
+    storage: 'bg-blue-500',
+    network: 'bg-emerald-500',
+    network_egress: 'bg-teal-500',
+    gpu: 'bg-amber-500',
+    api_calls: 'bg-indigo-500',
+};
+function UsageMeter({ record }) {
+    const utilization = record.limit && record.limit > 0
+        ? Math.min((record.current / record.limit) * 100, 100)
+        : null;
+    const icon = METER_ICONS[record.meterId] ?? '\u{1F4CA}';
+    const barColor = METER_COLORS[record.meterId] ?? 'bg-brand';
+    const isOverage = utilization !== null && utilization >= 100;
+    const isWarning = utilization !== null && utilization >= 80 && utilization < 100;
+    return (_jsxs("div", { className: "rounded-lg border border-border bg-bg-card p-4", children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-lg", children: icon }), _jsx("p", { className: "text-sm font-medium text-text", children: record.label })] }), record.cost > 0 && (_jsx("span", { className: "rounded-full bg-bg-elevated px-2 py-0.5 text-xs font-medium text-text-secondary", children: formatCurrency(record.cost) }))] }), _jsxs("div", { className: "mt-3", children: [_jsxs("div", { className: "flex items-end justify-between", children: [_jsxs("p", { className: "text-2xl font-semibold text-text", children: [formatNumber(record.current), _jsx("span", { className: "ml-1 text-sm font-normal text-text-muted", children: record.unit })] }), record.limit && record.limit > 0 && (_jsxs("p", { className: "text-xs text-text-muted", children: ["of ", formatNumber(record.limit), " ", record.unit] }))] }), utilization !== null && (_jsxs("div", { className: "mt-2", children: [_jsx("div", { className: "h-2 rounded-full bg-bg-elevated", children: _jsx("div", { className: `h-2 rounded-full transition-all ${isOverage ? 'bg-danger' : isWarning ? 'bg-warning' : barColor}`, style: { width: `${Math.min(utilization, 100)}%` } }) }), _jsx("p", { className: `mt-1 text-xs ${isOverage ? 'text-danger font-medium' : isWarning ? 'text-warning' : 'text-text-muted'}`, children: isOverage
+                                    ? `${(utilization - 100).toFixed(0)}% over limit`
+                                    : `${utilization.toFixed(0)}% used` })] }))] })] }));
+}
+export function UsagePanel(props) {
+    const { usage, loading = false } = props;
+    if (loading) {
+        return (_jsxs("div", { className: "overflow-hidden rounded-xl border border-border bg-bg-card p-8 text-center", children: [_jsx("div", { className: "mx-auto h-6 w-6 animate-spin rounded-full border-2 border-text-dim border-t-brand" }), _jsx("p", { className: "mt-3 text-sm text-text-muted", children: "Loading usage data..." })] }));
+    }
+    if (!usage || usage.records.length === 0) {
+        return (_jsxs("div", { className: "overflow-hidden rounded-xl border border-border bg-bg-card", children: [_jsxs("div", { className: "border-b border-border p-4", children: [_jsx("h3", { className: "text-lg font-semibold text-text", children: "Usage" }), _jsx("p", { className: "text-sm text-text-muted", children: "Current billing period resource consumption" })] }), _jsx("div", { className: "p-6 text-sm text-text-muted", children: "No usage data available for this period." })] }));
+    }
+    const periodLabel = usage.period.start && usage.period.end
+        ? `${formatDate(usage.period.start)} \u2013 ${formatDate(usage.period.end)}`
+        : 'Current period';
+    return (_jsx("div", { className: "space-y-4", children: _jsxs("div", { className: "overflow-hidden rounded-xl border border-border bg-bg-card", children: [_jsxs("div", { className: "flex flex-wrap items-start justify-between gap-3 border-b border-border p-4", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold text-text", children: "Usage" }), _jsx("p", { className: "text-sm text-text-muted", children: periodLabel })] }), _jsxs("div", { className: "text-right", children: [_jsx("p", { className: "text-xs uppercase tracking-wide text-text-muted", children: "Total cost" }), _jsx("p", { className: "mt-1 text-xl font-semibold text-text", children: formatCurrency(usage.totalCost, usage.currency) })] })] }), _jsx("div", { className: "grid gap-4 p-4 md:grid-cols-2 xl:grid-cols-3", children: usage.records.map((record) => (_jsx(UsageMeter, { record: record }, record.meterId))) })] }) }));
+}