lvl0/buckets
1
0
Fork 0
Code Issues 11 Pull requests 1 Projects Releases Packages Wiki Activity Actions

14 - Add empty state with bucket setup guidance

Browse source
This commit is contained in:
myrmidex 2026-03-20 13:08:19 +01:00
parent 66fb866f42
commit fab5a5f4be
1 changed files with 132 additions and 95 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
resources/js/pages/Scenarios/Show.tsx
View file

@ -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={() => {
setEditingBucket(null);
setFormData({ ...defaultFormData });
setIsModalOpen(true);
}}
onClick={openCreateModal}
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">