Refactor Large Components into Smaller, Focused Components

[saadanzari]

Description

Simplify the codebase by breaking down large, monolithic components into smaller, more focused components. This will improve readability, testability, and reusability while adhering to the single-responsibility principle.

Acceptance Criteria

• Identify and document the large components in the codebase that need to be broken down.
• Refactor these components by extracting logical subcomponents.
• Ensure each subcomponent has a clear purpose and follows naming conventions.
• Update parent components to integrate the newly created subcomponents seamlessly.
• Write or update unit tests to cover the newly created subcomponents.
• Ensure there are no regressions in functionality or performance after the refactor.