24 - Remove multi-scenario scaffolding

app/Actions/DeleteScenarioAction.php

@@ -1,13 +0,0 @@
-<?php
-
-namespace App\Actions;
-
-use App\Models\Scenario;
-
-readonly class DeleteScenarioAction
-{
-    public function execute(Scenario $scenario): void
-    {
-        $scenario->delete();
-    }
-}

app/Enums/BucketAllocationTypeEnum.php

@@ -30,5 +30,4 @@ public function getAllocationValueRules(): array
             self::UNLIMITED => ['nullable'],
         };
     }
-
 }

app/Http/Controllers/ScenarioController.php

@@ -2,36 +2,21 @@
 
 namespace App\Http\Controllers;
 
-use App\Actions\CreateScenarioAction;
-use App\Actions\DeleteScenarioAction;
 use App\Actions\UpdateScenarioAction;
-use App\Http\Requests\StoreScenarioRequest;
 use App\Http\Requests\UpdateScenarioRequest;
 use App\Http\Resources\BucketResource;
 use App\Http\Resources\ScenarioResource;
 use App\Models\Scenario;
-use App\Repositories\ScenarioRepository;
 use Illuminate\Http\JsonResponse;
-use Illuminate\Http\RedirectResponse;
 use Inertia\Inertia;
 use Inertia\Response;
 
 class ScenarioController extends Controller
 {
     public function __construct(
-        private readonly ScenarioRepository $scenarioRepository,
-        private readonly CreateScenarioAction $createScenarioAction,
         private readonly UpdateScenarioAction $updateScenarioAction,
-        private readonly DeleteScenarioAction $deleteScenarioAction,
     ) {}
 
-    public function index(): Response
-    {
-        return Inertia::render('Scenarios/Index', [
-            'scenarios' => ScenarioResource::collection($this->scenarioRepository->getAll()),
-        ]);
-    }
-
     public function show(Scenario $scenario): Response
     {
         $scenario->load(['buckets' => function ($query) {
@@ -44,38 +29,10 @@ public function show(Scenario $scenario): Response
         ]);
     }
 
-    public function create(): Response
-    {
-        return Inertia::render('Scenarios/Create');
-    }
-
-    public function store(StoreScenarioRequest $request): RedirectResponse
-    {
-        $scenario = $this->createScenarioAction->execute($request->validated());
-
-        return redirect()->route('scenarios.show', $scenario);
-    }
-
-    public function edit(Scenario $scenario): Response
-    {
-        return Inertia::render('Scenarios/Edit', [
-            'scenario' => ScenarioResource::make($scenario)->resolve(),
-        ]);
-    }
-
     public function update(UpdateScenarioRequest $request, Scenario $scenario): JsonResponse
     {
         $this->updateScenarioAction->execute($scenario, $request->validated());
 
         return response()->json(['success' => true]);
     }
-
-    public function destroy(Scenario $scenario): RedirectResponse
-    {
-        $this->deleteScenarioAction->execute($scenario);
-
-        return redirect()
-            ->route('scenarios.index')
-            ->with('success', 'Scenario deleted successfully');
-    }
 }

app/Http/Requests/StoreScenarioRequest.php

@@ -1,42 +0,0 @@
-<?php
-
-namespace App\Http\Requests;
-
-use Illuminate\Foundation\Http\FormRequest;
-
-class StoreScenarioRequest extends FormRequest
-{
-    public function authorize(): bool
-    {
-        // In production, check if user is authenticated
-        // For now, allow all requests
-        return true;
-    }
-
-    public function rules(): array
-    {
-        return [
-            'name' => ['required', 'string', 'max:255', 'min:1'],
-            'description' => ['nullable', 'string', 'max:1000'],
-        ];
-    }
-
-    public function messages(): array
-    {
-        return [
-            'name.required' => 'A scenario name is required.',
-            'name.min' => 'The scenario name must be at least 1 character.',
-            'name.max' => 'The scenario name cannot exceed 255 characters.',
-        ];
-    }
-
-    protected function prepareForValidation(): void
-    {
-        // Trim the name
-        if ($this->has('name')) {
-            $this->merge([
-                'name' => trim($this->name),
-            ]);
-        }
-    }
-}

app/Models/Draw.php

@@ -28,6 +28,7 @@ class Draw extends Model
 
     /** @use HasFactory<DrawFactory> */
     use HasFactory;
+
     use HasProjectionStatus;
     use HasUuid;
 

app/Models/Outflow.php

@@ -29,6 +29,7 @@ class Outflow extends Model
 
     /** @use HasFactory<OutflowFactory> */
     use HasFactory;
+
     use HasProjectionStatus;
     use HasUuid;
 

app/Repositories/ScenarioRepository.php

@@ -1,16 +0,0 @@
-<?php
-
-namespace App\Repositories;
-
-use App\Models\Scenario;
-use Illuminate\Support\Collection;
-
-class ScenarioRepository
-{
-    public function getAll(): Collection
-    {
-        return Scenario::query()
-            ->orderBy('created_at', 'desc')
-            ->get();
-    }
-}

app/Services/Projection/PipelineAllocationService.php

@@ -13,6 +13,7 @@
 readonly class PipelineAllocationService
 {
     private const string CAP_BASE = 'base';
+
     private const string CAP_FILL = 'fill';
 
     /**

resources/js/components/BucketCard.tsx

@@ -0,0 +1,57 @@
+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, projectedAmount }: { bucket: Bucket; projectedAmount?: number }) {
+    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!}
+                            projected={projectedAmount}
+                        />
+                    </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>
+                {projectedAmount && projectedAmount > 0 && (
+                    <span className="font-digital text-yellow-500 text-sm">
+                        {' '}+{formatDollars(projectedAmount)}
+                    </span>
+                )}
+                {hasFiniteCapacity && (
+                    <span className="font-digital text-red-500/50 text-sm">
+                        {' '}/ {formatDollars(bucket.effective_capacity!)}
+                    </span>
+                )}
+            </div>
+        </div>
+    );
+}

resources/js/components/DigitalProgressBar.tsx

@@ -0,0 +1,57 @@
+interface DigitalProgressBarProps {
+    current: number;
+    capacity: number;
+    projected?: 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 < BAR_COUNT - 1) 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 < BAR_COUNT - 1) return 'bg-orange-500';
+    return 'bg-green-500';
+}
+
+const PROJECTED_GLOW = '0 0 8px rgba(234, 179, 8, 0.6)';
+
+export default function DigitalProgressBar({ current, capacity, projected }: DigitalProgressBarProps) {
+    const filledBars = capacity > 0
+        ? Math.min(Math.round((current / capacity) * BAR_COUNT), BAR_COUNT)
+        : 0;
+    const projectedBars = capacity > 0 && projected
+        ? Math.min(Math.round(((current + projected) / capacity) * BAR_COUNT), BAR_COUNT)
+        : filledBars;
+
+    return (
+        <div
+            style={{
+                display: 'grid',
+                gridTemplateColumns: `repeat(${BAR_COUNT}, 1fr)`,
+                gap: '10px',
+                height: '2rem',
+            }}
+        >
+            {Array.from({ length: BAR_COUNT }, (_, i) => {
+                const filled = i < filledBars;
+                const isProjected = !filled && i < projectedBars;
+                return (
+                    <div
+                        key={i}
+                        style={{
+                            borderRadius: '3px',
+                            transition: 'background-color 300ms, box-shadow 300ms',
+                            boxShadow: filled ? getGlow(i) : isProjected ? PROJECTED_GLOW : 'none',
+                        }}
+                        className={filled ? getBarColor(i) : isProjected ? 'bg-yellow-500' : 'bg-red-500/10'}
+                    />
+                );
+            })}
+        </div>
+    );
+}

resources/js/components/DistributionLines.tsx

@@ -0,0 +1,149 @@
+import { useEffect, useRef, useState } from 'react';
+import { type DistributionPreview } from '@/types';
+
+interface Props {
+    distribution: DistributionPreview;
+    bucketRefs: React.RefObject<Map<string, HTMLElement> | null>;
+    containerRef: React.RefObject<HTMLDivElement | null>;
+    incomeRef: React.RefObject<HTMLDivElement | null>;
+}
+
+interface LinePosition {
+    bucketId: string;
+    amount: number;
+    bucketY: number;
+    bucketRight: number;
+    incomeLeft: number;
+    incomeY: number;
+}
+
+const centsToDollars = (cents: number): string => `$${(cents / 100).toFixed(0)}`;
+
+export default function DistributionLines({ distribution, bucketRefs, containerRef, incomeRef }: Props) {
+    const [positions, setPositions] = useState<LinePosition[]>([]);
+    const svgRef = useRef<SVGSVGElement>(null);
+
+    useEffect(() => {
+        const measure = () => {
+            const container = containerRef.current;
+            const income = incomeRef.current;
+            if (!container || !income) return;
+
+            const containerRect = container.getBoundingClientRect();
+            const incomeRect = income.getBoundingClientRect();
+            const incomeLeft = incomeRect.left - containerRect.left;
+            const incomeCenterY = incomeRect.top + incomeRect.height / 2 - containerRect.top;
+
+            const lines: LinePosition[] = [];
+
+            for (const alloc of distribution.allocations) {
+                const el = bucketRefs.current?.get(alloc.bucket_id);
+                if (!el) continue;
+
+                const bucketRect = el.getBoundingClientRect();
+                const bucketRight = bucketRect.right - containerRect.left;
+                const bucketY = bucketRect.top + bucketRect.height / 2 - containerRect.top;
+
+                lines.push({
+                    bucketId: alloc.bucket_id,
+                    amount: alloc.allocated_amount,
+                    bucketY,
+                    bucketRight,
+                    incomeLeft,
+                    incomeY: incomeCenterY,
+                });
+            }
+
+            setPositions(lines);
+        };
+
+        requestAnimationFrame(measure);
+
+        const observer = new ResizeObserver(measure);
+        if (containerRef.current) observer.observe(containerRef.current);
+
+        return () => observer.disconnect();
+    }, [distribution, bucketRefs, containerRef, incomeRef]);
+
+    if (positions.length === 0) return null;
+
+    // Trunk X position: midpoint between rightmost bucket and income panel
+    const trunkX = positions.length > 0
+        ? (Math.max(...positions.map(p => p.bucketRight)) + positions[0].incomeLeft) / 2
+        : 0;
+    const incomeY = positions[0]?.incomeY ?? 0;
+    const allYs = [...positions.map(p => p.bucketY), incomeY];
+    const trunkTop = Math.min(...allYs);
+    const trunkBottom = Math.max(...allYs);
+
+    return (
+        <svg
+            ref={svgRef}
+            className="absolute inset-0 w-full h-full pointer-events-none"
+            style={{ zIndex: 10 }}
+        >
+            {/* Vertical trunk from income to span all bucket Y positions */}
+            <line
+                x1={trunkX}
+                y1={trunkTop}
+                x2={trunkX}
+                y2={trunkBottom}
+                stroke="rgb(239, 68, 68)"
+                strokeWidth={2}
+                strokeOpacity={0.6}
+            />
+
+            {/* Horizontal line from trunk to income panel */}
+            <line
+                x1={trunkX}
+                y1={positions[0].incomeY}
+                x2={positions[0].incomeLeft}
+                y2={positions[0].incomeY}
+                stroke="rgb(239, 68, 68)"
+                strokeWidth={2}
+                strokeOpacity={0.6}
+            />
+
+            {/* Branch lines from trunk to each bucket */}
+            {positions.map((pos) => {
+                const isZero = pos.amount === 0;
+                const opacity = isZero ? 0.2 : 0.8;
+                const label = centsToDollars(pos.amount);
+
+                return (
+                    <g key={pos.bucketId}>
+                        {/* Horizontal branch: trunk → bucket */}
+                        <line
+                            x1={trunkX}
+                            y1={pos.bucketY}
+                            x2={pos.bucketRight + 8}
+                            y2={pos.bucketY}
+                            stroke="rgb(239, 68, 68)"
+                            strokeWidth={2}
+                            strokeOpacity={opacity}
+                        />
+                        {/* Arrow tip */}
+                        <polygon
+                            points={`${pos.bucketRight + 8},${pos.bucketY - 4} ${pos.bucketRight},${pos.bucketY} ${pos.bucketRight + 8},${pos.bucketY + 4}`}
+                            fill="rgb(239, 68, 68)"
+                            fillOpacity={opacity}
+                        />
+                        {/* Amount label */}
+                        <text
+                            x={(trunkX + pos.bucketRight) / 2}
+                            y={pos.bucketY - 8}
+                            textAnchor="middle"
+                            fill="rgb(239, 68, 68)"
+                            fillOpacity={opacity}
+                            fontSize={12}
+                            fontFamily="monospace"
+                            fontWeight="bold"
+                        >
+                            {label}
+                        </text>
+                    </g>
+                );
+            })}
+        </svg>
+    );
+}

