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

Proposed Solution

Refactor ExternalDogs.jsx to mirror the structure and style of DogList.jsx:

1. Standardize Imports: Use axios instead of fetch. Import ChampionBadge, ChampionBloodlineBadge, and necessary lucide-react icons.
2. Match Layout: Update the main container and header to match DogList.jsx using the container class and consistent inline styles.
3. Sync Filter Bar: Use the same search and filter bar implementation as DogList.jsx.
4. Implement List View: Replace the dog-grid with a vertical stack of cards matching the Dogs page style.
5. Add Delete Functionality: Implement the handleDelete logic and add the Delete Confirmation Modal.
6. Use Badges & Helpers: Replace emoji badges with the standardized badge components and use calculateAge for birth dates.
7. Consistent Navigation: Use react-router-dom's Link for navigation to dog details.