Add event check in to Welcome landing page

[bconti123]

Fixes #2106

What changes did you make and why did you make them ?

• Added the event check-in feature to the Welcome landing page.
• Updated the check-in styles to closely match the Figma design.
• Refactored the code to improve readability and maintainability.

Notes:

• The "Manually Edit Events Check In" list is not populating yet. For now, you can update MongoDB directly by setting checkInReady: true on the event document.
• Check the event query and ensure checkInReady is true.

Screenshots of Proposed Changes Of The Website (if any, please do not screen shot code changes)

Visuals before changes are applied

Visuals after changes are applied

[Copilot]

Pull request overview

Adds an event check-in section to the logged-in Welcome landing page, including fetching checkInReady events and posting check-ins, with styling aligned to the existing check-in UI.

Changes:

• Fetches checkInReady=true events on the Welcome page and displays a meeting selector.
• Adds a CHECK IN action that POSTs to /api/checkins and renders a success state.
• Introduces new local styling constants for the check-in section and empty-state messaging.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[bconti123]

Thanks! I’ve started addressing the feedback.

[bconti123]

Updated based on your feedback. Let me know if I missed anything.

[trillium]

🤖 ## CodeRabbit Review — 2 findings

1. Missing response status check (UserWelcome.jsx ~lines 97-108)

The fetch('/api/events?checkInReady=true') call doesn't check res.ok before parsing JSON. If the API returns a 4xx/5xx error, the error response body gets parsed and set into events state, which could cause rendering issues.

Suggested fix:

const res = await fetch('/api/events?checkInReady=true', {
  headers: {
    'x-customrequired-header': headerToSend,
  },
});

if (!res.ok) {
  throw new Error(`Failed to fetch events: ${res.statusText}`);
}

const resJson = await res.json();
setEvents(resJson);

2. Potential runtime error on undefined event (UserWelcome.jsx ~lines 143-145)

events.find((e) => e._id === selectedEventId) may return undefined in edge cases (stale data, race condition), which would cause getEventLabel(undefined) to throw.

Suggested fix:

{(() => {
  const event = events.find((e) => e._id === selectedEventId);
  return event ? getEventLabel(event) : 'Unknown event';
})()}

---

Review generated with CodeRabbit CLI 🤖

[trillium]

🤖 ### Additional context on the res.ok check (Finding #1)

This one is more than a nitpick — fetch() doesn't reject on HTTP errors (4xx/5xx), it only rejects on network failures. So without the res.ok guard, if the API returns a 500, the error response body gets parsed as JSON, stored in events state, and the component tries to call .length or .map() on it — which would crash the UI.

The existing catch block won't help because nothing actually threw.

Worth noting: you already handle this correctly in handleCheckIn (line ~79: if (!checkInRes.ok)) — just need the same pattern on the fetchEvents call. 🤖