From aca9644c5b8f2ae5ce03a66db04faccf492b2720 Mon Sep 17 00:00:00 2001
From: myrmidex <myrmidex@myrmidex.net>
Date: Sun, 22 Mar 2026 02:05:43 +0100
Subject: [PATCH] 18 - Add inline editing for name, allocation type, and
 allocation value

---
 resources/js/pages/Scenarios/Show.tsx | 41 +++++++++++++++++++++++++--
 1 file changed, 38 insertions(+), 3 deletions(-)

diff --git a/resources/js/pages/Scenarios/Show.tsx b/resources/js/pages/Scenarios/Show.tsx
index fb21400..9109e79 100644
--- a/resources/js/pages/Scenarios/Show.tsx
+++ b/resources/js/pages/Scenarios/Show.tsx
@@ -71,6 +71,11 @@ const bucketTypeOptions = [
     { value: 'want', label: 'Want' },
 ];
 
+const allocationTypeOptions = [
+    { value: 'fixed_limit', label: 'Fixed Limit' },
+    { value: 'percentage', label: 'Percentage' },
+];
+
 /** Convert cents to dollars for display */
 const centsToDollars = (cents: number): number => cents / 100;
 
@@ -269,7 +274,11 @@ export default function Show({ scenario, buckets, streams = { data: [] }, stream
                                         <div className="flex items-start justify-between">
                                             <div className="flex-1">
                                                 <h3 className="text-lg font-semibold text-gray-900">
-                                                    {bucket.name}
+                                                    <InlineEditInput
+                                                        type="text"
+                                                        value={bucket.name}
+                                                        onSave={(val) => patchBucket(bucket.id, { name: val })}
+                                                    />
                                                 </h3>
                                                 <p className="text-sm text-gray-600 mt-1">
                                                     Priority {bucket.priority} •{' '}
@@ -280,7 +289,14 @@ export default function Show({ scenario, buckets, streams = { data: [] }, stream
                                                         displayLabel={bucket.type_label}
                                                         disabled={bucket.type === 'overflow'}
                                                     />
-                                                    {' '}• {bucket.allocation_type_label}
+                                                    {' '}•{' '}
+                                                    <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">
@@ -325,7 +341,26 @@ export default function Show({ scenario, buckets, streams = { data: [] }, stream
 
                                             <div className="mt-2">
                                                 <span className="text-sm text-gray-600">
-                                                    Allocation: {formatAllocationValue(bucket)}
+                                                    Allocation:{' '}
+                                                    {bucket.allocation_type === 'fixed_limit' && bucket.allocation_value !== null ? (
+                                                        <InlineEditInput
+                                                            value={centsToDollars(bucket.allocation_value)}
+                                                            onSave={(val) => patchBucket(bucket.id, { allocation_value: dollarsToCents(val) })}
+                                                            formatDisplay={(v) => `$${v.toFixed(2)}`}
+                                                            min={0}
+                                                            step="0.01"
+                                                        />
+                                                    ) : bucket.allocation_type === 'percentage' && bucket.allocation_value !== null ? (
+                                                        <InlineEditInput
+                                                            value={basisPointsToPercent(bucket.allocation_value)}
+                                                            onSave={(val) => patchBucket(bucket.id, { allocation_value: percentToBasisPoints(val) })}
+                                                            formatDisplay={(v) => `${v.toFixed(2)}%`}
+                                                            min={0}
+                                                            step="0.01"
+                                                        />
+                                                    ) : (
+                                                        formatAllocationValue(bucket)
+                                                    )}
                                                 </span>
                                                 {bucket.allocation_type === 'fixed_limit' && (
                                                     <span className="text-sm text-gray-500 ml-2">