Merge branch 'shiksha-2.0' of github.com:tekdi/shiksha-frontend into …

…shiksha-2.0

src/components/AttendanceStatusListView.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import { useTheme } from '@mui/material/styles';
+import { useTranslation } from 'react-i18next';
+import { ATTENDANCE_ENUM } from '../utils/Helper';
+
+import { Box, Typography } from '@mui/material';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle'; //present
+import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
+import CancelIcon from '@mui/icons-material/Cancel'; //absent
+import HighlightOffIcon from '@mui/icons-material/HighlightOff';
+import { AttendanceStatusListViewProps } from '../utils/Interfaces';
+
+const AttendanceStatusListView: React.FC<AttendanceStatusListViewProps> = ({
+  userData,
+  isEdit = false,
+  isBulkAction = false,
+  handleBulkAction = () => {},
+  bulkAttendanceStatus = ''
+}) => {
+  const { t } = useTranslation();
+  const theme = useTheme<any>();
+
+  const boxStyling = {
+    display: 'flex',
+    height: '56px',
+    // width: '100%',
+    borderBottom: `0.5px solid ${theme.palette.warning[400]}`,
+    padding: '8px',
+    alignItems: 'center',
+    borderRadius: isBulkAction ? '8px' : 0,
+    backgroundColor: isBulkAction ? theme.palette.warning[800] : 'none'
+  };
+
+  const handleClickAction = (isBulkAction: boolean, selectedAction: string, id?: string) => {
+    if (isEdit) {
+      handleBulkAction(isBulkAction, selectedAction, id);
+    }
+  };
+  return (
+    <Box sx={boxStyling}>
+      <Typography variant="body1" marginRight="auto" marginY="auto">
+        {isBulkAction ? t('ATTENDANCE.MARK_ALL') : userData?.name}
+      </Typography>
+      <Box
+        display="flex"
+        flexDirection="column"
+        alignItems="center"
+        p={2}
+        onClick={() =>
+          handleClickAction(
+            isBulkAction,
+            ATTENDANCE_ENUM.PRESENT,
+            isBulkAction ? '' : userData?.userId
+          )
+        }
+      >
+        {[userData?.attendance, bulkAttendanceStatus].includes(ATTENDANCE_ENUM.PRESENT) ? (
+          <CheckCircleIcon />
+        ) : (
+          <CheckCircleOutlineIcon />
+        )}
+        <Typography variant="h6" marginTop={1} sx={{ color: () => theme.palette.warning[400] }}>
+          {t('ATTENDANCE.PRESENT')}
+        </Typography>
+      </Box>
+      <Box
+        display="flex"
+        flexDirection="column"
+        alignItems="center"
+        p={2}
+        onClick={() =>
+          handleClickAction(
+            isBulkAction,
+            ATTENDANCE_ENUM.ABSENT,
+            isBulkAction ? '' : userData?.userId
+          )
+        }
+      >
+        {[userData?.attendance, bulkAttendanceStatus].includes(ATTENDANCE_ENUM.ABSENT) ? (
+          <CancelIcon />
+        ) : (
+          <HighlightOffIcon />
+        )}
+        <Typography variant="h6" marginTop={1} sx={{ color: () => theme.palette.warning[400] }}>
+          {t('ATTENDANCE.ABSENT')}
+        </Typography>
+      </Box>
+    </Box>
+  );
+};
+
+export default AttendanceStatusListView;

src/components/CohortCard.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { CardContent, CardMedia, Typography, Box } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
+import ApartmentIcon from '@mui/icons-material/Apartment';
+import SmartDisplayIcon from '@mui/icons-material/SmartDisplay';
+import { CohortCardProps } from '../utils/Interfaces';
+import { useRouter } from 'next/navigation'; 
+
+const CohortCard: React.FC<CohortCardProps> = ({
+  showBackground,
+  isRemote,
+  cohortName,
+  cohortId
+}) => {
+  const { t } = useTranslation();
+  const theme = useTheme<any>();
+  const router = useRouter();
+  const boxStyling = {
+    display: 'flex',
+    height: 56,
+    border: `1px solid ${theme.palette.warning.A100}`,
+    borderRadius: '8px',
+    cursor: 'pointer',
+    backgroundColor: theme.palette.warning.A400
+  };
+
+  const cardMedia = {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '54px',
+    height: '56px',
+    borderRadius: '8px 0px 0px 8px',
+    backgroundColor: !showBackground ? theme.palette.warning.A400 : theme.palette.primary.light
+  };
+
+  const iconMedia = {
+    alignSelf: 'center',
+    marginLeft: 'auto',
+    height: '1rem',
+    width: '1rem',
+    marginRight: 2,
+    display: !showBackground ? 'none' : 'block'
+  };
+
+  return (
+    <Box
+      onClick={() => {
+        router.push(`/class-details/${cohortId}`); // Check route
+      }}
+      sx={boxStyling}
+    >
+      <CardMedia sx={cardMedia} title="Class Image">
+        {isRemote ? <SmartDisplayIcon /> : <ApartmentIcon />}
+      </CardMedia>
+      <CardContent>
+        <Typography variant="h2" marginRight="auto" fontWeight={400}>
+          {!showBackground
+            ? isRemote
+              ? t('DASHBOARD.NEW_REMOTE_CLASS')
+              : t('DASHBOARD.NEW_PHYSICAL_CLASS')
+            : `${cohortName}`}
+        </Typography>
+      </CardContent>
+      <ArrowForwardIosIcon sx={iconMedia} />
+    </Box>
+  );
+};
+
+export default CohortCard;

