refactored ProgressCard to component

src/components/ProgressCard/ProgressCard.models.ts

@@ -0,0 +1,7 @@
+export interface ProgressCardProps {
+  header: string;
+  summary?: string;
+  progressAmount: number;
+  totalAmount: number;
+  colorTheme?: "primary" | "secondary" | "error" | "info" | "success" | "warning";
+}

src/components/ProgressCard/ProgressCard.tsx

@@ -0,0 +1,23 @@
+import ProgressCardView from "./ProgressCard.view";
+import { ProgressCardProps } from "./ProgressCard.models";
+import { getPercentage, parseSummary } from "./ProgressCard.utils";
+
+export default function ProgressCard(props: ProgressCardProps) {
+  const { progressAmount, totalAmount, summary } = props;
+
+  const percentage = getPercentage(progressAmount, totalAmount);
+  const { prefixAmount, suffixString } = parseSummary(
+    summary,
+    progressAmount,
+    totalAmount
+  );
+
+  return (
+    <ProgressCardView
+      {...props}
+      percentage={percentage}
+      prefixAmount={prefixAmount}
+      suffixString={suffixString}
+    />
+  );
+}

src/components/ProgressCard/ProgressCard.utils.ts

@@ -0,0 +1,19 @@
+export const getPercentage = (progressAmount: number, totalAmount: number) => {
+  if (!totalAmount) return 0;
+  return Math.min(100, Math.max(0, (progressAmount / totalAmount) * 100));
+};
+
+export const parseSummary = (
+  summary: string | undefined,
+  progressAmount: number,
+  totalAmount: number
+) => {
+  const displaySummary = summary ?? `Rs ${progressAmount} / Rs ${totalAmount}`;
+
+  const parts = displaySummary.split("/");
+  const prefixAmount = parts[0]?.trim() || "";
+  const suffixString =
+    parts.length > 1 ? `/ ${parts.slice(1).join("/").trim()}` : "";
+
+  return { prefixAmount, suffixString };
+};

src/components/ProgressCard/ProgressCard.view.tsx

@@ -1,29 +1,26 @@
 import * as React from "react";
-import { Box, Typography, Paper, LinearProgress, linearProgressClasses } from "@mui/material";
+import {
+  Box,
+  Typography,
+  Paper,
+  LinearProgress,
+  linearProgressClasses
+} from "@mui/material";
+import { ProgressCardProps } from "./ProgressCard.models";
 
-export interface ProgressCardProps {
-  header: string;
-  summary?: string;
-  progressAmount: number;
-  totalAmount: number;
-  colorTheme?: "primary" | "secondary" | "error" | "info" | "success" | "warning";
+interface ViewProps extends ProgressCardProps {
+  percentage: number;
+  prefixAmount: string;
+  suffixString: string;
 }
 
-export default function ProgressCard({
+export default function ProgressCardView({
   header,
-  summary,
-  progressAmount,
-  totalAmount,
   colorTheme = "info",
-}: ProgressCardProps) {
-  const percentage = Math.min(100, Math.max(0, (progressAmount / totalAmount) * 100)) || 0;
-  
-  const displaySummary = summary ?? `Rs ${progressAmount} / Rs ${totalAmount}`;
-  
-  const parts = displaySummary.split('/');
-  const prefixAmount = parts[0]?.trim() || '';
-  const suffixString = parts.length > 1 ? `/ ${parts.slice(1).join('/').trim()}` : '';
-
+  percentage,
+  prefixAmount,
+  suffixString,
+}: ViewProps) {
   return (
     <Paper
       elevation={4}
@@ -40,9 +37,14 @@ export default function ProgressCard({
         flexDirection: "column",
         alignItems: "center",
         justifyContent: "center",
-        position: 'relative',
-        overflow: 'hidden',
-        boxShadow: (theme) => `0 12px 24px -10px ${theme.palette.mode === 'dark' ? '#000' : theme.palette[colorTheme].main}`,
+        position: "relative",
+        overflow: "hidden",
+        boxShadow: (theme) =>
+          `0 12px 24px -10px ${
+            theme.palette.mode === "dark"
+              ? "#000"
+              : theme.palette[colorTheme].main
+          }`,
       }}
     >
       <Typography variant="subtitle1" fontWeight={600} sx={{ opacity: 0.9, mb: 1 }}>
@@ -52,7 +54,11 @@ export default function ProgressCard({
       <Typography variant="h3" fontWeight={800} sx={{ mb: 3 }}>
         {prefixAmount}{" "}
         {suffixString && (
-          <Typography component="span" variant="subtitle1" sx={{ opacity: 0.7, fontWeight: 500 }}>
+          <Typography
+            component="span"
+            variant="subtitle1"
+            sx={{ opacity: 0.7, fontWeight: 500 }}
+          >
             {suffixString}
           </Typography>
         )}
@@ -70,7 +76,7 @@ export default function ProgressCard({
             },
             [`& .${linearProgressClasses.bar}`]: {
               borderRadius: 5,
-              backgroundColor: "#fff", 
+              backgroundColor: "#fff",
             },
           }}
         />

src/components/ProgressCard/index.ts

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