82040abc74
Apply the compare report's "result analysis" presentation to Trends -> By category (table view). Categories are grouped into Income -> Expenses -> Transfers sections with per-month and total subtotals; the old mixed "Total" row (which summed absolute magnitudes into a meaningless figure) is replaced by a Net result row per month (income - expenses + transfers) plus a Result before transfers row shown only when transfers exist, both coloured by sign. Category cells stay neutral levels. - reportService.getCategoryOverTime: project COALESCE(c.type,'expense') in both SELECTs and return an additive `types` map (built from the top-N rows, like `colors`). Dashboard widget and CategoryOverTimeChart are untouched. - shared types: add `types` to CategoryOverTimeData. - new pure module overTimeResults.ts (computeOverTimeResults) with unit tests - the per-month result reducer, mirroring the compare's pure Totals helper. - i18n: add reports.compare.resultNet / resultBeforeTransfers (FR+EN); reuse the existing sections.* and total* keys. - .gitignore: anchor the autopilot `reports/` rule to `/reports/` so it no longer swallows new files under src/components/reports/. Section order is income-first (Revenus -> Depenses -> Transferts), per the issue; the existing COMPARE_TYPE_ORDER is expense-first, so a local OVER_TIME_TYPE_ORDER is used rather than reusing it. Resolves #256 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
81 lines
2.7 KiB
TypeScript
81 lines
2.7 KiB
TypeScript
import { useReducer, useEffect, useRef, useCallback } from "react";
|
|
import type { MonthlyTrendItem, CategoryOverTimeData } from "../shared/types";
|
|
import { getMonthlyTrends, getCategoryOverTime } from "../services/reportService";
|
|
import { useReportsPeriod } from "./useReportsPeriod";
|
|
|
|
export type TrendsSubView = "global" | "byCategory";
|
|
|
|
interface State {
|
|
subView: TrendsSubView;
|
|
monthlyTrends: MonthlyTrendItem[];
|
|
categoryOverTime: CategoryOverTimeData;
|
|
isLoading: boolean;
|
|
error: string | null;
|
|
}
|
|
|
|
type Action =
|
|
| { type: "SET_SUBVIEW"; payload: TrendsSubView }
|
|
| { type: "SET_LOADING"; payload: boolean }
|
|
| { type: "SET_TRENDS"; payload: MonthlyTrendItem[] }
|
|
| { type: "SET_CATEGORY_OVER_TIME"; payload: CategoryOverTimeData }
|
|
| { type: "SET_ERROR"; payload: string };
|
|
|
|
const initialState: State = {
|
|
subView: "global",
|
|
monthlyTrends: [],
|
|
categoryOverTime: { categories: [], data: [], colors: {}, categoryIds: {}, types: {} },
|
|
isLoading: false,
|
|
error: null,
|
|
};
|
|
|
|
function reducer(state: State, action: Action): State {
|
|
switch (action.type) {
|
|
case "SET_SUBVIEW":
|
|
return { ...state, subView: action.payload };
|
|
case "SET_LOADING":
|
|
return { ...state, isLoading: action.payload };
|
|
case "SET_TRENDS":
|
|
return { ...state, monthlyTrends: action.payload, isLoading: false, error: null };
|
|
case "SET_CATEGORY_OVER_TIME":
|
|
return { ...state, categoryOverTime: action.payload, isLoading: false, error: null };
|
|
case "SET_ERROR":
|
|
return { ...state, error: action.payload, isLoading: false };
|
|
default:
|
|
return state;
|
|
}
|
|
}
|
|
|
|
export function useTrends() {
|
|
const { from, to } = useReportsPeriod();
|
|
const [state, dispatch] = useReducer(reducer, initialState);
|
|
const fetchIdRef = useRef(0);
|
|
|
|
const fetch = useCallback(async (subView: TrendsSubView, dateFrom: string, dateTo: string) => {
|
|
const id = ++fetchIdRef.current;
|
|
dispatch({ type: "SET_LOADING", payload: true });
|
|
try {
|
|
if (subView === "global") {
|
|
const data = await getMonthlyTrends(dateFrom, dateTo);
|
|
if (id !== fetchIdRef.current) return;
|
|
dispatch({ type: "SET_TRENDS", payload: data });
|
|
} else {
|
|
const data = await getCategoryOverTime(dateFrom, dateTo);
|
|
if (id !== fetchIdRef.current) return;
|
|
dispatch({ type: "SET_CATEGORY_OVER_TIME", payload: data });
|
|
}
|
|
} catch (e) {
|
|
if (id !== fetchIdRef.current) return;
|
|
dispatch({ type: "SET_ERROR", payload: e instanceof Error ? e.message : String(e) });
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
fetch(state.subView, from, to);
|
|
}, [fetch, state.subView, from, to]);
|
|
|
|
const setSubView = useCallback((sv: TrendsSubView) => {
|
|
dispatch({ type: "SET_SUBVIEW", payload: sv });
|
|
}, []);
|
|
|
|
return { ...state, setSubView, from, to };
|
|
}
|