Skip to content

refactor: migrate admin pages to use CardListLayout component #155

Description

@kaluxxx

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

  1. Consistency: All admin pages will have the same look and feel
  2. Maintainability: Single component to maintain for layout logic
  3. DRY Principle: Eliminate code duplication across pages
  4. Accessibility: Consistent accessibility patterns
  5. Responsiveness: Unified responsive behavior
  6. Future Changes: Easy to update layout globally

Implementation Plan

  1. Audit Phase: Identify all admin pages that should use CardListLayout
  2. Component Enhancement: Enhance CardListLayout if needed for additional use cases
  3. Migration Phase: Migrate pages one by one
  4. Testing Phase: Ensure no regressions in functionality
  5. Cleanup Phase: Remove redundant layout code

Acceptance Criteria

  • All applicable admin pages use CardListLayout component
  • No visual regressions in the migrated pages
  • All existing functionality preserved
  • Code is cleaner and more maintainable
  • Consistent user experience across admin interface

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)

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions