Merge pull request #309 from shreyas1434shinde/boardEnrollment

Task #PS-1656 : UI improvements

src/components/CohortFacilitatorList.tsx

@@ -105,7 +105,7 @@ const CohortLearnerList: React.FC<CohortLearnerListProp> = ({
  <Grid container>
  {userData?.map((data: any) => {
  return (
- <Grid xs={12} sm={6} md={4} key={data.userId}>
+ <Grid xs={12} sm={12} md={6} lg={4} key={data.userId}>
  <LearnersList
  userId={data.userId}
  learnerName={data.name}

src/components/CohortLearnerList.tsx

@@ -110,7 +110,7 @@ const CohortLearnerList: React.FC<CohortLearnerListProp> = ({
  <Grid container>
  {userData?.map((data: any) => {
  return (
- <Grid xs={12} sm={6} md={4} key={data.userId}>
+ <Grid xs={12} sm={12} md={6} lg={4} key={data.userId}>
  <LearnersListItem
  type={Role.STUDENT}
  userId={data.userId}

src/components/CohortSelectionSection.tsx

@@ -344,16 +344,28 @@ const CohortSelectionSection: React.FC<CohortSelectionSectionProps> = ({
  };
 
  const isAttendanceOverview = pathname === '/attendance-overview';
-
+ const teacher = localStorage.getItem('role');
  const isAssessment = pathname === '/assessments';
+ const dashboard = pathname === '/dashboard';
 
  return (
  <Box className={isAttendanceOverview || isAssessment ? 'w-100' : 'w-md-40'}>
  {loading && (
  <Loader showBackdrop={true} loadingText={t('COMMON.LOADING')} />
  )}
  {!loading && cohortsData && (
- <Box>
+ <Box
+ sx={{
+ '@media (min-width: 900px)': {
+ marginTop: dashboard
+ ? teacher === 'Teacher'
+ ? '0px'
+ : '-25px'
+ : 'unset',
+ marginRight: dashboard ? '15px' : 'unset',
+ },
+ }}
+ >
  {!loading && cohortsData && (
  <Box>
  {blockName ? (
@@ -378,8 +390,14 @@ const CohortSelectionSection: React.FC<CohortSelectionSectionProps> = ({
  // },
  }}
  >
+ {showFloatingLabel && (
+ <InputLabel id="center-select-label">
+ {t('COMMON.CENTER')}
+ </InputLabel>
+ )}
  <Select
  value={classId}
+ labelId="center-select-label"
  onChange={handleCohortSelection}
  displayEmpty
  inputProps={{ 'aria-label': 'Without label' }}
@@ -389,7 +407,7 @@ const CohortSelectionSection: React.FC<CohortSelectionSectionProps> = ({
  color: theme.palette.warning['200'],
  width: '100%',
  marginBottom: '0rem',
- '@media (max-width: 700px)': {
+ '@media (max-width: 900px)': {
  width: isAttendanceOverview ? '100%' : '50%',
  },
  }}

src/components/LearnersListItem.tsx

@@ -532,11 +532,6 @@ const LearnersListItem: React.FC<LearnerListProps> = ({
  justifyContent: 'left',
  }}
  >
- {/* <Box
- sx={{ fontSize: '12px', color: theme.palette.warning['400'] }}
- >
- 19 y/o
- </Box> */}
  {isDropout ? (
  <Box
  sx={{
@@ -583,7 +578,9 @@ const LearnersListItem: React.FC<LearnerListProps> = ({
  fontSize: '14px',
  fontWeight: '400',
  color: theme.palette.warning['400'],
+ wordBreak: 'break-all',
  }}
+ className="one-line-text"
  >
  {enrollmentId?.toUpperCase()}
  </Box>

src/components/ManageUser.tsx

@@ -546,8 +546,9 @@ const ManageUser: React.FC<ManageUsersProps> = ({
  <Grid
  item
  xs={12}
- sm={6}
- md={4}
+ sm={12}
+ md={6}
+ lg={4}
  key={user.userId}
  >
  <Box

src/components/ReassignModal.tsx

@@ -10,8 +10,8 @@ import { useEffect, useState } from 'react';
 import SearchBar from './Searchbar';
 import SimpleModal from './SimpleModal';
 import { showToastMessage } from './Toastify';
-import NoDataFound from './common/NoDataFound';
 import { toPascalCase } from '@/utils/Helper';
+import NoDataFound from './common/NoDataFound';
 
 interface ReassignModalProps {
  cohortNames?: any;

src/components/SessionCard.tsx

@@ -1,6 +1,5 @@
 import { SessionsCardProps } from '@/utils/Interfaces';
 import { Box, Snackbar, Typography } from '@mui/material';
-
 import { convertUTCToIST, toPascalCase } from '@/utils/Helper';
 import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
@@ -15,6 +14,7 @@ import CheckCircleTwoToneIcon from '@mui/icons-material/CheckCircleTwoTone';
 import SensorsTwoToneIcon from '@mui/icons-material/SensorsTwoTone';
 import CircleTwoToneIcon from '@mui/icons-material/CircleTwoTone';
 import { EventStatus } from '@/utils/app.constant';
+
 const SessionsCard: React.FC<SessionsCardProps> = ({
  data,
  showCenterName = false,
@@ -74,7 +74,7 @@ const SessionsCard: React.FC<SessionsCardProps> = ({
  const handleCopyUrl = () => {
  if (data?.meetingDetails?.url) {
  navigator.clipboard
- .writeText(data?.meetingDetails?.url)
+ .writeText(data.meetingDetails.url)
  .then(() => {
  setSnackbarOpen(true);
  })
@@ -256,6 +256,7 @@ const SessionsCard: React.FC<SessionsCardProps> = ({
  color: theme.palette.secondary.main,
  cursor: 'pointer',
  }}
+ onClick={handleCopyUrl}
  />
  )}
  </Box>
@@ -291,7 +292,6 @@ const SessionsCard: React.FC<SessionsCardProps> = ({
  handleAction={onUpdateClick}
  modalOpen={modalOpen}
  />
-
  <Box sx={{ position: 'absolute', bottom: '2px', width: '100%' }}>
  {children}
  </Box>

src/components/SessionCardFooter.tsx

@@ -343,6 +343,7 @@ const SessionCardFooter: React.FC<SessionCardFooterProps> = ({
  fontWeight={500}
  color={theme.palette.secondary.main}
  ml={1}
+ className="one-line-text"
  >
  {t('COMMON.SELECT_TOPIC')}
  </Box>

src/components/SimpleModal.tsx

@@ -3,6 +3,7 @@ import React, { ReactNode } from 'react';
 
 import CloseSharpIcon from '@mui/icons-material/CloseSharp';
 import { useTheme } from '@mui/material/styles';
+import { modalStyles } from '@/styles/modalStyles';
 
 interface SimpleModalProps {
  secondaryActionHandler?: () => void;
@@ -28,26 +29,8 @@ const SimpleModal: React.FC<SimpleModalProps> = ({
 }) => {
  const theme = useTheme<any>();
 
- const modalStyle = {
- padding: 0,
- position: 'absolute',
- top: '50%',
- left: '50%',
- transform: 'translate(-50%, -50%)',
- width: '85%',
- maxHeight: '80vh',
- backgroundColor: '#fff',
- borderRadius: '18px',
- boxShadow: theme.shadows[5],
- display: 'flex',
- flexDirection: 'column',
- '@media (min-width: 600px)': {
- width: '450px',
- },
- };
-
  const titleStyle = {
- backgroundColor: '#fff',
+ backgroundColor: theme.palette.warning['A400'],
  padding: theme.spacing(2),
  zIndex: 1,
  borderRadius: '12px 12px 0 0',
@@ -59,13 +42,13 @@ const SimpleModal: React.FC<SimpleModalProps> = ({
  justifyContent: 'flex-end',
  zIndex: 1,
  borderRadius: '0 0 12px 12px',
- backgroundColor: '#fff',
+ backgroundColor: theme.palette.warning['A400'],
  };
 
  const contentStyle = {
  flexGrow: 1,
  overflowY: 'auto',
- padding: theme.spacing(2),
+ padding: '0 16px 16px',
  };
 
  return (
@@ -75,7 +58,7 @@ const SimpleModal: React.FC<SimpleModalProps> = ({
  aria-labelledby="child-modal-title"
  aria-describedby="child-modal-description"
  >
- <Box sx={modalStyle}>
+ <Box sx={modalStyles}>
  {/* Header */}
  <Box display={'flex'} justifyContent={'space-between'} sx={titleStyle}>
  <Typography

src/components/center/centerList.tsx

@@ -27,8 +27,10 @@ const CenterList: React.FC<CenterListProps> = ({
  theme,
  t,
 }) => {
- const activeCenters = centers.filter((center) => center.cohortStatus === 'active');
-
+ const activeCenters = centers.filter(
+ (center) => center.cohortStatus === 'active'
+ );
+
  return (
  <>
  <Box
@@ -52,8 +54,8 @@ const CenterList: React.FC<CenterListProps> = ({
  }}
  >
  <Grid container spacing={2}>
- {activeCenters.map((center) => (
- <Grid item xs={12} sm={6} md={4} key={center?.cohortId}>
+  {activeCenters.map((center) => (
+ <Grid item xs={12} sm={12} md={6} lg={4} key={center?.cohortId}>
  <Box
  onClick={() => {
  router.push(`/centers/${center?.cohortId}`);

src/pages/_app.tsx

@@ -161,10 +161,6 @@ function App({ Component, pageProps }: AppProps) {
  width: !isFullWidthPage ? 'calc(100% - 22rem)' : '100%',
  marginLeft: !isFullWidthPage ? '351px' : '0',
  },
- '@media (min-width: 2000px)': {
- width: '100%',
- marginLeft: !isFullWidthPage ? '351px' : '0',
- },
  background: theme.palette.warning['A400'],
  }}
  >

src/pages/assessments/index.tsx

@@ -35,7 +35,7 @@ import { useEffect, useState } from 'react';
 import { accessControl, AssessmentType, Program } from '../../../app.config';
 
 const DEFAULT_STATUS_ORDER = {
- [AssessmentStatus.NOT_STARTED] : 0,
+ [AssessmentStatus.NOT_STARTED]: 0,
  [AssessmentStatus.IN_PROGRESS]: 1,
  [AssessmentStatus.COMPLETED]: 2,
 };
@@ -274,19 +274,21 @@ const Assessments = () => {
  // });
  const statusOrder: any = { ...DEFAULT_STATUS_ORDER };
 
- if (status && Object.prototype.hasOwnProperty.call(statusOrder, status)) {
- statusOrder[status] = -1; // Make the prioritized status the highest
- // Adjust other statuses to ensure correct order
- let orderIndex = 0;
- for (const key in statusOrder) {
- if (key !== status) {
- statusOrder[key] = orderIndex++;
+ if (status && Object.prototype.hasOwnProperty.call(statusOrder, status)) {
+ statusOrder[status] = -1; // Make the prioritized status the highest
+ // Adjust other statuses to ensure correct order
+ let orderIndex = 0;
+ for (const key in statusOrder) {
+ if (key !== status) {
+ statusOrder[key] = orderIndex++;
+ }
  }
  }
- }
 
- // Sort based on the adjusted order
- const sortedList = learnerList.sort((a: any, b: any) => statusOrder[a.status] - statusOrder[b.status]);
+ // Sort based on the adjusted order
+ const sortedList = learnerList.sort(
+ (a: any, b: any) => statusOrder[a.status] - statusOrder[b.status]
+ );
  setFilteredLearnerList(sortedList);
  };
 

src/pages/centers/[cohortId]/index.tsx

@@ -750,7 +750,7 @@ const CohortPage = () => {
  {sessions && sessions.length === 0 && (
  <Box
  className="fs-12 fw-400 italic"
- sx={{ color: theme.palette.warning['300'] }}
+ sx={{ color: theme.palette.warning['300'], px: '16px' }}
  >
  {t('COMMON.NO_SESSIONS_SCHEDULED')}
  </Box>

src/pages/dashboard.tsx

@@ -902,6 +902,7 @@ const Dashboard: React.FC<DashboardProps> = () => {
  >
  {t('DASHBOARD.DAY_WISE_ATTENDANCE')}
  </Typography>
+
  <CohortSelectionSection
  classId={classId}
  setClassId={setClassId}
@@ -922,6 +923,7 @@ const Dashboard: React.FC<DashboardProps> = () => {
  handleSaveHasRun={handleSaveHasRun}
  setHandleSaveHasRun={setHandleSaveHasRun}
  isCustomFieldRequired={false}
+ // showFloatingLabel={true}
  />
  </Box>