From 26b8d10f69a494eb579fbec76fffa567b75d8d44 Mon Sep 17 00:00:00 2001
From: "nshutiparfait99@gmail.com" <nshutiparfait99@gmail.com>
Date: Thu, 28 Sep 2023 11:42:33 +0200
Subject: [PATCH] style: enhance UI/UX on the super admin dashboard

- Changed Organization page table design to use the DataTable component.
- Fixed some styling and formatting errors
- Fixed grammatical errors in code.

[Fixes #65]
---
 package-lock.json                | 117 +++++-----
 src/components/Organizations.tsx | 367 +++++++++++++------------------
 2 files changed, 216 insertions(+), 268 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 3d633cf9a..e072ba9dd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5300,13 +5300,13 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/aproba/-/aproba-2.0.0.tgz",
       "integrity": "sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==",
-      "devOptional": true
+      "optional": true
     },
     "node_modules/are-we-there-yet": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-2.0.0.tgz",
       "integrity": "sha512-Ci/qENmwHnsYo9xKIcUJN5LeDKdJ6R1Z1j9V/J5wyq8nh/mYPEpIKJbBZXtZjG04HiK7zV/p6Vs9952MrMeUIw==",
-      "devOptional": true,
+      "optional": true,
       "dependencies": {
         "delegates": "^1.0.0",
         "readable-stream": "^3.6.0"
@@ -6269,7 +6269,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
       "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==",
-      "devOptional": true,
+      "optional": true,
       "engines": {
         "node": ">=10"
       }
@@ -6514,7 +6514,7 @@
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz",
       "integrity": "sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==",
-      "devOptional": true,
+      "optional": true,
       "bin": {
         "color-support": "bin.js"
       }
@@ -6622,7 +6622,7 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
       "integrity": "sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==",
-      "devOptional": true
+      "optional": true
     },
     "node_modules/content-disposition": {
       "version": "0.5.4",
@@ -7135,7 +7135,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
       "integrity": "sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==",
-      "devOptional": true
+      "optional": true
     },
     "node_modules/depd": {
       "version": "2.0.0",
@@ -8994,7 +8994,7 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
       "integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==",
-      "devOptional": true,
+      "optional": true,
       "dependencies": {
         "minipass": "^3.0.0"
       },
@@ -9006,7 +9006,7 @@
       "version": "3.3.6",
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
       "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
-      "devOptional": true,
+      "optional": true,
       "dependencies": {
         "yallist": "^4.0.0"
       },
@@ -9018,7 +9018,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-      "devOptional": true
+      "optional": true
     },
     "node_modules/fs-monkey": {
       "version": "1.0.4",
@@ -9061,7 +9061,7 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/gauge/-/gauge-3.0.2.tgz",
       "integrity": "sha512-+5J6MS/5XksCuXq++uFRsnUd7Ovu1XenbeuIuNRJxYWjgQbPuFhT14lAvsWfqfAmnwluf1OwMjz39HjfLPci0Q==",
-      "devOptional": true,
+      "optional": true,
       "dependencies": {
         "aproba": "^1.0.3 || ^2.0.0",
         "color-support": "^1.1.2",
@@ -9081,13 +9081,13 @@
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
       "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "devOptional": true
+      "optional": true
     },
     "node_modules/gauge/node_modules/is-fullwidth-code-point": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
       "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-      "devOptional": true,
+      "optional": true,
       "engines": {
         "node": ">=8"
       }
@@ -9096,7 +9096,7 @@
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
       "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "devOptional": true,
+      "optional": true,
       "dependencies": {
         "emoji-regex": "^8.0.0",
         "is-fullwidth-code-point": "^3.0.0",
@@ -9279,8 +9279,9 @@
       "license": "MIT"
     },
     "node_modules/graphql": {
-      "version": "16.7.1",
-      "license": "MIT",
+      "version": "16.8.1",
+      "resolved": "https://registry.npmjs.org/graphql/-/graphql-16.8.1.tgz",
+      "integrity": "sha512-59LZHPdGZVh695Ud9lRzPBVTtlX9ZCV150Er2W43ro37wVof0ctenSaskPPjN7lVTIN8mSZt8PHUNKZuNQUuxw==",
       "engines": {
         "node": "^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0"
       }
@@ -9400,7 +9401,7 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
       "integrity": "sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==",
-      "devOptional": true
+      "optional": true
     },
     "node_modules/hash-base": {
       "version": "3.1.0",
@@ -13820,7 +13821,7 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-5.0.0.tgz",
       "integrity": "sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==",
-      "devOptional": true,
+      "optional": true,
       "engines": {
         "node": ">=8"
       }
@@ -13829,7 +13830,7 @@
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-2.1.2.tgz",
       "integrity": "sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==",
-      "devOptional": true,
+      "optional": true,
       "dependencies": {
         "minipass": "^3.0.0",
         "yallist": "^4.0.0"
@@ -13842,7 +13843,7 @@
       "version": "3.3.6",
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
       "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
-      "devOptional": true,
+      "optional": true,
       "dependencies": {
         "yallist": "^4.0.0"
       },
@@ -13854,7 +13855,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-      "devOptional": true
+      "optional": true
     },
     "node_modules/mkdirp": {
       "version": "0.5.6",
@@ -17469,7 +17470,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-5.0.1.tgz",
       "integrity": "sha512-AqZtDUWOMKs1G/8lwylVjrdYgqA4d9nu8hc+0gzRxlDb1I10+FHBGMXs6aiQHFdCUUlqH99MUMuLfzWDNDtfxw==",
-      "devOptional": true,
+      "optional": true,
       "dependencies": {
         "are-we-there-yet": "^2.0.0",
         "console-control-strings": "^1.1.0",
@@ -19844,7 +19845,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
       "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
-      "devOptional": true
+      "optional": true
     },
     "node_modules/setprototypeof": {
       "version": "1.2.0",
@@ -20582,7 +20583,7 @@
       "version": "6.1.15",
       "resolved": "https://registry.npmjs.org/tar/-/tar-6.1.15.tgz",
       "integrity": "sha512-/zKt9UyngnxIT/EAGYuxaMYgOIJiP81ab9ZfkILq4oNLPFX50qyYmu7jRj9qeXoxmJHjGlbH0+cm2uy1WCs10A==",
-      "devOptional": true,
+      "optional": true,
       "dependencies": {
         "chownr": "^2.0.0",
         "fs-minipass": "^2.0.0",
@@ -20599,7 +20600,7 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
       "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
-      "devOptional": true,
+      "optional": true,
       "bin": {
         "mkdirp": "bin/cmd.js"
       },
@@ -20611,7 +20612,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-      "devOptional": true
+      "optional": true
     },
     "node_modules/terminal-link": {
       "version": "2.1.1",
@@ -21936,7 +21937,7 @@
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz",
       "integrity": "sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==",
-      "devOptional": true,
+      "optional": true,
       "dependencies": {
         "string-width": "^1.0.2 || 2 || 3 || 4"
       }
@@ -21945,13 +21946,13 @@
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
       "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "devOptional": true
+      "optional": true
     },
     "node_modules/wide-align/node_modules/is-fullwidth-code-point": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
       "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-      "devOptional": true,
+      "optional": true,
       "engines": {
         "node": ">=8"
       }
@@ -21960,7 +21961,7 @@
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
       "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "devOptional": true,
+      "optional": true,
       "dependencies": {
         "emoji-regex": "^8.0.0",
         "is-fullwidth-code-point": "^3.0.0",
@@ -25481,13 +25482,13 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/aproba/-/aproba-2.0.0.tgz",
       "integrity": "sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==",
-      "devOptional": true
+      "optional": true
     },
     "are-we-there-yet": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-2.0.0.tgz",
       "integrity": "sha512-Ci/qENmwHnsYo9xKIcUJN5LeDKdJ6R1Z1j9V/J5wyq8nh/mYPEpIKJbBZXtZjG04HiK7zV/p6Vs9952MrMeUIw==",
-      "devOptional": true,
+      "optional": true,
       "requires": {
         "delegates": "^1.0.0",
         "readable-stream": "^3.6.0"
@@ -26118,7 +26119,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
       "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==",
-      "devOptional": true
+      "optional": true
     },
     "chrome-trace-event": {
       "version": "1.0.3"
@@ -26274,7 +26275,7 @@
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz",
       "integrity": "sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==",
-      "devOptional": true
+      "optional": true
     },
     "colorette": {
       "version": "2.0.20",
@@ -26350,7 +26351,7 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
       "integrity": "sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==",
-      "devOptional": true
+      "optional": true
     },
     "content-disposition": {
       "version": "0.5.4",
@@ -26683,7 +26684,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
       "integrity": "sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==",
-      "devOptional": true
+      "optional": true
     },
     "depd": {
       "version": "2.0.0"
@@ -27911,7 +27912,7 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
       "integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==",
-      "devOptional": true,
+      "optional": true,
       "requires": {
         "minipass": "^3.0.0"
       },
@@ -27920,7 +27921,7 @@
           "version": "3.3.6",
           "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
           "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
-          "devOptional": true,
+          "optional": true,
           "requires": {
             "yallist": "^4.0.0"
           }
@@ -27929,7 +27930,7 @@
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
           "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-          "devOptional": true
+          "optional": true
         }
       }
     },
@@ -27960,7 +27961,7 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/gauge/-/gauge-3.0.2.tgz",
       "integrity": "sha512-+5J6MS/5XksCuXq++uFRsnUd7Ovu1XenbeuIuNRJxYWjgQbPuFhT14lAvsWfqfAmnwluf1OwMjz39HjfLPci0Q==",
-      "devOptional": true,
+      "optional": true,
       "requires": {
         "aproba": "^1.0.3 || ^2.0.0",
         "color-support": "^1.1.2",
@@ -27977,19 +27978,19 @@
           "version": "8.0.0",
           "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
           "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-          "devOptional": true
+          "optional": true
         },
         "is-fullwidth-code-point": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
           "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-          "devOptional": true
+          "optional": true
         },
         "string-width": {
           "version": "4.2.3",
           "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
           "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-          "devOptional": true,
+          "optional": true,
           "requires": {
             "emoji-regex": "^8.0.0",
             "is-fullwidth-code-point": "^3.0.0",
@@ -28099,7 +28100,9 @@
       "dev": true
     },
     "graphql": {
-      "version": "16.7.1"
+      "version": "16.8.1",
+      "resolved": "https://registry.npmjs.org/graphql/-/graphql-16.8.1.tgz",
+      "integrity": "sha512-59LZHPdGZVh695Ud9lRzPBVTtlX9ZCV150Er2W43ro37wVof0ctenSaskPPjN7lVTIN8mSZt8PHUNKZuNQUuxw=="
     },
     "graphql-tag": {
       "version": "2.12.6",
@@ -28160,7 +28163,7 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
       "integrity": "sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==",
-      "devOptional": true
+      "optional": true
     },
     "hash-base": {
       "version": "3.1.0",
@@ -30931,13 +30934,13 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-5.0.0.tgz",
       "integrity": "sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==",
-      "devOptional": true
+      "optional": true
     },
     "minizlib": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-2.1.2.tgz",
       "integrity": "sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==",
-      "devOptional": true,
+      "optional": true,
       "requires": {
         "minipass": "^3.0.0",
         "yallist": "^4.0.0"
@@ -30947,7 +30950,7 @@
           "version": "3.3.6",
           "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
           "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
-          "devOptional": true,
+          "optional": true,
           "requires": {
             "yallist": "^4.0.0"
           }
@@ -30956,7 +30959,7 @@
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
           "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-          "devOptional": true
+          "optional": true
         }
       }
     },
