fixes

src/components/ProgressCard/ProgressCard.view.tsx

@@ -4,22 +4,23 @@ import {
   Typography,
   Paper,
   LinearProgress,
+  Divider,
   linearProgressClasses
 } from "@mui/material";
 import { ProgressCardProps } from "./ProgressCard.models";
 
 interface ViewProps extends ProgressCardProps {
   percentage: number;
-  prefixAmount: string;
-  suffixString: string;
+  formattedProgress: string;
+  formattedTotal: string;
 }
 
 export default function ProgressCardView({
   header,
   colorTheme = "info",
   percentage,
-  prefixAmount,
-  suffixString,
+  formattedProgress,
+  formattedTotal,
   compact = false,
 }: ViewProps) {
   return (
@@ -27,7 +28,7 @@ export default function ProgressCardView({
       elevation={compact ? 2 : 4}
       sx={{
         width: "100%",
-        p: compact ? { xs: 2, md: 2.5 } : { xs: 3, md: 4 },
+        p: compact ? { xs: 2.5, md: 3 } : { xs: 3, md: 4 },
         borderRadius: compact ? 3 : 4,
         background: (theme) =>
           colorTheme === "info"
@@ -50,26 +51,50 @@ export default function ProgressCardView({
     >
       <Typography 
         variant={compact ? "body2" : "subtitle1"} 
-        fontWeight={600} 
-        sx={{ opacity: 0.9, mb: compact ? 0.5 : 1, width: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}
+        fontWeight={700} 
+        sx={{ 
+          opacity: 0.9, 
+          mb: compact ? 1.5 : 2, 
+          width: '100%', 
+          overflow: 'hidden', 
+          textOverflow: 'ellipsis', 
+          whiteSpace: 'nowrap',
+          letterSpacing: 0.5
+        }}
       >
         {header}
       </Typography>
 
-      <Typography variant={compact ? "h5" : "h3"} fontWeight={800} sx={{ mb: compact ? 2 : 3 }}>
-        {prefixAmount}{" "}
-        {suffixString && (
-          <Typography
-            component="span"
-            variant={compact ? "caption" : "subtitle1"}
-            sx={{ opacity: 0.7, fontWeight: 500 }}
-          >
-            {suffixString}
-          </Typography>
-        )}
-      </Typography>
+      <Box sx={{ mb: compact ? 2 : 3, width: '100%' }}>
+        <Typography
+          variant={compact ? "h5" : "h3"}
+          fontWeight={900}
+          sx={{ mb: 0.5, lineHeight: 1.2 }}
+        >
+          {formattedProgress}
+        </Typography>
 
-      <Box sx={{ width: compact ? "100%" : "85%" }}>
+        <Divider
+          sx={{
+            my: 1,
+            borderColor: "rgba(255,255,255,0.4)",
+            width: "100%",
+          }}
+        />
+
+        <Typography
+          variant={compact ? "caption" : "body2"}
+          sx={{
+            opacity: 0.8,
+            fontWeight: 400,
+            display: "block"
+          }}
+        >
+          {formattedTotal}
+        </Typography>
+      </Box>
+
+      <Box sx={{ width: "100%", mt: 'auto' }}>
         <LinearProgress
           variant="determinate"
           value={percentage}