resources/js/pages/Scenarios/Index.tsx

@@ -1,153 +0,0 @@
-import { Head, router } from '@inertiajs/react';
-import React, { useState } from 'react';
-
-interface Scenario {
-    id: string;
-    name: string;
-    created_at: string;
-    updated_at: string;
-}
-
-interface Props {
-    scenarios: {
-        data: Scenario[];
-    };
-}
-
-export default function Index({ scenarios }: Props) {
-    const [showCreateForm, setShowCreateForm] = useState(false);
-    const [name, setName] = useState('');
-    const [errors, setErrors] = useState<{ name?: string }>({});
-
-    const handleCreateScenario = (e: React.FormEvent) => {
-        e.preventDefault();
-
-        router.post('/scenarios', { name }, {
-            onSuccess: () => {
-                setShowCreateForm(false);
-                setName('');
-                setErrors({});
-            },
-            onError: (errors) => {
-                setErrors(errors);
-            }
-        });
-    };
-
-    const handleCancel = () => {
-        setShowCreateForm(false);
-        setName('');
-        setErrors({});
-    };
-
-    return (
-        <>
-            <Head title="Budget Scenarios" />
-
-            <div className="min-h-screen bg-gray-50 py-8">
-                <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-                    <div className="mb-8">
-                        <h1 className="text-3xl font-bold text-gray-900">Budget Scenarios</h1>
-                        <p className="mt-2 text-gray-600">
-                            Manage your budget projections with water-themed scenarios
-                        </p>
-                    </div>
-
-                    {/* Create Scenario Form */}
-                    {showCreateForm && (
-                        <div className="mb-8 rounded-lg bg-white p-6 shadow" data-testid="scenario-form">
-                            <h2 className="text-xl font-semibold text-gray-900 mb-4">Create New Scenario</h2>
-                            <form onSubmit={handleCreateScenario}>
-                                <div className="mb-4">
-                                    <label htmlFor="name" className="block text-sm font-medium text-gray-700">
-                                        Scenario Name
-                                    </label>
-                                    <input
-                                        type="text"
-                                        id="name"
-                                        data-testid="scenario-name"
-                                        value={name}
-                                        onChange={(e) => setName(e.target.value)}
-                                        className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 text-sm text-gray-900 focus:border-blue-500 focus:outline-none focus:ring-blue-500"
-                                        placeholder="e.g., 2025 Budget"
-                                    />
-                                    {errors.name && (
-                                        <p className="mt-1 text-sm text-red-600">{errors.name}</p>
-                                    )}
-                                </div>
-                                <div className="flex gap-3">
-                                    <button
-                                        type="submit"
-                                        data-testid="save-scenario"
-                                        className="rounded-md bg-blue-600 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
-                                    >
-                                        Create Scenario
-                                    </button>
-                                    <button
-                                        type="button"
-                                        data-testid="cancel-scenario"
-                                        onClick={handleCancel}
-                                        className="rounded-md border border-gray-300 px-4 py-2 text-sm font-semibold text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2"
-                                    >
-                                        Cancel
-                                    </button>
-                                </div>
-                            </form>
-                        </div>
-                    )}
-
-                    {/* Create Button */}
-                    {!showCreateForm && (
-                        <div className="mb-8">
-                            <button
-                                onClick={() => setShowCreateForm(true)}
-                                data-testid="create-scenario-button"
-                                className="rounded-md bg-blue-600 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
-                            >
-                                + New Scenario
-                            </button>
-                        </div>
-                    )}
-
-                    {/* Scenarios List */}
-                    {scenarios.data.length === 0 ? (
-                        <div className="rounded-lg bg-white p-12 text-center shadow">
-                            <div className="mx-auto h-12 w-12 text-gray-400">
-                                <svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
-                                </svg>
-                            </div>
-                            <h3 className="mt-4 text-lg font-semibold text-gray-900">No scenarios yet</h3>
-                            <p className="mt-2 text-gray-600">
-                                Create your first budget scenario to get started
-                            </p>
-                        </div>
-                    ) : (
-                        <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
-                            {scenarios.data.map((scenario) => (
-                                <div
-                                    key={scenario.id}
-                                    onClick={() => router.visit(`/scenarios/${scenario.id}`)}
-                                    className="cursor-pointer rounded-lg bg-white p-6 shadow transition-shadow hover:shadow-lg"
-                                >
-                                    <h3 className="text-lg font-semibold text-gray-900">
-                                        {scenario.name}
-                                    </h3>
-                                    <p className="mt-2 text-sm text-gray-600">
-                                        Created {new Date(scenario.created_at).toLocaleDateString()}
-                                    </p>
-                                    <div className="mt-4 flex items-center text-sm text-blue-600">
-                                        View Details
-                                        <svg className="ml-2 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-                                        </svg>
-                                    </div>
-                                </div>
-                            ))}
-                        </div>
-                    )}
-                </div>
-            </div>
-        </>
-    );
-}

