diff --git a/.gitignore b/.gitignore
index ceaea36..4d29575 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,132 +1,23 @@
-# ---> Node
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-lerna-debug.log*
-.pnpm-debug.log*
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
-# Diagnostic reports (https://nodejs.org/api/report.html)
-report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
 
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
+# testing
+/coverage
 
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
+# production
+/build
 
-# Coverage directory used by tools like istanbul
-coverage
-*.lcov
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
-jspm_packages/
-
-# Snowpack dependency directory (https://snowpack.dev/)
-web_modules/
-
-# TypeScript cache
-*.tsbuildinfo
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Optional stylelint cache
-.stylelintcache
-
-# Microbundle cache
-.rpt2_cache/
-.rts2_cache_cjs/
-.rts2_cache_es/
-.rts2_cache_umd/
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variable files
-.env
+# misc
+.DS_Store
+.env.local
 .env.development.local
 .env.test.local
 .env.production.local
-.env.local
-
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-.parcel-cache
-
-# Next.js build output
-.next
-out
-
-# Nuxt.js build / generate output
-.nuxt
-dist
-
-# Gatsby files
-.cache/
-# Comment in the public line in if your project uses Gatsby and not Next.js
-# https://nextjs.org/blog/next-9-1#public-directory-support
-# public
-
-# vuepress build output
-.vuepress/dist
-
-# vuepress v2.x temp and cache directory
-.temp
-.cache
-
-# Docusaurus cache and generated files
-.docusaurus
-
-# Serverless directories
-.serverless/
-
-# FuseBox cache
-.fusebox/
-
-# DynamoDB Local files
-.dynamodb/
-
-# TernJS port file
-.tern-port
-
-# Stores VSCode versions used for testing VSCode extensions
-.vscode-test
-
-# yarn v2
-.yarn/cache
-.yarn/unplugged
-.yarn/build-state.yml
-.yarn/install-state.gz
-.pnp.*
 
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/README.md b/README.md
index 21d5ef3..58beeac 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,70 @@
-# timetracking-fe
+# Getting Started with Create React App
 
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm start`
+
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
+
+The page will reload when you make changes.\
+You may also see any lint errors in the console.
+
+### `npm test`
+
+Launches the test runner in the interactive watch mode.\
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `npm run eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can't go back!**
+
+If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
+
+You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).
+
+### Code Splitting
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
+
+### Analyzing the Bundle Size
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
+
+### Making a Progressive Web App
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
+
+### Advanced Configuration
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
+
+### Deployment
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
+
+### `npm run build` fails to minify
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
diff --git a/ticketmanager-fe/package-lock.json b/package-lock.json
similarity index 96%
rename from ticketmanager-fe/package-lock.json
rename to package-lock.json
index 045c0bd..4d05ac0 100644
--- a/ticketmanager-fe/package-lock.json
+++ b/package-lock.json
@@ -1,19 +1,30 @@
 {
-  "name": "ticketmanager-fe",
+  "name": "hbaseapp",
   "version": "0.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "ticketmanager-fe",
+      "name": "hbaseapp",
       "version": "0.1.0",
       "dependencies": {
+        "@emotion/react": "^11.13.0",
+        "@emotion/styled": "^11.13.0",
+        "@fortawesome/free-solid-svg-icons": "^6.6.0",
+        "@fortawesome/react-fontawesome": "^0.2.2",
+        "@mui/icons-material": "^5.16.7",
+        "@mui/material": "^5.16.7",
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
+        "axios": "^1.7.4",
+        "jwt-decode": "^4.0.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "react-router": "^6.26.1",
+        "react-router-dom": "^6.26.1",
         "react-scripts": "5.0.1",
+        "react-toastify": "^10.0.5",
         "web-vitals": "^2.1.4"
       }
     },
@@ -2436,6 +2447,179 @@
         "postcss-selector-parser": "^6.0.10"
       }
     },
