Problem Description
We have developed a generic CardListLayout component in src/components/admin/_partials/cardListLayout.tsx that provides a consistent layout for admin list pages with:
- Card container with proper styling
- Header with title and optional create button
- Search bar and sort selector integration
- Action buttons support
- Consistent spacing and layout
However, many existing admin pages throughout the application are not using this generic component and are implementing similar layouts with inconsistent styling and structure.
Current State
The CardListLayout component is currently only used in:
- Dashboard collection items page
Pages That Should Be Refactored
The following admin pages should be migrated to use CardListLayout:
Content Management
- Collection items list pages
- Content management pages
- Media/file management pages
Settings Pages
- User management pages
- Contact management pages
- General settings pages
- Site configuration pages
Other Admin Pages
- Any other admin list/table pages that have similar layout patterns
Benefits of This Refactoring
- Consistency: All admin pages will have the same look and feel
- Maintainability: Single component to maintain for layout logic
- DRY Principle: Eliminate code duplication across pages
- Accessibility: Consistent accessibility patterns
- Responsiveness: Unified responsive behavior
- Future Changes: Easy to update layout globally
Implementation Plan
- Audit Phase: Identify all admin pages that should use CardListLayout
- Component Enhancement: Enhance CardListLayout if needed for additional use cases
- Migration Phase: Migrate pages one by one
- Testing Phase: Ensure no regressions in functionality
- Cleanup Phase: Remove redundant layout code
Acceptance Criteria
Priority
Medium Priority - This is a code quality improvement that will benefit long-term maintainability and user experience consistency.
Labels
refactor
admin-ui
enhancement
good first issue (for individual page migrations)
Problem Description
We have developed a generic
CardListLayoutcomponent insrc/components/admin/_partials/cardListLayout.tsxthat provides a consistent layout for admin list pages with:However, many existing admin pages throughout the application are not using this generic component and are implementing similar layouts with inconsistent styling and structure.
Current State
The
CardListLayoutcomponent is currently only used in:Pages That Should Be Refactored
The following admin pages should be migrated to use
CardListLayout:Content Management
Settings Pages
Other Admin Pages
Benefits of This Refactoring
Implementation Plan
Acceptance Criteria
Priority
Medium Priority - This is a code quality improvement that will benefit long-term maintainability and user experience consistency.
Labels
refactoradmin-uienhancementgood first issue(for individual page migrations)