fixes for toggles

src/Dashboard.tsx

@@ -126,17 +126,8 @@ export default function Dashboard() {
       </Box>
 
       <Grid container spacing={4} direction="row">
-        {/* LEFT → 1/3 */}
-        <Grid size={4}>
-          <LatestItemsList
-            title={`Recent ${mode === "expense" ? "Expenses" : "Income"}`}
-            items={currentLatest}
-            onViewAll={() => {}}
-          />
-        </Grid>
 
-        {/* RIGHT → 2/3 */}
-        <Grid size={8}>
+        <Grid size={12}>
           <HistoryChart
             header={`${mode === "expense" ? "Expense" : "Income"} Breakdown`}
             summary="Interactive chronological tracking"
@@ -148,6 +139,15 @@ export default function Dashboard() {
             setComparison={setComparison}
           />
         </Grid>
+
+        <Grid size={12}>
+          <LatestItemsList
+            title={`Recent ${mode === "expense" ? "Expenses" : "Income"}`}
+            items={currentLatest}
+            onViewAll={() => {}}
+          />
+        </Grid>
+
       </Grid>
     </Container>
   );

src/components/HistoryChart.tsx

@@ -11,6 +11,9 @@ import {
   HistoryChartProps,
   ChartData,
 } from "../types/historyChart";
+import IconButton from "@mui/material/IconButton";
+import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
 
 const formatDisplay = (
   point: ChartDataPoint,
@@ -99,6 +102,37 @@ export default function HistoryChart({
         )
       : 1;
 
+  const [startIndex, setStartIndex] = React.useState(0);
+  const visibleCountDataTabMapping = {
+    daily: 7,
+    weekly: 6,
+    monthly: 4,
+  }
+  const visibleCount = visibleCountDataTabMapping[activeDataKey];
+  const total = currentData.length;
+
+  // clamp startIndex so we always show full 5 (when possible)
+  const clampedStartIndex = Math.min(
+    startIndex,
+    Math.max(total - visibleCount, 0)
+  );
+
+  const visibleData = currentData.slice(
+    clampedStartIndex,
+    clampedStartIndex + visibleCount
+  );
+
+  const canGoLeft = startIndex > 0;
+  const canGoRight = startIndex + visibleCount < currentData.length;
+
+  const handlePrev = () => {
+    if (canGoLeft) setStartIndex((prev) => prev - visibleCount);
+  };
+
+  const handleNext = () => {
+    if (canGoRight) setStartIndex((prev) => prev + visibleCount);
+  };
+
   return (
     <Paper
       sx={{
@@ -134,33 +168,86 @@ export default function HistoryChart({
         ))}
       </ToggleButtonGroup>
 
+      <Box
+        sx={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          mb: 3
+        }}
+      >
+        {/* Rolling / Calendar */}
         <ToggleButtonGroup
           value={period}
           exclusive
           onChange={(_, v) => v && onPeriodChange(v)}
           size="small"
-        sx={{ mb: 2 }}
         >
           <ToggleButton value="rolling">Rolling</ToggleButton>
-        <ToggleButton value="calendar" disabled={activeDataKey === "daily"}>
+          <ToggleButton
+            value="calendar"
+            disabled={activeDataKey === "daily"}
+          >
             Calendar
           </ToggleButton>
         </ToggleButtonGroup>
 
-      <ToggleButtonGroup
-        value={comparison ? "on" : "off"}
-        exclusive
-        onChange={(_, v) => setComparison(v === "on")}
+        {/* Compare toggle */}
+        <ToggleButton
+          value="compare"
+          selected={comparison}
+          onChange={() => setComparison(!comparison)}
           size="small"
-        sx={{ mb: 2 }}
+          sx={{
+            textTransform: "none",
+            borderRadius: 2,
+            px: 2,
+
+            // OFF
+            color: "text.secondary",
+            border: "1px solid",
+            borderColor: "divider",
+
+            // ON
+            "&.Mui-selected": {
+              color: "white",
+              bgcolor: "success.main",
+              borderColor: "success.main"
+            },
+            "&.Mui-selected:hover": {
+              bgcolor: "success.dark"
+            }
+          }}
         >
-        <ToggleButton value="off">Single</ToggleButton>
-        <ToggleButton value="on">Compare</ToggleButton>
-      </ToggleButtonGroup>
+          Compare
+        </ToggleButton>
+      </Box>
 
       {currentData.length > 0 ? (
+        <Box sx={{ position: "relative", mt: 4 }}>
+
+          {/* LEFT ARROW */}
+          {canGoLeft && (
+            <IconButton
+              onClick={handlePrev}
+              size="small"
+              sx={{
+                position: "absolute",
+                left: 0,
+                top: "50%",
+                transform: "translateY(-50%)",
+                zIndex: 2,
+                bgcolor: "background.paper",
+                boxShadow: 1
+              }}
+            >
+              <ChevronLeftIcon fontSize="small" />
+            </IconButton>
+          )}
+
+          {/* CHART */}
           <Box sx={{ display: "flex", alignItems: "flex-end", height: 220, mt: 4 }}>
-          {currentData.map((point) => {
+            {visibleData.map((point) => {
               const currentHeight = (point.amount / maxAmount) * 100;
               const compareHeight = comparison
                 ? ((point.compareAmount || 0) / maxAmount) * 100
@@ -270,6 +357,26 @@ export default function HistoryChart({
               );
             })}
           </Box>
+
+          {/* RIGHT ARROW */}
+          {canGoRight && (
+            <IconButton
+              onClick={handleNext}
+              size="small"
+              sx={{
+                position: "absolute",
+                right: 0,
+                top: "50%",
+                transform: "translateY(-50%)",
+                zIndex: 2,
+                bgcolor: "background.paper",
+                boxShadow: 1
+              }}
+            >
+              <ChevronRightIcon fontSize="small" />
+            </IconButton>
+          )}
+        </Box>
       ) : (
         <Box sx={{ height: 200, display: "flex", alignItems: "center", justifyContent: "center" }}>
           <Typography color="text.secondary">No Data Available</Typography>

src/utils/dashboardLoader.ts

@@ -1,6 +1,6 @@
 import { api } from "../../react-openapi";
 import { LatestItem } from "../components/LatestItemsList";
-import { ChartDataPoint } from "../components/HistoryChart";
+import { ChartDataPoint } from "../types/historyChart";
 import * as React from "react";
 import { format } from "./dateUtils";
 import MonetizationOnIcon from "@mui/icons-material/MonetizationOn";
@@ -126,15 +126,29 @@ export async function fetchAggregatedData(
     apply(monthlyCalendar);
   }
 
-  const toPoints = (arr: any[]): ChartDataPoint[] =>
-    arr.map((x) => ({
+  const toPoints = (arr: any[], type: "weekly" | "monthly"): ChartDataPoint[] =>
+    arr.map((x) => {
+      let compareLabel: string | undefined;
+
+      if (x.prevStart && x.prevEnd) {
+        if (type === "monthly") {
+          const year = String(x.prevStart.getFullYear()).slice(2);
+          compareLabel = `${x.prevStart.toLocaleString("default", {
+            month: "short"
+          })}-${year}`;
+        } else {
+          const year = String(x.prevEnd.getFullYear()).slice(2);
+          compareLabel = `${format(x.prevStart)} - ${format(x.prevEnd)} ${year}`;
+        }
+      }
+
+      return {
         id: x.label,
         amount: x.amount,
         compareAmount: x.compare,
-      compareLabel: x.prevStart && x.prevEnd
-        ? `${format(x.prevStart)} - ${format(x.prevEnd)}`
-        : undefined
-    }));
+        compareLabel
+      };
+    });
 
   const chartData = {
     daily: Object.entries(dailyBuckets).map(([k, v]: any) => ({
@@ -143,12 +157,12 @@ export async function fetchAggregatedData(
       compareAmount: v.compare
     })),
     weekly: {
-      rolling: toPoints(weeklyRolling),
-      calendar: toPoints(weeklyCalendar)
+      rolling: toPoints(weeklyRolling, "weekly"),
+      calendar: toPoints(weeklyCalendar, "weekly")
     },
     monthly: {
-      rolling: toPoints(monthlyRolling),
-      calendar: toPoints(monthlyCalendar)
+      rolling: toPoints(monthlyRolling, "monthly"),
+      calendar: toPoints(monthlyCalendar, "monthly")
     }
   };