reorg-docs

docs/plans/implemented/fixes/component-audit-report.md

@@ -0,0 +1,199 @@
+# Component Inventory & Audit Report
+
+> Generated: 2025-01-XX (Phase 4.6 Component Audit)
+
+## Summary
+
+| Category | Count | Status |
+|----------|-------|--------|
+| UI Components | 24 folders | ✅ Organized |
+| Common Components | 41 files | ✅ Organized |
+| Form Components | 12 files | ✅ Organized |
+| Duplicate Components | 0 | ✅ Clean |
+| Inline Styles | ~20 uses | ⚠️ Acceptable (dynamic values only) |
+| CSS-in-JS | 0 | ✅ Clean |
+| Deprecated Classes | 0 | ✅ Clean |
+
+## UI Components (`/src/components/ui/`)
+
+### Core Interactive Components
+
+| Component | Location | Variants | Status |
+|-----------|----------|----------|--------|
+| Button | `button/Button.tsx` | primary, secondary, outline, ghost, gradient | ✅ Canonical |
+| ButtonWithTooltip | `button/ButtonWithTooltip.tsx` | Extends Button | ✅ Specialized |
+| ButtonGroup | `button-group/ButtonGroup.tsx` | - | ✅ Canonical |
+| Modal | `modal/index.tsx` | - | ✅ Canonical |
+| Dropdown | `dropdown/Dropdown.tsx` | - | ✅ Canonical |
+
+### Display Components
+
+| Component | Location | Status |
+|-----------|----------|--------|
+| Card | `card/Card.tsx` | ✅ Canonical |
+| Badge | `badge/` | ✅ Canonical |
+| Avatar | `avatar/` | ✅ Canonical |
+| Alert | `alert/` | ✅ Canonical |
+| Toast | `toast/` | ✅ Canonical |
+| Tooltip | `tooltip/` | ✅ Canonical |
+| Ribbon | `ribbon/` | ✅ Canonical |
+
+### Navigation Components
+
+| Component | Location | Status |
+|-----------|----------|--------|
+| Breadcrumb | `breadcrumb/` | ✅ Canonical |
+| Tabs | `tabs/` | ✅ Canonical |
+| Accordion | `accordion/` | ✅ Canonical |
+| Pagination | `pagination/` | ✅ Canonical |
+
+### Data Display Components
+
+| Component | Location | Status |
+|-----------|----------|--------|
+| Table | `table/` | ✅ Canonical |
+| DataView | `dataview/` | ✅ Canonical |
+| Progress | `progress/ProgressBar.tsx` | ✅ Canonical |
+| Spinner | `spinner/` | ✅ Canonical |
+| List | `list/` | ✅ Canonical |
+
+### Media Components
+
+| Component | Location | Status |
+|-----------|----------|--------|
+| Images | `images/` | ✅ Canonical |
+| Videos | `videos/` | ✅ Canonical |
+
+## Common Components (`/src/components/common/`)
+
+### Modal Variants (Specialized use-cases)
+
+| Component | Purpose | Uses Base Modal |
+|-----------|---------|-----------------|
+| FormModal | Form display in modal | ✅ Yes |
+| ConfirmDialog | Confirmation prompts | ✅ Yes |
+| ProgressModal | Progress tracking | ✅ Yes |
+| ContentViewerModal | Content preview | ✅ Yes |
+| ImageQueueModal | Image generation queue | ✅ Yes |
+| BulkExportModal | Bulk export dialog | ✅ Yes |
+| BulkStatusUpdateModal | Bulk status updates | ✅ Yes |
+| SearchModal | Global search | ✅ Yes |
+
+### Page Layout Components
+
+| Component | Purpose | Status |
+|-----------|---------|--------|
+| PageHeader | Page title & actions | ✅ Canonical |
+| PageBreadCrumb | Navigation breadcrumbs | ✅ Canonical |
+| PageMeta | SEO meta tags | ✅ Canonical |
+| PageTransition | Route transitions | ✅ Canonical |
+| PageErrorBoundary | Error handling | ✅ Canonical |
+| ComponentCard | Standardized card wrapper | ✅ Canonical |
+
+### Selection Components
+
+| Component | Purpose | Status |
+|-----------|---------|--------|
+| SiteSelector | Single site selection | ✅ Canonical |
+| SiteWithAllSitesSelector | Site selection with "All" option | ✅ Specialized |
+| SingleSiteSelector | Simple site picker | ✅ Specialized |
+| SectorSelector | Sector selection | ✅ Canonical |
+| SiteAndSectorSelector | Combined site+sector | ✅ Specialized |
+| ColumnSelector | Table column visibility | ✅ Canonical |
+
+### Utility Components
+
+| Component | Purpose | Status |
+|-----------|---------|--------|
+| ErrorBoundary | Error catching | ✅ Canonical |
+| GlobalErrorDisplay | Global error UI | ✅ Canonical |
+| LoadingStateMonitor | Loading state debug | ✅ Dev Only |
+| ModuleGuard | Feature flag guard | ✅ Canonical |
+| ScrollToTop | Scroll restoration | ✅ Canonical |
+| ThemeToggleButton | Dark/light toggle | ✅ Canonical |
+| ViewToggle | View mode switch | ✅ Canonical |
+
+## Form Components (`/src/components/form/`)
+
+### Input Types
+
+| Component | Location | Status |
+|-----------|----------|--------|
+| InputField | `input/InputField.tsx` | ✅ Canonical |
+| TextArea | `input/TextArea.tsx` | ✅ Canonical |
+| Checkbox | `input/Checkbox.tsx` | ✅ Canonical |
+| Radio | `input/Radio.tsx` | ✅ Canonical |
+| RadioSm | `input/RadioSm.tsx` | ✅ Specialized |
+| FileInput | `input/FileInput.tsx` | ✅ Canonical |
+| Select | `Select.tsx` | ✅ Canonical |
+| SelectDropdown | `SelectDropdown.tsx` | ✅ Specialized |
+| MultiSelect | `MultiSelect.tsx` | ✅ Canonical |
+| DatePicker | `date-picker.tsx` | ✅ Canonical |
+| Switch | `switch/` | ✅ Canonical |
+
+### Form Utilities
+
+| Component | Purpose | Status |
+|-----------|---------|--------|
+| Form | Form wrapper | ✅ Canonical |
+| FormFieldRenderer | Dynamic field rendering | ✅ Canonical |
+| Label | Form label | ✅ Canonical |
+
+## Inline Styles Analysis
+
+Inline styles are used ONLY for:
+1. **Dynamic values** (width percentages from props/state)
+2. **Animation delays** (calculated from index)
+3. **Z-index** (for stacking contexts)
+4. **External libraries** (jvectormap, etc.)
+
+These are acceptable uses as per DESIGN_SYSTEM.md guidelines.
+
+### Files with Inline Styles (Verified)
+
+| File | Reason | Status |
+|------|--------|--------|
+| AppSidebar.tsx | Logo positioning | ⚠️ Review needed |
+| Dropdown.tsx | Dynamic positioning | ✅ Acceptable |
+| AlertModal.tsx | Animation blur effects | ✅ Acceptable |
+| ProgressBar.tsx | Dynamic width | ✅ Acceptable |
+| ThreeWidgetFooter.tsx | Dynamic progress | ✅ Acceptable |
+| ToastContainer.tsx | Animation delay | ✅ Acceptable |
+| EnhancedTooltip.tsx | Z-index layering | ✅ Acceptable |
+| PricingTable.tsx | Dynamic height | ✅ Acceptable |
+| CountryMap.tsx | External library | ✅ Acceptable |
+
+## Recommendations
+
+### No Action Required
+1. ✅ Button component system is well-organized
+2. ✅ Modal variants properly extend base Modal
+3. ✅ Form inputs are consolidated
+4. ✅ No CSS-in-JS patterns found
+5. ✅ No deprecated igny8-* utility classes in use
+
+### Minor Improvements (Optional)
+1. Consider moving sample-components/ HTML files to docs/
+2. Review AppSidebar.tsx inline style for logo positioning
+3. Consider adding Storybook for component documentation
+
+## Verification Checklist
+
+- [x] Button variants (primary, secondary, outline, ghost, gradient) - All in Button.tsx
+- [x] Card components - Single Card.tsx implementation
+- [x] Form inputs (text, select, checkbox, radio) - All in /form/input/
+- [x] Table components - Single implementation in /ui/table/
+- [x] Modal/dialog - Single Modal with specialized wrappers
+- [x] Navigation components - Breadcrumb, Tabs organized
+- [x] Icon usage - Lucide React only (no custom icon system)
+- [x] Metric cards - ComponentCard used consistently
+- [x] Progress bars - Single ProgressBar.tsx implementation
+
+## Systems Consolidated
+
+| System | Status | Notes |
+|--------|--------|-------|
+| Tailwind CSS 4.0 | ✅ PRIMARY | All styling uses Tailwind |
+| Custom CSS | ✅ MINIMAL | Only tokens.css and module-specific |
+| Inline Styles | ✅ CONTROLLED | Only for dynamic values |
+| CSS-in-JS | ✅ NONE | Not present in codebase |