rolling and calender toggle

src/Dashboard.tsx

@@ -36,8 +36,8 @@ export default function Dashboard() {
     income: null
   });
 
-  const [mode, setMode] =
-    React.useState<"expense" | "income">("expense");
+  const [mode, setMode] = React.useState<"expense" | "income">("expense");
+  const [period, setPeriod] = React.useState<"rolling" | "calendar">("rolling");
 
   const [loading, setLoading] = React.useState(true);
   const [error, setError] = React.useState<string | null>(null);
@@ -56,8 +56,8 @@ export default function Dashboard() {
         ] = await Promise.all([
           fetchLatestTransactions("expense"),
           fetchLatestTransactions("income"),
-          fetchAggregatedExpenses(),
-          fetchAggregatedIncome()
+          fetchAggregatedExpenses(period),
+          fetchAggregatedIncome(period)
         ]);
 
         setLatest({
@@ -79,7 +79,7 @@ export default function Dashboard() {
     }
 
     loadData();
-  }, []);
+  }, [period]);
 
   const currentData = aggregated[mode];
   const currentLatest = latest[mode];
@@ -132,6 +132,8 @@ export default function Dashboard() {
             summary="Interactive chronological tracking"
             tabs={["Daily", "Weekly", "Monthly"]}
             data={currentData?.chartData || {}}
+            period={period}
+            onPeriodChange={setPeriod}
           />
         </Grid>
       </Grid>