Refactor `CardDetailsPage` and Update Dependent Pages

[kasya]

Our CardDetailsPage component was one of the earliest components added and has since grown quite complex. It currently serves as a shared “template” across many pages, relying heavily on conditional logic (if statements) for dynamic rendering.

This approach has made the component cluttered, difficult to read, and hard to maintain.

Goal

Simplify and modernize the structure by breaking CardDetailsPage into smaller, dedicated components, improving readability, maintainability, and design flexibility.

Proposed Approach

• Identify logical groupings within CardDetailsPage and extract them into separate, reusable components.
• Consider creating new layout or block components to handle common patterns across pages.
• Refactor pages that currently depend on CardDetailsPage to use these page-specific layouts/components instead of relying on a single “catch-all” template.
• Reduce conditional rendering where possible, favoring composition of specialized components.
• This could involve a more significant redesign of the component structure to better align with current design standards and anticipated future features.
• This will also involve adding tests for newly added components/pages while relying on existing tests for pages that are affected by refactoring.

Benefits

• Cleaner, more readable code.
• Easier maintenance and testing.
• Greater flexibility to adjust designs per page without modifying a single monolithic component.
• Potential for creating a library of reusable UI blocks for other parts of the application.

Are you going to work on implementing this?

• Yes
• No

[ahmedxgouda]

Well, I wanted this refactor before. I can work on this.