diff --git a/src/components/ProgressCard/ProgressCard.tsx b/src/components/ProgressCard/ProgressCard.tsx
index 883abf3..3441a2f 100644
--- a/src/components/ProgressCard/ProgressCard.tsx
+++ b/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,
- progressAmount,
- totalAmount
- );
+
+ const formattedProgress = formatCurrency(progressAmount);
+ const formattedTotal = formatCurrency(totalAmount);
return (
);
diff --git a/src/components/ProgressCard/ProgressCard.utils.ts b/src/components/ProgressCard/ProgressCard.utils.ts
index 6f126cd..de50ef5 100644
--- a/src/components/ProgressCard/ProgressCard.utils.ts
+++ b/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 = (
- 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 };
+export const formatCurrency = (val: number) => {
+ const absVal = Math.abs(val);
+ if (absVal >= 100000) {
+ return `₹ ${(val / 100000).toFixed(2)}L`;
+ }
+ if (absVal >= 1000) {
+ return `₹ ${(val / 1000).toFixed(2)}k`;
+ }
+ return `₹ ${val.toFixed(2)}`;
};
diff --git a/src/components/ProgressCard/ProgressCard.view.tsx b/src/components/ProgressCard/ProgressCard.view.tsx
index 0e6a0a7..101a2cc 100644
--- a/src/components/ProgressCard/ProgressCard.view.tsx
+++ b/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({
>
{header}
-
- {prefixAmount}{" "}
- {suffixString && (
-
- {suffixString}
-
- )}
-
+
+
+ {formattedProgress}
+
-
+
+
+
+ {formattedTotal}
+
+
+
+