fix(budgets): explain locked edit fields (#437)

## Summary
- add disclaimer for locked period and carry-over budget fields
- cover disclaimer rendering with Vitest

## Tests
- npm run test --
resources/js/components/budgets/edit-budget-dialog.test.tsx

lang/es.json

@@ -1008,6 +1008,7 @@
     "Period": "Período",
     "Period Duration (days)": "Duración del Período (días)",
     "Period Type": "Tipo de Período",
+    "Period and carry-over settings cannot be changed after a budget is created because budgets are calculated historically. If you need different settings, delete this budget and create a new one.": "La configuración de período y arrastre no se puede cambiar después de crear un presupuesto porque los presupuestos se calculan históricamente. Si necesitas una configuración diferente, elimina este presupuesto y crea uno nuevo.",
     "Personal transfers": "Transferencias personales",
     "Peruvian Sol": "Sol peruano",
     "Pick whichever plan fits you, paste the matching code at checkout, and you are set.": "Elige el plan que prefieras, pega el código correspondiente al pagar y listo.",

resources/js/components/budgets/edit-budget-dialog.test.tsx

@@ -0,0 +1,53 @@
+import type { Budget } from '@/types/budget';
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { EditBudgetDialog } from './edit-budget-dialog';
+
+vi.mock('@inertiajs/react', () => ({
+    router: {
+        patch: vi.fn(),
+    },
+}));
+
+vi.mock('@/actions/App/Http/Controllers/BudgetController', () => ({
+    update: () => ({ url: '/budgets/budget-1' }),
+}));
+
+vi.mock('@/components/ui/amount-input', () => ({
+    AmountInput: () => <input aria-label="Allocated Amount" />,
+}));
+
+function makeBudget(): Budget {
+    return {
+        id: 'budget-1',
+        user_id: 'user-1',
+        name: 'Monthly budget',
+        period_type: 'monthly',
+        period_start_day: 1,
+        category_id: null,
+        label_id: null,
+        rollover_type: 'carry_over',
+        created_at: '2026-05-26T00:00:00.000000Z',
+        updated_at: '2026-05-26T00:00:00.000000Z',
+        deleted_at: null,
+    };
+}
+
+describe('EditBudgetDialog', () => {
+    it('explains locked budget period and carry-over fields', () => {
+        render(
+            <EditBudgetDialog
+                budget={makeBudget()}
+                currentPeriod={{ allocated_amount: 10000 }}
+                open={true}
+                onOpenChange={vi.fn()}
+            />,
+        );
+
+        expect(
+            screen.getByText(
+                'Period and carry-over settings cannot be changed after a budget is created because budgets are calculated historically. If you need different settings, delete this budget and create a new one.',
+            ),
+        ).toBeInTheDocument();
+    });
+});

resources/js/components/budgets/edit-budget-dialog.tsx

@@ -1,4 +1,5 @@
 import { update } from '@/actions/App/Http/Controllers/BudgetController';
+import { Alert, AlertDescription } from '@/components/ui/alert';
 import { AmountInput } from '@/components/ui/amount-input';
 import { Button } from '@/components/ui/button';
 import {
@@ -29,6 +30,7 @@ import {
 } from '@/types/budget';
 import { __ } from '@/utils/i18n';
 import { router } from '@inertiajs/react';
+import { Info } from 'lucide-react';
 import { useEffect, useState } from 'react';
 
 interface Props {
@@ -107,6 +109,15 @@ export function EditBudgetDialog({
                     </DialogHeader>
 
                     <div className="space-y-4 py-4">
+                        <Alert>
+                            <Info className="h-4 w-4 opacity-50" />
+                            <AlertDescription>
+                                {__(
+                                    'Period and carry-over settings cannot be changed after a budget is created because budgets are calculated historically. If you need different settings, delete this budget and create a new one.',
+                                )}
+                            </AlertDescription>
+                        </Alert>
+
                         <div className="space-y-2">
                             <Label htmlFor="name">{__('Budget Name')}</Label>
                             <Input