Merge pull request #138 from ctc-uci/dang-spring-final

Dang spring final
ctc-uci · Apr 2, 2024 · 4b242a1 · 4b242a1
2 parents a73b990 + 6fa157d
commit 4b242a1
Show file tree

Hide file tree

Showing 17 changed files with 322 additions and 228 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -24,17 +24,34 @@ import DummyVolunteerQR from './pages/DummyVolunteerQR';
 import DummyAdminQR from './pages/DummyAdminQR';
 import Volunteers from './pages/Volunteers';
 import Navbar from './components/Navbar/Navbar';
+import NavbarDrawer from './components/Navbar/NavbarDrawer';
 import AdminPage from './pages/AdminPage';
 import { RoleProvider } from './utils/RoleContext';
 import { UserProvider } from './utils/UserContext';
 import ProtectedRoute from './utils/ProtectedRoute';
+import NavbarContext from './utils/NavbarContext';
+
+import { useDisclosure, useBreakpointValue, Box } from '@chakra-ui/react';
 
 const Layout = () => {
+  const isLargerThan1200px = useBreakpointValue({ base: false, xl: true });
+  const {
+    isOpen: isNavbarDrawerOpen,
+    onOpen: onNavbarDrawerOpen,
+    onClose: onNavbarDrawerClose,
+  } = useDisclosure();
+
   return (
-    <>
-      <Navbar />
-      <Outlet />
-    </>
+    <NavbarContext.Provider value={{ isNavbarDrawerOpen, onNavbarDrawerOpen, onNavbarDrawerClose }}>
+      {isLargerThan1200px ? (
+        <Navbar />
+      ) : (
+        <NavbarDrawer isOpen={isNavbarDrawerOpen} onClose={onNavbarDrawerClose} />
+      )}
+      <Box as="main" ml={isLargerThan1200px ? 'var(--size-of-navbar)' : 0}>
+        <Outlet />
+      </Box>
+    </NavbarContext.Provider>
   );
 };
 

diff --git a/src/Assets/status_icon/checked_in.svg b/src/Assets/status_icon/checked_in.svg
diff --git a/src/Assets/status_icon/registered.svg b/src/Assets/status_icon/registered.svg
diff --git a/src/components/AddEventsModal/AddEventsModal.jsx b/src/components/AddEventsModal/AddEventsModal.jsx
@@ -66,6 +66,7 @@ const AddEventsModal = () => {
         isClosable: true,
       });
       onClose();
