14 - Add empty state with bucket setup guidance

resources/js/pages/Scenarios/Show.tsx

@@ -1,5 +1,7 @@
 import { Head, Link, router } from '@inertiajs/react';
 import { useState } from 'react';
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
 
 interface Scenario {
     id: string;
@@ -89,6 +91,12 @@ export default function Show({ scenario, buckets, streams = { data: [] }, stream
     const [editingBucket, setEditingBucket] = useState<Bucket | null>(null);
     const [formData, setFormData] = useState({ ...defaultFormData });
 
+    const openCreateModal = () => {
+        setEditingBucket(null);
+        setFormData({ ...defaultFormData });
+        setIsModalOpen(true);
+    };
+
     const handleEdit = (bucket: Bucket) => {
         setEditingBucket(bucket);
         const bufferStr = bucket.buffer_multiplier.toString();
@@ -238,17 +246,45 @@ export default function Show({ scenario, buckets, streams = { data: [] }, stream
                         <div className="flex items-center justify-between">
                             <h2 className="text-xl font-semibold text-gray-900">Buckets</h2>
                             <button
-                                onClick={() => {
+                                onClick={openCreateModal}
-                                    setEditingBucket(null);
-                                    setFormData({ ...defaultFormData });
-                                    setIsModalOpen(true);
-                                }}
                                 className="rounded-md bg-blue-600 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-500"
                             >
                                 + Add Bucket
                             </button>
                         </div>
                         
+                        {buckets.data.length === 0 ? (
+                            <Card className="mx-auto max-w-lg text-center">
+                                <CardHeader>
+                                    <CardTitle>Set up your buckets</CardTitle>
+                                    <CardDescription>
+                                        Income flows through your pipeline into prioritized buckets.
+                                        Start by creating buckets for your spending categories.
+                                    </CardDescription>
+                                </CardHeader>
+                                <CardContent>
+                                    <div className="space-y-3 text-left">
+                                        <div className={`rounded-md border-l-4 ${bucketTypeBorderColor.need} bg-blue-50 px-4 py-3`}>
+                                            <p className="font-medium text-gray-900">Need</p>
+                                            <p className="text-sm text-gray-600">Essential expenses: rent, bills, groceries</p>
+                                        </div>
+                                        <div className={`rounded-md border-l-4 ${bucketTypeBorderColor.want} bg-green-50 px-4 py-3`}>
+                                            <p className="font-medium text-gray-900">Want</p>
+                                            <p className="text-sm text-gray-600">Discretionary spending: dining, hobbies, entertainment</p>
+                                        </div>
+                                        <div className={`rounded-md border-l-4 ${bucketTypeBorderColor.overflow} bg-amber-50 px-4 py-3`}>
+                                            <p className="font-medium text-gray-900">Overflow</p>
+                                            <p className="text-sm text-gray-600">Catches all remaining funds — one per scenario</p>
+                                        </div>
+                                    </div>
+                                </CardContent>
+                                <CardFooter className="justify-center">
+                                    <Button onClick={openCreateModal}>
+                                        Create Your First Bucket
+                                    </Button>
+                                </CardFooter>
+                            </Card>
+                        ) : (
                             <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
                                 {buckets.data.map((bucket) => (
                                     <div
@@ -349,6 +385,7 @@ export default function Show({ scenario, buckets, streams = { data: [] }, stream
                                     </div>
                                 ))}
                             </div>
+                        )}
                         
                         {/* Streams Section */}
                         <div className="mt-8">