import { Head, router } from '@inertiajs/react'; import React, { useState } from 'react'; interface Scenario { id: number; name: string; created_at: string; updated_at: string; } interface Props { scenarios: Scenario[]; } export default function Index({ scenarios }: Props) { const [showCreateForm, setShowCreateForm] = useState(false); const [name, setName] = useState(''); const [errors, setErrors] = useState<{ name?: string }>({}); const handleCreateScenario = (e: React.FormEvent) => { e.preventDefault(); router.post('/scenarios', { name }, { onSuccess: () => { setShowCreateForm(false); setName(''); setErrors({}); }, onError: (errors) => { setErrors(errors); } }); }; const handleCancel = () => { setShowCreateForm(false); setName(''); setErrors({}); }; return ( <>

Budget Scenarios

Manage your budget projections with water-themed scenarios

{/* Create Scenario Form */} {showCreateForm && (

Create New Scenario

setName(e.target.value)} className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 text-sm text-gray-900 focus:border-blue-500 focus:outline-none focus:ring-blue-500" placeholder="e.g., 2025 Budget" /> {errors.name && (

{errors.name}

)}
)} {/* Create Button */} {!showCreateForm && (
)} {/* Scenarios List */} {scenarios.length === 0 ? (

No scenarios yet

Create your first budget scenario to get started

) : (
{scenarios.map((scenario) => (
router.visit(`/scenarios/${scenario.id}`)} className="cursor-pointer rounded-lg bg-white p-6 shadow transition-shadow hover:shadow-lg" >

{scenario.name}

Created {new Date(scenario.created_at).toLocaleDateString()}

View Details
))}
)}
); }