BUG: Improve Dashboard UX with proper Empty States #246
Description
Is there an existing issue for this?
- I have searched the existing issues
What happened?
📌 Issue Overview
Currently, the user dashboard displays blank whitespace, dashed borders, or flat-line charts when no data is available (e.g., for a new user). This creates a "broken" or unfinished appearance and fails to guide the user on how to populate these sections.
This issue proposes adding dedicated "Empty State" components with illustrations and call-to-action buttons to improve the user onboarding experience.
🔍 Steps to Reproduce
- Log in to the application with a new account (or an account with zero data).
- Navigate to the main Dashboard.
- Observe the "Deliverable Status" and "Campaign Status" cards.
- Observe the "Platform Distribution" section.
- Observe the "Earnings" and "Engagement" trend charts.
🎯 Expected Behavior
When data is missing, the dashboard should display a friendly, context-aware illustration (e.g., a wallet for earnings), show a clear message explaining why the data is missing, provide a "Call to Action" button (e.g., "Create Campaign") to guide the user to the next step.
🚨 Actual Behavior
Deliverable/Campaign Cards: Show empty white space.
Platform Distribution: Shows a placeholder dashed border.
Trend Charts: Render a flat line at 0 on the X-axis, which takes up vertical space without providing value.
📷 Screenshot
💡 Suggested Improvements
I have already fixed this on my end by adding related SVG's and headings.
Record
- I agree to follow this project's Code of Conduct
- I want to work on this issue