import ClientLayout from '@/Layouts/ClientLayout'; import { parseServerDate } from '@/lib/date'; import { PageProps } from '@/types'; import { Head, Link } from '@inertiajs/react'; import { AlertTriangle, Building2, CheckCircle2, Circle, CreditCard, ExternalLink, Globe, Users, Zap, } from 'lucide-react'; import AppNav, { AppDetailWithNext } from './components/AppNav'; const ORG_TYPE_LABELS: Record = { sacco: 'SACCO', microfinance: 'Microfinance', bank: 'Bank', insurance: 'Insurance', other: 'Organisation', }; function statusColor(status: string | null) { switch (status) { case 'trialing': return 'text-sky-600 bg-sky-50 border-sky-200 dark:text-sky-400 dark:bg-sky-900/20 dark:border-sky-700/30'; case 'active': return 'text-emerald-600 bg-emerald-50 border-emerald-200 dark:text-emerald-400 dark:bg-emerald-900/20 dark:border-emerald-700/30'; case 'past_due': return 'text-amber-600 bg-amber-50 border-amber-200 dark:text-amber-400 dark:bg-amber-900/20 dark:border-amber-700/30'; case 'suspended': return 'text-red-600 bg-red-50 border-red-200 dark:text-red-400 dark:bg-red-900/20 dark:border-red-700/30'; default: return 'text-muted-foreground bg-muted border-border'; } } function LimitRow({ label, value, }: { label: string; value: number | null | undefined; }) { const display = value == null ? 'Unlimited' : value.toLocaleString(); return (
{label} {display}
); } type Props = PageProps<{ app: AppDetailWithNext }>; export default function AppShow({ app }: Props) { const trialDaysLeft = app.trialEndsAt ? Math.max( 0, Math.ceil( (new Date(app.trialEndsAt).getTime() - Date.now()) / 86_400_000, ), ) : null; const setupSteps = [ { label: 'Organisation details', done: true }, { label: 'Subdomain configured', done: !!app.subdomain }, { label: 'Plan selected', done: !!app.plan }, ]; return (
{/* Status banner — setup incomplete */} {!app.setupComplete && (

Setup not complete

Complete the remaining steps below to go live.

{app.nextStep && ( Continue → )}
)} {/* Trial banner */} {app.planStatus === 'trialing' && trialDaysLeft !== null && (

{trialDaysLeft} days {' '} remaining on your {app.plan} trial.

Manage billing →
)}
{/* Left column — 2/3 */}
{/* App info card */}

App details

{[ { label: 'Organisation name', value: app.name, icon: Building2, }, { label: 'Type', value: app.orgType ? (ORG_TYPE_LABELS[app.orgType] ?? app.orgType) : '—', icon: Users, }, { label: 'Country', value: app.country ?? '—', icon: Globe, }, { label: 'Subdomain', value: app.domain ?? 'Not set', icon: Globe, mono: true, link: app.portalUrl, }, ].map( ({ label, value, icon: Icon, mono, link, }) => (
{label}
{link ? ( {value} ) : ( value )}
), )}
Edit settings →
{/* Setup checklist */} {!app.setupComplete && (

Setup checklist

{setupSteps.map((step) => (
{step.done ? ( ) : ( )} {step.label} {step.done && ( Done )}
))}
)}
{/* Right column — 1/3 */}
{/* Subscription card */}

Subscription

{app.plan ? (
{app.plan} {app.planStatus}
{app.billingCycle && (

{app.billingCycle} billing

)} {app.trialEndsAt && app.planStatus === 'trialing' && (

Trial ends{' '} {parseServerDate( app.trialEndsAt, ).toLocaleDateString()}

)} {app.currentPeriodEnd && app.planStatus !== 'trialing' && (

Renews{' '} {parseServerDate( app.currentPeriodEnd, ).toLocaleDateString()}

)}
) : (

No plan selected

)}
Manage billing →
{/* Plan limits */} {app.limits && (

Plan limits

)}
); }