@@ -33387,7 +33390,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-5.0.1.tgz",
       "integrity": "sha512-AqZtDUWOMKs1G/8lwylVjrdYgqA4d9nu8hc+0gzRxlDb1I10+FHBGMXs6aiQHFdCUUlqH99MUMuLfzWDNDtfxw==",
-      "devOptional": true,
+      "optional": true,
       "requires": {
         "are-we-there-yet": "^2.0.0",
         "console-control-strings": "^1.1.0",
@@ -34833,7 +34836,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
       "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
-      "devOptional": true
+      "optional": true
     },
     "setprototypeof": {
       "version": "1.2.0"
@@ -35302,7 +35305,7 @@
       "version": "6.1.15",
       "resolved": "https://registry.npmjs.org/tar/-/tar-6.1.15.tgz",
       "integrity": "sha512-/zKt9UyngnxIT/EAGYuxaMYgOIJiP81ab9ZfkILq4oNLPFX50qyYmu7jRj9qeXoxmJHjGlbH0+cm2uy1WCs10A==",
-      "devOptional": true,
+      "optional": true,
       "requires": {
         "chownr": "^2.0.0",
         "fs-minipass": "^2.0.0",
@@ -35316,13 +35319,13 @@
           "version": "1.0.4",
           "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
           "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
-          "devOptional": true
+          "optional": true
         },
         "yallist": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
           "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-          "devOptional": true
+          "optional": true
         }
       }
     },
