feat: migrate from CoreUI/Bootstrap to Material UI

[devin-ai-integration]

feat: migrate from CoreUI/Bootstrap to Material UI

Summary

This PR completely replaces the CoreUI/Bootstrap design library with Material UI (MUI) throughout the admin template. The migration includes:

Dependencies changed:

• Removed: @coreui/chartjs, @coreui/coreui, @coreui/icons, @coreui/icons-react, @coreui/react, @coreui/react-chartjs, @coreui/utils, @popperjs/core, simplebar-react
• Added: @mui/material, @mui/icons-material, @emotion/react, @emotion/styled, recharts

Key architectural changes:

• Created new MUI theme configuration (src/theme.js) with light/dark mode support
• Replaced CoreUI layout components (AppHeader, AppSidebar, AppContent, AppFooter) with MUI equivalents (AppBar, Drawer, Container, Box)
• Migrated all 40+ view components from CoreUI to MUI
• Replaced CoreUI Chart.js wrapper with Recharts library for all charts
• Updated navigation configuration to use MUI icons instead of CoreUI icons
• Removed SCSS/Bootstrap styling in favor of MUI's sx prop and theme system

Updates since last revision

• Fixed MUI Grid v2 syntax: Updated deprecated <Grid item xs={12} md={6}> syntax to new <Grid size={{ xs: 12, md: 6 }}> format across 6 files (Charts.js, Widgets.js, CoreUIIcons.js, Brands.js, Flags.js, Colors.js)
• This fix resolved chart rendering issues where Bar, Line, Doughnut, and Pie charts were not displaying correctly on the Charts page

Review & Testing Checklist for Human

This is a high-risk PR due to the scope of UI changes. Please verify:

• Run the app locally (npm start) and visually inspect all pages - no automated visual testing was performed
• Sidebar navigation - verify toggle functionality, nested menu expansion, and active state highlighting work correctly
• Theme switching - verify light/dark mode toggle in header works and persists
• Dashboard charts - verify all 4 stat widgets and the main traffic chart render correctly with Recharts
• Charts page - verify all 6 chart types (Bar, Line, Doughnut, Pie, Polar Area, Radar) render with proper dimensions
• Form components - test inputs, checkboxes, radios, selects, and validation states on form demo pages
• Responsive layout - test sidebar collapse behavior on mobile/tablet viewports

Recommended test plan:

1. Start dev server with npm start
2. Navigate through every sidebar menu item and verify pages render without errors
3. Toggle the sidebar open/closed
4. Switch between light and dark themes
5. Test the dashboard page thoroughly (charts, tables, widgets)
6. Visit the Charts page and verify all chart types display correctly
7. Test at least one form page with actual input

Notes

The chart library was changed from Chart.js (via CoreUI wrapper) to Recharts, which may result in visual differences in chart appearance.

Some CoreUI PRO features (Calendar, Smart Table, Virtual Scroller, etc.) remain as external documentation links and were not migrated.

Link to Devin run: https://partner-workshops.devinenterprise.com/sessions/5701d6f7804b4bec93ee42bfb7850085

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring