all period types

src/Dashboard.tsx

@@ -11,9 +11,7 @@ import { configuration } from "./dashboard-config";
 import { useDashboardData } from "./features/dashboard";
 
 export default function Dashboard() {
-  const [mode, setMode] = React.useState<"expense" | "income">("expense");
+  const { data, isLoading, error } = useDashboardData();
-  const [selectedPeriodId, setSelectedPeriodId] = React.useState<string | null>(null);
-  const { data, latest, isLoading, error } = useDashboardData(mode);
 
   if (isLoading) {
     return (
@@ -39,10 +37,6 @@ export default function Dashboard() {
     <ConfigurableDashboard
       config={configuration}
       data={data}
-      latest={latest}
-      onModeChange={(newMode) => setMode(newMode)}
-      selectedPeriodId={selectedPeriodId}
-      onSelectPeriodId={(newPeriodId) => setSelectedPeriodId(newPeriodId)}
     />
   );
 }

src/components/Dashboard/Dashboard.models.ts

@@ -2,10 +2,12 @@ import * as React from "react";
 
 export type DashboardMode = "expense" | "income";
 export type DashboardPeriodType = "rolling" | "calendar";
+export type DashboardSelectedPeriodId = string | null;
 
 export interface DashboardState {
   mode: DashboardMode;
   periodType: DashboardPeriodType;
+  selectedPeriodId: DashboardSelectedPeriodId;
   comparison: boolean;
 }
 
@@ -14,7 +16,7 @@ export interface DashboardSection {
   title?: string;
   summary?: string;
   component: React.ComponentType<any>;
-  dataKey?: string;
+  dataKey: string;
   settings?: Record<string, any>;
   isList?: boolean;
   style?: {
@@ -43,9 +45,9 @@ export interface DashboardConfig {
 
 export interface DashboardProps {
   config: DashboardConfig;
-  data: any; // Aggregated data from features
+  data: any;
-  latest: any[]; // Latest items from features
+  toggleMode: () => void;
-  onModeChange?: (mode: DashboardMode) => void;
+  togglePeriodType: () => void;
-  selectedPeriodId: string | null;
+  setSelectedPeriodId: (id: string | null) => void;
-  onSelectPeriodId: (id: string | null) => void;
+  toggleComparison: () => void;
 }

src/components/Dashboard/Dashboard.tsx

@@ -6,14 +6,44 @@ export default function Dashboard(props: DashboardProps) {
   const [state, setState] = React.useState<DashboardState>({
     mode: "expense",
     periodType: "rolling",
+    selectedPeriodId: null,
     comparison: false,
   });
 
+  const toggleMode = () => {
+    setState(prev => ({
+      ...prev,
+      mode: prev.mode === "expense" ? "income" : "expense",
+    }));
+  };
+
+  const togglePeriodType = () => {
+    setState(prev => ({
+      ...prev,
+      periodType: prev.periodType === "rolling" ? "calendar" : "rolling",
+    }));
+  };
+
+  const toggleComparison = () => {
+    setState(prev => ({
+      ...prev,
+      comparison: !prev.comparison,
+    }));
+  };
+
+  const setSelectedPeriodId = (selectedPeriodId: typeof state.selectedPeriodId) => {
+    setState(prev => ({ ...prev, selectedPeriodId }));
+  };
+
   return (
     <DashboardView
       {...props}
       state={state}
       setState={setState}
+      toggleMode={toggleMode}
+      togglePeriodType={togglePeriodType}
+      toggleComparison={toggleComparison}
+      setSelectedPeriodId={setSelectedPeriodId}
     />
   );
 }

src/components/Dashboard/Dashboard.view.tsx

@@ -18,16 +18,16 @@ interface ViewProps extends DashboardProps {
 export default function DashboardView({
   config,
   data,
-  latest,
   state,
   setState,
-  onModeChange,
+  toggleMode,
-  selectedPeriodId,
+  togglePeriodType,
-  onSelectPeriodId,
+  toggleComparison,
+  setSelectedPeriodId,
 }: ViewProps) {
   const theme = useTheme();
   const themeMode = theme.palette.mode;
-  const { mode, periodType, comparison } = state;
+  const { mode, periodType, comparison, selectedPeriodId } = state;
 
   // Resolve colors with fallbacks
   const colors = React.useMemo(() => {
@@ -51,13 +51,6 @@ export default function DashboardView({
     };
   }, [config.style?.palette, mode, themeMode, theme.palette]);
 
-  const handleModeChange = (_: any, newMode: any) => {
-    if (newMode && onModeChange) {
-      onModeChange(newMode);
-      setState(prev => ({ ...prev, mode: newMode }));
-    }
-  };
-
   return (
     <Container
       sx={{
@@ -73,7 +66,7 @@ export default function DashboardView({
         <ToggleButtonGroup
           value={mode}
           exclusive
-          onChange={handleModeChange}
+          onChange={toggleMode}
           sx={{
             borderRadius: 3,
             overflow: "hidden",
@@ -125,7 +118,19 @@ export default function DashboardView({
                           header={item.payeeName || item.name}
                           progressAmount={item.amount}
                           totalAmount={data.totalAmount}
-                          colorTheme={mode === "expense" ? "error" : "success"}
+                          accentColor={colors.primary}
+                          colorScheme={colors}
+
+                          // State management
+                          mode={mode}
+
+                          periodType={periodType}
+                          comparison={comparison}
+                          selectedPeriodId={selectedPeriodId}
+
+                          togglePeriodType={togglePeriodType}
+                          toggleComparison={toggleComparison}
+                          setSelectedPeriodId={setSelectedPeriodId}
                         />
                       </Grid>
                     ))}
@@ -136,17 +141,21 @@ export default function DashboardView({
                   {...section.settings}
                   header={section.title}
                   summary={section.summary}
-                  data={section.dataKey ? data[section.dataKey] : data.chartData}
+                  data={data[mode][section.dataKey]}
-                  items={section.dataKey === 'latest' ? latest : (data[section.dataKey || ''] || [])}
                   title={section.title}
                   accentColor={colors.primary}
                   colorScheme={colors}
+
+                  // State management
+                  mode={mode}
+
                   periodType={periodType}
-                  onPeriodTypeChange={(p: any) => setState(prev => ({ ...prev, periodType: p }))}
                   comparison={comparison}
-                  setComparison={(c: any) => setState(prev => ({ ...prev, comparison: c }))}
                   selectedPeriodId={selectedPeriodId}
-                  onSelectPeriodId={onSelectPeriodId}
+
+                  togglePeriodType={togglePeriodType}
+                  toggleComparison={toggleComparison}
+                  setSelectedPeriodId={setSelectedPeriodId}
                 />
               )}
             </Grid>

src/components/HistoryChart/HistoryChart.models.ts

@@ -1,3 +1,9 @@
+import {
+  DashboardMode,
+  DashboardPeriodType,
+  DashboardSelectedPeriodId
+} from "../Dashboard";
+
 export interface _ChartDataPoint {
   id: string;
   amount: number;
@@ -9,15 +15,11 @@ export interface ChartDataPoint extends _ChartDataPoint {
 }
 
 export interface ChartData {
-  daily?: ChartDataPoint[];
   weekly?: Record<string, ChartDataPoint[]>;
   monthly?: Record<string, ChartDataPoint[]>;
-}
+  // yearly?: Record<string, ChartDataPoint[]>;
-
+  // fyly?: Record<string, ChartDataPoint[]>;
-export interface AggregatedDashboardData {
+  // full?: Record<string, ChartDataPoint[]>;
-  chartData: ChartData;
-  totalAmount: number;
-  topPayees: Array<{ payeeName: string; amount: number }>;
 }
 
 export interface HistoryChartProps {
@@ -25,13 +27,19 @@ export interface HistoryChartProps {
   summary?: string;
   tabs: string[];
   data: ChartData;
-  periodType: "rolling" | "calendar";
-  onPeriodTypeChange: (p: "rolling" | "calendar") => void;
-  comparison: boolean;
-  setComparison: (v: boolean) => void;
   colorScheme: {
     primary: string;
     light: string;
     text: string;
   };
+
+  // State management
+  mode: DashboardMode;
+  periodType: DashboardPeriodType;
+  selectedPeriodId: DashboardSelectedPeriodId;
+  comparison: boolean;
+
+  togglePeriodType: () => void;
+  setSelectedPeriodId: (id: string | null) => void;
+  toggleComparison: () => void;
 }

src/components/HistoryChart/HistoryChart.tsx

@@ -3,7 +3,7 @@ import { ChartDataPoint, HistoryChartProps, ChartData } from "./HistoryChart.mod
 import HistoryChartView from "./HistoryChart.view";
 
 export default function HistoryChart(props: HistoryChartProps) {
-  const { tabs, data, periodType, comparison } = props;
+  const { tabs, data, mode, periodType, comparison } = props;
 
   const [activeTab, setActiveTab] = React.useState<string>(tabs[0] || "");
   const [startIndex, setStartIndex] = React.useState(0);
@@ -12,12 +12,8 @@ export default function HistoryChart(props: HistoryChartProps) {
 
   let rawData: ChartDataPoint[] = [];
 
-  if (activeDataKey === "daily") {
+  const section = data[activeDataKey];
-    rawData = data.daily || [];
+  rawData = section?.[periodType] || [];
-  } else {
-    const section = data[activeDataKey];
-    rawData = section?.[periodType] || [];
-  }
 
   const currentData = rawData;
 
@@ -32,6 +28,7 @@ export default function HistoryChart(props: HistoryChartProps) {
       : 1;
 
   const visibleCountMap = { daily: 7, weekly: 6, monthly: 4 };
+  // const visibleCountMap = { daily: 7, weekly: 6, monthly: 4, yearly: 4, fyly: 4, full: 4 };
   const visibleCount = visibleCountMap[activeDataKey];
 
   const total = currentData.length;

src/components/HistoryChart/HistoryChart.view.tsx

@@ -26,8 +26,6 @@ interface ViewProps extends HistoryChartProps {
   startIndex: number;
   setStartIndex: React.Dispatch<React.SetStateAction<number>>;
   activeDataKey: string;
-  selectedPeriodId: string | null;
-  onSelectPeriodId: (id: string | null) => void;
 }
 
 export default function HistoryChartView(props: ViewProps) {
@@ -35,11 +33,19 @@ export default function HistoryChartView(props: ViewProps) {
     header,
     summary,
     tabs,
-    periodType,
-    onPeriodTypeChange,
-    comparison,
-    setComparison,
     colorScheme,
+
+    // State management
+    mode,
+    periodType,
+    selectedPeriodId,
+    comparison,
+
+    togglePeriodType,
+    setSelectedPeriodId,
+    toggleComparison,
+
+    // HistoryChart state management
     activeTab,
     setActiveTab,
     currentData,
@@ -49,8 +55,6 @@ export default function HistoryChartView(props: ViewProps) {
     startIndex,
     setStartIndex,
     activeDataKey,
-    selectedPeriodId,
-    onSelectPeriodId,
   } = props;
 
   const theme = useTheme();
@@ -103,7 +107,7 @@ export default function HistoryChartView(props: ViewProps) {
       </ToggleButtonGroup>
 
       <Box sx={{ display: "flex", alignItems: "center", justifyContent: "space-between", mb: 3 }}>
-        <ToggleButtonGroup value={periodType} exclusive onChange={(_, v) => v && onPeriodTypeChange(v)} size="small">
+        <ToggleButtonGroup value={periodType} exclusive onChange={togglePeriodType} size="small">
           <ToggleButton value="rolling">Rolling</ToggleButton>
           <ToggleButton value="calendar" disabled={activeDataKey === "daily"}>
             Calendar
@@ -113,7 +117,7 @@ export default function HistoryChartView(props: ViewProps) {
         <ToggleButton
           value="compare"
           selected={comparison}
-          onChange={() => setComparison(!comparison)}
+          onChange={toggleComparison}
           size="small"
           sx={{
             textTransform: "none",
@@ -169,7 +173,7 @@ export default function HistoryChartView(props: ViewProps) {
               return (
                 <Box
                   key={point.id}
-                  onClick={() => onSelectPeriodId(isSelected ? null : point.id)}
+                  onClick={() => setSelectedPeriodId(isSelected ? null : point.id)}
                   sx={{
                     flex: 1,
                     display: "flex",

src/dashboard-config.ts

@@ -12,7 +12,8 @@ export const configuration: DashboardConfig = {
       component: HistoryChart,
       dataKey: "chartData",
       settings: {
-        tabs: ["Daily", "Weekly", "Monthly"],
+        tabs: ["Weekly", "Monthly"],
+        // tabs: ["Weekly", "Monthly", "Yearly", "Financial Year", "All Time"],
       },
       style: {
         size: 12,
@@ -31,15 +32,15 @@ export const configuration: DashboardConfig = {
         size: 12,
       },
     },
-    {
+    // {
-      id: "latest",
+    //   id: "latest",
-      title: 'Recent Transactions',
+    //   title: 'Recent Transactions',
-      component: LatestItems,
+    //   component: LatestItems,
-      dataKey: "latest",
+    //   dataKey: "latest",
-      style: {
+    //   style: {
-        size: 12,
+    //     size: 12,
-      },
+    //   },
-    },
+    // },
   ],
   style: {
     palette: {

src/features/dashboard/dashboard.mapper.ts

@@ -1,10 +1,15 @@
 import * as React from "react";
 import MonetizationOnIcon from "@mui/icons-material/MonetizationOn";
 import { LatestItem } from "../../components/LatestItems";
+import {
+  ChartData,
+  ChartDataPoint,
+} from "../../components/HistoryChart";
 
 const DEFAULT_ICON = React.createElement(MonetizationOnIcon, {
   sx: { color: "#388e3c" }
 });
+type ReportBucket = any;
 
 export function mapToLatestItems(
   items: any[],
@@ -17,9 +22,7 @@ export function mapToLatestItems(
     .filter((item: any) => isValid(Number(item.amount) || 0))
     .slice(0, 5)
     .map((exp: any, index: number) => {
-      const time = new Date(
+      const time = new Date(exp.occurred_at).getTime();
-        exp.occurred_at || exp.created_at || Date.now()
-      ).getTime();
 
       const diffDays = Math.floor(
         Math.abs(Date.now() - time) / (1000 * 60 * 60 * 24)
@@ -30,11 +33,159 @@ export function mapToLatestItems(
         icon: DEFAULT_ICON,
         iconBgColor:
           type === "expense" ? "#ffebee" : "#e8f5e9",
-        title: exp.payee?.name || exp.payee || "Unknown Payee",
+        title: exp.payee.name,
-        subtitle:
+        subtitle: exp.account.name,
-          exp.category?.name || exp.account?.name || "Transaction",
         amount: `Rs ${Math.abs(exp.amount || 0)}`,
         timeAgo: diffDays === 0 ? "Today" : `${diffDays} days ago`
       };
     });
 }
+
+const sumBucket = (bucket: ReportBucket, flow: "expenses" | "incomes") =>
+  bucket.groups.reduce(
+    (acc: number, g: any) => acc + (g?.[flow]?.sum || 0),
+    0
+  );
+
+const toLabel = (start: string, end: string, type: "weekly" | "monthly" | "yearly" | "fyly" | "full") => {
+  const s = new Date(start);
+  const e = new Date(end);
+
+  if (type === "monthly") {
+    return s.toLocaleString("default", { month: "short" });
+  }
+
+  return `${s.getDate()}–${e.getDate()} ${e.toLocaleString("default", {
+    month: "short",
+  })}`;
+};
+
+const getWeekOfMonth = (date: Date) => {
+  const firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
+  return Math.ceil((date.getDate() + firstDay.getDay()) / 7);
+};
+
+const findCompareBucket = (
+  current: ReportBucket,
+  buckets: ReportBucket[],
+  type: "weekly" | "monthly" | "yearly" | "fyly" | "full",
+): ReportBucket | undefined => {
+  const start = new Date(current.start);
+
+  if (type === "monthly") {
+    const targetYear = start.getFullYear() - 1;
+    const targetMonth = start.getMonth();
+
+    return buckets.find(b => {
+      const d = new Date(b.start);
+      return (
+        d.getFullYear() === targetYear &&
+        d.getMonth() === targetMonth
+      );
+    });
+  }
+
+  if (type === "weekly") {
+    const weekIndex = getWeekOfMonth(start); // you must define this
+    const target = new Date(start);
+    target.setMonth(target.getMonth() - 1);
+
+    return buckets.find(b => {
+      const d = new Date(b.start);
+      return (
+        d.getFullYear() === target.getFullYear() &&
+        d.getMonth() === target.getMonth() &&
+        getWeekOfMonth(d) === weekIndex
+      );
+    });
+  }
+
+  return undefined;
+};
+
+const toPoints = (
+  buckets: ReportBucket[],
+  type: "weekly" | "monthly" | "yearly" | "fyly" | "full",
+  flow: "expenses" | "incomes"
+): ChartDataPoint[] => {
+  return buckets.map((b) => {
+    const amount = sumBucket(b, flow);
+    const prev = findCompareBucket(b, buckets, type);
+
+    return {
+      id: toLabel(b.start, b.end, type),
+      amount,
+      compare: prev
+        ? {
+            id: toLabel(prev.start, prev.end, type),
+            amount: sumBucket(prev, flow),
+          }
+        : undefined,
+    };
+  });
+};
+
+export function mapReportToDashboard(
+  weekly: ReportBucket[],
+  monthly: ReportBucket[],
+  payeeBuckets: ReportBucket[],
+  type: "expense" | "income"
+) {
+  const flow = type === "expense" ? "expenses" : "incomes";
+
+  const chartData: ChartData = {
+    weekly: {
+      rolling: toPoints(weekly, "weekly", flow),
+      calendar: toPoints(weekly, "weekly", flow),
+    },
+
+    monthly: {
+      rolling: toPoints(monthly, "monthly", flow),
+      calendar: toPoints(monthly, "monthly", flow),
+    },
+
+    // yearly: {
+    //   rolling: toPoints(yearly, "yearly", flow),
+    //   calendar: toPoints(yearly, "yearly", flow),
+    // },
+    //
+    // fyly: {
+    //   rolling: toPoints(fyly, "fyly", flow),
+    //   calendar: toPoints(fyly, "fyly", flow),
+    // },
+    //
+    // full: {
+    //   rolling: toPoints(full, "full", flow),
+    //   calendar: toPoints(full, "full", flow),
+    // },
+  };
+
+  const totalAmount = weekly.reduce(
+    (acc, b) => acc + sumBucket(b, flow),
+    0
+  );
+
+  const payeeMap: Record<string, number> = {};
+
+  const sourceForPayees = (payeeBuckets && payeeBuckets.length > 0) ? payeeBuckets : weekly;
+
+  for (const b of sourceForPayees) {
+    for (const g of b.groups) {
+      const key = g.group_key || "Unknown";
+      const amt = g?.[flow]?.sum || 0;
+      payeeMap[key] = (payeeMap[key] || 0) + amt;
+    }
+  }
+
+  const topPayees = Object.entries(payeeMap)
+    // .filter(([name]) => name !== "Unknown")
+    .map(([payeeName, amount]) => ({ payeeName, amount }))
+    .sort((a, b) => b.amount - a.amount)
+    .slice(0, 5);
+
+  return {
+    chartData,
+    totalAmount,
+    topPayees,
+  };
+}

src/features/dashboard/useDashboardData.ts

@@ -1,51 +1,43 @@
-import { useResourceByName } from "../../../react-openapi";
+import { useReport } from "../report";
-import { mapToLatestItems } from "./dashboard.mapper";
+import { mapReportToDashboard } from "./dashboard.mapper";
-import { mapReportToDashboard } from "../report/report.mapper";
-
-export function useDashboardData(type: "expense" | "income") {
-  const { useList: useExpenseList } = useResourceByName("expenses");
-  const { useList: useReportList } = useResourceByName("reports");
-
-  // Fetch latest transactions
-  const latestQuery = useExpenseList({ 
-    limit: 100,
-    sort: "-occurred_at" 
-  });
 
+export function useDashboardData() {
   // Fetch reports for aggregation
-  const weeklyReport = useReportList({ period: "weekly", rolling: true });
+  const weeklyReport = useReport({ period: "weekly", rolling: true });
-  const monthlyReport = useReportList({ period: "monthly", rolling: true });
+  const monthlyReport = useReport({ period: "monthly", rolling: true });
-  const payeeReport = useReportList({ period: "full", rolling: true, group_by: "payee" });
+  const payeeReport = useReport({ period: "full", rolling: true, group_by: ["payee"] });
 
   const isLoading = 
-    latestQuery.isLoading || 
     weeklyReport.isLoading ||
     monthlyReport.isLoading ||
     payeeReport.isLoading;
 
   const error = 
-    latestQuery.error || 
     weeklyReport.error ||
     monthlyReport.error ||
     payeeReport.error;
 
-  const latest = latestQuery.data?.data 
+  const aggregatedData = {
-    ? mapToLatestItems(latestQuery.data.data, type) 
+    expense: weeklyReport.data?.data && monthlyReport.data?.data && payeeReport.data?.data
-    : [];
-
-  const aggregatedData = 
-    weeklyReport.data?.data && monthlyReport.data?.data && payeeReport.data?.data
     ? mapReportToDashboard(
         (weeklyReport.data.data as any).buckets,
         (monthlyReport.data.data as any).buckets,
         (payeeReport.data.data as any).buckets,
-        type
+        "expense"
       )
-    : null;
+    : null,
+    income: weeklyReport.data?.data && monthlyReport.data?.data && payeeReport.data?.data
+    ? mapReportToDashboard(
+        (weeklyReport.data.data as any).buckets,
+        (monthlyReport.data.data as any).buckets,
+        (payeeReport.data.data as any).buckets,
+        "income"
+      )
+    : null,
+  }
 
   return {
     data: aggregatedData,
-    latest: latest,
     isLoading,
     error,
   };

src/features/report/index.ts

@@ -1,3 +1,13 @@
 export {
   useReport
 } from './useReport'
+export type {
+  Transaction,
+  PeriodData,
+  PeriodGroup,
+  Period,
+  ReportData,
+} from './report.models'
+export {
+  prepareReport
+} from './report.utils'

src/features/report/report.mapper.ts

@@ -1,143 +0,0 @@
-import {
-  AggregatedDashboardData,
-  ChartData,
-  ChartDataPoint,
-} from "../../components/HistoryChart";
-
-type ReportBucket = any;
-
-const sumBucket = (bucket: ReportBucket, flow: "expenses" | "incomes") =>
-  bucket.groups.reduce(
-    (acc: number, g: any) => acc + (g?.[flow]?.sum || 0),
-    0
-  );
-
-const toLabel = (start: string, end: string, type: "weekly" | "monthly") => {
-  const s = new Date(start);
-  const e = new Date(end);
-
-  if (type === "monthly") {
-    return s.toLocaleString("default", { month: "short" });
-  }
-
-  return `${s.getDate()}–${e.getDate()} ${e.toLocaleString("default", {
-    month: "short",
-  })}`;
-};
-
-const getWeekOfMonth = (date: Date) => {
-  const firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
-  return Math.ceil((date.getDate() + firstDay.getDay()) / 7);
-};
-
-const findCompareBucket = (
-  current: ReportBucket,
-  buckets: ReportBucket[],
-  type: "weekly" | "monthly"
-): ReportBucket | undefined => {
-  const start = new Date(current.start);
-
-  if (type === "monthly") {
-    const targetYear = start.getFullYear() - 1;
-    const targetMonth = start.getMonth();
-
-    return buckets.find(b => {
-      const d = new Date(b.start);
-      return (
-        d.getFullYear() === targetYear &&
-        d.getMonth() === targetMonth
-      );
-    });
-  }
-
-  if (type === "weekly") {
-    const weekIndex = getWeekOfMonth(start); // you must define this
-    const target = new Date(start);
-    target.setMonth(target.getMonth() - 1);
-
-    return buckets.find(b => {
-      const d = new Date(b.start);
-      return (
-        d.getFullYear() === target.getFullYear() &&
-        d.getMonth() === target.getMonth() &&
-        getWeekOfMonth(d) === weekIndex
-      );
-    });
-  }
-
-  return undefined;
-};
-
-const toPoints = (
-  buckets: ReportBucket[],
-  type: "weekly" | "monthly",
-  flow: "expenses" | "incomes"
-): ChartDataPoint[] => {
-  return buckets.map((b) => {
-    const amount = sumBucket(b, flow);
-    const prev = findCompareBucket(b, buckets, type);
-
-    return {
-      id: toLabel(b.start, b.end, type),
-      amount,
-      compare: prev
-        ? {
-            id: toLabel(prev.start, prev.end, type),
-            amount: sumBucket(prev, flow),
-          }
-        : undefined,
-    };
-  });
-};
-
-export function mapReportToDashboard(
-  weekly: ReportBucket[],
-  monthly: ReportBucket[],
-  payeeBuckets: ReportBucket[],
-  type: "expense" | "income"
-): AggregatedDashboardData {
-  const flow = type === "expense" ? "expenses" : "incomes";
-
-  const chartData: ChartData = {
-    daily: [],
-
-    weekly: {
-      rolling: toPoints(weekly, "weekly", flow),
-      calendar: toPoints(weekly, "weekly", flow),
-    },
-
-    monthly: {
-      rolling: toPoints(monthly, "monthly", flow),
-      calendar: toPoints(monthly, "monthly", flow),
-    },
-  };
-
-  const totalAmount = weekly.reduce(
-    (acc, b) => acc + sumBucket(b, flow),
-    0
-  );
-
-  const payeeMap: Record<string, number> = {};
-
-  const sourceForPayees = (payeeBuckets && payeeBuckets.length > 0) ? payeeBuckets : weekly;
-
-  for (const b of sourceForPayees) {
-    for (const g of b.groups) {
-      const key = g.group_key || "Unknown";
-      const amt = g?.[flow]?.sum || 0;
-      payeeMap[key] = (payeeMap[key] || 0) + amt;
-    }
-  }
-
-  const topPayees = Object.entries(payeeMap)
-    // .filter(([name]) => name !== "Unknown")
-    .map(([payeeName, amount]) => ({ payeeName, amount }))
-    .sort((a, b) => b.amount - a.amount)
-    .slice(0, 5);
-
-  return {
-    chartData,
-    totalAmount,
-    topPayees,
-  };
-}

src/features/report/report.models.ts

@@ -0,0 +1,61 @@
+export interface Payor {
+  name: string;
+}
+
+export interface Payee {
+  name: string;
+}
+
+export interface Account {
+  name: string;
+  number: string;
+}
+
+export interface Tag {
+  name: string;
+  icon: string;
+  description: string;
+}
+
+export interface Transaction {
+    payor: Payor;
+    payee: Payee;
+    amount: number;
+    account: Account;
+    tags: Tag[]
+    occurred_at: Date
+}
+
+export interface _PeriodData {
+  sum: number;
+  count: number;
+  average: number;
+  txns: Transaction[];
+}
+
+export interface PeriodData extends _PeriodData {
+  compare?: _PeriodData;
+}
+
+export interface PeriodGroup {
+  group_key: string[];
+  expenses: PeriodData[];
+  incomes: PeriodData[];
+}
+
+export interface Period {
+  id: string;
+  label: string;
+  start: Date;
+  end: Date;
+  groups: PeriodGroup[];
+}
+
+export interface ReportData {
+  period: "weekly" | "monthly" | "yearly" | "fyly" | "full";
+  rolling?: boolean;
+  report_date?: string;
+  group_by?: ("payee" | "tags")[];
+  ignore_self?: boolean;
+  buckets: Period[];
+}

src/features/report/report.utils.ts

@@ -0,0 +1,116 @@
+import { ReportData } from "./report.models";
+
+/* ---------- ID BUILDING ---------- */
+
+function formatDate(d: Date): string {
+  const y = d.getUTCFullYear();
+  const m = String(d.getUTCMonth() + 1).padStart(2, "0");
+  const day = String(d.getUTCDate()).padStart(2, "0");
+  return `${y}-${m}-${day}`;
+}
+
+function buildPeriodId(
+  type: ReportData["period"],
+  start: Date,
+  end: Date
+): string {
+  const s = formatDate(start);
+  const e = formatDate(end);
+
+  switch (type) {
+    case "weekly":
+      return `W:${s}_${e}`;
+    case "monthly":
+      return `M:${s}_${e}`;
+    case "yearly":
+      return `Y:${s}_${e}`;
+    case "fyly":
+      return `FY:${s}_${e}`;
+    case "full":
+      return `FULL:${s}_${e}`;
+    default:
+      return `${s}_${e}`;
+  }
+}
+
+/* ---------- LABEL BUILDING ---------- */
+
+const dayFmt = new Intl.DateTimeFormat("en-GB", {
+  day: "numeric",
+  month: "short",
+  timeZone: "UTC",
+});
+
+const monthDayFmt = new Intl.DateTimeFormat("en-GB", {
+  month: "short",
+  day: "numeric",
+  timeZone: "UTC",
+});
+
+const monthFmt = new Intl.DateTimeFormat("en-GB", {
+  month: "short",
+  timeZone: "UTC",
+});
+
+const yearFmt = new Intl.DateTimeFormat("en-GB", {
+  year: "numeric",
+  timeZone: "UTC",
+});
+
+function sameMonth(a: Date, b: Date) {
+  return (
+    a.getUTCFullYear() === b.getUTCFullYear() &&
+    a.getUTCMonth() === b.getUTCMonth()
+  );
+}
+
+function buildLabel(
+  type: ReportData["period"],
+  start: Date,
+  end: Date
+): string {
+  switch (type) {
+    case "weekly":
+      if (sameMonth(start, end)) {
+        const sDay = start.getUTCDate();
+        const eDay = end.getUTCDate();
+        const m = monthFmt.format(start);
+        return `${sDay} ${m} - ${eDay} ${m}`;
+      }
+      return `${dayFmt.format(start)} - ${dayFmt.format(end)}`;
+
+    case "monthly":
+      if (sameMonth(start, end)) {
+        return `${monthFmt.format(start)} ${yearFmt.format(start)}`;
+      }
+      return `${monthDayFmt.format(start)} - ${monthDayFmt.format(end)}`;
+
+    case "yearly":
+      return yearFmt.format(start);
+
+    case "fyly": {
+      const startY = start.getUTCFullYear();
+      const endY = end.getUTCFullYear();
+      return `FY ${startY}–${String(endY).slice(-2)}`;
+    }
+
+    case "full":
+      return `${monthFmt.format(start)} ${yearFmt.format(start)} - ${monthFmt.format(end)} ${yearFmt.format(end)}`;
+
+    default:
+      return `${monthDayFmt.format(start)} - ${monthDayFmt.format(end)}`;
+  }
+}
+
+/* ---------- MAIN ---------- */
+
+export function prepareReport(reportData: ReportData): ReportData {
+  return {
+    ...reportData,
+    buckets: reportData.buckets.map((p) => ({
+      ...p,
+      id: buildPeriodId(reportData.period, p.start, p.end),
+      label: buildLabel(reportData.period, p.start, p.end),
+    })),
+  };
+}

src/features/report/useReport.ts

@@ -1,14 +1,18 @@
 import { useResourceByName } from "../../../react-openapi";
 
 export interface ReportParams {
-  period: "weekly" | "monthly" | "yearly" | "fyly";
+  period: "weekly" | "monthly" | "yearly" | "fyly" | "full";
   rolling?: boolean;
   report_date?: string;
-  group_by?: ("flow" | "payee" | "tags")[];
+  group_by?: ("payee" | "tags")[];
   ignore_self?: boolean;
 }
 
 export function useReport(params: ReportParams) {
   const { useList } = useResourceByName("reports");
+  if (params.group_by) {
+    // @ts-ignore
+    params.group_by = params.group_by[0]
+  }
   return useList(params);
 }