import { Head } from '@inertiajs/react'; import { Building2, Calendar, CreditCard, Globe, Mail, MapPin, Users, } from 'lucide-react'; type Org = { id: string; name: string; orgType: string; country: string; domain: string | null; owner: { name: string; email: string } | null; memberCount: number; plan: string | null; subscriptionStatus: string | null; trialEndsAt: string | null; createdAt: string | null; }; type Props = { org: Org }; const ORG_TYPE_LABELS: Record = { sacco: 'SACCO', microfinance: 'Microfinance', bank: 'Bank', insurance: 'Insurance', other: 'Other', }; const STATUS_STYLES: Record = { trialing: 'bg-amber-500/10 text-amber-600 dark:text-amber-400', active: 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400', past_due: 'bg-red-500/10 text-red-600 dark:text-red-400', canceled: 'bg-zinc-500/10 text-zinc-600 dark:text-zinc-400', }; function countryName(code: string): string { try { return ( new Intl.DisplayNames(['en'], { type: 'region' }).of(code) ?? code ); } catch { return code; } } function formatDate(iso: string | null): string { if (!iso) return '—'; return new Date(iso).toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric', }); } function DetailRow({ icon: Icon, label, children, }: { icon: typeof Globe; label: string; children: React.ReactNode; }) { return (
{label}
{children}
); } export default function Index({ org }: Props) { const status = org.subscriptionStatus; return (

{org.name}

{ORG_TYPE_LABELS[org.orgType] ?? org.orgType} ·{' '} {countryName(org.country)}

{status && ( {status.replace('_', ' ')} )}
{org.domain ?? 'Not set'} {countryName(org.country)} {org.plan ?? 'No plan selected'} {status === 'trialing' && org.trialEndsAt && ( Trial ends {formatDate(org.trialEndsAt)} )} {org.memberCount} {org.owner && ( {org.owner.name} {org.owner.email} )} {formatDate(org.createdAt)}

Staff sign-in and loan modules for this workspace are coming soon.

); }