lvl0/buckets
1
0
Fork 0
Code Issues 11 Pull requests 1 Projects Releases Packages Wiki Activity Actions

2 - Restructure layout from grid to flex for distribution lines

Browse source
This commit is contained in:
myrmidex 2026-03-22 15:07:57 +01:00
parent 4006c7d2f3
commit 7938677950
1 changed files with 15 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
resources/js/pages/Scenarios/Show.tsx
View file

@ -1,6 +1,6 @@
import { Head, router } from '@inertiajs/react'; import { Head, router } from '@inertiajs/react';
import { Settings } from 'lucide-react'; import { Settings } from 'lucide-react';
import { useState } from 'react'; import { useRef, useState } from 'react';
import BucketCard from '@/components/BucketCard'; import BucketCard from '@/components/BucketCard';
import InlineEditInput from '@/components/InlineEditInput'; import InlineEditInput from '@/components/InlineEditInput';
import InlineEditSelect from '@/components/InlineEditSelect'; import InlineEditSelect from '@/components/InlineEditSelect';
@ -60,6 +60,9 @@ export default function Show({ scenario, buckets }: Props) {
const [isSettingsOpen, setIsSettingsOpen] = useState(false); const [isSettingsOpen, setIsSettingsOpen] = useState(false);
const [isSubmitting, setIsSubmitting] = useState(false); const [isSubmitting, setIsSubmitting] = useState(false);
const [formData, setFormData] = useState({ ...defaultFormData }); const [formData, setFormData] = useState({ ...defaultFormData });
const containerRef = useRef<HTMLDivElement>(null);
const incomeRef = useRef<HTMLDivElement>(null);
const bucketRefs = useRef<Map<string, HTMLElement>>(new Map());
const openCreateModal = () => { const openCreateModal = () => {
setFormData({ ...defaultFormData }); setFormData({ ...defaultFormData });
@ -164,10 +167,10 @@ export default function Show({ scenario, buckets }: Props) {
<SettingsPanel onOpenChange={setIsSettingsOpen} /> <SettingsPanel onOpenChange={setIsSettingsOpen} />
</div> </div>
{/* Two-column layout */} {/* Buckets + Distribution + Income */}
<div className="grid grid-cols-2 gap-8"> <div ref={containerRef} className="relative flex items-start gap-0">
{/* Left: Buckets */} {/* Left: Buckets */}
<div className="space-y-4"> <div className="w-2/5 shrink-0 space-y-4">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<h2 className="text-sm font-mono font-bold tracking-wider uppercase text-red-500/60"> <h2 className="text-sm font-mono font-bold tracking-wider uppercase text-red-500/60">
BUCKETS BUCKETS
@ -201,6 +204,10 @@ export default function Show({ scenario, buckets }: Props) {
<button <button
key={bucket.id} key={bucket.id}
type="button" type="button"
ref={(el) => {
if (el) bucketRefs.current.set(bucket.id, el);
else bucketRefs.current.delete(bucket.id);
}}
onClick={() => setEditingBucket(bucket)} 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" className="w-full border-4 border-red-500 bg-black glow-red transition-all text-left hover:border-red-400 cursor-pointer"
> >
@ -211,8 +218,11 @@ export default function Show({ scenario, buckets }: Props) {
)} )}
</div> </div>
{/* Middle: Connector area (SVG lines render here) */}
<div className="flex-1" />
{/* Right: Income */} {/* Right: Income */}
<div> <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"> <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"> <h2 className="text-sm font-mono font-bold tracking-wider uppercase text-red-500/60">
INCOME INCOME