[Frontend] Migrate to reusable UI components - Eliminate ~5,600 lines of duplication

🎯 Objective

Migrate 40+ Vue components to use newly created reusable UI components, eliminating approximately 5,600 lines of duplicate code and establishing consistent UI patterns across the AutoBot platform.

📦 New Reusable Components

Created 4 comprehensive reusable UI components:

1. EmptyState.vue (src/components/ui/EmptyState.vue)

• Purpose: Consistent empty state displays across application
• Features: Customizable icon, title, message, action slots
• Potential Impact: 11+ components, ~275 lines saved

2. BaseModal.vue (src/components/ui/BaseModal.vue)

• Purpose: Standardized modal/dialog implementation
• Features: v-model binding, 3 sizes (small/medium/large), teleport, transitions, dark mode
• Potential Impact: 14+ components, ~2,100 lines saved

3. StatusBadge.vue (src/components/ui/StatusBadge.vue)

• Purpose: Consistent status indicators
• Features: 6 variants (success/danger/warning/info/primary/secondary), 3 sizes, optional icons
• Potential Impact: 5+ components, ~150 lines saved

4. DataTable.vue (src/components/ui/DataTable.vue)

• Purpose: Reusable data tables with built-in features
• Features: Sorting, pagination, custom cell rendering, actions column, empty/loading states
• Potential Impact: 6+ components, ~2,400 lines saved

✅ Completed Migrations

• [x] DocumentChangeFeed.vue - Migrated to EmptyState (saved ~14 lines)
• [x] KnowledgeCategories.vue - Migrated 3 modals to BaseModal (saved ~105 lines)

📋 Migration Checklist

EmptyState Component (11 components)

• [ ] ConversationFiles.vue - Custom empty state for file uploads
• [ ] KnowledgeBrowser.vue - "No documents found" state
• [ ] ManPageManager.vue - Empty man pages list
• [ ] PromptManager.vue - Empty prompts list
• [ ] Dashboard.vue - Multiple empty states (workflows, logs, etc.)
• [ ] DesktopNPULogs.vue - No logs available
• [ ] DesktopShell.vue - Command history empty
• [ ] LLMChat.vue - Empty conversation state
• [ ] WorkflowBuilder.vue - No workflows created
• [ ] KnowledgeStats.vue - No categories/documents
• [ ] ValidationDashboard.vue - No validation errors

BaseModal Component (14 components)

• [ ] ConversationList.vue - Delete confirmation modal
• [ ] PromptManager.vue - Create/edit prompt modal
• [ ] WorkflowBuilder.vue - Workflow configuration modal
• [ ] DesktopUI.vue - Settings/preferences modal
• [ ] LLMChat.vue - Settings modal
• [ ] Dashboard.vue - Various configuration modals
• [ ] FileManager.vue - File operations modals
• [ ] SystemHealth.vue - Service restart confirmation
• [ ] UserManagement.vue - User CRUD modals
• [ ] IntegrationConfig.vue - Integration setup modals
• [ ] ApiKeyManager.vue - API key management modals
• [ ] BackupRestore.vue - Backup/restore confirmation modals

StatusBadge Component (5 components)

• [ ] Dashboard.vue - Service status badges
• [ ] SystemHealth.vue - Health check status
• [ ] WorkflowBuilder.vue - Workflow execution status
• [ ] FileManager.vue - File sync status
• [ ] DesktopNPULogs.vue - Log level badges

DataTable Component (6 components)

• [ ] ConversationList.vue - Conversation history table
• [ ] FileManager.vue - File listing table
• [ ] ManPageManager.vue - Man pages table
• [ ] PromptManager.vue - Prompts table
• [ ] ValidationDashboard.vue - Error reports table
• [ ] SystemHealth.vue - Services status table

📚 Resources

• Migration Guide: [docs/developer/CODE_REUSABILITY_GUIDE.md](../docs/developer/CODE_REUSABILITY_GUIDE.md)
• Component Location: autobot-vue/src/components/ui/
• Examples: See completed migrations in DocumentChangeFeed.vue and KnowledgeCategories.vue

🔧 Migration Steps (Per Component)

1. Identify duplicate patterns in the component
2. Import reusable component: import BaseModal from '@/components/ui/BaseModal.vue'
3. Replace custom implementation with reusable component
4. Remove duplicate CSS that is now handled by the reusable component
5. Sync to frontend VM: ./scripts/utilities/sync-to-vm.sh frontend <file> <dest>
6. Test functionality: Verify all features work correctly
7. Update this issue: Check off the completed migration

📊 Progress Tracking

Overall Progress: 2/40+ components migrated (5%)

Lines Saved: ~119 / ~5,600 lines (2%)

Target Completion: End of Q1 2025

🎉 Benefits

• ✅ Reduced codebase size by ~5,600 lines
• ✅ Consistent UI/UX across all features
• ✅ Easier maintenance - Single source of truth for UI patterns
• ✅ Faster development - Reusable components reduce boilerplate
• ✅ Improved accessibility - Centralized a11y improvements benefit all usages
• ✅ Better dark mode support - Consistent theming

🚀 Next Steps

1. Continue migrating components in priority order (most duplication first)
2. Update CODE_REUSABILITY_GUIDE.md with migration examples
3. Create additional reusable components as patterns emerge
4. Document best practices for future component development

---

Related: #[previous-issue-number], Component Reusability Initiative