4 - Update frontend with bucket type support and visual distinction
This commit is contained in:
parent
e5dc7b0e21
commit
2f51374e3a
1 changed files with 68 additions and 52 deletions
|
|
@ -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">
|
||||
|
|
@ -300,35 +314,17 @@ export default function Show({ scenario, buckets, streams = { data: [] }, stream
|
|||
>
|
||||
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}
|
||||
|
|
|
|||
Loading…
Reference in a new issue