From 5bfc2a1bbaa99689c52aecd13426264c8a9368db Mon Sep 17 00:00:00 2001
From: Pritam Bag <130136389+PritamBag@users.noreply.github.com>
Date: Sat, 27 Jul 2024 12:14:51 +0530
Subject: [PATCH] fix(core): :bug: add progress percentage in
 circularProgressBar

A percentage number should be displayed inside the CircularProgressBar to indicate the progress of profile completeness.

Ref: #68
---
 app/components/ProfileCompletenessCard.js | 27 +++++++++++++++++++----
 1 file changed, 23 insertions(+), 4 deletions(-)

diff --git a/app/components/ProfileCompletenessCard.js b/app/components/ProfileCompletenessCard.js
index d0da19d..c759c65 100644
--- a/app/components/ProfileCompletenessCard.js
+++ b/app/components/ProfileCompletenessCard.js
@@ -8,6 +8,7 @@ import {
   CoreChip,
   CoreDivider,
   CoreIcon,
+  CoreTypographyOverline,
   CoreTypographyBody2,
   CoreCircularProgress,
   CoreContainedButton,
@@ -174,11 +175,29 @@ export default function ProfileCompletenessCard() {
         <CoreCard>
           <CoreCardHeader
             avatar={
-              <CoreCircularProgress
-                variant="determinate"
-                value={report?.quotient}
+              <CoreBox styleClasses={[CoreClasses.POSITION.POSITION_RELATIVE, CoreClasses.DISPLAY.INLINE_FLEX]}>
+                <CoreCircularProgress
+                  variant="determinate"
+                  value={report?.quotient}
                 // size={100}
-              />
+                />
+
+                <CoreBox styleClasses={[
+                  CoreClasses.POSITION.TOP_50,
+                  CoreClasses.POSITION.BOTTOM_0,
+                  CoreClasses.POSITION.START_0,
+                  CoreClasses.POSITION.END_0,
+                  CoreClasses.POSITION.POSITION_ABSOLUTE,
+                  CoreClasses.DISPLAY.FLEX,
+                  CoreClasses.ALIGNMENT.ALIGN_ITEMS_CENTER,
+                  CoreClasses.ALIGNMENT.JUSTIFY_CONTENT_CENTER
+                ]}>
+                  <CoreTypographyOverline styleClasses={[CoreClasses.TEXT.TEXT_WEIGHT_MEDIUM, CoreClasses.COLOR.TEXT_PRIMARY]}>
+                    {`${report?.quotient}%`}
+                  </CoreTypographyOverline>
+                </CoreBox>
+              </CoreBox>
+              
             }
             title="Setup your Rxefy account"
             subheader="You still have information missing on your profile"