@@ -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
index c6bc75a..10c7870 100644
--- 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
index 37bf6a8..4ce2c4e 100644
--- 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 }) =>
|
-
-
-
- {status}
-
+
+
+ {status}
|
{number_in_party} |
-
+
{is_checked_in ? (
<>
{!isCheckinPage ? (
<>
-
-
-
- Input Data
+
+ Input Data
/>
) : (
-
+
Checked-in
)}
@@ -144,19 +138,17 @@ const RenderVolunteerRow = ({ volunteer, changeIsCheckedIn, isCheckinPage }) =>
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}
>
-
-
-
- Check-In
+
+ Check-In
)}
-
|
@@ -182,7 +174,7 @@ const VolunteerEventsTable = ({ volunteers, changeIsCheckedIn, isCheckinPage })
>
- |
+ |
@@ -190,7 +182,7 @@ const VolunteerEventsTable = ({ volunteers, changeIsCheckedIn, isCheckinPage })
|
-
+ |
Type
@@ -211,6 +203,7 @@ const VolunteerEventsTable = ({ volunteers, changeIsCheckedIn, isCheckinPage })
|
+ |
diff --git a/src/components/Events/EventCard.jsx b/src/components/Events/EventCard.jsx
index 03321c9..a8b2d9e 100644
--- a/src/components/Events/EventCard.jsx
+++ b/src/components/Events/EventCard.jsx
@@ -132,9 +132,9 @@ const EventCard = ({
- {name.length > 20 ? (
+ {name.length > 14 ? (
- {name.substring(0, 20)}...
+ {name.substring(0, 14)}...
) : (
diff --git a/src/components/Events/ImpactSummary.jsx b/src/components/Events/ImpactSummary.jsx
index 1fa1e31..b8d66b4 100644
--- a/src/components/Events/ImpactSummary.jsx
+++ b/src/components/Events/ImpactSummary.jsx
@@ -1,9 +1,9 @@
-import { Box, Heading, Button, VStack, Flex } from '@chakra-ui/react';
-import { useState, useEffect } from 'react';
+import { Box, Button, Flex, VStack } from '@chakra-ui/react';
+import { useEffect, useState } from 'react';
import { AiOutlineExport } from 'react-icons/ai';
import { FaTrashCan } from 'react-icons/fa6';
-import { MdPeopleAlt } from 'react-icons/md';
import { IoDocumentText } from 'react-icons/io5';
+import { MdPeopleAlt } from 'react-icons/md';
import Backend from '../../utils/utils';
import DataCard from './DataCard';
@@ -31,58 +31,51 @@ const ImpactSummary = () => {
};
return (
-
- Impact Summary
-
-
-
-
- }
- />
-
-
-
- }
- />
-
-
-
- }
- />
-
-
-
-
-
-
+
+
+
+
+ }
+ />
+
+
+
+ }
+ />
+
+
+
+ }
+ />
+
+
+
+
+
);
};
diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx
index 70ea137..4b78307 100644
--- a/src/components/Navbar/Navbar.jsx
+++ b/src/components/Navbar/Navbar.jsx
@@ -1,10 +1,11 @@
-import { Box, Text } from '@chakra-ui/react';
+import { Box, Text, Flex } from '@chakra-ui/react';
import adminLogo from '../../Assets/navbar/stand_up_to_trash_logo.png';
import { useNavigate } from 'react-router-dom';
import { useContext, useEffect } from 'react';
import UserContext from '../../utils/UserContext';
import RoleContext from '../../utils/RoleContext';
-// import { useLocation } from 'react-router-dom';
+import NavbarContext from '../../utils/NavbarContext';
+
import {
ArchivedEventsIconBlue,
ArchivedEventsIconGrey,
@@ -18,6 +19,8 @@ import {
SettingsIconGrey,
LogOutIcon,
} from '../Icons/NavbarIcons';
+import { CloseIcon } from '@chakra-ui/icons';
+
import { Tag } from '@chakra-ui/react';
import { logout } from '../../utils/firebaseAuthUtils';
@@ -62,17 +65,14 @@ const NavbarButton = ({ buttonText, path, navigate, UnfocusedIcon, FocusedIcon }
};
const Navbar = () => {
- // const location = useLocation();
const { user, updateUser } = useContext(UserContext);
const { role } = useContext(RoleContext);
+ const { onNavbarDrawerClose } = useContext(NavbarContext);
+
const navigate = useNavigate();
useEffect(() => {
updateUser();
- // console.log(`Here is the user info:`);
- // console.log(user);
- // console.log(`The user's role is: ${role}`);
- // console.log('Current route:', location.pathname);
}, [updateUser]);
// Change the paths for each button since these might change
@@ -97,7 +97,7 @@ const Navbar = () => {
return (
<>
{/* Box for entire navbar */}
-
+
{/* Box for entire nabar with coloring */}
{
{/* Box containing everything above "support" */}
{/* Box containing the logo and role title at the top */}
-
- 
-
+
- {role?.charAt(0).toUpperCase() + role?.slice(1)}
-
-
+
+
+ {role?.charAt(0).toUpperCase() + role?.slice(1)}
+
+
+ {
+ e.preventDefault();
+ onNavbarDrawerClose();
+ }}
+ display={{ base: 'flex', xl: 'none' }}
+ />
+
{/* Add break between role and logo at the top and the nav buttons */}
diff --git a/src/components/Navbar/NavbarDrawer.jsx b/src/components/Navbar/NavbarDrawer.jsx
new file mode 100644
index 0000000..6acd851
--- /dev/null
+++ b/src/components/Navbar/NavbarDrawer.jsx
@@ -0,0 +1,27 @@
+import Navbar from './Navbar'; // Make sure the path to your Navbar component is correct.
+
+import { Drawer, DrawerBody, DrawerContent, DrawerHeader, DrawerOverlay } from '@chakra-ui/react';
+
+import PropTypes from 'prop-types';
+
+const NavbarDrawer = ({ isOpen, onClose }) => {
+ return (
+
+
+
+ Menu
+
+
+
+
+
+
+ );
+};
+
+NavbarDrawer.propTypes = {
+ isOpen: PropTypes.bool.isRequired,
+ onClose: PropTypes.func.isRequired,
+};
+
+export default NavbarDrawer;
diff --git a/src/pages/CheckinPage.jsx b/src/pages/CheckinPage.jsx
index baf99d8..6379a08 100644
--- a/src/pages/CheckinPage.jsx
+++ b/src/pages/CheckinPage.jsx
@@ -1,5 +1,5 @@
/* eslint-disable react/prop-types */
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useContext } from 'react';
import { fetchJoinedEventsById } from '../utils/fuseUtils';
import { getEventById } from '../utils/eventsUtils';
import Backend from '../utils/utils';
@@ -8,8 +8,9 @@ import VolunteerEventsTable from '../components/Checkin/VolunteerEventsTable';
import CheckinStatsDashboard from '../components/Checkin/CheckinStatsDashboard';
import VolunteerTabNavigation from '../components/Checkin/VolunteerTabNavigation';
import CheckinInputPageToggle from '../components/Checkin/CheckinInputPageToggle';
-import { ArrowBackIcon } from '@chakra-ui/icons';
+import { ArrowBackIcon, HamburgerIcon } from '@chakra-ui/icons';
import CheckinModal from '../components/Checkin/CheckinModal';
+import NavbarContext from '../utils/NavbarContext';
import { useParams } from 'react-router-dom';
import { useNavigate } from 'react-router-dom';
@@ -40,6 +41,7 @@ const CheckinPage = () => {
const { isOpen, onOpen, onClose } = useDisclosure();
const [displayedVolunteers, setDisplayedVolunteers] = useState([]);
const [tabIndex, setTabIndex] = useState(0);
+ const { onNavbarDrawerOpen } = useContext(NavbarContext);
const navigate = useNavigate();
const [isCheckinModalOpen, setIsCheckinModalOpen] = useState(false);
@@ -160,23 +162,31 @@ const CheckinPage = () => {
return (
-
+
+
+
+
+
@@ -208,15 +218,17 @@ const CheckinPage = () => {
diff --git a/src/pages/EventPage.jsx b/src/pages/EventPage.jsx
index 371d286..b8009e3 100644
--- a/src/pages/EventPage.jsx
+++ b/src/pages/EventPage.jsx
@@ -9,8 +9,10 @@ import {
Select,
Flex,
} from '@chakra-ui/react';
-import { useEffect, useState } from 'react';
-import { SearchIcon, CalendarIcon } from '@chakra-ui/icons';
+import { useEffect, useState, useContext } from 'react';
+import { SearchIcon, CalendarIcon, HamburgerIcon } from '@chakra-ui/icons';
+
+import NavbarContext from '../utils/NavbarContext';
import EventCard from '../components/Events/EventCard';
import AddEventsModal from '../components/AddEventsModal/AddEventsModal';
@@ -18,6 +20,7 @@ import Backend from '../utils/utils';
import Fuse from 'fuse.js';
const Events = () => {
+ const { onNavbarDrawerOpen } = useContext(NavbarContext);
const [events, setEvents] = useState([]);
const [displayEvents, setDisplayEvents] = useState([]);
@@ -145,7 +148,14 @@ const Events = () => {
}, [name, location, date, fuse]);
return (
-
+
{
borderRadius={'xl'}
flexDir={'column'}
>
- All Upcoming Events
+
+
+ All Upcoming Events
+
diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
index 4d83376..07572d5 100644
--- a/src/pages/HomePage.jsx
+++ b/src/pages/HomePage.jsx
@@ -13,25 +13,21 @@ import {
Heading,
Flex,
} from '@chakra-ui/react';
-import { useEffect, useState } from 'react';
-import { SearchIcon } from '@chakra-ui/icons';
+import { useEffect, useState, useContext } from 'react';
+import { SearchIcon, HamburgerIcon } from '@chakra-ui/icons';
import PropTypes from 'prop-types';
-// import AllData from '../components/Events/AllData';
import ArchiveEventsModal from '../components/Events/ArchiveEventsModal';
import EventCard from '../components/Events/EventCard';
-// import DataCard from '../components/Events/DataCard';
-// import AddEventsModal from '../components/AddEventsModal/AddEventsModal';
import ImpactSummary from '../components/Events/ImpactSummary';
import Backend from '../utils/utils';
import Fuse from 'fuse.js';
+import NavbarContext from '../utils/NavbarContext';
const Home = () => {
const toast = useToast();
const [events, setEvents] = useState([]);
const [displayEvents, setDisplayEvents] = useState([]);
- // const [eventId, setEventId] = useState('');
- // const [showEvents, setShowEvents] = useState(true);
const [showSelect, setShowSelect] = useState(false);
const [isSelectButton, setIsSelectButton] = useState(true);
const [isCreateButton, setIsCreateButton] = useState(true); // toggle between create event button and deselect button
@@ -41,6 +37,8 @@ const Home = () => {
const [location, setLocation] = useState('');
const [fuse, setFuse] = useState();
+ const { onNavbarDrawerOpen } = useContext(NavbarContext);
+
const getEvents = async () => {
try {
const eventsData = await Backend.get('/events');
@@ -52,22 +50,12 @@ const Home = () => {
}
};
- // const getEventId = async () => {
- // try {
- // const eventIdData = await Backend.get(`/events/${eventId}`);
- // console.log(eventIdData);
- // setSelectEvent(eventIdData.data);
- // console.log(events);
- // } catch (err) {
- // console.log(`Error getting event ${eventId}: `, err.message);
- // }
- // };
-
const {
isOpen: isArchiveEventModalOpen,
onOpen: onArchiveEventModalOpen,
onClose: onArchiveEventModalClose,
} = useDisclosure();
+
const confirmArchive = async () => {
for (const id of selectedEvents) {
try {
@@ -92,13 +80,6 @@ const Home = () => {
else onArchiveEventModalOpen();
};
- // const showEvent = () => {
- // setShowEvents(true);
- // if (eventId) {
- // getEventId();
- // }
- // };
-
const handleCheckboxChange = id => {
const newCheckedItems = [...selectedEvents];
const index = newCheckedItems.indexOf(id);
@@ -222,10 +203,22 @@ const Home = () => {
alignItems={'center'}
bg="#E6EAEF"
minH="100vh"
- ml="15rem"
+ ml={{ base: '0', xl: '15rem' }}
py={10}
>
-
+
+
+
+ Impact Summary
+
+
+
+
diff --git a/src/pages/InputDataPage.jsx b/src/pages/InputDataPage.jsx
index b3f10d9..9169c44 100644
--- a/src/pages/InputDataPage.jsx
+++ b/src/pages/InputDataPage.jsx
@@ -1,5 +1,5 @@
/* eslint-disable react/prop-types */
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useContext } from 'react';
import { fetchJoinedEventsById } from '../utils/fuseUtils';
import { getEventById } from '../utils/eventsUtils';
import Backend from '../utils/utils';
@@ -8,6 +8,8 @@ import VolunteerEventsTable from '../components/Checkin/VolunteerEventsTable';
import InputDataDashboard from '../components/InputData/InputDataDashboard';
import CheckinInputPageToggle from '../components/Checkin/CheckinInputPageToggle';
import { useNavigate } from 'react-router-dom';
+import NavbarContext from '../utils/NavbarContext';
+import { HamburgerIcon } from '@chakra-ui/icons';
import { useParams } from 'react-router-dom';
import {
@@ -34,6 +36,7 @@ const InputDataPage = () => {
const [trashCollected, setTrashCollected] = useState('');
const { eventId } = useParams();
const [displayedVolunteers, setDisplayedVolunteers] = useState([]);
+ const { onNavbarDrawerOpen } = useContext(NavbarContext);
const navigate = useNavigate();
console.log(volunteerResults);
@@ -141,23 +144,30 @@ const InputDataPage = () => {
return (
-
+
+
+
+
{
const [registered, setRegistered] = useState('');
@@ -25,6 +26,7 @@ const Volunteers = () => {
const [volunteers, setVolunteers] = useState([]);
const [displayedVolunteers, setDisplayedVolunteers] = useState([]);
const [input, setInput] = useState('');
+ const { onNavbarDrawerOpen } = useContext(NavbarContext);
const setData = async () => {
try {
@@ -73,9 +75,15 @@ const Volunteers = () => {
return (
<>
{/* Registered + Checked-In */}
-
+
-
+
+
{},
+ onNavbarDrawerClose: () => {},
+});
+
+export default DataContext;