items-by-period (#2)

Reviewed-on: #2
Co-authored-by: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com>
Co-committed-by: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com>

src/components/ProgressCard/ProgressCard.models.ts

@@ -5,4 +5,6 @@ export interface ProgressCardProps {
   totalAmount: number;
   colorTheme?: "primary" | "secondary" | "error" | "info" | "success" | "warning";
   compact?: boolean;
+  selected?: boolean;
+  onClick?: () => void;
 }

src/components/ProgressCard/ProgressCard.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import ProgressCardView from "./ProgressCard.view";
 import { ProgressCardProps } from "./ProgressCard.models";
-import { getPercentage, formatCurrency } from "./ProgressCard.utils";
+import { getPercentage, formatCurrency } from "../report.helpers";
 
 export default function ProgressCard(props: ProgressCardProps) {
   const { progressAmount, totalAmount, compact = false } = props;
@@ -18,6 +18,8 @@ export default function ProgressCard(props: ProgressCardProps) {
       formattedProgress={formattedProgress}
       formattedTotal={formattedTotal}
       compact={compact}
+      selected={props.selected}
+      onClick={props.onClick}
     />
   );
 }

src/components/ProgressCard/ProgressCard.utils.ts

@@ -1,15 +0,0 @@
-export const getPercentage = (progressAmount: number, totalAmount: number) => {
-  if (!totalAmount) return 0;
-  return Math.min(100, Math.max(0, (progressAmount / totalAmount) * 100));
-};
-
-export const formatCurrency = (val: number) => {
-  const absVal = Math.abs(val);
-  if (absVal >= 100000) {
-    return `₹ ${(val / 100000).toFixed(2)}L`;
-  }
-  if (absVal >= 1000) {
-    return `₹ ${(val / 1000).toFixed(2)}k`;
-  }
-  return `₹ ${val.toFixed(2)}`;
-};

src/components/ProgressCard/ProgressCard.view.tsx

@@ -14,6 +14,8 @@ interface ViewProps extends ProgressCardProps {
   percentage: number;
   formattedProgress: string;
   formattedTotal: string;
+  selected?: boolean;
+  onClick?: () => void;
 }
 
 export default function ProgressCardView({
@@ -23,6 +25,8 @@ export default function ProgressCardView({
   formattedProgress,
   formattedTotal,
   compact = false,
+  selected,
+  onClick,
 }: ViewProps) {
   const theme = useTheme();
   const isDark = theme.palette.mode === "dark";
@@ -30,10 +34,14 @@ export default function ProgressCardView({
   return (
     <Paper
       elevation={compact ? 2 : 4}
+      onClick={onClick}
       sx={{
         width: "100%",
         p: compact ? { xs: 2.5, md: 3 } : { xs: 3, md: 4 },
         borderRadius: compact ? 3 : 4,
+        cursor: onClick ? "pointer" : "default",
+        transform: selected ? "scale(1.02)" : "scale(1)",
+        transition: "transform 0.2s ease, box-shadow 0.2s ease",
         background: (theme) => {
           const baseColor = theme.palette[colorTheme]?.main || theme.palette.primary.main;
           const lightColor = theme.palette[colorTheme]?.light || theme.palette.primary.light;
@@ -48,13 +56,19 @@ export default function ProgressCardView({
         justifyContent: "center",
         position: "relative",
         overflow: "hidden",
-        border: isDark ? "1px solid rgba(255,255,255,0.1)" : "none",
-        boxShadow: (theme) =>
-          `0 ${compact ? 6 : 12}px ${compact ? 12 : 24}px -10px ${
+        border: selected 
+          ? `2px solid #fff`
+          : isDark ? "1px solid rgba(255,255,255,0.1)" : "none",
+        boxShadow: (theme) => {
+          const baseShadow = `0 ${compact ? 6 : 12}px ${compact ? 12 : 24}px -10px ${
             isDark
               ? "rgba(0,0,0,0.5)"
               : theme.palette[colorTheme]?.main || theme.palette.primary.main
-          }`,
+          }`;
+          return selected 
+            ? `${baseShadow}, 0 0 0 2px ${theme.palette.background.paper}, 0 0 0 4px ${theme.palette[colorTheme]?.main || theme.palette.primary.main}` 
+            : baseShadow;
+        },
       }}
     >
       <Typography 

src/components/ProgressCard/TopTags.adapter.ts

@@ -0,0 +1,74 @@
+import { ReportData } from "../../features/report";
+import {
+  getAmount,
+  DecoratedPeriod,
+} from "../report.helpers";
+
+// ─── Helpers ─────────────────────────────────────────────────
+
+function findPeriod(
+  periods: DecoratedPeriod[],
+  selectedPeriodId?: string | null
+) {
+  if (!periods.length) return null;
+
+  if (selectedPeriodId) {
+    const match = periods.find((p) => p.id === selectedPeriodId);
+    if (match) return match;
+  }
+
+  // fallback → latest
+  return periods.reduce((latest, p) =>
+    new Date(p.start).getTime() > new Date(latest.start).getTime()
+      ? p
+      : latest
+  );
+}
+
+// ─── Main adapter ────────────────────────────────────────────
+
+export interface TagItem {
+  tag: string;
+  amount: number;
+}
+
+export function extractTopTags(
+  reportData: ReportData,
+  mode: "expense" | "income",
+  selectedPeriodId?: string | null
+): { items: TagItem[]; total: number } {
+  const tagMap = new Map<string, number>();
+
+  for (const bucket of reportData.buckets) {
+    const tags = bucket.group_key.tags;
+    if (!tags || tags.length === 0) continue;
+
+    // Prefer FULL if available
+    const fullPeriods = (bucket.periods.full || []) as DecoratedPeriod[];
+
+    const periodsToUse = selectedPeriodId
+      ? (Object.values(bucket.periods).flat() as DecoratedPeriod[])
+      : fullPeriods;
+
+    const period = findPeriod(periodsToUse, selectedPeriodId);
+    if (!period) continue;
+
+    const amount = getAmount(period, mode);
+
+    for (const tag of tags) {
+      tagMap.set(tag, (tagMap.get(tag) || 0) + amount);
+    }
+  }
+
+  const arr = Array.from(tagMap.entries()).map(([tag, amount]) => ({
+    tag,
+    amount,
+  }));
+
+  arr.sort((a, b) => b.amount - a.amount);
+
+  const top = arr.slice(0, 4);
+  const total = top.reduce((sum, t) => sum + t.amount, 0);
+
+  return { items: top, total };
+}

src/components/ProgressCard/TopTags.tsx

@@ -1,85 +1,28 @@
 import * as React from "react";
 import { Box } from "@mui/material";
-import { ReportData, ReportPeriod } from "../../features/report";
+import { ReportData, GroupKey } from "../../features/report";
 import ProgressCard from "./ProgressCard";
+import { extractTopTags } from "./TopTags.adapter";
 
 type Props = {
   reportData: ReportData;
   mode: "expense" | "income";
   selectedPeriodId?: string | null;
+  selectedGroupKey?: GroupKey | null;
+  setSelectedGroupKey?: (key: GroupKey | null) => void;
   compact?: boolean;
 };
 
-type DecoratedPeriod = ReportPeriod & {
-  id: string;
-  label: string;
-};
-
-function getAmount(p: ReportPeriod, mode: "expense" | "income") {
-  return mode === "expense" ? p.expenses.sum : p.incomes.sum;
-}
-
-function findPeriod(
-  periods: DecoratedPeriod[],
-  selectedPeriodId?: string | null
-) {
-  if (!periods.length) return null;
-
-  if (selectedPeriodId) {
-    const match = periods.find((p) => p.id === selectedPeriodId);
-    if (match) return match;
-  }
-
-  // fallback → latest
-  return periods.reduce((latest, p) =>
-    new Date(p.start).getTime() > new Date(latest.start).getTime()
-      ? p
-      : latest
-  );
-}
-
 export default function TopTags({
   reportData,
   mode,
   selectedPeriodId,
-  compact = true
+  selectedGroupKey,
+  setSelectedGroupKey,
+  compact = true,
 }: Props) {
   const { items, total } = React.useMemo(() => {
-    const tagMap = new Map<string, number>();
-
-    for (const bucket of reportData.buckets) {
-      const tags = bucket.group_key.tags;
-      if (!tags || tags.length === 0) continue;
-
-      // Prefer FULL if available
-      const fullPeriods = (bucket.periods.full || []) as DecoratedPeriod[];
-
-      const periodsToUse =
-        selectedPeriodId
-          ? Object.values(bucket.periods).flat() as DecoratedPeriod[]
-          : fullPeriods;
-
-      const period = findPeriod(periodsToUse, selectedPeriodId);
-      if (!period) continue;
-
-      const amount = getAmount(period, mode);
-
-      for (const tag of tags) {
-        tagMap.set(tag, (tagMap.get(tag) || 0) + amount);
-      }
-    }
-
-    const arr = Array.from(tagMap.entries()).map(([tag, amount]) => ({
-      tag,
-      amount
-    }));
-
-    arr.sort((a, b) => b.amount - a.amount);
-
-    const top = arr.slice(0, 4);
-    const total = top.reduce((sum, t) => sum + t.amount, 0);
-
-    return { items: top, total };
+    return extractTopTags(reportData, mode, selectedPeriodId);
   }, [reportData, mode, selectedPeriodId]);
 
   return (
@@ -89,21 +32,30 @@ export default function TopTags({
         gridTemplateColumns: {
           xs: "1fr",
           sm: "repeat(2, 1fr)",
-          md: "repeat(4, 1fr)"
+          md: "repeat(4, 1fr)",
         },
-        gap: 2
+        gap: 2,
       }}
     >
-      {items.map((item) => (
-        <ProgressCard
-          key={item.tag}
-          header={item.tag}
-          progressAmount={item.amount}
-          totalAmount={total}
-          compact={compact}
-          colorTheme={mode === "expense" ? "error" : "success"}
-        />
-      ))}
+      {items.map((item) => {
+        const isSelected = selectedGroupKey?.tags?.includes(item.tag);
+        return (
+          <ProgressCard
+            key={item.tag}
+            header={item.tag}
+            progressAmount={item.amount}
+            totalAmount={total}
+            compact={compact}
+            colorTheme={mode === "expense" ? "error" : "success"}
+            selected={isSelected}
+            onClick={() => {
+              if (setSelectedGroupKey) {
+                setSelectedGroupKey(isSelected ? null : { tags: [item.tag] });
+              }
+            }}
+          />
+        );
+      })}
     </Box>
   );
 }