Anh/ami 34 filter watering sessions

[anhvo2712]

👍 What's new in this PR

Description

Description:

• Added a filtering for watering sessions that allow users to switch between viewing Upcoming and Past sessions
• Added a ToggleContainer, UpcomingButton, PastButton on styles.ts
• Added a filterState constant that will update based on whether the user is currently on "Upcoming" or "Past"
• Created a filteredSessions constant that filters for only the "upcoming" or "past" sessions based on what the filterState is
• Updated date format to MM/DD/YYYY (e.g., "05/13/2026") for SessionCard
• Updated the positioning, font, and color of the central hub, session name, and date information of the SessionCard
• Added profile icon in top-right corner with circular border
• Converted Add and Edit buttons to circular icon buttons and restyled

Screenshots

👍 How to review

Ideally review all at once, specific feedback on spacing in comparison to Figma would be super helpful
Session filtering functionality (app/sessions/page.tsx):
Click between "Upcoming" and "Past" buttons
Verify sessions filter correctly based on date
SessionCard component (components/SessionCard/):
Verify delete button appears on same line as date
Check date format is MM/DD/YYYY
Verify layout matches Figma
Banner (components/Banner/):
Check profile icon appears in top-right corner
Add/Edit buttons (app/sessions/page.tsx):
Verify buttons appear only for admin users

👍 Next steps

Add functionality for the Add/Edit/Delete button

👍 Relevant links

Online sources

https://styled-components.com/docs/api#transient-props

Related PRs

CC: @bhavitaap

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
amigos-de-los-rios	Ready	Preview, Comment	Mar 3, 2026 0:08am