calcuation fixes

src/Dashboard.tsx

@@ -13,16 +13,28 @@ import LatestItemsList, { LatestItem } from "./components/LatestItemsList";
 import HistoryChart from "./components/HistoryChart";
 
 import {
-  fetchLatestExpenses,
+  fetchLatestTransactions,
   fetchAggregatedExpenses,
   fetchAggregatedIncome,
   AggregatedDashboardData
 } from "./utils/dashboardLoader";
 
 export default function Dashboard() {
-  const [latest, setLatest] = React.useState<LatestItem[]>([]);
-  const [aggregated, setAggregated] =
-    React.useState<AggregatedDashboardData | null>(null);
+  const [latest, setLatest] = React.useState<{
+    expense: LatestItem[];
+    income: LatestItem[];
+  }>({
+    expense: [],
+    income: []
+  });
+
+  const [aggregated, setAggregated] = React.useState<{
+    expense: AggregatedDashboardData | null;
+    income: AggregatedDashboardData | null;
+  }>({
+    expense: null,
+    income: null
+  });
 
   const [mode, setMode] =
     React.useState<"expense" | "income">("expense");
@@ -30,21 +42,33 @@ export default function Dashboard() {
   const [loading, setLoading] = React.useState(true);
   const [error, setError] = React.useState<string | null>(null);
 
-  // -------- LOAD DATA --------
+  // -------- LOAD ONCE --------
   React.useEffect(() => {
     async function loadData() {
       try {
         setLoading(true);
 
-        const latestData = await fetchLatestExpenses();
+        const [
+          latestExpense,
+          latestIncome,
+          expenseData,
+          incomeData
+        ] = await Promise.all([
+          fetchLatestTransactions("expense"),
+          fetchLatestTransactions("income"),
+          fetchAggregatedExpenses(),
+          fetchAggregatedIncome()
+        ]);
 
-        const aggData =
-          mode === "expense"
-            ? await fetchAggregatedExpenses()
-            : await fetchAggregatedIncome();
+        setLatest({
+          expense: latestExpense,
+          income: latestIncome
+        });
 
-        setLatest(latestData);
-        setAggregated(aggData);
+        setAggregated({
+          expense: expenseData,
+          income: incomeData
+        });
 
       } catch (err: any) {
         console.error(err);
@@ -55,7 +79,10 @@ export default function Dashboard() {
     }
 
     loadData();
-  }, [mode]);
+  }, []);
+
+  const currentData = aggregated[mode];
+  const currentLatest = latest[mode];
 
   // -------- UI STATES --------
   if (loading) {
@@ -89,25 +116,25 @@ export default function Dashboard() {
       </Box>
 
       <Grid container spacing={4} direction="row">
-        {/* LEFT → 1/3 (4 cols) */}
+        {/* LEFT → 1/3 */}
         <Grid size={4}>
           <LatestItemsList
-            title="Recent Transactions"
-            items={latest}
+            title={`Recent ${mode === "expense" ? "Expenses" : "Income"}`}
+            items={currentLatest}
             onViewAll={() => {}}
           />
         </Grid>
 
-        {/* RIGHT → 2/3 (8 cols) */}
+        {/* RIGHT → 2/3 */}
         <Grid size={8}>
           <HistoryChart
             header={`${mode === "expense" ? "Expense" : "Income"} Breakdown`}
             summary="Interactive chronological tracking"
-            tabs={["Today", "Week", "Month", "Year"]}
-            data={aggregated?.chartData || {}}
+            tabs={["Week", "Month", "Year"]}
+            data={currentData?.chartData || {}}
           />
         </Grid>
       </Grid>
     </Container>
   );
-}
+}