src/components/Header.tsx

@@ -0,0 +1,139 @@
+import React from 'react';
+import MenuItem from '@mui/material/MenuItem';
+import MenuIcon from '@mui/icons-material/Menu';
+import { Box, Stack } from '@mui/material';
+import Divider from '@mui/material/Divider';
+import AccountCircleIcon from '@mui/icons-material/AccountCircle';
+import { useTranslation } from 'react-i18next';
+import { useTheme } from '@mui/material/styles';
+import { useRouter, usePathname } from 'next/navigation';
+import PersonOutlineOutlinedIcon from '@mui/icons-material/PersonOutlineOutlined';
+import LogoutOutlinedIcon from '@mui/icons-material/LogoutOutlined';
+import { styled, alpha } from '@mui/material/styles';
+import { MenuProps } from '@mui/material/Menu';
+import Menu from '@mui/material/Menu';
+import Image from 'next/image';
+import LogoWithoutTagline from '../../public/Logo_without_tagline.png'
+
+const Header: React.FC = () => {
+  const router = useRouter();
+  const { t } = useTranslation();
+  const pathname = usePathname()
+  const theme = useTheme<any>();
+
+  const StyledMenu = styled((props: MenuProps) => (
+    <Menu
+      elevation={0}
+      anchorOrigin={{
+        vertical: 'bottom',
+        horizontal: 'right'
+      }}
+      transformOrigin={{
+        vertical: 'top',
+        horizontal: 'right'
+      }}
+      {...props}
+    />
+  ))(() => ({
+    '& .MuiPaper-root': {
+      borderRadius: 6,
+      marginTop: theme.spacing(1),
+      minWidth: 180,
+      color: theme.palette.mode === 'light' ? 'rgb(55, 65, 81)' : theme.palette.grey[300],
+      boxShadow:
+        'rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px',
+      '& .MuiMenu-list': {
+        padding: '4px 0'
+      },
+      '& .MuiMenuItem-root': {
+        '& .MuiSvgIcon-root': {
+          fontSize: 18,
+          color: theme.palette.text.secondary,
+          marginRight: theme.spacing(1.5)
+        },
+        '&:active': {
+          backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)
+        }
+      }
+    }
+  }));
+
+
+  const handleProfileClick = () => {
+    if (pathname !== '/profile') {
+      router.push('/profile');
+    }
+  };
+  const handleLogoutClick = () => {
+    router.push('/logout');
+  };
+
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const open = Boolean(anchorEl);
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  return (
+    <>
+      <Stack
+        sx={{ minWidth: '100%' }}
+        direction="row"
+        justifyContent={'space-between'}
+        alignItems={'center'}
+        height="auto"
+      >
+        <Box mt={'0.5rem'} paddingLeft={'1rem'}>
+          <MenuIcon/> 
+        </Box>
+        <Box sx={{ margin: '0 auto' }}>
+          <Image
+            src= {LogoWithoutTagline}
+            alt="logo"
+            onClick={() => router.push('/')}
+            style={{ cursor: 'pointer' }}
+          />
+        </Box>
+        <Box
+          onClick={handleClick}
+          sx={{ cursor: 'pointer', position: 'relative' }}
+          aria-controls={open ? 'account-menu' : undefined}
+          aria-haspopup="true"
+          aria-expanded={open ? 'true' : undefined}
+          paddingRight={'1rem'}
+          display={'flex'}
+          justifyContent={'center'}
+          alignItems={'center'}
+          flexDirection={'column'}
+          mt={'0.5rem'}
+        >
+          <AccountCircleIcon fontSize="large" color="action" />
+        </Box>
+        <div>
+          <StyledMenu
+            id="profile-menu"
+            MenuListProps={{
+              'aria-labelledby': 'profile-button'
+            }}
+            anchorEl={anchorEl}
+            open={open}
+            onClose={handleClose}
+          >
+            <MenuItem onClick={handleProfileClick} disableRipple>
+              <PersonOutlineOutlinedIcon />
+              {t('PROFILE.MY_PROFILE')}{' '}
+            </MenuItem>
+            <MenuItem onClick={handleLogoutClick} disableRipple>
+              <LogoutOutlinedIcon />
+              {t('COMMON.LOGOUT')}
+            </MenuItem>
+          </StyledMenu>
+        </div>
+      </Stack>
+      <Divider sx={{ borderBottomWidth: '0.15rem' }} />
+    </>
+  );
+};
+export default Header;