breedr/.zenflow/tasks/6e6e64eb-cb72-459e-b943-27554a749459/investigation.md

Investigation - External Dogs UI Issues

Bug Summary

The "External Dogs" interface does not match the layout and style of the main "Dogs" page. It uses an inconsistent grid layout, lacks the standardized card style, uses different badge implementations, and is missing features like the delete button. Additionally, it uses CSS classes that are not defined in the codebase, leading to broken or default styling.

Root Cause Analysis

• Inconsistent Layout: DogList.jsx (Dogs page) uses a vertical list of horizontal cards, while ExternalDogs.jsx uses a grid of square-ish cards.
• Undefined CSS Classes: ExternalDogs.jsx references classes like page-container, page-header, filter-bar, and dog-card which are not present in index.css or App.css.
• Missing Components: ExternalDogs.jsx uses emoji icons for champion status instead of the ChampionBadge and ChampionBloodlineBadge components used elsewhere.
• Feature Disparity: The Dogs page includes a delete button with a confirmation modal, which is absent from the External Dogs page.
• Helper Usage: ExternalDogs.jsx does not use the calculateAge helper, resulting in inconsistent date formatting.

Affected Components

• client/src/pages/ExternalDogs.jsx

Implementation Notes

Refactored ExternalDogs.jsx to match DogList.jsx in layout, style, and functionality. Key changes:

• Switched to axios for API calls.
• Adopted the vertical list layout instead of the grid.
• Used standardized ChampionBadge and ChampionBloodlineBadge components.
• Added a search/filter bar consistent with the main Dogs page.
• Implemented delete functionality with a confirmation modal.
• Standardized age calculation using the calculateAge helper logic.
• Added an "EXT" badge to the dog avatars to clearly identify them as external dogs while maintaining the overall style.

Test Results

• Verified that all components are correctly imported.
• Verified that API endpoints match the backend routes.
• Code review shows consistent use of CSS variables and classes (e.g., container, card, btn).