@@ -36116,7 +36119,7 @@
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz",
       "integrity": "sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==",
-      "devOptional": true,
+      "optional": true,
       "requires": {
         "string-width": "^1.0.2 || 2 || 3 || 4"
       },
@@ -36125,19 +36128,19 @@
           "version": "8.0.0",
           "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
           "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-          "devOptional": true
+          "optional": true
         },
         "is-fullwidth-code-point": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
           "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-          "devOptional": true
+          "optional": true
         },
         "string-width": {
           "version": "4.2.3",
           "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
           "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-          "devOptional": true,
+          "optional": true,
           "requires": {
             "emoji-regex": "^8.0.0",
             "is-fullwidth-code-point": "^3.0.0",
diff --git a/src/components/Organizations.tsx b/src/components/Organizations.tsx
index f8ef35c19..6bdfb63bb 100644
--- a/src/components/Organizations.tsx
+++ b/src/components/Organizations.tsx
@@ -11,7 +11,7 @@ import Button from './Buttons';
 import { toast } from 'react-toastify';
 import { Icon } from '@iconify/react';
 
-import DataTable from '../../components/DataTable';
+import DataTable from '../components/DataTable'
 
 export interface Admin {
   id: string;
@@ -65,6 +65,82 @@ export const RegisterNewOrganization = gql`
   }
 `;
 
+function ActionButtons({
+    getData,
+    setData,
+    removeInviteModel,
+    removeDeleteModel,
+    approveModel,
+    rejectModel,
+    ...props
+  }: any) {
+    const checkStatus = getData?.getOrganizations[props.row.index].status
+    return (
+        <div className="flex relative flex-row align-middle justify-center items-center">
+            {checkStatus == 'active' ? (
+                <>
+                    <div
+                        //   data-testid="traineeIcon"
+                        onClick={() => {
+                            setData(getData?.getOrganizations[props.row.index]);
+                            console.log(getData?.getOrganizations[props.row.index])
+                            removeInviteModel();
+                        }}
+                    >
+                        <Icon
+                            icon="mdi:refresh"
+                            // className="mr-2"
+                            width="30"
+                            height="30"
+                            cursor="pointer"
+                            color="#148fb6"
+                        />
+                    </div>
+                    <div
+                        //   data-testid="updateIcon"
+                        onClick={() => {
+                            setData(getData?.getOrganizations[props.row.index]);
+                            removeDeleteModel();
+                        }}
+                    >
+                        <Icon
+                            icon="mdi:close-circle-outline"
+                            // className="mr-2"
+                            width="30"
+                            height="30"
+                            cursor="pointer"
+                            color="#148fb6"
+                        />
+                    </div>
+                </>
+            ) : (
+                <>
+                    <Button
+                        variant="primary"
+                        size="sm"
+                        onClick={() => {
+                            setData(getData?.getOrganizations[props.row.index]);
+                            approveModel();
+                        }}
+                    >
+                        Approve
+                    </Button>
+                    <Button
+                        variant="primary"
+                        size="sm"
+                        onClick={() => {
+                            setData(getData?.getOrganizations[props.row.index]);
+                            rejectModel();
+                        }}
+                    >
+                        Reject
+                    </Button>
+                </>
+            )}
+        </div>
+    );
+  }
+
 const Organizations = () => {
   useDocumentTitle('Organizations');
   const { t } = useTranslation();
@@ -76,7 +152,7 @@ const Organizations = () => {
     refetch: getRefetch,
   }: {
     data?: {
-      getOrganizations?: Organization[];
+      getOrganizations: Organization[];
     };
     loading: boolean;
     error?: any;
@@ -86,23 +162,26 @@ const Organizations = () => {
   const [createOrganizationModel, setCreateOrganizationModel] = useState(false);
   const [deleteOrganizationModel, setDeleteOrganizationModel] = useState(false);
   const [showActions, setShowActions] = useState(false);
-  const [removeTraineeModel, setRemoveTraineeModel] = useState(false);
+  const [sendInviteModel, setSendInviteModel] = useState(false);
   const [approveOpen, setApproveOpen] = useState(false);
   const [rejectOpen, setRejectOpen] = useState(false);
   const [isLoad, setIsLoad] = useState(false);
   const [data, setData] = useState({
     id: '',
     name: '',
-    email: '',
+    admin: {
+        id:'',
+        email:''
+    },
     description: '',
   });
 
   const handleShowActions = () => {
     setShowActions(!showActions);
   };
-  const removeTraineeMod = () => {
-    let newState = !removeTraineeModel;
-    setRemoveTraineeModel(newState);
+  const removeInviteModel = () => {
+    let newState = !sendInviteModel;
+    setSendInviteModel(newState);
   };
 
   const approveModel = () => {
@@ -182,7 +261,7 @@ const Organizations = () => {
     });
   }
 
-  const teamColumns = [
+  const organizationColumns = [
     { Header: t('name'), accessor: 'name' },
     { Header: t('Admin'), accessor: 'adminEmail' },
     { Header: t('Description'), accessor: 'description' },
@@ -191,18 +270,26 @@ const Organizations = () => {
     {
       Header: t('action'),
       accessor: '',
-      // Cell: (props: any) =>
-      //   ActionButtons({
-      //     getData,
-      //     setCurrentTeam,
-      //     setUpdateTeamModal,
-      //     setDeleteTeamModal,
-      //     setTeamTrainneModal,
-      //     ...props,
-      //   }),
+      Cell: (props: any) =>
+        ActionButtons({
+          getData,
+          setData,
+          removeInviteModel,
+          removeDeleteModel,
+          approveModel,
+          rejectModel,
+          ...props,
+        }),
     },
   ];
 
+  const organizationData = getData?.getOrganizations.map(({ name, description, admin, status }) => ({
+    name,
+    adminEmail: admin?.email,
+    description,
+    status,
+  }));
+
   return (
     <>
       {/* =========================== Start:: CreateOrganizationModel =============================== */}
@@ -215,14 +302,14 @@ const Organizations = () => {
 
       {/* =========================== Start::  delete Session Model =============================== */}
       <div
-        className={`min-h-full w-screen z-30 bg-black bg-opacity-30 backdrop-blur-sm absolute flex items-center justify-center px-4 ${
+        className={`h-screen w-screen z-20 bg-black bg-opacity-30 backdrop-blur-sm absolute flex items-center justify-center px-4 ${
           deleteOrganizationModel === true ? 'block' : 'hidden'
         }`}
       >
         <div className="bg-white dark:bg-dark-bg w-full sm:w-3/4 md:w-1/2  xl:w-4/12 rounded-lg p-4 pb-8">
           <div className="card-title w-full flex  flex-wrap justify-center items-center  ">
             <h3 className="font-bold text-xl dark:text-white text-center w-11/12">
-              {t('DeleteOrganization')}
+              {t('Delete Organization')}
             </h3>
             <hr className=" bg-primary border-b my-3 w-full" />
           </div>
@@ -230,7 +317,7 @@ const Organizations = () => {
             <form className=" py-3 px-8">
               <div>
                 <h2 className="text-base dark:text-white text-center m-4">
-                  {t('reallyRemoveOrganization')}
+                  {t('Are you sure you want to permanently delete this organization?')}
                 </h2>
               </div>
               <div className="w-full flex justify-between">
@@ -253,7 +340,7 @@ const Organizations = () => {
                     deleteOrganization(data.id);
                     setTimeout(() => {
                       removeDeleteModel();
-                    }, 3000);
+                    }, 2000);
                   }}
                   loading={isLoad}
                 >
@@ -267,183 +354,16 @@ const Organizations = () => {
       </div>
       {/* =========================== End::  delete Session Model =============================== */}
 
-      <div className="bg-light-bg dark:bg-dark-frame-bg min-h-screen">
-        <div className="flex items-left pb-8">
-          <div className="flex gap-2">
-            <Button
-              variant="primary"
-              size="lg"
-              style="m-0"
-              onClick={removeModel}
-              data-testid="removeModel"
-            >
-              {' '}
-              {t('Organization')} +{' '}
-            </Button>
-          </div>
-        </div>
-        <div className="">
-          <div className="bg-white dark:bg-dark-bg shadow-lg px-5 py-8 rounded-md w-full lg:w-[80%] ">
-            <div className=" flex items-center justify-between pb-6">
-              <div>
-                <h2 className="text-gray-800 dark:text-white font-semibold">
-                  {t('Organization List')}
-                </h2>
-              </div>
-            </div>
-            <div>
-              <div className="-mx-4 sm:-mx-8 px-4 sm:px-8 py-4 overflow-x-auto ">
-                <div className="inline-block w-full lg:min-w-full shadow rounded-lg overflow-hidden">
-                  <table className="min-w-full leading-normal ">
-                    <thead>
-                      <tr>
-                        <th className="p-6 border-b-2 border-gray-200 bg-gray-100 dark:bg-neutral-600 text-left text-xs font-semibold text-gray-600 dark:text-white uppercase tracking-wider">
-                          {t('name')}
-                        </th>
-                        <th className="px-5  border-b-2 border-gray-200 bg-gray-100 dark:bg-neutral-600 text-left text-xs font-semibold text-gray-600 dark:text-white uppercase tracking-wider">
-                          {t('Admin')}
-                        </th>
-                        <th className="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 dark:bg-neutral-600 text-left text-xs font-semibold text-gray-600 dark:text-white uppercase tracking-wider">
-                          {t('Description')}
-                        </th>
-                        <th className="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 dark:bg-neutral-600 text-left text-xs font-semibold text-gray-600 dark:text-white uppercase tracking-wider">
-                          {t('Status')}
-                        </th>
-                        <th className="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 dark:bg-neutral-600 text-left text-xs font-semibold text-gray-600 dark:text-white uppercase tracking-wider">
-                          {t('Actions')}
-                        </th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {getData?.getOrganizations?.map(
-                        ({ id, name, description, admin, status }) => {
-                          return (
-                            <tr key={id}>
-                              <td className="px-5 py-5 border-b border-gray-200 bg-white dark:bg-dark-bg text-sm">
-                                <div className="flex items-center">
-                                  <div>
-                                    <p className="text-gray-900 dark:text-white whitespace-no-wrap">
-                                      {name}
-                                    </p>
-                                  </div>
-                                </div>
-                              </td>
-                              <td className="px-5 py-5 border-b border-gray-200 bg-white dark:bg-dark-bg text-sm">
-                                <p className="text-gray-900 dark:text-white whitespace-no-wrap">
-                                  {admin.email}
-                                </p>
-                              </td>
-                              <td className="px-5 py-5 border-b border-gray-200 bg-white dark:bg-dark-bg text-sm">
-                                <p className="text-gray-900 dark:text-white whitespace-no-wrap break-words">
-                                  {description}
-                                </p>
-                              </td>
-                              <td className="px-5 py-5 border-b border-gray-200 bg-white dark:bg-dark-bg text-sm">
-                                <p className="text-gray-900 dark:text-white whitespace-no-wrap break-words">
-                                  {status}
-                                </p>
-                              </td>
-                              <td className="px-5 py-5 border-b border-gray-200 bg-white dark:bg-dark-bg text-sm">
-                                <p className="flex gap-5 text-gray-900 dark:text-white whitespace-no-wrap break-words">
-                                  {status == 'active' ? (
-                                    <>
-                                      <Icon
-                                        icon="mdi:refresh"
-                                        width="30"
-                                        height="30"
-                                        cursor="pointer"
-                                        color="#148fb6"
-                                        /* istanbul ignore next */
-                                        onClick={() => {
-                                          setData({
-                                            id: id,
-                                            name: name,
-                                            email: admin.email,
-                                            description: description,
-                                          });
-                                          removeTraineeMod();
-                                        }}
-                                      />
-                                      <Icon
-                                        icon="mdi:close-circle-outline"
-                                        width="30"
-                                        height="30"
-                                        cursor="pointer"
-                                        color="#148fb6"
-                                        /* istanbul ignore next */
-                                        onClick={() => {
-                                          setData({
-                                            id: id,
-                                            name: name,
-                                            email: admin.email,
-                                            description: description,
-                                          });
-                                          removeDeleteModel();
-                                        }}
-                                      />
-                                    </>
-                                  ) : (
-                                    <>
-                                      <Button
-                                        variant="primary"
-                                        size="sm"
-                                        onClick={() => {
-                                          setData({
-                                            id: id,
-                                            name: name,
-                                            email: admin.email,
-                                            description: description,
-                                          });
-
-                                          approveModel();
-                                        }}
-                                      >
-                                        {t('Approve')}
-                                      </Button>
-
-                                      <Button
-                                        variant="primary"
-                                        size="sm"
-                                        onClick={() => {
-                                          setData({
-                                            id: id,
-                                            name: name,
-                                            email: admin.email,
-                                            description: description,
-                                          });
-
-                                          rejectModel();
-                                        }}
-                                      >
-                                        {t('Reject')}
-                                      </Button>
-                                    </>
-                                  )}
-                                </p>
-                              </td>
-                            </tr>
-                          );
-                        },
-                      )}
-                    </tbody>
-                  </table>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* =========================== Start::  RemoveTraineeModel =============================== */}
+        {/* =========================== Start::  SendInviteModel =============================== */}
 
-      <div
-        className={`h-screen w-screen z-20 bg-black bg-opacity-30 backdrop-blur-sm absolute flex items-center justify-center  px-4 ${
-          removeTraineeModel === true ? 'block' : 'hidden'
-        }`}
-      >
+        <div
+            className={`min-h-full w-screen fixed z-30 bg-black bg-opacity-30 backdrop-blur-sm absolute flex items-center justify-center px-4 ${
+                sendInviteModel === true ? 'block' : 'hidden'
+            }`}
+        >
         <div className="bg-white dark:bg-dark-bg w-full sm:w-3/4  xl:w-4/12 rounded-lg p-4 pb-8">
           <div className="card-title w-full flex  flex-wrap justify-center items-center  ">
-            <h3 className="font-bold text-sm dark:text-white text-center w-11/12 ">
+            <h3 className="font-bold text-xl dark:text-white text-center w-11/12">
               {t('Send Invitation')}
             </h3>
             <hr className=" bg-primary border-b my-3 w-full" />
@@ -464,7 +384,7 @@ const Organizations = () => {
                   variant="info"
                   size="sm"
                   style="w-[30%] md:w-1/4 text-sm font-sans"
-                  onClick={() => removeTraineeMod()}
+                  onClick={() => removeInviteModel()}
                 >
                   {t('Cancel')}
                 </Button>
@@ -476,12 +396,12 @@ const Organizations = () => {
                   onClick={() => {
                     addOrganization({
                       name: data?.name,
-                      email: data.email,
+                      email: data.admin.email,
                       description: data.description,
                     });
                     setTimeout(() => {
-                      removeTraineeMod();
-                    }, 5000);
+                      removeInviteModel();
+                    }, 2000);
                   }}
                   loading={loading}
                 >
@@ -492,7 +412,7 @@ const Organizations = () => {
           </div>
         </div>
       </div>
-      {/* =========================== End::  RemoveTraineeModel =============================== */}
+      {/* =========================== End::  SendInviteModel =============================== */}
 
       {/* =========================== Start::  ApproveMode =============================== */}
 
@@ -503,8 +423,8 @@ const Organizations = () => {
       >
         <div className="bg-white dark:bg-dark-bg w-full sm:w-3/4  xl:w-4/12 rounded-lg p-4 pb-8">
           <div className="card-title w-full flex  flex-wrap justify-center items-center  ">
-            <h3 className="font-bold text-sm dark:text-white text-center w-11/12 ">
-              {t('Send Invitation')}
+            <h3 className="font-bold text-xl dark:text-white text-center w-11/12">
+              {t('Approve New Organization Request')}
             </h3>
             <hr className=" bg-primary border-b my-3 w-full" />
           </div>
@@ -512,7 +432,7 @@ const Organizations = () => {
             <form className=" py-3 px-8">
               <div className="card-title w-full flex  flex-wrap justify-center items-center  ">
                 <h3 className="font-bold text-sm dark:text-white text-center w-11/12 ">
-                  {t('Are you sure you want to Approve this organization?')}
+                  {t('Are you sure you want to approve this organization?')}
                 </h3>
               </div>
 
@@ -535,13 +455,13 @@ const Organizations = () => {
                     setIsLoad(true);
                     ApproveOrganization({
                       name: data?.name,
-                      email: data.email,
+                      email: data.admin.email,
                       description: data.description,
                     });
 
                     setTimeout(() => {
                       approveModel();
-                    }, 5000);
+                    }, 2000);
                   }}
                   loading={isLoad}
                 >
@@ -563,16 +483,16 @@ const Organizations = () => {
       >
         <div className="bg-white dark:bg-dark-bg w-full sm:w-3/4  xl:w-4/12 rounded-lg p-4 pb-8">
           <div className="card-title w-full flex  flex-wrap justify-center items-center  ">
-            <h3 className="font-bold text-sm dark:text-white text-center w-11/12 ">
-              {t('Send Invitation')}
-            </h3>
+            <h3 className="font-bold text-xl dark:text-white text-center w-11/12">
+              {t('Reject New Organization Request')}
+            </h3> 
             <hr className=" bg-primary border-b my-3 w-full" />
           </div>
           <div className="card-body">
             <form className=" py-3 px-8">
               <div className="card-title w-full flex  flex-wrap justify-center items-center  ">
                 <h3 className="font-bold text-sm dark:text-white text-center w-11/12 ">
-                  {t('Are you sure you want to Reject this organization?')}
+                  {t('Are you sure you want to reject this organization?')}
                 </h3>
               </div>
 
@@ -595,13 +515,13 @@ const Organizations = () => {
                     setIsLoad(true);
                     RejectOrganization({
                       name: data?.name,
-                      email: data.email,
+                      email: data.admin.email,
                       description: data.description,
                     });
 
                     setTimeout(() => {
                       rejectModel();
-                    }, 5000);
+                    }, 2000);
                   }}
                   loading={isLoad}
                 >
@@ -613,6 +533,31 @@ const Organizations = () => {
         </div>
       </div>
       {/* =========================== End::  RejectModal =============================== */}
+
+      <div className="bg-light-bg dark:bg-dark-frame-bg min-h-screen">
+        <div className="flex items-left pb-8">
+          <div className="flex gap-2">
+            <Button
+              variant="primary"
+              size="lg"
+              style="m-0"
+              onClick={removeModel}
+              data-testid="removeModel"
+            >
+              {' '}
+              {t('Organization')} +{' '}
+            </Button>
+          </div>
+        </div>
+        <div className="">
+          <DataTable
+            columns={organizationColumns}
+            data={organizationData ? (organizationData as [any]) : []}
+            title={t('Organizations list')}
+            loading={getLoading}
+          />
+        </div>
+      </div>
     </>
   );
 };