resources/js/pages/Scenarios/Show.tsx

@@ -1,29 +1,13 @@
 import { Head, router } from '@inertiajs/react';
 import { Settings } from 'lucide-react';
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
+import BucketCard from '@/components/BucketCard';
+import DistributionLines from '@/components/DistributionLines';
 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';
+import { type Bucket, type DistributionPreview, 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;
-}
 
 interface Props {
     scenario: Scenario;
@@ -45,13 +29,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 +56,101 @@ 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 [incomeAmount, setIncomeAmount] = useState('');
+    const [distribution, setDistribution] = useState<DistributionPreview | null>(null);
+    const [isDistributing, setIsDistributing] = useState(false);
+    const [isSaving, setIsSaving] = useState(false);
+    const [distributionError, setDistributionError] = useState<string | null>(null);
+    // Sync editingBucket with refreshed props after inline edits.
+    // Only react to buckets changing, not editingBucket — reading .id is stable.
+    useEffect(() => {
+        if (editingBucket) {
+            const updated = buckets.data.find(b => b.id === editingBucket.id);
+            if (updated) {
+                setEditingBucket(updated);
+            } else {
+                setEditingBucket(null);
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [buckets]);
+
+    const containerRef = useRef<HTMLDivElement>(null);
+    const incomeRef = useRef<HTMLDivElement>(null);
+    const bucketRefs = useRef<Map<string, HTMLElement>>(new Map());
+
+    const handleDistribute = async () => {
+        const dollars = parseFloat(incomeAmount);
+        if (!dollars || dollars <= 0) return;
+
+        setIsDistributing(true);
+        setDistributionError(null);
+        try {
+            const response = await fetch(`/scenarios/${scenario.id}/projections/preview`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-CSRF-TOKEN': csrfToken(),
+                },
+                body: JSON.stringify({ amount: dollarsToCents(dollars) }),
+            });
+
+            if (response.ok) {
+                setDistribution(await response.json());
+            } else {
+                setDistributionError('DISTRIBUTION FAILED');
+            }
+        } catch (error) {
+            setDistributionError('CONNECTION ERROR');
+        } finally {
+            setIsDistributing(false);
+        }
+    };
+
+    const handleSaveDistribution = async () => {
+        const dollars = parseFloat(incomeAmount);
+        if (!dollars || dollars <= 0 || !distribution) return;
+
+        setIsSaving(true);
+        setDistributionError(null);
+        try {
+            const response = await fetch(`/scenarios/${scenario.id}/projections/apply`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-CSRF-TOKEN': csrfToken(),
+                },
+                body: JSON.stringify({ amount: dollarsToCents(dollars) }),
+            });
+
+            if (response.ok) {
+                setDistribution(null);
+                setIncomeAmount('');
+                router.reload({ only: ['buckets'] });
+            } else {
+                setDistributionError('SAVE FAILED');
+            }
+        } catch (error) {
+            setDistributionError('CONNECTION ERROR');
+        } finally {
+            setIsSaving(false);
+        }
+    };
+
+    const handleIncomeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setIncomeAmount(e.target.value);
+        setDistribution(null);
+        setDistributionError(null);
+    };
 
     const openCreateModal = () => {
         setFormData({ ...defaultFormData });
-        setIsModalOpen(true);
+        setIsCreateModalOpen(true);
     };
 
     const handleDelete = async (bucket: Bucket) => {
@@ -99,6 +163,7 @@ export default function Show({ scenario, buckets }: Props) {
             });
 
             if (response.ok) {
+                setEditingBucket(null);
                 router.reload({ only: ['buckets'] });
             }
         } catch (error) {
@@ -131,7 +196,7 @@ export default function Show({ scenario, buckets }: Props) {
             });
 
             if (response.ok) {
-                setIsModalOpen(false);
+                setIsCreateModalOpen(false);
                 setFormData({ ...defaultFormData });
                 router.reload({ only: ['buckets'] });
             } else {
@@ -186,14 +251,19 @@ export default function Show({ scenario, buckets }: Props) {
                         <SettingsPanel onOpenChange={setIsSettingsOpen} />
                     </div>
 
-                    {/* Buckets */}
+                    {/* Buckets + Distribution + Income */}
-                    <div className="space-y-6">
+                    <div ref={containerRef} className="relative flex items-start gap-0">
-                        <div className="flex items-center justify-end">
+                        {/* Left: Buckets */}
+                        <div className="w-2/5 shrink-0 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-4 py-2 text-sm 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"
                                 >
-                                + ADD BUCKET
+                                    + ADD
                                 </button>
                             </div>
 
@@ -213,163 +283,86 @@ export default function Show({ scenario, buckets }: Props) {
                                     </button>
                                 </div>
                             ) : (
-                            <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+                                <div className="space-y-6 px-4">
                                     {buckets.data.map((bucket) => (
-                                    <div
+                                        <button
                                             key={bucket.id}
-                                        className="border-4 border-red-500 bg-black p-6 glow-red transition-all"
+                                            type="button"
-                                    >
+                                            ref={(el) => {
-                                        {/* Header: name + priority */}
+                                                if (el) bucketRefs.current.set(bucket.id, el);
-                                        <div className="flex items-start justify-between mb-4">
+                                                else bucketRefs.current.delete(bucket.id);
-                                            <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>
-
-                                        {/* 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)}%`
                                             }}
-                                                    />
+                                            onClick={() => setEditingBucket(bucket)}
-                                                </div>
+                                            className="w-full border-4 border-red-500 bg-black glow-red transition-all text-left hover:border-red-400 cursor-pointer"
-                                            </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
+                                            <BucketCard
+                                                bucket={bucket}
+                                                projectedAmount={distribution?.allocations.find(a => a.bucket_id === bucket.id)?.allocated_amount}
+                                            />
                                         </button>
-                                            </div>
-                                        )}
-                                    </div>
                                     ))}
                                 </div>
                             )}
                         </div>
+
+                        {/* Middle: Connector area (SVG lines render here) */}
+                        <div className="flex-1" />
+
+                        {distribution && (
+                            <DistributionLines
+                                distribution={distribution}
+                                bucketRefs={bucketRefs}
+                                containerRef={containerRef}
+                                incomeRef={incomeRef}
+                            />
+                        )}
+
+                        {/* Right: Income */}
+                        <div ref={incomeRef} className="w-1/5 shrink-0 self-center">
+                            <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 space-y-4">
+                                <input
+                                    type="number"
+                                    value={incomeAmount}
+                                    onChange={handleIncomeChange}
+                                    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"
+                                />
+                                <button
+                                    onClick={handleDistribute}
+                                    disabled={!incomeAmount || parseFloat(incomeAmount) <= 0 || isDistributing}
+                                    className="block mx-auto border-2 border-red-500 bg-black px-6 py-2 text-xs font-mono font-bold uppercase tracking-wider text-red-500 hover:bg-red-500 hover:text-black transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
+                                >
+                                    {isDistributing ? 'CALCULATING...' : 'DISTRIBUTE'}
+                                </button>
+                                {distribution && (
+                                    <button
+                                        onClick={handleSaveDistribution}
+                                        disabled={isSaving}
+                                        className="block mx-auto border-2 border-red-500 bg-red-500 px-6 py-2 text-xs font-mono font-bold uppercase tracking-wider text-black hover:bg-red-400 transition-colors disabled:opacity-50"
+                                    >
+                                        {isSaving ? 'SAVING...' : 'SAVE'}
+                                    </button>
+                                )}
+                                {distributionError && (
+                                    <p className="text-red-500 font-mono text-xs uppercase tracking-wider">
+                                        {distributionError}
+                                    </p>
+                                )}
+                            </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 +477,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 +497,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>
+            )}
         </>
     );
 }

resources/js/types/index.d.ts

@@ -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;
@@ -32,6 +50,20 @@ export interface Scenario {
     updated_at: string;
 }
 
+export interface AllocationPreview {
+    bucket_id: string;
+    bucket_name: string;
+    bucket_type: string;
+    allocated_amount: number;
+    remaining_capacity: number | null;
+}
+
+export interface DistributionPreview {
+    allocations: AllocationPreview[];
+    total_allocated: number;
+    unallocated: number;
+}
+
 export interface SharedData {
     name: string;
     quote: { message: string; author: string };

routes/web.php

@@ -7,20 +7,13 @@
 use App\Models\Scenario;
 use Illuminate\Support\Facades\Route;
 
-// Single-scenario MVP: redirect root to the default scenario
+// Single scenario: redirect to default
 Route::get('/', function () {
     return redirect()->route('scenarios.show', Scenario::firstOrFail());
 })->name('home');
 
 Route::get('/scenarios/{scenario}', [ScenarioController::class, 'show'])->name('scenarios.show');
-
-// Scenario CRUD routes (hidden for single-scenario MVP, re-enable later)
-// Route::get('/scenarios', [ScenarioController::class, 'index'])->name('scenarios.index');
-// Route::get('/scenarios/create', [ScenarioController::class, 'create'])->name('scenarios.create');
-// Route::post('/scenarios', [ScenarioController::class, 'store'])->name('scenarios.store');
-// Route::get('/scenarios/{scenario}/edit', [ScenarioController::class, 'edit'])->name('scenarios.edit');
 Route::patch('/scenarios/{scenario}', [ScenarioController::class, 'update'])->name('scenarios.update');
-// Route::delete('/scenarios/{scenario}', [ScenarioController::class, 'destroy'])->name('scenarios.destroy');
 
 // Bucket routes (no auth required for MVP)
 Route::get('/scenarios/{scenario}/buckets', [BucketController::class, 'index'])->name('buckets.index');
@@ -41,11 +34,4 @@
 Route::post('/scenarios/{scenario}/projections/preview', [ProjectionController::class, 'preview'])->name('projections.preview');
 Route::post('/scenarios/{scenario}/projections/apply', [ProjectionController::class, 'apply'])->name('projections.apply');
 
-// Auth dashboard (hidden for single-scenario MVP, re-enable later)
-// Route::middleware(['auth', 'verified'])->group(function () {
-//     Route::get('dashboard', function () {
-//         return Inertia::render('dashboard');
-//     })->name('dashboard');
-// });
-
 require __DIR__.'/settings.php';