Able Pro Next.js Dashboard Template

https://phoenixcoded.gitbook.io/able-pro/nextjs
Admin
Able Pro is a Material UI Next.js dashboard template that provides a comprehensive set of...
Tokens:13,287
Snippets:69
Trust Score:10
Update:1 year ago
Show doc for...
Tokens:
Raw
### Start Development Server

Source: https://phoenixcoded.gitbook.io/able-pro/nextjs/quick-start

Starts the local development server for the Able Pro project, typically running on http://localhost:3000.

```bash
c:\ablepro-material-next> npm run dev
```

--------------------------------

### Install Project Packages using npm

Source: https://phoenixcoded.gitbook.io/able-pro/nextjs/quick-start

Installs all the necessary project dependencies using the npm package manager.

```bash
c:\able-pro-material-next> npm i
```

--------------------------------

### Build for Production (Yarn or npm)

Source: https://phoenixcoded.gitbook.io/able-pro/nextjs/quick-start

Builds the Able Pro project for production deployment using either yarn or npm.

```bash
c:\able-pro-material-next> yarn build
or
c:\able-pro-material-next> npm run build
```

--------------------------------

### Navigate to Project Directory (Windows)

Source: https://phoenixcoded.gitbook.io/able-pro/nextjs/quick-start

Changes the current directory to the Able Pro material Next.js project folder on a Windows system.

```bash
c:\>cd able-pro-material-next
```

--------------------------------

### Check npm Version

Source: https://phoenixcoded.gitbook.io/able-pro/nextjs/pre-requisites

This command verifies the installation and version of npm, a package manager used for the Able Pro project. If npm is not recognized, it indicates it's not installed.

```bash
c:\> npm -v
11.5.2
```

```bash
c:\> npm -v
'npm' is not recognized as an internal or external command,
operable program or batch file.
```

--------------------------------

### Theme Configuration with Preset Color (JavaScript)

Source: https://phoenixcoded.gitbook.io/able-pro/nextjs/color-presets

Example of theme configuration in JavaScript, showing how to set the `presetColor` property to select a specific color theme.

```javascript
// ==============================|| THEME CONSTANT ||============================== //
...
...
// ==============================|| THEME CONFIG ||============================== //

const config = {
  ...
  presetColor: 'default',
  ...
};

export default config;
```

--------------------------------

### Theme Configuration with Preset Color (TypeScript)

Source: https://phoenixcoded.gitbook.io/able-pro/nextjs/color-presets

Example of theme configuration in TypeScript, showing how to set the `presetColor` property to select a specific color theme.

```typescript
// types
import { DefaultConfigProps } from 'types/config';

// ==============================|| THEME CONSTANT ||============================== //
...
...
// ==============================|| THEME CONFIG ||============================== //

const config: DefaultConfigProps = {
  ...
  presetColor: 'default',
  ...
};

export default config;
```

--------------------------------

### Set Login as First Page (Next.js JS)

Source: https://phoenixcoded.gitbook.io/able-pro/nextjs/how-to/login-as-first-page

This JavaScript code snippet for Next.js illustrates how to make the login page the default starting page by using `GuestGuard` to wrap the `LoginPage` component within the `app/page.jsx` file.

```javascript
// project-imports
import GuestGuard from 'utils/route-guard/GuestGuard';
import LoginPage from 'app/(auth)/login/page';

export default function Login() {
  return (
    <GuestGuard>
      <LoginPage />
    </GuestGuard>
  );
}
```

--------------------------------

### Check Node.js Version

Source: https://phoenixcoded.gitbook.io/able-pro/nextjs/pre-requisites

This command checks if Node.js is installed and displays its version. Node.js is a primary prerequisite for the Able Pro project.

```bash
c:\> node -v
v22.x.x
```

--------------------------------

### Triggering Snackbar from a Component (TypeScript)

Source: https://phoenixcoded.gitbook.io/able-pro/nextjs/state-management

Shows an example of how to call the openSnackbar function from a component, passing the desired notification details to display a success message.

```typescript
... 
import { openSnackbar } from 'api/snackbar';
// types
import { SnackbarProps } from 'types/snackbar';
...

// ==============================|| INVOICE - CREATE ||============================== //

const Create = () => {
  ...
  const handlerCreate = (values: any) => {
    const newList: InvoiceList = {
      ...
    };
    ...
    openSnackbar({
      open: true,
      message: 'Invoice Added successfully',
      anchorOrigin: { vertical: 'top', horizontal: 'right' },
      variant: 'alert',
      alert: {
        color: 'success'
      }
    } as SnackbarProps);
    ...
  };



  return (
    <MainCard>
      ...
    </MainCard>
  );
};

export default Create;
```

--------------------------------

### Fetch User List with Full URL (Next.js JS)

Source: https://phoenixcoded.gitbook.io/able-pro/nextjs/axios-api-calls

Fetches a list of users from a specified API endpoint using Axios with a full URL. This example uses React hooks (useState, useCallback) and demonstrates the JavaScript implementation for making API calls. It includes basic error logging.

```javascript
import { useCallback, useState, useEffect } from 'react';

// third-party
import axios from 'axios';

// ==============================|| AXIOS - USER ||============================== //

function UserList() {
  const [users, setUsers] = useState([]);

  const getUsers = useCallback(async () => {
    try {
      const response = await axios.get('https://www.domain-xyz.com/api/users');
      setUsers(response.data.users);
    } catch (error) {
      console.log(error);
    }
  }, []);

  useEffect(() => {
    getUsers();
  }, [getUsers]);

  return (
    <div>
      {users.map((user, index) => (
        <div key={index}>{user.name}</div>
      ))}
    </div>
  );
}

```

--------------------------------

### Fetch User List with Full URL (Next.js TS)

Source: https://phoenixcoded.gitbook.io/able-pro/nextjs/axios-api-calls

