Merge pull request #311 from shreyas1434shinde/boardEnrollment

Task #PS-1656 : UI improvements

src/components/AssessmentReportCard.tsx

@@ -95,7 +95,7 @@ const AssessmentReportCard: React.FC<AssessmentReportCardProp> = ({
  };
 
  return (
- <Grid item xs={12} sm={6} md={4} key={userId}>
+ <Grid item xs={12} sm={12} md={6} lg={4} key={userId}>
  <Box
  sx={{
  border: `1px solid ${theme?.palette?.warning['A100']}`,

src/components/CohortSelectionSection.tsx

@@ -343,8 +343,12 @@ const CohortSelectionSection: React.FC<CohortSelectionSectionProps> = ({
  localStorage.setItem('cohortId', cohort_id);
  };
 
+ const teacher: string | null =
+ typeof window !== 'undefined' && window.localStorage
+ ? localStorage.getItem('role')
+ : null;
+
  const isAttendanceOverview = pathname === '/attendance-overview';
- const teacher = localStorage.getItem('role');
  const isAssessment = pathname === '/assessments';
  const dashboard = pathname === '/dashboard';
 

src/pages/assessments/user/[userId]/index.tsx

@@ -30,7 +30,11 @@ import { useParams, useSearchParams } from 'next/navigation';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { accessControl, AssessmentType, Program } from '../../../../../app.config';
+import {
+ accessControl,
+ AssessmentType,
+ Program,
+} from '../../../../../app.config';
 import { useQueryClient } from '@tanstack/react-query';
 import withAccessControl from '@/utils/hoc/withAccessControl';
 import NoDataFound from '@/components/common/NoDataFound';
@@ -377,7 +381,14 @@ function AssessmentsDetails() {
  >
  <Grid container spacing={2}>
  {subject?.map((assessment: any) => (
- <Grid item xs={12} sm={6} md={4} key={assessment.identifier}>
+ <Grid
+ item
+ xs={12}
+ sm={12}
+ md={6}
+ lg={4}
+ key={assessment.identifier}
+ >
  <Box
  sx={{
  border: `1px solid ${theme.palette.warning['A100']}`,
@@ -399,6 +410,7 @@ function AssessmentsDetails() {
  fontWeight: '400',
  color: theme.palette.warning['300'],
  }}
+ className="one-line-text"
  >
  {assessment?.subject}
  </Box>
@@ -448,9 +460,7 @@ function AssessmentsDetails() {
  </Box>
  )}
 
- {!isLoading && !assessmentList?.length && (
- <NoDataFound />
- )}
+ {!isLoading && !assessmentList?.length && <NoDataFound />}
 
  {isLoading && (
  <Box
@@ -490,4 +500,7 @@ export async function getStaticProps({
  };
 }
 
-export default withAccessControl('accessAssessments', accessControl)(AssessmentsDetails);
+export default withAccessControl(
+ 'accessAssessments',
+ accessControl
+)(AssessmentsDetails);

src/pages/assessments/user/[userId]/subject/[subjectId]/index.tsx

@@ -244,4 +244,7 @@ function SubjectDetail() {
  );
 }
 
-export default withAccessControl('accessAssessments', accessControl)(SubjectDetail);
+export default withAccessControl(
+ 'accessAssessments',
+ accessControl
+)(SubjectDetail);

src/pages/board-enrollment/index.tsx

@@ -13,14 +13,7 @@ import ArrowDropDownSharpIcon from '@mui/icons-material/ArrowDropDownSharp';
 import EastIcon from '@mui/icons-material/East';
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 import SearchIcon from '@mui/icons-material/Search';
-import {
- Box,
- Button,
- Grid,
- IconButton,
- InputBase,
- Paper
-} from '@mui/material';
+import { Box, Button, Grid, IconButton, InputBase, Paper } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
 import { useTranslation } from 'next-i18next';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
@@ -234,12 +227,14 @@ const BoardEnrollment = () => {
  <Grid container sx={{ my: 4, px: '16px' }} spacing={2}>
  {boardEnrollmentList.map((item: any, index: any) => {
  return (
- <Grid key={index} item xs={12} md={6} lg={6} xl={4}>
+ <Grid key={index} item xs={12} sm={12} md={6} lg={4}>
  <Box
  sx={{
  border: `1px solid ${theme.palette.warning['A100']}`,
  minHeight: '143px',
  borderRadius: '8px',
+ position: 'relative',
+ cursor: 'pointer',
  }}
  onClick={() => {
  item.isDropout
@@ -300,6 +295,7 @@ const BoardEnrollment = () => {
  gap: '5px',
  mb: '12px',
  mx: '16px',
+ mt: 4,
  }}
  >
  {t('COMMON.DROPPED_OUT')}{' '}

src/pages/course-planner.tsx

@@ -131,7 +131,6 @@ const CoursePlanner = () => {
 
  useEffect(() => {
  const fetchCohortSearchResults = async () => {
-
  setLoading(true);
  setState('');
  setBoard('');
@@ -174,8 +173,6 @@ const CoursePlanner = () => {
  // }
  // });
 
-
-
  stringFields.forEach(({ label, setter }) => {
  const field = cohortDetails.customFields.find(
  (field: any) => field.label === label
@@ -187,8 +184,6 @@ const CoursePlanner = () => {
  });
  }
 
-
-
  setLoading(false);
  } catch (error) {
  console.error('Failed to fetch cohort search results:', error);
@@ -198,7 +193,6 @@ const CoursePlanner = () => {
  fetchCohortSearchResults();
  }, [selectedValue]);
 
-
  useEffect(() => {
  const fetchTaxonomyResults = async () => {
  try {
@@ -477,7 +471,7 @@ const CoursePlanner = () => {
 
  const overallCommonSubjects =
  await findOverallCommonSubjects(arrays);
- 
+
  localStorage.setItem(
  'overallCommonSubjects',
  JSON.stringify(overallCommonSubjects)
@@ -597,29 +591,33 @@ const CoursePlanner = () => {
  </Box>
  </Grid>
  <Grid item xs={12} md={6}>
- <Box sx={{ mt: 2, px: '20px', width: '100%' }}>
- <FormControl sx={{ width: '100%' }}>
- <InputLabel id="course-type-select-label">Course Type</InputLabel>
- <Select
- labelId="course-type-select-label"
- id="course-type-select"
- value={value}
- onChange={handleChange}
- label="Course Type"
- sx={{ fontSize: '14px' }}
- disabled={!tStore.state || !tStore.board || !tStore.medium || !tStore.grade} // Disable if any field is empty
- >
- <MenuItem value={'Foundation Course'}>
- {t('COURSE_PLANNER.FOUNDATION_COURSE')}
- </MenuItem>
- <MenuItem value={'Main Course'}>
- {t('COURSE_PLANNER.MAIN_COURSE')}
- </MenuItem>
- </Select>
- </FormControl>
- </Box>
-</Grid>
-
+ <Box sx={{ mt: 2, px: '20px', width: '100%' }}>
+ <FormControl sx={{ width: '100%' }}>
+ <InputLabel id="course-type-select-label">Course Type</InputLabel>
+ <Select
+ labelId="course-type-select-label"
+ id="course-type-select"
+ value={value}
+ onChange={handleChange}
+ label="Course Type"
+ sx={{ fontSize: '14px' }}
+ disabled={
+ !tStore.state ||
+ !tStore.board ||
+ !tStore.medium ||
+ !tStore.grade
+ } // Disable if any field is empty
+ >
+ <MenuItem value={'Foundation Course'}>
+ {t('COURSE_PLANNER.FOUNDATION_COURSE')}
+ </MenuItem>
+ <MenuItem value={'Main Course'}>
+ {t('COURSE_PLANNER.MAIN_COURSE')}
+ </MenuItem>
+ </Select>
+ </FormControl>
+ </Box>
+ </Grid>
  </Grid>
 
  <Box sx={{ m: 3 }}>
@@ -632,55 +630,54 @@ const CoursePlanner = () => {
  marginBottom: '20px',
  }}
  >
- <Grid container>
- {anyFieldsEmpty ? (
- <Box sx={{ ml: 2, p: 2 }}>
- <Typography variant="h2">
- {`No assigned ${emptyFields.join(', ')}`}
- </Typography>
- </Box>
- ) : (
- subjects?.length > 0 ? (
- subjects.map((item:any) => (
- <Grid key={item.code} item xs={12} sm={6} md={4}>
- <Box
- sx={{
- border: `1px solid ${theme.palette.warning.A100}`,
- borderRadius: '8px',
- padding: '12px',
- cursor: 'pointer',
- margin: '14px',
- background: theme.palette.warning['A400'],
- }}
- onClick={() => {
- setTaxonomySubject(item.name);
- router.push({
- pathname: '/course-planner-detail',
- });
- }}
- >
- <Box
- sx={{
- display: 'flex',
- justifyContent: 'space-between',
- alignItems: 'center',
- }}
- >
- <Box>
+ <Grid container>
+ {anyFieldsEmpty ? (
+ <Box sx={{ ml: 2, p: 2 }}>
+ <Typography variant="h2">
+ {`No assigned ${emptyFields.join(', ')}`}
+ </Typography>
+ </Box>
+ ) : subjects?.length > 0 ? (
+ subjects.map((item: any) => (
+ <Grid key={item.code} item xs={12} sm={12} md={6} lg={4}>
  <Box
  sx={{
- display: 'flex',
- gap: '15px',
- alignItems: 'center',
+ border: `1px solid ${theme.palette.warning.A100}`,
+ borderRadius: '8px',
+ padding: '12px',
+ cursor: 'pointer',
+ margin: '14px',
+ background: theme.palette.warning['A400'],
+ }}
+ onClick={() => {
+ setTaxonomySubject(item.name);
+ router.push({
+ pathname: '/course-planner-detail',
+ });
  }}
  >
  <Box
  sx={{
- position: 'relative',
- display: 'inline-flex',
+ display: 'flex',
+ justifyContent: 'space-between',
+ alignItems: 'center',
  }}
  >
- {/* <Box sx={{ width: '40px', height: '40px' }}>
+ <Box>
+ <Box
+ sx={{
+ display: 'flex',
+ gap: '15px',
+ alignItems: 'center',
+ }}
+ >
+ <Box
+ sx={{
+ position: 'relative',
+ display: 'inline-flex',
+ }}
+ >
+ {/* <Box sx={{ width: '40px', height: '40px' }}>
  <CircularProgressbar
  value={item.circular || 0}
  strokeWidth={10}
@@ -718,34 +715,33 @@ const CoursePlanner = () => {
  </Box> */}
  </Box>
 
- <Box
- sx={{
- fontSize: '16px',
- color: theme.palette.warning['300'],
- }}
- >
- {item.name}
+ <Box
+ sx={{
+ fontSize: '16px',
+ color: theme.palette.warning['300'],
+ }}
+ >
+ {item.name}
+ </Box>
+ </Box>
+ </Box>
+ <Box>
+ <KeyboardArrowRightIcon
+ sx={{ color: theme.palette.warning['300'] }}
+ />
+ </Box>
  </Box>
  </Box>
- </Box>
- <Box>
- <KeyboardArrowRightIcon
- sx={{ color: theme.palette.warning['300'] }}
- />
- </Box>
+ </Grid>
+ ))
+ ) : (
+ <Box sx={{ ml: 2, p: 2 }}>
+ <Typography variant="h2">
+ {t('ASSESSMENTS.NO_SUBJECT_FOUND')}
+ </Typography>
  </Box>
- </Box>
+ )}
  </Grid>
- ))
- ) : (
- <Box sx={{ ml: 2, p: 2 }}>
- <Typography variant="h2">
- {t('ASSESSMENTS.NO_SUBJECT_FOUND')}
- </Typography>
- </Box>
- )
- )}
- </Grid>
  </Box>
  </Box>
  </Box>