feat: Migrate from CoreUI to Material UI (MUI)

package.json

@@ -19,13 +19,10 @@
     "start": "vite"
   },
   "dependencies": {
-    "@coreui/chartjs": "^4.1.0",
-    "@coreui/coreui": "^5.5.0",
-    "@coreui/icons": "^3.0.1",
-    "@coreui/icons-react": "^2.3.0",
-    "@coreui/react": "^5.9.2",
-    "@coreui/react-chartjs": "^3.0.0",
-    "@coreui/utils": "^2.0.2",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@mui/icons-material": "^7.3.7",
+    "@mui/material": "^7.3.7",
     "@popperjs/core": "^2.11.8",
     "chart.js": "^4.5.1",
     "classnames": "^2.5.1",
@@ -35,8 +32,8 @@
     "react-dom": "^19.2.3",
     "react-redux": "^9.2.0",
     "react-router-dom": "^7.11.0",
-    "redux": "5.0.1",
-    "simplebar-react": "^3.3.2"
+    "recharts": "^3.7.0",
+    "redux": "5.0.1"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^5.1.2",

src/App.js

@@ -1,58 +1,65 @@
-import React, { Suspense, useEffect } from 'react'
+import React, { Suspense, useEffect, useMemo } from 'react'
 import { HashRouter, Route, Routes } from 'react-router-dom'
-import { useSelector } from 'react-redux'
+import { useSelector, useDispatch } from 'react-redux'
+import { ThemeProvider } from '@mui/material/styles'
+import CssBaseline from '@mui/material/CssBaseline'
+import CircularProgress from '@mui/material/CircularProgress'
+import Box from '@mui/material/Box'
+import Fade from '@mui/material/Fade'
 
-import { CSpinner, useColorModes } from '@coreui/react'
-import './scss/style.scss'
+import { createAppTheme } from './theme'
 
-// We use those styles to show code examples, you should remove them in your application.
-import './scss/examples.scss'
-
-// Containers
 const DefaultLayout = React.lazy(() => import('./layout/DefaultLayout'))
 
-// Pages
 const Login = React.lazy(() => import('./views/pages/login/Login'))
 const Register = React.lazy(() => import('./views/pages/register/Register'))
 const Page404 = React.lazy(() => import('./views/pages/page404/Page404'))
 const Page500 = React.lazy(() => import('./views/pages/page500/Page500'))
 
+const LoadingFallback = () => (
+  <Box
+    sx={{
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      minHeight: '100vh',
+    }}
+  >
+    <Fade in timeout={800}>
+      <CircularProgress color="primary" size={48} />
+    </Fade>
+  </Box>
+)
+
 const App = () => {
-  const { isColorModeSet, setColorMode } = useColorModes('coreui-free-react-admin-template-theme')
+  const dispatch = useDispatch()
   const storedTheme = useSelector((state) => state.theme)
 
+  const theme = useMemo(() => createAppTheme(storedTheme), [storedTheme])
+
   useEffect(() => {
     const urlParams = new URLSearchParams(window.location.href.split('?')[1])
-    const theme = urlParams.get('theme') && urlParams.get('theme').match(/^[A-Za-z0-9\s]+/)[0]
-    if (theme) {
-      setColorMode(theme)
+    const themeParam = urlParams.get('theme')
+    if (themeParam && (themeParam === 'light' || themeParam === 'dark')) {
+      dispatch({ type: 'set', theme: themeParam })
     }
-
-    if (isColorModeSet()) {
-      return
-    }
-
-    setColorMode(storedTheme)
-  }, []) // eslint-disable-line react-hooks/exhaustive-deps
+  }, [dispatch])
 
   return (
-    <HashRouter>
-      <Suspense
-        fallback={
-          <div className="pt-3 text-center">
-            <CSpinner color="primary" variant="grow" />
-          </div>
-        }
-      >
-        <Routes>
-          <Route exact path="/login" name="Login Page" element={<Login />} />
-          <Route exact path="/register" name="Register Page" element={<Register />} />
-          <Route exact path="/404" name="Page 404" element={<Page404 />} />
-          <Route exact path="/500" name="Page 500" element={<Page500 />} />
-          <Route path="*" name="Home" element={<DefaultLayout />} />
-        </Routes>
-      </Suspense>
-    </HashRouter>
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      <HashRouter>
+        <Suspense fallback={<LoadingFallback />}>
+          <Routes>
+            <Route exact path="/login" name="Login Page" element={<Login />} />
+            <Route exact path="/register" name="Register Page" element={<Register />} />
+            <Route exact path="/404" name="Page 404" element={<Page404 />} />
+            <Route exact path="/500" name="Page 500" element={<Page500 />} />
+            <Route path="*" name="Home" element={<DefaultLayout />} />
+          </Routes>
+        </Suspense>
+      </HashRouter>
+    </ThemeProvider>
   )
 }