+    "node_modules/@emotion/babel-plugin": {
+      "version": "11.12.0",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.12.0.tgz",
+      "integrity": "sha512-y2WQb+oP8Jqvvclh8Q55gLUyb7UFvgv7eJfsj7td5TToBrIUtPay2kMrZi4xjq9qw2vD0ZR5fSho0yqoFgX7Rw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.16.7",
+        "@babel/runtime": "^7.18.3",
+        "@emotion/hash": "^0.9.2",
+        "@emotion/memoize": "^0.9.0",
+        "@emotion/serialize": "^1.2.0",
+        "babel-plugin-macros": "^3.1.0",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/convert-source-map": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
+      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/source-map": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/@emotion/cache": {
+      "version": "11.13.1",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.13.1.tgz",
+      "integrity": "sha512-iqouYkuEblRcXmylXIwwOodiEK5Ifl7JcX7o6V4jI3iW4mLXX3dmt5xwBtIkJiQEXFAI+pC8X0i67yiPkH9Ucw==",
+      "license": "MIT",
+      "dependencies": {
+        "@emotion/memoize": "^0.9.0",
+        "@emotion/sheet": "^1.4.0",
+        "@emotion/utils": "^1.4.0",
+        "@emotion/weak-memoize": "^0.4.0",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/hash": {
+      "version": "0.9.2",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.2.tgz",
+      "integrity": "sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/is-prop-valid": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.3.0.tgz",
+      "integrity": "sha512-SHetuSLvJDzuNbOdtPVbq6yMMMlLoW5Q94uDqJZqy50gcmAjxFkVqmzqSGEFq9gT2iMuIeKV1PXVWmvUhuZLlQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@emotion/memoize": "^0.9.0"
+      }
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz",
+      "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/react": {
+      "version": "11.13.0",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.13.0.tgz",
+      "integrity": "sha512-WkL+bw1REC2VNV1goQyfxjx1GYJkcc23CRQkXX+vZNLINyfI7o+uUn/rTGPt/xJ3bJHd5GcljgnxHf4wRw5VWQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.12.0",
+        "@emotion/cache": "^11.13.0",
+        "@emotion/serialize": "^1.3.0",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.1.0",
+        "@emotion/utils": "^1.4.0",
+        "@emotion/weak-memoize": "^0.4.0",
+        "hoist-non-react-statics": "^3.3.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/serialize": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.0.tgz",
+      "integrity": "sha512-jACuBa9SlYajnpIVXB+XOXnfJHyckDfe6fOpORIM6yhBDlqGuExvDdZYHDQGoDf3bZXGv7tNr+LpLjJqiEQ6EA==",
+      "license": "MIT",
+      "dependencies": {
+        "@emotion/hash": "^0.9.2",
+        "@emotion/memoize": "^0.9.0",
+        "@emotion/unitless": "^0.9.0",
+        "@emotion/utils": "^1.4.0",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@emotion/sheet": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.4.0.tgz",
+      "integrity": "sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/styled": {
+      "version": "11.13.0",
+      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.13.0.tgz",
+      "integrity": "sha512-tkzkY7nQhW/zC4hztlwucpT8QEZ6eUzpXDRhww/Eej4tFfO0FxQYWRyg/c5CCXa4d/f174kqeXYjuQRnhzf6dA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.12.0",
+        "@emotion/is-prop-valid": "^1.3.0",
+        "@emotion/serialize": "^1.3.0",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.1.0",
+        "@emotion/utils": "^1.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.0.0-rc.0",
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/unitless": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.9.0.tgz",
+      "integrity": "sha512-TP6GgNZtmtFaFcsOgExdnfxLLpRDla4Q66tnenA9CktvVSdNKDvMVuUah4QvWPIpNjrWsGg3qeGo9a43QooGZQ==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/use-insertion-effect-with-fallbacks": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.1.0.tgz",
+      "integrity": "sha512-+wBOcIV5snwGgI2ya3u99D7/FJquOIniQT1IKyDsBmEgwvpxMNeS65Oib7OnE2d2aY+3BU4OiH+0Wchf8yk3Hw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@emotion/utils": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.0.tgz",
+      "integrity": "sha512-spEnrA1b6hDR/C68lC2M7m6ALPUHZC0lIY7jAS/B/9DuuO1ZP04eov8SMv/6fwRd8pzmsn2AuJEznRREWlQrlQ==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/weak-memoize": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz",
+      "integrity": "sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==",
+      "license": "MIT"
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -2537,6 +2721,53 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.6.0.tgz",
+      "integrity": "sha512-xyX0X9mc0kyz9plIyryrRbl7ngsA9jz77mCZJsUkLl+ZKs0KWObgaEBoSgQiYWAsSmjz/yjl0F++Got0Mdp4Rw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.6.0.tgz",
+      "integrity": "sha512-KHwPkCk6oRT4HADE7smhfsKudt9N/9lm6EJ5BVg0tD1yPA5hht837fB87F8pn15D8JfTqQOjhKTktwmLMiD7Kg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.6.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.6.0.tgz",
+      "integrity": "sha512-IYv/2skhEDFc2WGUcqvFJkeK39Q+HyPf5GHUrT/l2pKbtgEIv1al1TKd6qStR5OIwQdN1GZP54ci3y4mroJWjA==",
+      "license": "(CC-BY-4.0 AND MIT)",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.6.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/react-fontawesome": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.2.tgz",
+      "integrity": "sha512-EnkrprPNqI6SXJl//m29hpaNzOp1bruISWaOiRtkMi/xSvHJlzc2j2JAYS7egxt/EbjSNV/k6Xy0AQI6vB2+1g==",
+      "license": "MIT",
+      "dependencies": {
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+        "react": ">=16.3"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.14",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
@@ -3416,6 +3647,242 @@
       "integrity": "sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw==",
       "license": "MIT"
     },
+    "node_modules/@mui/core-downloads-tracker": {
+      "version": "5.16.7",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.16.7.tgz",
+      "integrity": "sha512-RtsCt4Geed2/v74sbihWzzRs+HsIQCfclHeORh5Ynu2fS4icIKozcSubwuG7vtzq2uW3fOR1zITSP84TNt2GoQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      }
+    },
+    "node_modules/@mui/icons-material": {
+      "version": "5.16.7",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.16.7.tgz",
+      "integrity": "sha512-UrGwDJCXEszbDI7yV047BYU5A28eGJ79keTCP4cc74WyncuVrnurlmIRxaHL8YK+LI1Kzq+/JM52IAkNnv4u+Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@mui/material": "^5.0.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/material": {
+      "version": "5.16.7",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.16.7.tgz",
+      "integrity": "sha512-cwwVQxBhK60OIOqZOVLFt55t01zmarKJiJUWbk0+8s/Ix5IaUzAShqlJchxsIQ4mSrWqgcKCCXKtIlG5H+/Jmg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@mui/core-downloads-tracker": "^5.16.7",
+        "@mui/system": "^5.16.7",
+        "@mui/types": "^7.2.15",
+        "@mui/utils": "^5.16.6",
+        "@popperjs/core": "^2.11.8",
+        "@types/react-transition-group": "^4.4.10",
+        "clsx": "^2.1.0",
+        "csstype": "^3.1.3",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.3.1",
+        "react-transition-group": "^4.4.5"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/material/node_modules/react-is": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
+      "license": "MIT"
+    },
+    "node_modules/@mui/private-theming": {
+      "version": "5.16.6",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.16.6.tgz",
+      "integrity": "sha512-rAk+Rh8Clg7Cd7shZhyt2HGTTE5wYKNSJ5sspf28Fqm/PZ69Er9o6KX25g03/FG2dfpg5GCwZh/xOojiTfm3hw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@mui/utils": "^5.16.6",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/styled-engine": {
+      "version": "5.16.6",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.16.6.tgz",
+      "integrity": "sha512-zaThmS67ZmtHSWToTiHslbI8jwrmITcN93LQaR2lKArbvS7Z3iLkwRoiikNWutx9MBs8Q6okKvbZq1RQYB3v7g==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@emotion/cache": "^11.11.0",
+        "csstype": "^3.1.3",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.4.1",
+        "@emotion/styled": "^11.3.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/system": {
+      "version": "5.16.7",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.16.7.tgz",
+      "integrity": "sha512-Jncvs/r/d/itkxh7O7opOunTqbbSSzMTHzZkNLM+FjAOg+cYAZHrPDlYe1ZGKUYORwwb2XexlWnpZp0kZ4AHuA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@mui/private-theming": "^5.16.6",
+        "@mui/styled-engine": "^5.16.6",
+        "@mui/types": "^7.2.15",
+        "@mui/utils": "^5.16.6",
+        "clsx": "^2.1.0",
+        "csstype": "^3.1.3",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/types": {
+      "version": "7.2.15",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.15.tgz",
+      "integrity": "sha512-nbo7yPhtKJkdf9kcVOF8JZHPZTmqXjJ/tI0bdWgHg5tp9AnIN4Y7f7wm9T+0SyGYJk76+GYZ8Q5XaTYAsUHN0Q==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/utils": {
+      "version": "5.16.6",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.16.6.tgz",
+      "integrity": "sha512-tWiQqlhxAt3KENNiSRL+DIn9H5xNVK6Jjf70x3PnfQPz1MPBdh7yyIcAyVBT9xiw7hP3SomRhPR7hzBMBCjqEA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@mui/types": "^7.2.15",
+        "@types/prop-types": "^15.7.12",
+        "clsx": "^2.1.1",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.3.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/utils/node_modules/react-is": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
+      "license": "MIT"
+    },
     "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": {
       "version": "5.1.1-v1",
       "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",
@@ -3540,6 +4007,25 @@
         }
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
+    "node_modules/@remix-run/router": {
+      "version": "1.19.1",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.19.1.tgz",
+      "integrity": "sha512-S45oynt/WH19bHbIXjtli6QmwNYvaz+vtnubvNpNDvUOoA/OWh6j1OikIP3G+v5GHdxyC6EXoChG3HgYGEUfcg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -4375,9 +4861,9 @@
       "license": "MIT"
     },
     "node_modules/@types/http-proxy": {
-      "version": "1.17.14",
-      "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.14.tgz",
-      "integrity": "sha512-SSrD0c1OQzlFX7pGu1eXxSEjemej64aaNPRhhVYUGqXh0BtldAAx37MG8btcumvpgKyZp1F5Gn3JkktdxiFv6w==",
+      "version": "1.17.15",
+      "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.15.tgz",
+      "integrity": "sha512-25g5atgiVNTIv0LBDTg1H74Hvayx0ajtJPLLcYE3whFv75J0pWNtOBzaXJQgDTmrX1bx5U9YC2w/n65BN1HwRQ==",
       "license": "MIT",
       "dependencies": {
         "@types/node": "*"
@@ -4453,9 +4939,9 @@
       "license": "MIT"
     },
     "node_modules/@types/jest/node_modules/@types/yargs": {
-      "version": "17.0.32",
-      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.32.tgz",
-      "integrity": "sha512-xQ67Yc/laOG5uMfX/093MRlGGCIBzZMarVa+gfNKJxWAIgykYpVGkBdbqEzGDDfCrVUj6Hiff4mTZ5BA6TmAog==",
+      "version": "17.0.33",
+      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.33.tgz",
+      "integrity": "sha512-WpxBCKWPLr4xSsHgz511rFJAM+wS28w2zEO1QDNY5zM/S8ok70NNfztH0xwhqKyaK0OHCbN98LDAZuy1ctxDkA==",
       "license": "MIT",
       "dependencies": {
         "@types/yargs-parser": "*"
@@ -4683,12 +5169,12 @@
       "license": "MIT"
     },
     "node_modules/@types/node": {
-      "version": "22.0.1",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.0.1.tgz",
-      "integrity": "sha512-RVKWL+s4ax6syie/ev3FXFIs38mke4ZsCDPBcLF2Gu6MbQXKe9Fo9iU0EPUxDB1mDVvC0vCgkV3lKa2f6xIuHg==",
+      "version": "22.4.2",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.4.2.tgz",
+      "integrity": "sha512-nAvM3Ey230/XzxtyDcJ+VjvlzpzoHwLsF7JaDRfoI0ytO0mVheerNmM45CtA0yOILXwXXxOrcUWH3wltX+7PSw==",
       "license": "MIT",
       "dependencies": {
-        "undici-types": "~6.11.1"
+        "undici-types": "~6.19.2"
       }
     },
     "node_modules/@types/node-forge": {
@@ -4737,9 +5223,9 @@
       "license": "MIT"
     },
     "node_modules/@types/react": {
-      "version": "18.3.3",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.3.tgz",
-      "integrity": "sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==",
+      "version": "18.3.4",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.4.tgz",
+      "integrity": "sha512-J7W30FTdfCxDDjmfRM+/JqLHBIyl7xUIp9kwK637FGmY7+mkSFSe6L4jpZzhj5QMfLssSDP4/i75AKkrdC7/Jw==",
       "license": "MIT",
       "dependencies": {
         "@types/prop-types": "*",
@@ -4755,6 +5241,15 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-transition-group": {
+      "version": "4.4.11",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.11.tgz",
+      "integrity": "sha512-RM05tAniPZ5DZPzzNFP+DmrcOdD0efDUxMy3145oljWSl3x9ZV5vhme98gTxFrj2lhXvmGNnUiuDyJgY9IKkNA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -5734,9 +6229,9 @@
       "license": "MIT"
     },
     "node_modules/async": {
-      "version": "3.2.5",
-      "resolved": "https://registry.npmjs.org/async/-/async-3.2.5.tgz",
-      "integrity": "sha512-baNZyqaaLhyLVKm/DlvdW051MSgO6b8eVfIezl9E5PqWxFgzLm/wQntEW4zOytVburDEr0JlALEpdOFwvErLsg==",
+      "version": "3.2.6",
+      "resolved": "https://registry.npmjs.org/async/-/async-3.2.6.tgz",
+      "integrity": "sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==",
       "license": "MIT"
     },
     "node_modules/asynckit": {
@@ -5755,9 +6250,9 @@
       }
     },
     "node_modules/autoprefixer": {
-      "version": "10.4.19",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.19.tgz",
-      "integrity": "sha512-BaENR2+zBZ8xXhM4pUaKUxlVdxZ0EZhjvbopwnXmxRUfqDmwSpC2lAi/QXvx7NRdPCo1WKEcEF6mV64si1z4Ew==",
+      "version": "10.4.20",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz",
+      "integrity": "sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==",
       "funding": [
         {
           "type": "opencollective",
@@ -5774,11 +6269,11 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "browserslist": "^4.23.0",
-        "caniuse-lite": "^1.0.30001599",
+        "browserslist": "^4.23.3",
+        "caniuse-lite": "^1.0.30001646",
         "fraction.js": "^4.3.7",
         "normalize-range": "^0.1.2",
-        "picocolors": "^1.0.0",
+        "picocolors": "^1.0.1",
         "postcss-value-parser": "^4.2.0"
       },
       "bin": {
@@ -5815,6 +6310,31 @@
         "node": ">=4"
       }
     },
+    "node_modules/axios": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.4.tgz",
+      "integrity": "sha512-DukmaFRnY6AzAALSH4J2M3k6PkaC+MfaAGdEERRWcC9q3/TWQwLpHR8ZRLKTdQ3aBDL64EdluRDjJqKw+BPZEw==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "node_modules/axios/node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/axobject-query": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.1.1.tgz",
@@ -6032,13 +6552,13 @@
       }
     },
     "node_modules/babel-plugin-polyfill-corejs3": {
-      "version": "0.10.4",
-      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.10.4.tgz",
-      "integrity": "sha512-25J6I8NGfa5YkCDogHRID3fVCadIR8/pGl1/spvCkzb6lVn6SR3ojpx9nOn9iEBcUsjY24AmdKm5khcfKdylcg==",
+      "version": "0.10.6",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.10.6.tgz",
+      "integrity": "sha512-b37+KR2i/khY5sKmWNVQAnitvquQbNdWy6lJdsr0kmquCKEEUgMKK4SboVM3HtfnZilfjr4MMQ7vY58FVWDtIA==",
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-define-polyfill-provider": "^0.6.1",
-        "core-js-compat": "^3.36.1"
+        "@babel/helper-define-polyfill-provider": "^0.6.2",
+        "core-js-compat": "^3.38.0"
       },
       "peerDependencies": {
         "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
@@ -6063,23 +6583,26 @@
       "license": "MIT"
     },
     "node_modules/babel-preset-current-node-syntax": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.0.1.tgz",
-      "integrity": "sha512-M7LQ0bxarkxQoN+vz5aJPsLBn77n8QgTFmo8WK0/44auK2xlCXrYcUxHFxgU7qW5Yzw/CjmLRK2uJzaCd7LvqQ==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.1.0.tgz",
+      "integrity": "sha512-ldYss8SbBlWva1bs28q78Ju5Zq1F+8BrqBZZ0VFhLBvhh6lCpC2o3gDJi/5DRLs9FgYZCnmPYIVFU4lRXCkyUw==",
       "license": "MIT",
       "dependencies": {
         "@babel/plugin-syntax-async-generators": "^7.8.4",
         "@babel/plugin-syntax-bigint": "^7.8.3",
-        "@babel/plugin-syntax-class-properties": "^7.8.3",
-        "@babel/plugin-syntax-import-meta": "^7.8.3",
+        "@babel/plugin-syntax-class-properties": "^7.12.13",
+        "@babel/plugin-syntax-class-static-block": "^7.14.5",
+        "@babel/plugin-syntax-import-attributes": "^7.24.7",
+        "@babel/plugin-syntax-import-meta": "^7.10.4",
         "@babel/plugin-syntax-json-strings": "^7.8.3",
-        "@babel/plugin-syntax-logical-assignment-operators": "^7.8.3",
+        "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4",
         "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3",
-        "@babel/plugin-syntax-numeric-separator": "^7.8.3",
+        "@babel/plugin-syntax-numeric-separator": "^7.10.4",
         "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
         "@babel/plugin-syntax-optional-catch-binding": "^7.8.3",
         "@babel/plugin-syntax-optional-chaining": "^7.8.3",
-        "@babel/plugin-syntax-top-level-await": "^7.8.3"
+        "@babel/plugin-syntax-private-property-in-object": "^7.14.5",
+        "@babel/plugin-syntax-top-level-await": "^7.14.5"
       },
       "peerDependencies": {
         "@babel/core": "^7.0.0"
@@ -6285,9 +6808,9 @@
       "license": "BSD-2-Clause"
     },
     "node_modules/browserslist": {
-      "version": "4.23.2",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.2.tgz",
-      "integrity": "sha512-qkqSyistMYdxAcw+CzbZwlBy8AGmS/eEWs+sEV5TnLRGDOL+C5M2EnH6tlZyg0YoAxGJAFKh61En9BR941GnHA==",
+      "version": "4.23.3",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.3.tgz",
+      "integrity": "sha512-btwCFJVjI4YWDNfau8RhZ+B1Q/VLoUITrm3RlP6y1tYGWIOa+InuYiRGXUBXo8nA1qKmHMyLB/iVQg5TT4eFoA==",
       "funding": [
         {
           "type": "opencollective",
@@ -6304,9 +6827,9 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "caniuse-lite": "^1.0.30001640",
-        "electron-to-chromium": "^1.4.820",
-        "node-releases": "^2.0.14",
+        "caniuse-lite": "^1.0.30001646",
+        "electron-to-chromium": "^1.5.4",
+        "node-releases": "^2.0.18",
         "update-browserslist-db": "^1.1.0"
       },
       "bin": {
@@ -6424,9 +6947,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001645",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001645.tgz",
-      "integrity": "sha512-GFtY2+qt91kzyMk6j48dJcwJVq5uTkk71XxE3RtScx7XWRLsO7bU44LOFkOZYR8w9YMS0UhPSYpN/6rAMImmLw==",
+      "version": "1.0.30001651",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001651.tgz",
+      "integrity": "sha512-9Cf+Xv1jJNe1xPZLGuUXLNkE1BoDkqRqYyFJ9TDYSqhduqA4hu4oR9HluGoWYQC/aj8WHjsGVV+bwkh0+tegRg==",
       "funding": [
         {
           "type": "opencollective",
@@ -6579,6 +7102,15 @@
         "wrap-ansi": "^7.0.0"
       }
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -6787,9 +7319,9 @@
       "license": "MIT"
     },
     "node_modules/core-js": {
-      "version": "3.37.1",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.37.1.tgz",
-      "integrity": "sha512-Xn6qmxrQZyB0FFY8E3bgRXei3lWDJHhvI+u0q9TKIYM49G8pAr0FgnnrFRAmsbptZL1yxRADVXn+x5AGsbBfyw==",
+      "version": "3.38.1",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.38.1.tgz",
+      "integrity": "sha512-OP35aUorbU3Zvlx7pjsFdu1rGNnD4pgw/CWoYzRY3t2EzoVT7shKHY1dlAy3f41cGIO7ZDPQimhGFTlEYkG/Hw==",
       "hasInstallScript": true,
       "license": "MIT",
       "funding": {
@@ -6798,12 +7330,12 @@
       }
     },
     "node_modules/core-js-compat": {
-      "version": "3.37.1",
-      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.37.1.tgz",
-      "integrity": "sha512-9TNiImhKvQqSUkOvk/mMRZzOANTiEVC7WaBNhHcKM7x+/5E1l5NvsysR19zuDQScE8k+kfQXWRN3AtS/eOSHpg==",
+      "version": "3.38.1",
+      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.38.1.tgz",
+      "integrity": "sha512-JRH6gfXxGmrzF3tZ57lFx97YARxCXPaMzPo6jELZhv88pBH5VXpQ+y0znKGlFnzuaihqhLbefxSJxWJMPtfDzw==",
       "license": "MIT",
       "dependencies": {
-        "browserslist": "^4.23.0"
+        "browserslist": "^4.23.3"
       },
       "funding": {
         "type": "opencollective",
@@ -6811,9 +7343,9 @@
       }
     },
     "node_modules/core-js-pure": {
-      "version": "3.37.1",
-      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.37.1.tgz",
-      "integrity": "sha512-J/r5JTHSmzTxbiYYrzXg9w1VpqrYt+gexenBE9pugeyhwPZTAEJddyiReJWsLO6uNQ8xJZFbod6XC7KKwatCiA==",
+      "version": "3.38.1",
+      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.38.1.tgz",
+      "integrity": "sha512-BY8Etc1FZqdw1glX0XNOq2FDwfrg/VGqoZOZCdaL+UmdaqDwQwYXkMJT4t6In+zfEfOJDcM9T0KdbBeJg8KKCQ==",
       "hasInstallScript": true,
       "license": "MIT",
       "funding": {
@@ -7606,6 +8138,16 @@
         "utila": "~0.4"
       }
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/dom-serializer": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
@@ -7742,9 +8284,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.4",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.4.tgz",
-      "integrity": "sha512-orzA81VqLyIGUEA77YkVA1D+N+nNfl2isJVjjmOyrlxuooZ19ynb+dOlaDTqd/idKRS9lDCSBmtzM+kyCsMnkA==",
+      "version": "1.5.12",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.12.tgz",
+      "integrity": "sha512-tIhPkdlEoCL1Y+PToq3zRNehUaKp3wBX/sr7aclAWdIWjvqAe/Im/H0SiCM4c1Q8BLPHCdoJTol+ZblflydehA==",
       "license": "ISC"
     },
     "node_modules/emittery": {
@@ -9144,6 +9686,12 @@
         "url": "https://github.com/avajs/find-cache-dir?sponsor=1"
       }
     },
+    "node_modules/find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==",
+      "license": "MIT"
+    },
     "node_modules/find-up": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
@@ -9207,9 +9755,9 @@
       }
     },
     "node_modules/foreground-child": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.2.1.tgz",
-      "integrity": "sha512-PXUUyLqrR2XCWICfv6ukppP96sdFwWbNEnfEMt7jNsISjMsvaLNinAHNDYyvkyU+SZG2BTSbT5NjG+vZslfGTA==",
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.0.tgz",
+      "integrity": "sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==",
       "license": "ISC",
       "dependencies": {
         "cross-spawn": "^7.0.0",
@@ -9866,6 +10414,21 @@
         "he": "bin/he"
       }
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "node_modules/hoist-non-react-statics/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "license": "MIT"
+    },
     "node_modules/hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -10174,9 +10737,9 @@
       }
     },
     "node_modules/ignore": {
-      "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz",
-      "integrity": "sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==",
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
+      "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
       "license": "MIT",
       "engines": {
         "node": ">= 4"
@@ -12659,9 +13222,9 @@
       }
     },
     "node_modules/jest-watch-typeahead/node_modules/@types/yargs": {
-      "version": "17.0.32",
-      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.32.tgz",
-      "integrity": "sha512-xQ67Yc/laOG5uMfX/093MRlGGCIBzZMarVa+gfNKJxWAIgykYpVGkBdbqEzGDDfCrVUj6Hiff4mTZ5BA6TmAog==",
+      "version": "17.0.33",
+      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.33.tgz",
+      "integrity": "sha512-WpxBCKWPLr4xSsHgz511rFJAM+wS28w2zEO1QDNY5zM/S8ok70NNfztH0xwhqKyaK0OHCbN98LDAZuy1ctxDkA==",
       "license": "MIT",
       "dependencies": {
         "@types/yargs-parser": "*"
@@ -13258,6 +13821,15 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/jwt-decode": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-4.0.0.tgz",
+      "integrity": "sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -13313,9 +13885,9 @@
       }
     },
     "node_modules/launch-editor": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/launch-editor/-/launch-editor-2.8.0.tgz",
-      "integrity": "sha512-vJranOAJrI/llyWGRQqiDM+adrw+k83fvmmx3+nV47g3+36xM15jE+zyZ6Ffel02+xSvuM0b2GDRosXZkbb6wA==",
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/launch-editor/-/launch-editor-2.8.1.tgz",
+      "integrity": "sha512-elBx2l/tp9z99X5H/qev8uyDywVh0VXAwEbjk8kJhnc5grOFkGh7aW6q55me9xnYbss261XtnUrysZ+XvGbhQA==",
       "license": "MIT",
       "dependencies": {
         "picocolors": "^1.0.0",
@@ -13633,9 +14205,9 @@
       }
     },
     "node_modules/mini-css-extract-plugin": {
-      "version": "2.9.0",
-      "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.9.0.tgz",
-      "integrity": "sha512-Zs1YsZVfemekSZG+44vBsYTLQORkPMwnlv+aehcxK/NLKC+EGhDB39/YePYYqx/sTk6NnYpuqikhSn7+JIevTA==",
+      "version": "2.9.1",
+      "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.9.1.tgz",
+      "integrity": "sha512-+Vyi+GCCOHnrJ2VPS+6aPoXN2k2jgUzDRhTFLjjTBn23qyXJXkjUWQgTL+mXpF5/A8ixLdCc6kWsoeOjKGejKQ==",
       "license": "MIT",
       "dependencies": {
         "schema-utils": "^4.0.0",
@@ -14420,9 +14992,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.40",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.40.tgz",
-      "integrity": "sha512-YF2kKIUzAofPMpfH6hOi2cGnv/HrUlfucspc7pDyvv7kGdqXrfj8SCl/t8owkEgKEuu8ZcRjSOxFxVLqwChZ2Q==",
+      "version": "8.4.41",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.41.tgz",
+      "integrity": "sha512-TesUflQ0WKZqAvg52PWL6kHgLKP6xB6heTOdoYM0Wt2UHyxNa4K25EZZMgKns3BH1RLVbZCREPpLY0rhnNoHVQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -15595,9 +16167,9 @@
       }
     },
     "node_modules/postcss-selector-parser": {
-      "version": "6.1.1",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.1.tgz",
-      "integrity": "sha512-b4dlw/9V8A71rLIDsSwVmak9z2DuBUB7CA1/wSdelNEzqsjoSPeADTWNO09lpH49Diy3/JIZ2bSPB1dI3LJCHg==",
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
+      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
       "license": "MIT",
       "dependencies": {
         "cssesc": "^3.0.0",
@@ -15826,6 +16398,12 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "license": "MIT"
+    },
     "node_modules/psl": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
@@ -16212,6 +16790,38 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.26.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.26.1.tgz",
+      "integrity": "sha512-kIwJveZNwp7teQRI5QmwWo39A5bXRyqpH0COKKmPnyD2vBvDwgFXSqDUYtt1h+FEyfnE8eXr7oe0MxRzVwCcvQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@remix-run/router": "1.19.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.26.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.26.1.tgz",
+      "integrity": "sha512-veut7m41S1fLql4pLhxeSW3jlqs+4MtjRLj0xvuCEXsxusJCbs6I8yn9BxzzDX2XDgafrccY6hwjmd/bL54tFw==",
+      "license": "MIT",
+      "dependencies": {
+        "@remix-run/router": "1.19.1",
+        "react-router": "6.26.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
@@ -16285,6 +16895,35 @@
         }
       }
     },
+    "node_modules/react-toastify": {
+      "version": "10.0.5",
+      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-10.0.5.tgz",
+      "integrity": "sha512-mNKt2jBXJg4O7pSdbNUfDdTsK9FIdikfsIE/yUCxbAEXl4HMyJaivrVFcn3Elvt5xvCQYhUZm+hqTIu1UXM3Pw==",
+      "license": "MIT",
+      "dependencies": {
+        "clsx": "^2.1.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -17781,6 +18420,12 @@
         "postcss": "^8.2.15"
       }
     },
+    "node_modules/stylis": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==",
+      "license": "MIT"
+    },
     "node_modules/sucrase": {
       "version": "3.35.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
@@ -18014,9 +18659,9 @@
       "license": "MIT"
     },
     "node_modules/tailwindcss": {
-      "version": "3.4.7",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.7.tgz",
-      "integrity": "sha512-rxWZbe87YJb4OcSopb7up2Ba4U82BoiSGUdoDr3Ydrg9ckxFS/YWsvhN323GMcddgU65QRy7JndC7ahhInhvlQ==",
+      "version": "3.4.10",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.10.tgz",
+      "integrity": "sha512-KWZkVPm7yJRhdu4SRSl9d4AK2wM3a50UsvgHZO7xY77NQr2V+fIrEuoDGQcbvswWvFGbS2f6e+jC/6WJm1Dl0w==",
       "license": "MIT",
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
@@ -18115,9 +18760,9 @@
       }
     },
     "node_modules/terser": {
-      "version": "5.31.3",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.31.3.tgz",
-      "integrity": "sha512-pAfYn3NIZLyZpa83ZKigvj6Rn9c/vd5KfYGX7cN1mnzqgDcxWvrU5ZtAfIKhEXz9nRecw4z3LXkjaq96/qZqAA==",
+      "version": "5.31.6",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.31.6.tgz",
+      "integrity": "sha512-PQ4DAriWzKj+qgehQ7LK5bQqCFNMmlhjR2PFFLuqGCpuCAauxemVBWwWOxo3UIwWQx8+Pr61Df++r76wDmkQBg==",
       "license": "BSD-2-Clause",
       "dependencies": {
         "@jridgewell/source-map": "^0.3.3",
@@ -18551,9 +19196,9 @@
       "license": "MIT"
     },
     "node_modules/undici-types": {
-      "version": "6.11.1",
-      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.11.1.tgz",
-      "integrity": "sha512-mIDEX2ek50x0OlRgxryxsenE5XaQD4on5U2inY7RApK3SOJpofyw7uW2AyfMKkhAxXIceo2DeWGVGwyvng1GNQ==",
+      "version": "6.19.8",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
+      "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==",
       "license": "MIT"
     },
     "node_modules/unicode-canonical-property-names-ecmascript": {
@@ -18797,9 +19442,9 @@
       }
     },
     "node_modules/watchpack": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.1.tgz",
-      "integrity": "sha512-8wrBCMtVhqcXP2Sup1ctSkga6uc2Bx0IIvKyT7yTFier5AXHooSI+QyQQAtTb7+E0IUCCKyTFmXqdqgum2XWGg==",
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.2.tgz",
+      "integrity": "sha512-TnbFSbcOCcDgjZ4piURLCbJ3nJhznVh9kw6F6iokjiFPl8ONxe9A6nMDVXDiNbrSfLILs6vB07F7wLBrwPYzJw==",
       "license": "MIT",
       "dependencies": {
         "glob-to-regexp": "^0.4.1",
diff --git a/ticketmanager-fe/package.json b/package.json
similarity index 65%
rename from ticketmanager-fe/package.json
rename to package.json
index 54eeed5..2f32aa4 100644
--- a/ticketmanager-fe/package.json
+++ b/package.json
@@ -1,14 +1,25 @@
 {
-  "name": "ticketmanager-fe",
+  "name": "hbaseapp",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.13.0",
+    "@emotion/styled": "^11.13.0",
+    "@fortawesome/free-solid-svg-icons": "^6.6.0",
+    "@fortawesome/react-fontawesome": "^0.2.2",
+    "@mui/icons-material": "^5.16.7",
+    "@mui/material": "^5.16.7",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.7.4",
+    "jwt-decode": "^4.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-router": "^6.26.1",
+    "react-router-dom": "^6.26.1",
     "react-scripts": "5.0.1",
+    "react-toastify": "^10.0.5",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
diff --git a/ticketmanager-fe/public/favicon.ico b/public/favicon.ico
similarity index 100%
rename from ticketmanager-fe/public/favicon.ico
rename to public/favicon.ico
diff --git a/ticketmanager-fe/public/index.html b/public/index.html
similarity index 100%
rename from ticketmanager-fe/public/index.html
rename to public/index.html
diff --git a/ticketmanager-fe/public/logo192.png b/public/logo192.png
similarity index 100%
rename from ticketmanager-fe/public/logo192.png
rename to public/logo192.png
diff --git a/ticketmanager-fe/public/logo512.png b/public/logo512.png
similarity index 100%
rename from ticketmanager-fe/public/logo512.png
rename to public/logo512.png
diff --git a/ticketmanager-fe/public/manifest.json b/public/manifest.json
similarity index 100%
rename from ticketmanager-fe/public/manifest.json
rename to public/manifest.json
diff --git a/ticketmanager-fe/public/robots.txt b/public/robots.txt
similarity index 100%
rename from ticketmanager-fe/public/robots.txt
rename to public/robots.txt
diff --git a/ticketmanager-fe/src/App.css b/src/App.css
similarity index 100%
rename from ticketmanager-fe/src/App.css
rename to src/App.css
diff --git a/src/App.js b/src/App.js
new file mode 100644
index 0000000..f93faa9
--- /dev/null
+++ b/src/App.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import LoginPage from './pages/UI/login/login';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import { AuthProvider } from './auth/AuthContext';
+import { Auth } from './auth/auth';
+import Footer from './components/footer'; // Import the Footer component
+import Home from './pages/UI/home/home';
+
+const App = () => {
+  return (
+    <div className='App' style={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
+      <BrowserRouter>
+        <AuthProvider>
+          <Routes>
+          <Route path="/" element={<Auth component={<Home />} />} exact />
+
+            <Route path="/login" element={<Auth component={<LoginPage />} />} exact />
+          </Routes>
+          <Footer />
+        </AuthProvider>
+      </BrowserRouter>
+    </div>
+  );
+};
+
+export default App;
diff --git a/ticketmanager-fe/src/App.test.js b/src/App.test.js
similarity index 100%
rename from ticketmanager-fe/src/App.test.js
rename to src/App.test.js
diff --git a/ticketmanager-fe/.gitignore b/src/api-manager/.gitignore
similarity index 100%
rename from ticketmanager-fe/.gitignore
rename to src/api-manager/.gitignore
diff --git a/src/api-manager/APIManager.js b/src/api-manager/APIManager.js
new file mode 100644
index 0000000..789e6d5
--- /dev/null
+++ b/src/api-manager/APIManager.js
@@ -0,0 +1,416 @@
+import React, { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { toast } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+import Swal from "sweetalert2";
+import "./style.css";
+import useAPIManager from "./useAPIManager";
+import {
+  Button,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Paper,
+  Menu,
+  MenuItem,
+  Fade,
+  Card,
+  CardContent,
+} from "@mui/material";
+import FormWithDrawer from "./FormWithDrawer";
+import MoreVertIcon from "@mui/icons-material/MoreVert";
+import Pagination from "./Pagination";
+
+function APIManager(props) {
+  const dataSchema = props.data;
+  const { Get, Delete, Patch, getAPI, getHost } = useAPIManager(
+    props.globalConfig,
+    props.token
+  );
+  const dataApi = getAPI(props.data.api);
+  const [apiData, setApiData] = useState([]);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [orderBy, setOrderBy] = useState(""); // Column to sort
+  const [order, setOrder] = useState("asc");
+  const [page, setPage] = useState(0);
+  const [rowsPerPage, setRowsPerPage] = useState(50);
+  const [sortedColumn, setSortedColumn] = useState(null);
+  const [filteredData, setFilteredData] = useState([]);
+  const [anchorEls, setAnchorEls] = useState({}); // Updated state for menu anchors
+  const [mounted, setMounted] = useState(false);
+  const [nextPage, setNextPage] = useState(null);
+  const [previousPage, setPreviousPage] = useState(null);
+  const [totalCount, setTotalCount] = useState(0);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [loading, setLoading] = useState(true);
+
+  const updateFormTitle = props.updateFormTitle ? props.updateFormTitle : "";
+  const createFormTitle = props.createFormTitle ? props.createFormTitle : "";
+  const actionBtnName = props.actionBtnName
+    ? props.actionBtnName
+    : "Create New Data";
+  const createRequired = props.createRequired === false ? false : true;
+  const editRequired = props.editRequired === false ? false : true;
+  const searchRequired = props.searchRequired === false ? false : true;
+
+  const createField = dataSchema.createField;
+  const editField = dataSchema.editField;
+  const showField = dataSchema.showField;
+  const manageRecord = true;
+
+  let navigate = useNavigate();
+  const getData = async () => {
+    makeApiRequest(dataApi);
+  };
+
+  const makeApiRequest = async (api) => {
+    try {
+      setSearchQuery("");
+      const result = await Get(api ? api : dataApi);
+      setNextPage(result.next);
+      setPreviousPage(result.previous);
+      setTotalCount(result.count);
+      setApiData(result.results);
+      setFilteredData(result.results);
+    } catch (err) {
+      if (err.code == "ERR_BAD_REQUEST") {
+        toast.error("Unauthorised access to page, Contact admin for access.");
+        navigate("/");
+      } else {
+        toast.error(err.message);
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const pageChangeRequest = (url) => {
+    if (getPageUrl(url) != null) {
+      makeApiRequest(getHost() + getPageUrl(url));
+    }
+  };
+
+  async function softDelete(data) {
+    try {
+      await Patch(dataApi, data["id"], { is_deleted: true })
+        .then(() => {
+          toast.success("Record updated successfully!");
+          getData();
+        })
+        .catch((err) => {
+          getData();
+          toast.error(err || "Error");
+        });
+    } catch {
+      getData();
+      toast.error("Something Went wrong contact Humbingo");
+    }
+  }
+
+  async function restore(data) {
+    try {
+      await Patch(dataApi, data["id"], { is_deleted: false })
+        .then(() => {
+          toast.success("Record updated successfully!");
+          getData();
+        })
+        .catch((err) => {
+          getData();
+          toast.error(err || "Error");
+        });
+    } catch {
+      getData();
+      toast.error("Something Went wrong contact Humbingo");
+    }
+  }
+
+  async function forceDelete(data) {
+    await Swal.fire({
+      title: "Data will be removed permanently! Are you sure?",
+      icon: "warning",
+      showCancelButton: true,
+      confirmButtonColor: "#3085d6",
+      cancelButtonColor: "#d33",
+      confirmButtonText: "Yes, delete it!",
+    }).then(async (result) => {
+      if (result.isConfirmed) {
+        try {
+          await Delete(dataApi, data["id"])
+            .then(() => {
+              toast.success("Record updated successfully!");
+              getData();
+            })
+            .catch((err) => {
+              getData();
+              toast.error(err || "Error");
+            });
+        } catch {
+          getData();
+          toast.error("Something Went wrong contact Humbingo");
+        }
+      }
+    });
+  }
+
+  const getValueFromUrl = (url, parameterName) => {
+    try {
+      const regex = new RegExp(`${parameterName}=([^&]+)`);
+      const match = url.match(regex);
+      return match ? match[1] : null;
+    } catch {
+      return null;
+    }
+  };
+
+  function getPageUrl(url) {
+    let urls = "";
+    try {
+      const urlObject = new URL(url);
+      urls = urlObject.pathname + urlObject.search;
+    } catch {
+      return null;
+    }
+    return urls;
+  }
+
+  useEffect(() => {
+    setMounted(true);
+    return () => {
+      setMounted(false);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (loading && mounted) {
+      getData();
+    }
+  }, [loading, mounted]);
+
+  const handleSearchInputChange = (event) => {
+    const query = event.target.value;
+    makeApiRequest(dataApi + "?search=" + query);
+    setSearchQuery(query);
+  };
+
+  const handleSort = (columnKey) => {
+    const isAsc = orderBy === columnKey && order === "asc";
+    setOrderBy(columnKey);
+    setOrder(isAsc ? "desc" : "asc");
+    setSortedColumn(columnKey);
+  };
+
+  const sortedData = stableSort(filteredData, getComparator(order, orderBy));
+  const visibleRows = sortedData.slice(
+    page * rowsPerPage,
+    page * rowsPerPage + rowsPerPage
+  );
+
+  function stableSort(array, comparator) {
+    const stabilizedThis = array.map((el, index) => [el, index]);
+    stabilizedThis.sort((a, b) => {
+      const order = comparator(a[0], b[0]);
+      if (order !== 0) return order;
+      return a[1] - b[1];
+    });
+    return stabilizedThis.map((el) => el[0]);
+  }
+
+  function getComparator(order, orderBy) {
+    return order === "desc"
+      ? (a, b) => descendingComparator(a, b, orderBy)
+      : (a, b) => -descendingComparator(a, b, orderBy);
+  }
+
+  function descendingComparator(a, b, orderBy) {
+    if (b[orderBy] < a[orderBy]) {
+      return -1;
+    }
+    if (b[orderBy] > a[orderBy]) {
+      return 1;
+    }
+    return 0;
+  }
+
+  const handleMenuClick = (event, rowIndex) => {
+    setAnchorEls((prev) => ({
+      ...prev,
+      [rowIndex]: event.currentTarget,
+    }));
+  };
+
+  const handleMenuClose = (rowIndex) => {
+    setAnchorEls((prev) => ({
+      ...prev,
+      [rowIndex]: null,
+    }));
+  };
+
+  return (
+    <>
+      {loading ? (
+        <center>
+          <img
+            src="./assets/img/loader.gif"
+            height="30px"
+            width="30px"
+            alt="Loading"
+          />
+        </center>
+      ) : (
+        <div className="row">
+          <Card
+            className="col-md-12"
+            style={{ marginBottom: "10px", backgroundColor: "#A9A9A9" }}
+          >
+            <CardContent>
+              {createRequired && (
+                <FormWithDrawer
+                globalConfig={props.globalConfig}
+                token={props.token}
+                  actionBtnName={actionBtnName}
+                  inputFields={createField}
+                  api={dataApi}
+                  createFormTitle={createFormTitle}
+                  refreshData={() => getData()}
+                  buttonStyle={{ margin: "10px", backgroundColor: "#17202A" }}
+                />
+              )}
+              {searchRequired && (
+                <div className="search-table">
+                  <input
+                    type="text"
+                    value={searchQuery}
+                    onChange={handleSearchInputChange}
+                    placeholder="Search..."
+                    className="search-input-table"
+                  />
+                </div>
+              )}
+            </CardContent>
+          </Card>
+          <TableContainer component={Paper}>
+            <Table aria-label="simple table">
+              <TableHead>
+                <TableRow style={{ backgroundColor: "#17202A" }}>
+                  {showField.map((th, index) => {
+                    const isSorted = orderBy === th.key;
+                    const isAsc = orderBy === th.key && order === "asc";
+                    return (
+                      <TableCell
+                        key={index}
+                        style={{ color: "#FFF" }}
+                        onClick={() => handleSort(th.key)}
+                      >
+                        {th.label} {isSorted && (isAsc ? "▲" : "▼")}
+                      </TableCell>
+                    );
+                  })}
+                  {manageRecord && (
+                    <TableCell style={{ textAlign: "center", color: "#FFF" }}>
+                      Action
+                    </TableCell>
+                  )}
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {visibleRows.map((data, rowIndex) => (
+                  <TableRow
+                    key={rowIndex}
+                    style={
+                      data.is_disabled
+                        ? {
+                            backgroundColor: "#e0dfff",
+                            borderBottom: "2px dashed orange",
+                          }
+                        : {}
+                    }
+                  >
+                    {showField.map((field, i) => (
+                      <TableCell key={i}>{data[field.key]}</TableCell>
+                    ))}
+                    {manageRecord && (
+                      <TableCell>
+                        {editRequired && (
+                          <FormWithDrawer
+                          globalConfig={props.globalConfig}
+                          token={props.token}
+                            actionBtnName="Edit"
+                            inputFields={editField}
+                            data={data}
+                            api={dataApi}
+                            onClick={() => handleMenuClose(rowIndex)}
+                            refreshData={() => getData()}
+                            buttonStyle={{ fontSize: "12px", padding: "5px" }}
+                            buttonVarient="outlined"
+                            updateFormTitle={updateFormTitle}
+                            submitBtnTitle="Update Data"
+                          />
+                        )}
+
+                        <Button
+                          id={`fade-button-${rowIndex}`}
+                          aria-controls={
+                            anchorEls[rowIndex]
+                              ? `fade-menu-${rowIndex}`
+                              : undefined
+                          }
+                          aria-haspopup="true"
+                          aria-expanded={
+                            anchorEls[rowIndex] ? "true" : undefined
+                          }
+                          onClick={(event) => handleMenuClick(event, rowIndex)}
+                          style={{ padding: "5px" }}
+                        >
+                          <MoreVertIcon />
+                        </Button>
+                        <Menu
+                          id={`fade-menu-${rowIndex}`}
+                          MenuListProps={{
+                            "aria-labelledby": `fade-button-${rowIndex}`,
+                          }}
+                          anchorEl={anchorEls[rowIndex]}
+                          open={Boolean(anchorEls[rowIndex])}
+                          onClose={() => handleMenuClose(rowIndex)}
+                          TransitionComponent={Fade}
+                        >
+                          {data.is_deleted ? (
+                            <MenuItem onClick={() => restore(data)}>
+                              Show Record
+                            </MenuItem>
+                          ) : (
+                            <MenuItem onClick={() => softDelete(data)}>
+                              Hide Record
+                            </MenuItem>
+                          )}
+                          <MenuItem onClick={() => forceDelete(data)}>
+                            Remove Record
+                          </MenuItem>
+                        </Menu>
+                      </TableCell>
+                    )}
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+            <Pagination
+              nextPage={nextPage}
+              previousPage={previousPage}
+              makeApiRequest={pageChangeRequest}
+              getValueFromUrl={getValueFromUrl}
+              dataApi={dataApi}
+              totalCount={totalCount}
+              rowsPerPage={rowsPerPage}
+              currentPage={currentPage}
+              setCurrentPage={setCurrentPage}
+            />
+          </TableContainer>
+        </div>
+      )}
+    </>
+  );
+}
+
+export default APIManager;
diff --git a/src/api-manager/AutoCompleteField.js b/src/api-manager/AutoCompleteField.js
new file mode 100644
index 0000000..26fe564
--- /dev/null
+++ b/src/api-manager/AutoCompleteField.js
@@ -0,0 +1,109 @@
+import React, { useEffect, useState } from "react";
+import TextField from "@mui/material/TextField";
+import Autocomplete from "@mui/material/Autocomplete";
+import useApi from "../useApi";
+import { toast } from "react-toastify";
+
+const AutoCompleteField = (props) => {
+  const [api, setApi] = useState(props.api);
+  const searchOptionHook = props.searchOptionHook;
+  const fieldLabel = props.label;
+  const fieldName = props.name;
+  const optionKey = props.optionKey ? props.optionKey : "id";
+  const [searchData, setSearchData] = useState([]);
+  const [storageData, setStorageData] = useState(
+    JSON.parse(localStorage.getItem("dynamicField"))
+  );
+  const [value, setValue] = useState("");
+  const { Get } = useApi();
+  const [tempValue, setTempValue] = useState(
+    storageData
+      ? storageData[storageData.findIndex((item) => item.name === fieldName)]
+      : ""
+  );
+
+  let newApi = async () => {
+    let tempApi = api;
+    if (props.hook != undefined) {
+      tempApi = `${tempApi}${
+        storageData[storageData.findIndex((item) => item.name === props.hook)]
+          .key
+      }/`;
+    }
+    return tempApi;
+  };
+
+  let getdata = async () => {
+   try{
+    const tempApi = await newApi();
+    let response = await Get(tempApi);
+    let _searchData = [];
+    await response.data.map((data) => {
+      _searchData.push({
+        label: data[searchOptionHook],
+        key: data[optionKey],
+      });
+    });
+    setSearchData(_searchData);
+   }catch{
+    toast.error("Something went wrong contact humbingo.")
+   }
+    // await axios
+    //   .get(tempApi)
+    //   .then(async (response) => {
+    //     let _searchData = [];
+    //     await response.data.map((data) => {
+    //       _searchData.push({
+    //         label: data[searchOptionHook],
+    //         key: data[optionKey],
+    //       });
+    //     });
+
+    //     setSearchData(_searchData);
+    //   })
+    //   .catch((error) => {
+    //     console.error(error);
+    //   });
+  };
+  useEffect(() => {
+    getdata();
+  }, []);
+
+  let getDataFromJson = (e) => {
+    const acccess = e.target.value;
+    let respData = searchData.find((f) => f.label === acccess);
+
+    respData ? setValue(respData.key) : console.log("this is undefined");
+    if (props.onBlur != undefined) {
+      if (respData != undefined) {
+        props.onBlur(respData);
+      }
+    }
+  };
+
+  return searchData.length > 0 ? (
+    <>
+      <div style={{ display: "flex" }}>
+        <div style={{ flex: 1 }}>
+          <Autocomplete
+            disablePortal
+            id="combo-box-demo"
+            style={props.style}
+            options={searchData}
+            onBlur={(e) => getDataFromJson(e)}
+            value={tempValue}
+            renderInput={(params) => (
+              <TextField {...params} label={fieldLabel} variant="standard" />
+            )}
+          />
+          {/* onSelect={(e) => getDataFromJson(e)} */}
+        </div>
+      </div>
+      <input value={value} name={fieldName} hidden readOnly />
+    </>
+  ) : (
+    ""
+  );
+};
+
+export default AutoCompleteField;
diff --git a/src/api-manager/CrudManager.js b/src/api-manager/CrudManager.js
new file mode 100644
index 0000000..1cb342b
--- /dev/null
+++ b/src/api-manager/CrudManager.js
@@ -0,0 +1,416 @@
+import React, { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { toast } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+import Swal from "sweetalert2";
+import "./style.css";
+import useAPIManager from "./useAPIManager";
+import {
+  Button,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Paper,
+  Menu,
+  MenuItem,
+  Fade,
+  Card,
+  CardContent,
+} from "@mui/material";
+import FormWithDrawer from "./FormWithDrawer";
+import MoreVertIcon from "@mui/icons-material/MoreVert";
+import Pagination from "./Pagination";
+
+function CrudManager(props) {
+  const dataSchema = props.data;
+  const { Get, Delete, Patch, getAPI, getHost } = useAPIManager(
+    props.globalConfig,
+    props.token
+  );
+  const dataApi = getAPI(props.data.api);
+  const [apiData, setApiData] = useState([]);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [orderBy, setOrderBy] = useState(""); // Column to sort
+  const [order, setOrder] = useState("asc");
+  const [page, setPage] = useState(0);
+  const [rowsPerPage, setRowsPerPage] = useState(50);
+  const [sortedColumn, setSortedColumn] = useState(null);
+  const [filteredData, setFilteredData] = useState([]);
+  const [anchorEls, setAnchorEls] = useState({}); // Updated state for menu anchors
+  const [mounted, setMounted] = useState(false);
+  const [nextPage, setNextPage] = useState(null);
+  const [previousPage, setPreviousPage] = useState(null);
+  const [totalCount, setTotalCount] = useState(0);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [loading, setLoading] = useState(true);
+
+  const updateFormTitle = props.updateFormTitle ? props.updateFormTitle : "";
+  const createFormTitle = props.createFormTitle ? props.createFormTitle : "";
+  const actionBtnName = props.actionBtnName
+    ? props.actionBtnName
+    : "Create New Data";
+  const createRequired = props.createRequired === false ? false : true;
+  const editRequired = props.editRequired === false ? false : true;
+  const searchRequired = props.searchRequired === false ? false : true;
+
+  const createField = dataSchema.createField;
+  const editField = dataSchema.editField;
+  const showField = dataSchema.showField;
+  const manageRecord = true;
+
+  let navigate = useNavigate();
+  const getData = async () => {
+    makeApiRequest(dataApi);
+  };
+
+  const makeApiRequest = async (api) => {
+    try {
+      setSearchQuery("");
+      const result = await Get(api ? api : dataApi);
+      setNextPage(result.next);
+      setPreviousPage(result.previous);
+      setTotalCount(result.count);
+      setApiData(result.results);
+      setFilteredData(result.results);
+    } catch (err) {
+      if (err.code == "ERR_BAD_REQUEST") {
+        toast.error("Unauthorised access to page, Contact admin for access.");
+        navigate("/");
+      } else {
+        toast.error(err.message);
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const pageChangeRequest = (url) => {
+    if (getPageUrl(url) != null) {
+      makeApiRequest(getHost() + getPageUrl(url));
+    }
+  };
+
+  async function softDelete(data) {
+    try {
+      await Patch(dataApi, data["id"], { is_deleted: true })
+        .then(() => {
+          toast.success("Record updated successfully!");
+          getData();
+        })
+        .catch((err) => {
+          getData();
+          toast.error(err || "Error");
+        });
+    } catch {
+      getData();
+      toast.error("Something Went wrong contact Humbingo");
+    }
+  }
+
+  async function restore(data) {
+    try {
+      await Patch(dataApi, data["id"], { is_deleted: false })
+        .then(() => {
+          toast.success("Record updated successfully!");
+          getData();
+        })
+        .catch((err) => {
+          getData();
+          toast.error(err || "Error");
+        });
+    } catch {
+      getData();
+      toast.error("Something Went wrong contact Humbingo");
+    }
+  }
+
+  async function forceDelete(data) {
+    await Swal.fire({
+      title: "Data will be removed permanently! Are you sure?",
+      icon: "warning",
+      showCancelButton: true,
+      confirmButtonColor: "#3085d6",
+      cancelButtonColor: "#d33",
+      confirmButtonText: "Yes, delete it!",
+    }).then(async (result) => {
+      if (result.isConfirmed) {
+        try {
+          await Delete(dataApi, data["id"])
+            .then(() => {
+              toast.success("Record updated successfully!");
+              getData();
+            })
+            .catch((err) => {
+              getData();
+              toast.error(err || "Error");
+            });
+        } catch {
+          getData();
+          toast.error("Something Went wrong contact Humbingo");
+        }
+      }
+    });
+  }
+
+  const getValueFromUrl = (url, parameterName) => {
+    try {
+      const regex = new RegExp(`${parameterName}=([^&]+)`);
+      const match = url.match(regex);
+      return match ? match[1] : null;
+    } catch {
+      return null;
+    }
+  };
+
+  function getPageUrl(url) {
+    let urls = "";
+    try {
+      const urlObject = new URL(url);
+      urls = urlObject.pathname + urlObject.search;
+    } catch {
+      return null;
+    }
+    return urls;
+  }
+
+  useEffect(() => {
+    setMounted(true);
+    return () => {
+      setMounted(false);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (loading && mounted) {
+      getData();
+    }
+  }, [loading, mounted]);
+
+  const handleSearchInputChange = (event) => {
+    const query = event.target.value;
+    makeApiRequest(dataApi + "?search=" + query);
+    setSearchQuery(query);
+  };
+
+  const handleSort = (columnKey) => {
+    const isAsc = orderBy === columnKey && order === "asc";
+    setOrderBy(columnKey);
+    setOrder(isAsc ? "desc" : "asc");
+    setSortedColumn(columnKey);
+  };
+
+  const sortedData = stableSort(filteredData, getComparator(order, orderBy));
+  const visibleRows = sortedData.slice(
+    page * rowsPerPage,
+    page * rowsPerPage + rowsPerPage
+  );
+
+  function stableSort(array, comparator) {
+    const stabilizedThis = array.map((el, index) => [el, index]);
+    stabilizedThis.sort((a, b) => {
+      const order = comparator(a[0], b[0]);
+      if (order !== 0) return order;
+      return a[1] - b[1];
+    });
+    return stabilizedThis.map((el) => el[0]);
+  }
+
+  function getComparator(order, orderBy) {
+    return order === "desc"
+      ? (a, b) => descendingComparator(a, b, orderBy)
+      : (a, b) => -descendingComparator(a, b, orderBy);
+  }
+
+  function descendingComparator(a, b, orderBy) {
+    if (b[orderBy] < a[orderBy]) {
+      return -1;
+    }
+    if (b[orderBy] > a[orderBy]) {
+      return 1;
+    }
+    return 0;
+  }
+
+  const handleMenuClick = (event, rowIndex) => {
+    setAnchorEls((prev) => ({
+      ...prev,
+      [rowIndex]: event.currentTarget,
+    }));
+  };
+
+  const handleMenuClose = (rowIndex) => {
+    setAnchorEls((prev) => ({
+      ...prev,
+      [rowIndex]: null,
+    }));
+  };
+
+  return (
+    <>
+      {loading ? (
+        <center>
+          <img
+            src="./assets/img/loader.gif"
+            height="30px"
+            width="30px"
+            alt="Loading"
+          />
+        </center>
+      ) : (
+        <div className="row">
+          <Card
+            className="col-md-12"
+            style={{ marginBottom: "10px", backgroundColor: "#A9A9A9" }}
+          >
+            <CardContent>
+              {createRequired && (
+                <FormWithDrawer
+                globalConfig={props.globalConfig}
+                token={props.token}
+                  actionBtnName={actionBtnName}
+                  inputFields={createField}
+                  api={dataApi}
+                  createFormTitle={createFormTitle}
+                  refreshData={() => getData()}
+                  buttonStyle={{ margin: "10px", backgroundColor: "#17202A" }}
+                />
+              )}
+              {searchRequired && (
+                <div className="search-table">
+                  <input
+                    type="text"
+                    value={searchQuery}
+                    onChange={handleSearchInputChange}
+                    placeholder="Search..."
+                    className="search-input-table"
+                  />
+                </div>
+              )}
+            </CardContent>
+          </Card>
+          <TableContainer component={Paper}>
+            <Table aria-label="simple table">
+              <TableHead>
+                <TableRow style={{ backgroundColor: "#17202A" }}>
+                  {showField.map((th, index) => {
+                    const isSorted = orderBy === th.key;
+                    const isAsc = orderBy === th.key && order === "asc";
+                    return (
+                      <TableCell
+                        key={index}
+                        style={{ color: "#FFF" }}
+                        onClick={() => handleSort(th.key)}
+                      >
+                        {th.label} {isSorted && (isAsc ? "▲" : "▼")}
+                      </TableCell>
+                    );
+                  })}
+                  {manageRecord && (
+                    <TableCell style={{ textAlign: "center", color: "#FFF" }}>
+                      Action
+                    </TableCell>
+                  )}
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {visibleRows.map((data, rowIndex) => (
+                  <TableRow
+                    key={rowIndex}
+                    style={
+                      data.is_disabled
+                        ? {
+                            backgroundColor: "#e0dfff",
+                            borderBottom: "2px dashed orange",
+                          }
+                        : {}
+                    }
+                  >
+                    {showField.map((field, i) => (
+                      <TableCell key={i}>{data[field.key]}</TableCell>
+                    ))}
+                    {manageRecord && (
+                      <TableCell>
+                        {editRequired && (
+                          <FormWithDrawer
+                          globalConfig={props.globalConfig}
+                          token={props.token}
+                            actionBtnName="Edit"
+                            inputFields={editField}
+                            data={data}
+                            api={dataApi}
+                            onClick={() => handleMenuClose(rowIndex)}
+                            refreshData={() => getData()}
+                            buttonStyle={{ fontSize: "12px", padding: "5px" }}
+                            buttonVarient="outlined"
+                            updateFormTitle={updateFormTitle}
+                            submitBtnTitle="Update Data"
+                          />
+                        )}
+
+                        <Button
+                          id={`fade-button-${rowIndex}`}
+                          aria-controls={
+                            anchorEls[rowIndex]
+                              ? `fade-menu-${rowIndex}`
+                              : undefined
+                          }
+                          aria-haspopup="true"
+                          aria-expanded={
+                            anchorEls[rowIndex] ? "true" : undefined
+                          }
+                          onClick={(event) => handleMenuClick(event, rowIndex)}
+                          style={{ padding: "5px" }}
+                        >
+                          <MoreVertIcon />
+                        </Button>
+                        <Menu
+                          id={`fade-menu-${rowIndex}`}
+                          MenuListProps={{
+                            "aria-labelledby": `fade-button-${rowIndex}`,
+                          }}
+                          anchorEl={anchorEls[rowIndex]}
+                          open={Boolean(anchorEls[rowIndex])}
+                          onClose={() => handleMenuClose(rowIndex)}
+                          TransitionComponent={Fade}
+                        >
+                          {data.is_deleted ? (
+                            <MenuItem onClick={() => restore(data)}>
+                              Show Record
+                            </MenuItem>
+                          ) : (
+                            <MenuItem onClick={() => softDelete(data)}>
+                              Hide Record
+                            </MenuItem>
+                          )}
+                          <MenuItem onClick={() => forceDelete(data)}>
+                            Remove Record
+                          </MenuItem>
+                        </Menu>
+                      </TableCell>
+                    )}
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+            <Pagination
+              nextPage={nextPage}
+              previousPage={previousPage}
+              makeApiRequest={pageChangeRequest}
+              getValueFromUrl={getValueFromUrl}
+              dataApi={dataApi}
+              totalCount={totalCount}
+              rowsPerPage={rowsPerPage}
+              currentPage={currentPage}
+              setCurrentPage={setCurrentPage}
+            />
+          </TableContainer>
+        </div>
+      )}
+    </>
+  );
+}
+
+export default CrudManager;
diff --git a/src/api-manager/DynamicForm/Autocomplete.js b/src/api-manager/DynamicForm/Autocomplete.js
new file mode 100644
index 0000000..314eb0c
--- /dev/null
+++ b/src/api-manager/DynamicForm/Autocomplete.js
@@ -0,0 +1,87 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+
+import TextField from "@mui/material/TextField";
+import Autocomplete from "@mui/material/Autocomplete";
+import CircularProgress from '@mui/material/CircularProgress';
+import axios from 'axios';
+
+
+const CustomAutocomplete = ({ apiUrl, displayKey, valueKey, onValueChange, inputName, variant , label, sameAsSeen}) => {
+
+  const [options, setOptions] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [inputValue, setInputValue] = useState('');
+  const [selectedOption, setSelectedOption] = useState(null);
+
+  useEffect(() => {
+    setLoading(true);
+    axios.get(apiUrl)
+      .then(response => {
+        setOptions(response.data);
+      })
+      .catch(error => {
+        console.error('Error fetching data:', error);
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  }, [apiUrl]);
+
+  const handleInputChange = (event, newValue) => {
+    setInputValue(newValue);
+  };
+
+  const handleOptionSelect = (event, newValue) => {
+    // console.log("Selected value:");
+    // console.log(newValue);
+    setSelectedOption(newValue);
+    setInputValue(newValue ? newValue[displayKey] : '');
+    onValueChange(newValue, inputName); // Pass the name attribute value along with the value
+  };
+
+  return (
+    <>
+      <Autocomplete
+       
+        inputValue={inputValue}
+        onInputChange={handleInputChange}
+        options={options}
+        loading={loading}
+        onChange={handleOptionSelect}
+        getOptionLabel={(option) => option ? option[displayKey] : ''}
+        renderInput={(params) => (
+          <TextField
+          {...params}
+            label={label}
+            variant={variant}
+            InputProps={{
+              ...params.InputProps,
+              endAdornment: (
+                <>
+                  {loading ? <CircularProgress color="secondary" size={20} /> : null}
+                  {params.InputProps.endAdornment}
+                </>
+              ),
+            }}
+          />
+         
+        )}
+        
+      />
+       <input hidden name={inputName} value={selectedOption ? selectedOption[valueKey] : ''}  style={{display: 'none'}}/>
+       {(sameAsSeen)?<input hidden name={"_"+inputName} value={selectedOption ? selectedOption[displayKey] : ''}  style={{display: 'none'}}/>:""}
+     
+    </>
+  );
+};
+
+CustomAutocomplete.propTypes = {
+  apiUrl: PropTypes.string.isRequired,
+  displayKey: PropTypes.string.isRequired,
+  valueKey: PropTypes.string.isRequired,
+  onValueChange: PropTypes.func.isRequired,
+  inputName: PropTypes.string.isRequired, // Accept inputName prop
+};
+
+export default CustomAutocomplete;
diff --git a/src/api-manager/DynamicForm/DynamicAutocomplete.js b/src/api-manager/DynamicForm/DynamicAutocomplete.js
new file mode 100644
index 0000000..f5456c7
--- /dev/null
+++ b/src/api-manager/DynamicForm/DynamicAutocomplete.js
@@ -0,0 +1,112 @@
+import React, { useState } from 'react';
+import CustomAutocomplete from './Autocomplete';
+import _Autocomplete from './_Autocomplete';
+const DynamicAutocomplete = (props) => {
+    // [
+    //     {
+    //         "apiUrl": 'https://api.udaymotors.in/api/v1/user/',
+    //         "displayKey": 'phone_no',
+    //         "valueKey": 'id',
+    //         "name": "user",
+    //         "label":"User"
+    //     },
+    //     {
+    //         "apiUrl": 'https://api.udaymotors.in/api/v1/getInvestmentsByUserId/',
+    //         "displayKey": 'investment_id',
+    //         "valueKey": 'id',
+    //         "name": "investment",
+    //         "parent": "user",
+    //         "parent_value_key": "id",
+    //         "label":"Investments"
+    //     },
+    //     {
+    //         "apiUrl": 'https://api.udaymotors.in/api/v1/transaction/',
+    //         "displayKey": 'description',
+    //         "name": "transaction",
+    //         "valueKey": 'id',
+    //         "parent": "investment",
+    //         "parent_value_key": "user_id",
+    //         "label":"Transactions"
+    //     },
+    // ]
+    const [selectedValues, setSelectedValues] = useState([]);
+    const [currentFieldIndex, setCurrentFieldIndex] = useState(0);
+    const [fields, setFields] = useState(props.fields);
+
+    const handleValueChange = (value, name) => {
+        const updatedValues = [...selectedValues];
+        const existingIndex = updatedValues.findIndex(item => item.name === name);
+        if (existingIndex !== -1) {
+            updatedValues[existingIndex] = { value, name };
+        } else {
+            updatedValues.push({ value, name });
+        }
+
+        setSelectedValues(updatedValues);
+        
+        // Update the API URL of the next field
+        const nextFieldIndex = currentFieldIndex + 1;
+        if (nextFieldIndex < fields.length) {
+            const nextField = fields[nextFieldIndex];
+            const parentValue = updatedValues.find(item => item.name === nextField.parent)?.value[nextField.parent_value_key];
+            if (parentValue) {
+                const updatedFields = [...fields];
+                updatedFields[nextFieldIndex] = {
+                    ...nextField,
+                    apiUrl: `${nextField.apiUrl}${parentValue}/`
+                };
+                setFields(updatedFields);
+            }
+        }
+        
+        setCurrentFieldIndex(nextFieldIndex);
+    };
+
+    const handleParentValueChange = (parentName, parentValue) => {
+        // Find the index of the parent field
+        const parentFieldIndex = fields.findIndex(field => field.name === parentName);
+        
+        // Reset the selected values and fields configurations for the subsequent fields
+        setSelectedValues(selectedValues.slice(0, parentFieldIndex + 1));
+        setFields(fields.slice(0, parentFieldIndex + 1));
+        setCurrentFieldIndex(parentFieldIndex);
+    };
+
+    return (
+        fields.slice(0, currentFieldIndex + 1).map((field, index) => (
+            <div key={index} style={{marginTop: "10px", marginBottom: "10px"}}>
+                {
+                    (field.advance)?
+                    <_Autocomplete
+                    apiUrl={field.apiUrl}
+                    displayKey={field.displayKey}
+                    valueKey={field.valueKey}
+                    inputName={field.name}
+                    onValueChange={handleValueChange}
+                    onParentValueChange={handleParentValueChange}
+                    variant={field.variant}
+                    label={field.label}
+                    sameAsSeen={field.sameAsSeen}
+                    
+                    defaultObj={(field.defaultObj)?field.defaultObj:""}
+                    />
+                    
+                    :<CustomAutocomplete
+                    apiUrl={field.apiUrl}
+                    displayKey={field.displayKey}
+                    valueKey={field.valueKey}
+                    inputName={field.name}
+                    onValueChange={handleValueChange}
+                    onParentValueChange={handleParentValueChange}
+                    variant={field.variant}
+                    label={field.label}
+                    sameAsSeen={field.sameAsSeen}
+                />
+                }
+                
+            </div>
+        ))
+    );
+}
+
+export default DynamicAutocomplete;
diff --git a/src/api-manager/DynamicForm/_Autocomplete.js b/src/api-manager/DynamicForm/_Autocomplete.js
new file mode 100644
index 0000000..1db8203
--- /dev/null
+++ b/src/api-manager/DynamicForm/_Autocomplete.js
@@ -0,0 +1,109 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+
+import TextField from "@mui/material/TextField";
+import Autocomplete from "@mui/material/Autocomplete";
+import CircularProgress from '@mui/material/CircularProgress';
+import useAPIManager from '../useAPIManager';
+
+
+const _Autocomplete = (props) => {
+  const {
+    apiUrl,
+    displayKey,
+    valueKey,
+    onValueChange,
+    inputName,
+    variant,
+    label,
+    sameAsSeen,
+    defaultObj,
+    onBlur,
+    onFocus,
+    options: propOptions
+  } = props;
+
+
+  const [options, setOptions] = useState(propOptions || []);
+  const [loading, setLoading] = useState(false);
+  const [inputValue, setInputValue] = useState('');
+  const [selectedOption, setSelectedOption] = useState(defaultObj);
+  const {Get, Post} =useAPIManager(props.globalConfig, props.token);
+  useEffect(() => {
+    setLoading(true);
+    getSearchData(apiUrl)
+  }, [apiUrl]);
+
+  const handleInputChange = (event, newValue) => {
+    getSearchData(apiUrl+"?search="+newValue)
+    setInputValue(newValue);
+  };
+
+  const getSearchData = async (api)  =>{
+    await Get(api)
+    .then(response => {
+      (response.results)?setOptions(response.results):setOptions(response)
+      
+    })
+    .catch(error => {
+      console.error('Error fetching data:', error);
+    })
+    .finally(() => {
+      setLoading(false);
+    });
+  }
+
+  const handleOptionSelect = (event, newValue) => {
+    setSelectedOption(newValue);
+    setInputValue(newValue ? newValue[displayKey] : '');
+    onValueChange(newValue, inputName); // Pass the name attribute value along with the value
+  };
+
+  return (
+    <>
+      <Autocomplete
+        inputValue={inputValue}
+        onInputChange={handleInputChange}
+        options={options}
+        loading={loading}
+        onChange={handleOptionSelect}
+        getOptionLabel={(option) => option ? option[displayKey] : ''}
+        defaultValue= { defaultObj}
+        renderInput={(params) => (
+          <TextField
+          {...params}
+            label={label}
+            variant={variant}
+            onBlur={onBlur}
+            onFocus={onFocus}
+            InputProps={{
+              ...params.InputProps,
+              endAdornment: (
+                <>
+                  {loading ? <CircularProgress color="secondary" size={20} /> : null}
+                  {params.InputProps.endAdornment}
+                </>
+              ),
+            }}
+          />
+         
+        )}
+        
+      />
+      {/* {console.log(selectedOption)} */}
+       <input hidden name={inputName} value={selectedOption ? selectedOption[valueKey] : ''}  style={{display: 'none'}}/>
+       {(sameAsSeen)?<input hidden name={"_"+inputName} value={selectedOption ? selectedOption[displayKey] : ''}  style={{display: 'none'}}/>:""}
+     
+    </>
+  );
+};
+
+_Autocomplete.propTypes = {
+  apiUrl: PropTypes.string.isRequired,
+  displayKey: PropTypes.string.isRequired,
+  valueKey: PropTypes.string.isRequired,
+  onValueChange: PropTypes.func.isRequired,
+  inputName: PropTypes.string.isRequired, // Accept inputName prop
+};
+
+export default _Autocomplete;
diff --git a/src/api-manager/EditRow.js b/src/api-manager/EditRow.js
new file mode 100644
index 0000000..d5d36ee
--- /dev/null
+++ b/src/api-manager/EditRow.js
@@ -0,0 +1,84 @@
+import React, { useState } from "react";
+import Drawer from "@mui/material/Drawer";
+import { Button, TextField } from "@mui/material";
+import { firstUpperCase } from "./helper.js";
+function EditRow(props) {
+  const editBlock = props.editBlock ? props.editBlock : [];
+  const [state, setState] = React.useState({
+    top: false,
+    left: false,
+    bottom: false,
+    right: false,
+  });
+  const toggleDrawer = (anchor, open) => (event) => {
+    if (
+      event.type === "keydown" &&
+      (event.key === "Tab" || event.key === "Shift")
+    ) {
+      return;
+    }
+    setState({ ...state, [anchor]: open });
+  };
+  const [formFields, setFormFields] = useState(props.data);
+  var fields = Object.keys(formFields);
+  const handleSubmit = (e) => {
+    e.preventDefault();
+  };
+  function doChange(fieldName, value) {
+    setFormFields((prevData) => ({
+      ...prevData,
+      [fieldName]: value,
+    }));
+    localStorage.setItem(props.data.id + "_" + fieldName, value);
+  }
+
+  return (
+    <>
+      {/* {formFields} */}
+      {["right"].map((anchor) => (
+        <React.Fragment key={anchor}>
+          <Button onClick={toggleDrawer(anchor, true)}>Edit</Button>
+          <Drawer
+            anchor={anchor}
+            open={state[anchor]}
+            onClose={toggleDrawer(anchor, false)}
+          >
+            <div className="row" style={{ padding: "10px", width: "500px" }}>
+              <div className="col-md-12">
+                <h4>Edit Details</h4>
+                <form onSubmit={handleSubmit}>
+                  {fields.map((field, index) => {
+                    return (
+                      <div key={index} className="dynamic-form-element">
+                        {!Object.values(editBlock).includes(field) ? (
+                          <>
+                            {" "}
+                            <TextField
+                              variant="standard"
+                              name={field}
+                              value=""
+                              onChange={(e) => doChange(field, e.target.value)}
+                              label={firstUpperCase(field)}
+                            />
+                            <br />{" "}
+                          </>
+                        ) : (
+                          ""
+                        )}
+                      </div>
+                    );
+                  })}
+    
+                  <Button variant="outlined" type="submit">
+                    Update
+                  </Button>
+                </form>
+              </div>
+            </div>
+          </Drawer>
+        </React.Fragment>
+      ))}
+    </>
+  );
+}
+export default EditRow;
diff --git a/src/api-manager/Example.js b/src/api-manager/Example.js
new file mode 100644
index 0000000..4179693
--- /dev/null
+++ b/src/api-manager/Example.js
@@ -0,0 +1,17 @@
+import React from 'react'
+import CrudManager from './CrudManager'
+import schema from './example.json'
+
+const CrudManagerExample = () => {
+   
+    return (
+
+        <>
+        <CrudManager data={schema} />
+    {/* //    <CRUDManager schema={schema}/> */} 
+
+        </>
+    )
+}
+
+export default CrudManagerExample
\ No newline at end of file
diff --git a/src/api-manager/Form.js b/src/api-manager/Form.js
new file mode 100644
index 0000000..747b59d
--- /dev/null
+++ b/src/api-manager/Form.js
@@ -0,0 +1,148 @@
+import React,{useState} from "react";
+import { Button } from "@mui/material";
+import FormField, { validateField } from "./FormField";
+import "./style.css";
+import { toast } from "react-toastify";
+import useAPIManager from "./useAPIManager";
+
+const Form = (props) => {
+  const inputFields = props.inputFields;
+  const fieldDefault = props.data ? props.data : [];
+  const submitBtnTitle = props.submitBtnTitle ? props.submitBtnTitle : "Submit";
+  const [externalErrors, setExternalErrors] = useState({});
+  
+  const { Get, Delete, Patch, Post, getHost } = useAPIManager(
+    props.globalConfig,
+    props.token
+  );
+
+  async function handleSubmit(e) {
+    e.preventDefault();
+    let isFormValid = true;
+    const newExternalErrors = {};
+    inputFields.forEach((field) => {
+      const fieldName = field.name;
+      const value = e.target.elements[fieldName].value;
+      const validationError = validateField(value, field.type, field.label);
+      
+     
+      if (field.required) { // Check if the field is required
+        const validationError = validateField(value, field.type, field.label);
+        if (validationError) {
+          newExternalErrors[fieldName] = validationError;
+          toast.error(validationError);
+          isFormValid = false;
+        }
+      }
+    });
+
+    setExternalErrors(newExternalErrors);
+
+    if (!isFormValid) {
+      return; // Don't submit if form is invalid
+    }
+
+    var data = new FormData(e.target);
+    let formData = Object.fromEntries(data.entries());
+    // console.log(formData);
+
+    if (fieldDefault["id"]) {
+      
+      try{
+        await Patch(props.api,fieldDefault["id"], formData).then(()=>{
+          props.closeDrawer();
+          props.refreshData();
+          toast.success("Record updated successfully!");
+        })
+        .catch((err) => {
+          // console.error(err);
+          toast.error(err || "Error");
+        });
+      }catch{
+        toast.error("Something Went wrong contact Humbingo");
+      }
+     
+      // axios
+      //   .patch(props.api + `${fieldDefault["id"]}` + "/", formData)
+      //   .then((response) => {
+      //     props.closeDrawer();
+      //     props.refreshData();
+      //     toast.success("Record updated successfully!");
+      //   })
+      //   .catch((err) => {
+      //     // console.error(err);
+      //     toast.error(err.response?.data?.error || "An error occurred");
+      //   });
+    } else {
+
+         
+      try{
+        await Post(props.api, formData).then(()=>{
+          props.closeDrawer();
+          props.refreshData();
+
+          toast.success("Record created successfully!");
+        })
+        .catch((err) => {
+          // console.error(err);
+          toast.error(err.response?.data?.error || "Error");
+        });
+      }catch{
+        toast.error("Something Went wrong contact Humbingo");
+      }
+      // axios
+      //   .post(props.api, formData)
+      //   .then((response) => {
+      //     props.closeDrawer();
+      //     props.refreshData();
+
+      //     toast.success("Record created successfully!");
+      //   })
+      //   .catch((err) => {
+      //     // console.error(err);
+      //     toast.error(err.response?.data?.error || "An error occurred");
+      //   });
+    }
+  }
+  return (
+    <form onSubmit={handleSubmit} style={{ padding: "20px" }}>
+      {inputFields.map((field, index) => {
+        const fieldName = field["name"];
+        if (props.grid) {
+          return (
+            <div className={props.grid}>
+              <div className="dynamic-form-element" key={index}>
+                <FormField
+                  globalConfig={props.globalConfig}
+                  token={props.token}
+                  field={field}
+                  name={index}
+                  defaultValue={fieldDefault[fieldName]}
+                  handleChange={props.handleChange}
+                />
+              </div>
+            </div>
+          );
+        } else {
+          return (
+            <div className="dynamic-form-element" key={index}>
+              <FormField
+                globalConfig={props.globalConfig}
+                token={props.token}
+                field={field}
+                name={index}
+                defaultValue={fieldDefault[fieldName]}
+                handleChange={props.handleChange}
+              />
+            </div>
+          );
+        }
+      })}
+      <br />
+      <Button variant="contained" type="submit" size="small">
+        {submitBtnTitle}
+      </Button>
+    </form>
+  );
+};
+export default Form;
diff --git a/src/api-manager/FormField.js b/src/api-manager/FormField.js
new file mode 100644
index 0000000..be7eaef
--- /dev/null
+++ b/src/api-manager/FormField.js
@@ -0,0 +1,314 @@
+import React, { useEffect, useState } from "react";
+import { TextField, FormHelperText } from "@mui/material";
+import { firstUpperCase ,validateEmail,validatePassword} from "./helper.js";
+import "./style.css";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Checkbox from "@mui/material/Checkbox";
+import CustomAutocomplete from "./DynamicForm/Autocomplete.js";
+import _Autocomplete from "./DynamicForm/_Autocomplete.js";
+
+import useAPIManager from './useAPIManager.js';
+export const validateField = (value, type, label) => {
+  let errorMessage = "";
+  if (label) {
+    switch (type) {
+      case "text":
+        if (!value) {
+          errorMessage = ` ${label} is required`;
+        }
+        break;
+      case "select":
+        if (!value) {
+          errorMessage = ` ${label} Please Select Value`;
+        }
+        break;
+      case "simple-select":
+        if (!value) {
+          errorMessage = ` ${label} Please Select`;
+        }
+        break;
+      case "advance-select":
+        if (!value) {
+          errorMessage = ` ${label} Please Select`;
+        }
+        break;
+      case "datetime-local":
+        if (!value) {
+          errorMessage = `${label} Please Select  `;
+        }
+        break;
+      case "checkbox":
+        if (!value) {
+          errorMessage = `${label} Must be Checked`;
+        }
+        break;
+        case "email":
+          if (!value || !validateEmail(value)) {
+            errorMessage = `${label} must be a valid email address`;
+          }
+          break;
+        case "password":
+          if (!value || !validatePassword(value)) {
+            errorMessage = `${label} must be at least 8 characters long`;
+          }
+          break;
+          case "phone":
+            if (!value || value.length !== 10) {
+              errorMessage = `${label} must be exactly 10 characters`;
+            }
+            break;
+      default:
+        if (!value || !value.trim()) {
+          errorMessage = `${label} Is Required`;
+        }
+    }
+  }
+  return errorMessage;
+};
+
+const FormField = (props) => {
+  const { Get, Delete, Patch, Post, getAPI } = useAPIManager(
+    props.globalConfig,
+    props.token
+  );
+
+
+  const required = props.field.required;
+  const label = firstUpperCase(props.field.label);
+  let fieldLabel = required ? (
+    <span>
+      <b style={{ color: "red" }}>*</b> {label}
+    </span>
+  ) : (
+    label
+  );
+  const type = props.field.type;
+  const varient = props.field.varient;
+  const placeholder = props.field.placeholder;
+  const isDynamic = props.field.dynamic;
+  const hook = props.field.hook;
+  const defaultObj = props.field.defaultObj;
+  const dafaultValue = props.field.defaultValue
+    ? props.field.defaultValue
+    : props.defaultValue;
+  const name = props.field.name;
+
+  let optionKey = "";
+  let searchApi = "";
+  let searchOptionHook = "";
+
+  if (props.field.search) {
+    searchApi = props.field.search.api ? props.field.search.api : "";
+    // console.log("My Search APu 1", searchApi);
+    searchApi = searchApi.length > 0 ? getAPI(searchApi) : "";
+
+    searchOptionHook = props.field.search.label ? props.field.search.label : "";
+    optionKey = props.field.search.key ? props.field.search.key : "id";
+  }
+  const [value, setValue] = useState(dafaultValue);
+  const [isChecked, setIsChecked] = useState(dafaultValue);
+  const [storageData, setStorageData] = useState([]);
+
+  const [error, setError] = useState(
+    props.field.error ? props.field.error : ""
+  );
+  const [blurred, setBlurred] = useState(false);
+  const [simpleSelectOptions, setSimpleSelectOptions] = useState(
+    props.field.options
+  );
+
+  useEffect(() => {
+    const storedData = localStorage.getItem("dynamicField");
+    if (storedData) {
+      setStorageData(JSON.parse(storedData));
+    }
+  }, []);
+
+  const updateKey = (name, newKey, newLabel) => {
+    const newData = [...storageData];
+
+    const dataIndex = newData.findIndex((item) => item.name === name);
+
+    if (dataIndex !== -1) {
+      newData[dataIndex].key = newKey;
+      newData[dataIndex].label = newLabel;
+    } else {
+      newData.push({ name, key: newKey, label: newLabel });
+    }
+
+    setStorageData(newData);
+    // Update local storage with the new data
+    localStorage.setItem("dynamicField", JSON.stringify(newData));
+  };
+
+  const changeField = async (e) => {
+    if (e != undefined && e != null) {
+      updateKey(name, e.key, e.label);
+      window.location.reload();
+    }
+  };
+
+  let handleOnChange = (e) => {
+    setValue(e.target.value);
+    if (blurred) {
+      setError(validateField(e.target.value, type, label));
+    }
+  };
+  const handleChange = () => {
+    const newChecked = !isChecked;
+    setIsChecked(newChecked);
+    if (blurred) {
+      setError(validateField(newChecked, type, label));
+    }
+  };
+  const handleaAutocompleteChange = (newValue, inputName) => {
+    setValue(newValue);
+    if (blurred) {
+      setError(validateField(newValue.target.value, type, label));
+    }
+  };
+  const handleBlur = (e) => {
+    setBlurred(true);
+    setError(validateField(value, type, label));
+    setError(
+      validateField(type === "checkbox" ? isChecked : value, type, label)
+    );
+
+    // Validate the field when blurred
+  };
+
+  const handleFocus = () => {
+    setBlurred(false);
+  };
+
+  const renderError = () => {
+    // Check if validation is required for this field
+    const isValidationRequired = required || false;
+
+    if (isValidationRequired && error && blurred) {
+      return <FormHelperText error>{error}</FormHelperText>;
+    }
+    return null;
+  };
+
+  function formatDate(inputDate) {
+    const date = new Date(inputDate);
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, "0");
+    const day = String(date.getDate()).padStart(2, "0");
+    const hours = String(date.getHours()).padStart(2, "0");
+    const minutes = String(date.getMinutes()).padStart(2, "0");
+
+    return `${year}-${month}-${day}T${hours}:${minutes}`;
+  }
+
+  switch (type) {
+    case "select":
+      return (
+        <>
+          <CustomAutocomplete
+            apiUrl={searchApi}
+            displayKey={searchOptionHook}
+            valueKey={optionKey}
+            inputName={name}
+            onValueChange={() => {}}
+            variant={varient}
+            label={fieldLabel}
+            onBlur={handleBlur}
+            onFocus={handleFocus}
+          />
+          {renderError()}
+        </>
+      );
+    case "simple-select":
+      return (
+        <>
+          <_Autocomplete
+            globalConfig={props.globalConfig}
+            token={props.token}
+            apiUrl=""
+            displayKey="label"
+            valueKey="type"
+            inputName={name}
+            onValueChange={handleaAutocompleteChange}
+            variant={varient}
+            label={label}
+            defaultObj={defaultObj}
+            options={simpleSelectOptions}
+            onBlur={handleBlur}
+            onFocus={handleFocus}
+          />
+          {renderError()}
+        </>
+      );
+    case "advance-select":
+      return (
+        <div style={{ position: "relative" }}>
+          <_Autocomplete
+                      globalConfig={props.globalConfig}
+                      token={props.token}
+            apiUrl={searchApi}
+            displayKey={searchOptionHook}
+            valueKey={optionKey}
+            inputName={name}
+            onValueChange={handleaAutocompleteChange}
+            variant={varient}
+            label={fieldLabel}
+            onBlur={handleBlur}
+            onFocus={handleFocus}
+            defaultObj={defaultObj}
+          />
+          {renderError()}
+        </div>
+      );
+    case "checkbox":
+      return (
+        <div onBlur={handleBlur} onFocus={handleFocus}>
+          <FormControlLabel
+            control={<Checkbox checked={isChecked} onChange={handleChange} />}
+            label={fieldLabel}
+            name={name}
+          />
+          {renderError()}
+        </div>
+      );
+    case "datetime-local":
+      return (
+        <div style={{ textAlign: "left" }}>
+          <TextField
+            name={name}
+            label={fieldLabel}
+            type={type}
+            style={{ width: "100%" }}
+            variant={varient}
+            placeholder={placeholder}
+            value={formatDate(value)}
+            onChange={handleOnChange}
+            onBlur={handleBlur}
+            onFocus={handleFocus}
+          />
+          {renderError()}
+        </div>
+      );
+    default:
+      return (
+        <div style={{ position: "relative" }}>
+          <TextField
+            name={name}
+            label={fieldLabel}
+            type={type}
+            style={{ width: "100%" }}
+            variant={varient}
+            placeholder={placeholder}
+            value={value}
+            onChange={handleOnChange}
+            onBlur={handleBlur}
+            onFocus={handleFocus}
+          />
+          {renderError()}
+        </div>
+      );
+  }
+};
+
+export default FormField;
diff --git a/src/api-manager/FormWithDrawer.js b/src/api-manager/FormWithDrawer.js
new file mode 100644
index 0000000..1cfcb1d
--- /dev/null
+++ b/src/api-manager/FormWithDrawer.js
@@ -0,0 +1,77 @@
+import React from "react";
+import { Button } from "@mui/material";
+import Drawer from "@mui/material/Drawer";
+import Form from "./Form";
+
+const FormWithDrawer = (props) => {
+  const [state, setState] = React.useState({
+    top: false,
+    left: false,
+    bottom: false,
+    right: false,
+  });
+  const toggleDrawer = (anchor, open) => (event) => {
+    if (
+      event.type === "keydown" &&
+      (event.key === "Tab" || event.key === "Shift")
+    ) {
+      
+      return;
+    }
+    setState({ ...state, [anchor]: open });
+  };
+
+  const anchor = props.anchor ? props.anchor : "right";
+  const actionBtnName = props.actionBtnName;
+  const data = props.data;
+  const   buttonVarient = props.buttonVarient ? props.buttonVarient : "contained";
+  const updateFormTitle = props.updateFormTitle ? props.updateFormTitle : "";
+  const createFormTitle = props.createFormTitle ? props.createFormTitle : "";
+  const submitBtnTitle = props.submitBtnTitle ? props.submitBtnTitle : "Submit";
+  const handleCloseDrawer = () => {
+    setState({ ...state, [anchor]: false });
+  };
+
+  return (
+    <React.Fragment key={anchor}>
+      <Button
+        onClick={toggleDrawer(anchor, true)}
+        variant={buttonVarient}
+        style={props.buttonStyle}
+      >
+        {actionBtnName}
+      </Button>
+
+      <Drawer
+        anchor={anchor}
+        open={state[anchor]}
+        onClose={toggleDrawer(anchor, false)}
+      >
+        <div className="row" style={{ width: "470px" }}>
+          <div
+            className="col-md-12"
+            style={{ textAlign: "center", color: "#333", padding: "10px" }}
+          >
+            <h4>{createFormTitle}</h4>
+            <h4>{updateFormTitle}</h4>
+            <hr />
+            <div>
+              <Form
+                globalConfig={props.globalConfig}
+                token={props.token}
+                closeDrawer={handleCloseDrawer}
+                refreshData={() => props.refreshData()}
+                submitBtnTitle={submitBtnTitle}
+                inputFields={props.inputFields}
+                api={props.api}
+                data={data}
+              />
+            </div>
+          </div>
+        </div>
+      </Drawer>
+    </React.Fragment>
+  );
+};
+
+export default FormWithDrawer;
diff --git a/src/api-manager/MultiSelect.js b/src/api-manager/MultiSelect.js
new file mode 100644
index 0000000..d474818
--- /dev/null
+++ b/src/api-manager/MultiSelect.js
@@ -0,0 +1,57 @@
+import React, { useEffect, useState } from "react";
+import AutoCompleteField from "./AutoCompleteField";
+import FormField from "./FormField";
+
+const MultiSelect = (props) => {
+  const [hookObj, setHookObj] = useState([]);
+
+  let handleOnChange = (key, value) => {
+    let obj = [];
+    console.log("Field Changed  sfsdfds", key, value);
+    localStorage.setItem(key, value);
+    // setHookObj(hookObj => [...hookObj,{"name":key, "value":value}]);
+    console.log("Multi Dtaa", hookObj);
+
+  };
+
+  let loadWithUpdatedApi = (field)=>{
+    // field.search.api=localStorage.getItem(field.search.hook) ;
+    console.log("Sub Search Hook",field.search.hook);
+    field.search.api = `http://127.0.0.1:8000/api/v1/getAllGroupsJoinedByUser/${localStorage.getItem(field.search.hook)}/`;
+             return(<FormField
+                FormField
+                handleChange={(name, value) => handleOnChange(name, value)}
+                field={field}
+              />) 
+  }
+
+  useEffect(()=>{
+
+  },[])
+  let updateRefresh = (refresh)=>{
+console.log(refresh);
+  }
+  return (
+    <div>
+      <code>{JSON.stringify(props.field)}</code>
+
+      {props.field.map((f) => {
+        return f.search.hook ? (
+            loadWithUpdatedApi(f)
+
+        ) : (
+          <FormField
+            FormField
+            handleChange={(name, value) => handleOnChange(name, value)}
+            refresh={(refresh) => updateRefresh(refresh)}
+            field={f}
+          />
+        );
+      })}
+    </div>
+  );
+};
+
+
+
+export default MultiSelect;
diff --git a/src/api-manager/Pagination.js b/src/api-manager/Pagination.js
new file mode 100644
index 0000000..3caaae0
--- /dev/null
+++ b/src/api-manager/Pagination.js
@@ -0,0 +1,98 @@
+import React from "react";
+import { Button } from "@mui/material";
+import "./style.css";
+
+function Pagination({
+  nextPage,
+  previousPage,
+  makeApiRequest,
+  getValueFromUrl,
+  totalCount,
+  rowsPerPage,
+  currentPage,
+  setCurrentPage,
+  dataApi,
+}) {
+  const totalPages = Math.ceil(totalCount / rowsPerPage);
+
+  const generatePageNumbers = () => {
+    const pages = [];
+    const maxPages = 4;
+    const currentPageIndex = currentPage;
+
+    let startPage = Math.max(1, currentPageIndex - Math.floor(maxPages / 2));
+    let endPage = Math.min(totalPages, startPage + maxPages - 1);
+
+    if (endPage === totalPages) {
+      startPage = Math.max(1, endPage - maxPages + 1);
+    } else if (startPage === 1) {
+      endPage = Math.min(totalPages, startPage + maxPages - 1);
+    }
+
+    for (let i = startPage; i <= endPage; i++) {
+      pages.push(i);
+    }
+
+    return pages;
+  };
+
+  const handlePreviousClick = () => {
+    if (previousPage) {
+      const previousPageNumber = currentPage - 1;
+      setCurrentPage(previousPageNumber);
+      makeApiRequest(previousPage);
+    }
+  };
+
+  const handleNextClick = () => {
+    if (nextPage) {
+      const nextPageNumber = currentPage + 1;
+      setCurrentPage(nextPageNumber);
+      makeApiRequest(nextPage);
+    }
+  };
+
+  return (
+    <div className="pagination-container">
+      <Button
+        disabled={!previousPage}
+        onClick={handlePreviousClick}
+        variant="outlined"
+        className="pagination-button"
+        style={{ margin: "5px" }}
+      >
+        Previous
+      </Button>
+      {generatePageNumbers().map((page) => (
+        <Button
+          key={page}
+          onClick={() => {
+            setCurrentPage(page);
+            const apiPage = nextPage
+              ? `${nextPage.split("page=")[0]}page=${page}`
+              : `${dataApi}?page=${page}`;
+            makeApiRequest(apiPage);
+          }}
+          variant="outlined"
+          className={`pagination-button ${
+            currentPage === page ? "active-page" : ""
+          }`}
+          style={{ margin: "5px" }}
+        >
+          {page}
+        </Button>
+      ))}
+      <Button
+        disabled={!nextPage}
+        onClick={handleNextClick}
+        variant="outlined"
+        className="pagination-button"
+        style={{ margin: "5px" }}
+      >
+        Next
+      </Button>
+    </div>
+  );
+}
+
+export default Pagination;
diff --git a/src/api-manager/Radiobutton.js b/src/api-manager/Radiobutton.js
new file mode 100644
index 0000000..313b5e5
--- /dev/null
+++ b/src/api-manager/Radiobutton.js
@@ -0,0 +1,33 @@
+import * as React from "react";
+import Radio from "@mui/material/Radio";
+import RadioGroup from "@mui/material/RadioGroup";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import FormControl from "@mui/material/FormControl";
+import FormLabel from "@mui/material/FormLabel";
+
+export default function RadioButtonsGroup() {
+  return (
+    <FormControl>
+      <FormLabel id="demo-radio-buttons-group-label">Payment In For </FormLabel>
+      <RadioGroup
+        aria-labelledby="demo-radio-buttons-group-label"
+        defaultValue="subscription_amt"
+        name="transaction_type"
+        row
+      >
+        <FormControlLabel
+          value="subscription_amt"
+          control={<Radio />}
+          label="Subscription"
+        />
+        {/* <FormControlLabel value="penalty" control={<Radio />} label="Penalty" /> */}
+        <FormControlLabel
+          value="draw_winner"
+          control={<Radio />}
+          label="Draw Winner"
+        />
+        {/* <FormControlLabel value="custom_amt" control={<Radio />} label="Custom Amount" /> */}
+      </RadioGroup>
+    </FormControl>
+  );
+}
diff --git a/src/api-manager/TableRow.js b/src/api-manager/TableRow.js
new file mode 100644
index 0000000..e45f020
--- /dev/null
+++ b/src/api-manager/TableRow.js
@@ -0,0 +1,52 @@
+import { Button } from '@mui/material';
+import React from 'react'
+import EditRow from './EditRow';
+import FormWithDrawer from './FormWithDrawer';
+function TableRow(props) {
+  var row = [];
+  const readBlock = (props.readBlock) ? props.readBlock : [];
+
+  
+  
+  function getCellArray() {
+    Object.keys(props.data).forEach((key) => {
+      console.log(readBlock);
+      if (!Object.values(readBlock).includes(key)) {
+        Object.entries(props.data).forEach((entry) => {
+          if (key === entry[0]) {
+            row.push(entry[1]);
+          }
+        })
+      }
+    })
+  }
+
+
+  function removeRow() { }
+  getCellArray();
+
+
+  return (
+    <tr>
+      {
+        row.map((data, index) => {
+          return <td key={index}>{data}</td>
+        })
+      }
+      {(props.manage) ? <>
+        <td>
+          <Button onClick={() => removeRow()}> Delete</Button>
+        </td>
+        <td>
+          
+        <FormWithDrawer actionBtnName="Edit Data" inputFields={{}} api="https://api.udaymotors.in/api/v1/role/" />
+          {/* <EditRow data={props.data}  /> */}
+        </td>
+      </> : ""
+      }
+
+      
+    </tr>
+  )
+}
+export default TableRow
\ No newline at end of file
diff --git a/src/api-manager/example.json b/src/api-manager/example.json
new file mode 100644
index 0000000..574b236
--- /dev/null
+++ b/src/api-manager/example.json
@@ -0,0 +1,105 @@
+{
+        "api":"https://api.udaymotors.in/api/v1/group/"
+ ,
+    "showField":[
+        { "label": "Group Name", "key": "title" },
+        { "label": "Description", "key": "description" },
+        { "label": "Subscription Amount", "key": "subscription_amt" },
+        { "label": "Max Allowed Users", "key": "max_users" },
+        { "label": "Penalty Amount", "key": "penalty_amt" },
+        { "label": "Start Date", "key": "start_date" },
+        { "label": "End Date", "key": "end_date" }
+      ],
+    "createField":[
+   
+        {
+          "label": "Group name",
+          "type": "text",
+          "variant": "standard",
+          "name": "title"
+        },
+        {
+          "label": "Group Description",
+          "type": "text",
+          "variant": "standard",
+          "name": "description"
+        },
+        {
+          "label": "Start Date",
+          "type": "datetime-local",
+          "variant": "standard",
+          "name": "start_date"
+        },
+        {
+          "label": "End Date",
+          "type": "datetime-local",
+          "variant": "standard",
+          "name": "end_date"
+        },
+        {
+          "label": "Max Users",
+          "type": "text",
+          "variant": "standard",
+          "name": "max_users"
+        },
+        {
+          "label": "Subscription Amount",
+          "type": "text",
+          "variant": "standard",
+          "name": "subscription_amt"
+        },
+        {
+          "label": "Panelty Amount",
+          "type": "text",
+          "variant": "standard",
+          "name": "penalty_amt"
+        }
+       
+      ],
+      "editField":[
+   
+        {
+          "label": "Group name",
+          "type": "text",
+          "variant": "standard",
+          "name": "title"
+        },
+        {
+          "label": "Group Description",
+          "type": "text",
+          "variant": "standard",
+          "name": "description"
+        },
+        {
+          "label": "Start Date",
+          "type": "datetime-local",
+          "variant": "standard",
+          "name": "start_date"
+        },
+        {
+          "label": "End Date",
+          "type": "datetime-local",
+          "variant": "standard",
+          "name": "end_date"
+        },
+        {
+          "label": "Max Users",
+          "type": "text",
+          "variant": "standard",
+          "name": "max_users"
+        },
+        {
+          "label": "Subscription Amount",
+          "type": "text",
+          "variant": "standard",
+          "name": "subscription_amt"
+        },
+        {
+          "label": "Panelty Amount",
+          "type": "text",
+          "variant": "standard",
+          "name": "penalty_amt"
+        }
+       
+      ]
+}
\ No newline at end of file
diff --git a/src/api-manager/helper.js b/src/api-manager/helper.js
new file mode 100644
index 0000000..e00acb1
--- /dev/null
+++ b/src/api-manager/helper.js
@@ -0,0 +1,16 @@
+export function camelCase(str) {
+    // Using replace method with regEx
+    return str.replace(/(?:^\w|[A-Z]|\b\w)/g, function (word, index) {
+        return index === 0 ? word.toLowerCase() : word.toUpperCase();
+    }).replace(/\s+/g, '');
+}
+export function firstUpperCase(str) {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+}
+export const validateEmail = (email) => {
+    const emailRegex = /^[\w\.-]+@[a-zA-Z\d\.-]+\.[a-zA-Z]{2,}$/;
+    return emailRegex.test(email);
+  };
+  export const validatePassword = (password) => {
+    return password.length >= 8;
+  };
\ No newline at end of file
diff --git a/src/api-manager/style.css b/src/api-manager/style.css
new file mode 100644
index 0000000..a6408f4
--- /dev/null
+++ b/src/api-manager/style.css
@@ -0,0 +1,46 @@
+.dynamic-form-element {
+  display: block;
+  margin-bottom: 10px;
+  width: 100%;
+}
+
+.search-table {
+  display: flex;
+  align-items: center;
+  padding-top: 15px;
+  padding-bottom: 15px;
+  width: 100%;
+}
+
+.search-input-table {
+  padding: 8px;
+  border: none; /* Remove border */
+  border-radius: 15px;
+  outline: none;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
+
+  font-size: 16px;
+  width: 100%;
+  height: 30px;
+}
+
+.search-input-table:focus {
+  background-color: #f0f0f0; /* Optional: Change background color on focus */
+}
+/* pagination */
+.pagination-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 20px 0;
+}
+
+.pagination-button {
+  margin: 0 5px;
+}
+
+.pagination-button.active-page {
+  background-color: #6c757d;
+  color: rgb(73, 198, 207);
+
+}
diff --git a/src/api-manager/useAPIManager.js b/src/api-manager/useAPIManager.js
new file mode 100644
index 0000000..3d9ffd5
--- /dev/null
+++ b/src/api-manager/useAPIManager.js
@@ -0,0 +1,77 @@
+import axios from "axios";
+
+const useAPIManager = (globalConfig, _token) => {
+  const authToken = _token;
+  const global = globalConfig;
+
+  let token = authToken.access;
+  let authorization = _token
+    ? {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      }
+    : {};
+
+  const getAPI = (API_NAME) => global.api.host + global.api[API_NAME];
+  
+  const getHost = () => global.api.host;
+
+  const Post = async (api, payload) => {
+    let _api = getAPI(api).includes("undefined") ? api : getAPI(api);
+    try {
+      const response = await axios.post(_api, payload, authorization);
+      return response;
+    } catch (err) {
+      throw err;
+    }
+  };
+
+  const Put = async (api, id, payload) => {
+    let _api = getAPI(api).includes("undefined") ? api : getAPI(api);
+    try {
+      const response = await axios.put(`${_api}${id}/`, payload, authorization);
+      return response;
+    } catch (err) {
+      throw err;
+    }
+  };
+
+  const Patch = async (api, id, payload) => {
+    let _api = getAPI(api).includes("undefined") ? api : getAPI(api);
+    try {
+      const response = await axios.patch(
+        `${_api}${id}/`,
+        payload,
+        authorization
+      );
+      return response;
+    } catch (err) {
+      throw err;
+    }
+  };
+
+  const Get = async (api) => {
+    let _api = getAPI(api).includes("undefined") ? api : getAPI(api);
+    try {
+      const response = await axios.get(_api, authorization);
+      return response.data;
+    } catch (err) {
+      throw err;
+    }
+  };
+
+  const Delete = async (api, id) => {
+    let _api = getAPI(api).includes("undefined") ? api : getAPI(api);
+    try {
+      const response = await axios.delete(`${_api}${id}/`, authorization);
+      return response;
+    } catch (err) {
+      throw err;
+    }
+  };
+
+  return { Post, Put, Patch, Get, Delete, getAPI, getHost };
+};
+
+export default useAPIManager;
diff --git a/src/api-manager/useApi.js b/src/api-manager/useApi.js
new file mode 100644
index 0000000..357ea00
--- /dev/null
+++ b/src/api-manager/useApi.js
@@ -0,0 +1,89 @@
+// useApi.js
+import { useContext } from 'react';
+import axios from 'axios';
+import AuthContext from '../auth/AuthContext';
+import global from '../global/GlobalJSON.json';
+
+
+const useApi = () => {
+  const { authToken } = useContext(AuthContext);
+
+  const getAPI = (API_NAME) => global.api.host + global.api[API_NAME];
+
+  const getHost = () => global.api.host;
+  let token = authToken.access;
+
+  const Post = async (api, payload) => {
+    let _api =(getAPI(api).includes('undefined'))?api:getAPI(api);
+    try {
+      const response = await axios.post(_api, payload, {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      });
+      return response;
+    } catch (err) {
+      throw err;
+    }
+  };
+
+  const Put = async (api, id, payload) => {
+    let _api =(getAPI(api).includes('undefined'))?api:getAPI(api);
+    try {
+      const response = await axios.put(`${_api}${id}/`, payload, {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      });
+      return response;
+    } catch (err) {
+      throw err;
+    }
+  };
+
+  const Patch = async (api, id, payload) => {
+    let _api =(getAPI(api).includes('undefined'))?api:getAPI(api);
+    try {
+      const response = await axios.patch(`${_api}${id}/`, payload, {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      });
+      return response;
+    } catch (err) {
+      throw err;
+    }
+  };
+
+  const Get = async (api) => {
+    let _api =(getAPI(api).includes('undefined'))?api:getAPI(api);
+    try {
+      const response = await axios.get(_api, {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      });
+      return response.data;
+    } catch (err) {
+      throw err;
+    }
+  };
+
+  const Delete = async (api, id) => {
+    let _api =(getAPI(api).includes('undefined'))?api:getAPI(api);
+    try {
+      const response = await axios.delete(`${_api}${id}/`, {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      });
+      return response;
+    } catch (err) {
+      throw err;
+    }
+  };
+
+  return { Post, Put, Patch, Get, Delete, getAPI, getHost };
+};
+
+export default useApi;
diff --git a/src/assets/bg.png b/src/assets/bg.png
new file mode 100644
index 0000000..cf6efb1
Binary files /dev/null and b/src/assets/bg.png differ
diff --git a/src/auth/AuthContext.js b/src/auth/AuthContext.js
new file mode 100644
index 0000000..4fd7a05
--- /dev/null
+++ b/src/auth/AuthContext.js
@@ -0,0 +1,131 @@
+import { createContext, useEffect, useState } from "react";
+import axios from "axios";
+import { useNavigate } from "react-router-dom";
+import {jwtDecode} from "jwt-decode"; // Make sure jwt-decode is imported correctly
+import { getAPI } from "../global/Global"; // Make sure this function is properly defined
+import { toast } from "react-toastify";
+
+const AuthContext = createContext();
+
+export default AuthContext;
+
+export const AuthProvider = ({ children }) => {
+  const [authToken, setAuthToken] = useState(() => 
+    localStorage.getItem("authToken") ? JSON.parse(localStorage.getItem("authToken")) : null
+  );
+
+  const [user, setUser] = useState(() => 
+    localStorage.getItem("authToken") ? jwtDecode(localStorage.getItem("authToken")) : {}
+  );
+
+  const navigate = useNavigate();
+  const [loading, setLoading] = useState(true);
+
+  const loginUser = (e) => {
+    e.preventDefault();
+    axios
+      .post(getAPI("token"), {
+        username: e.target.username.value,
+        password: e.target.password.value,
+      })
+      .then((response) => {
+        checkSuperUser(response.data.access);
+        setAuthToken(response.data);
+        setUser(jwtDecode(response.data.access));
+        localStorage.setItem("authToken", JSON.stringify(response.data));
+      })
+      .catch((error) => {
+        toast.error("Username or password incorrect");
+        console.error(error);
+      });
+  };
+
+  const checkSuperUser = async (token) => {
+    try {
+      const response = await axios.get(getAPI("isSuperUser"), {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      });
+      if (response.data.is_superuser) {
+        toast.success("Welcome, Admin");
+      } else {
+        logOutUser("User is not super user");
+      }
+    } catch (error) {
+      toast.error("Error checking user permissions");
+      console.error(error);
+    }
+  };
+
+  const refreshToken = () => {
+    if (authToken?.refresh) {
+      axios
+        .post(getAPI("refreshToken"), { refresh: `${authToken.refresh}` })
+        .then((response) => {
+          checkSuperUserRefresh(response.data.access);
+          setAuthToken(response.data);
+          setUser(jwtDecode(response.data.access));
+          localStorage.setItem("authToken", JSON.stringify(response.data));
+        })
+        .catch(logOutUser); // Log out if there's an error
+    } else {
+      logOutUser();
+    }
+
+    if (loading) {
+      setLoading(false);
+    }
+  };
+
+  const logOutUser = (message) => {
+    setAuthToken(null);
+    setUser({});
+    localStorage.removeItem("authToken");
+    if (message) toast.error(message);
+    navigate("login");
+  };
+
+  const checkSuperUserRefresh = async (token) => {
+    try {
+      const response = await axios.get(getAPI("isSuperUser"), {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      });
+      if (!response.data.is_superuser) {
+        logOutUser("User is not super user");
+      }
+    } catch (error) {
+      toast.error("Error checking user permissions");
+      console.error(error);
+    }
+  };
+
+  useEffect(() => {
+    if (loading) {
+      refreshToken();
+    }
+
+    const fourMinutes = 1000 * 60 * 4;
+    const interval = setInterval(() => {
+      if (authToken) {
+        refreshToken();
+      }
+    }, fourMinutes);
+    return () => clearInterval(interval);
+  }, [authToken, loading]);
+
+  const contextData = {
+    user,
+    loginUser,
+    logOutUser,
+    authToken,
+  };
+
+  return (
+    <AuthContext.Provider value={contextData}>
+      {loading ? null : children}
+    </AuthContext.Provider>
+  );
+};
diff --git a/src/auth/auth.js b/src/auth/auth.js
new file mode 100644
index 0000000..cb01b4a
--- /dev/null
+++ b/src/auth/auth.js
@@ -0,0 +1,18 @@
+import {useContext } from "react"
+import React from 'react'
+
+import AuthContext from "../auth/AuthContext";
+import LoginPage from "../pages/UI/login/login";
+import Header from "../components/header";
+
+
+
+export const Auth = (props) => {
+
+  let {user} = useContext(AuthContext);
+  return (
+    (user.user_id)? <><Header />{props.component}</> : <LoginPage/>
+  )
+}
+
+export default Auth;
diff --git a/src/components/footer.js b/src/components/footer.js
new file mode 100644
index 0000000..f5e783a
--- /dev/null
+++ b/src/components/footer.js
@@ -0,0 +1,45 @@
+import React from "react";
+import config from "../global/GlobalJSON.json";
+const Footer = () => {
+  const {
+    api: { version },
+  } = config;
+  return (
+    <div
+      style={{
+        backgroundColor: "#021526",
+        color: "white",
+        padding: "10px 20px",
+        textAlign: "center",
+        position: "fixed",
+        bottom: 0,
+        width: "100%",
+        boxShadow: "0 -2px 5px rgba(0, 0, 0, 0.2)",
+        zIndex: 0,
+      }}
+    >
+      <div className="container">
+        <p className="mb-0">
+          <span className="d-inline">
+            Developed by{" "}
+            <a
+              href="https://www.humbingo.com"
+              target="_blank"
+              rel="noopener noreferrer"
+              style={{ color: "inherit", textDecoration: "none" }}
+            >
+              Humbingo Consultancy Services
+            </a>
+          </span>
+          <span className="d-inline">
+            {" "}
+            | &copy; {new Date().getFullYear()} Cheque Print App. All rights
+            reserved.
+          </span>
+          <span className="d-inline"> | Version: {version}</span>
+        </p>
+      </div>
+    </div>
+  );
+};
+export default Footer;
diff --git a/src/components/header copy.js b/src/components/header copy.js
new file mode 100644
index 0000000..cdd59b8
--- /dev/null
+++ b/src/components/header copy.js	
@@ -0,0 +1,216 @@
+// import React, { useState, useContext, useEffect } from "react";
+// import {
+//   AppBar,
+//   Toolbar,
+//   Typography,
+//   Box,
+//   IconButton,
+//   Menu,
+//   MenuItem,
+//   useMediaQuery,
+//   Drawer,
+//   List,
+//   ListItem,
+//   ListItemText,
+// } from "@mui/material";
+// import { Link } from "react-router-dom";
+// import AccountCircle from "@mui/icons-material/AccountCircle";
+// import MenuIcon from "@mui/icons-material/Menu";
+// import AuthContext from "../auth/AuthContext";
+// import useApi from "../api-manager/useApi";
+// import UserTypeUpdatePassword from "../utils/userTypePassword";
+ 
+
+// const Header = () => {
+//   const { user, logOutUser } = useContext(AuthContext);
+//   const [profile, setProfile] = useState(null);
+//   const [userType, setUserType] = useState(null);
+//   const [companyName, setCompanyName] = useState("");
+//   const [companyId, setCompanyId] = useState(null);
+//   const [dialogOpen, setDialogOpen] = useState(false);
+//   const { Get, Post, getHost } = useApi();
+//   const isMobile = useMediaQuery("(max-width:600px)");
+//   const [drawerOpen, setDrawerOpen] = useState(false);
+
+//   const handleClose = () => {
+//     setProfile(null);
+//   };
+
+//   const handleMenu = (event) => {
+//     setProfile(event.currentTarget);
+//   };
+
+//   const toggleDrawer = (open) => (event) => {
+//     if (
+//       event.type === "keydown" &&
+//       (event.key === "Tab" || event.key === "Shift")
+//     ) {
+//       return;
+//     }
+//     setDrawerOpen(open);
+//   };
+
+//   const getUserType = async () => {
+//     try {
+//       const userTypeData = await Get("checkUserType");
+//       setUserType(userTypeData.user_type);
+
+//       const compId = await Get(
+//         `${getHost()}/api/v1/getCompanyByUserOrDeptId?user_id=${user.user_id}`
+//       );
+//       setCompanyName(compId.company_name);
+//       setCompanyId(compId.company_id);
+//     } catch (error) {
+//       setCompanyName("Hey Admin");
+//     }
+//   };
+
+//   useEffect(() => {
+//     getUserType();
+//   }, []);
+
+//   const renderLinks = () => {
+//     switch (userType) {
+//       case "department user":
+//         return [
+//           { path: "/", label: "Home" },
+//           { path: "/cheque-form", label: "Print Cheque" },
+//           { path: "/history", label: "Cheque History" },
+//         ];
+//       case "company user":
+//         return [
+//           { path: "/", label: "Home" },
+//           { path: "/cheque-form", label: "Print Cheque" },
+//           { path: "/history", label: "Cheque History" },
+//           { path: "/department", label: "Departments" },
+//         ];
+//       case "superuser":
+//         return [
+//           { path: "/", label: "Humbingo Home" },
+//           { path: "/company", label: "Company" },
+//           { path: "/AdminDepartment", label: "Departments" },
+//           { path: "/licence", label: "Licence" },
+//           { path: "/registree", label: "Registree" },
+//           { path: "/user", label: "User" },
+//           { path: "/role", label: "Role" },
+//           { path: "/history", label: "Cheque History" },
+//         ];
+//       default:
+//         return [];
+//     }
+//   };
+
+//   const linkStyle = {
+//     color: "inherit",
+//     textDecoration: "none",
+//     margin: "0 10px",
+//   };
+
+//   const drawerLinks = (
+//     <Box
+//       sx={{ width: 250 }}
+//       role="presentation"
+//       onClick={toggleDrawer(false)}
+//       onKeyDown={toggleDrawer(false)}
+//     >
+//       <List>
+//         {renderLinks().map((link, index) => (
+//           <ListItem button component={Link} to={link.path} key={index}>
+//             <ListItemText primary={link.label} />
+//           </ListItem>
+//         ))}
+//       </List>
+//     </Box>
+//   );
+
+//   const handlePasswordSubmit = async (newPassword) => {
+//     try {
+//       await Post(
+//         `${getHost()}/api/v1/updatePassword/company/${companyId}/`,
+//         { password: newPassword }
+//       );
+//       alert("Password updated successfully"); // Replace with a better toast notification if needed
+//     } catch (error) {
+//       console.error("Error changing password:", error);
+//       alert("Failed to update password"); // Replace with a better toast notification if needed
+//     }
+//     setDialogOpen(false);
+//   };
+
+//   return (
+//     <AppBar position="sticky" sx={{ backgroundColor: "#021526" }}>
+//       <Toolbar>
+//         <IconButton
+//           edge="start"
+//           color="inherit"
+//           aria-label="menu"
+//           onClick={toggleDrawer(true)}
+//           sx={{ display: isMobile ? "block" : "none" }}
+//         >
+//           <MenuIcon />
+//         </IconButton>
+//         <Typography
+//           variant="h6"
+//           sx={{ flexGrow: 1, display: "flex", alignItems: "center" }}
+//         >
+//           <img
+//             src="https://humbingo.com/wp-content/uploads/2024/06/Logo-32-.webp"
+//             height="50px"
+//             alt="Logo"
+//           />
+//           {!isMobile && (
+//             <span style={{ marginLeft: "10px" }}>{companyName}</span>
+//           )}
+//         </Typography>
+//         {!isMobile && (
+//           <Box sx={{ display: "flex" }}>
+//             {renderLinks().map((link, index) => (
+//               <Link to={link.path} style={linkStyle} key={index}>
+//                 {link.label}
+//               </Link>
+//             ))}
+//           </Box>
+//         )}
+//         <IconButton
+//           edge="end"
+//           aria-label="account of current user"
+//           aria-haspopup="true"
+//           onClick={handleMenu}
+//           color="inherit"
+//         >
+//           <AccountCircle />
+//         </IconButton>
+//         <Menu
+//           anchorEl={profile}
+//           anchorOrigin={{
+//             vertical: "bottom",
+//             horizontal: "left",
+//           }}
+//           keepMounted
+//           transformOrigin={{
+//             vertical: "top",
+//             horizontal: "left",
+//           }}
+//           open={Boolean(profile)}
+//           onClose={handleClose}
+//         >
+//           {/* <MenuItem onClick={handleClose}>{`Hello, ${user.user_id}`}</MenuItem> */}
+//           <MenuItem onClick={() => setDialogOpen(true)}>Change Password</MenuItem>
+//           <MenuItem onClick={logOutUser} ><span style={{backgroundColor: "#f60002", color: "White", textAlign:"center",padding: "7px", width: "100%", borderRadius: "5px"}}>Logout</span></MenuItem>
+//         </Menu>
+//       </Toolbar>
+//       <Drawer anchor="left" open={drawerOpen} onClose={toggleDrawer(false)}>
+//         {drawerLinks}
+//       </Drawer>
+//       <UserTypeUpdatePassword
+//         open={dialogOpen}
+//         onClose={() => setDialogOpen(false)}
+//         onSubmit={handlePasswordSubmit}
+//         userType={userType}
+//         companyId={companyId}
+//       />
+//     </AppBar>
+//   );
+// };
+
+// export default Header;
diff --git a/src/components/header.js b/src/components/header.js
new file mode 100644
index 0000000..b223ad9
--- /dev/null
+++ b/src/components/header.js
@@ -0,0 +1,280 @@
+import React, { useContext, useState } from 'react';
+import {
+  AppBar,
+  Toolbar,
+  Typography,
+  IconButton,
+  Menu,
+  MenuItem,
+  Drawer,
+  CssBaseline,
+  List,
+  ListItem,
+  ListItemText,
+  Collapse,
+  Divider,
+} from '@mui/material';
+import { Link, useLocation } from 'react-router-dom';
+import AuthContext from '../auth/AuthContext';
+import {
+  Menu as MenuIcon,
+  ChevronLeft as ChevronLeftIcon,
+  ChevronRight as ChevronRightIcon,
+  ExpandLess,
+  ExpandMore,
+  Home as HomeIcon,
+  People as PeopleIcon,
+  CalendarToday as CalendarTodayIcon,
+  AccountBalance as AccountBalanceIcon,
+  Receipt as ReceiptIcon,
+  Paid as PaidIcon,
+  TimeToLeave as LeaveIcon,
+  Settings as SettingsIcon,
+  Help as HelpIcon,
+} from '@mui/icons-material';
+import { styled, useTheme } from '@mui/material/styles';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faUserCircle } from '@fortawesome/free-solid-svg-icons';
+
+const drawerWidth = 240;
+
+const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })(
+  ({ theme, open }) => ({
+    flexGrow: 1,
+    padding: theme.spacing(3),
+    transition: theme.transitions.create('margin', {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen,
+    }),
+    marginLeft: `-${drawerWidth}px`,
+    ...(open && {
+      transition: theme.transitions.create('margin', {
+        easing: theme.transitions.easing.easeOut,
+        duration: theme.transitions.duration.enteringScreen,
+      }),
+      marginLeft: 0,
+    }),
+  })
+);
+
+const AppBarStyled = styled(AppBar, {
+  shouldForwardProp: (prop) => prop !== 'open',
+})(({ theme, open }) => ({
+  transition: theme.transitions.create(['margin', 'width'], {
+    easing: theme.transitions.easing.sharp,
+    duration: theme.transitions.duration.leavingScreen,
+  }),
+  ...(open && {
+    width: `calc(100% - ${drawerWidth}px)`,
+    marginLeft: `${drawerWidth}px`,
+    transition: theme.transitions.create(['margin', 'width'], {
+      easing: theme.transitions.easing.easeOut,
+      duration: theme.transitions.duration.enteringScreen,
+    }),
+  }),
+}));
+
+const DrawerHeader = styled('div')(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  padding: theme.spacing(0, 1),
+  ...theme.mixins.toolbar,
+  justifyContent: 'flex-end',
+}));
+
+const ListItemStyled = styled(ListItem)(({ theme }) => ({
+  '&.active': {
+    backgroundColor: theme.palette.action.hover,
+  },
+}));
+
+const Header = () => {
+  const { user, logOutUser } = useContext(AuthContext);
+  const [profileAnchorEl, setProfileAnchorEl] = useState(null);
+  const [drawerOpen, setDrawerOpen] = useState(false);
+  const [manageOpen, setManageOpen] = useState(false);
+  const [manageDataOpen, setManageDataOpen] = useState(false);
+  const theme = useTheme();
+  const location = useLocation();
+
+  const handleMenuOpen = (event) => {
+    setProfileAnchorEl(event.currentTarget);
+  };
+
+  const handleMenuClose = () => {
+    setProfileAnchorEl(null);
+  };
+
+  const handleLogout = () => {
+    logOutUser();
+    handleMenuClose();
+  };
+
+  const toggleDrawer = () => {
+    setDrawerOpen(!drawerOpen);
+  };
+
+  const toggleManageDropdown = () => {
+    setManageOpen(!manageOpen);
+  };
+
+  const toggleManageDataDropdown = () => {
+    setManageDataOpen(!manageDataOpen);
+  };
+
+  const handleNavClick = () => {
+    setDrawerOpen(false);
+  };
+
+  return (
+    <>
+      <CssBaseline />
+      <AppBarStyled position="fixed" open={drawerOpen} style={{ backgroundColor: '#35424a' }}>
+        <Toolbar>
+          <IconButton
+            color="inherit"
+            aria-label="open drawer"
+            onClick={toggleDrawer}
+            edge="start"
+            sx={{ mr: 2, ...(drawerOpen && { display: 'none' }) }}
+          >
+            <MenuIcon />
+          </IconButton>
+          <Typography variant="h6" noWrap component="div" sx={{ flexGrow: 1 }}>
+            HbaseApp
+          </Typography>
+          <IconButton edge="end" color="inherit" onClick={handleMenuOpen}>
+            <FontAwesomeIcon icon={faUserCircle} />
+          </IconButton>
+          <Menu
+            anchorEl={profileAnchorEl}
+            open={Boolean(profileAnchorEl)}
+            onClose={handleMenuClose}
+          >
+            <MenuItem onClick={handleMenuClose}>{`Hello, ${user?.user_id}`}</MenuItem>
+            <MenuItem onClick={handleLogout}>Logout</MenuItem>
+          </Menu>
+        </Toolbar>
+      </AppBarStyled>
+      <Drawer
+        sx={{
+          width: drawerWidth,
+          flexShrink: 0,
+          '& .MuiDrawer-paper': {
+            width: drawerWidth,
+            boxSizing: 'border-box',
+          },
+        }}
+        variant="persistent"
+        anchor="left"
+        open={drawerOpen}
+      >
+        <DrawerHeader>
+          <IconButton onClick={toggleDrawer}>
+            {theme.direction === 'ltr' ? <ChevronLeftIcon /> : <ChevronRightIcon />}
+          </IconButton>
+        </DrawerHeader>
+        <Divider />
+        <List>
+          <ListItemStyled
+            button
+            component={Link}
+            to="/"
+            onClick={handleNavClick}
+            className={location.pathname === '/' ? 'active' : ''}
+          >
+            <HomeIcon style={{ marginRight: '10px' }} />
+            <ListItemText primary="Home" />
+          </ListItemStyled>
+          <ListItemStyled button onClick={toggleManageDropdown}>
+            <ListItemText primary="Manage" />
+            {manageOpen ? <ExpandLess /> : <ExpandMore />}
+          </ListItemStyled>
+          <Collapse in={manageOpen} timeout="auto" unmountOnExit>
+            <List component="div" disablePadding>
+              <ListItemStyled
+                button
+                component={Link}
+                to="/company"
+                onClick={handleNavClick}
+                sx={{ pl: 4 }}
+                className={location.pathname === '/company' ? 'active' : ''}
+              >
+                <AccountBalanceIcon style={{ marginRight: '10px' }} />
+                <ListItemText primary="Company" />
+              </ListItemStyled>
+              <ListItemStyled
+                button
+                component={Link}
+                to="/department"
+                onClick={handleNavClick}
+                sx={{ pl: 4 }}
+                className={location.pathname === '/department' ? 'active' : ''}
+              >
+                <PeopleIcon style={{ marginRight: '10px' }} />
+                <ListItemText primary="Department" />
+              </ListItemStyled>
+              <ListItemStyled
+                button
+                component={Link}
+                to="/employee"
+                onClick={handleNavClick}
+                sx={{ pl: 4 }}
+                className={location.pathname === '/employee' ? 'active' : ''}
+              >
+                <PeopleIcon style={{ marginRight: '10px' }} />
+                <ListItemText primary="Employee" />
+              </ListItemStyled>
+            
+            </List>
+          </Collapse>
+          <ListItemStyled button onClick={toggleManageDataDropdown}>
+            <ListItemText primary="Manage Data" />
+            {manageDataOpen ? <ExpandLess /> : <ExpandMore />}
+          </ListItemStyled>
+          <Collapse in={manageDataOpen} timeout="auto" unmountOnExit>
+            <List component="div" disablePadding>
+              <ListItemStyled
+                button
+                component={Link}
+                to="/rules"
+                onClick={handleNavClick}
+                sx={{ pl: 4 }}
+                className={location.pathname === '/rules' ? 'active' : ''}
+              >
+                <SettingsIcon style={{ marginRight: '10px' }} />
+                <ListItemText primary="Rules" />
+              </ListItemStyled>
+            </List>
+          </Collapse>
+          <Divider />
+          <ListItemStyled
+            button
+            component={Link}
+            to="/setting"
+            onClick={handleNavClick}
+            className={location.pathname === '/setting' ? 'active' : ''}
+          >
+            <SettingsIcon style={{ marginRight: '10px' }} />
+            <ListItemText primary="Setting" />
+          </ListItemStyled>
+          <ListItemStyled
+            button
+            component={Link}
+            to="/su"
+            onClick={handleNavClick}
+            className={location.pathname === '/su' ? 'active' : ''}
+          >
+            <HelpIcon style={{ marginRight: '10px' }} />
+            <ListItemText primary="Support" />
+          </ListItemStyled>
+        </List>
+      </Drawer>
+      <Main open={drawerOpen}>
+        <DrawerHeader />
+      </Main>
+    </>
+  );
+};
+
+export default Header;
diff --git a/src/global/Global.js b/src/global/Global.js
new file mode 100644
index 0000000..5fa3db2
--- /dev/null
+++ b/src/global/Global.js
@@ -0,0 +1,9 @@
+import global from "../global/GlobalJSON.json"
+
+export function getAPI(API_NAME) {
+    return global.api.host + global.api[API_NAME];
+}
+
+export function getHost() {
+    return global.api.host;
+}
\ No newline at end of file
diff --git a/src/global/GlobalJSON.json b/src/global/GlobalJSON.json
new file mode 100644
index 0000000..fbc983c
--- /dev/null
+++ b/src/global/GlobalJSON.json
@@ -0,0 +1,14 @@
+{
+    "api": {
+      "host": "https://cheque-api.humbingo.in",
+      "token": "/auth/token/",
+      "refreshToken": "/auth/token/refresh/",
+      "user": "/api/v1/user/",
+      "role": "/api/v1/role/",
+      "permission": "/api/v1/permission/",
+      "checkUserType": "/api/v1/checkUserType",
+        "version": "1.0"
+    },
+    "debug": true
+  }
+  
\ No newline at end of file
diff --git a/ticketmanager-fe/src/index.css b/src/index.css
similarity index 100%
rename from ticketmanager-fe/src/index.css
rename to src/index.css
diff --git a/ticketmanager-fe/src/index.js b/src/index.js
similarity index 100%
rename from ticketmanager-fe/src/index.js
rename to src/index.js
diff --git a/src/logo.png b/src/logo.png
new file mode 100644
index 0000000..eca0634
Binary files /dev/null and b/src/logo.png differ
diff --git a/ticketmanager-fe/src/logo.svg b/src/logo.svg
similarity index 100%
rename from ticketmanager-fe/src/logo.svg
rename to src/logo.svg
diff --git a/src/pages/UI/home/home.js b/src/pages/UI/home/home.js
new file mode 100644
index 0000000..06fc2c2
--- /dev/null
+++ b/src/pages/UI/home/home.js
@@ -0,0 +1,12 @@
+import React from "react";
+
+
+function Home() {
+  return (
+    <div>
+      <h1>Home Page</h1>
+    </div>
+  );
+}
+
+export default Home;
diff --git a/src/pages/UI/login/login.js b/src/pages/UI/login/login.js
new file mode 100644
index 0000000..e88de12
--- /dev/null
+++ b/src/pages/UI/login/login.js
@@ -0,0 +1,121 @@
+import React, { useContext, useEffect, useState } from "react";
+import AuthContext from "../../../auth/AuthContext";
+import { Link, useNavigate } from "react-router-dom";
+import {
+  Container,
+  TextField,
+  Typography,
+  Paper,
+  Button,
+  Grid,
+  IconButton,
+  InputAdornment,
+} from "@mui/material";
+import { Visibility, VisibilityOff } from "@mui/icons-material";
+import logo from "../../../logo.png"
+
+const LoginPage = () => {
+  let { loginUser } = useContext(AuthContext);
+  let { authToken } = useContext(AuthContext);
+  const [showPassword, setShowPassword] = useState(false);
+  let navigate = useNavigate();
+
+  let checkLogedIn = () => {
+    if (authToken) {
+      navigate("/");
+    } else {
+      console.error("Unable to check authToken");
+      return false;
+    }
+  };
+
+  const handleClickShowPassword = () => {
+    setShowPassword((prev) => !prev);
+  };
+
+  const handleMouseDownPassword = (event) => {
+    event.preventDefault();
+  };
+
+  useEffect(() => {
+    checkLogedIn();
+  }, [authToken]);
+
+  return (
+    <div>
+      <form onSubmit={loginUser}>
+        <Container component="main" maxWidth="xs">
+          <Paper
+            elevation={3}
+            sx={{
+              marginTop: 8,
+              padding: 4,
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+            }}
+          >
+            {/* Logo */}
+            <img
+              src={`${logo}`}
+              alt="Logo"
+              style={{ height: 100, width: 150, marginBottom: 20 }} // Adjust size and margin as needed
+            />
+
+            <h1 style={{ fontFamily: "consolas" }}>
+
+            </h1>
+            <Typography component="h1" variant="h5">
+              Login
+            </Typography>
+            <TextField
+              margin="normal"
+              required
+              fullWidth
+              name="username"
+              label="User Name"
+            />
+            <TextField
+              margin="normal"
+              required
+              fullWidth
+              name="password"
+              label="Password"
+              type={showPassword ? "text" : "password"}
+              InputProps={{
+                endAdornment: (
+                  <InputAdornment position="end">
+                    <IconButton
+                      onClick={handleClickShowPassword}
+                      onMouseDown={handleMouseDownPassword}
+                      edge="end"
+                    >
+                      {showPassword ? <VisibilityOff /> : <Visibility />}
+                    </IconButton>
+                  </InputAdornment>
+                ),
+              }}
+            />
+            <Grid item xs>
+              <Link href="#" variant="body2">
+                Forgot password?
+              </Link>
+            </Grid>
+            <br />
+            <Button
+              variant="contained"
+              color="primary"
+              fullWidth
+              type="Submit"
+              name="submit"
+            >
+              Login
+            </Button>
+          </Paper>
+        </Container>
+      </form>
+    </div>
+  );
+};
+
+export default LoginPage;
diff --git a/ticketmanager-fe/src/reportWebVitals.js b/src/reportWebVitals.js
similarity index 100%
rename from ticketmanager-fe/src/reportWebVitals.js
rename to src/reportWebVitals.js
diff --git a/ticketmanager-fe/src/setupTests.js b/src/setupTests.js
similarity index 100%
rename from ticketmanager-fe/src/setupTests.js
rename to src/setupTests.js
diff --git a/src/utils/userTypePassword.js b/src/utils/userTypePassword.js
new file mode 100644
index 0000000..81c5efc
--- /dev/null
+++ b/src/utils/userTypePassword.js
@@ -0,0 +1,56 @@
+import React, { useState } from "react";
+import {
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  TextField,
+  Button,
+} from "@mui/material";
+const UserTypeUpdatePassword = ({
+  open,
+  onClose,
+  onSubmit,
+  userType,
+  companyId,
+  departmentId,
+}) => {
+  const [newPassword, setNewPassword] = useState("");
+  const handleSubmit = () => {
+    if (!newPassword) {
+      alert("Please enter a new password");
+      return;
+    }
+    // Determine which ID to use based on userType
+    const id = userType === "company user" ? companyId : departmentId;
+    if (!id) {
+      alert("ID not found");
+      return;
+    }
+    onSubmit(newPassword);
+    setNewPassword(""); // Clear the input after submission
+  };
+  return (
+    <Dialog open={open} onClose={onClose}>
+      <DialogTitle>Change Password</DialogTitle>
+      <DialogContent>
+        <TextField
+          autoFocus
+          margin="dense"
+          id="password"
+          label="New Password"
+          type="password"
+          fullWidth
+          variant="standard"
+          value={newPassword}
+          onChange={(e) => setNewPassword(e.target.value)}
+        />
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={handleSubmit} variant="contained">Change Password</Button>
+       
+      </DialogActions>
+    </Dialog>
+  );
+};
+export default UserTypeUpdatePassword;
diff --git a/ticketmanager-fe/README.md b/ticketmanager-fe/README.md
deleted file mode 100644
index 58beeac..0000000
--- a/ticketmanager-fe/README.md
+++ /dev/null
@@ -1,70 +0,0 @@
-# Getting Started with Create React App
-
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
-
-## Available Scripts
-
-In the project directory, you can run:
-
-### `npm start`
-
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
-
-The page will reload when you make changes.\
-You may also see any lint errors in the console.
-
-### `npm test`
-
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
-
-### `npm run build`
-
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
-
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
-
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
-
-### `npm run eject`
-
-**Note: this is a one-way operation. Once you `eject`, you can't go back!**
-
-If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
-
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
-
-You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
-
-## Learn More
-
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
-
-To learn React, check out the [React documentation](https://reactjs.org/).
-
-### Code Splitting
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
-
-### Analyzing the Bundle Size
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
-
-### Making a Progressive Web App
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
-
-### Advanced Configuration
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
-
-### Deployment
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
-
-### `npm run build` fails to minify
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
diff --git a/ticketmanager-fe/src/App.js b/ticketmanager-fe/src/App.js
deleted file mode 100644
index 3784575..0000000
--- a/ticketmanager-fe/src/App.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import logo from './logo.svg';
-import './App.css';
-
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
-}
-
-export default App;