src/components/ProgressCard/ProgressCard.tsx

@@ -1,23 +1,22 @@
+import * as React from "react";
 import ProgressCardView from "./ProgressCard.view";
 import { ProgressCardProps } from "./ProgressCard.models";
-import { getPercentage, parseSummary } from "./ProgressCard.utils";
+import { getPercentage, formatCurrency } from "./ProgressCard.utils";
 
 export default function ProgressCard(props: ProgressCardProps) {
-  const { progressAmount, totalAmount, summary, compact = false } = props;
+  const { progressAmount, totalAmount, compact = false } = props;
 
   const percentage = getPercentage(progressAmount, totalAmount);
-  const { prefixAmount, suffixString } = parseSummary(
+  
-    summary,
+  const formattedProgress = formatCurrency(progressAmount);
-    progressAmount,
+  const formattedTotal = formatCurrency(totalAmount);
-    totalAmount
-  );
 
   return (
     <ProgressCardView
       {...props}
       percentage={percentage}
-      prefixAmount={prefixAmount}
+      formattedProgress={formattedProgress}
-      suffixString={suffixString}
+      formattedTotal={formattedTotal}
       compact={compact}
     />
   );

src/components/ProgressCard/ProgressCard.utils.ts

@@ -3,17 +3,13 @@ export const getPercentage = (progressAmount: number, totalAmount: number) => {
   return Math.min(100, Math.max(0, (progressAmount / totalAmount) * 100));
 };
 
-export const parseSummary = (
+export const formatCurrency = (val: number) => {
-  summary: string | undefined,
+  const absVal = Math.abs(val);
-  progressAmount: number,
+  if (absVal >= 100000) {
-  totalAmount: number
+    return `₹ ${(val / 100000).toFixed(2)}L`;
-) => {
+  }
-  const displaySummary = summary ?? `Rs ${progressAmount} / Rs ${totalAmount}`;
+  if (absVal >= 1000) {
-
+    return `₹ ${(val / 1000).toFixed(2)}k`;
-  const parts = displaySummary.split("/");
+  }
-  const prefixAmount = parts[0]?.trim() || "";
+  return `₹ ${val.toFixed(2)}`;
-  const suffixString =
-    parts.length > 1 ? `/ ${parts.slice(1).join("/").trim()}` : "";
-
-  return { prefixAmount, suffixString };
 };

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;
+  formattedProgress: string;
-  suffixString: string;
+  formattedTotal: string;
 }
 
 export default function ProgressCardView({
   header,
   colorTheme = "info",
   percentage,
-  prefixAmount,
+  formattedProgress,
-  suffixString,
+  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} 
+        fontWeight={700} 
-        sx={{ opacity: 0.9, mb: compact ? 0.5 : 1, width: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}
+        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 }}>
+      <Box sx={{ mb: compact ? 2 : 3, width: '100%' }}>
-        {prefixAmount}{" "}
+        <Typography
-        {suffixString && (
+          variant={compact ? "h5" : "h3"}
-          <Typography
+          fontWeight={900}
-            component="span"
+          sx={{ mb: 0.5, lineHeight: 1.2 }}
-            variant={compact ? "caption" : "subtitle1"}
+        >
-            sx={{ opacity: 0.7, fontWeight: 500 }}
+          {formattedProgress}
-          >
+        </Typography>
-            {suffixString}
-          </Typography>
-        )}
-      </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}