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

2 - Add visible error feedback for distribution preview and save

Browse source
This commit is contained in:
myrmidex 2026-03-22 16:43:59 +01:00
parent 46dc09783e
commit c2d2262488
1 changed files with 13 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -65,6 +65,7 @@ export default function Show({ scenario, buckets }: Props) {
const [distribution, setDistribution] = useState<DistributionPreview | null>(null); const [distribution, setDistribution] = useState<DistributionPreview | null>(null);
const [isDistributing, setIsDistributing] = useState(false); const [isDistributing, setIsDistributing] = useState(false);
const [isSaving, setIsSaving] = useState(false); const [isSaving, setIsSaving] = useState(false);
const [distributionError, setDistributionError] = useState<string | null>(null);
const containerRef = useRef<HTMLDivElement>(null); const containerRef = useRef<HTMLDivElement>(null);
const incomeRef = useRef<HTMLDivElement>(null); const incomeRef = useRef<HTMLDivElement>(null);
const bucketRefs = useRef<Map<string, HTMLElement>>(new Map()); const bucketRefs = useRef<Map<string, HTMLElement>>(new Map());
@ -74,6 +75,7 @@ export default function Show({ scenario, buckets }: Props) {
if (!dollars || dollars <= 0) return; if (!dollars || dollars <= 0) return;
setIsDistributing(true); setIsDistributing(true);
setDistributionError(null);
try { try {
const response = await fetch(`/scenarios/${scenario.id}/projections/preview`, { const response = await fetch(`/scenarios/${scenario.id}/projections/preview`, {
method: 'POST', method: 'POST',
@ -87,10 +89,10 @@ export default function Show({ scenario, buckets }: Props) {
if (response.ok) { if (response.ok) {
setDistribution(await response.json()); setDistribution(await response.json());
} else { } else {
console.error('Distribution preview failed:', response.status, await response.text()); setDistributionError('DISTRIBUTION FAILED');
} }
} catch (error) { } catch (error) {
console.error('Error fetching distribution preview:', error); setDistributionError('CONNECTION ERROR');
} finally { } finally {
setIsDistributing(false); setIsDistributing(false);
} }
@ -101,6 +103,7 @@ export default function Show({ scenario, buckets }: Props) {
if (!dollars || dollars <= 0 || !distribution) return; if (!dollars || dollars <= 0 || !distribution) return;
setIsSaving(true); setIsSaving(true);
setDistributionError(null);
try { try {
const response = await fetch(`/scenarios/${scenario.id}/projections/apply`, { const response = await fetch(`/scenarios/${scenario.id}/projections/apply`, {
method: 'POST', method: 'POST',
@ -116,10 +119,10 @@ export default function Show({ scenario, buckets }: Props) {
setIncomeAmount(''); setIncomeAmount('');
router.reload({ only: ['buckets'] }); router.reload({ only: ['buckets'] });
} else { } else {
console.error('Apply distribution failed:', response.status, await response.text()); setDistributionError('SAVE FAILED');
} }
} catch (error) { } catch (error) {
console.error('Error applying distribution:', error); setDistributionError('CONNECTION ERROR');
} finally { } finally {
setIsSaving(false); setIsSaving(false);
} }
@ -128,6 +131,7 @@ export default function Show({ scenario, buckets }: Props) {
const handleIncomeChange = (e: React.ChangeEvent<HTMLInputElement>) => { const handleIncomeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setIncomeAmount(e.target.value); setIncomeAmount(e.target.value);
setDistribution(null); setDistribution(null);
setDistributionError(null);
}; };
const openCreateModal = () => { const openCreateModal = () => {
@ -329,6 +333,11 @@ export default function Show({ scenario, buckets }: Props) {
{isSaving ? 'SAVING...' : 'SAVE'} {isSaving ? 'SAVING...' : 'SAVE'}
</button> </button>
)} )}
{distributionError && (
<p className="text-red-500 font-mono text-xs uppercase tracking-wider">
{distributionError}
</p>
)}
</div> </div>
</div> </div>
</div> </div>