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

4 - Update frontend with bucket type support and visual distinction

Browse source
This commit is contained in:
myrmidex 2026-03-19 21:35:27 +01:00
parent e5dc7b0e21
commit 2f51374e3a
1 changed files with 68 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -11,6 +11,8 @@ interface Scenario {
interface Bucket { interface Bucket {
id: string; id: string;
name: string; name: string;
type: 'need' | 'want' | 'overflow';
type_label: string;
priority: number; priority: number;
sort_order: number; sort_order: number;
allocation_type: string; allocation_type: string;
@ -56,20 +58,30 @@ interface Props {
streamStats?: StreamStats; streamStats?: StreamStats;
} }
const bucketTypeBorderColor = {
need: 'border-blue-500',
want: 'border-green-500',
overflow: 'border-amber-500',
} as const;
const defaultFormData = {
name: '',
type: 'need' as Bucket['type'],
allocation_type: 'fixed_limit',
allocation_value: ''
};
export default function Show({ scenario, buckets, streams = { data: [] }, streamStats }: Props) { export default function Show({ scenario, buckets, streams = { data: [] }, streamStats }: Props) {
const [isModalOpen, setIsModalOpen] = useState(false); const [isModalOpen, setIsModalOpen] = useState(false);
const [isSubmitting, setIsSubmitting] = useState(false); const [isSubmitting, setIsSubmitting] = useState(false);
const [editingBucket, setEditingBucket] = useState<Bucket | null>(null); const [editingBucket, setEditingBucket] = useState<Bucket | null>(null);
const [formData, setFormData] = useState({ const [formData, setFormData] = useState({ ...defaultFormData });
name: '',
allocation_type: 'fixed_limit',
allocation_value: ''
});
const handleEdit = (bucket: Bucket) => { const handleEdit = (bucket: Bucket) => {
setEditingBucket(bucket); setEditingBucket(bucket);
setFormData({ setFormData({
name: bucket.name, name: bucket.name,
type: bucket.type,
allocation_type: bucket.allocation_type, allocation_type: bucket.allocation_type,
allocation_value: bucket.allocation_value ? bucket.allocation_value.toString() : '' allocation_value: bucket.allocation_value ? bucket.allocation_value.toString() : ''
}); });
@ -118,6 +130,7 @@ export default function Show({ scenario, buckets, streams = { data: [] }, stream
}, },
body: JSON.stringify({ body: JSON.stringify({
name: formData.name, name: formData.name,
type: formData.type,
allocation_type: formData.allocation_type, allocation_type: formData.allocation_type,
allocation_value: formData.allocation_value ? parseFloat(formData.allocation_value) : null, allocation_value: formData.allocation_value ? parseFloat(formData.allocation_value) : null,
priority: editingBucket ? editingBucket.priority : undefined priority: editingBucket ? editingBucket.priority : undefined
@ -126,7 +139,7 @@ export default function Show({ scenario, buckets, streams = { data: [] }, stream
if (response.ok) { if (response.ok) {
setIsModalOpen(false); setIsModalOpen(false);
setFormData({ name: '', allocation_type: 'fixed_limit', allocation_value: '' }); setFormData({ ...defaultFormData });
setEditingBucket(null); setEditingBucket(null);
router.reload({ only: ['buckets'] }); router.reload({ only: ['buckets'] });
} else { } else {
@ -158,6 +171,7 @@ export default function Show({ scenario, buckets, streams = { data: [] }, stream
}, },
body: JSON.stringify({ body: JSON.stringify({
name: bucket.name, name: bucket.name,
type: bucket.type,
allocation_type: bucket.allocation_type, allocation_type: bucket.allocation_type,
allocation_value: bucket.allocation_value, allocation_value: bucket.allocation_value,
priority: newPriority priority: newPriority
@ -208,7 +222,7 @@ export default function Show({ scenario, buckets, streams = { data: [] }, stream
<button <button
onClick={() => { onClick={() => {
setEditingBucket(null); setEditingBucket(null);
setFormData({ name: '', allocation_type: 'fixed_limit', allocation_value: '' }); setFormData({ ...defaultFormData });
setIsModalOpen(true); 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"
@ -221,7 +235,7 @@ export default function Show({ scenario, buckets, streams = { data: [] }, stream
{buckets.data.map((bucket) => ( {buckets.data.map((bucket) => (
<div <div
key={bucket.id} key={bucket.id}
className="rounded-lg bg-white p-6 shadow transition-shadow hover:shadow-lg border-l-4 border-blue-500" 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 items-start justify-between">
<div className="flex-1"> <div className="flex-1">
@ -229,7 +243,7 @@ export default function Show({ scenario, buckets, streams = { data: [] }, stream
{bucket.name} {bucket.name}
</h3> </h3>
<p className="text-sm text-gray-600 mt-1"> <p className="text-sm text-gray-600 mt-1">
Priority {bucket.priority} • {bucket.allocation_type_label} Priority {bucket.priority} • {bucket.type_label} • {bucket.allocation_type_label}
</p> </p>
</div> </div>
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
@ -294,41 +308,23 @@ export default function Show({ scenario, buckets, streams = { data: [] }, stream
</div> </div>
<div className="mt-4 flex gap-2"> <div className="mt-4 flex gap-2">
<button <button
onClick={() => handleEdit(bucket)} onClick={() => handleEdit(bucket)}
className="flex-1 text-sm text-blue-600 hover:text-blue-500" className="flex-1 text-sm text-blue-600 hover:text-blue-500"
> >
Edit Edit
</button> </button>
<button {bucket.type !== 'overflow' && (
onClick={() => handleDelete(bucket)} <button
className="flex-1 text-sm text-red-600 hover:text-red-500" onClick={() => handleDelete(bucket)}
> className="flex-1 text-sm text-red-600 hover:text-red-500"
Delete >
</button> Delete
</button>
)}
</div> </div>
</div> </div>
))} ))}
{/* Virtual Overflow Bucket (placeholder for now) */}
<div className="rounded-lg bg-gray-50 p-6 border-2 border-dashed border-gray-300">
<div className="text-center">
<div className="mx-auto h-8 w-8 text-gray-400">
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4" />
</svg>
</div>
<h3 className="mt-2 text-sm font-medium text-gray-500">
Overflow
</h3>
<p className="text-xs text-gray-400 mt-1">
Unallocated funds
</p>
<p className="text-lg font-semibold text-gray-600 mt-2">
$0.00
</p>
</div>
</div>
</div> </div>
{/* Streams Section */} {/* Streams Section */}
@ -512,21 +508,41 @@ export default function Show({ scenario, buckets, streams = { data: [] }, stream
/> />
</div> </div>
<div> {/* Hide type select for overflow buckets (type is fixed) */}
<label htmlFor="allocation_type" className="block text-sm font-medium text-gray-700"> {!(editingBucket && editingBucket.type === 'overflow') && (
Allocation Type <div>
</label> <label htmlFor="type" className="block text-sm font-medium text-gray-700">
<select Bucket Type
id="allocation_type" </label>
value={formData.allocation_type} <select
onChange={(e) => setFormData({ ...formData, allocation_type: e.target.value })} id="type"
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-gray-900" value={formData.type}
> onChange={(e) => setFormData({ ...formData, type: e.target.value as Bucket['type'] })}
<option value="fixed_limit">Fixed Limit</option> className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-gray-900"
<option value="percentage">Percentage</option> >
<option value="unlimited">Unlimited</option> <option value="need">Need</option>
</select> <option value="want">Want</option>
</div> </select>
</div>
)}
{/* Hide allocation type select for overflow (always unlimited) */}
{formData.type !== 'overflow' && (
<div>
<label htmlFor="allocation_type" className="block text-sm font-medium text-gray-700">
Allocation Type
</label>
<select
id="allocation_type"
value={formData.allocation_type}
onChange={(e) => setFormData({ ...formData, allocation_type: e.target.value })}
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-gray-900"
>
<option value="fixed_limit">Fixed Limit</option>
<option value="percentage">Percentage</option>
</select>
</div>
)}
{formData.allocation_type !== 'unlimited' && ( {formData.allocation_type !== 'unlimited' && (
<div> <div>
@ -554,7 +570,7 @@ export default function Show({ scenario, buckets, streams = { data: [] }, stream
onClick={() => { onClick={() => {
setIsModalOpen(false); setIsModalOpen(false);
setEditingBucket(null); setEditingBucket(null);
setFormData({ name: '', allocation_type: 'fixed_limit', allocation_value: '' }); setFormData({ ...defaultFormData });
}} }}
className="flex-1 px-4 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded-md hover:bg-gray-300" className="flex-1 px-4 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded-md hover:bg-gray-300"
disabled={isSubmitting} disabled={isSubmitting}