1. Migrated from Webpack to Vite

Why Vite?

• Native ES module support

• Lightning-fast dev server and HMR

• Simpler config, cleaner DX

We rewrote the build pipeline using vite.config.js, cleaned out Webpack loaders/plugins, and updated scripts to use Vite-native environment files (.env, .env.production).

Before (Webpack Script):

"scripts": {
  "dev-server": "cross-env BACKEND_URL=http://... webpack-dev-server"
}

After (Vite Script):

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "preview": "vite preview"
}

2. Updated MUI v4 to v6 Imports

Old:

import { Button, TextField } from '@material-ui/core';
import { makeStyles } from '@material-ui/styles';

New:

import { Button, TextField } from '@mui/material';
import { styled } from '@mui/system';

3. Styled Components & Theme Refactor

Moved from makeStyles/withStyles to styled() and sx props for better performance and flexibility:

Before:

const useStyles = makeStyles(() => ({
  root: { padding: 10 }
}));

After:

const Root = styled('div')(({ theme }) => ({
  padding: theme.spacing(2),
}));

4. Routing Refactor (React Router v4 → v6)

• Replaced render={() => <Component />} with element={<Component />}

• Introduced useNavigate, useLocation, and useParams

• Created a custom withRouter wrapper to handle class components

Before:

<Route path="/dashboard" render={() => <Dashboard />} />

After:

<Route path="/dashboard" element={<Dashboard />} />

• Supporting Class Components with a Custom withRouter Wrapper

function withRouter(Component) {
  return function WrappedComponent(props) {
    const navigate = useNavigate();
    return <Component {...props} navigate={navigate} />;
  };
}

// NOTE: In legacy class components, wrap your export with `withRouter`
// to inject routing props (navigate, params, location)
export default withRouter(YourComponent);

5. Refactored Redux Usage in App.jsx

We modernized the pattern of setting Redux state by ensuring state was derived and managed via hooks and clean action dispatchers — improving traceability and side-effect control.

6. Replaced Deprecated Libraries

• crypto → crypto-js (for password hashing)

• material-table → @material-table/core

• Added @material-table/exporters for export functionality

exportMenu={[
  {
    label: 'Export PDF',
    exportFunc: (cols, data) =>
      ExportPdf(cols, data, 'My Table Export'),
  },
]}

7. Fixed Socket.IO Connectivity

Socket connection issues were fixed by upgrading:

Old: socket.io-client@1.7.0
New: socket.io-client@2.4.0

8. Refactored Props & Param Handling

• Destructured props in functional components

• Replaced match, history.push() with useNavigate() + useParams()

Before:

props.history.push('/dashboard');

After:

const navigate = useNavigate();navigate('/dashboard');

9. TreeSelect + AntD Compatibility Fixes

Modified the ant.css to improve integration with MUI and fix TreeSelect styling issues, essential in hybrid-component environments.

10. Performance & Accessibility Improvements

• Removed unused state & props

• Commented deprecated/unreachable code

• Ensured all components support keyboard nav, alt texts, and tab flow