feat: integrate events detail page and events page together

[kr1shap]

Description

This pull request refactors the event listing and event detail pages to improve maintainability, enhance user experience, and support dynamic event data fetching. Key improvements include migrating event components to a new directory structure, introducing client-side data fetching for event details, and refactoring components for better type safety and reusability.

Event Detail Page Improvements:

• Refactored EventDetailPage (frontend/app/events/[id]/page.tsx) to fetch event data client-side from /api/events/:id using React hooks, improving scalability and error handling for missing or invalid events. Added loading and error states with user-friendly messaging and navigation. (frontend/app/events/[id]/page.tsxL1-R189, frontend/app/events/[id]/page.tsxL147-R198)
• Introduced the EventImage component to handle event poster images and graceful fallbacks, improving image handling and visual consistency.

Event Card and Section Refactoring:

• Moved EventCard and EventSection components to a new components/ directory and updated imports throughout for clarity and maintainability. [1] [2] [3]
• Refactored EventCard to use the Event type directly, compute date parts internally, and support clickable navigation to event detail pages. The registration button now opens the signup link in a new tab. [1] [2]
• Simplified EventSection to pass event objects directly to EventCard, reducing prop complexity and improving code readability. [1] [2]

Image Optimization and Configuration:

• Updated next.config.ts to allow Next.js to optimize images hosted on Supabase storage, enabling remote image loading for event posters.

Other Fixes and Improvements:

• Changed the authorization header in the admin login API route to use the correct environment variable (SUPABASE_ANON_KEY instead of NEXT_PUBLIC_SUPABASE_ANON_KEY).
• Updated imports and removed unused code to align with new component structure and type usage.

These changes collectively modernize the event-related pages, improve maintainability, and provide a more robust and user-friendly experience.

Type of Change

• Bug fix
• New feature
• Refactor / code improvement
• Documentation update
• Style / UI change
• Configuration change

Changes Made

Screenshots / Recordings

Testing

• Tested locally
• Verified on mobile / responsive views
• Added or updated tests

Checklist

• Code follows the project's style guidelines
• No new warnings or errors in the console
• Related documentation has been updated (if applicable)
• PR title follows conventional format (e.g., feat:, fix:, refactor:)

Related Issues

Additional Notes