Issue 4: [Frontend] Auth Home: Hosting Manager - Active & Empty States

[OSEH-svg]

NOTE: This issue depends on Issue #283.

Task Description

Develop the "Hosting" toggle view for the authenticated dashboard, including both the list of organized events and the empty state view.

Implementation Details

• File Path: Modify apps/web/app/home/page.tsx
• Content:
  • Render events being organized by the user when hostedEvents is populated.
  • Implement the high-fidelity "Hosting Empty State" (illustrations + "Start Hosting" CTA) when the user has no hosted events.
• Strict Icon Policy: Use only locally hosted SVG icons from public/icons (e.g. megaphone.svg, edit.svg, user-group.svg). If a required icon is missing, you MUST download it as an SVG from the Figma file. No external icon libraries (e.g., Lucide, FontAwesome) are allowed.

Acceptance Criteria

• Changes implemented in: apps/web/app/home/page.tsx.
• Hosted events render correctly using the existing ticket-style components when the array is populated.
• When hostedEvents is empty, the designed Hosting Empty State UI is shown — not a blank space.
• Both filled and empty states match the Figma design exactly.
• Strictly zero imports from external icon libraries.
• PR includes a screenshot showing the change made.
• When opening your PR, ensure you link this issue so it is automatically closed on merge. In the PR description, include the line Closes #issue number

💡 Questions?

Reach out on Telegram: @divine_oseh
Note: Spam messages will be blocked

[Clement-coder]

@Clement-coder has applied to work on this issue as part of the Stellar Wave Program's 3rd wave.

Hi! I’d like to take this issue on.

I’m a frontend developer focused on building clean, scalable interfaces and translating designs into high-quality user experiences. I pay close attention to detail, especially when it comes to pixel-perfect implementation, responsiveness, and maintaining consistency across components.

For this task, I’ll:

• Implement the Hosting toggle view with proper conditional rendering
• Display organized events using the existing ticket-style components when hostedEvents is populated
• Build the high-fidelity empty state UI (including illustrations and CTA) exactly as in Figma
• Strictly use locally hosted SVG icons from public/icons and ensure no external icon libraries are imported
• Maintain clean structure within apps/web/app/home/page.tsx and align with existing patterns
• Ensure responsiveness and visual accuracy across different screen sizes

I’ll also include a proper screenshot in the PR and link the issue correctly for auto-closing.

Please assign this to me 🙌

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Clement-coder to this issue.

[drips-wave]

Congratulations, @Clement-coder! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on March 30, 2026.

🧑‍💻 @Clement-coder: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