2 - Clean up dead code and restyle inline edit components

app/Http/Controllers/ScenarioController.php

@@ -9,11 +9,8 @@
 use App\Http\Requests\UpdateScenarioRequest;
 use App\Http\Resources\BucketResource;
 use App\Http\Resources\ScenarioResource;
-use App\Http\Resources\StreamResource;
 use App\Models\Scenario;
 use App\Repositories\ScenarioRepository;
-use App\Repositories\StreamRepository;
-use App\Services\Streams\StatsService;
 use Illuminate\Http\JsonResponse;
 use Illuminate\Http\RedirectResponse;
 use Inertia\Inertia;
@@ -23,11 +20,9 @@ class ScenarioController extends Controller
 {
     public function __construct(
         private readonly ScenarioRepository $scenarioRepository,
-        private readonly StreamRepository $streamRepository,
         private readonly CreateScenarioAction $createScenarioAction,
         private readonly UpdateScenarioAction $updateScenarioAction,
         private readonly DeleteScenarioAction $deleteScenarioAction,
-        private readonly StatsService $statsService
     ) {}
 
     public function index(): Response
@@ -46,8 +41,6 @@ public function show(Scenario $scenario): Response
         return Inertia::render('Scenarios/Show', [
             'scenario' => ScenarioResource::make($scenario)->resolve(),
             'buckets' => BucketResource::collection($scenario->buckets),
-            'streams' => StreamResource::collection($this->streamRepository->getForScenario($scenario)),
-            'streamStats' => $this->statsService->getSummaryStats($scenario),
         ]);
     }
 

resources/js/components/AppSidebarHeader.tsx

@@ -32,10 +32,7 @@ export function AppSidebarHeader({
                 </Button>
             </div>
 
-            <SettingsPanel
+            <SettingsPanel onOpenChange={setSettingsOpen} />
-                open={settingsOpen}
-                onOpenChange={setSettingsOpen}
-            />
         </header>
     );
 }

resources/js/components/IncomeDistributionPreview.tsx

