Remove Internationalization

Remove i18n

VITE (TS)

1. Update App.tsx

   Open src\App.tsx and remove the Locales provider.

src/App.tsx

'use client';

import { ReactElement } from 'react';

// next
import { SessionProvider } from 'next-auth/react';

// project imports
import ThemeCustomization from 'themes';

// ❌ Removed Locales import
// import Locales from 'components/Locales';

import ScrollTop from 'components/ScrollTop';
import RTLLayout from 'components/RTLLayout';
import Snackbar from 'components/@extended/Snackbar';
import Notistack from 'components/third-party/Notistack';

import { ConfigProvider } from 'contexts/ConfigContext';

// ==============================|| APP - THEME, ROUTER, LOCAL ||============================== //

export default function ProviderWrapper({ children }: { children: ReactElement }) {
  return (
    <ConfigProvider>
      <ThemeCustomization>
        <RTLLayout>
          {/* <Locales> */}
            <ScrollTop>
              <SessionProvider refetchInterval={0}>
                <Notistack>
                  <Snackbar />
                  {children}
                </Notistack>
              </SessionProvider>
            </ScrollTop>
          {/* </Locales> */}
        </RTLLayout>
      </ThemeCustomization>
    </ConfigProvider>
  );
}

1. Delete Unused Files

   Remove the following files completely:

   • src/components/Locales.tsx

   • src/utils/locales/ (entire folder)

2. Clean Up Components Using FormattedMessage

   Some components use react-intl for text rendering (like Breadcrumbs, NavGroup, NavItem, etc.). Replace FormattedMessage with plain strings:

   Example: src/components/@extended/Breadcrumbs.tsx

Before :

....
// third-party
import { FormattedMessage } from 'react-intl';
...

