[UI/UX] Build "Empty States" and "First-Time User Experience" (FTUE)

[Queenode]

🟡 Priority: High
Difficulty: Medium
Estimated Effort: 2-3 days
Relevant Files: src/components/common/EmptyState.tsx, src/app/(dashboard)/dashboard/page.tsx
Labels: enhancement, priority:high, ui

Requirements

1. Empty State Illustrations

   • When a user has 0 active groups or 0 transactions, do not show an empty table. Render high-fidelity Empty State components (often utilizing custom illustrations from the Figma).
   • Provide a clear Call to Action (CTA) like "Create your first Savings Group" or "Explore Public Groups".

2. Onboarding Modals

   • Implement a welcoming FTUE modal explaining the 3 key steps to using Kolo (Fund Wallet, Join Group, Get Payout).

---

[OluRemiFour]

Hi Maintainer,
Interested in working on this issue. I'll implement the requested changes and ensure everything is properly tested before submission.

[Truphile]

Hi team, I’d love to take this on!

I am a software engineer with strong experience designing modular user interfaces, building welcoming First-Time User Experiences (FTUE), and implementing highly scannable dashboard views. I understand how critical clear user direction is during a cold start, and I'm ready to upgrade these empty states and onboard new users smoothly.

I will deliver:

High-Fidelity Empty States: Refactor EmptyState.tsx to display clean, responsive layouts featuring custom illustrations when a user has zero active groups or transactions. I'll equip these states with clear, context-driven Call to Action (CTA) triggers to eliminate dead ends on the dashboard.

Welcoming Onboarding Flow: Build an interactive FTUE onboarding modal that cleanly guides users through Kolo's three foundational phases (Fund Wallet, Join Group, and Get Payout) to maximize initial activation.

Clean State Transitions: Integrate these components directly into the main dashboard pipeline (src/app/(dashboard)/dashboard/page.tsx), ensuring a seamless handoff between empty onboarding states and active transaction tables as soon as a user engages.

Ready for assignment to drop a clean, low-overhead PR immediately!