Fetches a list of users from a specified API endpoint using Axios with a full URL. This example uses React hooks (useState, useCallback) and assumes a UserProfile type. It handles potential errors during the API call.

```typescript
import { useCallback, useState, useEffect } from 'react';

// third-party
import axios from 'axios';

// ==============================|| AXIOS - USER ||============================== //

type UserProfile = {
  name: string;
};

function UserList() {
  const [users, setUsers] = useState<UserProfile[]>([]);

  const getUsers = useCallback(async () => {
    try {
      const response = await axios.get('https://www.domain-xyz.com/api/users');
      setUsers(response.data.users);
    } catch (error) {
      console.log(error);
    }
  }, []);

  useEffect(() => {
    getUsers();
  }, [getUsers]);

  return (
    <div>
      {users.map((user, index) => (
        <div key={index}>{user.name}</div>
      ))}
    </div>
  );
}

```

--------------------------------

### Enable Corepack for Yarn

Source: https://phoenixcoded.gitbook.io/able-pro/nextjs/pre-requisites

Instructions to enable Corepack, which manages Yarn versions for the project. Corepack is included with Node.js 16.10+ and handles the correct Yarn version automatically.

```bash
corepack enable
```

--------------------------------

### Default Theme Configuration (TypeScript)

Source: https://phoenixcoded.gitbook.io/able-pro/nextjs/project-configuration

Defines the default theme configuration for the Able Pro NextJS template using TypeScript. It includes settings for font family, theme mode, menu orientation, drawer behavior, and more. This configuration serves as the single source of truth for the project's defaults.

```typescript
// next
import { Inter } from 'next/font/google';

// types
import { DefaultConfigProps } from 'types/config';

// ==============================|| THEME CONSTANT ||============================== //

export const facebookColor = '#3b5998';
export const linkedInColor = '#0e76a8';

export const APP_DEFAULT_PATH = '/dashboard/default';
export const HORIZONTAL_MAX_ITEM = 8;
export const DRAWER_WIDTH = 280;
export const MINI_DRAWER_WIDTH = 90;
export const HEADER_HEIGHT = 74;
export const GRID_COMMON_SPACING = { xs: 2, md: 2.5 };

const inter = Inter({
  subsets: ['latin'],
  fallback: ['sans-serif'],
  weight: ['300', '400', '500', '700'],
  adjustFontFallback: false
});

export enum ThemeMode {
  LIGHT = 'light',
  DARK = 'dark',
  AUTO = 'auto'
}

export enum MenuOrientation {
  VERTICAL = 'vertical',
  HORIZONTAL = 'horizontal'
}

export enum ThemeDirection {
  LTR = 'ltr',
  RTL = 'rtl'
}

export enum NavActionType {
  FUNCTION = 'function',
  LINK = 'link'
}

export enum Gender {
  MALE = 'Male',
  FEMALE = 'Female'
}

export enum DropzopType {
  default = 'DEFAULT',
  standard = 'STANDARD'
}

// ==============================|| THEME CONFIG ||============================== //

const config: DefaultConfigProps = {
  fontFamily: inter.style.fontFamily,
  i18n: 'en',
  menuOrientation: MenuOrientation.VERTICAL,
  menuCaption: true,
  miniDrawer: false,
  container: true,
  mode: ThemeMode.LIGHT,
  presetColor: 'default',
  themeDirection: ThemeDirection.LTR,
  themeContrast: false
};

export default config;
```

--------------------------------

### Fetch Related Products with SWR (TypeScript)

Source: https://phoenixcoded.gitbook.io/able-pro/nextjs/axios-api-calls

Uses SWR and Axios to fetch related products. Initializes data with useSWR and provides memoized values for product data, loading, error, and validation states. Dependencies include SWR and Axios.

```typescript
import axios, { AxiosRequestConfig } from 'axios';
import { getSession } from 'next-auth/react';

const axiosServices = axios.create({ baseURL: import.meta.env.VITE_APP_API_URL || 'http://localhost:3010/' });

// ==============================|| AXIOS - FOR MOCK SERVICES ||============================== //

axiosServices.interceptors.request.use(
  async (config) => {
    const session = await getSession();
    if (session?.token.accessToken) {
      config.headers['Authorization'] = `Bearer ${session?.token.accessToken}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);
```

--------------------------------

### Color Preset File Structure (TypeScript)

Source: https://phoenixcoded.gitbook.io/able-pro/nextjs/color-presets

Illustrates the directory structure for TypeScript color preset files within the Able Pro project. These files define different color themes.

```typescript
...
├── default.ts
├── theme1.ts
├── ..
├── ..
├── ..
├── theme8.ts
...
```

--------------------------------

### Create Theme with Customizations (React JSX)

Source: https://phoenixcoded.gitbook.io/able-pro/nextjs/theme-style-configuration

This snippet demonstrates how to create and apply a theme using Material-UI's `createTheme` and `ThemeProvider` in a React application. It includes setting up Emotion cache and global styles.

```jsx
      typography: themeTypography
    }),
    [themeDirection, theme, themeTypography, themeCustomShadows]
  );

  const themes = createTheme(themeOptions);
  themes.components = componentsOverride(themes);

  return (
    <StyledEngineProvider injectFirst>
      <NextAppDirEmotionCacheProvider options={{ key: 'mui' }}>
        <ThemeProvider theme={themes}>
          <CssBaseline enableColorScheme />
          <GlobalStyles />
          {children}
        </ThemeProvider>
      </NextAppDirEmotionCacheProvider>
    </StyledEngineProvider>
  );
}

