2 - Add DigitalProgressBar and extract BucketCard component
This commit is contained in:
parent
ced02a2ab2
commit
4006c7d2f3
4 changed files with 333 additions and 201 deletions
51
resources/js/components/BucketCard.tsx
Normal file
51
resources/js/components/BucketCard.tsx
Normal file
|
|
@ -0,0 +1,51 @@
|
||||||
|
import DigitalProgressBar from '@/components/DigitalProgressBar';
|
||||||
|
import { type Bucket } from '@/types';
|
||||||
|
|
||||||
|
const centsToDollars = (cents: number): number => cents / 100;
|
||||||
|
const basisPointsToPercent = (bp: number): number => bp / 100;
|
||||||
|
const formatDollars = (cents: number): string => `$${centsToDollars(cents).toFixed(0)}`;
|
||||||
|
|
||||||
|
export default function BucketCard({ bucket }: { bucket: Bucket }) {
|
||||||
|
const hasFiniteCapacity = bucket.allocation_type === 'fixed_limit' && bucket.effective_capacity !== null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="divide-y-4 divide-red-500">
|
||||||
|
{/* Name */}
|
||||||
|
<div className="px-3 py-1.5">
|
||||||
|
<span className="text-red-500 font-mono font-bold uppercase tracking-wider text-sm truncate block">
|
||||||
|
{bucket.name}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Progress bars or text — fixed height */}
|
||||||
|
<div className="px-3 py-3 h-14 flex items-center">
|
||||||
|
{hasFiniteCapacity ? (
|
||||||
|
<div className="w-full">
|
||||||
|
<DigitalProgressBar
|
||||||
|
current={bucket.current_balance}
|
||||||
|
capacity={bucket.effective_capacity!}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="w-full text-center">
|
||||||
|
<span className="font-mono text-red-500/30 text-xs uppercase tracking-widest">
|
||||||
|
{bucket.allocation_type === 'unlimited' ? '~ ALL REMAINING ~' : `~ ${basisPointsToPercent(bucket.allocation_value ?? 0).toFixed(2)}% ~`}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Amount */}
|
||||||
|
<div className="px-3 py-1.5 text-center">
|
||||||
|
<span className="font-digital text-red-500 text-sm">
|
||||||
|
{formatDollars(bucket.current_balance)}
|
||||||
|
</span>
|
||||||
|
{hasFiniteCapacity && (
|
||||||
|
<span className="font-digital text-red-500/50 text-sm">
|
||||||
|
{' '}/ {formatDollars(bucket.effective_capacity!)}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
50
resources/js/components/DigitalProgressBar.tsx
Normal file
50
resources/js/components/DigitalProgressBar.tsx
Normal file
|
|
@ -0,0 +1,50 @@
|
||||||
|
interface DigitalProgressBarProps {
|
||||||
|
current: number;
|
||||||
|
capacity: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
const BAR_COUNT = 20;
|
||||||
|
|
||||||
|
function getGlow(index: number): string {
|
||||||
|
if (index < 10) return '0 0 8px rgba(239, 68, 68, 0.6)';
|
||||||
|
if (index < 18) return '0 0 8px rgba(249, 115, 22, 0.6)';
|
||||||
|
return '0 0 8px rgba(34, 197, 94, 0.6)';
|
||||||
|
}
|
||||||
|
|
||||||
|
function getBarColor(index: number): string {
|
||||||
|
if (index < 10) return 'bg-red-500';
|
||||||
|
if (index < 18) return 'bg-orange-500';
|
||||||
|
return 'bg-green-500';
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function DigitalProgressBar({ current, capacity }: DigitalProgressBarProps) {
|
||||||
|
const filledBars = capacity > 0
|
||||||
|
? Math.min(Math.round((current / capacity) * BAR_COUNT), BAR_COUNT)
|
||||||
|
: 0;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'grid',
|
||||||
|
gridTemplateColumns: `repeat(${BAR_COUNT}, 1fr)`,
|
||||||
|
gap: '10px',
|
||||||
|
height: '2rem',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{Array.from({ length: BAR_COUNT }, (_, i) => {
|
||||||
|
const filled = i < filledBars;
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={i}
|
||||||
|
style={{
|
||||||
|
borderRadius: '3px',
|
||||||
|
transition: 'background-color 300ms, box-shadow 300ms',
|
||||||
|
boxShadow: filled ? getGlow(i) : 'none',
|
||||||
|
}}
|
||||||
|
className={filled ? getBarColor(i) : 'bg-red-500/10'}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -1,29 +1,12 @@
|
||||||
import { Head, router } from '@inertiajs/react';
|
import { Head, router } from '@inertiajs/react';
|
||||||
import { Settings } from 'lucide-react';
|
import { Settings } from 'lucide-react';
|
||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
|
import BucketCard from '@/components/BucketCard';
|
||||||
import InlineEditInput from '@/components/InlineEditInput';
|
import InlineEditInput from '@/components/InlineEditInput';
|
||||||
import InlineEditSelect from '@/components/InlineEditSelect';
|
import InlineEditSelect from '@/components/InlineEditSelect';
|
||||||
import SettingsPanel from '@/components/SettingsPanel';
|
import SettingsPanel from '@/components/SettingsPanel';
|
||||||
import { csrfToken } from '@/lib/utils';
|
import { csrfToken } from '@/lib/utils';
|
||||||
import { type Scenario } from '@/types';
|
import { type Bucket, type Scenario } from '@/types';
|
||||||
|
|
||||||
interface Bucket {
|
|
||||||
id: string;
|
|
||||||
name: string;
|
|
||||||
type: 'need' | 'want' | 'overflow';
|
|
||||||
type_label: string;
|
|
||||||
priority: number;
|
|
||||||
sort_order: number;
|
|
||||||
allocation_type: string;
|
|
||||||
allocation_value: number | null;
|
|
||||||
allocation_type_label: string;
|
|
||||||
buffer_multiplier: number;
|
|
||||||
effective_capacity: number | null;
|
|
||||||
starting_amount: number;
|
|
||||||
current_balance: number;
|
|
||||||
has_available_space: boolean;
|
|
||||||
available_space: number | null;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
scenario: Scenario;
|
scenario: Scenario;
|
||||||
|
|
@ -45,13 +28,6 @@ const dollarsToCents = (dollars: number): number => Math.round(dollars * 100);
|
||||||
const basisPointsToPercent = (bp: number): number => bp / 100;
|
const basisPointsToPercent = (bp: number): number => bp / 100;
|
||||||
const percentToBasisPoints = (pct: number): number => Math.round(pct * 100);
|
const percentToBasisPoints = (pct: number): number => Math.round(pct * 100);
|
||||||
|
|
||||||
const formatAllocationValue = (bucket: Bucket): string => {
|
|
||||||
if (bucket.allocation_type === 'unlimited') return 'ALL REMAINING';
|
|
||||||
if (bucket.allocation_value === null) return '--';
|
|
||||||
if (bucket.allocation_type === 'percentage') return `${basisPointsToPercent(bucket.allocation_value).toFixed(2)}%`;
|
|
||||||
return `$${centsToDollars(bucket.allocation_value).toFixed(2)}`;
|
|
||||||
};
|
|
||||||
|
|
||||||
const patchBucket = async (bucketId: string, data: Record<string, unknown>): Promise<void> => {
|
const patchBucket = async (bucketId: string, data: Record<string, unknown>): Promise<void> => {
|
||||||
const response = await fetch(`/buckets/${bucketId}`, {
|
const response = await fetch(`/buckets/${bucketId}`, {
|
||||||
method: 'PATCH',
|
method: 'PATCH',
|
||||||
|
|
@ -79,14 +55,15 @@ const defaultFormData = {
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function Show({ scenario, buckets }: Props) {
|
export default function Show({ scenario, buckets }: Props) {
|
||||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
|
||||||
|
const [editingBucket, setEditingBucket] = useState<Bucket | null>(null);
|
||||||
const [isSettingsOpen, setIsSettingsOpen] = useState(false);
|
const [isSettingsOpen, setIsSettingsOpen] = useState(false);
|
||||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||||
const [formData, setFormData] = useState({ ...defaultFormData });
|
const [formData, setFormData] = useState({ ...defaultFormData });
|
||||||
|
|
||||||
const openCreateModal = () => {
|
const openCreateModal = () => {
|
||||||
setFormData({ ...defaultFormData });
|
setFormData({ ...defaultFormData });
|
||||||
setIsModalOpen(true);
|
setIsCreateModalOpen(true);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleDelete = async (bucket: Bucket) => {
|
const handleDelete = async (bucket: Bucket) => {
|
||||||
|
|
@ -99,6 +76,7 @@ export default function Show({ scenario, buckets }: Props) {
|
||||||
});
|
});
|
||||||
|
|
||||||
if (response.ok) {
|
if (response.ok) {
|
||||||
|
setEditingBucket(null);
|
||||||
router.reload({ only: ['buckets'] });
|
router.reload({ only: ['buckets'] });
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
|
|
@ -131,7 +109,7 @@ export default function Show({ scenario, buckets }: Props) {
|
||||||
});
|
});
|
||||||
|
|
||||||
if (response.ok) {
|
if (response.ok) {
|
||||||
setIsModalOpen(false);
|
setIsCreateModalOpen(false);
|
||||||
setFormData({ ...defaultFormData });
|
setFormData({ ...defaultFormData });
|
||||||
router.reload({ only: ['buckets'] });
|
router.reload({ only: ['buckets'] });
|
||||||
} else {
|
} else {
|
||||||
|
|
@ -186,190 +164,76 @@ export default function Show({ scenario, buckets }: Props) {
|
||||||
<SettingsPanel onOpenChange={setIsSettingsOpen} />
|
<SettingsPanel onOpenChange={setIsSettingsOpen} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Buckets */}
|
{/* Two-column layout */}
|
||||||
<div className="space-y-6">
|
<div className="grid grid-cols-2 gap-8">
|
||||||
<div className="flex items-center justify-end">
|
{/* Left: Buckets */}
|
||||||
<button
|
<div className="space-y-4">
|
||||||
onClick={openCreateModal}
|
<div className="flex items-center justify-between">
|
||||||
className="border-2 border-red-500 bg-black px-4 py-2 text-sm font-mono font-bold uppercase tracking-wider text-red-500 hover:bg-red-500 hover:text-black transition-colors"
|
<h2 className="text-sm font-mono font-bold tracking-wider uppercase text-red-500/60">
|
||||||
>
|
BUCKETS
|
||||||
+ ADD BUCKET
|
</h2>
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{buckets.data.length === 0 ? (
|
|
||||||
<div className="border-4 border-red-500 bg-black p-8 text-center glow-red">
|
|
||||||
<p className="text-red-500 font-mono uppercase tracking-wider mb-4">
|
|
||||||
NO BUCKETS CONFIGURED
|
|
||||||
</p>
|
|
||||||
<p className="text-red-500/60 font-mono text-sm mb-6">
|
|
||||||
Income flows through your pipeline into prioritized buckets.
|
|
||||||
</p>
|
|
||||||
<button
|
<button
|
||||||
onClick={openCreateModal}
|
onClick={openCreateModal}
|
||||||
className="border-2 border-red-500 bg-black px-6 py-3 font-mono font-bold uppercase tracking-wider text-red-500 hover:bg-red-500 hover:text-black transition-colors"
|
className="border-2 border-red-500 bg-black px-3 py-1 text-xs font-mono font-bold uppercase tracking-wider text-red-500 hover:bg-red-500 hover:text-black transition-colors"
|
||||||
>
|
>
|
||||||
CREATE FIRST BUCKET
|
+ ADD
|
||||||
</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) => (
|
<div className="border-4 border-red-500 bg-black p-8 text-center glow-red">
|
||||||
<div
|
<p className="text-red-500 font-mono uppercase tracking-wider mb-4">
|
||||||
key={bucket.id}
|
NO BUCKETS CONFIGURED
|
||||||
className="border-4 border-red-500 bg-black p-6 glow-red transition-all"
|
</p>
|
||||||
|
<p className="text-red-500/60 font-mono text-sm mb-6">
|
||||||
|
Income flows through your pipeline into prioritized buckets.
|
||||||
|
</p>
|
||||||
|
<button
|
||||||
|
onClick={openCreateModal}
|
||||||
|
className="border-2 border-red-500 bg-black px-6 py-3 font-mono font-bold uppercase tracking-wider text-red-500 hover:bg-red-500 hover:text-black transition-colors"
|
||||||
>
|
>
|
||||||
{/* Header: name + priority */}
|
CREATE FIRST BUCKET
|
||||||
<div className="flex items-start justify-between mb-4">
|
</button>
|
||||||
<div className="flex-1">
|
</div>
|
||||||
<h3 className="text-red-500 font-mono font-bold uppercase tracking-wider">
|
) : (
|
||||||
<InlineEditInput
|
<div className="space-y-6 px-4">
|
||||||
type="text"
|
{buckets.data.map((bucket) => (
|
||||||
value={bucket.name}
|
<button
|
||||||
onSave={(val) => patchBucket(bucket.id, { name: val })}
|
key={bucket.id}
|
||||||
/>
|
type="button"
|
||||||
</h3>
|
onClick={() => setEditingBucket(bucket)}
|
||||||
<p className="text-red-500/60 text-xs font-mono mt-1 uppercase">
|
className="w-full border-4 border-red-500 bg-black glow-red transition-all text-left hover:border-red-400 cursor-pointer"
|
||||||
<InlineEditSelect
|
>
|
||||||
value={bucket.type}
|
<BucketCard bucket={bucket} />
|
||||||
options={bucketTypeOptions}
|
</button>
|
||||||
onSave={(val) => patchBucket(bucket.id, { type: val })}
|
))}
|
||||||
displayLabel={bucket.type_label}
|
</div>
|
||||||
disabled={bucket.type === 'overflow'}
|
)}
|
||||||
/>
|
</div>
|
||||||
{' | '}
|
|
||||||
<InlineEditSelect
|
|
||||||
value={bucket.allocation_type}
|
|
||||||
options={allocationTypeOptions}
|
|
||||||
onSave={(val) => patchBucket(bucket.id, { allocation_type: val, allocation_value: null })}
|
|
||||||
displayLabel={bucket.allocation_type_label}
|
|
||||||
disabled={bucket.type === 'overflow'}
|
|
||||||
/>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-1">
|
|
||||||
<button
|
|
||||||
onClick={() => handlePriorityChange(bucket.id, 'up')}
|
|
||||||
disabled={bucket.priority === 1}
|
|
||||||
className="p-1 text-red-500 hover:text-red-300 disabled:opacity-30 disabled:cursor-not-allowed"
|
|
||||||
title="Move up"
|
|
||||||
>
|
|
||||||
<svg className="w-3 h-3" 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>
|
|
||||||
<span className="font-digital text-red-500 text-sm">
|
|
||||||
#{bucket.priority}
|
|
||||||
</span>
|
|
||||||
<button
|
|
||||||
onClick={() => handlePriorityChange(bucket.id, 'down')}
|
|
||||||
disabled={bucket.priority === buckets.data.length}
|
|
||||||
className="p-1 text-red-500 hover:text-red-300 disabled:opacity-30 disabled:cursor-not-allowed"
|
|
||||||
title="Move down"
|
|
||||||
>
|
|
||||||
<svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Filling */}
|
{/* Right: Income */}
|
||||||
<div className="flex items-center justify-between mb-2">
|
<div>
|
||||||
<span className="text-red-500/60 text-xs font-mono uppercase">Current</span>
|
<div className="flex items-center justify-center border-b border-red-500/40 pb-2 mb-6">
|
||||||
<InlineEditInput
|
<h2 className="text-sm font-mono font-bold tracking-wider uppercase text-red-500/60">
|
||||||
value={centsToDollars(bucket.starting_amount)}
|
INCOME
|
||||||
onSave={(val) => patchBucket(bucket.id, { starting_amount: dollarsToCents(val) })}
|
</h2>
|
||||||
formatDisplay={(v) => `$${v.toFixed(2)}`}
|
|
||||||
min={0}
|
|
||||||
step="0.01"
|
|
||||||
className="font-digital text-red-500"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Allocation */}
|
|
||||||
<div className="flex items-center justify-between mb-2">
|
|
||||||
<span className="text-red-500/60 text-xs font-mono uppercase">Allocation</span>
|
|
||||||
<span className="font-digital text-red-500">
|
|
||||||
{bucket.allocation_type === 'fixed_limit' ? (
|
|
||||||
<InlineEditInput
|
|
||||||
value={centsToDollars(bucket.allocation_value ?? 0)}
|
|
||||||
onSave={(val) => patchBucket(bucket.id, { allocation_value: dollarsToCents(val) })}
|
|
||||||
formatDisplay={(v) => `$${v.toFixed(2)}`}
|
|
||||||
min={0}
|
|
||||||
step="0.01"
|
|
||||||
/>
|
|
||||||
) : bucket.allocation_type === 'percentage' ? (
|
|
||||||
<InlineEditInput
|
|
||||||
value={basisPointsToPercent(bucket.allocation_value ?? 0)}
|
|
||||||
onSave={(val) => patchBucket(bucket.id, { allocation_value: percentToBasisPoints(val) })}
|
|
||||||
formatDisplay={(v) => `${v.toFixed(2)}%`}
|
|
||||||
min={0}
|
|
||||||
step="0.01"
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
formatAllocationValue(bucket)
|
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Buffer */}
|
|
||||||
{bucket.allocation_type === 'fixed_limit' && (
|
|
||||||
<div className="flex items-center justify-between mb-4">
|
|
||||||
<span className="text-red-500/60 text-xs font-mono uppercase">Buffer</span>
|
|
||||||
<span className="font-digital text-red-500 text-sm">
|
|
||||||
<InlineEditInput
|
|
||||||
value={bucket.buffer_multiplier}
|
|
||||||
onSave={(val) => patchBucket(bucket.id, { buffer_multiplier: val })}
|
|
||||||
formatDisplay={(v) => v > 0 ? `${v}x` : 'NONE'}
|
|
||||||
min={0}
|
|
||||||
step="0.01"
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Progress bar placeholder — will be replaced with DigitalProgressBar */}
|
|
||||||
{bucket.allocation_type === 'fixed_limit' && bucket.effective_capacity !== null && (
|
|
||||||
<div className="mt-4 border-2 border-red-500/40 p-2">
|
|
||||||
<div className="flex justify-between text-xs font-mono text-red-500/60 mb-1">
|
|
||||||
<span>PROGRESS</span>
|
|
||||||
<span className="font-digital text-red-500">
|
|
||||||
${centsToDollars(bucket.current_balance).toFixed(2)} / ${centsToDollars(bucket.effective_capacity).toFixed(2)}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="h-2 bg-red-500/10">
|
|
||||||
<div
|
|
||||||
className="h-2 bg-red-500 transition-all"
|
|
||||||
style={{
|
|
||||||
width: `${Math.min((bucket.current_balance / bucket.effective_capacity) * 100, 100)}%`
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Delete */}
|
|
||||||
{bucket.type !== 'overflow' && (
|
|
||||||
<div className="mt-4 pt-4 border-t border-red-500/20">
|
|
||||||
<button
|
|
||||||
onClick={() => handleDelete(bucket)}
|
|
||||||
className="text-red-500/40 text-xs font-mono uppercase hover:text-red-500 transition-colors"
|
|
||||||
>
|
|
||||||
DELETE
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
<div className="text-center">
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
className="w-48 bg-black border-2 border-red-500/50 px-4 py-2 text-center font-digital text-2xl text-red-500 focus:border-red-500 focus:outline-none"
|
||||||
|
placeholder="0"
|
||||||
|
min="0"
|
||||||
|
step="0.01"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Create Bucket Modal */}
|
{/* Create Bucket Modal */}
|
||||||
{isModalOpen && (
|
{isCreateModalOpen && (
|
||||||
<div className="fixed inset-0 bg-black/80 overflow-y-auto h-full w-full z-50 flex items-start justify-center pt-20">
|
<div className="fixed inset-0 bg-black/80 overflow-y-auto h-full w-full z-50 flex items-start justify-center pt-20">
|
||||||
<div className="border-4 border-red-500 bg-black p-8 w-96 glow-red">
|
<div className="border-4 border-red-500 bg-black p-8 w-96 glow-red">
|
||||||
<h3 className="text-lg font-mono font-bold uppercase tracking-wider text-red-500 mb-6">
|
<h3 className="text-lg font-mono font-bold uppercase tracking-wider text-red-500 mb-6">
|
||||||
|
|
@ -484,7 +348,7 @@ export default function Show({ scenario, buckets }: Props) {
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setIsModalOpen(false);
|
setIsCreateModalOpen(false);
|
||||||
setFormData({ ...defaultFormData });
|
setFormData({ ...defaultFormData });
|
||||||
}}
|
}}
|
||||||
className="flex-1 border-2 border-red-500/50 bg-black px-4 py-2 text-sm font-mono uppercase text-red-500/60 hover:border-red-500 hover:text-red-500 transition-colors"
|
className="flex-1 border-2 border-red-500/50 bg-black px-4 py-2 text-sm font-mono uppercase text-red-500/60 hover:border-red-500 hover:text-red-500 transition-colors"
|
||||||
|
|
@ -504,6 +368,155 @@ export default function Show({ scenario, buckets }: Props) {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{/* Edit Bucket Modal */}
|
||||||
|
{editingBucket && (
|
||||||
|
<div
|
||||||
|
className="fixed inset-0 bg-black/80 overflow-y-auto h-full w-full z-50 flex items-start justify-center pt-20"
|
||||||
|
onClick={(e) => { if (e.target === e.currentTarget) setEditingBucket(null); }}
|
||||||
|
>
|
||||||
|
<div className="border-4 border-red-500 bg-black p-8 w-96 glow-red">
|
||||||
|
<div className="flex items-center justify-between mb-6">
|
||||||
|
<h3 className="text-lg font-mono font-bold uppercase tracking-wider text-red-500">
|
||||||
|
EDIT BUCKET
|
||||||
|
</h3>
|
||||||
|
<button
|
||||||
|
onClick={() => setEditingBucket(null)}
|
||||||
|
className="text-red-500/60 hover:text-red-500 font-mono text-sm transition-colors"
|
||||||
|
>
|
||||||
|
CLOSE
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
{/* Name */}
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<span className="text-xs font-mono uppercase text-red-500/60">NAME</span>
|
||||||
|
<InlineEditInput
|
||||||
|
type="text"
|
||||||
|
value={editingBucket.name}
|
||||||
|
onSave={(val) => patchBucket(editingBucket.id, { name: val })}
|
||||||
|
className="text-red-500 font-mono font-bold"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Type */}
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<span className="text-xs font-mono uppercase text-red-500/60">TYPE</span>
|
||||||
|
<InlineEditSelect
|
||||||
|
value={editingBucket.type}
|
||||||
|
options={bucketTypeOptions}
|
||||||
|
onSave={(val) => patchBucket(editingBucket.id, { type: val })}
|
||||||
|
displayLabel={editingBucket.type_label}
|
||||||
|
disabled={editingBucket.type === 'overflow'}
|
||||||
|
className="text-red-500 font-mono"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Allocation Type */}
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<span className="text-xs font-mono uppercase text-red-500/60">ALLOCATION</span>
|
||||||
|
<InlineEditSelect
|
||||||
|
value={editingBucket.allocation_type}
|
||||||
|
options={allocationTypeOptions}
|
||||||
|
onSave={(val) => patchBucket(editingBucket.id, { allocation_type: val, allocation_value: null })}
|
||||||
|
displayLabel={editingBucket.allocation_type_label}
|
||||||
|
disabled={editingBucket.type === 'overflow'}
|
||||||
|
className="text-red-500 font-mono"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Allocation Value */}
|
||||||
|
{editingBucket.allocation_type !== 'unlimited' && (
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<span className="text-xs font-mono uppercase text-red-500/60">VALUE</span>
|
||||||
|
<span className="font-digital text-red-500">
|
||||||
|
{editingBucket.allocation_type === 'fixed_limit' ? (
|
||||||
|
<InlineEditInput
|
||||||
|
value={centsToDollars(editingBucket.allocation_value ?? 0)}
|
||||||
|
onSave={(val) => patchBucket(editingBucket.id, { allocation_value: dollarsToCents(val) })}
|
||||||
|
formatDisplay={(v) => `$${v.toFixed(2)}`}
|
||||||
|
min={0}
|
||||||
|
step="0.01"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<InlineEditInput
|
||||||
|
value={basisPointsToPercent(editingBucket.allocation_value ?? 0)}
|
||||||
|
onSave={(val) => patchBucket(editingBucket.id, { allocation_value: percentToBasisPoints(val) })}
|
||||||
|
formatDisplay={(v) => `${v.toFixed(2)}%`}
|
||||||
|
min={0}
|
||||||
|
step="0.01"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Current Balance */}
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<span className="text-xs font-mono uppercase text-red-500/60">CURRENT</span>
|
||||||
|
<InlineEditInput
|
||||||
|
value={centsToDollars(editingBucket.starting_amount)}
|
||||||
|
onSave={(val) => patchBucket(editingBucket.id, { starting_amount: dollarsToCents(val) })}
|
||||||
|
formatDisplay={(v) => `$${v.toFixed(2)}`}
|
||||||
|
min={0}
|
||||||
|
step="0.01"
|
||||||
|
className="font-digital text-red-500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Buffer */}
|
||||||
|
{editingBucket.allocation_type === 'fixed_limit' && (
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<span className="text-xs font-mono uppercase text-red-500/60">BUFFER</span>
|
||||||
|
<InlineEditInput
|
||||||
|
value={editingBucket.buffer_multiplier}
|
||||||
|
onSave={(val) => patchBucket(editingBucket.id, { buffer_multiplier: val })}
|
||||||
|
formatDisplay={(v) => v > 0 ? `${v}x` : 'NONE'}
|
||||||
|
min={0}
|
||||||
|
step="0.01"
|
||||||
|
className="font-digital text-red-500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Priority */}
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<span className="text-xs font-mono uppercase text-red-500/60">PRIORITY</span>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<button
|
||||||
|
onClick={() => handlePriorityChange(editingBucket.id, 'up')}
|
||||||
|
disabled={editingBucket.priority === 1}
|
||||||
|
className="px-2 py-1 border border-red-500/50 text-red-500 font-mono text-xs hover:bg-red-500/20 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
|
||||||
|
>
|
||||||
|
UP
|
||||||
|
</button>
|
||||||
|
<span className="font-digital text-red-500">#{editingBucket.priority}</span>
|
||||||
|
<button
|
||||||
|
onClick={() => handlePriorityChange(editingBucket.id, 'down')}
|
||||||
|
disabled={editingBucket.priority === buckets.data.length}
|
||||||
|
className="px-2 py-1 border border-red-500/50 text-red-500 font-mono text-xs hover:bg-red-500/20 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
|
||||||
|
>
|
||||||
|
DOWN
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Delete */}
|
||||||
|
{editingBucket.type !== 'overflow' && (
|
||||||
|
<div className="pt-4 border-t border-red-500/20">
|
||||||
|
<button
|
||||||
|
onClick={() => handleDelete(editingBucket)}
|
||||||
|
className="text-red-500/40 text-xs font-mono uppercase hover:text-red-500 transition-colors"
|
||||||
|
>
|
||||||
|
DELETE BUCKET
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
18
resources/js/types/index.d.ts
vendored
18
resources/js/types/index.d.ts
vendored
|
|
@ -22,6 +22,24 @@ export interface NavItem {
|
||||||
isActive?: boolean;
|
isActive?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export interface Bucket {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
type: 'need' | 'want' | 'overflow';
|
||||||
|
type_label: string;
|
||||||
|
priority: number;
|
||||||
|
sort_order: number;
|
||||||
|
allocation_type: string;
|
||||||
|
allocation_value: number | null;
|
||||||
|
allocation_type_label: string;
|
||||||
|
buffer_multiplier: number;
|
||||||
|
effective_capacity: number | null;
|
||||||
|
starting_amount: number;
|
||||||
|
current_balance: number;
|
||||||
|
has_available_space: boolean;
|
||||||
|
available_space: number | null;
|
||||||
|
}
|
||||||
|
|
||||||
export interface Scenario {
|
export interface Scenario {
|
||||||
id: string;
|
id: string;
|
||||||
name: string;
|
name: string;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue