Poo fix

POO Fix — Consolidate Duplicates

Refactors identified duplicate code into shared, reusable components following OOP/SOLID principles.

Input

Either:

• Results from /poo audit (list of duplicate pairs)
• User pointing at specific files ("esses dois componentes fazem a mesma coisa")
• A file path to analyze

Workflow

Step 1: Analyze the Duplicates

For each duplicate pair:

1. Read BOTH files completely
2. Identify:
   • Shared logic (identical or near-identical code)
   • Differences (props, styling, edge cases)
   • Dependencies (what each imports)

Step 2: Design the Shared Abstraction

Choose the right pattern:

Pattern	When to Use	Example
Shared Component	Same UI, minor prop differences	<DownloadButton variant="primary">
Composition	Same structure, different content	<Card><CardHeader/><CardBody/></Card>
Custom Hook	Same logic, different UI	useDownload() returns {download, loading, error}
Utility Function	Same operation, no UI	formatCurrency(value, locale)
Base Class/Interface	Same contract, different implementations	interface DataExporter { export(): void }
Higher-Order Component	Same wrapper behavior	withAuth(Component)
Render Props / Slots	Same logic, totally different UI	<DataFetcher render={data => ...}/>

Step 3: Determine Location

1. Check if shared directory exists:
   Glob: **/components/shared/** OR **/components/ui/** OR **/components/common/**

2. If not, check project conventions:
   - Next.js: components/ at root or src/components/
   - React: src/components/shared/
   - Vue: src/components/common/

3. For utilities: utils/ or lib/
4. For hooks: hooks/ or composables/ (Vue)
5. For types: types/ or interfaces/

Step 4: Build the Shared Code

1. Create the shared component/utility with ALL variants:

   • Use props/params to handle differences
   • Add TypeScript types for all variants
   • Export from a clean index file

2. Update ALL consumers:

   • Replace duplicate imports with shared import
   • Pass appropriate props/params
   • Delete the old duplicate files

3. Verify nothing breaks:

   • Check all imports resolve
   • Check TypeScript compiles
   • Run existing tests if available

Step 5: Report Changes

## POO Fix Report

### Created
- `components/shared/DownloadButton.tsx` — unified download button

### Updated (now using shared component)
- `pages/reports/index.tsx` — was: local DownloadBtn, now: shared DownloadButton
- `pages/exports/index.tsx` — was: local ExportDownload, now: shared DownloadButton

### Deleted (duplicates removed)
- `pages/reports/components/DownloadBtn.tsx`
- `pages/exports/components/ExportDownload.tsx`

### Props/Variants Added
- `variant`: "primary" | "secondary" | "icon-only"
- `format`: "csv" | "xlsx" | "pdf"

### Lines Saved: ~120 lines (2 files → 1 shared)

Refactoring Rules

1. Never break existing functionality — the refactored code must work identically
2. Preserve all edge cases — if one version handles an edge case, the shared version must too
3. Use TypeScript generics when the types differ between consumers
4. Add JSDoc comments explaining props/params that exist to support specific consumers
5. Run type check after — npx tsc --noEmit to verify
6. Update barrel exports — if the project uses index.ts re-exports