From 2f51374e3a41e91a38bf13e6f83e30a7798b4cc6 Mon Sep 17 00:00:00 2001
From: myrmidex <myrmidex@myrmidex.net>
Date: Thu, 19 Mar 2026 21:35:27 +0100
Subject: [PATCH] 4 - Update frontend with bucket type support and visual
 distinction

---
 resources/js/pages/Scenarios/Show.tsx | 120 +++++++++++++++-----------
 1 file changed, 68 insertions(+), 52 deletions(-)

diff --git a/resources/js/pages/Scenarios/Show.tsx b/resources/js/pages/Scenarios/Show.tsx
index a04977e..c347013 100644
--- a/resources/js/pages/Scenarios/Show.tsx
+++ b/resources/js/pages/Scenarios/Show.tsx
@@ -11,6 +11,8 @@ interface Scenario {
 interface Bucket {
     id: string;
     name: string;
+    type: 'need' | 'want' | 'overflow';
+    type_label: string;
     priority: number;
     sort_order: number;
     allocation_type: string;
@@ -56,20 +58,30 @@ interface Props {
     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) {
     const [isModalOpen, setIsModalOpen] = useState(false);
     const [isSubmitting, setIsSubmitting] = useState(false);
     const [editingBucket, setEditingBucket] = useState<Bucket | null>(null);
-    const [formData, setFormData] = useState({
-        name: '',
-        allocation_type: 'fixed_limit',
-        allocation_value: ''
-    });
+    const [formData, setFormData] = useState({ ...defaultFormData });
 
     const handleEdit = (bucket: Bucket) => {
         setEditingBucket(bucket);
         setFormData({
             name: bucket.name,
+            type: bucket.type,
             allocation_type: bucket.allocation_type,
             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({
                     name: formData.name,
+                    type: formData.type,
                     allocation_type: formData.allocation_type,
                     allocation_value: formData.allocation_value ? parseFloat(formData.allocation_value) : null,
                     priority: editingBucket ? editingBucket.priority : undefined
@@ -126,7 +139,7 @@ export default function Show({ scenario, buckets, streams = { data: [] }, stream
 
             if (response.ok) {
                 setIsModalOpen(false);
-                setFormData({ name: '', allocation_type: 'fixed_limit', allocation_value: '' });
+                setFormData({ ...defaultFormData });
                 setEditingBucket(null);
                 router.reload({ only: ['buckets'] });
             } else {
@@ -158,6 +171,7 @@ export default function Show({ scenario, buckets, streams = { data: [] }, stream
                 },
                 body: JSON.stringify({
                     name: bucket.name,
+                    type: bucket.type,
                     allocation_type: bucket.allocation_type,
                     allocation_value: bucket.allocation_value,
                     priority: newPriority
@@ -208,7 +222,7 @@ export default function Show({ scenario, buckets, streams = { data: [] }, stream
                             <button 
                                 onClick={() => {
                                     setEditingBucket(null);
-                                    setFormData({ name: '', allocation_type: 'fixed_limit', allocation_value: '' });
+                                    setFormData({ ...defaultFormData });
                                     setIsModalOpen(true);
                                 }}
                                 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) => (
                                 <div
                                     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-1">
@@ -229,7 +243,7 @@ export default function Show({ scenario, buckets, streams = { data: [] }, stream
                                                 {bucket.name}
                                             </h3>
                                             <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>
                                         </div>
                                         <div className="flex items-center gap-1">
@@ -294,41 +308,23 @@ export default function Show({ scenario, buckets, streams = { data: [] }, stream
                                     </div>
                                     
                                     <div className="mt-4 flex gap-2">
-                                        <button 
+                                        <button
                                             onClick={() => handleEdit(bucket)}
                                             className="flex-1 text-sm text-blue-600 hover:text-blue-500"
                                         >
                                             Edit
                                         </button>
-                                        <button 
-                                            onClick={() => handleDelete(bucket)}
-                                            className="flex-1 text-sm text-red-600 hover:text-red-500"
-                                        >
-                                            Delete
-                                        </button>
+                                        {bucket.type !== 'overflow' && (
+                                            <button
+                                                onClick={() => handleDelete(bucket)}
+                                                className="flex-1 text-sm text-red-600 hover:text-red-500"
+                                            >
+                                                Delete
+                                            </button>
+                                        )}
                                     </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>
                         
                         {/* Streams Section */}
@@ -512,21 +508,41 @@ export default function Show({ scenario, buckets, streams = { data: [] }, stream
                                     />
                                 </div>
 
-                                <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>
-                                        <option value="unlimited">Unlimited</option>
-                                    </select>
-                                </div>
+                                {/* Hide type select for overflow buckets (type is fixed) */}
+                                {!(editingBucket && editingBucket.type === 'overflow') && (
+                                    <div>
+                                        <label htmlFor="type" className="block text-sm font-medium text-gray-700">
+                                            Bucket Type
+                                        </label>
+                                        <select
+                                            id="type"
+                                            value={formData.type}
+                                            onChange={(e) => setFormData({ ...formData, type: e.target.value as Bucket['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"
+                                        >
+                                            <option value="need">Need</option>
+                                            <option value="want">Want</option>
+                                        </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' && (
                                     <div>
@@ -554,7 +570,7 @@ export default function Show({ scenario, buckets, streams = { data: [] }, stream
                                         onClick={() => {
                                             setIsModalOpen(false);
                                             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"
                                         disabled={isSubmitting}