free version - vite

.github/workflows/prod.yml

@@ -31,7 +31,7 @@ jobs:
         run: |
           cd vite
           corepack enable
-          yarn set version 4.10.3
+          yarn set version 4.17.1
           yarn
           yarn build
 

next/.env

@@ -0,0 +1,5 @@
+NEXT_PUBLIC_VERSION=v5.2.0
+GENERATE_SOURCEMAP=false
+
+## Backend API URL
+NEXT_PUBLIC_API_URL=https://mock-data-api-nextjs.vercel.app/

next/.gitignore

@@ -0,0 +1,43 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
+
+!package-lock.json

next/.prettierignore

@@ -0,0 +1,2 @@
+.next
+node_modules

next/.prettierrc

@@ -0,0 +1,9 @@
+{
+  "bracketSpacing": true,
+  "printWidth": 140,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "tabWidth": 2,
+  "useTabs": false,
+  "endOfLine": "lf"
+}

next/.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

next/eslint.config.mjs

@@ -0,0 +1,89 @@
+import eslint from '@eslint/js';
+import { defineConfig, globalIgnores } from 'eslint/config';
+import nextPlugin from '@next/eslint-plugin-next';
+import reactHooks from 'eslint-plugin-react-hooks';
+import prettier from 'eslint-config-prettier/flat';
+import prettierPlugin from 'eslint-plugin-prettier';
+import globals from 'globals';
+
+// ESLint 10 flat config.
+// eslint-config-next is intentionally not used: the plugins it bundles
+// (eslint-plugin-react / import / jsx-a11y) have no ESLint 10 compatible
+// release yet. We compose the pieces that do support ESLint 10 directly:
+// the Next.js plugin (core-web-vitals rules) and react-hooks.
+export default defineConfig([
+  eslint.configs.recommended,
+
+  // Next.js core-web-vitals rules (registers the @next/next plugin)
+  nextPlugin.configs['core-web-vitals'],
+
+  // React Hooks recommended (ESLint 10 compatible flat config)
+  reactHooks.configs.flat['recommended-latest'],
+
+  {
+    files: ['**/*.{js,jsx,mjs}'],
+
+    plugins: {
+      prettier: prettierPlugin
+    },
+
+    languageOptions: {
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+      parserOptions: {
+        ecmaFeatures: { jsx: true }
+      },
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+        ...globals.es2021
+      }
+    },
+
+    rules: {
+      // --- Core rule preferences ---
+      'no-param-reassign': 'off',
+      'no-console': 'off',
+      'no-shadow': 'off',
+      'prefer-destructuring': 'off',
+
+      // --- React Hooks: silence the noisy new (v7) rules ---
+      'react-hooks/purity': 'off',
+      'react-hooks/refs': 'off',
+      'react-hooks/set-state-in-effect': 'off',
+      'react-hooks/immutability': 'off',
+      'react-hooks/static-components': 'off',
+
+      // --- New in ESLint 10 `recommended`: noisy on default-init idioms
+      //     (e.g. `let x = <default/>; if (…) x = …`), keep it off ---
+      'no-useless-assignment': 'off',
+
+      // --- Project-specific restrictions ---
+      'no-restricted-imports': [
+        'error',
+        {
+          patterns: ['@mui/*/*/*', '!@mui/material/test-utils/*']
+        }
+      ],
+
+      'no-unused-vars': [
+        'error',
+        {
+          vars: 'all',
+          args: 'none',
+          // allow `const { omit, ...rest } = obj` to intentionally drop props
+          ignoreRestSiblings: true
+        }
+      ],
+
+      // --- Prettier integration ---
+      'prettier/prettier': 'warn'
+    }
+  },
+
+  // Disable conflicting rules from all shareable configs
+  prettier,
+
+  // Global ignores (flat config replacement for .eslintignore)
+  globalIgnores(['**/node_modules/**', '.next/**', 'out/**', 'build/**', 'next-env.d.js'])
+]);

next/jsconfig.json

