Progress Cards for Top Payees

src/components/ProgressCard/ProgressCard.models.ts

@@ -4,4 +4,5 @@ export interface ProgressCardProps {
   progressAmount: number;
   totalAmount: number;
   colorTheme?: "primary" | "secondary" | "error" | "info" | "success" | "warning";
+  compact?: boolean;
 }

src/components/ProgressCard/ProgressCard.tsx

@@ -3,7 +3,7 @@ import { ProgressCardProps } from "./ProgressCard.models";
 import { getPercentage, parseSummary } from "./ProgressCard.utils";
 
 export default function ProgressCard(props: ProgressCardProps) {
-  const { progressAmount, totalAmount, summary } = props;
+  const { progressAmount, totalAmount, summary, compact = false } = props;
 
   const percentage = getPercentage(progressAmount, totalAmount);
   const { prefixAmount, suffixString } = parseSummary(
@@ -18,6 +18,7 @@ export default function ProgressCard(props: ProgressCardProps) {
       percentage={percentage}
       prefixAmount={prefixAmount}
       suffixString={suffixString}
+      compact={compact}
     />
   );
 }

src/components/ProgressCard/ProgressCard.view.tsx

@@ -20,14 +20,15 @@ export default function ProgressCardView({
   percentage,
   prefixAmount,
   suffixString,
+  compact = false,
 }: ViewProps) {
   return (
     <Paper
-      elevation={4}
+      elevation={compact ? 2 : 4}
       sx={{
         width: "100%",
-        p: { xs: 3, md: 4 },
-        borderRadius: 4,
+        p: compact ? { xs: 2, md: 2.5 } : { xs: 3, md: 4 },
+        borderRadius: compact ? 3 : 4,
         background: (theme) =>
           colorTheme === "info"
             ? "linear-gradient(135deg, #0284c7 0%, #06b6d4 100%)"
@@ -35,28 +36,32 @@ export default function ProgressCardView({
         color: "#fff",
         display: "flex",
         flexDirection: "column",
-        alignItems: "center",
+        alignItems: compact ? "flex-start" : "center",
         justifyContent: "center",
         position: "relative",
         overflow: "hidden",
         boxShadow: (theme) =>
-          `0 12px 24px -10px ${
+          `0 ${compact ? 6 : 12}px ${compact ? 12 : 24}px -10px ${
             theme.palette.mode === "dark"
               ? "#000"
               : theme.palette[colorTheme].main
           }`,
       }}
     >
-      <Typography variant="subtitle1" fontWeight={600} sx={{ opacity: 0.9, mb: 1 }}>
+      <Typography 
+        variant={compact ? "body2" : "subtitle1"} 
+        fontWeight={600} 
+        sx={{ opacity: 0.9, mb: compact ? 0.5 : 1, width: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}
+      >
         {header}
       </Typography>
 
-      <Typography variant="h3" fontWeight={800} sx={{ mb: 3 }}>
+      <Typography variant={compact ? "h5" : "h3"} fontWeight={800} sx={{ mb: compact ? 2 : 3 }}>
         {prefixAmount}{" "}
         {suffixString && (
           <Typography
             component="span"
-            variant="subtitle1"
+            variant={compact ? "caption" : "subtitle1"}
             sx={{ opacity: 0.7, fontWeight: 500 }}
           >
             {suffixString}
@@ -64,12 +69,12 @@ export default function ProgressCardView({
         )}
       </Typography>
 
-      <Box sx={{ width: "85%" }}>
+      <Box sx={{ width: compact ? "100%" : "85%" }}>
         <LinearProgress
           variant="determinate"
           value={percentage}
           sx={{
-            height: 10,
+            height: compact ? 6 : 10,
             borderRadius: 5,
             [`&.${linearProgressClasses.colorPrimary}`]: {
               backgroundColor: "rgba(0, 0, 0, 0.2)",

src/components/ProgressCard/index.ts

@@ -1,2 +1,2 @@
-export { default } from "./LatestItems";
-export * from "./LatestItems.models";
+export { default } from "./ProgressCard";
+export * from "./ProgressCard.models";