refactored types from HistoryChart.tsx

src/Dashboard.tsx

@@ -12,8 +12,8 @@ import {
 import LatestItemsList, { LatestItem } from "./components/LatestItemsList";
 import HistoryChart from "./components/HistoryChart";
 import {
-  AggregatedDashboardData,
+  AggregatedDashboardData
-} from "./components/HistoryChart";
+} from "./types/historyChart";
 
 import {
   fetchLatestTransactions,
@@ -85,6 +85,13 @@ export default function Dashboard() {
   }, []);
 
   const currentData = aggregated[mode];
+  if (!currentData) {
+    return (
+      <Box sx={{ display: "flex", justifyContent: "center", alignItems: "center", height: "60vh" }}>
+        <CircularProgress />
+      </Box>
+    );
+  }
   const currentLatest = latest[mode];
 
   // -------- UI STATES --------

src/components/HistoryChart.tsx

@@ -1,35 +1,16 @@
 import * as React from "react";
-import { Box, Typography, ToggleButtonGroup, ToggleButton, Paper } from "@mui/material";
+import {
-
+  Box,
-export interface ChartDataPoint {
+  Typography,
-  id: string;
+  ToggleButtonGroup,
-  amount: number;
+  ToggleButton,
-  compareAmount?: number;
+  Paper
-  compareLabel?: string;
+} from "@mui/material";
-  highlighted?: boolean;
+import {
-}
+  ChartDataPoint,
-
+  HistoryChartProps,
-export interface ChartSeries {
+  ChartData,
-  rolling: ChartDataPoint[];
+} from "../types/historyChart";
-  calendar: ChartDataPoint[];
-}
-
-export interface ChartData {
-  daily: ChartDataPoint[];
-  weekly: ChartSeries;
-  monthly: ChartSeries;
-}
-
-export interface HistoryChartProps {
-  header: string;
-  summary?: string;
-  tabs: string[];
-  data: ChartData;
-  period: "rolling" | "calendar";
-  onPeriodChange: (mode: "rolling" | "calendar") => void;
-  comparison: boolean;
-  setComparison: (mode: boolean) => void;
-}
 
 const formatDisplay = (
   point: ChartDataPoint,

src/types/historyChart.ts

@@ -0,0 +1,36 @@
+
+export interface ChartDataPoint {
+  id: string;
+  amount: number;
+  compareAmount?: number;
+  compareLabel?: string;
+  highlighted?: boolean;
+}
+
+export interface ChartSeries {
+  rolling: ChartDataPoint[];
+  calendar: ChartDataPoint[];
+}
+
+export interface ChartData {
+  daily: ChartDataPoint[];
+  weekly: ChartSeries;
+  monthly: ChartSeries;
+}
+
+export interface AggregatedDashboardData {
+  chartData: ChartData;
+  totalAmount: number;
+  topPayees: Array<{ payeeName: string; amount: number }>;
+}
+
+export interface HistoryChartProps {
+  header: string;
+  summary?: string;
+  tabs: string[];
+  data: ChartData;
+  period: "rolling" | "calendar";
+  onPeriodChange: (mode: "rolling" | "calendar") => void;
+  comparison: boolean;
+  setComparison: (mode: boolean) => void;
+}