feat: Migrate React Admin Template to Angular 21 with Material UI

[devin-ai-integration]

feat: Migrate React Admin Template to Angular 21 with Material UI

Summary

Complete migration of the CoreUI Free React Admin Template from React/Vite to Angular 21 with Angular Material. This is a full rewrite that recreates all functionality using Angular's component architecture and Material Design components.

Key changes:

• Replaced React with Angular 21 (standalone components, signals-based state management)
• Replaced CoreUI React components with Angular Material components
• Migrated all views: Dashboard, Theme (Colors, Typography), Base components (15+), Buttons, Forms, Charts, Icons, Notifications, Widgets, and Pages (Login, Register, 404, 500)
• Implemented theme switching (light/dark/auto) with localStorage persistence
• Integrated ng2-charts for chart visualizations
• Set up lazy-loaded routing for all 40+ routes
• Responsive layout with Material Design styling

Updates Since Last Revision

Visual alignment fixes to match the original React implementation:

• Login page: Changed from purple gradient to light gray background (#ebedef), implemented side-by-side card layout (white login card on left, purple/indigo sign-up card on right)
• Register page: Updated to light gray background to match React version
• Dashboard brand cards: Redesigned from single-color cards to two-tone layout (colored top section with icon, white bottom section with stats separated by vertical divider)
• Added 4th brand card (calendar/events) to match React's 4-card layout
• Improved text spacing in brand card labels

Note: Some visual differences from the original React app are expected due to Material Design components vs CoreUI styling (e.g., form fields use Material's outlined style with floating labels instead of Bootstrap's flat inputs).

Review & Testing Checklist for Human

This is a high-risk PR due to the complete framework rewrite. Please verify:

• Visual comparison - Compare the Angular version side-by-side with the original React app, especially:
  • Login page layout (side-by-side cards with correct colors)
  • Dashboard brand cards (two-tone design with proper text spacing)
  • Stats cards (verify sparkline charts are rendering)
• Run the application locally (npm install && npm start) and verify it starts without errors on http://localhost:4200
• Test navigation - Click through all sidebar menu items and verify each route loads correctly
• Verify Dashboard - Check that all charts render properly (line charts, bar charts, sparkline charts in stats cards)
• Test theme switching - Click the theme toggle button in the header and verify light/dark modes work
• Test responsive design - Resize browser window and verify sidebar collapses on mobile
• Test Login/Register pages - Verify these standalone pages render correctly with proper styling

Recommended test plan:

1. Clone the branch and run npm install
2. Run npm start and open http://localhost:4200
3. Compare visually with the original React app (especially login page and dashboard)
4. Navigate through Dashboard → Base → Cards → Forms → Charts → Widgets
5. Toggle the theme using the sun/moon icon in the header
6. Test the sidebar collapse on mobile viewport
7. Verify brand cards show proper two-tone design with readable text

Notes

• The build passes successfully but no unit tests were written for this migration
• Some visual differences from the original are expected due to Material Design vs CoreUI styling (form fields, buttons)
• The original React app used Vite; the Angular app uses Angular CLI's build system
• Dev server port changed from 3000 to 4200 (Angular default)
• Visual fixes were made based on screenshot comparisons; some minor differences may remain

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

[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