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 { Settings } from 'lucide-react';
|
||||
import { useState } from 'react';
|
||||
import BucketCard from '@/components/BucketCard';
|
||||
import InlineEditInput from '@/components/InlineEditInput';
|
||||
import InlineEditSelect from '@/components/InlineEditSelect';
|
||||
import SettingsPanel from '@/components/SettingsPanel';
|
||||
import { csrfToken } from '@/lib/utils';
|
||||
import { 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;
|
||||
}
|
||||
import { type Bucket, type Scenario } from '@/types';
|
||||
|
||||
interface Props {
|
||||
scenario: Scenario;
|
||||
|
|
@ -45,13 +28,6 @@ const dollarsToCents = (dollars: number): number => Math.round(dollars * 100);
|
|||
const basisPointsToPercent = (bp: number): number => bp / 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 response = await fetch(`/buckets/${bucketId}`, {
|
||||
method: 'PATCH',
|
||||
|
|
@ -79,14 +55,15 @@ const defaultFormData = {
|
|||
};
|
||||
|
||||
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 [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [formData, setFormData] = useState({ ...defaultFormData });
|
||||
|
||||
const openCreateModal = () => {
|
||||
setFormData({ ...defaultFormData });
|
||||
setIsModalOpen(true);
|
||||
setIsCreateModalOpen(true);
|
||||
};
|
||||
|
||||
const handleDelete = async (bucket: Bucket) => {
|
||||
|
|
@ -99,6 +76,7 @@ export default function Show({ scenario, buckets }: Props) {
|
|||
});
|
||||
|
||||
if (response.ok) {
|
||||
setEditingBucket(null);
|
||||
router.reload({ only: ['buckets'] });
|
||||
}
|
||||
} catch (error) {
|
||||
|
|
@ -131,7 +109,7 @@ export default function Show({ scenario, buckets }: Props) {
|
|||
});
|
||||
|
||||
if (response.ok) {
|
||||
setIsModalOpen(false);
|
||||
setIsCreateModalOpen(false);
|
||||
setFormData({ ...defaultFormData });
|
||||
router.reload({ only: ['buckets'] });
|
||||
} else {
|
||||
|
|
@ -186,190 +164,76 @@ export default function Show({ scenario, buckets }: Props) {
|
|||
<SettingsPanel onOpenChange={setIsSettingsOpen} />
|
||||
</div>
|
||||
|
||||
{/* Buckets */}
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-end">
|
||||
<button
|
||||
onClick={openCreateModal}
|
||||
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"
|
||||
>
|
||||
+ ADD BUCKET
|
||||
</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>
|
||||
{/* Two-column layout */}
|
||||
<div className="grid grid-cols-2 gap-8">
|
||||
{/* Left: Buckets */}
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-sm font-mono font-bold tracking-wider uppercase text-red-500/60">
|
||||
BUCKETS
|
||||
</h2>
|
||||
<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"
|
||||
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>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{buckets.data.map((bucket) => (
|
||||
<div
|
||||
key={bucket.id}
|
||||
className="border-4 border-red-500 bg-black p-6 glow-red transition-all"
|
||||
|
||||
{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
|
||||
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 */}
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div className="flex-1">
|
||||
<h3 className="text-red-500 font-mono font-bold uppercase tracking-wider">
|
||||
<InlineEditInput
|
||||
type="text"
|
||||
value={bucket.name}
|
||||
onSave={(val) => patchBucket(bucket.id, { name: val })}
|
||||
/>
|
||||
</h3>
|
||||
<p className="text-red-500/60 text-xs font-mono mt-1 uppercase">
|
||||
<InlineEditSelect
|
||||
value={bucket.type}
|
||||
options={bucketTypeOptions}
|
||||
onSave={(val) => patchBucket(bucket.id, { type: val })}
|
||||
displayLabel={bucket.type_label}
|
||||
disabled={bucket.type === 'overflow'}
|
||||
/>
|
||||
{' | '}
|
||||
<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>
|
||||
CREATE FIRST BUCKET
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-6 px-4">
|
||||
{buckets.data.map((bucket) => (
|
||||
<button
|
||||
key={bucket.id}
|
||||
type="button"
|
||||
onClick={() => setEditingBucket(bucket)}
|
||||
className="w-full border-4 border-red-500 bg-black glow-red transition-all text-left hover:border-red-400 cursor-pointer"
|
||||
>
|
||||
<BucketCard bucket={bucket} />
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Filling */}
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-red-500/60 text-xs font-mono uppercase">Current</span>
|
||||
<InlineEditInput
|
||||
value={centsToDollars(bucket.starting_amount)}
|
||||
onSave={(val) => patchBucket(bucket.id, { starting_amount: dollarsToCents(val) })}
|
||||
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>
|
||||
))}
|
||||
{/* Right: Income */}
|
||||
<div>
|
||||
<div className="flex items-center justify-center border-b border-red-500/40 pb-2 mb-6">
|
||||
<h2 className="text-sm font-mono font-bold tracking-wider uppercase text-red-500/60">
|
||||
INCOME
|
||||
</h2>
|
||||
</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>
|
||||
|
||||
{/* 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="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">
|
||||
|
|
@ -484,7 +348,7 @@ export default function Show({ scenario, buckets }: Props) {
|
|||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setIsModalOpen(false);
|
||||
setIsCreateModalOpen(false);
|
||||
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"
|
||||
|
|
@ -504,6 +368,155 @@ export default function Show({ scenario, buckets }: Props) {
|
|||
</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;
|
||||
}
|
||||
|
||||
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 {
|
||||
id: string;
|
||||
name: string;
|
||||
|
|
|
|||
Loading…
Reference in a new issue