Merge branch 'develop' of https://github.com/kfnawaz/plaidware-wms-web into feature/wms-55_develop

Implemented review comments, added loader on submission

.eslintrc.js

@@ -3,60 +3,65 @@ module.exports = {
   env: {
     browser: true,
     commonjs: true,
-    es6: true,
+    es6: true
   },
-  extends: ["eslint:recommended", "plugin:react/recommended"],
-  parser: "babel-eslint",
+  extends: ['eslint:recommended', 'plugin:react/recommended'],
+  parser: '@babel/eslint-parser',
   parserOptions: {
+    requireConfigFile: false,
+    babelOptions: {
+      presets: ['@babel/preset-react']
+    },
     ecmaFeatures: {
       jsx: true,
       modules: true,
-      experimentalObjectRestSpread: true,
+      experimentalObjectRestSpread: true
     },
     ecmaVersion: 2020,
-    sourceType: "module",
+    sourceType: 'module'
   },
-  plugins: ["react"],
+  // plugins: ['react'],
   rules: {
     // general
-    indent: ["error", 2, { SwitchCase: 1, ignoredNodes: ["TemplateLiteral"] }],
-    "linebreak-style": ["error", "unix"],
-    quotes: ["error", "single"],
-    semi: ["error", "always"],
-    "comma-dangle": [
-      "error",
+    indent: ['warn', 2, { SwitchCase: 1, ignoredNodes: ['TemplateLiteral'] }],
+    'linebreak-style': ['error', 'unix'],
+    quotes: ['warn', 'single'],
+    semi: ['warn', 'always'],
+    'no-unused-vars': 'warn',
+    'comma-dangle': [
+      'warn',
       {
-        arrays: "never",
-        objects: "never",
-        imports: "never",
-        exports: "never",
-        functions: "ignore",
-      },
+        arrays: 'never',
+        objects: 'never',
+        imports: 'never',
+        exports: 'never',
+        functions: 'ignore'
+      }
     ],
-    "object-curly-spacing": ["error", "always"],
-    "eol-last": ["error", "always"],
-    "no-console": process.env.NODE_ENV === "production" ? "error" : "warn",
-    complexity: ["error", { max: 20 }],
-    eqeqeq: ["error", "always"],
+    'object-curly-spacing': 'off',
+    'eol-last': ['warn', 'always'],
+    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'warn',
+    complexity: ['error', { max: 20 }],
+    eqeqeq: ['warn', 'always'],
     // react
-    "react/no-unescaped-entities": ["error", { forbid: [">", '"', "}"] }],
-    "react/prop-types": [2, { ignore: ["action", "dispatch", "nav", "navigation"] }],
-    "react/jsx-boolean-value": 2,
-    "react/jsx-no-undef": 2,
-    "react/react-in-jsx-scope": "off",
+    'react/no-unescaped-entities': ['error', { forbid: ['>', '"', '}'] }],
+    'react/prop-types': [2, { ignore: ['action', 'dispatch', 'nav', 'navigation'] }],
+    'react/jsx-boolean-value': 2,
+    'react/jsx-no-undef': 2,
+    'react/react-in-jsx-scope': 'off',
     // allow jsx syntax in js files (for next.js project)
-    "react/jsx-filename-extension": [1, { extensions: [".js", ".jsx"] }], //should add ".ts" if typescript project
-    "react/jsx-sort-props": [
+    'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }], //should add ".ts" if typescript project
+    'react/jsx-sort-props': [
       2,
       {
         callbacksLast: true,
         shorthandFirst: true,
         ignoreCase: true,
-        noSortAlphabetically: true,
-      },
+        noSortAlphabetically: true
+      }
     ],
-    "react/jsx-pascal-case": 2,
-    "react/display-name": [0, { ignoreTranspilerName: false }],
+    'react/jsx-pascal-case': 2,
+    'react/display-name': [0, { ignoreTranspilerName: false }]
   },
   // Map from global var to bool specifying if it can be redefined
   globals: {
@@ -91,11 +96,11 @@ module.exports = {
     setInterval: false,
     setTimeout: false,
     window: false,
-    XMLHttpRequest: false,
+    XMLHttpRequest: false
   },
   settings: {
     react: {
-      version: require("./package.json").dependencies.react,
-    },
-  },
+      version: require('./package.json').dependencies.react
+    }
+  }
 };

.gitignore

@@ -1,7 +1,7 @@
 # See https://help.github.com/ignore-files/ for more about ignoring files.
 
 # dependencies
-/node_modules
+node_modules
 .DS_Store
 
 # testing
@@ -25,3 +25,4 @@ yarn-error.log*
 yarn.lock
 
 commit.sh
+pnpm-lock.yaml

.prettierrc.json

@@ -4,5 +4,5 @@
   "tabWidth": 2,
   "semi": true,
   "singleQuote": true,
-  "endOfLine": "auto"
+  "endOfLine": "lf"
 }

.vscode/settings.json

@@ -1,4 +1,5 @@
 {
   "prettier.printWidth": 120,
-  "prettier.singleQuote": true
-}
+  "prettier.singleQuote": true,
+  "files.eol": "\n"
+}

package.json

