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

…shiksha-2.0
tekdi · Jun 19, 2024 · 0a53a50 · 0a53a50
2 parents 3bf21b5 + 4803b92
commit 0a53a50
Show file tree

Hide file tree

Showing 18 changed files with 785 additions and 73 deletions.
diff --git a/README.md b/README.md
@@ -1,3 +1,6 @@
+## TODO
+Add node version info
+
 This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 
 ## Getting Started

diff --git a/public/locales/en/common.json b/public/locales/en/common.json
@@ -55,19 +55,26 @@
     "REMOVE": "Remove",
     "MARK_DROP_OUT": "Mark as Drop Out",
     "SOMETHING_WENT_WRONG": "Something went wrong",
-    "NO_GO_BACK": "No, go back",
-    "YES": "Yes",
-    "REVIEW_ATTENDANCE": "Review Attendance",
-    "ADD_NEW": "Add New",
-    "ADD": "ADD",
-    "ADD_CENTER": "Add Centers to your view",
-    "REMOVE_FROM_CENTER": "Remove From Center",
-    "DROP_OUT": "Drop Out",
-    "REASON_FOR_DROPOUT": "Reason for Dropout",
-    "SURE_LOGOUT": "Are you sure you want to Logout?",
-    "SURE_UPDATE": "Are you sure you want to update this attendance?",
-    "SURE_CLOSE": "Are you sure you want to close?",
-    "LEARNER_LIST": "Learners List"
+    "NO_GO_BACK":"No, go back",
+    "YES":"Yes",
+    "REVIEW_ATTENDANCE":"Review Attendance",
+    "ADD_NEW":"Add New",
+    "ADD":"ADD",
+    "ADD_CENTER":"Add Centers to your view",
+    "REMOVE_FROM_CENTER":"Remove From Center",
+    "DROP_OUT":"Drop Out",
+    "REASON_FOR_DROPOUT":"Reason for Dropout",
+    "SURE_LOGOUT" :"Are you sure you want to Logout?",
+    "SURE_UPDATE" :"Are you sure you want to update this attendance?",
+    "SURE_CLOSE":"Are you sure you want to close?",
+    "LEARNER_LIST":"Learners List",
+    "FILTERS":"Filters",
+    "MANAGE_USERS":"Manage Users",
+    "FACILITATORS":"Facilitators",
+    "CENTERS_ASSIGNED":"Centers Assigned",
+    "MANAGE_CENTERS":"Manage Centers",
+    "ASSIGN":"Assign",
+    "SEARCH_FACILITATORS":"Search Facilitators.."
   },
   "LOGIN_PAGE": {
     "USERNAME": "Username",
@@ -132,6 +139,7 @@
     "ALL_CENTERS": "All Centers",
     "NO_LEARNER_WITH_LOW_ATTENDANCE": "No Learner with low attendance",
     "ATTENDANCE_MARKED_OUT_OF_DAYS": "Attendance marked: {{count}} out of last 7 days"
+
   },
   "PROFILE": {
     "EDIT_PROFILE": "Edit Profile",

diff --git a/public/locales/hi/common.json b/public/locales/hi/common.json
@@ -67,7 +67,14 @@
     "SURE_LOGOUT": "क्या आप वाकई लोगआउट करना चाहते हैं?",
     "SURE_UPDATE": "क्या आप इस उपस्थिति को अपडेट करना चाहते हैं?",
     "SURE_CLOSE": "क्या आप वाकई बंद करना चाहते हैं?",
-    "LEARNER_LIST": "शिक्षार्थियों की सूची"
+    "LEARNER_LIST": "अभियांत्रिकी सूची",
+    "FILTERS": "फिल्टर्स",
+    "MANAGE_USERS": "उपयोगकर्ताओं का प्रबंधन",
+    "FACILITATORS": "सुविधाकर्ता",
+    "CENTERS_ASSIGNED": "केंद्र निरुपित",
+    "MANAGE_CENTERS": "केंद्र प्रबंधित करें",
+    "ASSIGN": "निरुपण करें",
+    "SEARCH_FACILITATORS":"खोज सुविधा प्रदाता.."
   },
   "LOGIN_PAGE": {
     "USERNAME": "उपयोगकर्ता नाम",

diff --git a/public/locales/mr/common.json b/public/locales/mr/common.json
@@ -67,7 +67,14 @@
     "SURE_LOGOUT": "तुम्हाला खाते बंद करायचं आहे का?",
     "SURE_UPDATE": "तुम्हाला ही उपस्थिती अपडेट करायची आहे का?",
     "SURE_CLOSE": "तुम्हाला हे बंद करायचं आहे का?",
-    "LEARNER_LIST": "शिकणाऱ्यांची यादी"
+    "LEARNER_LIST": "शिक्षार्थ्यांची यादी",
+    "FILTERS": "फिल्टर्स",
+    "MANAGE_USERS": "वापरकर्ते व्यवस्थापित करा",
+    "FACILITATORS": "सुविधासंचालक",
+    "CENTERS_ASSIGNED": "केंद्र निरुपित",
+    "MANAGE_CENTERS": "केंद्र प्रबंधित करा",
+    "ASSIGN": "नियुक्त करा",
+    "SEARCH_FACILITATORS":"शोध सुविधा.."
   },
   "LOGIN_PAGE": {
     "USERNAME": "वापरकर्तानाव",

diff --git a/src/components/ConfirmationModal.tsx b/src/components/ConfirmationModal.tsx
@@ -0,0 +1,103 @@
+import * as React from 'react';
+
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import { Divider } from '@mui/material';
+import Modal from '@mui/material/Modal';
+import { useTheme } from '@mui/material/styles';
+
+interface ConfirmationModalProps {
+  message: string;
+  handleAction: () => void;
+  buttonNames: ButtonNames;
+  handleCloseModel: () => void;
+  modalOpen: boolean;
+}
+
+interface ButtonNames {
+  primary: string;
+  secondary: string;
+}
+
+const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
+  modalOpen,
+  message,
+  handleAction,
+  buttonNames,
+  handleCloseModel,
+}) => {
+  const theme = useTheme();
+
+  const style = {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    width: '75%',
+    bgcolor: '#fff',
+    boxShadow: 24,
+    borderRadius: '16px',
+    '@media (min-width: 600px)': {
+      width: '350px',
+    },
+  };
+
+  return (
+    <Modal
+      open={modalOpen}
+      onClose={handleCloseModel}
+      aria-labelledby="confirmation-modal-title"
+      aria-describedby="confirmation-modal-description"
+    >
+      <Box sx={style}>
+        <Box sx={{ p: 3 }} id="confirmation-modal-title">
+          {message}
+        </Box>
+        <Divider />
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'center',
+            gap: '18px',
+            p: 2,
+          }}
+        >
+          <Button
+            sx={{
+              border: 'none',
+              color: theme.palette.secondary.main,
+              fontSize: '14px',
+              fontWeight: '500',
+              '&:hover': {
+                border: 'none',
+                backgroundColor: 'transparent',
+              },
+            }}
+            variant="outlined"
+            onClick={handleCloseModel}
+          >
+            {buttonNames.secondary}
+          </Button>
+          <Button
+            sx={{
+              width: '128px',
+              height: '40px',
+              fontSize: '14px',
+              fontWeight: '500',
+            }}
+            variant="contained"
+            color="primary"
+            onClick={() => {
+              handleAction();
+              handleCloseModel();
+            }}
+          >
+            {buttonNames.primary}
+          </Button>
+        </Box>
+      </Box>
+    </Modal>
+  );
+};
+
+export default ConfirmationModal;
diff --git a/src/components/CustomRangeModal.tsx b/src/components/CustomRangeModal.tsx
@@ -59,7 +59,7 @@ const CustomRangeModal: React.FC = () => {
                   style={{ cursor: 'pointer' }}
                 />
               </Box>
-              <Box className="text-4D">{t('COMMON.CUSTOM_RANGE')}</Box>
+              <Box className="text-dark-grey">{t('COMMON.CUSTOM_RANGE')}</Box>
             </Box>
             <Box>
               <CloseIcon
@@ -69,7 +69,7 @@ const CustomRangeModal: React.FC = () => {
             </Box>
           </Box>
           <Box sx={{ paddingTop: '20px' }}>
-            <Box className="fs-14 fw-500 text-4D">
+            <Box className="fs-14 fw-500 text-dark-grey">
               {t('COMMON.FROM_TO_DATE')}
             </Box>
             <Box className="fs-22 fw-500 pt-10 text-1F">17 May – 23 May</Box>

diff --git a/src/components/DateRangePopup.tsx b/src/components/DateRangePopup.tsx
@@ -12,18 +12,18 @@ import {
   useStepContext,
 } from '@mui/material';
 import React, { useState } from 'react';
-import ReactGA from 'react-ga4';
 import { getDayAndMonthName, getTodayDate } from '@/utils/Helper';
 
-import checkMark from '../assets/images/checkMark.svg';
 import CloseIcon from '@mui/icons-material/Close';
 import { Height } from '@mui/icons-material';
+import Image from 'next/image';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import MonthCalender from './MonthCalender';
+import ReactGA from 'react-ga4';
 import WestIcon from '@mui/icons-material/West';
+import checkMark from '../assets/images/checkMark.svg';
 import { useTheme } from '@mui/material/styles';
 import { useTranslation } from 'next-i18next';
-import Image from 'next/image';
 
 const modalStyle = {
   position: 'absolute',
@@ -254,12 +254,15 @@ const DateRangePopup: React.FC<CustomSelectModalProps> = ({
           <Box>
             <Grid sx={{ padding: '20px 20px 5px' }} container>
               <Grid item xs={6}>
-                <Typography className="text4D" textAlign={'left'}>
+                <Typography className="text-dark-grey" textAlign={'left'}>
                   {t('COMMON.DATE_RANGE')}
                 </Typography>
               </Grid>
               <Grid item xs={6} textAlign={'right'}>
-                <CloseIcon className="text4D" onClick={handleModalClose} />
+                <CloseIcon
+                  className="text-dark-grey"
+                  onClick={handleModalClose}
+                />
               </Grid>
             </Grid>
           </Box>
@@ -288,7 +291,7 @@ const DateRangePopup: React.FC<CustomSelectModalProps> = ({
                       left: '8px',
                       minWidth: 'auto',
                     }}
-                    className="text4D"
+                    className="text-dark-grey"
                   >
                     <Image
                       height={10}
@@ -349,7 +352,7 @@ const DateRangePopup: React.FC<CustomSelectModalProps> = ({
                     style={{ cursor: 'pointer' }}
                   />
                 </Box>
-                <Box className="text-4D">{t('COMMON.CUSTOM_RANGE')}</Box>
+                <Box className="text-dark-grey">{t('COMMON.CUSTOM_RANGE')}</Box>
               </Box>
               <Box>
                 <CloseIcon
@@ -359,7 +362,7 @@ const DateRangePopup: React.FC<CustomSelectModalProps> = ({
               </Box>
             </Box>
             <Box sx={{ paddingTop: '10px' }}>
-              <Box className="fs-14 fw-500 text-4D">
+              <Box className="fs-14 fw-500 text-dark-grey">
                 {t('COMMON.FROM_TO_DATE')}
               </Box>
               <Box className="fs-22 fw-500 pt-10 text-1F">

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -2,21 +2,22 @@
 
 import { Box, Stack } from '@mui/material';
 import Menu, { MenuProps } from '@mui/material/Menu';
+import React, { useEffect, useState } from 'react';
 import { alpha, styled } from '@mui/material/styles';
 import { usePathname, useRouter } from 'next/navigation';
-import React, { useEffect, useState } from 'react';
 
+import ConfirmationModal from './ConfirmationModal';
+import Image from 'next/image';
 import LogoutOutlinedIcon from '@mui/icons-material/LogoutOutlined';
-import PersonOutlineOutlinedIcon from '@mui/icons-material/PersonOutlineOutlined';
 import MenuItem from '@mui/material/MenuItem';
-import { useTheme } from '@mui/material/styles';
-import { useTranslation } from 'next-i18next';
+import PersonOutlineOutlinedIcon from '@mui/icons-material/PersonOutlineOutlined';
+import accountIcon from './../assets/images/account.svg';
 import dynamic from 'next/dynamic';
-import Image from 'next/image';
+import { logEvent } from '@/utils/googleAnalytics';
 import logoLight from '../../public/images/logo-light.png';
 import menuIcon from '../assets/images/menuIcon.svg';
-import accountIcon from './../assets/images/account.svg';
-import { logEvent } from '@/utils/googleAnalytics';
+import { useTheme } from '@mui/material/styles';
+import { useTranslation } from 'next-i18next';
 
 const Header: React.FC = () => {
   const router = useRouter();
@@ -89,6 +90,7 @@ const Header: React.FC = () => {
 
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
   const open = Boolean(anchorEl);
+  const [modalOpen, setModalOpen] = React.useState<boolean>(false);
   const handleClick = (event: React.MouseEvent<HTMLElement>) => {
     setAnchorEl(event.currentTarget);
   };
@@ -121,6 +123,23 @@ const Header: React.FC = () => {
     }
   }
 
+  const getMessage = () => {
+    if (modalOpen) return t('COMMON.SURE_LOGOUT');
+    return '';
+  };
+
+  const handleAction = () => {
+    handleLogoutClick();
+  };
+
+  const handleCloseModel = () => {
+    setModalOpen(false);
+  };
+
+  const logoutOpen = () => {
+    setModalOpen(true);
+  };
+
   return (
     <Box sx={{ marginBottom: '4rem' }}>
       <Box
@@ -214,7 +233,7 @@ const Header: React.FC = () => {
                 </MenuItem>
               )}
               <MenuItem
-                onClick={handleLogoutClick}
+                onClick={logoutOpen}
                 disableRipple
                 sx={{ 'letter-spacing': 'normal' }}
               >
@@ -226,6 +245,17 @@ const Header: React.FC = () => {
         </Stack>
       </Box>
 
+      <ConfirmationModal
+        message={getMessage()}
+        handleAction={handleAction}
+        buttonNames={{
+          primary: t('COMMON.LOGOUT'),
+          secondary: t('COMMON.CANCEL'),
+        }}
+        handleCloseModel={handleCloseModel}
+        modalOpen={modalOpen}
+      />
+
       <MenuDrawer
         toggleDrawer={toggleDrawer}
         open={openDrawer}

diff --git a/src/components/LearnersList.tsx b/src/components/LearnersList.tsx
@@ -79,8 +79,10 @@ const LearnersList = () => {
                   19 y/o
                 </Box>
                 <FiberManualRecordIcon
-                  sx={{ fontSize: '9px' }}
-                  className="textCD"
+                  sx={{
+                    fontSize: '9px',
+                    color: theme.palette.secondary.contrastText,
+                  }}
                 />
                 <Box
                   sx={{ fontSize: '12px', color: theme.palette.warning['400'] }}
@@ -133,8 +135,10 @@ const LearnersList = () => {
                   19 y/o
                 </Box>
                 <FiberManualRecordIcon
-                  sx={{ fontSize: '9px' }}
-                  className="textCD"
+                  sx={{
+                    fontSize: '9px',
+                    color: theme.palette.secondary.contrastText,
+                  }}
                 />
                 <Box
                   sx={{