[ASAP-1598] - new dashboard events component

[AkosuaA]

ref: https://asaphub.atlassian.net/browse/ASAP-1598

Summary

• Replace the CRN dashboard's separate "Upcoming Events" and "Past Events" sections with a single combined DashboardEventsCard (tabbed Upcoming/Past). Old UpcomingEventsSection/PastEventsSection and their tests are removed.

• Extend EventInfo with optional titlePrefix/titleSuffix/titleAction/footer slots and alwaysShowDateBlock flag, so it can be reused on the dashboard, event list and event detail page.

• Updated EventTime's multi-day display. Previously, when an event spanned multiple days, it looked like this

After discussing with Elena, the designs have been updated, see below

Basically the logic for the displaying the event dates is:

• Single day: Display the date and time rows

• Multi-day date ranges: The time row is not displayed. End date is always in full:
  Same month & year: start date shows just weekday + day, eg: "Friday 10 - Saturday 11 September 2026"
  Same year, different months: start date adds the month, eg: "Sunday 31 August - Tuesday 1 September 2026"
  Different years: start shows the full date, eg: "Thursday 31 December 2026 - Friday 1 January 2027"

• Updated useDateHasPassed to accept an enabled flag that skips its useInterval timer when false. This was added as past events don't need to run this check

I tried to match the designs as closely as possible. For the colours, I used similar colours where we didn’t already have an equivalent in our colour palette (Elena mentioned it was fine to use colours that were as close as possible).
Since Amin is working on updating our colour palette to follow the CAS Design System colours, I thought that if those changes are merged before this PR, I could update this PR accordingly, or follow up with a separate PR to make the colour updates.

Update: Below is a screenshot of the variations agreed on with Elena on how do display the date ranges and time.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

[diegonvs]

Hey, multiDay compares the start and end day in the browser's timezone, so any event that crosses the viewer's midnight goes into the multi-day branch and loses its time row. A 2-hour meeting shows as "2 days" with no time.

Tokyo:

I believe the day count and date range should be based on the event's own timezone, which EventTime already receives.

Maybe something like this?

const multiDay = formatDateToTimezone(startDate, 'yyyy-MM-dd', startDateTimeZone) !== formatDateToTimezone(endDate, 'yyyy-MM-dd', endDateTimeZone);

if (multiDay) {
	const dayCount = getMultiDayCount(startDate, endDate, startDateTimeZone);
	const dateRange = getMultiDayDateRange(startDate, endDate, startDateTimeZone);

[AkosuaA]

Thanks for raising. I discussed with Elena and we agreed to base the count on the actual duration of the event since that will be consistent across timezones. I've attached a screenshot of design variations (to the pr description) for how we should display the day count pill, the date range and time. Basically, the day count pill only shows up for events 24 hours and up and is rounded up to the nearest day. When an event spans multiple days we add a shortened version of the day to the time to make it clearer for the user.