@@ -1,220 +0,0 @@
-import { useState } from 'react';
-import { router } from '@inertiajs/react';
-import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
-import { Button } from '@/components/ui/button';
-
-interface Allocation {
-    bucket_id: string;
-    bucket_name: string;
-    bucket_type: 'need' | 'want' | 'overflow';
-    allocated_amount: number;
-    remaining_capacity: number | null;
-}
-
-interface PreviewResult {
-    allocations: Allocation[];
-    total_allocated: number;
-    unallocated: number;
-}
-
-interface IncomeDistributionPreviewProps {
-    scenarioId: string;
-}
-
-const bucketTypeColor = {
-    need: 'bg-blue-100 text-blue-800',
-    want: 'bg-green-100 text-green-800',
-    overflow: 'bg-amber-100 text-amber-800',
-} as const;
-
-const csrfToken = () =>
-    document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
-
-export default function IncomeDistributionPreview({ scenarioId }: IncomeDistributionPreviewProps) {
-    const [amount, setAmount] = useState('');
-    const [preview, setPreview] = useState<PreviewResult | null>(null);
-    const [isLoading, setIsLoading] = useState(false);
-    const [isApplying, setIsApplying] = useState(false);
-    const [error, setError] = useState<string | null>(null);
-    const [applied, setApplied] = useState(false);
-
-    const handleSubmit = async (e: React.FormEvent) => {
-        e.preventDefault();
-        setIsLoading(true);
-        setError(null);
-        setApplied(false);
-
-        const parsed = parseFloat(amount);
-        if (isNaN(parsed) || parsed <= 0) {
-            setError('Please enter a valid amount');
-            setIsLoading(false);
-            return;
-        }
-
-        try {
-            const response = await fetch(`/scenarios/${scenarioId}/projections/preview`, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                    'X-CSRF-TOKEN': csrfToken(),
-                },
-                body: JSON.stringify({ amount: Math.round(parsed * 100) }),
-            });
-
-            if (!response.ok) {
-                let message = 'Failed to preview allocation';
-                try {
-                    const data = await response.json();
-                    message = data.message || message;
-                } catch { /* non-JSON error body */ }
-                setError(message);
-                setPreview(null);
-                return;
-            }
-
-            const data: PreviewResult = await response.json();
-            setPreview(data);
-        } catch {
-            setError('Failed to connect to server');
-            setPreview(null);
-        } finally {
-            setIsLoading(false);
-        }
-    };
-
-    const handleApply = async () => {
-        if (isApplying) return;
-
-        const parsed = parseFloat(amount);
-        if (isNaN(parsed) || parsed <= 0) return;
-
-        setIsApplying(true);
-        setError(null);
-
-        try {
-            const response = await fetch(`/scenarios/${scenarioId}/projections/apply`, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                    'X-CSRF-TOKEN': csrfToken(),
-                },
-                body: JSON.stringify({ amount: Math.round(parsed * 100) }),
-            });
-
-            if (!response.ok) {
-                let message = 'Failed to save distribution';
-                try {
-                    const data = await response.json();
-                    message = data.message || message;
-                } catch { /* non-JSON error body */ }
-                setError(message);
-                return;
-            }
-
-            setPreview(null);
-            setAmount('');
-            setApplied(true);
-            router.reload({ only: ['buckets'] });
-        } catch {
-            setError('Failed to connect to server');
-        } finally {
-            setIsApplying(false);
-        }
-    };
-
-    return (
-        <Card>
-            <CardHeader>
-                <CardTitle>Income Distribution Preview</CardTitle>
-            </CardHeader>
-            <CardContent>
-                <form onSubmit={handleSubmit} className="flex gap-3 items-end">
-                    <div className="flex-1">
-                        <label htmlFor="preview-amount" className="block text-sm font-medium text-gray-700 mb-1">
-                            Income Amount ($)
-                        </label>
-                        <input
-                            type="number"
-                            id="preview-amount"
-                            value={amount}
-                            onChange={(e) => setAmount(e.target.value)}
-                            className="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-gray-900"
-                            placeholder="e.g., 3000"
-                            step="0.01"
-                            min="0.01"
-                            required
-                        />
-                    </div>
-                    <Button type="submit" disabled={isLoading || isApplying}>
-                        {isLoading ? 'Loading...' : 'Preview Distribution'}
-                    </Button>
-                </form>
-
-                {error && (
-                    <div className="mt-4 rounded-md bg-red-50 p-3 text-sm text-red-700">
-                        {error}
-                    </div>
-                )}
-
-                {applied && (
-                    <div className="mt-4 rounded-md bg-green-50 p-3 text-sm text-green-700">
-                        Distribution saved successfully. Bucket balances have been updated.
-                    </div>
-                )}
-
-                {preview && (
-                    <div className="mt-6 space-y-4">
-                        {preview.allocations.length > 0 ? (
-                            <div className="divide-y divide-gray-200 rounded-md border border-gray-200">
-                                {preview.allocations.map((allocation) => (
-                                    <div key={allocation.bucket_id} className="flex items-center justify-between px-4 py-3">
-                                        <div className="flex items-center gap-2">
-                                            <span className={`inline-flex rounded-full px-2 py-0.5 text-xs font-semibold ${bucketTypeColor[allocation.bucket_type]}`}>
-                                                {allocation.bucket_type}
-                                            </span>
-                                            <span className="font-medium text-gray-900">{allocation.bucket_name}</span>
-                                        </div>
-                                        <div className="text-right">
-                                            <span className="font-semibold text-gray-900">
-                                                ${(allocation.allocated_amount / 100).toFixed(2)}
-                                            </span>
-                                            {allocation.remaining_capacity !== null && (
-                                                <span className="ml-2 text-sm text-gray-500">
-                                                    (${(allocation.remaining_capacity / 100).toFixed(2)} remaining)
-                                                </span>
-                                            )}
-                                        </div>
-                                    </div>
-                                ))}
-                            </div>
-                        ) : (
-                            <p className="text-sm text-gray-500">No buckets to allocate to.</p>
-                        )}
-
-                        <div className="flex justify-between rounded-md bg-gray-50 px-4 py-3 text-sm font-medium">
-                            <span className="text-gray-700">Total Allocated</span>
-                            <span className="text-gray-900">${(preview.total_allocated / 100).toFixed(2)}</span>
-                        </div>
-
-                        {preview.unallocated > 0 && (
-                            <div className="flex justify-between rounded-md bg-amber-50 px-4 py-3 text-sm font-medium">
-                                <span className="text-amber-700">Unallocated</span>
-                                <span className="text-amber-900">${(preview.unallocated / 100).toFixed(2)}</span>
-                            </div>
-                        )}
-
-                        {preview.allocations.length > 0 && (
-                            <Button
-                                onClick={handleApply}
-                                disabled={isApplying}
-                                className="w-full"
-                            >
-                                {isApplying ? 'Saving...' : 'Save Distribution'}
-                            </Button>
-                        )}
-                    </div>
-                )}
-            </CardContent>
-        </Card>
-    );
-}

