151 lines
7.5 KiB
TypeScript
151 lines
7.5 KiB
TypeScript
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 (
|
|
<>
|
|
<Head title="Budget Scenarios" />
|
|
|
|
<div className="min-h-screen bg-gray-50 py-8">
|
|
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
|
<div className="mb-8">
|
|
<h1 className="text-3xl font-bold text-gray-900">Budget Scenarios</h1>
|
|
<p className="mt-2 text-gray-600">
|
|
Manage your budget projections with water-themed scenarios
|
|
</p>
|
|
</div>
|
|
|
|
{/* Create Scenario Form */}
|
|
{showCreateForm && (
|
|
<div className="mb-8 rounded-lg bg-white p-6 shadow" data-testid="scenario-form">
|
|
<h2 className="text-xl font-semibold text-gray-900 mb-4">Create New Scenario</h2>
|
|
<form onSubmit={handleCreateScenario}>
|
|
<div className="mb-4">
|
|
<label htmlFor="name" className="block text-sm font-medium text-gray-700">
|
|
Scenario Name
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="name"
|
|
data-testid="scenario-name"
|
|
value={name}
|
|
onChange={(e) => setName(e.target.value)}
|
|
className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-blue-500"
|
|
placeholder="e.g., 2025 Budget"
|
|
/>
|
|
{errors.name && (
|
|
<p className="mt-1 text-sm text-red-600">{errors.name}</p>
|
|
)}
|
|
</div>
|
|
<div className="flex gap-3">
|
|
<button
|
|
type="submit"
|
|
data-testid="save-scenario"
|
|
className="rounded-md bg-blue-600 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
|
|
>
|
|
Create Scenario
|
|
</button>
|
|
<button
|
|
type="button"
|
|
data-testid="cancel-scenario"
|
|
onClick={handleCancel}
|
|
className="rounded-md border border-gray-300 px-4 py-2 text-sm font-semibold text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2"
|
|
>
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
)}
|
|
|
|
{/* Create Button */}
|
|
{!showCreateForm && (
|
|
<div className="mb-8">
|
|
<button
|
|
onClick={() => setShowCreateForm(true)}
|
|
data-testid="create-scenario-button"
|
|
className="rounded-md bg-blue-600 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
|
|
>
|
|
+ New Scenario
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{/* Scenarios List */}
|
|
{scenarios.length === 0 ? (
|
|
<div className="rounded-lg bg-white p-12 text-center shadow">
|
|
<div className="mx-auto h-12 w-12 text-gray-400">
|
|
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
|
</svg>
|
|
</div>
|
|
<h3 className="mt-4 text-lg font-semibold text-gray-900">No scenarios yet</h3>
|
|
<p className="mt-2 text-gray-600">
|
|
Create your first budget scenario to get started
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
|
{scenarios.map((scenario) => (
|
|
<div
|
|
key={scenario.id}
|
|
onClick={() => router.visit(`/scenarios/${scenario.id}`)}
|
|
className="cursor-pointer rounded-lg bg-white p-6 shadow transition-shadow hover:shadow-lg"
|
|
>
|
|
<h3 className="text-lg font-semibold text-gray-900">
|
|
{scenario.name}
|
|
</h3>
|
|
<p className="mt-2 text-sm text-gray-600">
|
|
Created {new Date(scenario.created_at).toLocaleDateString()}
|
|
</p>
|
|
<div className="mt-4 flex items-center text-sm text-blue-600">
|
|
View Details
|
|
<svg className="ml-2 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|