UI/UX: Design empty, loading, and error states for the dashboard data widgets

[Baskarayelu]

Description

The dashboard widgets (MoneyDistributionWidget, RecentTransactionsWidget, SavingsByGoalWidget, GoalProgress, SixMonthTrendsWidget) currently render with seeded/mock content and have no designed empty, loading, or error states. A brand-new user with no transactions or goals would see misleading placeholder data instead of helpful guidance. We need designed empty states (with a next-step CTA), error states (with retry), and how each widget should look while data loads. This excludes the skeletons already covered by the open UX-005 issue; here we focus on empty and error visuals and the copy that guides users.

Requirements and context

• UI/UX scope only; do not duplicate UX-005 (loading skeletons).
• Reference components/Dashboard/MoneyDistributionWidget.tsx, RecentTransactionsWidget.tsx, SavingsByGoalWidget.tsx, GoalProgress.tsx, SixMonthTrendsWidget.tsx.
• Design empty states with a primary CTA routing to the relevant flow (e.g. "Set up your split").
• Design error states with a retry affordance and supportive copy.
• Keep widgets aligned within the dashboard grid at all breakpoints.

Suggested execution

• Branch: uiux/dashboard-empty-error-states
• Mock empty and error variants for each named widget.
• Document the CTA destinations for empty states.
• Provide responsive behavior within the dashboard grid.

Test and commit

• Visual QA at 375px and 1280px.
• npm run build
• npm run lint
• a11y: error roles/announcements, CTA labeling, focus order.

Example commit message

feat(uiux): design dashboard widget empty and error states

Guidelines

• Document empty-state CTA destinations.
• Keep visuals consistent across widgets; defer skeletons to UX-005.
• Timeframe: 96 hours