@@ -0,0 +1,43 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "paths": {
+      "*": ["./src/*"]
+    },
+    "noUnusedLocals": true,
+    "typeRoots": [
+      "../node_modules/@types",
+      "../@types",
+      "./types"
+    ],
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
+  },
+  "include": [
+    "next-env.d.js",
+    "**/*.js",
+    "**/*.jsx",
+    ".next/types/**/*.js",
+    ".next/dev/types/**/*.js",
+    "next.config.mjs"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

next/next-env.d.js

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+import "./.next/types/routes.d.ts";
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

next/next.config.mjs

@@ -0,0 +1,32 @@
+const nextConfig = {
+  // todo: this need to set to true or remove it as default is true. set false as chart was giving error when first render
+  // https://github.com/apexcharts/apexcharts.js/issues/3652
+  reactStrictMode: false,
+  modularizeImports: {
+    '@mui/material': {
+      transform: '@mui/material/{{member}}'
+    },
+    '@mui/lab': {
+      transform: '@mui/lab/{{member}}'
+    },
+    '@mui/icons-material': {
+      transform: '@mui/icons-material/{{member}}'
+    }
+  },
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'flagcdn.com',
+        pathname: '**'
+      }
+    ],
+    localPatterns: [
+      {
+        pathname: '/assets/**'
+      }
+    ]
+  }
+};
+
+export default nextConfig;

next/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "berry-free-react-material-next-js",
+  "version": "5.2.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint \"src/**/*.{js,jsx,ts,tsx}\"",
+    "lint:fix": "eslint --fix \"src/**/*.{js,jsx,ts,tsx}\"",
+    "prettier": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\""
+  },
+  "dependencies": {
+    "@emotion/cache": "11.14.0",
+    "@emotion/react": "11.14.0",
+    "@emotion/styled": "11.14.1",
+    "@mui/icons-material": "9.1.1",
+    "@mui/material": "9.1.2",
+    "@mui/utils": "9.1.1",
+    "@tabler/icons-react": "3.44.0",
+    "apexcharts": "5.15.2",
+    "framer-motion": "12.42.0",
+    "lodash-es": "4.18.1",
+    "material-ui-popup-state": "5.3.7",
+    "next": "16.0.4",
+    "react": "19.2.7",
+    "react-apexcharts": "2.1.1",
+    "react-device-detect": "2.2.3",
+    "react-dom": "19.2.7",
+    "simplebar-react": "3.3.2",
+    "swr": "2.4.2",
+    "yup": "1.7.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "10.0.1",
+    "@next/eslint-plugin-next": "16.0.4",
+    "eslint": "10.7.0",
+    "eslint-config-prettier": "10.1.8",
+    "eslint-plugin-prettier": "5.5.6",
+    "eslint-plugin-react-hooks": "7.1.1",
+    "globals": "17.7.0",
+    "prettier": "3.8.5",
+    "sass": "1.101.0"
+  },
+  "packageManager": "yarn@4.17.1"
+}

next/src/api/menu.js

@@ -0,0 +1,41 @@
+import useSWR, { mutate } from 'swr';
+import { useMemo } from 'react';
+
+const initialState = {
+  isDashboardDrawerOpened: false
+};
+
+const endpoints = {
+  key: 'api/menu',
+  master: 'master'
+};
+
+export function useGetMenuMaster() {
+  const { data, isLoading } = useSWR(endpoints.key + endpoints.master, () => initialState, {
+    revalidateIfStale: false,
+    revalidateOnFocus: false,
+    revalidateOnReconnect: false
+  });
+
+  const memoizedValue = useMemo(
+    () => ({
+      menuMaster: data,
+      menuMasterLoading: isLoading
+    }),
+    [data, isLoading]
+  );
+
+  return memoizedValue;
+}
+
+export function handlerDrawerOpen(isDashboardDrawerOpened) {
+  // to update local state based on key
+
+  mutate(
+    endpoints.key + endpoints.master,
+    (currentMenuMaster) => {
+      return { ...currentMenuMaster, isDashboardDrawerOpened };
+    },
+    false
+  );
+}

next/src/app/(dashboard)/dashboard/default/page.jsx

@@ -0,0 +1,7 @@
+import DefaultDashboard from 'views/dashboard/Default';
+
+// ==============================|| PAGE ||============================== //
+
+export default function DefaultDashboardPage() {
+  return <DefaultDashboard />;
+}

next/src/app/(dashboard)/layout.jsx

@@ -0,0 +1,12 @@
+import PropTypes from 'prop-types';
+
+// project imports
+import DashboardLayout from 'layout/MainLayout';
+
+// ==============================|| DASHBOARD LAYOUT ||============================== //
+
+export default function Layout({ children }) {
+  return <DashboardLayout>{children}</DashboardLayout>;
+}
+
+Layout.propTypes = { children: PropTypes.node };