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,141 +168,214 @@ export default function HistoryChart({
         ))}
       </ToggleButtonGroup>
 
-      <ToggleButtonGroup
-        value={period}
-        exclusive
-        onChange={(_, v) => v && onPeriodChange(v)}
-        size="small"
-        sx={{ mb: 2 }}
+      <Box
+        sx={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          mb: 3
+        }}
       >
-        <ToggleButton value="rolling">Rolling</ToggleButton>
-        <ToggleButton value="calendar" disabled={activeDataKey === "daily"}>
-          Calendar
-        </ToggleButton>
-      </ToggleButtonGroup>
+        {/* Rolling / Calendar */}
+        <ToggleButtonGroup
+          value={period}
+          exclusive
+          onChange={(_, v) => v && onPeriodChange(v)}
+          size="small"
+        >
+          <ToggleButton value="rolling">Rolling</ToggleButton>
+          <ToggleButton
+            value="calendar"
+            disabled={activeDataKey === "daily"}
+          >
+            Calendar
+          </ToggleButton>
+        </ToggleButtonGroup>
 
-      <ToggleButtonGroup
-        value={comparison ? "on" : "off"}
-        exclusive
-        onChange={(_, v) => setComparison(v === "on")}
-        size="small"
-        sx={{ mb: 2 }}
-      >
-        <ToggleButton value="off">Single</ToggleButton>
-        <ToggleButton value="on">Compare</ToggleButton>
-      </ToggleButtonGroup>
+        {/* Compare toggle */}
+        <ToggleButton
+          value="compare"
+          selected={comparison}
+          onChange={() => setComparison(!comparison)}
+          size="small"
+          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"
+            }
+          }}
+        >
+          Compare
+        </ToggleButton>
+      </Box>
 
       {currentData.length > 0 ? (
-        <Box sx={{ display: "flex", alignItems: "flex-end", height: 220, mt: 4 }}>
-          {currentData.map((point) => {
-            const currentHeight = (point.amount / maxAmount) * 100;
-            const compareHeight = comparison
-              ? ((point.compareAmount || 0) / maxAmount) * 100
-              : 0;
-            const labelHeight = Math.max(currentHeight, compareHeight);
+        <Box sx={{ position: "relative", mt: 4 }}>
 
-            return (
-              <Box
-                key={point.id}
-                sx={{
-                  flex: 1,
-                  display: "flex",
-                  flexDirection: "column",
-                  alignItems: "center",
-                  justifyContent: "flex-end",
-                  height: "100%"
-                }}
-              >
+          {/* 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 }}>
+            {visibleData.map((point) => {
+              const currentHeight = (point.amount / maxAmount) * 100;
+              const compareHeight = comparison
+                ? ((point.compareAmount || 0) / maxAmount) * 100
+                : 0;
+              const labelHeight = Math.max(currentHeight, compareHeight);
+
+              return (
                 <Box
+                  key={point.id}
                   sx={{
-                    display: "flex",
-                    alignItems: "flex-end",
-                    gap: comparison ? 0.5 : 0,
-                    height: "100%",
-                    position: "relative"
-                  }}
-                >
-                  <Typography
-                    variant="caption"
-                    sx={{
-                      position: "absolute",
-                      bottom: `${labelHeight}%`,
-                      left: "50%",
-                      transform: "translate(-50%, -6px)",
-                      fontSize: "0.65rem",
-                      whiteSpace: "nowrap",
-                      pointerEvents: "none"
-                    }}
-                  >
-                    {formatDisplay(point, activeTab.toLowerCase(), comparison)}
-                  </Typography>
-
-                  {/* Compare */}
-                  {comparison && (
-                    <Box
-                      sx={{
-                        width: 6,
-                        height: `${compareHeight}%`,
-                        bgcolor: "grey.400",
-                        borderRadius: 2
-                      }}
-                    />
-                  )}
-
-                  {/* Spacer */}
-                  <Box sx={{ width: 4 }} />
-
-                  {/* Current */}
-                  <Box
-                    sx={{
-                      width: 10,
-                      height: `${currentHeight}%`,
-                      bgcolor: point.highlighted ? "error.main" : "primary.main",
-                      borderRadius: 2
-                    }}
-                  />
-                </Box>
-
-                <Box
-                  sx={{
-                    mt: 1,
-                    textAlign: "center",
+                    flex: 1,
                     display: "flex",
                     flexDirection: "column",
                     alignItems: "center",
-                    lineHeight: 1.1
+                    justifyContent: "flex-end",
+                    height: "100%"
                   }}
                 >
-                  <Typography
-                    variant="caption"
+                  <Box
                     sx={{
-                      fontSize: "0.7rem",
-                      opacity: 0.7,
-                      color: "text.primary",
+                      display: "flex",
+                      alignItems: "flex-end",
+                      gap: comparison ? 0.5 : 0,
+                      height: "100%",
+                      position: "relative"
                     }}
                   >
-                    {formatLabel(point.id, activeDataKey)}
-                  </Typography>
+                    <Typography
+                      variant="caption"
+                      sx={{
+                        position: "absolute",
+                        bottom: `${labelHeight}%`,
+                        left: "50%",
+                        transform: "translate(-50%, -6px)",
+                        fontSize: "0.65rem",
+                        whiteSpace: "nowrap",
+                        pointerEvents: "none"
+                      }}
+                    >
+                      {formatDisplay(point, activeTab.toLowerCase(), comparison)}
+                    </Typography>
 
-                  <Typography
-                    variant="caption"
+                    {/* Compare */}
+                    {comparison && (
+                      <Box
+                        sx={{
+                          width: 6,
+                          height: `${compareHeight}%`,
+                          bgcolor: "grey.400",
+                          borderRadius: 2
+                        }}
+                      />
+                    )}
+
+                    {/* Spacer */}
+                    <Box sx={{ width: 4 }} />
+
+                    {/* Current */}
+                    <Box
+                      sx={{
+                        width: 10,
+                        height: `${currentHeight}%`,
+                        bgcolor: point.highlighted ? "error.main" : "primary.main",
+                        borderRadius: 2
+                      }}
+                    />
+                  </Box>
+
+                  <Box
                     sx={{
-                      fontSize: "0.65rem",
-                      color: "grey.400",
-                      visibility:
-                        comparison && point.compareLabel && activeDataKey !== "daily"
-                          ? "visible"
-                          : "hidden"
+                      mt: 1,
+                      textAlign: "center",
+                      display: "flex",
+                      flexDirection: "column",
+                      alignItems: "center",
+                      lineHeight: 1.1
                     }}
                   >
-                    {point.compareLabel
-                      ? formatLabel(point.compareLabel, activeDataKey)
-                      : "placeholder"}
-                  </Typography>
+                    <Typography
+                      variant="caption"
+                      sx={{
+                        fontSize: "0.7rem",
+                        opacity: 0.7,
+                        color: "text.primary",
+                      }}
+                    >
+                      {formatLabel(point.id, activeDataKey)}
+                    </Typography>
+
+                    <Typography
+                      variant="caption"
+                      sx={{
+                        fontSize: "0.65rem",
+                        color: "grey.400",
+                        visibility:
+                          comparison && point.compareLabel && activeDataKey !== "daily"
+                            ? "visible"
+                            : "hidden"
+                      }}
+                    >
+                      {point.compareLabel
+                        ? formatLabel(point.compareLabel, activeDataKey)
+                        : "placeholder"}
+                    </Typography>
+                  </Box>
                 </Box>
-              </Box>
-            );
-          })}
+              );
+            })}
+          </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" }}>

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) => ({
-      id: x.label,
-      amount: x.amount,
-      compareAmount: x.compare,
-      compareLabel: x.prevStart && x.prevEnd
-        ? `${format(x.prevStart)} - ${format(x.prevEnd)}`
-        : undefined
-    }));
+  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
+      };
+    });
 
   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")
     }
   };