import ClientLayout from '@/Layouts/ClientLayout'; import { AppDetail, PageProps } from '@/types'; import { Head, useForm } from '@inertiajs/react'; import { Building2, Globe, Users } from 'lucide-react'; import { useState } from 'react'; import AppNav from './components/AppNav'; const ORG_TYPES = [ { value: 'sacco', label: 'SACCO', description: 'Savings & Credit Co-operative', }, { value: 'microfinance', label: 'Microfinance', description: 'Microfinance Institution (MFI)', }, { value: 'bank', label: 'Bank', description: 'Commercial or Community Bank', }, { value: 'insurance', label: 'Insurance', description: 'Insurance Company or MGA', }, { value: 'other', label: 'Other', description: 'Other financial institution', }, ] as const; const COUNTRIES = [ { code: 'KE', name: 'Kenya' }, { code: 'UG', name: 'Uganda' }, { code: 'TZ', name: 'Tanzania' }, { code: 'RW', name: 'Rwanda' }, { code: 'ET', name: 'Ethiopia' }, { code: 'GH', name: 'Ghana' }, { code: 'NG', name: 'Nigeria' }, { code: 'ZA', name: 'South Africa' }, { code: 'ZM', name: 'Zambia' }, { code: 'ZW', name: 'Zimbabwe' }, { code: 'MW', name: 'Malawi' }, { code: 'MZ', name: 'Mozambique' }, { code: 'Other', name: 'Other' }, ]; function toSlug(value: string): string { return value .toLowerCase() .replace(/[^a-z0-9-]/g, '-') .replace(/-+/g, '-') .replace(/^-|-$/g, ''); } type Props = PageProps<{ app: AppDetail; domainSuffix: string; }>; export default function AppSettings({ app, domainSuffix }: Props) { const { data, setData, patch, processing, errors, isDirty } = useForm({ name: app.name, country: app.country ?? 'KE', org_type: app.orgType ?? '', subdomain: app.subdomain ?? toSlug(app.name), }); const [subdomainTouched, setSubdomainTouched] = useState(false); const subdomainValid = data.subdomain.length >= 3 && /^[a-z0-9][a-z0-9-]*[a-z0-9]$/.test(data.subdomain); function submit(e: React.FormEvent) { e.preventDefault(); patch(route('app.settings.update', { tenant: app.id })); } const portalPreview = `https://${data.subdomain}${domainSuffix}`; return (
{/* Organisation details section */}

Organisation details

{/* Name */}
setData('name', e.target.value) } className="border-border bg-background text-foreground placeholder:text-muted-foreground dark:placeholder:text-muted-foreground/50 focus:ring-primary/30 w-full rounded-xl border px-4 py-2.5 text-sm outline-none focus:ring-2" /> {errors.name && (

{errors.name}

)}
{/* Country */}
{errors.country && (

{errors.country}

)}
{/* Org type */}
{ORG_TYPES.map( ({ value, label, description }) => ( ), )}
{errors.org_type && (

{errors.org_type}

)}
{/* Subdomain section */}

Subdomain

Changing this will update your portal URL. Existing links using the old URL will stop working.

{ setSubdomainTouched(true); setData( 'subdomain', toSlug(e.target.value), ); }} placeholder="yourorg" className="bg-background text-foreground placeholder:text-muted-foreground dark:placeholder:text-muted-foreground/50 min-w-0 flex-1 px-4 py-2.5 text-sm outline-none" /> {domainSuffix}
{errors.subdomain && (

{errors.subdomain}

)} {subdomainTouched && data.subdomain && !subdomainValid && (

Must be 3+ characters, lowercase, letters/numbers/hyphens only.

)}

Portal URL preview

{portalPreview}

{/* Save */}
); }