resources/js/components/InlineEditInput.tsx

@@ -113,7 +113,7 @@ export default function InlineEditInput(props: InlineEditInputProps) {
                 min={props.type !== 'text' ? props.min : undefined}
                 step={props.type !== 'text' ? props.step : undefined}
                 disabled={status === 'saving'}
-                className={`rounded border border-blue-300 bg-white px-2 py-0.5 text-sm text-gray-900 outline-none focus:ring-2 focus:ring-blue-500 ${isText ? 'w-48' : 'w-24'} ${className}`}
+                className={`border border-red-500 bg-black px-2 py-0.5 text-sm text-red-500 font-mono outline-none focus:ring-1 focus:ring-red-500 ${isText ? 'w-48' : 'w-24'} ${className}`}
             />
         );
     }
@@ -123,13 +123,13 @@ export default function InlineEditInput(props: InlineEditInputProps) {
             onClick={startEditing}
             className={`inline-flex items-center gap-1 ${
                 disabled
-                    ? 'cursor-default text-gray-400'
+                    ? 'cursor-default text-red-500/30'
-                    : 'cursor-pointer rounded px-1 py-0.5 hover:bg-blue-50 hover:text-blue-700'
+                    : 'cursor-pointer px-1 py-0.5 hover:text-red-300'
             } ${className}`}
         >
             {displayValue}
-            {status === 'success' && <span className="text-green-600">✓</span>}
+            {status === 'success' && <span className="text-green-500 font-mono text-xs">OK</span>}
-            {status === 'error' && <span className="text-red-600">✗</span>}
+            {status === 'error' && <span className="text-red-500 font-mono text-xs">ERR</span>}
         </span>
     );
 }

resources/js/components/InlineEditSelect.tsx

@@ -70,7 +70,7 @@ export default function InlineEditSelect({
                 onChange={handleChange}
                 onBlur={handleBlur}
                 disabled={status === 'saving'}
-                className={`rounded border border-blue-300 bg-white px-2 py-0.5 text-sm text-gray-900 outline-none focus:ring-2 focus:ring-blue-500 ${className}`}
+                className={`border border-red-500 bg-black px-2 py-0.5 text-sm text-red-500 font-mono outline-none focus:ring-1 focus:ring-red-500 ${className}`}
             >
                 {options.map((opt) => (
                     <option key={opt.value} value={opt.value}>
@@ -86,13 +86,13 @@ export default function InlineEditSelect({
             onClick={startEditing}
             className={`inline-flex items-center gap-1 ${
                 disabled
-                    ? 'cursor-default text-gray-400'
+                    ? 'cursor-default text-red-500/30'
-                    : 'cursor-pointer rounded px-1 py-0.5 hover:bg-blue-50 hover:text-blue-700'
+                    : 'cursor-pointer px-1 py-0.5 hover:text-red-300'
             } ${className}`}
         >
             {displayLabel || value}
-            {status === 'success' && <span className="text-green-600">✓</span>}
+            {status === 'success' && <span className="text-green-500 font-mono text-xs">OK</span>}
-            {status === 'error' && <span className="text-red-600">✗</span>}
+            {status === 'error' && <span className="text-red-500 font-mono text-xs">ERR</span>}
         </span>
     );
 }

resources/js/components/SettingsPanel.tsx

@@ -27,7 +27,6 @@ const distributionOptions: DistributionOption[] = [
 ];
 
 interface SettingsPanelProps {
-    open: boolean;
     onOpenChange: (open: boolean) => void;
 }
 

resources/js/pages/Scenarios/Show.tsx

@@ -183,15 +183,12 @@ export default function Show({ scenario, buckets }: Props) {
                         className="overflow-hidden transition-all duration-300 ease-in-out"
                         style={{ maxHeight: isSettingsOpen ? '500px' : '0', opacity: isSettingsOpen ? 1 : 0 }}
                     >
-                        <SettingsPanel open={isSettingsOpen} onOpenChange={setIsSettingsOpen} />
+                        <SettingsPanel onOpenChange={setIsSettingsOpen} />
                     </div>
 
                     {/* Buckets */}
                     <div className="space-y-6">
-                        <div className="flex items-center justify-between">
+                        <div className="flex items-center justify-end">
-                            <h2 className="text-lg font-mono font-bold tracking-wider uppercase text-red-500">
-                                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"