From 67d4c85146352f3002c8958285c69570678725da Mon Sep 17 00:00:00 2001 From: Vishesh 'ironeagle' Bangotra Date: Sat, 25 Apr 2026 12:49:58 +0530 Subject: [PATCH] fixes --- src/components/ProgressCard/ProgressCard.tsx | 17 +++-- .../ProgressCard/ProgressCard.utils.ts | 22 +++---- .../ProgressCard/ProgressCard.view.tsx | 65 +++++++++++++------ 3 files changed, 62 insertions(+), 42 deletions(-) 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} + + + +