Proyecciones: clicking a month row opens that month in Budget

The clicked year/month now travel in the navigation state; Budget
seeds useBudget with them instead of always defaulting to today.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Carlos Escalante
2026-07-03 20:40:09 -06:00
parent f832138b41
commit 72a5840752
3 changed files with 17 additions and 8 deletions

View File

@@ -16,11 +16,11 @@ import {
/** All budget data hangs off the ['budget', ...] key family; every mutation /** All budget data hangs off the ['budget', ...] key family; every mutation
* invalidates the family so projection, month detail and items stay in sync. */ * invalidates the family so projection, month detail and items stay in sync. */
export function useBudget(initialYear: number) { export function useBudget(initialYear: number, initialMonth?: number) {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const [year, setYear] = useState(initialYear); const [year, setYear] = useState(initialYear);
const [selectedMonth, setSelectedMonth] = useState<number>( const [selectedMonth, setSelectedMonth] = useState<number>(
new Date().getMonth() + 1, initialMonth ?? new Date().getMonth() + 1,
); );
const projectionQ = useQuery({ const projectionQ = useQuery({

View File

@@ -22,6 +22,17 @@ const MAX_YEAR = 2030;
export default function Budget() { export default function Budget() {
const currentYear = Math.max(MIN_YEAR, new Date().getFullYear()); const currentYear = Math.max(MIN_YEAR, new Date().getFullYear());
const location = useLocation();
const navigate = useNavigate();
// Proyecciones row clicks land here with the clicked period in the state.
const navState = location.state as
| { from?: string; year?: number; month?: number }
| null;
const cameFromProyecciones = navState?.from === 'proyecciones';
const initialYear =
navState?.year && navState.year >= MIN_YEAR && navState.year <= MAX_YEAR
? navState.year
: currentYear;
const { const {
year, year,
setYear, setYear,
@@ -35,12 +46,8 @@ export default function Budget() {
updateItem, updateItem,
deleteItem, deleteItem,
refresh, refresh,
} = useBudget(currentYear); } = useBudget(initialYear, navState?.month);
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const location = useLocation();
const navigate = useNavigate();
const cameFromProyecciones =
(location.state as { from?: string } | null)?.from === 'proyecciones';
const [subTab, setSubTab] = useState<'detail' | 'transactions'>('detail'); const [subTab, setSubTab] = useState<'detail' | 'transactions'>('detail');
const [txSearch, setTxSearch] = useState(''); const [txSearch, setTxSearch] = useState('');

View File

@@ -99,7 +99,9 @@ export default function Proyecciones() {
year={year} year={year}
onSelectMonth={(m) => { onSelectMonth={(m) => {
setSelectedMonth(m); setSelectedMonth(m);
navigate('/budget', { state: { from: 'proyecciones' } }); navigate('/budget', {
state: { from: 'proyecciones', year, month: m },
});
}} }}
onSaveOverride={async (month, value) => { onSaveOverride={async (month, value) => {
await saveBalanceOverride(year, month, value); await saveBalanceOverride(year, month, value);