# Remove Internationalization

{% tabs %}
{% tab title="VITE (TS)" %}

1. ### Update `App.tsx`

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

{% code title="src/App.tsx" %}

```typescript
'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>
  );
}

```

{% endcode %}

2. ### Delete Unused Files

   Remove the following files completely:

   * `src/components/Locales.tsx`
   * `src/utils/locales/` (entire folder)

3. ### 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 :

```typescript
....
// 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**:

```typescript
....
// 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`
  {% endtab %}

{% tab title="VITE (JS)" %}

1. ### Update `App.jsx`

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

{% code title="src/App.jsx" %}

```javascript
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 />
    </>
  );
}
```

{% endcode %}

2. ### Delete Unused Files

   Remove the following files completely:

   * `src/components/Locales.jsx`
   * `src/utils/locales/` (entire folder)

3. ### 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 :

```javascript
....
// 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**:

```javascript
....
// 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`
  {% endtab %}

{% tab title="NEXT (TS)" %}

1. ### Update `ProviderWrapper.tsx`

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

{% code title="src/app/ProviderWrapper.tsx" %}

```typescript
'use client';

import { ReactElement } from 'react';

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

// material-ui
import InitColorSchemeScript from '@mui/material/InitColorSchemeScript';

// 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 { DEFAULT_THEME_MODE } from 'config';
import { ConfigProvider } from 'contexts/ConfigContext';

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

export default function ProviderWrapper({ children }: { children: ReactElement }) {
  return (
    <InitColorSchemeScript modeStorageKey="theme-mode" attribute="data-color-scheme" defaultMode={DEFAULT_THEME_MODE} />
    <ConfigProvider>
      <ThemeCustomization>
        <RTLLayout>
          {/* <Locales> */}
            <ScrollTop>
              <SessionProvider refetchInterval={0}>
                <Notistack>
                  <Snackbar />
                  {children}
                </Notistack>
              </SessionProvider>
            </ScrollTop>
          {/* </Locales> */}
        </RTLLayout>
      </ThemeCustomization>
    </ConfigProvider>
  );
}

```

{% endcode %}

2. ### Delete Unused Files

   Remove the following files completely:

   * `src/components/Locales.tsx`
   * `src/utils/locales/` (entire folder)

3. ### 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 :

```typescript
....
// 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**:

```typescript
....
// 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`
  {% endtab %}

{% tab title="NEXT (JS)" %}

1. ### Update `ProviderWrapper.jsx`

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

{% code title="src/app/ProviderWrapper.jsx" %}

```javascript
'use client';

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

// material-ui
import InitColorSchemeScript from '@mui/material/InitColorSchemeScript';

// 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 { DEFAULT_THEME_MODE } from 'config';
import { ConfigProvider } from 'contexts/ConfigContext';

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

export default function ProviderWrapper({ children }) {
  return (
    <InitColorSchemeScript modeStorageKey="theme-mode" attribute="data-color-scheme" defaultMode={DEFAULT_THEME_MODE} />
    <ConfigProvider>
      <ThemeCustomization>
        <RTLLayout>
          {/* <Locales> */}
            <ScrollTop>
              <SessionProvider refetchInterval={0}>
                <Notistack>
                  <Snackbar />
                  {children}
                </Notistack>
              </SessionProvider>
            </ScrollTop>
          {/* </Locales> */}
        </RTLLayout>
      </ThemeCustomization>
    </ConfigProvider>
  );
}

```

{% endcode %}

2. ### Delete Unused Files

   Remove the following files completely:

   * `src/components/Locales.jsx`
   * `src/utils/locales/` (entire folder)

3. ### 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 :

```javascript
....
// 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**:

```javascript
....
// 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`
  {% endtab %}
  {% endtabs %}