hack4impact-calpoly / ecologistics-shared-calendar Goto Github PK

Description
EVENTS created / added are stored in the backend on our MongoDB, they should entail flags for pending, approved and denied, as well as other parameters such as images (for now it doesn't need to work or be actually implemented but it should have this parameter), etc. like location. For ADMIN side, only admin page changes.

Acceptance Criteria
Event added is shown in MongoDB backend, and POST and GET queries work and are functional, images should work.

Steps:

• Edit events schema for new parameters
• Add event schema functionality for the backend, and make GET and POST requests on the edited "Add Event" front end.
• This should then allow a functional frontend to then connect with the event backend and store event data.

Additional Information
Once you have finished, request a review from tech leads.

As a result of the merge, we have a couple of small bugs to address on the front end, one of which is making sure that the "show" buttons for the password when logging in are consistent with the other pages. Right now, on the login page and the sign up page the show password buttons are not correct.

The correct implementation should look like this:

TODO: Please make the changes on the login page and the sign up page so that the "show" button is implemented within the textbox.

Another small issue is that the "new event" button on the calendar page defaults to look like this:

When it should look like this:

TODO: Please make the changes on the calendar page so that the "new event" button always has the desired padding ratio

Description
Code new Admin page, implement the layout shown below with the different sections and tables. Do not worry about the username dropdown in the top right. Also, as seen in second screenshot below, when an Admin tries deleting an event, just make a verification for their action pop up to confirm the deletion.

Acceptance Criteria
Admin page looks like the first screenshot, and is functional. Also, when an Admin clicks the trash icon to delete an event, a request for verification to delete the event pops up.

Steps:

• Navigate to current Admin page
• Edit current Admin page, add new functionality (ask Muzart or Hannah for inquires or more information / help)
• Add the new layout, separated Inbox, Active events, and Past events tables.
• Inbox should be the same as the current Inbox
• Active events table added, containing Approved, Postponed, and Declined events
• Past events table added showing information on past events (view Figma)
• New functionality should match the Figma
• Navigate to Admin page where the trash event button is located
• Edit functionality and add a pop-up which asks Admin if they're sure they want to delete the event
• If Admin pressed no, exit out of the pop-up, else if yes is pressed, delete the event
• Pop-up view should follow Figma design, see image above

Additional Information
Once you have finished, request a review from tech leads.

Description
Calendar, event bar and event details page all populated with EVENT backend data. All USER/organization side.

Acceptance Criteria
Event added is shown in MongoDB backend, and POST and GET queries work and are functional.

Steps:

• Edit events schema for new parameters
• Add event schema functionality for the backend, and make GET and POST requests on the edited "Add Event" front end.
• This should then allow a functional frontend to then connect with the event backend and store event data.

Additional Information
Once you have finished, request a review from tech leads.

PREREQUISITE
Login and Sign Up pages need to be completed before starting this

Description
Edit the current navbar, make it look nice (up to dev at this time, not on Figma currently). Incorporate the current Home About Calendar pages. Link it through all pages.

Acceptance Criteria
Working navbar

Steps:

• Run "git pull" and "npm i" on dev branch
• Create a new branch for this issue and check it out
  !! Make sure to commit to your branch as you go. You should NOT be working on the dev branch !!
• Please use inline styling for now
• Create a navbar and link it to the js files in pages.

Additional Information
Once you assign yourself to this issue change the status under "projects"
Once you are done and make a PR assign Hannah AND Muzart as your reviewers
for details on font, color, etc. please refer to the Figma design

Description
Research MongoDB for the Calendar website (for user info + event data)

Acceptance Criteria
Contact Muzart or Hannah to discuss the research performed with a documented plan of what to do / set up

Steps:

• Run "git pull" and "npm i" on dev branch
• Create a new branch for this issue and check it out
• !! Make sure to commit to your branch as you go. You should NOT be working on the dev branch !!
• Research online about MongoDB and how to use it in this scenario.
• Talk to Muzart and Hannah at a scheduled time or during the team meeting.

Important Information
Once you're done with this task talk to Muzart or Hannah, as after this you will create the MongoDB backend.

Additional Information
Once you assign yourself to this issue change the status under "projects"
Once you are done and make a PR assign Hannah AND Muzart as your reviewers
For details on font, color, etc. please refer to the Figma design

Description
Create a bare bones login page

Acceptance Criteria
Simple login page complete with routing from navbar

Steps:

• Run "git pull" and "npm i" on dev branch
• Create a new branch for this issue and check it out
  • !! Make sure to commit to your branch as you go. You should NOT be working on the dev branch !!
• Go to src -> pages and create a new js file titled "login.js"
• Create the front end for the page complete with text boxes and buttons, do not worry about connecting anything to backend yet (feel free to use other pages as a guide)
  • Please use inline styling for now
• Add the icons within the text box border (see if you can find here: https://mui.com/material-ui/material-icons/)
• go to src -> components -> layout.js and add a link to the login page on the navbar

Other notes:

• Once you assign yourself to this issue change the status under "projects"
• Once you are done and make a PR assign Hannah AND Muzart as your reviewers
• for details on font, color, etc. please refer to the Figma design (https://www.figma.com/file/4NJboGxoFPvhsco82SeuZl/Ecologistics-Calendar?type=design&node-id=71-571&mode=design&t=XEvfVXPUyLyyXfAf-0)

Description
An admin account can approve or deny incoming account requests.

Acceptance Criteria
Working admin account can approve or deny account requests, and it will allow a user to sign up and login after approval, or be notified of denial.

Additional Information
Request review from TLs when done.

Description
This is the page that shows up once you create an account and are waiting for it to be approved. There are two ways to reach this page:

1. After the "Create an account flow", once you click sign up
2. Anytime you try to log in with the email and password you created in create an account

Note: "Go to Calendar" button goes to the public calendar page in #82 , if this is not implemented yet just have it go to the regular calendar for now

Steps:

• Adjust the current pending approval page (confirmation-page.tsx) to match the Figma
• make it reachable in the two above scenarios

Request review from tech leads once finished

Description
Alter event details page styling and allow the page to be navigated to by clicking on an event. You do not need to populate the page or make it unique to the event.

Acceptance Criteria
Page matches figma and clicking on an event opens the event details page (does not need to be populated)

Steps:

• Navigate to src -> pages -> eventDetails.tsx
  • alter CSS to match the Figma design
• Navigate to src -> pages -> calendar.tsx
  • figure out how to have the event details page open when you click on an event in the calendar, you do not need to worry about populating the page

Description
Forgot password page that takes in username/email that will eventually send a request through number / email to reset a users password. Currently no design so freestyle! (Look at login / sign up pages for inspo).

Acceptance Criteria
Simple forgot password page complete with routing from navbar.

Steps:

• Run "git pull" and "npm i" on dev branch
• Create a new branch for this issue and check it out
  !! Make sure to commit to your branch as you go. You should NOT be working on the dev branch !!
• Go to src -> pages and create a new js file titled "signup.js"
• Create the front end for the page complete with text boxes and buttons, do not worry about connecting anything to backend yet (feel free to use other pages as a guide)
• Please use inline styling for now
• Go to src -> components -> layout.js and add a link to the forgot password page on the navbar (Link it to login / sign up pages after they're completed)

Additional Information
Once you assign yourself to this issue change the status under "projects"
Once you are done and make a PR assign Hannah AND Muzart as your reviewers
for details on font, color, etc. please refer to the Figma design

Description
Design and implement mobile viewing for the login, sign up, and forgot password pages.

Acceptance Criteria
Distinct desktop and mobile views. Mobile views work for all the views shown below:

Steps:

• utilize media queries to generate the mobile views (DO NOT try and make the code for the desktop view adaptable for mobile)
• utilize the "inspect element" feature to make sure that your views are adaptable for all the screen sizes, this may require the use of multiple media queries

Description
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Acceptance Criteria
A clear and concise description of what you want to happen.

Steps:

• step 1
• step 2

Additional Information
Add any other context or screenshots about the feature request here.

Description
Add an interactive table where the admin can approve incoming events.

Acceptance Criteria
Table matches the figma with the addition of a deny button (would be right next to approve).

Steps:

• Navigate to src and create a new folder titled "admin_components".
  • Within this folder create a file titled "requestTable.tsx"
  • import this component into src -> pages -> admin.tsx
• Move the existing code for the admin table to your new file, and alter it to match the figma. Center the table on the admin page.
• Although a deny button is not present in the design, I think it is a necessary feature to have. Make sure you add a button to deny events.

Once you have finished, request a review from tech leads.

Description
Design and implement a mobile view for the calendar page

Acceptance Criteria
Calendar page is easy to navigate on the below mobile screens

Steps:

• utilize media queries to generate the mobile views (DO NOT try and make the code for the desktop view adaptable for mobile)
• utilize the "inspect element" feature to make sure that your views are adaptable for all the screen sizes, this may require the use of multiple media queries
• I recommend you stack the calendar on top of the event/search bar, with logout, admin buttons on very top. the add event button can go right below the calendar and above the search bar.
• I would also rearrange the contents of the event bar depending on the screen size (maybe have the image sit on top of the text instead of it being right beside it)

Description
PREREQ #75
Completion of USER and ADMIN profile page needed. Basically implement the change email as show in SS.

Acceptance Criteria
Linked to backend, and information changes. Looks like screenshot (SS) below.

This pop up would only show up if the email submitted into the field is different than the email associated with the account.

Steps:

• Open profile page for USER and ADMIN, both should be the same in this case.
• Implement the module to confirm the email change, and make the necessary changes in the backend

Additional Information
Once you have finished, request a review from tech leads.

Description
As per the request of our charity representative, we need to add a couple of more fields in the apply for account page. In this issue you will implement these changes as well as implement how this should be reflected in the design of the account approval page.

New apply for account page:

Current Account approval page (admin) :

^ For the above page, our charity wants the following information to be included:

• Status (pending, approved, denied)
• organization name
• first and last name of the person making the request
• position of the person making the request
• organization email
• organization phone number

You must first alter the design of the page to include this information and then send to hannah for approval

Description
Simple events page

Acceptance Criteria
Page matches Figma design

Steps:

• Run "git pull" and "npm i" on dev branch
• Create a new branch for this issue and check it out
  • !! Make sure to commit to your branch as you go. You should NOT be working on the dev branch !!
• Go to src -> pages and create a new js file titled "addEvent.js"
• Create the front end for the page complete with text boxes and buttons, do not worry about connecting anything to backend yet (feel free to use other pages as a guide)
  - research how to have a dropbox for images and implement that feature (would likely need a backend, so if you need access to a database please check with tech leads)
  - Also: please use inline styling for now
• go to src -> components -> layout.js and add a link to the page on the navbar

Additional Information

• Once you assign yourself to this issue change the status under "projects"
• Once you are done and make a PR assign Hannah AND Muzart as your reviewers
• For details on font, color, etc. please refer to the Figma design (https://www.figma.com/file/4NJboGxoFPvhsco82SeuZl/Ecologistics-Calendar?type=design&node-id=71-571&mode=design&t=ZwhPW9aF8lHJ1OA3-0)

Description
Add a map to the event details which shows the location corresponding to a given event. If possible, add functionality so that the user can click on the map to receive directions.

Acceptance Criteria
Working map in event details page, connected to backend locations

Map should be located at the location circled:

Description
Barebones apply for an account page.

Acceptance Criteria
Simple apply/sign up page complete with routing from navbar

Steps:

• Run "git pull" and "npm i" on dev branch
• Create a new branch for this issue and check it out
  !! Make sure to commit to your branch as you go. You should NOT be working on the dev branch !!
• Go to src -> pages and create a new js file titled "signup.js"
• Create the front end for the page complete with text boxes and buttons, do not worry about connecting anything to backend yet (feel free to use other pages as a guide)
  - Please use inline styling for now
• Go to src -> components -> layout.js and add a link to the sign up page on the navbar

Additional Information

• Once you assign yourself to this issue change the status under "projects"
• Once you are done and make a PR assign Hannah AND Muzart as your reviewers
• For details on font, color, etc. please refer to the Figma design (https://www.figma.com/file/4NJboGxoFPvhsco82SeuZl/Ecologistics-Calendar?type=design&node-id=71-571&mode=design&t=XEvfVXPUyLyyXfAf-0)

Description
Add a calendar component using full calendar

Description
Match the frontend of the calendar page to match the figma. Fix the proportions of the event bar, calendar, and the search bar. Add a button for logging out.

Acceptance Criteria
Page matches Figma

Steps:

• Navigate to src -> pages -> calendar.tsx

• add a logout button, as shown on Figma

• make the calendar take up half of the page (may have to adjust the sizing of the event bar to do so)

• Navigate to src -> pages -> eventBar.tsx

• match border colors to the figma

• make the event cards smaller to match proportions on figma

• add the icons next to "event tag", "location", and "website URL"

• expand the width of the search bar to match figma

Description
Research how we can implement email/text notifications for admin when someone submits and event.
Notification would be something along the lines of "Event request from [organization] requires your approval" and would also include an easy link to the admin portal.

Acceptance Criteria
a google doc outlining tools and steps of how this can be done

Additional Information
Submit your google doc link as a comment on this issue

Description
Add a dropdown, should be at the top of every page, USER and ADMIN have different drop downs, pull UIDs for each to get the different drop downs. USER seeing its respective drop down, and ADMIN seeing its respective drop down. Make this a Navbar, review figma, add the orange logo home button to return to calendar page.

Acceptance Criteria
Drop down is functional, and looks the same as the screenshots. Navbar implemented with home button.

Steps:

• Create drop down component in components folder
• Style and code the drop down to be functional, you want to pull UID for USER and ADMIN from backend to check and see what view they can see
• Do the same with the home button, make it a nav bar component.
• Add this component to its respective location on every page in FIGMA.

Additional Information
Once you have finished, request a review from tech leads.

Description
Admin view page showing account requests

Acceptance Criteria
Requests for new accounts appear on an admin page (view Figma for design)

Steps:

• Run "git pull" and "npm i" on dev branch
• Create a new branch for this issue and check it out
• !! Make sure to commit to your branch as you go. You should NOT be working on the dev branch !!
• go to src -> pages and create a new js page titled admin.js
  • When a user requests to make an account, the request should pop up on this page and the Admin, who logs in with special access, can view this page and either accept, or decline the account. We do not have a Figma for this yet, but create a generic/simple layout for each of these features that we can alter when we do get the design

Additional Information

• Once you assign yourself to this issue change the status under "projects"
• Once you are done and make a PR assign Hannah AND Muzart as your reviewers

Description
Add functionality to the search bar so that it searches through events for a given day and only shows events with certain keywords in the title

Acceptance Criteria
search bar is functional

Steps:

• research how you can search through all the event titles for keywords
• would recommend breaking the search bar into a component and implementing all the code on a new file so that you are not overloading the event bar file
• eventually we would want the search bar to search through the entire database of events and pull up events of interest, make sure your code can accommodate for that

Description
Look at Figma and match color and font for the css of the entire website

Acceptance Criteria
Colors and fonts match

Steps:

• Run "git pull" and "npm i" on dev branch
• Create a new branch for this issue and check it out
• !! Make sure to commit to your branch as you go. You should NOT be working on the dev branch !!
• Edit the global css file add to it and match it with the Figma
• Go to Figma, click top left, go to Design System/Components
• If you click on the colors and the fonts you should be able to get more information and the HTML color codes

Additional Information
Once you assign yourself to this issue change the status under "projects"
Once you are done and make a PR assign Hannah AND Muzart as your reviewers
For details on font, color, etc. please refer to the Figma design

Description
Research how to implement adding check boxes on the calendar (ability to click on certain days and select it and see the events of that day pop up on the event bar)

Acceptance Criteria
Research and possible future implementation for whoever picks this task up. Talk to Muzart or Hannah about how to do this if possible.

Steps:

• Research more about the ability to add check boxes on the calendar
• Make a Google Doc with all the information you found
• Present / talk about what you researched with Muzart and Hannah at a meeting or over Zoom.

Additional Information
Once you assign yourself to this issue change the status under "projects"
Once you are done and make a PR assign Hannah AND Muzart as your reviewers

Description
In this issue you will create a default calendar landing page that can be embedded directly into the ecologistics web page. This will now be the default page when you launch the app. It should look like this (note the difference in the dropdown menu in the top right compared to the pages once you log in):

Basically, if the user is an organization, they should click the login drop and by clicking the login, it should open a new tab to the "login to your account" page and the organization should be able to login or make an account from there.

What the login drop down looks like:

Acceptance Criteria

• landing page looks like figma and is the default page when you run the app
• by clicking "login" from the drop down it will take you to a new tab where you can log in
• do some research on the feasibility/process of embedding the landing page into another website (should this be a separate deployment?)

Make a PR and assign your tech leads as reviewers once you have finished.

Description
"Add Event" button functions like clicking on the Calendar (which we have been using up until now). The "Add Event" button is found at the bottom of the adding event pop up which is currently implemented.

Acceptance Criteria
"Add Event" button is functional.

Steps:

• Navigate to the "Add Event" button code
• Add functionality like how when we click on the Calendar, an event is added
• Make it so when the event is added, a pop-up shows up see example above
• Make sure the event that pops up on the Calendar has a clear starting and ending time (inquire with Muzart or Hannah for more information if you're confused about this)

Additional Information
Once you have finished, request a review from tech leads.

Populate all the fields in the profile page from backend.

Fields that need to be added:

• First name
• Last name
• Representative Position
• Organization Phone number

Also make sure that the editing page actually adjusts the backend. Also make sure that the different tags (user/ admin tags at top) are displayed depending on the type of user.

IMPORTANT: have some kind of buffer or "loading..." text so that while we are waiting to get from the backend there isn't just a blank.

Description
Forgot password page asks for users email, sends an email when inputted with instructions on how to reset password

Acceptance Criteria
Email arrives (can be blank for now)

Steps:

Run "git pull" and "npm i" on dev branch
Create a new branch for this issue and check it out
!! Make sure to commit to your branch as you go. You should NOT be working on the dev branch !!
On the forgot password page, prompt user to enter email or username linked with email, which will send a blank email to the email inputted.
Research how to send emails if you don't know how or message Muzart or Hannah if you're having trouble.

Additional Information

Once you assign yourself to this issue change the status under "projects"
Once you are done and make a PR assign Hannah AND Muzart as your reviewers
For details on font, color, etc. please refer to the Figma design

EDIT: look into Clerk as well, weigh pros and cons.

Description
In this task you will be figuring out how to integrate AuthN for our log-in and sign-up pages. Consider:

• How to set up NextAuth.js in our Next.js frontend
• Steps to integrate it with our log-in and sign-up pages
• How we can have a unique log in for our admin that will take them to a specialized admin view

Helpful link: NextAuth.js

For your research, write up a google doc that we can use as reference for our implementation. Include code snipets, screenshots, etc. To submit, link the document in the comments and request a review from the tech leads.

PREREQ: #78 -> if this is not done yet, just build the page and connect what you can

Use existing components to create the organization events page as shown in the Figma:

DONT ADD POSTPONED EVENTS FOR NOW

Connect all the fields to the backend:

• when a user makes a request for an event from the calendar it shows up in the "pending", once the event is approved or denied it moves to the correct tables
• when user deletes an event it actually removes from the database (or at least from the calendar and event bar)
• if an event time is in the past, it is in the past events table
• also add a place for notes in declined events -> think about how we might want to store this in the backend

Steps:

• Run "git pull" and "npm i" on dev branch
• Create a new branch for this issue and check it out
  - !! Make sure to commit to your branch as you go. You should NOT be working on the dev branch !!
• Go to src -> pages -> calendar.js and alter the front end to match the Figma design
• You can read CSS documentation from full calendar here: https://fullcalendar.io/docs/css-customization
• DO NOT ADD "Add event" button (added in #22 )

Additional Information

• Once you assign yourself to this issue change the status under "projects"
• Once you are done and make a PR assign Hannah AND Muzart as your reviewers

Implement functionality throughout the app to keep track if the information being entered by the user is attached to a valid account.

This can be as simple as having some red text that would pop up under the text box that says something "Incorrect code. Try again." or "Invalid email or password."

Functionality should be added on the following pages for their respective cases:

log in page cases

1. User puts in an email that is not in our records
2. User puts in an email that is in our records but the wrong password
   Note: in both of these cases we would have a combined message: "Your email or your password is invalid"

Profile page editing cases -> also in the code verification page for login/signup flow

1. User puts in the wrong verification code
   Note: "Invalid code"

Apply for account page cases

1. User puts in an email that already is being used. Note would be: "This email is already in use, please use a different email"

Things to consider:

• if someone puts an incorrect code when verifying their email will they have to go back and get a new code? -> this might impact the statement you have pop up

Description
Create GET, POST, and DELETE endpoints for the user.

Acceptance Criteria
Create working GET POST DELETE endpoints for the user

Steps:

• Go to database, then you will see userSchema.ts
• Create userRoutes.ts file to code in.
• Define routes for /users and /admins to handle CRUD operations for users and admins, respectively.
• For each endpoint, implement the necessary logic using Mongoose models to interact with MongoDB.
• GET endpoints retrieve all documents from the corresponding collection.
• POST endpoints create new documents based on the request body.
• DELETE endpoints delete documents by their ID.

Additional Information
Once you have finished, request a review from tech leads.

Description
As of right now, the sign up page and login page do not exactly match (different font sizing, button sizing, etc). This task will make the styling for the pages the same as each other, and ensure that everything matches the Figma perfectly.

Acceptance Criteria
Both pages match the Figma and do not have variance in their styling (would recommend making a component)

Steps:

• Navigate to src -> pages -> login.tsx OR signup.tsx
• alter the code as necessary to meet the above criteria
• get rid of the borders on both pages so that they closely match figma, I would recommend making the items on the page a little larger so that they take up more of the screen

PREREQ: #9
Description
The current add event page converted to a pop up on the main Calendar page when the "Add Event" button is clicked.

Example Image

Acceptance Criteria
Event pops up when you click add event on the calendar page and you can type on it (don't link it to calendar yet)

Steps:

Run "git pull" and "npm i" on dev branch
Create a new branch for this issue and check it out
!! Make sure to commit to your branch as you go. You should NOT be working on the dev branch !!

• Match the figma design, and make an "Add Event button"
• Once you click on the button the event form pops up next to the calendar

Additional Information

• Once you assign yourself to this issue change the status under "projects"
• Once you are done and make a PR assign Hannah AND Muzart as your reviewers

PREREQ: #7

Description
Alter the styling of the create account page to match the figma design

Acceptance Criteria
Create account page with new styles applied

Steps:

• Run "git pull" and "npm i" on dev branch
• Create a new branch for this issue and check it out
  • !! Make sure to commit to your branch as you go. You should NOT be working on the dev branch !!
• Go to src -> pages -> signup.js
• Alter the styling of the page to match the Figma design, please refer to the about.js page for examples of how to use the headers and colors from the global css file (you do not need to import it in the page because it is already imported in _app.js)

Other notes:

• Once you assign yourself to this issue change the status under "projects"
• Once you are done and make a PR assign Hannah AND Muzart as your reviewers

PREREQ: #5

Description
Alter the styling of the login page to match the figma design

Acceptance Criteria
Simple login page complete with routing from navbar

Steps:

• Run "git pull" and "npm i" on dev branch
• Create a new branch for this issue and check it out
  • !! Make sure to commit to your branch as you go. You should NOT be working on the dev branch !!
• Go to src -> pages -> login.js
• Alter the styling of the page to match the Figma design, please refer to the about.js page for examples of how to use the headers and colors from the global css file (you do not need to import it in the page because it is already imported in _app.js)

Other notes:

• Once you assign yourself to this issue change the status under "projects"
• Once you are done and make a PR assign Hannah AND Muzart as your reviewers

Description
This page is what will pop up when you click on each event on the calendar to see more details

Acceptance Criteria
Design matches the figma exactly

Steps

• Run "git pull" and "npm i" on dev branch
• Create a new branch for this issue and check it out
  • !! Make sure to commit to your branch as you go. You should NOT be working on the dev branch !!
• Go to src -> pages and create a new js file titled "eventDetails.js"
• Create the front end for the page complete with text boxes and buttons, do not worry about connecting anything to backend yet (feel free to use other pages as a guide)
  • Please use inline styling for now
• go to src -> components -> layout.js and add a link to your newly created page on the navbar

Other notes:

• Once you assign yourself to this issue change the status under "projects"
• Once you are done and make a PR assign Hannah AND Muzart as your reviewers
• For details on font, color, etc. please refer to the Figma design (https://www.figma.com/file/4NJboGxoFPvhsco82SeuZl/Ecologistics-Calendar?type=design&node-id=71-571&mode=design&t=ZwhPW9aF8lHJ1OA3-0)

PREREQ: #78
Populate backend on admin events page

• when a user makes a request it shows up in the admin portal and the admin can approve or deny it
• the event will be placed in its according table on the page

DO NOT WORRY ABOUT POSTPONED EVENTS FOR NOW -> comment out any code for that if it exists

make sure that the text for denying an event is taken care of as well so it can display on the organization side:

Description
Add a profile page for ADMIN and USER

Acceptance Criteria
Profile page exists and is linked to the drop down (it's ok if the drop down isn't made yet, it doesn't need to link in that case). ADMIN and USER profile pages should display USER or ADMIN on the side as shown in the screenshot.

Steps:

• Go to pages folder and add profile page
• Style and code the profile page to be functional, you want to pull UID for USER and ADMIN from backend to check and see what view they can see
• You want to pull information from the USER and ADMIN to then allow each to edit, this is a long issue, so take your time and ask questions if you're stuck!
• Test the pages and make sure the change data works

Additional Information
Once you have finished, request a review from tech leads.

Description
Alter the styling of the forgot password page

Acceptance Criteria
Forgot password page looks like figma

Steps:

• Navigate to src -> pages -> forgot_password.tsx
• alter CSS to match the figma design

Description
Add event bar to the right of the calendar

Acceptance Criteria
Event bar looks exactly like the figma

Steps:

• Run "git pull" and "npm i" on dev branch
• Create a new branch for this issue and check it out
  • !! Make sure to commit to your branch as you go. You should NOT be working on the dev branch !!
• Go to src -> pages and create a new js file titled "eventBar.js"
• import the eventBar into the "calendar.js" page and use a flexbox so that it shows up to the right of the calendar
• Create the front end for bar, exactly as is on the figma, do not worry about connecting it to the calendar yet
  • Please use inline styling for now

Other notes:

• Once you assign yourself to this issue change the status under "projects"
• Once you are done and make a PR assign Hannah AND Muzart as your reviewers
• For details on font, color, etc. please refer to the Figma design (https://www.figma.com/file/4NJboGxoFPvhsco82SeuZl/Ecologistics-Calendar?type=design&node-id=71-571&mode=design&t=ZwhPW9aF8lHJ1OA3-0)

Description
Figure out how to add events to the calendar

Acceptance Criteria
Add an event within the date boxes on the calendar page

Steps:

• Run "git pull" and "npm i" on dev branch
• Create a new branch for this issue and check it out
  • !! Make sure to commit to your branch as you go. You should NOT be working on the dev branch !!
• Research the Full Calendar documentation about adding an event to the calendar and see if you can make one, using the Figma design as a guide (a calendar event refers to the black/purple dots on the design)
• Look into adding event pop ups (a new page pop up after you click on an event)

Other notes:

• Once you assign yourself to this issue change the status under "projects"
• Once you are done and make a PR assign Hannah AND Muzart as your reviewers
• For details on font, color, etc. please refer to the Figma design

Description
Implement user authentication using Clerk

Acceptance Criteria
Authenticate users logging into the calendar portal

• create an authentication system for charities and the admin
• apply for account page creates a valid account
• add special permissions for admin (special admin login)
• connect to front end
• implement/research changing password on forgot password

Description
Create GET, POST, and DELETE endpoints for the events.

Acceptance Criteria
Create working GET POST DELETE endpoints for the events

Steps:

• Go to database, then you will see eventSchema.ts
• Create eventRoutes.ts file to code in.
• Define routes for /users and /admins to handle CRUD operations for users and admins, respectively.
• For each endpoint, implement the necessary logic using Mongoose models to interact with MongoDB.
• GET endpoints retrieve all documents from the corresponding collection.
• POST endpoints create new documents based on the request body.
• DELETE endpoints delete documents by their ID.

Additional Information
Once you have finished, request a review from tech leads.