import { Head, Link, router } from '@inertiajs/react'; import { useState } from 'react'; interface Scenario { id: number; name: string; created_at: string; updated_at: string; } interface Bucket { id: number; name: string; priority: number; sort_order: number; allocation_type: string; allocation_value: number | null; allocation_type_label: string; formatted_allocation_value: string; current_balance: number; has_available_space: boolean; available_space: number; } interface Props { scenario: Scenario; buckets: Bucket[]; } export default function Show({ scenario, buckets }: Props) { const [isModalOpen, setIsModalOpen] = useState(false); const [isSubmitting, setIsSubmitting] = useState(false); const [formData, setFormData] = useState({ name: '', allocation_type: 'fixed_limit', allocation_value: '' }); const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); setIsSubmitting(true); try { const response = await fetch(`/scenarios/${scenario.id}/buckets`, { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '', }, body: JSON.stringify({ name: formData.name, allocation_type: formData.allocation_type, allocation_value: formData.allocation_value ? parseFloat(formData.allocation_value) : null }), }); if (response.ok) { setIsModalOpen(false); setFormData({ name: '', allocation_type: 'fixed_limit', allocation_value: '' }); router.reload({ only: ['buckets'] }); } else { const errorData = await response.json(); console.error('Failed to create bucket:', errorData); } } catch (error) { console.error('Error creating bucket:', error); } finally { setIsSubmitting(false); } }; return ( <>
{/* Header */}
Back to Scenarios

{scenario.name}

Water flows through the pipeline into prioritized buckets

{/* Bucket Dashboard */}

Buckets

{buckets.map((bucket) => (

{bucket.name}

Priority {bucket.priority} • {bucket.allocation_type_label}

#{bucket.priority}
Current Balance ${bucket.current_balance.toFixed(2)}
Allocation: {bucket.formatted_allocation_value}
{bucket.allocation_type === 'fixed_limit' && (
Progress ${bucket.current_balance.toFixed(2)} / ${Number(bucket.allocation_value)?.toFixed(2)}
)}
))} {/* Virtual Overflow Bucket (placeholder for now) */}

Overflow

Unallocated funds

$0.00

{/* Placeholder for future features */}

Coming Next: Streams & Timeline

Add income and expense streams, then calculate projections to see your money flow through these buckets over time.

{/* Add Bucket Modal */} {isModalOpen && (

Add New Bucket

setFormData({ ...formData, name: e.target.value })} className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-gray-900" placeholder="e.g., Travel Fund" required />
{formData.allocation_type !== 'unlimited' && (
setFormData({ ...formData, allocation_value: e.target.value })} className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-gray-900" placeholder={formData.allocation_type === 'percentage' ? '25' : '1000'} step={formData.allocation_type === 'percentage' ? '0.01' : '0.01'} min={formData.allocation_type === 'percentage' ? '0.01' : '0'} max={formData.allocation_type === 'percentage' ? '100' : undefined} required />
)}
)} ); }