ThemeCustomization.propTypes = { children: PropTypes.node };
```

--------------------------------

### Snackbar Initial State (TypeScript)

Source: https://phoenixcoded.gitbook.io/able-pro/nextjs/state-management

Defines the initial configuration for the Snackbar component, including message, position, variant, and transition effects. This state is managed using SWR.

```typescript
const initialState: SnackbarProps = {
  action: false,
  open: false,
  message: 'Note archived',
  anchorOrigin: {
    vertical: 'bottom',
    horizontal: 'right'
  },
  variant: 'default',
  alert: {
    color: 'primary',
    variant: 'filled'
  },
  transition: 'Fade',
  close: false,
  actionButton: false,
  maxStack: 3,
  dense: false,
  iconVariant: 'usedefault'
};
```

--------------------------------

### Default Theme Configuration (JavaScript)

Source: https://phoenixcoded.gitbook.io/able-pro/nextjs/project-configuration

Provides the default theme configuration for the Able Pro NextJS template using JavaScript. This version uses immediately invoked function expressions (IIFEs) to define enums for various configuration options, mirroring the TypeScript version's functionality.

```javascript
// next
import { Inter } from 'next/font/google';

// ==============================|| THEME CONSTANT ||============================== //

export const facebookColor = '#3b5998';
export const linkedInColor = '#0e76a8';

export const APP_DEFAULT_PATH = '/dashboard/default';
export const HORIZONTAL_MAX_ITEM = 8;
export const DRAWER_WIDTH = 280;
export const MINI_DRAWER_WIDTH = 90;
export const HEADER_HEIGHT = 74;
export const GRID_COMMON_SPACING = { xs: 2, md: 2.5 };

const inter = Inter({
  subsets: ['latin'],
  fallback: ['sans-serif'],
  weight: ['300', '400', '500', '700'],
  adjustFontFallback: false
});

export let ThemeMode;

(function (ThemeMode) {
  ThemeMode['LIGHT'] = 'light';
  ThemeMode['DARK'] = 'dark';
  ThemeMode['AUTO'] = 'auto';
})(ThemeMode || (ThemeMode = {}));

export let MenuOrientation;

(function (MenuOrientation) {
  MenuOrientation['VERTICAL'] = 'vertical';
  MenuOrientation['HORIZONTAL'] = 'horizontal';
})(MenuOrientation || (MenuOrientation = {}));

export let ThemeDirection;

(function (ThemeDirection) {
  ThemeDirection['LTR'] = 'ltr';
  ThemeDirection['RTL'] = 'rtl';
})(ThemeDirection || (ThemeDirection = {}));

export let NavActionType;

(function (NavActionType) {
  NavActionType['FUNCTION'] = 'function';
  NavActionType['LINK'] = 'link';
})(NavActionType || (NavActionType = {}));

export let Gender;

(function (Gender) {
  Gender['MALE'] = 'Male';
  Gender['FEMALE'] = 'Female';
})(Gender || (Gender = {}));

export let DropzopType;

(function (DropzopType) {
  DropzopType['default'] = 'DEFAULT';
  DropzopType['standard'] = 'STANDARD';
})(DropzopType || (DropzopType = {}));

// ==============================|| THEME CONFIG ||============================== //

const config = {
  fontFamily: inter.style.fontFamily,
  i18n: 'en',
  menuOrientation: MenuOrientation.VERTICAL,
  menuCaption: true,
  miniDrawer: false,
  container: true,
  mode: ThemeMode.LIGHT,
  presetColor: 'default',
  themeDirection: ThemeDirection.LTR,
  themeContrast: false
};

export default config;
```

--------------------------------

### Set Login as First Page (Next.js TS)

Source: https://phoenixcoded.gitbook.io/able-pro/nextjs/how-to/login-as-first-page

This TypeScript code snippet for Next.js demonstrates how to set the login page as the first page by wrapping the `LoginPage` component with `GuestGuard` in the `app/page.tsx` file.

```typescript
// project-imports
  import GuestGuard from 'utils/route-guard/GuestGuard';
  import LoginPage from 'app/(auth)/login/page';
  
  export default function Login() {
    return (
      <GuestGuard>
        <LoginPage />
      </GuestGuard>
    );
  }
```

--------------------------------

### Fetch Menu Data with useSWR (TypeScript)

Source: https://phoenixcoded.gitbook.io/able-pro/nextjs/how-to/render-menu-from-the-backend

This TypeScript snippet demonstrates fetching menu data from a backend API using the `useSWR` hook. It includes data memoization and handling for nested menu items, returning menu data, loading state, error state, and validation status.

```typescript
const endpoints = {
  key: 'api/menu',
  dashboard: '/dashboard' // server URL
};

export function useGetMenu() {
  const { data, isLoading, error, isValidating } = useSWR(endpoints.key + endpoints.dashboard, fetcher, {
    revalidateIfStale: false,
    revalidateOnFocus: false,
    revalidateOnReconnect: false
  });

  const memoizedValue = useMemo(() => {
    let updatedMenu = data?.dashboard;

    if (updatedMenu && Array.isArray(updatedMenu.children) && updatedMenu.children.length > 0) {
      updatedMenu = {
        ...updatedMenu,
        children: updatedMenu.children.map((group: NavItemType) => {
          if (Array.isArray(group.children)) {
            return {
              ...group,
              children: [...group.children, staticMenuItem]
            };
          }
          return group;
        })
      };
    }

    return {
      menu: updatedMenu as NavItemType,
      menuLoading: isLoading,
      menuError: error,
      menuValidating: isValidating,
      menuEmpty: !isLoading && !data?.length
    };
  }, [data, error, isLoading, isValidating]);

  return memoizedValue;
}
```

--------------------------------

### Color Preset File Structure (JavaScript)

Source: https://phoenixcoded.gitbook.io/able-pro/nextjs/color-presets

Illustrates the directory structure for JavaScript color preset files within the Able Pro project. These files define different color themes.

```javascript
...
├── default.js
├── theme1.js
├── ..
├── ..
├── ..
├── theme8.js
...
```

--------------------------------

### Fetch Menu Data with useSWR (JavaScript)

Source: https://phoenixcoded.gitbook.io/able-pro/nextjs/how-to/render-menu-from-the-backend

This JavaScript snippet shows how to fetch menu data using `useSWR`. It handles the memoization of fetched data and incorporates logic to add static menu items to nested children arrays, returning the processed menu and associated states.

```javascript
const endpoints = {
  key: 'api/menu',
  dashboard: '/dashboard' // server URL
};

