- Updated .js files to .jsx on frontend.

- Removed Yarn dependency and replaced with PNPM
- Changed Frontend to render via vite

packages/ui/src/layout/MainLayout/Header/ProfileSection/index.jsx

@@ -24,18 +24,18 @@ import {
 import PerfectScrollbar from 'react-perfect-scrollbar'
 
 // project imports
-import MainCard from 'ui-component/cards/MainCard'
-import Transitions from 'ui-component/extended/Transitions'
-import { BackdropLoader } from 'ui-component/loading/BackdropLoader'
-import AboutDialog from 'ui-component/dialog/AboutDialog'
+import MainCard from '@/ui-component/cards/MainCard'
+import Transitions from '@/ui-component/extended/Transitions'
+import { BackdropLoader } from '@/ui-component/loading/BackdropLoader'
+import AboutDialog from '@/ui-component/dialog/AboutDialog'
 
 // assets
 import { IconLogout, IconSettings, IconFileExport, IconFileDownload, IconInfoCircle } from '@tabler/icons'
 
 // API
-import databaseApi from 'api/database'
+import databaseApi from '@/api/database'
 
-import { SET_MENU } from 'store/actions'
+import { SET_MENU } from '@/store/actions'
 
 import './index.css'
 

packages/ui/src/layout/MainLayout/Header/index.jsx

@@ -16,7 +16,7 @@ import ProfileSection from './ProfileSection'
 import { IconMenu2 } from '@tabler/icons'
 
 // store
-import { SET_DARKMODE } from 'store/actions'
+import { SET_DARKMODE } from '@/store/actions'
 
 // ==============================|| MAIN NAVBAR / HEADER ||============================== //
 

packages/ui/src/layout/MainLayout/LogoSection/index.jsx

@@ -4,8 +4,8 @@ import { Link } from 'react-router-dom'
 import { ButtonBase } from '@mui/material'
 
 // project imports
-import config from 'config'
-import Logo from 'ui-component/extended/Logo'
+import config from '@/config'
+import Logo from '@/ui-component/extended/Logo'
 
 // ==============================|| MAIN LOGO ||============================== //
 

packages/ui/src/layout/MainLayout/Sidebar/MenuList/NavItem/index.jsx

@@ -8,8 +8,8 @@ import { useTheme } from '@mui/material/styles'
 import { Avatar, Chip, ListItemButton, ListItemIcon, ListItemText, Typography, useMediaQuery } from '@mui/material'
 
 // project imports
-import { MENU_OPEN, SET_MENU } from 'store/actions'
-import config from 'config'
+import { MENU_OPEN, SET_MENU } from '@/store/actions'
+import config from '@/config'
 
 // assets
 import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord'

packages/ui/src/layout/MainLayout/Sidebar/MenuList/index.jsx

@@ -3,7 +3,7 @@ import { Typography } from '@mui/material'
 
 // project imports
 import NavGroup from './NavGroup'
-import menuItem from 'menu-items'
+import menuItem from '@/menu-items'
 
 // ==============================|| SIDEBAR MENU LIST ||============================== //
 

packages/ui/src/layout/MainLayout/Sidebar/index.jsx

@@ -11,7 +11,7 @@ import { BrowserView, MobileView } from 'react-device-detect'
 // project imports
 import MenuList from './MenuList'
 import LogoSection from '../LogoSection'
-import { drawerWidth } from 'store/constant'
+import { drawerWidth } from '@/store/constant'
 
 // ==============================|| SIDEBAR DRAWER ||============================== //
 

packages/ui/src/layout/MainLayout/index.jsx

@@ -9,8 +9,8 @@ import { AppBar, Box, CssBaseline, Toolbar, useMediaQuery } from '@mui/material'
 // project imports
 import Header from './Header'
 import Sidebar from './Sidebar'
-import { drawerWidth } from 'store/constant'
-import { SET_MENU } from 'store/actions'
+import { drawerWidth } from '@/store/constant'
+import { SET_MENU } from '@/store/actions'
 
 // styles
 const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })(({ theme, open }) => ({