Merge pull request #107 from Aar-if/improvements

Issue #PS-1389 feat: UI for displaying center wise attendance report as per Figma within a Block with API integration
tekdi · Aug 8, 2024 · b186450 · b186450
2 parents 69f9272 + f59e227
commit b186450
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 9 deletions.
diff --git a/src/components/AttendanceComparison.tsx b/src/components/AttendanceComparison.tsx
@@ -144,17 +144,17 @@ const AttendanceComparison: React.FC<AttendanceComparisonProps> = ({
         padding: 2,
         borderRadius: 5,
         border: '1px solid #D0C5B4',
-        marginTop: '20px',
+        marginTop: '10px',
       }}
     >
       <Typography variant="h2" fontSize={'16px'} sx={{ color: 'black' }}>
         {t('DASHBOARD.ATTENDANCE_COMPARISON')}
       </Typography>
-      <Typography fontSize={'12px'}>
+      <Typography fontSize={'14px'} >
         {blockName} {t('DASHBOARD.BLOCK')}
       </Typography>
       <FormControl component="fieldset">
-        <Typography fontSize={'12px'} mt={2}>
+        <Typography fontSize={'14px'} mt={2}>
           {t('DASHBOARD.CENTER_TYPE')}
         </Typography>
         <RadioGroup
@@ -212,11 +212,11 @@ const AttendanceComparison: React.FC<AttendanceComparisonProps> = ({
         </Typography>
 
         <Box sx={{ height: '400px', overflowY: 'scroll' }}>
-          <ResponsiveContainer width="100%" height={data.length * 80}>
+          <ResponsiveContainer width="100%" height={data.length * 70}>
             <BarChart
               layout="vertical"
               data={data}
-              margin={{ top: 5, right: 5, left: 10 }}
+              margin={{ top: 5, right: 5, left: 10}}
             >
               <CartesianGrid
                 stroke={theme.palette.warning.A700}
@@ -225,7 +225,7 @@ const AttendanceComparison: React.FC<AttendanceComparisonProps> = ({
               <XAxis
                 type="number"
                 tickFormatter={(value: any) => `${value}%`}
-                display="none"
+                height={0}
               />
               <YAxis type="category" dataKey="name" />
               <Tooltip formatter={(value: number) => `${value}%`} />
@@ -239,7 +239,7 @@ const AttendanceComparison: React.FC<AttendanceComparisonProps> = ({
           <BarChart
             layout="vertical"
             data={[{ name: '', Attendance: 0 }]}
-            margin={{ top: 5, right: 5, left: 69 }}
+            margin={{  right: 5, left: 70 }}
           >
             <XAxis
               type="number"

diff --git a/src/pages/centers/[cohortId].tsx b/src/pages/centers/[cohortId].tsx
@@ -62,6 +62,7 @@ const TeachingCenterDetails = () => {
   const router = useRouter();
   const { cohortId }: any = router.query;
   const { t } = useTranslation();
+  const [role, setRole] = React.useState<any>('');
 
   const store = manageUserStore();
   const setDistrictCode = manageUserStore(
@@ -82,7 +83,7 @@ const TeachingCenterDetails = () => {
   const setBlockId = manageUserStore(
     (state: { setBlockId: any }) => state.setBlockId
   );
-  const role = localStorage.getItem('role');
+
   const [open, setOpen] = React.useState(false);
   const theme = useTheme<any>();
   const [selectedDate, setSelectedDate] =
@@ -132,6 +133,13 @@ const TeachingCenterDetails = () => {
     (state) => state.setRemoveCohortId
   );
 
+  useEffect(() => {
+    if (typeof window !== 'undefined' && window.localStorage) {
+      const role = localStorage.getItem('role');
+      setRole(role);
+    }
+  }, []);
+
   useEffect(() => {
     const getCohortData = async () => {
       const response = await getCohortDetails(cohortId);

diff --git a/src/pages/dashboard.tsx b/src/pages/dashboard.tsx
@@ -87,7 +87,8 @@ const Dashboard: React.FC<DashboardProps> = () => {
   const formattedSevenDaysAgo = shortDateFormat(sevenDaysAgo);
   const [userId, setUserId] = React.useState<string | null>(null);
   const [blockName, setBlockName] = React.useState<string>('');
-  const role = localStorage.getItem('role');
+  const [role, setRole] = React.useState<any>('');
+
   useEffect(() => {
     setIsClient(true);
     const calculateDateRange = () => {
@@ -120,6 +121,8 @@ const Dashboard: React.FC<DashboardProps> = () => {
   useEffect(() => {
     if (typeof window !== 'undefined' && window.localStorage) {
       const token = localStorage.getItem('token');
+      const role = localStorage.getItem('role');
+      setRole(role);
       const storedUserId = localStorage.getItem('userId');
       setClassId(localStorage.getItem('classId') ?? '');
       if (token) {