cleanup

src/components/ProgressCard/TopTags.tsx

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

src/features/report/report.utils.ts

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