@@ -1,108 +1,124 @@
-{
-  "name": "wms",
-  "version": "1.0.0",
-  "private": true,
-  "author": "Plaidware Solutions",
-  "engines": {
-    "node": "14 || 15 || 16",
-    "npm": ">=6"
-  },
-  "dependencies": {
-    "@asseinfo/react-kanban": "2.2.0",
-    "@emotion/cache": "11.4.0",
-    "@emotion/react": "11.4.1",
-    "@emotion/styled": "11.3.0",
-    "@fullcalendar/daygrid": "5.9.0",
-    "@fullcalendar/interaction": "5.9.0",
-    "@fullcalendar/react": "5.9.0",
-    "@fullcalendar/timegrid": "5.9.0",
-    "@mui/icons-material": "5.2.0",
-    "@mui/material": "5.2.0",
-    "@mui/styled-engine": "5.2.0",
-    "@react-jvectormap/core": "1.0.0-alpha.7",
-    "@react-jvectormap/world": "1.0.0-alpha.4",
-    "@testing-library/jest-dom": "5.11.4",
-    "@testing-library/react": "11.1.0",
-    "@testing-library/user-event": "12.1.10",
-    "apisauce": "^2.1.5",
-    "chart.js": "3.4.1",
-    "chroma-js": "2.1.2",
-    "dotenv": "^10.0.0",
-    "dropzone": "5.9.2",
-    "flatpickr": "4.6.9",
-    "formik": "^2.2.9",
-    "moment": "^2.29.1",
-    "prop-types": "15.7.2",
-    "ramda": "^0.27.2",
-    "react": "17.0.2",
-    "react-chartjs-2": "3.0.4",
-    "react-dom": "17.0.2",
-    "react-flatpickr": "3.10.7",
-    "react-github-btn": "1.2.1",
-    "react-html-parser": "2.0.2",
-    "react-images-viewer": "1.6.7",
-    "react-quill": "1.3.5",
-    "react-redux": "^7.2.6",
-    "react-router-dom": "6.0.2",
-    "react-scripts": "4.0.3",
-    "react-table": "7.7.0",
-    "redux": "^4.1.2",
-    "redux-persist": "^6.0.0",
-    "redux-saga": "^1.1.3",
-    "reduxsauce": "^1.2.1",
-    "seamless-immutable": "^7.1.4",
-    "stylis": "4.0.10",
-    "stylis-plugin-rtl": "2.1.0",
-    "underscore": "^1.13.2",
-    "uuid": "8.3.2",
-    "web-vitals": "1.0.1",
-    "yup": "^0.32.11"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
-    "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start",
-    "lint": "eslint ./src",
-    "lint:prod": "NODE_ENV=production eslint ./src",
-    "fixcode": "eslint --fix ./src",
-    "fixcode:prod": "NODE_ENV=production eslint --fix ./src"
-  },
-  "lint-staged": {
-    "app/**/*.js": [
-      "yarn fixcode:prod"
-    ]
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "devDependencies": {
-    "babel-eslint": "^10.1.0",
-    "eslint": "7.30.0",
-    "eslint-config-airbnb": "18.2.1",
-    "eslint-config-prettier": "8.3.0",
-    "eslint-plugin-import": "2.23.4",
-    "eslint-plugin-jsx-a11y": "6.4.1",
-    "eslint-plugin-prettier": "3.4.0",
-    "eslint-plugin-react": "7.24.0",
-    "eslint-plugin-react-hooks": "4.2.0",
-    "husky": "^6.0.0",
-    "lint-staged": "^10.5.4",
-    "prettier": "2.3.2"
-  }
-}
+{
+  "name": "wms",
+  "version": "1.0.0",
+  "private": true,
+  "author": "Plaidware Solutions",
+  "engines": {
+    "node": "14 || 15 || 16",
+    "npm": ">=6"
+  },
+  "dependencies": {
+    "@asseinfo/react-kanban": "2.2.0",
+    "@emotion/cache": "11.4.0",
+    "@emotion/react": "^11.4.1",
+    "@emotion/styled": "11.3.0",
+    "@fullcalendar/daygrid": "5.9.0",
+    "@fullcalendar/interaction": "5.9.0",
+    "@fullcalendar/react": "5.9.0",
+    "@fullcalendar/timegrid": "5.9.0",
+    "@mui/icons-material": "5.1.1",
+    "@mui/lab": "^5.0.0-alpha.69",
+    "@mui/material": "5.1.1",
+    "@mui/styled-engine": "5.1.1",
+    "@mui/styles": "^5.1.1",
+    "@react-jvectormap/core": "1.0.0-alpha.7",
+    "@react-jvectormap/world": "1.0.0-alpha.4",
+    "@testing-library/jest-dom": "5.11.4",
+    "@testing-library/react": "11.1.0",
+    "@testing-library/user-event": "12.1.10",
+    "@zxing/browser": "^0.0.10",
+    "@zxing/library": "^0.18.5",
+    "apisauce": "^2.1.5",
+    "bootstrap": "^5.1.3",
+    "chart.js": "3.4.1",
+    "chroma-js": "2.1.2",
+    "date-fns": "^2.28.0",
+    "dotenv": "^10.0.0",
+    "dropzone": "5.9.2",
+    "flatpickr": "4.6.9",
+    "formik": "^2.2.9",
+    "jsbarcode": "^3.11.5",
+    "jsonwebtoken": "^8.5.1",
+    "moment": "^2.29.1",
+    "prop-types": "15.7.2",
+    "ramda": "^0.27.2",
+    "react": "17.0.2",
+    "react-chartjs-2": "3.0.4",
+    "react-dom": "17.0.2",
+    "react-flatpickr": "3.10.7",
+    "react-github-btn": "1.2.1",
+    "react-redux": "^7.2.6",
+    "react-router-dom": "6.0.2",
+    "react-scripts": "^5.0.0",
+    "react-table": "7.7.0",
+    "react-toastify": "^8.2.0",
+    "redux": "^4.1.2",
+    "redux-persist": "^6.0.0",
+    "redux-saga": "^1.1.3",
+    "reduxsauce": "^1.2.1",
+    "seamless-immutable": "^7.1.4",
+    "stylis": "4.0.10",
+    "stylis-plugin-rtl": "2.1.0",
+    "underscore": "^1.13.2",
+    "uuid": "8.3.2",
+    "web-vitals": "1.0.1",
+    "yup": "^0.32.11"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "dev": "PORT=3001 react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "generate": "plop",
+    "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start",
+    "lint": "eslint ./src",
+    "lint:prod": "NODE_ENV=production eslint ./src",
+    "fixcode": "eslint --fix ./src",
+    "fixcode:prod": "NODE_ENV=production eslint --fix ./src"
+  },
+  "lint-staged": {
+    "app/**/*.js": [
+      "yarn fixcode:prod"
+    ]
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@babel/core": "^7.17.5",
+    "@babel/eslint-parser": "^7.17.0",
+    "@babel/preset-react": "^7.16.7",
+    "eslint": "^8.2.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-prettier": "8.3.0",
+    "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-prettier": "3.4.0",
+    "eslint-plugin-react": "^7.29.2",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "husky": "^6.0.0",
+    "lint-staged": "^10.5.4",
+    "node-sass": "^7.0.1",
+    "plop": "^3.0.5",
+    "prettier": "2.3.2",
+    "sass-loader": "^12.6.0"
+  },
+  "resolutions": {
+    "react-error-overlay": "6.0.9"
+  }
+}

plop-templates/Component/Component.component.scss.hbs

@@ -0,0 +1,3 @@
+.c-{{pascalCase name}} {
+  
+}

plop-templates/Component/Component.jsx.hbs

@@ -0,0 +1,17 @@
+import React from "react";
+import PropTypes from "prop-types";
+import "./{{pascalCase name}}.component.scss";
+
+const {{pascalCase name}} = props => {
+  return (
+    <div className="c-{{pascalCase name}}">
+      In Component {{pascalCase name}}
+    </div>
+  );
+};
+
+{{pascalCase name}}.propTypes = {
+
+};
+
+export default {{pascalCase name}};

plop-templates/Component/Component.test.js.hbs

@@ -0,0 +1,8 @@
+import React from "react";
+import {{pascalCase name}} from "./{{pascalCase name}}";
+
+describe("{{pascalCase name}}", () => {
+   it("renders without error", () => {
+
+   });
+});

plop-templates/Component/index.js.hbs

@@ -0,0 +1,3 @@
+import {{pascalCase name}} from "./{{pascalCase name}}.jsx";
+
+export default {{pascalCase name}};

plop-templates/Page/Page.jsx.hbs

@@ -0,0 +1,17 @@
+import React from "react";
+import PropTypes from "prop-types";
+import "./{{pascalCase name}}.module.scss";
+
+const {{pascalCase name}} = props => {
+  return (
+    <div className="c-{{pascalCase name}}">
+      In Page {{pascalCase name}}
+    </div>
+  );
+};
+
+{{pascalCase name}}.propTypes = {
+
+};
+
+export default {{pascalCase name}};

plop-templates/Page/Page.module.scss.hbs

@@ -0,0 +1,3 @@
+.c-{{pascalCase name}} {
+  
+}

plop-templates/Page/Page.test.js.hbs

@@ -0,0 +1,8 @@
+import React from "react";
+import {{pascalCase name}} from "./{{pascalCase name}}";
+
+describe("{{pascalCase name}}", () => {
+   it("renders without error", () => {
+
+   });
+});

plop-templates/Page/actions.js.hbs

@@ -0,0 +1,16 @@
+export const UPDATE_FORM_VALUES = "UPDATE_{{constantCase name}}_FORM_VALUES"
+export const UPDATE_FORM_ERRORS = "UPDATE_{{constantCase name}}_FORM_ERRORS"
+
+export const updateFormValues = (formValues) => {
+    return {
+        type: UPDATE_FORM_VALUES,
+        payload: formValues
+    }
+}
+
+export const updateFormErrors = (formErrors) => {
+    return {
+        type: UPDATE_FORM_ERRORS,
+        payload: formErrors
+    }
+}

plop-templates/Page/index.js.hbs

@@ -0,0 +1,3 @@
+import {{pascalCase name}} from "./{{pascalCase name}}.jsx";
+
+export default {{pascalCase name}};

plop-templates/Page/reducer.js.hbs

@@ -0,0 +1,16 @@
+import Immutable from "immutable"
+import {UPDATE_FORM_ERRORS, UPDATE_FORM_VALUES} from "./actions"
+
+const initialState = Immutable.Map()
+
+const reducer = (state = initialState, action) => {
+    switch (action.type) {
+        case UPDATE_FORM_ERRORS:
+        case UPDATE_FORM_VALUES:
+            return state.mergeDeep(action.payload)
+        default:
+            return state
+    }
+}
+
+export default reducer

plop-templates/Page/selectors.js.hbs

@@ -0,0 +1,14 @@
+import {createSelector} from "reselect"
+import {createGetSelector} from "reselect-immutable-helpers"
+
+const getData = ({data}) => data
+
+export const get{{pascalCase name}} = createSelector(
+    getData,
+    (dataState) => {
+        return dataState.pages.{{camelCase name}}
+    }
+)
+
+export const getFormErrors = createGetSelector(get{{pascalCase name}}, "formErrors")
+export const getFormValues = createGetSelector(get{{pascalCase name}}, "formValues")

plop-templates/hook.js.hbs

@@ -0,0 +1,5 @@
+const {{camelCase name}} = () => {
+
+};
+
+export default {{camelCase name}};

plop-templates/injectable-index.js.hbs

@@ -0,0 +1,5 @@
+/* PLOP_INJECT_IMPORT */
+
+export {
+  /* PLOP_INJECT_EXPORT */
+}

plop-templates/service.js.hbs

@@ -0,0 +1,17 @@
+const create{{pascalCase name}} = () => {
+  let examplePrivateVariable = 0
+
+  return {
+    getExamplePrivateVariable: () => {
+      return examplePrivateVariable
+    },
+    setExamplePrivateVariable: (n) => {
+      examplePrivateVariable = n
+    }
+  }
+};
+
+const singleton = create{{pascalCase name}}();
+Object.freeze(singleton);
+
+export default singleton;

plopfile.js

@@ -0,0 +1,210 @@
+module.exports = plop => {
+  plop.setGenerator('component', {
+    description: 'Create a component',
+    // User input prompts provided as arguments to the template
+    prompts: [
+      {
+        // Raw text input
+        type: 'input',
+        // Variable name for this input
+        name: 'name',
+        // Prompt to display on command line
+        message: 'What is your component name?'
+      }
+    ],
+    actions: [
+      {
+        type: 'add',
+        // Plop will create directories for us if they do not exist
+        // so it's okay to add files in nested locations.
+        path: 'src/components/{{pascalCase name}}/{{pascalCase name}}.jsx',
+        templateFile:
+            'plop-templates/Component/Component.jsx.hbs'
+      },
+      {
+        type: 'add',
+        path: 'src/components/{{pascalCase name}}/{{pascalCase name}}.test.js',
+        templateFile:
+            'plop-templates/Component/Component.test.js.hbs'
+      },
+      {
+        type: 'add',
+        path:
+            'src/components/{{pascalCase name}}/{{pascalCase name}}.component.scss',
+        templateFile:
+            'plop-templates/Component/Component.component.scss.hbs'
+      },
+      {
+        type: 'add',
+        path: 'src/components/{{pascalCase name}}/index.js',
+        templateFile: 'plop-templates/Component/index.js.hbs'
+      },
+      {
+        // Adds an index.js file if it does not already exist
+        type: 'add',
+        path: 'src/components/index.js',
+        templateFile: 'plop-templates/injectable-index.js.hbs',
+        // If index.js already exists in this location, skip this action
+        skipIfExists: true
+      },
+      {
+        // Action type 'append' injects a template into an existing file
+        type: 'append',
+        path: 'src/components/index.js',
+        // Pattern tells plop where in the file to inject the template
+        pattern: '/* PLOP_INJECT_IMPORT */',
+        template: 'import {{pascalCase name}} from \'./{{pascalCase name}}\';'
+      },
+      {
+        type: 'append',
+        path: 'src/components/index.js',
+        pattern: '/* PLOP_INJECT_EXPORT */',
+        template: '\t{{pascalCase name}},'
+      }
+    ]
+  });
+  plop.setGenerator('page', {
+    description: 'Create a page',
+    prompts: [
+      {
+        type: 'input',
+        name: 'name',
+        message: 'What is your page name?'
+      }
+    ],
+    actions: [
+      {
+        type: 'add',
+        path: 'src/pages/{{pascalCase name}}/{{pascalCase name}}.jsx',
+        templateFile:
+            'plop-templates/Page/Page.jsx.hbs'
+      },
+      {
+        type: 'add',
+        path: 'src/pages/{{pascalCase name}}/{{pascalCase name}}.test.js',
+        templateFile:
+            'plop-templates/Page/Page.test.js.hbs'
+      },
+      {
+        type: 'add',
+        path:
+            'src/pages/{{pascalCase name}}/{{pascalCase name}}.module.scss',
+        templateFile:
+            'plop-templates/Page/Page.module.scss.hbs'
+      },
+      {
+        type: 'add',
+        path: 'src/pages/{{pascalCase name}}/reducer.js',
+        templateFile: 'plop-templates/Page/reducer.js.hbs',
+        skipIfExists: true
+      },
+      {
+        type: 'add',
+        path: 'src/pages/{{pascalCase name}}/selectors.js',
+        templateFile: 'plop-templates/Page/selectors.js.hbs',
+        skipIfExists: true
+      },
+      {
+        type: 'add',
+        path: 'src/pages/{{pascalCase name}}/actions.js',
+        templateFile: 'plop-templates/Page/actions.js.hbs',
+        skipIfExists: true
+      },
+      {
+        type: 'add',
+        path: 'src/pages/{{pascalCase name}}/index.js',
+        templateFile: 'plop-templates/Page/index.js.hbs'
+      },
+      {
+        type: 'add',
+        path: 'src/pages/index.js',
+        templateFile: 'plop-templates/injectable-index.js.hbs',
+        skipIfExists: true
+      },
+      {
+        type: 'append',
+        path: 'src/pages/index.js',
+        pattern: '/* PLOP_INJECT_IMPORT */',
+        template: 'import {{pascalCase name}} from \'./{{pascalCase name}}\';'
+      },
+      {
+        type: 'append',
+        path: 'src/pages/index.js',
+        pattern: '/* PLOP_INJECT_EXPORT */',
+        template: '\t{{pascalCase name}},'
+      }
+    ]
+  });
+  
+  plop.setGenerator('service', {
+    description: 'Create service',
+    prompts: [
+      {
+        type: 'input',
+        name: 'name',
+        message: 'What is your service name?'
+      }
+    ],
+    actions: [
+      {
+        type: 'add',
+        path: 'src/services/{{camelCase name}}.js',
+        templateFile: 'plop-templates/service.js.hbs'
+      },
+      {
+        type: 'add',
+        path: 'src/services/index.js',
+        templateFile: 'plop-templates/injectable-index.js.hbs',
+        skipIfExists: true
+      },
+      {
+        type: 'append',
+        path: 'src/services/index.js',
+        pattern: '/* PLOP_INJECT_IMPORT */',
+        template: 'import {{camelCase name}} from \'./{{camelCase name}}\';'
+      },
+      {
+        type: 'append',
+        path: 'src/services/index.js',
+        pattern: '/* PLOP_INJECT_EXPORT */',
+        template: '\t{{camelCase name}},'
+      }
+    ]
+  });
+  
+  plop.setGenerator('hook', {
+    description: 'Create a custom react hook',
+    prompts: [
+      {
+        type: 'input',
+        name: 'name',
+        message: 'What is your hook name?'
+      }
+    ],
+    actions: [
+      {
+        type: 'add',
+        path: 'src/hooks/{{camelCase name}}.js',
+        templateFile: 'plop-templates/hook.js.hbs'
+      },
+      {
+        type: 'add',
+        path: 'src/hooks/index.js',
+        templateFile: 'plop-templates/injectable-index.js.hbs',
+        skipIfExists: true
+      },
+      {
+        type: 'append',
+        path: 'src/hooks/index.js',
+        pattern: '/* PLOP_INJECT_IMPORT */',
+        template: 'import {{camelCase name}} from \'./{{camelCase name}}\';'
+      },
+      {
+        type: 'append',
+        path: 'src/hooks/index.js',
+        pattern: '/* PLOP_INJECT_EXPORT */',
+        template: '\t{{camelCase name}},'
+      }
+    ]
+  });
+};

public/index.html

@@ -22,7 +22,7 @@ Software.
     <meta name="theme-color" content="#1A73E8" />
     <link rel="apple-touch-icon" sizes="76x76" href="%PUBLIC_URL%/apple-icon.png" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <title>Material Dashboard 2 PRO React</title>
+    <title>WMS - Plaidware</title>
     <link
       rel="stylesheet"
       href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"

src/App.js

@@ -23,14 +23,14 @@ import LoginScreen from 'pages/authentication';
 // @mui material components
 import { ThemeProvider } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
-import Icon from '@mui/material/Icon';
+// import Icon from '@mui/material/Icon';
 
 // Material Dashboard 2 PRO React components
-import MDBox from 'components/MDBox';
+// import MDBox from 'components/MDBox';
 
 // Material Dashboard 2 PRO React example components
 import Sidenav from 'components/Sidenav';
-import Configurator from 'components/Configurator';
+// import Configurator from 'components/Configurator';
 
 // Material Dashboard 2 PRO React themes
 import theme from 'assets/theme';
@@ -39,11 +39,11 @@ import theme from 'assets/theme';
 import themeDark from 'assets/theme-dark';
 
 // Material Dashboard 2 PRO React contexts
-import { useMaterialUIController, setMiniSidenav, setOpenConfigurator } from 'context';
+import { useMaterialUIController, setMiniSidenav /*, setOpenConfigurator*/ } from 'context';
 
 // Images
-import brandWhite from 'assets/images/logo-ct.png';
-import brandDark from 'assets/images/logo-ct-dark.png';
+// import brandWhite from 'assets/images/logo-ct.png';
+// import brandDark from 'assets/images/logo-ct-dark.png';
 
 import { Provider } from 'react-redux';
 import { PersistGate } from 'redux-persist/integration/react';
@@ -52,6 +52,10 @@ import PublicRoutes from 'routes/PublicRoutes';
 import reduxStore from './redux/Store';
 import { protectedRoutes as routes } from './routes/index';
 import PrivateRoute from './routes/PrivateRoute';
+// import MDAlert from 'components/MDAlert';
+
+import { ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
 
 export default function App() {
   const [controller, dispatch] = useMaterialUIController();
@@ -59,10 +63,10 @@ export default function App() {
     miniSidenav,
     direction,
     layout,
-    openConfigurator,
+    // openConfigurator,
     sidenavColor,
-    transparentSidenav,
-    whiteSidenav,
+    // transparentSidenav,
+    // whiteSidenav,
     darkMode
   } = controller;
   const [onMouseEnter, setOnMouseEnter] = useState(false);
@@ -85,7 +89,7 @@ export default function App() {
   };
 
   // Change the openConfigurator state
-  const handleConfiguratorOpen = () => setOpenConfigurator(dispatch, !openConfigurator);
+  // const handleConfiguratorOpen = () => setOpenConfigurator(dispatch, !openConfigurator);
 
   // Setting the dir attribute for the body element
   useEffect(() => {
@@ -116,29 +120,29 @@ export default function App() {
       return null;
     });
 
-  const configsButton = (
-    <MDBox
-      display="flex"
-      justifyContent="center"
-      alignItems="center"
-      width="3.25rem"
-      height="3.25rem"
-      bgColor="white"
-      shadow="sm"
-      borderRadius="50%"
-      position="fixed"
-      right="2rem"
-      bottom="2rem"
-      zIndex={99}
-      color="dark"
-      sx={{ cursor: 'pointer' }}
-      onClick={handleConfiguratorOpen}
-    >
-      <Icon fontSize="small" color="inherit">
-        settings
-      </Icon>
-    </MDBox>
-  );
+  // const configsButton = (
+  //   <MDBox
+  //     display="flex"
+  //     justifyContent="center"
+  //     alignItems="center"
+  //     width="3.25rem"
+  //     height="3.25rem"
+  //     bgColor="white"
+  //     shadow="sm"
+  //     borderRadius="50%"
+  //     position="fixed"
+  //     right="2rem"
+  //     bottom="2rem"
+  //     zIndex={99}
+  //     color="dark"
+  //     sx={{ cursor: 'pointer' }}
+  //     onClick={handleConfiguratorOpen}
+  //   >
+  //     <Icon fontSize="small" color="inherit">
+  //       settings
+  //     </Icon>
+  //   </MDBox>
+  // );
 
   return (
     <Provider store={reduxStore.store}>
@@ -149,23 +153,25 @@ export default function App() {
             <>
               <Sidenav
                 color={sidenavColor}
-                brand={(transparentSidenav && !darkMode) || whiteSidenav ? brandDark : brandWhite}
-                brandName="FSR"
+                // brand={(transparentSidenav && !darkMode) || whiteSidenav ? brandDark : brandWhite}
+                brandName="Plaidware"
                 routes={routes}
                 onMouseEnter={handleOnMouseEnter}
                 onMouseLeave={handleOnMouseLeave}
               />
-              <Configurator />
-              {configsButton}
+              {/* <Configurator /> */}
+              {/* {configsButton} */}
             </>
           )}
-          {layout === 'vr' && <Configurator />}
+          {/* {layout === 'vr' && <Configurator />} */}
           <Routes>
             <Route path="/" element={<PublicRoutes component={<LoginScreen />} />} />
             {getRoutes(routes)}
             <Route path="*" element={<Navigate to="/" />} />
           </Routes>
+          {/* <MDAlert dismissible><span>Submitted Successfully!</span></MDAlert> */}
         </ThemeProvider>
+        <ToastContainer position="bottom-right" />
       </PersistGate>
     </Provider>
   );

src/assets/fonts/new-fonts/stylesheet.css

@@ -0,0 +1,192 @@
+@font-face {
+    font-family: 'Averta';
+    src: url('./Averta-BoldItalic.eot');
+    src: url('./Averta-BoldItalic.eot?#iefix') format('embedded-opentype'),
+        url('./Averta-BoldItalic.woff2') format('woff2'),
+        url('./Averta-BoldItalic.woff') format('woff'),
+        url('./Averta-BoldItalic.ttf') format('truetype');
+    font-weight: bold;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Averta';
+    src: url('./Averta-Bold.eot');
+    src: url('./Averta-Bold.eot?#iefix') format('embedded-opentype'),
+        url('./Averta-Bold.woff2') format('woff2'),
+        url('./Averta-Bold.woff') format('woff'),
+        url('./Averta-Bold.ttf') format('truetype');
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Averta';
+    src: url('./Averta-Black.eot');
+    src: url('./Averta-Black.eot?#iefix') format('embedded-opentype'),
+        url('./Averta-Black.woff2') format('woff2'),
+        url('./Averta-Black.woff') format('woff'),
+        url('./Averta-Black.ttf') format('truetype');
+    font-weight: 900;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Averta';
+    src: url('./Averta-BlackItalic.eot');
+    src: url('./Averta-BlackItalic.eot?#iefix') format('embedded-opentype'),
+        url('./Averta-BlackItalic.woff2') format('woff2'),
+        url('./Averta-BlackItalic.woff') format('woff'),
+        url('./Averta-BlackItalic.ttf') format('truetype');
+    font-weight: 900;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Averta';
+    src: url('./Averta-ExtraBoldItalic.eot');
+    src: url('./Averta-ExtraBoldItalic.eot?#iefix') format('embedded-opentype'),
+        url('./Averta-ExtraBoldItalic.woff2') format('woff2'),
+        url('./Averta-ExtraBoldItalic.woff') format('woff'),
+        url('./Averta-ExtraBoldItalic.ttf') format('truetype');
+    font-weight: bold;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Averta';
+    src: url('./Averta-ExtraBold.eot');
+    src: url('./Averta-ExtraBold.eot?#iefix') format('embedded-opentype'),
+        url('./Averta-ExtraBold.woff2') format('woff2'),
+        url('./Averta-ExtraBold.woff') format('woff'),
+        url('./Averta-ExtraBold.ttf') format('truetype');
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Averta';
+    src: url('./Averta-ExtrathinItalic.eot');
+    src: url('./Averta-ExtrathinItalic.eot?#iefix') format('embedded-opentype'),
+        url('./Averta-ExtrathinItalic.woff2') format('woff2'),
+        url('./Averta-ExtrathinItalic.woff') format('woff'),
+        url('./Averta-ExtrathinItalic.ttf') format('truetype');
+    font-weight: 100;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Averta';
+    src: url('./Averta-LightItalic.eot');
+    src: url('./Averta-LightItalic.eot?#iefix') format('embedded-opentype'),
+        url('./Averta-LightItalic.woff2') format('woff2'),
+        url('./Averta-LightItalic.woff') format('woff'),
+        url('./Averta-LightItalic.ttf') format('truetype');
+    font-weight: 300;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Averta';
+    src: url('./Averta-Light.eot');
+    src: url('./Averta-Light.eot?#iefix') format('embedded-opentype'),
+        url('./Averta-Light.woff2') format('woff2'),
+        url('./Averta-Light.woff') format('woff'),
+        url('./Averta-Light.ttf') format('truetype');
+    font-weight: 300;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Averta';
+    src: url('./Averta-Extrathin.eot');
+    src: url('./Averta-Extrathin.eot?#iefix') format('embedded-opentype'),
+        url('./Averta-Extrathin.woff2') format('woff2'),
+        url('./Averta-Extrathin.woff') format('woff'),
+        url('./Averta-Extrathin.ttf') format('truetype');
+    font-weight: 100;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Averta';
+    src: url('./Averta-RegularItalic.eot');
+    src: url('./Averta-RegularItalic.eot?#iefix') format('embedded-opentype'),
+        url('./Averta-RegularItalic.woff2') format('woff2'),
+        url('./Averta-RegularItalic.woff') format('woff'),
+        url('./Averta-RegularItalic.ttf') format('truetype');
+    font-weight: normal;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Averta';
+    src: url('./Averta-SemiboldItalic.eot');
+    src: url('./Averta-SemiboldItalic.eot?#iefix') format('embedded-opentype'),
+        url('./Averta-SemiboldItalic.woff2') format('woff2'),
+        url('./Averta-SemiboldItalic.woff') format('woff'),
+        url('./Averta-SemiboldItalic.ttf') format('truetype');
+    font-weight: 600;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Averta';
+    src: url('./Averta-Semibold.eot');
+    src: url('./Averta-Semibold.eot?#iefix') format('embedded-opentype'),
+        url('./Averta-Semibold.woff2') format('woff2'),
+        url('./Averta-Semibold.woff') format('woff'),
+        url('./Averta-Semibold.ttf') format('truetype');
+    font-weight: 600;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Averta';
+    src: url('./Averta-Thin.eot');
+    src: url('./Averta-Thin.eot?#iefix') format('embedded-opentype'),
+        url('./Averta-Thin.woff2') format('woff2'),
+        url('./Averta-Thin.woff') format('woff'),
+        url('./Averta-Thin.ttf') format('truetype');
+    font-weight: 100;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Averta';
+    src: url('./Averta-Regular.eot');
+    src: url('./Averta-Regular.eot?#iefix') format('embedded-opentype'),
+        url('./Averta-Regular.woff2') format('woff2'),
+        url('./Averta-Regular.woff') format('woff'),
+        url('./Averta-Regular.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Averta';
+    src: url('./Averta-ThinItalic.eot');
+    src: url('./Averta-ThinItalic.eot?#iefix') format('embedded-opentype'),
+        url('./Averta-ThinItalic.woff2') format('woff2'),
+        url('./Averta-ThinItalic.woff') format('woff'),
+        url('./Averta-ThinItalic.ttf') format('truetype');
+    font-weight: 100;
+    font-style: italic;
+    font-display: swap;
+}
+

src/assets/images/ArrowRightIcon.js

@@ -0,0 +1,28 @@
+import PropTypes from 'prop-types';
+
+const ArrowRightIcon = ({ width = 50, height = 24, color = '#007AFF', ...props }) => (
+  <svg
+    width={width}
+    height={height}
+    viewBox="0 0 18 18"
+    fill="none"
+    {...props}
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M10.8223 14.1148C10.6798 14.1148 10.5373 14.0623 10.4248 13.9498C10.2073 13.7323 10.2073 13.3723 10.4248 13.1548L14.5798 8.99984L10.4248 4.84484C10.2073 4.62734 10.2073 4.26734 10.4248 4.04984C10.6423 3.83234 11.0023 3.83234 11.2198 4.04984L15.7723 8.60234C15.9898 8.81984 15.9898 9.17984 15.7723 9.39734L11.2198 13.9498C11.1073 14.0623 10.9648 14.1148 10.8223 14.1148Z"
+      fill={color}
+    />
+    <path
+      d="M15.2475 9.5625H2.625C2.3175 9.5625 2.0625 9.3075 2.0625 9C2.0625 8.6925 2.3175 8.4375 2.625 8.4375H15.2475C15.555 8.4375 15.81 8.6925 15.81 9C15.81 9.3075 15.555 9.5625 15.2475 9.5625Z"
+      fill={color}
+    />
+  </svg>
+);
+export default ArrowRightIcon;
+
+ArrowRightIcon.propTypes = {
+  width: PropTypes.string,
+  height: PropTypes.string,
+  color: PropTypes.string
+};

src/assets/images/CarretArrowRightIcon.js

@@ -0,0 +1,25 @@
+import PropTypes from 'prop-types';
+
+const CarretArrowRightIcon = ({ width = 24, height = 24, color = 'black', ...props }) => (
+  <svg
+    width={width}
+    height={height}
+    {...props}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M8.9101 20.67C8.7201 20.67 8.5301 20.6 8.3801 20.45C8.0901 20.16 8.0901 19.68 8.3801 19.39L14.9001 12.87C15.3801 12.39 15.3801 11.61 14.9001 11.13L8.3801 4.61002C8.0901 4.32002 8.0901 3.84002 8.3801 3.55002C8.6701 3.26002 9.1501 3.26002 9.4401 3.55002L15.9601 10.07C16.4701 10.58 16.7601 11.27 16.7601 12C16.7601 12.73 16.4801 13.42 15.9601 13.93L9.4401 20.45C9.2901 20.59 9.1001 20.67 8.9101 20.67Z"
+      fill={color}
+    />
+  </svg>
+);
+
+export default CarretArrowRightIcon;
+
+CarretArrowRightIcon.propTypes = {
+  width: PropTypes.string,
+  height: PropTypes.string,
+  color: PropTypes.string
+};

src/assets/images/Close.js

@@ -0,0 +1,9 @@
+const Close = () => (
+  <svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M6.62646 1.375L1.37646 6.625" stroke="#202020" strokeLinecap="round" strokeLinejoin="round"/>
+    <path d="M1.37646 1.375L6.62646 6.625" stroke="#202020" strokeLinecap="round" strokeLinejoin="round"/>
+  </svg>  
+);
+
+export default Close;
+

src/assets/images/CrossIcon.js

@@ -0,0 +1,19 @@
+import React from 'react';
+
+const CrossIcon = ({ width = 30, height = 30 }) => (
+  <svg width={width} height={height} viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g opacity="0.5">
+      <circle cx="20" cy="20" r="20" fill="#C2C2C2"/>
+      <path d="M26.25 13.75L13.75 26.25" stroke='white' strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+      <path d="M13.75 13.75L26.25 26.25" stroke='white' strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+    </g>
+  </svg>
+);
+  
+export default CrossIcon;
+
+CrossIcon.propTypes = {
+  width: Number,
+  height: Number
+};
+

src/assets/images/EquimpmentIcon.js

@@ -0,0 +1,35 @@
+import PropTypes from 'prop-types';
+const EquipmentIcon = ({ width = 96, height = 96, color = '#007aff', ...props }) => (
+  <svg
+    width={width}
+    height={height}
+    viewBox="0 0 96 96"
+    fill="none"
+    {...props}
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M47.9994 53.1999C47.4794 53.1999 46.9594 53.08 46.4794 52.8L11.1594 32.3601C9.71941 31.5201 9.23933 29.68 10.0793 28.24C10.9193 26.8 12.7193 26.3199 14.1993 27.1599L47.9994 46.72L81.5993 27.28C83.0394 26.44 84.8793 26.9601 85.7193 28.3601C86.5593 29.8001 86.0394 31.64 84.6394 32.48L49.5594 52.8C49.0394 53.04 48.5194 53.1999 47.9994 53.1999Z"
+      fill={color}
+    />
+    <path
+      d="M48 89.4402C46.36 89.4402 45 88.0802 45 86.4402V50.1602C45 48.5202 46.36 47.1602 48 47.1602C49.64 47.1602 51 48.5202 51 50.1602V86.4402C51 88.0802 49.64 89.4402 48 89.4402Z"
+      fill={color}
+    />
+    <path
+      d="M48.0005 91C44.4805 91 41.0005 90.2399 38.2405 88.7199L16.8805 76.8401C11.0805 73.6401 6.56055 65.92 6.56055 59.28V36.6799C6.56055 30.0399 11.0805 22.3601 16.8805 19.1201L38.2405 7.28C43.7205 4.24 52.2805 4.24 57.7605 7.28L79.1205 19.1599C84.9205 22.3599 89.4404 30.0799 89.4404 36.7199V59.32C89.4404 65.96 84.9205 73.6399 79.1205 76.8799L57.7605 88.7199C55.0005 90.2399 51.5205 91 48.0005 91ZM48.0005 11C45.4805 11 43.0005 11.52 41.1605 12.52L19.8005 24.3999C15.9605 26.5599 12.5605 32.2799 12.5605 36.7199V59.32C12.5605 63.72 15.9605 69.4799 19.8005 71.6399L41.1605 83.52C44.8005 85.56 51.2005 85.56 54.8405 83.52L76.2004 71.6399C80.0404 69.4799 83.4404 63.76 83.4404 59.32V36.7199C83.4404 32.3199 80.0404 26.5599 76.2004 24.3999L54.8405 12.52C53.0005 11.52 50.5205 11 48.0005 11Z"
+      fill={color}
+    />
+    <path
+      d="M68.0007 55.9602C66.3607 55.9602 65.0007 54.6002 65.0007 52.9602V40.0803L28.5207 19.0403C27.0807 18.2003 26.6007 16.3602 27.4407 14.9602C28.2807 13.5202 30.0807 13.0401 31.5207 13.8801L69.4807 35.8003C70.4007 36.3203 71.0007 37.3201 71.0007 38.4001V53.0403C71.0007 54.6003 69.6407 55.9602 68.0007 55.9602Z"
+      fill={color}
+    />
+  </svg>
+);
+
+export default EquipmentIcon;
+EquipmentIcon.propTypes = {
+  width: PropTypes.string,
+  height: PropTypes.string,
+  color: PropTypes.string
+};