export function useGetMenu() {
  const { data, isLoading, error, isValidating } = useSWR(endpoints.key + endpoints.dashboard, fetcher, {
    revalidateIfStale: false,
    revalidateOnFocus: false,
    revalidateOnReconnect: false
  });

  const memoizedValue = useMemo(() => {
    let updatedMenu = data?.dashboard;

    if (updatedMenu && Array.isArray(updatedMenu.children) && updatedMenu.children.length > 0) {
      updatedMenu = {
        ...updatedMenu,
        children: updatedMenu.children.map((group) => {
          if (Array.isArray(group.children)) {
            return {
              ...group,
              children: [...group.children, staticMenuItem]
            };
          }
          return group;
        })
      };
    }

    return {
      menu: updatedMenu,
      menuLoading: isLoading,
      menuError: error,
      menuValidating: isValidating,
      menuEmpty: !isLoading && !data?.length
    };
  }, [data, error, isLoading, isValidating]);

  return memoizedValue;
}
```

--------------------------------

### Fetch Related Products with SWR (JavaScript)

Source: https://phoenixcoded.gitbook.io/able-pro/nextjs/axios-api-calls

Fetches related products using SWR and Axios in JavaScript. It mirrors the TypeScript functionality by using useSWR for data fetching and provides memoized states for related products, loading, errors, and validation. Relies on SWR and Axios.

```javascript
import axios from 'axios';
import { getSession } from 'next-auth/react';

const axiosServices = axios.create({ baseURL: import.meta.env.VITE_APP_API_URL || 'http://localhost:3010/' });

// ==============================|| AXIOS - FOR MOCK SERVICES ||============================== //

