Merge branch 'dev' into 69-account-page-pagination-approve-decline-mu…

…ltiple

src/App.css

@@ -0,0 +1,3 @@
+.Windows-PSOption {
+    color: black;
+}

src/components/Authentication/SignUp.jsx

@@ -48,7 +48,7 @@ const SignUp = () => {
       await registerWithEmailAndPassword(email, password, userType, navigate, '/awaitConfirmation', firstName, lastName);
 
       // send email to Debbie 
-      const subject = "placeholder";
+      const subject = "New User Created Account";
       const newEmail = email;
       await sendEmail(subject, newEmail, emailtemplate);
 

src/components/Catalog/DeleteEventModal/DeleteEventModal.jsx

@@ -26,12 +26,12 @@ const DeleteEventModal = ({ isOpen, onClose, deleteItemId, setDataShouldRevalida
     <Modal isOpen={isOpen} onClose={onClose}>
       <ModalOverlay />
       <ModalContent>
-        <ModalHeader>Confirm Delete</ModalHeader>
+        <ModalHeader>Remove Event?</ModalHeader>
         <ModalCloseButton />
-        <ModalBody>Are you sure you want to delete this row?</ModalBody>
+        <ModalBody>Are you sure you want to delete this event? You cannot undo this action afterward.</ModalBody>
         <ModalFooter>
-          <Button onClick={() => handleConfirmDelete(deleteItemId)}>Delete</Button>
-          <Button onClick={onClose}>Cancel</Button>
+          <Button onClick={onClose} mr={2}>Cancel</Button>
+          <Button onClick={() => handleConfirmDelete(deleteItemId)} colorScheme='red'>Delete</Button>
         </ModalFooter>
       </ModalContent>
     </Modal>

src/components/Catalog/SearchFilter/filterOptions.js

@@ -6,7 +6,6 @@ const seasonOptions = [
 const yearOptions = [
   { value: 'junior', name: 'Junior' },
   { value: 'senior', name: 'Senior' },
-  { value: 'both', name: 'Both' },
 ];
 const subjectOptions = [
   { value: 'life skills', name: 'Life Skills' },

src/components/EmailTemplates/emailtemplate.jsx

@@ -1,13 +1,15 @@
 //import React from 'react';
-import { Email, Item, Span, A } from 'react-html-email';
+import { Email, Item, Span } from 'react-html-email';
 
 const emailTemplate = ({newEmail}) => (
   <Email title="New User Account Approval">
     <Item align="center">
       <Span fontSize={20}>
         Hello Debbie, 
-        A user with the email {newEmail} has created an account and is waiting for your approval. 
-        <A href="https://github.com/chromakode/react-html-email">react-html-email</A>.
+
+        A user with the email {newEmail} has created an account and is waiting for your approval.
+
+        Thank you. 
       </Span>
     </Item>
   </Email>

src/components/Events/DailyEvent.jsx

@@ -1,10 +1,19 @@
 import PropTypes from 'prop-types';
-import { Box, Flex, Text, Grid, Button, Spacer } from '@chakra-ui/react';
+import { Box, Flex, Text, Grid, Button, Spacer, Badge, VStack } from '@chakra-ui/react';
 import { useState } from 'react';
 import { NPOBackend } from '../../utils/auth_utils.js';
+import AUTH_ROLES from '../../utils/auth_config.js';
+import { useAuthContext } from '../../common/AuthContext.jsx';
+const { USER_ROLE } = AUTH_ROLES.AUTH_ROLES;
 
-const DailyEvent = ({ id, startTime, endTime, eventTitle, confirmed, description }) => {
+const DailyEvent = ({ id, startTime, endTime, eventTitle, confirmed, description, eventId }) => {
   const [confirmEvent, setConfirmEvent] = useState(confirmed);
+  const [cohort, setCohort] = useState(undefined);
+  const [cohortBadgeColor, setCohortBadgeColor] = useState(undefined);
+  const [cohortTextColor, setCohortTextColor] = useState(undefined);
+  const [cohortBorderColor, setCohortBorderColor] = useState(undefined);
+  const [cohortBorder, setCohortBorder] = useState(undefined);
+  const {currentUser} = useAuthContext();
 
   let border_color = '#2B93D1';
   let background_color = '#F7FAFC';
@@ -13,6 +22,42 @@ const DailyEvent = ({ id, startTime, endTime, eventTitle, confirmed, description
     background_color = '#FEF1DC';
   }
 
+  const getCohort = async () => {
+    if (eventId) {
+      try {
+        const { data } = await NPOBackend.get(`/catalog/${eventId}`);
+        let year = data[0].year;
+        if( year.length == 2)
+        {
+          setCohort('Both');
+          setCohortBadgeColor("#FFFFFF");
+          setCohortTextColor("#4A5568");
+          setCohortBorderColor("#4A5568");
+          setCohortBorder("outline");
+        }
+        else if(year[0] == 'junior')
+        {
+          setCohort('Junior');
+          setCohortBadgeColor("#CBD5E0");
+          setCohortTextColor("#171923");
+          setCohortBorderColor("#CBD5E0");
+          setCohortBorder("simple");
+        }
+        else {
+          setCohort('Senior');
+          setCohortBadgeColor("#4A5568");
+          setCohortTextColor("#FFFFFF");
+          setCohortBorderColor("#4A5568");
+          setCohortBorder("simple");
+        }
+      } catch (error) {
+        console.error('Error fetching data:', error);
+      }
+    }
+  }
+
+  getCohort();
+
   const handleConfirm = async () => {
     const date = new Date();
     try {
@@ -50,17 +95,43 @@ const DailyEvent = ({ id, startTime, endTime, eventTitle, confirmed, description
 
         <Spacer />
 
+        <VStack align="flex-end">
+        <Badge
+            key={eventId}
+            variant={cohortBorder}
+            backgroundColor={cohortBadgeColor}
+            color={cohortTextColor}
+            textTransform="capitalize"
+            borderRadius="10rem"
+            borderColor={cohortBorderColor}
+            fontWeight="normal"
+            px="0.5rem"
+            mr="0.125rem"
+          >
+            {cohort}
+          </Badge>
+
         {!confirmEvent && (
-          <Box w="15vh" alignItems="top">
+          <Box w="4rem" alignItems="top">
             <Grid gap={2}>
               <div></div>
               <div></div>
-              <Button bg="#FBD38D" textColor="#2D3748" size="sm" onClick={handleConfirm}>
+              <Button
+                variant="outline"
+                bg="#FEF1DC"
+                textColor="#F69052"
+                borderColor="#F69052"
+                _hover={{ bg: "#F6AD55", color: "#2D3748" }}
+                size="xs"
+                onClick={handleConfirm}
+                visibility={currentUser.type == USER_ROLE ? 'hidden' : 'visible'}
+              >
                 Confirm
               </Button>
-            </Grid>
-          </Box>
+          </Grid>
+        </Box>
         )}
+        </VStack>
       </Flex>
     </Box>
   );
@@ -73,6 +144,7 @@ DailyEvent.propTypes = {
   eventTitle: PropTypes.string.isRequired,
   description: PropTypes.string,
   confirmed: PropTypes.bool.isRequired,
+  eventId: PropTypes.number.isRequired,
 };
 
 export default DailyEvent;

src/components/Events/EventInfo.jsx

@@ -4,11 +4,15 @@ import { DeleteIcon } from '@chakra-ui/icons';
 import { LuPen } from 'react-icons/lu';
 import PlannerModal from '../Planner/PlannerModal';
 import { NPOBackend } from '../../utils/auth_utils';
+import AUTH_ROLES from '../../utils/auth_config.js';
+import { useAuthContext } from '../../common/AuthContext.jsx';
+const { USER_ROLE } = AUTH_ROLES.AUTH_ROLES;
 
 const EventInfo = ({ dayId, eventDate, day, startTime, endTime, location, notes, setShouldDataRevalidate }) => {
   const { isOpen: isOpenPlanner, onOpen: onOpenPlanner, onClose: onClosePlanner } = useDisclosure();
   const { isOpen: isOpenDelete, onOpen: onOpenDelete, onClose: onCloseDelete } = useDisclosure();
   const toast = useToast();
+  const {currentUser} = useAuthContext();
 
   const handlePlannerClose = () => {
     setShouldDataRevalidate(true);
@@ -43,16 +47,17 @@ const EventInfo = ({ dayId, eventDate, day, startTime, endTime, location, notes,
         {day} {startTime} - {endTime}
       </Text>
 
-      <Text mb="1.5rem">{location}</Text>
+      <Text as="b" mb="0.5rem">Location: </Text>
+      <Text whiteSpace="pre-wrap" mb="2rem">{location}</Text>
 
-      <Text mb="0.5rem">Details:</Text>
+      <Text as="b" mb="0.5rem">Details:</Text>
       <Text whiteSpace="pre-wrap" mb="2rem">{notes ? notes : 'No notes.'}</Text>
 
       <HStack mt="auto">
-        <IconButton bg="white" onClick={onOpenPlanner}>
+        <IconButton bg="white" onClick={onOpenPlanner} visibility={currentUser.type === USER_ROLE ? 'hidden' : 'visible'}>
           <LuPen color='#A0AEC0'/>
         </IconButton>
-        <IconButton bg="white" onClick={onOpenDelete}>
+        <IconButton bg="white" onClick={onOpenDelete} visibility={currentUser.type === USER_ROLE ? 'hidden' : 'visible'}>
           <DeleteIcon color='#A0AEC0'/>
         </IconButton>
       </HStack>

src/components/Events/Events.jsx

@@ -5,6 +5,8 @@ import { Grid } from '@chakra-ui/react';
 
 const Events = ({ eventData }) => {
 
+  // console.log("Event Data", eventData);
+
   const formatDate = (date) => {
     let time = date.split(":");
     let hours = time[0];
@@ -36,7 +38,18 @@ const Events = ({ eventData }) => {
     eventDataWithBreaks.push(currentEvent);
     const currEnd = currentEvent.endTime.split(':').slice(0,2).join(":");
     const nextStart = nextEvent.startTime.split(':').slice(0,2).join(":");
-    if (currEnd < nextStart) {
+
+    const endHour = currEnd.split(':')[0]
+    const endMin = currEnd.split(':')[1]
+    const convertTimeToMin = (hour, min) => {
+      return parseInt(hour) * 60 + parseInt(min);
+    };
+    const startHour = nextStart.split(':')[0]
+    const startMin = nextStart.split(':')[1]
+
+    const timeDiff = convertTimeToMin(startHour, startMin) - convertTimeToMin(endHour, endMin);
+    if (currEnd < nextStart && timeDiff >= 5) {
+      console.log("break");
       eventDataWithBreaks.push({
         id: maxId,
         startTime: currentEvent.endTime,
@@ -62,6 +75,7 @@ const Events = ({ eventData }) => {
           eventTitle={item.title}
           description={item.description}
           confirmed={item.confirmed}
+          eventId={item.eventId}
         />
       ))}
     </Grid>

src/components/Events/PublishedScheduleTable.jsx

@@ -5,20 +5,22 @@ import PropTypes from 'prop-types';
 import { useEffect, useState } from 'react';
 import { Table, Thead, Tbody, Tr, Th, Td, TableContainer, Box, IconButton, useDisclosure } from '@chakra-ui/react';
 import AddDayModal from '../../pages/PublishedSchedule/AddDayModal.jsx'
+import StatModal from '../../pages/PublishedSchedule/StatisticsModal.jsx';
 import { AddIcon } from '@chakra-ui/icons';
+import { IoStatsChart } from "react-icons/io5";
 import { useAuthContext } from '../../common/AuthContext.jsx';
 import AUTH_ROLES from '../../utils/auth_config.js';
 const { ADMIN_ROLE } = AUTH_ROLES.AUTH_ROLES;
 
 
-const PublishedScheduleTable = ({ season }) => {
+const PublishedScheduleTable = ({ season, allSeasons }) => {
   const {currentUser} = useAuthContext();
-
   const [eventsInDay, setEventsInDay] = useState([]);
   const seasonType = season.split(' ')[0];
   const seasonYear = season.split(' ')[1];
   const [dataShouldRevalidate, setShouldDataRevalidate] = useState(false);
   const { isOpen: isOpenDay, onOpen: onOpenDay, onClose: onCloseDay } = useDisclosure();
+  const { isOpen: isOpenStats, onOpen: onOpenStats, onClose: onCloseStats } = useDisclosure();
 
   const renderTable = async () => {
     const { data } = await NPOBackend.get(
@@ -58,6 +60,24 @@ const PublishedScheduleTable = ({ season }) => {
   return (
     <Box>
       {currentUser.type === ADMIN_ROLE &&
+      <>
+        <IconButton
+          bgColor="grey.700"
+          color="blue.700"
+          borderRadius="10rem"
+          position="fixed"
+          bottom="6rem"
+          right={{ base: '1rem', lg: '2rem', xl: '3rem' }}
+          fontSize="1.25rem"
+          w="3.25rem"
+          h="3.25rem"
+          _hover={{ bgColor: 'blue.500' }}
+          onClick={onOpenStats}
+          icon={<IoStatsChart />}
+        >
+          Stats
+        </IconButton>
+
         <IconButton
           bgColor="blue.700"
           color="gray.50"
@@ -66,19 +86,23 @@ const PublishedScheduleTable = ({ season }) => {
           bottom="2rem"
           right={{ base: '1rem', lg: '2rem', xl: '3rem' }}
           fontSize="0.75rem"
-          w="3rem"
-          h="3rem"
+          w="3.25rem"
+          h="3.25rem"
           _hover={{ bgColor: 'blue.500' }}
           onClick={onOpenDay}
           icon={<AddIcon />}
         >
           Create
         </IconButton>
+      </>
       }
 
       <AddDayModal isOpenDay={isOpenDay} onCloseDay={onCloseDay} setShouldDataRevalidate={setShouldDataRevalidate}/>
+      { season && allSeasons &&
+        <StatModal isOpen={isOpenStats} onClose={onCloseStats} season={season} allSeasons={allSeasons}/>
+      }
 
-      <TableContainer borderWidth={1} borderRadius="10px">
+      <TableContainer borderWidth={1} borderRadius="10px" mr="2rem">
         <Table variant="simple">
           <Thead>
             <Tr>
@@ -115,6 +139,7 @@ const PublishedScheduleTable = ({ season }) => {
 
 PublishedScheduleTable.propTypes = {
   season: PropTypes.string.isRequired,
+  allSeasons: PropTypes.array.isRequired,
 };
 
 export default PublishedScheduleTable;

src/components/Navbar/Navbar.jsx

@@ -47,7 +47,7 @@ const Navbar = ({ hasLoaded, isAdmin }) => {
         position={'sticky'}
         as={'nav'}
       >
-        <Image src="src/Logo.svg" marginRight={'48px'}></Image>
+        <Image src="/Logo.svg" marginRight={'48px'}></Image>
         {makeNavTabs('Schedule', '/publishedSchedule')}
         {makeNavTabs('Catalog', '/catalog')}
         {makeNavTabs('Accounts', '/accounts')}
@@ -68,7 +68,7 @@ const Navbar = ({ hasLoaded, isAdmin }) => {
       position={'sticky'}
       as={'nav'}
     >
-      <Image src="src/Logo.svg" marginRight={'48px'}></Image>
+      <Image src="/Logo.svg" marginRight={'48px'}></Image>
       {makeNavTabs('Schedule', '/publishedSchedule')}
 
       <Spacer />