Fix frontend timezone display issues

[jliu1016]

Ensure that ALL transit-related times throughout the application are displayed in the Transit Timezone (America/Toronto) with explicit timezone abbreviations (EST/EDT). This ensures that a user in Vancouver or London sees the correct "Toronto time" for their train, not their local time.

User Review Required

Important

This change will enforce "Toronto Time" display for all users, even those in different timezones. This is standard for checking transit schedules but may differ from a "calendar" view.

Proposed Changes

Frontend Dependencies

frontend/package.json

• Add date-fns-tz to dependencies to handle timezone conversions reliably.

Shared Configuration & Utilities

[NEW] frontend/lib/date-utils.ts

• Define TRANSIT_TIMEZONE = 'America/Toronto'.
• Export formatInTransitTime(date: Date, formatStr: string): string: A wrapper around toZonedTime and format that handles the conversion and appending of timezone abbreviations.

Frontend Components

frontend/app/itineraries/ItineraryCard.tsx

• Refactor to use formatInTransitTime.

frontend/components/trip/RoundTripForm.tsx

• Refactor formatTimeRange to use formatInTransitTime.

frontend/app/itineraries/page.tsx

• Refactor date headers to ensure they reflect "Transit Day" rather than "Local Day" (optional but recommended for consistency).

Verification Plan

Automated Tests

• Unit Test: Create frontend/lib/date-utils.test.ts to verify the utility logic isolated from React components.
  • Test Case: Input 2023-01-01T13:00:00Z (which is 8am EST).
  • Expectation: Output "8:00 AM EST".
  • Test Case: Input 2023-07-01T13:00:00Z (which is 9am EDT).
  • Expectation: Output "9:00 AM EDT".

Manual Verification

1. Run the dev server: npm run dev in frontend.
2. Open the itineraries page.
3. Change your system timezone to something else (e.g., London, UK).
4. Verify the times on the card do not change numbers (still matches the database schedule) and display "EST" or "EDT".