TopTags

src/components/HistoryChart/HistoryChart.view.tsx

@@ -58,28 +58,19 @@ export default function HistoryChartView(props: ViewProps) {
   const theme = useTheme();
   const isDark = theme.palette.mode === "dark";
 
-  const total = currentData.length;
-  const maxStartIndex = Math.max(total - visibleCount, 0);
-  const clampedStartIndex = Math.min(startIndex, maxStartIndex);
-
   const handleTabChange = (_: React.MouseEvent<HTMLElement>, newTab: string | null) => {
     if (newTab !== null) setActiveTab(newTab);
   };
 
-  const canGoLeft = clampedStartIndex > 0;
-  const canGoRight = clampedStartIndex < maxStartIndex;
+  const canGoLeft = startIndex > 0;
+  const canGoRight = startIndex + visibleCount < currentData.length;
 
   const handlePrev = () => {
-    if (!canGoLeft) return;
-    setStartIndex((prev) => Math.max(prev - visibleCount, 0));
+    if (canGoLeft) setStartIndex((prev) => prev - visibleCount);
   };
 
   const handleNext = () => {
-    if (!canGoRight) return;
-    setStartIndex((prev) => {
-      const next = prev + visibleCount;
-      return Math.min(next, maxStartIndex);
-    });
+    if (canGoRight) setStartIndex((prev) => prev + visibleCount);
   };
 
   return (

src/components/ProgressCard/TopTags.tsx

@@ -76,24 +76,14 @@ export default function TopTags({
 
     arr.sort((a, b) => b.amount - a.amount);
 
-    const top = arr.slice(0, 4);
+    const top = arr.slice(0, 5);
     const total = top.reduce((sum, t) => sum + t.amount, 0);
 
     return { items: top, total };
   }, [reportData, mode, selectedPeriodId]);
 
   return (
-    <Box
-      sx={{
-        display: "grid",
-        gridTemplateColumns: {
-          xs: "1fr",
-          sm: "repeat(2, 1fr)",
-          md: "repeat(4, 1fr)"
-        },
-        gap: 2
-      }}
-    >
+    <Box sx={{ display: "grid", gap: 2 }}>
       {items.map((item) => (
         <ProgressCard
           key={item.tag}
@@ -101,7 +91,6 @@ export default function TopTags({
           progressAmount={item.amount}
           totalAmount={total}
           compact={compact}
-          colorTheme={mode === "expense" ? "error" : "success"}
         />
       ))}
     </Box>

src/dashboard-config.ts

@@ -22,6 +22,7 @@ export const configuration: DashboardConfig = {
       id: "top-payees",
       title: 'Top Payees',
       component: TopTags,
+      isList: true,
       settings: {
         compact: true,
       },

src/features/report/report.utils.ts

@@ -83,7 +83,10 @@ function buildLabel(
       return `${dayFmt.format(start)} - ${dayFmt.format(end)}`;
 
     case "monthly":
-      return `${monthFmt.format(start)} ${yearFmt.format(start)}`;
+      if (sameMonth(start, end)) {
+        return `${monthFmt.format(start)} ${yearFmt.format(start)}`;
+      }
+      return `${monthDayFmt.format(start)} - ${monthDayFmt.format(end)}`;
 
     case "yearly":
       return yearFmt.format(start);
@@ -107,8 +110,8 @@ function decoratePeriods(
 ): (ReportPeriod & { id: string; label: string })[] {
   return periods.map((p) => ({
     ...p,
-    id: buildPeriodId(type, new Date(p.start + "Z"), new Date(p.end + "Z")),
-    label: buildLabel(type, new Date(p.start + "Z"), new Date(p.end + "Z")),
+    id: buildPeriodId(type, new Date(p.start), new Date(p.end)),
+    label: buildLabel(type, new Date(p.start), new Date(p.end)),
   }));
 }