export default function Breadcrumbs({

  <Typography
        {...(main.url && { component: Link, to: main.url as string })}
        variant={window.location.pathname === main.url ? 'subtitle1' : 'h6'}
        sx={{ textDecoration: 'none' }}
        color={window.location.pathname === main.url ? 'text.primary' : 'text.secondary'}
      >
        {icons && <CollapseIcon style={iconSX} />}
          <FormattedMessage id={main?.title as string} />
        {main?.title}
  </Typography>

After:

....
// third-party
// import { FormattedMessage } from 'react-intl';
...

export default function Breadcrumbs({

  <Typography
        {...(main.url && { component: Link, to: main.url as string })}
        variant={window.location.pathname === main.url ? 'subtitle1' : 'h6'}
        sx={{ textDecoration: 'none' }}
        color={window.location.pathname === main.url ? 'text.primary' : 'text.secondary'}
      >
        {icons && <CollapseIcon style={iconSX} />}
          {main?.title}
        {main?.title}
  </Typography>

Repeat the same cleanup in:

• src/layout/Component/Drawer/Navigation/NavGroup.tsx

• src/layout/Component/Drawer/Navigation/NavItem.tsx

• src/layout/Dashboard/Drawer/DrawerContent/Navigation/NavCollapse.tsx

• src/layout/Dashboard/Drawer/DrawerContent/Navigation/NavGroup.tsx

• src/layout/Dashboard/Drawer/DrawerContent/Navigation/NavItem.tsx

VITE (JS)

1. Update App.jsx

   Open src/App.jsx and remove the Locales provider.

src/App.jsx

import { RouterProvider } from 'react-router-dom';

// project imports
import router from 'routes';
import ThemeCustomization from 'themes';

// ❌ Removed Locales import
// import Locales from 'components/Locales';

import RTLLayout from 'components/RTLLayout';
import ScrollTop from 'components/ScrollTop';
import Snackbar from 'components/@extended/Snackbar';
import Notistack from 'components/third-party/Notistack';
import Metrics from 'metrics';

// auth-provider
import { JWTProvider as AuthProvider } from 'contexts/JWTContext';
// import { FirebaseProvider as AuthProvider } from 'contexts/FirebaseContext';
// import { Auth0Provider as AuthProvider } from 'contexts/Auth0Context';
// import { AWSCognitoProvider as AuthProvider } from 'contexts/AWSCognitoContext';
// import { SupabseProvider as AuthProvider } from 'contexts/SupabaseContext';

// ==============================|| APP - THEME, ROUTER, LOCAL ||============================== //

export default function App() {
  return (
    <>
      <ThemeCustomization>
        <RTLLayout>
        /* <Locales> */}
            <ScrollTop>
              <AuthProvider>
                <>
                  <Notistack>
                    <RouterProvider router={router} />
                    <Snackbar />
                  </Notistack>
                </>
              </AuthProvider>
            </ScrollTop>
          /* </Locales> */}ales>
        </RTLLayout>
      </ThemeCustomization>
      <Metrics />
    </>
  );
}

1. Delete Unused Files

   Remove the following files completely:

   • src/components/Locales.jsx

   • src/utils/locales/ (entire folder)

2. Clean Up Components Using FormattedMessage

   Some components use react-intl for text rendering (like Breadcrumbs, NavGroup, NavItem, etc.). Replace FormattedMessage with plain strings:

   Example: src/components/@extended/Breadcrumbs.jsx

Before :

....
// third-party
import { FormattedMessage } from 'react-intl';
...

export default function Breadcrumbs(){

  <Typography
        {...(main.url && { component: Link, to: main.url })}
        variant={window.location.pathname === main.url ? 'subtitle1' : 'h6'}
        sx={{ textDecoration: 'none' }}
        color={window.location.pathname === main.url ? 'text.primary' : 'text.secondary'}
      >
        {icons && <CollapseIcon style={iconSX} />}
          <FormattedMessage id={main?.title} />
        {main?.title}
  </Typography>
  }

After:

....
// third-party
// import { FormattedMessage } from 'react-intl';
...

export default function Breadcrumbs(){

  <Typography
        {...(main.url && { component: Link, to: main.url })}
        variant={window.location.pathname === main.url ? 'subtitle1' : 'h6'}
        sx={{ textDecoration: 'none' }}
        color={window.location.pathname === main.url ? 'text.primary' : 'text.secondary'}
      >
        {icons && <CollapseIcon style={iconSX} />}
          {main?.title}
        {main?.title}
  </Typography>
}

Repeat the same cleanup in:

• src/layout/ComponentLayout/Drawer/Navigation/NavGroup.jsx

• src/layout/ComponentLayout/Drawer/Navigation/NavItem.jsx

• src/layout/DashboardLayout/Drawer/DrawerContent/Navigation/NavCollapse.jsx

• src/layout/DashboardLayout/Drawer/DrawerContent/Navigation/NavGroup.jsx

• src/layout/DashboardLayout/Drawer/DrawerContent/Navigation/NavItem.jsx

NEXT (TS)

1. Update ProviderWrapper.tsx

   Open src/app/ProviderWrapper.tsx and remove the Locales provider.

src/app/ProviderWrapper.tsx

'use client';

import { ReactElement } from 'react';

// next
import { SessionProvider } from 'next-auth/react';

// project imports
import ThemeCustomization from 'themes';

// ❌ Removed Locales import
// import Locales from 'components/Locales';

import ScrollTop from 'components/ScrollTop';
import RTLLayout from 'components/RTLLayout';
import Snackbar from 'components/@extended/Snackbar';
import Notistack from 'components/third-party/Notistack';

import { ConfigProvider } from 'contexts/ConfigContext';

// ==============================|| APP - THEME, ROUTER, LOCAL ||============================== //

export default function ProviderWrapper({ children }: { children: ReactElement }) {
  return (
    <ConfigProvider>
      <ThemeCustomization>
        <RTLLayout>
          {/* <Locales> */}
            <ScrollTop>
              <SessionProvider refetchInterval={0}>
                <Notistack>
                  <Snackbar />
                  {children}
                </Notistack>
              </SessionProvider>
            </ScrollTop>
          {/* </Locales> */}
        </RTLLayout>
      </ThemeCustomization>
    </ConfigProvider>
  );
}

1. Delete Unused Files

   Remove the following files completely:

   • src/components/Locales.tsx

   • src/utils/locales/ (entire folder)

2. Clean Up Components Using FormattedMessage

   Some components use react-intl for text rendering (like Breadcrumbs, NavGroup, NavItem, etc.). Replace FormattedMessage with plain strings:

   Example: src/components/@extended/Breadcrumbs.tsx

Before :

....
// third-party
import { FormattedMessage } from 'react-intl';
...

export default function Breadcrumbs({

  <Typography
        {...(main.url && { component: Link, to: main.url as string })}
        variant={window.location.pathname === main.url ? 'subtitle1' : 'h6'}
        sx={{ textDecoration: 'none' }}
        color={window.location.pathname === main.url ? 'text.primary' : 'text.secondary'}
      >
        {icons && <CollapseIcon style={iconSX} />}
          <FormattedMessage id={main?.title as string} />
        {main?.title}
  </Typography>

After:

....
// third-party
// import { FormattedMessage } from 'react-intl';
...

export default function Breadcrumbs({

  <Typography
        {...(main.url && { component: Link, to: main.url as string })}
        variant={window.location.pathname === main.url ? 'subtitle1' : 'h6'}
        sx={{ textDecoration: 'none' }}
        color={window.location.pathname === main.url ? 'text.primary' : 'text.secondary'}
      >
        {icons && <CollapseIcon style={iconSX} />}
          {main?.title}
        {main?.title}
  </Typography>

Repeat the same cleanup in:

• src/layout/Component/Drawer/Navigation/NavGroup.tsx

• src/layout/Component/Drawer/Navigation/NavItem.tsx

• src/layout/Dashboard/Drawer/DrawerContent/Navigation/NavCollapse.tsx

• src/layout/Dashboard/Drawer/DrawerContent/Navigation/NavGroup.tsx

• src/layout/Dashboard/Drawer/DrawerContent/Navigation/NavItem.tsx

NEXT (JS)

1. Update ProviderWrapper.jsx

   Open src/app/ProviderWrapper.jsx and remove the Locales provider.

src/app/ProviderWrapper.jsx

'use client';

// next
import { SessionProvider } from 'next-auth/react';

// project imports
import ThemeCustomization from 'themes';

// ❌ Removed Locales import
// import Locales from 'components/Locales';

import ScrollTop from 'components/ScrollTop';
import RTLLayout from 'components/RTLLayout';
import Snackbar from 'components/@extended/Snackbar';
import Notistack from 'components/third-party/Notistack';

import { ConfigProvider } from 'contexts/ConfigContext';

// ==============================|| APP - THEME, ROUTER, LOCAL ||============================== //

export default function ProviderWrapper({ children }) {
  return (
    <ConfigProvider>
      <ThemeCustomization>
        <RTLLayout>
          {/* <Locales> */}
            <ScrollTop>
              <SessionProvider refetchInterval={0}>
                <Notistack>
                  <Snackbar />
                  {children}
                </Notistack>
              </SessionProvider>
            </ScrollTop>
          {/* </Locales> */}
        </RTLLayout>
      </ThemeCustomization>
    </ConfigProvider>
  );
}

1. Delete Unused Files

   Remove the following files completely:

   • src/components/Locales.jsx

   • src/utils/locales/ (entire folder)

2. Clean Up Components Using FormattedMessage

   Some components use react-intl for text rendering (like Breadcrumbs, NavGroup, NavItem, etc.). Replace FormattedMessage with plain strings:

   Example: src/components/@extended/Breadcrumbs.jsx

Before :

....
// third-party
import { FormattedMessage } from 'react-intl';
...

export default function Breadcrumbs(){

  <Typography
        {...(main.url && { component: Link, to: main.url })}
        variant={window.location.pathname === main.url ? 'subtitle1' : 'h6'}
        sx={{ textDecoration: 'none' }}
        color={window.location.pathname === main.url ? 'text.primary' : 'text.secondary'}
      >
        {icons && <CollapseIcon style={iconSX} />}
          <FormattedMessage id={main?.title} />
        {main?.title}
  </Typography>
  }

After:

....
// third-party
// import { FormattedMessage } from 'react-intl';
...

export default function Breadcrumbs(){

  <Typography
        {...(main.url && { component: Link, to: main.url })}
        variant={window.location.pathname === main.url ? 'subtitle1' : 'h6'}
        sx={{ textDecoration: 'none' }}
        color={window.location.pathname === main.url ? 'text.primary' : 'text.secondary'}
      >
        {icons && <CollapseIcon style={iconSX} />}
          {main?.title}
        {main?.title}
  </Typography>
}

Repeat the same cleanup in:

• src/layout/ComponentLayout/Drawer/Navigation/NavGroup.jsx

• src/layout/ComponentLayout/Drawer/Navigation/NavItem.jsx

• src/layout/DashboardLayout/Drawer/DrawerContent/Navigation/NavCollapse.jsx

• src/layout/DashboardLayout/Drawer/DrawerContent/Navigation/NavGroup.jsx

• src/layout/DashboardLayout/Drawer/DrawerContent/Navigation/NavItem.jsx