Center sessionIssue #PS-1317 fix: Add Planned Session modal online UI Implementation

public/locales/en/common.json

@@ -295,5 +295,28 @@
   },
   "MANAGE_USERS": {
     "CENTERS_REQUESTED_SUCCESSFULLY": "Center Requested Successfully"
+  },
+  "CENTER_SESSION": {
+    "THIS_SESSION": "This session",
+    "FOLLOWING_SESSIONS": "This and following sessions",
+    "MODE_OF_SESSION": "Mode of Session",
+    "OFFLINE": "Offline",
+    "ONLINE": "Online",
+    "SUBJECT": "Subject",
+    "MEETING_LINK": "Meeting Link",
+    "MEETING_PASSCODE": "Meeting Passcode (if applicable)",
+    "START_TIME": "Start Time",
+    "END_TIME": "End Time",
+    "START_DATE": "Start Date",
+    "END_DATE": "End Date",
+    "REMOVE_THIS_SESSION": "Remove this session",
+    "PLANNED_SESSION": "Planned Session",
+    "FIXES_SUBJECTS": "For fixed subjects in the timetable",
+    "EXTRA_SESSION": "Extra Session",
+    "DOUBT_CLEARING": "For doubt clearing, webinars, etc",
+    "TOPIC": "Topic",
+    "SUBTOPIC": "Sub Topic",
+    "FACILITATORS": " Facilitators Pre-requisites",
+    "TITLE": "Title"
   }
 }

public/locales/hi/common.json

@@ -268,8 +268,32 @@
     "REQUEST_TO_DELETE": "हटाने का अनुरोध",
     "RENAME": "नाम बदलें",
     "CENTER_RENAMED": "केंद्र का नाम सफलतापूर्वक बदल दिया गया!",
-    "SEND_REQUEST":"अनुरोध भेजें",
+    "SEND_REQUEST": "अनुरोध भेजें",
     "REQUEST_TO_DELETE_HAS_BEEN_SENT": " हटाने का अनुरोध भेजा गया है",
     "YOU_ARE_SENDING_REQUEST_TO_THE_STATE_ADMIN": "आप राज्य प्रशासन को इस केंद्र को हटाने का अनुरोध भेज रहे हैं"
+  },
+
+  "CENTER_SESSION": {
+    "THIS_SESSION": "यह सत्र",
+    "FOLLOWING_SESSIONS": "यह और आने वाले सत्र",
+    "MODE_OF_SESSION": "सत्र का मोड",
+    "OFFLINE": "ऑफलाइन",
+    "ONLINE": "ऑनलाइन",
+    "SUBJECT": "विषय",
+    "MEETING_LINK": "बैठक लिंक",
+    "MEETING_PASSCODE": "बैठक पासकोड (यदि लागू हो)",
+    "START_TIME": "प्रारंभ समय",
+    "END_TIME": "समाप्ति समय",
+    "START_DATE": "प्रारंभ तिथि",
+    "END_DATE": "समाप्ति तिथि",
+    "REMOVE_THIS_SESSION": "इस सत्र को हटाएं",
+    "PLANNED_SESSION": "नियोजित सत्र",
+    "FIXES_SUBJECTS": "समय सारिणी में निश्चित विषयों के लिए",
+    "EXTRA_SESSION": "अतिरिक्त सत्र",
+    "DOUBT_CLEARING": "शंका समाधान, वेबिनार आदि के लिए",
+    "TOPIC": "विषय",
+    "SUBTOPIC": "उप विषय",
+    "FACILITATORS": "सुविधादाताओं की पूर्व आवश्यकताएँ",
+    "TITLE": "शीर्षक"
   }
 }

public/locales/mr/common.json

@@ -269,8 +269,32 @@
     "REQUEST_TO_DELETE": "हटवण्याची विनंती",
     "RENAME": "नाव बदला",
     "CENTER_RENAMED": "केंद्राचे नाव यशस्वीरित्या बदलले गेले!",
-    "SEND_REQUEST":"विनंती पाठवा",
+    "SEND_REQUEST": "विनंती पाठवा",
     "REQUEST_TO_DELETE_HAS_BEEN_SENT": "हटवण्याची विनंती पाठवली आहे",
     "YOU_ARE_SENDING_REQUEST_TO_THE_STATE_ADMIN": "आपण या केंद्राला हटविण्याचे विनंती राज्य प्रशासनाला पाठवत आहात"