+      window.location.reload();
     } catch (err) {
       console.log(err);
       toast({
@@ -282,6 +283,7 @@ const AddEventsModal = () => {
               borderRadius={'5px'}
               marginLeft={'10px'}
               paddingX={5}
+              color={'white'}
               onClick={handleSubmit}
               isDisabled={isSubmittable}
             >

diff --git a/src/components/Checkin/CheckinModal.jsx b/src/components/Checkin/CheckinModal.jsx
@@ -1,23 +1,23 @@
-import { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
 import {
-  Modal,
-  ModalOverlay,
-  ModalContent,
-  ModalHeader,
-  ModalCloseButton,
-  Button,
-  Text,
-  Image,
   Box,
+  Button,
   Center,
+  Flex,
   FormControl,
   FormLabel,
+  Image,
   Input,
-  Flex,
   InputGroup,
   InputLeftElement,
+  Modal,
+  ModalCloseButton,
+  ModalContent,
+  ModalHeader,
+  ModalOverlay,
+  Text,
 } from '@chakra-ui/react';
+import PropTypes from 'prop-types';
+import { useState } from 'react';
 import { FaUserAlt } from 'react-icons/fa'; // Icon for when there is no picture
 import GroupIcon from '../../Assets/groupIcon.svg';
 
@@ -27,26 +27,20 @@ const CheckinModal = ({ isOpen, onClose, volunteer, onCheckInConfirm }) => {
 
   const handleInput = e => {
     setNumberOfParticipants(e.target.value);
-    console.log(e.target.value);
     const numericRegex = /^[0-9]*$/;
     const isNumeric = numericRegex.test(e.target.value);
     setSubmittable(isNumeric && e.target.value.trim() !== '');
   };
 
   const handleCheckIn = async () => {
     if (volunteer && typeof volunteer === 'object' && volunteer.id) {
-      console.log('Volunteer:', volunteer);
       await onCheckInConfirm(volunteer, numberOfParticipants); // Pass the entire volunteer object
       onClose();
     } else {
       console.error('Invalid volunteer object:', volunteer);
     }
   };
 
-  useEffect(() => {
-    console.log(volunteer);
-  });
-
   return (
     <div>
       <Modal isOpen={isOpen} onClose={onClose} size="sm">
@@ -133,7 +127,7 @@ CheckinModal.propTypes = {
     last_name: PropTypes.string,
     email: PropTypes.string,
     image_url: PropTypes.string,
-    number_in_party: PropTypes.number
+    number_in_party: PropTypes.number,
   }),
 };
 

diff --git a/src/components/Checkin/CheckinStatsDashboard.jsx b/src/components/Checkin/CheckinStatsDashboard.jsx
@@ -23,10 +23,10 @@ const CheckinStatsDashboard = ({ event, registered, checkin }) => {
   };
 
   const getTimeString = () => {
-    if (!event || !event.time) {
+    if (!event || !event.start_time) {
       return '';
     }
-    const time = event.time.substring(0, 5);
+    const time = event.start_time.substring(0, 5);
     const value = parseInt(time.substring(0, 2));
     if (value > 12) {
       return (value - 12).toString() + time.substring(2);

diff --git a/src/components/Checkin/VolunteerEventsTable.jsx b/src/components/Checkin/VolunteerEventsTable.jsx
@@ -1,25 +1,26 @@
 /* eslint-disable react/prop-types */
-import 'react';
-import DataEntryModal from '../DataEntryModal/DataEntryModal';
 import {
-  Text,
   Box,
-  Flex,
-  Spacer,
   Center,
+  Flex,
   Image,
   Table,
-  Thead,
-  Tbody,
-  Tr,
-  Th,
-  Td,
   TableContainer,
   Tag,
+  Tbody,
+  Td,
+  Text,
+  Th,
+  Thead,
+  Tr,
   useDisclosure,
 } from '@chakra-ui/react';
+import 'react';
 import { FaUser } from 'react-icons/fa';
-import { MdInput, MdCheck } from 'react-icons/md';
+import { MdCheck, MdInput } from 'react-icons/md';
+import checked_in from '../../Assets/status_icon/checked_in.svg';
+import registered from '../../Assets/status_icon/registered.svg';
+import DataEntryModal from '../DataEntryModal/DataEntryModal';
 
 const RenderVolunteerRow = ({ volunteer, changeIsCheckedIn, isCheckinPage }) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
@@ -43,16 +44,12 @@ const RenderVolunteerRow = ({ volunteer, changeIsCheckedIn, isCheckinPage }) =>
   } = volunteer;
 
   let status = 'Registered';
-  let statusColor = 'white';
   if (role === 'guest') {
     status = 'Guest';
-    statusColor = '#FF84B0';
   } else if (is_checked_in === false) {
     status = 'Registered';
-    statusColor = '#9188F2';
   } else if (is_checked_in === true) {
     status = 'Checked-in';
-    statusColor = '#9BCB6C';
   }
 
   // const stringvolunteerId = volunteer_id.toString();
@@ -82,41 +79,38 @@ const RenderVolunteerRow = ({ volunteer, changeIsCheckedIn, isCheckinPage }) =>
       </Td>
       <Td>
         <Flex>
-          <Flex borderRadius={'full'} padding={1} border={'solid 1px rgba(0, 0, 0, 0.3)'}>
-            <Box
-              ml={1}
-              borderRadius={'100%'}
-              backgroundColor={statusColor}
-              padding={2}
-              w="14px"
-              h="14px"
-              my="auto"
-            ></Box>
-            <Text fontSize="13" ml={2} mr={2}>
-              {status}
-            </Text>
+          <Flex
+            borderRadius={'lg'}
+            p={2}
+            border={'2px solid rgba(0, 0, 0, 0.10)'}
+            alignItems={'center'}
+            gap={1}
+            justifyContent={'center'}
+          >
+            <Image src={status === 'Checked-in' ? checked_in : registered} />
+            <Text fontSize="md">{status}</Text>
           </Flex>
         </Flex>
       </Td>
       <Td>{number_in_party}</Td>
       <Td>
-        <Flex gap={2}>
+        <Flex gap={2} justifyContent={'center'} alignItems={'center'}>
           {is_checked_in ? (
             <>
               {!isCheckinPage ? (
                 <>
                   <Tag
-                    cursor={'pointer'}
                     onClick={onOpen}
+                    cursor={'pointer'}
                     borderRadius={10}
-                    padding={2}
-                    color={'#7B7C7D'}
-                    bg={'#E2E4E5'}
+                    p={2}
+                    color={'#0075FF'}
+                    bg={'white'}
+                    border={'2px solid #0075FF'}
+                    gap={1}
                   >
-                    <Box mr="2">
-                      <MdInput />
-                    </Box>
-                    Input Data
+                    <MdInput />
+                    <Text fontSize={'md'}> Input Data</Text>
                   </Tag>
                   <DataEntryModal
                     isOpen={isOpen}
@@ -135,7 +129,7 @@ const RenderVolunteerRow = ({ volunteer, changeIsCheckedIn, isCheckinPage }) =>
                   />
                 </>
               ) : (
-                <Text color={'#717171'} fontWeight={400}>
+                <Text color={'#717171'} fontSize={'lg'} fontWeight={'semibold'}>
                   Checked-in
                 </Text>
               )}
@@ -144,19 +138,17 @@ const RenderVolunteerRow = ({ volunteer, changeIsCheckedIn, isCheckinPage }) =>
             <Tag
               onClick={() => changeIsCheckedIn(volunteer)}
               cursor={'pointer'}
-              textColor={'gray'}
               borderRadius={10}
-              padding={2}
-              color={'#7B7C7D'}
-              bg={'#E2E4E5'}
+              p={2}
+              color={'#0075FF'}
+              bg={'white'}
+              border={'2px solid #0075FF'}
+              gap={1}
             >
-              <Box mr="2">
-                <MdCheck />
-              </Box>
-              Check-In
+              <MdCheck />
+              <Text fontSize={'md'}>Check-In</Text>
             </Tag>
           )}
-          <Spacer marginRight={5} />
         </Flex>
       </Td>
     </Tr>
@@ -182,15 +174,15 @@ const VolunteerEventsTable = ({ volunteers, changeIsCheckedIn, isCheckinPage })
       >
         <Thead bg="#F7FAFC">
           <Tr fontWeight={'medium'}>
-            <Th w="50%">
+            <Th>
               <Flex gap={2}>
                 <FaUser size="1rem" />
                 <Text color="#2D3748" fontWeight="650">
                   Attendee
                 </Text>
               </Flex>
             </Th>
-            <Th w="30%">
+            <Th>
               <Flex gap={2}>
                 <Text color="#2D3748" fontWeight="650">
                   Type
@@ -211,6 +203,7 @@ const VolunteerEventsTable = ({ volunteers, changeIsCheckedIn, isCheckinPage })
                 </Text>
               </Flex>
             </Th>
+            <Th w={{ base: '25%', xl: '' }}></Th>
           </Tr>
         </Thead>
         <Tbody>

diff --git a/src/components/Events/EventCard.jsx b/src/components/Events/EventCard.jsx
@@ -132,9 +132,9 @@ const EventCard = ({
 
         <Box px="27px" py="20px">
           <HappeningInChip date={dateObj} />
-          {name.length > 20 ? (
+          {name.length > 14 ? (
             <Text fontWeight="700" fontSize="25px">
-              {name.substring(0, 20)}...
+              {name.substring(0, 14)}...
             </Text>
           ) : (
             <Text fontWeight="700" fontSize="25px">