Skip to content

feat: migrate Dashboard page from CoreUI to Material UI#22

Closed
devin-ai-integration[bot] wants to merge 1 commit into
mainfrom
devin/1770117018-migrate-dashboard-to-mui
Closed

feat: migrate Dashboard page from CoreUI to Material UI#22
devin-ai-integration[bot] wants to merge 1 commit into
mainfrom
devin/1770117018-migrate-dashboard-to-mui

Conversation

@devin-ai-integration
Copy link
Copy Markdown

@devin-ai-integration devin-ai-integration Bot commented Feb 3, 2026

feat: migrate Dashboard page from CoreUI to Material UI

Summary

This PR demonstrates migrating the Dashboard page from CoreUI/Bootstrap components to Material UI as a sample migration. The changes include:

  • Added Material UI dependencies (@mui/material, @mui/icons-material, @emotion/react, @emotion/styled)
  • Created new DashboardMUI.js component using MUI equivalents for CoreUI components
  • Updated routes.js to load the new MUI-based Dashboard

Component mapping:

  • CCard → Card
  • CRow/CCol → Grid
  • CProgress → LinearProgress
  • CTable → Table/TableContainer
  • CButton → Button
  • CAvatar → Avatar

Review & Testing Checklist for Human

  • Chart is a placeholder - The original Dashboard had a working line chart (MainChart). The MUI version shows "Chart Area (Material UI)" placeholder text. Verify this is acceptable for the sample migration scope.
  • Visual comparison - Run npm start and compare the MUI Dashboard layout against the original. Some features are simplified (country flags now show text, payment icons now show Chip labels).
  • Responsive behavior - Test the Grid layout at different breakpoints (xs, sm, md, lg) to ensure proper responsiveness.
  • Theme compatibility - The MUI components use hardcoded colors in colorMap. Verify they work acceptably within the existing CoreUI layout shell (sidebar, header remain CoreUI).
  • Bundle size - Both CoreUI and MUI are now included. Consider if this is acceptable for a production build.

Test plan: Run npm start, navigate to the Dashboard, scroll through all sections (stat cards, traffic card, traffic & sales card with table), and verify components render correctly.

Notes

  • The original WidgetsDropdown and WidgetsBrand components (which had mini charts) were replaced with simpler StatCard components
  • Pre-existing lint errors in Charts.js, MainChart.js, and Widgets.js are unrelated to this PR

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

- Add Material UI dependencies (@mui/material, @mui/icons-material, @emotion/react, @emotion/styled)
- Create new DashboardMUI.js component using MUI components
- Replace CoreUI components with MUI equivalents:
  - CCard -> Card
  - CRow/CCol -> Grid
  - CProgress -> LinearProgress
  - CTable -> Table
  - CButton -> Button
  - CAvatar -> Avatar
- Update routes.js to use the new MUI Dashboard
@devin-ai-integration
Copy link
Copy Markdown
Author

🤖 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

@devin-ai-integration devin-ai-integration Bot deleted the devin/1770117018-migrate-dashboard-to-mui branch April 24, 2026 22:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

0 participants