Feat: Implement multi-day calendar header and fix date visibility

[Aaratrika-Shelly]

This PR resolves the issue regarding the calendar date visibility. After investigation, it was determined that the multi-day header needed to be implemented as a new feature.

Changes Made

• Implemented Multi-Day Header: The calendar now displays a header for each visible day, perfectly aligned with its corresponding column in the grid.
• Fixed Visibility Bug: The text for all dates is now correctly styled with dark mode variants, ensuring they are visible in both light and dark themes.
• Improved UI Structure: Refactored the component's JSX to logically separate the date header from the top navigation, resulting in a cleaner and more maintainable layout.

This PR is based on the test-dash branch as requested and delivers the feature shown in the issue's screenshot.

Final Result

Closes #31

[vercel]

@Aaratrika-Shelly is attempting to deploy a commit to the priyanshushekhar10's projects Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
refocus	Ready	Preview	Comment	Oct 25, 2025 0:32am

[PriyanshuShekhar10]

@Aaratrika-Shelly This is alright but can you make the date fixed at the top so even when the user scrolls, it shows the date?

also pls rebase your branch

[Aaratrika-Shelly]

@PriyanshuShekhar10
Done! I've rebased the branch and implemented the sticky header as you requested. It should be ready for a final review. Thanks!

[kanishk6103]

@PriyanshuShekhar10 Done! I've rebased the branch and implemented the sticky header as you requested. It should be ready for a final review. Thanks!

There is an offset visible here, the preview box seems to be misplaced with respect to the cursor, can you fix that? @Aaratrika-Shelly

[Aaratrika-Shelly]

Hi @kanishk6103 and @PriyanshuShekhar10,
Just wanted to gently follow up on this PR. I've completed all the requested changes (sticky header and hover offset fix), and the branch has been rebased.
With the Hacktoberfest deadline getting closer, I would be very grateful if you could take a moment for a final review when you have a chance.
Please let me know if there's anything else you need from my end. Thank you again for your guidance on this feature!"

[kanishk6103]

Hi @kanishk6103 and @PriyanshuShekhar10, Just wanted to gently follow up on this PR. I've completed all the requested changes (sticky header and hover offset fix), and the branch has been rebased. With the Hacktoberfest deadline getting closer, I would be very grateful if you could take a moment for a final review when you have a chance. Please let me know if there's anything else you need from my end. Thank you again for your guidance on this feature!"

Hey we checked the deployment, please test it properly, session booking does not work as it should, the booking time and booked time is inconsistent which shouldn't be the case. Also there seems to be no reason to add mongoose, is there any particular reason you have added it?

[Aaratrika-Shelly]

"Hi @kanishk6103 @PriyanshuShekhar10 ,
I've pushed the final updates. I have addressed all the feedback:
The branch has been cleaned and rebased.
The multi-day header is implemented and is sticky.
I've adjusted the coordinate calculations, which fixes both the hover preview offset and the booking time inconsistency.
The feature should now be pixel-perfect and fully functional. Ready for a final review. Thanks for your guidance!"

[Aaratrika-Shelly]

hi @PriyanshuShekhar10 @kanishk6103 .
are there any changes required before the final merge?