Shift details

[kylemfan]

Developer: Kyle Fan, Ashley Navos

Closes #42

Pull Request Summary

Display all the shifts visible to user based on the day.

NOTE: Although the branch is called shift-details, the way the routing works is through the route "/day-details/[dayId]". We took the liberty of doing this change because it made more sense (since we're doing a lookup of shifts to be displayed based on the dayId).

Modifications

Files Modified:

• src/components/Dashboard.tsx
  • Converted navbar into a reusable component
• src/styles/Dashboard.module.css
  • Removed navbar styling to move to navbar component's CSS file

Files Created:

• src/components/GreyNavbar.tsx
  • Reused navbar component (originally from volunteer dashboard)
• src/styles/Navbar.module.css
  • Navbar styles
• src/app/day-details/[dayId]/page.tsx
  • The main page
  • Dynamic routing to display the available shifts based on the given dayId
• src/components/shift-details/ShiftDetails.tsx
  • The ShiftDetails component that displays all of the information
• src/styles/ShiftDetails.module.css
  • Styling
• src/app/api/signup/route.ts
  • Added safety for preventing duplicate signups of shifts
• src/database/models/Shift.ts
  • Added optional locationInfo and byoDescription (represents "Bring Your Own" items) fields to be more compliant with this issue's page (the fields underneath the map in the dropdown of a shift)

Testing Considerations

• Tested that data retrieved from the database is accurate along with signing up and canceling the sign-up (cancelled through the volunteer-dashboard page).
• Trying to register to a shift that the user has already been signed up for correctly triggers the error banner to appear above the navbar.
• Would like to add more to the Shift.ts schema to include information about the volunteer coordinator and the day/program description (to be shown above the Available Shifts section), but for now this version is functional.
• To do your own testing for this page or the Volunteer Dashboard, enter this in the DevTools console to login to a mock user:

fetch("/api/auth/sign-in/email", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ email: "john.mustang.test@example.com", password: "Password123!", }), }).then(() => location.reload());

(Or you can do this with any other mock user that you have the credentials for)

Pull Request Checklist

• Code is neat, readable, and works
• Comments are appropriate
• The commit messages follows our guidelines
• The developer name is specified
• The summary is completed
• Assign reviewers

Screenshots/Screencast

Screen.Recording.2026-05-14.at.8.01.01.AM.mov

Screen.Recording.2026-05-14.at.8.31.28.AM.mov

[gitguardian]

️✅ There are no secrets present in this pull request anymore.

If these secrets were true positive and are still valid, we highly recommend you to revoke them.
While these secrets were previously flagged, we no longer have a reference to the
specific commits where they were detected. Once a secret has been leaked into a git
repository, you should consider it compromised, even if it was deleted immediately.
Find here more information about risks.

---

^{_{🦉 GitGuardian detects secrets in your source code to help developers and security teams secure the modern development process. You are seeing this because you or someone else with access to this repository has authorized GitGuardian to scan your pull request.}}