axiosServices.interceptors.request.use(
  async (config) => {
    const session = await getSession();
    if (session?.token.accessToken) {
      config.headers['Authorization'] = `Bearer ${session?.token.accessToken}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);
```

--------------------------------

### Snackbar Initial State (JavaScript)

Source: https://phoenixcoded.gitbook.io/able-pro/nextjs/state-management

Defines the default configuration for the Snackbar component in JavaScript, specifying message, positioning, and appearance. This state is managed using SWR.

```javascript
const initialState = {
  action: false,
  open: false,
  message: 'Note archived',
  anchorOrigin: {
    vertical: 'bottom',
    horizontal: 'right'
  },
  variant: 'default',
  alert: {
    color: 'primary',
    variant: 'filled'
  },
  transition: 'Fade',
  close: false,
  actionButton: false,
  maxStack: 3,
  dense: false,
  iconVariant: 'usedefault'
};
```

--------------------------------

### Able Pro Next.js (TypeScript) Folder Structure

Source: https://phoenixcoded.gitbook.io/able-pro/nextjs/folder-structure

This snippet displays the folder structure for the Able Pro Material Next.js project using TypeScript. It includes directories for public assets, source files (API, app routes, components, contexts, hooks, layouts, menu items, sections, themes, types, utils, views), configuration files, and package management.

```tree
..\n├── public\n│   ├── assets             -> images in different directories\n│   │   ├── images\n│   │   │   ├── auth\n│   │   │   ├── cards\n│   │   │   ├── ...\n│   │   ├── third-party\n├── src              \n│   ├── api\n│   ├── app                -> different routes based on layouts\n│   │   ├── (auth)         \n│   │   ├── (blank)     \n│   │   ├── (component)    \n│   │   ├── (dashboard)       \n│   │   │   ├── apps\n│   │   │   ├── charts\n│   │   │   ├── ...\n│   │   ├── (simple)       -> Layout for simple\n│   ├── components         -> components used in different pages\n│   │   ├── @extended\n│   │   ├── cards\n│   │   ├── customization\n│   │   ├── logo\n│   │   ├── ...\n│   ├── contexts           -> State context for Login and other\n│   ├── data               -> Static data\n│   ├── hooks              -> Custom hooks\n│   ├── layout\n│   │   ├── ComponentLayout     -> Layout for components showcase\n│   │   ├── DashboardLayout     -> Layout for Dashboard\n│   │   ├── SimpleLayout        -> Layout for simple   \n│   ├── menu-items              -> menu items for each main menu\n│   │   ├── application.js\n│   │   ├── dashboard.js\n│   │   ├── ...\n│   ├── sections           -> This contains different sections used only for pages\n│   ├── themes             -> Contains application style and theme\n│   ├── types              -> common types for Typescript. Exist only in Typescript\n│   ├── utils\n│   │   ├── locales        -> different locale json files\n│   │   ├── route-guard    -> Auth guard to prevent unexpected navigations\n│   │   ├── ...\n│   ├── views              -> list of Next.js files and directory\n│   │   ├── app\n│   │   ├── dashboard\n│   │   ├── ...\n│   ├── config.ts          -> Template constant value and live customization\n├── eslint.config.mjs\n├── .prettierrc\n├── tsconfig.json\n├── next.config.ts\n├── package-lock.json      -> Package lock file.\n├── package.json           -> Package json file.\n├── README.md\n├── yarn.lock              -> yarn lock file.  \n
```

--------------------------------

### Add Total Users Widget to Sample Page (React)

Source: https://phoenixcoded.gitbook.io/able-pro/nextjs/integration/seed

This code snippet demonstrates how to integrate the 'Total Users' widget, represented by 'EcommerceDataCard', into a sample page in a React project. It includes necessary imports from Material-UI and custom project components, along with defining the component structure and its props.

```javascript
// material-ui
import { useTheme } from '@mui/material/styles';
import { Grid, Typography } from '@mui/material';

// project-import
import EcommerceDataCard from 'components/cards/statistics/EcommerceDataCard';
import EcommerceDataChart from './EcommerceDataChart';

// assets
import { ArrowUp, Wallet3 } from 'iconsax-react';

// ==============================|| SAMPLE PAGE ||============================== //

const SamplePage = () => {
  const theme = useTheme();

  return (
    <Grid container>
      <Grid item xs={12} sm={6} lg={3}>
        <EcommerceDataCard
          title="All Earnings"
          count="$3000"
          iconPrimary={<Wallet3 />}
          percentage={
            <Typography color="primary" sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
              <ArrowUp size={16} style={{ transform: 'rotate(45deg)' }} /> 30.6%
            </Typography>
          }
        >
          <EcommerceDataChart color={theme.palette.primary.main} />
        </EcommerceDataCard>
      </Grid>
    </Grid>
  );
};

export default SamplePage;
```

--------------------------------

### Snackbar State Initialization with SWR (TypeScript)

Source: https://phoenixcoded.gitbook.io/able-pro/nextjs/state-management

Initializes the Snackbar state using the useSWR hook. It fetches the initial state and memoizes it for efficient access within the application. Revalidation is disabled for static state.

```typescript
export function useGetSnackbar() {
  const { data } = useSWR(endpoints.key, () => initialState, {
    revalidateIfStale: false,
    revalidateOnFocus: false,
    revalidateOnReconnect: false
  });

  const memoizedValue = useMemo(() => ({ snackbar: data! }), [data]);

  return memoizedValue;
}
```

--------------------------------

### Mutate Product List with Axios Post (JavaScript)

Source: https://phoenixcoded.gitbook.io/able-pro/nextjs/axios-api-calls

Mutates the product list using an Axios POST request in JavaScript. It updates the local state by calling the `mutate` function with the new product data received from the API. Requires `axios` and `mutate` dependencies.

```javascript
export async function productFilter(filter) {
  const newProducts = await axios.post(endpoints.key + endpoints.filter, { filter });

  // to update local state based on key
  mutate(
    endpoints.key + endpoints.list,
    (currentProducts) => {
      return {
        ...currentProducts,
        products: newProducts.data
      };
    },
    false
  );
}
```

--------------------------------

### Able Pro Next.js (JavaScript) Folder Structure

Source: https://phoenixcoded.gitbook.io/able-pro/nextjs/folder-structure

This snippet illustrates the folder structure for the Able Pro Material Next.js project using JavaScript. It mirrors the TypeScript version but uses JavaScript configuration files like `jsconfig.json` and `next.config.js`.

```tree
..\n├── public\n│   ├── assets             -> images in different directories\n│   │   ├── images\n│   │   │   ├── auth\n│   │   │   ├── cards\n│   │   │   ├── ...\n│   │   ├── third-party\n├── src              \n│   ├── api\n│   ├── app                -> different routes based on layouts\n│   │   ├── (auth)         \n│   │   ├── (blank)     \n│   │   ├── (component)    \n│   │   ├── (dashboard)       \n│   │   │   ├── apps\n│   │   │   ├── charts\n│   │   │   ├── ...\n│   │   ├── (simple)       -> Layout for simple\n│   ├── components         -> components used in different pages\n│   │   ├── @extended\n│   │   ├── cards\n│   │   ├── customization\n│   │   ├── logo\n│   │   ├── ...\n│   ├── contexts           -> State context for Login and other\n│   ├── data               -> Static data\n│   ├── hooks              -> Custom hooks\n│   ├── layout\n│   │   ├── ComponentLayout     -> Layout for components showcase\n│   │   ├── DashboardLayout     -> Layout for Dashboard\n│   │   ├── SimpleLayout        -> Layout for simple   \n│   ├── menu-items              -> menu items for each main menu\n│   │   ├── application.js\n│   │   ├── dashboard.js\n│   │   ├── ...\n│   ├── sections           -> This contains different sections used only for pages\n│   ├── themes             -> Contains application style and theme\n│   ├── utils\n│   │   ├── locales        -> different locale json files\n│   │   ├── route-guard    -> Auth guard to prevent unexpected navigations\n│   │   ├── ...\n│   ├── views              -> list of Next.js files and directory\n│   │   ├── app\n│   │   ├── dashboard\n│   │   ├── ...\n│   ├── config.js          -> Template constant value and live customization\n├── eslint.config.mjs\n├── .prettierrc\n├── jsconfig.json\n├── next-env.d.js\n├── next.config.js\n├── package-lock.json      -> Package lock file.\n├── package.json           -> Package json file.\n├── README.md\n├── yarn.lock              -> yarn lock file.  \n
```

--------------------------------

### Integrate Backend Menu in Navigation (JavaScript)

Source: https://phoenixcoded.gitbook.io/able-pro/nextjs/how-to/render-menu-from-the-backend

This JavaScript code snippet demonstrates the integration of backend-fetched menu items into the navigation component. It conditionally modifies the `menuItem` structure based on the `menuLoading` state and the availability of dashboard menu data, ensuring the menu is rendered correctly.

```javascript
import { useGetMenu } from 'api/menu';
import menuItem from 'menu-items';
import { MenuFromAPI } from 'menu-items/dashboard';

```

--------------------------------

### Snackbar Component Usage (TypeScript)

Source: https://phoenixcoded.gitbook.io/able-pro/nextjs/state-management

Demonstrates how to import and use the useGetSnackbar hook within the Snackbar component to access and display notification data. It also includes animation options.

```typescript
... 
import { closeSnackbar, useGetSnackbar } from 'api/snackbar';
...

// animation options
const animation: KeyedObject = {
  SlideLeft: TransitionSlideLeft,
  SlideUp: TransitionSlideUp,
  SlideRight: TransitionSlideRight,
  SlideDown: TransitionSlideDown,
  Grow: GrowTransition,
  Fade
};

// ==============================|| SNACKBAR ||============================== //

export default function Snackbar() {
  const { snackbar } = useGetSnackbar();
  ...
  ...
};
```

--------------------------------

### Integrate Backend Menu in Navigation (TypeScript)

Source: https://phoenixcoded.gitbook.io/able-pro/nextjs/how-to/render-menu-from-the-backend

This TypeScript code integrates dynamically fetched menu items into the application's navigation. It uses `useLayoutEffect` to conditionally update the `menuItem` structure based on loading states and the presence of dashboard menu data.

```typescript
import { useGetMenu } from 'api/menu';
import menuItem from 'menu-items';
import { MenuFromAPI } from 'menu-items/dashboard';

function isFound(arr: any, str: string) {
  return arr.items.some((element: any) => {
    if (element.id === str) {
      return true;
    }
    return false;
  });
}

// ==============================|| DRAWER CONTENT - NAVIGATION ||============================== //

export default function Navigation() {
  const { menuLoading } = useGetMenu();
  
  const [menuItems, setMenuItems] = useState<{ items: NavItemType[] }>({ items: [] });

  const dashboardMenu = MenuFromAPI();
  useLayoutEffect(() => {
    if (menuLoading && !isFound(menuItem, 'group-dashboard-loading')) {
      menuItem.items.splice(0, 0, dashboardMenu);
      setMenuItems({ items: [...menuItem.items] });
    } else if (!menuLoading && dashboardMenu?.id !== undefined && !isFound(menuItem, 'group-dashboard')) {
      menuItem.items.splice(0, 1, dashboardMenu);
      setMenuItems({ items: [...menuItem.items] });
    } else {
      setMenuItems({ items: [...menuItem.items] });
    }
    // eslint-disable-next-line
  }, [menuLoading]);

  ...
```

--------------------------------

### Mutate Product List with Axios Post (TypeScript)

Source: https://phoenixcoded.gitbook.io/able-pro/nextjs/axios-api-calls

Allows mutation of the product list via an Axios POST request. It updates local state using the `mutate` function from SWR after a successful API call. This function takes a `filter` object as input and expects `axios` and `mutate` to be available.

```typescript
export async function productFilter(filter: ProductsFilter) {
  const newProducts = await axios.post(endpoints.key + endpoints.filter, { filter });

  // to update local state based on key
  mutate(
    endpoints.key + endpoints.list,
    (currentProducts: any) => {
      return {
        ...currentProducts,
        products: newProducts.data
      };
    },
    false
  );
}
```

--------------------------------

### Navigation Menu Update Logic (React/Next.js)

Source: https://phoenixcoded.gitbook.io/able-pro/nextjs/how-to/render-menu-from-the-backend

This React component's `useLayoutEffect` hook manages the dynamic updating of the navigation menu. It fetches menu data, checks loading states, and conditionally inserts or replaces menu items based on predefined IDs. Dependencies include `menuLoading` and custom hook `useGetMenu`, `MenuFromAPI`.

```javascript
export default function Navigation() {
  const { menuLoading } = useGetMenu();
  
  const [menuItems, setMenuItems] = useState({ items: [] });

  const dashboardMenu = MenuFromAPI();
  useLayoutEffect(() => {
    if (menuLoading && !isFound(menuItem, 'group-dashboard-loading')) {
      menuItem.items.splice(0, 0, dashboardMenu);
      setMenuItems({ items: [...menuItem.items] });
    } else if (!menuLoading && dashboardMenu?.id !== undefined && !isFound(menuItem, 'group-dashboard')) {
      menuItem.items.splice(0, 1, dashboardMenu);
      setMenuItems({ items: [...menuItem.items] });
    } else {
      setMenuItems({ items: [...menuItem.items] });
    }
    // eslint-disable-next-line
  }, [menuLoading]);

  // ... rest of the component
```

--------------------------------

### Snackbar Component Implementation in NextJS

Source: https://phoenixcoded.gitbook.io/able-pro/nextjs/state-management

This snippet shows the structure of the Snackbar component in a NextJS application. It imports necessary functions like `closeSnackbar` and `useGetSnackbar` from the 'api/snackbar' module and defines animation options for transitions. The component utilizes `useGetSnackbar` to manage Snackbar state and trigger updates.

```jsx
import { closeSnackbar, useGetSnackbar } from 'api/snackbar';
...

// animation options
const animation = {
  SlideLeft: TransitionSlideLeft,
  SlideUp: TransitionSlideUp,
  SlideRight: TransitionSlideRight,
  SlideDown: TransitionSlideDown,
  Grow: GrowTransition,
  Fade
};

// ==============================|| SNACKBAR ||============================== //

export default function Snackbar() {
  const { snackbar } = useGetSnackbar();
  ...
  ...
};
```

--------------------------------

### Fetch Menu Data using SWR and Axios (JavaScript)

Source: https://phoenixcoded.gitbook.io/able-pro/nextjs/how-to/remove-menu-render-from-backend

This snippet shows how to create a custom hook `useGetMenu` to fetch dashboard menu data. It utilizes `useSWR` for data fetching and caching, and an `axios` instance configured via `fetcher` for API calls. The hook returns menu data, loading, error, and validation states.

```javascript
import { fetcher } from 'utils/axios';

export const endpoints = {
  ... 
  dashboard: '/dashboard' // server URL
};

export function useGetMenu() {
  const { data, isLoading, error, isValidating } = useSWR(endpoints.key + endpoints.dashboard, fetcher, {
	revalidateIfStale: false,
	revalidateOnFocus: false,
	revalidateOnReconnect: false
  });

  const memoizedValue = useMemo(
	() => ({
	  menu: data?.dashboard,
	  menuLoading: isLoading,
	  menuError: error,
	  menuValidating: isValidating,
	  menuEmpty: !isLoading && !data?.length
	}),
	[data, error, isLoading, isValidating]
  );

  return memoizedValue;
}
```

--------------------------------

### Calling openSnackbar from InvoiceCreate Component

Source: https://phoenixcoded.gitbook.io/able-pro/nextjs/state-management

This React component snippet demonstrates how to use the `openSnackbar` function from the 'api/snackbar' module within a NextJS application. The `handlerCreate` function is triggered upon a successful creation event, where it calls `openSnackbar` to display a success message. It configures the Snackbar with specific properties like `open`, `message`, `anchorOrigin`, `variant`, and `alert` color.

```jsx
import { openSnackbar } from 'api/snackbar';
...

// ==============================|| INVOICE - CREATE ||============================== //

 function Create({ lists, invoiceMaster }) {
  ...
  const handlerCreate = (values) => {
    const newList: InvoiceList = {
      ...
    };
    ...
    openSnackbar({
      open: true,
      message: 'Invoice Added successfully',
      anchorOrigin: { vertical: 'top', horizontal: 'right' },
      variant: 'alert',
      alert: {
        color: 'success'
      }
    });
    ...
  };



  return (
    <MainCard>
      ...
    </MainCard>
  );
};

export default Create;
```

--------------------------------

### Customize Typography Variants (Next JS)

Source: https://phoenixcoded.gitbook.io/able-pro/nextjs/theme-style-configuration

Centralized theme typography customization for Next.js (JavaScript). Allows modification of font-weight, font-size, and line-height for typography variants like 'h5'.

```javascript
// ==============================|| DEFAULT THEME - TYPOGRAPHY  ||============================== //

export default function Typography(mode, fontFamily, theme) {
  return {
  ....
   h5: {
      fontWeight: 600,
      fontSize: '1rem',
      lineHeight: 1.5
    },
  ...
  }
}
```

--------------------------------

### API Function to Open Snackbar

Source: https://phoenixcoded.gitbook.io/able-pro/nextjs/state-management

This JavaScript code defines a function `openSnackbar` in the 'api/snackbar.js' file. It accepts a Snackbar configuration object and uses the `mutate` function (presumably from a data fetching library like SWR) to update the Snackbar's state. This allows components to trigger Snackbar notifications with custom messages, positions, variants, and transitions.

```javascript
export function openSnackbar(snackbar) {
  // to update local state based on key

  const { action, open, message, anchorOrigin, variant, alert, transition, close, actionButton } = snackbar;

  mutate(
    endpoints.key,
    (currentSnackbar) => {
      return {
        ...currentSnackbar,
        action: action || initialState.action,
        open: open || initialState.open,
        message: message || initialState.message,
        anchorOrigin: anchorOrigin || initialState.anchorOrigin,
        variant: variant || initialState.variant,
        alert: {
          color: alert?.color || initialState.alert.color,
          variant: alert?.variant || initialState.alert.variant
        },
        transition: transition || initialState.transition,
        close: close || initialState.close,
        actionButton: actionButton || initialState.actionButton
      };
    },
    false
  );
}
```

--------------------------------

### Function to Open Snackbar (TypeScript)

Source: https://phoenixcoded.gitbook.io/able-pro/nextjs/state-management

Provides a function to update the Snackbar state, allowing components to trigger notifications. It uses the SWR mutate function to update the state with new values.

```typescript
export function openSnackbar(snackbar: SnackbarProps) {
  // to update local state based on key

  const { action, open, message, anchorOrigin, variant, alert, transition, close, actionButton } = snackbar;

  mutate(
    endpoints.key,
    (currentSnackbar: any) => {
      return {
        ...currentSnackbar,
        action: action || initialState.action,
        open: open || initialState.open,
        message: message || initialState.message,
        anchorOrigin: anchorOrigin || initialState.anchorOrigin,
        variant: variant || initialState.variant,
        alert: {
          color: alert?.color || initialState.alert.color,
          variant: alert?.variant || initialState.alert.variant
        },
        transition: transition || initialState.transition,
        close: close || initialState.close,
        actionButton: actionButton || initialState.actionButton
      };
    },
    false
  );
}
```

--------------------------------

### Next.js Theme Customization (TypeScript)

Source: https://phoenixcoded.gitbook.io/able-pro/nextjs/theme-style-configuration

Implements theme customization for a Next.js application using TypeScript. It integrates Material-UI's theming capabilities, including palette, typography, and component overrides, while supporting dynamic theme mode detection.

```typescript
import { ReactNode, useMemo } from 'react';

// material-ui
import { createTheme, ThemeOptions, ThemeProvider, Theme, TypographyVariantsOptions, StyledEngineProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';

// project-imports
import Palette from './palette';
import Typography from './typography';
import CustomShadows from './shadows';
import componentsOverride from './overrides';
import GlobalStyles from './GlobalStyles';
import { NextAppDirEmotionCacheProvider } from './emotionCache';

import { HEADER_HEIGHT, ThemeMode } from 'config';
import useConfig from 'hooks/useConfig';
import getWindowScheme from 'utils/getWindowScheme';

// types
import { CustomShadowProps } from 'types/theme';

type ThemeCustomizationProps = {
  children: ReactNode;
};

// ==============================|| DEFAULT THEME - MAIN  ||============================== //

export default function ThemeCustomization({ children }: ThemeCustomizationProps) {
  const { themeDirection, mode, presetColor, fontFamily, themeContrast } = useConfig();
  let themeMode: any = mode;
  if (themeMode === ThemeMode.AUTO) {
    const autoMode = getWindowScheme();
    if (autoMode) {
      themeMode = ThemeMode.DARK;
    } else {
      themeMode = ThemeMode.LIGHT;
    }
  }

  const theme: Theme = useMemo<Theme>(() => Palette(themeMode, presetColor, themeContrast), [themeMode, presetColor, themeContrast]);

  const themeTypography: TypographyVariantsOptions = useMemo<TypographyVariantsOptions>( 
    () => Typography(themeMode, fontFamily, theme),
    [themeMode, fontFamily, theme]
  );
  const themeCustomShadows: CustomShadowProps = useMemo<CustomShadowProps>(() => CustomShadows(theme), [theme]);

  const themeOptions: ThemeOptions = useMemo(
    () => ({
      breakpoints: {
        values: {
          xs: 0,
          sm: 768,
          md: 1024,
          lg: 1266,
          xl: 1440
        }
      },
      direction: themeDirection,
      mixins: {
        toolbar: {
          minHeight: HEADER_HEIGHT,
          paddingTop: 8,
          paddingBottom: 8
        }
      },
      palette: theme.palette,
      shape: {
        borderRadius: 8
      },
      customShadows: themeCustomShadows,
      typography: themeTypography
    }),
    [themeDirection, theme, themeTypography, themeCustomShadows]
  );

  const themes: Theme = createTheme(themeOptions);
  themes.components = componentsOverride(themes);

  return (
    <StyledEngineProvider injectFirst>
      <NextAppDirEmotionCacheProvider options={{ key: 'mui' }}>
        <ThemeProvider theme={themes}>
          <CssBaseline enableColorScheme />
          <GlobalStyles />
          {children}
        </ThemeProvider>
      </NextAppDirEmotionCacheProvider>
    </StyledEngineProvider>
  );
}
```

--------------------------------

### Next.js Theme Customization (JavaScript)

Source: https://phoenixcoded.gitbook.io/able-pro/nextjs/theme-style-configuration

Provides theme customization for a Next.js application using JavaScript. It mirrors the TypeScript version by integrating Material-UI theming features, including palette, typography, and component overrides, with support for automatic theme mode detection.

```javascript
import PropTypes from 'prop-types';
import { useMemo } from 'react';

// material-ui
import { createTheme, ThemeProvider, StyledEngineProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';


// project-imports
import Palette from './palette';
import Typography from './typography';
import CustomShadows from './shadows';
import componentsOverride from './overrides';
import GlobalStyles from './GlobalStyles';
import { NextAppDirEmotionCacheProvider } from './emotionCache';

import { HEADER_HEIGHT, ThemeMode } from 'config';
import useConfig from 'hooks/useConfig';
import getWindowScheme from 'utils/getWindowScheme';

// ==============================|| DEFAULT THEME - MAIN  ||============================== //

export default function ThemeCustomization({ children }) {
  const { themeDirection, mode, presetColor, fontFamily, themeContrast } = useConfig();
  let themeMode = mode;
  if (themeMode === ThemeMode.AUTO) {
    const autoMode = getWindowScheme();
    if (autoMode) {
      themeMode = ThemeMode.DARK;
    } else {
      themeMode = ThemeMode.LIGHT;
    }
  }

  const theme = useMemo(() => Palette(themeMode, presetColor, themeContrast), [themeMode, presetColor, themeContrast]);

  const themeTypography = useMemo(() => Typography(themeMode, fontFamily, theme), [themeMode, fontFamily, theme]);
  const themeCustomShadows = useMemo(() => CustomShadows(theme), [theme]);

  const themeOptions = useMemo(
    () => ({
      breakpoints: {
        values: {
          xs: 0,
          sm: 768,
          md: 1024,
          lg: 1266,
          xl: 1440
        }
      },
      direction: themeDirection,
      mixins: {
        toolbar: {
          minHeight: HEADER_HEIGHT,
          paddingTop: 8,
          paddingBottom: 8
        }
      },
      palette: theme.palette,
      shape: {
        borderRadius: 8
      },
      customShadows: themeCustomShadows,

```

--------------------------------

### Locale Data Structure (JSON)

Source: https://phoenixcoded.gitbook.io/able-pro/nextjs/internationalization

This JSON structure defines the key-value pairs for different UI elements and their translations. It serves as the source for language localization within the application.

```json
{
  "accordion": "Accordion",
  "account-profile": "Account Profile",
  "add-new-product": "Add New Product",
  ...
  ...
}
```

--------------------------------

### Customize Typography Variants (Next TS)

Source: https://phoenixcoded.gitbook.io/able-pro/nextjs/theme-style-configuration

Centralized theme typography customization for Next.js (TypeScript). Allows modification of font-weight, font-size, and line-height for typography variants like 'h5'. Imports necessary types from Material-UI and project configurations.

```typescript
// material-ui
import { Theme, TypographyVariantsOptions } from '@mui/material/styles';

// project-imports
import { ThemeMode } from 'config';

// types
import { FontFamily } from 'types/config';


// ==============================|| DEFAULT THEME - TYPOGRAPHY  ||============================== //

export default function Typography(mode: ThemeMode, fontFamily: FontFamily, theme: Theme): TypographyVariantsOptions {
  return {
  ....
   h5: {
      fontWeight: 600,
      fontSize: '1rem',
      lineHeight: 1.5
    },
  ...
  }
}
```

--------------------------------

### Configure Axios Base URL in next.config.js

Source: https://phoenixcoded.gitbook.io/able-pro/nextjs/axios-api-calls

Sets the default baseURL for Axios API calls by configuring the NEXT_APP_API_URL environment variable within the `next.config.js` file. This ensures all Axios requests use the specified API endpoint.

```javascript
env: {
    NEXT_APP_API_URL:
    .. 
}
```
Tokens:
Raw