Vault List/Management Page #7
Description
Description
Design the page where users view and manage all their vaults. This includes filtering, sorting, searching, and bulk actions for vault management.
Target Users
- Users with multiple vaults
- Users searching for specific vaults
- Power users needing efficient vault management
Design Requirements
Must Include:
- Page Header:
- Page title ("My Vaults")
- Create new vault button (primary CTA)
- Total vaults count
- Filter Bar:
- Status filter (All, Active, Completed, Failed, Cancelled)
- Search by vault name
- Date range filter
- Clear filters option
- Vault List/Grid:
- Toggle between list and grid view
- Vault card components:
- Vault name
- Amount locked
- Status badge (color-coded)
- Progress indicator (timeline or percentage)
- Deadline date
- Milestone completion (e.g., 2/5 milestones)
- Quick actions (View, Cancel—if allowed)
- Sorting Options:
- Sort by date created
- Sort by amount
- Sort by deadline
- Sort by status
- Pagination/Infinite Scroll:
- Page numbers or load more
- Results per page selector
- Total count display
Should Include:
- Bulk selection and actions
- Export vault data option
- Vault comparison feature
- Favorite/pin vaults
- Archive completed vaults
- Advanced search (by amount range, verifier, etc.)
Design Specifications
- List item height: 72-88px
- Grid card: 280-320px width
- Status colors: Consistent with design system
- Responsive: Grid → List on smaller screens
Deliverables
- List view design
- Grid view design
- Filter/search bar states
- Empty state (no vaults)
- Filtered empty state (no matching results)
- Loading/skeleton states
- Mobile responsive versions
Designer Notes
- Users may have dozens of vaults—design for scale
- Make status immediately visible (color, icon, position)
- Search should be prominent for quick access
- Consider keyboard navigation for power users