import { Head, Link } from '@inertiajs/react'; import { CreditCard, Wallet } from 'lucide-react'; import { AdminSurface, AdminSurfaceBar } from '@/components/admin-surface'; import { TablePagination } from '@/components/table-pagination'; import type { PaginationMeta } from '@/components/table-pagination'; import { TableSearch } from '@/components/table-search'; import { Card } from '@/components/ui/card'; import AdminLayout from '@/layouts/admin-layout'; import { useT } from '@/lib/i18n'; import { relativeTime } from '@/lib/relative-time'; import { dashboard as adminDashboard } from '@/routes/admin'; import { index as adminSubscriptionsIndex } from '@/routes/admin/subscriptions'; import { show as adminWorkspaceShow } from '@/routes/admin/workspaces'; type Totals = { mrr_cents: number; at_risk_cents: number; active_count: number; past_due_count: number; total_workspaces: number; }; type PlanRollup = { name: string; slug: string; price_cents: number; monthly_conversations: number; subscriber_count: number; }; type WorkspaceRow = { workspace_id: string; workspace_name: string; workspace_slug: string; plan: string; plan_slug: string | null; price_cents: number; monthly_conversations: number; stripe_status: string; stripe_customer_id: string | null; created_at: string | null; ends_at: string | null; }; type Props = { totals: Totals; plans: PlanRollup[]; workspaces: WorkspaceRow[]; pagination: PaginationMeta; filters: { q: string }; }; const SUBSCRIPTIONS_ONLY = ['workspaces', 'pagination', 'filters']; const dollars = (cents: number): string => `$${(cents / 100).toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 2 })}`; const STATUS_PILL: Record = { active: 'bg-emerald-500/15 text-emerald-700 dark:text-emerald-400', trialing: 'bg-sky-500/15 text-sky-700 dark:text-sky-400', past_due: 'bg-amber-500/15 text-amber-700 dark:text-amber-400', canceled: 'bg-muted text-muted-foreground', no_subscription: 'bg-muted text-muted-foreground', no_plan: 'bg-muted text-muted-foreground', free: 'bg-slate-500/15 text-slate-700 dark:text-slate-300', manual: 'bg-violet-500/15 text-violet-700 dark:text-violet-300', }; export default function AdminSubscriptions({ totals, plans, workspaces, pagination, filters, }: Props) { const { t } = useT(); const conversionRate = totals.total_workspaces > 0 ? ((totals.active_count / totals.total_workspaces) * 100).toFixed(1) : '0.0'; return ( {t('Subscriptions')} {pagination.total === 1 ? t(':count billed workspace', { count: pagination.total.toLocaleString(), }) : t(':count billed workspaces', { count: pagination.total.toLocaleString(), })}

{t('MRR')}

{dollars(totals.mrr_cents)}

{totals.active_count === 1 ? t(':count active subscription', { count: totals.active_count, }) : t(':count active subscriptions', { count: totals.active_count, })}

{t('At risk')}

{dollars(totals.at_risk_cents)}

{totals.past_due_count === 1 ? t(':count past-due account', { count: totals.past_due_count, }) : t(':count past-due accounts', { count: totals.past_due_count, })}

{t('Workspaces')}

{totals.total_workspaces.toLocaleString()}

{t('total signed up')}

{t('Paid conversion')}

{conversionRate}%

{t( 'active subscriptions / total workspaces', )}

{t('Plan distribution')}

{plans.map((plan) => ( ))}

{t('Plan')}	{t('Price')}	{t('Allowance')}	{t('Subscribers')}
{plan.name}	{plan.price_cents === 0 ? t('Free') : t(':amount / mo', { amount: dollars( plan.price_cents, ), })}	{plan.monthly_conversations === 0 ? t( 'Unlimited conversations', ) : t( ':count conversations', { count: plan.monthly_conversations.toLocaleString(), }, )}	{plan.subscriber_count} {' '} {plan.subscriber_count === 1 ? t('subscriber') : t('subscribers')}

{t('Workspaces with a plan')}

{workspaces.length === 0 ? ( ) : ( workspaces.map((workspace) => ( )) )}

	{t('Workspace')}	{t('Plan')}	{t('$ / mo')}	{t('Stripe status')}	{t('Joined')}
{t( 'No billed workspaces yet', )} {t( 'Customers will appear here after they upgrade from billing.', )}
	{ workspace.workspace_name } { workspace.workspace_slug }	{workspace.plan}	{workspace.price_cents > 0 ? dollars( workspace.price_cents, ) : '—'}	{workspace.stripe_status.replace( '_', ' ', )}	{relativeTime( workspace.created_at, '—', )}

); }