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