+  },
+
+  "CENTER_SESSION": {
+    "THIS_SESSION": "हे सत्र",
+    "FOLLOWING_SESSIONS": "हे आणि पुढील सत्र",
+    "MODE_OF_SESSION": "सत्राचा प्रकार",
+    "OFFLINE": "ऑफलाइन",
+    "ONLINE": "ऑनलाइन",
+    "SUBJECT": "विषय",
+    "MEETING_LINK": "बैठक लिंक",
+    "MEETING_PASSCODE": "बैठक पासकोड (जर लागू असेल तर)",
+    "START_TIME": "सुरवातीचा वेळ",
+    "END_TIME": "समाप्तीचा वेळ",
+    "START_DATE": "सुरवात तारीख",
+    "END_DATE": "समाप्ती तारीख",
+    "REMOVE_THIS_SESSION": "हे सत्र काढून टाका",
+    "PLANNED_SESSION": "नियोजित सत्र",
+    "FIXES_SUBJECTS": "वेळापत्रकात निश्चित विषयांसाठी",
+    "EXTRA_SESSION": "अतिरिक्त सत्र",
+    "DOUBT_CLEARING": "शंका निरसन, वेबिनार इत्यादीसाठी",
+    "TOPIC": "विषय",
+    "SUBTOPIC": "उपविषय",
+    "FACILITATORS": "सुविधादात्यांची पूर्व आवश्यकताएं",
+    "TITLE": "शीर्षक"
   }
 }

src/components/CenterSessionModal.tsx

@@ -0,0 +1,97 @@
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import CloseIcon from '@mui/icons-material/Close';
+import { Divider } from '@mui/material';
+import Modal from '@mui/material/Modal';
+import React from 'react';
+import { SessionsModalProps } from '@/utils/Interfaces';
+import Typography from '@mui/material/Typography';
+import { useTheme } from '@mui/material/styles';
+import { useTranslation } from 'react-i18next';
+
+const CenterSessionModal: React.FC<SessionsModalProps> = ({
+  children,
+  open,
+  handleClose,
+  title,
+  primary,
+}) => {
+  const theme = useTheme<any>();
+  const { t } = useTranslation();
+  const style = {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    width: '75%',
+    bgcolor: theme?.palette?.warning['A400'],
+    boxShadow: 24,
+    borderRadius: '16px',
+    '@media (min-width: 600px)': {
+      width: '450px',
+    },
+  };
+  return (
+    <>
+      <div>
+        <Modal
+          open={open}
+          onClose={handleClose}
+          aria-labelledby="modal-modal-title"
+          aria-describedby="modal-modal-description"
+        >
+          <Box sx={style}>
+            <Box
+              display={'flex'}
+              justifyContent={'space-between'}
+              sx={{ padding: '18px 16px' }}
+            >
+              <Box marginBottom={0}>
+                <Typography
+                  variant="h2"
+                  sx={{
+                    color: theme?.palette?.warning['A200'],
+                    fontSize: '14px',
+                  }}
+                  component="h2"
+                >
+                  {title}
+                </Typography>
+              </Box>
+              <CloseIcon
+                onClick={handleClose}
+                sx={{
+                  cursor: 'pointer',
+                  color: theme?.palette?.warning['A200'],
+                }}
+              />
+            </Box>
+            <Divider />
+            {children}
+            <Divider />
+            <Box sx={{ padding: '20px 16px' }}>
+              <Button
+                variant="contained"
+                color="primary"
+                sx={{
+                  '&.Mui-disabled': {
+                    backgroundColor: theme?.palette?.primary?.main,
+                  },
+                  minWidth: '84px',
+                  height: '2.5rem',
+                  padding: theme.spacing(1),
+                  fontWeight: '500',
+                  width: '100%',
+                }}
+              >
+                {primary}
+              </Button>
+            </Box>
+          </Box>
+        </Modal>
+      </div>
+    </>
+  );
+};
+
+export default CenterSessionModal;

src/components/DeleteSession.tsx

@@ -0,0 +1,47 @@
+import {
+  Box,
+  FormControl,
+  FormControlLabel,
+  FormLabel,
+  Radio,
+  RadioGroup,
+} from '@mui/material';
+
+import React from 'react';
+import { useTheme } from '@mui/material/styles';
+import { useTranslation } from 'react-i18next';
+
+const DeleteSession = () => {
+  const theme = useTheme<any>();
+  const { t } = useTranslation();
+  return (
+    <>
+      <Box sx={{ padding: '8px 16px' }}>
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            mt: 2,
+          }}
+        >
+          <Box>{t('CENTER_SESSION.THIS_SESSION')}</Box>
+          <Radio style={{ color: theme?.palette?.warning['300'] }} />
+        </Box>
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            my: 2,
+          }}
+        >
+          <Box>{t('CENTER_SESSION.FOLLOWING_SESSIONS')}</Box>
+          <Radio style={{ color: theme?.palette?.warning['300'] }} />
+        </Box>
+      </Box>
+    </>
+  );
+};
+
+export default DeleteSession;