Issue 175 empty states#223
Open
Emmanard wants to merge 7 commits into
Open
Conversation
Shared EmptyState with illustrations on dashboard, bills, and onramp flows.
|
@Emmanard is attempting to deploy a commit to the kelly musk's projects Team on Vercel. A member of the Team first needs to authorize it. |
Resolve conflicts for empty states with upstream bills UI and transaction history.
Fix withdrawal lock release and payment test token cache resets.
Fix withdrawal lock release and payment test token cache resets.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Introduces a shared EmptyState component with branded inline SVG illustrations for transactions, bills, search, scheduled payments, and filtered results.
Adds a consistent empty-state experience across Dashboard, Transactions, Bills, and Onramp flows.
Also introduces a dedicated /dashboard/transactions page so the navbar link resolves to a full transactions view with filtering support.
Supports QA and development testing of empty-data scenarios via:
?empty=1
NEXT_PUBLIC_MOCK_EMPTY=true
Existing production mock data remains unchanged when empty mode is not enabled.
Changes
UI
Added components/ui/empty-state.tsx
Added components/illustrations/empty-illustrations.tsx
Dashboard
Updated transaction-history.tsx
Added empty and filtered-empty states
Pagination is hidden when there are no results
Transactions
Added /dashboard/transactions
Added transactions-page-client.tsx
Onramp
Updated recent-transactions.tsx
Added empty-state experience with relevant CTAs
Bills
Added recent-payments.tsx
Updated:
Stats
Scheduled payments
Search results
Category pages
Biller listings
Data Layer
Added lib/mock-empty.ts
Updated:
lib/dashboard/mock-transactions.ts
use-bills-data.ts
Added support for mock empty-data scenarios
Empty State Behaviour
No Transactions
Message:
"No transactions yet"
Actions:
Add Funds (/onramp)
Pay a Bill (/bills)
Filtered Transactions (0 Matches)
Message:
"No matching transactions"
Action:
Clear Filters
No Bill Payments
Message:
"No bill payments yet"
Action:
Browse Bill Categories
No Scheduled Payments
Message:
"No scheduled payments"
Action:
Schedule Payment (/bills/schedule)
Search / Category Results
Message:
"No results found"
Actions:
Clear Search (where applicable)
How to Preview
Append ?empty=1 to:
/dashboard
/dashboard/transactions
/bills
/onramp
Or set:
NEXT_PUBLIC_MOCK_EMPTY=true
in .env.local.
Test Plan
Dashboard
/dashboard?empty=1
Transaction history shows illustration, title, and both CTAs
Pagination is hidden
/dashboard/transactions?empty=1
Empty state renders correctly
Filters remain available
Apply a filter that returns zero results
Filter-specific empty state appears
Clear Filters restores results
Bills
/bills?empty=1
Recent Bill Payments shows empty state
Scheduled Payments shows empty state
Stats cards are hidden instead of displaying three zero values
Search for a biller that does not exist
Search empty state appears
Clear Search restores results
Search within a category with no matching billers
Category empty state appears
Clear Search restores results
Onramp
/onramp?empty=1
Compact empty state appears
Start Onramp and View All Transactions actions are available
Regression Checks
Routes without ?empty=1 continue showing existing mock data
Empty states render correctly in light and dark themes
Empty states remain centered and usable on mobile devices
Notes
Empty States Design.txt was empty in the repository, so lightweight branded SVG illustrations were created to match existing UI patterns.
Empty-state preview functionality is intended for development and QA only and does not affect normal mock-data behaviour.
Closes #175 (if tracked in the corresponding repository)