secure score pimpin'

JohnDuprey · May 2, 2024 · d8662fa · d8662fa
1 parent cdc867d
commit d8662fa
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 61 deletions.
diff --git a/src/components/contentcards/CippPrettyCard.jsx b/src/components/contentcards/CippPrettyCard.jsx
@@ -6,7 +6,7 @@ import 'react-circular-progressbar/dist/styles.css'
 
 export default function CippPrettyCard({
   title,
-  titleType = 'big',
+  titleType = 'normal',
   percentage,
   topLabel,
   smallLabel,

diff --git a/src/views/tenant/administration/SecureScore.jsx b/src/views/tenant/administration/SecureScore.jsx
@@ -232,68 +232,38 @@ const SecureScore = () => {
           />
         </CCol>
         <CCol xs={3} className="mb-3">
-          <CCard className="content-card h-100">
-            <CCardHeader className="d-flex justify-content-between align-items-center">
-              <CCardTitle>Compared Score (Similiar sized business)</CCardTitle>
-            </CCardHeader>
-            <CCardBody>
-              <CCardText>
-                {isFetching && <Skeleton />}
-                {translateState && (
-                  <>
-                    <h3>
-                      {
-                        //calculate percentage, round to 1 dec.
-                        Math.round(
-                          (translateData?.averageComparativeScores[1]?.averageScore /
-                            translateData?.maxScore) *
-                            100 *
-                            10,
-                        ) / 10
-                      }
-                      %
-                    </h3>
-                    <small className="text-medium-emphasis">
-                      {translateData?.averageComparativeScores[1]?.averageScore} of{' '}
-                      {translateData?.maxScore} points
-                    </small>
-                  </>
-                )}
-              </CCardText>
-            </CCardBody>
-          </CCard>
+          <CippPrettyCard
+            title="Compared Score (Similiar sized business)"
+            percentage={
+              //calculate percentage, round to 1 dec.
+              Math.round(
+                (translateData?.averageComparativeScores[1]?.averageScore /
+                  translateData?.maxScore) *
+                  100 *
+                  10,
+              ) / 10
+            }
+            topLabel={translateData?.averageComparativeScores[1]?.averageScore}
+            smallLabel={`of ${translateData?.maxScore} points`}
+            isFetching={isFetching}
+          />
         </CCol>
         <CCol xs={3} className="mb-3">
-          <CCard className="content-card h-100">
-            <CCardHeader className="d-flex justify-content-between align-items-center">
-              <CCardTitle>Compared Score (All businesses)</CCardTitle>
-            </CCardHeader>
-            <CCardBody>
-              <CCardText>
-                {isFetching && <Skeleton />}
-                {translateState && (
-                  <>
-                    <h3>
-                      {
-                        //calculate percentage, round to 1 dec.
-                        Math.round(
-                          (translateData?.averageComparativeScores[0]?.averageScore /
-                            translateData?.maxScore) *
-                            100 *
-                            10,
-                        ) / 10
-                      }
-                      %
-                    </h3>
-                    <small className="text-medium-emphasis">
-                      {translateData?.averageComparativeScores[0]?.averageScore} of{' '}
-                      {translateData?.maxScore} points
-                    </small>
-                  </>
-                )}
-              </CCardText>
-            </CCardBody>
-          </CCard>
+          <CippPrettyCard
+            title="Compared Score (Similiar sized business)"
+            percentage={
+              //calculate percentage, round to 1 dec.
+              Math.round(
+                (translateData?.averageComparativeScores[0]?.averageScore /
+                  translateData?.maxScore) *
+                  100 *
+                  10,
+              ) / 10
+            }
+            topLabel={translateData?.averageComparativeScores[0]?.averageScore}
+            smallLabel={`of ${translateData?.maxScore} points`}
+            isFetching={isFetching}
+          />
         </CCol>
       </CRow>
       <CippPage title="Report Results" tenantSelector={false}>