Merge pull request #260 from Rushikesh-Sonawane99/shiksha-2.0

Issue #PS-384 chore: Modified props to handle overview card height
tekdi · Jun 6, 2024 · 7531207 · 7531207
2 parents c664d6a + df2d6fa
commit 7531207
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 11 deletions.
diff --git a/src/components/OverviewCard.tsx b/src/components/OverviewCard.tsx
@@ -7,10 +7,17 @@ import { useTheme } from '@mui/material/styles';
 
 interface OverviewCardProps {
   label: string;
-  value: string | number;
+  value?: string | number;
+  valuePartOne?: string | number;
+  valuePartTwo?: string | number | null;
 }
 
-const OverviewCard: React.FC<OverviewCardProps> = ({ label, value }) => {
+const OverviewCard: React.FC<OverviewCardProps> = ({
+  label,
+  value,
+  valuePartOne,
+  valuePartTwo,
+}) => {
   const theme = useTheme<any>();
   //   const { t } = useTranslation();
 
@@ -34,13 +41,32 @@ const OverviewCard: React.FC<OverviewCardProps> = ({ label, value }) => {
         >
           {label}
         </Typography>
-        <Typography
-          variant="h2"
-          sx={{ color: '#1F1B13', fontSize: '16px', fontWeight: '500' }}
-          fontWeight={500}
-        >
-          {value}
-        </Typography>
+        {value ? (
+          <Typography
+            variant="h2"
+            sx={{ color: '#1F1B13', fontSize: '16px', fontWeight: '500' }}
+            fontWeight={500}
+          >
+            {value}
+          </Typography>
+        ) : (
+          <Box>
+            <Typography
+              variant="h2"
+              sx={{ color: '#1F1B13', fontSize: '16px', fontWeight: '500' }}
+              fontWeight={500}
+            >
+              {valuePartOne}
+            </Typography>
+            <Typography
+              variant="h2"
+              sx={{ color: '#1F1B13', fontSize: '16px', fontWeight: '500' }}
+              fontWeight={500}
+            >
+              {valuePartTwo}
+            </Typography>
+          </Box>
+        )}
       </Box>
     </Box>
   );

diff --git a/src/pages/attendance-overview.tsx b/src/pages/attendance-overview.tsx
@@ -711,9 +711,9 @@ const AttendanceOverview: React.FC<AttendanceOverviewProps> = () => {
                         showBackdrop={false}
                       />
                     ))}
-                    value={
+                    valuePartOne={
                       lowAttendanceLearnerList.length > 2
-                        ? `${truncate(lowAttendanceLearnerList[0], 50)}, ${truncate(lowAttendanceLearnerList[1], 10)} ${t('COMMON.AND')} ${lowAttendanceLearnerList.length - 2} ${t('COMMON.MORE')}`
+                        ? `${truncate(lowAttendanceLearnerList[0], 50)}, ${truncate(lowAttendanceLearnerList[1], 10)}`
                         : lowAttendanceLearnerList.length === 2
                           ? `${truncate(lowAttendanceLearnerList[0], 10)}, ${truncate(lowAttendanceLearnerList[1], 10)}`
                           : lowAttendanceLearnerList.length === 1
@@ -723,6 +723,10 @@ const AttendanceOverview: React.FC<AttendanceOverviewProps> = () => {
                               ? t('ATTENDANCE.NO_LEARNER_WITH_LOW_ATTENDANCE')
                               : t('ATTENDANCE.N/A')
                     }
+                    valuePartTwo={
+                      lowAttendanceLearnerList.length > 2
+                      ? `${t('COMMON.AND')} ${lowAttendanceLearnerList.length - 2} ${t('COMMON.MORE')}` : null
+                    }
                   />
                 </Grid>
               </Grid>