update changes

working create password
Merge branch 'Siddhesh' of http://git.wdipl.com/Siddhesh.More/tanami-admin-panel into Yasin
2024-12-09 20:10:47 +05:30 · 2024-12-06 20:04:20 +05:30 · 2024-12-06 16:15:10 +05:30 · 2024-12-06 16:11:18 +05:30 · 2024-12-06 16:09:36 +05:30 · 2024-12-05 20:26:39 +05:30
172 changed files with 23559 additions and 4338 deletions
--- a/index.html
+++ b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/src/assets/favicon.png" />
+    <link rel="icon" type="image/svg+xml" href="/src/assets/favicons.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tanami Admin</title>
  </head>
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,6 +21,7 @@
        "dotenv": "^16.4.5",
        "framer-motion": "^11.1.5",
        "js-cookie": "^3.0.5",
+        "quill": "^2.0.2",
        "react": "^18.2.0",
        "react-apexcharts": "^1.4.1",
        "react-beautiful-dnd": "^13.1.1",
@@ -28,7 +29,8 @@
        "react-dom": "^18.2.0",
        "react-hook-form": "^7.51.3",
        "react-icons": "^5.1.0",
-        "react-quill": "^0.0.2",
+        "react-phone-input-2": "^2.15.1",
+        "react-quill": "^2.0.0",
        "react-redux": "^9.1.1",
        "react-router-dom": "^6.22.3",
        "redux-persist": "^6.0.0",
@@ -2757,6 +2759,15 @@
      "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==",
      "license": "MIT"
    },
+    "node_modules/@types/quill": {
+      "version": "1.3.10",
+      "resolved": "https://registry.npmjs.org/@types/quill/-/quill-1.3.10.tgz",
+      "integrity": "sha512-IhW3fPW+bkt9MLNlycw8u8fWb7oO7W5URC9MfZYHBlA24rex9rs23D5DETChu1zvgVdc5ka64ICjJOgQMr6Shw==",
+      "license": "MIT",
+      "dependencies": {
+        "parchment": "^1.1.2"
+      }
+    },
    "node_modules/@types/react": {
      "version": "18.3.3",
      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.3.tgz",
@@ -3182,7 +3193,6 @@
      "version": "1.0.7",
      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
      "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "es-define-property": "^1.0.0",
@@ -3255,6 +3265,20 @@
        "pnpm": ">=8"
      }
    },
+    "node_modules/classnames": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
+    },
+    "node_modules/clone": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
+      "integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
    "node_modules/codepage": {
      "version": "1.15.0",
      "resolved": "https://registry.npmjs.org/codepage/-/codepage-1.15.0.tgz",
@@ -3460,6 +3484,26 @@
        }
      }
    },
+    "node_modules/deep-equal": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.2.tgz",
+      "integrity": "sha512-5tdhKF6DbU7iIzrIOa1AOUt39ZRm13cmL1cGEh//aqR8x9+tNfbywRf0n5FD/18OKMdo7DNEtrX2t22ZAkI+eg==",
+      "license": "MIT",
+      "dependencies": {
+        "is-arguments": "^1.1.1",
+        "is-date-object": "^1.0.5",
+        "is-regex": "^1.1.4",
+        "object-is": "^1.1.5",
+        "object-keys": "^1.1.1",
+        "regexp.prototype.flags": "^1.5.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
    "node_modules/deep-is": {
      "version": "0.1.4",
      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -3471,7 +3515,6 @@
      "version": "1.1.4",
      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "es-define-property": "^1.0.0",
@@ -3489,7 +3532,6 @@
      "version": "1.2.1",
      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz",
      "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "define-data-property": "^1.0.1",
@@ -3617,7 +3659,6 @@
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
      "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "get-intrinsic": "^1.2.4"
@@ -3630,7 +3671,6 @@
      "version": "1.3.0",
      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
-      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">= 0.4"
@@ -4111,10 +4151,16 @@
        "node": ">=0.10.0"
      }
    },
-    "node_modules/eventemitter2": {
-      "version": "0.4.14",
-      "resolved": "https://registry.npmjs.org/eventemitter2/-/eventemitter2-0.4.14.tgz",
-      "integrity": "sha512-K7J4xq5xAD5jHsGM5ReWXRTFa3JRGofHiMcVgQ8PRwgWxzjHpMWCIzsmyf60+mh8KLsqYPcjUMa0AC4hd6lPyQ==",
+    "node_modules/eventemitter3": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz",
+      "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==",
+      "license": "MIT"
+    },
+    "node_modules/extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
      "license": "MIT"
    },
    "node_modules/fast-deep-equal": {
@@ -4125,10 +4171,10 @@
      "license": "MIT"
    },
    "node_modules/fast-diff": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.0.1.tgz",
-      "integrity": "sha512-anEzYJ8VOA5iAMjDOVMTVMrUOXveDTMMk5x0E4p0nJ3VPoIOolF51AqYyE+UD0QIyggUwqppqH7XVA9lF3fdaQ==",
-      "license": "Apache 2.0"
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.3.0.tgz",
+      "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==",
+      "license": "Apache-2.0"
    },
    "node_modules/fast-json-stable-stringify": {
      "version": "2.1.0",
@@ -4371,7 +4417,6 @@
      "version": "1.2.3",
      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
-      "dev": true,
      "license": "MIT",
      "funding": {
        "url": "https://github.com/sponsors/ljharb"
@@ -4381,7 +4426,6 @@
      "version": "1.2.4",
      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
      "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "es-errors": "^1.3.0",
@@ -4489,7 +4533,6 @@
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
      "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "get-intrinsic": "^1.1.3"
@@ -4528,7 +4571,6 @@
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "es-define-property": "^1.0.0"
@@ -4541,7 +4583,6 @@
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.3.tgz",
      "integrity": "sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==",
-      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">= 0.4"
@@ -4554,7 +4595,6 @@
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
-      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">= 0.4"
@@ -4567,7 +4607,6 @@
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "has-symbols": "^1.0.3"
@@ -4689,6 +4728,22 @@
        "loose-envify": "^1.0.0"
      }
    },
+    "node_modules/is-arguments": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
+      "integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
    "node_modules/is-array-buffer": {
      "version": "3.0.4",
      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.4.tgz",
@@ -4806,7 +4861,6 @@
      "version": "1.0.5",
      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz",
      "integrity": "sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "has-tostringtag": "^1.0.0"
@@ -4926,7 +4980,6 @@
      "version": "1.1.4",
      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
      "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "call-bind": "^1.0.2",
@@ -5223,15 +5276,39 @@
      }
    },
    "node_modules/lodash": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-2.4.2.tgz",
-      "integrity": "sha512-Kak1hi6/hYHGVPmdyiZijoQyz5x2iGVzs6w9GYB/HiXEtylY7tIoYEROMjvM1d9nXJqPOrG2MNPMn01bJ+S0Rw==",
-      "engines": [
-        "node",
-        "rhino"
-      ],
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
      "license": "MIT"
    },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.clonedeep": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
+      "integrity": "sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
+    },
+    "node_modules/lodash.isequal": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
+      "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.memoize": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
+      "integrity": "sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag=="
+    },
    "node_modules/lodash.merge": {
      "version": "4.6.2",
      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -5245,6 +5322,16 @@
      "integrity": "sha512-GK3g5RPZWTRSeLSpgP8Xhra+pnjBC56q9FZYe1d5RN3TJ35dbkGy3YqBSMbyCrlbi+CM9Z3Jk5yTL7RCsqboyQ==",
      "license": "MIT"
    },
+    "node_modules/lodash.reduce": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.reduce/-/lodash.reduce-4.6.0.tgz",
+      "integrity": "sha512-6raRe2vxCYBhpBu+B+TtNGUzah+hQjVdu3E17wfusjyrXBka2nBS8OH/gjVZ5PvHOhWmIZTYri09Z6n/QfnNMw=="
+    },
+    "node_modules/lodash.startswith": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/lodash.startswith/-/lodash.startswith-4.2.1.tgz",
+      "integrity": "sha512-XClYR1h4/fJ7H+mmCKppbiBmljN/nGs73iq2SjCT9SF4CBPoUHzLvWmH1GtZMhMBZSiRkHXfeA2RY1eIlJ75ww=="
+    },
    "node_modules/loose-envify": {
      "version": "1.4.0",
      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -5351,11 +5438,26 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/object-is": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.6.tgz",
+      "integrity": "sha512-F8cZ+KfGlSGi09lJT7/Nd6KJZ9ygtvYC0/UYYLI9nmQKLMnydpB9yvbv9K1uSkEu7FU9vYPmVwLg328tX+ot3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
    "node_modules/object-keys": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
-      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">= 0.4"
@@ -5492,6 +5594,12 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/parchment": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/parchment/-/parchment-1.1.4.tgz",
+      "integrity": "sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg==",
+      "license": "BSD-3-Clause"
+    },
    "node_modules/parent-module": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -5676,20 +5784,40 @@
      ],
      "license": "MIT"
    },
-    "node_modules/quilljs": {
-      "version": "0.18.1",
-      "resolved": "https://registry.npmjs.org/quilljs/-/quilljs-0.18.1.tgz",
-      "integrity": "sha512-VKaO7GNehgnH4LlFPx5ZAl+KFDoRVtboY0I6UUbYXUsPHP8kR80Tg/CFEYqrqrpCOGQr4OQ5Tjm813gV1DUyQw==",
-      "license": "BSD-3-Clause",
+    "node_modules/quill": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/quill/-/quill-2.0.2.tgz",
+      "integrity": "sha512-QfazNrhMakEdRG57IoYFwffUIr04LWJxbS/ZkidRFXYCQt63c1gK6Z7IHUXMx/Vh25WgPBU42oBaNzQ0K1R/xw==",
      "dependencies": {
-        "eventemitter2": "~0.4.13",
-        "lodash": "~2.4.1",
-        "rich-text": "~1.0.2"
+        "eventemitter3": "^5.0.1",
+        "lodash-es": "^4.17.21",
+        "parchment": "^3.0.0",
+        "quill-delta": "^5.1.0"
      },
      "engines": {
-        "node": ">=0.10"
+        "npm": ">=8.2.3"
      }
    },
+    "node_modules/quill-delta": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-5.1.0.tgz",
+      "integrity": "sha512-X74oCeRI4/p0ucjb5Ma8adTXd9Scumz367kkMK5V/IatcX6A0vlgLgKbzXWy5nZmCGeNJm2oQX0d2Eqj+ZIlCA==",
+      "license": "MIT",
+      "dependencies": {
+        "fast-diff": "^1.3.0",
+        "lodash.clonedeep": "^4.5.0",
+        "lodash.isequal": "^4.5.0"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      }
+    },
+    "node_modules/quill/node_modules/parchment": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/parchment/-/parchment-3.0.0.tgz",
+      "integrity": "sha512-HUrJFQ/StvgmXRcQ1ftY6VEZUq3jA2t9ncFN4F84J/vN0/FPpQF+8FKXb3l6fLces6q0uOHj6NJn+2xvZnxO6A==",
+      "license": "BSD-3-Clause"
+    },
    "node_modules/raf-schd": {
      "version": "4.0.3",
      "resolved": "https://registry.npmjs.org/raf-schd/-/raf-schd-4.0.3.tgz",
@@ -5875,19 +6003,76 @@
      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
      "license": "MIT"
    },
-    "node_modules/react-quill": {
-      "version": "0.0.2",
-      "resolved": "https://registry.npmjs.org/react-quill/-/react-quill-0.0.2.tgz",
-      "integrity": "sha512-PeiHXZ63Sumh41OdovBQExXJH7B4UsJpyCW8CtRvXrNBa2RJXdciaJvTeb0x6pYQfqkoCYPT5EbUvEr0Z1tohg==",
-      "license": "MIT",
+    "node_modules/react-phone-input-2": {
+      "version": "2.15.1",
+      "resolved": "https://registry.npmjs.org/react-phone-input-2/-/react-phone-input-2-2.15.1.tgz",
+      "integrity": "sha512-W03abwhXcwUoq+vUFvC6ch2+LJYMN8qSOiO889UH6S7SyMCQvox/LF3QWt+cZagZrRdi5z2ON3omnjoCUmlaYw==",
      "dependencies": {
-        "quilljs": "^0.18.1"
-      },
-      "engines": {
-        "node": ">= 0.8.x"
+        "classnames": "^2.2.6",
+        "lodash.debounce": "^4.0.8",
+        "lodash.memoize": "^4.1.2",
+        "lodash.reduce": "^4.6.0",
+        "lodash.startswith": "^4.2.1",
+        "prop-types": "^15.7.2"
      },
      "peerDependencies": {
-        "react": ">=0.11.0"
+        "react": "^16.12.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0",
+        "react-dom": "^16.12.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0"
+      }
+    },
+    "node_modules/react-quill": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/react-quill/-/react-quill-2.0.0.tgz",
+      "integrity": "sha512-4qQtv1FtCfLgoD3PXAur5RyxuUbPXQGOHgTlFie3jtxp43mXDtzCKaOgQ3mLyZfi1PUlyjycfivKelFhy13QUg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/quill": "^1.3.10",
+        "lodash": "^4.17.4",
+        "quill": "^1.3.7"
+      },
+      "peerDependencies": {
+        "react": "^16 || ^17 || ^18",
+        "react-dom": "^16 || ^17 || ^18"
+      }
+    },
+    "node_modules/react-quill/node_modules/eventemitter3": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-2.0.3.tgz",
+      "integrity": "sha512-jLN68Dx5kyFHaePoXWPsCGW5qdyZQtLYHkxkg02/Mz6g0kYpDx4FyP6XfArhQdlOC4b8Mv+EMxPo/8La7Tzghg==",
+      "license": "MIT"
+    },
+    "node_modules/react-quill/node_modules/fast-diff": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.1.2.tgz",
+      "integrity": "sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/react-quill/node_modules/quill": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/quill/-/quill-1.3.7.tgz",
+      "integrity": "sha512-hG/DVzh/TiknWtE6QmWAF/pxoZKYxfe3J/d/+ShUWkDvvkZQVTPeVmUJVu1uE6DDooC4fWTiCLh84ul89oNz5g==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "clone": "^2.1.1",
+        "deep-equal": "^1.0.1",
+        "eventemitter3": "^2.0.3",
+        "extend": "^3.0.2",
+        "parchment": "^1.1.4",
+        "quill-delta": "^3.6.2"
+      }
+    },
+    "node_modules/react-quill/node_modules/quill-delta": {
+      "version": "3.6.3",
+      "resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-3.6.3.tgz",
+      "integrity": "sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg==",
+      "license": "MIT",
+      "dependencies": {
+        "deep-equal": "^1.0.1",
+        "extend": "^3.0.2",
+        "fast-diff": "1.1.2"
+      },
+      "engines": {
+        "node": ">=0.10"
      }
    },
    "node_modules/react-redux": {
@@ -6085,7 +6270,6 @@
      "version": "1.5.2",
      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.2.tgz",
      "integrity": "sha512-NcDiDkTLuPR+++OCKB0nWafEmhg/Da8aUPLPMQbK+bxKKCm1/S5he+AqYa4PlMCVBalb4/yxIRub6qkEx5yJbw==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "call-bind": "^1.0.6",
@@ -6143,18 +6327,6 @@
        "node": ">=0.10.0"
      }
    },
-    "node_modules/rich-text": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/rich-text/-/rich-text-1.0.3.tgz",
-      "integrity": "sha512-L+Mi0fBH4/TBGH68XZqUXdUr5Ze+ViYkrKuwEvCpeyB1Blbp4CLO4LyYleutTNybujCMQfcmivaNrE3YLrEUgg==",
-      "license": "MIT",
-      "dependencies": {
-        "fast-diff": "~1.0.0"
-      },
-      "engines": {
-        "node": ">=0.10"
-      }
-    },
    "node_modules/rimraf": {
      "version": "3.0.2",
      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
@@ -6292,7 +6464,6 @@
      "version": "1.2.2",
      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
      "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "define-data-property": "^1.1.4",
@@ -6310,7 +6481,6 @@
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.2.tgz",
      "integrity": "sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "define-data-property": "^1.1.4",
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
    "dotenv": "^16.4.5",
    "framer-motion": "^11.1.5",
    "js-cookie": "^3.0.5",
+    "quill": "^2.0.2",
    "react": "^18.2.0",
    "react-apexcharts": "^1.4.1",
    "react-beautiful-dnd": "^13.1.1",
@@ -30,7 +31,8 @@
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.51.3",
    "react-icons": "^5.1.0",
-    "react-quill": "^0.0.2",
+    "react-phone-input-2": "^2.15.1",
+    "react-quill": "^2.0.0",
    "react-redux": "^9.1.1",
    "react-router-dom": "^6.22.3",
    "redux-persist": "^6.0.0",
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -6,6 +6,7 @@ import {
  Routes,
  Route,
  Navigate,
+  useNavigate,
 } from "react-router-dom";
 import "./App.css"; // Import CSS file
 import DefaultLayout from "./Layout/DefaultLayout";
@@ -14,6 +15,8 @@ import Login from "./Pages/Login";
 import GlobalStateContext from "./Contexts/GlobalStateContext";
 import Cookies from "js-cookie";
 import NoInternetScreen from "./Pages/NoInternetScreen";
+import Welcome from "./Pages/PaymentSuccess";
+import PaymentFailed from "./Pages/PaymentFailed";

 const App = () => {
  // const { isAuthenticate } = useSelector((state) => state?.auth);
@@ -24,6 +27,8 @@ const App = () => {
  const [isOnline, setIsOnline] = useState(navigator.onLine);

  useEffect(() => {
+
+
    const handleOnlineStatusChange = () => {
      setIsOnline(navigator.onLine);
    };
@@ -52,12 +57,15 @@ const App = () => {
    <Router>
      <Routes>
        <Route path="/login" element={<Login />} />
+        <Route path="/payment-success" element={<Welcome />} />
+        <Route path="/payment-failed" element={<PaymentFailed />} />
        <Route
          path="/*"
          element={
            // isOnline ? (
              // isAuthenticate || isAuthenticatedInCookie  === "true" ? (
                localStorage.getItem('accessToken') && localStorage.getItem('refreshToken')  ? (
+                // true  ? (
                <DefaultLayout isOnline={isOnline} />
              ) : (
                <Login />
--- a/src/Components/CurrencyInput.jsx
+++ b/src/Components/CurrencyInput.jsx
@@ -1,36 +1,32 @@
 import React, { forwardRef } from 'react';
 import { Input } from "@chakra-ui/react";

-// export const formatCurrency = (value) => {
-//   if (!value) return '';
-//   const [integer, decimal] = value.split('.');
-//   const formattedInteger = integer.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-//   return decimal ? `${formattedInteger}.${decimal}` : formattedInteger;
-// };
-
 export const formatCurrency = (value) => {
-  if (value === undefined || value === null) return ''; // Handle undefined or null values
-  const [integer, decimal] = String(value).split('.'); // Convert value to string before splitting
+  if (value === undefined || value === null) return ''; 
+  const [integer, decimal] = String(value).split('.'); 
  const formattedInteger = integer.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-  return decimal ? `${formattedInteger}.${decimal}` : formattedInteger;
+  return decimal !== undefined ? `${formattedInteger}.${decimal}` : formattedInteger;
 };
 const CurrencyInput = forwardRef(({ value, onChange, ...props }, ref) => {

-  
-
  const handleChange = (event) => {
    let { value } = event?.target;

    // Remove non-numeric characters except decimal point
-    value = value?.replace(/[^0-9.]/g, '');
+    value = value.replace(/[^0-9.]/g, '');

    // Ensure only one decimal point
-    const parts = value?.split('.');
+    const parts = value.split('.');
    if (parts.length > 2) {
-      value = parts[0] + '.' + parts?.slice(1)?.join('');
+      value = parts[0] + '.' + parts.slice(1).join('');
    }

-    onChange(value); // Pass the raw value to parent or use it directly
+    // Restrict to two decimal places
+    if (parts[1]?.length > 2) {
+      value = parts[0] + '.' + parts[1].slice(0, 2);
+    }
+
+    onChange(value); // Pass the raw value to parent
  };

  return (
@@ -38,6 +34,7 @@ const CurrencyInput = forwardRef(({ value, onChange, ...props }, ref) => {
      {...props}
      ref={ref}  // Forward ref here
      type="text"
+      focusBorderColor="forestGreen.300"
      value={formatCurrency(value)}
      onChange={handleChange}
    />
@@ -45,3 +42,50 @@ const CurrencyInput = forwardRef(({ value, onChange, ...props }, ref) => {
 });

 export default CurrencyInput;
+
+
+
+
+// import React, { forwardRef } from 'react';
+// import { Input } from "@chakra-ui/react";
+
+// export const formatCurrency = (value) => {
+//   if (value === undefined || value === null) return ''; // Handle undefined or null values
+//   const [integer, decimal] = String(value).split('.'); // Convert value to string before splitting
+//   const formattedInteger = integer.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+//   return decimal ? `${formattedInteger}.${decimal}` : formattedInteger;
+// };
+
+// const CurrencyInput = forwardRef(({ value, onChange, ...props }, ref) => {
+
+//   const handleChange = (event) => {
+//     let { value } = event?.target;
+
+//     // Remove non-numeric characters except decimal point
+//     value = value?.replace(/[^0-9.]/g, '');
+
+//     // Ensure only one decimal point and restrict to two decimal places
+//     const parts = value?.split('.');
+//     if (parts.length > 2) {
+//       value = parts[0] + '.' + parts?.slice(1)?.join('');
+//     }
+
+//     if (parts[1]?.length > 2) {
+//       value = parts[0] + '.' + parts[1]?.slice(0, 2);
+//     }
+
+//     onChange(value); // Pass the raw value to parent or use it directly
+//   };
+
+//   return (
+//     <Input
+//       {...props}
+//       ref={ref}  // Forward ref here
+//       type="text"
+//       value={formatCurrency(value)}
+//       onChange={handleChange}
+//     />
+//   );
+// });
+
+// export default CurrencyInput;
--- a/src/Components/DataTable/DataTable.jsx
+++ b/src/Components/DataTable/DataTable.jsx
@@ -65,7 +65,7 @@ const DataTable = ({
              {/* <Box mb={2}>{caption}</Box> */}
              <Table size="sm" {...provided.droppableProps} ref={provided.innerRef}>
                <TableCaption p={0}>{caption}</TableCaption>
-                <Thead backgroundColor="gray.50">
+                <Thead backgroundColor="forestGreen.100">
                  <Tr>
                    {tableHeadRow.map((heading, index) => (
                      <Th
@@ -97,7 +97,7 @@ const DataTable = ({
                              bg: "blue.50",
                              cursor: "grab",
                            }}
-                            bg={snapshot.isDragging ? "blue.100" : "white"}
+                            bg={snapshot.isDragging ? "blue.100" : index % 2 ? "white" : "forestGreen.50"}
                            boxShadow={snapshot.isDragging ? "0 0 1em rgba(0, 0, 0, 0.2)" : "none"}
                            
                          >
@@ -121,7 +121,7 @@ const DataTable = ({
                        )}
                      </Draggable>
                    ) : (
-                      <Tr key={index}>
+                      <Tr bg={index % 2 ? "forestGreen.50" : "white"} key={index}>
                        {tableHeadRow.map((heading, i) => (
                          <Td
                            textAlign={tableHeadRow.length - 1 === i || centered ? "center" : "left"}
--- a/src/Components/DataTable/NormalTable.jsx
+++ b/src/Components/DataTable/NormalTable.jsx
@@ -9,79 +9,171 @@ import {
  Tr,
  Skeleton,
  TableCaption,
-  Tfoot,
+  Checkbox,
+  Radio,
 } from "@chakra-ui/react";
 import EmptySearchList from "../EmptySearchList";
 import { TABLE_PAGINATION } from "../../Constants/Paginations";

-const DataTable = ({
+const NormalTable = ({
  data,
  isLoading,
  tableHeadRow,
  emptyMessage,
  centered,
-}) => {
+  total,
+  showRadioButton, // Prop for showing the checkboxes
+  selectedRadio,
+  setSelectedRadio, // State for managing selected checkboxes

-  console.log(data);
-  
+  handleCheckboxChange: radioChange,
+  radio
+}) => {
  const columnWidth =
    data && data[0]
      ? `${(100 / Object.keys(data[0]).length).toFixed(2)}%`
      : "auto";
+
+  // Toggle checkbox selection for individual rows
+  // const handleCheckboxChange = (value) => {
+  //   setSelectedRadio((prev) => {
+  //     if (prev.includes(value)) {
+  //       // Remove if already selected
+  //       return prev.filter((id) => id !== value);
+  //     } else {
+  //       // Add to selected
+  //       return [...prev, value];
+  //     }
+  //   });
+  // };
+
+  // Handle "Check All" checkbox
+  const handleCheckAllChange = () => {
+    if (selectedRadio.length === data.length) {
+      setSelectedRadio([]); // Deselect all if already selected
+    } else {
+      const allIds = data.map((item) => item.id);
+      setSelectedRadio(allIds); // Select all
+    }
+  };
+
+
+
+  const handleCheckboxChange = (value) => {
+    if (radio) {
+      // If radio is true, select only one option
+      setSelectedRadio([value]); // Set the selected radio to this value only
+    } else {
+      // Handle multiple selection for checkboxes
+      setSelectedRadio((prev) => {
+        if (prev.includes(value)) {
+          // Remove if already selected
+          return prev.filter((id) => id !== value);
+        } else {
+          // Add to selected
+          return [...prev, value];
+        }
+      });
+    }
+  };
+
  return (
-    <TableContainer overflowX={"hidden"} className="h-auto mb-3 w-100">
+    <TableContainer overflowX={"auto"} className="h-auto w-100 table-scroll">
      {data?.length === 0 ? (
        <EmptySearchList message={emptyMessage} />
      ) : (
        <Table size="sm">
-          <TableCaption>Tanami v1.0.0</TableCaption>
-          <Thead backgroundColor="gray.50">
+          <TableCaption p={total ? 0 : null}>
+            {total ? total : "Tanami v1.0.0"}
+          </TableCaption>
+          <Thead bg="forestGreen.100">
            <Tr>
+              {showRadioButton &&(
+                <Th
+                  color={"purple.900"}
+                  textAlign={"center"}
+                  p={4}
+                  whiteSpace="normal"
+                  wordBreak="normal"
+                  overflowWrap="normal"
+                  textTransform={"none"}
+                >
+                 {radio? "Select":<Checkbox
+                  isChecked={selectedRadio?.length === data?.length}
+                  onChange={handleCheckAllChange}
+                  colorScheme="forestGreen"
+
+                />}
+                </Th>
+              )}
              {tableHeadRow.map((heading, index) => (
                <Th
+                  color={"purple.900"}
                  textAlign={
                    tableHeadRow.length - 1 === index || centered
                      ? "center"
                      : "left"
                  }
                  key={index}
-                  p={3}
-                  width="20px" // Adjust width as needed
-                  color={"#004118"}
-                  whiteSpace="normal" // Allow text to wrap
-                  wordBreak="normal" // Ensure long words break properly
-                  overflowWrap="normal" // Break long words if necessary
-                  textTransform={'none'}
-                  
+                  p={4}
+                  whiteSpace="normal"
+                  wordBreak="normal"
+                  overflowWrap="normal"
+                  textTransform={"none"}
                >
                  {isLoading ? <Skeleton height="20px" /> : heading}
-                  {/* {heading} */}
                </Th>
              ))}
            </Tr>
          </Thead>
          <Tbody className="web-text-small">
            {isLoading
-              ? Array.from({ length: TABLE_PAGINATION?.size }).map((_, index) => (
-                  <Tr key={index}>
-                    {tableHeadRow.map((_, i) => (
-                      <Td
-                      width={'fit-content'}
-                        key={i}
-                        style={{
-                          whiteSpace: "nowrap",
-                          textOverflow: "ellipsis",
-                        }}
-                        className="web-text-small"
-                        w={columnWidth}
-                      >
-                        <Skeleton height="20px" mb={1} mt={1} />
-                      </Td>
-                    ))}
-                  </Tr>
-                ))
+              ? Array.from({ length: TABLE_PAGINATION?.size }).map(
+                  (_, index) => (
+                    <Tr
+                      bg={index % 2 === 0 ? "white" : "forestGreen.50"}
+                      key={index}
+                    >
+                      {tableHeadRow.map((_, i) => (
+                        <Td
+                          key={i}
+                          style={{
+                            whiteSpace: "nowrap",
+                            textOverflow: "ellipsis",
+                          }}
+                          className="web-text-small"
+                        >
+                          <Skeleton height="20px" mb={1} mt={1} />
+                        </Td>
+                      ))}
+                    </Tr>
+                  )
+                )
              : data?.map((item, index) => (
-                  <Tr key={index}>
+                  <Tr
+                    cursor={"pointer"}
+                    transition={"0.2s all"}
+                    maxH={8}
+                    bg={index % 2 === 0 ? "" : "forestGreen.50"}
+                    key={index}
+                  >
+                    {showRadioButton && (
+                      <Td textAlign={"center"}>
+                        {radio ? <Radio
+                          bg={"#fff"}
+                          colorScheme="forestGreen"
+                          value={item.id}
+                          isChecked={selectedRadio.includes(item.id)}
+                          onChange={() => radioChange(item.id, item)}
+                        />:<Checkbox
+                          bg={"#fff"}
+                          colorScheme="forestGreen"
+                          value={item.id}
+                          isChecked={selectedRadio.includes(item.id)}
+                          onChange={() => handleCheckboxChange(item.id)}
+                        />}
+                      </Td>
+                    )}
                    {tableHeadRow.map((heading, i) => (
                      <Td
                        textAlign={
@@ -91,6 +183,7 @@ const DataTable = ({
                        }
                        color={"gray.600"}
                        key={i}
+                        fontWeight={500}
                        style={{
                          whiteSpace: "nowrap",
                          textOverflow: "ellipsis",
@@ -109,4 +202,4 @@ const DataTable = ({
  );
 };

-export default DataTable;
+export default NormalTable;
--- a/src/Components/FormField.jsx
+++ b/src/Components/FormField.jsx
@@ -22,12 +22,14 @@ import {
  Td,
  InputGroup,
  InputRightAddon,
+  HStack,
 } from "@chakra-ui/react";
 import { Controller } from "react-hook-form";
 import { TiWarning } from "react-icons/ti";
 import { motion } from "framer-motion";
 import { AddIcon, CloseIcon } from "@chakra-ui/icons";
 import CurrencyInput from "./CurrencyInput";
+import ShariahLogo from "../../src/assets/shariah-icon.png"

 const today = new Date().toISOString().split("T")[0];

@@ -69,12 +71,13 @@ const FormField = ({
  align,
  maxLength,
  dateValue,
+  closingDate,
  ...props
 }) => (
  <FormControl
    w={width ? width : "49%"}
    isInvalid={errors[name]}
-    isRequired={type === "date" ? false: isRequired}
+    isRequired={type === "date" ? true: isRequired}
    mb={2}
  >
    <FormLabel textAlign={"left"} fontSize={"xs"} color={"gray.600"}>
@@ -84,6 +87,7 @@ const FormField = ({
      control={control}
      name={name}
      defaultValue={value}
+
      rules={rules}
      render={({ field }) => {
        if (type === "select") {
@@ -404,8 +408,7 @@ const FormField = ({
                          w={6}
                          h={6}
                          src={
-                            import.meta.env.VITE_IMAGE_URL +
-                            item?.logo
+                            import.meta.env.VITE_IMAGE_URL+item?.logo
                          }
                        />
                        {item.country === "United Arab Emirates"
@@ -465,7 +468,7 @@ const FormField = ({
        } else if(type === 'date'){
          return (
            <Input
-            position={'relative'}
+              position={'relative'}
              bg={"#F5F8F6"}
              focusBorderColor="forestGreen.300"
              size={"sm"}
@@ -477,12 +480,12 @@ const FormField = ({
              placeholder={placeHolder ? placeHolder : label}
              textAlign={arabic  ? "right" : align ? align : "left"}
              _placeholder={{ fontSize: "sm" }}
-              min={type === "date" ? today : undefined}
-              maxLength={maxLength}
+              // min={type === "date" ? today : undefined}
+              // maxLength={maxLength}
              // defaultValue={type === "date" && "2023-07-26" : undefined}
              // defaultValue={value}
              // value={dateValue}
-              
+              min={closingDate ? new Date().toISOString().split("T")[0] : undefined}
            />
          );
          
@@ -506,7 +509,21 @@ const FormField = ({
              // value={dateValue}
              
            />
-          );} else{
+          );}
+          else if(type === 'checkBox'){
+            return (
+              <HStack bg={"#F5F8F6"} p={"3px"} rounded={"2px"} border={'1px solid #E1E7EF'} justifyContent={"space-between"} mt={3}>
+                {/* <Image w={"38px"} aspectRatio={"1/1"} src={ShariahLogo} /> */}
+                <Checkbox  
+                // isChecked={value}
+                isChecked={field.value}
+                 ps={1}
+                {...field}
+                {...props} size='md' colorScheme='forestGreen'>
+                  <Text as={"span"} fontSize={"sm"}>Is This Sharia Compliant</Text>
+                </Checkbox>
+              </HStack>
+            );} else{
          return (
            <Input
              bg={"#F5F8F6"}
--- a/src/Components/FormInputMain.jsx
+++ b/src/Components/FormInputMain.jsx
@@ -60,7 +60,8 @@ const FormInputMain = ({
                    handleInputChange,
                    align,
                    maxLength,
-                    dateValue
+                    dateValue,
+                    closingDate
                  },
                  key
                ) => (
@@ -89,6 +90,7 @@ const FormInputMain = ({
                    align={align}
                    maxLength={maxLength}
                    dateValue={dateValue}
+                    closingDate={closingDate}
                  />
                )
              )}
--- a/src/Components/FormInputView.jsx
+++ b/src/Components/FormInputView.jsx
@@ -15,6 +15,7 @@ import {
  Th,
  Thead,
  Tr,
+  Checkbox, // Import Checkbox from Chakra UI
 } from "@chakra-ui/react";
 import React from "react";

@@ -34,8 +35,13 @@ const FormInputView = ({
            <Heading as="h6" size="xs" mt={index === 0 ? 3 : 4}>
              {section}
            </Heading>
-            {/* <Box display={"flex"} gap={0}> */}
-            <Box key={index} width={"100%"} display={"flex"} flexWrap={"wrap"} gap={4}>
+            <Box
+              key={index}
+              width={"100%"}
+              display={"flex"}
+              flexWrap={"wrap"}
+              gap={4}
+            >
              {fields.map(
                ({ value, label, id, width, btn, arabic, type, align }, key) =>
                  type === "table" ? (
@@ -62,8 +68,7 @@ const FormInputView = ({
                                  w={6}
                                  h={6}
                                  src={
-                                    " https://tanami.betadelivery.com/" +
-                                    item?.logo
+                                    import.meta.env.VITE_IMAGE_URL + item?.logo
                                  }
                                />
                                {item.country === "United Arab Emirates"
@@ -94,7 +99,6 @@ const FormInputView = ({
                                  isRequired={true}
                                  bg={"#F5F8F6"}
                                  focusBorderColor="forestGreen.300"
-                                  // border="1px solid #000"
                                  size={"sm"}
                                  fontSize={"sm"}
                                  rounded={"sm"}
@@ -102,7 +106,6 @@ const FormInputView = ({
                                  value={item.value}
                                  textAlign={"right"}
                                  placeholder={"00.00"}
-                                  // color={"#000"}
                                  color={"#1A202C"}
                                  fontWeight={500}
                                  border={"1px solid #e2e8f0"}
@@ -120,7 +123,30 @@ const FormInputView = ({
                        </Tr>
                      </Tbody>
                    </Table>
+                  ) : type === "checkBox" ? (
+                    // <Box key={id} w={!width ? "49%" : width}>
+
+                    <InputGroup
+                      display={"flex"}
+                      flexDirection={"column"}
+                      width={"32%"}
+                      size="sm"
+                    >
+                      <FormLabel key={id} color={"gray.500"} fontSize={"xs"}>
+                        {label}
+                      </FormLabel>
+                      <Checkbox
+                        isChecked={value}
+                        colorScheme="green"
+                        size="md"
+                        fontSize="sm"
+                        fontWeight="medium"
+                      >
+                        Is this shariah compliant
+                      </Checkbox>
+                    </InputGroup>
                  ) : (
+                    // </Box>
                    <Box key={id} w={!width ? "49%" : width}>
                      <FormLabel key={id} color={"gray.500"} fontSize={"xs"}>
                        {label}
@@ -141,7 +167,6 @@ const FormInputView = ({
                  )
              )}
            </Box>
-            {/* </Box> */}
            {index <
              Object.entries(groupedFields, groupedFieldsTwo).length - 1 && (
              <Divider />
--- a/src/Components/HeaderMain.jsx
+++ b/src/Components/HeaderMain.jsx
@@ -13,16 +13,18 @@ import {
  Portal,
  Text,
  useColorMode,
+  useDisclosure,
 } from "@chakra-ui/react";
-import React, { useContext } from "react";
+import React, { useContext, useRef } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { IoMdDownload } from "react-icons/io";
 import * as XLSX from "xlsx";
 import profile from "../assets/proavatar.webp";
 import GlobalStateContext from "../Contexts/GlobalStateContext";
 import { MdOutlineDarkMode, MdOutlineLightMode } from "react-icons/md";
-import logoMini from "../assets/propic.png"
+import logoMini from "../assets/propic.png";
 import { BsBack } from "react-icons/bs";
+import ChangePassword from "../Pages/ChangePassword";

 const HeaderMain = ({
  link,
@@ -31,10 +33,12 @@ const HeaderMain = ({
  icon,
  logOutHandler,
  slideDirecttion,
+  data,
 }) => {
-  const navigate = useNavigate()
+  const navigate = useNavigate();
  const { colorMode, toggleColorMode } = useContext(GlobalStateContext);
-
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const firstField = useRef();

  return (
    <Box
@@ -46,32 +50,31 @@ const HeaderMain = ({
      zIndex={999}
    >
      <HStack>
-      {/* <ArrowBackIcon onClick={()=>navigate(-1)} /> */}
-      <Text
-        as={"span"}
-        fontWeight={"500"}
-        // color={"forestGreen.500"}
-        className="fs-6 "
-      >
-        {/* <icon /> */}
-        {title}
-      </Text>
+        {/* <ArrowBackIcon onClick={()=>navigate(-1)} /> */}
+        <Text
+          as={"span"}
+          fontWeight={"500"}
+          // color={"forestGreen.500"}
+          className="fs-6 "
+        >
+          {/* <icon /> */}
+          {title}
+        </Text>
      </HStack>

-      
      <Box me={4} gap={2} className="d-flex justify-content-center ">
        <Popover placement="bottom">
          <Portal>
            <PopoverContent maxW="200px" className="">
              <PopoverArrow />
-              <PopoverBody className="web-text-medium pointer link">
+              <PopoverBody onClick={()=> navigate('/profile')} className="web-text-medium pointer link">
                Profile
              </PopoverBody>
-              <Link to={"/help-and-support"}>
+              <Box onClick={onOpen}>
                <PopoverBody className="web-text-medium pointer ">
-                  Help & Support
+                  Change Password
                </PopoverBody>
-              </Link>
+              </Box>
              <PopoverFooter
                onClick={logOutHandler}
                className="web-text-medium pointer link"
@@ -90,7 +93,7 @@ const HeaderMain = ({
                boxSize={37}
                name="Tanami M"
                src={logoMini}
-                bg={'green.100'}
+                bg={"green.100"}
                // p={1}
              />
              <Box
@@ -100,10 +103,10 @@ const HeaderMain = ({
                className=" overflow-hidden ms-3  flex-column "
              >
                <Text as={"span"} className="web-text-small">
-                  Hello, Tanami admin
+                  Hello, {data?.data?.firstName} {data?.data?.lastName}
                </Text>
                <Text as={"span"} className="web-text-xsmall">
-                  admin@tanami.com
+                  {data?.data?.emailAddress}
                </Text>
              </Box>
            </Box>
@@ -113,6 +116,11 @@ const HeaderMain = ({
        {/* <Box onClick={() => toggleColorMode()} as="span" p={2} rounded={'lg'} className="link pointer">
          {colorMode === "light"?  <MdOutlineDarkMode /> :<MdOutlineLightMode />}
        </Box> */}
+        <ChangePassword
+          isOpen={isOpen}
+          onClose={onClose}
+          firstField={firstField}
+        />
      </Box>
    </Box>
  );
--- a/src/Components/Loaders/FullscreenLoaders.jsx
+++ b/src/Components/Loaders/FullscreenLoaders.jsx
@@ -1,18 +1,19 @@
 import { Box, Spinner, Text } from "@chakra-ui/react";
 import React from "react";
-import './FullscreenLoaders.css'
+import "./FullscreenLoaders.css";

-const FullscreenLoaders = ({height}) => {
+const FullscreenLoaders = ({ height }) => {
  return (
    <Box
      display={"flex"}
      justifyContent={"center"}
-      flexDirection={'column'}
+      flexDirection={"column"}
      alignItems={"center"}
      w={"100%"}
-      h={height ? height: "100vh"}
+      h={height ? height : "100vh"}
      gap={4}
-    ><div className="dot-spinner">
+    >
+      {/* <div className="dot-spinner">
    <div className="dot-spinner__dot"></div>
    <div className="dot-spinner__dot"></div>
    <div className="dot-spinner__dot"></div>
@@ -21,8 +22,17 @@ const FullscreenLoaders = ({height}) => {
    <div className="dot-spinner__dot"></div>
    <div className="dot-spinner__dot"></div>
    <div className="dot-spinner__dot"></div>
-</div>
-  {/* <Text color='#004717' fontSize={'md'} fontWeight={500}>Loading...</Text> */}
+</div> */}
+      {/* <Text color='#004717' fontSize={'md'} fontWeight={500}>Loading...</Text> */}
+      {/* <div className="spinner-grow" style={{backgroundColor:"#004118"}} role="status" /> */}
+
+      <Spinner
+        thickness="4px"
+        speed="0.65s"
+        emptyColor="#fff"
+        color="#004118"
+        size="lg"
+      />
    </Box>
  );
 };
--- a/src/Components/Loaders/Loader01.jsx
+++ b/src/Components/Loaders/Loader01.jsx
@@ -1,19 +1,31 @@
 import React from "react";
 import './FullscreenLoaders.css'
+import { Spinner } from "@chakra-ui/react";

 const Loader01 = () => {
  return (
+    // <div className="dot-spinner">
+    //   <div className="dot-spinner__dot"></div>
+    //   <div className="dot-spinner__dot"></div>
+    //   <div className="dot-spinner__dot"></div>
+    //   <div className="dot-spinner__dot"></div>
+    //   <div className="dot-spinner__dot"></div>
+    //   <div className="dot-spinner__dot"></div>
+    //   <div className="dot-spinner__dot"></div>
+    //   <div className="dot-spinner__dot"></div>
+    // </div>

-    <div className="dot-spinner">
-      <div className="dot-spinner__dot"></div>
-      <div className="dot-spinner__dot"></div>
-      <div className="dot-spinner__dot"></div>
-      <div className="dot-spinner__dot"></div>
-      <div className="dot-spinner__dot"></div>
-      <div className="dot-spinner__dot"></div>
-      <div className="dot-spinner__dot"></div>
-      <div className="dot-spinner__dot"></div>
-    </div>
+    // <div className="dot-spinner">
+    //   <div className="dot-spinner__dot"></div>
+    //   <div className="dot-spinner__dot"></div>
+    //   <div className="dot-spinner__dot"></div>
+    //   <div className="dot-spinner__dot"></div>
+    //   <div className="dot-spinner__dot"></div>
+    //   <div className="dot-spinner__dot"></div>
+    //   <div className="dot-spinner__dot"></div>
+    //   <div className="dot-spinner__dot"></div>
+    // </div>
+    <Spinner color='green.900' />
  );
 };

--- a/src/Components/MobileView.jsx
+++ b/src/Components/MobileView.jsx
@@ -27,7 +27,7 @@ import { BiWifi } from "react-icons/bi";
 import { useGetIOByIdQuery } from "../Services/io.service";
 import { useNavigate, useParams } from "react-router-dom";
 import FullscreenLoaders from "./Loaders/FullscreenLoaders";
-import { formatDate } from "../Constants/Constants";
+import { calculatePercentage, formatDate } from "../Constants/Constants";
 import { BsFileText } from "react-icons/bs";

 const MobileView = ({ isOpen, onClose, finalRef, actionId }) => {
@@ -63,6 +63,13 @@ const MobileView = ({ isOpen, onClose, finalRef, actionId }) => {
    });
  };

+  console.log(
+    calculatePercentage(
+      IObyID?.data?.totalAmtInvestmentInUSD,
+      IObyID?.data?.goalAmount
+    )
+  );
+
  return (
    <Modal
      display={"flex"}
@@ -89,12 +96,12 @@ const MobileView = ({ isOpen, onClose, finalRef, actionId }) => {
            w={"320px"}
            sx={{
              "@media (max-width: 2024px)": {
-                  height:"695px",
-                  width:"360px",
+                height: "695px",
+                width: "360px",
              },
              "@media (max-width: 1440px)": {
-                  height:"600px",
-                  width:"320px",
+                height: "600px",
+                width: "320px",
              },
            }}
          >
@@ -117,16 +124,12 @@ const MobileView = ({ isOpen, onClose, finalRef, actionId }) => {
            >
              {IObyIDisLoading ? (
                <Box
-                display={"flex"}
-                justifyContent={"center"}
-                alignItems={"center"}
-                h={"100%"}
+                  display={"flex"}
+                  justifyContent={"center"}
+                  alignItems={"center"}
+                  h={"100%"}
                >
-                  <Spinner 
-                  thickness='3px'
-                  color='purple.900'
-                  size='lg'
-                   />
+                  <Spinner thickness="3px" color="purple.900" size="lg" />
                </Box>
              ) : (
                <>
@@ -174,10 +177,10 @@ const MobileView = ({ isOpen, onClose, finalRef, actionId }) => {
                    borderBottomRightRadius={"23px"}
                    sx={{
                      "@media (max-width: 2024px)": {
-                          height:"575px",
+                        height: "575px",
                      },
                      "@media (max-width: 1440px)": {
-                        height:"483px",
+                        height: "483px",
                      },
                    }}
                  >
@@ -225,7 +228,7 @@ const MobileView = ({ isOpen, onClose, finalRef, actionId }) => {
                            h={"130px"}
                            w={"100%"}
                            src={
-                              "https://tanami.betadelivery.com/" +
+                             import.meta.env.VITE_IMAGE_URL+
                              artifactsImage[0]?.artifactPathName
                            }
                          />
@@ -246,7 +249,10 @@ const MobileView = ({ isOpen, onClose, finalRef, actionId }) => {
                        <Progress
                          colorScheme="green"
                          size="sm"
-                          value={20}
+                          value={calculatePercentage(
+                            IObyID?.data?.totalAmtInvestmentInUSD,
+                            IObyID?.data?.goalAmount
+                          )}
                          borderRadius={"3px"}
                        />
                        <Text
@@ -255,7 +261,16 @@ const MobileView = ({ isOpen, onClose, finalRef, actionId }) => {
                          fontWeight={600}
                          mb={0}
                        >
-                          0.0% funded
+                          {parseFloat(
+                            calculatePercentage(
+                              IObyID?.data?.totalAmtInvestmentInUSD,
+                              IObyID?.data?.goalAmount
+                            ) || 0
+                          ).toLocaleString(undefined, {
+                            minimumFractionDigits: 2,
+                            maximumFractionDigits: 2,
+                          })}
+                          % funded
                        </Text>
                        <Text
                          fontSize={"xs"}
@@ -334,25 +349,28 @@ const MobileView = ({ isOpen, onClose, finalRef, actionId }) => {
                      <Heading fontSize="14px" fontWeight={600}>
                        Key Merits
                      </Heading>
-                      <Box display={"flex"} alignItems={"center"}>
-                        {keyMerits?.[0]?.icon?.iconFilePath && (
-                          <Image
-                            rounded={"md"}
-                            display={"flex"}
-                            p={1}
-                            justifyContent={"center"}
-                            alignItems={"center"}
-                            src={
-                              "https://tanami.betadelivery.com/" +
-                              keyMerits[0].icon.iconFilePath
-                            }
-                            w={8}
-                            h={8}
-                          />
-                        )}
-                        <Text fontSize={"xs"} mb={0}>
-                          {IObyID?.data?.keyMerits[0]?.meritsDescription}
-                        </Text>
+                      <Box>
+                        {keyMerits &&
+                          keyMerits.map((item, index) => (
+                            <Box display={"flex"} alignItems={"center"}>
+                              <Image
+                                rounded={"md"}
+                                display={"flex"}
+                                p={1}
+                                justifyContent={"center"}
+                                alignItems={"center"}
+                                src={
+                                 import.meta.env.VITE_IMAGE_URL+
+                                  item?.icon.iconFilePath
+                                }
+                                w={8}
+                                h={8}
+                              />
+                              <Text fontSize={"xs"} mb={0}>
+                                {item?.meritsDescription}
+                              </Text>
+                            </Box>
+                          ))}
                      </Box>
                    </Box>
                    <Box
@@ -413,7 +431,7 @@ const MobileView = ({ isOpen, onClose, finalRef, actionId }) => {
                      >
                        <source
                          src={
-                            IObyID?.data?.artifactsVideo?.[0]
+                            import.meta.env.VITE_IMAGE_URL+IObyID?.data?.artifactsVideo?.[0]
                              ?.artifactStreamingURL
                          }
                          type="video/mp4"
--- a/src/Components/Pagination.jsx
+++ b/src/Components/Pagination.jsx
@@ -1,11 +1,17 @@
-import React, { useState } from 'react';
-import { Select, HStack, Text, Box, IconButton } from '@chakra-ui/react';
-import { ChevronLeftIcon, ChevronRightIcon } from '@chakra-ui/icons';
+import React, { useState } from "react";
+import { Select, HStack, Text, Box, IconButton } from "@chakra-ui/react";
+import { ChevronLeftIcon, ChevronRightIcon } from "@chakra-ui/icons";

-const Pagination = ({ pageSize, setPageSize, totalItems,isLoading, setCurrentPage, currentPage }) => {
+const Pagination = ({
+  pageSize,
+  setPageSize,
+  totalItems,
+  isLoading,
+  setCurrentPage,
+  currentPage,
+}) => {
  // const [] = useState(itemsPerPageOptions[0]);

-
  const totalPages = Math.ceil(totalItems / pageSize);

  const handlePageSizeChange = (e) => {
@@ -35,45 +41,54 @@ const Pagination = ({ pageSize, setPageSize, totalItems,isLoading, setCurrentPag
      {/* <Text className='web-text-small'>Tanami v0.1</Text> */}

      <HStack>
-      <Select
-        
-        className="pointer web-text-small"
-        width={"90px"}
-        rounded="sm"
-        size="sm"
-        value={pageSize}
-        onChange={handlePageSizeChange}
-      >
-        {[ 15, 20, 30]?.map((size) => (
-          <option key={size} value={size}>
-            {size}
-          </option>
-        ))}
-      </Select>
+        <Select
+          className="pointer web-text-small"
+          width={"90px"}
+          rounded="sm"
+          size="sm"
+          value={pageSize}
+          onChange={handlePageSizeChange}
+        >
+          {[15, 20, 30]?.map((size) => (
+            <option key={size} value={size}>
+              {size}
+            </option>
+          ))}
+        </Select>
        <IconButton
-        mt={1}
-          size={'sm'}
-          rounded="sm" 
+          mt={1}
+          size={"sm"}
+          rounded="sm"
          icon={<ChevronLeftIcon />}
          onClick={paginationPrev}
          className="link pointer"
          isDisabled={currentPage === 1}
+          aria-label="Previous Page"
        />
-        <Text w={"81px"} display={'flex'} justifyContent={'center'} className="web-text-medium" as={"span"}>
-          {isLoading ? "0": displayRange?.start} - {isLoading ? "00" :displayRange?.end} of {isLoading ? "00":totalItems}
+        <Text
+          w={"81px"}
+          display={"flex"}
+          justifyContent={"center"}
+          className="web-text-medium"
+          as={"span"}
+        >
+          {isLoading ? "0" : displayRange?.start} -{" "}
+          {isLoading ? "00" : displayRange?.end} of{" "}
+          {isLoading ? "00" : totalItems}
        </Text>
        <IconButton
-        mt={1}
+          mt={1}
          icon={<ChevronRightIcon />}
-          size={'sm'}
-          rounded="sm" 
+          size={"sm"}
+          rounded="sm"
          onClick={paginationNext}
          className="link pointer"
          isDisabled={currentPage === totalPages}
+           aria-label="Next Page"
        />
      </HStack>
    </HStack>
  );
 };

-export default Pagination;
+export default Pagination;
--- a/src/Components/RoleSwitchButton.jsx
+++ b/src/Components/RoleSwitchButton.jsx
@@ -0,0 +1,66 @@
+import { Box, Text } from "@chakra-ui/react";
+import React, { useRef } from "react";
+import audioClick from "../assets/click-151673.mp3";
+
+const RoleSwitchButton = ({ isSwitchOn, setIsSwitchOn }) => {
+
+  // const [isSwitchOn, setIsSwitchOn] = useState(false);
+
+//   const audio = useRef();
+
+  const switchOnChangeHandle = () => {
+    setIsSwitchOn(!isSwitchOn);
+    // if (audio.current) {
+    //   audio.current.play();
+    // }
+  };
+
+  return (
+    <Box display="flex" alignItems="center">
+      <Box
+        as="button"
+        display="flex"
+        justifyContent="normal"
+        alignItems="center"
+        // justifyContent={isSwitchOn ? "flex-end" : "flex-start"}
+        width="85px"
+        height="24px"
+        borderRadius="20px"
+        backgroundColor={isSwitchOn ? "#00ffcc" : "#b3ff99"}
+        onClick={switchOnChangeHandle}
+        position="relative"
+        fontSize="12px"
+        fontWeight="100"
+        transition="background-color 0.2s"
+        _before={{
+          content: '""',
+          position: "absolute",
+          width: "20px",
+          height: "20px",
+          borderRadius: "50%",
+          backgroundColor: "#fff",
+          boxShadow: "0 2px 4px rgba(0, 0, 0, 0.2)",
+          transform: isSwitchOn ? "translateX(61px)" : "translateX(0)",
+          transition: "transform 0.2s",
+          left:'2px',
+          top:'2px'
+        }}
+      >
+        <Text
+          fontWeight="500"
+          zIndex={1}
+          position="absolute"
+          mb={0}
+          color={isSwitchOn ? "#000" : "#000"}
+          left={isSwitchOn ? "10px" : "auto"}
+          right={isSwitchOn ? "auto" : "10px"}
+        >
+          {isSwitchOn ? "Maker" : "Checker"}
+        </Text>
+      </Box>
+      {/* <audio ref={audio} src={audioClick} /> */}
+    </Box>
+  );
+};
+
+export default RoleSwitchButton;
--- a/src/Components/ToastBox.jsx
+++ b/src/Components/ToastBox.jsx
@@ -1,6 +1,7 @@
 import { CheckCircleIcon, WarningIcon } from "@chakra-ui/icons";
 import { Box, Text } from "@chakra-ui/react";
 import React from "react";
+import { PiWarningBold } from "react-icons/pi";

 const ToastBox = ({ message, status }) => {
  return (
@@ -9,10 +10,10 @@ const ToastBox = ({ message, status }) => {
      rounded={"sm"}
      className="web-text-large d-flex gap-2 align-items-center"
      p={3}
-      bg={status === "error" ? "red.500" : status === "warn" ?  "blue.500" : "green.500"}
+      bg={status === "error" ? "red.500" : status === "warn" ? "yellow.500" : status === "info" ?  "blue.500" : "green.500"}
    >

-      {status === "error" || status === "warn" ? <WarningIcon/> : <CheckCircleIcon /> }
+      {status === "error" || status === "warn" ? <PiWarningBold/> : status === "info" ?  <WarningIcon/>  : <CheckCircleIcon /> }
      <Text as={"span"}>{message}</Text>
    </Box>
  );
--- a/src/Constants/Constants.js
+++ b/src/Constants/Constants.js
@@ -1,8 +1,12 @@

 import dns from "node:dns"
+import * as XLSX from 'xlsx';
+import CryptoJS from "crypto-js";


-
+export const generateSerialNumber = (index, currentPage, pageSize) => {
+  return (currentPage - 1) * pageSize + (index + 1);
+};

 export function getTomorrowDate() {
  const today = new Date();
@@ -53,10 +57,14 @@ export function removeTrailingZeros(value) {
  const remainingMinutes = minutes % 60;
  const remainingSeconds = seconds % 60;

-  return `${remainingDays === 0 ? "": remainingDays+"d"}  ${remainingHours === 0 ? "": remainingHours+"h"} ${remainingMinutes}m `;
+  return `${remainingDays === 0 ? "": remainingDays+"d"}  ${remainingHours === 0 ? "": remainingHours+"h"} ${remainingMinutes}m ${remainingSeconds}s `;
 }


+export function bytesToMB(bytes) {
+  return (bytes / (1024 * 1024)).toFixed(2); // Convert bytes to MB and limit to 2 decimal places
+}
+

 export function startCountdown(utcDateString) {
  // Function to update the countdown
@@ -136,4 +144,93 @@ export function formatDate(dateString) {
  const options = { year: 'numeric', month: 'short', day: 'numeric' };
  const date = new Date(dateString);
  return date.toLocaleDateString('en-US', options);
-}
+}
+
+export function calculatePercentage(part, total) {
+  if (total === 0) {
+    return 0; // To avoid division by zero
+  }
+  return (part / total) * 100;
+}
+
+
+
+const getNestedValue = (obj, key) => {
+  return key.split('.').reduce((value, part) => {
+    return value && value[part] ? value[part] : null;
+  }, obj);
+};
+
+export const exportToExcel = (data, headers) => {
+  const flattenedData = data.map((item) => {
+    const newItem = {};
+    
+    // Loop through customHeaders and get the correct values
+    headers.forEach((header) => {
+      newItem[header.label] = getNestedValue(item, header.key); // Use the helper function
+    });
+
+    return newItem; // Return the new flat object
+  });
+
+  // Now pass flattenedData to your Excel library to generate the file
+  // Assuming you're using a library like `xlsx` for this part:
+  
+  const worksheet = XLSX.utils.json_to_sheet(flattenedData);
+  const workbook = XLSX.utils.book_new();
+  XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
+
+  // Generate file
+  XLSX.writeFile(workbook, "exported_data.xlsx");
+};
+
+
+export const exportToExcelNew = (data, fileName = "exported_data.xlsx") => {
+  console.log("Data to export:", data); // Log the data for debugging
+
+  // Ensure the data is not empty
+  if (!data || data.length === 0) {
+    console.error("No data provided for export.");
+    return;
+  }
+
+  // Convert the data to a worksheet
+  const worksheet = XLSX.utils.json_to_sheet(data);
+
+  // Create a new workbook and append the worksheet to it
+  const workbook = XLSX.utils.book_new();
+  XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
+
+  // Ensure file has a valid .xlsx extension
+  const fileWithExtension = fileName.endsWith(".xlsx") ? fileName : `${fileName}.xlsx`;
+
+  // Write the workbook to a file
+  XLSX.writeFile(workbook, fileWithExtension);
+};
+
+
+export function formatDateToYYYYMMDD(dateString) {
+  const date = new Date(dateString);
+
+  // Extract individual date components
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0'); // Months are 0-based
+  const day = String(date.getDate()).padStart(2, '0');
+
+  // Combine the formatted parts
+  return `${year}-${month}-${day}`;
+}
+
+
+// Encrypt a string
+export const encryptString = (text) => {
+  const ciphertext = CryptoJS.AES.encrypt(text, import.meta.env.VITE_ROLE_ENCRYPTION_KEY).toString();
+  return ciphertext;
+};
+
+// Decrypt a string
+export const decryptString = (ciphertext) => {
+  const bytes = CryptoJS.AES.decrypt(ciphertext, import.meta.env.VITE_ROLE_ENCRYPTION_KEY);
+  const originalText = bytes.toString(CryptoJS.enc.Utf8);
+  return originalText;
+};
--- a/src/Contexts/GlobalStateProvider.jsx
+++ b/src/Contexts/GlobalStateProvider.jsx
@@ -519,7 +519,7 @@ const GlobalStateProvider = ({ children }) => {
      rate: 2.66,
    },
  ]);
-  const [InvestorDetails, setInvestorDetails] = useState([ 
+  const [InvestorDetails, setInvestorDetails] = useState([
    {
      id: 1,
      clientId: "SA00000001",
@@ -530,7 +530,7 @@ const GlobalStateProvider = ({ children }) => {
      phoneNumber: "8940035906",
      address: "Saudi Arabia",
      emailID: "john@gmail.com",
-      InvestorType:"Retail",
+      InvestorType: "Retail",
      bankName: "Lorem Text",
      branchAddress: "Hohenzollernring 58, 95444",
      iban: "DE 1234 5678 9012 3456",
@@ -549,7 +549,7 @@ const GlobalStateProvider = ({ children }) => {
      phoneNumber: "8940035906",
      address: "Saudi Arabia",
      emailID: "john@gmail.com",
-      InvestorType:"Accredited Investors",
+      InvestorType: "Accredited Investors",
      bankName: "Lorem Text",
      branchAddress: "Hohenzollernring 58, 95444",
      iban: "DE 1234 5678 9012 3456",
@@ -568,7 +568,7 @@ const GlobalStateProvider = ({ children }) => {
      phoneNumber: "8940035906",
      address: "Saudi Arabia",
      emailID: "john@gmail.com",
-      InvestorType:"Retail",
+      InvestorType: "Retail",
      bankName: "Lorem Text",
      branchAddress: "Hohenzollernring 58, 95444",
      iban: "DE 1234 5678 9012 3456",
@@ -587,7 +587,7 @@ const GlobalStateProvider = ({ children }) => {
      phoneNumber: "8940035906",
      address: "Saudi Arabia",
      emailID: "john@gmail.com",
-      InvestorType:"Accredited Investors",
+      InvestorType: "Accredited Investors",
      bankName: "Lorem Text",
      branchAddress: "Hohenzollernring 58, 95444",
      iban: "DE 1234 5678 9012 3456",
@@ -606,7 +606,7 @@ const GlobalStateProvider = ({ children }) => {
      phoneNumber: "8940035906",
      address: "Saudi Arabia",
      emailID: "john@gmail.com",
-      InvestorType:"Retail",
+      InvestorType: "Retail",
      bankName: "Lorem Text",
      branchAddress: "Hohenzollernring 58, 95444",
      iban: "DE 1234 5678 9012 3456",
@@ -625,7 +625,7 @@ const GlobalStateProvider = ({ children }) => {
      phoneNumber: "8940035906",
      address: "Saudi Arabia",
      emailID: "john@gmail.com",
-      InvestorType:"Accredited Investors",
+      InvestorType: "Accredited Investors",
      bankName: "Lorem Text",
      branchAddress: "Hohenzollernring 58, 95444",
      iban: "DE 1234 5678 9012 3456",
@@ -644,7 +644,7 @@ const GlobalStateProvider = ({ children }) => {
      phoneNumber: "8940035906",
      address: "Saudi Arabia",
      emailID: "john@gmail.com",
-      InvestorType:"Retail",
+      InvestorType: "Retail",
      bankName: "Lorem Text",
      branchAddress: "Hohenzollernring 58, 95444",
      iban: "DE 1234 5678 9012 3456",
@@ -663,7 +663,7 @@ const GlobalStateProvider = ({ children }) => {
      phoneNumber: "8940035906",
      address: "Saudi Arabia",
      emailID: "john@gmail.com",
-      InvestorType:"Accredited Investors",
+      InvestorType: "Accredited Investors",
      bankName: "Lorem Text",
      branchAddress: "Hohenzollernring 58, 95444",
      iban: "DE 1234 5678 9012 3456",
@@ -682,7 +682,7 @@ const GlobalStateProvider = ({ children }) => {
      phoneNumber: "8940035906",
      address: "Saudi Arabia",
      emailID: "john@gmail.com",
-      InvestorType:"Retail",
+      InvestorType: "Retail",
      bankName: "Lorem Text",
      branchAddress: "Hohenzollernring 58, 95444",
      iban: "DE 1234 5678 9012 3456",
@@ -701,7 +701,7 @@ const GlobalStateProvider = ({ children }) => {
      phoneNumber: "8940035906",
      address: "Saudi Arabia",
      emailID: "john@gmail.com",
-      InvestorType:"Accredited Investors",
+      InvestorType: "Accredited Investors",
      bankName: "Lorem Text",
      branchAddress: "Hohenzollernring 58, 95444",
      iban: "DE 1234 5678 9012 3456",
@@ -712,136 +712,8 @@ const GlobalStateProvider = ({ children }) => {
    },
  ]);

-  const [viewInvestor, setViewInvestor] = useState([
-    {
-      id: 1,
-      dealId: "UWE3424992",
-      dealName: "KKR Private Equity Fund",
-      sponsorName: "KKR",
-      investAmount: "$100,000",
-      holdingPeriod: "4-5 years",
-      estimatedReturn: "50-60%",
-      kycStatus: "Open",
-    },
-    {
-      id: 2,
-      dealId: "UWE3424992",
-      dealName: "Blackstone Real Estate Income Trust",
-      sponsorName: "Blackstone",
-      investAmount: "$100,000",
-      holdingPeriod: "4-5 years",
-      estimatedReturn: "50-60%",
-      kycStatus: "Pending",
-    },
-    {
-      id: 3,
-      dealId: "UWE3424992",
-      dealName: "J.P. Morgan",
-      sponsorName: "J.P. Morgan",
-      investAmount: "$100,000",
-      holdingPeriod: "4-5 years",
-      estimatedReturn: "50-60%",
-      kycStatus: "Closed",
-    },
-  ]);
-  const [transaction, setTransaction] = useState([
-    {
-      id: 1,
-      date: "2-Jan-24",
-      transaction: "Deposit",
-      currency: "BHD",
-      amount: "12000.00",
-      fromUSD: "",
-      toUSD: "2.6376",
-      USDamount: "31,651.20",
-      IOName:"",
-      paymentMethod:"Bank"
-    },
-    {
-      id: 2,
-      date: "6-Jan-24",
-      transaction: "Invested",
-      currency: "BHD",
-      amount: "-4000.00",
-      fromUSD: "",
-      toUSD: "2.6376",
-      USDamount: "-10,550.40",
-      IOName:"KKR Private Equity Fund",
-      paymentMethod:"-"
-    },
-    {
-      id: 3,
-      date: "7-Jan-24",
-      transaction: "Deposit",
-      currency: "BHD",
-      amount: "4000.00",
-      fromUSD: "",
-      toUSD: "2.6376",
-      USDamount: "10,550.40",
-      IOName:"-",
-      paymentMethod:"Apple Pay"
-    },
-    {
-      id: 4,
-      date: "8-Jan-24",
-      transaction: "Invested",
-      currency: "BHD",
-      amount: "-3000.00",
-      fromUSD: "",
-      toUSD: "2.6376",
-      USDamount: "-7,912.80",
-      IOName:"Black Stone Real Estate Income Trust",
-      paymentMethod:"-"
-    },
-    {
-      id: 5,
-      date: "2-Jan-24",
-      transaction: "Deposit",
-      currency: "BHD",
-      amount: "12000.00",
-      fromUSD: "0.3747",
-      toUSD: "",
-      USDamount: "31,651.20",
-      IOName:"KKR Private Equity Fund",
-      paymentMethod:"-"
-    },
-    {
-      id: 6,
-      date: "2-Jan-24",
-      transaction: "Deposit",
-      currency: "BHD",
-      amount: "12000.00",
-      fromUSD: "0.3747",
-      toUSD: "",
-      USDamount: "31,651.20",
-      IOName:"Black Stone Real Estate Income Trust",
-      paymentMethod:"-"
-    },
-    {
-      id: 7,
-      date: "2-Jan-24",
-      transaction: "Deposit",
-      currency: "BHD",
-      amount: "12000.00",
-      fromUSD: "0.3747",
-      toUSD: "",
-      USDamount: "31,651.20",
-      IOName:"KKR Private Equity Fund",
-      paymentMethod:"-"
-    },
-    {
-      id: 8,
-      date: "2-Jan-24",
-      transaction: "Deposit",
-      currency: "BHD",
-      amount: "12000.00",
-      fromUSD: "",
-      toUSD: "2.6376",
-      USDamount: "31,651.20",
-      IOName:"",
-      paymentMethod:"Bank"
-    },
-  ]);
+  const [viewInvestor, setViewInvestor] = useState([]);
+  const [transaction, setTransaction] = useState([]);

  const [investorTransaction, setInvestorTransaction] = useState([
    {
@@ -1090,112 +962,14 @@ const GlobalStateProvider = ({ children }) => {
  ]);
  const [deleteHistory, setDeleteHistory] = useState([
    {
-      id: uuidv4(),
-      date: "2024-01-15",
-      Distribution: "Office supplies",
-      charge: "200.50",
-      year: "2024",
-      quarter: "Q1",
-      amount: 1500,
-    },
-    {
-      id: uuidv4(),
-      date: "2024-02-10",
-      Distribution: "Marketing expenses",
-      charge: "450.00",
-      year: "2024",
-      quarter: "Q1",
-      amount: 2000,
-    },
-    {
-      id: uuidv4(),
-      date: "2024-03-05",
-      Distribution: "Software subscription",
-      charge: "300.75",
-      year: "2024",
-      quarter: "Q1",
-      amount: 1200,
-    },
-    {
-      id: uuidv4(),
-      date: "2024-04-18",
-      Distribution: "Travel expenses",
-      charge: "600.30",
-      year: "2024",
-      quarter: "Q2",
-      amount: 2500,
-    },
-    {
-      id: uuidv4(),
-      date: "2024-05-22",
-      Distribution: "Consulting fees",
-      charge: "800.00",
-      year: "2024",
-      quarter: "Q2",
-      amount: 3000,
-    },
-    {
-      id: uuidv4(),
-      date: "2024-06-14",
-      Distribution: "Office rent",
-      charge: "1200.25",
-      year: "2024",
-      quarter: "Q2",
-      amount: 3500,
-    },
-    {
-      id: uuidv4(),
-      date: "2024-07-09",
-      Distribution: "Utilities",
-      charge: "150.40",
-      year: "2024",
-      quarter: "Q3",
-      amount: 1000,
-    },
-    {
-      id: uuidv4(),
-      date: "2024-08-29",
-      Distribution: "Employee training",
-      charge: "500.00",
-      year: "2024",
-      quarter: "Q3",
-      amount: 1800,
-    },
-    {
-      id: uuidv4(),
-      date: "2024-09-13",
-      Distribution: "Website maintenance",
-      charge: "350.65",
-      year: "2024",
-      quarter: "Q3",
-      amount: 1400,
-    },
-    {
-      id: uuidv4(),
-      date: "2024-10-23",
-      Distribution: "Advertising",
-      charge: "900.50",
-      year: "2024",
-      quarter: "Q4",
-      amount: 2200,
-    },
-    {
-      id: uuidv4(),
-      date: "2024-10-23",
-      Distribution: "Advertising",
-      charge: "900.50",
-      year: "2024",
-      quarter: "Q4",
-      amount: 2200,
-    },
-    {
-      id: uuidv4(),
-      date: "2024-10-23",
-      Distribution: "Advertising",
-      charge: "900.50",
-      year: "2024",
-      quarter: "Q4",
-      amount: 2200,
+      id: 1,
+      firstName: "satyam",
+      lastName: "Bendal",
+      clientId: "QA00000003", 
+      RequestedOn: "2024-08-21T08:12:08.000Z",
+      phoneNumber: "6387524874",
+      country: "Qatar",
+      status: "Approved",
    },
  ]);
  const [investorRequest, setInvestorRequest] = useState([
@@ -1310,114 +1084,26 @@ const GlobalStateProvider = ({ children }) => {
  ]);
  const [deleteRequest, setDeleteRequest] = useState([
    {
-      id: uuidv4(),
-      date: getRandomDate(startDate, endDate),
-      Distribution: "lorem ipsum dummy text",
-      charge: "500",
-      year: "2024",
-      quater: "Q 1",
-      amount: 1000,
+        "id": 2,
+        "firstName": "satyam",
+        "lastName": "Bendal",
+        "clientId": "QA00000003",
+        "RequestedOn": "2024-08-21T09:44:21.000Z",
+        "phoneNumber": "6387524874",
+        "country": "Qatar",
+        "status": "Pending"
    },
    {
-      id: uuidv4(),
-      date: getRandomDate(startDate, endDate),
-      Distribution: "lorem ipsum dummy text",
-      charge: "500",
-      year: "2024",
-      quater: "Q 1",
-      amount: 1000,
-    },
-    {
-      id: uuidv4(),
-      date: getRandomDate(startDate, endDate),
-      Distribution: "lorem ipsum dummy text",
-      charge: "500",
-      year: "2024",
-      quater: "Q 1",
-      amount: 1000,
-    },
-    {
-      id: uuidv4(),
-      date: getRandomDate(startDate, endDate),
-      Distribution: "lorem ipsum dummy text",
-      charge: "500",
-      year: "2024",
-      quater: "Q 1",
-      amount: 1000,
-    },
-    {
-      id: uuidv4(),
-      date: getRandomDate(startDate, endDate),
-      Distribution: "lorem ipsum dummy text",
-      charge: "500",
-      year: "2024",
-      quater: "Q 1",
-      amount: 1000,
-    },
-    {
-      id: uuidv4(),
-      date: getRandomDate(startDate, endDate),
-      Distribution: "lorem ipsum dummy text",
-      charge: "500",
-      year: "2024",
-      quater: "Q 1",
-      amount: 1000,
-    },
-    {
-      id: uuidv4(),
-      date: getRandomDate(startDate, endDate),
-      Distribution: "lorem ipsum dummy text",
-      charge: "500",
-      year: "2024",
-      quater: "Q 1",
-      amount: 1000,
-    },
-    {
-      id: uuidv4(),
-      date: getRandomDate(startDate, endDate),
-      Distribution: "lorem ipsum dummy text",
-      charge: "500",
-      year: "2024",
-      quater: "Q 1",
-      amount: 1000,
-    },
-    {
-      id: uuidv4(),
-      date: getRandomDate(startDate, endDate),
-      Distribution: "lorem ipsum dummy text",
-      charge: "500",
-      year: "2024",
-      quater: "Q 1",
-      amount: 1000,
-    },
-    {
-      id: uuidv4(),
-      date: getRandomDate(startDate, endDate),
-      Distribution: "lorem ipsum dummy text",
-      charge: "500",
-      year: "2024",
-      quater: "Q 1",
-      amount: 1000,
-    },
-    {
-      id: uuidv4(),
-      date: getRandomDate(startDate, endDate),
-      Distribution: "lorem ipsum dummy text",
-      charge: "500",
-      year: "2024",
-      quater: "Q 1",
-      amount: 1000,
-    },
-    {
-      id: uuidv4(),
-      date: getRandomDate(startDate, endDate),
-      Distribution: "lorem ipsum dummy text",
-      charge: "500",
-      year: "2024",
-      quater: "Q 1",
-      amount: 1000,
-    },
-  ]);
+        "id": 3,
+        "firstName": "satyam",
+        "lastName": "Bendal",
+        "clientId": "QA00000003",
+        "RequestedOn": "2024-08-21T09:53:03.000Z",
+        "phoneNumber": "6387524874",
+        "country": "Qatar",
+        "status": "Pending"
+    }
+]);
  const [viewIO, setViewIO] = useState([
    {
      id: 1,
@@ -1449,7 +1135,6 @@ const GlobalStateProvider = ({ children }) => {
    },
  ]);

-
  const [depositRequest, setDepositRequest] = useState([
    {
      id: 1,
@@ -1683,6 +1368,28 @@ const GlobalStateProvider = ({ children }) => {
      mailId: "john@gmail.com",
      status: "Incompleted",
    },
+    {
+      id: 10,
+      date: "02-Jan-2024",
+      clientId: "SA00000001",
+      firstName: "John",
+      lastName: "David",
+      country: "Saudi Arabia",
+      phoneNumber: "8940035906",
+      mailId: "john@gmail.com",
+      status: "Incompleted",
+    },
+    {
+      id: 10,
+      date: "02-Jan-2024",
+      clientId: "SA00000001",
+      firstName: "John",
+      lastName: "David",
+      country: "Saudi Arabia",
+      phoneNumber: "8940035906",
+      mailId: "john@gmail.com",
+      status: "Incompleted",
+    },
  ]);

  const [manageAcademy, setManageAcademy] = useState([
@@ -1723,15 +1430,255 @@ const GlobalStateProvider = ({ children }) => {
  ]);


+  const [users, setUsers] = useState([
+    {
+      id: 1,
+      firstName: "SA00000001",
+      lastName: "John David",
+      emailID: "John",
+      role: "David",
+      phoneNumber:"8940035906",
+    },
+  ]);

+  const [fawateerRequest, setFawateerRequest] = useState([
+    {
+      id: 8,
+      principal_xid: 2,
+      transaction_date: "2024-10-07",
+      transaction_amount: "2000.00",
+      transactionStatus: "Approved",
+      makerComment: "This is a sample comment for the transactio",
+      checkerComment: "This is a sample comment for the transaction",
+      spportFile_path: "public\\spportFile_path\\screenshot_2024_02_15_152810.png",
+      clientReference_id: "BH00000001",
+      firstName: "jayesh",
+      lastName: "jain ",
+      mobileNumber: "+919819906537",
+      emailAddress: "jayeshkjain6@gmail.com",
+      maker: {
+          firstName: "Faisal",
+          lastName: "Aljalahma",
+          emailAddress: "admin@tanami.com",
+          ISDcode: "+973",
+          mobileNumber: "3633133"
+      }
+    },
+    {
+      id: 8,
+      principal_xid: 2,
+      transaction_date: "2024-10-07",
+      transaction_amount: "2000.00",
+      transactionStatus: "Approved",
+      makerComment: "This is a sample comment for the transactio",
+      checkerComment: "This is a sample comment for the transaction",
+      spportFile_path: "public\\spportFile_path\\screenshot_2024_02_15_152810.png",
+      clientReference_id: "BH00000001",
+      firstName: "jayesh",
+      lastName: "jain ",
+      mobileNumber: "+919819906537",
+      emailAddress: "jayeshkjain6@gmail.com",
+      maker: {
+          firstName: "Faisal",
+          lastName: "Aljalahma",
+          emailAddress: "admin@tanami.com",
+          ISDcode: "+973",
+          mobileNumber: "3633133"
+      }
+    },
+    {
+      id: 8,
+      principal_xid: 2,
+      transaction_date: "2024-10-07",
+      transaction_amount: "2000.00",
+      transactionStatus: "Approved",
+      makerComment: "This is a sample comment for the transactio",
+      checkerComment: "This is a sample comment for the transaction",
+      spportFile_path: "public\\spportFile_path\\screenshot_2024_02_15_152810.png",
+      clientReference_id: "BH00000001",
+      firstName: "jayesh",
+      lastName: "jain ",
+      mobileNumber: "+919819906537",
+      emailAddress: "jayeshkjain6@gmail.com",
+      maker: {
+          firstName: "Faisal",
+          lastName: "Aljalahma",
+          emailAddress: "admin@tanami.com",
+          ISDcode: "+973",
+          mobileNumber: "3633133"
+      }
+    },
+    {
+      id: 8,
+      principal_xid: 2,
+      transaction_date: "2024-10-07",
+      transaction_amount: "2000.00",
+      transactionStatus: "Approved",
+      makerComment: "This is a sample comment for the transactio",
+      checkerComment: "This is a sample comment for the transaction",
+      spportFile_path: "public\\spportFile_path\\screenshot_2024_02_15_152810.png",
+      clientReference_id: "BH00000001",
+      firstName: "jayesh",
+      lastName: "jain ",
+      mobileNumber: "+919819906537",
+      emailAddress: "jayeshkjain6@gmail.com",
+      maker: {
+          firstName: "Faisal",
+          lastName: "Aljalahma",
+          emailAddress: "admin@tanami.com",
+          ISDcode: "+973",
+          mobileNumber: "3633133"
+      }
+    },
+  ]);

+  const [approveHistory, setApproveHistory] = useState([
+    {
+      "id": 1,
+      "principal_xid": 2,
+      "transaction_date": "2024-10-07",
+      "transaction_amount": "2000.00",
+      "transactionStatus": "Pending",
+      "makerComment": null,
+      "checkerComment": null,
+      "spportFile_path": null,
+      "clientReference_id": "BH00000001",
+      "firstName": "jayesh",
+      "lastName": "jain",
+      "mobileNumber": "+919819906537",
+      "emailAddress": "jayeshkjain6@gmail.com",
+      "maker": {
+          "firstName": "Faisal",
+          "lastName": "Aljalahma",
+          "emailAddress": "admin@tanami.com",
+          "ISDcode": "+973",
+          "mobileNumber": "3633133"
+      }
+    },
+  ]);

+  const [approved, setApproved] = useState([
+    {
+      id: 1,
+      transactionDate: "02-Jan-24",
+      particulars: "Cash Reserve- Initated",
+      amount: "50,000.00",
+      Comments: "",
+      user: "Faisal",
+      entryDate: "02-Jan-24",
+    },
+    {
+      id: 2,
+      transactionDate: "12-Feb-24",
+      particulars: "Fees & Expense",
+      amount: "-22,000.00",
+      Comments: "",
+      user: "Faisal",
+      entryDate: "13-Feb-24",
+    },
+    {
+      id: 3,
+      transactionDate: "12-Feb-24",
+      particulars: "Distribution Received From Sponsor",
+      amount: "50,000.00",
+      Comments: "",
+      user: "Nawab",
+      entryDate: "24-Mar-24",
+    },
+    {
+      id: 4,
+      transactionDate: "28-Mar-24",
+      particulars: "Distribution Paid To Investors",
+      amount: "-40,000.00",
+      Comments: "",
+      user: "Faisal",
+      entryDate: "28-Mar-24",
+    },
+    {
+      id: 5,
+      transactionDate: "26-Jun-24",
+      particulars: "Distribution Received From Sponsor",
+      amount: "70,000.00",
+      Comments: "",
+      user: "Faisal",
+      entryDate: "27-Jun-24",
+    },
+    {
+      id: 6,
+      transactionDate: "28-Jun-24",
+      particulars: "Distribution Paid To Investors",
+      amount: "-60,000.00",
+      Comments: "",
+      user: "Nawab",
+      entryDate: "28-Jun-24",
+    },
+  ]);

+  const [iONAVDetail, setIONAVDetail] = useState([
+    {
+      id: 1,
+      valuationDate: "01-Jul-24",
+      nav: "1,229,750.00 ",
+      lastUpdate: "12.56",
+      investmentClose: "29.45",
+      updatedBy: "Nawab",
+      updatedOn: "01-Jul-24",
+    },
+    {
+      id: 2,
+      valuationDate: "25-Apr-24",
+      nav: "1,092,500.00",
+      lastUpdate: "15.00",
+      investmentClose: "15.00",
+      updatedBy: "Faisal",
+      updatedOn: "25-Apr-24",
+    },
+    {
+      id: 3,
+      valuationDate: "02-Jan-24",
+      nav: "950,000.00",
+      lastUpdate: "",
+      investmentClose: "",
+      updatedBy: "Faisal",
+      updatedOn: "02-Jan-24",
+    },
+  ]);

+  const [iOTransaction, setIOTransaction] = useState([
+    {
+      id: 1,
+      transactionName: "Amount Invested",
+      amount: "995,000",
+      createdBy: "Faisal",
+      createdOn: "27-Oct-24",
+      approvedBy: "Nawab",
+      approvedOn: "28-Oct-24",
+    },
+    {
+      id: 2,
+      transactionName: "Distribution To Sponser",
+      amount: "40,000",
+      createdBy: "Faisal",
+      createdOn: "30-Oct-24",
+      approvedBy: "Nawab",
+      approvedOn: "31-Oct-24",
+    },
+    {
+      id: 3,
+      transactionName: "Amount Invested",
+      amount: "995,000",
+      createdBy: "Faisal",
+      createdOn: "27-Oct-24",
+      approvedBy: "Nawab",
+      approvedOn: "28-Oct-24",
+    },
+  ]);
+
+  const [InvestorWallet, setInvestorWallet] = useState(null);

  // ==============[ prod state ]===============================
  const [IODetails, setIODetails] = useState(null);
-  const [ isIOloading, setIOloading ] = useState(false)
+  const [isIOloading, setIOloading] = useState(false);

  return (
    <GlobalStateContext.Provider
@@ -1804,10 +1751,22 @@ const GlobalStateProvider = ({ children }) => {
        setAcademicDocuments,
        iOArtifactsTwo,
        setIOArtifactsTwo,
-        
-
-        isIOloading, 
-        setIOloading 
+        InvestorWallet,
+        setInvestorWallet,
+        isIOloading,
+        setIOloading,
+        users,
+        setUsers,
+        fawateerRequest,
+        setFawateerRequest,
+        approveHistory,
+        setApproveHistory,
+        approved,
+        setApproved,
+        iONAVDetail,
+        setIONAVDetail,
+        iOTransaction,
+        setIOTransaction,
      }}
    >
      {children}
--- a/src/Layout/DefaultLayout.jsx
+++ b/src/Layout/DefaultLayout.jsx
@@ -6,6 +6,8 @@ import logoMiniDark from "../assets/favicon.png";
 import { useDispatch } from "react-redux";
 import { loginUser } from "../Redux/Slice/auth";
 import Button02 from "../Components/Buttons/Button02";
+import { CgProfile } from "react-icons/cg";
+
 import {
  TbArrowBadgeLeftFilled,
  TbListDetails,
@@ -13,7 +15,12 @@ import {
  TbTransactionDollar,
 } from "react-icons/tb";
 import { TbArrowBadgeRightFilled } from "react-icons/tb";
-import { ArrowBackIcon, ArrowLeftIcon, ArrowRightIcon } from "@chakra-ui/icons";
+import {
+  ArrowBackIcon,
+  ArrowLeftIcon,
+  ArrowRightIcon,
+  AtSignIcon,
+} from "@chakra-ui/icons";
 import {
  Link,
  NavLink,
@@ -51,6 +58,8 @@ import {
  AlertIcon,
  Breadcrumb,
  Divider,
+  Tooltip,
+  useRadio,
 } from "@chakra-ui/react";
 import GlobalStateContext from "../Contexts/GlobalStateContext";
 import Cookies from "js-cookie"; // Import the Cookies library
@@ -73,8 +82,16 @@ import SplashScreen from "../Pages/SplashScreen";
 import CutomBreadcrumb from "../Components/CutomBreadcrumb";
 import CustomBreadcrumb from "../Components/CutomBreadcrumb";
 import { getCountdownTimer } from "../Constants/Constants";
+import { useLogoutMutation } from "../Services/token.serivce";
+import CreateRequest from "../Pages/Fawateer/CreateRequest";
+import ApproveRequest from "../Pages/FawateerChecker/ApproveRequest/ApproveRequest";
+import ApproveHistoryMaker from "../Pages/FawateerChecker/ApproveHistory/ApproveHistoryMaker";
+import ApproveHistory from "../Pages/FawateerChecker/ApproveHistory/ApproveHistoryChecker";
+import { useProfileQuery } from "../Services/io.service";
+import SubAdmin from "../Pages/SubAdmin/SubAdmin";

 const DashboardLayout = ({ isOnline }) => {
+  const userRole = localStorage.getItem("role");
  const navigate = useNavigate();
  const dispach = useDispatch();
  const location = useLocation();
@@ -91,6 +108,18 @@ const DashboardLayout = ({ isOnline }) => {
  const [isSplashVisible, setSplashVisible] = useState(true);
  const [openIndex, setOpenIndex] = useState(null);

+  const { data, refetch } = useProfileQuery();
+
+  useEffect(() => {
+    if (
+      !localStorage.getItem("accessToken") &&
+      !localStorage.getItem("refreshToken")
+    ) {
+      logOutHandler();
+      return navigate("/login");
+    }
+  }, []);
+
  useEffect(() => {
    const savedIndex = localStorage.getItem("openAccordionIndex");
    if (savedIndex !== null) {
@@ -108,8 +137,8 @@ const DashboardLayout = ({ isOnline }) => {
    // Set a timer to hide the splash screen after 3 seconds
    const timer = setTimeout(() => {
      setSplashVisible(false);
-    },1000); // 3000ms = 3 seconds
-
+    }, 1000); // 3000ms = 3 seconds
+    refetch();
    // Cleanup the timer
    return () => clearTimeout(timer);
  }, []);
@@ -118,14 +147,17 @@ const DashboardLayout = ({ isOnline }) => {
    setOpenDrawerClick(!openDrawerClick);
  };

-  const logOutHandler = () => {
+  const [logout] = useLogoutMutation();
+
+  const logOutHandler = async () => {
    // dispach(loginUser(false));
    setIsAuthenticate(false);
    Cookies.remove("isAuthenticated");
-    localStorage.removeItem('refreshToken')
-    localStorage.removeItem('accessToken')
-    localStorage.removeItem('refreshTokenExp')
-    navigate("/login");
+    try {
+      await logout();
+      localStorage.clear();
+      navigate("/login");
+    } catch (error) {}
  };

  // // Function to get the title based on the route
@@ -139,12 +171,24 @@ const DashboardLayout = ({ isOnline }) => {
            <RiMoneyDollarBoxLine className="h4 m-0" /> Sponsor
          </span>
        );
+      case path.startsWith("/email"):
+        return (
+          <span className="d-flex align-items-end gap-2">
+            <AtSignIcon className="h4 m-0" /> Email Notifiation
+          </span>
+        );
      case path.startsWith("/investment-type"):
        return (
          <span className="d-flex align-items-end gap-2">
            <VscSymbolClass className="h4 m-0" /> Investment Type
          </span>
        );
+      case path.startsWith("/profile"):
+        return (
+          <span className="d-flex align-items-end gap-2">
+            <CgProfile className="h4 m-0" /> Profile
+          </span>
+        );
      case path.startsWith("/exchange-rate"):
        return (
          <span className="d-flex align-items-end gap-2">
@@ -189,28 +233,35 @@ const DashboardLayout = ({ isOnline }) => {
          </span>
        );

-
-
-
      case path.startsWith("/deposit-request"):
        return (
          <span className="d-flex align-items-end gap-2">
            <RiMoneyDollarBoxLine className="h4 m-0 fw-normal" />
-            Deposite pending request
+            Deposit Pending Request
          </span>
        );
      case path.startsWith("/deposit-history"):
        return (
          <span className="d-flex align-items-end gap-2">
            <RiExchangeBoxLine className="h4 m-0 fw-normal" />
-            Deposite withdrawal request
+            Deposite Request
          </span>
        );

-
-
-
-
+      case path.startsWith("/fawateer"):
+        return (
+          <span className="d-flex align-items-end gap-2">
+            <RiMoneyDollarBoxLine className="h4 m-0 fw-normal" />
+            Fawateer Deposit
+          </span>
+        );
+      case path.startsWith("/fawateer-history"):
+        return (
+          <span className="d-flex align-items-end gap-2">
+            <RiMoneyDollarBoxLine className="h4 m-0 fw-normal" />
+            Fawateer Deposit
+          </span>
+        );

      case path.startsWith("/withdraw-request"):
        return (
@@ -353,6 +404,19 @@ const DashboardLayout = ({ isOnline }) => {
    return <SplashScreen />;
  }

+  const filteredNav = nav.map((item) => {
+    if (item.submenu) {
+      return {
+        ...item,
+        submenu: item.submenu.filter(
+          (submenuItem) =>
+            !(!data?.data?.superAdmin && submenuItem.title === "Sub Admin")
+        ),
+      };
+    }
+    return item;
+  });
+
  return (
    <Box
      style={{
@@ -386,7 +450,7 @@ const DashboardLayout = ({ isOnline }) => {
        bottom={4}
        right={!slideFromRight ? 4 : "auto"}
        left={slideFromRight ? 4 : "auto"}
-        backgroundColor={"#fff"}
+        backgroundColor={"#000"}
        rounded={"full"}
        p={2}
        w={8}
@@ -411,7 +475,7 @@ const DashboardLayout = ({ isOnline }) => {

      {slideFromRight ? null : (
        <aside
-          className="h-100  position-relative sideBar  "
+          className="h-100  position-relative sideBar"
          // onMouseOver={() => setIsDrawerOpen(true)}
          // onMouseLeave={() => setIsDrawerOpen(false)}
          style={{
@@ -438,7 +502,7 @@ const DashboardLayout = ({ isOnline }) => {
                }}
                src={colorMode === "light" ? logo : logoDark}
                alt="Logo"
-                onClick={()=> navigate('/')}
+                onClick={() => navigate("/")}
                cursor={"pointer"}
              />
            ) : (
@@ -448,7 +512,7 @@ const DashboardLayout = ({ isOnline }) => {
                }}
                src={colorMode === "light" ? logoMini : logoMiniDark}
                alt="Logo"
-                onClick={()=> navigate('/')}
+                onClick={() => navigate("/")}
                cursor={"pointer"}
              />
            )}
@@ -470,44 +534,57 @@ const DashboardLayout = ({ isOnline }) => {
              index={openIndex}
              onChange={handleAccordionChange}
            >
-              {nav.map(({ title, type, Icon, submenu, path }, index) => {
+              {filteredNav.map(({ title, type, Icon, submenu, path }, index) => {
                if (type === "accordion") {
                  return (
                    <AccordionItem key={index} border={"none"}>
-                      <AccordionButton
-                        style={{ height: "auto" }}
-                        className={`${
-                          isDrawerOpen || openDrawerClick
-                            ? "p-2 web-text-medium ps-3 justify-content-between"
-                            : "p-2 ps-1 web-text-xlarge justify-content-center"
-                        } rounded-1 link d-flex align-items-center gap-2 w-100 mb-1`}
+                      <Tooltip
+                        isDisabled={isDrawerOpen || openDrawerClick}
+                        hasArrow
+                        bg={"#fff"}
+                        fontSize={"xs"}
+                        label={title}
+                        placement="top-start"
+                        color={"blue.800"}
                      >
-                        <Box
-                          as="span"
-                          display={"flex"}
-                          gap={2}
-                          alignItems={"center"}
+                        <AccordionButton
+                          style={{ height: "auto" }}
+                          className={`${
+                            isDrawerOpen || openDrawerClick
+                              ? "p-2 web-text-medium ps-3 justify-content-between"
+                              : "p-2 ps-1 web-text-xlarge justify-content-center"
+                          } rounded-1 link d-flex align-items-center gap-2 w-100 mb-1`}
                        >
-                          {/* {Icon && title === "Admin" ? <Image w={15} src={shield} /> : <Icon className={`web-text-large`} />} */}
-                          {Icon && (
-                            <Icon
-                              fontSize={title === "Admin" ? "18px" : "15px"}
-                            />
-                          )}
-                          <Text
-                            as={"span"}
-                            display={
-                              isDrawerOpen || openDrawerClick ? "flex" : "none"
-                            }
-                            alignItems="center"
-                            overflow="hidden"
-                            textAlign={"left"}
+                          <Box
+                            as="span"
+                            display={"flex"}
+                            gap={2}
+                            alignItems={"center"}
                          >
-                            {title}
-                          </Text>
-                        </Box>
-                        <AccordionIcon />
-                      </AccordionButton>
+                            {/* {Icon && title === "Admin" ? <Image w={15} src={shield} /> : <Icon className={`web-text-large`} />} */}
+                            {Icon && (
+                              <Icon
+                                fontSize={title === "Admin" ? "18px" : "15px"}
+                              />
+                            )}
+
+                            <Text
+                              as={"span"}
+                              display={
+                                isDrawerOpen || openDrawerClick
+                                  ? "flex"
+                                  : "none"
+                              }
+                              alignItems="center"
+                              overflow="hidden"
+                              textAlign={"left"}
+                            >
+                              {title}
+                            </Text>
+                          </Box>
+                          <AccordionIcon />
+                        </AccordionButton>
+                      </Tooltip>
                      <AccordionPanel
                        p={0}
                        pb={1}
@@ -520,65 +597,81 @@ const DashboardLayout = ({ isOnline }) => {
                            { title: subMenuTitle, path: link, icon: SubIcon },
                            i
                          ) => (
-                            <Box
-                              key={i}
-                              style={{ height: "auto", position: "relative" }}
-                              className={`${
-                                isDrawerOpen || openDrawerClick
-                                  ? " web-text-medium ps-4"
-                                  : " web-text-xlarge  justify-content-center"
-                              }  d-flex align-items-center  p-0`}
+                            <Tooltip
+                              isDisabled={isDrawerOpen || openDrawerClick}
+                              hasArrow
+                              bg={"#fff"}
+                              fontSize={"xs"}
+                              label={subMenuTitle}
+                              placement="right"
+                              color={"blue.800"}
                            >
                              <Box
-                                backgroundColor={"gray.300"}
-                                style={{
-                                  position: "absolute",
-                                  top: 0,
-                                  width: 2,
-                                  left: 22,
-                                  height:
-                                    i === submenu?.length - 1 ? "55%" : "120%",
-                                  borderRadius: "0 0 10px 10px",
-                                }}
-                              />
-                              <Box
-                                backgroundColor={"gray.300"}
-                                style={{
-                                  position: "absolute",
-                                  width: 10,
-                                  left: 22,
-                                  height: 2,
-                                }}
-                              />
-
-                              <NavLink
+                                key={i}
+                                style={{ height: "auto", position: "relative" }}
                                className={`${
                                  isDrawerOpen || openDrawerClick
-                                    ? "p-2 ps-1 ms-2 web-text-medium "
-                                    : "p-2 ps-0 ms-0 zindex-3 ms-4 web-text-xlarge justify-content-center"
-                                } rounded-1 link d-flex align-items-center gap-2 w-100 `}
-                                to={link}
+                                    ? " web-text-medium ps-4"
+                                    : " web-text-xlarge  justify-content-center"
+                                }  d-flex align-items-center  p-0`}
                              >
-                                {SubIcon && (
-                                  <SubIcon
-                                    className="web-text-large ms-2"
-                                    style={{ zIndex: 111 }}
-                                  />
-                                )}
-                                <Text
-                                  as={"span"}
-                                  display={
+                                <Box
+                                  backgroundColor={"gray.300"}
+                                  style={{
+                                    position: "absolute",
+                                    top: 0,
+                                    width: 2,
+                                    left: 22,
+                                    height:
+                                      i === submenu?.length - 1
+                                        ? "55%"
+                                        : "120%",
+                                    borderRadius: "0 0 10px 10px",
+                                  }}
+                                />
+                                <Box
+                                  backgroundColor={"gray.300"}
+                                  style={{
+                                    position: "absolute",
+                                    width: 10,
+                                    left: 22,
+                                    height: 2,
+                                  }}
+                                />
+
+                                <NavLink
+                                  className={`${
                                    isDrawerOpen || openDrawerClick
-                                      ? "flex"
-                                      : "none"
-                                  }
-                                  alignItems="center"
-                                  overflow="hidden"
+                                      ? "p-2 ps-1 ms-2 web-text-medium "
+                                      : "p-2 ps-0 ms-0 zindex-3 ms-4 web-text-xlarge justify-content-center"
+                                  } rounded-1 link d-flex align-items-center gap-2 w-100 `}
+                                  to={link}
                                >
-                                  {subMenuTitle}
-                                </Text>
-                              </NavLink>
-                            </Box>
+                                  {SubIcon && (
+                                    <SubIcon
+                                      className="web-text-large ms-2"
+                                      style={{ zIndex: 111 }}
+                                    />
+                                  )}
+                                  <Text
+                                    as={"span"}
+                                    display={
+                                      isDrawerOpen || openDrawerClick
+                                        ? "flex"
+                                        : "none"
+                                    }
+                                    alignItems="center"
+                                    overflow="hidden"
+                                  >
+                                    {subMenuTitle === "Aprover Request"
+                                      ? data?.data?.role === "Maker"
+                                        ? "Create Request"
+                                        : "Aprover Request"
+                                      : subMenuTitle}
+                                  </Text>
+                                </NavLink>
+                              </Box>
+                            </Tooltip>
                          )
                        )}
                      </AccordionPanel>
@@ -596,28 +689,37 @@ const DashboardLayout = ({ isOnline }) => {
                  );
                } else if (type === "single") {
                  return (
-                    <NavLink
-                      key={index}
-                      style={{ height: "auto", position: "relative" }}
-                      className={`${
-                        isDrawerOpen || openDrawerClick
-                          ? "p-2 web-text-medium"
-                          : "p-2 ps-0 web-text-xlarge justify-content-start"
-                      } rounded-1 link d-flex align-items-center gap-2 w-100`}
-                      to={path}
+                    <Tooltip
+                      hasArrow
+                      bg={"#fff"}
+                      fontSize={"xs"}
+                      label={title}
+                      placement="top-start"
+                      color={"blue.800"}
                    >
-                      {Icon && <Icon className="web-text-large ms-2" />}
-                      <Text
-                        as={"span"}
-                        display={
-                          isDrawerOpen || openDrawerClick ? "flex" : "none"
-                        }
-                        alignItems="center"
-                        overflow="hidden"
+                      <NavLink
+                        key={index}
+                        style={{ height: "auto", position: "relative" }}
+                        className={`${
+                          isDrawerOpen || openDrawerClick
+                            ? "p-2 web-text-medium"
+                            : "p-2 ps-0 web-text-xlarge justify-content-start"
+                        } rounded-1 link d-flex align-items-center gap-2 w-100`}
+                        to={path}
                      >
-                        {title}
-                      </Text>
-                    </NavLink>
+                        {Icon && <Icon className="web-text-large ms-2" />}
+                        <Text
+                          as={"span"}
+                          display={
+                            isDrawerOpen || openDrawerClick ? "flex" : "none"
+                          }
+                          alignItems="center"
+                          overflow="hidden"
+                        >
+                          {title}
+                        </Text>
+                      </NavLink>
+                    </Tooltip>
                  );
                } else {
                  return null;
@@ -626,7 +728,7 @@ const DashboardLayout = ({ isOnline }) => {
            </Accordion>
          </Box>

-          {/* <Button
+          <Button
            colorScheme={"forestGreen"}
            rounded={"lg"}
            // onMouseOver={() => setIsDrawerOpen(true)}
@@ -646,18 +748,18 @@ const DashboardLayout = ({ isOnline }) => {
            ) : (
              <ArrowRightIcon className="web-text-small " />
            )}
-          </Button> */}
-          <Text textAlign={'center'} fontWeight={500} fontSize={'xs'} color={"gray.600"}>{getCountdownTimer(localStorage.getItem('accessTokenExp'))}</Text>
-
+          </Button>
+          {/* <Text textAlign={'center'} fontWeight={500} fontSize={'xs'} color={"gray.600"}>{getCountdownTimer(localStorage.getItem('accessTokenExp'))}</Text> */}
        </aside>
      )}

      <main
-        className={`h-100   ${slideFromRight ? "pe-3" : "ps-3"} d-flex flex-column gap-0`}
+        className={`h-100   ${
+          slideFromRight ? "pe-3" : "ps-3"
+        } d-flex flex-column gap-0`}
        style={{
          width: `calc(100% - ${isDrawerOpen || openDrawerClick ? 230 : 74}px)`,
          transition: "width 0.3s ease-in-out",
-
        }}
      >
        {/* <header className="p-2 ps-0 pt-3 fw-400  border-bottom">
@@ -665,261 +767,47 @@ const DashboardLayout = ({ isOnline }) => {
        </header> */}

        <HeaderMain
+          data={data}
          slideDirecttion={slideFromRight}
          logOutHandler={logOutHandler}
          icon
          title={getTitle()}
        />
-        
-      {/* <CustomBreadcrumb /> */}

-        <AppContent />
+        {/* <CustomBreadcrumb /> */}
+
+        <AppContent data={data} />
      </main>
-
-      {/* =======[ Left ]============ */}
-
-      {slideFromRight ? (
-        <aside
-          className="h-100 position-relative sideBar  pe-1"
-          // onMouseOver={() => setIsDrawerOpen(true)}
-          // onMouseLeave={() => setIsDrawerOpen(false)}
-          style={{
-            width: isDrawerOpen || openDrawerClick ? 232 : 74,
-            transition: "width 0.3s ease-in-out", // Smooth transition for width change
-            // overflow: "hidden",
-            backgroundColor: "#0041180A",
-            position: "relative",
-            // backgroundColor: "#002F0F",
-          }}
-        >
-          <div
-            className={`d-flex  ${
-              isDrawerOpen || openDrawerClick
-                ? "justify-content-end"
-                : "justify-content-center"
-            }  p-3 pt-3 pb-4 position-relative `}
-            height={"10%"}
-          >
-            {isDrawerOpen || openDrawerClick ? (
-              <img
-                style={{
-                  width: 120,
-                }}
-                src={logo}
-                alt="Logo"
-              />
-            ) : (
-              <img
-                style={{
-                  width: 30,
-                }}
-                src={logoMini}
-                alt="Logo"
-              />
-            )}
-          </div>
-
-          <Box
-            className="ps-2 scroll-bar"
-            style={{ height: "80%", overflowY: "scroll", overflowX: "hidden" }}
-          >
-            <Accordion m={0} allowToggle>
-              {nav.map(({ title, type, Icon, submenu, path }, index) => {
-                if (type === "accordion") {
-                  return (
-                    <AccordionItem key={index} border={"none"}>
-                      <AccordionButton
-                        style={{ height: "auto" }}
-                        className={`${
-                          isDrawerOpen || openDrawerClick
-                            ? "p-2 web-text-medium ps-3 justify-content-between"
-                            : "p-2 ps-1 web-text-xlarge justify-content-center"
-                        } rounded-1 link d-flex align-items-center gap-2 w-100 mb-1`}
-                        flexDirection={"row-reverse"}
-                      >
-                        <Box
-                          as="span"
-                          display={"flex"}
-                          gap={2}
-                          alignItems={"center"}
-                          flexDirection={"row-reverse"}
-                        >
-                          {Icon && <Icon className="web-text-large" />}
-                          <Text
-                            as={"span"}
-                            display={
-                              isDrawerOpen || openDrawerClick ? "flex" : "none"
-                            }
-                            alignItems="center"
-                            overflow="hidden"
-                          >
-                            {title}
-                          </Text>
-                        </Box>
-                        <AccordionIcon />
-                      </AccordionButton>
-                      <AccordionPanel
-                        p={0}
-                        pb={1}
-                        display={"flex"}
-                        flexDirection={"column"}
-                        gap={1}
-                      >
-                        {submenu?.map(
-                          (
-                            { title: subMenuTitle, path: link, icon: SubIcon },
-                            i
-                          ) => (
-                            <Box
-                              key={i}
-                              style={{ height: "auto", position: "relative" }}
-                              className={`${
-                                isDrawerOpen || openDrawerClick
-                                  ? " web-text-medium ps-0 pe-4"
-                                  : " web-text-xlarge  justify-content-center"
-                              }  d-flex align-items-center  p-0`}
-                            >
-                              <Box
-                                backgroundColor={"gray.300"}
-                                style={{
-                                  position: "absolute",
-                                  top: 0,
-                                  width: 2,
-                                  right: 20,
-                                  height:
-                                    i === submenu?.length - 1 ? "55%" : "120%",
-                                  borderRadius: "0 0 10px 10px",
-                                }}
-                              />
-                              <Box
-                                backgroundColor={"gray.300"}
-                                style={{
-                                  position: "absolute",
-                                  width: 8,
-                                  right: 20,
-                                  height: 2,
-                                }}
-                              />
-
-                              <NavLink
-                                flexDirection={"row-reverse"}
-                                className={`${
-                                  isDrawerOpen || openDrawerClick
-                                    ? "p-2 ps-1 me-1 web-text-medium "
-                                    : "p-2 ps-0 ms-0 zindex-3 ms-4 web-text-xlarge justify-content-center"
-                                } rounded-1 link d-flex align-items-center gap-2 w-100 flex-direction-row-reverse`}
-                                to={link}
-                                style={{ flexDirection: "row-reverse" }}
-                              >
-                                {SubIcon && (
-                                  <SubIcon
-                                    className="web-text-large ms-0"
-                                    style={{ zIndex: 111 }}
-                                  />
-                                )}
-                                <Text
-                                  as={"span"}
-                                  display={
-                                    isDrawerOpen || openDrawerClick
-                                      ? "flex"
-                                      : "none"
-                                  }
-                                  alignItems="center"
-                                  overflow="hidden"
-                                >
-                                  {subMenuTitle}
-                                </Text>
-                              </NavLink>
-                            </Box>
-                          )
-                        )}
-                      </AccordionPanel>
-                    </AccordionItem>
-                  );
-                } else if (type === "title") {
-                  return (
-                    <Text
-                      as={"span"}
-                      key={index}
-                      className="web-text-xxsmall fw-600 mt-1 text-secondary fw-bold me-2"
-                      padding={0}
-                      display={"flex"}
-                      justifyContent={"end"}
-                    >
-                      {title}
-                    </Text>
-                  );
-                } else if (type === "single") {
-                  return (
-                    <NavLink
-                      key={index}
-                      style={{
-                        height: "auto",
-                        position: "relative",
-                        flexDirection: "row-reverse",
-                      }}
-                      className={`${
-                        isDrawerOpen || openDrawerClick
-                          ? "p-2 web-text-medium"
-                          : "p-2 ps-0 web-text-xlarge justify-content-start"
-                      } rounded-1 link d-flex align-items-center gap-2 w-100`}
-                      to={path}
-                    >
-                      {Icon && <Icon className="web-text-large ms-2" />}
-                      <Text
-                        as={"span"}
-                        display={
-                          isDrawerOpen || openDrawerClick ? "flex" : "none"
-                        }
-                        alignItems="center"
-                        overflow="hidden"
-                      >
-                        {title}
-                      </Text>
-                    </NavLink>
-                  );
-                } else {
-                  return null;
-                }
-              })}
-            </Accordion>
-          </Box>
-
-          <Button
-            colorScheme={"forestGreen"}
-            rounded={"lg"}
-            // onMouseOver={() => setIsDrawerOpen(true)}
-            // onMouseLeave={() => setIsDrawerOpen(false)}
-            onClick={openDrawerOnClick}
-            style={{
-              width: 18,
-              height: 26,
-              position: "absolute",
-              left: -18,
-              bottom: 28,
-              zIndex: 99,
-            }}
-          >
-            {isDrawerOpen || openDrawerClick ? (
-              <ArrowRightIcon className="web-text-small " />
-            ) : (
-              <ArrowLeftIcon className="web-text-small" />
-            )}
-          </Button>
-        </aside>
-      ) : null}
    </Box>
  );
 };

 export default DashboardLayout;

-const AppContent = () => {
+const AppContent = ({ data }) => {
  return (
    <Routes>
      {RouteLink.map(({ path, Component }, index) => (
        <Route key={index} path={path} element={<Component />} />
      ))}
+
+      <Route
+        path="/fawateer"
+        element={
+          data?.data?.role === "Maker" ? <CreateRequest /> : <ApproveRequest />
+        }
+      />
+      <Route
+        path="/fawateer-history"
+        element={
+          data?.data?.role === "Maker" ? (
+            <ApproveHistoryMaker />
+          ) : (
+            <ApproveHistory />
+          )
+        }
+      />
+
      <Route path="*" element={<NotFound />} />
    </Routes>
  );
--- a/src/Pages/AccountDeletion/DeletionHistory.jsx
+++ b/src/Pages/AccountDeletion/DeletionHistory.jsx
@@ -11,66 +11,84 @@ import {
 } from "@chakra-ui/react";
 import React, { useContext, useEffect, useState } from "react";
 import { OPACITY_ON_LOAD } from "../../Layout/animations";
-import DataTable from "../../Components/DataTable/DataTable";
+import NormalTable from "../../Components/DataTable/NormalTable";
 import Pagination from "../../Components/Pagination";
 import GlobalStateContext from "../../Contexts/GlobalStateContext";
 import CustomAlertDialog from "../../Components/CustomAlertDialog";
 import { formatDate } from "../../Components/Functions/UTCConvertor";
 import { CheckIcon, CloseIcon } from "@chakra-ui/icons";
+import { useGetDeleteHistoryQuery } from "../../Services/delete.request.service";
+import { TABLE_PAGINATION } from "../../Constants/Paginations";
 // import { formatDate } from "../../Components/Functions/UTCConvertor";

 const DeletionHistory = () => {
  const toast = useToast();
-  const { slideFromRight, deleteHistory, setDeleteHistory } =
+  const { slideFromRight, setDeleteHistory } =
    useContext(GlobalStateContext);
-  const [searchTerm, setSearchTerm] = useState("");
-  const [isLoading, setIsLoading] = useState(true);
  const [deleteAlert, setDeleteAlert] = useState(false);
  const [actionId, setActionId] = useState(false);
  const [mouseEntered, setMouseEntered] = useState(false);
  const [mouseEnteredId, setMouseEnteredId] = useState("");

-  useEffect(() => { 
-    // Simulate loading
-    const timer = setTimeout(() => {
-      setIsLoading(false);
-    }, 1500);

-    // Cleanup the timer on component unmount
-    return () => clearTimeout(timer);
-  }, []);

-  // ====================================================[Table Filter]================================================================
-  const filteredData = deleteHistory.filter((item) => {
-    // Filter by name (case insensitive)
-    const name = item.Distribution;
-    const searchLower = searchTerm.toLowerCase();
-    const nameMatches = name.toLowerCase().includes(searchLower);
+  // =========================== [Use State] ============================= 
+  const [pageSize, setPageSize] = useState(TABLE_PAGINATION?.size);
+  const [currentPage, setCurrentPage] = useState(TABLE_PAGINATION?.page);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [debouncedSearchTerm, setDebouncedSearchTerm] = useState("");

-    // Filter by status
-    // const status = item.status;
-    // const statusLower = status ? "active" : "inactive";
+  // Debounce the search term to avoid making a request on every keystroke
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedSearchTerm(searchTerm);
+    }, 500); // Adjust delay as needed
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [searchTerm]);

-    // const statusMatches =
-    //   statusFilter === "all" ||
-    //   (statusFilter === "active" && status === true) ||
-    //   (statusFilter === "inactive" && status === false);

-    return nameMatches;
-  });
+  const {
+    data: deleteHistory,
+    isLoading,
+    refetch
+  } = useGetDeleteHistoryQuery({
+    page: debouncedSearchTerm ? undefined : currentPage,  // Omit pagination for search
+    size: debouncedSearchTerm ? undefined : pageSize,     // Omit pagination for search
+    search: debouncedSearchTerm,
+  },
+  {
+    skip: debouncedSearchTerm === "" && searchTerm !== "", // Skip if search is empty and it's not the initial request
+  })
+
+  const formatDate = (date) => {
+    return new Date(date).toLocaleDateString('en-GB', {
+      day: '2-digit',
+      month: '2-digit',
+      year: 'numeric',
+    });
+  };
+
+ // Use useEffect to refetch data when the component mounts
+ useEffect(() => {
+  refetch();
+}, [refetch]);
+

  // ====================================================[Table Setup]================================================================
  const tableHeadRow = [
    "Sr No.",
-    "Date",
-    "Distribution Amount",
-    "Charges (USD)",
-    "Year",
-    "Quater",
-    "Action",
+    "Request On",
+    "Client ID",
+    "First Name",
+    "Last Name",
+    "Country",
+    "Phone Number",
+    "Status"
  ];

-  const extractedArray = filteredData?.map((item, index) => ({
+  const extractedArray = deleteHistory?.data?.rows?.map((item, index) => ({
    id: item?.id,
    "Sr No.": (
      <Text
@@ -83,7 +101,7 @@ const DeletionHistory = () => {
        {index + 1}.
      </Text>
    ),
-    "Date": (
+    "Request On": (
      <Text
        justifyContent={slideFromRight ? "right" : "left"}
        as={"span"}
@@ -91,10 +109,10 @@ const DeletionHistory = () => {
        className="d-flex align-items-center web-text-small"
        fontWeight={'500'}
      >
-        {formatDate(item.date)}
+        {formatDate(item.Requested_on)}
      </Text>
    ),
-    "Distribution Amount": (
+    "Client ID": (
      <Text
        justifyContent={slideFromRight ? "right" : "left"}
        as={"span"}
@@ -102,10 +120,10 @@ const DeletionHistory = () => {
        className="d-flex align-items-center  web-text-small"
        fontWeight={'500'}
      >
-        {item.Distribution}
+        {item.clientId}
      </Text>
    ),
-    "Charges (USD)": (
+    "First Name": (
      <Text
        justifyContent={slideFromRight ? "right" : "left"}
        as={"span"}
@@ -113,11 +131,11 @@ const DeletionHistory = () => {
        className="d-flex align-items-center web-text-small"
        fontWeight={'500'}
      >
-        {item.charge}
+        {item.firstName}
        {/* {formatDate(item.charge)} */}
      </Text>
    ),
-    Year: (
+    "Last Name": (
      <Text
        justifyContent={slideFromRight ? "right" : "left"}
        as={"span"}
@@ -125,10 +143,10 @@ const DeletionHistory = () => {
        className="d-flex align-items-center web-text-small"
        fontWeight={'500'}
      >
-        {item.year}
+        {item.lastName}
      </Text>
    ),
-    Quater: (
+    "Country": (
      <Text 
        justifyContent={slideFromRight ? "right" : "left"}
        as={"span"}
@@ -136,18 +154,31 @@ const DeletionHistory = () => {
        className="d-flex align-items-center web-text-small"
        fontWeight={'500'}
      >
-        {item.quarter}
+        {item.country}
      </Text>
    ),
-    Action: (
-      <Box display={'flex'} justifyContent={'space-around'}>
-        <Tooltip rounded={'sm'} fontSize={'xs'}  label='Accept' bg='#fff' color={'green.500'} placement="left-start">
-        <Button color="green.500"   rounded={'sm'} size={'xs'}>
-        <CheckIcon /></Button></Tooltip>
-        <Tooltip rounded={'sm'} fontSize={'xs'}  label='Reject' bg='#fff' color={'red.500'} placement="left-start">
-        <Button color="red.500" rounded={'sm'} size={'xs'}>
-        <CloseIcon /></Button></Tooltip>
-      </Box>
+    "Phone Number": (
+      <Text 
+        justifyContent={slideFromRight ? "right" : "left"}
+        as={"span"}
+        color={"gray.600"}
+        className="d-flex align-items-center web-text-small"
+        fontWeight={'500'}
+      >
+        {item.phoneNumber}
+      </Text>
+    ),
+    "Status": (
+      <Text 
+        justifyContent={slideFromRight ? "right" : "center"}
+        as={"span"}
+        color={item?.deletionStatus? "red.500": "blue.500"}
+        className="d-flex align-items-center web-text-small"
+
+        fontWeight={'600'}
+      >
+        {item.deletionStatus}
+      </Text>
    ),
  }));

@@ -187,13 +218,13 @@ const DeletionHistory = () => {
            onChange={(e) => setSearchTerm(e.target.value)}
          />

-          <HStack display={"flex"} alignItems={"center"}>
+          {/* <HStack display={"flex"} alignItems={"center"}>
            <Pagination totalItems={10} />
-          </HStack>
+          </HStack> */}
        </HStack>
      </Box>

-      <DataTable
+      <NormalTable
        emptyMessage={`We don't have any Sponers `}
        tableHeadRow={tableHeadRow}
        data={extractedArray}
--- a/src/Pages/AccountDeletion/DeletionRequest.jsx
+++ b/src/Pages/AccountDeletion/DeletionRequest.jsx
@@ -6,15 +6,20 @@ import {
  HStack,
  Input,
  Text,
+  Tooltip,
+  useDisclosure,
  useToast,
 } from "@chakra-ui/react";
 import React, { useContext, useEffect, useState } from "react";
 import { OPACITY_ON_LOAD } from "../../Layout/animations";
-import DataTable from "../../Components/DataTable/DataTable";
+import NormalTable from "../../Components/DataTable/NormalTable";
 import Pagination from "../../Components/Pagination";
 import GlobalStateContext from "../../Contexts/GlobalStateContext";
 import CustomAlertDialog from "../../Components/CustomAlertDialog";
 import { formatDate } from "../../Components/Functions/UTCConvertor";
+import { CheckIcon, CloseIcon } from "@chakra-ui/icons";
+import DeletionRequestApprove from "./DeletionRequestApprove";
+import { useGetDeleteRequestQuery } from "../../Services/delete.request.service";
 // import { formatDate } from "../../Components/Functions/UTCConvertor";

 const DeletionRequest = () => {
@@ -28,6 +33,32 @@ const DeletionRequest = () => {
  const [mouseEntered, setMouseEntered] = useState(false);
  const [mouseEnteredId, setMouseEnteredId] = useState("");

+  const formatDate = (date) => {
+    return new Date(date).toLocaleDateString("en-GB", {
+      day: "2-digit",
+      month: "2-digit",
+      year: "numeric",
+    });
+  };
+
+  const {
+    data,
+    isLoading: DeletionLoading
+  } = useGetDeleteRequestQuery()
+
+
+ const {
+    isOpen: isConfirmOpen,
+    onOpen: onConfirmOpen,
+    onClose: onConfirmClose,
+  } = useDisclosure();
+
+  const {
+    isOpen: isRejectOpen,
+    onOpen: onRejectOpen,
+    onClose: onRejectClose,
+  } = useDisclosure();
+
  useEffect(() => {
    // Simulate loading
    const timer = setTimeout(() => {
@@ -39,9 +70,9 @@ const DeletionRequest = () => {
  }, []);

  // ====================================================[Table Filter]================================================================
-  const filteredData = deleteRequest.filter((item) => {
+  const filteredData = data?.data?.rows?.filter((item) => {
    // Filter by name (case insensitive)
-    const name = item.Distribution;
+    const name = item?.firstName;
    const searchLower = searchTerm.toLowerCase();
    const nameMatches = name.toLowerCase().includes(searchLower);

@@ -60,19 +91,21 @@ const DeletionRequest = () => {
  // ====================================================[Table Setup]================================================================
  const tableHeadRow = [
    "Sr No.",
-    "Date",
-    "Distribution Amount",
-    "Charges (USD)",
-    "Year",
-    "Quater",
-    "Amount",
+    "Requested on",
+    "Client ID",
+    "First name",
+    "Last name",
+    "Country",
+    "Phone number",
+    "Status",
+    "Action"
  ];

  const extractedArray = filteredData?.map((item, index) => ({
    id: item?.id,
    "Sr No.": (
      <Text
-        justifyContent={slideFromRight ? "right" : "left"}
+        justifyContent={"left"}
        as={"span"}
        color={"gray.800"}
        className="d-flex align-items-center web-text-small"
@@ -81,74 +114,112 @@ const DeletionRequest = () => {
        {index + 1}.
      </Text>
    ),
-    "Date": (
+    "Requested on": (
      <Text
-        justifyContent={slideFromRight ? "right" : "left"}
+        justifyContent={"left"}
        as={"span"}
        color={"gray.600"}
        className="d-flex align-items-center web-text-small"
        fontWeight={'500'}
      >
-        {formatDate(item.date)}
+        {formatDate(item?.Requested_on)}
      </Text>
    ),
-    "Distribution Amount": (
+    "Client ID": (
      <Text
-        justifyContent={slideFromRight ? "right" : "left"}
+        justifyContent={"left"}
        as={"span"}
        color={"gray.600"}
-        className="d-flex align-items-center web-text-small"
+        className="d-flex align-items-center  web-text-small"
        fontWeight={'500'}
      >
-        {item.Distribution}
+        {item?.clientId}
      </Text>
    ),
-    "Charges (USD)": (
+    "First name": (
      <Text
-        justifyContent={slideFromRight ? "right" : "left"}
+        justifyContent={"left"}
        as={"span"}
        color={"gray.800"}
        className="d-flex align-items-center web-text-small"
        fontWeight={'500'}
      >
-        {item.charge}
+        {item?.firstName}
        {/* {formatDate(item.charge)} */}
      </Text>
    ),
-    Year: (
+    "Last name": (
      <Text
-        justifyContent={slideFromRight ? "right" : "left"}
+        justifyContent={"left"}
        as={"span"}
        color={"gray.800"}
        className="d-flex align-items-center web-text-small"
        fontWeight={'500'}
      >
-        {item.year}
+        {item?.lastName}
      </Text>
    ),
-    Quater: (
+    Country: (
      <Text
-        justifyContent={slideFromRight ? "right" : "left"}
+        justifyContent={"left"}
        as={"span"}
        color={"gray.600"}
        className="d-flex align-items-center web-text-small"
        fontWeight={'500'}
      >
-        {item.quater}
+        {item?.country}
      </Text>
    ),

-    Amount: (
+    "Phone number": (
      <Text
-        justifyContent={slideFromRight ? "right" : "left"}
+        justifyContent={"left"}
        as={"span"}
        color={"gray.600"}
        className="d-flex align-items-center web-text-small"
        fontWeight={'500'}
      >
-        {item.amount}
+        {item?.phoneNumber}
      </Text>
    ),
+    Status:(<Box w={"auto"} display={'flex'} alignItems={'center'} isTruncated={true}>
+        <Text
+        as={'span'}
+          fontWeight={"700"}
+          textTransform={"none"}
+          color={item.kycStatus ? "blue.500" : "red.500"}
+          // px={2}
+          py={0.5}
+          variant={'solid'}
+
+        >
+          {item.KYCStatus ? "Completed" : "Not complete"}
+        </Text>
+      </Box>),
+
+    Action: (
+      <Box display={"flex"} justifyContent={"center"} gap={2}>
+          <Button
+            // colorScheme="forestGreen"
+            // color="green.500"
+            rounded={"sm"}
+            size={"xs"}
+            textTransform={"inherit"}
+            fontWeight={500}
+            px={2}
+            py={1}
+            onClick={() => {
+              setActionId(item.id);
+              onConfirmOpen();
+            }}
+            colorScheme="green"
+            variant={"outline"}
+            cursor={"pointer"}
+          >
+            Review
+          </Button>
+      </Box>
+    ),
  }));

  const handleDelete = () => {
@@ -187,17 +258,17 @@ const DeletionRequest = () => {
            onChange={(e) => setSearchTerm(e.target.value)}
          />

-          <HStack display={"flex"} alignItems={"center"}>
+          {/* <HStack display={"flex"} alignItems={"center"}>
            <Pagination totalItems={10} />
-          </HStack>
+          </HStack> */}
        </HStack>
      </Box>

-      <DataTable
+      <NormalTable
        emptyMessage={`We don't have any Sponers `}
        tableHeadRow={tableHeadRow}
        data={extractedArray}
-        isLoading={isLoading}
+        isLoading={DeletionLoading}
        viewActionId={actionId}
        setViewActionId={setActionId}
        // totalPages={10}
@@ -213,6 +284,22 @@ const DeletionRequest = () => {
        alertHandler={handleDelete}
        isLoading={isLoading}
      />
+
+
+<DeletionRequestApprove
+        data={deleteRequest}
+        isOpen={isConfirmOpen}
+        onClose={onConfirmClose}
+        id={actionId}
+      // firstField={firstField}
+      />
+
+
+{/* <DepositRequestReject
+        isOpen={isRejectOpen}
+        onClose={onRejectClose}
+        id={actionId} 
+      /> */}
    </Box>
  );
 };
--- a/src/Pages/AccountDeletion/DeletionRequestApprove.jsx
+++ b/src/Pages/AccountDeletion/DeletionRequestApprove.jsx
@@ -0,0 +1,207 @@
+import {
+  Badge,
+  Box,
+  Button,
+  FormControl,
+  FormLabel,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+  Textarea,
+  useDisclosure,
+  useToast,
+} from "@chakra-ui/react";
+import React, { useEffect, useState } from "react";
+import * as yup from "yup";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { useForm } from "react-hook-form";
+import { useGetDepositRequestByIdQuery, useGetDepositRequestQuery, useUpdateDepositRequestMutation } from "../../Services/deposit.request.service";
+import FullscreenLoaders from "../../Components/Loaders/FullscreenLoaders";
+import ToastBox from "../../Components/ToastBox";
+import { useGetDrawalRequestQuery } from "../../Services/drawal.request.service";
+import { useApproveDepositRequestMutation, useGetDeleteRequestByIdQuery } from "../../Services/delete.request.service";
+
+const FILE_TYPES = ["image/jpeg", "image/png", "image/gif"];
+
+export const conformModalSchema = yup.object().shape({
+  adminComment: yup.string().notRequired(),
+});
+
+const DeletionRequestApprove = ({ isOpen, onClose, firstField, id, data:requestData }) => {
+  const toast = useToast()
+  const [file, setFile] = useState();
+  const [isBtnLoading , setIsBtnLoading] = useState(false)
+  const [isBtnLoadingReject , setIsBtnLoadingReject] = useState(false)
+  const [isReject , setIsReject] = useState(false)
+
+  const fileredData = requestData?.find((item)=> item?.id === id)
+  const [ updateApproveRequest ] = useApproveDepositRequestMutation()
+    const { data, isLoading } = useGetDeleteRequestByIdQuery(id, {
+    skip: !id,
+  });
+
+
+  const {
+    register,
+    reset,
+    handleSubmit,
+    formState: { errors },
+  } = useForm({
+    resolver: yupResolver(conformModalSchema),
+  });
+
+  useEffect(() => {
+    reset({
+      comment:fileredData?.comment
+    })
+  
+   
+  }, [requestData, id])
+  
+  const onSubmit = async(data) => {
+    setIsBtnLoading(isReject?false:true)
+    setIsBtnLoadingReject(isReject)
+    const approveReq = {
+      adminComment:data?.adminComment,
+      deletionStatus: isReject?"Reject": "Approved"
+    }
+
+  try {
+    const res = await updateApproveRequest({ id ,data:approveReq })
+
+
+    if (res?.error) {
+      toast({
+        render: () => (
+          <ToastBox message={res?.error?.data?.message} status={"error"} />
+        ),
+      });
+      heandleOnClose()
+    }else if(res?.data?.statusCode === 200) {
+      toast({
+        render: () => (
+          <ToastBox message={res?.data?.message} />
+        ),
+      });
+      heandleOnClose()
+    } 
+    
+  } catch (error) {
+ 
+  }
+
+  };
+
+  const onReject = () => {
+
+  }
+
+
+
+  useEffect(() => {
+    if (data) {
+      reset({
+        comment: data?.data?.comment,
+      });
+    }
+  }, [data, reset]);
+
+  const heandleOnClose = () =>{
+    reset()
+    onClose()
+    setIsBtnLoading(false)
+    setIsReject(false)
+    setIsBtnLoadingReject(false)
+  }
+
+  return (
+    <Modal isOpen={isOpen} onClose={heandleOnClose} initialFocusRef={firstField}>
+      <ModalOverlay />
+
+      <ModalContent pb={4}>
+        {/* <ModalHeader fontSize={"md"}>Confirm</ModalHeader> */}
+        <ModalCloseButton />
+        {isLoading ? (
+          <FullscreenLoaders height={"50vh"} />
+        ) : (
+          <Box as="form" onSubmit={handleSubmit(onSubmit)}>
+            <ModalBody>
+              <FormControl mt={6} mb={4}>
+                <FormLabel fontSize="sm">Investor Comment <Badge colorScheme="green">{fileredData?.currencyCode}</Badge></FormLabel>
+                {/* <Textarea
+                  focusBorderColor="green.400"
+                  name="comment"
+                  {...register("comment")}
+                  fontSize="sm"
+                  type="text"
+                  size="sm"
+                  readOnly
+                  rows={5}
+                />
+                {errors.comment && (
+                  <Text fontSize="xs" color="red">
+                    {errors.comment.message}
+                  </Text>
+                )} */}
+
+
+                <Text fontSize="sm" fontWeight={500} color={'gray.600'}>{data?.data?.comment}</Text>
+              </FormControl>
+              <FormControl mb={4} isRequired>
+                <FormLabel fontSize="sm">Admin Comment</FormLabel>
+                <Textarea
+                  rows={5}
+                  focusBorderColor="green.400"
+                  name="adminComment"
+                  {...register("adminComment")}
+                  fontSize="sm"
+                  type="textarea"
+                  size="sm"
+                  placeholder={"Enter your comments...."}
+                  resize={"none"}
+                />
+                {errors.adminComment && (
+                  <Text fontSize="xs" color="red">
+                    {errors.adminComment.message}
+                  </Text>
+                )}
+              </FormControl>
+            </ModalBody>
+            <ModalFooter>
+              <Button
+                colorScheme="red"
+                mr={3}
+                type="submit"
+                size={"sm"}
+                rounded={"sm"}
+                variant={'ghost'}
+                onClick={()=> setIsReject(true)}
+                isLoading={isBtnLoadingReject}
+              >
+                Reject
+              </Button>
+              <Button
+                colorScheme="forestGreen"
+                variant="solid"
+                size={"sm"}
+                rounded={"sm"}
+                isLoading={isBtnLoading}
+                type="submit"
+              >
+                Approve
+              </Button>
+            </ModalFooter>
+          </Box>
+        )}
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default DeletionRequestApprove;
--- a/src/Pages/AccountDeletion/DeletionRequestReject.jsx
+++ b/src/Pages/AccountDeletion/DeletionRequestReject.jsx
@@ -0,0 +1,158 @@
+import {
+  Box,
+  Button,
+  FormControl,
+  FormLabel,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+  Textarea,
+  useDisclosure,
+  useToast,
+} from "@chakra-ui/react";
+import React, { useEffect, useState } from "react";
+import * as yup from "yup";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { useForm } from "react-hook-form";
+import { useDepositRejectMutation } from "../../../Services/deposit.request.service";
+import ToastBox from "../../../Components/ToastBox";
+
+export const conformModalSchema = yup.object().shape({
+  comments: yup.string().required("Comment is required"),
+});
+
+const DeletionRequestReject = ({ isOpen, onClose, firstField ,id}) => {
+  const [isBtnLoading , setIsBtnLoading] = useState(false)
+  const toast = useToast()
+  const {
+    register,
+    reset,
+    handleSubmit,
+    formState: { errors },
+  } = useForm({
+    resolver: yupResolver(conformModalSchema),
+  });
+  const [ depositReject ] = useDepositRejectMutation()
+  const onSubmit = async(data) => {
+    setIsBtnLoading(true)
+    try {
+      const res = await depositReject({ id ,data})
+  
+      if (res?.error) {
+        toast({
+          render: () => (
+            <ToastBox message={res?.error?.data?.message} status={"error"} />
+          ),
+        });
+        setIsBtnLoading(false)
+        onClose();
+        
+      }else if(res?.data?.statusCode === 200) {
+        toast({
+          render: () => (
+            <ToastBox message={res?.data?.message} />
+          ),
+        });
+        setIsBtnLoading(false)
+        onClose();
+        
+      } 
+      
+    } catch (error) {
+      console.log(error);
+      
+    }
+
+  };
+
+  const handleFileChange = (event) => {
+    const selectedFile = event.target.files[0];
+    setFile(selectedFile);
+  };
+
+
+  const { data, isLoading } = 
+  (id, {
+    skip: !id,
+  });
+
+  useEffect(() => {
+    if (data) {
+      reset({
+        investorAmount: data?.data?.investorAmount,
+      });
+    }
+  }, [data, reset]);
+
+  const heandleOnClose = () =>{
+    reset()
+    onClose()
+  }
+
+  return (
+    <Modal isOpen={isOpen} onClose={heandleOnClose} initialFocusRef={firstField}>
+      <ModalOverlay />
+      <ModalContent pb={4}>
+        <ModalHeader fontSize={"md"}>Reject</ModalHeader>
+        <ModalCloseButton />
+        {isLoading ? (
+          <FullscreenLoaders height={"50vh"} />
+        ) : (
+        <Box as="form" onSubmit={handleSubmit(onSubmit)}>
+          <ModalBody>
+            <FormControl mb={4} isRequired>
+              <FormLabel fontSize="sm">Comment</FormLabel>
+              <Textarea
+                rows={6}
+                focusBorderColor="green.400"
+                name="comments"
+                {...register("comments")}
+                fontSize="sm"
+                type="textarea"
+                size="md"
+                placeholder={"Enter your comments...."}
+                rounded={"md"}
+                resize={"none"}
+              />
+              {errors.comments && (
+                <Text fontSize="xs" color="red">
+                  {errors.comments.message}
+                </Text>
+              )}
+            </FormControl>
+          </ModalBody>
+          <ModalFooter>
+            <Button
+              colorScheme="gray"
+              mr={3}
+              onClick={onClose}
+              size={"sm"}
+              rounded={"sm"}
+            >
+              Cancel
+            </Button>
+            <Button
+              colorScheme="forestGreen"
+              variant="solid"
+              size={"sm"}
+              rounded={"sm"}
+              isLoading={isBtnLoading}
+              type="submit"
+            >
+              Send
+            </Button>
+          </ModalFooter>
+        </Box>
+        )}
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default DeletionRequestReject;
--- a/src/Pages/AccountDeletion/InvestorComment.jsx
+++ b/src/Pages/AccountDeletion/InvestorComment.jsx
@@ -0,0 +1,85 @@
+import {
+  Box,
+  Button,
+  FormControl,
+  FormLabel,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Textarea,
+} from "@chakra-ui/react";
+import React from "react";
+
+const InvestorComment = ({ isOpen, onClose }) => {
+  return (
+    <div>
+      <Modal isOpen={isOpen} onClose={onClose}>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader fontSize={"md"}></ModalHeader>
+          <ModalCloseButton />
+          <Box as="form">
+            <ModalBody>
+              <FormControl mb={5}>
+                <FormLabel fontSize="sm">Investor Comment</FormLabel>
+                <Textarea
+                  rows={6}
+                  focusBorderColor="green.400"
+                  name="fileName"
+                  // {...register("fileName")}
+                  fontSize="sm"
+                  type="textarea"
+                  size="md"
+                  placeholder={"The amount of investment is not updated... "}
+                  rounded={"md"}
+                  resize={"none"}
+                />
+              </FormControl>
+              <FormControl mb={4}>
+                <FormLabel fontSize="sm">Admin Commment</FormLabel>
+                <Textarea
+                  rows={6}
+                  focusBorderColor="green.400"
+                  name="fileName"
+                  // {...register("fileName")}
+                  fontSize="sm"
+                  type="textarea"
+                  size="md"
+                  placeholder={"Enter your comment...."}
+                  rounded={"md"}
+                  resize={"none"}
+                />
+              </FormControl>
+            </ModalBody>
+            <ModalFooter pb={8}>
+              <Button
+                colorScheme="gray"
+                mr={3}
+                onClick={onClose}
+                size={"sm"}
+                rounded={"sm"}
+              >
+                Reject
+              </Button>
+              <Button
+                colorScheme="forestGreen"
+                variant="solid"
+                size={"sm"}
+                rounded={"sm"}
+                fontWeight={500}
+              >
+                Approve
+              </Button>
+            </ModalFooter>
+          </Box>
+        </ModalContent>
+      </Modal>
+    </div>
+  );
+};
+
+export default InvestorComment;
--- a/src/Pages/Admin/BankDetails/BankDetails.jsx
+++ b/src/Pages/Admin/BankDetails/BankDetails.jsx
@@ -5,14 +5,6 @@ import {
  Button,
  HStack,
  Input,
-  Menu,
-  MenuButton,
-  MenuItem,
-  MenuList,
-  Portal,
-  Select,
-  Switch,
-  Tag,
  Text,
  Tooltip,
  useDisclosure,
@@ -22,11 +14,7 @@ import React, { useContext, useEffect, useState, useRef } from "react";
 import { HiDotsVertical } from "react-icons/hi";
 import { Link, Link as RouterLink, useNavigate } from "react-router-dom";
 import {
-  AddIcon,
-  DeleteIcon,
  EditIcon,
-  EmailIcon,
-  ViewIcon,
 } from "@chakra-ui/icons";
 import { OPACITY_ON_LOAD } from "../../../Layout/animations";
 import DataTable from "../../../Components/DataTable/DataTable";
@@ -36,6 +24,7 @@ import CustomAlertDialog from "../../../Components/CustomAlertDialog";
 import ToastBox from "../../../Components/ToastBox";
 import { debounce } from "../../Master/Sponser/AddSponser";
 import { useGetBankQuery } from "../../../Services/bank.details.service";
+import NormalTable from '../../../Components/DataTable/NormalTable'

 const formatDate = (date) => new Date(date).toLocaleDateString(); // Simple date formatter

@@ -116,7 +105,7 @@ const BankDetails = () => {
  });
  

-  const extractedArray = filteredData?.map((item) => ({
+  const extractedArray = filteredData?.map((item,index) => ({
    id: item?.id,
    "Sr N/O": (
      <Text
@@ -131,18 +120,18 @@ const BankDetails = () => {
    "Country name": (
      <Box w={"auto"} isTruncated={true}>
        <Text as={"span"} color={"teal.900"}>
-          {item.country_xid}
+          {item?.country?.countryName}
        </Text>
      </Box>
    ),
    "Account Name": (
      <Box w={"auto"} isTruncated={true}>
        <Text as={"span"} color={"teal.900"}>
-          {item.accountName}
+          {item?.accountName}
        </Text>
      </Box>
    ),
-    "Account No ": (
+    "Account No": (
      <Box w={"auto"} isTruncated={true}>
        <Text as={"span"} color={"teal.900"}>
          {item?.accountNumber}
@@ -157,16 +146,17 @@ const BankDetails = () => {
      </Box>
    ),
    Action: (
-      <Box display={"flex"} justifyContent={"space-between"} gap={2}>
+      <Box display={"flex"} justifyContent={"space-between"}>
        <Tooltip
          rounded={"sm"}
          fontSize={"xs"}
-          label="View"
+          label="Edit"
          bg="#fff"
          color={"green.500"}
          placement="top"
        >
          <Button
+            bg={index % 2 === 0 ? "#6311cb14" : "#fff"}
            onClick={() => {
              navigate(`/bank-details/edit-bank-details/${item.id}`);
            }}
@@ -227,8 +217,8 @@ const BankDetails = () => {
        </HStack>
      </Box>

-      <DataTable
-        emptyMessage={`We don't have any Sponers `}
+      <NormalTable
+        emptyMessage={`We don't have any Details`}
        tableHeadRow={tableHeadRow}
        data={extractedArray}
        isLoading={isLoading}
--- a/src/Pages/Admin/BankDetails/EditBankDetails.jsx
+++ b/src/Pages/Admin/BankDetails/EditBankDetails.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import { OPACITY_ON_LOAD } from "../../../Layout/animations";
 import { Box, useToast } from "@chakra-ui/react";
 import { useForm } from "react-hook-form";
@@ -10,7 +10,8 @@ import FullscreenLoaders from "../../../Components/Loaders/FullscreenLoaders";
 import CustomAlertDialog from "../../../Components/CustomAlertDialog";
 import SwitchButton from "../../../Components/SwitchButton";
 import * as yup from "yup";
-import { useGetBankQuery, useUpdateBankDetailsMutation } from "../../../Services/bank.details.service";
+import { useGetBankDetailsQuery,useUpdateBankDetailsMutation } from "../../../Services/bank.details.service";
+import GlobalStateContext from "../../../Contexts/GlobalStateContext";
 // import { useUpdateBankDetailsMutation, useGetBankQuery } from "../../../Services/investorDetails.service";

 const editBankSchema = yup.object().shape({
@@ -28,12 +29,17 @@ const EditBankDetails = () => {
  const id = params?.id;

  const [isLoadingBtn, setIsLoadingBtn] = useState(false);
+  const { InvestorDetails, setInvestorDetails, slideFromRight } =
+  useContext(GlobalStateContext); 
  const [alert, setAlert] = useState(false);
  const [form, setForm] = useState({});
  const [isSwitchOn, setIsSwitchOn] = useState(false);

  const [updateBankDetails] = useUpdateBankDetailsMutation();
-  const { data: bankDetails, error, isLoading } = useGetBankQuery({ id }, { skip: !id });
+  const { data: bankDetails, error, isLoading, refetch } = useGetBankDetailsQuery({ id }, { skip: !id });
+
+  console.log(bankDetails);
+  

  const {
    control,
@@ -45,16 +51,22 @@ const EditBankDetails = () => {
  });

  useEffect(() => {
-    if (bankDetails) {
+    setInvestorDetails({
+      ...bankDetails?.data,
+    });
+    // refetch()
+    if (bankDetails?.data) {
      reset({
-        accountNumber: bankDetails.accountNumber,
-        swiftCode: bankDetails.swiftCode,
-        bankName: bankDetails.bankName,
-        bankAddress: bankDetails.bankAddress,
-        IBANnumber: bankDetails.IBANnumber,
+        accountName: bankDetails?.data?.accountName,
+        countryName: bankDetails?.data?.countryName,
+        accountNumber: bankDetails?.data?.accountNumber,
+        swiftCode: bankDetails?.data?.swiftCode,
+        bankName: bankDetails?.data?.bankName,
+        bankAddress: bankDetails?.data?.bankAddress,
+        IBANnumber: bankDetails?.data?.IBANnumber,
      });
    }
-  }, [bankDetails, reset]);
+  }, [bankDetails, reset,id]);

  if (isLoading) {
    return <FullscreenLoaders />;
@@ -62,7 +74,6 @@ const EditBankDetails = () => {

  const handleConfirm = async () => {
    setIsLoadingBtn(true);
-
    try {
      const formData = {
        ...form,
@@ -77,6 +88,7 @@ const EditBankDetails = () => {

        setIsLoadingBtn(false);
        setAlert(false);
+        refetch()
        navigate("/bank-details");
      } else {
        throw new Error("Something went wrong");
@@ -91,66 +103,76 @@ const EditBankDetails = () => {
    }
  };

+  console.log(bankDetails?.accountNumber);
+  
+
  const formEditFields = [
-    {
-      label: "Country Name",
-      placeHolder: "Enter country name",
-      name: "countryName",
-      type: "text",
-      isRequired: true,
-      section: "Add Details",
-      maxLength: 50,
-      width: "32%",
-    },
+    // {
+    //   label: "Country Name",
+    //   placeHolder:"",
+    //   name: "countryName",
+    //   type: "text",
+    //    isRequired: true,
+    //   section: "Add Details",
+    //   maxLength: 50,
+    //   width: "32%",
+    // },
    {
      label: "Account Name",
+      // value:bankDetails?.accountName,
      name: "accountName",
-      placeHolder: "Enter account name",
+      placeHolder: "",
      type: "text",
      isRequired: true,
      section: "Add Details",
-      maxLength: 255,
+      // maxLength: 255,
      width: "32%",
    },
    {
-      label: "Account Number *",
+      label: "Account Number",
      name: "accountNumber",
-      placeHolder: "Enter account number",
+      placeHolder: "",
      type: "text",
      section: "Add Details",
      width: "32%",
+      isRequired: true,
    },
    {
      label: "IBAN Number",
      name: "IBANnumber",
-      placeHolder: "Enter IBAN number",
+      placeHolder: "",
      type: "text",
      section: "Add Details",
      width: "32%",
+      isRequired: true,
    },
    {
      label: "SWIFT Code",
+      value: bankDetails?.data?.swiftCode,
      name: "swiftCode",
-      placeHolder: "Enter SWIFT code",
+      placeHolder: "",
      type: "text",
      section: "Add Details",
      width: "32%",
+      isRequired: true,
    },
    {
      label: "Bank Name",
      name: "bankName",
-      placeHolder: "Enter bank name",
+      placeHolder: "",
      type: "text",
      section: "Add Details",
      width: "32%",
+      isRequired: true,
    },
    {
      label: "Bank Address",
      name: "bankAddress",
-      placeHolder: "Enter bank address",
+      placeHolder: "",
      type: "text",
      section: "Add Details",
      width: "32%",
+      isRequired: true,
    },
  ];

@@ -163,7 +185,7 @@ const EditBankDetails = () => {
    return groups;
  }, {});

-  const onSubmit = (data) => {
+  const onSubmit = async(data) => {
    if (!Object.keys(errors).length) {
      setForm(data);
      setAlert(true);
--- a/src/Pages/Admin/Contact.jsx
+++ b/src/Pages/Admin/Contact.jsx
@@ -20,14 +20,35 @@ import { v4 as uuidv4 } from "uuid";
 import GlobalStateContext from "../../Contexts/GlobalStateContext";
 import { OPACITY_ON_LOAD } from "../../Layout/animations";
 import FormInputMain from "../../Components/FormInputMain";
-import { useGetContactQuery, useUpdateContactMutation } from "../../Services/contact.service";
+import {
+  useGetContactQuery,
+  useUpdateContactMutation,
+} from "../../Services/contact.service";
 import FullscreenLoaders from "../../Components/Loaders/FullscreenLoaders";
 import ToastBox from "../../Components/ToastBox";

 export const addSponser = yup.object().shape({
-  phoneNumber: yup.string().required("Phone Number is required"),
-  emailAddress: yup.string().required("E-mail ID is required"),
-  websiteUrl: yup.string().required("Website URL is required"),
+  phoneNumber: yup
+    .string()
+    .required("Phone Number is required"),
+    // .matches(
+    //   /^\+?[1-9]\d{1,14}$/,
+    //   "Phone Number must include a valid ISD code and be in E.164 format"
+    // ),
+  emailAddress: yup
+    .string()
+    .required("E-mail ID is required")
+    .matches(
+      /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
+      "Invalid email address"
+    ),
+  websiteUrl: yup
+    .string()
+    .required("Website URL is required")
+    .matches(
+      /^(https?:\/\/)?([\w.-]+)+(:\d+)?(\/[\w.-]*)*\/?$/,
+      "Invalid URL format"
+    ),
 });

 export function debounce(func, delay) {
@@ -39,10 +60,10 @@ export function debounce(func, delay) {
 }

 const Contact = () => {
-  const toast = useToast()
+  const toast = useToast();
  const navigate = useNavigate();
  const [form, setForm] = useState({});
-  const [ isLoading, setIsLoading ] = useState(false)
+  const [isLoading, setIsLoading] = useState(false);

  // const { sponser, setSponser } = useContext(GlobalStateContext);
  const {
@@ -52,16 +73,17 @@ const Contact = () => {
    formState: { errors },
  } = useForm({
    resolver: yupResolver(addSponser),
+    // mode: all
  });

-
+  console.log(errors);
+  
  const {
    data: contact,
    isLoading: contactLoading,
    error,
  } = useGetContactQuery();
-  const [ updateContact ] = useUpdateContactMutation()
-
+  const [updateContact] = useUpdateContactMutation();

  useEffect(() => {
    if (contact) {
@@ -84,7 +106,7 @@ const Contact = () => {
      name: "phoneNumber",
      type: "text",
      isRequired: true,
-      section: "Add Details",
+      section:"",
      // value: contact?.phoneNumber || "",
    },
    {
@@ -93,7 +115,7 @@ const Contact = () => {
      placeHolder: " ",
      type: "text",
      isRequired: true,
-      section: "Add Details",
+      section:"",
      // value: contact?.emailAddress || "",
    },
    {
@@ -102,7 +124,7 @@ const Contact = () => {
      placeHolder: " ",
      type: "text",
      isRequired: true,
-      section: "Add Details",
+      section:"",
      // value: contact?.websiteUrl || "",
    },
  ];
@@ -117,24 +139,20 @@ const Contact = () => {
  }, {});

  const onSubmit = async (data) => {
-    setIsLoading(true)
+    setIsLoading(true);
    try {
-      const res = await updateContact(data)
+      const res = await updateContact(data);
      if (res?.data?.statusCode === 200) {
        toast({
          render: () => <ToastBox message={res?.data?.message} />,
        });
-        setIsLoading(false)
+        setIsLoading(false);
      }
-      
    } catch (error) {
      console.log(error);

-      setIsLoading(false)
-      
-      
+      setIsLoading(false);
    }
-    
  };

  return (
--- a/src/Pages/Admin/Investor/BankInvestor/BankInvestor.jsx
+++ b/src/Pages/Admin/Investor/BankInvestor/BankInvestor.jsx
@@ -0,0 +1,360 @@
+import {
+  Avatar,
+  Badge,
+  Box,
+  HStack,
+  Input,
+  Select,
+  Switch,
+  Text,
+  useDisclosure,
+  useToast,
+} from "@chakra-ui/react";
+import React, { useContext, useEffect, useState, useRef } from "react";
+import { Link, Link as RouterLink, useNavigate } from "react-router-dom";
+import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
+import { debounce } from "../../../Master/Sponser/AddSponser";
+import { OPACITY_ON_LOAD } from "../../../../Layout/animations";
+import NormalTable from "../../../../Components/DataTable/NormalTable";
+import CustomAlertDialog from "../../../../Components/CustomAlertDialog";
+import Pagination from "../../../../Components/Pagination";
+import ToastBox from "../../../../Components/ToastBox";
+import ReasonBanModal from "./ReasonBanModal";
+import { useGetbanInvestorQuery } from "../../../../Services/ban.investor.service";
+import { TABLE_PAGINATION } from "../../../../Constants/Paginations";
+
+const formatDate = (date) => new Date(date).toLocaleDateString(); // Simple date formatter
+
+const BankInvestor = () => {
+  const navigate = useNavigate();
+  const toast = useToast();
+  const thirdField = useRef();
+  const { bankInvestor, setBankInvestor, slideFromRight } =
+    useContext(GlobalStateContext);
+  const [isLoading, setIsLoading] = useState(true);
+  const [deleteAlert, setDeleteAlert] = useState(false);
+  const [actionId, setActionId] = useState(false);
+  const [mouseEntered, setMouseEntered] = useState(false);
+  const [mouseEnteredId, setMouseEnteredId] = useState("");
+  const { isOpen: isOpen, onOpen: onOpen, onClose: onClose } = useDisclosure();
+
+  const formatDate = (date) => {
+    return new Date(date).toLocaleDateString("en-GB", {
+      day: "2-digit",
+      month: "2-digit",
+      year: "numeric",
+    });
+  };
+
+  // =========================== [Use State] =============================
+  const [pageSize, setPageSize] = useState(TABLE_PAGINATION?.size);
+  const [currentPage, setCurrentPage] = useState(TABLE_PAGINATION?.page);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [debouncedSearchTerm, setDebouncedSearchTerm] = useState("");
+
+  const [status, setStatus] = useState("");
+  const [kyc, setKyc] = useState("");
+  const [country, setCountry] = useState("");
+
+  // Debounce the search term to avoid making a request on every keystroke
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedSearchTerm(searchTerm);
+    }, 500); // Adjust delay as needed
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [searchTerm]);
+
+  const {
+    data,
+    isLoading: unbanLoading,
+    error,
+    refetch,
+  } = useGetbanInvestorQuery(
+    {
+      page: debouncedSearchTerm ? undefined : currentPage, // Omit pagination for search
+      size: debouncedSearchTerm ? undefined : pageSize, // Omit pagination for search
+      search: debouncedSearchTerm,
+      KYCStatus: kyc,
+      country_xid: country,
+    },
+    {
+      skip: debouncedSearchTerm === "" && searchTerm !== "", // Skip if search is empty and it's not the initial request
+    }
+  );
+
+  useEffect(() => {
+    // Simulate loading
+    const timer = setTimeout(() => {
+      setIsLoading(false);
+    }, 1500);
+
+    // Cleanup the timer on component unmount
+    return () => clearTimeout(timer);
+  }, []);
+
+  // ====================================================[Table Setup]================================================================
+  const tableHeadRow = [
+    "Sr N/O",
+    "Date",
+    "Client ID",
+    "First Name",
+    "Last Name",
+    "Country",
+    "Phone Number",
+    "E-mail ID",
+    "KYC Status",
+    "Action",
+  ];
+
+  const handleUpdateStatus = debounce((id) => {
+    setBankInvestor((prevData) =>
+      prevData.map((bankInvestor) =>
+        bankInvestor.id === id ? { ...bankInvestor } : bankInvestor
+      )
+    );
+    toast({
+      render: () => <ToastBox message={"Status changed succesfully.!"} />,
+    });
+  }, 300);
+
+  // ====================================================[Table Filter]================================================================
+  const filteredData = data?.data?.rows?.filter((item) => {
+    // Filter by name (case insensitive)
+    const name = item?.clientReference_id;
+    const searchLower = searchTerm.toLowerCase();
+    const nameMatches = name?.toLowerCase().includes(searchLower);
+
+    // Filter by status
+    // const status = item.status;
+    // const statusLower = status ? "active" : "inactive";
+
+    // const statusMatches =
+    //   statusFilter === "all" ||
+    //   (statusFilter === "active" && status === true) ||
+    //   (statusFilter === "inactive" && status === false);
+
+    return nameMatches;
+  });
+
+  const extractedArray = data?.data?.rows?.map((item) => ({
+    id: item?.id,
+    "Sr N/O": (
+      <Text
+        justifyContent={slideFromRight ? "right" : "left"}
+        as={"span"}
+        color={"gray.600"}
+        className="d-flex align-items-center fw-bold web-text-small"
+      >
+        {item.id}
+      </Text>
+    ),
+    Date: (
+      <Box w={"auto"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {formatDate(item?.date)}
+        </Text>
+      </Box>
+    ),
+    "Client ID": (
+      <Box w={"auto"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {item?.clientReference_id}
+        </Text>
+      </Box>
+    ),
+    "First Name": (
+      <Box w={"auto"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {item?.firstName}
+        </Text>
+      </Box>
+    ),
+    "Last Name": (
+      <Box w={"auto"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {item?.lastName}
+        </Text>
+      </Box>
+    ),
+    Country: (
+      <Box w={"auto"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {item?.country}
+        </Text>
+      </Box>
+    ),
+    "Phone Number": (
+      <Box w={"auto"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {item?.phoneNumber}
+        </Text>
+      </Box>
+    ),
+    "E-mail ID": (
+      <Box w={"auto"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {item?.emailAddress}
+        </Text>
+      </Box>
+    ),
+    "KYC Status": (
+      <Box w={"auto"} isTruncated={true}>
+        <Badge
+          fontWeight={"500"}
+          textTransform={"none"}
+          color={item?.KYCStatus === false ? "red" : "blue"}
+          px={2}
+          py={0.5}
+          variant={"ghost"}
+        >
+          {item?.KYCStatus === true ? "Completed" : "Incompleted"}
+        </Badge>
+      </Box>
+    ),
+    Action: (
+      <Box w={"auto"} isTruncated={true}>
+        <Badge
+          cursor={"pointer"}
+          fontWeight={"500"}
+          textTransform={"none"}
+          colorScheme={"red"}
+          px={2}
+          py={0.5}
+          onClick={() => {
+            setActionId(item?.id);
+            onOpen();
+          }}
+        >
+          Ban Investor
+        </Badge>
+      </Box>
+    ),
+  }));
+
+  console.log(extractedArray);
+
+  const handleDelete = () => {
+    const updatedInvestorDetails = InvestorDetails.filter(
+      (sponsor) => sponsor.id !== actionId
+    );
+
+    setTimeout(() => {
+      setInvestorDetails(updatedInvestorDetails);
+      setDeleteAlert(false);
+      setIsLoading(false);
+    }, 100);
+    setIsLoading(true);
+  };
+
+  const handleEdit = (id) => {
+    setActionId(id);
+    onEditOpen();
+  };
+
+  return (
+    <Box {...OPACITY_ON_LOAD}>
+      <Box bg="white.500">
+        <HStack
+          display={"flex"}
+          justifyContent={"space-between"}
+          ps={1}
+          pe={1}
+          pb={4}
+          pt={4}
+          spacing="24px"
+        >
+          <Input
+            mt={1}
+            type="search"
+            width={300}
+            placeholder="Search..."
+            size="sm"
+            rounded="sm"
+            focusBorderColor="green.500"
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+          />
+
+          <HStack display={"flex"} alignItems={"center"}>
+            {/* <Select
+              focusBorderColor="green.500"
+              size={"sm"}
+              fontSize={"xs"}
+              cursor={"pointer"}
+              onChange={(e) => setStatus(e.target.value)}
+              value={status}
+            >
+              <option value="" defaultValue={""} disabled hidden>
+                Status
+              </option>
+
+              <option value="">Status</option>
+              <option value="0">Ban</option>
+              <option value="1">UnBan</option>
+            </Select> */}
+
+            <Select
+              focusBorderColor="green.500"
+              size={"sm"}
+              fontSize={"xs"}
+              cursor={"pointer"}
+              onChange={(e) => setKyc(e.target.value)}
+              value={kyc}
+            >
+              <option value="" defaultValue={""} disabled hidden>
+                KYC Status
+              </option>
+              <option value="">KYC Status</option>
+              <option value="0">Incompleted</option>
+              <option value="1">Completed</option>
+            </Select>
+
+            <Select
+              focusBorderColor="green.500"
+              size={"sm"}
+              fontSize={"xs"}
+              cursor={"pointer"}
+              onChange={(e) => setCountry(e.target.value)}
+              value={country}
+            >
+              <option value="" defaultValue={""} disabled hidden>
+                Country
+              </option>
+              <option value="">All</option>
+              <option value="1">Behrain</option>
+              <option value="2">Kuwait</option>
+              <option value="3">Oman</option>
+              <option value="4">Qatar</option>
+              <option value="5">Saudi arabia</option>
+              <option value="6">United arab emirates</option>
+            </Select>
+          </HStack>
+        </HStack>
+      </Box>
+
+      <NormalTable
+        emptyMessage={`We don't have any Sponers `}
+        tableHeadRow={tableHeadRow}
+        data={extractedArray}
+        isLoading={isLoading}
+        viewActionId={actionId}
+        setViewActionId={setActionId}
+        setMouseEnteredId={setMouseEnteredId}
+        setMouseEntered={setMouseEntered}
+      />
+
+      <CustomAlertDialog
+        onClose={() => setDeleteAlert(false)}
+        isOpen={deleteAlert}
+        message={"Are you sure you want to delete sponers?"}
+        alertHandler={handleDelete}
+        isLoading={isLoading}
+      />
+      <ReasonBanModal isOpen={isOpen} onClose={onClose} id={actionId} />
+    </Box>
+  );
+};
+
+export default BankInvestor;
--- a/src/Pages/Admin/Investor/BankInvestor/Investor.jsx
+++ b/src/Pages/Admin/Investor/BankInvestor/Investor.jsx
@@ -0,0 +1,27 @@
+import { Box, Tab, TabList, TabPanel, TabPanels, Tabs } from "@chakra-ui/react";
+import React from "react";
+import BankInvestor from "./BankInvestor";
+import UnbanInvestor from "../UnbanInvestor/UnbanInvestor";
+
+const Investor = () => {
+  return (
+    <Box overflowY={"scroll"} height={"100vh"}>
+      <Tabs colorScheme="green" mt={3}>
+        <TabList>
+          <Tab fontSize={"sm"}>Unban Investor</Tab>
+          <Tab fontSize={"sm"}>Ban Investor</Tab>
+        </TabList>
+        <TabPanels>
+          <TabPanel>
+            <UnbanInvestor />
+          </TabPanel>
+          <TabPanel>
+            <BankInvestor />
+          </TabPanel>
+        </TabPanels>
+      </Tabs>
+    </Box>
+  );
+};
+
+export default Investor;
--- a/src/Pages/Admin/Investor/BankInvestor/ReasonBanModal.jsx
+++ b/src/Pages/Admin/Investor/BankInvestor/ReasonBanModal.jsx
@@ -0,0 +1,143 @@
+import {
+    Box,
+    Button,
+    FormControl,
+    FormLabel,
+    Input,
+    Modal,
+    ModalBody,
+    ModalCloseButton,
+    ModalContent,
+    ModalFooter,
+    ModalHeader,
+    ModalOverlay,
+    Text,
+    Textarea,
+    useDisclosure,
+    useToast,
+  } from "@chakra-ui/react";
+  import React, { useEffect, useState } from "react";
+  import * as yup from "yup";
+  import { yupResolver } from "@hookform/resolvers/yup";
+  import { useForm } from "react-hook-form";
+  import ToastBox from "../../../../Components/ToastBox";
+import { useDepositRejectMutation } from "../../../../Services/drawal.request.service";
+import { useUpdateBanMutation } from "../../../../Services/ban.investor.service";
+  
+  export const conformModalSchema = yup.object().shape({
+    comments: yup.string().required("Comment is required"),
+  });
+  
+  const ReasonBanModal = ({ isOpen, onClose, firstField ,id}) => {
+    const [isBtnLoading , setIsBtnLoading] = useState(false)
+  
+    const toast = useToast()
+  
+    const {
+      register,
+      reset,
+      handleSubmit,
+      formState: { errors },
+    } = useForm({
+      resolver: yupResolver(conformModalSchema),
+    });
+  
+    const [ updateBanMutation ] = useUpdateBanMutation()
+    
+  
+    const onSubmit = async(data) => {
+      setIsBtnLoading(true)
+      try {
+        const res = await updateBanMutation({ id ,data})
+        console.log(res);
+    
+        if (res?.error) {
+          toast({
+            render: () => (
+              <ToastBox message={res?.error?.data?.message} status={"error"} />
+            ),
+          });
+          heandleOnClose()
+          
+        }else if(res?.data?.statusCode === 200) {
+          toast({
+            render: () => (
+              <ToastBox message={res?.data?.message} />
+            ),
+          });
+          heandleOnClose()
+        } 
+        
+      } catch (error) {
+        console.log(error);
+        
+      }
+  
+    };
+
+  
+    const heandleOnClose = () =>{
+      reset()
+      onClose()
+      setIsBtnLoading(false)
+    }
+  
+    return (
+      <Modal isOpen={isOpen} onClose={heandleOnClose} initialFocusRef={firstField}>
+        <ModalOverlay />
+        <ModalContent pb={4}>
+          <ModalHeader fontSize={"md"}>Reason for Unban</ModalHeader>
+          <ModalCloseButton />
+          <Box as="form" onSubmit={handleSubmit(onSubmit)}>
+            <ModalBody>
+              <FormControl mb={4} isRequired>
+                <FormLabel fontSize="sm">Comment</FormLabel>
+                <Textarea
+                  rows={6}
+                  focusBorderColor="green.400"
+                  name="comments"
+                  {...register("comments")}
+                  fontSize="sm"
+                  type="textarea"
+                  size="md"
+                  placeholder={"Enter your comments...."}
+                  rounded={"md"}
+                  resize={"none"}
+                />
+                {errors.comments && (
+                  <Text fontSize="xs" color="red">
+                    {errors.comments.message}
+                  </Text>
+                )}
+              </FormControl>
+            </ModalBody>
+            <ModalFooter>
+              <Button
+                colorScheme="gray"
+                mr={3}
+                onClick={onClose}
+                size={"sm"}
+                rounded={"sm"}
+              >
+                Cancel
+              </Button>
+              <Button
+                colorScheme="forestGreen"
+                variant="solid"
+                size={"sm"}
+                rounded={"sm"}
+                isLoading={isBtnLoading}
+                type="submit"
+                fontWeight={400}
+              >
+                Save
+              </Button>
+            </ModalFooter>
+          </Box>
+        </ModalContent>
+      </Modal>
+    );
+  };
+  
+  export default ReasonBanModal;
+  
--- a/src/Pages/Admin/Investor/UnbanInvestor/ReasonBanModal.jsx
+++ b/src/Pages/Admin/Investor/UnbanInvestor/ReasonBanModal.jsx
@@ -0,0 +1,147 @@
+import {
+    Box,
+    Button,
+    FormControl,
+    FormLabel,
+    Input,
+    Modal,
+    ModalBody,
+    ModalCloseButton,
+    ModalContent,
+    ModalFooter,
+    ModalHeader,
+    ModalOverlay,
+    Text,
+    Textarea,
+    useDisclosure,
+    useToast,
+  } from "@chakra-ui/react";
+  import React, { useEffect, useState } from "react";
+  import * as yup from "yup";
+  import { yupResolver } from "@hookform/resolvers/yup";
+  import { useForm } from "react-hook-form";
+  import ToastBox from "../../../../Components/ToastBox";
+import { useDepositRejectMutation } from "../../../../Services/drawal.request.service";
+import { useUpdateBanMutation, useUpdateUnbanMutation } from "../../../../Services/ban.investor.service";
+  
+  export const conformModalSchema = yup.object().shape({
+    comments: yup.string().required("Comment is required"),
+  });
+  
+  const ReasonBanModal = ({ isOpen, onClose, firstField ,id}) => {
+    const [isBtnLoading , setIsBtnLoading] = useState(false)
+  
+    const toast = useToast()
+  
+    const {
+      register,
+      reset,
+      handleSubmit,
+      formState: { errors },
+    } = useForm({
+      resolver: yupResolver(conformModalSchema),
+    });
+  
+    const [ updateBan ] = useUpdateUnbanMutation()
+
+    
+    
+    
+  
+    const onSubmit = async(data) => {
+      console.log(data);
+      setIsBtnLoading(true)
+      try {
+        const res = await updateBan({ id ,data})
+        console.log(res);
+    
+        if (res?.error) {
+          toast({
+            render: () => (
+              <ToastBox message={res?.error?.data?.message} status={"error"} />
+            ),
+          });
+          heandleOnClose()
+          
+        }else if(res?.data) {
+          toast({
+            render: () => (
+              <ToastBox message={res?.data?.message} />
+            ),
+          });
+          heandleOnClose()
+        } 
+        
+      } catch (error) {
+        console.log(error);
+        
+      }
+  
+    };
+
+  
+    const heandleOnClose = () =>{
+      reset()
+      onClose()
+      setIsBtnLoading(false)
+    }
+  
+    return (
+      <Modal isOpen={isOpen} onClose={heandleOnClose} initialFocusRef={firstField}>
+        <ModalOverlay />
+        <ModalContent pb={4}>
+          <ModalHeader fontSize={"md"}>Reason for Ban</ModalHeader>
+          <ModalCloseButton />
+          <Box as="form" onSubmit={handleSubmit(onSubmit)}>
+            <ModalBody>
+              <FormControl mb={4} isRequired>
+                <FormLabel fontSize="sm">Comment</FormLabel>
+                <Textarea
+                  rows={6}
+                  focusBorderColor="green.400"
+                  name="comments"
+                  {...register("comments")}
+                  fontSize="sm"
+                  type="textarea"
+                  size="md"
+                  placeholder={"Enter your comments...."}
+                  rounded={"md"}
+                  resize={"none"}
+                />
+                {errors.comments && (
+                  <Text fontSize="xs" color="red">
+                    {errors.comments.message}
+                  </Text>
+                )}
+              </FormControl>
+            </ModalBody>
+            <ModalFooter>
+              <Button
+                colorScheme="gray"
+                mr={3}
+                onClick={onClose}
+                size={"sm"}
+                rounded={"sm"}
+              >
+                Cancel
+              </Button>
+              <Button
+                colorScheme="forestGreen"
+                variant="solid"
+                size={"sm"}
+                rounded={"sm"}
+                isLoading={isBtnLoading}
+                type="submit"
+                fontWeight={400}
+              >
+                Save
+              </Button>
+            </ModalFooter>
+          </Box>
+        </ModalContent>
+      </Modal>
+    );
+  };
+  
+  export default ReasonBanModal;
+  
--- a/src/Pages/Admin/Investor/UnbanInvestor/UnbanInvestor.jsx
+++ b/src/Pages/Admin/Investor/UnbanInvestor/UnbanInvestor.jsx
@@ -0,0 +1,352 @@
+import {
+  Avatar,
+  Badge,
+  Box,
+  HStack,
+  Input,
+  Select,
+  Switch,
+  Text,
+  useDisclosure,
+  useToast,
+} from "@chakra-ui/react";
+import React, { useContext, useEffect, useState, useRef } from "react";
+import { Link, Link as RouterLink, useNavigate } from "react-router-dom";
+import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
+import { debounce } from "../../../Master/Sponser/AddSponser";
+import { OPACITY_ON_LOAD } from "../../../../Layout/animations";
+import DataTable from "../../../../Components/DataTable/NormalTable";
+import CustomAlertDialog from "../../../../Components/CustomAlertDialog";
+import Pagination from "../../../../Components/Pagination";
+import ToastBox from "../../../../Components/ToastBox";
+import ReasonBanModal from "./ReasonBanModal";
+import {
+  useGetInvestorQuery,
+  useGetUnbanInvestorQuery,
+} from "../../../../Services/ban.investor.service";
+import { generateSerialNumber } from "../../../../Constants/Constants";
+import { TABLE_PAGINATION } from "../../../../Constants/Paginations";
+
+const formatDate = (date) => new Date(date).toLocaleDateString(); // Simple date formatter
+
+const UnbanInvestor = () => {
+  const navigate = useNavigate();
+  const toast = useToast();
+  const thirdField = useRef();
+  const { bankInvestor, setBankInvestor, slideFromRight } =
+    useContext(GlobalStateContext);
+  const [isLoading, setIsLoading] = useState(true);
+  const [deleteAlert, setDeleteAlert] = useState(false);
+  const [actionId, setActionId] = useState("");
+  const [mouseEntered, setMouseEntered] = useState(false);
+  const [mouseEnteredId, setMouseEnteredId] = useState("");
+  const { isOpen: isOpen, onOpen: onOpen, onClose: onClose } = useDisclosure();
+
+  const formatDate = (date) => {
+    return new Date(date).toLocaleDateString("en-GB", {
+      day: "2-digit",
+      month: "2-digit",
+      year: "numeric",
+    });
+  };
+
+  // =========================== [Use State] =============================
+  const [pageSize, setPageSize] = useState(TABLE_PAGINATION?.size);
+  const [currentPage, setCurrentPage] = useState(TABLE_PAGINATION?.page);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [debouncedSearchTerm, setDebouncedSearchTerm] = useState("");
+
+  const [status, setStatus] = useState("");
+  const [kyc, setKyc] = useState("");
+  const [country, setCountry] = useState("");
+
+  // Debounce the search term to avoid making a request on every keystroke
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedSearchTerm(searchTerm);
+    }, 500); // Adjust delay as needed
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [searchTerm]);
+
+  const {
+    data,
+    isLoading: unbanLoading,
+    error,
+    refetch,
+  } = useGetUnbanInvestorQuery(
+    {
+      page: debouncedSearchTerm ? undefined : currentPage, // Omit pagination for search
+      size: debouncedSearchTerm ? undefined : pageSize, // Omit pagination for search
+      searchTerm: debouncedSearchTerm,
+      KYCStatus: kyc,
+      country_xid: country,
+    },
+    {
+      skip: debouncedSearchTerm === "" && searchTerm !== "", // Skip if search is empty and it's not the initial request
+    }
+  );
+
+  useEffect(() => {
+    // Simulate loading
+    const timer = setTimeout(() => {
+      setIsLoading(false);
+    }, 1500);
+
+    // Cleanup the timer on component unmount
+    return () => clearTimeout(timer);
+  }, []);
+
+  // ====================================================[Table Setup]================================================================
+  const tableHeadRow = [
+    "Sr N/O",
+    "Date",
+    "Client ID",
+    "First Name",
+    "Last Name",
+    "Country",
+    "Phone Number",
+    "E-mail ID",
+    "KYC Status",
+    "Action",
+  ];
+
+  const handleUpdateStatus = debounce((id) => {
+    setBankInvestor((prevData) =>
+      prevData.map((bankInvestor) =>
+        bankInvestor.id === id ? { ...bankInvestor } : bankInvestor
+      )
+    );
+    toast({
+      render: () => <ToastBox message={"Status changed succesfully.!"} />,
+    });
+  }, 300);
+
+  // ====================================================[Table Filter]================================================================
+  const filteredData = data?.data?.rows?.filter((item) => {
+    // Filter by name (case insensitive)
+    const name = item?.clientReference_id;
+    const searchLower = searchTerm?.toLowerCase();
+    const nameMatches = name?.toLowerCase().includes(searchLower);
+
+    return nameMatches;
+  });
+
+  const extractedArray = data?.data?.rows?.map((item, index) => ({
+    id: item?.id,
+    "Sr N/O": (
+      <Text
+        justifyContent={slideFromRight ? "right" : "left"}
+        as={"span"}
+        color={"gray.600"}
+        className="d-flex align-items-center fw-bold web-text-small"
+      >
+        {generateSerialNumber(index, currentPage, pageSize)}
+      </Text>
+    ),
+    Date: (
+      <Box w={"auto"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {formatDate(item?.date)}
+        </Text>
+      </Box>
+    ),
+    "Client ID": (
+      <Box w={"auto"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {item?.clientReference_id}
+        </Text>
+      </Box>
+    ),
+    "First Name": (
+      <Box w={"auto"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {item?.firstName}
+        </Text>
+      </Box>
+    ),
+    "Last Name": (
+      <Box w={"auto"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {item?.lastName}
+        </Text>
+      </Box>
+    ),
+    Country: (
+      <Box w={"auto"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {item?.country}
+        </Text>
+      </Box>
+    ),
+    "Phone Number": (
+      <Box w={"auto"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {item?.phoneNumber}
+        </Text>
+      </Box>
+    ),
+    "E-mail ID": (
+      <Box w={"auto"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {item?.emailAddress}
+        </Text>
+      </Box>
+    ),
+    "KYC Status": (
+      <Box w={"auto"} isTruncated={true}>
+        <Badge
+          fontWeight={"500"}
+          textTransform={"none"}
+          color={item?.KYCStatus === false ? "red" : "blue"}
+          px={2}
+          py={0.5}
+          variant={"ghost"}
+        >
+          {item?.KYCStatus === true ? "Completed" : "Incompleted"}
+        </Badge>
+      </Box>
+    ),
+    Action: (
+      <Box w={"auto"} isTruncated={true}>
+        <Badge
+          cursor={"pointer"}
+          fontWeight={"500"}
+          textTransform={"none"}
+          colorScheme={"red"}
+          px={2}
+          py={0.5}
+          onClick={() => {
+            setActionId(item?.id);
+            onOpen();
+          }}
+        >
+          Ban Investor
+        </Badge>
+      </Box>
+    ),
+  }));
+
+  const handleDelete = () => {
+    const updatedInvestorDetails = InvestorDetails.filter(
+      (sponsor) => sponsor.id !== actionId
+    );
+
+    setTimeout(() => {
+      setInvestorDetails(updatedInvestorDetails);
+      setDeleteAlert(false);
+      setIsLoading(false);
+    }, 100);
+    setIsLoading(true);
+  };
+
+  const handleEdit = (id) => {
+    setActionId(id);
+    onEditOpen();
+  };
+
+  return (
+    <Box {...OPACITY_ON_LOAD}>
+      <Box bg="white.500">
+        <HStack
+          display={"flex"}
+          justifyContent={"space-between"}
+          ps={1}
+          pe={1}
+          pb={4}
+          pt={4}
+          spacing="24px"
+        >
+          <Input
+            mt={1}
+            type="search"
+            width={300}
+            placeholder="Search..."
+            size="sm"
+            rounded="sm"
+            focusBorderColor="green.500"
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+          />
+          <HStack display={"flex"} alignItems={"center"}>
+            {/* <Select
+              focusBorderColor="green.500"
+              size={"sm"}
+              fontSize={"xs"}
+              cursor={"pointer"}
+              onChange={(e) => setStatus(e.target.value)}
+              value={status}
+            >
+              <option value="" defaultValue={""} disabled hidden>
+                Status
+              </option>
+
+              <option value="">Status</option>
+              <option value="0">Ban</option>
+              <option value="1">UnBan</option>
+            </Select> */}
+
+            <Select
+              focusBorderColor="green.500"
+              size={"sm"}
+              fontSize={"xs"}
+              cursor={"pointer"}
+              onChange={(e) => setKyc(e.target.value)}
+              value={kyc}
+            >
+              <option value="" defaultValue={""} disabled hidden>
+                KYC Status
+              </option>
+              <option value="">KYC Status</option>
+              <option value="0">Incompleted</option>
+              <option value="1">Completed</option>
+            </Select>
+
+            <Select
+              focusBorderColor="green.500"
+              size={"sm"}
+              fontSize={"xs"}
+              cursor={"pointer"}
+              onChange={(e) => setCountry(e.target.value)}
+              value={country}
+            >
+              <option value="" defaultValue={""} disabled hidden>
+                Country
+              </option>
+              <option value="">All</option>
+              <option value="1">Behrain</option>
+              <option value="2">Kuwait</option>
+              <option value="3">Oman</option>
+              <option value="4">Qatar</option>
+              <option value="5">Saudi arabia</option>
+              <option value="6">United arab emirates</option>
+            </Select>
+          </HStack>
+        </HStack>
+      </Box>
+
+      <DataTable
+        emptyMessage={`We don't have any Sponers `}
+        tableHeadRow={tableHeadRow}
+        data={extractedArray}
+        isLoading={isLoading}
+        viewActionId={actionId}
+        setViewActionId={setActionId}
+        setMouseEnteredId={setMouseEnteredId}
+        setMouseEntered={setMouseEntered}
+      />
+
+      <CustomAlertDialog
+        onClose={() => setDeleteAlert(false)}
+        isOpen={deleteAlert}
+        message={"Are you sure you want to delete sponers?"}
+        alertHandler={handleDelete}
+        isLoading={isLoading}
+      />
+      <ReasonBanModal isOpen={isOpen} onClose={onClose} id={actionId} />
+    </Box>
+  );
+};
+
+export default UnbanInvestor;
--- a/src/Pages/Admin/Notification.jsx
+++ b/src/Pages/Admin/Notification.jsx
@@ -1,22 +1,342 @@
-import { Box, Image, Text } from "@chakra-ui/react"
-// import error from "../assets/Error.svg"
-import robot from "../../assets/robot.png"
-// import robot from "../assets/robot.png"
-const Notification = () => {
-  return (
-    
-    <Box
-    h={'100vh'}
-    display={'flex'}
-    justifyContent={'center'}
-    alignItems={'center'}
-    flexDirection={'column'}
-    gap={8}
-    >
-        <Image src={robot} w={"171px"} />
-        {/* <Text color={'green.800'} as={'span'} fontSize={'small'}>The requested URL was not found on this server.</Text> */}
-    </Box>
-  )
-}
+import React, { useContext, useEffect, useState } from "react";
+import {
+  Badge,
+  Box,
+  Button,
+  Text,
+  Tooltip,
+  useToast,
+} from "@chakra-ui/react";
+import { useForm} from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as yup from "yup";
+import { useNavigate } from "react-router-dom";
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
+import FormInputMain from "../../Components/FormInputMain";
+import {
+  useGetContactQuery,
+  useSendNotificationMutation,
+  useUpdateContactMutation,
+} from "../../Services/contact.service";
+import FullscreenLoaders from "../../Components/Loaders/FullscreenLoaders";
+import ToastBox from "../../Components/ToastBox";
+import NormalTable from "../../Components/DataTable/NormalTable";
+import GlobalStateContext from "../../Contexts/GlobalStateContext";
+import { useGetInvestorsQuery } from "../../Services/investor.details.service";
+import { TABLE_PAGINATION } from "../../Constants/Paginations";
+import { formatDate, generateSerialNumber } from "../../Constants/Constants";
+import { ViewIcon } from "@chakra-ui/icons";
+import { useGetUnbanInvestorQuery } from "../../Services/ban.investor.service";

-export default Notification
+export const notification = yup.object().shape({
+  title: yup
+    .string()
+    .required("Investment Name is required"),
+  ManualDate: yup
+    .date()
+    .required("Manual Date is required")
+    .typeError("Invalid date format"),
+  ManualTime: yup
+    .string()
+    .required("Manual Time is required")
+    .matches(
+      /^([01]\d|2[0-3]):?([0-5]\d)$/,
+      "Invalid time format, must be in HH:mm"
+    ),
+  expectedReturn: yup
+    .string()
+    .required("Expected Return is required"),
+});
+
+export const notificationNew = yup.object().shape({
+  title: yup
+    .string()
+    .required("Investment Name is required"),
+    message: yup
+      .string()
+      .required("Message is required"),
+    
+});
+
+
+
+const Notification = () => {
+  const toast = useToast();
+  const navigate = useNavigate();
+  const [form, setForm] = useState({});
+  const [isLoading, setIsLoading] = useState(false);
+  const [ selectedRadio, setSelectedRadio] = useState([])
+  const [pageSize, setPageSize] = useState(TABLE_PAGINATION?.size);
+  const [currentPage, setCurrentPage] = useState(TABLE_PAGINATION?.page);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [debouncedSearchTerm, setDebouncedSearchTerm] = useState("");
+
+  const {
+    control,
+    reset,
+    watch,
+    handleSubmit,
+    formState: { errors },
+  } = useForm({
+    resolver: yupResolver(notificationNew),
+
+  defaultValues: {
+    title: '',
+    message: '',
+  },
+  });
+
+  console.log(errors);
+  
+  const {
+    data: contact,
+    isLoading: contactLoading,
+    error,
+  } = useGetContactQuery();
+
+
+  const formatDate = (date) => {
+    return new Date(date).toLocaleDateString("en-GB", {
+      day: "2-digit",
+      month: "2-digit",
+      year: "numeric",
+    });
+  };
+
+  // const {
+  //   data: investorDetails,
+  //   isLoading: investorDetailsLoading,
+  //   // error,
+  // } = useGetInvestorsQuery({ page: currentPage, size: pageSize });
+
+
+  const {
+    data : investorDetails,
+    isLoading: investorDetailsLoading,
+    refetch,
+  } = useGetUnbanInvestorQuery({
+    page: debouncedSearchTerm ? undefined : currentPage,  // Omit pagination for search
+    size: debouncedSearchTerm ? undefined : pageSize,     // Omit pagination for search
+    search: debouncedSearchTerm,
+  },
+  {
+    skip: debouncedSearchTerm === "" && searchTerm !== "", // Skip if search is empty and it's not the initial request
+  });;
+
+
+
+  console.log(investorDetails);
+
+
+  const [sendNotification] = useSendNotificationMutation();
+
+  
+  if (contactLoading) {
+    return <FullscreenLoaders />;
+  }
+
+  const formFields = [
+    {
+      label: "Notification Header",
+      placeHolder: " ",
+      name: "title",
+      type: "text",
+      width:"100%",
+      maxLength:100,
+      helperText:`Maximum length should be 100 characters. You have entered ${watch()?.title?.length || 0} characters.`,
+      isRequired: true,
+      section: "Send Custom Push Notification",
+      // value: contact?.phoneNumber || "",
+    },
+    {
+      label: "Notification Message",
+      placeHolder: " ",
+      name: "message",
+      width:"100%",
+      type: "textarea",
+      isRequired: true,
+      maxLength:200,
+      helperText:`Maximum length should be 200 characters. You have entered ${watch()?.message?.length || 0} characters.`,
+      section: "Send Custom Push Notification",
+      // value: contact?.phoneNumber || "",
+    },
+    
+  ];
+
+  const groupedFields = formFields.reduce((groups, field) => {
+    const { section } = field;
+    if (!groups[section]) {
+      groups[section] = [];
+    }
+    groups[section].push(field);
+    return groups;
+  }, {});
+
+  const onSubmit = async (data) => {
+
+    const dataToPass = {
+      ...data,
+      principal_xid:selectedRadio
+    }
+    setIsLoading(true);
+    try {
+      const res = await sendNotification(dataToPass);
+      console.log(res);
+      
+      if (res?.error) {
+        toast({
+          render: () => (
+            <ToastBox status={"error"} message={res?.error?.data?.message} />
+          ),
+        });
+        setIsLoading(false)
+      }else if(res?.data){
+        toast({
+          render: () => (
+            <ToastBox message={res?.data?.message} />
+          ),
+        });
+        setIsLoading(false)
+        setSelectedRadio([])
+        reset({
+          title: '', // Resetting specific fields
+          message: '', 
+        }); // Clears the form fields
+      }else{
+        toast({
+          render: () => (
+            <ToastBox status={'error'} message={"Something went wrong"} />
+          ),
+        });
+        setIsLoading(false)
+      }
+    } catch (error) {
+      console.log(error);
+
+      setIsLoading(false);
+    }
+
+    
+  };
+
+
+
+
+  // ====================================================[Table Setup]================================================================
+  const tableHeadRow = [
+    "Sr N/O",
+    "Date",
+    "Client ID",
+    "First Name",
+    "Last Name",
+    "Country",
+    "Phone Number",
+    "E-mail ID",
+    "KYC Status",
+  ];
+
+
+  const extractedArray = investorDetails?.data?.rows?.map((item, idx) => ({
+    id: item?.principal_xid,
+    "Sr N/O": (
+      <Text
+        justifyContent={"left"}
+        as={"span"}
+        color={"gray.600"}
+        className="d-flex align-items-center fw-bold web-text-small"
+      >
+       {generateSerialNumber(idx,currentPage, pageSize )}
+      </Text>
+    ),
+    Date: (
+      <Box w={"auto"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {formatDate(item?.date)}
+        </Text>
+      </Box>
+    ),
+    "Client ID": (
+      <Box w={"auto"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {item?.clientReference_id}
+        </Text>
+      </Box>
+    ),
+    "First Name": (
+      <Box w={"auto"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {item?.firstName}
+        </Text>
+      </Box>
+    ),
+    "Last Name": (
+      <Box w={"auto"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {item?.lastName}
+        </Text>
+      </Box>
+    ),
+    Country: (
+      <Box w={"auto"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {item?.country}
+        </Text>
+      </Box>
+    ),
+    "Phone Number": (
+      <Box w={"auto"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {item?.phoneNumber}
+        </Text>
+      </Box>
+    ),
+    "E-mail ID": (
+      <Box w={"auto"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {item?.emailAddress}
+        </Text>
+      </Box>
+    ),
+    "KYC Status": (
+      <Box w={"auto"} isTruncated={true}>
+        <Badge
+          fontWeight={"500"}
+          textTransform={"none"}
+          color={item?.KYCStatus === false ? "red" : "blue"}
+          px={2}
+          py={0.5}
+          variant={'ghost'}
+        >
+          {item?.KYCStatus === true ? "Completed" : "Incompleted"}
+        </Badge>
+      </Box>
+    ),
+  }));
+
+  return (
+    <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={14}>
+      <FormInputMain
+        groupedFields={groupedFields}
+        control={control}
+        errors={errors}
+        onSubmit={handleSubmit(onSubmit)}
+        btnLoading={isLoading}
+      >
+        <Box overflow={'scroll'} h={'58vh'}>
+      <NormalTable
+        centered={true}
+        emptyMessage={`We don't have any Sponers `}
+        tableHeadRow={tableHeadRow}
+        data={extractedArray}
+        // isLoading={isLoading}
+        setSelectedRadio={setSelectedRadio}
+        selectedRadio={selectedRadio}
+        showRadioButton={true}
+      />
+      </Box>
+      </FormInputMain>
+    </Box>
+  );
+};
+
+export default Notification;
--- a/src/Pages/Admin/Users.jsx
+++ b/src/Pages/Admin/Users.jsx
@@ -1,22 +1,241 @@
-import { Box, Image, Text } from "@chakra-ui/react"
-// import error from "../assets/Error.svg"
-import robot from "../../assets/robot.png"
-// import robot from "../assets/robot.png"
-const Users = () => {
-  return (
-    
-    <Box
-    h={'100vh'}
-    display={'flex'}
-    justifyContent={'center'}
-    alignItems={'center'}
-    flexDirection={'column'}
-    gap={8}
-    >
-        <Image src={robot} w={"171px"} />
-        {/* <Text color={'green.800'} as={'span'} fontSize={'small'}>The requested URL was not found on this server.</Text> */}
-    </Box>
-  )
-}
+import {
+  Box,
+  Button,
+  HStack,
+  Input,
+  Text,
+  Tooltip,
+  useToast,
+} from "@chakra-ui/react";
+import React, { useContext, useEffect, useState, useRef } from "react";
+import { Link, Link as RouterLink, useNavigate } from "react-router-dom";
+import {EditIcon,} from "@chakra-ui/icons";
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
+import DataTable from "../../Components/DataTable/NormalTable";
+import GlobalStateContext from "../../Contexts/GlobalStateContext";
+import CustomAlertDialog from "../../Components/CustomAlertDialog";
+import ToastBox from "../../Components/ToastBox";
+import { debounce } from "./Contact";

-export default Users
+const formatDate = (date) => new Date(date).toLocaleDateString(); // Simple date formatter
+
+const Users = () => {
+  const navigate = useNavigate();
+  const toast = useToast();
+  const thirdField = useRef();
+  const { users, setUsers, slideFromRight } =
+    useContext(GlobalStateContext); 
+  const [searchTerm, setSearchTerm] = useState("");
+  const [isLoading, setIsLoading] = useState(true);
+  const [deleteAlert, setDeleteAlert] = useState(false);
+  const [actionId, setActionId] = useState(false);
+  const [mouseEntered, setMouseEntered] = useState(false);
+  const [mouseEnteredId, setMouseEnteredId] = useState("");
+  // const {
+  //   isOpen: isEditOpen,
+  //   onOpen: onEditOpen,
+  //   onClose: onEditClose,
+  // } = useDisclosure();
+
+  const btnRef = React.useRef();
+
+  // const {
+  //   data: bankDetails,
+  //   isLoading: bankDetailsLoading,
+  //   error,
+  // } = useGetBankQuery({ page: 1, size: 10 });
+
+
+  useEffect(() => {
+    // Simulate loading
+    const timer = setTimeout(() => {
+      setIsLoading(false);
+    }, 1500);
+
+    // Cleanup the timer on component unmount
+    return () => clearTimeout(timer);
+  }, []);
+
+  // ====================================================[Table Setup]================================================================
+  const tableHeadRow = [
+    "Sr N/O",
+    "First Name",
+    "Last Name",
+    "E-mail ID",
+    "Role",
+    "Phone Number",
+    "Action",
+  ];
+
+  const handleUpdateStatus = debounce((id) => {
+    setUsers((prevData) =>
+      prevData.map((users) =>
+        users.id === id ? { ...users } : users
+      )
+    );
+    toast({
+      render: () => <ToastBox message={"Status changed succesfully.!"} />,
+    });
+  }, 300);
+
+  // ====================================================[Table Filter]================================================================
+  const filteredData = users?.data?.filter((item) => {
+    // Filter by name (case insensitive)
+    const name = item.emailID;
+    const searchLower = searchTerm.toLowerCase();
+    const nameMatches = name?.toLowerCase().includes(searchLower);
+
+    // Filter by status
+    // const status = item.status;
+    // const statusLower = status ? "active" : "inactive";
+
+    // const statusMatches =
+    //   statusFilter === "all" ||
+    //   (statusFilter === "active" && status === true) ||
+    //   (statusFilter === "inactive" && status === false);
+
+    return nameMatches;
+  });
+  
+
+  const extractedArray = filteredData?.map((item) => ({
+    id: item?.id,
+    "Sr N/O": (
+      <Text
+        justifyContent={slideFromRight ? "right" : "left"}
+        as={"span"}
+        color={"gray.600"}
+        className="d-flex align-items-center fw-bold web-text-small"
+      >
+        {item.id}
+      </Text>
+    ),
+    "First Name": (
+      <Box w={"auto"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {item.firstName}
+        </Text>
+      </Box>
+    ),
+    "Last Name": (
+      <Box w={"auto"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {item?.lastName}
+        </Text>
+      </Box>
+    ),
+    "E-mail ID": (
+      <Box w={"auto"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {item?.emailID}
+        </Text>
+      </Box>
+    ),
+    "Role": (
+      <Box w={"auto"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {item.role}
+        </Text>
+      </Box>
+    ),
+    "Phone Number": (
+      <Box w={"auto"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {item.phoneNumber}
+        </Text>
+      </Box>
+    ),
+    Action: (
+      <Box display={"flex"} justifyContent={"space-between"} gap={2}>
+        <Tooltip
+          rounded={"sm"}
+          fontSize={"xs"}
+          label="View"
+          bg="#fff"
+          color={"green.500"}
+          placement="top"
+        >
+          <Button
+            onClick={() => {
+              navigate(`/bank-details/edit-bank-details/${item.id}`);
+            }}
+            _hover={{ color: "green.500" }}
+            // transition={"0.5s all"}
+            color="green.300"
+            rounded={"sm"}
+            size={"xs"}
+          >
+            <EditIcon />
+          </Button>
+        </Tooltip>
+      </Box>
+    ),
+  }));
+
+  const handleDelete = () => {
+    const updatedInvestorDetails = InvestorDetails.filter(
+      (sponsor) => sponsor.id !== actionId
+    );
+
+    setTimeout(() => {
+      setInvestorDetails(updatedInvestorDetails);
+      setDeleteAlert(false);
+      setIsLoading(false);
+    }, 100);
+    setIsLoading(true);
+  };
+
+  const handleEdit = (id) => {
+    setActionId(id);
+    onEditOpen();
+  };
+
+  return (
+    <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={38}>
+      <Box bg="white.500">
+        <HStack
+          display={"flex"}
+          justifyContent={"space-between"}
+          ps={1}
+          pe={1}
+          pb={4}
+          pt={4}
+          spacing="24px"
+        >
+          <Input
+            mt={1}
+            type="search"
+            width={300}
+            placeholder="Search..."
+            size="sm"
+            rounded="sm"
+            focusBorderColor="green.500"
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+          />
+        </HStack>
+      </Box>
+
+      <DataTable
+        emptyMessage={`We don't have any Sponers `}
+        tableHeadRow={tableHeadRow}
+        data={extractedArray}
+        isLoading={isLoading}
+        viewActionId={actionId}
+        setViewActionId={setActionId}
+        setMouseEnteredId={setMouseEnteredId}
+        setMouseEntered={setMouseEntered}
+      />
+
+      <CustomAlertDialog
+        onClose={() => setDeleteAlert(false)}
+        isOpen={deleteAlert}
+        message={"Are you sure you want to delete sponers?"}
+        alertHandler={handleDelete}
+        isLoading={isLoading}
+      />
+    </Box>
+  );
+};
+
+export default Users;
--- a/src/Pages/ChangePassword.jsx
+++ b/src/Pages/ChangePassword.jsx
@@ -0,0 +1,233 @@
+import {
+  Button,
+  DrawerFooter,
+  FormControl,
+  FormErrorMessage,
+  FormLabel,
+  Input,
+  InputGroup,
+  InputRightElement,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalHeader,
+  ModalOverlay,
+  Stack,
+  useToast,
+} from "@chakra-ui/react";
+import * as yup from "yup";
+import React, { useState, useContext } from "react";
+import { useForm } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import CustomAlertDialog from "../Components/CustomAlertDialog";
+import ToastBox from "../Components/ToastBox";
+import { useUpdatePasswordMutation } from "../Services/change.password.service";
+import { all } from "axios";
+
+// Validation schema
+const passwordSchema = yup.object().shape({
+  oldPassword: yup.string().required("Current Password is required"),
+  newPassword: yup
+    .string()
+    .required("New Password is required")
+    .min(8, "Password must be at least 8 characters long")
+    .max(16, "Password must be at most 50 characters long")
+    .matches(/[A-Z]/, "Password must contain at least one uppercase letter")
+    .matches(/[a-z]/, "Password must contain at least one lowercase letter")
+    .matches(/[0-9]/, "Password must contain at least one number")
+    .matches(
+      /[@$!%*?&#]/,
+      "Password must contain at least one special character"
+    ),
+  confirmNewPassword: yup
+    .string()
+    .required("Confirm Password is required")
+    .oneOf([yup.ref("newPassword")], "Passwords must match"),
+});
+
+const ChangePassword = ({
+  isOpen,
+  onClose,
+  firstField,
+  actionId,
+  setActionId,
+}) => {
+  const [isLoading, setIsLoading] = useState(false);
+  const [alert, setAlert] = useState(false);
+  const [showCurrentPassword, setShowCurrentPassword] = useState(false);
+  const [showNewPassword, setShowNewPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+  const toast = useToast();
+
+  const [updatePassword] = useUpdatePasswordMutation();
+
+  // Form handling
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = useForm({
+    resolver: yupResolver(passwordSchema),
+    mode: "all",
+  });
+
+  // Form submit handler
+  const onSubmit = async (data) => {
+    setIsLoading(true);
+    try {
+      const res = await updatePassword(data); // Assuming API request works as expected
+      if (res?.data?.statusCode === 200) {
+        toast({
+          render: () => <ToastBox message={res?.data?.message} />,
+        });
+        handleClose();
+      } else if (res?.error) {
+        toast({
+          render: () => (
+            <ToastBox message={res?.error?.data?.message} status={"error"} />
+          ),
+        });
+      }
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // Handle modal close
+  const handleClose = () => {
+    setAlert(false);
+    onClose();
+    reset();
+  };
+
+  return (
+    <>
+      <Modal isOpen={isOpen} onClose={onClose} initialFocusRef={firstField}>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader fontSize="md">Change Password</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody pb={6}>
+            <Stack spacing={4}>
+              {/* Current Password */}
+              <FormControl isInvalid={errors.oldPassword}>
+                <FormLabel fontSize="sm" mb={1} fontWeight={500}>
+                  Current Password
+                </FormLabel>
+                <InputGroup size="sm">
+                  <Input
+                    {...register("oldPassword")}
+                    fontSize="sm"
+                    type={showCurrentPassword ? "text" : "password"}
+                    focusBorderColor="forestGreen.300"
+                  />
+                  <InputRightElement width="4.5rem">
+                    <Button
+                      h="1.5rem"
+                      size="xs"
+                      onClick={() => setShowCurrentPassword((prev) => !prev)}
+                    >
+                      {showCurrentPassword ? "Hide" : "Show"}
+                    </Button>
+                  </InputRightElement>
+                </InputGroup>
+                <FormErrorMessage>
+                  {errors.oldPassword?.message}
+                </FormErrorMessage>
+              </FormControl>
+
+              {/* New Password */}
+              <FormControl isInvalid={errors.newPassword}>
+                <FormLabel fontSize="sm" mb={1}>
+                  New Password
+                </FormLabel>
+                <InputGroup size="sm">
+                  <Input
+                    {...register("newPassword")}
+                    fontSize="sm"
+                    type={showNewPassword ? "text" : "password"}
+                    focusBorderColor="forestGreen.300"
+                  />
+                  <InputRightElement width="4.5rem">
+                    <Button
+                      h="1.5rem"
+                      size="xs"
+                      onClick={() => setShowNewPassword((prev) => !prev)}
+                    >
+                      {showNewPassword ? "Hide" : "Show"}
+                    </Button>
+                  </InputRightElement>
+                </InputGroup>
+                <FormErrorMessage>
+                  {errors.newPassword?.message}
+                </FormErrorMessage>
+              </FormControl>
+
+              {/* Confirm Password */}
+              <FormControl isInvalid={errors.confirmNewPassword}>
+                <FormLabel fontSize="sm" mb={1}>
+                  Confirm New Password
+                </FormLabel>
+                <InputGroup size="sm">
+                  <Input
+                    {...register("confirmNewPassword")}
+                    fontSize="sm"
+                    type={showConfirmPassword ? "text" : "password"}
+                    focusBorderColor="forestGreen.300"
+                  />
+                  <InputRightElement width="4.5rem">
+                    <Button
+                      h="1.5rem"
+                      size="xs"
+                      onClick={() => setShowConfirmPassword((prev) => !prev)}
+                    >
+                      {showConfirmPassword ? "Hide" : "Show"}
+                    </Button>
+                  </InputRightElement>
+                </InputGroup>
+                <FormErrorMessage>
+                  {errors.confirmNewPassword?.message}
+                </FormErrorMessage>
+              </FormControl>
+            </Stack>
+          </ModalBody>
+
+          <DrawerFooter mb={5}>
+            <Button
+              onClick={handleClose}
+              bg="#e0ebeb"
+              size="sm"
+              mr={3}
+              rounded={"sm"}
+            >
+              Cancel
+            </Button>
+            <Button
+              rounded={"sm"}
+              colorScheme="forestGreen"
+              size="sm"
+              onClick={() => setAlert(true)}
+              isLoading={isLoading}
+            >
+              Save
+            </Button>
+          </DrawerFooter>
+        </ModalContent>
+      </Modal>
+
+      <CustomAlertDialog
+        isOpen={alert}
+        onClose={() => setAlert(false)}
+        alertHandler={handleSubmit(onSubmit)}
+        message={"Are you sure you want to change the password?"}
+        isLoading={isLoading}
+      />
+    </>
+  );
+};
+
+export default ChangePassword;
--- a/src/Pages/Deposit/DepositRequest/DepositRequest.jsx
+++ b/src/Pages/Deposit/DepositRequest/DepositRequest.jsx
@@ -35,16 +35,18 @@ import NormalTable from "../../../Components/DataTable/NormalTable";
 import { useGetDepositRequestQuery } from "../../../Services/deposit.request.service";
 import { current } from "@reduxjs/toolkit";
 import { TABLE_PAGINATION } from "../../../Constants/Paginations";
-import { removeTrailingZeros } from "../../../Constants/Constants";
+import {
+  generateSerialNumber,
+  removeTrailingZeros,
+} from "../../../Constants/Constants";

-const formatDate = (date) => new Date(date).toLocaleDateString(); // Simple date formatter
+export const formatDate = (date) => new Date(date).toLocaleDateString(); // Simple date formatter

 const DepositRequest = () => {
  const navigate = useNavigate();
  const toast = useToast();
  const { depositRequest, setDepositRequest, slideFromRight } =
    useContext(GlobalStateContext);
-  const [searchTerm, setSearchTerm] = useState("");
  const [isLoading, setIsLoading] = useState(true);
  const [deleteAlert, setDeleteAlert] = useState(false);
  const [actionId, setActionId] = useState("");
@@ -60,27 +62,62 @@ const DepositRequest = () => {
    onOpen: onRejectOpen,
    onClose: onRejectClose,
  } = useDisclosure();
+  

+
+  // =========================== [Use State] ============================= 
  const [pageSize, setPageSize] = useState(TABLE_PAGINATION?.size);
  const [currentPage, setCurrentPage] = useState(TABLE_PAGINATION?.page);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [debouncedSearchTerm, setDebouncedSearchTerm] = useState("");
+
+  // Debounce the search term to avoid making a request on every keystroke
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedSearchTerm(searchTerm);
+    }, 500); // Adjust delay as needed
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [searchTerm]);
+
+
+  const formatDate = (date) => {
+    return new Date(date).toLocaleDateString("en-GB", {
+      day: "2-digit",
+      month: "2-digit",
+      year: "numeric",
+    });
+  };

  const {
    data,
    isLoading: depositRequestLoading,
    error,
-  } = useGetDepositRequestQuery({ page: currentPage, size: pageSize });
-
+    refetch,
+  } = useGetDepositRequestQuery({
+    page: debouncedSearchTerm ? undefined : currentPage,  // Omit pagination for search
+    size: debouncedSearchTerm ? undefined : pageSize,     // Omit pagination for search
+    search: debouncedSearchTerm,
+  },
+  {
+    skip: debouncedSearchTerm === "" && searchTerm !== "", // Skip if search is empty and it's not the initial request
+  });

+  // Use useEffect to refetch data when the component mounts
+  useEffect(() => {
+    refetch();
+  }, [refetch]);

  // ====================================================[Table Setup]================================================================
  const tableHeadRow = [
-    // "Sr.no",
+    "Sr.no",
    "Client ID",
    "First Name",
    "Last Name",
    "Country",
    "Phone Number",
-    "Amount in Investor currency",
+    "Deposit Amount",
    "Deposit Date",
    "Action",
  ];
@@ -99,40 +136,39 @@ const DepositRequest = () => {
  }, 300);

  const filteredData = data?.data?.rows
-  .filter((item) => {
-    // Filter by name (case insensitive)
-    const name = [item.firstName, item.lastName, item.countryName].filter(Boolean).join(' ');
-    const searchLower = searchTerm.toLowerCase();
-    const nameMatches = name.toLowerCase().includes(searchLower);
+    .filter((item) => {
+      // Filter by name (case insensitive)
+      const name = [item.firstName, item.lastName, item.countryName]
+        .filter(Boolean)
+        .join(" ");
+      const searchLower = searchTerm.toLowerCase();
+      const nameMatches = name.toLowerCase().includes(searchLower);

-    // Filter by status (Uncomment and use if needed)
-    // const status = item.status;
-    // const statusLower = status ? "active" : "inactive";
+      // Filter by status (Uncomment and use if needed)
+      // const status = item.status;
+      // const statusLower = status ? "active" : "inactive";

-    // const statusMatches =
-    //   statusFilter === "all" ||
-    //   (statusFilter === "active" && status === true) ||
-    //   (statusFilter === "inactive" && status === false);
+      // const statusMatches =
+      //   statusFilter === "all" ||
+      //   (statusFilter === "active" && status === true) ||
+      //   (statusFilter === "inactive" && status === false);

-    return nameMatches;
-  })
-  .sort((b, a) => new Date(a.createdAt) - new Date(b.createdAt));
+      return nameMatches;
+    })
+    .sort((b, a) => new Date(a.createdAt) - new Date(b.createdAt));

-  console.log(data?.data?.rows);
-
-
-  const extractedArray = filteredData?.map((item, index) => ({
+  const extractedArray = data?.data?.rows?.map((item, idx) => ({
    // id: item?.id,
    "Sr.no": (
      <Text
-        w={"30px"}
+        w={"20px"}
        justifyContent={slideFromRight ? "right" : "left"}
        as={"span"}
        color={"teal.900"}
        fontWeight={"500"}
        className="d-flex align-items-center web-text-small"
      >
-        {index + 1}
+        {generateSerialNumber(idx, currentPage, pageSize)}
      </Text>
    ),
    "Client ID": (
@@ -148,7 +184,7 @@ const DepositRequest = () => {
      </Text>
    ),
    "First Name": (
-      <Box isTruncated={true} w={"70px"}>
+      <Box isTruncated={true}>
        <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
          {item?.firstName}
        </Text>
@@ -175,12 +211,22 @@ const DepositRequest = () => {
        </Text>
      </Box>
    ),
-    "Amount in Investor currency": (
-      <Box display={'flex'} justifyContent={'end'} w={"100px"} isTruncated={true}>
+    "Deposit Amount": (
+      <Box
+        display={"flex"}
+        justifyContent={"end"}
+        w={"130px"}
+        isTruncated={true}
+      >
        <Text as={"span"} color={"teal.900"}>
          {/* {formatCurrency(removeTrailingZeros(item?.investorAmount))}  */}
-        {parseFloat(item?.investorAmount||0).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
-          <Badge ms={1} colorScheme="green">{item?.currencyCode}</Badge>
+          {parseFloat(item?.investorAmount || 0).toLocaleString(undefined, {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          })}
+          <Badge ms={1} colorScheme="green">
+            {item?.currencyCode}
+          </Badge>
        </Text>
      </Box>
    ),
@@ -247,7 +293,7 @@ const DepositRequest = () => {
              onRejectOpen();
            }}
            py={1}
-          // variant={"solid"}
+            // variant={"solid"}
          >
            <CloseIcon fontSize={"10px"} />
          </Button>
@@ -330,7 +376,7 @@ const DepositRequest = () => {
        isOpen={isConfirmOpen}
        onClose={onConfirmClose}
        id={actionId}
-      // firstField={firstField}
+        // firstField={firstField}
      />
      <DepositRequestReject
        isOpen={isRejectOpen}
--- a/src/Pages/Deposit/DepositRequest/DepositRequestApprove.jsx
+++ b/src/Pages/Deposit/DepositRequest/DepositRequestApprove.jsx
@@ -3,6 +3,8 @@ import {
  Box,
  Button,
  FormControl,
+  FormErrorMessage,
+  FormHelperText,
  FormLabel,
  Input,
  Modal,
@@ -20,37 +22,50 @@ import {
 import React, { useEffect, useState } from "react";
 import * as yup from "yup";
 import { yupResolver } from "@hookform/resolvers/yup";
-import { useForm } from "react-hook-form";
-import { useGetDepositRequestByIdQuery, useUpdateDepositRequestMutation } from "../../../Services/deposit.request.service";
+import { Controller, useForm } from "react-hook-form";
+import {
+  useGetDepositRequestByIdQuery,
+  useGetDepositRequestQuery,
+  useUpdateDepositRequestMutation,
+} from "../../../Services/deposit.request.service";
 import FullscreenLoaders from "../../../Components/Loaders/FullscreenLoaders";
 import ToastBox from "../../../Components/ToastBox";
+import CurrencyInput, { formatCurrency } from "../../../Components/CurrencyInput";

 const FILE_TYPES = ["image/jpeg", "image/png", "image/gif"];

 export const conformModalSchema = yup.object().shape({
  investorAmount: yup.string().required("Investor amount is required"),
-  comment: yup.string().notRequired(),
+  comment: yup.string().notRequired() .max(200, "Approve Comment cannot be more than 200 characters"),
  supporting_FileName: yup.mixed().required("File is required"),
  // .test("fileType", "Unsupported File Format", (value) => {
  //   return value && FILE_TYPES.includes(value.type);
  // }),
 });

-const DepositRequestApprove = ({ isOpen, onClose, firstField, id, data:requestData }) => {
-  const toast = useToast()
+const DepositRequestApprove = ({
+  isOpen,
+  onClose,
+  firstField,
+  id,
+  data: requestData,
+}) => {
+  const toast = useToast();
  const [file, setFile] = useState();
-  const [isBtnLoading , setIsBtnLoading] = useState(false)
+  const [isBtnLoading, setIsBtnLoading] = useState(false);

-  const fileredData = requestData?.find((item)=> item?.id === id)
-  console.log(fileredData);
+  const [updateDepositRequest] = useUpdateDepositRequestMutation();
+  const { data, isLoading } = useGetDepositRequestByIdQuery(id, {
+    skip: !id,
+  });

+  console.log(data?.data?.investorAmount);

-
-  const [ updateDepositRequest ] = useUpdateDepositRequestMutation()
-
-  const {
+  const {  
+    control,
    register,
    reset,
+    watch,
    handleSubmit,
    formState: { errors },
  } = useForm({
@@ -58,15 +73,17 @@ const DepositRequestApprove = ({ isOpen, onClose, firstField, id, data:requestDa
  });

  useEffect(() => {
-    reset({
-      investorAmount:fileredData?.investorAmount
-    })
-  
-   
-  }, [requestData, id])
-  
-  const onSubmit = async(data) => {
-    setIsBtnLoading(true)
+    if (data) {
+      const investorAmount = parseFloat(data?.data?.investorAmount);
+      reset({
+        investorAmount: investorAmount,
+        accountName: data?.data?.accountName,
+      });
+    }
+  }, [id, data, reset]);
+
+  const onSubmit = async (data) => {
+    setIsBtnLoading(true);
    const formData = new FormData();

    formData.append("investorAmount", data.investorAmount);
@@ -74,59 +91,38 @@ const DepositRequestApprove = ({ isOpen, onClose, firstField, id, data:requestDa
    const file = data.supporting_FileName["0"];
    formData.append("supporting_FileName", file);

+    try {
+      const res = await updateDepositRequest({ id, data: formData });

-  try {
-    const res = await updateDepositRequest({ id ,data: formData})
+      if (res?.error) {
+        toast({
+          render: () => (
+            <ToastBox message={res?.error?.data?.message} status={"error"} />
+          ),
+        });
+        setIsBtnLoading(false);
+      } else if (res?.data?.statusCode === 200) {
+        toast({
+          render: () => <ToastBox message={res?.data?.message} />,
+        });
+        setIsBtnLoading(false);
+      }
+    } catch (error) {}

-
-    if (res?.error) {
-      toast({
-        render: () => (
-          <ToastBox message={res?.error?.data?.message} status={"error"} />
-        ),
-      });
-      setIsBtnLoading(false)
-    }else if(res?.data?.statusCode === 200) {
-      toast({
-        render: () => (
-          <ToastBox message={res?.data?.message} />
-        ),
-      });
-      setIsBtnLoading(false)
-    } 
-    
-  } catch (error) {
-    
-  }
-
-  heandleOnClose();
+    heandleOnClose();
  };

-  const handleFileChange = (event) => {
-    const selectedFile = event.target.files[0];
-    setFile(selectedFile);
+  const heandleOnClose = () => {
+    reset();
+    onClose();
  };

-  const { data, isLoading } = 
-  (id, {
-    skip: !id,
-  });
-
-  useEffect(() => {
-    if (data) {
-      reset({
-        investorAmount: data?.data?.investorAmount,
-      });
-    }
-  }, [data, reset]);
-
-  const heandleOnClose = () =>{
-    reset()
-    onClose()
-  }
-
  return (
-    <Modal isOpen={isOpen} onClose={heandleOnClose} initialFocusRef={firstField}>
+    <Modal
+      isOpen={isOpen}
+      onClose={heandleOnClose}
+      initialFocusRef={firstField}
+    >
      <ModalOverlay />

      <ModalContent pb={4}>
@@ -137,12 +133,16 @@ const DepositRequestApprove = ({ isOpen, onClose, firstField, id, data:requestDa
        ) : (
          <Box as="form" onSubmit={handleSubmit(onSubmit)}>
            <ModalBody>
-              <FormControl mb={4} isRequired>
-                <FormLabel fontSize="sm">Deposit Amount <Badge colorScheme="green">{fileredData?.currencyCode}</Badge></FormLabel>
+              {/* <FormControl mb={4} isRequired>
+                <FormLabel fontSize="sm">
+                  Deposit Amount
+                  <Badge colorScheme="green">{data?.data?.currencyCode}</Badge>
+                </FormLabel>
                <Input
                  focusBorderColor="green.400"
                  name="investorAmount"
                  {...register("investorAmount")}
+                  value={formatCurrency(watch("investorAmount"))}
                  fontSize="sm"
                  type="number"
                  size="sm"
@@ -155,7 +155,24 @@ const DepositRequestApprove = ({ isOpen, onClose, firstField, id, data:requestDa
                    {errors.investorAmount.message}
                  </Text>
                )}
+              </FormControl> */}
+
+              <FormControl mb={5} isRequired>
+                <FormLabel fontSize={"sm"}>Deposit Amount</FormLabel>
+                <Controller
+                  name="investorAmount"
+                  control={control}
+                  render={({ field }) => (
+                    <CurrencyInput {...field} textAlign={'right'} fontSize={"sm"} type="number" size={"sm"} />
+                  )}
+                />
+                {errors.investorAmount && (
+                  <Text fontSize="xs" color="red">
+                    {errors.investorAmount.message}
+                  </Text>
+                )}
              </FormControl>
+
              <FormControl mb={4} isRequired>
                <FormLabel fontSize="sm">Upload Supporting</FormLabel>
                <Input
@@ -176,7 +193,7 @@ const DepositRequestApprove = ({ isOpen, onClose, firstField, id, data:requestDa
                )}
              </FormControl>
              <FormControl mb={4}>
-                <FormLabel fontSize="sm">Comments</FormLabel>
+                <FormLabel fontSize="sm">Comment</FormLabel>
                <Textarea
                  rows={5}
                  focusBorderColor="green.400"
@@ -185,14 +202,19 @@ const DepositRequestApprove = ({ isOpen, onClose, firstField, id, data:requestDa
                  fontSize="sm"
                  type="textarea"
                  size="sm"
-                  placeholder={"Enter your comments...."}
+                  placeholder={"Enter your comment...."}
                  resize={"none"}
+                  maxLength={200} 
                />
                {errors.comment && (
                  <Text fontSize="xs" color="red">
                    {errors.comment.message}
                  </Text>
                )}
+                <FormHelperText fontSize="xs" color="gray.500">
+                    <Box as="span" me={1}>Maximum length should be 200 characters. You have entered </Box>
+                    {watch("comment")?.length || 0} characters.
+                  </FormHelperText>
              </FormControl>
            </ModalBody>
            <ModalFooter>
--- a/src/Pages/Deposit/DepositRequest/DepositRequestReject.jsx
+++ b/src/Pages/Deposit/DepositRequest/DepositRequestReject.jsx
@@ -2,6 +2,7 @@ import {
  Box,
  Button,
  FormControl,
+  FormHelperText,
  FormLabel,
  Input,
  Modal,
@@ -24,7 +25,8 @@ import { useDepositRejectMutation } from "../../../Services/deposit.request.serv
 import ToastBox from "../../../Components/ToastBox";

 export const conformModalSchema = yup.object().shape({
-  comments: yup.string().required("Comment is required"),
+  comments: yup.string().required("Comment is required") 
+  .max(200, "Approve Comment cannot be more than 200 characters"),
 });

 const DepositRequestReject = ({ isOpen, onClose, firstField ,id}) => {
@@ -35,6 +37,7 @@ const DepositRequestReject = ({ isOpen, onClose, firstField ,id}) => {
  const {
    register,
    reset,
+    watch,
    handleSubmit,
    formState: { errors },
  } = useForm({
@@ -101,10 +104,10 @@ const DepositRequestReject = ({ isOpen, onClose, firstField ,id}) => {
  }

  return (
-    <Modal isOpen={isOpen} onClose={heandleOnClose} initialFocusRef={firstField}>
+    <Modal isCentered isOpen={isOpen} onClose={heandleOnClose} initialFocusRef={firstField}>
      <ModalOverlay />
      <ModalContent pb={4}>
-        <ModalHeader fontSize={"md"}>Reject</ModalHeader>
+        <ModalHeader fontSize={"md"}>Investor Comment</ModalHeader>
        <ModalCloseButton />
        {isLoading ? (
          <FullscreenLoaders height={"50vh"} />
@@ -121,15 +124,20 @@ const DepositRequestReject = ({ isOpen, onClose, firstField ,id}) => {
                fontSize="sm"
                type="textarea"
                size="md"
-                placeholder={"Enter your comments...."}
+                placeholder={"Enter your comment...."}
                rounded={"md"}
                resize={"none"}
+                maxLength={200} 
              />
              {errors.comments && (
                <Text fontSize="xs" color="red">
                  {errors.comments.message}
                </Text>
              )}
+              <FormHelperText fontSize="xs" color="gray.500">
+                <Box as="span" me={1}>Maximum length should be 200 characters. You have entered </Box>
+                {watch("comments")?.length || 0} characters.
+              </FormHelperText>
            </FormControl>
          </ModalBody>
          <ModalFooter>
--- a/src/Pages/Deposit/DepositViewHistory/DepositHistory.jsx
+++ b/src/Pages/Deposit/DepositViewHistory/DepositHistory.jsx
@@ -27,17 +27,24 @@ import {
  useDepositRejectMutation,
  useGetDepositHistoryQuery,
 } from "../../../Services/deposit.request.service";
+
 import { ExternalLinkIcon } from "@chakra-ui/icons";
 import { TABLE_PAGINATION } from "../../../Constants/Paginations";
+import { generateSerialNumber } from "../../../Constants/Constants";

-const formatDate = (date) => new Date(date).toLocaleDateString(); // Simple date formatter
+const formatDate = (date) => {
+  return new Date(date).toLocaleDateString('en-GB', {
+    day: '2-digit',
+    month: '2-digit',
+    year: 'numeric',
+  });
+}; // Simple date formatter

 const DepositHistory = () => {
  const navigate = useNavigate();
  const toast = useToast();
  const { depositHistory, setDepositHistory, slideFromRight } =
    useContext(GlobalStateContext);
-  const [searchTerm, setSearchTerm] = useState("");
  const [isLoading, setIsLoading] = useState(true);
  const [deleteAlert, setDeleteAlert] = useState(false);
  const [actionId, setActionId] = useState(false);
@@ -54,26 +61,51 @@ const DepositHistory = () => {
  //   onClose: onRejectClose,
  // } = useDisclosure();

+  // =========================== [Use State] ============================= 
  const [pageSize, setPageSize] = useState(TABLE_PAGINATION?.size);
  const [currentPage, setCurrentPage] = useState(TABLE_PAGINATION?.page);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [debouncedSearchTerm, setDebouncedSearchTerm] = useState("");

+  // Debounce the search term to avoid making a request on every keystroke
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedSearchTerm(searchTerm);
+    }, 500); // Adjust delay as needed
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [searchTerm]);
+
+  
  const {
    data,
    error,
+    refetch,
    isLoading: depositHistoryLoading,
-  } = useGetDepositHistoryQuery({ page: currentPage, size: pageSize });
-
+  } = useGetDepositHistoryQuery({
+    page: debouncedSearchTerm ? undefined : currentPage,  // Omit pagination for search
+    size: debouncedSearchTerm ? undefined : pageSize,     // Omit pagination for search
+    search: debouncedSearchTerm,
+  },
+  {
+    skip: debouncedSearchTerm === "" && searchTerm !== "", // Skip if search is empty and it's not the initial request
+  });

+  // Use useEffect to refetch data when the component mounts
+  useEffect(() => {
+    refetch();
+  }, [refetch]);

  // ====================================================[Table Setup]================================================================
  const tableHeadRow = [
-    // "Sr.no",
+    "Sr.no",
    "Client ID",
    "First Name",
    "Last Name",
    "Country",
    "Phone Number",
-    "Amount in Investor currency",
+    "Deposit Amount",
    "Deposit Date",
    "Status",
    "Supporting's",
@@ -92,124 +124,130 @@ const DepositHistory = () => {
    });
  }, 300);

+  const filteredData = data?.data?.rows
+    .filter((item) => {
+      // Filter by name (case insensitive)
+      const name = [item.firstName, item.lastName, item.countryName]
+        .filter(Boolean)
+        .join(" ");
+      const searchLower = searchTerm.toLowerCase();
+      const nameMatches = name.toLowerCase().includes(searchLower);

+      // Filter by status (Uncomment and use if needed)
+      // const status = item.status;
+      // const statusLower = status ? "active" : "inactive";

+      // const statusMatches =
+      //   statusFilter === "all" ||
+      //   (statusFilter === "active" && status === true) ||
+      //   (statusFilter === "inactive" && status === false);

-
-const filteredData = data?.data?.rows
-.filter((item) => {
-  // Filter by name (case insensitive)
-  const name = [item.firstName, item.lastName, item.countryName].filter(Boolean).join(' ');
-  const searchLower = searchTerm.toLowerCase();
-  const nameMatches = name.toLowerCase().includes(searchLower);
-
-  // Filter by status (Uncomment and use if needed)
-  // const status = item.status;
-  // const statusLower = status ? "active" : "inactive";
-
-  // const statusMatches =
-  //   statusFilter === "all" ||
-  //   (statusFilter === "active" && status === true) ||
-  //   (statusFilter === "inactive" && status === false);
-
-  return nameMatches;
-})
-.sort((b, a) => new Date(a.createdAt) - new Date(b.createdAt));
-
+      return nameMatches;
+    })
+    .sort((b, a) => new Date(a.createdAt) - new Date(b.createdAt));

  // const handleView = (id) => {
  //   setActionId(id);
  //   onViewOpen();
  // };

-  const extractedArray = 
-    filteredData?.map((item, index) => ({
-      "Sr.no": (
-        <Text
-          w={"30px"}
-          justifyContent={slideFromRight ? "right" : "left"}
-          as={"span"}
-          color={"teal.900"}
-          fontWeight={"500"}
-          className="d-flex align-items-center web-text-small"
-        >
-          {index + 1}
+  const extractedArray = data?.data?.rows?.map((item, idx) => ({
+    "Sr.no": (
+      <Text
+        w={"10px"}
+        justifyContent={slideFromRight ? "right" : "left"}
+        as={"span"}
+        color={"teal.900"}
+        fontWeight={"500"}
+        className="d-flex align-items-center web-text-small"
+      >
+      {generateSerialNumber(idx,currentPage, pageSize )}
+      </Text>
+    ),
+    "Client ID": (
+      <Text
+        w={"60px"}
+        justifyContent={slideFromRight ? "right" : "left"}
+        as={"span"}
+        color={"teal.900"}
+        fontWeight={"500"}
+        className="d-flex align-items-center web-text-small"
+      >
+        {item?.clientReference_id}
+      </Text>
+    ),
+    "First Name": (
+      <Box isTruncated={true} w={"60px"}>
+        <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
+          {item?.firstName}
        </Text>
-      ),
-      "Client ID": (
-        <Text
-          w={"60px"}
-          justifyContent={slideFromRight ? "right" : "left"}
-          as={"span"}
-          color={"teal.900"}
-          fontWeight={"500"}
-          className="d-flex align-items-center web-text-small"
-        >
-          {item?.clientReference_id}
+      </Box>
+    ),
+    "Last Name": (
+      <Box w={"70px"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {item?.lastName}
        </Text>
-      ),
-      "First Name": (
-        <Box isTruncated={true} w={"60px"}>
-          <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
-            {item?.firstName}
-          </Text>
-        </Box>
-      ),
-      "Last Name": (
-        <Box w={"70px"} isTruncated={true}>
-          <Text as={"span"} color={"teal.900"}>
-            {item?.lastName}
-          </Text>
-        </Box>
-      ),
-      Country: (
-        <Box w={"80px"} isTruncated={true}>
-          <Text as={"span"} color={"teal.900"}>
-            {item?.countryName}
-          </Text>
-        </Box>
-      ),
-      "Phone Number": (
-        <Box w={"80px"} isTruncated={true}>
-          <Text as={"span"} color={"teal.900"}>
-            {item?.mobileNumber}
-          </Text>
-        </Box>
-      ),
-      "Amount in Investor currency": (
-        <Box w={"100px"} isTruncated={true}>
-          <Text as={"span"} color={"teal.900"}>
-            {/* <Badge px={2} py={1}> */}
-          {item?.investorAmount} <Badge ms={1} colorScheme="green">{item?.currencyCode}</Badge>
-            {/* </Badge> */}
-          </Text>
-        </Box>
-      ),
-      "Deposit Date": (
-        <Text
-          w={"60px"}
-          justifyContent={slideFromRight ? "right" : "left"}
-          as={"span"}
-          color={"teal.900"}
-          fontWeight={"500"}
-          className="d-flex align-items-center web-text-small"
-        >
-          {formatDate(item?.createdAt)}
+      </Box>
+    ),
+    Country: (
+      <Box w={"80px"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {item?.countryName}
        </Text>
-      ),
-      Status: (
-        <Box w={"70px"} isTruncated={true} cursor={"pointer"}>
-          <Text
-          
-            as={"span"}
-            color={item.transactionStatus === "Approved" ? "green.500" : "red.500"}
-            fontWeight={700}
-          >
-            {item.transactionStatus}
-          </Text>
-        </Box>
-      ),
-      "Supporting's": (
+      </Box>
+    ),
+    "Phone Number": (
+      <Box w={"80px"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {item?.mobileNumber}
+        </Text>
+      </Box>
+    ),
+    "Deposit Amount": (
+      <Box
+        isTruncated={true}
+        display={"flex"}
+        justifyContent={"end"}
+      >
+        <Text as={"span"} color={"teal.900"} textAlign={"right"}>
+          {parseFloat(item?.investorAmount || 0).toLocaleString(undefined, {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          })}
+          <Badge ms={1} colorScheme="green">
+            {item?.currencyCode}
+          </Badge>
+        </Text>
+      </Box>
+    ),
+    "Deposit Date": (
+      <Text
+        w={"60px"}
+        justifyContent={slideFromRight ? "right" : "left"}
+        as={"span"}
+        color={"teal.900"}
+        fontWeight={"500"}
+        className="d-flex align-items-center web-text-small"
+      >
+        {formatDate(item?.createdAt)}
+      </Text>
+    ),
+    Status: (
+      <Box w={"70px"} isTruncated={true} cursor={"pointer"}>
+        <Text
+          as={"span"}
+          color={
+            item.transactionStatus === "Approved" ? "green.500" : "red.500"
+          }
+          fontWeight={700}
+        >
+          {item.transactionStatus}
+        </Text>
+      </Box>
+    ),
+    "Supporting's":
+      item.transactionStatus === "Approved" ? (
        <Text
          w={"60px"}
          justifyContent={slideFromRight ? "right" : "left"}
@@ -220,33 +258,32 @@ const filteredData = data?.data?.rows
        >
          {/* {item?.supporting_FileName} */}
          <Badge
-          px={2}
-          py={0.5}
-          display={"flex"}
-          alignItems={"center"}
-          textTransform={"inherit"}
-          fontWeight={500}
-          colorScheme={"forestGreen"}
-        >                                                                                           
-          <Link
-            href={import.meta.env.VITE_IMAGE_URL + item?.supporting_FileName}
-            isExternal
+            px={2}
+            py={0.5}
+            display={"flex"}
+            alignItems={"center"}
+            textTransform={"inherit"}
+            fontWeight={500}
+            colorScheme={"forestGreen"}
          >
-            <Box
-              as="span"
-              cursor={"pointer"}
+            <Link
+              href={import.meta.env.VITE_IMAGE_URL + item?.supporting_FileName}
+              isExternal
            >
-              View
-            </Box>
-            <ExternalLinkIcon />
-          </Link>
-          {/* <Link to="www.google.com" isExternal>
+              <Box as="span" cursor={"pointer"}>
+                View
+              </Box>
+              <ExternalLinkIcon />
+            </Link>
+            {/* <Link to="www.google.com" isExternal>
              <Box as="span">View</Box> <ExternalLinkIcon />
            </Link> */}
-        </Badge>
+          </Badge>
        </Text>
+      ) : (
+        ""
      ),
-    }))
+  }));

  const handleDelete = () => {
    const IOtype = investmentType.filter(
@@ -293,7 +330,7 @@ const filteredData = data?.data?.rows
          />

          <HStack display={"flex"} alignItems={"center"}>
-          <Pagination
+            <Pagination
              isLoading={depositHistoryLoading}
              pageSize={pageSize}
              setPageSize={setPageSize}
--- a/src/Pages/EmailNotification/EmailNotification.jsx
+++ b/src/Pages/EmailNotification/EmailNotification.jsx
@@ -0,0 +1,303 @@
+import {
+  Badge,
+  Box,
+  Button,
+  FormControl,
+  FormHelperText,
+  FormLabel,
+  HStack,
+  Input,
+  Text,
+  useToast,
+} from "@chakra-ui/react";
+import React, { useState } from "react";
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
+import NormalTable from "../../Components/DataTable/NormalTable";
+import { useGetUnbanInvestorQuery } from "../../Services/ban.investor.service";
+import { formatDate, generateSerialNumber } from "../../Constants/Constants";
+import { TABLE_PAGINATION } from "../../Constants/Paginations";
+import ReactQuill from "react-quill";
+import "react-quill/dist/quill.snow.css"; // Importing the Quill snow theme
+import { useSendCustomEmailMutation } from "../../Services/contact.service";
+import { EmailIcon } from "@chakra-ui/icons";
+import ToastBox from "../../Components/ToastBox";
+
+const EmailNotification = () => {
+  const [isLoading, setIsLoading] = useState(false);
+  const [selectedRadio, setSelectedRadio] = useState([]);
+  const [subject, setSubject] = useState("");
+  const [value, setValue] = useState(""); // Quill content (body)
+  const toast = useToast();
+
+  const [sendCustomNotification] = useSendCustomEmailMutation();
+
+  // ===========================[Table Setup]==============================
+  const tableHeadRow = [
+    "Sr N/O",
+    "Date",
+    "Client ID",
+    "First Name",
+    "Last Name",
+    "Country",
+    "Phone Number",
+    "E-mail ID",
+    "KYC Status",
+  ];
+
+  const [pageSize, setPageSize] = useState(TABLE_PAGINATION?.size);
+  const [currentPage, setCurrentPage] = useState(TABLE_PAGINATION?.page);
+
+  const {
+    data: investorDetails,
+    isLoading: investorDetailsLoading,
+    refetch,
+  } = useGetUnbanInvestorQuery({
+    page: currentPage, // Omit pagination for search
+    size: 10000, // Omit pagination for search
+  });
+
+  const extractedArray = investorDetails?.data?.rows?.map((item, idx) => ({
+    id: item?.principal_xid,
+    "Sr N/O": (
+      <Text
+        justifyContent={"left"}
+        as={"span"}
+        color={"gray.600"}
+        className="d-flex align-items-center fw-bold web-text-small"
+      >
+        {generateSerialNumber(idx, currentPage, pageSize)}
+      </Text>
+    ),
+    Date: (
+      <Box w={"auto"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {formatDate(item?.date)}
+        </Text>
+      </Box>
+    ),
+    "Client ID": (
+      <Box w={"auto"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {item?.clientReference_id}
+        </Text>
+      </Box>
+    ),
+    "First Name": (
+      <Box w={"auto"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {item?.firstName}
+        </Text>
+      </Box>
+    ),
+    "Last Name": (
+      <Box w={"auto"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {item?.lastName}
+        </Text>
+      </Box>
+    ),
+    Country: (
+      <Box w={"auto"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {item?.country}
+        </Text>
+      </Box>
+    ),
+    "Phone Number": (
+      <Box w={"auto"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {item?.phoneNumber}
+        </Text>
+      </Box>
+    ),
+    "E-mail ID": (
+      <Box w={"auto"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {item?.emailAddress}
+        </Text>
+      </Box>
+    ),
+    "KYC Status": (
+      <Box w={"auto"} isTruncated={true}>
+        <Badge
+          fontWeight={"500"}
+          textTransform={"none"}
+          color={item?.KYCStatus === false ? "red" : "blue"}
+          px={2}
+          py={0.5}
+          variant={"ghost"}
+        >
+          {item?.KYCStatus === true ? "Completed" : "Incompleted"}
+        </Badge>
+      </Box>
+    ),
+  }));
+
+  const modules = {
+    toolbar: [
+    //   [{ header: "1" }, { header: "2" }, 
+    //   // { font: [] }
+    // ],
+      // [{ size: [] }],
+      ["bold", "italic", "underline", "strike", "blockquote"],
+      [{ list: "ordered" }, { list: "bullet" }],
+      ["clean"],
+    ],
+  };
+
+  // Main submission logic
+  const handleSend = async (e) => {
+    e.preventDefault();  // Prevent default form submission
+
+    if (!subject || !value) {
+      toast({
+        render: () => (
+          <ToastBox status={"error"} message={"Subject or email body cannot be empty"} />
+        ),
+      });
+      return;
+    }
+
+    if (selectedRadio.length === 0) {
+      toast({
+        render: () => (
+          <ToastBox status={"error"} message={"Please select at least one recipient"} />
+        ),
+      });
+      return;
+    }
+
+    setIsLoading(true);
+
+    const emailPayload = {
+      subject,
+      body: value,
+      principal_xid:  selectedRadio,
+    };
+
+
+    try {
+      const res = await sendCustomNotification(emailPayload)
+      console.log(res); 
+      if (res?.error) {
+        toast({
+          render: () => (
+            <ToastBox status={"error"} message={res?.error?.data?.message} />
+          ),
+        });
+        setIsLoading(false)
+      }else if(res?.data){
+        toast({
+          render: () => (
+            <ToastBox message={res?.data?.message} />
+          ),
+        });
+        setIsLoading(false)
+        setSubject("")
+        setValue("")
+        setSelectedRadio([])
+
+      }else{
+        toast({
+          render: () => (
+            <ToastBox status={'error'} message={"Something went wrong"} />
+          ),
+        });
+        setIsLoading(false)
+      }
+      
+    } catch (error) {
+      
+    }
+
+  };
+
+  return (
+    <Box
+      as={"form"}
+      {...OPACITY_ON_LOAD}
+      overflowY={"scroll"}
+      height={"100vh"}
+      pb={14}
+      pt={4}
+    >
+      <FormControl mb={0}>
+        {/* <HStack
+          py={4}
+          pb={3}
+          w={"100%"}
+          justifyContent={"space-between"}
+          alignItems={"center"}
+        >
+          <Text as={"span"} fontSize={"sm"}>
+            Customize your email
+          </Text>
+        </HStack> */}
+
+        <FormControl isRequired mb={3} p={1}>
+          <FormLabel fontSize={"sm"}>Subject</FormLabel>
+          <Input
+            size={"md"}
+            value={subject}
+            onChange={(e) => setSubject(e.target.value)}
+            focusBorderColor="forestGreen.300"
+            rounded={0.5}
+            type="text"
+          />
+          {/* <FormHelperText>Entered subject will be reflected on emails subject body.</FormHelperText> */}
+        </FormControl>
+
+
+        <FormControl minH={400} isRequired mb={3} p={1}>
+          <FormLabel fontSize={"sm"}>Create Custom body</FormLabel>
+        <ReactQuill
+          theme="snow"
+          style={{
+            height:300
+          }}
+          value={value}
+          onChange={setValue}
+          modules={modules}
+          placeholder="Start typing here..."
+
+        />
+        </FormControl>
+        {/* <FormHelperText fontSize={"xs"}>
+          We'll never share your email.
+        </FormHelperText> */}
+
+
+
+
+      </FormControl>
+
+      <Box overflow={'scroll'} h={'58vh'}>
+      <NormalTable
+        centered={true}
+        emptyMessage={`We don't have any Sponsors`}
+        tableHeadRow={tableHeadRow}
+        data={extractedArray}
+        setSelectedRadio={setSelectedRadio}
+        selectedRadio={selectedRadio}
+        showRadioButton={true}
+      />
+      </Box>
+
+      <HStack justifyContent={"flex-end"} px={2}>
+        <Button
+          rightIcon={<EmailIcon />}
+          rounded={"sm"}
+          size={"sm"}
+          colorScheme="forestGreen"
+          type="submit"
+          isLoading={isLoading}
+          onClick={handleSend}
+        >
+          Send Email
+        </Button>
+      </HStack>
+    </Box>
+  );
+};
+
+export default EmailNotification;
--- a/src/Pages/Fawateer/CreateRequest.jsx
+++ b/src/Pages/Fawateer/CreateRequest.jsx
@@ -0,0 +1,440 @@
+import React, { useState } from "react";
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
+import {
+  Box,
+  Button,
+  HStack,
+  Input,
+  InputGroup,
+  InputRightAddon,
+  Textarea,
+  useDisclosure,
+  Image,
+  Icon,
+  VStack,
+  Text,
+  useToast,
+} from "@chakra-ui/react";
+import { FormControl, FormLabel, FormHelperText } from "@chakra-ui/react";
+import { DeleteIcon, Search2Icon } from "@chakra-ui/icons";
+import SelectInvestorModal from "./SelectInvestorModal";
+import { Controller, useForm } from "react-hook-form"; // Import useForm
+import { yupResolver } from "@hookform/resolvers/yup"; // Import resolver for Yup
+import * as Yup from "yup"; // Import Yup for validation
+import { motion } from "framer-motion"; // Import Framer Motion for animations
+import { bytesToMB } from "../../Constants/Constants";
+import { useCreateFawateerRequestMutation } from "../../Services/fawateer.maker.service";
+import ToastBox from "../../Components/ToastBox";
+import { useNavigate } from "react-router-dom";
+import CurrencyInput from "../../Components/CurrencyInput";
+
+// Validation schema using Yup
+const validationSchema = Yup.object().shape({
+  investorName: Yup.string().required("Investor name is required"),
+  clientId: Yup.string().required("Client ID is required"),
+  transaction_date: Yup.date()
+    .required("Date is required")
+    .transform((value, originalValue) => {
+      return originalValue === "" ? null : value; // Convert empty strings to null
+    })
+    .typeError("Please enter a valid date")
+    .max(new Date(), "Date cannot be in the future"),
+  transaction_amount: Yup.number()
+    .required("Transaction amount is required")
+    .transform((value, originalValue) => (originalValue === "" ? null : value)) // Convert empty strings to null
+    .typeError("Transaction amount must be a number") // Custom error message if it's not a number
+    .positive("Transaction amount must be greater than zero"),
+  spportFile_path: Yup.mixed().required("Support file is required"),
+  makerComment: Yup.string()  .max(200, "Approve Comment cannot be more than 50 characters"),
+});
+
+const CreateRequest = () => {
+  const toast = useToast();
+  const navigate = useNavigate();
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const [selectedInvestor, setSelectorInvestor] = useState({});
+  const [filePreview, setFilePreview] = useState(null); // State for previewing the file
+  const [fileType, setFileType] = useState(null); // State to store file type for conditional rendering
+  const [isLoading, setIsLoading] = useState(false);
+  const [id, setId] = useState(null);
+
+  // Initialize useForm with the resolver for Yup validation
+  const {
+    control,
+    register,
+    watch,
+    handleSubmit,
+    setValue,
+    reset,
+    formState: { errors },
+  } = useForm({
+    resolver: yupResolver(validationSchema),
+  });
+
+  const [creatFawaateerRequest] = useCreateFawateerRequestMutation();
+
+  const onSubmit = async (data) => {
+    console.log(data);
+    setIsLoading(true);
+
+    // Convert data to FormData
+    const formData = new FormData();
+
+    // Append each field from the data object to the FormData
+    Object.keys(data).forEach((key) => {
+      if (key === "spportFile_path" && data[key] instanceof FileList) {
+        // Append the first file from FileList (assuming single file input)
+        formData.append(key, data[key][0]); // Append the file
+      } else {
+        formData.append(key, data[key]); // Append other fields
+      }
+    });
+
+    try {
+      // Make the API call with formData
+      const res = await creatFawaateerRequest({ data: formData, id });
+
+      if (res?.error) {
+        toast({
+          render: () => (
+            <ToastBox status={"error"} message={res?.error?.data?.message} />
+          ),
+        });
+        setIsLoading(false);
+        reset();
+        return;
+      } else if (res?.data) {
+        toast({
+          render: () => <ToastBox message={res?.data?.message} />,
+        });
+        setIsLoading(false);
+        navigate("/fawateer-history");
+        return;
+      } else {
+        toast({
+          render: () => (
+            <ToastBox status={"error"} message={"Something went wrong"} />
+          ),
+        });
+        setIsLoading(false);
+        return;
+      }
+    } catch (error) {
+      console.error("Error:", error);
+      toast({
+        render: () => (
+          <ToastBox status={"error"} message={"An error occurred"} />
+        ),
+      });
+      setIsLoading(false);
+      return;
+    }
+  };
+
+  // Handle file change and preview
+  const handleFileChange = (e) => {
+    const file = e.target.files[0];
+    console.log(file);
+    setValue("spportFile_path", file); // Set the file value in the form
+    setFileType(file); // Set the file type
+
+    if (file && file.type.startsWith("image/")) {
+      // If the file is an image, generate a preview
+      const reader = new FileReader();
+      reader.onload = () => {
+        setFilePreview(reader.result); // Set the image preview
+      };
+      reader.readAsDataURL(file);
+    } else {
+      setFilePreview(null); // Clear preview if the file is not an image
+    }
+  };
+
+  return (
+    <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={38}>
+      <Box
+        display={"flex"}
+        justifyContent={"space-between"}
+        flexWrap={"wrap"}
+        alignItems={"center"}
+        mt={5}
+        px={4}
+        as="form"
+        onSubmit={handleSubmit(onSubmit)}
+      >
+        {/* Investor Name Field */}
+        <FormControl
+          isRequired
+          w={"49%"}
+          mb={2}
+          isInvalid={errors.investorName}
+        >
+          <FormLabel textAlign={"left"} fontSize={"xs"} color={"gray.600"}>
+            Investor name
+          </FormLabel>
+          <InputGroup size="sm">
+            <Input
+              bg={"#F5F8F6"}
+              focusBorderColor="forestGreen.300"
+              size={"sm"}
+              fontSize={"sm"}
+              rounded={"sm"}
+              type={"text"}
+              readOnly={true}
+              placeholder={"Investor name"}
+              {...register("investorName")}
+              _placeholder={{ fontSize: "sm" }}
+            />
+            <InputRightAddon
+              gap={2}
+              color={"forestgreen.400"}
+              onClick={onOpen}
+              cursor={"pointer"}
+              fontWeight={600}
+              fontSize={"xs"}
+            >
+              <Search2Icon /> Search
+            </InputRightAddon>
+          </InputGroup>
+          <FormHelperText
+            fontSize={"xs"}
+            fontWeight={500}
+            style={{ color: "red" }}
+          >
+            {errors.investorName?.message}
+          </FormHelperText>
+        </FormControl>
+
+        {/* Client ID Field */}
+        <FormControl isRequired w={"49%"} mb={2} isInvalid={errors.clientId}>
+          <FormLabel textAlign={"left"} fontSize={"xs"} color={"gray.600"}>
+            Client Id
+          </FormLabel>
+          <Input
+            bg={"#F5F8F6"}
+            focusBorderColor="forestGreen.300"
+            size={"sm"}
+            fontSize={"sm"}
+            rounded={"sm"}
+            type={"text"}
+            readOnly={true}
+            placeholder={"Client ID"}
+            {...register("clientId")}
+          />
+          <FormHelperText
+            fontSize={"xs"}
+            fontWeight={500}
+            style={{ color: "red" }}
+          >
+            {errors.clientId?.message}
+          </FormHelperText>
+        </FormControl>
+
+        {/* Date Field */}
+        <FormControl isRequired w={"49%"} mb={2} isInvalid={errors.date}>
+          <FormLabel textAlign={"left"} fontSize={"xs"} color={"gray.600"}>
+            Date
+          </FormLabel>
+          <Input
+            bg={"#F5F8F6"}
+            focusBorderColor="forestGreen.300"
+            size={"sm"}
+            fontSize={"sm"}
+            rounded={"sm"}
+            type={"date"}
+            max={new Date().toLocaleDateString("en-CA")} // Ensures max is in local timezone
+            {...register("transaction_date", {
+              setValueAs: (value) => {
+                // Convert date string to local timezone Date object
+                return value ? new Date(value) : undefined;
+              },
+            })}
+          />
+          <FormHelperText
+            fontSize={"xs"}
+            fontWeight={500}
+            style={{ color: "red" }}
+          >
+            {errors.transaction_date?.message}
+          </FormHelperText>
+        </FormControl>
+
+        {/* Amount Field */}
+        <FormControl isRequired w={"49%"} mb={2} isInvalid={errors.amount}>
+          <FormLabel textAlign={"left"} fontSize={"xs"} color={"gray.600"}>
+            Amount (BHD)
+          </FormLabel>
+          <Controller
+            name="transaction_amount"
+            control={control}
+            render={({ field }) => (
+              <CurrencyInput
+                bg={"#F5F8F6"}
+                {...field}
+                textAlign={"right"}
+                fontSize={"sm"}
+                type="number"
+                size={"sm"}
+              />
+            )}
+          />
+          <FormHelperText
+            fontSize={"xs"}
+            fontWeight={500}
+            style={{ color: "red" }}
+          >
+            {errors.transaction_amount?.message}
+          </FormHelperText>
+        </FormControl>
+
+        {/* Support File Field with Preview */}
+        <FormControl
+          isRequired
+          w={"49%"}
+          mb={2}
+          isInvalid={errors.spportFile_path}
+        >
+          <FormLabel textAlign={"left"} fontSize={"xs"} color={"gray.600"}>
+            Support file
+          </FormLabel>
+          <Input
+            bg={"#F5F8F6"}
+            focusBorderColor="forestGreen.300"
+            size={"sm"}
+            fontSize={"sm"}
+            rounded={"sm"}
+            type={"file"}
+            className="form-control"
+            name="spportFile_path"
+            placeholder={"Support file"}
+            {...register("spportFile_path")}
+            // onChange={handleFileChange}
+          />
+          <FormHelperText
+            fontSize={"xs"}
+            fontWeight={500}
+            style={{ color: "red" }}
+          >
+            {errors.spportFile_path?.message}
+          </FormHelperText>
+
+          {/* Animated Preview */}
+          {filePreview && fileType?.type.startsWith("image/") && (
+            <motion.div
+              initial={{ opacity: 0, scale: 0.9 }}
+              animate={{ opacity: 1, scale: 1 }}
+              transition={{ duration: 0.5 }}
+              style={{ marginTop: "10px" }}
+            >
+              <Box
+                position={"relative"}
+                display={"flex"}
+                alignContent={"flex-end"}
+                gap={3}
+                mt={2}
+              >
+                <Image
+                  src={filePreview}
+                  alt="File preview"
+                  maxW={"150px"}
+                  borderRadius="md"
+                  boxShadow="md"
+                />
+                <Icon
+                  onClick={() => setFilePreview(null)}
+                  className="link"
+                  rounded={"md"}
+                  color={"red.700"}
+                  cursor={"pointer"}
+                  p={1.5}
+                  position={"absolute"}
+                  top={0}
+                  right={0}
+                  as={DeleteIcon}
+                  boxSize={7}
+                />
+                <VStack justifyItems={"flex-end"} alignItems={"flex-start"}>
+                  <Text as={"span"} color={"gray.600"} fontSize={"xs"}>
+                    File Name:{" "}
+                    <Text as={"span"} color={"GrayText"}>
+                      {" "}
+                      {fileType?.name}
+                    </Text>
+                  </Text>
+                  <Text as={"span"} color={"gray.600"} fontSize={"xs"}>
+                    File Size:{" "}
+                    <Text as={"span"} color={"GrayText"}>
+                      {" "}
+                      {bytesToMB(fileType?.size)} Mb
+                    </Text>
+                  </Text>
+                  <Text as={"span"} color={"gray.600"} fontSize={"xs"}>
+                    File Type:{" "}
+                    <Text as={"span"} color={"GrayText"}>
+                      {" "}
+                      {fileType?.type}
+                    </Text>
+                  </Text>
+                </VStack>
+              </Box>
+            </motion.div>
+          )}
+        </FormControl>
+
+        {/* Description Field */}
+        <FormControl w={"100%"} mb={2} isInvalid={errors.makerComment}>
+          <FormLabel textAlign={"left"} fontSize={"xs"} color={"gray.600"}>
+            Description
+          </FormLabel>
+          <Textarea
+            bg={"#F5F8F6"}
+            focusBorderColor="forestGreen.300"
+            size={"sm"}
+            fontSize={"sm"}
+            rounded={"sm"}
+            placeholder={"Description"}
+            {...register("makerComment")}
+            maxLength={200}
+          />
+          <FormHelperText
+            fontSize={"xs"}
+            fontWeight={500}
+            style={{ color: "red" }}
+          >
+            {errors.makerComment?.message}
+          </FormHelperText>
+          <FormHelperText fontSize="xs" color="gray.500">
+            <Box as="span" me={1}>
+              Maximum length should be 200 characters. You have entered
+            </Box>
+            {watch("makerComment")?.length || 0} characters.
+          </FormHelperText>
+        </FormControl>
+
+        {/* Submit Button */}
+        <HStack mt={2} w={"100%"} justifyContent={"flex-end"}>
+          <Button
+            colorScheme="forestGreen"
+            size={"sm"}
+            rounded={"sm"}
+            fontSize={"xs"}
+            type="submit"
+            isLoading={isLoading}
+          >
+            Create request
+          </Button>
+        </HStack>
+      </Box>
+
+      <SelectInvestorModal
+        setId={setId}
+        setValue={setValue}
+        onClose={onClose}
+        isOpen={isOpen}
+        onOpen={onOpen}
+      />
+    </Box>
+  );
+};
+
+export default CreateRequest;
--- a/src/Pages/Fawateer/FawateerRequest.jsx
+++ b/src/Pages/Fawateer/FawateerRequest.jsx
@@ -18,9 +18,11 @@ import {
  useDisclosure,
  useToast,
 } from "@chakra-ui/react";
-import React, { useContext, useEffect, useState,useRef } from "react";
+import React, { useContext, useEffect, useState, useRef } from "react";
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
+import NormalTable from "../../Components/DataTable/NormalTable";
 import { HiDotsVertical } from "react-icons/hi";
-import { Link, Link as RouterLink,useNavigate } from "react-router-dom";
+import { Link, Link as RouterLink, useNavigate } from "react-router-dom";
 import {
  AddIcon,
  DeleteIcon,
@@ -28,30 +30,68 @@ import {
  EmailIcon,
  ViewIcon,
 } from "@chakra-ui/icons";
-import GlobalStateContext from "../../Contexts/GlobalStateContext";
-import { debounce } from "../Master/Sponser/AddSponser";
-import { OPACITY_ON_LOAD } from "../../Layout/animations";
-import DataTable from "../../Components/DataTable/DataTable";
-import CustomAlertDialog from "../../Components/CustomAlertDialog";
 import Pagination from "../../Components/Pagination";
+import GlobalStateContext from "../../Contexts/GlobalStateContext";
+import CustomAlertDialog from "../../Components/CustomAlertDialog";
 import ToastBox from "../../Components/ToastBox";
+import { debounce } from "../Master/Sponser/AddSponser";
+// import InvestmentDetailsEdit from "./InvestmentDetailsEdit";
+import { useGetInvestorsQuery } from "../../Services/investor.details.service";
+import { TABLE_PAGINATION } from "../../Constants/Paginations";
+import { exportToExcel, generateSerialNumber } from "../../Constants/Constants";
+import { LuFileSpreadsheet } from "react-icons/lu";

-const formatDate = (date) => new Date(date).toLocaleDateString(); // Simple date formatter

-const BankInvestor = () => {
+const FawateerRequest = () => {
  const navigate = useNavigate();
  const toast = useToast();
  const thirdField = useRef();
-  const { bankInvestor, setBankInvestor, slideFromRight } =
+  const { InvestorDetails, setInvestorDetails, slideFromRight } =
    useContext(GlobalStateContext);
-  const [searchTerm, setSearchTerm] = useState("");
  const [isLoading, setIsLoading] = useState(true);
  const [deleteAlert, setDeleteAlert] = useState(false);
  const [actionId, setActionId] = useState(false);
  const [mouseEntered, setMouseEntered] = useState(false);
  const [mouseEnteredId, setMouseEnteredId] = useState("");
-  const {isOpen: isEditOpen,onOpen: onEditOpen,onClose: onEditClose,} = useDisclosure();
-  const btnRef = React.useRef()
+  const {
+    isOpen: isEditOpen,
+    onOpen: onEditOpen,
+    onClose: onEditClose,
+  } = useDisclosure();
+  const btnRef = React.useRef();
+
+
+  // =========================== [Use State] ============================= 
+  const [pageSize, setPageSize] = useState(TABLE_PAGINATION?.size);
+  const [currentPage, setCurrentPage] = useState(TABLE_PAGINATION?.page);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [debouncedSearchTerm, setDebouncedSearchTerm] = useState("");
+
+  // Debounce the search term to avoid making a request on every keystroke
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedSearchTerm(searchTerm);
+    }, 500); // Adjust delay as needed
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [searchTerm]);
+
+  
+  const {
+    data: investorDetails,
+    isLoading: investorDetailsLoading,
+    error,
+  } = useGetInvestorsQuery({
+    page: debouncedSearchTerm ? undefined : currentPage,  // Omit pagination for search
+    size: debouncedSearchTerm ? undefined : pageSize,     // Omit pagination for search
+    search: debouncedSearchTerm,
+  },
+  {
+    skip: debouncedSearchTerm === "" && searchTerm !== "", // Skip if search is empty and it's not the initial request
+  }
+);
+

  useEffect(() => {
    // Simulate loading
@@ -65,21 +105,22 @@ const BankInvestor = () => {

  // ====================================================[Table Setup]================================================================
  const tableHeadRow = [
-    "Sr N/O",
+    "Sr No",
    "Client ID",
    "First Name",
    "Last Name",
-    "Country",
+    "Country", 
    "Phone Number",
    "E-mail ID",
-    "KYC Status",
-    "Action",
+    // "Type", 
+    // "KYC Status",
+    "Approval Status",
  ];

  const handleUpdateStatus = debounce((id) => {
-    setBankInvestor((prevData) =>
-      prevData.map((bankInvestor) =>
-        bankInvestor.id === id ? { ...bankInvestor } : bankInvestor
+    setInvestorDetails((prevData) =>
+      prevData.map((InvestorDetails) =>
+        InvestorDetails.id === id ? { ...InvestorDetails } : InvestorDetails
      )
    );
    toast({
@@ -88,9 +129,9 @@ const BankInvestor = () => {
  }, 300);

  // ====================================================[Table Filter]================================================================
-  const filteredData = bankInvestor?.filter((item) => {
+  const filteredData = investorDetails?.data?.rows?.filter((item) => {
    // Filter by name (case insensitive)
-    const name = item.firstName;
+  const name = [item?.principal?.firstName, item?.principal?.lastName, item?.country?.countryName, item?.principal?.mobileNumber, item?.principal?.emailAddress].filter(Boolean).join(' ');
    const searchLower = searchTerm.toLowerCase();
    const nameMatches = name?.toLowerCase().includes(searchLower);

@@ -106,74 +147,100 @@ const BankInvestor = () => {
    return nameMatches;
  });

-  const extractedArray = filteredData?.map((item) => ({
+
+
+  const customHeaders = [
+    { label: "ID", key: "id" },
+    { label: "Client ID", key: "clientReference_id" },
+    { label: "First Name", key: "principal.firstName" },  // Nested property
+    { label: "Last Name", key: "principal.lastName" },    // Nested property
+    { label: "Country", key: "country.countryName" },     // Nested property
+    { label: "Phone Number", key: "principal.mobileNumber" }, // Nested property
+    { label: "E-mail ID", key: "principal.emailAddress" },    // Nested property
+    { label: "Type", key: "investor_type.investorTypeName" }, // Nested property
+    { label: "Status", key: "ioStatus" },                     // Simple property
+    { label: "KYC Status", key: "KYCStatus" },                // Simple property
+  ];
+  
+
+  const extractedArray = investorDetails?.data?.rows?.map((item, idx) => ({
    id: item?.id,
-    "Sr N/O": (
+    "Sr No": (
      <Text
+      w={'24px'}
        justifyContent={slideFromRight ? "right" : "left"}
        as={"span"}
        color={"gray.600"}
        className="d-flex align-items-center fw-bold web-text-small"
      >
-        {item.id}
+        {/* {item.id} */}
+        {generateSerialNumber(idx,currentPage, pageSize )}
+        
      </Text>
    ),
    "Client ID": (
      <Box w={"auto"} isTruncated={true}>
        <Text as={"span"} color={"teal.900"}>
-          {item.clientId}
+          {item.clientReference_id}
        </Text>
-      </Box>
+      </Box> 
    ),
    "First Name": (
      <Box w={"auto"} isTruncated={true}>
        <Text as={"span"} color={"teal.900"}>
-          {item.firstName}
+          {item?.principal?.firstName}
        </Text>
      </Box>
    ),
    "Last Name": (
-      <Box w={"auto"} isTruncated={true}>
+      <Box w={"70px"} isTruncated={true}>
        <Text as={"span"} color={"teal.900"}>
-          {item.lastName}
+          {item?.principal?.lastName}
        </Text>
      </Box>
    ),
    Country: (
      <Box w={"auto"} isTruncated={true}>
        <Text as={"span"} color={"teal.900"}>
-          {item.country}
+          {item?.country?.countryName}
        </Text>
      </Box>
    ),
    "Phone Number": (
      <Box w={"auto"} isTruncated={true}>
        <Text as={"span"} color={"teal.900"}>
-          {item.phoneNumber}
+          {item?.principal?.mobileNumber}
        </Text>
      </Box>
    ),
    "E-mail ID": (
      <Box w={"auto"} isTruncated={true}>
        <Text as={"span"} color={"teal.900"}>
-          {item.mailId}
+          {item?.principal?.emailAddress}
        </Text>
      </Box>
    ),
-    "KYC Status": (
+    "Type": (
      <Box w={"auto"} isTruncated={true}>
-        <Badge fontWeight={'500'}  textTransform={'none'} color={item.status === "Completed" ? "blue"  : "red"} px={2} py={0.5}>
-          {item.status}
-        </Badge>
+        <Text as={"span"} >
+          <Badge color={"forestGreen.500"}    variant={'ghost'} fontWeight={"700"} px={2} py={0.5}>
+            {item?.investor_type?.investorTypeName}
+          </Badge>
+        </Text>
      </Box>
    ),
-    Action: (
-      <Switch
-        size={"sm"}
-        colorScheme="forestGreen"
-        onChange={() => handleUpdateStatus(item.id)}
-        isChecked={item.status}
-      />
+    "Approval Status": (
+    <Box w={"auto"} isTruncated={true}>
+      <Badge
+        fontWeight={"700"}
+        textTransform={"none"}
+        colorScheme={item.ioStatus ? "red" : "purple"}
+        px={2}
+        py={0.5}
+      >
+        Approved
+      </Badge>
+    </Box>
    ),
  }));

@@ -195,6 +262,10 @@ const BankInvestor = () => {
    onEditOpen();
  };

+  console.log(investorDetails?.data?.totalItems);
+
+  
+
  return (
    <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={38}>
      <Box bg="white.500">
@@ -208,7 +279,7 @@ const BankInvestor = () => {
          spacing="24px"
        >
          <Input
-          mt={1}
+            mt={1}
            type="search"
            width={300}
            placeholder="Search..."
@@ -218,17 +289,45 @@ const BankInvestor = () => {
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
          />
+
+          
+
          <HStack display={"flex"} alignItems={"center"}>
-            <Pagination totalItems={10} />
+
+
+            <Pagination
+              isLoading={investorDetailsLoading} 
+              pageSize={pageSize}
+              setPageSize={setPageSize}
+              currentPage={currentPage}
+              setCurrentPage={setCurrentPage}
+              totalItems={investorDetails?.data?.totalItems}
+              
+            />
+
+
+{/* 
+          <Button
+              leftIcon={<AddIcon />}
+              colorScheme="forestGreen"
+              size={"sm"}
+              rounded={"sm"}
+              fontSize={"xs"}
+              onClick={()=> navigate('create-request')}
+            >
+              Create request
+            </Button> */}
+
          </HStack>
        </HStack>
      </Box>

-      <DataTable
+      <NormalTable
+        // centered={true}
        emptyMessage={`We don't have any Sponers `}
        tableHeadRow={tableHeadRow}
        data={extractedArray}
-        isLoading={isLoading}
+        isLoading={investorDetailsLoading}
        viewActionId={actionId}
        setViewActionId={setActionId}
        setMouseEnteredId={setMouseEnteredId}
@@ -246,4 +345,4 @@ const BankInvestor = () => {
  );
 };

-export default BankInvestor;
+export default FawateerRequest
--- a/src/Pages/Fawateer/SelectInvestorModal.jsx
+++ b/src/Pages/Fawateer/SelectInvestorModal.jsx
@@ -0,0 +1,247 @@
+import {
+    Modal,
+    ModalOverlay,
+    ModalContent,
+    ModalHeader,
+    ModalFooter,
+    ModalBody,
+    ModalCloseButton,
+    Button,
+    Text,
+    Box,
+    Badge,
+    Select,
+    HStack,
+    Input,
+    useToast,
+  } from '@chakra-ui/react'
+import NormalTable from '../../Components/DataTable/NormalTable'
+import { generateSerialNumber } from '../../Constants/Constants';
+import { useGetInvestorsQuery } from '../../Services/investor.details.service';
+import { useEffect, useState } from 'react';
+import { TABLE_PAGINATION } from '../../Constants/Paginations';
+import Pagination from '../../Components/Pagination';
+import { AddIcon } from '@chakra-ui/icons';
+import { useGetFawateerInvestorsQuery } from '../../Services/fawateer.request.service';
+import ToastBox from '../../Components/ToastBox';
+
+const SelectInvestorModal = ({ isOpen, setValue, onClose, setId}) => {
+  const toast = useToast()
+  // =========================== [Use State] ============================= 
+  const [pageSize, setPageSize] = useState(TABLE_PAGINATION?.size);
+  const [currentPage, setCurrentPage] = useState(TABLE_PAGINATION?.page);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [debouncedSearchTerm, setDebouncedSearchTerm] = useState("");
+ 
+ // Debounce the search term to avoid making a request on every keystroke
+ useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedSearchTerm(searchTerm);
+    }, 500); // Adjust delay as needed
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [searchTerm]);
+
+  const {
+    data: investorDetails,
+    isLoading: investorDetailsLoading,
+    error,
+  } = useGetFawateerInvestorsQuery({
+    page: debouncedSearchTerm ? undefined : currentPage,  // Omit pagination for search
+    size: debouncedSearchTerm ? undefined : pageSize,     // Omit pagination for search
+    search: debouncedSearchTerm,
+  },
+  {
+    skip: debouncedSearchTerm === "" && searchTerm !== "", // Skip if search is empty and it's not the initial request
+  }
+);
+
+const [ selectedRadio, setSelectedRadio] = useState([])
+const [ selectedInvestor, setSelectorInvestor] = useState(null)
+
+const handleCheckboxChange = (id) => {
+  
+    setSelectedRadio([id]); 
+    const investor = investorDetails?.data?.rows?.find((item)=> item?.id === id)
+    setSelectorInvestor(investor) 
+    setId(investor?.principal_xid)
+    // setValue("investorName",`${selectedInvestor?.firstName} ${selectedInvestor?.lastName}`)
+    // setValue("clientId",selectedInvestor?.clientReference_id)
+    return
+  };
+
+  const handleAdd = () => {
+    if(selectedRadio?.length === 0){
+    toast({
+     render: () => (
+       <ToastBox status={'info'} message={"Please Select Investor"} />
+     ),
+   });
+   return
+ }
+    setValue("investorName",`${selectedInvestor?.firstName} ${selectedInvestor?.lastName}`)
+    setValue("clientId",selectedInvestor?.clientReference_id)
+    return onClose()
+  }
+
+
+
+      // ====================================================[Table Setup]================================================================
+  const tableHeadRow = [
+    
+    "Sr No",
+    "Client ID",
+    "First Name",
+    "Last Name",
+    // "Country", 
+    "Phone Number",
+    "E-mail ID",
+    // "Type", 
+    // "KYC Status",
+    // "Approval Status",
+  ];
+
+
+    const extractedArray = investorDetails?.data?.rows?.map((item, idx) => ({
+        id: item?.id,
+        "Sr No": (
+          <Text
+          w={'24px'}
+            as={"span"}
+            color={"gray.600"}
+            className="d-flex align-items-center fw-bold web-text-small"
+          >
+            {/* {item.id} */}
+            {generateSerialNumber(idx,currentPage, pageSize )}
+            
+          </Text>
+        ),
+        "Client ID": (
+          <Box w={"auto"} isTruncated={true}>
+            <Text as={"span"} color={"teal.900"}>
+              {item.clientReference_id}
+            </Text>
+          </Box> 
+        ),
+        "First Name": (
+          <Box w={"auto"} isTruncated={true}>
+            <Text as={"span"} color={"teal.900"}>
+              {item?.firstName}
+            </Text>
+          </Box>
+        ),
+        "Last Name": (
+          <Box w={"70px"} isTruncated={true}>
+            <Text as={"span"} color={"teal.900"}>
+              {item?.lastName}
+            </Text>
+          </Box>
+        ),
+        "Phone Number": (
+          <Box w={"auto"} isTruncated={true}>
+            <Text as={"span"} color={"teal.900"}>
+              {item?.phoneNumber}
+            </Text>
+          </Box>
+        ),
+        "E-mail ID": (
+          <Box w={"auto"} isTruncated={true}>
+            <Text as={"span"} color={"teal.900"}>
+              {item?.emailAddress}
+            </Text>
+          </Box>
+        ),
+        "Type": (
+          <Box w={"auto"} isTruncated={true}>
+            <Text as={"span"} >
+              <Badge color={"forestGreen.500"}    variant={'ghost'} fontWeight={"700"} px={2} py={0.5}>
+                {item?.investor_type?.investorTypeName}
+              </Badge>
+            </Text>
+          </Box>
+        ),
+        "Approval Status": (
+        <Box w={"auto"} isTruncated={true}>
+          <Badge
+            fontWeight={"700"}
+            textTransform={"none"}
+            colorScheme={item.ioStatus ? "red" : "purple"}
+            px={2}
+            py={0.5}
+          >
+            Approved
+          </Badge>
+        </Box>
+        ),
+      }));
+
+
+      const handleClose = () => {
+        setSelectorInvestor(null)
+        handleClose()
+      }
+
+  return (
+    <Modal
+        isCentered
+        onClose={onClose}
+        isOpen={isOpen}
+        motionPreset='scale'
+      >
+        <ModalOverlay />
+      <ModalContent maxW={1200}>
+          <ModalHeader fontSize={'md'}>View Investor's</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+            {/* <Lorem count={2} /> */}
+
+            <HStack
+          display={"flex"}
+          justifyContent={"space-between"}
+          ps={1}
+          pe={1}
+          pb={4}
+          spacing="24px"
+        >
+          <Input
+            mt={1}
+            type="search"
+            width={300}
+            placeholder="Search..."
+            size="sm"
+            rounded="sm"
+            focusBorderColor="green.500"
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+          />
+           <Button leftIcon={<AddIcon/>} fontSize={'xs'} colorScheme='forestGreen' size={'sm'} rounded={'sm'}  onClick={handleAdd}>
+              Select Investor
+            </Button>
+
+          </HStack>
+
+
+      {investorDetailsLoading?"Loaading":<NormalTable
+        // centered={true}
+        emptyMessage={`We don't have any Sponers `}
+        tableHeadRow={tableHeadRow}
+        data={extractedArray}
+        isLoading={investorDetailsLoading}
+
+
+
+        handleCheckboxChange={handleCheckboxChange}
+        setSelectedRadio={setSelectedRadio}
+        selectedRadio={selectedRadio}
+        showRadioButton={true}
+        radio={true}
+      />}
+
+          </ModalBody>
+        </ModalContent>
+      </Modal>
+  )
+}
+
+export default SelectInvestorModal
--- a/src/Pages/FawateerChecker/ApproveHistory/ApproveHistoryChecker.jsx
+++ b/src/Pages/FawateerChecker/ApproveHistory/ApproveHistoryChecker.jsx
@@ -0,0 +1,336 @@
+import {
+  Avatar,
+  Badge,
+  Box,
+  Button,
+  HStack,
+  Input,
+  Link,
+  Text,
+  Tooltip,
+  useDisclosure,
+  useToast,
+} from "@chakra-ui/react";
+import React, { useContext, useEffect, useState } from "react";
+import { CheckIcon, CloseIcon, ExternalLinkIcon } from "@chakra-ui/icons";
+import Pagination from "../../../Components/Pagination";
+import GlobalStateContext from "../../../Contexts/GlobalStateContext";
+import CustomAlertDialog from "../../../Components/CustomAlertDialog";
+import DrawalRequestReject from "../../WithDrawal/DrawalRequest/DrawalRequestReject";
+import NormalTable from "../../../Components/DataTable/NormalTable";
+import DrawalRequestApprove from "../../WithDrawal/DrawalRequest/DrawalRequestApprove";
+import { generateSerialNumber } from "../../../Constants/Constants";
+import {
+  useGetApproveHistoryQuery,
+  useGetFawateerRequestQuery,
+} from "../../../Services/fawateer.request.service";
+import { TABLE_PAGINATION } from "../../../Constants/Paginations";
+import { OPACITY_ON_LOAD } from "../../../Layout/animations";
+
+const ApproveHistory = () => {
+  const toast = useToast();
+  const { slideFromRight, approveHistory, setApproveHistory } =
+    useContext(GlobalStateContext);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [isLoading, setIsLoading] = useState(true);
+  const [deleteAlert, setDeleteAlert] = useState(false);
+  const [actionId, setActionId] = useState(false);
+  const [mouseEntered, setMouseEntered] = useState(false);
+  const [mouseEnteredId, setMouseEnteredId] = useState("");
+
+  const [pageSize, setPageSize] = useState(TABLE_PAGINATION?.size);
+  const [currentPage, setCurrentPage] = useState(TABLE_PAGINATION?.page);
+
+  const formatDate = (date) => {
+    return new Date(date).toLocaleDateString("en-GB", {
+      day: "2-digit",
+      month: "2-digit",
+      year: "numeric",
+    });
+  };
+
+  const {
+    isOpen: isConfirmOpen,
+    onOpen: onConfirmOpen,
+    onClose: onConfirmClose,
+  } = useDisclosure();
+  const {
+    isOpen: isRejectOpen,
+    onOpen: onRejectOpen,
+    onClose: onRejectClose,
+  } = useDisclosure();
+
+  const {
+    data,
+    isLoading: drawalRequestLoading,
+    error,
+    refetch,
+  } = useGetApproveHistoryQuery();
+
+  console.log(data?.data?.rows);
+
+  // Use useEffect to refetch data when the component mounts
+  useEffect(() => {
+    refetch();
+  }, [refetch]);
+
+  useEffect(() => {
+    // Simulate loading
+    const timer = setTimeout(() => {
+      setIsLoading(false);
+    }, 1500);
+
+    // Cleanup the timer on component unmount
+    return () => clearTimeout(timer);
+  }, []);
+
+  // ====================================================[Table Filter]================================================================
+  const filteredData = data?.data?.rows?.filter((item) => {
+    // Filter by name (case insensitive)
+    const name = item.firstName;
+    const searchLower = searchTerm.toLowerCase();
+    const nameMatches = name.toLowerCase().includes(searchLower);
+
+    // Filter by status
+    // const status = item.status;
+    // const statusLower = status ? "active" : "inactive";
+
+    // const statusMatches =
+    //   statusFilter === "all" ||
+    //   (statusFilter === "active" && status === true) ||
+    //   (statusFilter === "inactive" && status === false);
+
+    return nameMatches;
+  });
+
+  // ====================================================[Table Setup]================================================================
+  const tableHeadRow = [
+    "Sr.no",
+    "Client ID",
+    "First Name",
+    "Last Name",
+    "E-mail ID",
+    "Phone Number",
+    "Deposit Date",
+    "Deposit Amount (BHD)",
+    "Support Image",
+    "Status",
+  ];
+
+  const extractedArray = filteredData?.map((item, idx) => ({
+    // id: item?.id,
+    "Sr.no": (
+      <Text
+        w={"auto"}
+        justifyContent={slideFromRight ? "right" : "left"}
+        as={"span"}
+        color={"teal.900"}
+        fontWeight={"500"}
+        className="d-flex align-items-center web-text-small"
+      >
+        {generateSerialNumber(idx, currentPage, pageSize)}
+      </Text>
+    ),
+    "Client ID": (
+      <Text
+        w={"60px"}
+        justifyContent={slideFromRight ? "right" : "left"}
+        as={"span"}
+        color={"teal.900"}
+        fontWeight={"500"}
+        className="d-flex align-items-center web-text-small"
+      >
+        {item.clientReference_id}
+      </Text>
+    ),
+    "First Name": (
+      <Box isTruncated={true} w={"80px"}>
+        <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
+          {item.firstName}
+        </Text>
+      </Box>
+    ),
+    "Last Name": (
+      <Box w={"50px"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {item.lastName}
+        </Text>
+      </Box>
+    ),
+    "E-mail ID": (
+      <Box isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {item.emailAddress}
+        </Text>
+      </Box>
+    ),
+    "Phone Number": (
+      <Box w={"100px"} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"}>
+          {item.mobileNumber}
+        </Text>
+      </Box>
+    ),
+    "Deposit Date": (
+      <Box
+        w={"100px"}
+        isTruncated={true}
+        display={"flex"}
+      >
+        <Text as={"span"} color={"teal.900"}>
+          {formatDate(item?.transaction_date)}
+        </Text>
+      </Box>
+    ),
+    "Deposit Amount (BHD)": (
+      <Box w={"130px"} isTruncated={true} display={"flex"}>
+        <Text as={"span"} color={"teal.900"}>
+          {/* {item.investorAmount} */}
+          {parseFloat(item?.transaction_amount || 0).toLocaleString(undefined, {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          })}
+          {/* <Badge ms={1} colorScheme="green">{item?.transaction_amount}</Badge>   */}
+        </Text>
+      </Box>
+    ),
+    "Support Image": (
+      <Text
+        color={"green.500"}
+        justifyContent={slideFromRight ? "right" : "left"}
+        as={"span"}
+        fontWeight={"500"}
+        className="d-flex align-items-center web-text-small"
+      >
+        {item?.spportFile_path&&<Badge
+          px={2}
+          py={0.5}
+          textTransform={"inherit"}
+          fontWeight={500}
+          colorScheme={"forestGreen"}
+        >
+          <Link
+            href={import.meta.env.VITE_IMAGE_URL + item?.spportFile_path}
+            isExternal
+            display={"flex"}
+            alignItems={"center"}
+          >
+            <Box me={"1px"}
+              as="span"
+              cursor={"pointer"}
+            >
+              View
+            </Box>
+            <ExternalLinkIcon />
+          </Link>
+        </Badge>}
+      </Text>
+    ),
+    Status: (
+      <Box isTruncated={true} display={"flex"}>
+        <Badge
+          my={1}
+          fontWeight={500}
+          px={2}
+          py={"2px"}
+          rounded={4}
+          colorScheme={
+            item?.transactionStatus === "Approved"
+            ? "green"
+            : item?.transactionStatus === "Pending"
+            ? "yellow"
+            : item?.transactionStatus === "Reject"
+            ? "red"
+            : "gray" // default border color if status doesn't match any condition
+          }
+        >
+          {item.transactionStatus}
+        </Badge>
+      </Box>
+    ),
+  }));
+
+  const handleDelete = () => {
+    const updatedSponsors = sponser.filter(
+      (sponsor) => sponsor.id !== actionId
+    );
+
+    setTimeout(() => {
+      setSponser(updatedSponsors);
+      setDeleteAlert(false);
+      setIsLoading(false);
+    }, 100);
+    setIsLoading(true);
+  };
+
+  return (
+    <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={38}>
+      <Box bg="white.500">
+        <HStack
+          display={"flex"}
+          justifyContent={"space-between"}
+          ps={1}
+          pe={1}
+          pb={4}
+          pt={4}
+          spacing="24px"
+        >
+          <Input
+            type="search"
+            width={300}
+            placeholder="Search..."
+            size="sm"
+            rounded="sm"
+            focusBorderColor="green.500"
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+          />
+
+          <Pagination
+            isLoading={drawalRequestLoading}
+            pageSize={pageSize}
+            setPageSize={setPageSize}
+            currentPage={currentPage}
+            setCurrentPage={setCurrentPage}
+            totalItems={data?.data?.totalItems}
+          />
+        </HStack>
+      </Box>
+
+      <NormalTable
+        isLoading={drawalRequestLoading}
+        emptyMessage={`We don't have any Sponers `}
+        tableHeadRow={tableHeadRow}
+        data={extractedArray}
+        viewActionId={actionId}
+        setViewActionId={setActionId}
+        // totalPages={10}
+
+        setMouseEnteredId={setMouseEnteredId}
+        setMouseEntered={setMouseEntered}
+      />
+
+      <CustomAlertDialog
+        onClose={() => setDeleteAlert(false)}
+        isOpen={deleteAlert}
+        message={"Are you sure you want to delete sponers?"}
+        alertHandler={handleDelete}
+        isLoading={isLoading}
+      />
+      <DrawalRequestApprove
+        // data={data?.data?.rows}
+        isOpen={isConfirmOpen}
+        onClose={onConfirmClose}
+        id={actionId}
+        // firstField={firstField}
+      />
+      <DrawalRequestReject
+        isOpen={isRejectOpen}
+        onClose={onRejectClose}
+        id={actionId}
+      />
+    </Box>
+  );
+};
+
+export default ApproveHistory;
--- a/src/Pages/FawateerChecker/ApproveHistory/ApproveHistoryMaker.jsx
+++ b/src/Pages/FawateerChecker/ApproveHistory/ApproveHistoryMaker.jsx
@@ -0,0 +1,358 @@
+import {
+    Avatar,
+    Badge,
+    Box,
+    Button,
+    HStack,
+    Input,
+    Link,
+    Text,
+    Tooltip,
+    useDisclosure,
+    useToast,
+  } from "@chakra-ui/react";
+  import React, { useContext, useEffect, useState } from "react";
+  import { CheckIcon, CloseIcon, ExternalLinkIcon } from "@chakra-ui/icons";
+  import Pagination from "../../../Components/Pagination";
+  import GlobalStateContext from "../../../Contexts/GlobalStateContext";
+  import CustomAlertDialog from "../../../Components/CustomAlertDialog";
+  import DrawalRequestReject from "../../WithDrawal/DrawalRequest/DrawalRequestReject";
+  import NormalTable from "../../../Components/DataTable/NormalTable";
+  import DrawalRequestApprove from "../../WithDrawal/DrawalRequest/DrawalRequestApprove";
+  import { generateSerialNumber } from "../../../Constants/Constants";
+  import {
+    useGetApproveHistoryQuery,
+    useGetFawateerForMakerRequestQuery,
+    useGetFawateerRequestQuery,
+  } from "../../../Services/fawateer.request.service";
+  import { TABLE_PAGINATION } from "../../../Constants/Paginations";
+  import { OPACITY_ON_LOAD } from "../../../Layout/animations";
+  
+  const ApproveHistoryMaker = () => {
+    const toast = useToast();
+    const { slideFromRight, approveHistory, setApproveHistory } =
+      useContext(GlobalStateContext);
+    const [searchTerm, setSearchTerm] = useState("");
+    const [isLoading, setIsLoading] = useState(true);
+    const [deleteAlert, setDeleteAlert] = useState(false);
+    const [actionId, setActionId] = useState(false);
+    const [mouseEntered, setMouseEntered] = useState(false);
+    const [mouseEnteredId, setMouseEnteredId] = useState("");
+    const [debouncedSearchTerm, setDebouncedSearchTerm] = useState("");
+  
+    const [pageSize, setPageSize] = useState(TABLE_PAGINATION?.size);
+    const [currentPage, setCurrentPage] = useState(TABLE_PAGINATION?.page);
+  
+    const formatDate = (date) => {
+      return new Date(date).toLocaleDateString("en-GB", {
+        day: "2-digit",
+        month: "2-digit",
+        year: "numeric",
+      });
+    };
+  
+    const {
+      isOpen: isConfirmOpen,
+      onOpen: onConfirmOpen,
+      onClose: onConfirmClose,
+    } = useDisclosure();
+    const {
+      isOpen: isRejectOpen,
+      onOpen: onRejectOpen,
+      onClose: onRejectClose,
+    } = useDisclosure();
+
+    const {
+        data,
+        isLoading: drawalRequestLoading,
+        error,
+        refetch
+      } = useGetFawateerForMakerRequestQuery(
+        {
+          page: debouncedSearchTerm ? undefined : currentPage,  // Omit pagination for search
+          size: debouncedSearchTerm ? undefined : pageSize,     // Omit pagination for search
+          searchTerm: debouncedSearchTerm,
+        },
+        {
+          skip: debouncedSearchTerm === "" && searchTerm !== "", // Skip if search is empty and it's not the initial request
+        }
+      );
+  
+    console.log(data);
+
+    useEffect(() => {
+        const handler = setTimeout(() => {
+          setDebouncedSearchTerm(searchTerm);
+        }, 500); // Adjust delay as needed
+        return () => {
+          clearTimeout(handler);
+        };
+      }, [searchTerm]);
+  
+    // Use useEffect to refetch data when the component mounts
+    useEffect(() => {
+      refetch();
+    }, [refetch]);
+  
+    useEffect(() => {
+      // Simulate loading
+      const timer = setTimeout(() => {
+        setIsLoading(false);
+      }, 1500);
+  
+      // Cleanup the timer on component unmount
+      return () => clearTimeout(timer);
+    }, []);
+  
+    // ====================================================[Table Filter]================================================================
+    const filteredData = data?.data?.rows?.filter((item) => {
+      // Filter by name (case insensitive)
+      const name = item.firstName;
+      const searchLower = searchTerm.toLowerCase();
+      const nameMatches = name.toLowerCase().includes(searchLower);
+  
+      // Filter by status
+      // const status = item.status;
+      // const statusLower = status ? "active" : "inactive";
+  
+      // const statusMatches =
+      //   statusFilter === "all" ||
+      //   (statusFilter === "active" && status === true) ||
+      //   (statusFilter === "inactive" && status === false);
+  
+      return nameMatches;
+    });
+  
+    // ====================================================[Table Setup]================================================================
+    const tableHeadRow = [
+      "Sr.no",
+      "Client ID",
+      "First Name",
+      "Last Name",
+      "E-mail ID",
+      "Phone Number",
+      "Deposit Date",
+      "Deposit Amount (BHD)",
+      "Support Image",
+      "Status",
+    ];
+  
+    const extractedArray = data?.data?.rows?.map((item, idx) => ({
+      
+      // id: item?.id,
+      "Sr.no": (
+        <Text
+          w={"auto"}
+          justifyContent={slideFromRight ? "right" : "left"}
+          as={"span"}
+          color={"teal.900"}
+          fontWeight={"500"}
+          className="d-flex align-items-center web-text-small"
+        >
+          {generateSerialNumber(idx, currentPage, pageSize)}
+        </Text>
+      ),
+      "Client ID": (
+        <Text
+          w={"60px"}
+          justifyContent={slideFromRight ? "right" : "left"}
+          as={"span"}
+          color={"teal.900"}
+          fontWeight={"500"}
+          className="d-flex align-items-center web-text-small"
+        >
+          {item.clientReference_id}
+        </Text>
+      ),
+      "First Name": (
+        <Box isTruncated={true} w={"80px"}>
+          <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
+            {item.firstName}
+          </Text>
+        </Box>
+      ),
+      "Last Name": (
+        <Box w={"50px"} isTruncated={true}>
+          <Text as={"span"} color={"teal.900"}>
+            {item.lastName}
+          </Text>
+        </Box>
+      ),
+      "E-mail ID": (
+        <Box isTruncated={true}>
+          <Text as={"span"} color={"teal.900"}>
+            {item.emailAddress}
+          </Text>
+        </Box>
+      ),
+      "Phone Number": (
+        <Box w={"100px"} isTruncated={true}>
+          <Text as={"span"} color={"teal.900"}>
+            {item.mobileNumber}
+          </Text>
+        </Box>
+      ),
+      "Deposit Date": (
+        <Box
+          w={"100px"}
+          isTruncated={true}
+          display={"flex"}
+        >
+          <Text as={"span"} color={"teal.900"}>
+            {formatDate(item?.transaction_date)}
+          </Text>
+        </Box>
+      ),
+      "Deposit Amount (BHD)": (
+        <Box w={"130px"} isTruncated={true} display={"flex"}>
+          <Text as={"span"} color={"teal.900"}>
+            {/* {item.investorAmount} */}
+            {parseFloat(item?.transaction_amount || 0).toLocaleString(undefined, {
+              minimumFractionDigits: 2,
+              maximumFractionDigits: 2,
+            })}
+            {/* <Badge ms={1} colorScheme="green">{item?.transaction_amount}</Badge>   */}
+          </Text>
+        </Box>
+      ),
+      "Support Image": (
+        <Text
+          color={"green.500"}
+          justifyContent={slideFromRight ? "right" : "left"}
+          as={"span"}
+          fontWeight={"500"}
+          className="d-flex align-items-center web-text-small"
+        >
+        {item?.spportFile_path&&<Badge
+            px={2}
+            py={0.5}
+            textTransform={"inherit"}
+            fontWeight={500}
+            colorScheme={"forestGreen"}
+          >
+            <Link
+              href={import.meta.env.VITE_IMAGE_URL + item?.spportFile_path}
+              isExternal
+              display={"flex"}
+              alignItems={"center"}
+            >
+              <Box me={"1px"}
+                as="span"
+                cursor={"pointer"}
+              >
+                View
+              </Box>
+              <ExternalLinkIcon />
+            </Link>
+          </Badge>}
+        </Text>
+      ),
+      Status: (
+        <Box isTruncated={true} display={"flex"}>
+          <Badge
+            my={1}
+            fontWeight={500}
+            px={2}
+            py={"2px"}
+            rounded={4}
+            colorScheme={
+              item?.transactionStatus === "Approved"
+              ? "green"
+              : item?.transactionStatus === "Pending"
+              ? "yellow"
+              : item?.transactionStatus === "Reject"
+              ? "red"
+              : "gray" // default border color if status doesn't match any condition
+            }
+          >
+            {item.transactionStatus}
+          </Badge>
+        </Box>
+      ),
+    }));
+  
+    const handleDelete = () => {
+      const updatedSponsors = sponser.filter(
+        (sponsor) => sponsor.id !== actionId
+      );
+  
+      setTimeout(() => {
+        setSponser(updatedSponsors);
+        setDeleteAlert(false);
+        setIsLoading(false);
+      }, 100);
+      setIsLoading(true);
+    };
+  
+    return (
+      <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={38}>
+        <Box bg="white.500">
+          <HStack
+            display={"flex"}
+            justifyContent={"space-between"}
+            ps={1}
+            pe={1}
+            pb={4}
+            pt={4}
+            spacing="24px"
+          >
+            <Input
+              type="search"
+              width={300}
+              placeholder="Search..."
+              size="sm"
+              rounded="sm"
+              focusBorderColor="green.500"
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+            />
+  
+            <Pagination
+              isLoading={drawalRequestLoading}
+              pageSize={pageSize}
+              setPageSize={setPageSize}
+              currentPage={currentPage}
+              setCurrentPage={setCurrentPage}
+              totalItems={data?.data?.totalItems}
+            />
+          </HStack>
+        </Box>
+  
+        <NormalTable
+          isLoading={drawalRequestLoading}
+          emptyMessage={`We don't have any Sponers `}
+          tableHeadRow={tableHeadRow}
+          data={extractedArray}
+          viewActionId={actionId}
+          setViewActionId={setActionId}
+          // totalPages={10}
+  
+          setMouseEnteredId={setMouseEnteredId}
+          setMouseEntered={setMouseEntered}
+        />
+  
+        <CustomAlertDialog
+          onClose={() => setDeleteAlert(false)}
+          isOpen={deleteAlert}
+          message={"Are you sure you want to delete sponers?"}
+          alertHandler={handleDelete}
+          isLoading={isLoading}
+        />
+        <DrawalRequestApprove
+          // data={data?.data?.rows}
+          isOpen={isConfirmOpen}
+          onClose={onConfirmClose}
+          id={actionId}
+          // firstField={firstField}
+        />
+        <DrawalRequestReject
+          isOpen={isRejectOpen}
+          onClose={onRejectClose}
+          id={actionId}
+        />
+      </Box>
+    );
+  };
+  
+  export default ApproveHistoryMaker;
+  
--- a/src/Pages/FawateerChecker/ApproveHistory/ConfirmHistory.jsx
+++ b/src/Pages/FawateerChecker/ApproveHistory/ConfirmHistory.jsx
@@ -0,0 +1,95 @@
+import {
+    Box,
+    Button,
+    FormControl,
+    FormLabel,
+    Input,
+    Modal,
+    ModalBody,
+    ModalCloseButton,
+    ModalContent,
+    ModalFooter,
+    ModalHeader,
+    ModalOverlay,
+    Text,
+    useDisclosure,
+  } from "@chakra-ui/react";
+  import React from "react";
+  import * as yup from "yup";
+  import { yupResolver } from "@hookform/resolvers/yup";
+  import { useForm } from "react-hook-form";
+  
+  export const conformModalSchema = yup.object().shape({
+    fees: yup.string().required("File name is required"),
+    totalAmount: yup.string().required("File name is required"),
+  });
+  
+  const ConfirmHistory = ({ isOpen, onClose, firstField }) => {
+    const {
+      register,
+      handleSubmit,
+      formState: { errors },
+    } = useForm({
+      resolver: yupResolver(conformModalSchema),
+    });
+  
+    const onSubmit = (data) => {
+      console.log(data);
+      setFile(data.document[0]);
+  
+      const newDocument = {
+        ...data,
+        document: data.document[0].name, // Store the document name
+        status: true,
+        id: uuidv4(),
+        createdAt: new Date().toISOString(),
+        Type: getFileIcon(file.type),
+      };
+  
+      setCreate((prevCreate) => [...prevCreate, newDocument]);
+      onClose();
+    };
+  
+    const handleFileChange = (event) => {
+      const selectedFile = event.target.files[0];
+      setFile(selectedFile);
+    };
+  
+    return (
+      <Modal isOpen={isOpen} onClose={onClose} initialFocusRef={firstField}>
+        <ModalOverlay />
+        <ModalContent pb={4}>
+          <ModalHeader fontSize={"md"}>Confirm</ModalHeader>
+          <ModalCloseButton />
+          <Box as="form" onSubmit={handleSubmit(onSubmit)}>
+            <ModalBody>
+              <FormControl mb={4}>
+                <FormLabel fontSize="sm">Withdrawal Amount</FormLabel>
+                <Input
+                focusBorderColor='green.400'
+                  name="fileName"
+                  {...register("fileName")}
+                  fontSize="sm"
+                  type="text"
+                  size="sm"
+                  placeholder={"$100,000"}
+                  readOnly
+                />
+              </FormControl>
+            </ModalBody>
+            <ModalFooter>
+              <Button colorScheme="gray" mr={3} onClick={onClose} size={'sm'} rounded={'sm'}>
+                Cancel
+              </Button>
+              <Button colorScheme="forestGreen" variant="solid"  size={'sm'} rounded={'sm'}>
+                Confirm
+              </Button>
+            </ModalFooter>
+          </Box>
+        </ModalContent>
+      </Modal>
+    );
+  };
+  
+  export default ConfirmHistory;
+  
--- a/src/Pages/FawateerChecker/ApproveHistory/RejectHistory.jsx
+++ b/src/Pages/FawateerChecker/ApproveHistory/RejectHistory.jsx
@@ -0,0 +1,100 @@
+import {
+    Box,
+    Button,
+    FormControl,
+    FormLabel,
+    Input,
+    Modal,
+    ModalBody,
+    ModalCloseButton, 
+    ModalContent,
+    ModalFooter,
+    ModalHeader,
+    ModalOverlay,
+    Text,
+    Textarea,
+    useDisclosure,
+  } from "@chakra-ui/react";
+  import React from "react";
+  import * as yup from "yup";
+  import { yupResolver } from "@hookform/resolvers/yup";
+  import { useForm } from "react-hook-form";
+  
+  export const conformModalSchema = yup.object().shape({
+      comment: yup.string().required("Comment is required"),
+  });
+  
+  const RejectHistory = ({ isOpen, onClose, firstField }) => {
+    const {
+      register,
+      handleSubmit,
+      formState: { errors },
+    } = useForm({
+      resolver: yupResolver(conformModalSchema),
+    });
+  
+    const onSubmit = (data) => {
+      console.log(data);
+      setFile(data.document[0]);
+  
+      const newDocument = {
+        ...data,
+        document: data.document[0].name, // Store the document name
+        comment: true,
+        id: uuidv4(),
+        Type: getFileIcon(file.type),
+      };
+  
+      setCreate((prevCreate) => [...prevCreate, newDocument]);
+      onClose();
+    };
+  
+    const handleFileChange = (event) => {
+      const selectedFile = event.target.files[0];
+      setFile(selectedFile);
+    };
+  
+    return (
+      <Modal isOpen={isOpen} onClose={onClose} initialFocusRef={firstField}>
+        <ModalOverlay />
+        <ModalContent pb={4}>
+          <ModalHeader fontSize={"md"}>Reject</ModalHeader>
+          <ModalCloseButton />
+          <Box as="form" onSubmit={handleSubmit(onSubmit)}>
+            <ModalBody>
+              <FormControl mb={4}>
+                <FormLabel fontSize="sm">Comment</FormLabel>
+                <Textarea rows={6} 
+                focusBorderColor='green.400'
+                  name="fileName"
+                  {...register("fileName")}
+                  fontSize="sm"
+                  type="textarea"
+                  size="md"
+                  placeholder={"$100,000"}
+                  rounded={'md'}
+                  resize={'none'}
+                />
+                {errors.comment && (
+                  <Text fontSize="xs" color="red">
+                    {errors.comment.message}
+                  </Text>
+                )}
+              </FormControl>
+            </ModalBody>
+            <ModalFooter>
+              <Button colorScheme="gray" mr={3} onClick={onClose} size={'sm'} rounded={'sm'}>
+                Cancel
+              </Button>
+              <Button colorScheme="forestGreen" variant="solid" size={'sm'} rounded={'sm'}>
+                Send
+              </Button>
+            </ModalFooter>
+          </Box>
+        </ModalContent>
+      </Modal>
+    );
+  };
+  
+  export default RejectHistory;
+  
--- a/src/Pages/FawateerChecker/ApproveRequest/ApproveRequest.jsx
+++ b/src/Pages/FawateerChecker/ApproveRequest/ApproveRequest.jsx
@@ -0,0 +1,416 @@
+import {
+    Avatar,
+    Badge,
+    Box,
+    Button,
+    HStack,
+    Input,
+    Link,
+    Text,
+    Tooltip,
+    useDisclosure,
+    useToast,
+  } from "@chakra-ui/react";
+  import React, { useContext, useEffect, useState } from "react";
+  import { CheckIcon, CloseIcon, ExternalLinkIcon } from "@chakra-ui/icons";
+import Pagination from "../../../Components/Pagination";
+import GlobalStateContext from "../../../Contexts/GlobalStateContext";
+import CustomAlertDialog from "../../../Components/CustomAlertDialog";
+import NormalTable from "../../../Components/DataTable/NormalTable";
+import { generateSerialNumber } from "../../../Constants/Constants";
+import { useGetFawateerRequestQuery } from "../../../Services/fawateer.request.service";
+import { TABLE_PAGINATION } from "../../../Constants/Paginations";
+import { OPACITY_ON_LOAD } from "../../../Layout/animations";
+import RequestApproveModal from "./RequestApproveModal";
+import RequestRejectModal from "./RequestRejectModal";
+  
+  const ApproveRequest = () => {
+    const toast = useToast();
+    const { slideFromRight, fawateerRequest, setFawateerRequest } =
+      useContext(GlobalStateContext);
+    const [searchTerm, setSearchTerm] = useState("");
+    const [isLoading, setIsLoading] = useState(true);
+    const [deleteAlert, setDeleteAlert] = useState(false);
+    const [actionId, setActionId] = useState(false);
+    const [mouseEntered, setMouseEntered] = useState(false);
+    const [mouseEnteredId, setMouseEnteredId] = useState("");
+  
+    const [pageSize, setPageSize] = useState(TABLE_PAGINATION?.size);
+    const [currentPage, setCurrentPage] = useState(TABLE_PAGINATION?.page);
+    const [debouncedSearchTerm, setDebouncedSearchTerm] = useState("");
+  
+    const formatDate = (date) => {
+      return new Date(date).toLocaleDateString('en-GB', {
+        day: '2-digit',
+        month: '2-digit',
+        year: 'numeric',
+      });
+    };
+  
+
+  // Debounce the search term to avoid making a request on every keystroke
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedSearchTerm(searchTerm);
+    }, 500); // Adjust delay as needed
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [searchTerm]);
+    const {
+      isOpen: isConfirmOpen,
+      onOpen: onConfirmOpen,
+      onClose: onConfirmClose,
+    } = useDisclosure();
+    const {
+      isOpen: isRejectOpen,
+      onOpen: onRejectOpen,
+      onClose: onRejectClose,
+    } = useDisclosure();
+  
+    const {
+      data,
+      isLoading: drawalRequestLoading,
+      error,
+      refetch
+    } = useGetFawateerRequestQuery(
+      {
+        page: debouncedSearchTerm ? undefined : currentPage,  // Omit pagination for search
+        size: debouncedSearchTerm ? undefined : pageSize,     // Omit pagination for search
+        searchTerm: debouncedSearchTerm,
+      },
+      {
+        skip: debouncedSearchTerm === "" && searchTerm !== "", // Skip if search is empty and it's not the initial request
+      }
+    );
+  
+    console.log(data?.data?.rows);
+    
+  
+    
+  
+   // Use useEffect to refetch data when the component mounts
+   useEffect(() => {
+    refetch();
+  }, [refetch]);
+  
+    useEffect(() => {
+  
+      // Simulate loading
+      const timer = setTimeout(() => {
+        setIsLoading(false);
+      }, 1500);
+  
+      // Cleanup the timer on component unmount
+      return () => clearTimeout(timer);
+    }, []);
+  
+    // ====================================================[Table Filter]================================================================
+    const filteredData = data?.data?.rows?.filter((item) => {
+      // Filter by name (case insensitive)
+      const name = item.firstName;
+      const searchLower = searchTerm.toLowerCase();
+      const nameMatches = name.toLowerCase().includes(searchLower);
+  
+      // Filter by status
+      // const status = item.status;
+      // const statusLower = status ? "active" : "inactive";
+  
+      // const statusMatches =
+      //   statusFilter === "all" ||
+      //   (statusFilter === "active" && status === true) ||
+      //   (statusFilter === "inactive" && status === false);
+  
+      return nameMatches;
+  
+  
+    });
+  
+    const role = localStorage?.getItem('role')
+    // ====================================================[Table Setup]================================================================
+    const tableHeadRow = [
+      "Sr.no",
+      "Client ID",
+      "First Name",
+      "Last Name",
+      "E-mail ID",
+      "Phone Number",
+      "Deposit Date",
+      "Deposit Amount (BHD)",
+      "Support Image",
+      "Action", 
+    ];
+  
+  
+  
+    const extractedArray = filteredData?.map((item, idx) => ({
+        // id: item?.id,
+        "Sr.no": (
+          <Text
+             w={"auto"}
+            justifyContent={slideFromRight ? "right" : "left"}
+            as={"span"}
+            color={"teal.900"}
+            fontWeight={"500"}
+            className="d-flex align-items-center web-text-small"
+          >
+            {generateSerialNumber(idx,currentPage, pageSize )}
+          </Text>
+        ),
+        "Client ID": (
+          <Text
+            justifyContent={slideFromRight ? "right" : "left"}
+            as={"span"}
+            color={"teal.900"}
+            fontWeight={"500"}
+            className="d-flex align-items-center web-text-small"
+          >
+            {item.clientReference_id}
+          </Text>
+        ),
+        "First Name": (
+          <Box isTruncated={true}>
+            <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
+              {item.firstName}
+            </Text>
+          </Box>
+        ),
+        "Last Name": (
+          <Box isTruncated={true}>
+            <Text as={"span"} color={"teal.900"}>
+              {item.lastName}
+            </Text>
+          </Box>
+        ),
+        "E-mail ID": (
+          <Box isTruncated={true}>
+            <Text as={"span"} color={"teal.900"}>
+              {item.emailAddress}
+            </Text>
+          </Box>
+        ),
+        "Phone Number": (
+          <Box w={"100px"} isTruncated={true}>
+            <Text as={"span"} color={"teal.900"}>
+              {item.mobileNumber}
+            </Text>
+          </Box>
+        ),
+        "Deposit Date": (
+          <Box isTruncated={true}  display={'flex'} >
+            <Text as={"span"} color={"teal.900"}>
+              {formatDate(item?.transaction_date)}
+            </Text>
+          </Box>
+        ),
+        "Deposit Amount (BHD)": (
+          <Box isTruncated={true}  display={'flex'} >
+            <Text as={"span"} color={"teal.900"}>
+              {/* {item.investorAmount} */}
+              {parseFloat(item?.transaction_amount || 0).toLocaleString(undefined, {
+                minimumFractionDigits: 2,
+                maximumFractionDigits: 2,
+              })}
+              {/* <Badge ms={1} colorScheme="green">{item?.transaction_amount}</Badge>   */}
+            </Text>
+          </Box>
+        ),
+        "Support Image": (
+          <Text
+            color={"green.500"}
+            justifyContent={slideFromRight ? "right" : "left"}
+            as={"span"}
+            fontWeight={"500"}
+            className="d-flex align-items-center web-text-small"
+          >
+            <Badge
+              px={2}
+              py={0.5}
+              textTransform={"inherit"}
+              fontWeight={500}
+              colorScheme={"forestGreen"}
+            >
+              <Link
+                href={import.meta.env.VITE_IMAGE_URL + item?.spportFile_path}
+                isExternal
+                display={"flex"}
+                alignItems={"center"}
+              >
+                <Box me={"1px"}
+                  as="span"
+                  cursor={"pointer"}
+                >
+                  View
+                </Box>
+                <ExternalLinkIcon />
+              </Link>
+            </Badge>
+          </Text>
+        ),
+        "Status": (
+          <Box isTruncated={true}  display={'flex'} >
+            <Badge
+            my={1}
+            fontWeight={500}
+            px={2}
+            py={"2px"}
+            rounded={4}
+            colorScheme={
+              item?.transactionStatus === "Approved"
+              ? "green"
+              : item?.transactionStatus === "Pending"
+              ? "yellow"
+              : item?.transactionStatus === "Reject"
+              ? "red"
+              : "gray" // default border color if status doesn't match any condition
+            }
+          >
+            {item.transactionStatus}
+          </Badge>
+          </Box>
+        ),
+        Action: (
+          <Box display={"flex"} justifyContent={"center"} gap={2}>
+            <Tooltip
+              rounded={"sm"}
+              fontSize={"xs"}
+              label="Approve"
+              bg="#fff"
+              color={"green.500"}
+              placement="left-start"
+            >
+              <Button
+                // colorScheme="forestGreen"
+                // color="green.500"
+                rounded={"sm"}
+                size={"xs"}
+                textTransform={"inherit"}
+                fontWeight={500}
+                px={2}
+                py={1}
+                onClick={() => {
+                  setActionId(item.id);
+                  onConfirmOpen();
+                }}
+                colorScheme="green"
+                variant={"solid"}
+                cursor={"pointer"}
+              >
+                <CheckIcon fontSize={"12px"} />
+              </Button>
+            </Tooltip>
+            <Tooltip 
+              rounded={"sm"}
+              fontSize={"xs"}
+              label="Reject"
+              bg="#fff"
+              color={"red.500"}
+              placement="left-start"
+            >
+              <Button
+                colorScheme="red"
+                // color="red.500"
+                rounded={"sm"}
+                size={"xs"}
+                textTransform={"inherit"}
+                fontWeight={500}
+                px={2}
+                onClick={() => {
+                  setActionId(item.id);
+                  onRejectOpen();
+                }}
+                py={1}
+              // variant={"solid"}
+              >
+                <CloseIcon fontSize={"10px"} />
+              </Button>
+            </Tooltip>
+          </Box>
+        ),
+      }));
+  
+    const handleDelete = () => {
+      const updatedSponsors = sponser.filter(
+        (sponsor) => sponsor.id !== actionId
+      );
+  
+      setTimeout(() => {
+        setSponser(updatedSponsors);
+        setDeleteAlert(false);
+        setIsLoading(false);
+      }, 100);
+      setIsLoading(true);
+    };
+  
+    return (
+      <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={38}>
+        <Box bg="white.500">
+          <HStack
+            display={"flex"}
+            justifyContent={"space-between"}
+            ps={1}
+            pe={1}
+            pb={4}
+            pt={4}
+            spacing="24px"
+          >
+            <Input
+              type="search"
+              width={300}
+              placeholder="Search..."
+              size="sm"
+              rounded="sm"
+              focusBorderColor="green.500"
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+            />
+  
+              <Pagination
+                isLoading={drawalRequestLoading}
+                pageSize={pageSize}
+                setPageSize={setPageSize}
+                currentPage={currentPage}
+                setCurrentPage={setCurrentPage}
+                totalItems={data?.data?.totalItems}
+              />
+          </HStack>
+        </Box>
+  
+        <NormalTable
+          isLoading={drawalRequestLoading}
+          emptyMessage={`We don't have any Sponers `}
+          tableHeadRow={tableHeadRow}
+          data={extractedArray}
+          viewActionId={actionId}
+          setViewActionId={setActionId}
+          // totalPages={10}
+  
+          setMouseEnteredId={setMouseEnteredId}
+          setMouseEntered={setMouseEntered}
+        />
+  
+        <CustomAlertDialog
+          onClose={() => setDeleteAlert(false)}
+          isOpen={deleteAlert}
+          message={"Are you sure you want to delete sponers?"}
+          alertHandler={handleDelete}
+          isLoading={isLoading}
+        />
+        <RequestApproveModal
+          // data={data?.data?.rows}
+          isOpen={isConfirmOpen}
+          onClose={onConfirmClose}
+          id={actionId}
+        // firstField={firstField}
+        />
+        <RequestRejectModal
+          isOpen={isRejectOpen}
+          onClose={onRejectClose}
+          id={actionId} 
+        />
+      </Box>
+    );
+  };
+  
+  export default ApproveRequest;
+  
--- a/src/Pages/FawateerChecker/ApproveRequest/RequestApproveModal.jsx
+++ b/src/Pages/FawateerChecker/ApproveRequest/RequestApproveModal.jsx
@@ -0,0 +1,177 @@
+import {
+  Box,
+  Button,
+  FormControl,
+  FormHelperText,
+  FormLabel,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+  Textarea,
+  useDisclosure,
+  useToast,
+} from "@chakra-ui/react";
+import React, { useEffect, useState } from "react";
+import * as yup from "yup";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { useForm } from "react-hook-form";
+import { useDepositRejectMutation } from "../../../Services/deposit.request.service";
+import ToastBox from "../../../Components/ToastBox";
+import { useApproveCommentMutation } from "../../../Services/fawateer.request.service";
+
+export const conformModalSchema = yup.object().shape({
+  // checkerComment: yup.string().required("Comment is required")
+  // .max(50, "Investment name cannot be more than 50 characters"),
+  checkerComment: yup
+  .string()
+  .required("Comment is required")
+  .max(200, "Approve Comment cannot be more than 200 characters"),
+});
+
+const RequestApproveModal = ({ isOpen, onClose, firstField ,id}) => {
+  const [isBtnLoading , setIsBtnLoading] = useState(false)
+
+  const toast = useToast()
+
+  const {
+    register,
+    reset,
+    watch,
+    handleSubmit,
+    formState: { errors },
+  } = useForm({
+    resolver: yupResolver(conformModalSchema),
+  });
+
+  const [ approveFawateer ] = useApproveCommentMutation()
+  
+
+  const onSubmit = async(data) => {
+    console.log(data, "tewxttttt");
+    setIsBtnLoading(true)
+    try {
+      const res = await approveFawateer({data,id})
+      if (res?.error) {
+        toast({
+          render: () => (
+            <ToastBox status={"error"} message={res?.error?.data?.message} />
+          ),
+        });
+        setIsBtnLoading(false)
+      }else if(res?.data){
+        toast({
+          render: () => (
+            <ToastBox message={res?.data?.message} />
+          ),
+        });
+        onClose()
+        setIsBtnLoading(false)
+      }else{
+        toast({
+          render: () => (
+            <ToastBox status={'error'} message={"Something went wrong"} />
+          ),
+        });
+        setIsBtnLoading(false)
+      }
+    } catch (error) {
+      
+    }
+  };
+
+  const handleFileChange = (event) => {
+    const selectedFile = event.target.files[0];
+    setFile(selectedFile);
+  };
+
+
+  const { data, isLoading } = 
+  (id, {
+    skip: !id,
+  });
+
+  useEffect(() => {
+    if (data) {
+      reset({
+        investorAmount: data?.data?.investorAmount,
+      });
+    }
+  }, [data, reset]);
+
+  const heandleOnClose = () =>{
+    reset()
+    onClose() 
+  }
+
+  return (
+    <Modal isCentered isOpen={isOpen} onClose={heandleOnClose} initialFocusRef={firstField}>
+      <ModalOverlay />
+      <ModalContent pb={4}>
+        <ModalHeader fontSize={"md"}>Approve Comment</ModalHeader>
+        <ModalCloseButton />
+        {isLoading ? (
+          <FullscreenLoaders height={"50vh"} />
+        ) : (
+        <Box as="form" onSubmit={handleSubmit(onSubmit)}>
+          <ModalBody>
+            <FormControl mb={4} isRequired>
+              <FormLabel fontSize="sm">Comment</FormLabel>
+              <Textarea
+                rows={6}
+                focusBorderColor="green.400"
+                name="checkerComment"
+                {...register("checkerComment")}
+                fontSize="sm"
+                type="textarea"
+                size="md"
+                placeholder={"Enter your checkerComment...."}
+                rounded={"md"}
+                resize={"none"}
+                maxLength={200}
+              />
+              {errors.checkerComment && (
+                <Text fontSize="xs" color="red">
+                  {errors.checkerComment.message}
+                </Text>
+              )}
+              <FormHelperText fontSize="xs" color="gray.500">
+                Maximum length should be 200 characters. You have entered
+                {watch("checkerComment")?.length || 0} characters.
+              </FormHelperText>
+            </FormControl>
+          </ModalBody>
+          <ModalFooter>
+            <Button
+              colorScheme="gray"
+              mr={3}
+              onClick={onClose}
+              size={"sm"}
+              rounded={"sm"}
+            >
+              Cancel
+            </Button>
+            <Button
+              colorScheme="forestGreen"
+              variant="solid"
+              size={"sm"}
+              rounded={"sm"}
+              isLoading={isBtnLoading}
+              type="submit"
+            >
+              Send
+            </Button>
+          </ModalFooter>
+        </Box>
+        )}
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default RequestApproveModal;
--- a/src/Pages/FawateerChecker/ApproveRequest/RequestRejectModal.jsx
+++ b/src/Pages/FawateerChecker/ApproveRequest/RequestRejectModal.jsx
@@ -0,0 +1,165 @@
+import {
+  Box,
+  Button,
+  FormControl,
+  FormLabel,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+  Textarea,
+  useDisclosure,
+  useToast,
+} from "@chakra-ui/react";
+import React, { useEffect, useState } from "react";
+import * as yup from "yup";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { useForm } from "react-hook-form";
+import { useDepositRejectMutation } from "../../../Services/deposit.request.service";
+import ToastBox from "../../../Components/ToastBox";
+import { useRejectCommentMutation } from "../../../Services/fawateer.request.service";
+
+export const conformModalSchema = yup.object().shape({
+  comments: yup.string().required("Comment is required"),
+});
+
+const RequestRejectModal = ({ isOpen, onClose, firstField ,id}) => {
+  const [isBtnLoading , setIsBtnLoading] = useState(false)
+
+  const toast = useToast()
+
+  const {
+    register,
+    reset,
+    handleSubmit,
+    formState: { errors },
+  } = useForm({
+    resolver: yupResolver(conformModalSchema),
+  });
+
+  const [ rejectFawateer ] = useRejectCommentMutation()
+  
+
+  const onSubmit = async(data) => {
+    console.log(data, "tewxttttt");
+    setIsBtnLoading(true)
+    try {
+      const res = await rejectFawateer({data,id})
+      if (res?.error) {
+        toast({
+          render: () => (
+            <ToastBox status={"error"} message={res?.error?.data?.message} />
+          ),
+        });
+        setIsBtnLoading(false)
+      }else if(res?.data){
+        toast({
+          render: () => (
+            <ToastBox message={res?.data?.message} />
+          ),
+        });
+        onClose()
+        setIsBtnLoading(false)
+      }else{
+        toast({
+          render: () => (
+            <ToastBox status={'error'} message={"Something went wrong"} />
+          ),
+        });
+        setIsBtnLoading(false)
+      }
+    } catch (error) {
+      
+    }
+  };
+
+  const handleFileChange = (event) => {
+    const selectedFile = event.target.files[0];
+    setFile(selectedFile);
+  };
+
+
+  const { data, isLoading } = 
+  (id, {
+    skip: !id,
+  });
+
+  useEffect(() => {
+    if (data) {
+      reset({
+        investorAmount: data?.data?.investorAmount,
+      });
+    }
+  }, [data, reset]);
+
+  const heandleOnClose = () =>{
+    reset()
+    onClose()
+  }
+
+  return (
+    <Modal isCentered isOpen={isOpen} onClose={heandleOnClose} initialFocusRef={firstField}>
+      <ModalOverlay />
+      <ModalContent pb={4}>
+        <ModalHeader fontSize={"md"}>Reject Comment</ModalHeader>
+        <ModalCloseButton />
+        {isLoading ? (
+          <FullscreenLoaders height={"50vh"} />
+        ) : (
+        <Box as="form" onSubmit={handleSubmit(onSubmit)}>
+          <ModalBody>
+            <FormControl mb={4} isRequired>
+              <FormLabel fontSize="sm">Comment</FormLabel>
+              <Textarea
+                rows={6}
+                focusBorderColor="green.400"
+                name="comments"
+                {...register("comments")}
+                fontSize="sm"
+                type="textarea"
+                size="md"
+                placeholder={"Enter your comments...."}
+                rounded={"md"}
+                resize={"none"}
+              />
+              {errors.comments && (
+                <Text fontSize="xs" color="red">
+                  {errors.comments.message}
+                </Text>
+              )}
+            </FormControl>
+          </ModalBody>
+          <ModalFooter>
+            <Button
+              colorScheme="gray"
+              mr={3}
+              onClick={onClose}
+              size={"sm"}
+              rounded={"sm"}
+            >
+              Cancel
+            </Button>
+            <Button
+              colorScheme="forestGreen"
+              variant="solid"
+              size={"sm"}
+              rounded={"sm"}
+              isLoading={isBtnLoading}
+              type="submit"
+            >
+              Send
+            </Button>
+          </ModalFooter>
+        </Box>
+        )}
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default RequestRejectModal;
--- a/src/Pages/ForgetPassword.jsx
+++ b/src/Pages/ForgetPassword.jsx
@@ -0,0 +1,134 @@
+import {
+  Button,
+  DrawerFooter,
+  FormControl,
+  FormErrorMessage,
+  FormLabel,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalHeader,
+  ModalOverlay,
+  Stack,
+  useToast,
+} from "@chakra-ui/react";
+import * as yup from "yup";
+import React, { useState} from "react";
+import { useForm, Controller } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { useForgetPasswordMutation } from "../Services/forget.password.service";
+import ToastBox from "../Components/ToastBox";
+
+const validationSchema = yup.object().shape({
+  emailAddress: yup
+    .string()
+    .email("Invalid email format")
+    .required("Email, Phone, or Username is required"),
+});
+
+const ForgetPassword = ({ isOpen, onClose, firstField }) => {
+  const toast = useToast();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const [forgetPassword] = useForgetPasswordMutation();
+
+  const {
+    control,
+    handleSubmit,
+    formState: { errors },
+  } = useForm({
+    resolver: yupResolver(validationSchema),
+  });
+
+  const onSubmit = async (formData) => {
+    
+    setIsLoading(true);
+    try {
+      const res = await forgetPassword(formData);
+      if (res?.data?.statusCode === 200) {
+        toast({
+          render: () => <ToastBox message={res?.data?.message} />,
+        });
+        handleClose();
+      } else if (res?.error?.status === 401) {
+        toast({
+          render: () => (
+            <ToastBox message={res?.error?.data?.message} status="error" />
+          ),
+        });
+        handleClose();
+      }
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleClose = () => {
+    setIsLoading(false);
+    onClose();
+  };
+
+  return (
+    <Modal
+      isCentered
+      isOpen={isOpen}
+      onClose={handleClose}
+      initialFocusRef={firstField}
+    >
+      <ModalOverlay />
+      <ModalContent>
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <ModalHeader fontSize="md">Forget Password</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody pb={4}>
+            <Stack spacing={4}>
+              <FormControl isInvalid={errors.emailAddress}>
+                <FormLabel fontSize="sm" mb={3} fontWeight={500}>
+                  Email, Phone, or Username
+                </FormLabel>
+                <Controller
+                  name="emailAddress"
+                  control={control}
+                  render={({ field }) => (
+                    <Input
+                      {...field}
+                      size="md"
+                      fontSize="sm"
+                    focusBorderColor="forestGreen.300"
+                      rounded={4}
+                      type="text"
+                    />
+                  )}
+                />
+                <FormErrorMessage fontSize="xs" fontWeight={500}>
+                  {errors.emailAddress?.message}
+                </FormErrorMessage>
+              </FormControl>
+            </Stack>
+          </ModalBody>
+
+          <DrawerFooter mb={5}>
+            <Button
+              w="100%"
+              colorScheme="forestGreen" 
+              rounded="md"
+              size="md"
+              type="submit"
+              isLoading={isLoading}
+              fontWeight={400}
+              fontSize="sm"
+            >
+              Send Login Link
+            </Button>
+          </DrawerFooter>
+        </form>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default ForgetPassword;
--- a/src/Pages/IO_Management/CreateIO/AddCashDetails.jsx
+++ b/src/Pages/IO_Management/CreateIO/AddCashDetails.jsx
@@ -30,14 +30,14 @@ import GlobalStateContext from "../../../Contexts/GlobalStateContext";
 import CurrencyInput from "../../../Components/CurrencyInput";

 const cashDetails = yup.object().shape({
-  transactionDate: yup.string().required("Artifact name is required"),
-  ioTransType_xid: yup.number().required("Artifact name is required"),
-  transactionAmount: yup.number().required("Artifact name is required"),
+  transactionDate: yup.string().required("Date is required"),
+  ioTransType_xid: yup.number().required("Cash transaction is required"),
+  transactionAmount: yup.number().required("Transaction Amount is required"),
  comments: yup.string().notRequired(),
 });

 const AddCashDetails = ({ isOpen, onClose, firstField, actionId, setActionId, data }) => {
-  const params = useParams()
+  const params = useParams() 
  const id = params?.id
  const [file, setFile] = useState("");
  const [fileName, setFileName] = useState("");
@@ -56,7 +56,7 @@ const AddCashDetails = ({ isOpen, onClose, firstField, actionId, setActionId, da
  const [updateVideoArtifacts] = useUpdateVideoArtifactsMutation()
  // const {
  //   data
-  // } = useGetArtifactsQuery(id)
+  // } = useGetArtifactsQuery(id) 

  const {
    control,
@@ -91,11 +91,11 @@ const AddCashDetails = ({ isOpen, onClose, firstField, actionId, setActionId, da
          render: () => <ToastBox message={res?.error?.data?.message } status={"error"} />,
        });
      }
-
+      

    } catch (error) {
      console.log(error);
-
+      setIsLoading(false);
    }

  };
@@ -134,13 +134,14 @@ const AddCashDetails = ({ isOpen, onClose, firstField, actionId, setActionId, da

          <DrawerBody>
            <Stack spacing={4}>
-              <FormControl isInvalid={errors.transactionDate} isRequired>
+              <FormControl isInvalid={errors.transactionDate} isRequired> 
                <FormLabel fontSize={"sm"}>Date Selection</FormLabel>
                <Controller
                  name="transactionDate"
                  control={control}
                  render={({ field }) => (
-                    <Input {...field} fontSize={"sm"} type="date" size={"sm"} />
+                    <Input 
+                    focusBorderColor="forestGreen.300" {...field} fontSize={"sm"} type="date" size={"sm"} />
                  )}
                />
                <FormErrorMessage fontSize={"xs"} fontWeight={500}>
@@ -160,6 +161,7 @@ const AddCashDetails = ({ isOpen, onClose, firstField, actionId, setActionId, da
                      placeholder="Select an option"
                      fontSize={"sm"}
                      size={"sm"}
+                      focusBorderColor="forestGreen.300"
                    >
                      {IODetails?.ioCashTransaction?.map(({ id, transactionName }) => (
                        <option key={id} value={id}>
@@ -199,7 +201,8 @@ const AddCashDetails = ({ isOpen, onClose, firstField, actionId, setActionId, da
                  name="comments"
                  control={control}
                  render={({ field }) => (
-                    <Textarea {...field} textAlign={'right'} fontSize={"sm"} type="text" size={"sm"} />
+                    <Textarea {...field} textAlign={'left'} 
+                    focusBorderColor="forestGreen.300" fontSize={"sm"} type="text" size={"sm"} />
                  )}
                />
                <FormErrorMessage fontSize={"xs"} fontWeight={500}>
--- a/src/Pages/IO_Management/CreateIO/AddIONav.jsx
+++ b/src/Pages/IO_Management/CreateIO/AddIONav.jsx
@@ -11,10 +11,13 @@ import {
    FormControl,
    FormErrorMessage,
    FormLabel,
+    HStack,
    Input,
    Select,
    Stack,
+    Text,
    Textarea,
+    VStack,
    useToast,
  } from "@chakra-ui/react";
  import * as yup from "yup";
@@ -31,8 +34,8 @@ import {
 import { formatDatee } from "../../../Components/FormField";
  
  const ioNav = yup.object().shape({
-    transactionDate: yup.string().required("Artifact name is required"),
-    transactionAmount: yup.number().required("Artifact name is required"),
+    transactionDate: yup.string().required("Date is required"),
+    transactionAmount: yup.number().required("New NAV is required"),
    comments: yup.string().notRequired(),
  });
  
@@ -85,10 +88,10 @@ import { formatDatee } from "../../../Components/FormField";
          });
          handleClose()
        }else if(res?.error?.status === 400){
-          setIsLoading(false);
          toast({
            render: () => <ToastBox message={res?.error?.data?.message } status={"error"} />,
          });
+          handleClose()
        }
  
  
@@ -110,6 +113,7 @@ import { formatDatee } from "../../../Components/FormField";
    };
  
    const handleClose = () => {
+      setIsLoading(false);
      setAlert(false)
      onClose()
      reset({
@@ -122,7 +126,15 @@ import { formatDatee } from "../../../Components/FormField";



-const today = formatDatee(new Date(), 'yyyy-MM-dd'); 
+const today = formatDatee(new Date(), 'yyyy-MM-dd');
+
+function calculatePercentage(newNav, currNav) {
+  const per = (newNav - currNav) / currNav * 100
+  return per.toFixed(2)
+}
+
+
+console.log(calculatePercentage(1092500, 976070));


  
@@ -161,7 +173,7 @@ const today = formatDatee(new Date(), 'yyyy-MM-dd');
  
  
                <FormControl isInvalid={errors.transactionAmount} isRequired>
-                  <FormLabel fontSize={"sm"}>Transaction Amount</FormLabel>
+                  <FormLabel fontSize={"sm"}>New NAV</FormLabel>
                  <Controller
                    name="transactionAmount"
                    control={control}
@@ -173,7 +185,26 @@ const today = formatDatee(new Date(), 'yyyy-MM-dd');
                    {errors.transactionAmount?.message}
                  </FormErrorMessage>
                </FormControl>
-  
+                
+
+                <HStack justify={'start'} gap={10} bg={'green.100'} p={3} rounded={'md'} shadow={'md'}>
+                  <VStack align={'start'}>
+                    <Text as={'span'} fontSize={'sm'} fontWeight={500}>Current nav</Text>
+                    <Text as={'span'} fontSize={'sm'}>
+                      {parseFloat(IODetails?.ioNAV || 0).toLocaleString(undefined, {
+                        minimumFractionDigits: 2,
+                        maximumFractionDigits: 2,
+                      })}
+                    </Text>
+                  </VStack>
+
+
+                  <VStack align={'start'}>
+                    <Text as={'span'} fontSize={'sm'} fontWeight={500}>Live return %</Text>
+                    <Text as={'span'} fontSize={'sm'}>{calculatePercentage(watch()?.transactionAmount||IODetails?.ioNAV,IODetails?.ioNAV)}</Text>
+                  </VStack>
+                </HStack>
+                
  
  
                <FormControl isInvalid={errors.comments}>
--- a/src/Pages/IO_Management/CreateIO/CreateIO.jsx
+++ b/src/Pages/IO_Management/CreateIO/CreateIO.jsx
@@ -8,21 +8,22 @@ import IODetails from "./IODetails";
 import KeyMerits from "./KeyMerits";
 import IOArtifacts from "./IOArtifacts";
 import Investors from "./Investors";
-import IOCashDetails from "./IOCashDetails";
-import IONAVDetails from "./IONAVDetails";
+// import IOCashDetails from "./IOCashDetailsold";
+// import IONAVDetails from "./IONAVDetailsOld";
 import InvestmentDocument from "./InvestmentDocument"; // Ensure this is the correct import
 import ViewIOdataHeader from "../ViewIO/ViewIOdataHeader";
 import { useParams } from "react-router-dom";
 import FullscreenLoaders from "../../../Components/Loaders/FullscreenLoaders";
 import { useGetIOprepopulateDataQuery } from "../../../Services/io.service";
 import UnderConstruction from "../../UnderConstruction";
+import Destribution from "./Destribution";
+import IOCashDetails from "./IOCashDetails/IOCashDetails";
+import IONAVDetails from "./IONAVDetails/IONAVDetails";
+import IOTransaction from "./IOTransaction/IOTransaction";

 const CreateIO = () => {
  const id = useParams()?.id;
  const { data, error, isLoading } = useGetIOprepopulateDataQuery();
-  
-
-  // console.log(data?.data);

  const enableNextTab = (index) => {
    setTabs((prevTabs) => {
@@ -44,38 +45,43 @@ const CreateIO = () => {
    {
      label: "Investment documents",
      Content: InvestmentDocument,
-      isDisabled: id ? false : true,
+      isDisabled: id ? true : true,
    },
    {
      label: "Key merits",
      Content: KeyMerits,
-      isDisabled: id ? false : true,
+      isDisabled: id ? true : true,
    },
    {
      label: "IO artifacts",
      Content: IOArtifacts,
-      isDisabled: id ? false : true,
+      isDisabled: id ? true : true,
    },
    {
      label: "Investors",
-      // Content: Investors,
-      Content: UnderConstruction,
-      isDisabled: id ? false : true,
+      Content: Investors,
+      // Content: UnderConstruction,
+      isDisabled: id ? true : true,
    },
    {
      label: "IO Cash Detail",
      Content: IOCashDetails,
-      isDisabled: id ? false : true,
+      isDisabled: id ? true : true,
    },
    {
      label: "IO NAV Details",
      Content: IONAVDetails,
-      isDisabled: id ? false : true,
+      isDisabled: id ? true : true,
    },
    {
      label: "Distribution to Investors",
-      Content: IONAVDetails,
-      isDisabled: id ? false : true,
+      Content: Destribution,
+      isDisabled: id ? true : true,
+    },
+    {
+      label: "IO Transaction",
+      Content: IOTransaction,
+      isDisabled: id ? true : true,
    },
  ];

@@ -116,7 +122,8 @@ const CreateIO = () => {
            <Tab
              isDisabled={isDisabled}
              key={index}
-              fontSize={"sm"}
+              fontSize={"xs"}
+              fontWeight={500}
              _selected={{
                color: "#004118",
                borderBottom: "2px solid #38a169",
--- a/src/Pages/IO_Management/CreateIO/Destribution.jsx
+++ b/src/Pages/IO_Management/CreateIO/Destribution.jsx
@@ -1,9 +1,238 @@
-import React from 'react'
+import React, { useContext, useEffect, useRef, useState } from "react";
+import GlobalStateContext from "../../../Contexts/GlobalStateContext";
+import {
+  Box,
+  HStack,
+  Input,
+  Text,
+  Table,
+  Tbody,
+  Th,
+  Tr,
+  Avatar,
+  useDisclosure,
+  Button,
+  Badge,
+} from "@chakra-ui/react";
+import { OPACITY_ON_LOAD } from "../../../Layout/animations";
+import Pagination from "../../../Components/Pagination";
+import NormalTable from "../../../Components/DataTable/NormalTable";
+import CustomAlertDialog from "../../../Components/CustomAlertDialog";
+import { formatDatee } from "../../../Components/FormField";
+import { AddIcon } from "@chakra-ui/icons";
+import AddIONav from "./AddIONav";
+
+const Destribution = () => {
+  const { navDetails, setNavDetails, IODetails } =
+    useContext(GlobalStateContext);
+  const firstField = useRef();
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const [searchTerm, setSearchTerm] = useState("");
+  const [isLoading, setIsLoading] = useState(true);
+  const [deleteAlert, setDeleteAlert] = useState(false);
+  const [actionId, setActionId] = useState(false);
+  const [mouseEntered, setMouseEntered] = useState(false);
+  const [mouseEnteredId, setMouseEnteredId] = useState("");
+
+  console.log(IODetails?.ioNAVHistory);
+
+  const formatDate = (date) => {
+    return new Date(date).toLocaleDateString("en-GB", {
+      day: "2-digit",
+      month: "2-digit",
+      year: "numeric",
+    });
+  };
+
+  useEffect(() => {
+    // Simulate loading
+    const timer = setTimeout(() => {
+      setIsLoading(false);
+    }, 1500);
+
+    // Cleanup the timer on component unmount
+    return () => clearTimeout(timer);
+  }, []);
+
+  // Table setup
+  const tableHeadRow = [
+    // "Sr.No",
+    "Date",
+    "Amount",
+    "% of Investment",
+  ];
+
+  // Table filter
+  const filteredData = IODetails?.distributionToInvestor
+    ?.filter((item) => {
+      const name = item?.transactionAmount;
+      const searchLower = searchTerm.toLowerCase();
+      const nameMatches = name.toLowerCase().includes(searchLower);
+      return nameMatches;
+    })
+    .sort((b, a) => new Date(a.transactionDate) - new Date(b.transactionDate));
+
+  const extractedArray = filteredData?.map((item, index) => ({
+    id: item?.id,
+    "Sr.No": (
+      <Text
+        justifyContent={"start"}
+        as={"span"}
+        color={"teal.900"}
+        fontWeight={"500"}
+        className="d-flex align-items-start web-text-small"
+      >
+        {item?.id}
+      </Text>
+    ),
+    Date: (
+      <Text
+        justifyContent={"center"}
+        as={"span"}
+        color={"teal.900"}
+        fontWeight={"500"}
+        className="d-flex align-items-center web-text-small"
+      >
+        {formatDate(item.transactionDate)}
+      </Text>
+    ),
+    Amount: (
+      <Text
+        justifyContent={"center"}
+        as={"span"}
+        color={"teal.900"}
+        fontWeight={"500"}
+        className="d-flex align-items-center web-text-small"
+      >
+        <Badge ms={1} colorScheme="green" me={1}>
+          $
+        </Badge>
+        {`${parseFloat(item.transactionAmount || 0).toLocaleString(undefined, {
+          minimumFractionDigits: 2,
+          maximumFractionDigits: 2,
+        })}`}
+      </Text>
+    ),
+    "% of Investment": (
+      <Text
+        justifyContent={"center"}
+        as={"span"}
+        color={"teal.900"}
+        fontWeight={"500"}
+        className="d-flex align-items-center web-text-small"
+      >
+        {parseFloat(item.percentage).toFixed(2)}%
+      </Text>
+    ),
+  }));
+
+  const handleDelete = () => {
+    const updatedNav = navDetails.filter((sponsor) => sponsor.id !== actionId);
+
+    setTimeout(() => {
+      setNavDetails(updatedNav);
+      setDeleteAlert(false);
+      setIsLoading(false);
+    }, 100);
+    setIsLoading(true);
+  };
+
+  const Total = () => {
+    return (
+      <Table size="sm">
+        <Tbody>
+          <Tr backgroundColor="gray.50">
+            <Th
+              textAlign={"center"}
+              p={3}
+              width="60px"
+              color={"#004118"}
+              whiteSpace="normal"
+              wordBreak="normal"
+              overflowWrap="normal"
+            >
+              Total
+            </Th>
+            <Th
+              textAlign={"center"}
+              p={3}
+              width="90px"
+              color={"#004118"}
+              whiteSpace="normal"
+              wordBreak="normal"
+              overflowWrap="normal"
+            >
+              <Badge ms={1} colorScheme="green" me={1}>
+                $
+              </Badge>
+              {IODetails?.total_distributeToInvestor_amt?.toLocaleString(
+                undefined,
+                { minimumFractionDigits: 2, maximumFractionDigits: 2 }
+              )}
+            </Th>
+            <Th
+              textAlign={"center"}
+              p={3}
+              width="100px"
+              color={"#004118"}
+              whiteSpace="normal"
+              wordBreak="normal"
+              overflowWrap="normal"
+            >
+              {" "}
+            </Th>
+          </Tr>
+        </Tbody>
+      </Table>
+    );
+  };

-const Distribution = () => {
  return (
-    <div>Distribution</div>
-  )
-}
+    <Box {...OPACITY_ON_LOAD} pb={0}>
+      <Box bg="white.500">
+        <HStack
+          display={"flex"}
+          justifyContent={"space-between"}
+          pb={3}
+          spacing="24px"
+        >
+          <Input
+            type="search"
+            width={300}
+            placeholder="Search..."
+            size="sm"
+            rounded="sm"
+            focusBorderColor="green.500"
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+          />
+        </HStack>
+      </Box>

-export default Distribution
+      <NormalTable
+        centered={true}
+        emptyMessage={`We don't have any Sponers`}
+        tableHeadRow={tableHeadRow}
+        data={extractedArray}
+        isLoading={isLoading}
+        viewActionId={actionId}
+        setViewActionId={setActionId}
+        total={<Total />}
+        setMouseEnteredId={setMouseEnteredId}
+        setMouseEntered={setMouseEntered}
+      />
+
+      <CustomAlertDialog
+        onClose={() => setDeleteAlert(false)}
+        isOpen={deleteAlert}
+        message={"Are you sure you want to delete sponers?"}
+        alertHandler={handleDelete}
+        isLoading={isLoading}
+      />
+
+      <AddIONav isOpen={isOpen} onClose={onClose} firstField={firstField} />
+    </Box>
+  );
+};
+
+export default Destribution;
--- a/src/Pages/IO_Management/CreateIO/IOArtifacts.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOArtifacts.jsx
@@ -22,7 +22,7 @@ import {
 } from "@chakra-ui/icons";
 import IOArtifactsAdd from "../IOArtifactsAdd";
 import IOArtifactsVideo from "./IOArtifactsVideo";
-import SetDisplayOrder from "./SetDisplayOrder";
+import SetDisplayOrder from "./SetDisplayOrderKeyMerits";
 import { useParams } from "react-router-dom";
 import {
  useDeleteImageArtifactsMutation,
@@ -32,6 +32,8 @@ import {
 import { getFileNameFromPath } from "../../../Constants/Constants";
 import ImageViewer from "../../../Components/ImageViewer";
 import ToastBox from "../../../Components/ToastBox";
+import SetDisplayOrderIOArtifactsImages from "./SetDisplayOrderIOArtifactsImages";
+import SetDisplayOrderIOArtifactsVideo from "./SetDisplayOrderIOArtifactsVideo";

 const IOArtifacts = ({ enableNextTab, index, data }) => {
  const toast = useToast()
@@ -114,7 +116,7 @@ const IOArtifacts = ({ enableNextTab, index, data }) => {
        setDeleteAlertVideo(false);
        setIsLoadingBtn(false);
        toast({
-          render: () => <ToastBox message={res?.data?.message} status="error" />,
+          render: () => <ToastBox message={res?.data?.message} status="success" />,
        });
      }
    } catch (error) {
@@ -132,7 +134,7 @@ const IOArtifacts = ({ enableNextTab, index, data }) => {
        setDeleteAlertImage(false);
        setIsLoadingBtn(false);
        toast({
-          render: () => <ToastBox message={res?.data?.message} status="error" />,
+          render: () => <ToastBox message={res?.data?.message} status="success" />,
        });

      }
@@ -143,7 +145,14 @@ const IOArtifacts = ({ enableNextTab, index, data }) => {

  const tableHeadRow = ["Sr.no", "File Name", "View image", "Action"];

-  const extractedArray = IObyID?.data?.artifactsImage?.map((item, index) => ({
+console.log(IObyID?.data?.artifactsImage);
+  // console.log(filteredData);
+  const sortedDataImage = [...(IObyID?.data?.artifactsImage || [])]?.sort(
+    (a, b) => a?.displayOrder - b?.displayOrder
+  );
+
+
+  const extractedArray = sortedDataImage?.map((item, index) => ({
    "Sr.no": (
      <Text
        justifyContent={slideFromRight ? "right" : "left"}
@@ -246,6 +255,17 @@ const IOArtifacts = ({ enableNextTab, index, data }) => {
    ),
  }));

+
+  console.log(IObyID?.data?.artifactsVideo);
+// console.log(filteredData);
+const sortedDataVideo = [...(IObyID?.data?.artifactsVideo || [])]?.sort(
+  (a, b) => a?.displayOrder - b?.displayOrder
+);
+
+
+
+
+
  const tableHeadRowTwo = [
    "Sr.no",
    "File Name",
@@ -253,7 +273,7 @@ const IOArtifacts = ({ enableNextTab, index, data }) => {
    "Action",
  ];

-  const extractedArrayTwo = IObyID?.data?.artifactsVideo?.map(
+  const extractedArrayTwo = sortedDataVideo?.map(
    (item, index) => ({
      "Sr.no": (
        <Text
@@ -352,9 +372,9 @@ const IOArtifacts = ({ enableNextTab, index, data }) => {
          Manage IO Images
        </Box>
        <HStack>
+ 

-
-          {IObyID?.data?.artifactsImage?.length !== 0 &&<SetDisplayOrder data={IObyID?.data?.artifactsImage} />}
+          {IObyID?.data?.artifactsImage?.length !== 0 &&<SetDisplayOrderIOArtifactsImages data={sortedDataImage} />}
          <Button
            leftIcon={<AddIcon />}
            onClick={onOpen}
@@ -390,7 +410,7 @@ const IOArtifacts = ({ enableNextTab, index, data }) => {
          Manage IO videos
        </Box>
        <HStack>
-          {IObyID?.data?.artifactsVideo?.length !== 0 &&<SetDisplayOrder data={IObyID?.data?.artifactsVideo} />}
+          {IObyID?.data?.artifactsVideo?.length !== 0 &&<SetDisplayOrderIOArtifactsVideo data={sortedDataVideo} />}
          <Button
            leftIcon={<AddIcon />}
            onClick={onOpenVideo}
--- a/src/Pages/IO_Management/CreateIO/IOArtifactsVideo.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOArtifactsVideo.jsx
@@ -10,6 +10,7 @@ import {
  DrawerOverlay,
  FormControl,
  FormErrorMessage,
+  FormHelperText,
  FormLabel,
  Input,
  Stack,
@@ -26,11 +27,11 @@ import { useParams } from "react-router-dom";
 import ToastBox from "../../../Components/ToastBox";

 const investmentVideoSchema = yup.object().shape({
-  artifactName: yup.string().required("Artifact name is required"),
+  artifactName: yup.string().required("Artifact name is required")
+  .max(50, "Approve Comment cannot be more than 50 characters"),
  artifactStreamingURL: yup.string()
    .required("Artifact streaming URL is required")
-    .url("Invalid URL format")
-    .matches(/\.mp4$/, "URL must end with .mp4"),
+    .url("Invalid URL format"),
 });

 const IOArtifactsAdd = ({ isOpen, onClose, firstField, actionId, setActionId, data }) => {
@@ -153,21 +154,25 @@ const IOArtifactsAdd = ({ isOpen, onClose, firstField, actionId, setActionId, da

          <DrawerBody>
            <Stack spacing={4}>
-              <FormControl isInvalid={errors.artifactName}>
+              <FormControl isInvalid={errors.artifactName} isRequired>
                <FormLabel fontSize={"sm"}>Artifact Name</FormLabel>
                <Controller
                  name="artifactName"
                  control={control}
                  render={({ field }) => (
-                    <Input {...field} fontSize={"sm"} type="text" size={"sm"} />
+                    <Input {...field} fontSize={"sm"} type="text" size={"sm"} maxLength={50}  />
                  )}
                />
                <FormErrorMessage fontSize={"xs"} fontWeight={500}>
                  {errors.artifactName?.message}
                </FormErrorMessage>
+                <FormHelperText fontSize="xs" color="gray.500">
+                    <Box as="span" me={1}>Maximum length should be 50 characters. You have entered </Box>
+                    {watch("artifactName")?.length || 0} characters.
+                  </FormHelperText>
              </FormControl>

-              <FormControl isInvalid={errors.artifactStreamingURL}>
+              <FormControl isInvalid={errors.artifactStreamingURL} isRequired>
                <FormLabel fontSize={"sm"}>Artifact Streaming URL</FormLabel>
                <Controller
                  name="artifactStreamingURL"
@@ -212,7 +217,7 @@ const IOArtifactsAdd = ({ isOpen, onClose, firstField, actionId, setActionId, da
        isOpen={alert}
        onClose={() => setAlert(false)}
        alertHandler={handleSave}
-        message={"Are you sure you want to add this artifact?"}
+        message={"Are you sure you want to update this artifact?"}
        isLoading={isLoading}
      />
    </>
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails/AddCaseDetails.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/AddCaseDetails.jsx
@@ -0,0 +1,263 @@
+import {
+  Box,
+  Button,
+  Drawer,
+  DrawerBody,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerOverlay,
+  FormControl,
+  FormErrorMessage,
+  FormHelperText,
+  FormLabel,
+  Input,
+  Select,
+  Stack,
+  Textarea,
+  useToast,
+} from "@chakra-ui/react";
+import * as yup from "yup";
+import React, { useState, useEffect, useContext } from "react";
+import { useForm, Controller } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { v4 as uuidv4 } from "uuid";
+import { useParams } from "react-router-dom";
+import CustomAlertDialog from "../../../../Components/CustomAlertDialog";
+import { useCreateIoCashMutation, useCreateVideoArtifactsMutation, useUpdateVideoArtifactsMutation } from "../../../../Services/io.service";
+import ToastBox from "../../../../Components/ToastBox";
+import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
+import CurrencyInput from "../../../../Components/CurrencyInput";
+
+const cashDetails = yup.object().shape({
+  transactionDate: yup.string().required("Date is required"),
+  ioTransType_xid: yup.number().required("Cash transaction is required"),
+  transactionAmount: yup.number().required("Transaction Amount is required"),
+  comments: yup.string().notRequired()
+  .max(200, "Approve Comment cannot be more than 200 characters"),
+});
+
+const AddCaseDetails = ({ isOpen, onClose, firstField, actionId, setActionId, data, setActiveTab }) => {
+  const params = useParams() 
+  const id = params?.id
+  const [file, setFile] = useState("");
+  const [fileName, setFileName] = useState("");
+  const [isLoading, setIsLoading] = useState(false)
+  const [alert, setAlert] = useState(false);
+  const toast = useToast();
+
+  console.log(isOpen);
+  
+
+
+
+  // ======================[ Cotext Api ]
+  const { IODetails } = useContext(GlobalStateContext);
+  const found = data?.find((item) => item?.id === actionId);
+
+
+  const [createArtifactsVideo] = useCreateVideoArtifactsMutation()
+  const [updateVideoArtifacts] = useUpdateVideoArtifactsMutation()
+  // const {
+  //   data
+  // } = useGetArtifactsQuery(id) 
+
+  const {
+    control,
+    handleSubmit,
+    watch,
+    reset,
+    formState: { errors },
+  } = useForm({
+    resolver: yupResolver(cashDetails),
+  });
+
+
+  const [createIoCash] = useCreateIoCashMutation()
+
+
+  const onSubmit = async (data) => {
+
+    setIsLoading(true)
+
+    try {
+
+      const res = await createIoCash({ data, id })
+      if (res?.data) {
+        setIsLoading(false);
+        toast({
+          render: () => <ToastBox message={res?.data?.message} />,
+        });
+        handleClose()
+        setActiveTab(1)
+      }else if(res?.error){
+        setIsLoading(false);
+        toast({
+          render: () => <ToastBox message={res?.error?.data?.message } status={"error"} />,
+        });
+      }
+
+    } catch (error) {
+      console.log(error);
+      setIsLoading(false);
+    }
+
+  };
+
+
+
+  const handleConfirm = () => {
+    handleSubmit(onSubmit)();
+  };
+
+  const handleSave = () => {
+    handleSubmit(onSubmit)();
+  };
+
+  const handleClose = () => {
+    setAlert(false)
+    onClose()
+    reset({
+      transactionAmount:""
+    })
+  }
+
+  return (
+    <>
+      <Drawer
+        size={"md"}
+        isOpen={isOpen}
+        placement="right"
+        initialFocusRef={firstField}
+        onClose={handleClose}
+      >
+        <DrawerOverlay />
+        <DrawerContent>
+          <DrawerCloseButton />
+          <DrawerHeader fontSize={"sm"}>IO Cash Details</DrawerHeader>
+
+          <DrawerBody>
+            <Stack spacing={4}>
+              <FormControl isInvalid={errors.transactionDate} isRequired> 
+                <FormLabel fontSize={"sm"}>Date Selection</FormLabel>
+                <Controller
+                  name="transactionDate"
+                  control={control}
+                  render={({ field }) => (
+                    <Input 
+                    focusBorderColor="forestGreen.300" {...field} fontSize={"sm"} type="date" size={"sm"} />
+                  )}
+                />
+                <FormErrorMessage fontSize={"xs"} fontWeight={500}>
+                  {errors.transactionDate?.message}
+                </FormErrorMessage>
+              </FormControl>
+
+
+              <FormControl isInvalid={errors.ioTransType_xid} isRequired>
+                <FormLabel fontSize={"sm"}>Cash transaction</FormLabel>
+                <Controller
+                  name="ioTransType_xid"
+                  control={control}
+                  render={({ field }) => (
+                    <Select
+                      {...field}
+                      placeholder="Select an option"
+                      fontSize={"sm"}
+                      size={"sm"}
+                      focusBorderColor="forestGreen.300"
+                    >
+                      {IODetails?.ioCashTransaction?.map(({ id, transactionName }) => (
+                        <option key={id} value={id}>
+                          {transactionName}
+                        </option>
+                      ))}
+                    </Select>
+                  )}
+                />
+                <FormErrorMessage fontSize={"xs"} fontWeight={500}>
+                  {errors.ioTransType_xid?.message}
+                </FormErrorMessage>
+              </FormControl>
+
+
+
+
+              <FormControl isInvalid={errors.transactionAmount} isRequired>
+                <FormLabel fontSize={"sm"}>Transaction Amount</FormLabel>
+                <Controller
+                  name="transactionAmount"
+                  control={control}
+                  render={({ field }) => (
+                    <CurrencyInput {...field} textAlign={'right'} fontSize={"sm"} type="number" size={"sm"} />
+                  )}
+                />
+                <FormErrorMessage fontSize={"xs"} fontWeight={500}>
+                  {errors.transactionAmount?.message}
+                </FormErrorMessage>
+              </FormControl>
+
+
+
+              <FormControl isInvalid={errors.comments}>
+                <FormLabel fontSize={"sm"}>Comment</FormLabel>
+                <Controller
+                  name="comments"
+                  control={control} 
+                  render={({ field }) => (
+                    <Textarea {...field} textAlign={'left'}  
+                    maxLength={200} 
+                    focusBorderColor="forestGreen.300" fontSize={"sm"} type="text" size={"sm"} />
+                  )}
+                />
+                <FormErrorMessage fontSize={"xs"} fontWeight={500}>
+                  {errors.comments?.message}
+                </FormErrorMessage>
+                <FormHelperText fontSize="xs" color="gray.500">
+                    <Box as="span" me={1}>Maximum length should be 200 characters. You have entered </Box>
+                    {watch("comments")?.length || 0} characters.
+                  </FormHelperText>
+              </FormControl>
+
+            </Stack>
+          </DrawerBody>
+
+          <DrawerFooter>
+            <Button
+              variant="outline"
+              colorScheme={"forestGreen"}
+              rounded={"sm"}
+              size={"sm"}
+              mr={3}
+              onClick={handleClose}
+            >
+              Cancel
+            </Button>
+
+            <Button
+              colorScheme={"forestGreen"}
+              rounded={"sm"}
+              size={"sm"}
+
+              onClick={() => setAlert(true)}
+            >
+              Save
+            </Button>
+          </DrawerFooter>
+        </DrawerContent>
+      </Drawer>
+
+
+      <CustomAlertDialog
+        isOpen={alert}
+        onClose={() => setAlert(false)}
+        alertHandler={handleSave}
+        message={"Are you sure you want to add cash details?"}
+        isLoading={isLoading}
+      />
+    </>
+  );
+};
+
+export default AddCaseDetails;
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails/AddPending.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/AddPending.jsx
@@ -0,0 +1,251 @@
+import {
+  Box,
+  Button,
+  Drawer,
+  DrawerBody,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerOverlay,
+  FormControl,
+  FormErrorMessage,
+  FormLabel,
+  Input,
+  Select,
+  Stack,
+  Textarea,
+  useToast,
+} from "@chakra-ui/react";
+import * as yup from "yup";
+import React, { useState, useEffect, useContext } from "react";
+import { useForm, Controller } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { v4 as uuidv4 } from "uuid";
+import { useParams } from "react-router-dom";
+import CustomAlertDialog from "../../../../Components/CustomAlertDialog";
+import { useCreateIoCashMutation, useCreateVideoArtifactsMutation, useUpdateVideoArtifactsMutation } from "../../../../Services/io.service";
+import ToastBox from "../../../../Components/ToastBox";
+import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
+import CurrencyInput from "../../../../Components/CurrencyInput";
+
+const cashDetails = yup.object().shape({
+  transactionDate: yup.string().required("Date is required"),
+  ioTransType_xid: yup.number().required("Cash transaction is required"),
+  transactionAmount: yup.number().required("Transaction Amount is required"),
+  comments: yup.string().notRequired(),
+});
+
+const AddPending = ({ isOpen, onClose, firstField, actionId, setActionId, data }) => {
+  const params = useParams() 
+  const id = params?.id
+  const [file, setFile] = useState("");
+  const [fileName, setFileName] = useState("");
+  const [isLoading, setIsLoading] = useState(false)
+  const [alert, setAlert] = useState(false);
+  const toast = useToast();
+
+
+
+  // ======================[ Cotext Api ]
+  const { IODetails } = useContext(GlobalStateContext);
+  const found = data?.find((item) => item?.id === actionId);
+
+
+  const [createArtifactsVideo] = useCreateVideoArtifactsMutation()
+  const [updateVideoArtifacts] = useUpdateVideoArtifactsMutation()
+  // const {
+  //   data
+  // } = useGetArtifactsQuery(id) 
+
+  const {
+    control,
+    handleSubmit,
+    watch,
+    reset,
+    formState: { errors },
+  } = useForm({
+    resolver: yupResolver(cashDetails),
+  });
+
+
+  const [createIoCash] = useCreateIoCashMutation()
+
+
+  const onSubmit = async (data) => {
+
+    setIsLoading(true)
+
+    try {
+
+      const res = await createIoCash({ data, id })
+      if (res?.data?.statusCode === 200) {
+        setIsLoading(false);
+        toast({
+          render: () => <ToastBox message={res?.data?.message} />,
+        });
+        handleClose()
+      }else if(res?.error?.status === 400){
+        setIsLoading(false);
+        toast({
+          render: () => <ToastBox message={res?.error?.data?.message } status={"error"} />,
+        });
+      }
+
+    } catch (error) {
+      console.log(error);
+    }
+
+  };
+
+
+
+  const handleConfirm = () => {
+    handleSubmit(onSubmit)();
+  };
+
+  const handleSave = () => {
+    handleSubmit(onSubmit)();
+  };
+
+  const handleClose = () => {
+    setAlert(false)
+    onClose()
+    reset({
+      transactionAmount:""
+    })
+  }
+
+  return (
+    <>
+      <Drawer
+        size={"md"}
+        isOpen={isOpen}
+        placement="right"
+        initialFocusRef={firstField}
+        onClose={handleClose}
+      >
+        <DrawerOverlay />
+        <DrawerContent>
+          <DrawerCloseButton />
+          <DrawerHeader fontSize={"sm"}>IO Cash Details</DrawerHeader>
+
+          <DrawerBody>
+            <Stack spacing={4}>
+              <FormControl isInvalid={errors.transactionDate} isRequired> 
+                <FormLabel fontSize={"sm"}>Date Selection</FormLabel>
+                <Controller
+                  name="transactionDate"
+                  control={control}
+                  render={({ field }) => (
+                    <Input 
+                    focusBorderColor="forestGreen.300" {...field} fontSize={"sm"} type="date" size={"sm"} />
+                  )}
+                />
+                <FormErrorMessage fontSize={"xs"} fontWeight={500}>
+                  {errors.transactionDate?.message}
+                </FormErrorMessage>
+              </FormControl>
+
+
+              <FormControl isInvalid={errors.ioTransType_xid} isRequired>
+                <FormLabel fontSize={"sm"}>Cash transaction</FormLabel>
+                <Controller
+                  name="ioTransType_xid"
+                  control={control}
+                  render={({ field }) => (
+                    <Select
+                      {...field}
+                      placeholder="Select an option"
+                      fontSize={"sm"}
+                      size={"sm"}
+                      focusBorderColor="forestGreen.300"
+                    >
+                      {IODetails?.ioCashTransaction?.map(({ id, transactionName }) => (
+                        <option key={id} value={id}>
+                          {transactionName}
+                        </option>
+                      ))}
+                    </Select>
+                  )}
+                />
+                <FormErrorMessage fontSize={"xs"} fontWeight={500}>
+                  {errors.ioTransType_xid?.message}
+                </FormErrorMessage>
+              </FormControl>
+
+
+
+
+              <FormControl isInvalid={errors.transactionAmount} isRequired>
+                <FormLabel fontSize={"sm"}>Transaction Amount</FormLabel>
+                <Controller
+                  name="transactionAmount"
+                  control={control}
+                  render={({ field }) => (
+                    <CurrencyInput {...field} textAlign={'right'} fontSize={"sm"} type="number" size={"sm"} />
+                  )}
+                />
+                <FormErrorMessage fontSize={"xs"} fontWeight={500}>
+                  {errors.transactionAmount?.message}
+                </FormErrorMessage>
+              </FormControl>
+
+
+
+              <FormControl isInvalid={errors.comments}>
+                <FormLabel fontSize={"sm"}>Comments</FormLabel>
+                <Controller
+                  name="comments"
+                  control={control}
+                  render={({ field }) => (
+                    <Textarea {...field} textAlign={'left'} 
+                    focusBorderColor="forestGreen.300" fontSize={"sm"} type="text" size={"sm"} />
+                  )}
+                />
+                <FormErrorMessage fontSize={"xs"} fontWeight={500}>
+                  {errors.comments?.message}
+                </FormErrorMessage>
+              </FormControl>
+
+            </Stack>
+          </DrawerBody>
+
+          <DrawerFooter>
+            <Button
+              variant="outline"
+              colorScheme={"forestGreen"}
+              rounded={"sm"}
+              size={"sm"}
+              mr={3}
+              onClick={handleClose}
+            >
+              Cancel
+            </Button>
+
+            <Button
+              colorScheme={"forestGreen"}
+              rounded={"sm"}
+              size={"sm"}
+
+              onClick={() => setAlert(true)}
+            >
+              Save
+            </Button>
+          </DrawerFooter>
+        </DrawerContent>
+      </Drawer>
+
+
+      <CustomAlertDialog
+        isOpen={alert}
+        onClose={() => setAlert(false)}
+        alertHandler={handleSave}
+        message={"Are you sure you want to add cash details?"}
+        isLoading={isLoading}
+      />
+    </>
+  );
+};
+
+export default AddPending;
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails/AddRejected.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/AddRejected.jsx
@@ -0,0 +1,251 @@
+import {
+  Box,
+  Button,
+  Drawer,
+  DrawerBody,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerOverlay,
+  FormControl,
+  FormErrorMessage,
+  FormLabel,
+  Input,
+  Select,
+  Stack,
+  Textarea,
+  useToast,
+} from "@chakra-ui/react";
+import * as yup from "yup";
+import React, { useState, useEffect, useContext } from "react";
+import { useForm, Controller } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { v4 as uuidv4 } from "uuid";
+import { useParams } from "react-router-dom";
+import CustomAlertDialog from "../../../../Components/CustomAlertDialog";
+import { useCreateIoCashMutation, useCreateVideoArtifactsMutation, useUpdateVideoArtifactsMutation } from "../../../../Services/io.service";
+import ToastBox from "../../../../Components/ToastBox";
+import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
+import CurrencyInput from "../../../../Components/CurrencyInput";
+
+const cashDetails = yup.object().shape({
+  transactionDate: yup.string().required("Date is required"),
+  ioTransType_xid: yup.number().required("Cash transaction is required"),
+  transactionAmount: yup.number().required("Transaction Amount is required"),
+  comments: yup.string().notRequired(),
+});
+
+const AddRejected = ({ isOpen, onClose, firstField, actionId, setActionId, data }) => {
+  const params = useParams() 
+  const id = params?.id
+  const [file, setFile] = useState("");
+  const [fileName, setFileName] = useState("");
+  const [isLoading, setIsLoading] = useState(false)
+  const [alert, setAlert] = useState(false);
+  const toast = useToast();
+
+
+
+  // ======================[ Cotext Api ]
+  const { IODetails } = useContext(GlobalStateContext);
+  const found = data?.find((item) => item?.id === actionId);
+
+
+  const [createArtifactsVideo] = useCreateVideoArtifactsMutation()
+  const [updateVideoArtifacts] = useUpdateVideoArtifactsMutation()
+  // const {
+  //   data
+  // } = useGetArtifactsQuery(id) 
+
+  const {
+    control,
+    handleSubmit,
+    watch,
+    reset,
+    formState: { errors },
+  } = useForm({
+    resolver: yupResolver(cashDetails),
+  });
+
+
+  const [createIoCash] = useCreateIoCashMutation()
+
+
+  const onSubmit = async (data) => {
+
+    setIsLoading(true)
+
+    try {
+
+      const res = await createIoCash({ data, id })
+      if (res?.data?.statusCode === 200) {
+        setIsLoading(false);
+        toast({
+          render: () => <ToastBox message={res?.data?.message} />,
+        });
+        handleClose()
+      }else if(res?.error?.status === 400){
+        setIsLoading(false);
+        toast({
+          render: () => <ToastBox message={res?.error?.data?.message } status={"error"} />,
+        });
+      }
+
+    } catch (error) {
+      console.log(error);
+    }
+
+  };
+
+
+
+  const handleConfirm = () => {
+    handleSubmit(onSubmit)();
+  };
+
+  const handleSave = () => {
+    handleSubmit(onSubmit)();
+  };
+
+  const handleClose = () => {
+    setAlert(false)
+    onClose()
+    reset({
+      transactionAmount:""
+    })
+  }
+
+  return (
+    <>
+      <Drawer
+        size={"md"}
+        isOpen={isOpen}
+        placement="right"
+        initialFocusRef={firstField}
+        onClose={handleClose}
+      >
+        <DrawerOverlay />
+        <DrawerContent>
+          <DrawerCloseButton />
+          <DrawerHeader fontSize={"sm"}>IO Cash Details</DrawerHeader>
+
+          <DrawerBody>
+            <Stack spacing={4}>
+              <FormControl isInvalid={errors.transactionDate} isRequired> 
+                <FormLabel fontSize={"sm"}>Date Selection</FormLabel>
+                <Controller
+                  name="transactionDate"
+                  control={control}
+                  render={({ field }) => (
+                    <Input 
+                    focusBorderColor="forestGreen.300" {...field} fontSize={"sm"} type="date" size={"sm"} />
+                  )}
+                />
+                <FormErrorMessage fontSize={"xs"} fontWeight={500}>
+                  {errors.transactionDate?.message}
+                </FormErrorMessage>
+              </FormControl>
+
+
+              <FormControl isInvalid={errors.ioTransType_xid} isRequired>
+                <FormLabel fontSize={"sm"}>Cash transaction</FormLabel>
+                <Controller
+                  name="ioTransType_xid"
+                  control={control}
+                  render={({ field }) => (
+                    <Select
+                      {...field}
+                      placeholder="Select an option"
+                      fontSize={"sm"}
+                      size={"sm"}
+                      focusBorderColor="forestGreen.300"
+                    >
+                      {IODetails?.ioCashTransaction?.map(({ id, transactionName }) => (
+                        <option key={id} value={id}>
+                          {transactionName}
+                        </option>
+                      ))}
+                    </Select>
+                  )}
+                />
+                <FormErrorMessage fontSize={"xs"} fontWeight={500}>
+                  {errors.ioTransType_xid?.message}
+                </FormErrorMessage>
+              </FormControl>
+
+
+
+
+              <FormControl isInvalid={errors.transactionAmount} isRequired>
+                <FormLabel fontSize={"sm"}>Transaction Amount</FormLabel>
+                <Controller
+                  name="transactionAmount"
+                  control={control}
+                  render={({ field }) => (
+                    <CurrencyInput {...field} textAlign={'right'} fontSize={"sm"} type="number" size={"sm"} />
+                  )}
+                />
+                <FormErrorMessage fontSize={"xs"} fontWeight={500}>
+                  {errors.transactionAmount?.message}
+                </FormErrorMessage>
+              </FormControl>
+
+
+
+              <FormControl isInvalid={errors.comments}>
+                <FormLabel fontSize={"sm"}>Comments</FormLabel>
+                <Controller
+                  name="comments"
+                  control={control}
+                  render={({ field }) => (
+                    <Textarea {...field} textAlign={'left'} 
+                    focusBorderColor="forestGreen.300" fontSize={"sm"} type="text" size={"sm"} />
+                  )}
+                />
+                <FormErrorMessage fontSize={"xs"} fontWeight={500}>
+                  {errors.comments?.message}
+                </FormErrorMessage>
+              </FormControl>
+
+            </Stack>
+          </DrawerBody>
+
+          <DrawerFooter>
+            <Button
+              variant="outline"
+              colorScheme={"forestGreen"}
+              rounded={"sm"}
+              size={"sm"}
+              mr={3}
+              onClick={handleClose}
+            >
+              Cancel
+            </Button>
+
+            <Button
+              colorScheme={"forestGreen"}
+              rounded={"sm"}
+              size={"sm"}
+
+              onClick={() => setAlert(true)}
+            >
+              Save
+            </Button>
+          </DrawerFooter>
+        </DrawerContent>
+      </Drawer>
+
+
+      <CustomAlertDialog
+        isOpen={alert}
+        onClose={() => setAlert(false)}
+        alertHandler={handleSave}
+        message={"Are you sure you want to add cash details?"}
+        isLoading={isLoading}
+      />
+    </>
+  );
+};
+
+export default AddRejected;
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails/Approved.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/Approved.jsx
@@ -0,0 +1,397 @@
+import {
+  Avatar,
+  Badge,
+  Box,
+  Button,
+  HStack,
+  Input,
+  Table,
+  Tag,
+  Tbody,
+  Text,
+  Th,
+  Tooltip,
+  Tr,
+  useDisclosure,
+  useToast,
+} from "@chakra-ui/react";
+import React, { useContext, useEffect, useRef, useState } from "react";
+import { AddIcon, DeleteIcon, EditIcon, ViewIcon } from "@chakra-ui/icons";
+import { LuFileSpreadsheet } from "react-icons/lu";
+import * as XLSX from "xlsx";
+import { OPACITY_ON_LOAD } from "../../../../Layout/animations";
+import NormalTable from "../../../../Components/DataTable/NormalTable";
+import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
+import CustomAlertDialog from "../../../../Components/CustomAlertDialog";
+import ToastBox from "../../../../Components/ToastBox";
+import AddCashDetails from "../AddCashDetails";
+import { debounce } from "../../../Admin/Contact";
+import AddApproved from "./AddCaseDetails";
+import { useUpdateIOCaseMutation } from "../../../../Services/io.service";
+import { useParams } from "react-router-dom";
+import AddCaseDetails from "./AddCaseDetails";
+
+const formatDate = (date) => new Date(date).toLocaleDateString();
+
+const Approved = () => {
+  const firstField = useRef();
+  const params = useParams();
+  const toast = useToast();
+  const id = params?.id;
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const { IODetails, approved, setApproved } = useContext(GlobalStateContext);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [isLoading, setIsLoading] = useState(true);
+  const [deleteAlert, setDeleteAlert] = useState(false);
+  const [actionId, setActionId] = useState(false);
+  const [mouseEntered, setMouseEntered] = useState(false);
+  const [mouseEnteredId, setMouseEnteredId] = useState("");
+
+  useEffect(() => {
+    // Simulate loading
+    const timer = setTimeout(() => {
+      setIsLoading(false);
+    }, 1500);
+
+    // Cleanup the timer on component unmount
+    return () => clearTimeout(timer);
+  }, []);
+
+  const formatDate = (date) => {
+    return new Date(date).toLocaleDateString("en-GB", {
+      day: "2-digit",
+      month: "2-digit",
+      year: "numeric",
+    });
+  };
+
+  console.log("==============", IODetails?.ioCashStatusHistory?.Approved);
+
+  // Table filter
+  const filteredData = IODetails?.ioCashStatusHistory?.Approved?.filter(
+    (item) => {
+      // Filter by name (case insensitive)
+      const name = item.transactionDate;
+      const searchLower = searchTerm.toLowerCase();
+      const nameMatches = name.toLowerCase().includes(searchLower);
+      return nameMatches;
+    }
+  );
+
+  const [updateIOCase] = useUpdateIOCaseMutation();
+
+  const tableHeadRow = [
+    "Sr No.",
+    "Transaction Date",
+    "Transaction Type",
+    "Amount",
+    "Comments",
+    "Update By",
+    "Update On",
+  ];
+
+  const extractedArray = filteredData?.map((item, index) => ({
+    id: item?.id,
+    "Sr No.": (
+      <Text as={"span"} color={"gray.800"} fontWeight={"500"}>
+        {index + 1}.
+      </Text>
+    ),
+    "Transaction Date": (
+      <Text as={"span"} color={"gray.600"} fontWeight={"500"}>
+        {formatDate(item?.transactionDate)}
+      </Text>
+    ),
+    "Transaction Type": (
+      <Text as={"span"} color={"gray.600"} fontWeight={"500"}>
+        {item?.transactionType}
+      </Text>
+    ),
+    Amount: (
+      <Text as={"span"} color={"gray.800"} fontWeight={"500"}>
+        <Badge ms={1} colorScheme="green" me={1}>
+          $
+        </Badge>
+        {parseFloat(item?.transactionAmount || 0).toLocaleString(undefined, {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          })}
+      </Text>
+    ),
+    Comments: (
+      <Text w={"100px"} as={"span"} color={"gray.800"} fontWeight={"500"}>
+        {item?.comments ? item?.comments : "---"}
+      </Text>
+    ),
+    "Update By": (
+      <Text
+        w={"100px"}
+        as={"span"}
+        color={"gray.800"}
+        fontWeight={"500"}
+        display={"flex"}
+        alignItems={"center"}
+      >
+        {/* <Avatar
+          mr={2}
+          size="sm"
+          name={item.creator?.firstName}
+          src={item.creator?.profilePhoto}
+        /> */}
+        {item?.modifier?.firstName}
+      </Text>
+    ),
+    "Update On": (
+      <Text w={"100px"} as={"span"} color={"gray.800"} fontWeight={"500"}>
+        {formatDate(item.updatedAt)}
+      </Text>
+    ),
+  }));
+
+  const handleDelete = () => {
+    const updatedSponsors = sponser.filter(
+      (sponsor) => sponsor.id !== actionId
+    );
+
+    setTimeout(() => {
+      setCaseDetails(updatedSponsors);
+      setDeleteAlert(false);
+      setIsLoading(false);
+    }, 100);
+    setIsLoading(true);
+  };
+
+  const ioCashExporteDetails = IODetails?.ioCashStatusHistory?.Approved?.map(
+    (item, index) => ({
+      "Transaction date": item?.transactionDate,
+      "Transaction type": item?.transactionType,
+      Amount: parseFloat(item?.transactionAmount) || 0,
+      Comments: item?.comments,
+    })
+  );
+
+  const exportToExcelNew = (data, fileName) => {
+    const worksheet = XLSX.utils.json_to_sheet(data);
+    const workbook = XLSX.utils.book_new();
+    XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
+
+    // Export file
+    XLSX.writeFile(workbook, `${fileName}.xlsx`);
+  };
+
+  const Total = () => {
+    return (
+      <Table size="sm">
+        <Tbody backgroundColor="gray.50">
+          <Tr>
+            <Th
+              textAlign={"center"}
+              p={3}
+              width="200px"
+              color={"#004118"}
+              whiteSpace="normal"
+              wordBreak="normal"
+              overflowWrap="normal"
+            >
+              Balance in IO Cash
+            </Th>
+            <Th
+              textAlign={"center"}
+              p={3}
+              width="120px"
+              color={"#004118"}
+              whiteSpace="normal"
+              wordBreak="normal"
+              overflowWrap="normal"
+            >
+              {" "}
+            </Th>
+            <Th
+              textAlign={"center"}
+              p={3}
+              width="120px"
+              color={"#004118"}
+              whiteSpace="normal"
+              wordBreak="normal"
+              overflowWrap="normal"
+            >
+              {" "}
+            </Th>
+            <Th
+              textAlign={"center"}
+              p={3}
+              width="140px"
+              color={"#004118"}
+              whiteSpace="normal"
+              wordBreak="normal"
+              overflowWrap="normal"
+            >
+              <Badge ms={1} colorScheme="green" me={1}>
+                $
+              </Badge>
+              {/* {IODetails?.ioCash} */}
+              {parseFloat(IODetails?.ioCash || 0).toLocaleString(undefined, {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          })}
+            </Th>
+            <Th
+              textAlign={"center"}
+              p={3}
+              width="120px"
+              color={"#004118"}
+              whiteSpace="normal"
+              wordBreak="normal"
+              overflowWrap="normal"
+            >
+              {}
+            </Th>
+            <Th
+              textAlign={"center"}
+              p={3}
+              width="100px"
+              color={"#004118"}
+              whiteSpace="normal"
+              wordBreak="normal"
+              overflowWrap="normal"
+            >
+              {" "}
+            </Th>
+            <Th
+              textAlign={"center"}
+              p={3}
+              width="100px"
+              color={"#004118"}
+              whiteSpace="normal"
+              wordBreak="normal"
+              overflowWrap="normal"
+            ></Th>
+            <Th
+              textAlign={"center"}
+              p={3}
+              width="100px"
+              color={"#004118"}
+              whiteSpace="normal"
+              wordBreak="normal"
+              overflowWrap="normal"
+            ></Th>
+          </Tr>
+        </Tbody>
+      </Table>
+    );
+  };
+
+  const handleAdd = async () => {
+    try {
+      const res = await updateIOCase(id);
+      if (res?.data) {
+        // toast({
+        //   render: () => (
+        //     <ToastBox status={"success"} message={res?.data?.message} />
+        //   ),
+        // });
+        setIsLoading(false);
+        onOpen();
+      } else if (res?.error) {
+        toast({
+          render: () => (
+            <ToastBox status={"error"} message={res?.error?.data?.message} />
+          ),
+        });
+        setIsLoading(false);
+      }
+    } catch (error) {}
+  };
+
+  return (
+    <Box {...OPACITY_ON_LOAD} pb={0}>
+      <Box bg="white.500">
+        <HStack
+          display={"flex"}
+          justifyContent={"space-between"}
+          pb={3}
+          spacing="24px"
+        >
+          <Input
+            type="search"
+            width={300}
+            placeholder="Search..."
+            size="sm"
+            rounded="sm"
+            focusBorderColor="green.500"
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+          />
+          
+          <HStack display={"flex"} alignItems={"center"}>
+            <Button
+              onClick={() =>
+                exportToExcelNew(ioCashExporteDetails, "IO Cash History")
+              }
+              leftIcon={<LuFileSpreadsheet />}
+              colorScheme="forestGreen"
+              size={"sm"}
+              variant={"outline"}
+              rounded={"sm"}
+              fontSize={"xs"}
+              isDisabled={ioCashExporteDetails?.length === 0}
+            >
+              Export xls
+            </Button>
+            {/* <Button
+              onClick={onOpen}
+              leftIcon={<AddIcon />}
+              colorScheme={"forestGreen"}
+              rounded={"sm"}
+              fontSize={"xs"}
+              size={"sm"}
+              fontWeight={500}
+            >
+              Add
+            </Button> */}
+            {/* {IODetails?.isInvestedAmount ? (
+              localStorage?.getItem('role') ==="Maker" && <Button
+                onClick={handleAdd}
+                leftIcon={<AddIcon />}
+                colorScheme="forestGreen"
+                size={"sm"}
+                rounded={"sm"}
+                fontSize={"xs"}
+              >
+                Add
+              </Button>
+            ) : null} */}
+          </HStack>
+        </HStack>
+      </Box>
+
+      <NormalTable
+        emptyMessage={`We don't have any Sponers`}
+        tableHeadRow={tableHeadRow}
+        data={extractedArray}
+        isLoading={isLoading}
+        viewActionId={actionId}
+        setViewActionId={setActionId}
+        total={<Total />}
+        setMouseEnteredId={setMouseEnteredId}
+        setMouseEntered={setMouseEntered}
+      />
+
+      {/* <CustomAlertDialog
+        onClose={() => setDeleteAlert(false)}
+        isOpen={deleteAlert}
+        message={"Are you sure you want to delete sponers?"}
+        alertHandler={handleDelete}
+        isLoading={isLoading}
+      /> */}
+
+      <AddCaseDetails
+        isOpen={isOpen}
+        onClose={onClose}
+        firstField={firstField}
+      />
+    </Box>
+  );
+};
+
+export default Approved;
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails/IOCashDetails.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/IOCashDetails.jsx
@@ -0,0 +1,145 @@
+import {
+  Badge,
+  Box,
+  Button,
+  Tab,
+  TabList,
+  TabPanel,
+  TabPanels,
+  Tabs,
+  useDisclosure,
+  useToast,
+} from "@chakra-ui/react";
+import React, { useContext, useRef, useState } from "react";
+import Approved from "./Approved";
+import Pending from "./Pending";
+import Rejected from "./Rejected";
+import { AddIcon } from "@chakra-ui/icons";
+import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
+import AddCaseDetails from "./AddCaseDetails";
+import { useUpdateIOCaseMutation } from "../../../../Services/io.service";
+import ToastBox from "../../../../Components/ToastBox";
+import { useParams } from "react-router-dom";
+import { encryptString } from "../../../../Constants/Constants";
+
+const IOCashDetails = () => {
+  const params = useParams();
+  const toast = useToast();
+  const id = params?.id;
+  const { IODetails } = useContext(GlobalStateContext);
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const firstField = useRef();
+
+  const [updateIOCase] = useUpdateIOCaseMutation();
+  const [activeTab, setActiveTab] = useState(0);
+
+  const handleAdd = async () => {
+    try {
+      const res = await updateIOCase(id);
+      if (res?.data) {
+        // toast({
+        //   render: () => (
+        //     <ToastBox status={"success"} message={"res?.data?.message"} />
+        //   ),
+        // });
+        // setIsLoading(false);
+        onOpen();
+      } else if (res?.error) {
+        toast({
+          render: () => (
+            <ToastBox status={"error"} message={res?.error?.data?.message} />
+          ),
+        });
+        setIsLoading(false);
+      }
+    } catch (error) {}
+  };
+
+  return (
+    <Box>
+      <Tabs
+        index={activeTab}
+        onChange={(index) => setActiveTab(index)}
+        variant="unstyled"
+      >
+        <Box
+          display={"flex"}
+          justifyContent={"space-between"}
+          alignItems={"center"}
+          borderBottom={"1px solid #ccc"}
+        >
+          <TabList>
+            <Tab
+              fontSize={"sm"}
+              _selected={{
+                color: "#004118",
+                borderBottom: "2px solid #38a169",
+              }}
+            >
+              Approved
+            </Tab>
+            <Tab
+              fontSize={"sm"}
+              _selected={{
+                color: "#004118",
+                borderBottom: "2px solid #38a169",
+              }}
+            >
+              Pending
+              {IODetails?.ioCashStatusHistory?.Pending.length > 0 && (
+                <Badge rounded={"sm"} colorScheme="forestGreen" ms={2}>
+                  {IODetails?.ioCashStatusHistory?.Pending.length !== 0 && IODetails?.ioCashStatusHistory?.Pending.length}
+                </Badge>
+              )}
+              {/* <Badge rounded={"sm"} colorScheme="forestGreen" ms={2}>
+                {IODetails?.ioCashStatusHistory?.Pending.length || 0}
+              </Badge> */}
+            </Tab>
+            <Tab
+              fontSize={"sm"}
+              _selected={{
+                color: "#004118",
+                borderBottom: "2px solid #38a169",
+              }}
+            >
+              Rejected
+            </Tab>
+          </TabList>
+          {IODetails?.isInvestedAmount
+            ? localStorage?.getItem("role") === encryptString(import.meta.env.VITE_VITE_MAKER) && (
+                <Button
+                  onClick={handleAdd}
+                  leftIcon={<AddIcon />}
+                  colorScheme="forestGreen"
+                  size={"sm"}
+                  rounded={"sm"}
+                  fontSize={"xs"}
+                >
+                  Add
+                </Button>
+              )
+            : null}
+        </Box>
+        <TabPanels>
+          <TabPanel>
+            <Approved />
+          </TabPanel>
+          <TabPanel>
+            <Pending />
+          </TabPanel>
+          <TabPanel>
+            <Rejected />
+          </TabPanel>
+        </TabPanels>
+      </Tabs>
+      <AddCaseDetails
+        setActiveTab={setActiveTab}
+        isOpen={isOpen}
+        onClose={onClose}
+        firstField={firstField}
+      />
+    </Box>
+  );
+};
+
+export default IOCashDetails;
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails/Pending.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/Pending.jsx
@@ -0,0 +1,466 @@
+import {
+  Avatar,
+  Badge,
+  Box,
+  Button,
+  HStack,
+  Input,
+  Table,
+  Tag,
+  Tbody,
+  Text,
+  Th,
+  Tooltip,
+  Tr,
+  useDisclosure,
+  useToast,
+} from "@chakra-ui/react";
+import React, { useContext, useEffect, useRef, useState } from "react";
+import {
+  AddIcon,
+  CheckIcon,
+  CloseIcon,
+  DeleteIcon,
+  EditIcon,
+  ViewIcon,
+} from "@chakra-ui/icons";
+import { LuFileSpreadsheet } from "react-icons/lu";
+import { OPACITY_ON_LOAD } from "../../../../Layout/animations";
+import NormalTable from "../../../../Components/DataTable/NormalTable";
+import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
+import CustomAlertDialog from "../../../../Components/CustomAlertDialog";
+import ToastBox from "../../../../Components/ToastBox";
+import AddCashDetails from "../AddCashDetails";
+import { debounce } from "../../../Admin/Contact";
+import AddPending from "./AddPending";
+import { useParams } from "react-router-dom";
+import { useUpdateIOCaseMutation } from "../../../../Services/io.service";
+import RequestApproveModal from "./RequestApproveModal";
+import RequestRejectModal from "./RequestRejectModal";
+import AddCaseDetails from "./AddCaseDetails";
+import { encryptString } from "../../../../Constants/Constants";
+
+const formatDate = (date) => new Date(date).toLocaleDateString();
+
+const Pending = () => {
+  const toast = useToast();
+  const params = useParams();
+  const id = params?.id;
+  const firstField = useRef();
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const { IODetails, approved, setApproved } = useContext(GlobalStateContext);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [isLoading, setIsLoading] = useState(true);
+  const [deleteAlert, setDeleteAlert] = useState(false);
+  const [actionId, setActionId] = useState(false);
+  const [mouseEntered, setMouseEntered] = useState(false);
+  const [mouseEnteredId, setMouseEnteredId] = useState("");
+
+  const [updateIOCase] = useUpdateIOCaseMutation();
+  const {
+    isOpen: isConfirmOpen,
+    onOpen: onConfirmOpen,
+    onClose: onConfirmClose,
+  } = useDisclosure();
+  const {
+    isOpen: isRejectOpen,
+    onOpen: onRejectOpen,
+    onClose: onRejectClose,
+  } = useDisclosure();
+
+  useEffect(() => {
+    // Simulate loading
+    const timer = setTimeout(() => {
+      setIsLoading(false);
+    }, 1500);
+
+    // Cleanup the timer on component unmount
+    return () => clearTimeout(timer);
+  }, []);
+
+  const formatDate = (date) => {
+    return new Date(date).toLocaleDateString("en-GB", {
+      day: "2-digit",
+      month: "2-digit",
+      year: "numeric",
+    });
+  };
+
+  // Table filter
+  const filteredData = IODetails?.ioCashStatusHistory?.Pending?.filter(
+    (item) => {
+      // Filter by name (case insensitive)
+      const name = item?.transactionDate;
+      const searchLower = searchTerm?.toLowerCase();
+      const nameMatches = name?.toLowerCase().includes(searchLower);
+      return nameMatches;
+    }
+  );
+
+  const tableHeadRow = [
+    "Sr No.",
+    "Transaction Date",
+    "Transaction Type",
+    "Amount",
+    "Comments",
+    "Update By",
+    "Update On",
+    ...(localStorage?.getItem('role')!==encryptString(import.meta.env.VITE_VITE_MAKER) ? ["Actions"] : []),
+    
+  ];
+
+  const extractedArray = filteredData?.map((item, index) => ({
+    id: item?.id,
+    "Sr No.": (
+      <Text as={"span"} color={"gray.800"} fontWeight={"500"}>
+        {index + 1}.
+      </Text>
+    ),
+    "Transaction Date": (
+      <Text as={"span"} color={"gray.600"} fontWeight={"500"}>
+        {formatDate(item?.transactionDate)}
+      </Text>
+    ),
+    "Transaction Type": (
+      <Text as={"span"} color={"gray.600"} fontWeight={"500"}>
+        {item?.transactionType}
+      </Text>
+    ),
+    Amount: (
+      <Text as={"span"} color={"gray.800"} fontWeight={"500"}>
+        <Badge ms={1} colorScheme="green" me={1}>
+          $
+        </Badge>
+        {parseFloat(item?.transactionAmount || 0).toLocaleString(undefined, {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          })}
+      </Text>
+    ),
+    Comments: (
+      <Text w={"100px"} as={"span"} color={"gray.800"} fontWeight={"500"}>
+        {item?.comments}
+      </Text>
+    ),
+    "Update By": (
+      <Text
+        w={"100px"}
+        as={"span"}
+        color={"gray.800"}
+        fontWeight={"500"}
+        display={"flex"}
+        alignItems={"center"}
+      >
+        {/* <Avatar
+          mr={2}
+          size="sm"
+          name={item?.creator?.firstName}
+          src={item?.creator?.profilePhoto}
+        /> */}
+        {item?.modifier?.firstName}
+      </Text>
+    ),
+    "Update On": (
+      <Text w={"100px"} as={"span"} color={"gray.800"} fontWeight={"500"}>
+        {formatDate(item.updatedAt)}
+      </Text>
+    ),
+    Actions: (
+      <Box display={"flex"} justifyContent={"center"}>
+        {localStorage?.getItem("role") !== encryptString(import.meta.env.VITE_VITE_MAKER)  ? <Box>
+          {index===0&&<Box display={"flex"} justifyContent={"center"} gap={2}>
+        <Tooltip
+          rounded={"sm"}
+          fontSize={"xs"}
+          label="Approve"
+          bg="#fff"
+          color={"green.500"}
+          placement="left-start"
+        >
+          <Button
+            // colorScheme="forestGreen"
+            // color="green.500"
+            rounded={"sm"}
+            size={"xs"}
+            textTransform={"inherit"}
+            fontWeight={500}
+            px={2}
+            py={1}
+            onClick={() => {
+              setActionId(item.id);
+              onConfirmOpen();
+            }}
+            colorScheme="green"
+            variant={"solid"}
+            cursor={"pointer"}
+          >
+            <CheckIcon fontSize={"12px"} />
+          </Button>
+        </Tooltip>
+        <Tooltip
+          rounded={"sm"}
+          fontSize={"xs"}
+          label="Reject"
+          bg="#fff"
+          color={"red.500"}
+          placement="left-start"
+        >
+          <Button
+            colorScheme="red"
+            // color="red.500"
+            rounded={"sm"}
+            size={"xs"}
+            textTransform={"inherit"}
+            fontWeight={500}
+            px={2}
+            onClick={() => {
+              setActionId(item.id);
+              onRejectOpen();
+            }}
+            py={1}
+            // variant={"solid"}
+          >
+            <CloseIcon fontSize={"10px"} />
+          </Button>
+        </Tooltip></Box>}
+        
+        </Box> : <Button
+            colorScheme="green"
+            rounded={"sm"}
+            size={"xs"}
+            px={2}
+            py={1}
+            fontWeight={500}
+            onClick={() => {
+              setActionId(item.id);
+            }}
+          >
+            <ViewIcon me={"4px"} /> View
+          </Button>}
+      </Box>
+    ),
+  }));
+
+  const handleDelete = () => {
+    const updatedSponsors = sponser.filter(
+      (sponsor) => sponsor.id !== actionId
+    );
+
+    setTimeout(() => {
+      setCaseDetails(updatedSponsors);
+      setDeleteAlert(false);
+      setIsLoading(false);
+    }, 100);
+    setIsLoading(true);
+  };
+
+  const ioCashExporteDetails = IODetails?.ioCashStatusHistory?.Approved?.map(
+    (item, index) => ({
+      "Transaction date": item?.transactionDate,
+      "Transaction type": item?.transactionType,
+      Amount: parseFloat(item?.transactionAmount) || 0,
+      Comments: item?.comments,
+    })
+  );
+
+  const Total = () => {
+    return (
+      <Table size="sm">
+        <Tbody backgroundColor="gray.50">
+          <Tr>
+            <Th
+              textAlign={"center"}
+              p={3}
+              width="130px"
+              color={"#004118"}
+              whiteSpace="normal"
+              wordBreak="normal"
+              overflowWrap="normal"
+            >
+              Balance in IO Cash
+            </Th>
+            <Th
+              textAlign={"center"}
+              p={3}
+              width="150px"
+              color={"#004118"}
+              whiteSpace="normal"
+              wordBreak="normal"
+              overflowWrap="normal"
+            >
+              {" "}
+            </Th>
+            <Th
+              textAlign={"center"}
+              p={3}
+              width="150px"
+              color={"#004118"}
+              whiteSpace="normal"
+              wordBreak="normal"
+              overflowWrap="normal"
+            >
+              {}
+            </Th>
+            <Th
+              textAlign={"center"}
+              p={3}
+              width="100px"
+              color={"#004118"}
+              whiteSpace="normal"
+              wordBreak="normal"
+              overflowWrap="normal"
+            >
+              <Badge ms={1} colorScheme="green" me={1}>
+                $
+              </Badge>
+              {parseFloat(IODetails?.ioCash || 0).toLocaleString(undefined, {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          })}
+            </Th>
+            <Th
+              textAlign={"center"}
+              p={3}
+              width="100px"
+              color={"#004118"}
+              whiteSpace="normal"
+              wordBreak="normal"
+              overflowWrap="normal"
+            >
+              {" "}
+            </Th>
+            <Th
+              textAlign={"center"}
+              p={3}
+              width="100px"
+              color={"#004118"}
+              whiteSpace="normal"
+              wordBreak="normal"
+              overflowWrap="normal"
+            ></Th>
+            <Th
+              textAlign={"center"}
+              p={3}
+              width="80px"
+              color={"#004118"}
+              whiteSpace="normal"
+              wordBreak="normal"
+              overflowWrap="normal"
+            ></Th>
+            <Th
+              textAlign={"center"}
+              p={3}
+              width="50px"
+              color={"#004118"}
+              whiteSpace="normal"
+              wordBreak="normal"
+              overflowWrap="normal"
+            ></Th>
+          </Tr>
+        </Tbody>
+      </Table>
+    );
+  };
+
+  const handleAdd = async () => {
+    try {
+      const res = await updateIOCase(id);
+      if (res?.data) {
+        // toast({
+        //   render: () => (
+        //     <ToastBox status={"success"} message={res?.data?.message} />
+        //   ),
+        // });
+        setIsLoading(false);
+        onOpen();
+      } else if (res?.error) {
+        toast({
+          render: () => (
+            <ToastBox status={"error"} message={res?.error?.data?.message} />
+          ),
+        });
+        setIsLoading(false);
+      }
+    } catch (error) {}
+  };
+
+  return (
+    <Box {...OPACITY_ON_LOAD} pb={0}>
+      <Box bg="white.500">
+        <HStack
+          display={"flex"}
+          justifyContent={"space-between"}
+          pb={3}
+          spacing="24px"
+        >
+          <Input
+            type="search"
+            width={300}
+            placeholder="Search..."
+            size="sm"
+            rounded="sm"
+            focusBorderColor="green.500"
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+          />
+
+          {/* <HStack display={"flex"} alignItems={"center"}>
+            {IODetails?.isInvestedAmount ? (
+              localStorage?.getItem('role') ==="Maker"&& <Button
+                onClick={handleAdd}
+                leftIcon={<AddIcon />}
+                colorScheme="forestGreen"
+                size={"sm"}
+                rounded={"sm"}
+                fontSize={"xs"}
+              >
+                Add
+              </Button>
+            ) : null}
+          </HStack> */}
+        </HStack>
+      </Box>
+
+      <NormalTable
+        emptyMessage={`We don't have any Sponers`}
+        tableHeadRow={tableHeadRow}
+        data={extractedArray}
+        isLoading={isLoading}
+        viewActionId={actionId}
+        setViewActionId={setActionId}
+        // total={<Total />}
+        setMouseEnteredId={setMouseEnteredId}
+        setMouseEntered={setMouseEntered}
+      />
+
+      <CustomAlertDialog
+        onClose={() => setDeleteAlert(false)}
+        isOpen={deleteAlert}
+        message={"Are you sure you want to delete sponers?"}
+        alertHandler={handleDelete}
+        isLoading={isLoading}
+      />
+
+      <AddCaseDetails
+        isOpen={isOpen}
+        onClose={onClose}
+        firstField={firstField}
+      />
+
+      <RequestApproveModal
+        // data={data?.data?.rows}
+        isOpen={isConfirmOpen}
+        onClose={onConfirmClose}
+        id={actionId}
+        // firstField={firstField}
+      />
+      <RequestRejectModal
+        isOpen={isRejectOpen}
+        onClose={onRejectClose}
+        id={actionId}
+      />
+    </Box>
+  );
+};
+
+export default Pending;
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails/Rejected.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/Rejected.jsx
@@ -0,0 +1,357 @@
+import {
+    Avatar,
+    Badge,
+    Box,
+    Button,
+    HStack,
+    Input,
+    Table,
+    Tag,
+    Tbody,
+    Text,
+    Th,
+    Tooltip,
+    Tr,
+    useDisclosure,
+    useToast,
+  } from "@chakra-ui/react";
+  import React, { useContext, useEffect, useRef, useState } from "react";
+  import { AddIcon} from "@chakra-ui/icons";
+  import { OPACITY_ON_LOAD } from "../../../../Layout/animations";
+  import NormalTable from "../../../../Components/DataTable/NormalTable";
+  import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
+  import CustomAlertDialog from "../../../../Components/CustomAlertDialog";
+  import AddCashDetails from "../AddCashDetails";
+import AddRejected from "./AddRejected";
+import { useUpdateIOCaseMutation } from "../../../../Services/io.service";
+import { useParams } from "react-router-dom";
+import ToastBox from "../../../../Components/ToastBox";
+import AddCaseDetails from "./AddCaseDetails";
+  
+  const formatDate = (date) => new Date(date).toLocaleDateString();
+  
+  const Rejected = () => {
+    const params = useParams()
+    const id = params?.id
+    const toast = useToast();
+    const firstField = useRef();
+    const { isOpen, onOpen, onClose } = useDisclosure();
+    const { IODetails, approved, setApproved } =
+      useContext(GlobalStateContext);
+    const [searchTerm, setSearchTerm] = useState("");
+    const [isLoading, setIsLoading] = useState(true);
+    const [deleteAlert, setDeleteAlert] = useState(false);
+    const [actionId, setActionId] = useState(false);
+    const [mouseEntered, setMouseEntered] = useState(false);
+    const [mouseEnteredId, setMouseEnteredId] = useState("");
+
+    const [updateIOCase] = useUpdateIOCaseMutation()
+  
+    useEffect(() => {
+      // Simulate loading
+      const timer = setTimeout(() => {
+        setIsLoading(false);
+      }, 1500);
+  
+      // Cleanup the timer on component unmount
+      return () => clearTimeout(timer);
+    }, []);
+  
+    const formatDate = (date) => {
+      return new Date(date).toLocaleDateString("en-GB", {
+        day: "2-digit",
+        month: "2-digit",
+        year: "numeric",
+      });
+    };
+  
+  
+    // Table filter
+    const filteredData = IODetails?.ioCashStatusHistory?.Reject?.filter((item) => {
+      // Filter by name (case insensitive)
+      const name = item.transactionDate;
+      const searchLower = searchTerm.toLowerCase();
+      const nameMatches = name.toLowerCase().includes(searchLower);
+      return nameMatches;
+    });
+  
+    const tableHeadRow = [
+      "Sr No.",
+      "Transaction Date",
+      "Transaction Type",
+      "Amount",
+      "Comments",
+      "Update By",
+      "Update On",
+    ];
+  
+    const extractedArray = filteredData?.map((item, index) => ({
+      id: item?.id,
+      "Sr No.": (
+        <Text
+          as={"span"}
+          color={"gray.800"}
+          fontWeight={"500"}
+        >
+          {index + 1}.
+        </Text>
+      ),
+      "Transaction Date": (
+        <Text
+          as={"span"}
+          color={"gray.600"}
+          fontWeight={"500"}
+        >
+          {formatDate(item?.transactionDate)}
+        </Text>
+      ),
+      "Transaction Type": (
+        <Text as={"span"} color={"gray.600"} fontWeight={"500"}>
+          {item?.transactionType}
+        </Text>
+      ),
+      "Amount": (
+        <Text
+          as={"span"}
+          color={"gray.800"}
+          fontWeight={"500"}
+        >
+          <Badge ms={1} colorScheme="green" me={1}>
+                $
+              </Badge>
+              {parseFloat(IODetails?.ioCash || 0).toLocaleString(undefined, {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          })}
+        </Text>
+      ),
+      "Comments": (
+        <Text
+          w={"100px"}
+          as={"span"}
+          color={"gray.800"}
+          fontWeight={"500"}
+        >
+          {item?.comments}
+        </Text>
+      ),
+      "Update By": (
+        <Text
+          w={"100px"}
+          as={"span"}
+          color={"gray.800"}
+          fontWeight={"500"}
+          display={"flex"}
+          alignItems={"center"}
+        >
+          {/* <Avatar
+           mr={2}
+            size="sm"
+            name={item.creator?.firstName}
+            src={item.creator?.profilePhoto}
+          /> */}
+          {item?.modifier?.firstName}
+        </Text>
+      ),
+      "Update On": (
+        <Text
+          w={"100px"}
+          as={"span"}
+          color={"gray.800"}
+          fontWeight={"500"}
+        >
+          {formatDate(item.updatedAt)}
+        </Text>
+      ),
+    }));
+  
+    const handleDelete = () => {
+      const updatedSponsors = sponser.filter(
+        (sponsor) => sponsor.id !== actionId
+      );
+  
+      setTimeout(() => {
+        setCaseDetails(updatedSponsors);
+        setDeleteAlert(false);
+        setIsLoading(false);
+      }, 100);
+      setIsLoading(true);
+    };
+  
+    const Total = () => {
+      return (
+        <Table size="sm">
+          <Tbody backgroundColor="gray.50">
+            <Tr>
+              <Th
+                textAlign={"center"}
+                p={3}
+                width="130px"
+                color={"#004118"}
+                whiteSpace="normal"
+                wordBreak="normal"
+                overflowWrap="normal"
+              >
+                Balance in IO Cash
+              </Th>
+              <Th
+                textAlign={"center"}
+                p={3}
+                width="150px"
+                color={"#004118"}
+                whiteSpace="normal"
+                wordBreak="normal"
+                overflowWrap="normal"
+              >
+                {" "}
+              </Th>
+              <Th
+                textAlign={"center"}
+                p={3}
+                width="150px"
+                color={"#004118"}
+                whiteSpace="normal"
+                wordBreak="normal"
+                overflowWrap="normal"
+              >
+                {}
+              </Th>
+              <Th
+                textAlign={"center"}
+                p={3}
+                width="100px"
+                color={"#004118"}
+                whiteSpace="normal"
+                wordBreak="normal"
+                overflowWrap="normal"
+              >
+                {"48,000.00"}
+              </Th>
+              <Th
+                textAlign={"center"}
+                p={3}
+                width="100px"
+                color={"#004118"}
+                whiteSpace="normal"
+                wordBreak="normal"
+                overflowWrap="normal"
+              >
+                {" "}
+              </Th>
+              <Th
+                textAlign={"center"}
+                p={3}
+                width="100px"
+                color={"#004118"}
+                whiteSpace="normal"
+                wordBreak="normal"
+                overflowWrap="normal"
+              ></Th>
+              <Th
+                textAlign={"center"}
+                p={3}
+                width="100px"
+                color={"#004118"}
+                whiteSpace="normal"
+                wordBreak="normal"
+                overflowWrap="normal"
+              ></Th>
+            </Tr>
+          </Tbody>
+        </Table>
+      );
+    };
+
+    
+  const handleAdd = async () =>{
+    try {
+       const res = await updateIOCase(id)
+       if (res?.data) {
+        //  toast({
+        //    render: () => (
+        //      <ToastBox status={"success"} message={res?.data?.message} />
+        //    ),
+        //  });
+         setIsLoading(false);
+         onOpen()
+ 
+       } else if (res?.error) {
+         toast({
+           render: () => (
+             <ToastBox status={"error"} message={res?.error?.data?.message} />
+           ),
+         });
+         setIsLoading(false);
+       }
+    } catch (error) {    
+    }
+  }
+  
+    return (
+      <Box {...OPACITY_ON_LOAD} pb={0}>
+        <Box bg="white.500">
+          <HStack
+            display={"flex"}
+            justifyContent={"space-between"}
+            pb={3}
+            spacing="24px"
+          >
+            <Input
+              type="search"
+              width={300}
+              placeholder="Search..."
+              size="sm"
+              rounded="sm"
+              focusBorderColor="green.500"
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+            />
+  
+            {/* <HStack display={"flex"} alignItems={"center"}>
+            {IODetails?.isInvestedAmount ? (
+              localStorage?.getItem('role') ==="Maker"&& <Button
+                onClick={handleAdd}
+                leftIcon={<AddIcon />}
+                colorScheme="forestGreen"
+                size={"sm"}
+                rounded={"sm"}
+                fontSize={"xs"}
+              >
+                Add
+              </Button>
+            ) : null}
+            </HStack> */}
+          </HStack>
+        </Box>
+  
+        <NormalTable
+          emptyMessage={`We don't have any Sponers`}
+          tableHeadRow={tableHeadRow}
+          data={extractedArray}
+          isLoading={isLoading}
+          viewActionId={actionId}
+          setViewActionId={setActionId}
+          // total={<Total/>}
+          setMouseEnteredId={setMouseEnteredId}
+          setMouseEntered={setMouseEntered}
+        />
+  
+        <CustomAlertDialog
+          onClose={() => setDeleteAlert(false)}
+          isOpen={deleteAlert}
+          message={"Are you sure you want to delete sponers?"}
+          alertHandler={handleDelete}
+          isLoading={isLoading}
+        />
+  
+        <AddCaseDetails
+          isOpen={isOpen}
+          onClose={onClose}
+          firstField={firstField}
+        />
+      </Box>
+    );
+  };
+  
+  export default Rejected;
+  
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails/RequestApproveModal.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/RequestApproveModal.jsx
@@ -0,0 +1,176 @@
+import {
+  Box,
+  Button,
+  FormControl,
+  FormHelperText,
+  FormLabel,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+  Textarea,
+  useDisclosure,
+  useToast,
+} from "@chakra-ui/react";
+import React, { useEffect, useState } from "react";
+import * as yup from "yup";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { useForm } from "react-hook-form";
+import ToastBox from "../../../../Components/ToastBox";
+import { useApproveIOCaseMutation } from "../../../../Services/io.service";
+
+export const conformModalSchema = yup.object().shape({
+  // comments: yup.string().required("Comment is required")
+  // .max(50, "Investment name cannot be more than 50 characters"),
+  comments: yup
+  .string()
+  .required("Comment is required")
+  .max(200, "Approve Comment cannot be more than 200 characters"),
+});
+
+const RequestApproveModal = ({ isOpen, onClose, firstField ,id}) => {
+  const [isBtnLoading , setIsBtnLoading] = useState(false)
+
+  const toast = useToast()
+
+  const {
+    register,
+    reset,
+    watch,
+    handleSubmit,
+    formState: { errors },
+  } = useForm({
+    resolver: yupResolver(conformModalSchema),
+  });
+
+  const [ approveIOCase ] = useApproveIOCaseMutation()
+  
+
+  const onSubmit = async(data) => {
+    console.log(data, "tewxttttt");
+    setIsBtnLoading(true)
+    try {
+      const res = await approveIOCase({data,id})
+      if (res?.error) {
+        toast({
+          render: () => (
+            <ToastBox status={"error"} message={res?.error?.data?.message} />
+          ),
+        });
+        setIsBtnLoading(false)
+      }else if(res?.data){
+        toast({
+          render: () => (
+            <ToastBox message={res?.data?.message} />
+          ),
+        });
+        onClose()
+        setIsBtnLoading(false)
+      }else{
+        toast({
+          render: () => (
+            <ToastBox status={'error'} message={"Something went wrong"} />
+          ),
+        });
+        setIsBtnLoading(false)
+      }
+    } catch (error) {
+      
+    }
+  };
+
+  const handleFileChange = (event) => {
+    const selectedFile = event.target.files[0];
+    setFile(selectedFile);
+  };
+
+
+  const { data, isLoading } = 
+  (id, {
+    skip: !id,
+  });
+
+  useEffect(() => {
+    if (data) {
+      reset({
+        investorAmount: data?.data?.investorAmount,
+      });
+    }
+  }, [data, reset]);
+
+  const heandleOnClose = () =>{
+    reset()
+    onClose() 
+  }
+
+  return (
+    <Modal isCentered isOpen={isOpen} onClose={heandleOnClose} initialFocusRef={firstField}>
+      <ModalOverlay />
+      <ModalContent pb={4}>
+        <ModalHeader fontSize={"md"}>Approve Comment</ModalHeader>
+        <ModalCloseButton />
+        {isLoading ? (
+          <FullscreenLoaders height={"50vh"} />
+        ) : (
+        <Box as="form" onSubmit={handleSubmit(onSubmit)}>
+          <ModalBody>
+            <FormControl mb={4} isRequired>
+              <FormLabel fontSize="sm">Comment</FormLabel>
+              <Textarea
+                rows={6}
+                focusBorderColor="green.400"
+                name="comments"
+                {...register("comments")}
+                fontSize="sm"
+                type="textarea"
+                size="md"
+                placeholder={"Enter your checker comment...."}
+                rounded={"md"}
+                resize={"none"}
+                maxLength={200}
+              />
+              {errors.comments && (
+                <Text fontSize="xs" color="red">
+                  {errors.comments.message}
+                </Text>
+              )}
+              <FormHelperText fontSize="xs" color="gray.500">
+                <Box as="span" me={1}>Maximum length should be 200 characters. You have entered </Box>
+                 {watch("comments")?.length || 0} characters.
+              </FormHelperText>
+            </FormControl>
+          </ModalBody>
+          <ModalFooter>
+            <Button
+              colorScheme="gray"
+              mr={3}
+              onClick={onClose}
+              size={"sm"}
+              rounded={"sm"}
+            >
+              Cancel
+            </Button>
+            <Button
+              colorScheme="forestGreen"
+              variant="solid"
+              size={"sm"}
+              rounded={"sm"}
+              isLoading={isBtnLoading}
+              type="submit"
+            >
+              Send
+            </Button>
+          </ModalFooter>
+        </Box>
+        )}
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default RequestApproveModal;
--- a/src/Pages/IO_Management/CreateIO/IOCashDetails/RequestRejectModal.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetails/RequestRejectModal.jsx
@@ -0,0 +1,172 @@
+import {
+  Box,
+  Button,
+  FormControl,
+  FormHelperText,
+  FormLabel,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+  Textarea,
+  useDisclosure,
+  useToast,
+} from "@chakra-ui/react";
+import React, { useEffect, useState } from "react";
+import * as yup from "yup";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { useForm } from "react-hook-form";
+import ToastBox from "../../../../Components/ToastBox";
+import { useRejectIOCaseMutation } from "../../../../Services/io.service";
+
+export const conformModalSchema = yup.object().shape({
+  comments: yup.string().required("Comment is required")
+  .max(200, "Approve Comment cannot be more than 200 characters"),
+});
+
+const RequestRejectModal = ({ isOpen, onClose, firstField ,id}) => {
+  const [isBtnLoading , setIsBtnLoading] = useState(false)
+
+  const toast = useToast()
+
+  const {
+    register,
+    reset,
+    watch,
+    handleSubmit,
+    formState: { errors },
+  } = useForm({
+    resolver: yupResolver(conformModalSchema),
+  });
+
+  const [ rejectIOCase ] = useRejectIOCaseMutation()
+  
+
+  const onSubmit = async(data) => {
+    console.log(data, "tewxttttt");
+    setIsBtnLoading(true)
+    try {
+      const res = await rejectIOCase({data,id})
+      if (res?.error) {
+        toast({
+          render: () => (
+            <ToastBox status={"error"} message={res?.error?.data?.message} />
+          ),
+        });
+        setIsBtnLoading(false)
+      }else if(res?.data){
+        toast({
+          render: () => (
+            <ToastBox message={res?.data?.message} />
+          ),
+        });
+        onClose()
+        setIsBtnLoading(false)
+      }else{
+        toast({
+          render: () => (
+            <ToastBox status={'error'} message={"Something went wrong"} />
+          ),
+        });
+        setIsBtnLoading(false)
+      }
+    } catch (error) {
+      
+    }
+  };
+
+  const handleFileChange = (event) => {
+    const selectedFile = event.target.files[0];
+    setFile(selectedFile);
+  };
+
+
+  const { data, isLoading } = 
+  (id, {
+    skip: !id,
+  });
+
+  useEffect(() => {
+    if (data) {
+      reset({
+        investorAmount: data?.data?.investorAmount,
+      });
+    }
+  }, [data, reset]);
+
+  const heandleOnClose = () =>{
+    reset()
+    onClose()
+  }
+
+  return (
+    <Modal isCentered isOpen={isOpen} onClose={heandleOnClose} initialFocusRef={firstField}>
+      <ModalOverlay />
+      <ModalContent pb={4}>
+        <ModalHeader fontSize={"md"}>Reject Comment</ModalHeader>
+        <ModalCloseButton />
+        {isLoading ? (
+          <FullscreenLoaders height={"50vh"} />
+        ) : (
+        <Box as="form" onSubmit={handleSubmit(onSubmit)}>
+          <ModalBody>
+            <FormControl mb={4} isRequired>
+              <FormLabel fontSize="sm">Comment</FormLabel>
+              <Textarea
+                rows={6}
+                focusBorderColor="green.400"
+                name="comments"
+                {...register("comments")}
+                fontSize="sm"
+                type="textarea"
+                size="md"
+                placeholder={"Enter your comments...."}
+                rounded={"md"}
+                resize={"none"}
+                maxLength={200}
+              />
+              {errors.comments && (
+                <Text fontSize="xs" color="red">
+                  {errors.comments.message}
+                </Text>
+              )}
+              <FormHelperText fontSize="xs" color="gray.500">
+                <Box as="span" me={1}>Maximum length should be 200 characters. You have entered </Box>
+                 {watch("comments")?.length || 0} characters.
+              </FormHelperText>
+            </FormControl>
+          </ModalBody>
+          <ModalFooter>
+            <Button
+              colorScheme="gray"
+              mr={3}
+              onClick={onClose}
+              size={"sm"}
+              rounded={"sm"}
+            >
+              Cancel
+            </Button>
+            <Button
+              colorScheme="forestGreen"
+              variant="solid"
+              size={"sm"}
+              rounded={"sm"}
+              isLoading={isBtnLoading}
+              type="submit"
+            >
+              Send
+            </Button>
+          </ModalFooter>
+        </Box>
+        )}
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default RequestRejectModal;
--- a/src/Pages/IO_Management/CreateIO/IOCashDetailsOld.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOCashDetailsOld.jsx
@@ -1,5 +1,6 @@
 import {
  Avatar,
+  Badge,
  Box,
  Button,
  HStack,
@@ -23,14 +24,17 @@ import ToastBox from "../../../Components/ToastBox";
 import { debounce } from "../../Master/Sponser/AddSponser";
 import { AddIcon } from "@chakra-ui/icons";
 import AddCashDetails from "./AddCashDetails";
+import { LuFileSpreadsheet } from "react-icons/lu";
+import { exportToExcel, exportToExcelNew } from "../../../Constants/Constants";

 const formatDate = (date) => new Date(date).toLocaleDateString(); // Simple date formatter

-const IOCashDetails = () => {
+const IOCashDetailsOld = () => {
  const toast = useToast();
  const firstField = useRef();
  const { isOpen, onOpen, onClose } = useDisclosure();
-  const { caseDetails, setCaseDetails, IODetails } = useContext(GlobalStateContext);
+  const { caseDetails, setCaseDetails, IODetails } =
+    useContext(GlobalStateContext);
  const [searchTerm, setSearchTerm] = useState("");
  const [isLoading, setIsLoading] = useState(true);
  const [deleteAlert, setDeleteAlert] = useState(false);
@@ -48,6 +52,14 @@ const IOCashDetails = () => {
    return () => clearTimeout(timer);
  }, []);

+  const formatDate = (date) => {
+    return new Date(date).toLocaleDateString("en-GB", {
+      day: "2-digit",
+      month: "2-digit",
+      year: "numeric",
+    });
+  };
+
  // Calculate totals
  const totalAmount = caseDetails.reduce(
    (acc, caseDetail) => acc + caseDetail.amount,
@@ -76,17 +88,18 @@ const IOCashDetails = () => {
  }, 300);

  // Table filter
-  const filteredData = IODetails?.ioCashHistory?.filter((item) => {
-    const name = item.transactionType;
-    const searchLower = searchTerm.toLowerCase();
-    const nameMatches = name.toLowerCase().includes(searchLower);
-    return nameMatches;
-  }).sort((b, a) => new Date(a.createdAt) - new Date(b.createdAt));
-
+  const filteredData = IODetails?.ioCashHistory
+    ?.filter((item) => {
+      const name = item.transactionType;
+      const searchLower = searchTerm.toLowerCase();
+      const nameMatches = name.toLowerCase().includes(searchLower);
+      return nameMatches;
+    })
+    .sort((b, a) => new Date(a.createdAt) - new Date(b.createdAt));

  const extractedArray = filteredData?.map((item, index) => ({
    id: item?.id,
-    "Date": (
+    Date: (
      <Text
        justifyContent={"center"}
        as={"span"}
@@ -94,12 +107,12 @@ const IOCashDetails = () => {
        fontWeight={"500"}
        className="d-flex align-items-center web-text-small"
      >
-        {item?.transactionDate}
+        {formatDate(item?.transactionDate)}
      </Text>
    ),
    "Transaction type": (
      <Text
-        justifyContent ={"center"}
+        justifyContent={"center"}
        as={"span"}
        color={"teal.900"}
        fontWeight={"500"}
@@ -108,20 +121,27 @@ const IOCashDetails = () => {
        {item?.transactionType}
      </Text>
    ),
-    "Amount": (
+    Amount: (
      <Text
-        justifyContent ={"center"}
+        justifyContent={"left"}
        as={"span"}
        color={"teal.900"}
        fontWeight={"500"}
        className="d-flex align-items-center web-text-small"
      >
-       {`$${parseFloat(item.transactionAmount||0).toLocaleString()}`}
+        <Badge ms={1} colorScheme="green" me={1}>
+          $
+        </Badge>
+        {/* {parseFloat(item.transactionAmount || 0).toLocaleString()} */}
+        {`${parseFloat(item.transactionAmount || 0).toLocaleString(undefined, {
+          minimumFractionDigits: 2,
+          maximumFractionDigits: 2,
+        })}`}
      </Text>
    ),
-    "Comments": (
+    Comments: (
      <Text
-        justifyContent ={"center"}
+        justifyContent={"center"}
        as={"span"}
        color={"teal.900"}
        fontWeight={"500"}
@@ -132,30 +152,53 @@ const IOCashDetails = () => {
    ),
    "Update by ": (
      <Text
-        justifyContent ={"center"}
+        justifyContent={"center"}
        as={"span"}
        color={"teal.900"}
        fontWeight={"500"}
        gap={2}
        className="d-flex align-items-center web-text-small"
      >
-        
-    <Avatar size='sm' name={item.creator?.firstName} src={item.creator?.profilePhoto} />{item.creator?.firstName}
+        <Avatar
+          size="sm"
+          name={item.creator?.firstName}
+          src={item.creator?.profilePhoto}
+        />
+        {item.creator?.firstName}
      </Text>
    ),
    "Update On": (
      <Text
-        justifyContent ={"center"}
+        justifyContent={"center"}
        as={"span"}
        color={"teal.900"}
        fontWeight={"500"}
        className="d-flex align-items-center web-text-small"
      >
-        {item.updateOn}
+        {formatDate(item.updatedAt)}
      </Text>
    ),
  }));

+  const customHeaders = [
+    { label: "Date", key: "transactionDate" },
+    { label: "Transaction type", key: "transactionType" },
+    { label: "Amount", key: "transactionAmount" },
+    { label: "Comments", key: "comments" },
+    // { label: "Update by", key: "creator" },
+    // { label: "Update On", key: "updateOn" },
+    // Add more headers as needed
+  ];
+
+  const ioCashExporteDetails = IODetails?.ioCashHistory?.map((item, index) => ({
+    Date: item?.transactionDate,
+    "Transaction type": item?.transactionType,
+    Amount: parseFloat(item?.transactionAmount) || 0,
+    Comments: item?.comments,
+  }));
+
+  console.log(ioCashExporteDetails);
+
  const handleDelete = () => {
    const updatedSponsors = sponser.filter(
      (sponsor) => sponsor.id !== actionId
@@ -173,7 +216,7 @@ const IOCashDetails = () => {
    return (
      <Table size="sm">
        <Tbody backgroundColor="gray.50">
-          <Tr >
+          <Tr>
            <Th
              textAlign={"center"}
              p={3}
@@ -267,9 +310,35 @@ const IOCashDetails = () => {
            onChange={(e) => setSearchTerm(e.target.value)}
          />

+          <HStack display={"flex"} alignItems={"center"}>
+            <Button
+              onClick={() =>
+                exportToExcelNew(ioCashExporteDetails, "IO Cash History")
+              }
+              leftIcon={<LuFileSpreadsheet />}
+              colorScheme="forestGreen"
+              size={"sm"}
+              variant={"outline"}
+              rounded={"sm"}
+              fontSize={"xs"}
+              isDisabled={ioCashExporteDetails?.length === 0}
+            >
+              Export xls
+            </Button>

-          {IODetails?.isInvestedAmount ? <Button onClick={onOpen} leftIcon={<AddIcon/>} colorScheme="forestGreen" size={'sm'} rounded={'sm'} fontSize={'xs'} >Add IO Cash</Button>:null}
-
+            {IODetails?.isInvestedAmount ? (
+              <Button
+                onClick={onOpen}
+                leftIcon={<AddIcon />}
+                colorScheme="forestGreen"
+                size={"sm"}
+                rounded={"sm"}
+                fontSize={"xs"}
+              >
+                Add IO Cash
+              </Button>
+            ) : null}
+          </HStack>
        </HStack>
      </Box>

@@ -277,7 +346,7 @@ const IOCashDetails = () => {
        centered={true}
        emptyMessage={`We don't have any Sponers`}
        tableHeadRow={tableHeadRow}
-        data={extractedArray} 
+        data={extractedArray}
        isLoading={isLoading}
        viewActionId={actionId}
        setViewActionId={setActionId}
@@ -294,25 +363,13 @@ const IOCashDetails = () => {
        isLoading={isLoading}
      />

-
-
-
-
-
-
-
-
-
-      <AddCashDetails 
-          isOpen={isOpen}
-          onClose={onClose}
-          firstField={firstField} />
-
-
-
-
+      <AddCashDetails
+        isOpen={isOpen}
+        onClose={onClose}
+        firstField={firstField}
+      />
    </Box>
  );
 };

-export default IOCashDetails;
+export default IOCashDetailsOld;
--- a/src/Pages/IO_Management/CreateIO/IODetails.jsx
+++ b/src/Pages/IO_Management/CreateIO/IODetails.jsx
@@ -6,9 +6,6 @@ import { useForm } from "react-hook-form";
 import * as yup from "yup";
 import GlobalStateContext from "../../../Contexts/GlobalStateContext";
 import FullscreenLoaders from "../../../Components/Loaders/FullscreenLoaders";
-import { generateUniqueId } from "../../../Contexts/GlobalStateProvider";
-import { useGetInvestmentTypesQuery } from "../../../Services/investment.type.service";
-import { useGetActiveSponserMasterQuery } from "../../../Services/sponser.service";
 import {
  useCreateIOMutation,
  useGetIOByIdQuery,
@@ -16,25 +13,10 @@ import {
 } from "../../../Services/io.service";
 import ToastBox from "../../../Components/ToastBox";
 import {
-  Input,
-  Table,
-  Tbody,
-  Td,
-  Th,
-  Thead,
-  Tr,
  useToast,
 } from "@chakra-ui/react";
-import { formatDate } from "../../Master/Sponser/Sponsers";
-
-import behrain from "../../../assets/bahrain_flag.png";
-import kuwait from "../../../assets/kuwait_flag.png";
-import oman from "../../../assets/oman_flag.png";
-import qatar from "../../../assets/qatar_flag.png";
-import uae from "../../../assets/uae_flag.png";
-import saudi from "../../../assets/saudi_arabia_flag.png";
 import { formatDatee } from "../../../Components/FormField";
-import { removeTrailingZeros } from "../../../Constants/Constants";
+import { formatDateToYYYYMMDD, removeTrailingZeros } from "../../../Constants/Constants";

 const schema = yup.object().shape({
  investmentNameEnglish: yup
@@ -43,7 +25,7 @@ const schema = yup.object().shape({
    .min(3, "IO name in English must be at least 3 characters long")
    .max(150, "IO name in English must be at most 150 characters long"),

-  investmentNameArabic: yup
+  investmentNameArabic: yup 
    .string()
    .required("IO name in Arabic is required")
    .min(3, "IO name in Arabic must be at least 3 characters long")
@@ -69,7 +51,6 @@ const schema = yup.object().shape({
      .typeError("Goal Amount is must be number")
      .required('Goal amount is required')
      .positive('Goal amount must be a positive number'),
-
  closingDate: yup
    .date()
    .notRequired("Closing date is required")
@@ -89,7 +70,7 @@ const schema = yup.object().shape({
  InvestmentDetails: yup.string().notRequired(),

  comment: yup.string().notRequired()
-  .min(10, "Comment must be at least 10 characters long")
+  // .min(10, "Comment must be at least 10 characters long")
  .max(100, "Comment must be at most 100 characters long"),

  expectedReturn: yup
@@ -97,22 +78,29 @@ const schema = yup.object().shape({
    .required("Expected return is required"),
 });

-
 const IODetails = ({ enableNextTab, index, data }) => {

-
-
- 
-
  const params = useParams();
  const navigate = useNavigate();
  const toast = useToast();


-  const handleInputChange = (index, newValue) => {
+  const handleInputChangeCreate = (index, newValue) => {
+    
    const updatedValues = [...values];
    updatedValues[index].value = newValue;
    setValues(updatedValues);
+    console.log(values); 
+  };
+
+  const handleInputChangeEdit = (index, newValue) => {
+    // Allow only whole numbers using regex
+    if (/^\d*$/.test(newValue)) {
+      const updatedValues = [...values];
+      updatedValues[index].value = newValue;
+      setValues(updatedValues);
+      console.log(values);
+    }
  };

  // ======================[ States ]
@@ -132,6 +120,7 @@ const IODetails = ({ enableNextTab, index, data }) => {
    isLoading: IObyIDisLoading,
    error: IObyIDerror,
  } = useGetIOByIdQuery(id, { skip: !id });
+  console.log(IObyID);

  const [creatIO] = useCreateIOMutation();
  const [updateIO] = useUpdateIOMutation();
@@ -165,20 +154,89 @@ const IODetails = ({ enableNextTab, index, data }) => {
    }
  );

-
-
-  const minInvestmentById = IObyID?.data?.minInvestmentAmt?.map(({minInvestmentAmt, country, country_xid, })=>{
+  const minInvestmentById = IObyID?.data?.minInvestmentAmt?.map(({minInvestmentAmt, country, currencyCode,  country_xid,id })=>{
+    console.log(currencyCode);
    return{
+      _id:id,
      id:country_xid,
      country: country?.countryName,
      value: removeTrailingZeros(minInvestmentAmt),
      logo: country?.flagIcon,
-      curr: country?.countryCode,
+      curr: currencyCode,
    }
  })

+
+  const schemaEdit = yup.object().shape({
+    investmentNameEnglish: yup
+      .string()
+      .required("IO name in English is required")
+      .min(3, "IO name in English must be at least 3 characters long")
+      .max(150, "IO name in English must be at most 150 characters long"),
+  
+    investmentNameArabic: yup
+      .string()
+      .required("IO name in Arabic is required")
+      .min(3, "IO name in Arabic must be at least 3 characters long")
+      .max(50, "IO name in Arabic must be at most 50 characters long"),
+  
+    descriptionEnglish: yup
+      .string()
+      .required("Description in English is required")
+      .min(10, "Description in English must be at least 10 characters long")
+      .max(1000, "Description in English must be at most 1000 characters long"),
+  
+    descriptionArabic: yup
+      .string()
+      .required("Description in Arabic is required")
+      .min(10, "Description in Arabic must be at least 10 characters long")
+      .max(2000, "Description in Arabic must be at most 500 characters long"),
+      expectedReturnArabic: yup
+        .string()
+        .required("Expected return in Arabic is required"),
+  
+        goalAmount: yup
+        .number()
+        .typeError("Goal Amount is must be number")
+        .required('Goal amount is required')
+        .positive('Goal amount must be a positive number')
+        .min(IObyID?.data?.totalAmtInvestmentInUSD, `Goal amount should not be lesser then amount raised ${IObyID?.data?.totalAmtInvestmentInUSD}`),
+    closingDate: yup
+      .date()
+      .notRequired("Closing date is required")
+      .min(new Date(), "Closing date cannot be in the past"),
+  
+    holdingPeriod: yup.string().required("Holding period is required"),
+    holdingPeriodArabic: yup.string().required("Holding period is required"),
+    isShariah: yup.string().required("CheckBox is required"),
+
+  
+    // minInvestmentAmount: yup
+    //   .number()
+    //   .required("Minimum investment is required")
+    //   .positive("Minimum investment must be a positive number")
+    //   .min(1, "Minimum investment must be at least 1"),
+  
+    ISIN: yup.string().notRequired(),
+  
+    InvestmentDetails: yup.string().notRequired(),
+  
+    comment: yup.string().notRequired()
+    .min(10, "Comment must be at least 10 characters long")
+    .max(100, "Comment must be at most 100 characters long"),
+  
+    expectedReturn: yup
+      .string()
+      .required("Expected return is required"),
+  });
+  
+  
+
  
  const [values, setValues] = useState(id?minInvestmentById:miniValue);
+
+  console.log(values);
+  
  const formatNumber = (num) => {
    // Remove non-numeric characters and format with commas
    return num.replace(/\D/g, '')
@@ -195,7 +253,7 @@ const IODetails = ({ enableNextTab, index, data }) => {
    handleSubmit,
    formState: { errors },
  } = useForm({
-    resolver: yupResolver(schema),
+    resolver: yupResolver(id ? schemaEdit : schema),
  });

  useEffect(() => {
@@ -220,17 +278,12 @@ const IODetails = ({ enableNextTab, index, data }) => {
        minInvestmentAmount: IObyID?.data?.minInvestmentAmount,
        holdingPeriodArabic: IObyID?.data?.minInvestmentAmount,
        expectedReturnArabic: IObyID?.data?.minInvestmentAmount,
+        isShariah: IObyID?.data?.isShariah
      });
    }

  }, [id, IObyID]);

-  
-
-
-
-  // const minInvestmentById = 
-
  //=======================[ Creator ]
  const formFields = [
    {
@@ -313,20 +366,30 @@ const IODetails = ({ enableNextTab, index, data }) => {
      type: "text",
      isRequired: true,
      section: " ",
-      width: "49%",
+      width: "32.3%",
      value: IObyID?.data?.expectedReturn,
    },

    {
      label: "Expected Return (Arabic)",
-      name: "expectedReturnArabic",
+      name: "expectedReturnArabic", 
      type: "text",
      isRequired: true,
      arabic: true,
      section: " ",
-      width: "49%",
+      width: "32.3%",
      value: IObyID?.data?.expectedReturnArabic,
    },
+    {
+      label: "Shariah",
+      name: "isShariah", 
+      type: "checkBox",
+      value:IObyID?.data?.isShariah,
+      // isRequired: true,
+      section: " ",
+      width: "32.3%",
+      value: IObyID?.data?.isShariah,
+    },


    {
@@ -371,6 +434,7 @@ const IODetails = ({ enableNextTab, index, data }) => {
      width: "32.3%",
      dateValue:formatDatee(IObyID?.data?.closingDate),
      // helperText: IObyID && `Current closing date is : ${formatDate(IObyID?.data?.closingDate)}`
+      closingDate:true
    },
    {
      label: "ISIN",
@@ -389,6 +453,8 @@ const IODetails = ({ enableNextTab, index, data }) => {
      section: " ",
      width: "32.3%",
      value: IObyID?.data?.InvestmentDetails,
+      maxLength:20,
+      helperText:`Maximum length should be 20 characters. You have entered ${watch()?.InvestmentDetails?.length || 0} characters.`
    },

    {
@@ -397,10 +463,10 @@ const IODetails = ({ enableNextTab, index, data }) => {
      name: "table",
      type: "table",
      section: " ",
-      width: "100%",
+      width: "100%", 
      isRequired: true,
      options: investmentTypeOptions,
-      handleInputChange: handleInputChange,
+      handleInputChange:id ?  handleInputChangeEdit : handleInputChangeCreate,
      value: values,
    },

@@ -417,151 +483,6 @@ const IODetails = ({ enableNextTab, index, data }) => {
      helperText:`Maximum length should be 100 characters. You have entered ${watch()?.comment?.length || 0} characters.`
    },
  ];
-  //=======================[ Editor ]
-  // const formEditFields = [
-  //   {
-  //     label: "IO Name",
-  //     value: IObyID?.data?.investmentNameEnglish,
-  //     name: "investmentNameEnglish",
-  //     type: "text",
-  //     section: " ",
-  //     width: "49%",
-  //     isRequired: true,
-  //   },
-  //   {
-  //     label: "IO Name (Arabic)",
-  //     name: "investmentNameArabic",
-  //     type: "text",
-  //     value: IObyID?.data?.investmentNameArabic,
-  //     isRequired: true,
-  //     arabic: true,
-  //     section: " ",
-  //     width: "49%",
-  //   },
-  //   {
-  //     label: "Description",
-  //     name: "descriptionEnglish",
-  //     value: IObyID?.data?.descriptionEnglish,
-  //     type: "textarea",
-  //     isRequired: true,
-  //     section: " ",
-  //     width: "49%",
-  //   },
-  //   {
-  //     label: "Description (Arabic)",
-  //     name: "descriptionArabic",
-  //     value: IObyID?.data?.descriptionArabic,
-  //     type: "textarea",
-  //     isRequired: true,
-  //     arabic: true,
-  //     section: " ",
-  //     width: "49%",
-  //   },
-
-  //   {
-  //     label: "Goal Amount",
-  //     placeHolder: "$00.00",
-  //     value: IObyID?.data?.goalAmount,
-  //     name: "goalAmount",
-  //     type: "number",
-  //     isRequired: true,
-  //     section: " ",
-  //     width: "32.3%",
-  //   },
-  //   {
-  //     label: "Closing Date",
-  //     name: "closingDate",
-  //     type: "date",
-  //     isRequired: true,
-  //     value: IObyID?.data?.closingDate,
-  //     section: " ",
-  //     width: "32.3%",
-  //   },
-  //   {
-  //     label: "Holding Period",
-  //     name: "holdingPeriod",
-  //     value: IObyID?.data?.holdingPeriod,
-  //     type: "number",
-  //     isRequired: true,
-  //     placeHolder: "1Y",
-  //     section: " ",
-  //     width: "32.3%",
-  //   },
-  //   {
-  //     label: "Minimum Investment Amount",
-  //     placeHolder: "$00.00",
-  //     name: "minInvestmentAmount",
-  //     value: IObyID?.data?.minInvestmentAmount,
-  //     type: "number",
-  //     isRequired: true,
-  //     section: " ",
-  //     width: "32.3%",
-  //   },
-  //   {
-  //     label: "ISIN",
-  //     placeHolder: "$00.00",
-  //     name: "ISIN",
-  //     value: IObyID?.data?.ISIN,
-  //     type: "number",
-  //     section: " ",
-  //     width: "32.3%",
-  //   },
-  //   {
-  //     label: "Investment Details",
-  //     placeHolder: "",
-  //     name: "InvestmentDetails",
-  //     value: IObyID?.data?.InvestmentDetails,
-  //     type: "text",
-  //     section: " ",
-  //     width: "32.3%",
-  //   },
-  //   {
-  //     label: "Expected Return Estimated",
-  //     placeHolder: "$00.00",
-  //     name: "expectedReturn",
-  //     type: "number",
-  //     isRequired: true,
-  //     value: IObyID?.data?.expectedReturn,
-  //     section: " ",
-  //     width: "32.3%",
-  //   },
-
-  //   {
-  //     label: "Investment Type",
-  //     placeHolder: "Select option",
-  //     value: IObyID?.data?.investmentType_xid,
-  //     name: "investmentType_xid",
-  //     type: "select",
-  //     isRequired: true,
-  //     section: " ",
-  //     width: "32.3%",
-  //     options: investmentTypeOptions,
-  //   },
-  //   {
-  //     label: "Sponsorer Name",
-  //     placeHolder: "Select option",
-  //     name: "sponsor_xid",
-  //     type: "select",
-  //     options: sponserNameOption,
-  //     value: IObyID?.data?.sponsor_xid,
-  //     section: " ",
-  //     isRequired: true,
-  //     width: "32.3%",
-  //   },
-
-  //   {
-  //     label: "Comment",
-  //     placeHolder: "Enter comment here",
-  //     name: "comment",
-  //     type: "textarea",
-  //     value: IObyID?.data?.comment,
-  //     section: " ",
-  //     width: "100%",
-  //     // options: investmentTypeOptions,
-  //   },
-  // ];
-
-  // ======================[ Form Contructor Filter ]
  const groupedFields = formFields.reduce((groups, field) => {
    const { section } = field;
    if (!groups[section]) {
@@ -572,27 +493,30 @@ const IODetails = ({ enableNextTab, index, data }) => {
  }, {});

  const onSubmit = async (data) => {
-    delete data.table;
-    setIsLoading(true);
-    // console.log(data);

-    const updatedMinAmount = values?.map(({id, value})=>{
+    delete data.table;
+
+    setIsLoading(true);
+    const updatedMinAmount = values?.map(({id, value, _id})=>{
      return {
+        id:_id,
        country_xid:id,
        minInvestmentAmt: Number(value)
      }
    })

+    // console.log(formatDateToYYYYMMDD(data.closingDate));
    const formData = {
      ...data,
      investmentType_xid: Number(data.investmentType),
      sponsor_xid: Number(data.sponserName),
-    minInvestmentAmt:updatedMinAmount
+    minInvestmentAmt:updatedMinAmount,
+    closingDate: formatDateToYYYYMMDD(data.closingDate)
    };

-    // console.log(formData);
    // console.log(formData);
    if (id) {
+      console.log("========================",formData);
      const res = await updateIO({ data: formData, id });
      console.log(res);
      if (res?.data?.statusCode === 200) {
@@ -603,6 +527,11 @@ const IODetails = ({ enableNextTab, index, data }) => {
        navigate(`/view-io/${id}`);
        enableNextTab(index);
      } else if(res?.error?.status === 400){
+        setIsLoading(false);
+        toast({
+          render: () => <ToastBox message={res?.error?.data?.message } status={"error"} />,
+        }); 
+      } else if(res?.error?.status === 500){
        setIsLoading(false);
        toast({
          render: () => <ToastBox message={res?.error?.data?.message } status={"error"} />,
@@ -610,6 +539,7 @@ const IODetails = ({ enableNextTab, index, data }) => {
      }
    } else {
      try {
+        console.log("========================",formData);
        const res = await creatIO(formData);
        console.log(res?.error?.status);
        if (res?.data?.statusCode === 200) {
@@ -667,7 +597,13 @@ const IODetails = ({ enableNextTab, index, data }) => {
      onSubmit={handleSubmit(onSubmit)}
      btnLoading={isLoading}
      submitTitle={id ? "Update" : "Submit"}
-    ></FormInputMain>
+    >
+      {/* <Box display={"flex"} justifyContent={"end"} mb={3} mt={4} me={3}>
+        <Checkbox colorScheme='forestGreen' display={"flex"} gap={3} flexDirection= {"row-reverse"}>
+         <Text as={"span"} fontWeight={500} fontSize={"sm"}>Shariah</Text>
+        </Checkbox>
+      </Box> */}
+    </FormInputMain>
  );
 };

--- a/src/Pages/IO_Management/CreateIO/IONAVDetails.jsx
+++ b/src/Pages/IO_Management/CreateIO/IONAVDetails.jsx
@@ -1,225 +0,0 @@
-import React, { useContext, useEffect, useRef, useState } from 'react'
-import GlobalStateContext from '../../../Contexts/GlobalStateContext';
-import { Box, HStack, Input,Text, Table, Tbody, Th, Tr, Avatar, useDisclosure,Button } from '@chakra-ui/react';
-import { OPACITY_ON_LOAD } from '../../../Layout/animations';
-import Pagination from '../../../Components/Pagination';
-import NormalTable from '../../../Components/DataTable/NormalTable';
-import CustomAlertDialog from '../../../Components/CustomAlertDialog';
-import { formatDatee } from '../../../Components/FormField';
-import { AddIcon } from '@chakra-ui/icons';
-import AddIONav from './AddIONav';
-
-const IONAVDetails = () => {
-  const { navDetails, setNavDetails, IODetails } =
-    useContext(GlobalStateContext);
-    const firstField = useRef();
-    const { isOpen, onOpen, onClose } = useDisclosure();
-    const [searchTerm, setSearchTerm] = useState("");
-    const [isLoading, setIsLoading] = useState(true);
-    const [deleteAlert, setDeleteAlert] = useState(false);
-    const [actionId, setActionId] = useState(false);
-    const [mouseEntered, setMouseEntered] = useState(false);
-    const [mouseEnteredId, setMouseEnteredId] = useState("");
-
-
-    console.log(IODetails?.ioNAVHistory);
-    
-
-    
-  useEffect(() => {
-    // Simulate loading
-    const timer = setTimeout(() => {
-      setIsLoading(false);
-    }, 1500);
-
-    // Cleanup the timer on component unmount
-    return () => clearTimeout(timer);
-  }, []);
-
-    // Table setup
-    const tableHeadRow = [
-      // "Sr.No",
-      "Valuation Date",
-      "NAV",
-      "Last NAV update",
-      "Investment Closed",
-      "Comments",
-      "Update by ",
-      // "Update On",
-    ];
-
-      // Table filter
-  const filteredData = IODetails?.ioNAVHistory?.filter((item) => {
-    const name = item.transactionType;
-    const searchLower = searchTerm.toLowerCase();
-    const nameMatches = name.toLowerCase().includes(searchLower);
-    return nameMatches;
-  }).sort((b, a) => new Date(a.transactionDate) - new Date(b.transactionDate));
-
-  const  extractedArray=filteredData?.map((item, index) => ({
-    id: item?.id,
-    "Sr.No": index +1,
-    "Valuation Date": (
-      <Text
-        justifyContent={"center"}
-        as={"span"}
-        color={"teal.900"}
-        fontWeight={"500"}
-        className="d-flex align-items-center web-text-small"
-      >
-        {formatDatee(item.transactionDate)}
-      </Text>
-    ),
-    "NAV": (
-      <Text
-        justifyContent={"center"}
-        as={"span"}
-        color={"teal.900"}
-        fontWeight={"500"}
-        className="d-flex align-items-center web-text-small"
-      >
-        {/* {`${item.transactionAmount}`} */}
-
-        {`$${parseFloat(item.transactionAmount||0).toLocaleString()}`}
-      </Text>
-    ),
-    "Last NAV update": (
-      <Text
-        justifyContent={"center"}
-        as={"span"}
-        color={"teal.900"}
-        fontWeight={"500"}
-        className="d-flex align-items-center web-text-small"
-      >
-        {item.previousNAVvalue && `${item.previousNAVvalue}`}
-      </Text>
-    ),
-    "Investment Closed": (
-      <Text
-        justifyContent={"center"}
-        as={"span"}
-        color={"teal.900"}
-        fontWeight={"500"}
-        className="d-flex align-items-center web-text-small"
-      >
-        {item.initialNAVvalue&& `${item.initialNAVvalue}`}
-      </Text>
-    ),
-    "Comments": (
-      <Text
-        justifyContent={"center"}
-        as={"span"}
-        color={"teal.900"}
-        fontWeight={"500"}
-        className="d-flex align-items-center web-text-small"
-      >
-        {item.comments}
-      </Text>
-    ),
-    "Update by ": (
-      <Text
-        justifyContent ={"center"}
-        as={"span"}
-        color={"teal.900"}
-        fontWeight={"500"}
-        gap={2}
-        className="d-flex align-items-center web-text-small"
-      >
-        
-    <Avatar size='sm' name={"faisal"} src={null} />Faisal
-      </Text>
-    ),
-    "Update On": (
-      <Text
-        justifyContent={"center"}
-        as={"span"}
-        color={"teal.900"}
-        fontWeight={"500"}
-        className="d-flex align-items-center web-text-small"
-      >
-        {item.updateOn}
-      </Text>
-    ),
-  }));
-
-
-
-  const handleDelete = () => {
-    const updatedNav = navDetails.filter(
-      (sponsor) => sponsor.id !== actionId
-    );
-
-    setTimeout(() => {
-      setNavDetails(updatedNav);
-      setDeleteAlert(false);
-      setIsLoading(false);
-    }, 100);
-    setIsLoading(true);
-  };
-
-
-
-
-  return (<Box {...OPACITY_ON_LOAD} pb={0}>
-    <Box bg="white.500">
-      <HStack
-        display={"flex"}
-        justifyContent={"space-between"}
-        pb={3}
-        spacing="24px"
-      >
-        <Input
-          type="search"
-          width={300}
-          placeholder="Search..."
-          size="sm"
-          rounded="sm"
-          focusBorderColor="green.500"
-          value={searchTerm}
-          onChange={(e) => setSearchTerm(e.target.value)}
-        />
-
-        {/* <HStack display={"flex"} alignItems={"center"}>
-          <Pagination totalItems={10} />
-        </HStack> */}
-
-
-{IODetails?.isInvestedAmount ? <Button onClick={onOpen} leftIcon={<AddIcon/>} colorScheme="forestGreen" size={'sm'} rounded={'sm'} fontSize={'xs'} >Add IO NAV</Button>:null}
-
-      </HStack>
-    </Box>
-
-    <NormalTable
-      centered={true}
-      emptyMessage={`We don't have any Sponers`}
-      tableHeadRow={tableHeadRow}
-      data={extractedArray} 
-      isLoading={isLoading}
-      viewActionId={actionId}
-      setViewActionId={setActionId}
-      caption={"Tanami v1.0"}
-      setMouseEnteredId={setMouseEnteredId}
-      setMouseEntered={setMouseEntered}
-    />
-
-    <CustomAlertDialog
-      onClose={() => setDeleteAlert(false)}
-      isOpen={deleteAlert}
-      message={"Are you sure you want to delete sponers?"}
-      alertHandler={handleDelete}
-      isLoading={isLoading}
-    />
-
-
-
-<AddIONav 
-          isOpen={isOpen}
-          onClose={onClose}
-          firstField={firstField} />
-
-
-  </Box>
-  )
-}
-
-export default IONAVDetails
--- a/src/Pages/IO_Management/CreateIO/IONAVDetails/AddNavDetails.jsx
+++ b/src/Pages/IO_Management/CreateIO/IONAVDetails/AddNavDetails.jsx
@@ -0,0 +1,266 @@
+import {
+  Box,
+  Button,
+  Drawer,
+  DrawerBody,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerOverlay,
+  FormControl,
+  FormErrorMessage,
+  FormHelperText,
+  FormLabel,
+  HStack,
+  Input,
+  Select,
+  Stack,
+  Text,
+  Textarea,
+  VStack,
+  useToast,
+} from "@chakra-ui/react";
+import * as yup from "yup";
+import React, { useState, useEffect, useContext } from "react";
+import { useForm, Controller } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { v4 as uuidv4 } from "uuid";
+import { useParams } from "react-router-dom";
+import CustomAlertDialog from "../../../../Components/CustomAlertDialog";
+import ToastBox from "../../../../Components/ToastBox";
+import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
+import CurrencyInput from "../../../../Components/CurrencyInput";
+import { useAddNavDetailsMutation } from "../../../../Services/io.service";
+import { formatDatee } from "../../../../Components/FormField";
+
+const ioNav = yup.object().shape({
+  transactionDate: yup.string().required("Date is required"),
+  transactionAmount: yup.number().required("New NAV is required"),
+  comments: yup.string().notRequired()
+  .max(200, "Approve Comment cannot be more than 200 characters"),
+});
+
+const AddNavDetails = ({ isOpen, onClose, firstField, actionId, setActionId, data }) => {
+  const params = useParams()
+  const id = params?.id
+  const [file, setFile] = useState("");
+  const [fileName, setFileName] = useState("");
+  const [isLoading, setIsLoading] = useState(false)
+  const [alert, setAlert] = useState(false);
+  const toast = useToast();
+
+
+
+  // ======================[ Cotext Api ]
+  const { IODetails } = useContext(GlobalStateContext);
+  const found = data?.find((item) => item?.id === actionId);
+
+
+  const [addNavDetails] = useAddNavDetailsMutation()
+  // const {
+  //   data
+  // } = useGetArtifactsQuery(id)
+
+  const {
+    control,
+    handleSubmit,
+    watch,
+    reset,
+    formState: { errors },
+  } = useForm({
+    resolver: yupResolver(ioNav),
+  });
+
+
+  const onSubmit = async (data) => {
+
+    setIsLoading(true)
+
+    try {
+
+      const res = await addNavDetails({ data, id })
+      if (res?.data?.statusCode === 201) {
+        setIsLoading(false);
+        toast({
+          render: () => <ToastBox message={res?.data?.message} />,
+        });
+        handleClose()
+      }else if(res?.error?.status === 400){
+        toast({
+          render: () => <ToastBox message={res?.error?.data?.message } status={"error"} />,
+        });
+        handleClose()
+      }
+
+
+    } catch (error) {
+      console.log(error);
+
+    }
+
+  };
+
+
+
+  const handleConfirm = () => {
+    handleSubmit(onSubmit)();
+  };
+
+  const handleSave = () => {
+    handleSubmit(onSubmit)();
+  };
+
+  const handleClose = () => {
+    setIsLoading(false);
+    setAlert(false)
+    onClose()
+    reset({
+      transactionDate:"",
+      transactionAmount:"",
+      comments:""
+    })
+  }
+
+
+
+
+const today = formatDatee(new Date(), 'yyyy-MM-dd');
+
+function calculatePercentage(newNav, currNav) {
+const per = (newNav - currNav) / currNav * 100
+return per.toFixed(2)
+}
+
+
+console.log(calculatePercentage(1092500, 976070));
+
+
+
+  return (
+    <>
+      <Drawer
+        size={"md"}
+        isOpen={isOpen}
+        placement="right"
+        initialFocusRef={firstField}
+        onClose={handleClose}
+      >
+        <DrawerOverlay />
+        <DrawerContent>
+          <DrawerCloseButton />
+          <DrawerHeader fontSize={"sm"}>IO Nav Details</DrawerHeader>
+
+          <DrawerBody>
+            <Stack spacing={4}>
+              <FormControl isInvalid={errors.transactionDate} isRequired>
+                <FormLabel fontSize={"sm"}>Date Selection</FormLabel>
+                <Controller
+                  name="transactionDate"
+                  control={control}
+                  render={({ field }) => (
+                    <Input {...field} 
+                    max={today} // Set max attribute to today’s date
+                     fontSize={"sm"} type="date" size={"sm"} />
+                  )}
+                />
+                <FormErrorMessage fontSize={"xs"} fontWeight={500}>
+                  {errors.transactionDate?.message}
+                </FormErrorMessage>
+              </FormControl>
+
+
+
+              <FormControl isInvalid={errors.transactionAmount} isRequired>
+                <FormLabel fontSize={"sm"}>New NAV</FormLabel>
+                <Controller
+                  name="transactionAmount"
+                  control={control}
+                  render={({ field }) => (
+                    <CurrencyInput {...field} textAlign={'right'} fontSize={"sm"} type="number" size={"sm"} />
+                  )}
+                />
+                <FormErrorMessage fontSize={"xs"} fontWeight={500}>
+                  {errors.transactionAmount?.message}
+                </FormErrorMessage>
+              </FormControl>
+              
+
+              <HStack justify={'start'} gap={10} bg={'green.100'} p={3} rounded={'md'} shadow={'md'}>
+                <VStack align={'start'}>
+                  <Text as={'span'} fontSize={'sm'} fontWeight={500}>Current nav</Text>
+                  <Text as={'span'} fontSize={'sm'}>
+                    {parseFloat(IODetails?.ioNAV || 0).toLocaleString(undefined, {
+                      minimumFractionDigits: 2,
+                      maximumFractionDigits: 2,
+                    })}
+                  </Text>
+                </VStack>
+
+                <VStack align={'start'}>
+                  <Text as={'span'} fontSize={'sm'} fontWeight={500}>Live return %</Text>
+                  <Text as={'span'} fontSize={'sm'}>{calculatePercentage(watch()?.transactionAmount||IODetails?.ioNAV,IODetails?.ioNAV)}</Text>
+                </VStack>
+              </HStack>
+              
+
+
+              <FormControl isInvalid={errors.comments}>
+                <FormLabel fontSize={"sm"}>Comment</FormLabel>
+                <Controller
+                  name="comments"
+                  control={control}
+                  render={({ field }) => (
+                    <Textarea {...field} maxLength={200}   fontSize={"sm"} type="text" size={"sm"} />
+                  )}
+                />
+                <FormErrorMessage fontSize={"xs"} fontWeight={500}>
+                  {errors.comments?.message}
+                </FormErrorMessage>
+                <FormHelperText fontSize="xs" color="gray.500">
+                    <Box as="span" me={1}>Maximum length should be 200 characters. You have entered </Box>
+                    {watch("comments")?.length || 0} characters.
+                  </FormHelperText>
+              </FormControl>
+
+            </Stack>
+          </DrawerBody>
+
+          <DrawerFooter>
+            <Button
+              variant="outline"
+              colorScheme={"forestGreen"}
+              rounded={"sm"}
+              size={"sm"}
+              mr={3}
+              onClick={handleClose}
+            >
+              Cancel
+            </Button>
+
+            <Button
+              colorScheme={"forestGreen"}
+              rounded={"sm"}
+              size={"sm"}
+
+              onClick={() => setAlert(true)}
+            >
+              Save
+            </Button>
+          </DrawerFooter>
+        </DrawerContent>
+      </Drawer>
+
+
+      <CustomAlertDialog
+        isOpen={alert}
+        onClose={() => setAlert(false)}
+        alertHandler={handleSave}
+        message={"Are you sure you want to add NAV details?"}
+        isLoading={isLoading}
+      />
+    </>
+  );
+};
+
+export default AddNavDetails;
--- a/src/Pages/IO_Management/CreateIO/IONAVDetails/Approved.jsx
+++ b/src/Pages/IO_Management/CreateIO/IONAVDetails/Approved.jsx
@@ -0,0 +1,295 @@
+import {
+  Avatar,
+  Badge,
+  Box,
+  Button,
+  HStack,
+  Input,   
+  Text,
+  Th,
+  Tooltip,
+  Tr,
+  useDisclosure,
+  useToast,
+} from "@chakra-ui/react";
+import React, { useContext, useEffect, useRef, useState } from "react";
+import { AddIcon, DeleteIcon, EditIcon, ViewIcon } from "@chakra-ui/icons";
+import { LuFileSpreadsheet } from "react-icons/lu";
+import { OPACITY_ON_LOAD } from "../../../../Layout/animations";
+import NormalTable from "../../../../Components/DataTable/NormalTable";
+import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
+import CustomAlertDialog from "../../../../Components/CustomAlertDialog";
+import * as XLSX from "xlsx";                                                                  
+import ToastBox from "../../../../Components/ToastBox";
+import AddCashDetails from "../AddCashDetails";
+import { debounce } from "../../../Admin/Contact";
+import { useParams } from "react-router-dom";
+import { useUpdateIOCaseMutation } from "../../../../Services/io.service";
+import AddApproved from "./AddNavDetails";
+import AddNavDetails from "./AddNavDetails";
+
+const formatDate = (date) => new Date(date).toLocaleDateString();
+
+const Approved = () => {
+  const params = useParams();
+  const toast = useToast();
+  const id = params?.id;
+  const firstField = useRef();
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const { IODetails, iONAVDetail, setIONAVDetail } =
+    useContext(GlobalStateContext);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [isLoading, setIsLoading] = useState(true);
+  const [deleteAlert, setDeleteAlert] = useState(false);
+  const [actionId, setActionId] = useState(false);
+  const [mouseEntered, setMouseEntered] = useState(false);
+  const [mouseEnteredId, setMouseEnteredId] = useState("");
+  const [updateIOCase] = useUpdateIOCaseMutation();
+
+  useEffect(() => {
+    // Simulate loading
+    const timer = setTimeout(() => {
+      setIsLoading(false);
+    }, 1500);
+
+    // Cleanup the timer on component unmount
+    return () => clearTimeout(timer);
+  }, []);
+
+  const formatDate = (date) => {
+    return new Date(date).toLocaleDateString("en-GB", {
+      day: "2-digit",
+      month: "2-digit",
+      year: "numeric",
+    });
+  };
+
+  // Table filter
+  const filteredData = IODetails?.ioNAVStatusHistory?.Approved?.filter(
+    (item) => {
+      // Filter by name (case insensitive)
+      const name = item.transactionAmount;
+      const searchLower = searchTerm?.toLowerCase();
+      const nameMatches = name?.toLowerCase().includes(searchLower);
+      return nameMatches;
+    }
+  );
+
+  const tableHeadRow = [
+    "Sr No.",
+    "Valuation date",
+    "NAV",
+    "Last Nav Update",
+    "Investment Closed",
+    "Comments",
+    "Updated By",
+  ];
+
+  const extractedArray = filteredData?.map((item, index) => ({
+    id: item?.id,
+    "Sr No.": (
+      <Text as={"span"} color={"gray.800"} fontWeight={"500"}>
+        {index + 1}.
+      </Text>
+    ),
+    "Valuation date": (
+      <Text as={"span"} color={"gray.600"} fontWeight={"500"}>
+        {formatDate(item?.transactionDate)}
+      </Text>
+    ),
+    NAV: (
+      <Text as={"span"} color={"gray.600"} fontWeight={"500"}>
+        <Badge ms={1} colorScheme="green" me={1}>
+          $
+        </Badge>
+        {parseFloat(item?.transactionAmount || 0).toLocaleString(undefined, {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          })}
+      </Text>
+    ),
+    "Last Nav Update": (
+      <Text
+        justifyContent={"center"}
+        as={"span"}
+        color={"teal.900"}
+        fontWeight={"500"}
+        className="d-flex align-items-center web-text-small"
+      >
+        {item.previousNAVvalue && `${item.previousNAVvalue}`}
+      </Text>
+    ),
+    "Investment Closed": (
+      <Text
+        justifyContent={"center"}
+        as={"span"}
+        color={"teal.900"}
+        fontWeight={"500"}
+        className="d-flex align-items-center web-text-small"
+      >
+        {item?.initialNAVvalue && `${item?.initialNAVvalue}`}
+      </Text>
+    ),
+    Comments: (
+      <Text w={"100px"} as={"span"} color={"gray.800"} fontWeight={"500"}>
+        {item?.comments ? item?.comments : "---"}
+      </Text>
+    ),
+    "Updated By": (
+      <Text
+        w={"100px"}
+        as={"span"}
+        color={"gray.800"}
+        fontWeight={"500"}
+        display={"flex"}
+        alignItems={"center"}
+      >
+        {/* <Avatar
+          mr={2}
+          size="sm"
+          name={item.creator?.firstName}
+          src={item.creator?.profilePhoto}
+        /> */}
+        {item?.modifier?.firstName}
+      </Text>
+    ),
+  }));
+
+  const handleAdd = async () => {
+    try {
+      const res = await updateIOCase(id);
+      if (res?.data) {
+        // toast({
+        //   render: () => (
+        //     <ToastBox status={"success"} message={res?.data?.message} />
+        //   ),
+        // });
+        setIsLoading(false);
+        onOpen();
+      } else if (res?.error) {
+        toast({
+          render: () => (
+            <ToastBox status={"error"} message={res?.error?.data?.message} />
+          ),
+        });
+        setIsLoading(false);
+      }
+    } catch (error) {}
+  };
+
+  const handleDelete = () => {
+    const updatedSponsors = sponser.filter(
+      (sponsor) => sponsor.id !== actionId
+    );
+
+    setTimeout(() => {
+      setCaseDetails(updatedSponsors);
+      setDeleteAlert(false);
+      setIsLoading(false);
+    }, 100);
+    setIsLoading(true);
+  };
+
+  const exportToExcelNew = (data, fileName) => {
+    const worksheet = XLSX.utils.json_to_sheet(data);
+    const workbook = XLSX.utils.book_new();
+    XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
+
+    // Export file
+    XLSX.writeFile(workbook, `${fileName}.xlsx`);
+  };
+
+  const ioNavExport = IODetails?.ioNAVStatusHistory?.Approved?.map(
+    (item, index) => ({
+      ID: item?.id, // Keep as integer if it's already a number
+      "Valuation date": formatDate(item?.transactionDate), // Assuming this is a date, no conversion needed
+      NAV: parseFloat(item?.transactionAmount) || 0, // Convert to float
+      "Last Nav Update": parseFloat(item?.previousNAVvalue) || 0, // Convert to float
+      "Investment Closed": parseFloat(item?.initialNAVvalue) || 0, // Convert to float
+      Comments: item?.comments, // Keep as string
+      // "Transaction Type": item?.transactionType,
+      "Updated By": item?.creator?.firstName, // Keep as string
+      // "Update On": formatDate(item?.updatedAt) // Assuming this is a date, no conversion needed
+    })
+  );
+
+  return (
+    <Box {...OPACITY_ON_LOAD} pb={0}>
+      <Box bg="white.500">
+        <HStack
+          display={"flex"}
+          justifyContent={"space-between"}
+          pb={3}
+          spacing="24px"
+        >
+          <Input
+            type="search"
+            width={300}
+            placeholder="Search..."
+            size="sm"
+            rounded="sm"
+            focusBorderColor="green.500"
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+          />
+
+          <HStack display={"flex"} alignItems={"center"}>
+            <Button
+              onClick={() => exportToExcelNew(ioNavExport, "Io Nav details")}
+              leftIcon={<LuFileSpreadsheet />}
+              colorScheme="forestGreen"
+              size={"sm"}
+              variant={"outline"}
+              rounded={"sm"}
+              fontSize={"xs"}
+              isDisabled={ioNavExport?.length === 0}
+            >
+              Export xls
+            </Button>
+            {/* {IODetails?.isInvestedAmount
+              ? localStorage?.getItem("role") === "Maker" && (
+                  <Button
+                    onClick={handleAdd}
+                    leftIcon={<AddIcon />}
+                    colorScheme="forestGreen"
+                    size={"sm"}
+                    rounded={"sm"}
+                    fontSize={"xs"}
+                  >
+                    Add
+                  </Button>
+                )
+              : null} */}
+          </HStack>
+        </HStack>
+      </Box>
+ 
+      <NormalTable
+        emptyMessage={`We don't have any Sponers`}
+        tableHeadRow={tableHeadRow}
+        data={extractedArray}
+        isLoading={isLoading}
+        viewActionId={actionId}
+        setViewActionId={setActionId}
+        setMouseEnteredId={setMouseEnteredId}
+        setMouseEntered={setMouseEntered}
+      />
+                                                                           
+      <CustomAlertDialog
+        onClose={() => setDeleteAlert(false)}
+        isOpen={deleteAlert}
+        message={"Are you sure you want to delete sponers?"}
+        alertHandler={handleDelete}
+        isLoading={isLoading}
+      />
+
+      <AddNavDetails
+        isOpen={isOpen}
+        onClose={onClose}
+        firstField={firstField}
+      />
+    </Box>
+  );
+};
+
+export default Approved;
--- a/src/Pages/IO_Management/CreateIO/IONAVDetails/IONAVDetails.jsx
+++ b/src/Pages/IO_Management/CreateIO/IONAVDetails/IONAVDetails.jsx
@@ -0,0 +1,191 @@
+// import { Tab, TabList, TabPanel, TabPanels, Tabs } from "@chakra-ui/react";
+// import React from "react";
+// import Approved from "./Approved";
+// import Pending from "./Pending";
+// import Rejected from "./Rejected";
+
+// const IONAVDetails = () => {
+//   return (
+//     <Tabs>
+//       <TabList>
+//         <Tab
+//           fontSize={"sm"}
+//           _selected={{
+//             color: "#004118",
+//             borderBottom: "2px solid #38a169",
+//           }}
+//         >
+//           Approved
+//         </Tab>
+//         <Tab
+//           fontSize={"sm"}
+//           _selected={{
+//             color: "#004118",
+//             borderBottom: "2px solid #38a169",
+//           }}
+//         >
+//           Pending
+//         </Tab>
+//         <Tab
+//           fontSize={"sm"}
+//           _selected={{
+//             color: "#004118",
+//             borderBottom: "2px solid #38a169",
+//           }}
+//         >
+//           Rejected
+//         </Tab>
+//       </TabList>
+//       <TabPanels>
+//         <TabPanel>
+//           <Approved />
+//         </TabPanel>
+//         <TabPanel>
+//           <Pending />
+//         </TabPanel>
+//         <TabPanel>
+//           <Rejected />
+//         </TabPanel>
+//       </TabPanels>
+//     </Tabs>
+//   );
+// };
+
+// export default IONAVDetails;
+
+import {
+  Badge,
+  Box,
+  Button,
+  Tab,
+  TabList,
+  TabPanel,
+  TabPanels,
+  Tabs,
+  useDisclosure,
+  useToast,
+} from "@chakra-ui/react";
+import React, { useContext, useRef } from "react";
+import Approved from "./Approved";
+import Pending from "./Pending";
+import Rejected from "./Rejected";
+import { AddIcon } from "@chakra-ui/icons";
+import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
+import ToastBox from "../../../../Components/ToastBox";
+import { useParams } from "react-router-dom";
+import AddNavDetails from "./AddNavDetails";
+import { useUpdateIOCaseMutation } from "../../../../Services/io.service";
+import { encryptString } from "../../../../Constants/Constants";
+
+const IONAVDetails = () => {
+  const params = useParams();
+  const toast = useToast();
+  const id = params?.id;
+  const { IODetails } = useContext(GlobalStateContext);
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const firstField = useRef();
+
+  const [updateIOCase] = useUpdateIOCaseMutation();
+
+  const handleAdd = async () => {
+    try {
+      const res = await updateIOCase(id);
+      if (res?.data) {
+        // toast({
+        //   render: () => (
+        //     <ToastBox status={"success"} message={res?.data?.message} />
+        //   ),
+        // });
+        // setIsLoading(false);
+        onOpen();
+      } else if (res?.error) {
+        toast({
+          render: () => (
+            <ToastBox status={"error"} message={res?.error?.data?.message} />
+          ),
+        });
+        setIsLoading(false);
+      }
+    } catch (error) {}
+  };
+
+  return (
+    <Box>
+      <Tabs variant="unstyled">
+        <Box
+          display={"flex"}
+          justifyContent={"space-between"}
+          alignItems={"center"}
+          borderBottom={"1px solid #ccc"}
+        >
+          <TabList>
+            <Tab
+              fontSize={"sm"}
+              _selected={{
+                color: "#004118",
+                borderBottom: "2px solid #38a169",
+              }}
+            >
+              Approved
+            </Tab>
+            <Tab
+              fontSize={"sm"}
+              _selected={{
+                color: "#004118",
+                borderBottom: "2px solid #38a169",
+              }}
+            >
+              Pending
+              {IODetails?.ioNAVStatusHistory?.Pending.length > 0 && (
+                <Badge rounded={"sm"} colorScheme="forestGreen" ms={2}>
+                  {IODetails?.ioNAVStatusHistory?.Pending.length || 0}
+                </Badge>
+              )}
+            </Tab>
+            <Tab
+              fontSize={"sm"}
+              _selected={{
+                color: "#004118",
+                borderBottom: "2px solid #38a169",
+              }}
+            >
+              Rejected
+            </Tab>
+          </TabList>
+          {IODetails?.isInvestedAmount
+            ? localStorage?.getItem("role") === encryptString(import.meta.env.VITE_VITE_MAKER) && (
+                <Button
+                  onClick={handleAdd}
+                  leftIcon={<AddIcon />}
+                  colorScheme="forestGreen"
+                  size={"sm"}
+                  rounded={"sm"}
+                  fontSize={"xs"}
+                >
+                  Add
+                </Button>
+              )
+            : null}
+        </Box>
+        <TabPanels>
+          <TabPanel>
+            <Approved />
+          </TabPanel>
+          <TabPanel>
+            <Pending />
+          </TabPanel>
+          <TabPanel>
+            <Rejected />
+          </TabPanel>
+        </TabPanels>
+      </Tabs>
+      <AddNavDetails
+        isOpen={isOpen}
+        onClose={onClose}
+        firstField={firstField}
+      />
+    </Box>
+  );
+};
+
+export default IONAVDetails;
--- a/src/Pages/IO_Management/CreateIO/IONAVDetails/Pending.jsx
+++ b/src/Pages/IO_Management/CreateIO/IONAVDetails/Pending.jsx
@@ -0,0 +1,339 @@
+import {
+  Avatar,
+  Badge,
+  Box,
+  Button,
+  HStack,
+  Input,
+  Text,
+  Tooltip,
+  useDisclosure,
+  useToast,
+} from "@chakra-ui/react";
+import React, { useContext, useEffect, useRef, useState } from "react";
+import { OPACITY_ON_LOAD } from "../../../../Layout/animations";
+import NormalTable from "../../../../Components/DataTable/NormalTable";
+import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
+import CustomAlertDialog from "../../../../Components/CustomAlertDialog";
+import { AddIcon, CheckIcon, CloseIcon, ViewIcon } from "@chakra-ui/icons";
+import { useParams } from "react-router-dom";
+import { useUpdateIOCaseMutation } from "../../../../Services/io.service";
+import ToastBox from "../../../../Components/ToastBox";
+import AddNavDetails from "./AddNavDetails";
+import RequestApproveModal from "./RequestApproveModal";
+import RequestRejectModal from "./RequestRejectModal";
+import { encryptString } from "../../../../Constants/Constants";
+
+const formatDate = (date) => new Date(date).toLocaleDateString();
+
+const Pending = () => {
+  const params = useParams();
+  const toast = useToast();
+  const id = params?.id;
+  const firstField = useRef();
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const { IODetails, iONAVDetail, setIONAVDetail } =
+    useContext(GlobalStateContext);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [isLoading, setIsLoading] = useState(true);
+  const [deleteAlert, setDeleteAlert] = useState(false);
+  const [actionId, setActionId] = useState(false);
+  const [mouseEntered, setMouseEntered] = useState(false);
+  const [mouseEnteredId, setMouseEnteredId] = useState("");
+
+  const [updateIOCase] = useUpdateIOCaseMutation();
+
+  const {
+    isOpen: isConfirmOpen,
+    onOpen: onConfirmOpen,
+    onClose: onConfirmClose,
+  } = useDisclosure();
+  const {
+    isOpen: isRejectOpen,
+    onOpen: onRejectOpen,
+    onClose: onRejectClose,
+  } = useDisclosure();
+
+  useEffect(() => {
+    // Simulate loading
+    const timer = setTimeout(() => {
+      setIsLoading(false);
+    }, 1500);
+
+    // Cleanup the timer on component unmount
+    return () => clearTimeout(timer);
+  }, []);
+
+  const formatDate = (date) => {
+    return new Date(date).toLocaleDateString("en-GB", {
+      day: "2-digit",
+      month: "2-digit",
+      year: "numeric",
+    });
+  };
+
+  // Table filter
+  const filteredData = IODetails?.ioNAVStatusHistory?.Pending?.filter(
+    (item) => {
+      // Filter by name (case insensitive)
+      const name = item?.transactionDate;
+      const searchLower = searchTerm?.toLowerCase();
+      const nameMatches = name?.toLowerCase().includes(searchLower);
+      return nameMatches;
+    }
+  );
+
+  const tableHeadRow = [
+    "Sr No.",
+    "Valuation date",
+    "NAV",
+    "Last Nav Update",
+    "Investment Closed",
+    "Comments",
+    "Updated By",
+    ...(localStorage?.getItem("role") !== encryptString(import.meta.env.VITE_VITE_MAKER) ? ["Status"] : []),
+  ];
+
+  const extractedArray = filteredData?.map((item, index) => ({
+    id: item?.id,
+    "Sr No.": (
+      <Text as={"span"} color={"gray.800"} fontWeight={"500"}>
+        {index + 1}.
+      </Text>
+    ),
+    "Valuation date": (
+      <Text as={"span"} color={"gray.600"} fontWeight={"500"}>
+        {formatDate(item?.transactionDate)}
+      </Text>
+    ),
+    NAV: (
+      <Text as={"span"} color={"gray.600"} fontWeight={"500"}>
+        <Badge ms={1} colorScheme="green" me={1}>
+          $
+        </Badge>
+        {parseFloat(item?.transactionAmount || 0).toLocaleString(undefined, {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          })}
+      </Text>
+    ),
+    "Last Nav Update": (
+      <Text
+        justifyContent={"center"}
+        as={"span"}
+        color={"teal.900"}
+        fontWeight={"500"}
+        className="d-flex align-items-center web-text-small"
+      >
+        {item.previousNAVvalue && `${item.previousNAVvalue}`}
+      </Text>
+    ),
+    "Investment Closed": (
+      <Text
+        justifyContent={"center"}
+        as={"span"}
+        color={"teal.900"}
+        fontWeight={"500"}
+        className="d-flex align-items-center web-text-small"
+      >
+        {item?.initialNAVvalue && `${item?.initialNAVvalue}`}
+      </Text>
+    ),
+    Comments: (
+      <Text w={"100px"} as={"span"} color={"gray.800"} fontWeight={"500"}>
+        {item?.comments ? item?.comments : "---"}
+      </Text>
+    ),
+    "Updated By": (
+      <Text
+        w={"100px"}
+        as={"span"}
+        color={"gray.800"}
+        fontWeight={"500"}
+        display={"flex"}
+        alignItems={"center"}
+      >
+        {/* <Avatar
+          mr={2}
+          size="sm"
+          name={item.creator?.firstName}
+          src={item.creator?.profilePhoto}
+        /> */}
+        {item?.modifier?.firstName}
+      </Text>
+    ),
+    Status: (
+      <Box display={"flex"} justifyContent={"center"}>
+       <Box>
+          <Box display={"flex"} justifyContent={"center"} gap={2}>
+        <Tooltip
+          rounded={"sm"}
+          fontSize={"xs"}
+          label="Approve"
+          bg="#fff"
+          color={"green.500"}
+          placement="left-start"
+        >
+          <Button
+            // colorScheme="forestGreen"
+            // color="green.500"
+            rounded={"sm"}
+            size={"xs"}
+            textTransform={"inherit"}
+            fontWeight={500}
+            px={2}
+            py={1}
+            onClick={() => {
+              setActionId(item.id);
+              onConfirmOpen();
+            }}
+            colorScheme="green"
+            variant={"solid"}
+            cursor={"pointer"}
+          >
+            <CheckIcon fontSize={"12px"} />
+          </Button>
+        </Tooltip>
+        <Tooltip
+          rounded={"sm"}
+          fontSize={"xs"}
+          label="Reject"
+          bg="#fff"
+          color={"red.500"}
+          placement="left-start"
+        >
+          <Button
+            colorScheme="red"
+            // color="red.500"
+            rounded={"sm"}
+            size={"xs"}
+            textTransform={"inherit"}
+            fontWeight={500}
+            px={2}
+            onClick={() => {
+              setActionId(item.id);
+              onRejectOpen();
+            }}
+            py={1}
+            // variant={"solid"}
+          >
+            <CloseIcon fontSize={"10px"} />
+          </Button>
+        </Tooltip>
+        </Box>
+        </Box> 
+      </Box>
+    ),
+  }));
+
+  const handleDelete = () => {
+    const updatedSponsors = sponser.filter(
+      (sponsor) => sponsor.id !== actionId
+    );
+
+    setTimeout(() => {
+      setCaseDetails(updatedSponsors);
+      setDeleteAlert(false);
+      setIsLoading(false);
+    }, 100);
+    setIsLoading(true);
+  };
+
+  const handleAdd = async () => {
+    try {
+      const res = await updateIOCase(id);
+      if (res?.data) {
+        // toast({
+        //   render: () => (
+        //     <ToastBox status={"success"} message={res?.data?.message} />
+        //   ),
+        // });
+        setIsLoading(false);
+        onOpen();
+      } else if (res?.error) {
+        toast({
+          render: () => (
+            <ToastBox status={"error"} message={res?.error?.data?.message} />
+          ),
+        });
+        setIsLoading(false);
+      }
+    } catch (error) {}
+  };
+
+  return (
+    <Box {...OPACITY_ON_LOAD} pb={0}>
+      <Box bg="white.500">
+        <HStack
+          display={"flex"}
+          justifyContent={"space-between"}
+          pb={3}
+          spacing="24px"
+        >
+          <Input
+            type="search"
+            width={300}
+            placeholder="Search..."
+            size="sm"
+            rounded="sm"
+            focusBorderColor="green.500"
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+          />
+          {/* {IODetails?.isInvestedAmount
+            ? localStorage?.getItem("role") === "Maker" && (
+                <Button
+                  onClick={handleAdd}
+                  leftIcon={<AddIcon />}
+                  colorScheme="forestGreen"
+                  size={"sm"}
+                  rounded={"sm"}
+                  fontSize={"xs"}
+                >
+                  Add
+                </Button>
+              )
+            : null} */}
+        </HStack>
+      </Box>
+
+      <NormalTable
+        emptyMessage={`We don't have any Sponers`}
+        tableHeadRow={tableHeadRow}
+        data={extractedArray}
+        isLoading={isLoading}
+        viewActionId={actionId}
+        setViewActionId={setActionId}
+        setMouseEnteredId={setMouseEnteredId}
+        setMouseEntered={setMouseEntered}
+      />
+
+      <CustomAlertDialog
+        onClose={() => setDeleteAlert(false)}
+        isOpen={deleteAlert}
+        message={"Are you sure you want to delete sponers?"}
+        alertHandler={handleDelete}
+        isLoading={isLoading}
+      />
+      <AddNavDetails
+        isOpen={isOpen}
+        onClose={onClose}
+        firstField={firstField}
+      />
+      <RequestApproveModal
+        // data={data?.data?.rows}
+        isOpen={isConfirmOpen}
+        onClose={onConfirmClose}
+        id={actionId}
+        // firstField={firstField}
+      />
+      <RequestRejectModal
+        isOpen={isRejectOpen}
+        onClose={onRejectClose}
+        id={actionId}
+      />
+    </Box>
+  );
+};
+
+export default Pending;
--- a/src/Pages/IO_Management/CreateIO/IONAVDetails/Rejected.jsx
+++ b/src/Pages/IO_Management/CreateIO/IONAVDetails/Rejected.jsx
@@ -0,0 +1,257 @@
+import {
+  Avatar,
+  Badge,
+  Box,
+  Button,
+  HStack,
+  Input,
+  Table,
+  Tag,
+  Tbody,
+  Text,
+  Th,
+  Tooltip,
+  Tr,
+  useDisclosure,
+  useToast,
+} from "@chakra-ui/react";
+import React, { useContext, useEffect, useRef, useState } from "react";
+import { AddIcon, DeleteIcon, EditIcon, ViewIcon } from "@chakra-ui/icons";
+import { LuFileSpreadsheet } from "react-icons/lu";
+import { OPACITY_ON_LOAD } from "../../../../Layout/animations";
+import NormalTable from "../../../../Components/DataTable/NormalTable";
+import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
+import CustomAlertDialog from "../../../../Components/CustomAlertDialog";
+import ToastBox from "../../../../Components/ToastBox";
+import AddCashDetails from "../AddCashDetails";
+import { debounce } from "../../../Admin/Contact";
+import { useUpdateIOCaseMutation } from "../../../../Services/io.service";
+import { useParams } from "react-router-dom";
+import AddNavDetails from "./AddNavDetails";
+
+const formatDate = (date) => new Date(date).toLocaleDateString();
+
+const Rejected = () => {
+  const params = useParams();
+  const toast = useToast();
+  const id = params?.id;
+  const firstField = useRef();
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const { IODetails, iONAVDetail, setIONAVDetail } =
+    useContext(GlobalStateContext);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [isLoading, setIsLoading] = useState(true);
+  const [deleteAlert, setDeleteAlert] = useState(false);
+  const [actionId, setActionId] = useState(false);
+  const [mouseEntered, setMouseEntered] = useState(false);
+  const [mouseEnteredId, setMouseEnteredId] = useState("");
+  const [updateIOCase] = useUpdateIOCaseMutation();
+
+  useEffect(() => {
+    // Simulate loading
+    const timer = setTimeout(() => {
+      setIsLoading(false);
+    }, 1500);
+
+    // Cleanup the timer on component unmount
+    return () => clearTimeout(timer);
+  }, []);
+
+  const formatDate = (date) => {
+    return new Date(date).toLocaleDateString("en-GB", {
+      day: "2-digit",
+      month: "2-digit",
+      year: "numeric",
+    });
+  };
+
+  // Table filter
+  const filteredData = IODetails?.ioNAVStatusHistory?.Reject?.filter((item) => {
+    // Filter by name (case insensitive)
+    const name = item.transactionAmount;
+    const searchLower = searchTerm.toLowerCase();
+    const nameMatches = name.toLowerCase().includes(searchLower);
+    return nameMatches;
+  });
+
+  const tableHeadRow = [
+    "Sr No.",
+    "Valuation date",
+    "NAV",
+    "Last Nav Update",
+    "Investment Closed",
+    "Comments",
+    "Updated By",
+  ];
+
+  const extractedArray = filteredData?.map((item, index) => ({
+    id: item?.id,
+    "Sr No.": (
+      <Text as={"span"} color={"gray.800"} fontWeight={"500"}>
+        {index + 1}.
+      </Text>
+    ),
+    "Valuation date": (
+      <Text as={"span"} color={"gray.600"} fontWeight={"500"}>
+        {formatDate(item?.transactionDate)}
+      </Text>
+    ),
+    NAV: (
+      <Text as={"span"} color={"gray.600"} fontWeight={"500"}>
+        <Badge ms={1} colorScheme="green" me={1}>
+          $
+        </Badge>
+        {parseFloat(item?.transactionAmount || 0).toLocaleString(undefined, {
+          minimumFractionDigits: 2,
+          maximumFractionDigits: 2,
+        })}
+      </Text>
+    ),
+    "Last Nav Update": (
+      <Text
+        justifyContent={"center"}
+        as={"span"}
+        color={"teal.900"}
+        fontWeight={"500"}
+        className="d-flex align-items-center web-text-small"
+      >
+        {item.previousNAVvalue && `${item.previousNAVvalue}`}
+      </Text>
+    ),
+    "Investment Closed": (
+      <Text
+        justifyContent={"center"}
+        as={"span"}
+        color={"teal.900"}
+        fontWeight={"500"}
+        className="d-flex align-items-center web-text-small"
+      >
+        {item?.initialNAVvalue && `${item?.initialNAVvalue}`}
+      </Text>
+    ),
+    Comments: (
+      <Text w={"100px"} as={"span"} color={"gray.800"} fontWeight={"500"}>
+        {item?.comments ? item?.comments : "---"}
+      </Text>
+    ),
+    "Updated By": (
+      <Text
+        w={"100px"}
+        as={"span"}
+        color={"gray.800"}
+        fontWeight={"500"}
+        display={"flex"}
+        alignItems={"center"}
+      >
+        {/* <Avatar
+            mr={2}
+          size="sm"
+          name={item.creator?.firstName}
+          src={item.creator?.profilePhoto}
+        /> */}
+        {item?.modifier?.firstName}
+      </Text>
+    ),
+  }));
+
+  const handleDelete = () => {
+    const updatedSponsors = sponser.filter(
+      (sponsor) => sponsor.id !== actionId
+    );
+
+    setTimeout(() => {
+      setCaseDetails(updatedSponsors);
+      setDeleteAlert(false);
+      setIsLoading(false);
+    }, 100);
+    setIsLoading(true);
+  };
+
+  const handleAdd = async () => {
+    try {
+      const res = await updateIOCase(id);
+      if (res?.data) {
+        //  toast({
+        //    render: () => (
+        //      <ToastBox status={"success"} message={res?.data?.message} />
+        //    ),
+        //  });
+        setIsLoading(false);
+        onOpen();
+      } else if (res?.error) {
+        toast({
+          render: () => (
+            <ToastBox status={"error"} message={res?.error?.data?.message} />
+          ),
+        });
+        setIsLoading(false);
+      }
+    } catch (error) {}
+  };
+
+  return (
+    <Box {...OPACITY_ON_LOAD} pb={0}>
+      <Box bg="white.500">
+        <HStack
+          display={"flex"}
+          justifyContent={"space-between"}
+          pb={3}
+          spacing="24px"
+        >
+          <Input
+            type="search"
+            width={300}
+            placeholder="Search..."
+            size="sm"
+            rounded="sm"
+            focusBorderColor="green.500"
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+          />
+
+          {/* {IODetails?.isInvestedAmount
+            ? localStorage?.getItem("role") === "Maker" && (
+                <Button
+                  onClick={handleAdd}
+                  leftIcon={<AddIcon />}
+                  colorScheme="forestGreen"
+                  size={"sm"}
+                  rounded={"sm"}
+                  fontSize={"xs"}
+                >
+                  Add
+                </Button>
+              )
+            : null} */}
+        </HStack>
+      </Box>
+
+      <NormalTable
+        emptyMessage={`We don't have any Sponers`}
+        tableHeadRow={tableHeadRow}
+        data={extractedArray}
+        isLoading={isLoading}
+        viewActionId={actionId}
+        setViewActionId={setActionId}
+        setMouseEnteredId={setMouseEnteredId}
+        setMouseEntered={setMouseEntered}
+      />
+
+      <CustomAlertDialog
+        onClose={() => setDeleteAlert(false)}
+        isOpen={deleteAlert}
+        message={"Are you sure you want to delete sponers?"}
+        alertHandler={handleDelete}
+        isLoading={isLoading}
+      />
+
+      <AddNavDetails
+        isOpen={isOpen}
+        onClose={onClose}
+        firstField={firstField}
+      />
+    </Box>
+  );
+};
+
+export default Rejected;
--- a/src/Pages/IO_Management/CreateIO/IONAVDetails/RequestApproveModal.jsx
+++ b/src/Pages/IO_Management/CreateIO/IONAVDetails/RequestApproveModal.jsx
@@ -0,0 +1,176 @@
+import {
+  Box,
+  Button,
+  FormControl,
+  FormHelperText,
+  FormLabel,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+  Textarea,
+  useDisclosure,
+  useToast,
+} from "@chakra-ui/react";
+import React, { useEffect, useState } from "react";
+import * as yup from "yup";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { useForm } from "react-hook-form";
+import ToastBox from "../../../../Components/ToastBox";
+import { useApproveIOCaseMutation, useApproveIONavMutation } from "../../../../Services/io.service";
+
+export const conformModalSchema = yup.object().shape({
+  // comments: yup.string().required("Comment is required")
+  // .max(50, "Investment name cannot be more than 50 characters"),
+  comments: yup
+  .string()
+  .required("Comment is required")
+  .max(200, "Approve Comment cannot be more than 200 characters"),
+});
+
+const RequestApproveModal = ({ isOpen, onClose, firstField ,id}) => {
+  const [isBtnLoading , setIsBtnLoading] = useState(false)
+
+  const toast = useToast()
+
+  const {
+    register,
+    reset,
+    watch,
+    handleSubmit,
+    formState: { errors },
+  } = useForm({
+    resolver: yupResolver(conformModalSchema),
+  });
+
+  const [ approveIONav ] = useApproveIONavMutation()
+  
+
+  const onSubmit = async(data) => {
+    console.log(data, "tewxttttt");
+    setIsBtnLoading(true)
+    try {
+      const res = await approveIONav({data,id})
+      if (res?.error) {
+        toast({
+          render: () => (
+            <ToastBox status={"error"} message={res?.error?.data?.message} />
+          ),
+        });
+        setIsBtnLoading(false)
+      }else if(res?.data){
+        toast({
+          render: () => (
+            <ToastBox message={res?.data?.message} />
+          ),
+        });
+        onClose()
+        setIsBtnLoading(false)
+      }else{
+        toast({
+          render: () => (
+            <ToastBox status={'error'} message={"Something went wrong"} />
+          ),
+        });
+        setIsBtnLoading(false)
+      }
+    } catch (error) {
+      
+    }
+  };
+
+  const handleFileChange = (event) => {
+    const selectedFile = event.target.files[0];
+    setFile(selectedFile);
+  };
+
+
+  const { data, isLoading } = 
+  (id, {
+    skip: !id,
+  });
+
+  useEffect(() => {
+    if (data) {
+      reset({
+        investorAmount: data?.data?.investorAmount,
+      });
+    }
+  }, [data, reset]);
+
+  const heandleOnClose = () =>{
+    reset()
+    onClose() 
+  }
+
+  return (
+    <Modal isCentered isOpen={isOpen} onClose={heandleOnClose} initialFocusRef={firstField}>
+      <ModalOverlay />
+      <ModalContent pb={4}>
+        <ModalHeader fontSize={"md"}>Approve Comment</ModalHeader>
+        <ModalCloseButton />
+        {isLoading ? (
+          <FullscreenLoaders height={"50vh"} />
+        ) : (
+        <Box as="form" onSubmit={handleSubmit(onSubmit)}>
+          <ModalBody>
+            <FormControl mb={4} isRequired>
+              <FormLabel fontSize="sm">Comment</FormLabel>
+              <Textarea
+                rows={6}
+                focusBorderColor="green.400"
+                name="comments"
+                {...register("comments")}
+                fontSize="sm"
+                type="textarea"
+                size="md"
+                placeholder={"Enter your checker comment...."}
+                rounded={"md"}
+                resize={"none"}
+                maxLength={200}
+              />
+              {errors.comments && (
+                <Text fontSize="xs" color="red">
+                  {errors.comments.message}
+                </Text>
+              )}
+              <FormHelperText fontSize="xs" color="gray.500">
+              <Box as="span" me={1}>Maximum length should be 200 characters. You have entered</Box>
+                {watch("comments")?.length || 0} characters.
+              </FormHelperText>
+            </FormControl>
+          </ModalBody>
+          <ModalFooter>
+            <Button
+              colorScheme="gray"
+              mr={3}
+              onClick={onClose}
+              size={"sm"}
+              rounded={"sm"}
+            >
+              Cancel
+            </Button>
+            <Button
+              colorScheme="forestGreen"
+              variant="solid"
+              size={"sm"}
+              rounded={"sm"}
+              isLoading={isBtnLoading}
+              type="submit"
+            >
+              Send
+            </Button>
+          </ModalFooter>
+        </Box>
+        )}
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default RequestApproveModal;
--- a/src/Pages/IO_Management/CreateIO/IONAVDetails/RequestRejectModal.jsx
+++ b/src/Pages/IO_Management/CreateIO/IONAVDetails/RequestRejectModal.jsx
@@ -0,0 +1,172 @@
+import {
+  Box,
+  Button,
+  FormControl,
+  FormHelperText,
+  FormLabel,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+  Textarea,
+  useDisclosure,
+  useToast,
+} from "@chakra-ui/react";
+import React, { useEffect, useState } from "react";
+import * as yup from "yup";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { useForm } from "react-hook-form";
+import ToastBox from "../../../../Components/ToastBox";
+import { useRejectIOCaseMutation } from "../../../../Services/io.service";
+
+export const conformModalSchema = yup.object().shape({
+  comments: yup.string().required("Comment is required")
+  .max(200, "Approve Comment cannot be more than 200 characters"),
+});
+
+const RequestRejectModal = ({ isOpen, onClose, firstField ,id}) => {
+  const [isBtnLoading , setIsBtnLoading] = useState(false)
+
+  const toast = useToast()
+
+  const {
+    register,
+    reset,
+    watch,
+    handleSubmit,
+    formState: { errors },
+  } = useForm({
+    resolver: yupResolver(conformModalSchema),
+  });
+
+  const [ rejectIOCase ] = useRejectIOCaseMutation()
+  
+
+  const onSubmit = async(data) => {
+    console.log(data, "tewxttttt");
+    setIsBtnLoading(true)
+    try {
+      const res = await rejectIOCase({data,id})
+      if (res?.error) {
+        toast({
+          render: () => (
+            <ToastBox status={"error"} message={res?.error?.data?.message} />
+          ),
+        });
+        setIsBtnLoading(false)
+      }else if(res?.data){
+        toast({
+          render: () => (
+            <ToastBox message={res?.data?.message} />
+          ),
+        });
+        onClose()
+        setIsBtnLoading(false)
+      }else{
+        toast({
+          render: () => (
+            <ToastBox status={'error'} message={"Something went wrong"} />
+          ),
+        });
+        setIsBtnLoading(false)
+      }
+    } catch (error) {
+      
+    }
+  };
+
+  const handleFileChange = (event) => {
+    const selectedFile = event.target.files[0];
+    setFile(selectedFile);
+  };
+
+
+  const { data, isLoading } = 
+  (id, {
+    skip: !id,
+  });
+
+  useEffect(() => {
+    if (data) {
+      reset({
+        investorAmount: data?.data?.investorAmount,
+      });
+    }
+  }, [data, reset]);
+
+  const heandleOnClose = () =>{
+    reset()
+    onClose()
+  }
+
+  return (
+    <Modal isCentered isOpen={isOpen} onClose={heandleOnClose} initialFocusRef={firstField}>
+      <ModalOverlay />
+      <ModalContent pb={4}>
+        <ModalHeader fontSize={"md"}>Reject Comment</ModalHeader>
+        <ModalCloseButton />
+        {isLoading ? (
+          <FullscreenLoaders height={"50vh"} />
+        ) : (
+        <Box as="form" onSubmit={handleSubmit(onSubmit)}>
+          <ModalBody>
+            <FormControl mb={4} isRequired>
+              <FormLabel fontSize="sm">Comment</FormLabel>
+              <Textarea
+                rows={6}
+                focusBorderColor="green.400"
+                name="comments"
+                {...register("comments")}
+                fontSize="sm"
+                type="textarea"
+                size="md"
+                placeholder={"Enter your comments...."}
+                rounded={"md"}
+                resize={"none"}
+                maxLength={200}
+              />
+              {errors.comments && (
+                <Text fontSize="xs" color="red">
+                  {errors.comments.message}
+                </Text>
+              )}
+              <FormHelperText fontSize="xs" color="gray.500">
+                <Box as="span" me={1}>Maximum length should be 200 characters. You have entered </Box>
+                 {watch("comments")?.length || 0} characters.
+              </FormHelperText>
+            </FormControl>
+          </ModalBody>
+          <ModalFooter>
+            <Button
+              colorScheme="gray"
+              mr={3}
+              onClick={onClose}
+              size={"sm"}
+              rounded={"sm"}
+            >
+              Cancel
+            </Button>
+            <Button
+              colorScheme="forestGreen"
+              variant="solid"
+              size={"sm"}
+              rounded={"sm"}
+              isLoading={isBtnLoading}
+              type="submit"
+            >
+              Send
+            </Button>
+          </ModalFooter>
+        </Box>
+        )}
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default RequestRejectModal;
--- a/src/Pages/IO_Management/CreateIO/IONAVDetailsOld.jsx
+++ b/src/Pages/IO_Management/CreateIO/IONAVDetailsOld.jsx
@@ -0,0 +1,298 @@
+import React, { useContext, useEffect, useRef, useState } from "react";
+import GlobalStateContext from "../../../Contexts/GlobalStateContext";
+import {
+  Box,
+  HStack,
+  Input,
+  Text,
+  Table,
+  Tbody,
+  Th,
+  Tr,
+  Avatar,
+  useDisclosure,
+  Button,
+  Badge,
+} from "@chakra-ui/react";
+import { OPACITY_ON_LOAD } from "../../../Layout/animations";
+import Pagination from "../../../Components/Pagination";
+import NormalTable from "../../../Components/DataTable/NormalTable";
+import CustomAlertDialog from "../../../Components/CustomAlertDialog";
+import { formatDatee } from "../../../Components/FormField";
+import { AddIcon } from "@chakra-ui/icons";
+import AddIONav from "./AddIONav";
+import { formatDate } from "../../Master/Sponser/Sponsers";
+import { LuFileSpreadsheet } from "react-icons/lu";
+import { exportToExcel, exportToExcelNew } from "../../../Constants/Constants";
+
+const IONAVDetails = () => {
+  const { navDetails, setNavDetails, IODetails } =
+    useContext(GlobalStateContext);
+  const firstField = useRef();
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const [searchTerm, setSearchTerm] = useState("");
+  const [isLoading, setIsLoading] = useState(true);
+  const [deleteAlert, setDeleteAlert] = useState(false);
+  const [actionId, setActionId] = useState(false);
+  const [mouseEntered, setMouseEntered] = useState(false);
+  const [mouseEnteredId, setMouseEnteredId] = useState("");
+
+  console.log(IODetails?.ioNAVHistory);
+
+  useEffect(() => {
+    // Simulate loading
+    const timer = setTimeout(() => {
+      setIsLoading(false);
+    }, 1500);
+
+    // Cleanup the timer on component unmount
+    return () => clearTimeout(timer);
+  }, []);
+
+  // Table setup
+  const tableHeadRow = [
+    // "Sr.No",
+    "Valuation Date",
+    "NAV",
+    "Last NAV update",
+    "Investment Closed",
+    "Comments",
+    "Update by ",
+    // "Update On",
+  ];
+
+  // Table filter
+  const filteredData = IODetails?.ioNAVHistory
+    ?.filter((item) => {
+      const name = item.transactionType;
+      const searchLower = searchTerm.toLowerCase();
+      const nameMatches = name.toLowerCase().includes(searchLower);
+      return nameMatches;
+    })
+    .reverse()
+    // .sort((b, a) => new Date(a.transactionDate) - new Date(b.transactionDate));
+
+  const extractedArray = filteredData?.map((item, index) => ({
+    id: item?.id,
+    "Sr.No": index + 1,
+    "Valuation Date": (
+      <Text
+        justifyContent={"center"}
+        as={"span"}
+        color={"teal.900"}
+        fontWeight={"500"}
+        className="d-flex align-items-center web-text-small"
+      >
+        {/* {/ {formatDatee(item.transactionDate)} /} */}
+        {formatDate(item?.transactionDate)}
+      </Text>
+    ),
+    NAV: (
+      <Text
+        justifyContent={"center"}
+        as={"span"}
+        color={"teal.900"}
+        fontWeight={"500"}
+        
+        className="d-flex align-items-center web-text-small"
+      >
+        {/* {/ {`${item.transactionAmount}`} /} */}
+        <Badge ms={1} colorScheme="green" me={1}>$</Badge>
+        {`${parseFloat(item.transactionAmount || 0).toLocaleString()}`}
+      </Text>
+    ),
+    "Last NAV update": (
+      <Text
+        justifyContent={"center"}
+        as={"span"}
+        color={"teal.900"}
+        fontWeight={"500"}
+        className="d-flex align-items-center web-text-small"
+      >
+        {item.previousNAVvalue && `${item.previousNAVvalue}`}
+      </Text>
+    ),
+    "Investment Closed": (
+      <Text
+        justifyContent={"center"}
+        as={"span"}
+        color={"teal.900"}
+        fontWeight={"500"}
+        className="d-flex align-items-center web-text-small"
+      >
+        {item.initialNAVvalue && `${item.initialNAVvalue}`}
+      </Text>
+    ),
+    Comments: (
+      // <Text
+      //   justifyContent={"center"}
+      //   as={"span"}
+      //   color={"teal.900"}
+      //   fontWeight={"500"}
+      //   className="d-flex align-items-center web-text-small"
+      // >
+      //   {item.comments}
+      // </Text>
+      <Text
+        as={"span"}
+        color={"teal.900"}
+        fontWeight={"500"}
+        maxWidth="200px" // Adjust width as needed
+        display="block" // Ensure block display for proper truncation
+        overflow="hidden"
+        isTruncated
+        textOverflow="ellipsis"
+      >
+        {item.comments}
+      </Text>
+    ),
+    "Update by ": (
+      <Text
+        justifyContent={"center"}
+        as={"span"}
+        color={"teal.900"}
+        fontWeight={"500"}
+        gap={2}
+        className="d-flex align-items-center web-text-small"
+      >
+        <Avatar
+          size="sm"
+          name={item.creator?.firstName}
+          src={item.creator?.profilePhoto}
+        />
+        {item.creator?.firstName}
+      </Text>
+    ),
+    "Update On": (
+      <Text
+        justifyContent={"center"} 
+        as={"span"}
+        color={"teal.900"}
+        fontWeight={"500"}
+        className="d-flex align-items-center web-text-small"
+      >
+        {formatDate(item.updatedAt)}
+      </Text>
+    ),
+  }));
+
+  const customHeaders = [
+    { label: "ID", key: "id" },
+    { label: "Valuation Date", key: "transactionDate" },
+    { label: "NAV", key: "transactionAmount" },
+    { label: "Last NAV update", key: "previousNAVvalue" },
+
+    { label: "Investment Closed", key: "initialNAVvalue" },
+    { label: "Comments", key: "comments" },
+
+    // { label: "Update by", key: "creator" },
+    { label: "Transaction Type", key: "transactionType" },
+    // { label: "Comments", key: "comments" },
+    // Add more headers as needed
+  ];
+
+  console.log(IODetails?.ioNAVHistory);
+  const ioNavExport = IODetails?.ioNAVHistory?.map((item, index) => ({
+    "ID": item?.id, // Keep as integer if it's already a number
+    "Valuation Date": formatDate(item?.transactionDate), // Assuming this is a date, no conversion needed
+    "NAV": parseFloat(item?.transactionAmount) || 0, // Convert to float
+    "Last NAV update": parseFloat(item?.previousNAVvalue) || 0, // Convert to float
+    "Investment Closed": parseFloat(item?.initialNAVvalue) || 0, // Convert to float
+    "Comments": item?.comments, // Keep as string
+    "Transaction Type": item?.transactionType, // Keep as string
+    "Update by ": item?.creator?.firstName, // Keep as string
+    // "Update On": formatDate(item?.updatedAt) // Assuming this is a date, no conversion needed
+  }));
+
+  const handleDelete = () => {
+    const updatedNav = navDetails.filter((sponsor) => sponsor.id !== actionId);
+
+    setTimeout(() => {
+      setNavDetails(updatedNav);
+      setDeleteAlert(false);
+      setIsLoading(false);
+    }, 100);
+    setIsLoading(true);
+  };
+
+  const handleExport = () => {};
+
+  return (
+    <Box {...OPACITY_ON_LOAD} pb={0}>
+      <Box bg="white.500">
+        <HStack
+          display={"flex"}
+          justifyContent={"space-between"}
+          pb={3}
+          spacing="24px"
+        >
+          <Input
+            type="search"
+            width={300}
+            placeholder="Search..."
+            size="sm"
+            rounded="sm"
+            focusBorderColor="green.500"
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+          />
+
+          <HStack display={"flex"} alignItems={"center"}>
+            <Button
+              onClick={() =>
+                exportToExcelNew(ioNavExport, "Io Nav details")
+              }
+              leftIcon={<LuFileSpreadsheet />}
+              colorScheme="forestGreen"
+              size={"sm"}
+              variant={"outline"}
+              rounded={"sm"}
+              fontSize={"xs"}
+              isDisabled={ioNavExport?.length === 0}
+            >
+              Export xls
+            </Button>
+
+            {IODetails?.isInvestedAmount ? (
+              <Button
+                onClick={onOpen}
+                leftIcon={<AddIcon />}
+                colorScheme="forestGreen"
+                size={"sm"}
+                rounded={"sm"}
+                fontSize={"xs"}
+              >
+                Add IO Nav
+              </Button>
+            ) : null}
+          </HStack>
+        </HStack>
+      </Box>
+
+      <NormalTable
+        centered={true}
+        emptyMessage={`We don't have any Sponers`}
+        tableHeadRow={tableHeadRow}
+        data={extractedArray}
+        isLoading={isLoading}
+        viewActionId={actionId}
+        setViewActionId={setActionId}
+        caption={"Tanami v1.0"}
+        setMouseEnteredId={setMouseEnteredId}
+        setMouseEntered={setMouseEntered}
+      />
+
+      <CustomAlertDialog
+        onClose={() => setDeleteAlert(false)}
+        isOpen={deleteAlert}
+        message={"Are you sure you want to delete sponers?"}
+        alertHandler={handleDelete}
+        isLoading={isLoading}
+      />
+
+      <AddIONav isOpen={isOpen} onClose={onClose} firstField={firstField} />
+    </Box>
+  );
+};
+
+export default IONAVDetails;
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/ApproveDistrubationModal.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ApproveDistrubationModal.jsx
@@ -0,0 +1,179 @@
+import {
+    Box,
+    Button,
+    FormControl,
+    FormHelperText,
+    FormLabel,
+    Input,
+    Modal,
+    ModalBody,
+    ModalCloseButton,
+    ModalContent,
+    ModalFooter,
+    ModalHeader,
+    ModalOverlay,
+    Text,
+    Textarea,
+    useDisclosure,
+    useToast,
+  } from "@chakra-ui/react";
+  import React, { useEffect, useState } from "react";
+  import * as yup from "yup";
+  import { yupResolver } from "@hookform/resolvers/yup";
+  import { useForm } from "react-hook-form";
+  import ToastBox from "../../../../Components/ToastBox";
+  import { useApproveDistributedMutation } from "../../../../Services/io.service";
+  
+  export const conformModalSchema = yup.object().shape({
+    // comments: yup.string().required("Comment is required")
+    // .max(50, "Investment name cannot be more than 50 characters"),
+    comments: yup
+    .string()
+    .required("Comment is required")
+    .max(200, "Approve Comment cannot be more than 200 characters"),
+  });
+  
+  const ApproveDistrubationModal = ({ isOpen, onClose, firstField ,id, onBigModalClose}) => {
+    const [isBtnLoading , setIsBtnLoading] = useState(false)
+  
+    const toast = useToast()
+
+    
+  
+    const {
+      register,
+      reset,
+      watch,
+      handleSubmit,
+      formState: { errors },
+    } = useForm({
+      resolver: yupResolver(conformModalSchema),
+    });
+  
+    const [ approveDistributed ] = useApproveDistributedMutation()
+    
+  
+    const onSubmit = async(data) => {
+      setIsBtnLoading(true)
+      try {
+        const res = await approveDistributed({data,id})
+        if (res?.error) {
+          toast({
+            render: () => (
+              <ToastBox status={"error"} message={res?.error?.data?.message} />
+            ),
+          });
+          setIsBtnLoading(false)
+        }else if(res?.data){
+          toast({
+            render: () => (
+              <ToastBox message={res?.data?.message} />
+            ),
+          });
+          onClose()
+          onBigModalClose()
+          setIsBtnLoading(false)
+        }else{
+          toast({
+            render: () => (
+              <ToastBox status={'error'} message={"Something went wrong"} />
+            ),
+          });
+          setIsBtnLoading(false)
+        }
+      } catch (error) {
+        
+      }
+    };
+  
+    const handleFileChange = (event) => {
+      const selectedFile = event.target.files[0];
+      setFile(selectedFile);
+    };
+  
+  
+    const { data, isLoading } = 
+    (id, {
+      skip: !id,
+    });
+  
+    useEffect(() => {
+      if (data) {
+        reset({
+          investorAmount: data?.data?.investorAmount,
+        });
+      }
+    }, [data, reset]);
+  
+    const heandleOnClose = () =>{
+      reset()
+      onClose() 
+    }
+  
+    return (
+      <Modal isCentered isOpen={isOpen} onClose={heandleOnClose} initialFocusRef={firstField}>
+        <ModalOverlay />
+        <ModalContent pb={4}>
+          <ModalHeader fontSize={"md"}>Approve Comment</ModalHeader>
+          <ModalCloseButton />
+          {isLoading ? (
+            <FullscreenLoaders height={"50vh"} />
+          ) : (
+          <Box as="form" onSubmit={handleSubmit(onSubmit)}>
+            <ModalBody>
+              <FormControl mb={4} isRequired>
+                <FormLabel fontSize="sm">Comment</FormLabel>
+                <Textarea
+                  rows={6}
+                  focusBorderColor="green.400"
+                  name="comments"
+                  {...register("comments")}
+                  fontSize="sm"
+                  type="textarea"
+                  size="md"
+                  placeholder={"Enter your checker comment...."}
+                  rounded={"md"}
+                  resize={"none"}
+                  maxLength={200}
+                />
+                {errors.comments && (
+                  <Text fontSize="xs" color="red">
+                    {errors.comments.message}
+                  </Text>
+                )}
+                <FormHelperText fontSize="xs" color="gray.500">
+                <Box as="span" me={1}> Maximum length should be 200 characters. You have entered</Box>
+                  {watch("comments")?.length || 0} characters.
+                </FormHelperText>
+              </FormControl>
+            </ModalBody>
+            <ModalFooter>
+              <Button
+                colorScheme="gray"
+                mr={3}
+                onClick={onClose}
+                size={"xs"}
+                rounded={"sm"}
+              >
+                Cancel
+              </Button>
+              <Button
+                colorScheme="forestGreen"
+                variant="solid"
+                size={"xs"}
+                rounded={"sm"}
+                isLoading={isBtnLoading}
+                type="submit"
+              >
+                Send
+              </Button>
+            </ModalFooter>
+          </Box>
+          )}
+        </ModalContent>
+      </Modal>
+    );
+  };
+  
+  export default ApproveDistrubationModal;
+  
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/ApproveInvestedModal.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ApproveInvestedModal.jsx
@@ -0,0 +1,177 @@
+import {
+    Box,
+    Button,
+    FormControl,
+    FormHelperText,
+    FormLabel,
+    Input,
+    Modal,
+    ModalBody,
+    ModalCloseButton,
+    ModalContent,
+    ModalFooter,
+    ModalHeader,
+    ModalOverlay,
+    Text,
+    Textarea,
+    useDisclosure,
+    useToast,
+  } from "@chakra-ui/react";
+  import React, { useEffect, useState } from "react";
+  import * as yup from "yup";
+  import { yupResolver } from "@hookform/resolvers/yup";
+  import { useForm } from "react-hook-form";
+  import ToastBox from "../../../../Components/ToastBox";
+  import { useApproveInvestedMutation } from "../../../../Services/io.service";
+  
+  export const conformModalSchema = yup.object().shape({
+    // comments: yup.string().required("Comment is required")
+    // .max(50, "Investment name cannot be more than 50 characters"),
+    comments: yup
+    .string()
+    .required("Comment is required")
+    .max(200, "Approve Comment cannot be more than 200 characters"),
+  });
+  
+  const ApproveInvestedModal = ({ isOpen, onClose, firstField ,id,onBigModalClose}) => {
+    const [isBtnLoading , setIsBtnLoading] = useState(false)
+  
+    const toast = useToast()
+  
+    const {
+      register,
+      reset,
+      watch,
+      handleSubmit,
+      formState: { errors },
+    } = useForm({
+      resolver: yupResolver(conformModalSchema),
+    });
+  
+    const [ approveInvested ] = useApproveInvestedMutation()
+    
+  
+    const onSubmit = async(data) => {
+      setIsBtnLoading(true)
+      try {
+        const res = await approveInvested({data,id})
+        if (res?.error) {
+          toast({
+            render: () => (
+              <ToastBox status={"error"} message={res?.error?.data?.message} />
+            ),
+          });
+          setIsBtnLoading(false)
+        }else if(res?.data){
+          toast({
+            render: () => (
+              <ToastBox message={res?.data?.message} />
+            ),
+          });
+          onClose()
+          onBigModalClose()
+          setIsBtnLoading(false)
+        }else{
+          toast({
+            render: () => (
+              <ToastBox status={'error'} message={"Something went wrong"} />
+            ),
+          });
+          setIsBtnLoading(false)
+        }
+      } catch (error) {
+        
+      }
+    };
+  
+    const handleFileChange = (event) => {
+      const selectedFile = event.target.files[0];
+      setFile(selectedFile);
+    };
+  
+  
+    const { data, isLoading } = 
+    (id, {
+      skip: !id,
+    });
+  
+    useEffect(() => {
+      if (data) {
+        reset({
+          investorAmount: data?.data?.investorAmount,
+        });
+      }
+    }, [data, reset]);
+  
+    const heandleOnClose = () =>{
+      reset()
+      onClose() 
+    }
+  
+    return (
+      <Modal isCentered isOpen={isOpen} onClose={heandleOnClose} initialFocusRef={firstField}>
+        <ModalOverlay />
+        <ModalContent pb={4}>
+          <ModalHeader fontSize={"md"}>Approve Comment</ModalHeader>
+          <ModalCloseButton />
+          {isLoading ? (
+            <FullscreenLoaders height={"50vh"} />
+          ) : (
+          <Box as="form" onSubmit={handleSubmit(onSubmit)}>
+            <ModalBody>
+              <FormControl mb={4} isRequired>
+                <FormLabel fontSize="sm">Comment</FormLabel>
+                <Textarea
+                  rows={6}
+                  focusBorderColor="green.400"
+                  name="comments"
+                  {...register("comments")}
+                  fontSize="sm"
+                  type="textarea"
+                  size="md"
+                  placeholder={"Enter your checker comment...."}
+                  rounded={"md"}
+                  resize={"none"}
+                  maxLength={200}
+                />
+                {errors.comments && (
+                  <Text fontSize="xs" color="red">
+                    {errors.comments.message}
+                  </Text>
+                )}
+                <FormHelperText fontSize="xs" color="gray.500">
+                <Box as="span" me={1}>Maximum length should be 200 characters. You have entered</Box>
+                  {watch("comments")?.length || 0} characters.
+                </FormHelperText>
+              </FormControl>
+            </ModalBody>
+            <ModalFooter>
+              <Button
+                colorScheme="gray"
+                mr={3}
+                onClick={onClose}
+                size={"xs"}
+                rounded={"sm"}
+              >
+                Cancel
+              </Button>
+              <Button
+                colorScheme="forestGreen"
+                variant="solid"
+                size={"xs"}
+                rounded={"sm"}
+                isLoading={isBtnLoading}
+                type="submit"
+              >
+                Send
+              </Button>
+            </ModalFooter>
+          </Box>
+          )}
+        </ModalContent>
+      </Modal>
+    );
+  };
+  
+  export default ApproveInvestedModal;
+  
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/Approved.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/Approved.jsx
@@ -0,0 +1,249 @@
+import {
+    Avatar,
+    Badge,
+    Box,
+    Button,
+    HStack,
+    Input,
+    Table,
+    Tag,
+    Tbody,
+    Text,
+    Th,
+    Tooltip,
+    Tr,
+    useDisclosure,
+    useToast,
+  } from "@chakra-ui/react";
+  import React, { useContext, useEffect, useRef, useState } from "react";
+  import { AddIcon, DeleteIcon, EditIcon, ViewIcon } from "@chakra-ui/icons";
+  import { LuFileSpreadsheet } from "react-icons/lu";
+  import { OPACITY_ON_LOAD } from "../../../../Layout/animations";
+  import NormalTable from "../../../../Components/DataTable/NormalTable";
+  import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
+  import CustomAlertDialog from "../../../../Components/CustomAlertDialog";
+  import ToastBox from "../../../../Components/ToastBox";
+  import AddCashDetails from "../AddCashDetails";
+  import { debounce } from "../../../Admin/Contact";
+  
+  const formatDate = (date) => new Date(date).toLocaleDateString();
+  
+  const Approved = () => {
+    const toast = useToast();
+    const firstField = useRef();
+    const { isOpen, onOpen, onClose } = useDisclosure();
+    const { IODetails, iOTransaction, setIOTransaction } =
+      useContext(GlobalStateContext);
+    const [searchTerm, setSearchTerm] = useState("");
+    const [isLoading, setIsLoading] = useState(true);
+    const [deleteAlert, setDeleteAlert] = useState(false);
+    const [actionId, setActionId] = useState(false);
+    const [mouseEntered, setMouseEntered] = useState(false);
+    const [mouseEnteredId, setMouseEnteredId] = useState("");
+  
+    useEffect(() => {
+      // Simulate loading
+      const timer = setTimeout(() => {
+        setIsLoading(false);
+      }, 1500);
+  
+      // Cleanup the timer on component unmount
+      return () => clearTimeout(timer);
+    }, []);
+  
+    const formatDate = (date) => {
+      return new Date(date).toLocaleDateString("en-GB", {
+        day: "2-digit",
+        month: "2-digit",
+        year: "numeric",
+      });
+    };
+  
+  
+    // Table filter
+    const filteredData =  IODetails?.ioTransactionRecords?.Approved?.filter((item) => {
+      // Filter by name (case insensitive)
+      const name = item?.transactionAmount;
+      const searchLower = searchTerm?.toLowerCase();
+      const nameMatches = name?.toLowerCase().includes(searchLower);
+      return nameMatches;
+    });
+  
+    const tableHeadRow = [
+      "Sr No.",
+      "Transaction Date",
+      "Transaction Name",
+      "Amount",
+      "Created By",
+      "Created On",
+      "Approved By",
+      "Approved On",
+    ];
+  
+    const extractedArray = filteredData?.map((item, index) => ({
+      id: item?.id,
+      "Sr No.": (
+        <Text
+          as={"span"}
+          color={"gray.800"}
+          fontWeight={"500"}
+        >
+          {index + 1}.
+        </Text>
+      ),
+      "Transaction Date": (
+        <Text
+          as={"span"}
+          color={"gray.600"}
+          fontWeight={"500"}
+        >
+          {formatDate(item?.transactionDate)}
+        </Text>
+      ),
+      "Transaction Name": (
+        <Text
+          as={"span"}
+          color={"gray.600"}
+          fontWeight={"500"}
+        >
+          {item?.transactionType}
+        </Text>
+      ),
+      "Amount": (
+        <Text
+          as={"span"}
+          color={"gray.600"}
+          fontWeight={"500"}
+        >
+          <Badge ms={1} colorScheme="green" me={1}>
+            $
+          </Badge>
+          {/* {item?.transactionAmount} */}
+          {parseFloat(item?.transactionAmount || 0).toLocaleString(undefined, {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          })}
+        </Text>
+      ),
+      "Created By": (
+        <Text
+          w={"100px"}
+          as={"span"}
+          color={"gray.800"}
+          fontWeight={"500"}
+          textTransform={'capitalize'}
+        >
+          {item?.creator?.firstName}
+        </Text>
+      ),
+      "Created On": (
+        <Text
+          w={"100px"}
+          as={"span"}
+          color={"gray.800"}
+          fontWeight={"500"}
+        >
+          {formatDate(item?.createdAt)}
+        </Text>
+      ),
+      "Approved By": (
+        <>
+        <Text
+          w={"100px"}
+          as={"span"}
+          color={"gray.800"}
+          fontWeight={"500"}
+          textTransform={'capitalize'}
+        >
+           {item?.modifier?.firstName}
+        </Text>
+        {/* <Text
+          w={"100px"}
+          as={"span"}
+          color={"gray.800"}
+          fontWeight={"500"}
+          display={"flex"}
+        alignItems={"center"}
+        >
+           <Avatar
+            mr={2}
+          size="sm"
+          name={item.creator?.firstName}
+          src={item.creator?.profilePhoto}
+        />
+          {item?.creator?.firstName}
+        </Text> */}
+        </>
+      ),
+      "Approved On": (
+          <Text
+          w={"100px"}
+          as={"span"}
+          color={"gray.800"}
+          fontWeight={"500"}
+          >
+            {item?.modifier ? formatDate(item?.updatedAt) : "---" }
+          {}
+        </Text>
+      ),
+    }));
+  
+    const handleDelete = () => {
+      const updatedSponsors = sponser.filter(
+        (sponsor) => sponsor.id !== actionId
+      );
+  
+      setTimeout(() => {
+        setCaseDetails(updatedSponsors);
+        setDeleteAlert(false);
+        setIsLoading(false);
+      }, 100);
+      setIsLoading(true);
+    };
+  
+    return (
+      <Box {...OPACITY_ON_LOAD} pb={0}>
+        <Box bg="white.500">
+          <HStack
+            display={"flex"}
+            justifyContent={"space-between"}
+            pb={3}
+            spacing="24px"
+          >
+            <Input
+              type="search"
+              width={300}
+              placeholder="Search..."
+              size="sm"
+              rounded="sm"
+              focusBorderColor="green.500"
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+            />
+          </HStack>
+        </Box>
+  
+        <NormalTable
+          emptyMessage={`We don't have any Sponers`}
+          tableHeadRow={tableHeadRow}
+          data={extractedArray}
+          isLoading={isLoading}
+          viewActionId={actionId}
+          setViewActionId={setActionId}
+          setMouseEnteredId={setMouseEnteredId}
+          setMouseEntered={setMouseEntered}
+        />
+  
+        <CustomAlertDialog
+          onClose={() => setDeleteAlert(false)}
+          isOpen={deleteAlert}
+          message={"Are you sure you want to delete sponers?"}
+          alertHandler={handleDelete}
+          isLoading={isLoading}
+        />
+      </Box>
+    );
+  };
+  
+  export default Approved;
+  
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/ApprovedCancelTransaction.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ApprovedCancelTransaction.jsx
@@ -0,0 +1,161 @@
+import {
+    Box,
+    Button,
+    FormControl,
+    FormHelperText,
+    FormLabel,
+    Modal,
+    ModalBody,
+    ModalCloseButton,
+    ModalContent,
+    ModalFooter,
+    ModalHeader,
+    ModalOverlay,
+    Text,
+    Textarea,
+    useToast,
+  } from "@chakra-ui/react";
+  import React, { useEffect, useState } from "react";
+  import { yupResolver } from "@hookform/resolvers/yup";
+  import { useForm } from "react-hook-form";
+  import ToastBox from "../../../../Components/ToastBox";
+  import {useApproveCancleTransactionMutation, useApproveExitTransactionMutation} from "../../../../Services/io.service";
+
+  
+  const ApprovedCancelTransaction = ({ isOpen, onClose, firstField ,id,onBigModalClose}) => {
+    const [isBtnLoading , setIsBtnLoading] = useState(false)
+  
+    const toast = useToast()
+  
+    const {
+      register,
+      reset,
+      watch,
+      handleSubmit,
+      formState: { errors },
+    } = useForm({
+      resolver: yupResolver(),
+    });
+  
+    const [ approveCancleTransaction ] = useApproveCancleTransactionMutation()
+    
+  
+    const onSubmit = async(data) => {
+      setIsBtnLoading(true)
+      try {
+        const res = await approveCancleTransaction({data,id})
+        if (res?.error) {
+          toast({
+            render: () => (
+              <ToastBox status={"error"} message={res?.error?.data?.message} />
+            ),
+          });
+          setIsBtnLoading(false)
+        }else if(res?.data){
+          toast({
+            render: () => (
+              <ToastBox message={res?.data?.message} />
+            ),
+          });
+          onClose()
+          onBigModalClose()
+          setIsBtnLoading(false)
+        }else{
+          toast({
+            render: () => (
+              <ToastBox status={'error'} message={"Something went wrong"} />
+            ),
+          });
+          setIsBtnLoading(false)
+        }
+      } catch (error) {
+        
+      }
+    };
+  
+  
+    const { data, isLoading } = 
+    (id, {
+      skip: !id,
+    });
+  
+    useEffect(() => {
+      if (data) {
+        reset({
+          investorAmount: data?.data?.investorAmount,
+        });
+      }
+    }, [data, reset]);
+  
+    const heandleOnClose = () =>{
+      reset()
+      onClose() 
+    }
+  
+    return (
+      <Modal isCentered isOpen={isOpen} onClose={heandleOnClose} initialFocusRef={firstField}>
+        <ModalOverlay />
+        <ModalContent pb={4}>
+          <ModalHeader fontSize={"md"}>Approve Comment</ModalHeader>
+          <ModalCloseButton />
+          {isLoading ? (
+            <FullscreenLoaders height={"50vh"} />
+          ) : (
+          <Box as="form" onSubmit={handleSubmit(onSubmit)}>
+            <ModalBody>
+              <FormControl mb={4} isRequired>
+                <FormLabel fontSize="sm">Comment</FormLabel>
+                <Textarea
+                  rows={6}
+                  focusBorderColor="green.400"
+                  name="comments"
+                  {...register("comments")}
+                  fontSize="sm"
+                  type="textarea"
+                  size="md"
+                  placeholder={"Enter your checker comment...."}
+                  rounded={"md"}
+                  resize={"none"}
+                  maxLength={200}
+                />
+                {errors.comments && (
+                  <Text fontSize="xs" color="red">
+                    {errors.comments.message}
+                  </Text>
+                )}
+                <FormHelperText fontSize="xs" color="gray.500">
+                  <Box as="span" me={1}>Maximum length should be 200 characters. You have entered</Box>
+                  {watch("comments")?.length || 0} characters.
+                </FormHelperText>
+              </FormControl>
+            </ModalBody>
+            <ModalFooter>
+              <Button
+                colorScheme="gray"
+                mr={3}
+                onClick={onClose}
+                size={"xs"}
+                rounded={"sm"}
+              >
+                Cancel
+              </Button>
+              <Button
+                colorScheme="forestGreen"
+                variant="solid"
+                size={"xs"}
+                rounded={"sm"}
+                isLoading={isBtnLoading}
+                type="submit"
+              >
+                Send
+              </Button>
+            </ModalFooter>
+          </Box>
+          )}
+        </ModalContent>
+      </Modal>
+    );
+  };
+  
+  export default ApprovedCancelTransaction;
+  
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/ApprovedExit.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ApprovedExit.jsx
@@ -0,0 +1,175 @@
+import {
+    Box,
+    Button,
+    FormControl,
+    FormHelperText,
+    FormLabel,
+    Input,
+    Modal,
+    ModalBody,
+    ModalCloseButton,
+    ModalContent,
+    ModalFooter,
+    ModalHeader,
+    ModalOverlay,
+    Text,
+    Textarea,
+    useToast,
+  } from "@chakra-ui/react";
+  import React, { useEffect, useState } from "react";
+  import * as yup from "yup";
+  import { yupResolver } from "@hookform/resolvers/yup";
+  import { useForm } from "react-hook-form";
+  import ToastBox from "../../../../Components/ToastBox";
+  import {  useApproveExitTransactionMutation } from "../../../../Services/io.service";
+  
+  export const conformModalSchema = yup.object().shape({
+    comments: yup
+    .string()
+    .required("Comment is required")
+    .max(200, "Approve Comment cannot be more than 200 characters"),
+  });
+  
+  const ApprovedExit = ({ isOpen, onClose, firstField ,id,onBigModalClose}) => {
+    const [isBtnLoading , setIsBtnLoading] = useState(false)
+  
+    const toast = useToast()
+  
+    const {
+      register,
+      reset,
+      watch,
+      handleSubmit,
+      formState: { errors },
+    } = useForm({
+      resolver: yupResolver(conformModalSchema),
+    });
+  
+    const [ approveExitTransaction ] = useApproveExitTransactionMutation()
+    
+  
+    const onSubmit = async(data) => {
+      setIsBtnLoading(true)
+      try {
+        const res = await approveExitTransaction({data,id})
+        if (res?.error) {
+          toast({
+            render: () => (
+              <ToastBox status={"error"} message={res?.error?.data?.message} />
+            ),
+          });
+          setIsBtnLoading(false)
+        }else if(res?.data){
+          toast({
+            render: () => (
+              <ToastBox message={res?.data?.message} />
+            ),
+          });
+          onClose()
+          onBigModalClose()
+          setIsBtnLoading(false)
+        }else{
+          toast({
+            render: () => (
+              <ToastBox status={'error'} message={"Something went wrong"} />
+            ),
+          });
+          setIsBtnLoading(false)
+        }
+      } catch (error) {
+        
+      }
+    };
+  
+    const handleFileChange = (event) => {
+      const selectedFile = event.target.files[0];
+      setFile(selectedFile);
+    };
+  
+  
+    const { data, isLoading } = 
+    (id, {
+      skip: !id,
+    });
+  
+    useEffect(() => {
+      if (data) {
+        reset({
+          investorAmount: data?.data?.investorAmount,
+        });
+      }
+    }, [data, reset]);
+  
+    const heandleOnClose = () =>{
+      reset()
+      onClose() 
+    }
+    
+  
+    return (
+      <Modal isCentered isOpen={isOpen} onClose={heandleOnClose} initialFocusRef={firstField}>
+        <ModalOverlay />
+        <ModalContent pb={4}>
+          <ModalHeader fontSize={"md"}>Approve Comment</ModalHeader>
+          <ModalCloseButton />
+          {isLoading ? (
+            <FullscreenLoaders height={"50vh"} />
+          ) : (
+          <Box as="form" onSubmit={handleSubmit(onSubmit)}>
+            <ModalBody>
+              <FormControl mb={4} isRequired>
+                <FormLabel fontSize="sm">Comment</FormLabel>
+                <Textarea
+                  rows={6}
+                  focusBorderColor="green.400"
+                  name="comments"
+                  {...register("comments")}
+                  fontSize="sm"
+                  type="textarea"
+                  size="md"
+                  placeholder={"Enter your checker comment...."}
+                  rounded={"md"}
+                  resize={"none"}
+                  maxLength={200}
+                />
+                {errors.comments && (
+                  <Text fontSize="xs" color="red">
+                    {errors.comments.message}
+                  </Text>
+                )}
+                <FormHelperText fontSize="xs" color="gray.500">
+                 <Box as="span" me={1}>Maximum length should be 200 characters. You have entered</Box>
+                  {watch("comments")?.length || 0} characters.
+                </FormHelperText>
+              </FormControl>
+            </ModalBody>
+            <ModalFooter>
+              <Button
+                colorScheme="gray"
+                mr={3}
+                onClick={onClose}
+                size={"xs"}
+                rounded={"sm"}
+              >
+                Cancel
+              </Button>
+              <Button
+                colorScheme="forestGreen"
+                variant="solid"
+                size={"xs"}
+                rounded={"sm"}
+                isLoading={isBtnLoading}
+                type="submit"
+              >
+                Send
+              </Button>
+            </ModalFooter>
+          </Box>
+          )}
+        </ModalContent>
+      </Modal>
+    );
+  };
+  
+  export default ApprovedExit;
+  
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/IOTransaction.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/IOTransaction.jsx
@@ -0,0 +1,68 @@
+import {
+  Badge,
+  Tab,
+  TabList,
+  TabPanel,
+  TabPanels,
+  Tabs,
+} from "@chakra-ui/react";
+import React, { useContext } from "react";
+import Approved from "./Approved";
+import Pending from "./Pending";
+import Rejected from "./Rejected";
+import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
+
+const IOTransaction = () => {
+  const { IODetails } = useContext(GlobalStateContext);
+  return (
+    <Tabs>
+      <TabList>
+        <Tab
+          fontSize={"sm"}
+          _selected={{
+            color: "#004118",
+            borderBottom: "2px solid #38a169",
+          }}
+        >
+          Approved
+        </Tab>
+        <Tab
+          fontSize={"sm"}
+          _selected={{
+            color: "#004118",
+            borderBottom: "2px solid #38a169",
+          }}
+        >
+          Pending
+          {IODetails?.ioTransactionRecords?.Pending.length > 0 && (
+            <Badge rounded={"sm"} colorScheme="forestGreen" ms={2}>
+              {IODetails?.ioTransactionRecords?.Pending.length || 0}
+            </Badge>
+          )}
+        </Tab>
+        <Tab
+          fontSize={"sm"}
+          _selected={{
+            color: "#004118",
+            borderBottom: "2px solid #38a169",
+          }}
+        >
+          Rejected
+        </Tab>
+      </TabList>
+      <TabPanels>
+        <TabPanel>
+          <Approved />
+        </TabPanel>
+        <TabPanel>
+          <Pending />
+        </TabPanel>
+        <TabPanel>
+          <Rejected />
+        </TabPanel>
+      </TabPanels>
+    </Tabs>
+  );
+};
+
+export default IOTransaction;
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/Pending.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/Pending.jsx
@@ -0,0 +1,296 @@
+import {
+  Avatar,
+  Badge,
+  Box,
+  Button,
+  HStack,
+  Input,
+  Table,
+  Tag,
+  Tbody,
+  Text,
+  Th,
+  Tooltip,
+  Tr,
+  useDisclosure,
+  useToast,
+} from "@chakra-ui/react";
+import React, { useContext, useEffect, useRef, useState } from "react";
+import { OPACITY_ON_LOAD } from "../../../../Layout/animations";
+import NormalTable from "../../../../Components/DataTable/NormalTable";
+import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
+import CustomAlertDialog from "../../../../Components/CustomAlertDialog";
+import { CheckIcon, CloseIcon, ViewIcon } from "@chakra-ui/icons";
+import RequestApproveModal from "./RequestApproveModal";
+import RequestRejectModal from "./RequestRejectModal";
+import ViewAmountInvested from "./ViewAmountInvested";
+import ViewDistributionInvestor from "./ViewDistributionInvestor";
+import ViewExit from "./ViewExit";
+import ViewCancel from "./ViewCancel";
+import { encryptString } from "../../../../Constants/Constants";
+
+const formatDate = (date) => new Date(date).toLocaleDateString();
+
+const Pending = () => {
+  const toast = useToast();
+  const firstField = useRef();
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const { IODetails, iOTransaction, setIOTransaction } =
+    useContext(GlobalStateContext);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [isLoading, setIsLoading] = useState(true);
+  const [deleteAlert, setDeleteAlert] = useState(false);
+  const [actionId, setActionId] = useState(false);
+  const [mouseEntered, setMouseEntered] = useState(false);
+  const [mouseEnteredId, setMouseEnteredId] = useState("");
+
+  const {
+    isOpen: isConfirmOpen,
+    onOpen: onConfirmOpen,
+    onClose: onConfirmClose,
+  } = useDisclosure();
+  const {
+    isOpen: isRejectOpen,
+    onOpen: onRejectOpen,
+    onClose: onRejectClose,
+  } = useDisclosure();
+  const {
+    isOpen: isInvestmentOpen,
+    onOpen: onInvestmentOpen,
+    onClose: onInvestmentClose,
+  } = useDisclosure();
+  const {
+    isOpen: isDistInvestorOpen,
+    onOpen: onDistInvestorOpen,
+    onClose: onDistInvestorClose,
+  } = useDisclosure();
+  const {
+    isOpen: isExitOpen,
+    onOpen: onExitOpen,
+    onClose: onExitClose,
+  } = useDisclosure();
+  const {
+    isOpen: isCancelOpen,
+    onOpen: onCancelOpen,
+    onClose: onCancelClose,
+  } = useDisclosure();
+
+  useEffect(() => {
+    // Simulate loading
+    const timer = setTimeout(() => {
+      setIsLoading(false);
+    }, 1500);
+
+    // Cleanup the timer on component unmount
+    return () => clearTimeout(timer);
+  }, []);
+
+  const formatDate = (date) => {
+    return new Date(date).toLocaleDateString("en-GB", {
+      day: "2-digit",
+      month: "2-digit",
+      year: "numeric",
+    });
+  };
+
+  console.log(
+    "==============panding",
+    IODetails?.ioTransactionRecords?.Pending
+  );
+
+  // Table filter
+  // const filteredData = IODetails?.ioTransactionRecords?.Pending?.filter((item) => {
+  //   // Filter by name (case insensitive)
+  //   const name = item.transactionName;
+  //   const searchLower = searchTerm?.toLowerCase();
+  //   const nameMatches = name?.toLowerCase().includes(searchLower);
+  //   return nameMatches;
+  // });
+
+  const tableHeadRow = [
+    "Sr No.",
+    "Transaction Date",
+    "Transaction Name",
+    "Amount",
+    "Created By",
+    "Created On",
+    "Approved By",
+    "Approved On",
+    "Actions",
+  ];
+
+  const extractedArray = IODetails?.ioTransactionRecords?.Pending?.map(
+    (item, index) => ({
+      id: item?.id,
+      "Sr No.": (
+        <Text as={"span"} color={"gray.800"} fontWeight={"500"}>
+          {index + 1}.
+        </Text>
+      ),
+      "Transaction Date": (
+        <Text
+          as={"span"}
+          color={"gray.600"}
+          fontWeight={"500"}
+        >
+          {formatDate(item?.transactionDate)}
+        </Text>
+      ),
+      "Transaction Name": (
+        <Text as={"span"} color={"gray.600"} fontWeight={"500"}>
+          {item?.transactionType}
+        </Text>
+      ),
+      Amount: (
+        <Text as={"span"} color={"gray.600"} fontWeight={"500"}>
+          <Badge ms={1} colorScheme="green" me={1}>
+            $
+          </Badge>
+          {parseFloat(item?.transactionAmount || 0).toLocaleString(undefined, {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          })}
+        </Text>
+      ),
+      "Created By": (
+        <Text 
+        textTransform={'capitalize'} w={"100px"} as={"span"} color={"gray.800"} fontWeight={"500"}>
+          {item?.creator?.firstName}
+        </Text>
+      ),
+      "Created On": (
+        <Text w={"100px"} as={"span"} color={"gray.800"} fontWeight={"500"}>
+          {formatDate(item?.createdAt)}
+        </Text>
+      ),
+      "Approved By": (
+        <Text 
+        textTransform={'capitalize'} w={"100px"} as={"span"} color={"gray.800"} fontWeight={"500"}>
+          {item?.modifier?.firstName}
+        </Text>
+      ),
+      "Approved On": (
+        <Text w={"100px"} as={"span"} color={"gray.800"} fontWeight={"500"}>
+          {item?.modifier ? formatDate(item?.updatedAt) : "---"}
+        </Text>
+      ),
+      Actions: (
+        <Box display={"flex"} justifyContent={"center"} gap={2}>
+          <Button
+            colorScheme="forestGreen"
+            rounded={"sm"}
+            size={"xs"}
+            px={2}
+            py={1}
+            fontWeight={500}
+            onClick={() => {
+              setActionId(item.id); // Set the action ID for all cases
+              if (item?.transactionType === "Amount Invested") {
+                onInvestmentOpen();
+              } else if (item?.transactionType === "Distribution To Investor") {
+                onDistInvestorOpen();
+              } else if (item?.transactionType === "Exit") {
+                onExitOpen();
+              } else if (item?.transactionType === "Cancel") {
+                onCancelOpen();
+              }
+            }}
+          >
+            {localStorage?.getItem("role") === encryptString(import.meta.env.VITE_VITE_MAKER) ?  <ViewIcon me={"4px"} /> : null} {localStorage?.getItem("role") === encryptString(import.meta.env.VITE_VITE_MAKER) ?  "View" : "Approve / Reject"}
+          </Button>
+        </Box>
+      ),
+    })
+  );
+
+  const handleDelete = () => {
+    const updatedSponsors = sponser.filter(
+      (sponsor) => sponsor.id !== actionId
+    );
+
+    setTimeout(() => {
+      setCaseDetails(updatedSponsors);
+      setDeleteAlert(false);
+      setIsLoading(false);
+    }, 100);
+    setIsLoading(true);
+  };
+
+  return (
+    <Box {...OPACITY_ON_LOAD} pb={0}>
+      <Box bg="white.500">
+        <HStack
+          display={"flex"}
+          justifyContent={"space-between"}
+          pb={3}
+          spacing="24px"
+        >
+          <Input
+            type="search"
+            width={300}
+            placeholder="Search..."
+            size="sm"
+            rounded="sm"
+            focusBorderColor="green.500"
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+          />
+        </HStack>
+      </Box>
+
+      <NormalTable
+        emptyMessage={`We don't have any Sponers`}
+        tableHeadRow={tableHeadRow}
+        data={extractedArray}
+        isLoading={isLoading}
+        viewActionId={actionId}
+        setViewActionId={setActionId}
+        setMouseEnteredId={setMouseEnteredId}
+        setMouseEntered={setMouseEntered}
+      />
+
+      <CustomAlertDialog
+        onClose={() => setDeleteAlert(false)}
+        isOpen={deleteAlert}
+        message={"Are you sure you want to delete sponers?"}
+        alertHandler={handleDelete}
+        isLoading={isLoading}
+      />
+
+      <ViewAmountInvested
+        isOpen={isInvestmentOpen}
+        onClose={onInvestmentClose}
+        id={actionId}
+      />
+      <ViewDistributionInvestor
+          isOpen={isDistInvestorOpen}
+          onClose={onDistInvestorClose}
+          id={actionId}
+        />
+      <ViewExit 
+        isOpen={isExitOpen} 
+        onClose={onExitClose} 
+        id={actionId}
+      />
+      <ViewCancel 
+        isOpen={isCancelOpen} 
+        onClose={onCancelClose}
+        id={actionId} 
+      />
+      <RequestApproveModal
+        // data={data?.data?.rows}
+        isOpen={isConfirmOpen}
+        onClose={onConfirmClose}
+        id={actionId}
+        // firstField={firstField}
+      />
+      <RequestRejectModal
+        isOpen={isRejectOpen}
+        onClose={onRejectClose}
+        id={actionId}
+      />
+    </Box>
+  );
+};
+
+export default Pending;
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/Rejected.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/Rejected.jsx
@@ -0,0 +1,219 @@
+import {
+    Avatar,
+    Badge,
+    Box,
+    Button,
+    HStack,
+    Input,
+    Table,
+    Tag,
+    Tbody,
+    Text,
+    Th,
+    Tooltip,
+    Tr,
+    useDisclosure,
+    useToast,
+  } from "@chakra-ui/react";
+  import React, { useContext, useEffect, useRef, useState } from "react";
+  import { AddIcon, DeleteIcon, EditIcon, ViewIcon } from "@chakra-ui/icons";
+  import { LuFileSpreadsheet } from "react-icons/lu";
+  import { OPACITY_ON_LOAD } from "../../../../Layout/animations";
+  import NormalTable from "../../../../Components/DataTable/NormalTable";
+  import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
+  import CustomAlertDialog from "../../../../Components/CustomAlertDialog";
+  import ToastBox from "../../../../Components/ToastBox";
+  import AddCashDetails from "../AddCashDetails";
+  import { debounce } from "../../../Admin/Contact";
+  
+  const formatDate = (date) => new Date(date).toLocaleDateString();
+  
+  const Rejected = () => {
+    const toast = useToast();
+    const firstField = useRef();
+    const { isOpen, onOpen, onClose } = useDisclosure();
+    const { IODetails, iOTransaction, setIOTransaction } =
+      useContext(GlobalStateContext);
+    const [searchTerm, setSearchTerm] = useState("");
+    const [isLoading, setIsLoading] = useState(true);
+    const [deleteAlert, setDeleteAlert] = useState(false);
+    const [actionId, setActionId] = useState(false);
+    const [mouseEntered, setMouseEntered] = useState(false);
+    const [mouseEnteredId, setMouseEnteredId] = useState("");
+  
+    useEffect(() => {
+      // Simulate loading
+      const timer = setTimeout(() => {
+        setIsLoading(false);
+      }, 1500);
+  
+      // Cleanup the timer on component unmount
+      return () => clearTimeout(timer);
+    }, []);
+  
+    const formatDate = (date) => {
+      return new Date(date).toLocaleDateString("en-GB", {
+        day: "2-digit",
+        month: "2-digit",
+        year: "numeric",
+      });
+    };
+  
+  
+    // Table filter
+    // const filteredData = IODetails?.ioTransactionRecords?.Reject?.filter((item) => {
+    //   // Filter by name (case insensitive)
+    //   const name = item.transactionName;
+    //   const searchLower = searchTerm.toLowerCase();
+    //   const nameMatches = name.toLowerCase().includes(searchLower);
+    //   return nameMatches;
+    // });
+  
+    const tableHeadRow = [
+      "Sr No.",
+      "Transaction Name",
+      "Amount",
+      "Created By",
+      "Created On",
+      "Approved By",
+      "Approved On",
+    ];
+  
+    const extractedArray = IODetails?.ioTransactionRecords?.Reject?.map((item, index) => ({
+      id: item?.id,
+      "Sr No.": (
+        <Text
+          as={"span"}
+          color={"gray.800"}
+          fontWeight={"500"}
+        >
+          {index + 1}.
+        </Text>
+      ),
+      "Transaction Name": (
+        <Text
+          as={"span"}
+          color={"gray.600"}
+          fontWeight={"500"}
+        >
+          {item?.transactionType}
+        </Text>
+      ),
+      "Amount": (
+        <Text
+          as={"span"}
+          color={"gray.600"}
+          fontWeight={"500"}
+        >
+          <Badge ms={1} colorScheme="green" me={1}>
+            $
+          </Badge>
+          {parseFloat(item?.transactionAmount || 0).toLocaleString(undefined, {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          })}
+        </Text>
+      ),
+      "Created By": (
+        <Text
+          w={"100px"}
+          as={"span"}
+          color={"gray.800"}
+          fontWeight={"500"}
+          textTransform={'capitalize'}
+        >
+          {item?.creator?.firstName}
+        </Text>
+      ),
+      "Created On": (
+        <Text
+          w={"100px"}
+          as={"span"}
+          color={"gray.800"}
+          fontWeight={"500"}
+        >
+          {formatDate(item?.createdAt)}
+        </Text>
+      ),
+      "Approved By": (
+        <Text
+          w={"100px"}
+          as={"span"}
+          color={"gray.800"}
+          fontWeight={"500"}
+          textTransform={'capitalize'}
+        >
+           {item?.modifier?.firstName}
+        </Text>
+      ),
+      "Approved On": (
+        <Text
+          w={"100px"}
+          as={"span"}
+          color={"gray.800"}
+          fontWeight={"500"}
+        >
+          {formatDate(item?.updatedAt)}
+        </Text>
+      ),
+    }));
+  
+    const handleDelete = () => {
+      const updatedSponsors = sponser.filter(
+        (sponsor) => sponsor.id !== actionId
+      );
+  
+      setTimeout(() => {
+        setCaseDetails(updatedSponsors);
+        setDeleteAlert(false);
+        setIsLoading(false);
+      }, 100);
+      setIsLoading(true);
+    };
+  
+    return (
+      <Box {...OPACITY_ON_LOAD} pb={0}>
+        <Box bg="white.500">
+          <HStack
+            display={"flex"}
+            justifyContent={"space-between"}
+            pb={3}
+            spacing="24px"
+          >
+            <Input
+              type="search"
+              width={300}
+              placeholder="Search..."
+              size="sm"
+              rounded="sm"
+              focusBorderColor="green.500"
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+            />
+          </HStack>
+        </Box>
+  
+        <NormalTable
+          emptyMessage={`We don't have any Sponers`}
+          tableHeadRow={tableHeadRow}
+          data={extractedArray}
+          isLoading={isLoading}
+          viewActionId={actionId}
+          setViewActionId={setActionId}
+          setMouseEnteredId={setMouseEnteredId}
+          setMouseEntered={setMouseEntered}
+        />
+  
+        <CustomAlertDialog
+          onClose={() => setDeleteAlert(false)}
+          isOpen={deleteAlert}
+          message={"Are you sure you want to delete sponers?"}
+          alertHandler={handleDelete}
+          isLoading={isLoading}
+        />
+      </Box>
+    );
+  };
+  
+  export default Rejected;
+  
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/RequestApproveModal.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/RequestApproveModal.jsx
@@ -0,0 +1,175 @@
+import {
+  Box,
+  Button,
+  FormControl,
+  FormHelperText,
+  FormLabel,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+  Textarea,
+  useDisclosure,
+  useToast,
+} from "@chakra-ui/react";
+import React, { useEffect, useState } from "react";
+import * as yup from "yup";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { useForm } from "react-hook-form";
+import ToastBox from "../../../../Components/ToastBox";
+import { useApproveDistributionMutation, useApproveIOCaseMutation, useApproveIONavMutation } from "../../../../Services/io.service";
+
+export const conformModalSchema = yup.object().shape({
+  // comments: yup.string().required("Comment is required")
+  // .max(50, "Investment name cannot be more than 50 characters"),
+  comments: yup
+  .string()
+  .required("Comment is required")
+  .max(200, "Approve Comment cannot be more than 200 characters"),
+});
+
+const RequestApproveModal = ({ isOpen, onClose, firstField ,id}) => {
+  const [isBtnLoading , setIsBtnLoading] = useState(false)
+
+  const toast = useToast()
+
+  const {
+    register,
+    reset,
+    watch,
+    handleSubmit,
+    formState: { errors },
+  } = useForm({
+    resolver: yupResolver(conformModalSchema),
+  });
+
+  const [ approveDistribution ] = useApproveDistributionMutation()
+  
+
+  const onSubmit = async(data) => {
+    setIsBtnLoading(true)
+    try {
+      const res = await approveDistribution({data,id})
+      if (res?.error) {
+        toast({
+          render: () => (
+            <ToastBox status={"error"} message={res?.error?.data?.message} />
+          ),
+        });
+        setIsBtnLoading(false)
+      }else if(res?.data){
+        toast({
+          render: () => (
+            <ToastBox message={res?.data?.message} />
+          ),
+        });
+        onClose()
+        setIsBtnLoading(false)
+      }else{
+        toast({
+          render: () => (
+            <ToastBox status={'error'} message={"Something went wrong"} />
+          ),
+        });
+        setIsBtnLoading(false)
+      }
+    } catch (error) {
+      
+    }
+  };
+
+  const handleFileChange = (event) => {
+    const selectedFile = event.target.files[0];
+    setFile(selectedFile);
+  };
+
+
+  const { data, isLoading } = 
+  (id, {
+    skip: !id,
+  });
+
+  useEffect(() => {
+    if (data) {
+      reset({
+        investorAmount: data?.data?.investorAmount,
+      });
+    }
+  }, [data, reset]);
+
+  const heandleOnClose = () =>{
+    reset()
+    onClose() 
+  }
+
+  return (
+    <Modal isCentered isOpen={isOpen} onClose={heandleOnClose} initialFocusRef={firstField}>
+      <ModalOverlay />
+      <ModalContent pb={4}>
+        <ModalHeader fontSize={"md"}>Approve Comment</ModalHeader>
+        <ModalCloseButton />
+        {isLoading ? (
+          <FullscreenLoaders height={"50vh"} />
+        ) : (
+        <Box as="form" onSubmit={handleSubmit(onSubmit)}>
+          <ModalBody>
+            <FormControl mb={4} isRequired>
+              <FormLabel fontSize="sm">Comment</FormLabel>
+              <Textarea
+                rows={6}
+                focusBorderColor="green.400"
+                name="comments"
+                {...register("comments")}
+                fontSize="sm"
+                type="textarea"
+                size="md"
+                placeholder={"Enter your checker comment...."}
+                rounded={"md"}
+                resize={"none"}
+                maxLength={200}
+              />
+              {errors.comments && (
+                <Text fontSize="xs" color="red">
+                  {errors.comments.message}
+                </Text>
+              )}
+              <FormHelperText fontSize="xs" color="gray.500">
+              <Box as="span" me={1}>Maximum length should be 200 characters. You have entered</Box>
+                {watch("comments")?.length || 0} characters.
+              </FormHelperText>
+            </FormControl>
+          </ModalBody>
+          <ModalFooter>
+            <Button
+              colorScheme="gray"
+              mr={3}
+              onClick={onClose}
+              size={"sm"}
+              rounded={"sm"}
+            >
+              Cancel
+            </Button>
+            <Button
+              colorScheme="forestGreen"
+              variant="solid"
+              size={"sm"}
+              rounded={"sm"}
+              isLoading={isBtnLoading}
+              type="submit"
+            >
+              Send
+            </Button>
+          </ModalFooter>
+        </Box>
+        )}
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default RequestApproveModal;
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/RequestExitApproveModal.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/RequestExitApproveModal.jsx
@@ -0,0 +1,176 @@
+import {
+    Box,
+    Button,
+    FormControl,
+    FormHelperText,
+    FormLabel,
+    Input,
+    Modal,
+    ModalBody,
+    ModalCloseButton,
+    ModalContent,
+    ModalFooter,
+    ModalHeader,
+    ModalOverlay,
+    Text,
+    Textarea,
+    useDisclosure,
+    useToast,
+  } from "@chakra-ui/react";
+  import React, { useEffect, useState } from "react";
+  import * as yup from "yup";
+  import { yupResolver } from "@hookform/resolvers/yup";
+  import { useForm } from "react-hook-form";
+  import ToastBox from "../../../../Components/ToastBox";
+  import { useApproveDistributionMutation, useApproveExitMutation, useApproveIOCaseMutation, useApproveIONavMutation } from "../../../../Services/io.service";
+  
+  export const conformModalSchema = yup.object().shape({
+    // comments: yup.string().required("Comment is required")
+    // .max(50, "Investment name cannot be more than 50 characters"),
+    comments: yup
+    .string()
+    .required("Comment is required")
+    .max(200, "Approve Comment cannot be more than 200 characters"),
+  });
+  
+  const RequestApproveModal = ({ isOpen, onClose, firstField ,id}) => {
+    const [isBtnLoading , setIsBtnLoading] = useState(false)
+  
+    const toast = useToast()
+  
+    const {
+      register,
+      reset,
+      watch,
+      handleSubmit,
+      formState: { errors },
+    } = useForm({
+      resolver: yupResolver(conformModalSchema),
+    });
+  
+    const [ approveExit ] = useApproveExitMutation()
+    
+  
+    const onSubmit = async(data) => {
+      setIsBtnLoading(true)
+      try {
+        const res = await approveExit({data,id})
+        if (res?.error) {
+          toast({
+            render: () => (
+              <ToastBox status={"error"} message={res?.error?.data?.message} />
+            ),
+          });
+          setIsBtnLoading(false)
+        }else if(res?.data){
+          toast({
+            render: () => (
+              <ToastBox message={res?.data?.message} />
+            ),
+          });
+          onClose()
+          setIsBtnLoading(false)
+        }else{
+          toast({
+            render: () => (
+              <ToastBox status={'error'} message={"Something went wrong"} />
+            ),
+          });
+          setIsBtnLoading(false)
+        }
+      } catch (error) {
+        
+      }
+    };
+  
+    const handleFileChange = (event) => {
+      const selectedFile = event.target.files[0];
+      setFile(selectedFile);
+    };
+  
+  
+    const { data, isLoading } = 
+    (id, {
+      skip: !id,
+    });
+  
+    useEffect(() => {
+      if (data) {
+        reset({
+          investorAmount: data?.data?.investorAmount,
+        });
+      }
+    }, [data, reset]);
+  
+    const heandleOnClose = () =>{
+      reset()
+      onClose() 
+    }
+  
+    return (
+      <Modal isCentered isOpen={isOpen} onClose={heandleOnClose} initialFocusRef={firstField}>
+        <ModalOverlay />
+        <ModalContent pb={4}>
+          <ModalHeader fontSize={"md"}>Approve Comment</ModalHeader>
+          <ModalCloseButton />
+          {isLoading ? (
+            <FullscreenLoaders height={"50vh"} />
+          ) : (
+          <Box as="form" onSubmit={handleSubmit(onSubmit)}>
+            <ModalBody>
+              <FormControl mb={4} isRequired>
+                <FormLabel fontSize="sm">Comment</FormLabel>
+                <Textarea
+                  rows={6}
+                  focusBorderColor="green.400"
+                  name="comments"
+                  {...register("comments")}
+                  fontSize="sm"
+                  type="textarea"
+                  size="md"
+                  placeholder={"Enter your checker comment...."}
+                  rounded={"md"}
+                  resize={"none"}
+                  maxLength={200}
+                />
+                {errors.comments && (
+                  <Text fontSize="xs" color="red">
+                    {errors.comments.message}
+                  </Text>
+                )}
+                <FormHelperText fontSize="xs" color="gray.500">
+                <Box as="span" me={1}>Maximum length should be 200 characters. You have entered</Box>
+                  {watch("comments")?.length || 0} characters.
+                </FormHelperText>
+              </FormControl>
+            </ModalBody>
+            <ModalFooter>
+              <Button
+                colorScheme="gray"
+                mr={3}
+                onClick={onClose}
+                size={"sm"}
+                rounded={"sm"}
+              >
+                Cancel
+              </Button>
+              <Button
+                colorScheme="forestGreen"
+                variant="solid"
+                size={"sm"}
+                rounded={"sm"}
+                isLoading={isBtnLoading}
+                type="submit"
+              >
+                Send
+              </Button>
+            </ModalFooter>
+          </Box>
+          )}
+        </ModalContent>
+      </Modal>
+    );
+  };
+  
+  export default RequestApproveModal;
+  
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/RequestRejectModal.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/RequestRejectModal.jsx
@@ -0,0 +1,176 @@
+import {
+  Box,
+  Button,
+  FormControl,
+  FormHelperText,
+  FormLabel,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+  Textarea,
+  useDisclosure,
+  useToast,
+} from "@chakra-ui/react";
+import React, { useEffect, useState } from "react";
+import * as yup from "yup";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { useForm } from "react-hook-form";
+import ToastBox from "../../../../Components/ToastBox";
+import { useRejectIOCaseMutation } from "../../../../Services/io.service";
+
+export const conformModalSchema = yup.object().shape({
+  comments: yup.string().required("Comment is required")
+  .max(200, "Approve Comment cannot be more than 200 characters"),
+});
+
+const RequestRejectModal = ({ isOpen, onClose, firstField ,id, onBigModalClose}) => {
+  const [isBtnLoading , setIsBtnLoading] = useState(false)
+
+  const toast = useToast()
+
+  const {
+    register,
+    reset,
+    watch,
+    handleSubmit,
+    formState: { errors },
+  } = useForm({
+    resolver: yupResolver(conformModalSchema),
+  });
+
+  const [ rejectIOCase ] = useRejectIOCaseMutation()
+  
+
+  const handleFileChange = (event) => {
+    const selectedFile = event.target.files[0];
+    setFile(selectedFile);
+  };
+
+
+  const { data, isLoading } = 
+  (id, {
+    skip: !id,
+  });
+
+  console.log("============data",data);
+  
+  
+  const onSubmit = async(data) => {
+    console.log(data, "tewxttttt");
+    setIsBtnLoading(true)
+    try {
+      const res = await rejectIOCase({data, id})
+      if (res?.error) {
+        toast({
+          render: () => (
+            <ToastBox status={"error"} message={res?.error?.data?.message} />
+          ),
+        });
+        setIsBtnLoading(false)
+      }else if(res?.data){
+        toast({
+          render: () => (
+            <ToastBox message={res?.data?.message} />
+          ),
+        });
+        onClose()
+        onBigModalClose()
+        setIsBtnLoading(false)
+      }else{
+        toast({
+          render: () => (
+            <ToastBox status={'error'} message={"Something went wrong"} />
+          ),
+        });
+        setIsBtnLoading(false)
+      }
+    } catch (error) {
+      
+    }
+  };
+
+
+  // useEffect(() => {
+  //   if (data) {
+  //     reset({
+  //       investorAmount: data?.data?.investorAmount,
+  //     });
+  //   }
+  // }, [data, reset]);
+
+  const heandleOnClose = () =>{
+    reset()
+    onClose()
+  }
+
+  return (
+    <Modal isCentered isOpen={isOpen} onClose={heandleOnClose} initialFocusRef={firstField}>
+      <ModalOverlay />
+      <ModalContent pb={4}>
+        <ModalHeader fontSize={"md"}>Reject Comment</ModalHeader>
+        <ModalCloseButton />
+        {isLoading ? (
+          <FullscreenLoaders height={"50vh"} />
+        ) : (
+        <Box as="form" onSubmit={handleSubmit(onSubmit)}>
+          <ModalBody>
+            <FormControl mb={4} isRequired>
+              <FormLabel fontSize="sm">Comment</FormLabel>
+              <Textarea
+                rows={6}
+                focusBorderColor="green.400"
+                name="comments"
+                {...register("comments")}
+                fontSize="sm"
+                type="textarea"
+                size="md"
+                placeholder={"Enter your comments...."}
+                rounded={"md"}
+                resize={"none"}
+              />
+              {errors.comments && (
+                <Text fontSize="xs" color="red">
+                  {errors.comments.message}
+                </Text>
+              )}
+              <FormHelperText fontSize="xs" color="gray.500">
+              <Box as="span" me={1}>Maximum length should be 200 characters. You have entered</Box>
+                {watch("comments")?.length || 0} characters.
+              </FormHelperText>
+            </FormControl>
+          </ModalBody>
+          <ModalFooter>
+            <Button
+              colorScheme="gray"
+              mr={3}
+              onClick={onClose}
+              size={"xs"}
+              rounded={"sm"}
+            >
+              Cancel
+            </Button>
+            <Button
+              colorScheme="forestGreen"
+              variant="solid"
+              size={"xs"}
+              rounded={"sm"}
+              isLoading={isBtnLoading}
+              type="submit"
+            >
+              Send
+            </Button>
+          </ModalFooter>
+        </Box>
+        )}
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default RequestRejectModal;
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewAmountInvested.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewAmountInvested.jsx
@@ -0,0 +1,294 @@
+import React, { useContext, useEffect, useState } from "react";
+import {
+  Box,
+  Button,
+  FormControl,
+  FormLabel,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+  useDisclosure,
+  useToast,
+} from "@chakra-ui/react";
+import { Controller, useForm } from "react-hook-form";
+import * as yup from "yup";
+import { yupResolver } from "@hookform/resolvers/yup";
+import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
+import { useParams } from "react-router-dom";
+import { useAmountIvestmentMutation } from "../../../../Services/io.service";
+import ToastBox from "../../../../Components/ToastBox";
+import CurrencyInput from "../../../../Components/CurrencyInput";
+import RequestRejectModal from "./RequestRejectModal";
+import ApproveInvestedModal from "./ApproveInvestedModal";
+import { formatDate } from "../../../Master/Sponser/Sponsers";
+import { encryptString } from "../../../../Constants/Constants";
+
+// Validation schema
+const validationSchema = yup.object().shape({
+  transactionDate: yup.date().required("Date is required"),
+  Total_Amount: yup.number().required("Amount is required"),
+  amountInvested: yup.number().required("Amount to invest is required"),
+  IoCash: yup
+    .number()
+    .positive("IO Cash must be positive")
+    .required("IO Cash is required"),
+});
+
+// Function to format currency
+const formatCurrency = (value) => {
+  if (isNaN(value)) return "";
+  const formatted = parseFloat(value).toFixed(2).toString();
+  const [integer, decimal] = formatted.split(".");
+  const formattedInteger = integer.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  return decimal ? `${formattedInteger}.${decimal}` : formattedInteger;
+};
+
+const ViewAmountInvested = ({ isOpen, onClose, id: investorId }) => {
+  const params = useParams();
+  const toast = useToast();
+  const id = params?.id;
+  const {
+    control,
+    register,
+    handleSubmit,
+    reset,
+    watch,
+    formState: { errors },
+  } = useForm({
+    resolver: yupResolver(validationSchema),
+  });
+  const [isLoading, setIsLoading] = useState(false);
+  const { IODetails } = useContext(GlobalStateContext);
+  const [amountInvested] = useAmountIvestmentMutation();
+  const [actionId, setActionId] = useState(false);
+
+  const {
+    isOpen: isConfirmOpen,
+    onOpen: onConfirmOpen,
+    onClose: onConfirmClose,
+  } = useDisclosure();
+  const {
+    isOpen: isRejectOpen,
+    onOpen: onRejectOpen,
+    onClose: onRejectClose,
+  } = useDisclosure();
+
+  useEffect(() => {
+    if (IODetails?.totalAmtInvestmentInUSD) {
+      const totalAmount = parseFloat(IODetails.totalAmtInvestmentInUSD);
+      const ioCashUpdate = parseFloat(IODetails.totalAmtInvestmentInUSD);
+      reset({
+        Total_Amount: totalAmount,
+        IoCash: ioCashUpdate,
+      });
+    }
+  }, [IODetails, reset]);
+
+  const onSubmit = async (data) => {
+    console.log(data);
+    setIsLoading(true);
+
+    try {
+      const res = await amountInvested({ data, id });
+      console.log(res);
+      if (res?.data?.statusCode === 200) {
+        toast({
+          render: () => <ToastBox message={res?.data?.message} />,
+        });
+        setIsLoading(false);
+        onClose();
+      } else if (res?.error?.status === 400) {
+        toast({
+          render: () => (
+            <ToastBox message={res?.error?.data?.message} status={"error"} />
+          ),
+        });
+        setIsLoading(false);
+      }
+    } catch (error) {
+      setIsLoading(false);
+    }
+  };
+
+  // const formatDate = (date) => new Date(date).toLocaleDateString();
+  
+
+  const handleAmountChange = (e) => {
+    // e might be an object or just a value, handle both cases
+    const amount =
+      typeof e === "object" && e.target
+        ? parseFloat(e.target.value) || 0
+        : parseFloat(e) || 0;
+    const totalAmount = parseFloat(IODetails?.totalAmtInvestmentInUSD) || 0;
+    const ioCash = (totalAmount - amount).toFixed(2);
+
+    reset({
+      amountInvested: parseFloat(amount),
+      IoCash: parseFloat(ioCash),
+      Total_Amount: IODetails?.totalAmtInvestmentInUSD,
+    });
+  };
+
+  console.log(
+    "=========hitttt",
+    IODetails?.ioTransactionRecords?.Pending?.[0]?.createdAt
+  );
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader fontSize={"md"}>Amount Invested</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <form onSubmit={handleSubmit(onSubmit)}>
+            <FormControl
+              mb={"15px"}
+              isInvalid={!!errors.transactionDate}
+              isRequired
+            >
+              <FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>
+                Date
+              </FormLabel>
+              <Input
+                type="text"
+                value={formatDate(
+                  IODetails?.ioTransactionRecords?.Pending?.[0]?.createdAt
+                )}
+                // value={IODetails?.ioTransactionRecords?.Pending?.[0]?.createdAt}
+                size="sm"
+                rounded={"sm"}
+                textAlign={"end"}
+                focusBorderColor="forestGreen.300"
+                fontSize={"sm"}
+                readOnly
+              />
+              {/* <Text>
+                {IODetails?.ioTransactionRecords?.Approved?.[0]?.createdAt} dccd
+              </Text> */}
+            </FormControl>
+
+            <FormControl
+              mb={"15px"}
+              isInvalid={!!errors.Total_Amount}
+              isReadOnly
+            >
+              <FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>
+                Amount
+              </FormLabel>
+              <Input
+                type="text"
+                value={formatCurrency(watch("Total_Amount") || 0)}
+                size="sm"
+                rounded={"sm"}
+                textAlign={"end"}
+                focusBorderColor="forestGreen.300"
+                fontSize={"sm"}
+                readOnly
+              />
+            </FormControl>
+
+            <FormControl
+              mb={"15px"}
+              isInvalid={!!errors.amountInvested}
+              isRequired
+            >
+              <FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>
+                Amount to invest
+              </FormLabel>
+              <Input
+                type="text"
+                value={formatCurrency(
+                  IODetails?.ioTransactionRecords?.Pending?.[0]
+                    ?.transactionAmount || 0
+                )}
+                size="sm"
+                rounded={"sm"}
+                textAlign={"end"}
+                focusBorderColor="forestGreen.300"
+                fontSize={"sm"}
+                readOnly
+              />
+            </FormControl>
+
+            <FormControl mb={"15px"} isInvalid={!!errors.IoCash}>
+              <FormLabel as={"label"} fontSize={"sm"} fontWeight={500}>
+                IO Cash
+              </FormLabel>
+              <Input
+                type="text"
+                value={formatCurrency(
+                  (watch("Total_Amount") || 0) -
+                    (IODetails?.ioTransactionRecords?.Pending?.[0]
+                      ?.transactionAmount || 0)
+                )}
+                size="sm"
+                rounded={"sm"}
+                focusBorderColor="forestGreen.300"
+                fontSize={"sm"}
+                textAlign={"right"}
+                readOnly
+              />
+            </FormControl>
+
+            {localStorage?.getItem("role") !== encryptString(import.meta.env.VITE_VITE_MAKER) && <ModalFooter>
+              <Box display={"flex"} justifyContent={"center"} gap={2}>
+                <Button
+                  rounded={"sm"}
+                  size={"xs"}
+                  textTransform={"inherit"}
+                  fontWeight={500}
+                  px={3}
+                  py={2}
+                  onClick={() => {
+                    setActionId(id); // Use the `id` variable from params
+                    onConfirmOpen();
+                  }}
+                  colorScheme="forestGreen"
+                  variant={"solid"}
+                  cursor={"pointer"}
+                >
+                  Approve
+                </Button>
+                <Button
+                  rounded={"sm"}
+                  size={"xs"}
+                  textTransform={"inherit"}
+                  fontWeight={500}
+                  px={3}
+                  py={2}
+                  onClick={() => {
+                    setActionId(id); // Use the `id` variable from params
+                    onRejectOpen();
+                  }}
+                >
+                  Reject
+                </Button>
+              </Box>
+            </ModalFooter>}
+          </form>
+        </ModalBody>
+      </ModalContent>
+      <ApproveInvestedModal
+        isOpen={isConfirmOpen}
+        onClose={onConfirmClose}
+        onBigModalClose={onClose}
+        id={investorId}
+      />
+      <RequestRejectModal
+        isOpen={isRejectOpen}
+        onClose={onRejectClose}
+        onBigModalClose={onClose}
+        id={investorId}
+      />
+    </Modal>
+  );
+};
+
+export default ViewAmountInvested;
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewCancel.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewCancel.jsx
@@ -0,0 +1,368 @@
+import {
+    Badge,
+    Box,
+    Button,
+    HStack,
+    Modal,
+    ModalBody,
+    ModalCloseButton,
+    ModalContent,
+    ModalFooter,
+    ModalHeader,
+    ModalOverlay,
+    Table,
+    Tbody,
+    Text,
+    Th,
+    Tr,
+    useDisclosure,
+    useToast,
+  } from "@chakra-ui/react";
+  import NormalData from "../../../../Components/DataTable/NormalTable";
+  import { useContext, useState } from "react";
+  import {
+    useExitIOTransactionMutation,
+    useGetDistributedToInvestorMutation,
+    useGetDistributionInvestorMutation,
+    useGetIOByIdQuery,
+  } from "../../../../Services/io.service";
+  import { useParams } from "react-router-dom";
+  import { useEffect } from "react";
+  import { useForm } from "react-hook-form";
+  import * as yup from "yup";
+  import { yupResolver } from "@hookform/resolvers/yup";
+  import ToastBox from "../../../../Components/ToastBox";
+  import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
+import ApprovedCancelTransaction from "./ApprovedCancelTransaction";
+import RequestRejectModal from "./RequestRejectModal";
+import { encryptString } from "../../../../Constants/Constants";
+  
+  const ViewCancel = ({ isOpen, onClose,id:cancleId }) => {
+    const params = useParams();
+    const toast = useToast();
+    const id = params?.id;
+    const [isCalculateLoading, setIsCalculateLoading] = useState(false);
+    const [isFinalCalculateLoading, setIsFinalCalculateLoading] = useState(false);
+    const [calcualtedData, setCalculatedDate] = useState(null);
+    const [isCalcualtedData, setIsCalcualtedData] = useState(false);
+    const { investors, setInvestors, slideFromRight, IODetails } =
+    useContext(GlobalStateContext);
+
+    const [actionId, setActionId] = useState(false);
+
+    const {
+      isOpen: isConfirmOpen,
+      onOpen: onConfirmOpen,
+      onClose: onConfirmClose,
+    } = useDisclosure();
+    const {
+      isOpen: isRejectOpen,
+      onOpen: onRejectOpen,
+      onClose: onRejectClose,
+    } = useDisclosure();
+  
+    const investorExit = yup.object().shape({
+      amount: yup
+        .string()
+        .required("Amount is required")
+        .test(
+          "max",
+          `Distribution amount should not be greater than IO cash amount ${IODetails?.ioCash}`,
+          function (value) {
+            const { ioCash } = IODetails || {}; // Safely get ioCash
+            if (value && ioCash) {
+              return parseFloat(value) <= parseFloat(ioCash); // Ensure both are compared as numbers
+            }
+            return true; // If ioCash is not available, skip validation
+          }
+        ),
+    });
+  
+    const {
+      control,
+      handleSubmit,
+      formState: { errors },
+      reset,
+    } = useForm({
+      resolver: yupResolver(investorExit),
+    });
+  
+    useEffect(() => {
+      console.log("hiit     useEffectc");
+      if (id && IODetails) {
+        handleCalculate(id, {
+          amount: IODetails?.ioMVNAV,
+        });
+       }
+      reset({
+        amount: IODetails?.ioMVNAV,
+      });
+    }, [IODetails, id]);
+  
+    const handleCalculate = async (id, data) => {
+      try {
+        const res = await getDistributionInvestment({ id, data });
+        console.log(res?.data?.data);
+  
+        if (res?.error?.status === 401) { 
+          setIsCalculateLoading(false);
+          setIsCalcualtedData(false);
+        } else if (res?.data?.statusCode === 200) {
+          setCalculatedDate(res?.data?.data);
+          setIsCalculateLoading(false);
+          setIsCalcualtedData(true);
+        }
+      } catch (error) {}
+    };
+  
+    const [getDistributionInvestment] = useGetDistributionInvestorMutation();
+  
+    const investor = yup.object().shape({
+      amount: yup.string().required("Amount is required"),
+    });
+  
+    // ====================================================[Table Setup]================================================================
+    const tableHeadRow = [
+    "Client ID",
+    "First name",
+    "Last name",
+    "Investment amount",
+    "Percentage",
+    "Market Value",
+    "Return on Investment",
+    "Distribution",
+    "Distribution Percent",
+    "Total Return",
+    "Total return on Investment",
+    ];
+  
+    const extractedArray = IODetails?.investors?.map((item, index) => ({
+        id: item?.id,
+        "Client ID": (
+          <Text
+            justifyContent={slideFromRight ? "right" : "center"}
+            as={"span"}
+            color={"teal.900"}
+            fontWeight={"500"}
+            className="d-flex align-items-center web-text-small"
+          >
+            {item?.clientReference_id}
+          </Text>
+        ),
+        "First name": (
+          <Text
+            justifyContent={slideFromRight ? "right" : "center"}
+            as={"span"}
+            color={"teal.900"}
+            fontWeight={"500"}
+            className="d-flex align-items-center web-text-small"
+          >
+            {item.firstName}
+          </Text>
+        ),
+        "Last name": (
+          <Text
+            justifyContent={slideFromRight ? "right" : "center"}
+            as={"span"}
+            color={"teal.900"}
+            fontWeight={"500"}
+            className="d-flex align-items-center web-text-small"
+          >
+            {item.lastName}
+          </Text>
+        ),
+        "Investment amount": (
+          <Text
+            justifyContent={slideFromRight ? "right" : "left"}
+            as={"span"}
+            color={"teal.900"}
+            fontWeight={"500"}
+            className="d-flex align-items-center web-text-small"
+          >
+            <Badge ms={1} colorScheme="green" me={1}>
+              $
+            </Badge>
+            {/* {`$${formatCurrency(item.InvestedAmount_USD)}`} */}
+            {`${parseFloat(item.InvestedAmount_USD || 0).toLocaleString(undefined, {
+              minimumFractionDigits: 2,
+              maximumFractionDigits: 2,
+            })}`}
+          </Text>
+        ),
+        Percentage: (
+          <Text
+            justifyContent={slideFromRight ? "right" : "center"}
+            as={"span"}
+            color={"teal.900"}
+            fontWeight={"500"}
+            className="d-flex align-items-center web-text-small"
+          >
+            {item.Investor_Holidings} %
+          </Text>
+        ),
+        "Market Value": (
+          <Text
+            justifyContent={slideFromRight ? "right" : "left"}
+            as={"span"}
+            color={"teal.900"}
+            fontWeight={"500"}
+            className="d-flex align-items-center web-text-small"
+          >
+            <Badge ms={1} colorScheme="green" me={1}>
+              $
+            </Badge>
+            {`${parseFloat(item.Market_Value || 0).toLocaleString(undefined, {
+              minimumFractionDigits: 2,
+              maximumFractionDigits: 2,
+            })}`}
+          </Text>
+        ),
+        "Return on Investment": (
+          <Text
+            justifyContent={slideFromRight ? "right" : "center"}
+            as={"span"}
+            color={"teal.900"}
+            fontWeight={"500"}
+            h={6}
+            className="d-flex align-items-center web-text-small"
+          >
+            {item.Return_On_Investment || 0} %
+          </Text>
+        ),
+        Distribution: (
+          <Text
+            justifyContent={slideFromRight ? "right" : "left"}
+            as={"span"}
+            color={"teal.900"}
+            fontWeight={"500"}
+            className="d-flex align-items-center web-text-small"
+          >
+            <Badge ms={1} colorScheme="green" me={1}>
+              $
+            </Badge>
+            {/* {`$${item.Distribution_Amt}`} */}
+            {`${parseFloat(item.Distribution_Amt || 0).toLocaleString(undefined, {
+              minimumFractionDigits: 2,
+              maximumFractionDigits: 2,
+            })}`}
+          </Text>
+        ),
+        "Distribution Percent": (
+          <Text
+            justifyContent={slideFromRight ? "right" : "center"}
+            as={"span"}
+            color={"teal.900"}
+            fontWeight={"500"}
+            className="d-flex align-items-center web-text-small"
+          >
+            {/* {`$${item.Distribution_Amt}`} */}
+            {`${parseFloat(item.Distribution_Per || 0).toLocaleString(undefined, {
+              minimumFractionDigits: 2,
+              maximumFractionDigits: 2,
+            })} %`}
+          </Text>
+        ),
+        "Total Return": (
+          <Text
+            justifyContent={slideFromRight ? "right" : "left"}
+            as={"span"}
+            color={"teal.900"}
+            fontWeight={"500"}
+            className="d-flex align-items-center web-text-small"
+          >
+            <Badge ms={1} colorScheme="green" me={1}>
+              $
+            </Badge>
+            {/* {`$${formatCurrency(item.Total_Return) || 0}`} */}
+            {`${parseFloat(item.Total_Return || 0).toLocaleString(undefined, {
+              minimumFractionDigits: 2,
+              maximumFractionDigits: 2,
+            })}`}
+          </Text>
+        ),
+        "Total return on Investment": (
+          <Text
+            justifyContent={slideFromRight ? "right" : "center"}
+            as={"span"}
+            color={"teal.900"}
+            fontWeight={"500"}
+            className="d-flex align-items-center web-text-small"
+          >
+            {item.Total_Return_On_Investment || 0} %
+          </Text>
+        ),
+      }));
+  
+    const handleClose = () => {
+      onClose();
+      setIsFinalCalculateLoading(false);
+      setIsCalcualtedData(false);
+    };
+  
+    return (
+      <Modal size={"xl"} isOpen={isOpen} onClose={handleClose} >
+        <ModalOverlay />
+        <ModalContent maxW={1000}>
+          <ModalHeader fontSize={"md"}>Cancel Transaction</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+            <NormalData
+              emptyMessage={`We don't have any Sponers `}
+              tableHeadRow={tableHeadRow}
+              data={extractedArray}
+            />
+          </ModalBody>
+          {localStorage?.getItem("role") !== encryptString(import.meta.env.VITE_VITE_MAKER) && <ModalFooter pt={0}>
+            <Box display={"flex"} justifyContent={"center"} gap={2}>
+                <Button
+                  rounded={"sm"}
+                  size={"xs"}
+                  textTransform={"inherit"}
+                  fontWeight={500}
+                  px={3}
+                  py={2}
+                  onClick={() => {
+                    setActionId(id); // Use the `id` variable from params
+                    onConfirmOpen();
+                  }}
+                  colorScheme="forestGreen"
+                  variant={"solid"}
+                  cursor={"pointer"}
+                >
+                  Approve
+                </Button>
+                <Button
+                  rounded={"sm"}
+                  size={"xs"}
+                  textTransform={"inherit"}
+                  fontWeight={500}
+                  px={3}
+                  py={2}
+                  onClick={() => {
+                    setActionId(id); // Use the `id` variable from params
+                    onRejectOpen();
+                  }}
+                >
+                  Reject
+                </Button>
+            </Box>
+          </ModalFooter>}
+        </ModalContent>
+        <ApprovedCancelTransaction
+        isOpen={isConfirmOpen}
+        onClose={onConfirmClose}
+        onBigModalClose={onClose}
+        id={cancleId}
+      />
+      <RequestRejectModal
+        isOpen={isRejectOpen}
+        onClose={onRejectClose}
+        onBigModalClose={onClose}
+        id={cancleId}
+      />
+      </Modal>
+    );
+  };
+  
+  export default ViewCancel;
+  
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewDistributionInvestor.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewDistributionInvestor.jsx
@@ -0,0 +1,274 @@
+import {
+  Box,
+  Button,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+  useDisclosure,
+  useToast,
+} from "@chakra-ui/react";
+import NormalData from "../../../../Components/DataTable/NormalTable";
+import { useContext, useState } from "react";
+import { useGetDistributionInvestorMutation } from "../../../../Services/io.service";
+import { useParams } from "react-router-dom";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import * as yup from "yup";
+import { yupResolver } from "@hookform/resolvers/yup";
+import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
+import ApproveDistrubationModal from "./ApproveDistrubationModal";
+import RequestRejectModal from "./RequestRejectModal";
+import { encryptString } from "../../../../Constants/Constants";
+
+const ViewDistributionInvestor = ({ isOpen, onClose,id:exitId }) => {
+  const params = useParams();
+  const toast = useToast();
+  const id = params?.id;
+  const [isCalculateLoading, setIsCalculateLoading] = useState(false);
+  const [isFinalCalculateLoading, setIsFinalCalculateLoading] = useState(false);
+  const [calcualtedData, setCalculatedDate] = useState(null);
+  const [isCalcualtedData, setIsCalcualtedData] = useState(false);
+  const { IODetails } = useContext(GlobalStateContext);
+  const [actionId, setActionId] = useState(false);
+
+  const investorExit = yup.object().shape({
+    amount: yup
+      .string()
+      .required("Amount is required")
+      .test(
+        "max",
+        `Distribution amount should not be greater than IO cash amount ${IODetails?.ioCash}`,
+        function (value) {
+          const { ioCash } = IODetails || {}; // Safely get ioCash
+          if (value && ioCash) {
+            return parseFloat(value) <= parseFloat(ioCash); // Ensure both are compared as numbers
+          }
+          return true; // If ioCash is not available, skip validation
+        }
+      ),
+  });
+
+  const {
+    isOpen: isConfirmOpen,
+    onOpen: onConfirmOpen,
+    onClose: onConfirmClose,
+  } = useDisclosure();
+  const {
+    isOpen: isRejectOpen,
+    onOpen: onRejectOpen,
+    onClose: onRejectClose,
+  } = useDisclosure();
+
+  const {
+    formState: { errors },
+    reset,
+  } = useForm({
+    resolver: yupResolver(investorExit),
+  });
+
+  useEffect(() => {
+    console.log("hiit     useEffectc");
+    // handleCalculate(id, {
+    //   amount: IODetails?.ioMVNAV,
+    // });
+    if (id && IODetails) {
+      handleCalculate(id, {
+        amount: IODetails?.ioMVNAV,
+      });
+     }
+    reset({
+      amount: IODetails?.ioMVNAV,
+    });
+  }, [IODetails, id]);
+
+  const handleCalculate = async (id, data) => {
+    try {
+      const res = await getDistributionInvestment({ id, data });
+      console.log(res?.data?.data);
+
+      if (res?.error?.status === 401) {
+        setIsCalculateLoading(false);
+        setIsCalcualtedData(false);
+      } else if (res?.data?.statusCode === 200) {
+        setCalculatedDate(res?.data?.data);
+        setIsCalculateLoading(false);
+        setIsCalcualtedData(false);
+      }
+    } catch (error) {}
+  };
+
+  const [getDistributionInvestment] = useGetDistributionInvestorMutation();
+
+  // ====================================================[Table Setup]================================================================
+  const tableHeadRow = [
+    "Sr No.",
+    "Client Id",
+    "First name",
+    "Last Name",
+    "Amount",
+    "Holding (%)",
+    "Distriution Amt($)",
+    "Yeild (%)",
+  ];
+
+  const extractedArray = calcualtedData?.data?.map((item, index) => ({
+    id: item?.id,
+    "Sr No.": (
+      <Box
+        w={9}
+        display={"flex"}
+        alignItems={"center"}
+        isTruncated={true}
+        h={25}
+      >
+        <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
+          {index + 1}
+        </Text>
+      </Box>
+    ),
+    "Client Id": (
+      <Box w={90} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
+          {item?.clientId}
+        </Text>
+      </Box>
+    ),
+    "First name": (
+      <Box w={90} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
+          {item?.firstName}
+        </Text>
+      </Box>
+    ),
+    "Last Name": (
+      <Box minW={24} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
+          {item?.lastName}
+        </Text>
+      </Box>
+    ),
+    Amount: (
+      <Box minW={24} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
+          {item?.amount?.toLocaleString(undefined, {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          })}
+        </Text>
+      </Box>
+    ),
+    "Holding (%)": (
+      <Box minW={24} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
+          {item?.investor_holidings?.toLocaleString(undefined, {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          })}
+          %
+        </Text>
+      </Box>
+    ),
+    "Distriution Amt($)": (
+      <Box minW={24} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
+          {item?.distribution_amt?.toLocaleString(undefined, {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          })}
+        </Text>
+      </Box>
+    ),
+    "Yeild (%)": (
+      <Box minW={24} isTruncated={true}>
+        <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
+          {item?.distribution_per?.toLocaleString(undefined, {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          })}
+          %
+        </Text>
+      </Box>
+    ),
+  }));
+
+  const handleClose = () => {
+    onClose();
+    setIsFinalCalculateLoading(false);
+    setIsCalcualtedData(false);
+  };
+  
+
+  return (
+    <Modal size={"xl"} isOpen={isOpen} onClose={handleClose}>
+      <ModalOverlay />
+      <ModalContent maxW={1000}>
+        <ModalHeader fontSize={"md"}>
+          Distribution To Investor Transaction
+        </ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <NormalData
+            emptyMessage={`We don't have any Sponers `}
+            tableHeadRow={tableHeadRow}
+            data={extractedArray}
+          />
+        </ModalBody>
+        {/* ...(localStorage?.getItem("role") !== "Maker" ? ["Status"] : []), */}
+        {localStorage?.getItem("role") !== encryptString(import.meta.env.VITE_VITE_MAKER) &&<ModalFooter pt={0}>
+          <Box display={"flex"} justifyContent={"center"} gap={2}>
+            <Button
+              rounded={"sm"}
+              size={"xs"}
+              textTransform={"inherit"}
+              fontWeight={500}
+              px={3}
+              py={2}
+              onClick={() => {
+                setActionId(id); // Use the `id` variable from params
+                onConfirmOpen();
+              }}
+              colorScheme="forestGreen"
+              variant={"solid"}
+              cursor={"pointer"}
+            >
+              Approve
+            </Button>
+            <Button
+              rounded={"sm"}
+              size={"xs"}
+              textTransform={"inherit"}
+              fontWeight={500}
+              px={3}
+              py={2}
+              onClick={() => {
+                setActionId(id); // Use the `id` variable from params
+                onRejectOpen();
+              }}
+            >
+              Reject
+            </Button>
+          </Box>
+        </ModalFooter>}
+      </ModalContent>
+      <ApproveDistrubationModal
+        isOpen={isConfirmOpen}
+        onClose={onConfirmClose}
+        onBigModalClose={handleClose}
+        id={exitId}
+      />
+      <RequestRejectModal
+        isOpen={isRejectOpen}
+        onClose={onRejectClose}
+        onBigModalClose={handleClose}
+        id={exitId}
+      />
+    </Modal>
+  );
+};
+
+export default ViewDistributionInvestor;
--- a/src/Pages/IO_Management/CreateIO/IOTransaction/ViewExit.jsx
+++ b/src/Pages/IO_Management/CreateIO/IOTransaction/ViewExit.jsx
@@ -0,0 +1,330 @@
+import {
+    Alert,
+    AlertIcon,
+    Box,
+    Button,
+    FormControl,
+    FormErrorMessage,
+    FormLabel,
+    HStack,
+    Input,
+    Modal,
+    ModalBody,
+    ModalCloseButton,
+    ModalContent,
+    ModalFooter,
+    ModalHeader,
+    ModalOverlay,
+    Switch,
+    Table,
+    Tbody,
+    Text,
+    Textarea,
+    Th,
+    Tr,
+    useDisclosure,
+    useToast,
+  } from "@chakra-ui/react";
+  import NormalData from "../../../../Components/DataTable/NormalTable";
+  import { useContext, useState } from "react";
+  import { AddIcon } from "@chakra-ui/icons";
+  import {
+    useExitIOTransactionMutation,
+    useGetDistributedToInvestorMutation,
+    useGetDistributionInvestorMutation,
+    useUpdateExitToInvestorMutation,
+  } from "../../../../Services/io.service";
+  import { useParams } from "react-router-dom";
+  import { useEffect } from "react";
+  import { Controller, useForm } from "react-hook-form";
+  import * as yup from "yup";
+  import { yupResolver } from "@hookform/resolvers/yup";
+  import ToastBox from "../../../../Components/ToastBox";
+  import GlobalStateContext from "../../../../Contexts/GlobalStateContext";
+import ApprovedExit from "./ApprovedExit";
+import RequestRejectModal from "./RequestRejectModal";
+import { encryptString } from "../../../../Constants/Constants";
+  
+  const ViewExit = ({ isOpen, onClose ,id:investerId}) => {
+    const params = useParams();
+    const toast = useToast();
+    const id = params?.id;
+    const [isCalculateLoading, setIsCalculateLoading] = useState(false);
+    const [isFinalCalculateLoading, setIsFinalCalculateLoading] = useState(false);
+    const [calcualtedData, setCalculatedDate] = useState(null);
+    const [isCalcualtedData, setIsCalcualtedData] = useState(false);
+    const { IODetails } = useContext(GlobalStateContext);
+    const [actionId, setActionId] = useState(false);
+
+    const {
+      isOpen: isConfirmOpen,
+      onOpen: onConfirmOpen,
+      onClose: onConfirmClose,
+    } = useDisclosure();
+    const {
+      isOpen: isRejectOpen,
+      onOpen: onRejectOpen,
+      onClose: onRejectClose,
+    } = useDisclosure();
+  
+  
+    const {
+      control,
+      handleSubmit,
+      formState: { errors },
+      reset,
+    } = useForm({
+      resolver: yupResolver(),
+    });
+  
+    useEffect(() => {
+      console.log("hiit     useEffectc");
+     if (id && IODetails) {
+      handleCalculate(id, {
+        amount: IODetails?.ioMVNAV,
+      });
+     }
+      reset({
+        amount: IODetails?.ioMVNAV,
+      });
+    }, [IODetails, id]);
+  
+    const handleCalculate = async (id, data) => {
+      try {
+        
+        const res = await getDistributionInvestment({ id, data });
+        console.log(res?.data?.data);
+  
+        if (res?.error?.status === 401) { 
+          setIsCalculateLoading(false);
+          setIsCalcualtedData(false);
+        } else if (res?.data?.statusCode === 200) {
+          setCalculatedDate(res?.data?.data);
+          setIsCalculateLoading(false);
+          setIsCalcualtedData(true);
+        }
+      } catch (error) {}
+    };
+  
+    const [getDistributionInvestment] = useGetDistributionInvestorMutation();
+  
+    const investor = yup.object().shape({
+      amount: yup.string().required("Amount is required"),
+    });
+  
+    // ====================================================[Table Setup]================================================================
+    const tableHeadRow = [
+      "Sr No.",
+      "Client Id",
+      "First name",
+      "Last Name",
+      "Amount",
+      "Holding (%)",
+      "Exit Amt($)",
+    ];
+
+    
+  
+    const extractedArray = calcualtedData?.data?.map((item, index) => ({
+      id: item?.id,
+      "Sr No.": (
+        <Box
+          w={9}
+          display={"flex"}
+          alignItems={"center"}
+          isTruncated={true}
+          h={25}
+        >
+          <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
+            {index + 1}
+          </Text>
+        </Box>
+      ),
+      "Client Id": (
+        <Box w={100} isTruncated={true}>
+          <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
+            {item?.clientId}
+          </Text>
+        </Box>
+      ),
+      "First name": (
+        <Box minW={24} isTruncated={true}>
+          <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
+            {item?.firstName}
+          </Text>
+        </Box>
+      ),
+      "Last Name": (
+        <Box minW={24} isTruncated={true}>
+          <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
+            {item?.lastName}
+          </Text>
+        </Box>
+      ),
+      Amount: (
+        <Box minW={24} isTruncated={true}>
+          <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
+            {item?.amount?.toLocaleString(undefined, {
+              minimumFractionDigits: 2,
+              maximumFractionDigits: 2,
+            })}
+          </Text>
+        </Box>
+      ),
+      "Holding (%)": (
+  <Box minW={24} isTruncated={true}>
+  <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
+    {item?.investor_holidings?.toLocaleString(undefined, {
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2,
+    })}%
+  </Text>
+  </Box>
+      ),
+      "Exit Amt($)": (
+        <Box minW={24} isTruncated={true}>
+          <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
+            {item?.distribution_amt?.toLocaleString(undefined, {
+              minimumFractionDigits: 2,
+              maximumFractionDigits: 2,
+            })}
+          </Text>
+        </Box>
+      ),
+    }));
+  
+    const onSubmit = async (data) => {
+      setIsCalculateLoading(true);
+  
+      try {
+        const res = await getDistributionInvestment({ id, data });
+        console.log(res?.data?.data);
+  
+        if (res?.error?.status === 401) {
+          toast({
+            render: () => (
+              <ToastBox message={res?.error?.data?.message} status={"error"} />
+            ),
+          });
+          setIsCalculateLoading(false);
+          setIsCalcualtedData(false);
+        } else if (res?.data?.statusCode === 200) {
+          setCalculatedDate(res?.data?.data);
+          toast({
+            render: () => <ToastBox message={res?.data?.message} />,
+          });
+          setIsCalculateLoading(false);
+          setIsCalcualtedData(true);
+        }
+      } catch (error) {}
+    };
+  
+    const handleClose = () => {
+      onClose();
+      setIsFinalCalculateLoading(false);
+      setIsCalcualtedData(false);
+    };
+    
+    console.log(id);
+    
+
+    return (
+      <Modal size={"xl"} isOpen={isOpen} onClose={handleClose} >
+        <ModalOverlay />
+        <ModalContent maxW={1000}>
+          <ModalHeader fontSize={"md"}>Exit Transaction</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+            {/* <Text as="label" mb="5px" fontSize="sm" fontWeight={500}>
+              Amount to Distribute
+            </Text> */}
+            <HStack onSubmit={handleSubmit(onSubmit)} as={"form"} mb={4} alignItems={'center'}>
+              {/* <Input placeholder="$00.00" size={"sm"} className="col" /> */}
+              {/* <FormControl isInvalid={errors.amount} isRequired>*/}
+                <Text textAlign={"right"} fontSize={"sm"}>
+                  Exit Amount :
+                </Text> 
+              <Text
+                textAlign={"start"}
+                bg={"green.100"}
+                p={2}
+                rounded={"md"}
+                fontSize={"sm"}
+                pt={1}
+                pb={1}
+                fontWeight={600}
+              >
+                ${" "}
+                {parseFloat(IODetails?.ioMVNAV || 0).toLocaleString(undefined, {
+                  minimumFractionDigits: 2,
+                  maximumFractionDigits: 2,
+                })}
+              </Text>
+  
+              {/* </FormControl> */}
+            </HStack>
+  
+            {/* {calcualtedData && ( */}
+            <NormalData
+              emptyMessage={`We don't have any Sponers `}
+              tableHeadRow={tableHeadRow}
+              data={extractedArray}
+              // total={<Total />}
+              // isLoading={isLoading}
+            />
+            {/* ) } */}
+          </ModalBody>
+          {localStorage?.getItem("role") !== encryptString(import.meta.env.VITE_VITE_MAKER) && <ModalFooter pt={0}>
+            <Box display={"flex"} justifyContent={"center"} gap={2}>
+                <Button
+                  rounded={"sm"}
+                  size={"xs"}
+                  textTransform={"inherit"}
+                  fontWeight={500}
+                  px={3}
+                  py={2}
+                  onClick={() => {
+                    setActionId(id); // Use the `id` variable from params
+                    onConfirmOpen();
+                  }}
+                  colorScheme="forestGreen"
+                  variant={"solid"}
+                  cursor={"pointer"}
+                >
+                  Approve
+                </Button>
+                <Button
+                  rounded={"sm"}
+                  size={"xs"}
+                  textTransform={"inherit"}
+                  fontWeight={500}
+                  px={3}
+                  py={2}
+                  onClick={() => {
+                    setActionId(id); // Use the `id` variable from params
+                    onRejectOpen();
+                  }}
+                >
+                  Reject
+                </Button>
+            </Box>
+          </ModalFooter>}
+        </ModalContent>
+        <ApprovedExit
+            isOpen={isConfirmOpen}
+            onClose={onConfirmClose}
+            onBigModalClose={onClose}
+            id={investerId}
+        />
+        <RequestRejectModal
+            isOpen={isRejectOpen}
+            onClose={onRejectClose}
+            onBigModalClose={onClose}
+            id={investerId}
+        />
+      </Modal>
+    ); 
+  };
+  
+  export default ViewExit;
+  
--- a/src/Pages/IO_Management/CreateIO/InvestmentDocument.jsx
+++ b/src/Pages/IO_Management/CreateIO/InvestmentDocument.jsx
@@ -33,7 +33,8 @@ import {
 import ToastBox from "../../../Components/ToastBox";
 import { getFileNameFromPath } from "../../../Constants/Constants";
 import { TbFileTypeDocx } from "react-icons/tb";
-import SetDisplayOrder from "./SetDisplayOrder";
+import SetDisplayOrder from "./SetDisplayOrderKeyMerits";
+import SetDisplayOrderIODocuments from "./SetDisplayOrderIODocuments";

 const downloadFile = (filePath, fileName) => {

@@ -134,6 +135,10 @@ const InvestmentDocument = ({ control, errors, enableNextTab, index, }) => {
    item?.documentName?.toLowerCase().includes(searchTerm.toLowerCase())
  );

+    const sortedData = filteredData?.sort(
+      (a, b) => a.displayOrder - b.displayOrder
+    );
+
  const handleView = (id) => {
    setActionId(id);
    onViewOpen();
@@ -168,7 +173,7 @@ const InvestmentDocument = ({ control, errors, enableNextTab, index, }) => {
    }
  };

-  const extractedArray = filteredData?.map((item, index) => ({
+  const extractedArray = sortedData?.map((item, index) => ({
    "Sr.no": (
      <Text
        justifyContent={slideFromRight ? "right" : "left"}
@@ -300,7 +305,7 @@ const InvestmentDocument = ({ control, errors, enableNextTab, index, }) => {
      <Box display="flex" justifyContent="end" mb={4} gap={2}>
        

-        {filteredData?.length !== 0 &&<SetDisplayOrder data={filteredData} />}
+        {filteredData?.length !== 0 &&<SetDisplayOrderIODocuments data={filteredData} />}
        <Button
          leftIcon={<AddIcon />}
          onClick={onOpen}
@@ -358,7 +363,7 @@ const InvestmentDocument = ({ control, errors, enableNextTab, index, }) => {
      <CustomAlertDialog
        onClose={() => setDeleteAlert(false)}
        isOpen={deleteAlert}
-        message="Are you sure you want to delete the sponsor?"
+        message="Are you sure you want to delete the Investment?"
        alertHandler={handleDelete}
        isLoading={isLoading}
      />
--- a/src/Pages/IO_Management/CreateIO/Investors.jsx
+++ b/src/Pages/IO_Management/CreateIO/Investors.jsx
@@ -21,6 +21,7 @@ import {
  Thead,
  Tooltip,
  Tr,
+  keyframes,
  useToast,
 } from "@chakra-ui/react";
 import React, { useContext, useEffect, useState } from "react";
@@ -37,27 +38,32 @@ import { formatCurrency } from "../../../Components/CurrencyInput";
 import { FiRefreshCw } from "react-icons/fi";
 import { useGetIOByIdQuery } from "../../../Services/io.service";
 import { RepeatIcon } from "@chakra-ui/icons";
+import { exportToExcel, exportToExcelNew } from "../../../Constants/Constants";
+import { LuFileSpreadsheet } from "react-icons/lu";
+
+const rotate = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+`;

 const formatDate = (date) => new Date(date).toLocaleDateString(); // Simple date formatter

-const Investors = ({data}) => {
-  const params = useParams()
-  const id = params?.id
+const Investors = ({ data }) => {
+  const params = useParams();
+  const id = params?.id;
  const toast = useToast();
  const { investors, setInvestors, slideFromRight, IODetails } =
    useContext(GlobalStateContext);

+  const [isRefetchLoading, setIsRefetchLoading] = useState(false);

-    console.log(params?.id);  
-    
-    const {
-      data: IObyID,
-      isLoading: IObyIDisLoading,
-      error: IObyIDerror,
-      refetch
-    } = useGetIOByIdQuery(id, { skip: !id });
-    
-
+  const { isLoading: IObyIDisLoading, refetch } = useGetIOByIdQuery(id, {
+    skip: !id,
+  });

  const [searchTerm, setSearchTerm] = useState("");
  const [isLoading, setIsLoading] = useState(true);
@@ -94,19 +100,19 @@ const Investors = ({data}) => {
    0
  );

-  // Table setup
+  // Table setup 
  const tableHeadRow = [
    "Client ID",
-    "First name",
-    "Last name",
-    "Investment amount",
+    "First Name",
+    "Last Name",
+    "Investment Amount",
    "Percentage",
    "Market Value",
    "Return on Investment",
    "Distribution",
    "Distribution Percent",
    "Total Return",
-    "Total return on Investment",
+    "Total Return on Investment",
  ];

  const handleUpdateStatus = debounce((id) => {
@@ -120,16 +126,48 @@ const Investors = ({data}) => {
    });
  }, 300);

+
+
  // Table filter
  const filteredData = IODetails?.investors?.filter((item) => {
+    const clientId = item?.clientReference_id;
    const name = item.firstName;
+    const lastName = item?.lastName
    const searchLower = searchTerm.toLowerCase();
-    const nameMatches = name.toLowerCase().includes(searchLower);
+    const nameMatches = name.toLowerCase().includes(searchLower) || lastName.toLowerCase().includes(searchLower) || clientId.toLowerCase().includes(searchLower);
    return nameMatches;
  });

-  

+  const customHeaders = [
+    { label: "Client ID", key: "clientReference_id" },
+    { label: "First Name", key: "firstName" },  // Nested property
+    { label: "Last Name", key: "lastName" },    // Nested property
+    { label: "Investment amount", key: "InvestedAmount_USD" },     // Nested property
+    { label: "Percentage", key: "Investor_Holidings" }, // Nested property
+    { label: "Market Value", key: "Market_Value" },    // Nested property
+    { label: "Return on Investment", key: "Return_On_Investment" }, // Nested property
+    { label: "Distribution", key: "Distribution_Amt" },                     // Simple property
+    { label: "Distribution Percent", key: "Distribution_Per" },                // Simple property        // Simple property
+    { label: "Total Return", key: "Total_Return" },            // Simple property
+    { label: "Total return on Investment", key: "Total_Return_On_Investment" },    
+  ];
+  
+  const exportInvestorDetails = IODetails?.investors?.map((item, index) => ({
+    "Client ID": item?.clientReference_id, // Keep as string
+    "First Name": item?.firstName,
+    "Last Name": item?.lastName,
+    "Investment Amount": parseFloat(item?.InvestedAmount_USD) || 0, // Convert to float
+    "Percentage": parseFloat(item?.Investor_Holidings) || 0, // Convert to float
+    "Market Value": parseFloat(item?.Market_Value) || 0, // Convert to float
+    "Return on Investment": parseFloat(item?.Return_On_Investment) || 0, // Convert to float
+    "Distribution": parseFloat(item?.Distribution_Amt) || 0, // Convert to float
+    "Distribution Percent": parseFloat(item?.Distribution_Per) || 0, // Convert to float
+    "Total Return": parseFloat(item?.Total_Return) || 0, // Convert to float
+    "Total Return on Investment": parseFloat(item?.Total_Return_On_Investment) || 0, // Convert to float
+  }));
+
+  console.log(exportInvestorDetails);

  const extractedArray = filteredData?.map((item, index) => ({
    id: item?.id,
@@ -144,7 +182,7 @@ const Investors = ({data}) => {
        {item?.clientReference_id}
      </Text>
    ),
-    "First name": (
+    "First Name": (
      <Text
        justifyContent={slideFromRight ? "right" : "center"}
        as={"span"}
@@ -155,7 +193,7 @@ const Investors = ({data}) => {
        {item.firstName}
      </Text>
    ),
-    "Last name": (
+    "Last Name": (
      <Text
        justifyContent={slideFromRight ? "right" : "center"}
        as={"span"}
@@ -166,19 +204,25 @@ const Investors = ({data}) => {
        {item.lastName}
      </Text>
    ),
-    "Investment amount": (
+    "Investment Amount": (
      <Text
-        justifyContent={slideFromRight ? "right" : "center"}
+        justifyContent={slideFromRight ? "right" : "left"}
        as={"span"}
        color={"teal.900"}
        fontWeight={"500"}
        className="d-flex align-items-center web-text-small"
      >
+        <Badge ms={1} colorScheme="green" me={1}>
+          $
+        </Badge>
        {/* {`$${formatCurrency(item.InvestedAmount_USD)}`} */}
-        {`$${parseFloat(item.InvestedAmount_USD||0).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`}
+        {`${parseFloat(item.InvestedAmount_USD || 0).toLocaleString(undefined, {
+          minimumFractionDigits: 2,
+          maximumFractionDigits: 2,
+        })}`}
      </Text>
    ),
-    "Percentage": (
+    Percentage: (
      <Text
        justifyContent={slideFromRight ? "right" : "center"}
        as={"span"}
@@ -191,13 +235,19 @@ const Investors = ({data}) => {
    ),
    "Market Value": (
      <Text
-        justifyContent={slideFromRight ? "right" : "center"}
+        justifyContent={slideFromRight ? "right" : "left"}
        as={"span"}
        color={"teal.900"}
        fontWeight={"500"}
        className="d-flex align-items-center web-text-small"
      >
-        {`$${parseFloat(item.Market_Value ||0).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`}
+        <Badge ms={1} colorScheme="green" me={1}>
+          $
+        </Badge>
+        {`${parseFloat(item.Market_Value || 0).toLocaleString(undefined, {
+          minimumFractionDigits: 2,
+          maximumFractionDigits: 2,
+        })}`}
      </Text>
    ),
    "Return on Investment": (
@@ -212,16 +262,22 @@ const Investors = ({data}) => {
        {item.Return_On_Investment || 0} %
      </Text>
    ),
-    "Distribution": (
+    Distribution: (
      <Text
-        justifyContent={slideFromRight ? "right" : "center"}
+        justifyContent={slideFromRight ? "right" : "left"}
        as={"span"}
        color={"teal.900"}
        fontWeight={"500"}
        className="d-flex align-items-center web-text-small"
      >
+        <Badge ms={1} colorScheme="green" me={1}>
+          $
+        </Badge>
        {/* {`$${item.Distribution_Amt}`} */}
-        {`$${parseFloat(item.Distribution_Amt||0).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`}
+        {`${parseFloat(item.Distribution_Amt || 0).toLocaleString(undefined, {
+          minimumFractionDigits: 2,
+          maximumFractionDigits: 2,
+        })}`}
      </Text>
    ),
    "Distribution Percent": (
@@ -233,22 +289,31 @@ const Investors = ({data}) => {
        className="d-flex align-items-center web-text-small"
      >
        {/* {`$${item.Distribution_Amt}`} */}
-        {`${parseFloat(item.Distribution_Per||0).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })} %`}
+        {`${parseFloat(item.Distribution_Per || 0).toLocaleString(undefined, {
+          minimumFractionDigits: 2,
+          maximumFractionDigits: 2,
+        })} %`}
      </Text>
    ),
    "Total Return": (
      <Text
-        justifyContent={slideFromRight ? "right" : "center"}
+        justifyContent={slideFromRight ? "right" : "left"}
        as={"span"}
        color={"teal.900"}
        fontWeight={"500"}
        className="d-flex align-items-center web-text-small"
      >
+        <Badge ms={1} colorScheme="green" me={1}>
+          $
+        </Badge>
        {/* {`$${formatCurrency(item.Total_Return) || 0}`} */}
-        {`$${parseFloat(item.Total_Return||0).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`}
+        {`${parseFloat(item.Total_Return || 0).toLocaleString(undefined, {
+          minimumFractionDigits: 2,
+          maximumFractionDigits: 2,
+        })}`}
      </Text>
    ),
-    "Total return on Investment": (
+    "Total Return on Investment": (
      <Text
        justifyContent={slideFromRight ? "right" : "center"}
        as={"span"}
@@ -256,7 +321,7 @@ const Investors = ({data}) => {
        fontWeight={"500"}
        className="d-flex align-items-center web-text-small"
      >
-        {item.Total_Return_On_Investment||0} %
+        {item.Total_Return_On_Investment || 0} %
      </Text>
    ),
  }));
@@ -278,7 +343,7 @@ const Investors = ({data}) => {
    return (
      <Table size="sm">
        <Tbody backgroundColor="gray.50">
-          <Tr >
+          <Tr>
            <Th
              textAlign={"center"}
              p={3}
@@ -395,10 +460,16 @@ const Investors = ({data}) => {
    );
  };

+  const handleRefresh = async () => {
+    setIsRefetchLoading(true);
+
+    await refetch();
+    setIsRefetchLoading(false);
+  };
+
+
+console.log(IODetails?.investors);

-  const handleRefresh = () =>{
-    refetch()
-  }

  return (
    <Box {...OPACITY_ON_LOAD} pb={0}>
@@ -408,26 +479,82 @@ const Investors = ({data}) => {
          justifyContent={"space-between"}
          pb={3}
          spacing="24px"
-
        >
-          <span>
-          <Input
-            type="search"
-            width={300}
-            placeholder="Search..."
-            size="sm"
-            rounded="sm"
-            focusBorderColor="green.500"
-            value={searchTerm}
-            onChange={(e) => setSearchTerm(e.target.value)}
-          />
-          <Icon ms={3}    bg={"gray.100"} onClick={handleRefresh} fontWeight={600}  as={RepeatIcon} boxSize={8}  p={2} rounded={'md'} _hover={{bg:'gray.100'}} cursor={'pointer'} />
-          </span>
+          <Box  display={'flex'} gap={3}>
+            <Input
+              type="search"
+              width={300}
+              placeholder="Search..."
+              size="sm"
+              rounded="sm"
+              focusBorderColor="green.500"
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+            />

-          <HStack bg={'#C6F6D5'} ps={4} pe={4} pt={1.5} pb={1.5} rounded={'md'} boxShadow={'sm'} display={"flex"} alignItems={"end"}  flexDirection={'column'} >
-            <Text   fontWeight={600} fontSize={'sm'} as={'span'}>$ {parseFloat(IODetails?.totalAmtInvestmentInUSD).toLocaleString()}</Text>
-            <Text fontWeight={600} color={'gray.500'} fontSize={'xs'} as={'span'}>Total Investment Amount ( USD )</Text>
+          <Button
+              onClick={() =>
+                exportToExcelNew(exportInvestorDetails, "IO Investors Details")
+              }
+              leftIcon={<LuFileSpreadsheet />}
+              colorScheme="forestGreen"
+              size={"sm"}
+              variant={"outline"}
+              rounded={"sm"}
+              fontSize={"xs"}
+              w={100}
+              me={2}
+              isDisabled={exportInvestorDetails?.length === 0}
+            > 
+              Export xls
+            </Button>
+            {/* <Box as="span">
+              <Icon
+                ms={0}
+                animation={
+                  isRefetchLoading ? `${rotate} 1s linear infinite` : "none"
+                }
+                bg={"gray.50"}
+                onClick={handleRefresh}
+                fontWeight={600}
+                as={RepeatIcon}
+                boxSize={8}
+                p={2}
+                rounded={"full"}
+                _hover={{ bg: "gray.100" }}
+                cursor={"pointer"}
+              />
+            </Box> */}
+          </Box>
+
+          <HStack
+            bg={"#C6F6D5"}
+            ps={4}
+            pe={4}
+            pt={1.5}
+            pb={1.5}
+            rounded={"md"}
+            boxShadow={"sm"}
+            display={"flex"}
+            // alignItems={"end"}
+            // flexDirection={"column"}
+            alignItems={"center"}
+          >
+            <Text
+              fontWeight={600}
+              color={"gray.500"}
+              fontSize={"xs"}
+              as={"span"}
+            >
+              Total Investment Amount ( USD )
+            </Text>
            
+            <Text display={'flex'} alignItems={'center'} fontWeight={600} fontSize={"sm"} as={"span"} pt={"2px"}>
+            <Badge p={1} ms={2} fontSize={'md'} colorScheme="green" me={0}>
+              $
+            </Badge>
+              {parseFloat(IODetails?.totalAmtInvestmentInUSD).toLocaleString()}
+            </Text>
          </HStack>
        </HStack>
      </Box>
@@ -436,7 +563,7 @@ const Investors = ({data}) => {
        centered={true}
        emptyMessage={`We don't have any Sponers `}
        tableHeadRow={tableHeadRow}
-        data={extractedArray} 
+        data={extractedArray}
        isLoading={isLoading}
        viewActionId={actionId}
        setViewActionId={setActionId}
--- a/src/Pages/IO_Management/CreateIO/KeyMerits.jsx
+++ b/src/Pages/IO_Management/CreateIO/KeyMerits.jsx
@@ -32,7 +32,7 @@ import {
 import FullscreenLoaders from "../../../Components/Loaders/FullscreenLoaders";
 import ToastBox from "../../../Components/ToastBox";
 import KeyMeritsEdit from "../KeyMeritsEdit";
-import SetDisplayOrder from "./SetDisplayOrder";
+import SetDisplayOrder from "./SetDisplayOrderKeyMerits";

 const KeyMerits = ({ enableNextTab, index, data: prepopData }) => {
  const toast = useToast();
@@ -71,7 +71,7 @@ const KeyMerits = ({ enableNextTab, index, data: prepopData }) => {

  const filteredData = IODetails?.keyMerits?.filter((item) => {
    // Filter by name (case insensitive)
-    const name = item.meritsHeader;
+    const name = item?.meritsHeader;
    const searchLower = searchTerm.toLowerCase();
    const nameMatches = name.toLowerCase().includes(searchLower);

@@ -80,7 +80,7 @@ const KeyMerits = ({ enableNextTab, index, data: prepopData }) => {

  // console.log(filteredData);
  const sortedData = filteredData?.sort(
-    (a, b) => a.displayOder - b.displayOder
+    (a, b) => a.displayOrder - b.displayOrder
  );

  const handleDelete = async () => {
@@ -89,7 +89,7 @@ const KeyMerits = ({ enableNextTab, index, data: prepopData }) => {
      const res = await deleteKeyMerits(actionId);
      if (res?.data?.statusCode === 200) {
        toast({
-          render: () => <ToastBox message={res?.data?.message} />,
+          render: () => <ToastBox message={res?.data?.message} status={"success"}  />,
        });
        setIsBtnLoading(false);
        setDeleteAlert(false);
@@ -97,6 +97,8 @@ const KeyMerits = ({ enableNextTab, index, data: prepopData }) => {
    } catch (error) {}
  };

+
+
  const extractedArray = sortedData?.map((item, index) => ({
    id: item.id,
    "Sr.no": (
--- a/src/Pages/IO_Management/CreateIO/SetDisplayOrderIOArtifactsImages.jsx
+++ b/src/Pages/IO_Management/CreateIO/SetDisplayOrderIOArtifactsImages.jsx
@@ -0,0 +1,189 @@
+import React, { useState, useEffect } from "react";
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalFooter,
+  ModalBody,
+  ModalCloseButton,
+  useDisclosure,
+  Button,
+  Box,
+  Text,
+  Image,
+  HStack,
+  useToast,
+  Link,
+  Badge,
+} from "@chakra-ui/react";
+
+import { AddIcon, DragHandleIcon, ExternalLinkIcon } from "@chakra-ui/icons";
+import DataTable from "../../../Components/DataTable/DataTable";
+import { useSetDisplayOrderIOArtifactsImageMutation } from "../../../Services/io.service";
+import ToastBox from "../../../Components/ToastBox";
+
+const SetDisplayOrderIOArtifactsImages = ({ data,  }) => {
+  console.log(data);
+  const toast = useToast();
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const tableHeadRow = ["", "File Name", "View image"];
+
+  const [extractedArray, setExtractedArray] = useState([]);
+  const [displayOrder, setDisplayOrder] = useState(null);
+  const [resetDisplayOrder] = useSetDisplayOrderIOArtifactsImageMutation();
+
+  // Update state when `data` prop changes
+  useEffect(() => {
+    if (data) {
+      const formattedData = data?.map((item, index) => ({
+        id: item?.id,
+        displayOrder: index + 1, // Add displayOrder property
+        "": (
+          <Box w={"20px"} isTruncated={true}>
+            <DragHandleIcon />
+          </Box>
+        ),
+        "File Name": (
+          <Box isTruncated={true}>
+            <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
+              {item.artifactName}
+            </Text>
+          </Box>
+        ),
+        
+    "View image": (
+      <Text
+        color={"green.500"}
+        justifyContent={"left"}
+        as={"span"}
+        fontWeight={"500"}
+        className="d-flex align-items-center web-text-small"
+      >
+        <Badge
+          px={2}
+          py={0.5}
+          display={"flex"}
+          alignItems={"center"}
+          textTransform={"inherit"}
+          fontWeight={500}
+          colorScheme={"forestGreen"}
+        >
+          <Link
+            href={import.meta.env.VITE_IMAGE_URL + item?.artifactPathName}
+            isExternal
+          >
+            <Box
+              // onClick={() => {
+              //   setImageSrc(item?.artifactPathName);
+              //   onOpenImageViewer();
+              // }}
+              as="span"
+              cursor={"pointer"}
+            >
+              View
+            </Box>{" "}
+            <ExternalLinkIcon />
+          </Link>
+        </Badge>
+      </Text>
+    ),
+      }));
+      setExtractedArray(formattedData);
+    }
+  }, [data]);
+
+  // Log the updated order in the desired format whenever `extractedArray` changes
+  useEffect(() => {
+    const displayOrderArray = extractedArray.map((item, index) => ({
+      id: item.id,
+      displayOrder: index + 1,
+    }));
+    setDisplayOrder(displayOrderArray);
+  }, [extractedArray]);
+
+  const handleSetOrder = async () => {
+    setIsLoading(true);
+    const data = {
+      displayOrder: displayOrder,
+    };
+
+    try {
+      const res = await resetDisplayOrder({ data });
+      console.log(res?.data?.statusCode);
+      if (res?.data?.statusCode === 200) {
+        toast({
+          render: () => <ToastBox message={res?.data?.message} />,
+        });
+        onClose();
+      }
+
+      setIsLoading(false);
+    } catch (error) {
+      console.log(res);
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <Button
+        leftIcon={<AddIcon />}
+        size={"sm"}
+        fontSize={"xs"}
+        rounded={"sm"}
+        variant={"outline"}
+        colorScheme="forestGreen"
+        onClick={onOpen}
+      >
+        Set Display Order
+      </Button>
+
+      <Modal isCentered size={"xl"} isOpen={isOpen} onClose={onClose}>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader fontSize={"lg"}>Set Display Order</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+            <DataTable
+              emptyMessage={`We don't have any Sponsors`}
+              tableHeadRow={tableHeadRow}
+              data={extractedArray}
+              setData={setExtractedArray}
+              isDraggable={true}
+            />
+          </ModalBody>
+
+          <ModalFooter>
+            <Button
+              size={"sm"}
+              fontSize={"xs"}
+              rounded={"sm"}
+              variant={"outline"}
+              colorScheme="forestGreen"
+              mr={3}
+              onClick={onClose}
+            >
+              Reset order
+            </Button>
+            <Button
+              size={"sm"}
+              fontSize={"xs"}
+              rounded={"sm"}
+              colorScheme="forestGreen"
+              variant="solid"
+              onClick={handleSetOrder}
+              isLoading={isLoading}
+            >
+              Set order
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+};
+
+export default SetDisplayOrderIOArtifactsImages;
--- a/src/Pages/IO_Management/CreateIO/SetDisplayOrderIOArtifactsVideo.jsx
+++ b/src/Pages/IO_Management/CreateIO/SetDisplayOrderIOArtifactsVideo.jsx
@@ -0,0 +1,174 @@
+import React, { useState, useEffect } from "react";
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalFooter,
+  ModalBody,
+  ModalCloseButton,
+  useDisclosure,
+  Button,
+  Box,
+  Text,
+  Image,
+  HStack,
+  useToast,
+  Badge,
+  Link,
+} from "@chakra-ui/react";
+
+import { AddIcon, DragHandleIcon, ExternalLinkIcon } from "@chakra-ui/icons";
+import DataTable from "../../../Components/DataTable/DataTable";
+import { useSetDisplayOrderIOArtifactsVideoMutation } from "../../../Services/io.service";
+import ToastBox from "../../../Components/ToastBox";
+
+const SetDisplayOrderIOArtifactsVideo = ({ data,  }) => {
+  const toast = useToast();
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const tableHeadRow = ["", "File Name", "Video streaming URL"];
+
+  const [extractedArray, setExtractedArray] = useState([]);
+  const [displayOrder, setDisplayOrder] = useState(null);
+  const [resetDisplayOrder] = useSetDisplayOrderIOArtifactsVideoMutation();
+
+  // Update state when `data` prop changes
+  useEffect(() => {
+    if (data) {
+      const formattedData = data.map((item, index) => ({
+        id: item?.id,
+        displayOrder: index + 1, // Add displayOrder property
+        "": (
+          <Box w={"20px"} isTruncated={true}>
+            <DragHandleIcon />
+          </Box>
+        ),
+        "File Name": (
+          <Box isTruncated={true}>
+            <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
+              {item.artifactName}
+            </Text>
+          </Box>
+        ),
+        "Video streaming URL": (
+          <Text
+          color={"green.500"}
+          justifyContent={"left"}
+          as={"span"}
+          fontWeight={"500"}
+          className="d-flex align-items-center web-text-small"
+        >
+          <Badge
+            px={2}
+            py={0.5}
+            display={"flex"}
+            alignItems={"center"}
+            textTransform={"inherit"}
+            fontWeight={500}
+            colorScheme={"forestGreen"}
+          >
+            <Link href={item?.artifactStreamingURL} isExternal>
+              <Box as="span">View</Box> <ExternalLinkIcon />
+            </Link>
+          </Badge>
+        </Text>
+        ),
+      }));
+      setExtractedArray(formattedData);
+    }
+  }, [data]);
+
+  // Log the updated order in the desired format whenever `extractedArray` changes
+  useEffect(() => {
+    const displayOrderArray = extractedArray.map((item, index) => ({
+      id: item.id,
+      displayOrder: index + 1,
+    }));
+    setDisplayOrder(displayOrderArray);
+  }, [extractedArray]);
+
+  const handleSetOrder = async () => {
+    setIsLoading(true);
+    const data = {
+      displayOrder: displayOrder,
+    };
+
+    try {
+      const res = await resetDisplayOrder({ data });
+      console.log(res?.data?.statusCode);
+      if (res?.data?.statusCode === 200) {
+        toast({
+          render: () => <ToastBox message={res?.data?.message} />,
+        });
+        onClose();
+      }
+
+      setIsLoading(false);
+    } catch (error) {
+      console.log(res);
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <Button
+        leftIcon={<AddIcon />}
+        size={"sm"}
+        fontSize={"xs"}
+        rounded={"sm"}
+        variant={"outline"}
+        colorScheme="forestGreen"
+        onClick={onOpen}
+      >
+        Set Display Order
+      </Button>
+
+      <Modal isCentered size={"xl"} isOpen={isOpen} onClose={onClose}>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader fontSize={"lg"}>Set Display Order</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+            <DataTable
+              emptyMessage={`We don't have any Sponsors`}
+              tableHeadRow={tableHeadRow}
+              data={extractedArray}
+              setData={setExtractedArray}
+              isDraggable={true}
+            />
+          </ModalBody>
+
+          <ModalFooter>
+            <Button
+              size={"sm"}
+              fontSize={"xs"}
+              rounded={"sm"}
+              variant={"outline"}
+              colorScheme="forestGreen"
+              mr={3}
+              onClick={onClose}
+            >
+              Reset order
+            </Button>
+            <Button
+              size={"sm"}
+              fontSize={"xs"}
+              rounded={"sm"}
+              colorScheme="forestGreen"
+              variant="solid"
+              onClick={handleSetOrder}
+              isLoading={isLoading}
+            >
+              Set order
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+};
+
+export default SetDisplayOrderIOArtifactsVideo;
--- a/src/Pages/IO_Management/CreateIO/SetDisplayOrderIODocuments.jsx
+++ b/src/Pages/IO_Management/CreateIO/SetDisplayOrderIODocuments.jsx
@@ -0,0 +1,165 @@
+import React, { useState, useEffect } from "react";
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalFooter,
+  ModalBody,
+  ModalCloseButton,
+  useDisclosure,
+  Button,
+  Box,
+  Text,
+  Image,
+  HStack,
+  useToast,
+} from "@chakra-ui/react";
+
+import { AddIcon, DragHandleIcon } from "@chakra-ui/icons";
+import DataTable from "../../../Components/DataTable/DataTable";
+import { useSetDisplayOrderIODocumentsMutation } from "../../../Services/io.service";
+import ToastBox from "../../../Components/ToastBox";
+import { GrDocumentPdf } from "react-icons/gr";
+import { TbFileTypeDocx } from "react-icons/tb";
+
+const SetDisplayOrderIODocuments = ({ data,  }) => {
+  const toast = useToast();
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const tableHeadRow = ["", "Type", "File name"];
+
+  const [extractedArray, setExtractedArray] = useState([]);
+  const [displayOrder, setDisplayOrder] = useState(null);
+  const [resetDisplayOrder] = useSetDisplayOrderIODocumentsMutation();
+
+  // Update state when `data` prop changes
+  useEffect(() => {
+    if (data) {
+      const formattedData = data.map((item, index) => ({
+        id: item?.id,
+        displayOrder: index + 1, // Add displayOrder property
+        "": (
+          <Box maxW={"20px"} isTruncated={true}>
+            <DragHandleIcon />
+          </Box>
+        ),
+        Type: (
+          <Text
+        justifyContent={"left"}
+        as="span"
+        color="teal.900"
+        fontWeight="500"
+        className="d-flex align-items-center"
+        fontSize={"xl"}
+      >
+        {item.documentType === "application/pdf" ? (
+          <GrDocumentPdf />
+        ) : (
+          <TbFileTypeDocx fontSize={21} />
+        )}
+      </Text>
+        ),
+        "File name": (
+        <Text as="span" color="teal.900" fontWeight="500">
+          {item.documentName}
+        </Text>
+        ),
+      }));
+      setExtractedArray(formattedData);
+    }
+  }, [data]);
+
+  // Log the updated order in the desired format whenever `extractedArray` changes
+  useEffect(() => {
+    const displayOrderArray = extractedArray.map((item, index) => ({
+      id: item.id,
+      displayOrder: index + 1,
+    }));
+    setDisplayOrder(displayOrderArray);
+  }, [extractedArray]);
+
+  const handleSetOrder = async () => {
+    setIsLoading(true);
+    const data = {
+      displayOrder: displayOrder,
+    };
+
+    try {
+      const res = await resetDisplayOrder({ data });
+      console.log(res?.data?.statusCode);
+      if (res?.data?.statusCode === 200) {
+        toast({
+          render: () => <ToastBox message={res?.data?.message} />,
+        });
+        onClose();
+      }
+
+      setIsLoading(false);
+    } catch (error) {
+      console.log(res);
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <Button
+        leftIcon={<AddIcon />}
+        size={"sm"}
+        fontSize={"xs"}
+        rounded={"sm"}
+        variant={"outline"}
+        colorScheme="forestGreen"
+        onClick={onOpen}
+      >
+        Set Display Order
+      </Button>
+
+      <Modal isCentered size={"xl"} isOpen={isOpen} onClose={onClose}>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader fontSize={"lg"}>Set Display Order</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+            <DataTable
+              emptyMessage={`We don't have any Sponsors`}
+              tableHeadRow={tableHeadRow}
+              data={extractedArray}
+              setData={setExtractedArray}
+              isDraggable={true}
+            />
+          </ModalBody>
+
+          <ModalFooter>
+            <Button
+              size={"sm"}
+              fontSize={"xs"}
+              rounded={"sm"}
+              variant={"outline"}
+              colorScheme="forestGreen"
+              mr={3}
+              onClick={onClose}
+            >
+              Reset order
+            </Button>
+            <Button
+              size={"sm"}
+              fontSize={"xs"}
+              rounded={"sm"}
+              colorScheme="forestGreen"
+              variant="solid"
+              onClick={handleSetOrder}
+              isLoading={isLoading}
+            >
+              Set order
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+};
+
+export default SetDisplayOrderIODocuments;
--- a/src/Pages/IO_Management/CreateIO/SetDisplayOrderKeyMerits.jsx
+++ b/src/Pages/IO_Management/CreateIO/SetDisplayOrderKeyMerits.jsx
@@ -21,7 +21,7 @@ import DataTable from "../../../Components/DataTable/DataTable";
 import { useSetDisplayOrderMutation } from "../../../Services/io.service";
 import ToastBox from "../../../Components/ToastBox";

-const SetDisplayOrder = ({ data }) => {
+const SetDisplayOrderKeyMerits = ({ data,  }) => {
  const toast = useToast();
  const { isOpen, onOpen, onClose } = useDisclosure();
  const [isLoading, setIsLoading] = useState(false);
@@ -57,6 +57,10 @@ const SetDisplayOrder = ({ data }) => {
          </Box>
        ),
        Icon: item?.icon?.iconFilePath && (
+          <Box
+          display={"flex"}
+          justifyContent={"center"}
+          alignItems={"center"}>
          <Image
            rounded={"md"}
            display={"flex"}
@@ -66,7 +70,7 @@ const SetDisplayOrder = ({ data }) => {
            src={import.meta.env.VITE_IMAGE_URL + item?.icon?.iconFilePath}
            w={8}
            h={8}
-          />
+          /></Box>
        ),
      }));
      setExtractedArray(formattedData);
@@ -164,4 +168,4 @@ const SetDisplayOrder = ({ data }) => {
  );
 };

-export default SetDisplayOrder;
+export default SetDisplayOrderKeyMerits;
--- a/Show More
+++ b/Show More