comparison

src/Dashboard.tsx

@@ -38,6 +38,7 @@ export default function Dashboard() {
 
   const [mode, setMode] = React.useState<"expense" | "income">("expense");
   const [period, setPeriod] = React.useState<"rolling" | "calendar">("rolling");
+  const [comparison, setComparison] = React.useState(false);
 
   const [loading, setLoading] = React.useState(true);
   const [error, setError] = React.useState<string | null>(null);
@@ -131,9 +132,11 @@ export default function Dashboard() {
             header={`${mode === "expense" ? "Expense" : "Income"} Breakdown`}
             summary="Interactive chronological tracking"
             tabs={["Daily", "Weekly", "Monthly"]}
-            data={currentData?.chartData || {}}
+            data={currentData.chartData}
             period={period}
             onPeriodChange={setPeriod}
+            comparison={comparison}
+            setComparison={setComparison}
           />
         </Grid>
       </Grid>

src/components/HistoryChart.tsx

@@ -9,13 +9,26 @@ export interface ChartDataPoint {
   highlighted?: boolean;
 }
 
+export interface ChartSeries {
+  rolling: ChartDataPoint[];
+  calendar: ChartDataPoint[];
+}
+
+export interface ChartData {
+  daily: ChartDataPoint[];
+  weekly: ChartSeries;
+  monthly: ChartSeries;
+}
+
 export interface HistoryChartProps {
   header: string;
   summary?: string;
   tabs: string[];
-  data: Record<string, ChartDataPoint[]>;
+  data: ChartData;
-  period: "rolling" | "calendar",
+  period: "rolling" | "calendar";
   onPeriodChange: (mode: "rolling" | "calendar") => void;
+  comparison: boolean;
+  setComparison: (mode: boolean) => void;
 }
 
 export default function HistoryChart({
@@ -25,6 +38,8 @@ export default function HistoryChart({
   data,
   period,
   onPeriodChange,
+  comparison,
+  setComparison,
 }: HistoryChartProps) {
   const [activeTab, setActiveTab] = React.useState<string>(tabs[0] || "");
 
@@ -34,54 +49,69 @@ export default function HistoryChart({
     }
   };
 
-  const activeDataKey = activeTab.toLowerCase();
+  const activeDataKey = activeTab.toLowerCase() as keyof ChartData;
-  let rawData;
+
+  let rawData: ChartDataPoint[] = [];
+
   if (activeDataKey === "daily") {
-    rawData = data.daily;
+    rawData = data.daily || [];
   } else {
-    // @ts-ignore
+    const section = data[activeDataKey];
-    rawData = data[activeDataKey]?.[period] || [];
+    rawData = section?.[period] || [];
   }
+
   const currentData = rawData;
 
   const maxAmount =
     currentData.length > 0
-      ? Math.max(...currentData.map((d: { amount: any; }) => d.amount), 1)
+      ? Math.max(
+          ...currentData.flatMap((d) =>
+            comparison ? [d.amount, d.compareAmount || 0] : [d.amount]
+          ),
+          1
+        )
       : 1;
 
-  // ✅ Formatter (₹ + adaptive units)
   const formatAmount = (amount: number) => {
     const tab = activeTab.toLowerCase();
 
     if (amount === 0) return "";
 
     if (tab === "monthly") {
-      if (amount >= 100000) {
+      if (amount >= 100000) return `₹ ${(amount / 100000).toFixed(2)} L`;
-        return `₹ ${(amount / 100000).toFixed(2)} L`;
-      }
       return `₹ ${amount.toLocaleString("en-IN")}`;
     }
 
     if (tab === "weekly") {
-      if (amount >= 1000) {
+      if (amount >= 1000) return `₹ ${(amount / 1000).toFixed(1)} K`;
-        return `₹ ${(amount / 1000).toFixed(1)} K`;
-      }
       return `₹ ${amount.toLocaleString("en-IN")}`;
     }
 
     return `₹ ${amount.toLocaleString("en-IN")}`;
   };
+
   return (
-    <Paper sx={{ p: { xs: 2, sm: 4 }, borderRadius: 4, width: "100%", boxShadow: 'none', border: '1px solid', borderColor: 'divider' }}>
+    <Paper
+      sx={{
+        p: { xs: 2, sm: 4 },
+        borderRadius: 4,
+        width: "100%",
+        boxShadow: "none",
+        border: "1px solid",
+        borderColor: "divider"
+      }}
+    >
       <Typography variant="h6" fontWeight={700} gutterBottom>
         {header}
       </Typography>
+
       {summary && (
         <Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
           {summary}
         </Typography>
       )}
 
+      {/* Tabs */}
       <ToggleButtonGroup
         value={activeTab}
         exclusive
@@ -89,7 +119,10 @@ export default function HistoryChart({
         fullWidth
         sx={{
           mb: 4,
-          bgcolor: (theme) => theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.02)',
+          bgcolor: (theme) =>
+            theme.palette.mode === "dark"
+              ? "rgba(255,255,255,0.05)"
+              : "rgba(0,0,0,0.02)",
           borderRadius: 8,
           p: 0.5,
           "& .MuiToggleButton-root": {
@@ -99,11 +132,16 @@ export default function HistoryChart({
             fontWeight: 600,
             color: "text.secondary",
             "&.Mui-selected": {
-              bgcolor: (theme) => theme.palette.mode === 'dark' ? 'primary.dark' : 'primary.light',
+              bgcolor: (theme) =>
-              color: (theme) => theme.palette.mode === 'dark' ? 'primary.contrastText' : 'primary.main',
+                theme.palette.mode === "dark"
-              boxShadow: '0 2px 8px rgba(0,0,0,0.05)',
+                  ? "primary.dark"
-            },
+                  : "primary.light",
-          },
+              color: (theme) =>
+                theme.palette.mode === "dark"
+                  ? "primary.contrastText"
+                  : "primary.main"
+            }
+          }
         }}
       >
         {tabs.map((tab) => (
@@ -113,6 +151,7 @@ export default function HistoryChart({
         ))}
       </ToggleButtonGroup>
 
+      {/* Period Toggle */}
       <ToggleButtonGroup
         value={period}
         exclusive
@@ -121,66 +160,89 @@ export default function HistoryChart({
         sx={{ mb: 2 }}
       >
         <ToggleButton value="rolling">Rolling</ToggleButton>
-        <ToggleButton
+        <ToggleButton value="calendar" disabled={activeDataKey === "daily"}>
-          value="calendar"
-          disabled={activeTab.toLowerCase() === "daily"}
-        >
           Calendar
         </ToggleButton>
       </ToggleButtonGroup>
 
-      {/* Chart Area */}
+      <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>
+
+      {/* Chart */}
       {currentData.length > 0 ? (
-        <Box sx={{ display: "flex", alignItems: "flex-end", height: 200, mt: 4, position: 'relative' }}>
+        <Box sx={{ display: "flex", alignItems: "flex-end", height: 220, mt: 4 }}>
-          {currentData.map((point: { amount: number; id: string, highlighted: boolean }) => {
+          {currentData.map((point) => {
-            const heightPerc = (point.amount / maxAmount) * 100;
+            const currentHeight = (point.amount / maxAmount) * 100;
+            const compareHeight = ((point.compareAmount || 0) / maxAmount) * 100;
+
             return (
               <Box
-                key={
+                key={point.id}
-                  activeTab.toLowerCase() === "month"
-                  ? point.id.replace(" - ", "\n")
-                  : point.id
-                }
                 sx={{
                   flex: 1,
                   display: "flex",
                   flexDirection: "column",
                   alignItems: "center",
                   justifyContent: "flex-end",
-                  height: "100%",
+                  height: "100%"
                 }}
               >
+                {/* Values */}
+                <Typography variant="caption" sx={{ mb: 1, fontSize: "0.65rem" }}>
+                  {formatAmount(point.amount)}
+                </Typography>
+
+                {/* Bars */}
+                <Box
+                  sx={{
+                    display: "flex",
+                    alignItems: "flex-end",
+                    gap: comparison ? 0.5 : 0,
+                    height: "100%"
+                  }}
+                >
+                  {/* Compare */}
+                  {comparison && (
+                    <Box
+                      sx={{
+                        width: 6,
+                        height: `${compareHeight}%`,
+                        bgcolor: "grey.400",
+                        borderRadius: 2
+                      }}
+                    />
+                  )}
+
+                  {/* Current */}
+                  <Box
+                    sx={{
+                      width: 10,
+                      height: `${currentHeight}%`,
+                      bgcolor: point.highlighted ? "error.main" : "primary.main",
+                      borderRadius: 2
+                    }}
+                  />
+                </Box>
+
+                {/* Label */}
                 <Typography
                   variant="caption"
                   color="text.secondary"
                   sx={{
                     mt: 1,
-                    fontWeight: 500,
+                    fontSize: "0.7rem",
-                    fontSize: '0.7rem',
+                    textAlign: "center",
-                    textAlign: 'center',
+                    whiteSpace: "pre-line"
-                    whiteSpace: 'pre-line'
                   }}
                 >
-                  {point.amount > 0 ? formatAmount(point.amount) : ""}
-                </Typography>
-
-                <Box
-                  sx={{
-                    width: "40%",
-                    minWidth: 12,
-                    maxWidth: 32,
-                    height: `${heightPerc}%`,
-                    minHeight: "4px",
-                    bgcolor: point.highlighted ? "error.main" : "grey.300",
-                    borderRadius: 4,
-                    transition: "height 0.5s cubic-bezier(0.4, 0, 0.2, 1)",
-                    ...(point.highlighted && {
-                      boxShadow: (theme) => `0 4px 12px ${theme.palette.error.main}40`,
-                    }),
-                  }}
-                />
-
-                <Typography variant="caption" color="text.secondary" sx={{ mt: 1, fontWeight: 500, fontSize: '0.7rem' }}>
                   {point.id}
                 </Typography>
               </Box>

src/utils/dashboardLoader.ts

@@ -32,6 +32,9 @@ const getStartOfWeek = (d: Date) => {
   return startOfDay(date);
 };
 
+const shiftDate = (d: Date, days: number) =>
+  new Date(d.getTime() + days * 86400000);
+
 // ---------------- LATEST ----------------
 export async function fetchLatestTransactions(
   type: "expense" | "income"
@@ -106,13 +109,20 @@ export async function fetchAggregatedData(
   const normalize = (amt: number) => Math.abs(amt);
 
   // ---------------- DAILY ----------------
-  const dailyBuckets: Record<string, number> = {
+  const dailyBuckets: Record<string, any> = {
-    Mon: 0, Tue: 0, Wed: 0, Thu: 0,
+    Mon: { amount: 0, compare: 0 },
-    Fri: 0, Sat: 0, Sun: 0
+    Tue: { amount: 0, compare: 0 },
+    Wed: { amount: 0, compare: 0 },
+    Thu: { amount: 0, compare: 0 },
+    Fri: { amount: 0, compare: 0 },
+    Sat: { amount: 0, compare: 0 },
+    Sun: { amount: 0, compare: 0 }
   };
 
   const weekStart = getStartOfWeek(now);
   const weekEnd = endOfDay(new Date(weekStart.getTime() + 6 * 86400000));
+  const prevWeekStart = shiftDate(weekStart, -7);
+  const prevWeekEnd = shiftDate(weekEnd, -7);
 
   // ---------------- WEEKLY ----------------
   const weeklyRolling: any[] = [];
@@ -120,7 +130,7 @@ export async function fetchAggregatedData(
 
   const currentWeekStart = getStartOfWeek(now);
 
-  // rolling (last 5 weeks, oldest → newest)
+  // rolling (last 5 weeks)
   for (let i = 4; i >= 0; i--) {
     const start = new Date(currentWeekStart.getTime() - i * 7 * 86400000);
     const end = endOfDay(new Date(start.getTime() + 6 * 86400000));
@@ -129,11 +139,14 @@ export async function fetchAggregatedData(
       label: `${format(start)} - ${format(end)}`,
       start,
       end,
-      amount: 0
+      amount: 0,
+      compare: 0,
+      prevStart: shiftDate(start, -7),
+      prevEnd: shiftDate(end, -7)
     });
   }
 
-  // calendar (full weeks covering current month)
+  // calendar weeks
   const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
   const endOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0);
 
@@ -151,7 +164,10 @@ export async function fetchAggregatedData(
       label: `${format(start)} - ${format(end)}`,
       start,
       end,
-      amount: 0
+      amount: 0,
+      compare: 0,
+      prevStart: shiftDate(start, -7),
+      prevEnd: shiftDate(end, -7)
     });
   }
 
@@ -159,7 +175,7 @@ export async function fetchAggregatedData(
   const monthlyRolling: any[] = [];
   const monthlyCalendar: any[] = [];
 
-  // rolling (last 12 months, oldest → newest)
+  // rolling (last 12 months)
   for (let i = 11; i >= 0; i--) {
     const d = new Date(now);
     d.setMonth(d.getMonth() - i);
@@ -170,24 +186,44 @@ export async function fetchAggregatedData(
         ? endOfDay(now)
         : endOfDay(new Date(d.getFullYear(), d.getMonth() + 1, 0));
 
+    const prevStart = new Date(start);
+    prevStart.setMonth(prevStart.getMonth() - 1);
+    const prevEnd = new Date(end);
+    prevEnd.setMonth(prevEnd.getMonth() - 1);
+
     monthlyRolling.push({
-      label: `${d.toLocaleString("default", { month: "short" })}-${String(d.getFullYear()).slice(2)}`,
+      label: `${d.toLocaleString("default", { month: "short" })}-${String(
+        d.getFullYear()
+      ).slice(2)}`,
       start,
       end,
-      amount: 0
+      amount: 0,
+      compare: 0,
+      prevStart,
+      prevEnd
     });
   }
 
-  // calendar (full year Jan → Dec)
+  // calendar (Jan–Dec)
   for (let i = 0; i < 12; i++) {
     const start = new Date(now.getFullYear(), i, 1);
     const end = endOfDay(new Date(now.getFullYear(), i + 1, 0));
 
+    const prevStart = new Date(start);
+    prevStart.setFullYear(prevStart.getFullYear() - 1);
+    const prevEnd = new Date(end);
+    prevEnd.setFullYear(prevEnd.getFullYear() - 1);
+
     monthlyCalendar.push({
-      label: `${start.toLocaleString("default", { month: "short" })}-${String(start.getFullYear()).slice(2)}`,
+      label: `${start.toLocaleString("default", { month: "short" })}-${String(
+        start.getFullYear()
+      ).slice(2)}`,
       start,
       end,
-      amount: 0
+      amount: 0,
+      compare: 0,
+      prevStart,
+      prevEnd
     });
   }
 
@@ -210,38 +246,51 @@ export async function fetchAggregatedData(
     // DAILY
     if (d >= weekStart && d <= weekEnd) {
       const day = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"][d.getDay()];
-      if (dailyBuckets[day] !== undefined) {
+      if (dailyBuckets[day]) {
-        dailyBuckets[day] += amt;
+        dailyBuckets[day].amount += amt;
+      }
+    }
+
+    if (d >= prevWeekStart && d <= prevWeekEnd) {
+      const day = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"][d.getDay()];
+      if (dailyBuckets[day]) {
+        dailyBuckets[day].compare += amt;
       }
     }
 
     // WEEKLY
     for (const b of weeklyRolling) {
       if (d >= b.start && d <= b.end) b.amount += amt;
+      if (d >= b.prevStart && d <= b.prevEnd) b.compare += amt;
     }
     for (const b of weeklyCalendar) {
       if (d >= b.start && d <= b.end) b.amount += amt;
+      if (d >= b.prevStart && d <= b.prevEnd) b.compare += amt;
     }
 
     // MONTHLY
     for (const b of monthlyRolling) {
       if (d >= b.start && d <= b.end) b.amount += amt;
+      if (d >= b.prevStart && d <= b.prevEnd) b.compare += amt;
     }
     for (const b of monthlyCalendar) {
       if (d >= b.start && d <= b.end) b.amount += amt;
+      if (d >= b.prevStart && d <= b.prevEnd) b.compare += amt;
     }
   }
 
   const toPoints = (arr: any[]): ChartDataPoint[] =>
     arr.map((x) => ({
       id: x.label,
-      amount: x.amount
+      amount: x.amount,
+      compareAmount: x.compare
     }));
 
   const chartData: ChartData = {
-    daily: Object.entries(dailyBuckets).map(([k, v]) => ({
+    daily: Object.entries(dailyBuckets).map(([k, v]: any) => ({
       id: k,
-      amount: v
+      amount: v.amount,
+      compareAmount: v.compare
     })),
     weekly: {
       rolling: toPoints(weeklyRolling),
@@ -253,7 +302,7 @@ export async function fetchAggregatedData(
     }
   };
 
-  // highlight max (per visible set default to rolling)
+  // highlight max (current only)
   Object.values(chartData).forEach((group: any) => {
     const arr = Array.isArray(group) ? group : group.rolling;
     if (!arr?.length) return;