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.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