Compare commits
10 commits
ced02a2ab2
...
cf6f0c76c2
| Author | SHA1 | Date | |
|---|---|---|---|
| cf6f0c76c2 | |||
| afc65b4f3a | |||
| 98d355e811 | |||
| a07d916663 | |||
| c2d2262488 | |||
| 46dc09783e | |||
| 7b92423fb9 | |||
| 5ac8d48727 | |||
| 7938677950 | |||
| 4006c7d2f3 |
15 changed files with 641 additions and 483 deletions
|
|
@ -1,13 +0,0 @@
|
|||
<?php
|
||||
|
||||
namespace App\Actions;
|
||||
|
||||
use App\Models\Scenario;
|
||||
|
||||
readonly class DeleteScenarioAction
|
||||
{
|
||||
public function execute(Scenario $scenario): void
|
||||
{
|
||||
$scenario->delete();
|
||||
}
|
||||
}
|
||||
|
|
@ -30,5 +30,4 @@ public function getAllocationValueRules(): array
|
|||
self::UNLIMITED => ['nullable'],
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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),
|
||||
]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -28,6 +28,7 @@ class Draw extends Model
|
|||
|
||||
/** @use HasFactory<DrawFactory> */
|
||||
use HasFactory;
|
||||
|
||||
use HasProjectionStatus;
|
||||
use HasUuid;
|
||||
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@ class Outflow extends Model
|
|||
|
||||
/** @use HasFactory<OutflowFactory> */
|
||||
use HasFactory;
|
||||
|
||||
use HasProjectionStatus;
|
||||
use HasUuid;
|
||||
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
|
|
@ -13,6 +13,7 @@
|
|||
readonly class PipelineAllocationService
|
||||
{
|
||||
private const string CAP_BASE = 'base';
|
||||
|
||||
private const string CAP_FILL = 'fill';
|
||||
|
||||
/**
|
||||
|
|
|
|||
57
resources/js/components/BucketCard.tsx
Normal file
57
resources/js/components/BucketCard.tsx
Normal file
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
57
resources/js/components/DigitalProgressBar.tsx
Normal file
57
resources/js/components/DigitalProgressBar.tsx
Normal file
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
149
resources/js/components/DistributionLines.tsx
Normal file
149
resources/js/components/DistributionLines.tsx
Normal file
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -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';
|
||||
|
||||
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;
|
||||
}
|
||||
import { type Bucket, type DistributionPreview, type Scenario } from '@/types';
|
||||
|
||||
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,190 +251,118 @@ export default function Show({ scenario, buckets }: Props) {
|
|||
<SettingsPanel onOpenChange={setIsSettingsOpen} />
|
||||
</div>
|
||||
|
||||
{/* Buckets */}
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-end">
|
||||
<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"
|
||||
>
|
||||
+ ADD BUCKET
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{buckets.data.length === 0 ? (
|
||||
<div className="border-4 border-red-500 bg-black p-8 text-center glow-red">
|
||||
<p className="text-red-500 font-mono uppercase tracking-wider mb-4">
|
||||
NO BUCKETS CONFIGURED
|
||||
</p>
|
||||
<p className="text-red-500/60 font-mono text-sm mb-6">
|
||||
Income flows through your pipeline into prioritized buckets.
|
||||
</p>
|
||||
{/* Buckets + Distribution + Income */}
|
||||
<div ref={containerRef} className="relative flex items-start gap-0">
|
||||
{/* 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-6 py-3 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"
|
||||
>
|
||||
CREATE FIRST BUCKET
|
||||
+ ADD
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{buckets.data.map((bucket) => (
|
||||
<div
|
||||
key={bucket.id}
|
||||
className="border-4 border-red-500 bg-black p-6 glow-red transition-all"
|
||||
|
||||
{buckets.data.length === 0 ? (
|
||||
<div className="border-4 border-red-500 bg-black p-8 text-center glow-red">
|
||||
<p className="text-red-500 font-mono uppercase tracking-wider mb-4">
|
||||
NO BUCKETS CONFIGURED
|
||||
</p>
|
||||
<p className="text-red-500/60 font-mono text-sm mb-6">
|
||||
Income flows through your pipeline into prioritized buckets.
|
||||
</p>
|
||||
<button
|
||||
onClick={openCreateModal}
|
||||
className="border-2 border-red-500 bg-black px-6 py-3 font-mono font-bold uppercase tracking-wider text-red-500 hover:bg-red-500 hover:text-black transition-colors"
|
||||
>
|
||||
{/* Header: name + priority */}
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<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"
|
||||
CREATE FIRST BUCKET
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-6 px-4">
|
||||
{buckets.data.map((bucket) => (
|
||||
<button
|
||||
key={bucket.id}
|
||||
type="button"
|
||||
ref={(el) => {
|
||||
if (el) bucketRefs.current.set(bucket.id, el);
|
||||
else bucketRefs.current.delete(bucket.id);
|
||||
}}
|
||||
onClick={() => setEditingBucket(bucket)}
|
||||
className="w-full border-4 border-red-500 bg-black glow-red transition-all text-left hover:border-red-400 cursor-pointer"
|
||||
>
|
||||
<BucketCard
|
||||
bucket={bucket}
|
||||
projectedAmount={distribution?.allocations.find(a => a.bucket_id === bucket.id)?.allocated_amount}
|
||||
/>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</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>
|
||||
{/* Middle: Connector area (SVG lines render here) */}
|
||||
<div className="flex-1" />
|
||||
|
||||
{/* 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)}%`
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</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
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{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>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
32
resources/js/types/index.d.ts
vendored
32
resources/js/types/index.d.ts
vendored
|
|
@ -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 };
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
Loading…
Reference in a new issue