diff --git a/apps/web/src/components/dashboard/widgets/ChargeabilityWidget.tsx b/apps/web/src/components/dashboard/widgets/ChargeabilityWidget.tsx index bfbd638..f1669fa 100644 --- a/apps/web/src/components/dashboard/widgets/ChargeabilityWidget.tsx +++ b/apps/web/src/components/dashboard/widgets/ChargeabilityWidget.tsx @@ -145,6 +145,23 @@ export function ChargeabilityWidget({ config: _config, onConfigChange }: WidgetP setWatchVisibleCount(batchSize); }, [batchSize, includeProposed, selectedCountryIds, showDeparted]); + // These useMemo hooks MUST be before any early return to respect Rules of Hooks + const rawTop = data?.top ?? []; + const rawWatch = data?.watchlist ?? []; + const month = (data?.month as string) ?? ""; + + const filteredTop = useMemo(() => { + const arr = rawTop as ChargeabilityRow[]; + if (!chapterFilter) return arr; + return arr.filter((r) => r.chapter === chapterFilter); + }, [rawTop, chapterFilter]); + + const filteredWatch = useMemo(() => { + const arr = rawWatch as ChargeabilityRow[]; + if (!chapterFilter) return arr; + return arr.filter((r) => r.chapter === chapterFilter); + }, [rawWatch, chapterFilter]); + if (isLoading) { return (
@@ -171,22 +188,6 @@ export function ChargeabilityWidget({ config: _config, onConfigChange }: WidgetP ); } - const rawTop = data?.top ?? []; - const rawWatch = data?.watchlist ?? []; - const month = (data?.month as string) ?? ""; - - const filteredTop = useMemo(() => { - const arr = rawTop as ChargeabilityRow[]; - if (!chapterFilter) return arr; - return arr.filter((r) => r.chapter === chapterFilter); - }, [rawTop, chapterFilter]); - - const filteredWatch = useMemo(() => { - const arr = rawWatch as ChargeabilityRow[]; - if (!chapterFilter) return arr; - return arr.filter((r) => r.chapter === chapterFilter); - }, [rawWatch, chapterFilter]); - const top = ([...filteredTop]).sort((a, b) => { const mult = topDir === "asc" ? 1 : -1; switch (topSort) {