import ClientLayout from '@/Layouts/ClientLayout'; import { PageProps } from '@/types'; import { Head, useForm } from '@inertiajs/react'; import { Building2, Globe, Users } from 'lucide-react'; import SetupStepper from './components/SetupStepper'; 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' }, ]; type Props = PageProps<{ tenant: { name: string; country: string; org_type: string | null } | null; tenantId: string | null; }>; export default function Organisation({ tenant, tenantId }: Props) { const isEdit = tenantId !== null; const { data, setData, post, patch, processing, errors } = useForm({ name: tenant?.name ?? '', country: tenant?.country ?? 'KE', org_type: tenant?.org_type ?? '', }); function submit(e: React.FormEvent) { e.preventDefault(); if (isEdit) { patch(route('setup.update', { tenant: tenantId })); } else { post(route('setup.create.store')); } } return (

{!isEdit && }

{isEdit ? 'Edit organisation details' : 'Tell us about your organisation'}

This is the name your clients will see.

{/* Org name */}

Organisation name * setData('name', e.target.value) } placeholder="e.g. Kilimo SACCO" 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 */}

Country * {errors.country && (

{errors.country}

)}

{/* Org type */}

Organisation type *

{ORG_TYPES.map( ({ value, label, description }) => ( ), )}

{errors.org_type && (

{errors.org_type}

)}

{isEdit ? ( ← Cancel ) : ( )}

); }