14 - Add empty state with bucket setup guidance
This commit is contained in:
parent
66fb866f42
commit
fab5a5f4be
1 changed files with 132 additions and 95 deletions
|
|
@ -1,5 +1,7 @@
|
||||||
import { Head, Link, router } from '@inertiajs/react';
|
import { Head, Link, router } from '@inertiajs/react';
|
||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
|
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@/components/ui/card';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
|
||||||
interface Scenario {
|
interface Scenario {
|
||||||
id: string;
|
id: string;
|
||||||
|
|
@ -89,6 +91,12 @@ export default function Show({ scenario, buckets, streams = { data: [] }, stream
|
||||||
const [editingBucket, setEditingBucket] = useState<Bucket | null>(null);
|
const [editingBucket, setEditingBucket] = useState<Bucket | null>(null);
|
||||||
const [formData, setFormData] = useState({ ...defaultFormData });
|
const [formData, setFormData] = useState({ ...defaultFormData });
|
||||||
|
|
||||||
|
const openCreateModal = () => {
|
||||||
|
setEditingBucket(null);
|
||||||
|
setFormData({ ...defaultFormData });
|
||||||
|
setIsModalOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
const handleEdit = (bucket: Bucket) => {
|
const handleEdit = (bucket: Bucket) => {
|
||||||
setEditingBucket(bucket);
|
setEditingBucket(bucket);
|
||||||
const bufferStr = bucket.buffer_multiplier.toString();
|
const bufferStr = bucket.buffer_multiplier.toString();
|
||||||
|
|
@ -238,117 +246,146 @@ export default function Show({ scenario, buckets, streams = { data: [] }, stream
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<h2 className="text-xl font-semibold text-gray-900">Buckets</h2>
|
<h2 className="text-xl font-semibold text-gray-900">Buckets</h2>
|
||||||
<button
|
<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"
|
className="rounded-md bg-blue-600 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-500"
|
||||||
>
|
>
|
||||||
+ Add Bucket
|
+ Add Bucket
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
{buckets.data.length === 0 ? (
|
||||||
{buckets.data.map((bucket) => (
|
<Card className="mx-auto max-w-lg text-center">
|
||||||
<div
|
<CardHeader>
|
||||||
key={bucket.id}
|
<CardTitle>Set up your buckets</CardTitle>
|
||||||
className={`rounded-lg bg-white p-6 shadow transition-shadow hover:shadow-lg border-l-4 ${bucketTypeBorderColor[bucket.type]}`}
|
<CardDescription>
|
||||||
>
|
Income flows through your pipeline into prioritized buckets.
|
||||||
<div className="flex items-start justify-between">
|
Start by creating buckets for your spending categories.
|
||||||
<div className="flex-1">
|
</CardDescription>
|
||||||
<h3 className="text-lg font-semibold text-gray-900">
|
</CardHeader>
|
||||||
{bucket.name}
|
<CardContent>
|
||||||
</h3>
|
<div className="space-y-3 text-left">
|
||||||
<p className="text-sm text-gray-600 mt-1">
|
<div className={`rounded-md border-l-4 ${bucketTypeBorderColor.need} bg-blue-50 px-4 py-3`}>
|
||||||
Priority {bucket.priority} • {bucket.type_label} • {bucket.allocation_type_label}
|
<p className="font-medium text-gray-900">Need</p>
|
||||||
</p>
|
<p className="text-sm text-gray-600">Essential expenses: rent, bills, groceries</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-1">
|
<div className={`rounded-md border-l-4 ${bucketTypeBorderColor.want} bg-green-50 px-4 py-3`}>
|
||||||
<button
|
<p className="font-medium text-gray-900">Want</p>
|
||||||
onClick={() => handlePriorityChange(bucket.id, 'up')}
|
<p className="text-sm text-gray-600">Discretionary spending: dining, hobbies, entertainment</p>
|
||||||
disabled={bucket.priority === 1}
|
</div>
|
||||||
className="p-1 rounded hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
|
<div className={`rounded-md border-l-4 ${bucketTypeBorderColor.overflow} bg-amber-50 px-4 py-3`}>
|
||||||
title="Move up in priority"
|
<p className="font-medium text-gray-900">Overflow</p>
|
||||||
>
|
<p className="text-sm text-gray-600">Catches all remaining funds — one per scenario</p>
|
||||||
<svg className="w-3 h-3 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => handlePriorityChange(bucket.id, 'down')}
|
|
||||||
disabled={bucket.priority === buckets.data.length}
|
|
||||||
className="p-1 rounded hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
|
|
||||||
title="Move down in priority"
|
|
||||||
>
|
|
||||||
<svg className="w-3 h-3 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
<span className="rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-800">
|
|
||||||
#{bucket.priority}
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</CardContent>
|
||||||
<div className="mt-4">
|
<CardFooter className="justify-center">
|
||||||
<div className="flex items-center justify-between">
|
<Button onClick={openCreateModal}>
|
||||||
<span className="text-sm text-gray-600">Current Balance</span>
|
Create Your First Bucket
|
||||||
<span className="text-lg font-semibold text-gray-900">
|
</Button>
|
||||||
${bucket.current_balance.toFixed(2)}
|
</CardFooter>
|
||||||
</span>
|
</Card>
|
||||||
|
) : (
|
||||||
|
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
||||||
|
{buckets.data.map((bucket) => (
|
||||||
|
<div
|
||||||
|
key={bucket.id}
|
||||||
|
className={`rounded-lg bg-white p-6 shadow transition-shadow hover:shadow-lg border-l-4 ${bucketTypeBorderColor[bucket.type]}`}
|
||||||
|
>
|
||||||
|
<div className="flex items-start justify-between">
|
||||||
|
<div className="flex-1">
|
||||||
|
<h3 className="text-lg font-semibold text-gray-900">
|
||||||
|
{bucket.name}
|
||||||
|
</h3>
|
||||||
|
<p className="text-sm text-gray-600 mt-1">
|
||||||
|
Priority {bucket.priority} • {bucket.type_label} • {bucket.allocation_type_label}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<button
|
||||||
|
onClick={() => handlePriorityChange(bucket.id, 'up')}
|
||||||
|
disabled={bucket.priority === 1}
|
||||||
|
className="p-1 rounded hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||||
|
title="Move up in priority"
|
||||||
|
>
|
||||||
|
<svg className="w-3 h-3 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => handlePriorityChange(bucket.id, 'down')}
|
||||||
|
disabled={bucket.priority === buckets.data.length}
|
||||||
|
className="p-1 rounded hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||||
|
title="Move down in priority"
|
||||||
|
>
|
||||||
|
<svg className="w-3 h-3 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<span className="rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-800">
|
||||||
|
#{bucket.priority}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="mt-2">
|
<div className="mt-4">
|
||||||
<span className="text-sm text-gray-600">
|
<div className="flex items-center justify-between">
|
||||||
Allocation: {formatAllocationValue(bucket)}
|
<span className="text-sm text-gray-600">Current Balance</span>
|
||||||
</span>
|
<span className="text-lg font-semibold text-gray-900">
|
||||||
{bucket.allocation_type === 'fixed_limit' && bucket.buffer_multiplier > 0 && (
|
${bucket.current_balance.toFixed(2)}
|
||||||
<span className="text-sm text-gray-500 ml-2">
|
|
||||||
({bucket.buffer_multiplier}x buffer = ${bucket.effective_capacity.toFixed(2)} effective)
|
|
||||||
</span>
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-2">
|
||||||
|
<span className="text-sm text-gray-600">
|
||||||
|
Allocation: {formatAllocationValue(bucket)}
|
||||||
|
</span>
|
||||||
|
{bucket.allocation_type === 'fixed_limit' && bucket.buffer_multiplier > 0 && (
|
||||||
|
<span className="text-sm text-gray-500 ml-2">
|
||||||
|
({bucket.buffer_multiplier}x buffer = ${bucket.effective_capacity.toFixed(2)} effective)
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{bucket.allocation_type === 'fixed_limit' && (
|
||||||
|
<div className="mt-3">
|
||||||
|
<div className="flex justify-between text-sm">
|
||||||
|
<span>Progress</span>
|
||||||
|
<span>
|
||||||
|
${bucket.current_balance.toFixed(2)} / ${bucket.effective_capacity.toFixed(2)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="mt-1 h-2 bg-gray-200 rounded-full">
|
||||||
|
<div
|
||||||
|
className="h-2 bg-blue-600 rounded-full transition-all"
|
||||||
|
style={{
|
||||||
|
width: `${bucket.effective_capacity ? Math.min((bucket.current_balance / bucket.effective_capacity) * 100, 100) : 0}%`
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{bucket.allocation_type === 'fixed_limit' && (
|
<div className="mt-4 flex gap-2">
|
||||||
<div className="mt-3">
|
|
||||||
<div className="flex justify-between text-sm">
|
|
||||||
<span>Progress</span>
|
|
||||||
<span>
|
|
||||||
${bucket.current_balance.toFixed(2)} / ${bucket.effective_capacity.toFixed(2)}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="mt-1 h-2 bg-gray-200 rounded-full">
|
|
||||||
<div
|
|
||||||
className="h-2 bg-blue-600 rounded-full transition-all"
|
|
||||||
style={{
|
|
||||||
width: `${bucket.effective_capacity ? Math.min((bucket.current_balance / bucket.effective_capacity) * 100, 100) : 0}%`
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mt-4 flex gap-2">
|
|
||||||
<button
|
|
||||||
onClick={() => handleEdit(bucket)}
|
|
||||||
className="flex-1 text-sm text-blue-600 hover:text-blue-500"
|
|
||||||
>
|
|
||||||
Edit
|
|
||||||
</button>
|
|
||||||
{bucket.type !== 'overflow' && (
|
|
||||||
<button
|
<button
|
||||||
onClick={() => handleDelete(bucket)}
|
onClick={() => handleEdit(bucket)}
|
||||||
className="flex-1 text-sm text-red-600 hover:text-red-500"
|
className="flex-1 text-sm text-blue-600 hover:text-blue-500"
|
||||||
>
|
>
|
||||||
Delete
|
Edit
|
||||||
</button>
|
</button>
|
||||||
)}
|
{bucket.type !== 'overflow' && (
|
||||||
|
<button
|
||||||
|
onClick={() => handleDelete(bucket)}
|
||||||
|
className="flex-1 text-sm text-red-600 hover:text-red-500"
|
||||||
|
>
|
||||||
|
Delete
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
))}
|
||||||
))}
|
</div>
|
||||||
</div>
|
)}
|
||||||
|
|
||||||
{/* Streams Section */}
|
{/* Streams Section */}
|
||||||
<div className="mt-8">
|
<div className="mt-8">
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue