diff --git a/package-lock.json b/package-lock.json
index 5be40a9a..ac204637 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2066,6 +2066,614 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/@firebase/ai": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/@firebase/ai/-/ai-1.4.1.tgz",
+      "integrity": "sha512-bcusQfA/tHjUjBTnMx6jdoPMpDl3r8K15Z+snHz9wq0Foox0F/V+kNLXucEOHoTL2hTc9l+onZCyBJs2QoIC3g==",
+      "peer": true,
+      "dependencies": {
+        "@firebase/app-check-interop-types": "0.3.3",
+        "@firebase/component": "0.6.18",
+        "@firebase/logger": "0.4.4",
+        "@firebase/util": "1.12.1",
+        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x",
+        "@firebase/app-types": "0.x"
+      }
+    },
+    "node_modules/@firebase/analytics": {
+      "version": "0.10.17",
+      "resolved": "https://registry.npmjs.org/@firebase/analytics/-/analytics-0.10.17.tgz",
+      "integrity": "sha512-n5vfBbvzduMou/2cqsnKrIes4auaBjdhg8QNA2ZQZ59QgtO2QiwBaXQZQE4O4sgB0Ds1tvLgUUkY+pwzu6/xEg==",
+      "peer": true,
+      "dependencies": {
+        "@firebase/component": "0.6.18",
+        "@firebase/installations": "0.6.18",
+        "@firebase/logger": "0.4.4",
+        "@firebase/util": "1.12.1",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x"
+      }
+    },
+    "node_modules/@firebase/analytics-compat": {
+      "version": "0.2.23",
+      "resolved": "https://registry.npmjs.org/@firebase/analytics-compat/-/analytics-compat-0.2.23.tgz",
+      "integrity": "sha512-3AdO10RN18G5AzREPoFgYhW6vWXr3u+OYQv6pl3CX6Fky8QRk0AHurZlY3Q1xkXO0TDxIsdhO3y65HF7PBOJDw==",
+      "peer": true,
+      "dependencies": {
+        "@firebase/analytics": "0.10.17",
+        "@firebase/analytics-types": "0.8.3",
+        "@firebase/component": "0.6.18",
+        "@firebase/util": "1.12.1",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.x"
+      }
+    },
+    "node_modules/@firebase/analytics-types": {
+      "version": "0.8.3",
+      "resolved": "https://registry.npmjs.org/@firebase/analytics-types/-/analytics-types-0.8.3.tgz",
+      "integrity": "sha512-VrIp/d8iq2g501qO46uGz3hjbDb8xzYMrbu8Tp0ovzIzrvJZ2fvmj649gTjge/b7cCCcjT0H37g1gVtlNhnkbg==",
+      "peer": true
+    },
+    "node_modules/@firebase/app": {
+      "version": "0.13.2",
+      "resolved": "https://registry.npmjs.org/@firebase/app/-/app-0.13.2.tgz",
+      "integrity": "sha512-jwtMmJa1BXXDCiDx1vC6SFN/+HfYG53UkfJa6qeN5ogvOunzbFDO3wISZy5n9xgYFUrEP6M7e8EG++riHNTv9w==",
+      "peer": true,
+      "dependencies": {
+        "@firebase/component": "0.6.18",
+        "@firebase/logger": "0.4.4",
+        "@firebase/util": "1.12.1",
+        "idb": "7.1.1",
+        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@firebase/app-check": {
+      "version": "0.10.1",
+      "resolved": "https://registry.npmjs.org/@firebase/app-check/-/app-check-0.10.1.tgz",
+      "integrity": "sha512-MgNdlms9Qb0oSny87pwpjKush9qUwCJhfmTJHDfrcKo4neLGiSeVE4qJkzP7EQTIUFKp84pbTxobSAXkiuQVYQ==",
+      "peer": true,
+      "dependencies": {
+        "@firebase/component": "0.6.18",
+        "@firebase/logger": "0.4.4",
+        "@firebase/util": "1.12.1",
+        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x"
+      }
+    },
+    "node_modules/@firebase/app-check-compat": {
+      "version": "0.3.26",
+      "resolved": "https://registry.npmjs.org/@firebase/app-check-compat/-/app-check-compat-0.3.26.tgz",
+      "integrity": "sha512-PkX+XJMLDea6nmnopzFKlr+s2LMQGqdyT2DHdbx1v1dPSqOol2YzgpgymmhC67vitXVpNvS3m/AiWQWWhhRRPQ==",
+      "peer": true,
+      "dependencies": {
+        "@firebase/app-check": "0.10.1",
+        "@firebase/app-check-types": "0.5.3",
+        "@firebase/component": "0.6.18",
+        "@firebase/logger": "0.4.4",
+        "@firebase/util": "1.12.1",
+        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.x"
+      }
+    },
+    "node_modules/@firebase/app-check-interop-types": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/@firebase/app-check-interop-types/-/app-check-interop-types-0.3.3.tgz",
+      "integrity": "sha512-gAlxfPLT2j8bTI/qfe3ahl2I2YcBQ8cFIBdhAQA4I2f3TndcO+22YizyGYuttLHPQEpWkhmpFW60VCFEPg4g5A==",
+      "peer": true
+    },
+    "node_modules/@firebase/app-check-types": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/@firebase/app-check-types/-/app-check-types-0.5.3.tgz",
+      "integrity": "sha512-hyl5rKSj0QmwPdsAxrI5x1otDlByQ7bvNvVt8G/XPO2CSwE++rmSVf3VEhaeOR4J8ZFaF0Z0NDSmLejPweZ3ng==",
+      "peer": true
+    },
+    "node_modules/@firebase/app-compat": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@firebase/app-compat/-/app-compat-0.4.2.tgz",
+      "integrity": "sha512-LssbyKHlwLeiV8GBATyOyjmHcMpX/tFjzRUCS1jnwGAew1VsBB4fJowyS5Ud5LdFbYpJeS+IQoC+RQxpK7eH3Q==",
+      "peer": true,
+      "dependencies": {
+        "@firebase/app": "0.13.2",
+        "@firebase/component": "0.6.18",
+        "@firebase/logger": "0.4.4",
+        "@firebase/util": "1.12.1",
+        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@firebase/app-types": {
+      "version": "0.9.3",
+      "resolved": "https://registry.npmjs.org/@firebase/app-types/-/app-types-0.9.3.tgz",
+      "integrity": "sha512-kRVpIl4vVGJ4baogMDINbyrIOtOxqhkZQg4jTq3l8Lw6WSk0xfpEYzezFu+Kl4ve4fbPl79dvwRtaFqAC/ucCw==",
+      "peer": true
+    },
+    "node_modules/@firebase/auth-compat": {
+      "version": "0.5.28",
+      "resolved": "https://registry.npmjs.org/@firebase/auth-compat/-/auth-compat-0.5.28.tgz",
+      "integrity": "sha512-HpMSo/cc6Y8IX7bkRIaPPqT//Jt83iWy5rmDWeThXQCAImstkdNo3giFLORJwrZw2ptiGkOij64EH1ztNJzc7Q==",
+      "peer": true,
+      "dependencies": {
+        "@firebase/auth": "1.10.8",
+        "@firebase/auth-types": "0.13.0",
+        "@firebase/component": "0.6.18",
+        "@firebase/util": "1.12.1",
+        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.x"
+      }
+    },
+    "node_modules/@firebase/auth-compat/node_modules/@firebase/auth": {
+      "version": "1.10.8",
+      "resolved": "https://registry.npmjs.org/@firebase/auth/-/auth-1.10.8.tgz",
+      "integrity": "sha512-GpuTz5ap8zumr/ocnPY57ZanX02COsXloY6Y/2LYPAuXYiaJRf6BAGDEdRq1BMjP93kqQnKNuKZUTMZbQ8MNYA==",
+      "peer": true,
+      "dependencies": {
+        "@firebase/component": "0.6.18",
+        "@firebase/logger": "0.4.4",
+        "@firebase/util": "1.12.1",
+        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x",
+        "@react-native-async-storage/async-storage": "^1.18.1"
+      },
+      "peerDependenciesMeta": {
+        "@react-native-async-storage/async-storage": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@firebase/auth-interop-types": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/@firebase/auth-interop-types/-/auth-interop-types-0.2.4.tgz",
+      "integrity": "sha512-JPgcXKCuO+CWqGDnigBtvo09HeBs5u/Ktc2GaFj2m01hLarbxthLNm7Fk8iOP1aqAtXV+fnnGj7U28xmk7IwVA==",
+      "peer": true
+    },
+    "node_modules/@firebase/auth-types": {
+      "version": "0.13.0",
+      "resolved": "https://registry.npmjs.org/@firebase/auth-types/-/auth-types-0.13.0.tgz",
+      "integrity": "sha512-S/PuIjni0AQRLF+l9ck0YpsMOdE8GO2KU6ubmBB7P+7TJUCQDa3R1dlgYm9UzGbbePMZsp0xzB93f2b/CgxMOg==",
+      "peer": true,
+      "peerDependencies": {
+        "@firebase/app-types": "0.x",
+        "@firebase/util": "1.x"
+      }
+    },
+    "node_modules/@firebase/component": {
+      "version": "0.6.18",
+      "resolved": "https://registry.npmjs.org/@firebase/component/-/component-0.6.18.tgz",
+      "integrity": "sha512-n28kPCkE2dL2U28fSxZJjzPPVpKsQminJ6NrzcKXAI0E/lYC8YhfwpyllScqVEvAI3J2QgJZWYgrX+1qGI+SQQ==",
+      "peer": true,
+      "dependencies": {
+        "@firebase/util": "1.12.1",
+        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@firebase/data-connect": {
+      "version": "0.3.10",
+      "resolved": "https://registry.npmjs.org/@firebase/data-connect/-/data-connect-0.3.10.tgz",
+      "integrity": "sha512-VMVk7zxIkgwlVQIWHOKFahmleIjiVFwFOjmakXPd/LDgaB/5vzwsB5DWIYo+3KhGxWpidQlR8geCIn39YflJIQ==",
+      "peer": true,
+      "dependencies": {
+        "@firebase/auth-interop-types": "0.2.4",
+        "@firebase/component": "0.6.18",
+        "@firebase/logger": "0.4.4",
+        "@firebase/util": "1.12.1",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x"
+      }
+    },
+    "node_modules/@firebase/database": {
+      "version": "1.0.20",
+      "resolved": "https://registry.npmjs.org/@firebase/database/-/database-1.0.20.tgz",
+      "integrity": "sha512-H9Rpj1pQ1yc9+4HQOotFGLxqAXwOzCHsRSRjcQFNOr8lhUt6LeYjf0NSRL04sc4X0dWe8DsCvYKxMYvFG/iOJw==",
+      "peer": true,
+      "dependencies": {
+        "@firebase/app-check-interop-types": "0.3.3",
+        "@firebase/auth-interop-types": "0.2.4",
+        "@firebase/component": "0.6.18",
+        "@firebase/logger": "0.4.4",
+        "@firebase/util": "1.12.1",
+        "faye-websocket": "0.11.4",
+        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@firebase/database-compat": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmjs.org/@firebase/database-compat/-/database-compat-2.0.11.tgz",
+      "integrity": "sha512-itEsHARSsYS95+udF/TtIzNeQ0Uhx4uIna0sk4E0wQJBUnLc/G1X6D7oRljoOuwwCezRLGvWBRyNrugv/esOEw==",
+      "peer": true,
+      "dependencies": {
+        "@firebase/component": "0.6.18",
+        "@firebase/database": "1.0.20",
+        "@firebase/database-types": "1.0.15",
+        "@firebase/logger": "0.4.4",
+        "@firebase/util": "1.12.1",
+        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@firebase/database-types": {
+      "version": "1.0.15",
+      "resolved": "https://registry.npmjs.org/@firebase/database-types/-/database-types-1.0.15.tgz",
+      "integrity": "sha512-XWHJ0VUJ0k2E9HDMlKxlgy/ZuTa9EvHCGLjaKSUvrQnwhgZuRU5N3yX6SZ+ftf2hTzZmfRkv+b3QRvGg40bKNw==",
+      "peer": true,
+      "dependencies": {
+        "@firebase/app-types": "0.9.3",
+        "@firebase/util": "1.12.1"
+      }
+    },
+    "node_modules/@firebase/firestore": {
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/@firebase/firestore/-/firestore-4.8.0.tgz",
+      "integrity": "sha512-QSRk+Q1/CaabKyqn3C32KSFiOdZpSqI9rpLK5BHPcooElumOBooPFa6YkDdiT+/KhJtel36LdAacha9BptMj2A==",
+      "peer": true,
+      "dependencies": {
+        "@firebase/component": "0.6.18",
+        "@firebase/logger": "0.4.4",
+        "@firebase/util": "1.12.1",
+        "@firebase/webchannel-wrapper": "1.0.3",
+        "@grpc/grpc-js": "~1.9.0",
+        "@grpc/proto-loader": "^0.7.8",
+        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x"
+      }
+    },
+    "node_modules/@firebase/firestore-compat": {
+      "version": "0.3.53",
+      "resolved": "https://registry.npmjs.org/@firebase/firestore-compat/-/firestore-compat-0.3.53.tgz",
+      "integrity": "sha512-qI3yZL8ljwAYWrTousWYbemay2YZa+udLWugjdjju2KODWtLG94DfO4NALJgPLv8CVGcDHNFXoyQexdRA0Cz8Q==",
+      "peer": true,
+      "dependencies": {
+        "@firebase/component": "0.6.18",
+        "@firebase/firestore": "4.8.0",
+        "@firebase/firestore-types": "3.0.3",
+        "@firebase/util": "1.12.1",
+        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.x"
+      }
+    },
+    "node_modules/@firebase/firestore-types": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@firebase/firestore-types/-/firestore-types-3.0.3.tgz",
+      "integrity": "sha512-hD2jGdiWRxB/eZWF89xcK9gF8wvENDJkzpVFb4aGkzfEaKxVRD1kjz1t1Wj8VZEp2LCB53Yx1zD8mrhQu87R6Q==",
+      "peer": true,
+      "peerDependencies": {
+        "@firebase/app-types": "0.x",
+        "@firebase/util": "1.x"
+      }
+    },
+    "node_modules/@firebase/functions": {
+      "version": "0.12.9",
+      "resolved": "https://registry.npmjs.org/@firebase/functions/-/functions-0.12.9.tgz",
+      "integrity": "sha512-FG95w6vjbUXN84Ehezc2SDjGmGq225UYbHrb/ptkRT7OTuCiQRErOQuyt1jI1tvcDekdNog+anIObihNFz79Lg==",
+      "peer": true,
+      "dependencies": {
+        "@firebase/app-check-interop-types": "0.3.3",
+        "@firebase/auth-interop-types": "0.2.4",
+        "@firebase/component": "0.6.18",
+        "@firebase/messaging-interop-types": "0.2.3",
+        "@firebase/util": "1.12.1",
+        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x"
+      }
+    },
+    "node_modules/@firebase/functions-compat": {
+      "version": "0.3.26",
+      "resolved": "https://registry.npmjs.org/@firebase/functions-compat/-/functions-compat-0.3.26.tgz",
+      "integrity": "sha512-A798/6ff5LcG2LTWqaGazbFYnjBW8zc65YfID/en83ALmkhu2b0G8ykvQnLtakbV9ajrMYPn7Yc/XcYsZIUsjA==",
+      "peer": true,
+      "dependencies": {
+        "@firebase/component": "0.6.18",
+        "@firebase/functions": "0.12.9",
+        "@firebase/functions-types": "0.6.3",
+        "@firebase/util": "1.12.1",
+        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.x"
+      }
+    },
+    "node_modules/@firebase/functions-types": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/@firebase/functions-types/-/functions-types-0.6.3.tgz",
+      "integrity": "sha512-EZoDKQLUHFKNx6VLipQwrSMh01A1SaL3Wg6Hpi//x6/fJ6Ee4hrAeswK99I5Ht8roiniKHw4iO0B1Oxj5I4plg==",
+      "peer": true
+    },
+    "node_modules/@firebase/installations": {
+      "version": "0.6.18",
+      "resolved": "https://registry.npmjs.org/@firebase/installations/-/installations-0.6.18.tgz",
+      "integrity": "sha512-NQ86uGAcvO8nBRwVltRL9QQ4Reidc/3whdAasgeWCPIcrhOKDuNpAALa6eCVryLnK14ua2DqekCOX5uC9XbU/A==",
+      "peer": true,
+      "dependencies": {
+        "@firebase/component": "0.6.18",
+        "@firebase/util": "1.12.1",
+        "idb": "7.1.1",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x"
+      }
+    },
+    "node_modules/@firebase/installations-compat": {
+      "version": "0.2.18",
+      "resolved": "https://registry.npmjs.org/@firebase/installations-compat/-/installations-compat-0.2.18.tgz",
+      "integrity": "sha512-aLFohRpJO5kKBL/XYL4tN+GdwEB/Q6Vo9eZOM/6Kic7asSUgmSfGPpGUZO1OAaSRGwF4Lqnvi1f/f9VZnKzChw==",
+      "peer": true,
+      "dependencies": {
+        "@firebase/component": "0.6.18",
+        "@firebase/installations": "0.6.18",
+        "@firebase/installations-types": "0.5.3",
+        "@firebase/util": "1.12.1",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.x"
+      }
+    },
+    "node_modules/@firebase/installations-types": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/@firebase/installations-types/-/installations-types-0.5.3.tgz",
+      "integrity": "sha512-2FJI7gkLqIE0iYsNQ1P751lO3hER+Umykel+TkLwHj6plzWVxqvfclPUZhcKFVQObqloEBTmpi2Ozn7EkCABAA==",
+      "peer": true,
+      "peerDependencies": {
+        "@firebase/app-types": "0.x"
+      }
+    },
+    "node_modules/@firebase/logger": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/@firebase/logger/-/logger-0.4.4.tgz",
+      "integrity": "sha512-mH0PEh1zoXGnaR8gD1DeGeNZtWFKbnz9hDO91dIml3iou1gpOnLqXQ2dJfB71dj6dpmUjcQ6phY3ZZJbjErr9g==",
+      "peer": true,
+      "dependencies": {
+        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@firebase/messaging": {
+      "version": "0.12.22",
+      "resolved": "https://registry.npmjs.org/@firebase/messaging/-/messaging-0.12.22.tgz",
+      "integrity": "sha512-GJcrPLc+Hu7nk+XQ70Okt3M1u1eRr2ZvpMbzbc54oTPJZySHcX9ccZGVFcsZbSZ6o1uqumm8Oc7OFkD3Rn1/og==",
+      "peer": true,
+      "dependencies": {
+        "@firebase/component": "0.6.18",
+        "@firebase/installations": "0.6.18",
+        "@firebase/messaging-interop-types": "0.2.3",
+        "@firebase/util": "1.12.1",
+        "idb": "7.1.1",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x"
+      }
+    },
+    "node_modules/@firebase/messaging-compat": {
+      "version": "0.2.22",
+      "resolved": "https://registry.npmjs.org/@firebase/messaging-compat/-/messaging-compat-0.2.22.tgz",
+      "integrity": "sha512-5ZHtRnj6YO6f/QPa/KU6gryjmX4Kg33Kn4gRpNU6M1K47Gm8kcQwPkX7erRUYEH1mIWptfvjvXMHWoZaWjkU7A==",
+      "peer": true,
+      "dependencies": {
+        "@firebase/component": "0.6.18",
+        "@firebase/messaging": "0.12.22",
+        "@firebase/util": "1.12.1",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.x"
+      }
+    },
+    "node_modules/@firebase/messaging-interop-types": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/@firebase/messaging-interop-types/-/messaging-interop-types-0.2.3.tgz",
+      "integrity": "sha512-xfzFaJpzcmtDjycpDeCUj0Ge10ATFi/VHVIvEEjDNc3hodVBQADZ7BWQU7CuFpjSHE+eLuBI13z5F/9xOoGX8Q==",
+      "peer": true
+    },
+    "node_modules/@firebase/performance": {
+      "version": "0.7.7",
+      "resolved": "https://registry.npmjs.org/@firebase/performance/-/performance-0.7.7.tgz",
+      "integrity": "sha512-JTlTQNZKAd4+Q5sodpw6CN+6NmwbY72av3Lb6wUKTsL7rb3cuBIhQSrslWbVz0SwK3x0ZNcqX24qtRbwKiv+6w==",
+      "peer": true,
+      "dependencies": {
+        "@firebase/component": "0.6.18",
+        "@firebase/installations": "0.6.18",
+        "@firebase/logger": "0.4.4",
+        "@firebase/util": "1.12.1",
+        "tslib": "^2.1.0",
+        "web-vitals": "^4.2.4"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x"
+      }
+    },
+    "node_modules/@firebase/performance-compat": {
+      "version": "0.2.20",
+      "resolved": "https://registry.npmjs.org/@firebase/performance-compat/-/performance-compat-0.2.20.tgz",
+      "integrity": "sha512-XkFK5NmOKCBuqOKWeRgBUFZZGz9SzdTZp4OqeUg+5nyjapTiZ4XoiiUL8z7mB2q+63rPmBl7msv682J3rcDXIQ==",
+      "peer": true,
+      "dependencies": {
+        "@firebase/component": "0.6.18",
+        "@firebase/logger": "0.4.4",
+        "@firebase/performance": "0.7.7",
+        "@firebase/performance-types": "0.2.3",
+        "@firebase/util": "1.12.1",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.x"
+      }
+    },
+    "node_modules/@firebase/performance-types": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/@firebase/performance-types/-/performance-types-0.2.3.tgz",
+      "integrity": "sha512-IgkyTz6QZVPAq8GSkLYJvwSLr3LS9+V6vNPQr0x4YozZJiLF5jYixj0amDtATf1X0EtYHqoPO48a9ija8GocxQ==",
+      "peer": true
+    },
+    "node_modules/@firebase/remote-config": {
+      "version": "0.6.5",
+      "resolved": "https://registry.npmjs.org/@firebase/remote-config/-/remote-config-0.6.5.tgz",
+      "integrity": "sha512-fU0c8HY0vrVHwC+zQ/fpXSqHyDMuuuglV94VF6Yonhz8Fg2J+KOowPGANM0SZkLvVOYpTeWp3ZmM+F6NjwWLnw==",
+      "peer": true,
+      "dependencies": {
+        "@firebase/component": "0.6.18",
+        "@firebase/installations": "0.6.18",
+        "@firebase/logger": "0.4.4",
+        "@firebase/util": "1.12.1",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x"
+      }
+    },
+    "node_modules/@firebase/remote-config-compat": {
+      "version": "0.2.18",
+      "resolved": "https://registry.npmjs.org/@firebase/remote-config-compat/-/remote-config-compat-0.2.18.tgz",
+      "integrity": "sha512-YiETpldhDy7zUrnS8e+3l7cNs0sL7+tVAxvVYU0lu7O+qLHbmdtAxmgY+wJqWdW2c9nDvBFec7QiF58pEUu0qQ==",
+      "peer": true,
+      "dependencies": {
+        "@firebase/component": "0.6.18",
+        "@firebase/logger": "0.4.4",
+        "@firebase/remote-config": "0.6.5",
+        "@firebase/remote-config-types": "0.4.0",
+        "@firebase/util": "1.12.1",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.x"
+      }
+    },
+    "node_modules/@firebase/remote-config-types": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@firebase/remote-config-types/-/remote-config-types-0.4.0.tgz",
+      "integrity": "sha512-7p3mRE/ldCNYt8fmWMQ/MSGRmXYlJ15Rvs9Rk17t8p0WwZDbeK7eRmoI1tvCPaDzn9Oqh+yD6Lw+sGLsLg4kKg==",
+      "peer": true
+    },
+    "node_modules/@firebase/storage": {
+      "version": "0.13.14",
+      "resolved": "https://registry.npmjs.org/@firebase/storage/-/storage-0.13.14.tgz",
+      "integrity": "sha512-xTq5ixxORzx+bfqCpsh+o3fxOsGoDjC1nO0Mq2+KsOcny3l7beyBhP/y1u5T6mgsFQwI1j6oAkbT5cWdDBx87g==",
+      "peer": true,
+      "dependencies": {
+        "@firebase/component": "0.6.18",
+        "@firebase/util": "1.12.1",
+        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x"
+      }
+    },
+    "node_modules/@firebase/storage-compat": {
+      "version": "0.3.24",
+      "resolved": "https://registry.npmjs.org/@firebase/storage-compat/-/storage-compat-0.3.24.tgz",
+      "integrity": "sha512-XHn2tLniiP7BFKJaPZ0P8YQXKiVJX+bMyE2j2YWjYfaddqiJnROJYqSomwW6L3Y+gZAga35ONXUJQju6MB6SOQ==",
+      "peer": true,
+      "dependencies": {
+        "@firebase/component": "0.6.18",
+        "@firebase/storage": "0.13.14",
+        "@firebase/storage-types": "0.8.3",
+        "@firebase/util": "1.12.1",
+        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.x"
+      }
+    },
+    "node_modules/@firebase/storage-types": {
+      "version": "0.8.3",
+      "resolved": "https://registry.npmjs.org/@firebase/storage-types/-/storage-types-0.8.3.tgz",
+      "integrity": "sha512-+Muk7g9uwngTpd8xn9OdF/D48uiQ7I1Fae7ULsWPuKoCH3HU7bfFPhxtJYzyhjdniowhuDpQcfPmuNRAqZEfvg==",
+      "peer": true,
+      "peerDependencies": {
+        "@firebase/app-types": "0.x",
+        "@firebase/util": "1.x"
+      }
+    },
+    "node_modules/@firebase/util": {
+      "version": "1.12.1",
+      "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.12.1.tgz",
+      "integrity": "sha512-zGlBn/9Dnya5ta9bX/fgEoNC3Cp8s6h+uYPYaDieZsFOAdHP/ExzQ/eaDgxD3GOROdPkLKpvKY0iIzr9adle0w==",
+      "hasInstallScript": true,
+      "peer": true,
+      "dependencies": {
+        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@firebase/webchannel-wrapper": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@firebase/webchannel-wrapper/-/webchannel-wrapper-1.0.3.tgz",
+      "integrity": "sha512-2xCRM9q9FlzGZCdgDMJwc0gyUkWFtkosy7Xxr6sFgQwn+wMNIWd7xIvYNauU1r64B5L5rsGKy/n9TKJ0aAFeqQ==",
+      "peer": true
+    },
     "node_modules/@floating-ui/core": {
       "version": "1.6.9",
       "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.9.tgz",
@@ -2167,6 +2775,37 @@
       "resolved": "https://registry.npmjs.org/@gilbarbara/deep-equal/-/deep-equal-0.3.1.tgz",
       "integrity": "sha512-I7xWjLs2YSVMc5gGx1Z3ZG1lgFpITPndpi8Ku55GeEIKpACCPQNS/OTqQbxgTCfq0Ncvcc+CrFov96itVh6Qvw=="
     },
+    "node_modules/@grpc/grpc-js": {
+      "version": "1.9.15",
+      "resolved": "https://registry.npmjs.org/@grpc/grpc-js/-/grpc-js-1.9.15.tgz",
+      "integrity": "sha512-nqE7Hc0AzI+euzUwDAy0aY5hCp10r734gMGRdU+qOPX0XSceI2ULrcXB5U2xSc5VkWwalCj4M7GzCAygZl2KoQ==",
+      "peer": true,
+      "dependencies": {
+        "@grpc/proto-loader": "^0.7.8",
+        "@types/node": ">=12.12.47"
+      },
+      "engines": {
+        "node": "^8.13.0 || >=10.10.0"
+      }
+    },
+    "node_modules/@grpc/proto-loader": {
+      "version": "0.7.15",
+      "resolved": "https://registry.npmjs.org/@grpc/proto-loader/-/proto-loader-0.7.15.tgz",
+      "integrity": "sha512-tMXdRCfYVixjuFK+Hk0Q1s38gV9zDiDJfWL3h1rv4Qc39oILCu1TRTDt7+fGUI8K4G1Fj125Hx/ru3azECWTyQ==",
+      "peer": true,
+      "dependencies": {
+        "lodash.camelcase": "^4.3.0",
+        "long": "^5.0.0",
+        "protobufjs": "^7.2.5",
+        "yargs": "^17.7.2"
+      },
+      "bin": {
+        "proto-loader-gen-types": "build/bin/proto-loader-gen-types.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@headlessui/react": {
       "version": "1.7.15",
       "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.15.tgz",
@@ -3031,6 +3670,70 @@
         "url": "https://opencollective.com/popperjs"
       }
     },
+    "node_modules/@protobufjs/aspromise": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/aspromise/-/aspromise-1.1.2.tgz",
+      "integrity": "sha512-j+gKExEuLmKwvz3OgROXtrJ2UG2x8Ch2YZUxahh+s1F2HZ+wAceUNLkvy6zKCPVRkU++ZWQrdxsUeQXmcg4uoQ==",
+      "peer": true
+    },
+    "node_modules/@protobufjs/base64": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/base64/-/base64-1.1.2.tgz",
+      "integrity": "sha512-AZkcAA5vnN/v4PDqKyMR5lx7hZttPDgClv83E//FMNhR2TMcLUhfRUBHCmSl0oi9zMgDDqRUJkSxO3wm85+XLg==",
+      "peer": true
+    },
+    "node_modules/@protobufjs/codegen": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@protobufjs/codegen/-/codegen-2.0.4.tgz",
+      "integrity": "sha512-YyFaikqM5sH0ziFZCN3xDC7zeGaB/d0IUb9CATugHWbd1FRFwWwt4ld4OYMPWu5a3Xe01mGAULCdqhMlPl29Jg==",
+      "peer": true
+    },
+    "node_modules/@protobufjs/eventemitter": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/eventemitter/-/eventemitter-1.1.0.tgz",
+      "integrity": "sha512-j9ednRT81vYJ9OfVuXG6ERSTdEL1xVsNgqpkxMsbIabzSo3goCjDIveeGv5d03om39ML71RdmrGNjG5SReBP/Q==",
+      "peer": true
+    },
+    "node_modules/@protobufjs/fetch": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/fetch/-/fetch-1.1.0.tgz",
+      "integrity": "sha512-lljVXpqXebpsijW71PZaCYeIcE5on1w5DlQy5WH6GLbFryLUrBD4932W/E2BSpfRJWseIL4v/KPgBFxDOIdKpQ==",
+      "peer": true,
+      "dependencies": {
+        "@protobufjs/aspromise": "^1.1.1",
+        "@protobufjs/inquire": "^1.1.0"
+      }
+    },
+    "node_modules/@protobufjs/float": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/float/-/float-1.0.2.tgz",
+      "integrity": "sha512-Ddb+kVXlXst9d+R9PfTIxh1EdNkgoRe5tOX6t01f1lYWOvJnSPDBlG241QLzcyPdoNTsblLUdujGSE4RzrTZGQ==",
+      "peer": true
+    },
+    "node_modules/@protobufjs/inquire": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/inquire/-/inquire-1.1.0.tgz",
+      "integrity": "sha512-kdSefcPdruJiFMVSbn801t4vFK7KB/5gd2fYvrxhuJYg8ILrmn9SKSX2tZdV6V+ksulWqS7aXjBcRXl3wHoD9Q==",
+      "peer": true
+    },
+    "node_modules/@protobufjs/path": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/path/-/path-1.1.2.tgz",
+      "integrity": "sha512-6JOcJ5Tm08dOHAbdR3GrvP+yUUfkjG5ePsHYczMFLq3ZmMkAD98cDgcT2iA1lJ9NVwFd4tH/iSSoe44YWkltEA==",
+      "peer": true
+    },
+    "node_modules/@protobufjs/pool": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/pool/-/pool-1.1.0.tgz",
+      "integrity": "sha512-0kELaGSIDBKvcgS4zkjz1PeddatrjYcmMWOlAuAPwAeccUrPHdUqo/J6LiymHHEiJT5NrF1UVwxY14f+fy4WQw==",
+      "peer": true
+    },
+    "node_modules/@protobufjs/utf8": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz",
+      "integrity": "sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==",
+      "peer": true
+    },
     "node_modules/@puppeteer/browsers": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/@puppeteer/browsers/-/browsers-2.3.0.tgz",
@@ -3507,10 +4210,30 @@
         "@types/ms": "*"
       }
     },
+    "node_modules/@types/eslint": {
+      "version": "9.6.1",
+      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-9.6.1.tgz",
+      "integrity": "sha512-FXx2pKgId/WyYo2jXw63kk7/+TY7u7AziEJxJAnSFzHlqTAS3Ync6SvgYAN/k4/PQpnnVuzoMuVnByKK2qp0ag==",
+      "peer": true,
+      "dependencies": {
+        "@types/estree": "*",
+        "@types/json-schema": "*"
+      }
+    },
+    "node_modules/@types/eslint-scope": {
+      "version": "3.7.7",
+      "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.7.tgz",
+      "integrity": "sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==",
+      "peer": true,
+      "dependencies": {
+        "@types/eslint": "*",
+        "@types/estree": "*"
+      }
+    },
     "node_modules/@types/estree": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.7.tgz",
-      "integrity": "sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ=="
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
+      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w=="
     },
     "node_modules/@types/estree-jsx": {
       "version": "1.0.5",
@@ -4032,6 +4755,152 @@
         }
       }
     },
+    "node_modules/@webassemblyjs/ast": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.14.1.tgz",
+      "integrity": "sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==",
+      "peer": true,
+      "dependencies": {
+        "@webassemblyjs/helper-numbers": "1.13.2",
+        "@webassemblyjs/helper-wasm-bytecode": "1.13.2"
+      }
+    },
+    "node_modules/@webassemblyjs/floating-point-hex-parser": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.13.2.tgz",
+      "integrity": "sha512-6oXyTOzbKxGH4steLbLNOu71Oj+C8Lg34n6CqRvqfS2O71BxY6ByfMDRhBytzknj9yGUPVJ1qIKhRlAwO1AovA==",
+      "peer": true
+    },
+    "node_modules/@webassemblyjs/helper-api-error": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.13.2.tgz",
+      "integrity": "sha512-U56GMYxy4ZQCbDZd6JuvvNV/WFildOjsaWD3Tzzvmw/mas3cXzRJPMjP83JqEsgSbyrmaGjBfDtV7KDXV9UzFQ==",
+      "peer": true
+    },
+    "node_modules/@webassemblyjs/helper-buffer": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.14.1.tgz",
+      "integrity": "sha512-jyH7wtcHiKssDtFPRB+iQdxlDf96m0E39yb0k5uJVhFGleZFoNw1c4aeIcVUPPbXUVJ94wwnMOAqUHyzoEPVMA==",
+      "peer": true
+    },
+    "node_modules/@webassemblyjs/helper-numbers": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.13.2.tgz",
+      "integrity": "sha512-FE8aCmS5Q6eQYcV3gI35O4J789wlQA+7JrqTTpJqn5emA4U2hvwJmvFRC0HODS+3Ye6WioDklgd6scJ3+PLnEA==",
+      "peer": true,
+      "dependencies": {
+        "@webassemblyjs/floating-point-hex-parser": "1.13.2",
+        "@webassemblyjs/helper-api-error": "1.13.2",
+        "@xtuc/long": "4.2.2"
+      }
+    },
+    "node_modules/@webassemblyjs/helper-wasm-bytecode": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.13.2.tgz",
+      "integrity": "sha512-3QbLKy93F0EAIXLh0ogEVR6rOubA9AoZ+WRYhNbFyuB70j3dRdwH9g+qXhLAO0kiYGlg3TxDV+I4rQTr/YNXkA==",
+      "peer": true
+    },
+    "node_modules/@webassemblyjs/helper-wasm-section": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.14.1.tgz",
+      "integrity": "sha512-ds5mXEqTJ6oxRoqjhWDU83OgzAYjwsCV8Lo/N+oRsNDmx/ZDpqalmrtgOMkHwxsG0iI//3BwWAErYRHtgn0dZw==",
+      "peer": true,
+      "dependencies": {
+        "@webassemblyjs/ast": "1.14.1",
+        "@webassemblyjs/helper-buffer": "1.14.1",
+        "@webassemblyjs/helper-wasm-bytecode": "1.13.2",
+        "@webassemblyjs/wasm-gen": "1.14.1"
+      }
+    },
+    "node_modules/@webassemblyjs/ieee754": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.13.2.tgz",
+      "integrity": "sha512-4LtOzh58S/5lX4ITKxnAK2USuNEvpdVV9AlgGQb8rJDHaLeHciwG4zlGr0j/SNWlr7x3vO1lDEsuePvtcDNCkw==",
+      "peer": true,
+      "dependencies": {
+        "@xtuc/ieee754": "^1.2.0"
+      }
+    },
+    "node_modules/@webassemblyjs/leb128": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.13.2.tgz",
+      "integrity": "sha512-Lde1oNoIdzVzdkNEAWZ1dZ5orIbff80YPdHx20mrHwHrVNNTjNr8E3xz9BdpcGqRQbAEa+fkrCb+fRFTl/6sQw==",
+      "peer": true,
+      "dependencies": {
+        "@xtuc/long": "4.2.2"
+      }
+    },
+    "node_modules/@webassemblyjs/utf8": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.13.2.tgz",
+      "integrity": "sha512-3NQWGjKTASY1xV5m7Hr0iPeXD9+RDobLll3T9d2AO+g3my8xy5peVyjSag4I50mR1bBSN/Ct12lo+R9tJk0NZQ==",
+      "peer": true
+    },
+    "node_modules/@webassemblyjs/wasm-edit": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.14.1.tgz",
+      "integrity": "sha512-RNJUIQH/J8iA/1NzlE4N7KtyZNHi3w7at7hDjvRNm5rcUXa00z1vRz3glZoULfJ5mpvYhLybmVcwcjGrC1pRrQ==",
+      "peer": true,
+      "dependencies": {
+        "@webassemblyjs/ast": "1.14.1",
+        "@webassemblyjs/helper-buffer": "1.14.1",
+        "@webassemblyjs/helper-wasm-bytecode": "1.13.2",
+        "@webassemblyjs/helper-wasm-section": "1.14.1",
+        "@webassemblyjs/wasm-gen": "1.14.1",
+        "@webassemblyjs/wasm-opt": "1.14.1",
+        "@webassemblyjs/wasm-parser": "1.14.1",
+        "@webassemblyjs/wast-printer": "1.14.1"
+      }
+    },
+    "node_modules/@webassemblyjs/wasm-gen": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.14.1.tgz",
+      "integrity": "sha512-AmomSIjP8ZbfGQhumkNvgC33AY7qtMCXnN6bL2u2Js4gVCg8fp735aEiMSBbDR7UQIj90n4wKAFUSEd0QN2Ukg==",
+      "peer": true,
+      "dependencies": {
+        "@webassemblyjs/ast": "1.14.1",
+        "@webassemblyjs/helper-wasm-bytecode": "1.13.2",
+        "@webassemblyjs/ieee754": "1.13.2",
+        "@webassemblyjs/leb128": "1.13.2",
+        "@webassemblyjs/utf8": "1.13.2"
+      }
+    },
+    "node_modules/@webassemblyjs/wasm-opt": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.14.1.tgz",
+      "integrity": "sha512-PTcKLUNvBqnY2U6E5bdOQcSM+oVP/PmrDY9NzowJjislEjwP/C4an2303MCVS2Mg9d3AJpIGdUFIQQWbPds0Sw==",
+      "peer": true,
+      "dependencies": {
+        "@webassemblyjs/ast": "1.14.1",
+        "@webassemblyjs/helper-buffer": "1.14.1",
+        "@webassemblyjs/wasm-gen": "1.14.1",
+        "@webassemblyjs/wasm-parser": "1.14.1"
+      }
+    },
+    "node_modules/@webassemblyjs/wasm-parser": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.14.1.tgz",
+      "integrity": "sha512-JLBl+KZ0R5qB7mCnud/yyX08jWFw5MsoalJ1pQ4EdFlgj9VdXKGuENGsiCIjegI1W7p91rUlcB/LB5yRJKNTcQ==",
+      "peer": true,
+      "dependencies": {
+        "@webassemblyjs/ast": "1.14.1",
+        "@webassemblyjs/helper-api-error": "1.13.2",
+        "@webassemblyjs/helper-wasm-bytecode": "1.13.2",
+        "@webassemblyjs/ieee754": "1.13.2",
+        "@webassemblyjs/leb128": "1.13.2",
+        "@webassemblyjs/utf8": "1.13.2"
+      }
+    },
+    "node_modules/@webassemblyjs/wast-printer": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.14.1.tgz",
+      "integrity": "sha512-kPSSXE6De1XOR820C90RIo2ogvZG+c3KiHzqUoO/F34Y2shGzesfqv7o57xrxovZJH/MetF5UjroJ/R/3isoiw==",
+      "peer": true,
+      "dependencies": {
+        "@webassemblyjs/ast": "1.14.1",
+        "@xtuc/long": "4.2.2"
+      }
+    },
     "node_modules/@webcontainer/api": {
       "version": "1.5.3",
       "resolved": "https://registry.npmjs.org/@webcontainer/api/-/api-1.5.3.tgz",
@@ -4042,6 +4911,18 @@
       "resolved": "https://registry.npmjs.org/@xobotyi/scrollbar-width/-/scrollbar-width-1.9.5.tgz",
       "integrity": "sha512-N8tkAACJx2ww8vFMneJmaAgmjAG1tnVBZJRLRcx061tmsLRZHSEZSLuGWnwPtunsSLvSqXQ2wfp7Mgqg1I+2dQ=="
     },
+    "node_modules/@xtuc/ieee754": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
+      "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==",
+      "peer": true
+    },
+    "node_modules/@xtuc/long": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
+      "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
+      "peer": true
+    },
     "node_modules/accessor-fn": {
       "version": "1.5.3",
       "resolved": "https://registry.npmjs.org/accessor-fn/-/accessor-fn-1.5.3.tgz",
@@ -4051,9 +4932,9 @@
       }
     },
     "node_modules/acorn": {
-      "version": "8.14.1",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.1.tgz",
-      "integrity": "sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==",
+      "version": "8.15.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
+      "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -4061,6 +4942,18 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/acorn-import-phases": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/acorn-import-phases/-/acorn-import-phases-1.0.3.tgz",
+      "integrity": "sha512-jtKLnfoOzm28PazuQ4dVBcE9Jeo6ha1GAJvq3N0LlNOszmTfx+wSycBehn+FN0RnyeR77IBxN/qVYMw0Rlj0Xw==",
+      "peer": true,
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "peerDependencies": {
+        "acorn": "^8.14.0"
+      }
+    },
     "node_modules/acorn-jsx": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
@@ -4965,6 +5858,15 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/chrome-trace-event": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.4.tgz",
+      "integrity": "sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==",
+      "peer": true,
+      "engines": {
+        "node": ">=6.0"
+      }
+    },
     "node_modules/chromium-bidi": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/chromium-bidi/-/chromium-bidi-0.6.3.tgz",
@@ -6029,6 +6931,19 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/enhanced-resolve": {
+      "version": "5.18.2",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.2.tgz",
+      "integrity": "sha512-6Jw4sE1maoRJo3q8MsSIn2onJFbLTOjY9hlx4DZXmOKvLRd1Ok2kXmAGXaafL2+ijsJZ1ClYbl/pmqr9+k4iUQ==",
+      "peer": true,
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/entities": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
@@ -6134,6 +7049,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/es-module-lexer": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.7.0.tgz",
+      "integrity": "sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==",
+      "peer": true
+    },
     "node_modules/es-object-atoms": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
@@ -6689,7 +7610,6 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
       "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
-      "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
         "estraverse": "^5.2.0"
@@ -6736,6 +7656,15 @@
       "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
       "license": "MIT"
     },
+    "node_modules/events": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
+      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
+      "peer": true,
+      "engines": {
+        "node": ">=0.8.x"
+      }
+    },
     "node_modules/extend": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
@@ -6842,6 +7771,18 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/faye-websocket": {
+      "version": "0.11.4",
+      "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.4.tgz",
+      "integrity": "sha512-CzbClwlXAuiRQAlUyfqPgvPoNKTckTPGfwZV4ZdAhVcP2lh9KUxJg2b5GkE7XbjKQ3YJnQ9z6D9ntLAlB+tP8g==",
+      "peer": true,
+      "dependencies": {
+        "websocket-driver": ">=0.5.1"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/fd-slicer": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz",
@@ -6941,6 +7882,66 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/firebase": {
+      "version": "11.10.0",
+      "resolved": "https://registry.npmjs.org/firebase/-/firebase-11.10.0.tgz",
+      "integrity": "sha512-nKBXoDzF0DrXTBQJlZa+sbC5By99ysYU1D6PkMRYknm0nCW7rJly47q492Ht7Ndz5MeYSBuboKuhS1e6mFC03w==",
+      "peer": true,
+      "dependencies": {
+        "@firebase/ai": "1.4.1",
+        "@firebase/analytics": "0.10.17",
+        "@firebase/analytics-compat": "0.2.23",
+        "@firebase/app": "0.13.2",
+        "@firebase/app-check": "0.10.1",
+        "@firebase/app-check-compat": "0.3.26",
+        "@firebase/app-compat": "0.4.2",
+        "@firebase/app-types": "0.9.3",
+        "@firebase/auth": "1.10.8",
+        "@firebase/auth-compat": "0.5.28",
+        "@firebase/data-connect": "0.3.10",
+        "@firebase/database": "1.0.20",
+        "@firebase/database-compat": "2.0.11",
+        "@firebase/firestore": "4.8.0",
+        "@firebase/firestore-compat": "0.3.53",
+        "@firebase/functions": "0.12.9",
+        "@firebase/functions-compat": "0.3.26",
+        "@firebase/installations": "0.6.18",
+        "@firebase/installations-compat": "0.2.18",
+        "@firebase/messaging": "0.12.22",
+        "@firebase/messaging-compat": "0.2.22",
+        "@firebase/performance": "0.7.7",
+        "@firebase/performance-compat": "0.2.20",
+        "@firebase/remote-config": "0.6.5",
+        "@firebase/remote-config-compat": "0.2.18",
+        "@firebase/storage": "0.13.14",
+        "@firebase/storage-compat": "0.3.24",
+        "@firebase/util": "1.12.1"
+      }
+    },
+    "node_modules/firebase/node_modules/@firebase/auth": {
+      "version": "1.10.8",
+      "resolved": "https://registry.npmjs.org/@firebase/auth/-/auth-1.10.8.tgz",
+      "integrity": "sha512-GpuTz5ap8zumr/ocnPY57ZanX02COsXloY6Y/2LYPAuXYiaJRf6BAGDEdRq1BMjP93kqQnKNuKZUTMZbQ8MNYA==",
+      "peer": true,
+      "dependencies": {
+        "@firebase/component": "0.6.18",
+        "@firebase/logger": "0.4.4",
+        "@firebase/util": "1.12.1",
+        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x",
+        "@react-native-async-storage/async-storage": "^1.18.1"
+      },
+      "peerDependenciesMeta": {
+        "@react-native-async-storage/async-storage": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/flat-cache": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz",
@@ -7293,6 +8294,12 @@
         "node": ">= 6"
       }
     },
+    "node_modules/glob-to-regexp": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
+      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
+      "peer": true
+    },
     "node_modules/globals": {
       "version": "13.20.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-13.20.0.tgz",
@@ -7772,6 +8779,12 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/http-parser-js": {
+      "version": "0.5.10",
+      "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.10.tgz",
+      "integrity": "sha512-Pysuw9XpUq5dVc/2SMHpuTY01RFl8fttgcyunjL7eEMhGM3cI4eOmiCycJDVCo/7O7ClfQD3SaI6ftDzqOXYMA==",
+      "peer": true
+    },
     "node_modules/http-proxy-agent": {
       "version": "7.0.2",
       "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
@@ -8580,6 +9593,15 @@
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
       "license": "MIT"
     },
+    "node_modules/loader-runner": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
+      "integrity": "sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==",
+      "peer": true,
+      "engines": {
+        "node": ">=6.11.5"
+      }
+    },
     "node_modules/loader-utils": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
@@ -8630,6 +9652,12 @@
       "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
       "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
     },
+    "node_modules/lodash.camelcase": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
+      "integrity": "sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==",
+      "peer": true
+    },
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@@ -8647,6 +9675,12 @@
       "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
       "integrity": "sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA=="
     },
+    "node_modules/long": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/long/-/long-5.3.2.tgz",
+      "integrity": "sha512-mNAgZ1GmyNhD7AuqnTG3/VQ26o760+ZYBPKjPvugO8+nLbYfX6TVpJPseBvopbdY+qpZ/lKUnmEc1LeZYS3QAA==",
+      "peer": true
+    },
     "node_modules/longest-streak": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/longest-streak/-/longest-streak-3.1.0.tgz",
@@ -9656,6 +10690,12 @@
       "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
       "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw=="
     },
+    "node_modules/monaco-editor": {
+      "version": "0.52.2",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.52.2.tgz",
+      "integrity": "sha512-GEQWEZmfkOGLdd3XK8ryrfWz3AIP8YymVXiPHEdewrUq7mh0qrKrfHLNCXcbB6sTnMLnOZ3ztSiKcciFUkIJwQ==",
+      "peer": true
+    },
     "node_modules/motion-dom": {
       "version": "11.18.1",
       "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-11.18.1.tgz",
@@ -9734,6 +10774,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/neo-async": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
+      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
+      "peer": true
+    },
     "node_modules/netmask": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/netmask/-/netmask-2.0.2.tgz",
@@ -10815,6 +11861,30 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/protobufjs": {
+      "version": "7.5.3",
+      "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-7.5.3.tgz",
+      "integrity": "sha512-sildjKwVqOI2kmFDiXQ6aEB0fjYTafpEvIBs8tOR8qI4spuL9OPROLVu2qZqi/xgCfsHIwVqlaF8JBjWFHnKbw==",
+      "hasInstallScript": true,
+      "peer": true,
+      "dependencies": {
+        "@protobufjs/aspromise": "^1.1.2",
+        "@protobufjs/base64": "^1.1.2",
+        "@protobufjs/codegen": "^2.0.4",
+        "@protobufjs/eventemitter": "^1.1.0",
+        "@protobufjs/fetch": "^1.1.0",
+        "@protobufjs/float": "^1.0.2",
+        "@protobufjs/inquire": "^1.1.0",
+        "@protobufjs/path": "^1.1.2",
+        "@protobufjs/pool": "^1.1.0",
+        "@protobufjs/utf8": "^1.1.0",
+        "@types/node": ">=13.7.0",
+        "long": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/proxy-agent": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/proxy-agent/-/proxy-agent-6.5.0.tgz",
@@ -13275,6 +14345,15 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/tapable": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.2.tgz",
+      "integrity": "sha512-Re10+NauLTMCudc7T5WLFLAwDhQ0JWdrMK+9B2M8zR5hRExKmsRDCBA7/aV/pNJFltmBFO5BAMlQFi/vq3nKOg==",
+      "peer": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/tar-fs": {
       "version": "3.0.8",
       "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-3.0.8.tgz",
@@ -13827,6 +14906,20 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/typescript": {
+      "version": "5.8.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.3.tgz",
+      "integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==",
+      "devOptional": true,
+      "peer": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
     "node_modules/typo-js": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/typo-js/-/typo-js-1.2.3.tgz",
@@ -14185,6 +15278,19 @@
       "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==",
       "license": "MIT"
     },
+    "node_modules/watchpack": {
+      "version": "2.4.4",
+      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.4.tgz",
+      "integrity": "sha512-c5EGNOiyxxV5qmTtAB7rbiXxi1ooX1pQKMLX/MIabJjRA0SJBQOjKF+KSVfHkr9U1cADPon0mRiVe/riyaiDUA==",
+      "peer": true,
+      "dependencies": {
+        "glob-to-regexp": "^0.4.1",
+        "graceful-fs": "^4.1.2"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/web-namespaces": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/web-namespaces/-/web-namespaces-2.0.1.tgz",
@@ -14194,12 +15300,173 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/web-vitals": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-4.2.4.tgz",
+      "integrity": "sha512-r4DIlprAGwJ7YM11VZp4R884m0Vmgr6EAKe3P+kO0PPj3Unqyvv59rczf6UiGcb9Z8QxZVcqKNwv/g0WNdWwsw==",
+      "peer": true
+    },
     "node_modules/webidl-conversions": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
       "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
       "license": "BSD-2-Clause"
     },
+    "node_modules/webpack": {
+      "version": "5.100.1",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.100.1.tgz",
+      "integrity": "sha512-YJB/ESPUe2Locd0NKXmw72Dx8fZQk1gTzI6rc9TAT4+Sypbnhl8jd8RywB1bDsDF9Dy1RUR7gn3q/ZJTd0OZZg==",
+      "peer": true,
+      "dependencies": {
+        "@types/eslint-scope": "^3.7.7",
+        "@types/estree": "^1.0.8",
+        "@types/json-schema": "^7.0.15",
+        "@webassemblyjs/ast": "^1.14.1",
+        "@webassemblyjs/wasm-edit": "^1.14.1",
+        "@webassemblyjs/wasm-parser": "^1.14.1",
+        "acorn": "^8.15.0",
+        "acorn-import-phases": "^1.0.3",
+        "browserslist": "^4.24.0",
+        "chrome-trace-event": "^1.0.2",
+        "enhanced-resolve": "^5.17.2",
+        "es-module-lexer": "^1.2.1",
+        "eslint-scope": "5.1.1",
+        "events": "^3.2.0",
+        "glob-to-regexp": "^0.4.1",
+        "graceful-fs": "^4.2.11",
+        "json-parse-even-better-errors": "^2.3.1",
+        "loader-runner": "^4.2.0",
+        "mime-types": "^2.1.27",
+        "neo-async": "^2.6.2",
+        "schema-utils": "^4.3.2",
+        "tapable": "^2.1.1",
+        "terser-webpack-plugin": "^5.3.11",
+        "watchpack": "^2.4.1",
+        "webpack-sources": "^3.3.3"
+      },
+      "bin": {
+        "webpack": "bin/webpack.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependenciesMeta": {
+        "webpack-cli": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/webpack-sources": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.3.3.tgz",
+      "integrity": "sha512-yd1RBzSGanHkitROoPFd6qsrxt+oFhg/129YzheDGqeustzX0vTZJZsSsQjVQC4yzBQ56K55XU8gaNCtIzOnTg==",
+      "peer": true,
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/webpack/node_modules/ajv": {
+      "version": "8.17.1",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
+      "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
+      "peer": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3",
+        "fast-uri": "^3.0.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/webpack/node_modules/ajv-keywords": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
+      "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
+      "peer": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3"
+      },
+      "peerDependencies": {
+        "ajv": "^8.8.2"
+      }
+    },
+    "node_modules/webpack/node_modules/eslint-scope": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
+      "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
+      "peer": true,
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^4.1.1"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/webpack/node_modules/estraverse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
+      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
+      "peer": true,
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/webpack/node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+      "peer": true
+    },
+    "node_modules/webpack/node_modules/schema-utils": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.3.2.tgz",
+      "integrity": "sha512-Gn/JaSk/Mt9gYubxTtSn/QCV4em9mpAPiR1rqy/Ocu19u/G9J5WWdNoUT4SiV6mFC3y6cxyFcFwdzPM3FgxGAQ==",
+      "peer": true,
+      "dependencies": {
+        "@types/json-schema": "^7.0.9",
+        "ajv": "^8.9.0",
+        "ajv-formats": "^2.1.1",
+        "ajv-keywords": "^5.1.0"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
+    "node_modules/websocket-driver": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz",
+      "integrity": "sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==",
+      "peer": true,
+      "dependencies": {
+        "http-parser-js": ">=0.5.1",
+        "safe-buffer": ">=5.1.0",
+        "websocket-extensions": ">=0.1.1"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/websocket-extensions": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.4.tgz",
+      "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==",
+      "peer": true,
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/whatwg-url": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
diff --git a/src/components/AccountReactivation.jsx b/src/components/AccountReactivation.jsx
new file mode 100644
index 00000000..07149308
--- /dev/null
+++ b/src/components/AccountReactivation.jsx
@@ -0,0 +1,395 @@
+import React, { useState, useEffect } from 'react';
+import request from '@/utils/request';
+
+const AccountReactivation = ({
+  email,
+  accountType,
+  password,
+  deletionInfo,
+  onReactivated,
+  onCancel,
+}) => {
+  const [isReactivating, setIsReactivating] = useState(false);
+  const [notification, setNotification] = useState(null);
+  const [detectedAccountType, setDetectedAccountType] = useState(
+    accountType || 'EMAIL'
+  );
+
+  // Detect account type on mount
+  useEffect(() => {
+    if (accountType) {
+      setDetectedAccountType(accountType);
+    }
+  }, [accountType]);
+
+  const showNotification = (message, type = 'info') => {
+    setNotification({ message, type });
+    setTimeout(() => setNotification(null), 5000);
+  };
+
+  // Calculate deletion deadline
+  const getDeletionInfo = () => {
+    if (!deletionInfo?.scheduledFor) {
+      return {
+        hasDeadline: false,
+        message: 'Your account deletion is pending.',
+      };
+    }
+
+    try {
+      const deadline = new Date(deletionInfo.scheduledFor);
+      const now = new Date();
+      const timeRemaining = deadline.getTime() - now.getTime();
+      const daysRemaining = Math.max(
+        0,
+        Math.ceil(timeRemaining / (1000 * 60 * 60 * 24))
+      );
+      const hoursRemaining = Math.max(
+        0,
+        Math.ceil(timeRemaining / (1000 * 60 * 60))
+      );
+
+      if (timeRemaining > 0) {
+        return {
+          hasDeadline: true,
+          deadline: deadline.toLocaleDateString(),
+          daysRemaining,
+          hoursRemaining,
+          message: `You have ${daysRemaining} day(s) to save your account!`,
+          urgency:
+            daysRemaining <= 1 ? 'high' : daysRemaining <= 3 ? 'medium' : 'low',
+        };
+      } else {
+        return {
+          hasDeadline: false,
+          message: 'Your deletion deadline has passed.',
+        };
+      }
+    } catch (error) {
+      return {
+        hasDeadline: false,
+        message: 'Your account deletion is pending.',
+      };
+    }
+  };
+
+  const deletionData = getDeletionInfo();
+
+  const handleReactivation = async () => {
+    setIsReactivating(true);
+    try {
+      // Validate that we have password for EMAIL accounts
+      if (detectedAccountType === 'EMAIL' && !password) {
+        throw new Error(
+          'Password is required for email accounts. Please try logging in again.'
+        );
+      }
+
+      const requestData = {
+        email: email,
+        accountType: detectedAccountType,
+      };
+
+      // Include password for EMAIL accounts
+      if (detectedAccountType === 'EMAIL' && password) {
+        requestData.password = password;
+      }
+
+      const response = await request(
+        `${process.env.NEXT_PUBLIC_API_URL}/account/reactivate`,
+        'POST',
+        requestData
+      );
+
+      if (response.success) {
+        const successMessage = deletionInfo
+          ? 'Account saved successfully! Your deletion has been cancelled.'
+          : 'Account reactivated successfully!';
+        showNotification(successMessage, 'success');
+
+        // Store the token securely
+        if (response.token) {
+          localStorage.setItem('token', response.token);
+        }
+
+        setTimeout(() => {
+          onReactivated?.(response.token);
+        }, 1500);
+      } else {
+        throw new Error(response.error || 'Failed to reactivate account');
+      }
+    } catch (error) {
+      let errorMessage = error.message || 'Failed to reactivate account.';
+
+      // Handle specific error cases
+      if (errorMessage.includes('Password is required')) {
+        errorMessage =
+          'Password verification failed. Please go back and try logging in again.';
+      } else if (errorMessage.includes('Invalid password')) {
+        errorMessage =
+          'The password you entered is incorrect. Please go back and try again.';
+      }
+
+      showNotification(errorMessage, 'error');
+    } finally {
+      setIsReactivating(false);
+    }
+  };
+
+  const NotificationModal = () => {
+    if (!notification) return null;
+
+    const getIcon = () => {
+      switch (notification.type) {
+        case 'success':
+          return 'fas fa-check-circle text-green-400';
+        case 'error':
+          return 'fas fa-exclamation-circle text-red-400';
+        case 'warning':
+          return 'fas fa-exclamation-triangle text-yellow-400';
+        default:
+          return 'fas fa-info-circle text-blue-400';
+      }
+    };
+
+    return (
+      <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+        <div
+          className="fixed inset-0 bg-black/50 backdrop-blur-sm"
+          onClick={() => setNotification(null)}
+        />
+        <div className="relative max-w-md rounded-lg border border-neutral-700 bg-neutral-800 p-6 shadow-xl">
+          <div className="flex items-center space-x-3">
+            <i className={`${getIcon()} text-lg`}></i>
+            <div className="flex-1">
+              <p className="text-white">{notification.message}</p>
+            </div>
+            <button
+              onClick={() => setNotification(null)}
+              className="text-gray-400 transition-colors hover:text-white"
+            >
+              <i className="fas fa-times"></i>
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <>
+      <div className="flex min-h-screen items-center justify-center bg-neutral-900 p-3">
+        <div className="w-full max-w-lg">
+          {/* Header */}
+          <div className="mb-3">
+            <div className="h-1 rounded-full bg-blue-500"></div>
+          </div>
+
+          {/* Main Card */}
+          <div className="rounded-lg border border-neutral-700 bg-neutral-800 p-6 shadow-xl">
+            {/* Title */}
+            <div className="mb-6 text-center">
+              <h1 className="mb-2 text-2xl font-bold text-white">
+                {deletionInfo && deletionData.hasDeadline
+                  ? 'Save Your Account from Permanent Deletion'
+                  : deletionInfo
+                  ? 'Account Deletion Request'
+                  : 'Account Reactivation'}
+              </h1>
+              <p className="text-sm text-gray-400">
+                {deletionInfo && deletionData.hasDeadline
+                  ? `Login before ${deletionData.deadline} to prevent permanent deletion`
+                  : deletionInfo
+                  ? 'Your account deletion request is pending'
+                  : 'Your account is temporarily suspended'}
+              </p>
+            </div>
+
+            {/* Deletion Deadline Warning - Only show if account deletion is scheduled */}
+            {deletionInfo && deletionData.hasDeadline && (
+              <div
+                className={`mb-4 rounded-lg border p-3 ${
+                  deletionData.urgency === 'high'
+                    ? 'border-red-500/30 bg-red-900/20'
+                    : deletionData.urgency === 'medium'
+                    ? 'border-yellow-500/30 bg-yellow-900/20'
+                    : 'border-orange-500/30 bg-orange-900/20'
+                }`}
+              >
+                <div className="flex items-start space-x-3">
+                  <div
+                    className={`flex h-8 w-8 items-center justify-center rounded-full ${
+                      deletionData.urgency === 'high'
+                        ? 'bg-red-500'
+                        : deletionData.urgency === 'medium'
+                        ? 'bg-yellow-500'
+                        : 'bg-orange-500'
+                    }`}
+                  >
+                    <i className="fas fa-exclamation-triangle text-sm text-white"></i>
+                  </div>
+                  <div className="min-w-0 flex-1">
+                    <p
+                      className={`text-sm font-medium ${
+                        deletionData.urgency === 'high'
+                          ? 'text-red-400'
+                          : deletionData.urgency === 'medium'
+                          ? 'text-yellow-400'
+                          : 'text-orange-400'
+                      }`}
+                    >
+                      Deleting in {deletionData.daysRemaining} day(s)
+                    </p>
+                    <p className="text-xs text-gray-300">
+                      Scheduled: {deletionData.deadline}
+                    </p>
+                    {deletionData.daysRemaining <= 3 && (
+                      <p className="mt-1 text-xs text-gray-400">
+                        {deletionData.daysRemaining}d,{' '}
+                        {deletionData.hoursRemaining % 24}h remaining
+                      </p>
+                    )}
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {/* Account Info */}
+            <div className="mb-4 rounded-lg border border-neutral-600 bg-neutral-700 p-3">
+              <div className="flex items-center space-x-3">
+                <div className="flex h-8 w-8 items-center justify-center rounded-full bg-orange-500">
+                  {detectedAccountType === 'GOOGLE' ? (
+                    <i className="fab fa-google text-sm text-white"></i>
+                  ) : (
+                    <i className="fas fa-user text-sm text-white"></i>
+                  )}
+                </div>
+                <div className="min-w-0 flex-1">
+                  <p className="truncate font-medium text-white">{email}</p>
+                  <p className="text-xs text-gray-400">
+                    {detectedAccountType === 'GOOGLE'
+                      ? 'Google Account'
+                      : 'Email Account'}
+                  </p>
+                </div>
+                <div className="text-orange-400">
+                  <i className="fas fa-pause-circle text-sm"></i>
+                </div>
+              </div>
+            </div>
+
+            {/* Info Cards */}
+            <div className="mb-5 space-y-3">
+              <div className="rounded-lg border border-orange-500/20 bg-orange-500/5 p-3">
+                <h3 className="mb-1 text-sm font-medium text-orange-400">
+                  What happened?
+                </h3>
+                <p className="text-xs leading-relaxed text-gray-300">
+                  {deletionInfo
+                    ? 'You requested account deletion and your account has been suspended for 7 days as a safety measure.'
+                    : 'Your account has been temporarily suspended but can be reactivated instantly.'}
+                </p>
+              </div>
+
+              <div className="rounded-lg border border-green-500/20 bg-green-500/5 p-3">
+                <h3 className="mb-1 text-sm font-medium text-green-400">
+                  {deletionInfo ? 'Your content is still safe!' : 'Good news!'}
+                </h3>
+                <p className="text-xs leading-relaxed text-gray-300">
+                  {deletionInfo
+                    ? 'All your challenges, comments, and progress remain visible and intact during this 7-day period. Nothing is transferred to the system account until the deadline passes.'
+                    : 'All your data is safe and will be restored immediately upon reactivation.'}
+                </p>
+              </div>
+            </div>
+
+            {/* Ready to Reactivate Notice */}
+            <div className="mb-5 rounded-lg border border-blue-500/20 bg-blue-500/5 p-3">
+              <div className="flex items-center space-x-3">
+                <div className="flex h-7 w-7 items-center justify-center rounded-full bg-blue-500">
+                  <i className="fas fa-check text-sm text-white"></i>
+                </div>
+                <div>
+                  <p className="text-sm font-medium text-blue-400">
+                    {deletionInfo
+                      ? 'Ready to Cancel Deletion'
+                      : 'Ready to Reactivate'}
+                  </p>
+                  <p className="text-xs text-blue-200">
+                    {deletionInfo
+                      ? 'Click below to immediately cancel your deletion request'
+                      : "You're already authenticated - just click the button below"}
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            {/* Buttons */}
+            <div className="space-y-3">
+              <button
+                onClick={handleReactivation}
+                disabled={isReactivating}
+                className={`w-full rounded-lg px-4 py-3 font-medium text-white transition-colors disabled:cursor-not-allowed disabled:opacity-50 ${
+                  deletionInfo
+                    ? 'bg-green-600 hover:bg-green-500'
+                    : 'bg-blue-600 hover:bg-blue-500'
+                }`}
+              >
+                {isReactivating ? (
+                  <>
+                    <i className="fas fa-spinner fa-spin mr-2"></i>
+                    {deletionInfo
+                      ? 'Cancelling Deletion...'
+                      : 'Reactivating...'}
+                  </>
+                ) : (
+                  <>
+                    <i
+                      className={`${
+                        deletionInfo
+                          ? 'fas fa-shield-alt'
+                          : 'fas fa-play-circle'
+                      } mr-2`}
+                    ></i>
+                    {deletionInfo
+                      ? 'Cancel Deletion & Keep My Account'
+                      : 'Reactivate Account'}
+                  </>
+                )}
+              </button>
+
+              <button
+                onClick={onCancel}
+                className="w-full rounded-lg border border-neutral-600 bg-neutral-700 px-4 py-3 font-medium text-white transition-colors hover:bg-neutral-600"
+              >
+                Back to Login
+              </button>
+            </div>
+
+            {/* Footer */}
+            <div className="mt-5 text-center">
+              <p className="text-xs text-gray-500">
+                Need help?{' '}
+                <a
+                  href="mailto:support@ctfguide.com"
+                  className="text-blue-400 transition-colors hover:text-blue-300"
+                >
+                  support@ctfguide.com
+                </a>
+              </p>
+            </div>
+          </div>
+
+          {/* Bottom Footer */}
+          <div className="mt-4 text-center">
+            <p className="text-xs text-gray-600">© CTFGuide Corporation 2025</p>
+          </div>
+        </div>
+      </div>
+
+      <NotificationModal />
+    </>
+  );
+};
+
+export default AccountReactivation;
diff --git a/src/components/CommentReporter.jsx b/src/components/CommentReporter.jsx
new file mode 100644
index 00000000..a05815fc
--- /dev/null
+++ b/src/components/CommentReporter.jsx
@@ -0,0 +1,219 @@
+import React, { useState } from 'react';
+import request from '@/utils/request';
+
+const CommentReporter = ({ commentId, commentContent, challengeId }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [selectedReason, setSelectedReason] = useState('');
+  const [customReason, setCustomReason] = useState('');
+  const [notification, setNotification] = useState(null);
+
+  const reportReasons = [
+    { value: 'SPAM', label: 'Spam or unwanted commercial content' },
+    { value: 'HARASSMENT', label: 'Harassment or bullying' },
+    { value: 'INAPPROPRIATE', label: 'Inappropriate content' },
+    { value: 'MISINFORMATION', label: 'False or misleading information' },
+    { value: 'SPOILER', label: 'Contains spoilers or solution hints' },
+    { value: 'OFF_TOPIC', label: 'Off-topic or irrelevant' },
+    { value: 'OTHER', label: 'Other (please specify)' },
+  ];
+
+  const showNotification = (message, type = 'info') => {
+    setNotification({ message, type });
+    setTimeout(() => setNotification(null), 4000);
+  };
+
+  const handleSubmitReport = async () => {
+    if (!selectedReason) {
+      showNotification('Please select a reason for reporting', 'error');
+      return;
+    }
+
+    if (selectedReason === 'OTHER' && !customReason.trim()) {
+      showNotification('Please provide a custom reason', 'error');
+      return;
+    }
+
+    setIsSubmitting(true);
+
+    try {
+      const reportData = {
+        type: 'COMMENT',
+        desc:
+          selectedReason === 'OTHER'
+            ? customReason
+            : reportReasons.find((r) => r.value === selectedReason)?.label,
+        metadata: {
+          commentId,
+          challengeId,
+          reason: selectedReason,
+          commentContent: commentContent?.substring(0, 200) || '', // First 200 chars for context
+        },
+      };
+
+      const response = await request(
+        `${process.env.NEXT_PUBLIC_API_URL}/reports`,
+        'POST',
+        reportData
+      );
+
+      if (response.success) {
+        showNotification(
+          'Comment reported successfully. Thank you for helping keep our community safe.',
+          'success'
+        );
+        setIsOpen(false);
+        setSelectedReason('');
+        setCustomReason('');
+      } else {
+        throw new Error(response.error || 'Failed to submit report');
+      }
+    } catch (error) {
+      console.error('Error reporting comment:', error);
+      showNotification(
+        error.message || 'Failed to submit report. Please try again.',
+        'error'
+      );
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const NotificationModal = () => {
+    if (!notification) return null;
+
+    const getIcon = () => {
+      switch (notification.type) {
+        case 'success':
+          return 'fas fa-check-circle text-green-400';
+        case 'error':
+          return 'fas fa-exclamation-circle text-red-400';
+        case 'warning':
+          return 'fas fa-exclamation-triangle text-yellow-400';
+        default:
+          return 'fas fa-info-circle text-blue-400';
+      }
+    };
+
+    return (
+      <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+        <div
+          className="fixed inset-0 bg-black/50 backdrop-blur-sm"
+          onClick={() => setNotification(null)}
+        />
+        <div className="relative max-w-md rounded-2xl border border-neutral-700 bg-neutral-800/95 p-6 shadow-2xl backdrop-blur-md">
+          <div className="flex items-center space-x-3">
+            <i className={`${getIcon()} text-xl`}></i>
+            <div className="flex-1">
+              <p className="text-white">{notification.message}</p>
+            </div>
+            <button
+              onClick={() => setNotification(null)}
+              className="text-gray-400 transition-colors hover:text-white"
+            >
+              <i className="fas fa-times"></i>
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <>
+      <button
+        onClick={() => setIsOpen(true)}
+        className="text-sm text-gray-400 transition-colors duration-200 hover:text-red-400"
+        title="Report this comment"
+      >
+        <i className="fas fa-flag mr-1"></i>
+        Report
+      </button>
+
+      {isOpen && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+          <div
+            className="fixed inset-0 bg-black/50 backdrop-blur-sm"
+            onClick={() => setIsOpen(false)}
+          />
+          <div className="relative w-full max-w-md rounded-2xl border border-neutral-700 bg-neutral-800 p-6 shadow-2xl backdrop-blur-md">
+            <div className="mb-4 flex items-center justify-between">
+              <h3 className="text-lg font-semibold text-white">
+                Report Comment
+              </h3>
+              <button
+                onClick={() => setIsOpen(false)}
+                className="text-gray-400 transition-colors hover:text-white"
+              >
+                <i className="fas fa-times"></i>
+              </button>
+            </div>
+
+            <p className="mb-4 text-sm text-gray-400">
+              Help us keep the community safe by reporting inappropriate
+              content.
+            </p>
+
+            <div className="mb-4 space-y-3">
+              {reportReasons.map((reason) => (
+                <label
+                  key={reason.value}
+                  className="flex cursor-pointer items-center"
+                >
+                  <input
+                    type="radio"
+                    name="reportReason"
+                    value={reason.value}
+                    checked={selectedReason === reason.value}
+                    onChange={(e) => setSelectedReason(e.target.value)}
+                    className="border-neutral-600 bg-neutral-700 text-blue-600 focus:ring-blue-500"
+                  />
+                  <span className="ml-2 text-sm text-white">
+                    {reason.label}
+                  </span>
+                </label>
+              ))}
+            </div>
+
+            {selectedReason === 'OTHER' && (
+              <textarea
+                value={customReason}
+                onChange={(e) => setCustomReason(e.target.value)}
+                placeholder="Please describe the issue..."
+                className="mb-4 w-full rounded-lg border border-neutral-600 bg-neutral-700 px-3 py-2 text-white placeholder-gray-400 focus:border-blue-500 focus:outline-none"
+                rows="3"
+              />
+            )}
+
+            <div className="flex space-x-3">
+              <button
+                onClick={() => setIsOpen(false)}
+                className="flex-1 rounded-lg border border-neutral-600 bg-neutral-700 px-4 py-2 text-white transition-colors hover:bg-neutral-600"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={handleSubmitReport}
+                disabled={isSubmitting}
+                className="flex-1 rounded-lg bg-red-600 px-4 py-2 text-white transition-colors hover:bg-red-500 disabled:cursor-not-allowed disabled:opacity-50"
+              >
+                {isSubmitting ? (
+                  <>
+                    <i className="fas fa-spinner fa-spin mr-2"></i>
+                    Submitting...
+                  </>
+                ) : (
+                  'Submit Report'
+                )}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      <NotificationModal />
+    </>
+  );
+};
+
+export default CommentReporter;
diff --git a/src/components/moderation/UserActionModals.jsx b/src/components/moderation/UserActionModals.jsx
new file mode 100644
index 00000000..7f8e2637
--- /dev/null
+++ b/src/components/moderation/UserActionModals.jsx
@@ -0,0 +1,144 @@
+import React from 'react';
+
+const UserActionModals = ({
+  // Suspend modal props
+  showSuspendModal,
+  setShowSuspendModal,
+  suspendForm,
+  setSuspendForm,
+  submitSuspension,
+
+  // Role modal props
+  showRoleModal,
+  setShowRoleModal,
+  roleForm,
+  setRoleForm,
+  submitRoleChange,
+
+  // Common props
+  selectedUserForAction,
+}) => {
+  return (
+    <>
+      {/* Suspend Modal */}
+      {showSuspendModal && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
+          <div className="w-full max-w-md border border-neutral-700 bg-neutral-800 p-6">
+            <h3 className="mb-4 text-lg font-medium text-white">
+              Suspend User
+            </h3>
+            <p className="mb-4 text-neutral-300">
+              Suspending user:{' '}
+              <span className="font-medium">
+                {selectedUserForAction?.username}
+              </span>
+            </p>
+
+            <div className="space-y-4">
+              <div>
+                <label className="mb-2 block text-sm font-medium text-neutral-300">
+                  Reason for Suspension
+                </label>
+                <textarea
+                  value={suspendForm.reason}
+                  onChange={(e) =>
+                    setSuspendForm({ ...suspendForm, reason: e.target.value })
+                  }
+                  className="h-24 w-full resize-none border border-neutral-600 bg-neutral-700 p-3 text-white focus:border-blue-500 focus:outline-none"
+                  placeholder="Enter detailed reason for suspension..."
+                />
+              </div>
+
+              <div>
+                <label className="mb-2 block text-sm font-medium text-neutral-300">
+                  Duration (hours)
+                </label>
+                <input
+                  type="number"
+                  value={suspendForm.duration}
+                  onChange={(e) =>
+                    setSuspendForm({ ...suspendForm, duration: e.target.value })
+                  }
+                  className="w-full border border-neutral-600 bg-neutral-700 p-3 text-white focus:border-blue-500 focus:outline-none"
+                  placeholder="Leave empty for indefinite suspension"
+                  min="1"
+                />
+                <p className="mt-1 text-xs text-neutral-400">
+                  Leave empty for permanent suspension
+                </p>
+              </div>
+            </div>
+
+            <div className="mt-6 flex space-x-3">
+              <button
+                onClick={() => setShowSuspendModal(false)}
+                className="flex-1 bg-neutral-600 px-4 py-2 text-white transition-colors duration-200 hover:bg-neutral-500"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={submitSuspension}
+                className="flex-1 bg-red-600 px-4 py-2 text-white transition-colors duration-200 hover:bg-red-500"
+              >
+                Suspend User
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Role Change Modal */}
+      {showRoleModal && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
+          <div className="w-full max-w-md border border-neutral-700 bg-neutral-800 p-6">
+            <h3 className="mb-4 text-lg font-medium text-white">
+              Change User Role
+            </h3>
+            <p className="mb-4 text-neutral-300">
+              Changing role for:{' '}
+              <span className="font-medium">
+                {selectedUserForAction?.username}
+              </span>
+            </p>
+
+            <div className="space-y-4">
+              <div>
+                <label className="mb-2 block text-sm font-medium text-neutral-300">
+                  Select New Role
+                </label>
+                <select
+                  value={roleForm.role}
+                  onChange={(e) =>
+                    setRoleForm({ ...roleForm, role: e.target.value })
+                  }
+                  className="w-full border border-neutral-600 bg-neutral-700 p-3 text-white focus:border-blue-500 focus:outline-none"
+                >
+                  <option value="USER">User (Standard Account)</option>
+                  <option value="PRO">Pro (Premium Features)</option>
+                  <option value="ADMIN">Admin (Full Access)</option>
+                </select>
+              </div>
+            </div>
+
+            <div className="mt-6 flex space-x-3">
+              <button
+                onClick={() => setShowRoleModal(false)}
+                className="flex-1 bg-neutral-600 px-4 py-2 text-white transition-colors duration-200 hover:bg-neutral-500"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={submitRoleChange}
+                className="flex-1 bg-blue-600 px-4 py-2 text-white transition-colors duration-200 hover:bg-blue-500"
+              >
+                Update Role
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default UserActionModals;
diff --git a/src/components/moderation/ViewChallenge.jsx b/src/components/moderation/ViewChallenge.jsx
index a40ffdb2..24e34bbb 100644
--- a/src/components/moderation/ViewChallenge.jsx
+++ b/src/components/moderation/ViewChallenge.jsx
@@ -7,268 +7,366 @@ import { MarkdownViewer } from '../MarkdownViewer';
 import { getFileName } from '@/utils/file-api';
 
 const ViewChallenge = ({ open, setOpen, selected }) => {
+  const [challenge, setChallenge] = useState({
+    title: 'Loading...',
+    content: 'Loading...',
+    solution: 'Loading...',
+    difficulty: 'Loading...',
+    snote: 'No previous notes',
+  });
 
-    const [challenge, setChallenge] = useState({
-        "title": "Loading...",
-        "content": "Loading...",
-        "solution": "Loading...",
-        "difficulty": "Loading...",
-        "snote": "No previous notes"
-    });
+  const [isLoading, setIsLoading] = useState(false);
+  const [files, setFiles] = useState([]);
+  const [moderatorNotes, setModeratorNotes] = useState('');
+  const [basePoints, setBasePoints] = useState(0);
 
-    const [isLoading, setIsLoading] = useState(false);
-    const [files, setFiles] = useState([]);
+  useEffect(() => {
+    const fetchChallengeData = async () => {
+      try {
+        const response = await request(
+          `${process.env.NEXT_PUBLIC_API_URL}/challenges/${selected}`,
+          'GET'
+        );
+        console.log('run');
+        console.log(response);
+        setChallenge(response.body);
+        setModeratorNotes(response.body.snote || '');
+        setBasePoints(response.body.basePoints || 0);
+        //fetch stupid file info for each fileId, thanks stephen for the helper function
+        if (response.body.fileIds && response.body.fileIds.length > 0) {
+          const filePromises = response.body.fileIds.map(async (fileId) => {
+            const fileName = await getFileName(fileId);
+            return {
+              id: fileId,
+              name: fileName,
+              url: `${process.env.NEXT_PUBLIC_TERM_URL}files/get?fileID=${fileId}`,
+            };
+          });
+          const fileInfo = await Promise.all(filePromises);
+          setFiles(fileInfo);
+        }
+      } catch (error) {
+        console.error(error);
+      }
+    };
 
-    useEffect(() => {
-        const fetchChallengeData = async () => {
-          try {
-            const response = await request(`${process.env.NEXT_PUBLIC_API_URL}/challenges/${selected}`, "GET");
-            console.log("run");
-            console.log(response);
-            setChallenge(response.body);
-            
-            //fetch stupid file info for each fileId, thanks stephen for the helper function
-            if (response.body.fileIds && response.body.fileIds.length > 0) {
-              const filePromises = response.body.fileIds.map(async (fileId) => {
-                const fileName = await getFileName(fileId);
-                return {
-                  id: fileId,
-                  name: fileName,
-                  url: `${process.env.NEXT_PUBLIC_TERM_URL}files/get?fileID=${fileId}`
-                };
-              });
-              const fileInfo = await Promise.all(filePromises);
-              setFiles(fileInfo);
-            }
-          } catch (error) {
-            console.error(error);
-          }
-        };
-      
-        fetchChallengeData();
-      }, [selected]);
+    if (selected) {
+      fetchChallengeData();
+    }
+  }, [selected]);
 
-  return (
-
-    <Transition.Root show={open} as={Fragment}>
-      <Dialog className="relative z-10" onClose={setOpen}>
-        <div className="fixed inset-0" />
-
-        <div className="fixed inset-0 overflow-hidden">
-          <div className="absolute inset-0 overflow-hidden">
-            <div className="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10">
-              <Transition.Child
-                as={Fragment}
-                enter="transform transition ease-in-out duration-100 sm:duration-700"
-                enterFrom="translate-x-full"
-                enterTo="translate-x-0"
-                leave="transform transition ease-in-out duration-100 sm:duration-700"
-                leaveFrom="translate-x-0"
-                leaveTo="translate-x-full"
-              >
-               
-                <Dialog.Panel className="pointer-events-auto w-screen max-w-6xl">
-                  <div className="flex h-full flex-col divide-y divide-neutral-800 bg-neutral-900 border-l-2 border-neutral-800 shadow-xl">
-                    <div className="flex min-h-0 flex-1 flex-col overflow-y-scroll py-6">
-                      <div className="px-4 sm:px-6">
-                        <div className="flex items-start justify-between">
-                        { challenge && <Dialog.Title className="text-base font-semibold leading-6 text-xl text-white">
-  { challenge.title || "Loading..." }
-</Dialog.Title> }
-                          <div className="ml-3 flex h-7 items-center">
-                            <button
-                              type="button"
-                              className="relative rounded-md  text-neutral-400  focus:outline-none focus:ring-2 "
-                              onClick={() => setOpen(false)}
-                            >
-                              <span className="absolute -inset-2.5" />
-                              <span className="sr-only">Close panel</span>
-                              <XMarkIcon className="h-6 w-6" aria-hidden="true" />
-                            </button>
-                          </div>
-                        </div>
-                      </div>
-                      <div className=" mt-6  px-4 sm:px-6 text-white">
+  const handleApprove = async () => {
+    setIsLoading(true);
+    try {
+      const response = await request(
+        `${process.env.NEXT_PUBLIC_API_URL}/admin/challenges/${selected}/approve`,
+        'POST',
+        { bonusPoints: basePoints }
+      );
 
-                        <div className='bg-neutral-800 p-3  gap-x-4 w-full'>
+      if (response && response.success) {
+        alert('Challenge approved successfully!');
+        setOpen(false);
+        // Optionally refresh the challenges list
+        window.location.reload();
+      } else {
+        alert('Failed to approve challenge!');
+      }
+    } catch (error) {
+      console.error('Error approving challenge:', error);
+      alert('Failed to approve challenge!');
+    } finally {
+      setIsLoading(false);
+    }
+  };
 
-                            <p> <i className="fas fa-exclamation-triangle"></i> Don't forget to make sure the challenge is including an explanation.</p>
-                   
-                        </div>                          
-                          <br></br>
-                            <div className='grid grid-cols-3 gap-y-8'>
-                        <div className='col-span-3'> 
-                        <h1 className='font-bold text-blue-600 mb-1'>Description</h1> 
+  const handleRequestChanges = async () => {
+    if (!moderatorNotes.trim()) {
+      alert('Please provide a reason in the moderator notes.');
+      return;
+    }
 
-                        <MarkdownViewer className='bg-neutral-800 p-3 rounded-md' content={challenge && challenge.content} />
-                        </div>
-                        <div>
-                        <h1 className='font-bold text-blue-600 mb-1'>Flag</h1>
-                        <p>{challenge && challenge.solution && challenge.solution.keyword || "N/A"}</p>
-                        </div>
-                        <div>
-                        <h1 className='font-bold text-blue-600 mb-1'>Difficulty</h1> 
-                        <p>{challenge && challenge.difficulty}</p>
-                        </div>
+    try {
+      const response = await request(
+        `${process.env.NEXT_PUBLIC_API_URL}/challenges/${selected}/deny`,
+        'POST',
+        { reason: moderatorNotes }
+      );
 
-                        <div>
-                        <h1 className='font-bold text-blue-600 mb-1'>Creator</h1> 
-                        <p className='text-blue-200'><a href={"/users/" + (challenge && challenge.creator)}>{challenge && challenge.creator} <i className="fas fa-external-link-square-alt"></i></a></p></div>
+      if (response && response.success) {
+        alert('Changes requested successfully!');
+        setOpen(false);
+        // Optionally refresh the challenges list
+        window.location.reload();
+      } else {
+        alert('Failed to request changes!');
+      }
+    } catch (error) {
+      console.error('Error requesting changes:', error);
+      alert('Failed to request changes!');
+    }
+  };
 
+  const handleEditChallenge = () => {
+    window.open(`/create/edit?id=${selected}`, '_blank');
+  };
 
-                                             
-                        <div>
-                       <h1 className='font-bold text-blue-600 mb-1'>Category</h1> 
-                        <p>{challenge && challenge.category}</p>
-                        
-                        </div> 
+  const handleGoToChallenge = () => {
+    window.open(`/challenges/${selected}`, '_blank');
+  };
 
-                        <div>
-                       <h1 className='font-bold text-blue-600 mb-1'>Date of Creation</h1> 
-                        <p>{challenge && new Date(challenge.createdAt).toLocaleString([], { hour: 'numeric', minute: 'numeric', hour12: true, month: 'short', day: 'numeric' })}</p>
-                        
-                        </div>
-
-                        <div>
-                       <h1 className='font-bold text-blue-600 mb-1'>Last Updated</h1> 
-                        <p>{challenge && new Date(challenge.updatedAt).toLocaleString([], { hour: 'numeric', minute: 'numeric', hour12: true, month: 'short', day: 'numeric' })}</p>
-                        
-                        </div>
-                        <div className='col-span-3'>
-                        <h1 className='font-bold text-blue-600 mb-1'>Environment Container Configuration</h1>
-                        <textarea
-                          value={challenge && challenge.commands}
-                          readOnly
-                          className="mt-2 w-full border-none bg-black text-white"
-                        ></textarea>
-
-                        <h1 className='font-bold text-blue-600 mb-1 mt-4'>Uploaded Files</h1>
-                        <div className="mt-2">
-                          {files && files.length > 0 ? (
-                            files.map((file, index) => (
-                              <div key={index} className="flex items-center justify-between p-2 border-b border-neutral-600">
-                                <span className="text-white">{file.name}</span>
-                                <a
-                                  href={file.url}
-                                  target="_blank"
-                                  rel="noopener noreferrer"
-                                  className="text-blue-500 hover:text-blue-700"
-                                >
-                                  Download
-                                </a>
-                              </div>
-                            ))
-                          ) : (
-                            <p className="text-neutral-400">No files uploaded</p>
-                          )}
-                        </div>
-                     
-                     <h1 className='font-bold text-blue-600 mb-1 mt-4'>Moderator Notes</h1> 
-      
-      <textarea placeholder="Challenge creators can see these notes if you request changes!" className='bg-neutral-800 w-full border-neutral-700'>
-      {challenge && challenge.snote}
-      </textarea>
-      
-      <br></br><br></br>
-      <div className='flex rounded-md'>
-<div>      <h1 className='font-bold text-blue-600 mb-1'>Set Base Points</h1> 
-</div>
-      <div className='ml-auto'><p className='mb-2 text-sm font-bold'><i className="fas fa-info-circle"></i> <span className='text-blue-200'>Beginner: 100</span>,
-        <span className='text-green-200'> Easy: 200</span>, 
-        <span className='text-yellow-200'> Medium: 300</span>, 
-        <span className='text-red-200'> Hard: 400</span>, 
-        <span className='text-indigo-200'> Insane: 500</span>
-      </p></div>
-      </div>
-      <input type="number" placeholder="0" className='bg-neutral-800 w-full border-neutral-700' />
-
-      </div>
-                   </div>
-                        
-             
-                      </div>
+  return (
+    <Transition.Root show={open} as={Fragment}>
+      <Dialog className="relative z-50" onClose={setOpen}>
+        <div className="fixed inset-0 bg-black/60 backdrop-blur-sm" />
+        <div className="fixed inset-0 flex items-center justify-center overflow-y-auto p-2 sm:p-6">
+          <Transition.Child
+            as={Fragment}
+            enter="transform transition ease-in-out duration-200"
+            enterFrom="scale-95 opacity-0"
+            enterTo="scale-100 opacity-100"
+            leave="transform transition ease-in-out duration-200"
+            leaveFrom="scale-100 opacity-100"
+            leaveTo="scale-95 opacity-0"
+          >
+            <Dialog.Panel className="relative flex w-full max-w-2xl flex-col rounded border border-neutral-800 bg-neutral-900 shadow-xl sm:max-h-[90vh]">
+              {/* Sticky Close Button */}
+              <div className="sticky top-0 z-10 flex items-center justify-between border-b border-neutral-800 bg-neutral-900 px-4 py-3">
+                <Dialog.Title className="text-base text-xl font-semibold leading-6 text-white">
+                  {challenge.title || 'Loading...'}
+                </Dialog.Title>
+                <button
+                  type="button"
+                  className="text-neutral-400 hover:text-white focus:outline-none focus:ring-2"
+                  onClick={() => setOpen(false)}
+                >
+                  <span className="sr-only">Close panel</span>
+                  <XMarkIcon className="h-6 w-6" aria-hidden="true" />
+                </button>
+              </div>
+              {/* Modal Content */}
+              <div className="flex-1 overflow-y-auto px-4 py-4 text-white sm:px-6">
+                <div className="mb-4 w-full gap-x-4 bg-neutral-800 p-3">
+                  <p>
+                    {' '}
+                    <i className="fas fa-exclamation-triangle"></i> Don't forget
+                    to make sure the challenge is including an explanation.
+                  </p>
+                </div>
+                <div className="grid grid-cols-1 gap-y-8 sm:grid-cols-3">
+                  <div className="sm:col-span-3">
+                    <h1 className="mb-1 font-bold text-blue-600">
+                      Description
+                    </h1>
+                    <MarkdownViewer
+                      className="bg-neutral-800 p-3"
+                      content={challenge && challenge.content}
+                    />
+                  </div>
+                  <div>
+                    <h1 className="mb-1 font-bold text-blue-600">Flag</h1>
+                    <p>
+                      {(challenge &&
+                        challenge.solution &&
+                        challenge.solution.keyword) ||
+                        'N/A'}
+                    </p>
+                  </div>
+                  <div>
+                    <h1 className="mb-1 font-bold text-blue-600">Difficulty</h1>
+                    <p>{challenge && challenge.difficulty}</p>
+                  </div>
+                  <div>
+                    <h1 className="mb-1 font-bold text-blue-600">Creator</h1>
+                    <p className="text-blue-200">
+                      <a href={'/users/' + (challenge && challenge.creator)}>
+                        {challenge && challenge.creator}{' '}
+                        <i className="fas fa-external-link-square-alt"></i>
+                      </a>
+                    </p>
+                  </div>
+                  <div>
+                    <h1 className="mb-1 font-bold text-blue-600">Category</h1>
+                    <p>{challenge && challenge.category && challenge.category.join(", ")}</p>
+                  </div>
+                  <div>
+                    <h1 className="mb-1 font-bold text-blue-600">
+                      Date of Creation
+                    </h1>
+                    <p>
+                      {challenge &&
+                        new Date(challenge.createdAt).toLocaleString([], {
+                          hour: 'numeric',
+                          minute: 'numeric',
+                          hour12: true,
+                          month: 'short',
+                          day: 'numeric',
+                        })}
+                    </p>
+                  </div>
+                  <div>
+                    <h1 className="mb-1 font-bold text-blue-600">
+                      Last Updated
+                    </h1>
+                    <p>
+                      {challenge &&
+                        new Date(challenge.updatedAt).toLocaleString([], {
+                          hour: 'numeric',
+                          minute: 'numeric',
+                          hour12: true,
+                          month: 'short',
+                          day: 'numeric',
+                        })}
+                    </p>
+                  </div>
+                  <div className="sm:col-span-3">
+                    <h1 className="mb-1 font-bold text-blue-600">
+                      Environment Container Configuration
+                    </h1>
+                    <textarea
+                      value={challenge && challenge.commands}
+                      readOnly
+                      className="mt-2 w-full border-none bg-black text-white"
+                    ></textarea>
+                    <h1 className="mb-1 mt-4 font-bold text-blue-600">
+                      Uploaded Files
+                    </h1>
+                    <div className="mt-2">
+                      {files && files.length > 0 ? (
+                        files.map((file, index) => (
+                          <div
+                            key={index}
+                            className="flex items-center justify-between border-b border-neutral-600 p-2"
+                          >
+                            <span className="text-white">{file.name}</span>
+                            <a
+                              href={file.url}
+                              target="_blank"
+                              rel="noopener noreferrer"
+                              className="text-blue-500 hover:text-blue-700"
+                            >
+                              Download
+                            </a>
+                          </div>
+                        ))
+                      ) : (
+                        <p className="text-neutral-400">No files uploaded</p>
+                      )}
                     </div>
-                    <div className="flex flex-shrink-0 justify-end px-4 py-4">
-                      <button
-                        type="button"
-                        className="rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm ring-1 ring-inset ring-gray-300 hover:ring-gray-400"
-                        onClick={() => setOpen(false)}
-                      >
-                        <XMarkIcon className="h-5 w-5 inline mr-2" aria-hidden="true" />
-                        Cancel
-                      </button>
-                      <button className='ml-4 rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500' onClick={() => window.open(`../../challenges/${selected}`, '_blank')}>
-                        <i className="fas fa-external-link-alt mr-2"></i>
-                        Go to Challenge Page
-                      </button>
-
-                      <button className='ml-4 w-auto rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500' onClick={() => window.open(`../../create/edit?id=${selected}`, '_blank')}>
-                        <i className="fas fa-edit mr-2"></i>
-                        Edit Challenge
-                      </button>
- 
-                      <button
-                        onClick={async () => {
-                          const reason = document.querySelector('textarea').value;
-                          if (reason) {
-                            try {
-                              await request(`${process.env.NEXT_PUBLIC_API_URL}/challenges/${selected}/deny`, "POST", { reason });
-                              alert("Challenge denied successfully!");
-                            } catch (error) {
-                              console.error(error);
-                              alert("Failed to deny challenge!");
-                            }
-                          } else {
-                            alert("Please provide a reason in the moderator notes.");
-                          }
-                        }}
-                        type="button"
-                        className="ml-4  justify-center rounded-md bg-yellow-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-yellow-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-yellow-500"
-                      >
-                        <i className="fas fa-exclamation-triangle mr-2"></i>
-                        Request Changes
-                      </button>
-                      <button
-                      onClick={async () => {
-                        setIsLoading(true);
-                        const basePoints = document.querySelector('input[type="number"]').value;
-                        console.log(basePoints)
-                        try {
-                          await request(`${process.env.NEXT_PUBLIC_API_URL}/challenges/${selected}/approve`, "POST", { basePoints: basePoints });
-                          //reload
-                          window.location.reload();
-                        } catch (error) {
-                          console.error(error);
-                        } finally {
-                          setIsLoading(false);
-                        }
-                      }}
-                        type="submit"
-                        className="ml-4  justify-center rounded-md bg-green-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-500"
-                      >
-                        {isLoading ? (
-                          <svg className="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
-                            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
-                          </svg>
-                        ) : (
-                          <>
-                            <i className="fas fa-check mr-2"></i>
-                            Approve
-                          </>
-                        )}
-                      </button>
+                    <h1 className="mb-1 mt-4 font-bold text-blue-600">
+                      Moderator Notes
+                    </h1>
+                    <textarea
+                      placeholder="Challenge creators can see these notes if you request changes!"
+                      className="w-full border-neutral-700 bg-neutral-800"
+                      value={moderatorNotes}
+                      onChange={(e) => setModeratorNotes(e.target.value)}
+                    />
+                    <br />
+                    <br />
+                    <div className="flex flex-col sm:flex-row sm:items-center">
+                      <div>
+                        <h1 className="mb-1 font-bold text-blue-600">
+                          Set Base Points
+                        </h1>
+                      </div>
+                      <div className="sm:ml-auto">
+                        <p className="mb-2 text-sm font-bold">
+                          <i className="fas fa-info-circle"></i>{' '}
+                          <span className="text-blue-200">Beginner: 100</span>,
+                          <span className="text-green-200"> Easy: 200</span>,
+                          <span className="text-yellow-200"> Medium: 300</span>,
+                          <span className="text-red-200"> Hard: 400</span>,
+                          <span className="text-indigo-200"> Insane: 500</span>
+                        </p>
+                      </div>
                     </div>
+                    <input
+                      type="number"
+                      placeholder="0"
+                      className="w-full border-neutral-700 bg-neutral-800"
+                      value={basePoints}
+                      onChange={(e) =>
+                        setBasePoints(parseInt(e.target.value) || 0)
+                      }
+                    />
                   </div>
-                </Dialog.Panel>
-             
-              </Transition.Child>
-            </div>
-          </div>
-        </div>  
+                </div>
+              </div>
+              {/* Modal Footer Buttons */}
+              <div className="flex flex-col justify-end gap-2 border-t border-neutral-800 bg-neutral-900 px-4 py-4 sm:flex-row">
+                <button
+                  type="button"
+                  className="w-full px-3 py-2 text-sm font-semibold text-white shadow-sm ring-1 ring-inset ring-gray-300 hover:ring-gray-400 sm:w-auto"
+                  onClick={() => setOpen(false)}
+                >
+                  <XMarkIcon
+                    className="mr-2 inline h-5 w-5"
+                    aria-hidden="true"
+                  />
+                  Cancel
+                </button>
+                <button
+                  className="w-full bg-blue-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 sm:w-auto"
+                  onClick={handleGoToChallenge}
+                >
+                  <i className="fas fa-external-link-alt mr-2"></i>
+                  Go to Challenge Page
+                </button>
+                <button
+                  className="w-full bg-blue-700 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-600 sm:w-auto"
+                  onClick={handleEditChallenge}
+                >
+                  <i className="fas fa-edit mr-2"></i>
+                  Edit Challenge
+                </button>
+                <button
+                  className="w-full bg-yellow-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-yellow-500 sm:w-auto"
+                  onClick={handleRequestChanges}
+                >
+                  <i className="fas fa-exclamation-triangle mr-2"></i>
+                  Request Changes
+                </button>
+                <button
+                  className="w-full bg-green-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-green-500 sm:w-auto"
+                  onClick={handleApprove}
+                  disabled={isLoading}
+                >
+                  {isLoading ? (
+                    <svg
+                      className="h-5 animate-spin text-white"
+                      xmlns="http://www.w3.org/2000/svg"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                    >
+                      <circle
+                        className="opacity-25"
+                        cx="12"
+                        cy="12"
+                        r="10"
+                        stroke="currentColor"
+                        strokeWidth="4"
+                      ></circle>
+                      <path
+                        className="opacity-75"
+                        fill="currentColor"
+                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                      ></path>
+                    </svg>
+                  ) : (
+                    <>
+                      <i className="fas fa-check mr-2"></i>
+                      Approve
+                    </>
+                  )}
+                </button>
+              </div>
+            </Dialog.Panel>
+          </Transition.Child>
+        </div>
       </Dialog>
     </Transition.Root>
   );
 };
 
-export default ViewChallenge;
\ No newline at end of file
+export default ViewChallenge;
diff --git a/src/components/moderation/ViewReport.jsx b/src/components/moderation/ViewReport.jsx
index ab10eb04..0223db29 100644
--- a/src/components/moderation/ViewReport.jsx
+++ b/src/components/moderation/ViewReport.jsx
@@ -1,10 +1,12 @@
-import { Fragment } from 'react'
-import { Dialog, Transition } from '@headlessui/react'
+import { Fragment } from 'react';
+import { Dialog, Transition } from '@headlessui/react';
 
 export default function ViewReport({ open, setOpen, report }) {
   // Parse metadata if it exists and is a string
-  const metadata = report?.metadata ? 
-    (typeof report.metadata === 'string' ? JSON.parse(report.metadata) : report.metadata) 
+  const metadata = report?.metadata
+    ? typeof report.metadata === 'string'
+      ? JSON.parse(report.metadata)
+      : report.metadata
     : {};
 
   return (
@@ -33,10 +35,13 @@ export default function ViewReport({ open, setOpen, report }) {
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-neutral-900 px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-3xl sm:p-6">
+              <Dialog.Panel className="relative transform overflow-hidden bg-neutral-900 px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-3xl sm:p-6">
                 <div>
                   <div className="mt-3 text-center sm:mt-5">
-                    <Dialog.Title as="h3" className="text-2xl font-semibold leading-6 text-white">
+                    <Dialog.Title
+                      as="h3"
+                      className="text-2xl font-semibold leading-6 text-white"
+                    >
                       Report Details
                     </Dialog.Title>
                     <div className="mt-4 text-left">
@@ -49,15 +54,14 @@ export default function ViewReport({ open, setOpen, report }) {
                         {metadata.reportedUserId && (
                           <div>
                             <h4 className="font-semibold">Reported User ID:</h4>
-                       
-                              <a 
-                                href={`/users/${metadata.reportedUserId}`} 
-                                className="text-blue-400 hover:text-blue-300"
-                                target="#blank"
-                              >
-                                {metadata.reportedUserId}
-                              </a>
-                       
+
+                            <a
+                              href={`/users/${metadata.reportedUserId}`}
+                              className="text-blue-400 hover:text-blue-300"
+                              target="#blank"
+                            >
+                              {metadata.reportedUserId}
+                            </a>
                           </div>
                         )}
 
@@ -79,12 +83,18 @@ export default function ViewReport({ open, setOpen, report }) {
                           <div>
                             <h4 className="font-semibold">Severity:</h4>
                             <p>
-                              <span className={`inline-flex items-center rounded-md px-2 py-1 text-sm font-medium ${
-                                metadata.severity.toLowerCase() === 'critical' ? 'bg-red-500/15 text-red-700 dark:text-red-400' :
-                                metadata.severity.toLowerCase() === 'high' ? 'bg-orange-500/15 text-orange-700 dark:text-orange-400' :
-                                metadata.severity.toLowerCase() === 'medium' ? 'bg-yellow-500/15 text-yellow-700 dark:text-yellow-400' :
-                                'bg-blue-500/15 text-blue-700 dark:text-blue-400' // For low severity
-                              }`}>
+                              <span
+                                className={`inline-flex items-center px-2 py-1 text-sm font-medium ${
+                                  metadata.severity.toLowerCase() === 'critical'
+                                    ? 'bg-red-500/15 text-red-700 dark:text-red-400'
+                                    : metadata.severity.toLowerCase() === 'high'
+                                    ? 'bg-orange-500/15 text-orange-700 dark:text-orange-400'
+                                    : metadata.severity.toLowerCase() ===
+                                      'medium'
+                                    ? 'bg-yellow-500/15 text-yellow-700 dark:text-yellow-400'
+                                    : 'bg-blue-500/15 text-blue-700 dark:text-blue-400' // For low severity
+                                }`}
+                              >
                                 {metadata.severity}
                               </span>
                             </p>
@@ -100,14 +110,15 @@ export default function ViewReport({ open, setOpen, report }) {
 
                         <div>
                           <h4 className="font-semibold">Description:</h4>
-                          <p className="whitespace-pre-wrap">
-                            {report?.desc}
-                          </p>
+                          <p className="whitespace-pre-wrap">{report?.desc}</p>
                         </div>
 
                         <div>
                           <h4 className="font-semibold">Submitted:</h4>
-                          <p>{report?.createdAt && new Date(report.createdAt).toLocaleString()}</p>
+                          <p>
+                            {report?.createdAt &&
+                              new Date(report.createdAt).toLocaleString()}
+                          </p>
                         </div>
                       </div>
                     </div>
@@ -116,7 +127,7 @@ export default function ViewReport({ open, setOpen, report }) {
                 <div className="mt-5 sm:mt-6">
                   <button
                     type="button"
-                    className="inline-flex w-full justify-center rounded-md bg-neutral-800 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-neutral-700"
+                    className="inline-flex w-full justify-center bg-neutral-800 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-neutral-700"
                     onClick={() => setOpen(false)}
                   >
                     Close
@@ -128,5 +139,5 @@ export default function ViewReport({ open, setOpen, report }) {
         </div>
       </Dialog>
     </Transition.Root>
-  )
-} 
\ No newline at end of file
+  );
+}
diff --git a/src/components/settingComponents/dropdown.jsx b/src/components/settingComponents/dropdown.jsx
index a3205e58..b0dc2323 100644
--- a/src/components/settingComponents/dropdown.jsx
+++ b/src/components/settingComponents/dropdown.jsx
@@ -4,17 +4,20 @@ export default function Dropdown({ tab }) {
   const router = useRouter();
 
   return (
-    <div className="mt-10 flex-none pl-4 pr-4 border-none ">
+    <div className="mb-6 lg:mb-0">
       <select
-        className="w-full p-2 text-lg font-medium text-white bg-neutral-800 border-none rounded"
-        value={tab} // Set the default value based on the tab prop
+        className="w-full rounded-lg border border-neutral-600 bg-neutral-800 px-4 py-3 text-base font-medium text-white focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500/20"
+        value={tab}
         onChange={(e) => router.push(e.target.value, null, { shallow: true })}
       >
         <option value="../settings">General</option>
         <option value="../settings/security">Security</option>
         <option value="../settings/preferences">Email Preferences</option>
         <option value="../settings/billing">Billing</option>
+        <option value="../settings/account-management">
+          Account Management
+        </option>
       </select>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/settingComponents/sidebar.jsx b/src/components/settingComponents/sidebar.jsx
index 6514ae0e..6cb21b0b 100644
--- a/src/components/settingComponents/sidebar.jsx
+++ b/src/components/settingComponents/sidebar.jsx
@@ -1,8 +1,8 @@
 import Link from 'next/link';
-import { useRouter } from 'next/router'
+import { useRouter } from 'next/router';
 
 export default function Sidebar() {
-  const router = useRouter()
+  const router = useRouter();
   return (
     <div
       className="mt-10 flex-none border-r pl-10 pr-10 text-gray-900 sm:pl-4 sm:pr-4"
@@ -41,7 +41,22 @@ export default function Sidebar() {
             </div>
           </Link>
         </li>
+
+        {/* Divider */}
+        <li className="py-2">
+          <div className="h-px bg-neutral-700"></div>
+        </li>
+
+        {/* Account Management Section */}
+        <li className="py-1">
+          <Link href="../settings/account-management" passHref>
+            <div className="flex items-center px-2 py-1 text-lg font-medium text-red-400 hover:text-red-300 sm:text-base">
+              <div className="mr-2 h-1.5 w-1.5 rounded-full bg-red-500"></div>
+              Account Management
+            </div>
+          </Link>
+        </li>
       </ul>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/pages/create/edit.jsx b/src/pages/create/edit.jsx
index 240d98f9..cf275a94 100644
--- a/src/pages/create/edit.jsx
+++ b/src/pages/create/edit.jsx
@@ -356,9 +356,12 @@ export default function Createchall() {
 
   useEffect(() => {
     const loadChallengeData = async () => {
+      const challengeId = router.query.id;
+      if (!challengeId) {
+        toast.error('No challenge ID provided in the URL.');
+        return;
+      }
       try {
-        const challengeId = router.query.id;
-        console.log(challengeId)
         const url = `${process.env.NEXT_PUBLIC_API_URL}/challenges/${challengeId}`;
         const hintURL = `${process.env.NEXT_PUBLIC_API_URL}/challenges/${challengeId}/getHints`;
 
@@ -367,7 +370,6 @@ export default function Createchall() {
 
         if (data && data.success) {
           const challenge = data.body;
-          console.log(challenge)
           setNewChallengeName(challenge.title);
           setCategory(challenge.category[0]);
           setHints(hintData.hintArray.map(hint => hint.message));
diff --git a/src/pages/dashboard.jsx b/src/pages/dashboard.jsx
index c0038c30..b44c9e7e 100644
--- a/src/pages/dashboard.jsx
+++ b/src/pages/dashboard.jsx
@@ -4,16 +4,25 @@ import { StandardNav } from '@/components/StandardNav';
 import { DashboardHeader } from '@/components/dashboard/DashboardHeader';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useEffect, useState } from 'react';
-import { ArrowLeftIcon, CheckCircleIcon, XCircleIcon, ClockIcon } from '@heroicons/react/24/solid';
+import {
+  ArrowLeftIcon,
+  CheckCircleIcon,
+  XCircleIcon,
+  ClockIcon,
+} from '@heroicons/react/24/solid';
 import request from '@/utils/request';
 import ChallengeCard from '@/components/profile/ChallengeCard';
-import { BoltIcon, RocketLaunchIcon, TrophyIcon } from '@heroicons/react/20/solid';
+import {
+  BoltIcon,
+  RocketLaunchIcon,
+  TrophyIcon,
+} from '@heroicons/react/20/solid';
 import Skeleton from 'react-loading-skeleton';
 import Upgrade from '@/components/nav/Upgrade';
 import { useRouter } from 'next/router';
 import { CheckIcon } from '@heroicons/react/20/solid';
-import { Dialog, Transition } from '@headlessui/react'
-import { Fragment } from 'react'
+import { Dialog, Transition } from '@headlessui/react';
+import { Fragment } from 'react';
 import OnboardingModal from '@/components/modals/OnboardingModal';
 import { UserCircleIcon } from '@heroicons/react/24/solid';
 import timeTracker from '@/utils/timeTracker';
@@ -24,11 +33,9 @@ const includedFeatures = [
   'Machines with GUI',
   'Access to more operating systems',
   'Longer machine times',
-  'CTFGuide Pro flair on your profile, comments, and created content'
-
-]
+  'CTFGuide Pro flair on your profile, comments, and created content',
+];
 export default function Dashboard() {
-
   const [likes, setLikes] = useState(null);
   const [badges, setbadges] = useState([]);
   const [challenges, setchallenges] = useState([]);
@@ -42,16 +49,169 @@ export default function Dashboard() {
   const exampleObjectives = [
     {
       completed: false,
-      description: "Touch grass",
+      description: 'Touch grass',
     },
     {
       completed: true,
-      description: "Eat McDonalds",
+      description: 'Eat McDonalds',
     },
-  ]
+  ];
   const [isOnboardingOpen, setIsOnboardingOpen] = useState(false);
   const [completedTasks, setCompletedTasks] = useState(null);
   const [timeProgress, setTimeProgress] = useState(null);
+  const [lastNotificationCheck, setLastNotificationCheck] = useState(null);
+  const [processedWarningIds, setProcessedWarningIds] = useState(() => {
+    // Load processed warnings from localStorage on component mount
+    if (typeof window !== 'undefined') {
+      const stored = localStorage.getItem('processedWarningIds');
+      return stored ? new Set(JSON.parse(stored)) : new Set();
+    }
+    return new Set();
+  });
+  const [isCheckingNotifications, setIsCheckingNotifications] = useState(false);
+
+  // Function to check for new notifications and show alerts
+  const checkForNewNotifications = async () => {
+    // Prevent multiple simultaneous checks
+    if (isCheckingNotifications) {
+      console.log('Notification check already in progress, skipping...');
+      return;
+    }
+
+    setIsCheckingNotifications(true);
+
+    try {
+      const response = await request(
+        `${process.env.NEXT_PUBLIC_API_URL}/account/notifications`,
+        'GET'
+      );
+      if (response && response.length > 0) {
+        // Check for new warning notifications that haven't been processed
+        const newWarnings = response.filter(
+          (notification) =>
+            notification.message &&
+            notification.message.includes('warning') &&
+            !processedWarningIds.has(notification.id)
+        );
+
+        // Only show toast for the most recent new warning that's within the last 5 minutes
+        if (newWarnings.length > 0) {
+          const latestNewWarning = newWarnings[0];
+          const warningTime = new Date(latestNewWarning.createdAt);
+          const fiveMinutesAgo = new Date(Date.now() - 5 * 60 * 1000); // 5 minutes ago
+
+          // Only show toast if the warning is recent (within last 5 minutes)
+          if (warningTime > fiveMinutesAgo) {
+            // Mark this notification as processed BEFORE showing toast
+            const newProcessedIds = new Set([
+              ...processedWarningIds,
+              latestNewWarning.id,
+            ]);
+            setProcessedWarningIds(newProcessedIds);
+
+            // Save to localStorage immediately
+            if (typeof window !== 'undefined') {
+              localStorage.setItem(
+                'processedWarningIds',
+                JSON.stringify([...newProcessedIds])
+              );
+            }
+
+            // Show custom notification for warning (only once for recent warnings)
+            showCustomNotification(latestNewWarning.message, 8000);
+
+            setLastNotificationCheck(new Date(latestNewWarning.createdAt));
+
+            console.log(`Toast shown for warning ID: ${latestNewWarning.id}`);
+          } else {
+            // For older warnings, just mark them as processed without showing toast
+            const newProcessedIds = new Set([
+              ...processedWarningIds,
+              latestNewWarning.id,
+            ]);
+            setProcessedWarningIds(newProcessedIds);
+
+            // Save to localStorage
+            if (typeof window !== 'undefined') {
+              localStorage.setItem(
+                'processedWarningIds',
+                JSON.stringify([...newProcessedIds])
+              );
+            }
+
+            console.log(
+              `Older warning marked as processed (no toast): ${latestNewWarning.id}`
+            );
+          }
+        } else {
+          console.log('No new warnings found');
+        }
+      }
+    } catch (error) {
+      console.error('Failed to check notifications:', error);
+    } finally {
+      setIsCheckingNotifications(false);
+    }
+  };
+
+  // Function to cleanup old processed warnings (keep only last 100)
+  const cleanupProcessedWarnings = () => {
+    if (typeof window !== 'undefined' && processedWarningIds.size > 100) {
+      const warningArray = Array.from(processedWarningIds);
+      const recentWarnings = warningArray.slice(-100); // Keep only last 100
+      const newProcessedIds = new Set(recentWarnings);
+      setProcessedWarningIds(newProcessedIds);
+      localStorage.setItem(
+        'processedWarningIds',
+        JSON.stringify([...newProcessedIds])
+      );
+    }
+  };
+
+  // Listen for warning events from other components
+  useEffect(() => {
+    let debounceTimer = null;
+
+    const handleWarningIssued = (event) => {
+      // Clear any existing timer
+      if (debounceTimer) {
+        clearTimeout(debounceTimer);
+      }
+
+      // Set a new timer to debounce the event
+      debounceTimer = setTimeout(() => {
+        console.log('Warning issued event received, checking notifications...');
+        checkForNewNotifications();
+      }, 1000); // Small delay to ensure backend has processed the warning
+    };
+
+    // Add event listener for warning issued events
+    window.addEventListener('warningIssued', handleWarningIssued);
+
+    // Add manual trigger function for testing (accessible from console)
+    window.triggerNotificationCheck = () => {
+      console.log('Manual notification check triggered');
+      checkForNewNotifications();
+    };
+
+    // Add function to clear processed warnings for testing
+    window.clearProcessedWarnings = () => {
+      console.log('Clearing processed warnings...');
+      setProcessedWarningIds(new Set());
+      if (typeof window !== 'undefined') {
+        localStorage.removeItem('processedWarningIds');
+      }
+    };
+
+    return () => {
+      window.removeEventListener('warningIssued', handleWarningIssued);
+      delete window.triggerNotificationCheck;
+      delete window.clearProcessedWarnings;
+      if (debounceTimer) {
+        clearTimeout(debounceTimer);
+      }
+    };
+  }, [processedWarningIds]);
 
   useEffect(() => {
     const user = localStorage.getItem('username');
@@ -63,28 +223,38 @@ export default function Dashboard() {
         );
         const data = await response.json();
         setbadges(data);
-      } catch { }
+      } catch {}
     };
     fetchBadges();
     setbadges([]);
 
     const fetchChallenges = async () => {
       try {
-        const pinnedChallengeEndPoint = process.env.NEXT_PUBLIC_API_URL + '/users/' + user + '/likes';
-        const pinnedChallengeResult = await request(pinnedChallengeEndPoint, "GET", null);
+        const pinnedChallengeEndPoint =
+          process.env.NEXT_PUBLIC_API_URL + '/users/' + user + '/likes';
+        const pinnedChallengeResult = await request(
+          pinnedChallengeEndPoint,
+          'GET',
+          null
+        );
         setchallenges(pinnedChallengeResult);
-      } catch (error) { }
+      } catch (error) {}
     };
     fetchChallenges();
     setchallenges([]);
 
     const fetchData = async () => {
       try {
-        const pinnedChallengeEndPoint = process.env.NEXT_PUBLIC_API_URL + '/users/' + user + '/likes';
-        const pinnedChallengeResult = await request(pinnedChallengeEndPoint, "GET", null);
+        const pinnedChallengeEndPoint =
+          process.env.NEXT_PUBLIC_API_URL + '/users/' + user + '/likes';
+        const pinnedChallengeResult = await request(
+          pinnedChallengeEndPoint,
+          'GET',
+          null
+        );
     //    setLikes(pinnedChallengeResult);
       } catch (error) {
-        console.error("Failed to fetch pinnedChallengeResults: ", error)
+        console.error('Failed to fetch pinnedChallengeResults: ', error);
       }
     };
     fetchData();
@@ -95,13 +265,17 @@ export default function Dashboard() {
       } catch (error) {
         console.error('Failed to fetch objectives: ', error);
       }
-    }
+    };
     fetchObjectives();
 
     const fetchRecommendedChallenges = async () => {
       setLoading(true);
       try {
-        const response = await request(`${process.env.NEXT_PUBLIC_API_URL}/challenges/dash/recommended`, 'GET', null);
+        const response = await request(
+          `${process.env.NEXT_PUBLIC_API_URL}/challenges/dash/recommended`,
+          'GET',
+          null
+        );
         setLikes(response); // Assuming the response directly contains the array of challenges
       } catch (error) {
         console.error('Failed to fetch recommended challenges: ', error);
@@ -110,11 +284,14 @@ export default function Dashboard() {
       }
     };
 
-
     const fetchPopularChallenges = async () => {
       setLoading(true);
       try {
-        const response = await request(`${process.env.NEXT_PUBLIC_API_URL}/challenges/dash/popular`, 'GET', null);
+        const response = await request(
+          `${process.env.NEXT_PUBLIC_API_URL}/challenges/dash/popular`,
+          'GET',
+          null
+        );
         setPopular(response); // Assuming the response directly contains the array of challenges
       } catch (error) {
         console.error('Failed to fetch recommended challenges: ', error);
@@ -123,20 +300,23 @@ export default function Dashboard() {
       }
     };
 
-    const fetchAccountDetails = async() => {
+    const fetchAccountDetails = async () => {
       request(`${process.env.NEXT_PUBLIC_API_URL}/account`, 'GET', null)
         .then((data) => {
-          
           setRole(data.role);
         })
         .catch((err) => {
           console.log(err);
         });
-    }
+    };
 
     const checkCompletedTasks = async () => {
       try {
-        const accountResponse = await request(`${process.env.NEXT_PUBLIC_API_URL}/account`, 'GET', null);
+        const accountResponse = await request(
+          `${process.env.NEXT_PUBLIC_API_URL}/account`,
+          'GET',
+          null
+        );
         const hasProfilePicture = accountResponse.profileImage;
         const hasCompletedChallenge = accountResponse.points > 0;
 
@@ -154,34 +334,55 @@ export default function Dashboard() {
     fetchRecommendedChallenges();
     fetchPopularChallenges();
     fetchAccountDetails();
-    request(`${process.env.NEXT_PUBLIC_API_URL}/activityFeed/`, 'GET', null).then(response => {
-      console.log(response)
+
+    // Check for recent notifications immediately (within last 5 minutes)
+    setTimeout(() => {
+      checkForNewNotifications();
+    }, 1000); // Check after 1 second to ensure component is fully loaded
+
+    // Cleanup old processed warnings on initial load
+    cleanupProcessedWarnings();
+
+    request(`${process.env.NEXT_PUBLIC_API_URL}/activityFeed/`, 'GET', null)
+      .then((response) => {
+        console.log(response);
       setActivities(response.activityFeed);
     })
-    .catch(error => {
+      .catch((error) => {
       console.error('Error fetching feed data: ', error);
     });
     const intervalId = setInterval(() => {
-      request(`${process.env.NEXT_PUBLIC_API_URL}/activityFeed/`, 'GET', null).then(response => {
+      request(`${process.env.NEXT_PUBLIC_API_URL}/activityFeed/`, 'GET', null)
+        .then((response) => {
         //console.log(response)
         if (response.activityFeed.length > 0) {
           setActivities(response.activityFeed);
         }
       })
-      .catch(error => {
+        .catch((error) => {
         console.error('Error fetching feed data: ', error);
       });
     }, 5000); // 5000 milliseconds = 5 seconds
   
-    return () => clearInterval(intervalId); //
-
+    // Cleanup old processed warnings every 5 minutes
+    const cleanupIntervalId = setInterval(() => {
+      cleanupProcessedWarnings();
+    }, 300000); // 5 minutes
+
+    return () => {
+      clearInterval(intervalId);
+      clearInterval(cleanupIntervalId);
+    };
   }, []);
 
   useEffect(() => {
     // Check onboarding status from API
     const checkOnboardingStatus = async () => {
       try {
-        const response = await request(`${process.env.NEXT_PUBLIC_API_URL}/account`, 'GET');
+        const response = await request(
+          `${process.env.NEXT_PUBLIC_API_URL}/account`,
+          'GET'
+        );
         if (!response.hasCompletedOnboarding) {
           setIsOnboardingOpen(true);
         }
@@ -191,6 +392,8 @@ export default function Dashboard() {
     };
 
     checkOnboardingStatus();
+
+    // Don't check for notifications on initial load to prevent showing old notifications on refresh
   }, []);
 
   const handleHideOnboarding = () => {
@@ -231,77 +434,103 @@ export default function Dashboard() {
         </style>
       </Head>
 
-     
-
-      <div className='flex flex-col min-h-screen'>
+      <div className="flex min-h-screen flex-col">
         <StandardNav />
         <DashboardHeader />
         <main className="animate__animated animate__fadeIn">
-          <div className="flex flex-col lg:flex-row md:mt-8 lg:mt-8 items-start  mx-auto  max-w-7xl text-neutral-50">
-            <div className='w-full'>
-              {completedTasks && (!completedTasks.profilePicture || !completedTasks.firstChallenge) && (
-         <div className='px-4'>
-         <div className='w-full p-4 animate__animated animate_fadeIn bg-neutral-800/50 rounded-lg '>
-                  <h1 className='text-2xl font-semibold flex align-middle'>
+          <div className="mx-auto flex max-w-7xl flex-col items-start text-neutral-50  md:mt-8  lg:mt-8 lg:flex-row">
+            <div className="w-full">
+              {completedTasks &&
+                (!completedTasks.profilePicture ||
+                  !completedTasks.firstChallenge) && (
+                  <div className="px-4">
+                    <div className="animate__animated animate_fadeIn w-full rounded-lg bg-neutral-800/50 p-4 ">
+                      <h1 className="flex align-middle text-2xl font-semibold">
                     Onboarding Tasks
                     <span 
-                      className='ml-auto text-neutral-400 text-sm cursor-pointer hover:text-neutral-200 transition-colors' 
+                          className="ml-auto cursor-pointer text-sm text-neutral-400 transition-colors hover:text-neutral-200"
                       onClick={handleHideOnboarding}
                     >
                       Hide
                     </span>
                   </h1>
-                  <p className='text-sm mb-6 text-neutral-300'>Looks like you're new around here. You should try to complete these tasks. Or don't.</p>
-                  <div className='grid grid-cols-1 md:grid-cols-2 gap-4'>
-                    <div onClick={() => {
-                      window.location.href = "./settings"
-                    }} className={`${completedTasks.profilePicture ? 'bg-green-900/20 border border-green-800' : 'bg-neutral-700/50 hover:bg-neutral-700/70 border border-neutral-600'} transition-colors p-6 rounded-lg  cursor-pointer`}>
-                      <div className='flex items-center gap-3 mb-3'>
-                        <div className='p-2 bg-blue-500/20 rounded-lg'>
-                          <UserCircleIcon className="w-6 h-6 text-blue-500" />
+                      <p className="mb-6 text-sm text-neutral-300">
+                        Looks like you're new around here. You should try to
+                        complete these tasks. Or don't.
+                      </p>
+                      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+                        <div
+                          onClick={() => {
+                            window.location.href = './settings';
+                          }}
+                          className={`${
+                            completedTasks.profilePicture
+                              ? 'border border-green-800 bg-green-900/20'
+                              : 'border border-neutral-600 bg-neutral-700/50 hover:bg-neutral-700/70'
+                          } cursor-pointer rounded-lg p-6  transition-colors`}
+                        >
+                          <div className="mb-3 flex items-center gap-3">
+                            <div className="rounded-lg bg-blue-500/20 p-2">
+                              <UserCircleIcon className="h-6 w-6 text-blue-500" />
+                            </div>
+                            <h2 className="font-semibold">
+                              Set a profile picture
+                            </h2>
+                            {completedTasks.profilePicture && (
+                              <CheckCircleIcon className="ml-auto h-6 w-6 text-green-500" />
+                            )}
+                          </div>
+                          <p className="text-sm text-neutral-400">
+                            Personalize your account by adding a profile picture
+                          </p>
                         </div>
-                        <h2 className='font-semibold'>Set a profile picture</h2>
-                        {completedTasks.profilePicture && (
-                          <CheckCircleIcon className="w-6 h-6 text-green-500 ml-auto" />
+                        <div
+                          onClick={() => {
+                            window.location.href =
+                              './challenges/07671f2f-cd67-4f0f-a3d1-9bdea299c59c?onboarding=true';
+                          }}
+                          className={`${
+                            completedTasks.firstChallenge
+                              ? 'border border-green-800 bg-green-900/20'
+                              : 'border border-neutral-600 bg-neutral-700/50 hover:bg-neutral-700/70'
+                          } cursor-pointer rounded-lg p-6  transition-colors`}
+                        >
+                          <div className="mb-3 flex items-center gap-3">
+                            <div className="rounded-lg bg-green-500/20 p-2">
+                              <BoltIcon className="h-6 w-6 text-green-500" />
+                            </div>
+                            <h2 className="font-semibold">
+                              Complete your first challenge
+                            </h2>
+                            {completedTasks.firstChallenge && (
+                              <CheckCircleIcon className="ml-auto h-6 w-6 text-green-500" />
                         )}
                       </div>
-                      <p className='text-neutral-400 text-sm'>Personalize your account by adding a profile picture</p>
-                    </div>
-                    <div onClick={() => {
-                      window.location.href = "./challenges/07671f2f-cd67-4f0f-a3d1-9bdea299c59c?onboarding=true"
-                    }} className={`${completedTasks.firstChallenge ? 'bg-green-900/20 border border-green-800' : 'bg-neutral-700/50 hover:bg-neutral-700/70 border border-neutral-600'} transition-colors p-6 rounded-lg  cursor-pointer`}>
-                      <div className='flex items-center gap-3 mb-3'>
-                        <div className='p-2 bg-green-500/20 rounded-lg'>
-                          <BoltIcon className="w-6 h-6 text-green-500" />
+                          <p className="text-sm text-neutral-400">
+                            Try solving an entry-level cybersecurity challenge
+                          </p>
                         </div>
-                        <h2 className='font-semibold'>Complete your first challenge</h2>
-                        {completedTasks.firstChallenge && (
-                          <CheckCircleIcon className="w-6 h-6 text-green-500 ml-auto" />
-                        )}
-                      </div>
-                      <p className='text-neutral-400 text-sm'>Try solving an entry-level cybersecurity challenge</p>
-                    </div>
                   </div>
                 </div>
                 </div>
               )}
 
-              <div className='w-full p-4'>
+              <div className="w-full p-4">
                 {/* Add after the onboarding tasks section */}
 {timeProgress && (
-  <div className='w-full p-6 bg-neutral-800/50 rounded-lg mb-4'>
-    <h1 className='text-2xl font-semibold align-middle mb-4'>
+                  <div className="mb-4 w-full rounded-lg bg-neutral-800/50 p-6">
+                    <h1 className="mb-4 align-middle text-2xl font-semibold">
       Weekly Progress 
       <Tooltip>
-        <div className='ml-1 text-xs text-neutral-400 cursor-help hover:text-neutral-300 transition-colors'>
+                        <div className="ml-1 cursor-help text-xs text-neutral-400 transition-colors hover:text-neutral-300">
           beta
         </div>
-        <div className="absolute z-10 bg-neutral-800 text-white text-sm w-[320px] px-4 py-2 rounded-md shadow-lg">
+                        <div className="absolute z-10 w-[320px] rounded-md bg-neutral-800 px-4 py-2 text-sm text-white shadow-lg">
           <div className="flex flex-col gap-1">
             <p>This is an experimental feature.</p>
             <button 
-              onClick={() => window.location.href = '/report'}
-              className="text-blue-400 hover:text-blue-300 text-left"
+                              onClick={() => (window.location.href = '/report')}
+                              className="text-left text-blue-400 hover:text-blue-300"
             >
               Click here to report an issue →
             </button>
@@ -310,162 +539,246 @@ export default function Dashboard() {
       </Tooltip>
     </h1>
     
-    <div className='space-y-4'>
+                    <div className="space-y-4">
       {/* Progress Bar */}
-      <div className='w-full bg-neutral-700 rounded-full h-2 overflow-hidden'>
+                      <div className="h-2 w-full overflow-hidden rounded-full bg-neutral-700">
         <div 
           className={`h-full rounded-full transition-all duration-500 ${
-            timeProgress.onTrack ? 'bg-green-500' : 'bg-yellow-500'
+                            timeProgress.onTrack
+                              ? 'bg-green-500'
+                              : 'bg-yellow-500'
           }`}
-          style={{ width: `${timeProgress.progressPercentage}%` }}
+                          style={{
+                            width: `${timeProgress.progressPercentage}%`,
+                          }}
         />
       </div>
 
       {/* Stats */}
-      <div className='grid grid-cols-1 md:grid-cols-3 gap-4 text-sm'>
-        <div className='bg-neutral-700/50 p-4 rounded-lg'>
-          <p className='text-neutral-400'>Time Spent</p>
-          <p className='text-xl font-semibold'>
-            {Math.round(timeProgress.totalMinutesSpent / 60)}h {timeProgress.totalMinutesSpent % 60}m
+                      <div className="grid grid-cols-1 gap-4 text-sm md:grid-cols-3">
+                        <div className="rounded-lg bg-neutral-700/50 p-4">
+                          <p className="text-neutral-400">Time Spent</p>
+                          <p className="text-xl font-semibold">
+                            {Math.round(timeProgress.totalMinutesSpent / 60)}h{' '}
+                            {timeProgress.totalMinutesSpent % 60}m
           </p>
         </div>
         
-        <div className='bg-neutral-700/50 p-4 rounded-lg'>
-          <p className='text-neutral-400'>Weekly Goal</p>
-          <p className='text-xl font-semibold'>
+                        <div className="rounded-lg bg-neutral-700/50 p-4">
+                          <p className="text-neutral-400">Weekly Goal</p>
+                          <p className="text-xl font-semibold">
             {Math.round(timeProgress.weeklyGoalMinutes / 60)}h
           </p>
         </div>
 
-        <div className='bg-neutral-700/50 p-4 rounded-lg'>
-          <p className='text-neutral-400'>Days Left</p>
-          <p className='text-xl font-semibold'>
+                        <div className="rounded-lg bg-neutral-700/50 p-4">
+                          <p className="text-neutral-400">Days Left</p>
+                          <p className="text-xl font-semibold">
             {timeProgress.daysLeft} days
           </p>
         </div>
       </div>
 
       {/* Status Message */}
-      <div className={`p-4 rounded-lg ${
-        timeProgress.onTrack ? 'bg-green-900/20 text-green-500' : 'bg-yellow-900/20 text-yellow-500'
-      }`}>
-        <p className='font-medium'>
+                      <div
+                        className={`rounded-lg p-4 ${
+                          timeProgress.onTrack
+                            ? 'bg-green-900/20 text-green-500'
+                            : 'bg-yellow-900/20 text-yellow-500'
+                        }`}
+                      >
+                        <p className="font-medium">
           {timeProgress.onTrack 
-            ? `You're on track! ${Math.round(timeProgress.progressPercentage)}% of your weekly goal complete.`
-            : `You're behind schedule. ${Math.round(timeProgress.progressPercentage)}% complete with ${timeProgress.daysLeft} days left.`
-          }
+                            ? `You're on track! ${Math.round(
+                                timeProgress.progressPercentage
+                              )}% of your weekly goal complete.`
+                            : `You're behind schedule. ${Math.round(
+                                timeProgress.progressPercentage
+                              )}% complete with ${
+                                timeProgress.daysLeft
+                              } days left.`}
         </p>
       </div>
     </div>
   </div>
 )}
 
-                <h1 className='text-2xl mb-6 font-semibold'>Recommended Challenges</h1>
-                <div className='flex flex-col md:flex-row lg:flex-col xl:flex-row justify-between gap-4 w-full'>
-                  {loading ? <><ChallengeCard /><ChallengeCard /></> : (
-                    likes?.length > 0 ?
-                      likes.map((challenge, index) => <ChallengeCard challenge={challenge} />)
-                      : <><ChallengeCard /><ChallengeCard /></>
+                <h1 className="mb-6 text-2xl font-semibold">
+                  Recommended Challenges
+                </h1>
+                <div className="flex w-full flex-col justify-between gap-4 md:flex-row lg:flex-col xl:flex-row">
+                  {loading ? (
+                    <>
+                      <ChallengeCard />
+                      <ChallengeCard />
+                    </>
+                  ) : likes?.length > 0 ? (
+                    likes.map((challenge, index) => (
+                      <ChallengeCard challenge={challenge} />
+                    ))
+                  ) : (
+                    <>
+                      <ChallengeCard />
+                      <ChallengeCard />
+                    </>
                   )}
                 </div>
               </div>
 
-              <div className='w-full rounded-sm'>
-                <div className='w-full p-4'>
-                  <h1 className='text-2xl mb-3 font-semibold'>Popular Challenges</h1>
-                  <div className='flex flex-col md:flex-row lg:flex-col xl:flex-row justify-between gap-4 w-full'>
-                  {loading ? <><ChallengeCard /><ChallengeCard /></> : (
-                      popular?.length > 0 ?
-                        popular.map((challenge, index) => <ChallengeCard challenge={challenge} />)
-                        : <><ChallengeCard /><ChallengeCard /></>
+              <div className="w-full rounded-sm">
+                <div className="w-full p-4">
+                  <h1 className="mb-3 text-2xl font-semibold">
+                    Popular Challenges
+                  </h1>
+                  <div className="flex w-full flex-col justify-between gap-4 md:flex-row lg:flex-col xl:flex-row">
+                    {loading ? (
+                      <>
+                        <ChallengeCard />
+                        <ChallengeCard />
+                      </>
+                    ) : popular?.length > 0 ? (
+                      popular.map((challenge, index) => (
+                        <ChallengeCard challenge={challenge} />
+                      ))
+                    ) : (
+                      <>
+                        <ChallengeCard />
+                        <ChallengeCard />
+                      </>
                     )}
                   </div>
                 </div>
               </div>
             </div>
-            <div className='relative flex flex-col lg:w-[400px]  rounded-md shrink-0 gap-6'>
-         
-              <div  className='flex flex-col p-6 rounded-sm w-full hidden' >
-                <h1 className='text-2xl text-neutral-100 tracking-wide font-semibold mb-4'>
-                  <TrophyIcon className='w-10 my-auto mr-4 inline-flex' />
+            <div className="relative flex shrink-0 flex-col  gap-6 rounded-md lg:w-[400px]">
+              <div className="flex hidden w-full flex-col rounded-sm p-6">
+                <h1 className="mb-4 text-2xl font-semibold tracking-wide text-neutral-100">
+                  <TrophyIcon className="my-auto mr-4 inline-flex w-10" />
                   Daily Objectives
                 </h1>
-                <div className=' mb-4'></div>
-                <ul className='list-none grid grid-cols-[2.5rem,1fr] gap-y-2'>
-                  {objectives &&
-                    objectives.map((objective) =>
+                <div className=" mb-4"></div>
+                <ul className="grid list-none grid-cols-[2.5rem,1fr] gap-y-2">
+                  {(objectives &&
+                    objectives.map((objective) => (
                       <div>
-                        {objective.completed && <CheckCircleIcon className='w-8 text-blue-300'></CheckCircleIcon>
-                          || <XCircleIcon className='w-8 text-neutral-300'></XCircleIcon>}
-                        <li className={`inline-flex ${objective.completed && 'line-through'} w-full my-auto`}>{objective.description}</li>
+                        {(objective.completed && (
+                          <CheckCircleIcon className="w-8 text-blue-300"></CheckCircleIcon>
+                        )) || (
+                          <XCircleIcon className="w-8 text-neutral-300"></XCircleIcon>
+                        )}
+                        <li
+                          className={`inline-flex ${
+                            objective.completed && 'line-through'
+                          } my-auto w-full`}
+                        >
+                          {objective.description}
+                        </li>
                       </div>
-                    )
-                    || <>
-                      <Skeleton containerClassName='col-span-2' className='mb-4' baseColor='#262626' highlightColor='#3a3a3a' count={2} />
-                    </>}
+                    ))) || (
+                    <>
+                      <Skeleton
+                        containerClassName="col-span-2"
+                        className="mb-4"
+                        baseColor="#262626"
+                        highlightColor="#3a3a3a"
+                        count={2}
+                      />
+                    </>
+                  )}
                 </ul>
               </div>
-              <div className='w-full p-4 h-fit relative'>
-                <h1 className='text-2xl text-neutral-100 tracking-wide font-semibold mb-4'>
+              <div className="relative h-fit w-full p-4">
+                <h1 className="mb-4 text-2xl font-semibold tracking-wide text-neutral-100">
                   Global Feed
                 </h1>
-                <ul className='flex flex-col gap-4 [&>*]:line-clamp-2'>
-             
-           {activities && activities.length > 0 ?
-  activities.slice().reverse().map((data) =>
+                <ul className="flex flex-col gap-4 [&>*]:line-clamp-2">
+                  {activities && activities.length > 0 ? (
+                    activities
+                      .slice()
+                      .reverse()
+                      .map((data) => (
     <div className="text-lg">
       <li>
-        <a className='text-blue-500 hover:text-blue-600 cursor-pointer font-bold' href={"../users/" + data.userName}>{data.userName}</a> completed 
-        <a className='text-yellow-500 hover:text-yellow-600 cursor-pointer' href={"../challenges/" + data.challengeId}> {data.challengeName}</a>
+                            <a
+                              className="cursor-pointer font-bold text-blue-500 hover:text-blue-600"
+                              href={'../users/' + data.userName}
+                            >
+                              {data.userName}
+                            </a>{' '}
+                            completed
+                            <a
+                              className="cursor-pointer text-yellow-500 hover:text-yellow-600"
+                              href={'../challenges/' + data.challengeId}
+                            >
+                              {' '}
+                              {data.challengeName}
+                            </a>
       </li>
       </div>
-  ) :
+                      ))
+                  ) : (
   <>
-    <Skeleton containerClassName='col-span-2' className='mb-4' baseColor='#262626' highlightColor='#3a3a3a' count={2} />
+                      <Skeleton
+                        containerClassName="col-span-2"
+                        className="mb-4"
+                        baseColor="#262626"
+                        highlightColor="#3a3a3a"
+                        count={2}
+                      />
   </>
-}
-
-                  
-
+                  )}
                 </ul>
               </div>  
 
-
-              <div className='w-full pb-4 pl-4 pr-4 relative'>
-              {  role == "USER" &&
-              <div className='mb-10'>
-              <h1 className='text-2xl  text-neutral-100 tracking-wide font-semibold mb-4'>
+              <div className="relative w-full pb-4 pl-4 pr-4">
+                {role == 'USER' && (
+                  <div className="mb-10">
+                    <h1 className="mb-4  text-2xl font-semibold tracking-wide text-neutral-100">
                   Sponsor Messaging
                 </h1>
     <div 
-        class='break-inside relative overflow-hidden flex flex-col justify-between space-y-2 text-sm rounded-xl max-w-[23rem] p-4 pb-9 mb-4 bg-blue-800 text-white cursor-pointer' 
+                      class="break-inside relative mb-4 flex max-w-[23rem] cursor-pointer flex-col justify-between space-y-2 overflow-hidden rounded-xl bg-blue-800 p-4 pb-9 text-sm text-white"
         onClick={() => setShowUpgradeModal(true)}
     >
-        <div class='flex flex-row items-center space-x-3 mt-2'>
-            <img src="../product.png" width="80" ></img>
-            <span class='text-base text-lg mt-2'>Upgrade to CTFGuide Pro today for just <span className="font-semibold">$5/month</span>.</span>
+                      <div class="mt-2 flex flex-row items-center space-x-3">
+                        <img src="../product.png" width="80"></img>
+                        <span class="mt-2 text-base text-lg">
+                          Upgrade to CTFGuide Pro today for just{' '}
+                          <span className="font-semibold">$5/month</span>.
+                        </span>
         </div>
-        <div class='flex justify-between items-center hidden'>
+                      <div class="flex hidden items-center justify-between">
                     <span></span>
-            <button class='flex items-center justify-center text-xs font-medium rounded-full px-4 py-2 space-x-1 bg-white text-black'>
+                        <button class="flex items-center justify-center space-x-1 rounded-full bg-white px-4 py-2 text-xs font-medium text-black">
             <span>Upgrade Now</span>
-            <svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='#000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
-                <path d='M5 12h13M12 5l7 7-7 7' />
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="20"
+                            height="20"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="#000000"
+                            stroke-width="2"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                          >
+                            <path d="M5 12h13M12 5l7 7-7 7" />
             </svg>
             </button>
         </div>
-
-        
     </div>
 </div>
-}
-     <h1 className='text-2xl text-neutral-100 tracking-wide font-semibold  mb-4'>
+                )}
+                <h1 className="mb-4 text-2xl font-semibold tracking-wide  text-neutral-100">
                  Connect with CTFGuide
                 </h1>
-    <div class='break-inside relative overflow-hidden flex flex-col justify-between  text-sm rounded-xl max-w-[23rem] px-6 py-4 mb-4 bg-indigo-800 text-white'>
-       
-    <a href="https://discord.gg/q3hgRBvgkX" target="_blank" rel="noopener noreferrer">
-          <div class="mr-4 max-w-sm  flex items-center gap-x-8">
+                <div class="break-inside relative mb-4 flex max-w-[23rem] flex-col  justify-between overflow-hidden rounded-xl bg-indigo-800 px-6 py-4 text-sm text-white">
+                  <a
+                    href="https://discord.gg/q3hgRBvgkX"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    <div class="mr-4 flex  max-w-sm items-center gap-x-8">
             <i class="fab fa-discord  ml-5  h-10 w-10 text-4xl text-white"></i>
 
             <div>
@@ -473,9 +786,10 @@ export default function Dashboard() {
               Join our Discord!
             </h5>
             <p class="mb-3 font-normal text-white">
-              Talk to other CTF players and get help with challenges!
+                          Talk to other CTF players and get help with
+                          challenges!
             </p>
-            <p class="inline-flex  text-center mx-auto items-center bg-white px-2 rounded-lg text-indigo-500 font-bold py-1 hover:underline">
+                        <p class="mx-auto  inline-flex items-center rounded-lg bg-white px-2 py-1 text-center font-bold text-indigo-500 hover:underline">
               Invite Link
               <svg
                 class="ml-2 h-5 w-5"
@@ -490,24 +804,36 @@ export default function Dashboard() {
             </div>
           </div>
         </a>
-
         </div>
 
-
-        <div class='break-inside relative overflow-hidden flex flex-col justify-between  text-sm rounded-xl max-w-[23rem] px-6 py-4 mb-4 bg-black border border-white/10 text-white'>
-       
+                <div class="break-inside relative mb-4 flex max-w-[23rem] flex-col  justify-between overflow-hidden rounded-xl border border-white/10 bg-black px-6 py-4 text-sm text-white">
        <div>
-             <div class="mr-4 max-w-sm  flex items-center gap-x-6">
-           
-               <svg className='ml-5' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="100" ><path fill="white" d="M 5.9199219 6 L 20.582031 27.375 L 6.2304688 44 L 9.4101562 44 L 21.986328 29.421875 L 31.986328 44 L 44 44 L 28.681641 21.669922 L 42.199219 6 L 39.029297 6 L 27.275391 19.617188 L 17.933594 6 L 5.9199219 6 z M 9.7167969 8 L 16.880859 8 L 40.203125 42 L 33.039062 42 L 9.7167969 8 z"/></svg>
+                    <div class="mr-4 flex  max-w-sm items-center gap-x-6">
+                      <svg
+                        className="ml-5"
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 50 50"
+                        width="100"
+                      >
+                        <path
+                          fill="white"
+                          d="M 5.9199219 6 L 20.582031 27.375 L 6.2304688 44 L 9.4101562 44 L 21.986328 29.421875 L 31.986328 44 L 44 44 L 28.681641 21.669922 L 42.199219 6 L 39.029297 6 L 27.275391 19.617188 L 17.933594 6 L 5.9199219 6 z M 9.7167969 8 L 16.880859 8 L 40.203125 42 L 33.039062 42 L 9.7167969 8 z"
+                        />
+                      </svg>
                <div>
                <h5 class=" text-xl font-semibold tracking-tight text-white">
                  Follow us on X!
                </h5>
                <p class="mb-3 font-normal text-white">
-                 Stay updated with the latest CTFGuide news and updates!
+                          Stay updated with the latest CTFGuide news and
+                          updates!
                </p>
-               <a href='https://x.com/intent/user?screen_name=ctfguideapp' target="_blank" rel="noopener noreferrer" class="inline-flex  text-center mx-auto items-center bg-white px-2 rounded-lg text-black  font-bold py-1 hover:underline">
+                        <a
+                          href="https://x.com/intent/user?screen_name=ctfguideapp"
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          class="mx-auto  inline-flex items-center rounded-lg bg-white px-2 py-1 text-center  font-bold text-black hover:underline"
+                        >
                  Follow @ctfguideapp
                  <svg
                    class="ml-2 h-5 w-5"
@@ -519,42 +845,47 @@ export default function Dashboard() {
                    <path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z"></path>
                  </svg>
                </a>
-          
                </div>
                </div>
-            
              </div>
-       
-   
            </div>
-          
              </div>
-
-
             </div>
-          </div >
-        </main >
-        <div className='flex w-full h-full grow basis-0'></div>
+          </div>
+        </main>
+        <div className="flex h-full w-full grow basis-0"></div>
         <Footer />
-      </div >
+      </div>
 
-                {showUpgradeModal &&    <div className={`fixed inset-0 bg-black bg-opacity-70 backdrop-blur-sm z-50 ${open ? '' : 'hidden'}`}>
-        <div className="modal-content  w-full h-full animate__animated  animate__fadeIn">
-            <div className="bg-neutral-900 bg-opacity-70  w-full h-full py-24 sm:py-32">
-                <div className="mx-auto max-w-7xl px-6 lg:px-8 animate__animated animate__slideInDown">
+      {showUpgradeModal && (
+        <div
+          className={`fixed inset-0 z-50 bg-black bg-opacity-70 backdrop-blur-sm ${
+            open ? '' : 'hidden'
+          }`}
+        >
+          <div className="modal-content  animate__animated animate__fadeIn h-full  w-full">
+            <div className="h-full w-full  bg-neutral-900 bg-opacity-70 py-24 sm:py-32">
+              <div className="animate__animated animate__slideInDown mx-auto max-w-7xl px-6 lg:px-8">
                     <div className="mx-auto max-w-3xl sm:text-center">
-                         <h2 className="text-3xl font-bold tracking-tight text-white sm:text-4xl">Upgrade to CTFGuide <span className='text-yellow-500'>Pro</span></h2>
-                    
+                  <h2 className="text-3xl font-bold tracking-tight text-white sm:text-4xl">
+                    Upgrade to CTFGuide{' '}
+                    <span className="text-yellow-500">Pro</span>
+                  </h2>
                         </div>
-                        <div className="mx-auto mt-10 max-w-2xl rounded-3xl sm:mt-10 lg:mx-0 lg:flex lg:max-w-none bg-neutral-800 border-none">
+                <div className="mx-auto mt-10 max-w-2xl rounded-3xl border-none bg-neutral-800 sm:mt-10 lg:mx-0 lg:flex lg:max-w-none">
                             <div className="p-8 sm:p-10 lg:flex-auto">
-                                <h3 className="text-2xl font-bold tracking-tight text-white">Monthly Subscription</h3>
+                    <h3 className="text-2xl font-bold tracking-tight text-white">
+                      Monthly Subscription
+                    </h3>
                                 <p className="mt-6 text-base leading-7 text-white">
-                                Enjoy our core features for free and upgrade to get perks like priority access to terminals, custom container images, customization perks, and more!  
-
+                      Enjoy our core features for free and upgrade to get perks
+                      like priority access to terminals, custom container
+                      images, customization perks, and more!
                                 </p>
                                 <div className="mt-10 flex items-center gap-x-4">
-                                    <h4 className="flex-none text-lg font-semibold leading-6 text-blue-600">What's included</h4>
+                      <h4 className="flex-none text-lg font-semibold leading-6 text-blue-600">
+                        What's included
+                      </h4>
                                     <div className="h-px flex-auto bg-gray-100" />
                                 </div>
                                 <ul
@@ -563,24 +894,36 @@ export default function Dashboard() {
                                 >
                                     {includedFeatures.map((feature) => (
                                         <li key={feature} className="flex gap-x-3">
-                                            <CheckIcon className="h-6 w-5 flex-none text-blue-600" aria-hidden="true" />
+                          <CheckIcon
+                            className="h-6 w-5 flex-none text-blue-600"
+                            aria-hidden="true"
+                          />
                                             {feature}
                                         </li>
                                     ))}
                                 </ul>
 
-                                <button onClick={() => setShowUpgradeModal(false)} className=" mt-6 px-4 py-1 bg-neutral-900 hover:bg-neutral-700 text-white">
+                    <button
+                      onClick={() => setShowUpgradeModal(false)}
+                      className=" mt-6 bg-neutral-900 px-4 py-1 text-white hover:bg-neutral-700"
+                    >
                           No, thanks.
                         </button>
                             </div>
 
                             <div className="-mt-2 p-2 lg:mt-0 lg:w-full lg:max-w-md lg:flex-shrink-0 ">
-            <div className="rounded-2xl bg-neutral-850 h-full text-center ring-1 ring-inset ring-gray-900/5 bg-neutral-700 lg:flex lg:flex-col lg:justify-center">
+                    <div className="bg-neutral-850 h-full rounded-2xl bg-neutral-700 text-center ring-1 ring-inset ring-gray-900/5 lg:flex lg:flex-col lg:justify-center">
               <div className="mx-auto max-w-xs px-8">
-                <p className="text-base font-semibold text-white">Billed monthly</p>
+                        <p className="text-base font-semibold text-white">
+                          Billed monthly
+                        </p>
                 <p className="mt-6 flex items-baseline justify-center gap-x-2">
-                  <span className="text-5xl font-bold tracking-tight text-white">$5</span>
-                  <span className="text-sm font-semibold leading-6 tracking-wide text-white">USD</span>
+                          <span className="text-5xl font-bold tracking-tight text-white">
+                            $5
+                          </span>
+                          <span className="text-sm font-semibold leading-6 tracking-wide text-white">
+                            USD
+                          </span>
                 </p>
                 <a
                   href="../settings/billing"
@@ -589,27 +932,19 @@ export default function Dashboard() {
                   Subscribe
                 </a>
                 <p className="mt-6 text-xs leading-5 text-white">
-                  Invoices and receipts available for easy company reimbursement
+                          Invoices and receipts available for easy company
+                          reimbursement
                 </p>
-
-
-
+                      </div>
+                    </div>
+                  </div>
+                </div>
               </div>
-
-
             </div>
           </div>
                         </div>
-                  
-                    </div>
-                </div>
-            </div>
-        </div>}
-        <OnboardingModal 
-        isOpen={isOnboardingOpen}
-        onClose={completeOnboarding}
-       
-      />
+      )}
+      <OnboardingModal isOpen={isOnboardingOpen} onClose={completeOnboarding} />
     </>
   );
 }
diff --git a/src/pages/login.jsx b/src/pages/login.jsx
index e2808958..e26117f8 100644
--- a/src/pages/login.jsx
+++ b/src/pages/login.jsx
@@ -9,6 +9,7 @@ import 'react-toastify/dist/ReactToastify.css';
 import AuthFooter from '@/components/auth/AuthFooter';
 import { GoogleLogin } from '@react-oauth/google';
 import { jwtDecode } from 'jwt-decode';
+import AccountReactivation from '@/components/AccountReactivation';
 
 import { Context } from '@/context';
 import { useContext } from 'react';
@@ -21,15 +22,17 @@ export default function Login() {
   const [password, setPassword] = useState('');
   const [accountType, setAccountType] = useState('EMAIL'); // ['EMAIL', 'GOOGLE']
   const [showOnboarding, setShowOnboarding] = useState(false);
+  const [accountSuspended, setAccountSuspended] = useState(false);
+  const [suspendedAccountData, setSuspendedAccountData] = useState(null);
 
   async function handleLoginRequest(requestOptions, isGoogle) {
     setIsLoading(true);
-    
+
     try {
       const url = process.env.NEXT_PUBLIC_API_URL + '/account/login';
       const response = await fetch(url, requestOptions);
-      if(response.status === 404) {
-        if(isGoogle) {
+      if (response.status === 404) {
+        if (isGoogle) {
           setShowOnboarding(true);
           return;
         }
@@ -51,13 +54,30 @@ export default function Login() {
 
         router.push('/dashboard');
       } else {
-        if(data.status === 500) {
-          toast.error("There was a problem logging in, try again later");
+        // Check if account is suspended
+        if (data.code === 'ACCOUNT_SUSPENDED') {
+          setAccountSuspended(true);
+
+          // Use deletion info directly from login response
+          const deletionInfo = data.deletionInfo || null;
+
+          setSuspendedAccountData({
+            email: data.email || email,
+            message: data.message,
+            accountType: accountType,
+            password: accountType === 'EMAIL' ? password : null,
+            deletionInfo: deletionInfo, // Pass deletion info to reactivation component
+          });
+          return;
+        }
+
+        if (data.status === 500) {
+          toast.error('There was a problem logging in, try again later');
         } else {
           toast.error(data.message);
         }
       }
-    } catch(error) {
+    } catch (error) {
       console.log(error);
     }
     setIsLoading(false);
@@ -65,24 +85,24 @@ export default function Login() {
 
   const handleLogin = async (e) => {
     e.preventDefault();
-    const requestOptions = { 
-      method: 'POST', 
-      body: JSON.stringify({ email, password, accountType: 'EMAIL'}), 
-      headers: { 'Content-Type': 'application/json' } 
+    const requestOptions = {
+      method: 'POST',
+      body: JSON.stringify({ email, password, accountType: 'EMAIL' }),
+      headers: { 'Content-Type': 'application/json' },
     };
     setAccountType('EMAIL');
     await handleLoginRequest(requestOptions, false);
-  }
+  };
 
   async function handleSuccess(data) {
     const { credential } = data;
     const decode = jwtDecode(credential);
     const { email } = decode;
     setEmail(email);
-    const requestOptions = { 
-      method: 'POST', 
-      body: JSON.stringify({ email, password: null, accountType: 'GOOGLE'}), 
-      headers: { 'Content-Type': 'application/json' }
+    const requestOptions = {
+      method: 'POST',
+      body: JSON.stringify({ email, password: null, accountType: 'GOOGLE' }),
+      headers: { 'Content-Type': 'application/json' },
     };
     setAccountType('GOOGLE');
     await handleLoginRequest(requestOptions, true);
@@ -93,8 +113,51 @@ export default function Login() {
     toast.error('Google login failed. Please try again later.');
   }
 
-
-  if(showOnboarding) return <OnBoardingTransition email={email} password={password} accountType={accountType} />
+  const handleReactivated = (token) => {
+    if (token) {
+      // Account was reactivated successfully
+      document.cookie = `idToken=${token}; SameSite=None; Secure; Path=/`;
+      router.push('/dashboard');
+    } else {
+      // Go back to login form
+      setAccountSuspended(false);
+      setSuspendedAccountData(null);
+    }
+  };
+
+  const handleCancelReactivation = () => {
+    setAccountSuspended(false);
+    setSuspendedAccountData(null);
+  };
+
+  if (showOnboarding)
+    return (
+      <OnBoardingTransition
+        email={email}
+        password={password}
+        accountType={accountType}
+      />
+    );
+
+  if (accountSuspended) {
+    return (
+      <>
+        <Head>
+          <title>Account Suspended - CTFGuide</title>
+        </Head>
+        <div className="flex min-h-screen items-center justify-center bg-neutral-900 p-4">
+          <AccountReactivation
+            email={suspendedAccountData?.email}
+            accountType={suspendedAccountData?.accountType}
+            password={suspendedAccountData?.password}
+            deletionInfo={suspendedAccountData?.deletionInfo}
+            onReactivated={handleReactivated}
+            onCancel={handleCancelReactivation}
+          />
+        </div>
+      </>
+    );
+  }
 
   return (
     <>
@@ -105,30 +168,24 @@ export default function Login() {
           url(&apos;https://fonts.googleapis.com/css2?family=Poppins&display=swap&apos;);
         </style>
       </Head>
-      <div style={{
-        backgroundPosition: 'center',
-        backgroundRepeat: 'repeat',
-        width: '100%',
-        height: '100%',
-      }}>
+      <div
+        style={{
+          backgroundPosition: 'center',
+          backgroundRepeat: 'repeat',
+          width: '100%',
+          height: '100%',
+        }}
+      >
         <div
           style={{ fontFamily: 'Poppins, sans-serif' }}
-          className="flex min-h-full flex-col justify-center py-12 sm:px-6 lg:px-8 animate__animated animate__fadeIn "
+          className="animate__animated animate__fadeIn flex min-h-full flex-col justify-center py-12 sm:px-6 lg:px-8 "
         >
-
-
           <form onSubmit={handleLogin}>
-
-            <div className="sm:mx-auto sm:w-full sm:max-w-md">
-
-            </div>
+            <div className="sm:mx-auto sm:w-full sm:max-w-md"></div>
 
             <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md ">
               <div>
-                <div
-
-                  className=" pb-10 pt-4 px-4 shadow sm:px-10 border-t-4 border-blue-600 bg-neutral-800"
-                >
+                <div className=" border-t-4 border-blue-600 bg-neutral-800 px-4 pb-10 pt-4 shadow sm:px-10">
                   <div className="space-y-6">
                     <div
                       id="error"
@@ -139,35 +196,39 @@ export default function Login() {
                       </h1>
                     </div>
                     <div>
-                      <div className='flex items-center'>
-
-                        <h1 className='text-white  text-xl'>Login to </h1>
-                        <Link href="/" className="flex items-center ml-1">
+                      <div className="flex items-center">
+                        <h1 className="text-xl  text-white">Login to </h1>
+                        <Link href="/" className="ml-1 flex items-center">
                           <img
                             className="z-10 h-10 w-10"
                             src="/darkLogo.png"
                             alt="CTFGuide"
                           />
-                          <h1 className="text-xl text-white font-semibold">CTFGuide</h1>
+                          <h1 className="text-xl font-semibold text-white">
+                            CTFGuide
+                          </h1>
                         </Link>
                       </div>
                       <p className="text-sm text-gray-600">
                         <a
                           onClick={() => router.push('/register')}
-                          className="font-semibold text-blue-600 hover:text-blue-700 cursor-pointer"
+                          className="cursor-pointer font-semibold text-blue-600 hover:text-blue-700"
                         >
                           Don't have an account?
                         </a>
                       </p>
                       <label
                         htmlFor="email"
-                        className="block text-sm font-medium text-gray-200 mt-4"
+                        className="mt-4 block text-sm font-medium text-gray-200"
                       >
                         Email
                       </label>
                       <div className="mt-1">
                         <input
-                          style={{ backgroundColor: '#161716', borderWidth: '0px' }}
+                          style={{
+                            backgroundColor: '#161716',
+                            borderWidth: '0px',
+                          }}
                           id="username"
                           name="email"
                           onChange={(e) => setEmail(e.target.value)}
@@ -188,7 +249,10 @@ export default function Login() {
                       </label>
                       <div className="mt-1">
                         <input
-                          style={{ backgroundColor: '#161716', borderWidth: '0px' }}
+                          style={{
+                            backgroundColor: '#161716',
+                            borderWidth: '0px',
+                          }}
                           id="password"
                           name="password"
                           onChange={(e) => setPassword(e.target.value)}
@@ -215,20 +279,33 @@ export default function Login() {
                       <button
                         type="submit"
                         onClick={handleLogin}
-                        className="flex w-full justify-center rounded-sm border border-transparent bg-blue-700 hover:bg-blue-700/90 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+                        className="flex w-full justify-center rounded-sm border border-transparent bg-blue-700 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-blue-700 hover:bg-blue-700/90 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
                         style={{ height: '40px' }}
                       >
-                        {
-                          isLoading ? (
-                            <svg className="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
-                            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
-                          </svg>                          ) : (
-                              <span className=''>
-                            Sign In
-                            </span>
-                            )
-                        }
+                        {isLoading ? (
+                          <svg
+                            className="h-5 w-5 animate-spin text-white"
+                            xmlns="http://www.w3.org/2000/svg"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                          >
+                            <circle
+                              className="opacity-25"
+                              cx="12"
+                              cy="12"
+                              r="10"
+                              stroke="currentColor"
+                              strokeWidth="4"
+                            ></circle>
+                            <path
+                              className="opacity-75"
+                              fill="currentColor"
+                              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+                            ></path>
+                          </svg>
+                        ) : (
+                          <span className="">Sign In</span>
+                        )}
                       </button>
                     </div>
                   </div>
@@ -245,25 +322,27 @@ export default function Login() {
                           width="370" // Optional: Custom button width
                         />
                       </div>
-                      <div className='mt-2 bg-neutral-900 hidden'>
+                      <div className="mt-2 hidden bg-neutral-900">
                         <a
                           href="#"
-                          className="inline-flex items-center w-full justify-center rounded-sm py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-neutral-900/50"
+                          className="inline-flex w-full items-center justify-center rounded-sm px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-neutral-900/50"
                         >
-                          <span className="sr-only">Sign in with Microsoft</span>
-                          <img className='w-5 h-5 mr-2' src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/25/Microsoft_icon.svg/512px-Microsoft_icon.svg.png" alt="Microsoft"/>
+                          <span className="sr-only">
+                            Sign in with Microsoft
+                          </span>
+                          <img
+                            className="mr-2 h-5 w-5"
+                            src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/25/Microsoft_icon.svg/512px-Microsoft_icon.svg.png"
+                            alt="Microsoft"
+                          />
                           <p>Login with Microsoft</p>
                         </a>
                       </div>
                     </div>
                   </div>
-
-
                 </div>
 
-
-                <AuthFooter/>
-
+                <AuthFooter />
               </div>
             </div>
           </form>
@@ -287,7 +366,7 @@ export default function Login() {
 }
 
 function OnBoardingTransition(props) {
-  console.log('OnboardingTransition')
+  console.log('OnboardingTransition');
   console.log(props);
   const { email, password, accountType } = props;
   return (
@@ -301,9 +380,13 @@ function OnBoardingTransition(props) {
       </Head>
       <main>
         <div className="h-flex h-screen items-center justify-center">
-          <OnboardingFlow email={email} password={password} accountType={accountType} />
+          <OnboardingFlow
+            email={email}
+            password={password}
+            accountType={accountType}
+          />
         </div>
       </main>
     </>
-  )
+  );
 }
diff --git a/src/pages/moderation.jsx b/src/pages/moderation.jsx
index b4689c5e..9a55aead 100644
--- a/src/pages/moderation.jsx
+++ b/src/pages/moderation.jsx
@@ -1,48 +1,716 @@
-import React, { useEffect, useState } from 'react';
+import React, {
+  useEffect,
+  useState,
+  useRef,
+  useCallback,
+  useMemo,
+} from 'react';
 import {
   ArrowRightIcon,
   QuestionMarkCircleIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  UserGroupIcon,
+  DocumentTextIcon,
+  ExclamationTriangleIcon,
+  ChartBarIcon,
+  EllipsisVerticalIcon,
+  MagnifyingGlassIcon,
+  ClockIcon,
+  ChevronDownIcon,
+  ArrowPathIcon,
 } from '@heroicons/react/20/solid';
 
 import Head from 'next/head';
 import { StandardNav } from '@/components/StandardNav';
 import { Footer } from '@/components/Footer';
-import { PracticeNav } from '@/components/practice/PracticeNav';
-import { Community } from '@/components/practice/community';
 import request from '@/utils/request';
-import { MyTable } from '@/components/Table';
-import { TableHead, TableRow, TableHeader, TableCell, TableBody, Table } from "@/components/ui/table"
 import ViewChallenge from '@/components/moderation/ViewChallenge';
 import ViewReport from '@/components/moderation/ViewReport';
+import UserActionModals from '@/components/moderation/UserActionModals';
 
-export default function Competitions() {
+export default function Moderation() {
+  // Challenge states
   const [selectedChallenges, setSelectedChallenges] = useState([]);
   const [selectedId, setSelectedId] = useState(null);
   const [pendingChallenges, setPendingChallenges] = useState([]);
   const [challengeIsOpen, setChallengeIsOpen] = useState(false);
+  const [bonusPoints, setBonusPoints] = useState(0);
 
-
+  // Report states - CONSOLIDATED
   const [reports, setReports] = useState([]);
-  
-  
-  const [bonusPoints, setBonusPoints] = useState(0);
   const [selectedReport, setSelectedReport] = useState(null);
   const [reportIsOpen, setReportIsOpen] = useState(false);
+  const [reportStats, setReportStats] = useState(null);
+  const [reportFilters, setReportFilters] = useState({
+    type: '',
+    status: '',
+    page: 0,
+  });
 
-  
-  // get reports
-  useEffect(() => {
-    const fetchReports = async () => {
-      const response = await request(process.env.NEXT_PUBLIC_API_URL + '/reports', "GET");
-      setReports(response);
-    };
-    fetchReports();
+  // User management states
+  const [users, setUsers] = useState([]);
+  const [currentUserPage, setCurrentUserPage] = useState(0);
+  const [totalUserPages, setTotalUserPages] = useState(0);
+  const [totalUsers, setTotalUsers] = useState(0);
+  const [userSearchFilter, setUserSearchFilter] = useState('');
+
+  // Suspended accounts states
+  const [suspendedAccounts, setSuspendedAccounts] = useState([]);
+  const [suspendedAccountsPage, setSuspendedAccountsPage] = useState(0);
+  const [totalSuspendedAccounts, setTotalSuspendedAccounts] = useState(0);
+  const [suspendedAccountsPagination, setSuspendedAccountsPagination] =
+    useState(null);
+  const [suspendedSearchFilter, setSuspendedSearchFilter] = useState('');
+
+  // Suspension history states
+  const [suspensionHistory, setSuspensionHistory] = useState([]);
+  const [suspensionHistoryPage, setSuspensionHistoryPage] = useState(0);
+  const [totalSuspensionHistory, setTotalSuspensionHistory] = useState(0);
+  const [suspensionHistoryPagination, setSuspensionHistoryPagination] =
+    useState(null);
+  const [suspensionHistorySearchFilter, setSuspensionHistorySearchFilter] =
+    useState('');
+  const [suspensionHistoryStatusFilter, setSuspensionHistoryStatusFilter] =
+    useState('all');
+  const [suspensionHistoryLoading, setSuspensionHistoryLoading] =
+    useState(false);
+
+  // Platform stats
+  const [stats, setStats] = useState(null);
+
+  // Active tab state
+  const [activeTab, setActiveTab] = useState('overview');
+  const [activeAccountsTab, setActiveAccountsTab] = useState('suspended');
+  const [activeHistoryTab, setActiveHistoryTab] = useState('suspended');
+  const [systemStatus, setSystemStatus] = useState('online');
+  const [lastStatusCheck, setLastStatusCheck] = useState(null);
+  const [isLoadingStatus, setIsLoadingStatus] = useState(false);
+  const [showMobileMenu, setShowMobileMenu] = useState(false);
+
+  // Account deletion states
+  const [pendingDeletions, setPendingDeletions] = useState([]);
+  const [deletionStats, setDeletionStats] = useState(null);
+  const [deletionsSearchFilter, setDeletionsSearchFilter] = useState('');
+
+  // Autocomplete states
+  const [userSuggestions, setUserSuggestions] = useState([]);
+  const [challengeSuggestions, setChallengeSuggestions] = useState([]);
+  const [showUserSuggestions, setShowUserSuggestions] = useState(false);
+  const [showChallengeSuggestions, setShowChallengeSuggestions] =
+    useState(false);
+  const [userSearchQuery, setUserSearchQuery] = useState('');
+  const [challengeSearchQuery, setChallengeSearchQuery] = useState('');
+
+  // Notification states
+  const [notification, setNotification] = useState(null);
+
+  // Modal states for suspend and role (keeping these as they may still be used)
+  const [showSuspendModal, setShowSuspendModal] = useState(false);
+  const [showRoleModal, setShowRoleModal] = useState(false);
+  const [selectedUserForAction, setSelectedUserForAction] = useState(null);
+  const [suspendForm, setSuspendForm] = useState({ reason: '', duration: '' });
+  const [roleForm, setRoleForm] = useState({ role: 'USER' });
+
+  // User management modal states
+  const [showUserManagementPopup, setShowUserManagementPopup] = useState(false);
+  const [selectedUserForManagement, setSelectedUserForManagement] =
+    useState(null);
+
+  // Grouped warnings states
+  const [groupedWarnings, setGroupedWarnings] = useState([]);
+  const [groupedWarningsPage, setGroupedWarningsPage] = useState(1);
+  const [groupedWarningsTotal, setGroupedWarningsTotal] = useState(0);
+  const [groupedWarningsLoading, setGroupedWarningsLoading] = useState(false);
+  const groupedWarningsPerPage = 10;
+  const [expandedWarningUsers, setExpandedWarningUsers] = useState(new Set());
+
+  // Grouped suspensions states
+  const [groupedSuspensions, setGroupedSuspensions] = useState([]);
+  const [groupedSuspensionsPage, setGroupedSuspensionsPage] = useState(1);
+  const [groupedSuspensionsTotal, setGroupedSuspensionsTotal] = useState(0);
+  const [groupedSuspensionsLoading, setGroupedSuspensionsLoading] =
+    useState(false);
+  const groupedSuspensionsPerPage = 10;
+  const [expandedSuspensionUsers, setExpandedSuspensionUsers] = useState(
+    new Set()
+  );
+
+  // Combined history total (unique users)
+  const [historyTotalUsers, setHistoryTotalUsers] = useState(0);
+
+  // Performance optimization states
+  const [dataCache, setDataCache] = useState(new Map());
+  const [lastFetchTimes, setLastFetchTimes] = useState(new Map());
+  const [isInitialLoadComplete, setIsInitialLoadComplete] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const CACHE_DURATION = 5 * 60 * 1000; // 5 minutes
+
+  // Function to check if data is cached and fresh
+  const isDataFresh = useCallback(
+    (key) => {
+      const lastFetch = lastFetchTimes.get(key);
+      if (!lastFetch) return false;
+      return Date.now() - lastFetch < CACHE_DURATION;
+    },
+    [lastFetchTimes]
+  );
+
+  // Function to update cache
+  const updateCache = useCallback((key, data) => {
+    setDataCache((prev) => new Map(prev).set(key, data));
+    setLastFetchTimes((prev) => new Map(prev).set(key, Date.now()));
   }, []);
-  
+
+  // Function to get cached data
+  const getCachedData = useCallback(
+    (key) => {
+      return dataCache.get(key);
+    },
+    [dataCache]
+  );
+
+  // Optimized function to calculate total unique users in history
+  const calculateHistoryTotalUsers = useCallback(
+    async (forceRefresh = false) => {
+      const cacheKey = 'historyTotalUsers';
+
+      // Return cached data if fresh and not forcing refresh
+      if (!forceRefresh && isDataFresh(cacheKey)) {
+        const cached = getCachedData(cacheKey);
+        if (cached !== undefined) {
+          setHistoryTotalUsers(cached);
+          return;
+        }
+      }
+
+      try {
+        // Use smaller limits for better performance
+        const [warningsResponse, suspensionsResponse] = await Promise.all([
+          request(
+            `${process.env.NEXT_PUBLIC_API_URL}/admin/warnings?page=1&limit=100`,
+            'GET'
+          ),
+          request(
+            `${process.env.NEXT_PUBLIC_API_URL}/admin/suspension-history-enhanced?page=0&size=100&search=&status=all`,
+            'GET'
+          ),
+        ]);
+
+        const warnings = warningsResponse?.warnings || [];
+        const suspensions = suspensionsResponse?.history || [];
+
+        // Group by user with optimized processing
+        const groupedWarnings = groupWarningsByUser(warnings);
+        const groupedSuspensions = groupSuspensionsByUser(suspensions);
+
+        // Calculate total unique users
+        const totalUsers = groupedWarnings.length + groupedSuspensions.length;
+        setHistoryTotalUsers(totalUsers);
+
+        // Cache the result
+        updateCache(cacheKey, totalUsers);
+      } catch (error) {
+        console.error('Error calculating history total users:', error);
+        setHistoryTotalUsers(0);
+      }
+    },
+    [isDataFresh, getCachedData, updateCache]
+  );
+
+  // Recent activity states
+  const [recentActivity, setRecentActivity] = useState({
+    comments: [],
+    writeups: [],
+    lessons: [],
+  });
+  const [loadingActivity, setLoadingActivity] = useState(false);
+  const activityLoadedRef = useRef(false);
+  const [activeActivityTab, setActiveActivityTab] = useState('comments');
+
+  // New modal states for custom actions
+  const [showReactivateModal, setShowReactivateModal] = useState(false);
+  const [reactivateForm, setReactivateForm] = useState({ reason: '' });
+  const [showDetailsModal, setShowDetailsModal] = useState(false);
+  const [selectedDetails, setSelectedDetails] = useState(null);
+  const [selectedUserForReactivation, setSelectedUserForReactivation] =
+    useState(null);
+
+  // Notification helper function
+  const showNotification = (message, type = 'info') => {
+    const id = Date.now();
+    setNotification({ id, message, type });
+  };
+
+  // Helper function to get username and reason from various sources
+  const getUsernameAndReason = (prefilledUsername = null) => {
+    let username = prefilledUsername || userSearchQuery || '';
+    let reason = '';
+
+    // Try to get values from DOM elements if they exist
+    const usernameElement = document.getElementById('username-input');
+    const reasonElement = document.getElementById('reason-input');
+    const popupReasonElement = document.getElementById('popupReasonInput');
+
+    if (usernameElement && usernameElement.value) {
+      username = usernameElement.value;
+    }
+    if (reasonElement && reasonElement.value) {
+      reason = reasonElement.value;
+    }
+    if (popupReasonElement && popupReasonElement.value) {
+      reason = popupReasonElement.value;
+    }
+
+    // Ensure username and reason are strings before calling trim
+    const safeUsername = typeof username === 'string' ? username.trim() : '';
+    const safeReason = typeof reason === 'string' ? reason.trim() : '';
+
+    return { username: safeUsername, reason: safeReason };
+  };
+
+  // Helper function for challenge operations
+  const getChallengeIdAndReason = () => {
+    let challengeId = challengeSearchQuery;
+    let reason = '';
+
+    const challengeElement = document.getElementById('challenge-input');
+    const reasonElement = document.getElementById('challenge-reason-input');
+
+    if (challengeElement && challengeElement.value) {
+      challengeId = challengeElement.value;
+    }
+    if (reasonElement && reasonElement.value) {
+      reason = reasonElement.value;
+    }
+
+    return { challengeId: challengeId?.trim(), reason: reason?.trim() };
+  };
+
+  // Notification component
+  const NotificationModal = () => {
+    if (!notification) return null;
+
+    return (
+      <div className="fixed inset-0 z-50 flex items-center justify-center p-4 duration-300 animate-in fade-in-0">
+        <div
+          className="fixed inset-0 bg-black/50 backdrop-blur-sm duration-300 animate-in fade-in-0"
+          onClick={() => setNotification(null)}
+        />
+        <div className="relative border border-neutral-700 bg-neutral-800/95 p-8 shadow-2xl backdrop-blur-md duration-300 animate-in zoom-in-95">
+          <div className="flex items-center space-x-4">
+            <div className="min-w-0 flex-1">
+              <p className="break-words text-lg font-medium text-white">
+                {notification.message}
+              </p>
+            </div>
+            <button
+              onClick={() => setNotification(null)}
+              className="flex h-8 w-8 items-center justify-center text-gray-400 transition-all duration-200 hover:bg-neutral-700/50 hover:text-white"
+            >
+              <i className="fas fa-times"></i>
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  // ENHANCED AUTOCOMPLETE FUNCTIONS
+  const fetchUserSuggestions = async (query) => {
+    if (query.length < 1) {
+      setUserSuggestions([]);
+      return;
+    }
+
+    try {
+      const response = await request(
+        `${
+          process.env.NEXT_PUBLIC_API_URL
+        }/admin/users?search=${encodeURIComponent(query)}&limit=15`,
+        'GET'
+      );
+      const q = query.toLowerCase();
+      const users = (response.users || []).filter((user) => {
+        return (
+          (user.username && user.username.toLowerCase().includes(q)) ||
+          (user.email && user.email.toLowerCase().includes(q)) ||
+          (user.name && user.name.toLowerCase().includes(q))
+        );
+      });
+      setUserSuggestions(users);
+    } catch (error) {
+      console.error('Failed to fetch user suggestions:', error);
+      setUserSuggestions([]);
+    }
+  };
+
+  const fetchChallengeSuggestions = async (query) => {
+    if (query.length < 2) {
+      setChallengeSuggestions([]);
+      return;
+    }
+
+    try {
+      // Fetch both pending and approved challenges
+      const [pendingResponse, approvedResponse] = await Promise.all([
+        request(`${process.env.NEXT_PUBLIC_API_URL}/pending`, 'GET'),
+        request(
+          `${
+            process.env.NEXT_PUBLIC_API_URL
+          }/challenges?search=${encodeURIComponent(query)}&limit=10`,
+          'GET'
+        ),
+      ]);
+
+      const pendingChallenges = (pendingResponse || [])
+        .filter((challenge) =>
+          challenge.title.toLowerCase().includes(query.toLowerCase())
+        )
+        .map((challenge) => ({ ...challenge, status: 'Pending' }));
+
+      const approvedChallenges = (approvedResponse?.challenges || []).map(
+        (challenge) => ({ ...challenge, status: 'Approved' })
+      );
+
+      const allChallenges = [...pendingChallenges, ...approvedChallenges];
+      setChallengeSuggestions(allChallenges.slice(0, 10));
+    } catch (error) {
+      console.error('Failed to fetch challenge suggestions:', error);
+      setChallengeSuggestions([]);
+    }
+  };
+
+  const handleUserInputChange = (e) => {
+    const value = e.target.value;
+    setUserSearchQuery(value);
+
+    if (value.length >= 1) {
+      // Clear previous timeout
+      clearTimeout(window.userSearchTimeout);
+
+      // Set new timeout for debouncing
+      window.userSearchTimeout = setTimeout(() => {
+        // Fetch suggestions from API, but also filter by email if needed
+        fetchUserSuggestions(value);
+        setShowUserSuggestions(true);
+      }, 300);
+    } else {
+      setUserSuggestions([]);
+      setShowUserSuggestions(false);
+    }
+  };
+
+  const handleChallengeInputChange = (e) => {
+    const value = e.target.value;
+    setChallengeSearchQuery(value);
+
+    if (value.length >= 1) {
+      // Clear previous timeout
+      clearTimeout(window.challengeSearchTimeout);
+
+      // Set new timeout for debouncing
+      window.challengeSearchTimeout = setTimeout(() => {
+        fetchChallengeSuggestions(value);
+        setShowChallengeSuggestions(true);
+      }, 300);
+    } else {
+      setChallengeSuggestions([]);
+      setShowChallengeSuggestions(false);
+    }
+  };
+
+  const handleUserSelection = (user) => {
+    setUserSearchQuery(user.username);
+    setShowUserSuggestions(false);
+    setUserSuggestions([]);
+  };
+
+  const handleChallengeSelection = (challenge) => {
+    setChallengeSearchQuery(challenge.title);
+    setShowChallengeSuggestions(false);
+    setChallengeSuggestions([]);
+  };
+
+  // UNIFIED FETCH FUNCTIONS
+  const fetchReports = async (filters = {}) => {
+    try {
+      console.log('Fetching reports with filters:', filters);
+
+      const queryParams = new URLSearchParams();
+      if (filters.type) queryParams.append('type', filters.type);
+      if (filters.status) queryParams.append('status', filters.status);
+      if (filters.page) queryParams.append('page', filters.page.toString());
+
+      const url = `${process.env.NEXT_PUBLIC_API_URL}/reports${
+        queryParams.toString() ? '?' + queryParams.toString() : ''
+      }`;
+      const response = await request(url, 'GET');
+
+      console.log('Reports response:', response);
+
+      // Handle different response formats
+      let reportsData = [];
+      if (Array.isArray(response)) {
+        reportsData = response;
+      } else if (response && Array.isArray(response.reports)) {
+        reportsData = response.reports;
+      } else if (response && response.data && Array.isArray(response.data)) {
+        reportsData = response.data;
+      }
+
+      setReports(reportsData);
+      return response;
+    } catch (error) {
+      console.error('Failed to fetch reports:', error);
+      setReports([]);
+      return { reports: [] };
+    }
+  };
+
+  const fetchReportStats = async () => {
+    try {
+      const response = await request(
+        `${process.env.NEXT_PUBLIC_API_URL}/reports/stats`,
+        'GET'
+      );
+      setReportStats(response);
+    } catch (error) {
+      console.error('Failed to fetch report stats:', error);
+      setReportStats(null);
+    }
+  };
+
+  // Fetch functions
+  const fetchPendingChallenges = async () => {
+    try {
+      console.log('Fetching pending challenges...');
+      const response = await request(
+        process.env.NEXT_PUBLIC_API_URL + '/pending',
+        'GET'
+      );
+      console.log('Pending challenges response:', response);
+      setPendingChallenges(response || []);
+    } catch (error) {
+      console.error('Failed to fetch pending challenges:', error);
+      setPendingChallenges([]);
+    }
+  };
+
+  const fetchUsers = async (page = 0, searchQuery = '') => {
+    try {
+      const response = await request(
+        `${
+          process.env.NEXT_PUBLIC_API_URL
+        }/admin/users?page=${page}&size=25&search=${encodeURIComponent(
+          searchQuery
+        )}&sort=createdAt:desc`,
+        'GET'
+      );
+      if (response.result || response.users) {
+        // Sort users by createdAt descending (newest first)
+        const usersSorted = (response.result || response.users).sort(
+          (a, b) => new Date(b.createdAt) - new Date(a.createdAt)
+        );
+        setUsers(usersSorted);
+        setTotalUsers(response.totalEntries || 0);
+        setTotalUserPages(Math.min(response.lastPage + 1 || 0, 1000));
+        setCurrentUserPage(page);
+      } else {
+        setUsers([]);
+        setTotalUsers(0);
+        setTotalUserPages(0);
+      }
+    } catch (error) {
+      console.error('Failed to fetch users:', error);
+      showNotification('Failed to fetch users. Please try again.', 'error');
+      setUsers([]);
+    }
+  };
+
+  const fetchSuspendedAccounts = async (page = 0, searchQuery = '') => {
+    try {
+      console.log(
+        'Fetching suspended accounts for page:',
+        page,
+        'with search:',
+        searchQuery
+      );
+
+      const queryParams = new URLSearchParams();
+      queryParams.append('page', page.toString());
+      queryParams.append('size', '20');
+      if (searchQuery.trim()) {
+        queryParams.append('search', searchQuery.trim());
+      }
+
+      const url = `${
+        process.env.NEXT_PUBLIC_API_URL
+      }/admin/suspended-accounts?${queryParams.toString()}`;
+      console.log('Fetching from URL:', url);
+
+      const response = await request(url, 'GET');
+      console.log('Suspended accounts API response:', response);
+
+      if (response === null) {
+        console.error('Request returned null - likely authentication issue');
+        setSuspendedAccounts([]);
+        setSuspendedAccountsPagination(null);
+        setTotalSuspendedAccounts(0);
+        setSuspendedAccountsPage(0);
+        return;
+      }
+
+      if (response && response.success) {
+        console.log(
+          'Setting suspended accounts data:',
+          response.users.length,
+          'accounts'
+        );
+        console.log('Sample user data:', response.users[0]);
+        setSuspendedAccounts(response.users || []);
+        setSuspendedAccountsPagination(response.pagination);
+        setTotalSuspendedAccounts(response.pagination?.totalCount || 0);
+        setSuspendedAccountsPage(page);
+      } else {
+        console.error('Invalid response format:', response);
+        if (response && response.error) {
+          console.error('API Error:', response.error);
+        }
+        setSuspendedAccounts([]);
+        setSuspendedAccountsPagination(null);
+        setTotalSuspendedAccounts(0);
+        setSuspendedAccountsPage(0);
+      }
+    } catch (error) {
+      console.error('Failed to fetch suspended accounts:', error);
+      setSuspendedAccounts([]);
+      setSuspendedAccountsPagination(null);
+      setTotalSuspendedAccounts(0);
+      setSuspendedAccountsPage(0);
+    }
+  };
+
+  const fetchSuspensionHistory = async (
+    page = 0,
+    searchQuery = '',
+    statusFilter = 'all'
+  ) => {
+    try {
+      setSuspensionHistoryLoading(true);
+      const response = await request(
+        `${
+          process.env.NEXT_PUBLIC_API_URL
+        }/admin/suspension-history-enhanced?page=${page}&size=20&search=${encodeURIComponent(
+          searchQuery
+        )}&status=${statusFilter}`,
+        'GET'
+      );
+
+      if (response && response.success) {
+        setSuspensionHistory(response.history || []);
+        setSuspensionHistoryPagination(response.pagination);
+        setSuspensionHistoryPage(page);
+      } else {
+        console.error('Failed to fetch suspension history:', response);
+        setSuspensionHistory([]);
+        setSuspensionHistoryPagination(null);
+      }
+    } catch (error) {
+      console.error('Error fetching suspension history:', error);
+      setSuspensionHistory([]);
+      setSuspensionHistoryPagination(null);
+    } finally {
+      setSuspensionHistoryLoading(false);
+    }
+  };
+
+  const handleProcessDeletion = async (requestId) => {
+    try {
+      const response = await request(
+        `${process.env.NEXT_PUBLIC_API_URL}/account-deletion/admin/process/${requestId}`,
+        'POST'
+      );
+
+      if (response.success) {
+        showNotification('Account deletion processed automatically', 'success');
+        await fetchPendingDeletions();
+        await fetchDeletionStats();
+      } else {
+        throw new Error(response.error || 'Failed to process deletion');
+      }
+    } catch (error) {
+      console.error('Error processing deletion:', error);
+      showNotification(`Failed to process deletion: ${error.message}`, 'error');
+    }
+  };
+
+  const fetchStats = async () => {
+    try {
+      console.log('Fetching platform stats...');
+      const response = await request(
+        `${process.env.NEXT_PUBLIC_API_URL}/admin/stats`,
+        'GET'
+      );
+      console.log('Stats response:', response);
+      setStats(response);
+    } catch (error) {
+      console.error('Failed to fetch platform stats', error);
+      setStats(null);
+    }
+  };
+
+  // Fetch account deletion requests
+  const fetchPendingDeletions = async (searchQuery = '') => {
+    try {
+      console.log('Fetching pending deletions with search:', searchQuery);
+
+      const queryParams = new URLSearchParams();
+      if (searchQuery.trim()) {
+        queryParams.append('search', searchQuery.trim());
+      }
+
+      const url = `${
+        process.env.NEXT_PUBLIC_API_URL
+      }/account-deletion/admin/pending${
+        queryParams.toString() ? '?' + queryParams.toString() : ''
+      }`;
+
+      const response = await request(url, 'GET');
+      console.log('Pending deletions response:', response);
+      if (response.success) {
+        setPendingDeletions(response.data || []);
+      }
+    } catch (error) {
+      console.error('Failed to fetch pending deletions:', error);
+      setPendingDeletions([]);
+    }
+  };
+
+  // Fetch deletion statistics
+  const fetchDeletionStats = async () => {
+    try {
+      console.log('Fetching deletion stats...');
+      const response = await request(
+        `${process.env.NEXT_PUBLIC_API_URL}/account-deletion/admin/stats`,
+        'GET'
+      );
+      console.log('Deletion stats response:', response);
+      if (response.success) {
+        setDeletionStats(response.data);
+      }
+    } catch (error) {
+      console.error('Failed to fetch deletion stats:', error);
+      setDeletionStats(null);
+    }
+  };
+
+  // Autocomplete functions
   const handleSelectChallenge = (id) => {
-    setSelectedChallenges(prev => {
+    setSelectedChallenges((prev) => {
       if (prev.includes(id)) {
-        return prev.filter(item => item !== id);
+        return prev.filter((item) => item !== id);
       } else {
         return [...prev, id];
       }
@@ -50,473 +718,6114 @@ export default function Competitions() {
   };
 
   const resetFields = () => {
-    document.getElementById('usernameInput').value = "";
-    document.getElementById('reasonInput').value = "";
+    const usernameInput = document.getElementById('username-input');
+    const reasonInput = document.getElementById('reason-input');
+    const popupReasonInput = document.getElementById('popupReasonInput');
+
+    if (usernameInput) usernameInput.value = '';
+    if (reasonInput) reasonInput.value = '';
+    if (popupReasonInput) popupReasonInput.value = '';
+
+    setUserSearchQuery('');
+    setShowUserSuggestions(false);
+    setUserSuggestions([]);
   };
 
-  const fetchPendingChallenges = async () => {
-    try {
-      const response = await request(process.env.NEXT_PUBLIC_API_URL + '/pending', "GET");
-      console.log(response)
-      setPendingChallenges(response);
-    } catch (error) {
-      console.error(error);
-    }
+  const resetChallengeFields = () => {
+    const challengeInput = document.getElementById('challenge-input');
+    const challengeReasonInput = document.getElementById(
+      'challenge-reason-input'
+    );
+
+    if (challengeInput) challengeInput.value = '';
+    if (challengeReasonInput) challengeReasonInput.value = '';
+
+    setChallengeSearchQuery('');
+    setShowChallengeSuggestions(false);
+    setChallengeSuggestions([]);
   };
 
   const handleApproveChallenge = async () => {
     try {
-      const response = await request(`${process.env.NEXT_PUBLIC_API_URL}/admin/challenges/${selectedId}/approve`, "POST", { bonusPoints });
+      const response = await request(
+        `${process.env.NEXT_PUBLIC_API_URL}/admin/challenges/${selectedId}/approve`,
+        'POST',
+        { bonusPoints }
+      );
       console.log(response);
-      // Handle success or error response
-      fetchPendingChallenges(); // Refresh pending challenges
+      fetchPendingChallenges();
     } catch (error) {
       console.error(error);
     }
   };
 
   const handleDeleteChallenge = async () => {
-    const challengeId = document.getElementById('challengeIdInput').value;
-    const reason = document.getElementById('challengeReasonInput').value;
+    const { challengeId, reason } = getChallengeIdAndReason();
 
-    try{
-      const response = await request(`${process.env.NEXT_PUBLIC_API_URL}/admin/${challengeId}/deleteChallenge`, "POST", {reason});
-      if(response.success){
-        alert("Challenge deleted successfully!");
-      }else {
-        alert("Failed to delete challenge.");
-      }
+    if (!challengeId) {
+      showNotification('Please enter a challenge ID to delete.', 'error');
+      return;
+    }
 
-      document.getElementById('challengeIdInput').value = "";
-      document.getElementById('challengeReasonInput').value = "";
+    if (!reason) {
+      showNotification(
+        'Please provide a reason for deleting this challenge.',
+        'error'
+      );
+      return;
+    }
 
+    try {
+      const response = await request(
+        `${process.env.NEXT_PUBLIC_API_URL}/admin/challenges/${challengeId}/delete`,
+        'POST',
+        { reason }
+      );
+      showNotification(
+        `Challenge ${challengeId} has been deleted successfully.`,
+        'success'
+      );
 
-    }catch(err){
-      console.log(err);
-      alert("An error occurred while deleting the challenge.");
+      // Clear inputs
+      setChallengeSearchQuery('');
+      const reasonElement = document.getElementById('challenge-reason-input');
+      if (reasonElement) reasonElement.value = '';
+    } catch (error) {
+      console.error('Failed to delete challenge:', error);
+      showNotification(
+        `Failed to delete challenge ${challengeId}. Please try again.`,
+        'error'
+      );
     }
-
   };
 
   const handleUnapproveChallenge = async () => {
-    const challengeId = document.getElementById('challengeIdInput').value;
-    const reason = document.getElementById('challengeReasonInput').value;
+    const { challengeId, reason } = getChallengeIdAndReason();
 
-    try{
-      const response = await request(`${process.env.NEXT_PUBLIC_API_URL}/admin/${challengeId}/unapproveChallenge`, "POST", {reason});
-      if(response.success){
-        alert("Challenge unapproved successfully!");
-      }else {
-        alert("Failed to unapprove challenge.");
-      }
+    if (!challengeId) {
+      showNotification('Please enter a challenge ID to unapprove.', 'error');
+      return;
+    }
 
-      document.getElementById('challengeIdInput').value = "";
-      document.getElementById('challengeReasonInput').value = "";
+    if (!reason) {
+      showNotification(
+        'Please provide a reason for unapproving this challenge.',
+        'error'
+      );
+      return;
+    }
 
+    try {
+      const response = await request(
+        `${process.env.NEXT_PUBLIC_API_URL}/admin/challenges/${challengeId}/unapprove`,
+        'POST',
+        { reason }
+      );
+      showNotification(
+        `Challenge ${challengeId} has been unapproved successfully.`,
+        'success'
+      );
 
-    }catch(err){
-      console.log(err);
-      alert("An error occurred while unapproving the challenge.");
+      // Clear inputs
+      setChallengeSearchQuery('');
+      const reasonElement = document.getElementById('challenge-reason-input');
+      if (reasonElement) reasonElement.value = '';
+    } catch (error) {
+      console.error('Failed to unapprove challenge:', error);
+      showNotification(
+        `Failed to unapprove challenge ${challengeId}. Please try again.`,
+        'error'
+      );
     }
-
   };
 
   const handleResyncLeaderboard = async () => {
-    try{
-      const response = await request(`${process.env.NEXT_PUBLIC_API_URL}/admin/syncLeaderboard`, "POST");
-      if(response.success){
-        alert("Leaderboard resynced successfully!");
-      }else {
-        alert("Failed to resync leaderboard.");
-      }
-    }catch(err){
+    try {
+      const response = await request(
+        `${process.env.NEXT_PUBLIC_API_URL}/admin/syncLeaderboard`,
+        'POST'
+      );
+      if (response.success) {
+        showNotification('Leaderboard resynced successfully!', 'success');
+      } else {
+        showNotification('Failed to resync leaderboard.', 'error');
+      }
+    } catch (err) {
       console.log(err);
-      alert("An error occurred while resyncing the leaderboard.");
+      showNotification(
+        'An error occurred while resyncing the leaderboard.',
+        'error'
+      );
     }
   };
 
-  useEffect(() => {
-    fetchPendingChallenges();
-  }, []);
-
-  const handleResetPFP = async () => {
-    const username = document.getElementById('usernameInput').value;
-    const reason = document.getElementById('reasonInput').value;
-    console.log('REASON: ', reason);
+  const handleResetPFP = async (prefilledUsername = null) => {
+    const { username, reason } = getUsernameAndReason(prefilledUsername);
 
     if (!username) {
-      alert("Please enter a username.");
+      showNotification(
+        'Please enter a username to reset profile picture.',
+        'error'
+      );
+      return;
+    }
+
+    if (!reason) {
+      showNotification(
+        'Please provide a reason for resetting the profile picture.',
+        'error'
+      );
       return;
     }
 
     try {
-      const response = await request(`${process.env.NEXT_PUBLIC_API_URL}/admin/${username}/resetPFP`, "POST", { reason });
-      if (response.success) {
-        alert("Profile picture reset successfully!");
-      } else {
-        alert("Failed to reset profile picture.");
-      }
+      const response = await request(
+        `${process.env.NEXT_PUBLIC_API_URL}/admin/users/${username}/reset-pfp`,
+        'POST',
+        { reason }
+      );
+      showNotification(
+        `Profile picture reset for ${username} successfully.`,
+        'success'
+      );
 
-      resetFields();
+      // Refresh users list
+      fetchUsers(currentUserPage, userSearchFilter);
 
+      // Clear inputs
+      setUserSearchQuery('');
+      const reasonElement = document.getElementById('reason-input');
+      const popupReasonElement = document.getElementById('popupReasonInput');
+      if (reasonElement) reasonElement.value = '';
+      if (popupReasonElement) popupReasonElement.value = '';
     } catch (error) {
-      console.error(error);
-      alert("An error occurred while resetting the profile picture.");
+      console.error('Failed to reset profile picture:', error);
+      showNotification(
+        `Failed to reset profile picture for ${username}. Please try again.`,
+        'error'
+      );
     }
   };
 
   const deleteBulk = async () => {
     if (selectedChallenges.length === 0) {
-      alert("No challenges selected.");
+      showNotification('No challenges selected.', 'warning');
       return;
     }
-  
-    if (!confirm("Are you sure you want to delete the selected challenges?")) {
+
+    if (!confirm('Are you sure you want to delete the selected challenges?')) {
       return;
     }
+
     try {
-      const response = await request(`${process.env.NEXT_PUBLIC_API_URL}/admin/deleteChallenges`, "POST", { challengeIds: selectedChallenges });
+      const response = await request(
+        `${process.env.NEXT_PUBLIC_API_URL}/admin/deleteChallenges`,
+        'POST',
+        { challengeIds: selectedChallenges }
+      );
       if (response.success) {
-        alert("Selected challenges deleted successfully!");
-        setSelectedChallenges([]); // Clear selected challenges
-        fetchPendingChallenges(); // Refresh pending challenges
+        showNotification(
+          'Selected challenges deleted successfully!',
+          'success'
+        );
+        setSelectedChallenges([]);
+        fetchPendingChallenges();
       } else {
-        alert("Failed to delete selected challenges.");
+        showNotification('Failed to delete selected challenges.', 'error');
       }
     } catch (error) {
       console.error(error);
-      alert("An error occurred while deleting the selected challenges.");
+      showNotification(
+        'An error occurred while deleting the selected challenges.',
+        'error'
+      );
     }
   };
-  
 
-  const handleResetBanner = async () => {
-    const username = document.getElementById('usernameInput').value;
-    const reason = document.getElementById('reasonInput').value;
+  const handleResetBanner = async (prefilledUsername = null) => {
+    const { username, reason } = getUsernameAndReason(prefilledUsername);
+
+    if (!username) {
+      showNotification('Please enter a username to reset banner.', 'error');
+      return;
+    }
 
-    if(!username) {
-      alert("Please enter a username.");
+    if (!reason) {
+      showNotification(
+        'Please provide a reason for resetting the banner.',
+        'error'
+      );
       return;
     }
-    try{
-      const response = await request(`${process.env.NEXT_PUBLIC_API_URL}/admin/${username}/resetBanner`, "POST", {reason});
-      if(response.success){
-        alert("Banner reset successfully!");
-      }else {
-        alert("Failed to reset banner.");
-      }
 
-      resetFields();
+    try {
+      const response = await request(
+        `${process.env.NEXT_PUBLIC_API_URL}/admin/users/${username}/reset-banner`,
+        'POST',
+        { reason }
+      );
+      showNotification(`Banner reset for ${username} successfully.`, 'success');
 
-    }catch(err){
-      console.log(err);
-      alert("An error occurred while resetting the banner.");
+      // Refresh users list
+      fetchUsers(currentUserPage, userSearchFilter);
+
+      // Clear inputs
+      setUserSearchQuery('');
+      const reasonElement = document.getElementById('reason-input');
+      const popupReasonElement = document.getElementById('popupReasonInput');
+      if (reasonElement) reasonElement.value = '';
+      if (popupReasonElement) popupReasonElement.value = '';
+    } catch (error) {
+      console.error('Failed to reset banner:', error);
+      showNotification(
+        `Failed to reset banner for ${username}. Please try again.`,
+        'error'
+      );
     }
   };
 
-  const handleDisableAccount = async () => {
-    const username = document.getElementById('usernameInput').value;
-    const reason = document.getElementById('reasonInput').value;
+  const handleDisableAccount = async (prefilledUsername = null) => {
+    const { username, reason } = getUsernameAndReason(prefilledUsername);
 
     if (!username) {
-      alert("Please enter a username.");
+      showNotification('Please enter a username to disable.', 'error');
+      return;
+    }
+
+    if (!reason) {
+      showNotification(
+        'Please provide a reason for disabling this account.',
+        'error'
+      );
       return;
     }
 
     try {
-      const response = await request(`${process.env.NEXT_PUBLIC_API_URL}/admin/${username}/disableAccount`, "POST", { reason });
-      if (response.success) {
-        alert("Account disabled successfully!");
-      } else {
-        alert("Failed to disable account.");
-      }
+      const response = await request(
+        `${process.env.NEXT_PUBLIC_API_URL}/admin/users/${username}/disable`,
+        'POST',
+        { reason }
+      );
+      showNotification(
+        `Account ${username} has been disabled successfully.`,
+        'success'
+      );
 
-      resetFields();
+      // Refresh users list
+      fetchUsers(currentUserPage, userSearchFilter);
 
-    }catch(err){
-      console.log(err);
-      alert("An error occurred while disabling the account.");
+      // Clear inputs
+      setUserSearchQuery('');
+      const reasonElement = document.getElementById('reason-input');
+      const popupReasonElement = document.getElementById('popupReasonInput');
+      if (reasonElement) reasonElement.value = '';
+      if (popupReasonElement) popupReasonElement.value = '';
+    } catch (error) {
+      console.error('Failed to disable account:', error);
+      showNotification(
+        `Failed to disable account ${username}. Please try again.`,
+        'error'
+      );
     }
   };
-  const handleResetBio = async () => {
 
-    const username = document.getElementById('usernameInput').value;
-    const reason = document.getElementById('reasonInput').value;
+  const handleResetBio = async (prefilledUsername = null) => {
+    const { username, reason } = getUsernameAndReason(prefilledUsername);
 
     if (!username) {
-      alert("Please enter a username.");
+      showNotification('Please enter a username to reset bio.', 'error');
       return;
     }
-    try{
-      const response = await request(`${process.env.NEXT_PUBLIC_API_URL}/admin/${username}/resetBio`, "POST", {reason});
-      if(response.success){
-        alert("Bio reset successfully!");
-      }else{
-        alert("Failed to reset bio.");
-      }
 
-      resetFields();
-    }catch(err){
-      console.log(err);
-      alert("An error occurred while resetting the bio.");
+    if (!reason) {
+      showNotification(
+        'Please provide a reason for resetting the bio.',
+        'error'
+      );
+      return;
     }
-  };
 
-  const handleEnableAccount = async () => {
-    const username = document.getElementById('usernameInput').value;
-    const reason = document.getElementById('reasonInput').value;
+    try {
+      const response = await request(
+        `${process.env.NEXT_PUBLIC_API_URL}/admin/users/${username}/reset-bio`,
+        'POST',
+        { reason }
+      );
+      showNotification(`Bio reset for ${username} successfully.`, 'success');
 
-    if (!username) {
-      alert("Please enter a username.");
-      return;
-    }
-    try{
-      const response = await request(`${process.env.NEXT_PUBLIC_API_URL}/admin/${username}/enableAccount`, "POST", {reason});
-      if(response.success){
-        alert("Account enabled successfully!");
-      }else {
-        alert("Failed to enable account.");
-      }
+      // Refresh users list
+      fetchUsers(currentUserPage, userSearchFilter);
 
-      resetFields();
-    }catch(err){
-      console.log(err);
-      alert("An error occurred while enabling the account.");
+      // Clear inputs
+      setUserSearchQuery('');
+      const reasonElement = document.getElementById('reason-input');
+      const popupReasonElement = document.getElementById('popupReasonInput');
+      if (reasonElement) reasonElement.value = '';
+      if (popupReasonElement) popupReasonElement.value = '';
+    } catch (error) {
+      console.error('Failed to reset bio:', error);
+      showNotification(
+        `Failed to reset bio for ${username}. Please try again.`,
+        'error'
+      );
     }
   };
 
-  const handleWarnUser = async () => {
-    const username = document.getElementById('usernameInput').value;
-    const reason = document.getElementById('reasonInput').value;
+  const handleEnableAccount = async (prefilledUsername = null) => {
+    const { username, reason } = getUsernameAndReason(prefilledUsername);
 
     if (!username) {
-      alert("Please enter a username.");
+      showNotification('Please enter a username to enable.', 'error');
       return;
     }
-    try{
-      const response = await request(`${process.env.NEXT_PUBLIC_API_URL}/admin/${username}/warnUser`, "POST", {reason});
-      if(response.success){
-        alert("User warned successfully!");
-      }else {
-        alert("Failed to warn user.");
-      }
 
-      resetFields();
-    }catch(err){
-      console.log(err);
-      alert("An error occurred while warning the user.");
+    if (!reason) {
+      showNotification(
+        'Please provide a reason for enabling this account.',
+        'error'
+      );
+      return;
     }
-  };
 
-  // Fetch platform stats
-  const [stats, setStats] = useState(null);
+    try {
+      const response = await request(
+        `${process.env.NEXT_PUBLIC_API_URL}/admin/users/${username}/enable`,
+        'POST',
+        { reason }
+      );
+      showNotification(
+        `Account ${username} has been enabled successfully.`,
+        'success'
+      );
+
+      // Refresh users list
+      fetchUsers(currentUserPage, userSearchFilter);
+
+      // Clear inputs
+      setUserSearchQuery('');
+      const reasonElement = document.getElementById('reason-input');
+      const popupReasonElement = document.getElementById('popupReasonInput');
+      if (reasonElement) reasonElement.value = '';
+      if (popupReasonElement) popupReasonElement.value = '';
+    } catch (error) {
+      console.error('Failed to enable account:', error);
+      showNotification(
+        `Failed to enable account ${username}. Please try again.`,
+        'error'
+      );
+    }
+  };
+
+  // Removed duplicate handleWarnUser function - using the new one with userId parameter
+
+  // User pagination handlers
+  const handleNextUserPage = () => {
+    if (currentUserPage < totalUserPages - 1) {
+      fetchUsers(currentUserPage + 1);
+    }
+  };
+
+  const handlePrevUserPage = () => {
+    if (currentUserPage > 0) {
+      fetchUsers(currentUserPage - 1);
+    }
+  };
+
+  // Reactivation modal handlers
+  const handleReactivateAccount = async (userId, username) => {
+    setSelectedUserForAction({ userId, username });
+    setReactivateForm({ reason: '' });
+    setShowReactivateModal(true);
+  };
+
+  const submitReactivation = async () => {
+    const reason =
+      reactivateForm.reason.trim() || 'Administrative reactivation';
+
+    try {
+      const response = await request(
+        `${process.env.NEXT_PUBLIC_API_URL}/admin/users/${selectedUserForAction.userId}/reactivate`,
+        'POST',
+        { reason }
+      );
+
+      if (response && response.success) {
+        showNotification(
+          `Account ${selectedUserForAction.username} has been reactivated successfully.`,
+          'success'
+        );
+        setShowReactivateModal(false);
+        fetchSuspendedAccounts(suspendedAccountsPage, suspendedSearchFilter);
+      } else {
+        throw new Error(response?.error || 'Failed to reactivate account');
+      }
+    } catch (error) {
+      console.error('Failed to reactivate account:', error);
+      showNotification(
+        `Failed to reactivate account: ${error.message}`,
+        'error'
+      );
+    }
+  };
+
+  // Handle user suspension - open modal
+  const handleSuspendUser = async (userId, username) => {
+    setSelectedUserForAction({ userId, username });
+    setSuspendForm({ reason: '', duration: '' });
+    setShowSuspendModal(true);
+  };
+
+  // Submit suspension form
+  const submitSuspension = async () => {
+    if (!suspendForm.reason.trim()) {
+      showNotification('Please enter a reason for suspension.', 'error');
+      return;
+    }
+
+    const duration = suspendForm.duration
+      ? parseInt(suspendForm.duration)
+      : null;
+
+    try {
+      const response = await request(
+        `${process.env.NEXT_PUBLIC_API_URL}/admin/users/${selectedUserForAction.userId}/suspend`,
+        'POST',
+        { reason: suspendForm.reason, duration }
+      );
+
+      if (response && response.success) {
+        showNotification(
+          `User ${selectedUserForAction.username} has been suspended successfully.`,
+          'success'
+        );
+        setShowSuspendModal(false);
+        fetchSuspendedAccounts(suspendedAccountsPage, suspendedSearchFilter);
+      } else {
+        throw new Error(response?.error || 'Failed to suspend user');
+      }
+    } catch (error) {
+      console.error('Failed to suspend user:', error);
+      showNotification(`Failed to suspend user: ${error.message}`, 'error');
+    }
+  };
+
+  const handleWarnUser = async (prefilledUsername = null) => {
+    const { username, reason } = getUsernameAndReason(prefilledUsername);
+
+    if (!username) {
+      showNotification('Please enter a username to warn.', 'error');
+      return;
+    }
+
+    if (!reason) {
+      showNotification(
+        'Please provide a reason for warning this user.',
+        'error'
+      );
+      return;
+    }
+
+    try {
+      const response = await request(
+        `${process.env.NEXT_PUBLIC_API_URL}/admin/users/${username}/warn`,
+        'POST',
+        { reason }
+      );
+
+      if (response && response.success) {
+        showNotification(
+          `Warning issued to ${username} successfully.`,
+          'success'
+        );
+
+        // Refresh users list
+        fetchUsers(currentUserPage, userSearchFilter);
+
+        // Refresh warning history
+        fetchWarningsPage(warningsPage);
+
+        // Trigger notification check for the warned user
+        window.dispatchEvent(
+          new CustomEvent('warningIssued', {
+            detail: { username, reason },
+          })
+        );
+
+        // Clear inputs
+        setUserSearchQuery('');
+        const reasonElement = document.getElementById('reason-input');
+        const popupReasonElement = document.getElementById('popupReasonInput');
+        if (reasonElement) reasonElement.value = '';
+        if (popupReasonElement) popupReasonElement.value = '';
+      } else {
+        throw new Error(response?.error || 'Failed to issue warning');
+      }
+    } catch (error) {
+      console.error('Failed to issue warning:', error);
+      showNotification(
+        `Failed to issue warning to ${username}. Please try again.`,
+        'error'
+      );
+    }
+  };
+
+  // Handle role change - open modal
+  const handleRoleChange = async (userId, username) => {
+    setSelectedUserForAction({ userId, username });
+    setRoleForm({ role: 'USER' });
+    setShowRoleModal(true);
+  };
+
+  // Submit role change form
+  const submitRoleChange = async () => {
+    try {
+      const response = await request(
+        `${process.env.NEXT_PUBLIC_API_URL}/admin/users/${selectedUserForAction.userId}/role`,
+        'POST',
+        { role: roleForm.role }
+      );
+
+      if (response && response.success) {
+        showNotification(
+          `User ${selectedUserForAction.username} role updated to ${roleForm.role}.`,
+          'success'
+        );
+        setShowRoleModal(false);
+        fetchSuspendedAccounts(suspendedAccountsPage, suspendedSearchFilter);
+      } else {
+        throw new Error(response?.error || 'Failed to update role');
+      }
+    } catch (error) {
+      console.error('Failed to update role:', error);
+      showNotification(`Failed to update role: ${error.message}`, 'error');
+    }
+  };
+
+  // View user history
+  const handleViewUserHistory = async (userId, username) => {
+    try {
+      const response = await request(
+        `${process.env.NEXT_PUBLIC_API_URL}/admin/users/${userId}/history`,
+        'GET'
+      );
+
+      if (response) {
+        const { suspensions, warnings } = response;
+
+        let historyText = `=== ${username} History ===\n\n`;
+
+        if (suspensions.length > 0) {
+          historyText += 'SUSPENSION HISTORY:\n';
+          suspensions.forEach((s, i) => {
+            historyText += `${i + 1}. ${new Date(
+              s.createdAt
+            ).toLocaleString()}\n`;
+            historyText += `   Reason: ${s.reason}\n`;
+            historyText += `   By: ${s.suspendedBy}\n`;
+            historyText += `   Status: ${s.isActive ? 'Active' : 'Resolved'}\n`;
+            if (s.reactivatedBy) {
+              historyText += `   Reactivated by: ${
+                s.reactivatedBy
+              } on ${new Date(s.reactivatedAt).toLocaleString()}\n`;
+              historyText += `   Reactivation reason: ${s.reactivationReason}\n`;
+            }
+            historyText += '\n';
+          });
+        }
 
+        if (warnings.length > 0) {
+          historyText += 'WARNING HISTORY:\n';
+          warnings.forEach((w, i) => {
+            historyText += `${i + 1}. ${new Date(
+              w.createdAt
+            ).toLocaleString()}\n`;
+            historyText += `   Reason: ${w.reason}\n`;
+            historyText += `   By: ${w.warnedBy}\n\n`;
+          });
+        }
+
+        if (suspensions.length === 0 && warnings.length === 0) {
+          historyText += 'No suspension or warning history found.';
+        }
+
+        alert(historyText);
+      }
+    } catch (error) {
+      console.error('Failed to fetch user history:', error);
+      showNotification(
+        `Failed to fetch user history: ${error.message}`,
+        'error'
+      );
+    }
+  };
+
+  const reactivateAccount = async (userId, reason = '') => {
+    try {
+      const response = await request(
+        `${process.env.NEXT_PUBLIC_API_URL}/admin/reactivate-account/${userId}`,
+        'POST',
+        { reason }
+      );
+
+      if (response && response.success) {
+        // Refresh the suspended accounts list
+        fetchSuspendedAccounts(suspendedAccountsPage);
+        // Show success notification
+        showNotification(
+          'Account reactivated successfully! The user has been notified.',
+          'success'
+        );
+        return { success: true, message: response.message };
+      } else {
+        throw new Error(response?.error || 'Failed to reactivate account');
+      }
+    } catch (error) {
+      console.error('Failed to reactivate account:', error);
+      showNotification(
+        `Failed to reactivate account: ${error.message}`,
+        'error'
+      );
+      return { success: false, error: error.message };
+    }
+  };
+
+  // Report management handlers - FIXED
+  const handleUpdateReportStatus = async (
+    reportId,
+    status,
+    resolution = ''
+  ) => {
+    try {
+      const response = await request(
+        `${process.env.NEXT_PUBLIC_API_URL}/reports/${reportId}/status`,
+        'PUT',
+        { status, resolution }
+      );
+
+      if (response && response.success) {
+        showNotification('Report status updated successfully', 'success');
+        await fetchReports(reportFilters);
+        await fetchReportStats();
+      } else {
+        throw new Error(response?.error || 'Failed to update report status');
+      }
+    } catch (error) {
+      console.error('Error updating report status:', error);
+      showNotification(
+        error.message || 'Failed to update report status',
+        'error'
+      );
+    }
+  };
+
+  // Fetch all data function
+  // Optimized initial data fetch - only load essential data
+  const fetchAllData = async () => {
+    try {
+      setIsLoading(true);
+      setError(null);
+
+      console.log('1. Fetching stats...');
+      await fetchStats();
+
+      console.log('2. Fetching report stats...');
+      await fetchReportStats();
+
+      console.log('3. Fetching deletion stats...');
+      await fetchDeletionStats();
+
+      console.log('4. Calculating history total users...');
+      await calculateHistoryTotalUsers();
+
+      console.log('=== ESSENTIAL DATA FETCH COMPLETE ===');
+      setIsInitialLoadComplete(true);
+    } catch (error) {
+      console.error('Error in essential data fetch sequence:', error);
+      setError('Failed to load essential data. Please refresh the page.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // Lazy load function for non-essential data
+  const fetchLazyData = async () => {
+    try {
+      console.log('1. Fetching reports...');
+      await fetchReports();
+
+      console.log('2. Fetching pending challenges...');
+      await fetchPendingChallenges();
+
+      console.log('3. Fetching users...');
+      await fetchUsers(0, '');
+
+      console.log('4. Fetching recent activity...');
+      await fetchRecentActivity();
+
+      console.log('5. Fetching pending deletions...');
+      await fetchPendingDeletions();
+
+      console.log('=== LAZY DATA FETCH COMPLETE ===');
+    } catch (error) {
+      console.error('Error in lazy data fetch sequence:', error);
+    }
+  };
+
+  // Initial data fetch with instant tab numbers
   useEffect(() => {
-    const fetchStats = async () => {
+    console.log('=== MODERATION PANEL INITIALIZING ===');
+    console.log('API URL:', process.env.NEXT_PUBLIC_API_URL);
+    console.log('Starting data fetch sequence...');
+
+    // Load essential data immediately for instant tab numbers
+    const loadEssentialData = async () => {
       try {
-        const response = await request(`${process.env.NEXT_PUBLIC_API_URL}/admin/stats`, "GET");
-        setStats(response);
+        // Load all essential data in parallel for fastest possible load
+        await Promise.all([
+          fetchStats(),
+          fetchReportStats(),
+          fetchDeletionStats(),
+          calculateHistoryTotalUsers(),
+        ]);
+
+        setIsInitialLoadComplete(true);
+        console.log('=== ESSENTIAL DATA LOADED INSTANTLY ===');
       } catch (error) {
-        console.error("Failed to fetch platform stats", error);
+        console.error('Error loading essential data:', error);
+        setError('Failed to load essential data. Please refresh the page.');
+      } finally {
+        setIsLoading(false);
       }
     };
-    fetchStats();
+
+    loadEssentialData();
   }, []);
 
+  // Handle clicking outside autocomplete dropdowns and escape key
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      const userInput = document.getElementById('username-input');
+      const challengeInput = document.getElementById('challenge-input');
+
+      if (
+        userInput &&
+        !userInput.contains(event.target) &&
+        !event.target.closest('.user-suggestions')
+      ) {
+        setShowUserSuggestions(false);
+      }
+
+      if (
+        challengeInput &&
+        !challengeInput.contains(event.target) &&
+        !event.target.closest('.challenge-suggestions')
+      ) {
+        setShowChallengeSuggestions(false);
+      }
+    };
+
+    const handleKeyDown = (event) => {
+      if (event.key === 'Escape') {
+        setShowUserManagementPopup(false);
+        setShowUserSuggestions(false);
+        setShowChallengeSuggestions(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, []);
+
+  // Load data when tab becomes active
+  useEffect(() => {
+    if (activeTab === 'reports' && reports.length === 0) {
+      fetchReports(reportFilters);
+    }
+    if (
+      activeTab === 'accounts' &&
+      activeAccountsTab === 'suspended' &&
+      suspendedAccounts.length === 0
+    ) {
+      fetchSuspendedAccounts(0, suspendedSearchFilter);
+    }
+    if (activeTab === 'users' && users.length === 0) {
+      setCurrentUserPage(0);
+      fetchUsers(0, '');
+    }
+    if (
+      activeTab === 'accounts' &&
+      activeAccountsTab === 'deleted' &&
+      pendingDeletions.length === 0
+    ) {
+      fetchPendingDeletions(deletionsSearchFilter);
+    }
+    if (
+      activeTab === 'accounts' &&
+      activeAccountsTab === 'history' &&
+      suspensionHistory.length === 0
+    ) {
+      fetchSuspensionHistory(
+        0,
+        suspensionHistorySearchFilter,
+        suspensionHistoryStatusFilter
+      );
+    }
+    if (
+      activeTab === 'warnings' &&
+      activeHistoryTab === 'suspended' &&
+      suspensionHistory.length === 0
+    ) {
+      fetchSuspensionHistory(
+        0,
+        suspensionHistorySearchFilter,
+        suspensionHistoryStatusFilter
+      );
+    }
+  }, [activeTab, activeAccountsTab, activeHistoryTab]);
+
+  // System status monitoring - client side only
+  useEffect(() => {
+    // Only run on client side to avoid hydration errors
+    if (typeof window !== 'undefined') {
+      // Set initial timestamp
+      setLastStatusCheck(new Date());
+
+      // Initial check
+      checkSystemStatus();
+
+      // Check every 30 seconds
+      const statusInterval = setInterval(checkSystemStatus, 30000);
+
+      return () => clearInterval(statusInterval);
+    }
+  }, []);
+
+  // Optimized tab navigation component with instant switching
+  const TabButton = ({ id, label, icon: Icon, count }) => (
+    <button
+      onClick={() => {
+        setActiveTab(id);
+
+        // Lazy load non-essential data if not already loaded
+        if (!isInitialLoadComplete) {
+          fetchLazyData();
+        }
+
+        // Instant tab switching with background data refresh
+        setTimeout(() => {
+          if (id === 'accounts') {
+            // Fetch all accounts-related data
+            fetchSuspendedAccounts(
+              suspendedAccountsPage,
+              suspendedSearchFilter
+            );
+            fetchPendingDeletions(deletionsSearchFilter);
+            fetchDeletionStats();
+          } else if (id === 'users') {
+            fetchUsers(currentUserPage, userSearchFilter);
+          } else if (id === 'challenges') {
+            fetchPendingChallenges();
+          } else if (id === 'reports') {
+            fetchReports(reportFilters);
+            fetchReportStats();
+          } else if (id === 'warnings') {
+            // Fetch all history-related data with caching
+            fetchGroupedSuspensions(groupedSuspensionsPage);
+            fetchGroupedWarnings(groupedWarningsPage);
+            calculateHistoryTotalUsers();
+          } else if (id === 'activity') {
+            fetchRecentActivity();
+          } else if (id === 'overview') {
+            // Only fetch essential data for overview
+            fetchAllData();
+          }
+        }, 0); // Use setTimeout to ensure tab switch is instant
+      }}
+      className={`flex items-center border-b-2 px-1 py-4 text-sm font-medium transition-all duration-200 ${
+        activeTab === id
+          ? 'border-blue-500 text-blue-400'
+          : 'border-transparent text-gray-400 hover:border-gray-600 hover:text-gray-300'
+      }`}
+    >
+      <Icon className="mr-2 h-4 w-4" />
+      {label}
+      {count !== undefined && (
+        <span
+          className={`ml-2 px-2 py-0.5 text-xs ${
+            activeTab === id
+              ? 'bg-blue-500/20 text-blue-400'
+              : 'bg-neutral-600 text-gray-300'
+          }`}
+        >
+          {count}
+        </span>
+      )}
+    </button>
+  );
+
+  // Check system status
+  const checkSystemStatus = async () => {
+    try {
+      setIsLoadingStatus(true);
+      const controller = new AbortController();
+      const timeoutId = setTimeout(() => controller.abort(), 5000); // 5 second timeout
+
+      const response = await fetch(
+        `${process.env.NEXT_PUBLIC_API_URL}/health`,
+        {
+          method: 'GET',
+          signal: controller.signal,
+        }
+      );
+
+      clearTimeout(timeoutId);
+
+      if (response.ok) {
+        const data = await response.json();
+        setSystemStatus('online');
+      } else if (response.status >= 500) {
+        setSystemStatus('degraded');
+      } else {
+        setSystemStatus('degraded');
+      }
+    } catch (error) {
+      if (error.name === 'AbortError') {
+        setSystemStatus('offline');
+      } else {
+        setSystemStatus('degraded');
+      }
+      console.warn('System status check failed:', error.message);
+    } finally {
+      setIsLoadingStatus(false);
+      if (typeof window !== 'undefined') {
+        setLastStatusCheck(new Date());
+      }
+    }
+  };
+
+  // Load recent activity when activity tab is accessed
+  useEffect(() => {
+    if (
+      activeTab === 'activity' &&
+      !loadingActivity &&
+      !activityLoadedRef.current
+    ) {
+      fetchRecentActivity();
+      activityLoadedRef.current = true;
+    }
+  }, [activeTab]);
+
+  // Close mobile menu when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (showMobileMenu && !event.target.closest('.mobile-menu-container')) {
+        setShowMobileMenu(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [showMobileMenu]);
+
+  // Fetch recent activity data
+  const fetchRecentActivity = async () => {
+    if (loadingActivity) return;
+
+    setLoadingActivity(true);
+    try {
+      const [commentsRes, writeupsRes, lessonsRes] = await Promise.all([
+        request(`${process.env.NEXT_PUBLIC_API_URL}/activity/comments`, 'GET'),
+        request(`${process.env.NEXT_PUBLIC_API_URL}/activity/writeups`, 'GET'),
+        request(`${process.env.NEXT_PUBLIC_API_URL}/activity/lessons`, 'GET'),
+      ]);
+
+      let comments = [];
+      let writeups = [];
+      let lessons = [];
+
+      if (commentsRes && !commentsRes.error) {
+        comments = Array.isArray(commentsRes) ? commentsRes : [];
+      } else {
+        console.error('Comments API error:', commentsRes?.error);
+      }
+
+      if (writeupsRes && !writeupsRes.error) {
+        writeups = Array.isArray(writeupsRes) ? writeupsRes : [];
+      } else {
+        console.error('Writeups API error:', writeupsRes?.error);
+      }
+
+      if (lessonsRes && !lessonsRes.error) {
+        lessons = Array.isArray(lessonsRes) ? lessonsRes : [];
+      } else {
+        console.error('Lessons API error:', lessonsRes?.error);
+      }
+
+      setRecentActivity({ comments, writeups, lessons });
+    } catch (error) {
+      console.error('Error fetching recent activity:', error);
+      setRecentActivity({ comments: [], writeups: [], lessons: [] });
+    } finally {
+      setLoadingActivity(false);
+    }
+  };
+
+  // Manual refresh function
+  const refreshActivity = async () => {
+    activityLoadedRef.current = false;
+    await fetchRecentActivity();
+  };
+
+  // Handle showing deletion details in modal
+  const handleViewDeletionDetails = (deletion) => {
+    setSelectedDetails({
+      type: 'deletion',
+      data: deletion,
+    });
+    setShowDetailsModal(true);
+  };
+
+  const [warnings, setWarnings] = useState([]);
+  const [warningsLoading, setWarningsLoading] = useState(false);
+  const [warningsPage, setWarningsPage] = useState(1);
+  const [warningsTotal, setWarningsTotal] = useState(0);
+  const warningsPerPage = 20;
+
+  const fetchWarnings = async () => {
+    setWarningsLoading(true);
+    try {
+      const response = await request(
+        `${process.env.NEXT_PUBLIC_API_URL}/admin/warnings`,
+        'GET'
+      );
+      if (response && !response.error) {
+        setWarnings(response.warnings || []);
+        setWarningsTotal(response.total || 0);
+      }
+    } catch (error) {
+      console.error('Error fetching warnings:', error);
+    } finally {
+      setWarningsLoading(false);
+    }
+  };
+
+  const fetchWarningsPage = async (page) => {
+    setWarningsLoading(true);
+    try {
+      console.log('Fetching warnings page:', page);
+      const response = await request(
+        `${process.env.NEXT_PUBLIC_API_URL}/admin/warnings?page=${page}&limit=${warningsPerPage}`,
+        'GET'
+      );
+      console.log('Warnings response:', response);
+      if (response && !response.error) {
+        setWarnings(response.warnings || []);
+        setWarningsTotal(response.total || 0);
+        setWarningsPage(page);
+      } else {
+        console.error('Warnings API error:', response?.error);
+      }
+    } catch (error) {
+      console.error('Error fetching warnings:', error);
+    } finally {
+      setWarningsLoading(false);
+    }
+  };
+
+  // Optimized function to group warnings by user
+  const groupWarningsByUser = useCallback((warnings) => {
+    if (!warnings || warnings.length === 0) return [];
+
+    const userMap = new Map();
+
+    // Process warnings in chunks for better performance
+    const chunkSize = 100;
+    for (let i = 0; i < warnings.length; i += chunkSize) {
+      const chunk = warnings.slice(i, i + chunkSize);
+
+      chunk.forEach((warning) => {
+        const userId = warning.user?.id || warning.userId;
+        const username = warning.user?.username || 'Unknown';
+
+        if (!userMap.has(userId)) {
+          userMap.set(userId, {
+            userId,
+            username,
+            user: warning.user,
+            warnings: [],
+            totalWarnings: 0,
+          });
+        }
+
+        const userWarnings = userMap.get(userId);
+        userWarnings.warnings.push(warning);
+        userWarnings.totalWarnings++;
+      });
+    }
+
+    // Convert to array and sort by most recent warning (descending)
+    const result = Array.from(userMap.values());
+
+    // Optimize sorting for large datasets
+    return result.sort((a, b) => {
+      if (a.warnings.length === 0 && b.warnings.length === 0) return 0;
+      if (a.warnings.length === 0) return 1;
+      if (b.warnings.length === 0) return -1;
+
+      const aLatest = Math.max(
+        ...a.warnings.map((w) => new Date(w.createdAt).getTime())
+      );
+      const bLatest = Math.max(
+        ...b.warnings.map((w) => new Date(w.createdAt).getTime())
+      );
+      return bLatest - aLatest;
+    });
+  }, []);
+
+  // Optimized function to group suspensions by user
+  const groupSuspensionsByUser = useCallback((suspensions) => {
+    if (!suspensions || suspensions.length === 0) return [];
+
+    const userMap = new Map();
+
+    // Process suspensions in chunks for better performance
+    const chunkSize = 100;
+    for (let i = 0; i < suspensions.length; i += chunkSize) {
+      const chunk = suspensions.slice(i, i + chunkSize);
+
+      chunk.forEach((suspension) => {
+        const userId = suspension.user?.id || suspension.userId;
+        const username = suspension.user?.username || 'Unknown';
+
+        if (!userMap.has(userId)) {
+          userMap.set(userId, {
+            userId,
+            username,
+            user: suspension.user,
+            suspensions: [],
+            totalSuspensions: 0,
+          });
+        }
+
+        const userSuspensions = userMap.get(userId);
+        userSuspensions.suspensions.push(suspension);
+        userSuspensions.totalSuspensions++;
+      });
+    }
+
+    // Convert to array and sort by most recent suspension (descending)
+    const result = Array.from(userMap.values());
+
+    // Optimize sorting for large datasets
+    return result.sort((a, b) => {
+      if (a.suspensions.length === 0 && b.suspensions.length === 0) return 0;
+      if (a.suspensions.length === 0) return 1;
+      if (b.suspensions.length === 0) return -1;
+
+      const aLatest = Math.max(
+        ...a.suspensions.map((s) => new Date(s.suspendedAt).getTime())
+      );
+      const bLatest = Math.max(
+        ...b.suspensions.map((s) => new Date(s.suspendedAt).getTime())
+      );
+      return bLatest - aLatest;
+    });
+  }, []);
+
+  // Optimized function to fetch grouped warnings
+  const fetchGroupedWarnings = useCallback(
+    async (page = 1, forceRefresh = false) => {
+      const cacheKey = `groupedWarnings_${page}`;
+
+      // Return cached data if fresh and not forcing refresh
+      if (!forceRefresh && isDataFresh(cacheKey)) {
+        const cached = getCachedData(cacheKey);
+        if (cached) {
+          setGroupedWarnings(cached.paginatedGrouped);
+          setGroupedWarningsTotal(cached.total);
+          setGroupedWarningsPage(page);
+          return;
+        }
+      }
+
+      try {
+        setGroupedWarningsLoading(true);
+
+        // Use smaller limit for better performance
+        const response = await request(
+          `${process.env.NEXT_PUBLIC_API_URL}/admin/warnings?page=1&limit=200`,
+          'GET'
+        );
+
+        const warnings = response?.warnings || [];
+
+        // Group by user
+        const grouped = groupWarningsByUser(warnings);
+
+        // Paginate the grouped results
+        const startIndex = (page - 1) * groupedWarningsPerPage;
+        const endIndex = startIndex + groupedWarningsPerPage;
+        const paginatedGrouped = grouped.slice(startIndex, endIndex);
+
+        setGroupedWarnings(paginatedGrouped);
+        setGroupedWarningsTotal(grouped.length);
+        setGroupedWarningsPage(page);
+
+        // Cache the result
+        updateCache(cacheKey, {
+          paginatedGrouped,
+          total: grouped.length,
+        });
+      } catch (error) {
+        console.error('Error fetching grouped warnings:', error);
+        setGroupedWarnings([]);
+        setGroupedWarningsTotal(0);
+      } finally {
+        setGroupedWarningsLoading(false);
+      }
+    },
+    [isDataFresh, getCachedData, updateCache]
+  );
+
+  // Optimized function to fetch grouped suspensions
+  const fetchGroupedSuspensions = useCallback(
+    async (page = 1, forceRefresh = false) => {
+      const cacheKey = `groupedSuspensions_${page}`;
+
+      // Return cached data if fresh and not forcing refresh
+      if (!forceRefresh && isDataFresh(cacheKey)) {
+        const cached = getCachedData(cacheKey);
+        if (cached) {
+          setGroupedSuspensions(cached.paginatedGrouped);
+          setGroupedSuspensionsTotal(cached.total);
+          setGroupedSuspensionsPage(page);
+          return;
+        }
+      }
+
+      try {
+        setGroupedSuspensionsLoading(true);
+
+        // Use smaller limit for better performance
+        const response = await request(
+          `${process.env.NEXT_PUBLIC_API_URL}/admin/suspension-history-enhanced?page=0&size=200&search=&status=all`,
+          'GET'
+        );
+
+        const suspensions = response?.history || [];
+
+        // Group by user
+        const grouped = groupSuspensionsByUser(suspensions);
+
+        // Paginate the grouped results
+        const startIndex = (page - 1) * groupedSuspensionsPerPage;
+        const endIndex = startIndex + groupedSuspensionsPerPage;
+        const paginatedGrouped = grouped.slice(startIndex, endIndex);
+
+        setGroupedSuspensions(paginatedGrouped);
+        setGroupedSuspensionsTotal(grouped.length);
+        setGroupedSuspensionsPage(page);
+
+        // Cache the result
+        updateCache(cacheKey, {
+          paginatedGrouped,
+          total: grouped.length,
+        });
+      } catch (error) {
+        console.error('Error fetching grouped suspensions:', error);
+        setGroupedSuspensions([]);
+        setGroupedSuspensionsTotal(0);
+      } finally {
+        setGroupedSuspensionsLoading(false);
+      }
+    },
+    [isDataFresh, getCachedData, updateCache]
+  );
+
+  // Function to toggle warning user expansion
+  const toggleWarningUserExpansion = (userId) => {
+    const newExpanded = new Set(expandedWarningUsers);
+    if (newExpanded.has(userId)) {
+      newExpanded.delete(userId);
+    } else {
+      newExpanded.add(userId);
+    }
+    setExpandedWarningUsers(newExpanded);
+  };
+
+  // Function to toggle suspension user expansion
+  const toggleSuspensionUserExpansion = (userId) => {
+    const newExpanded = new Set(expandedSuspensionUsers);
+    if (newExpanded.has(userId)) {
+      newExpanded.delete(userId);
+    } else {
+      newExpanded.add(userId);
+    }
+    setExpandedSuspensionUsers(newExpanded);
+  };
+
+  useEffect(() => {
+    if (activeTab === 'warnings') {
+      if (activeHistoryTab === 'suspended') {
+        fetchGroupedSuspensions(1);
+      } else if (activeHistoryTab === 'warnings') {
+        fetchGroupedWarnings(1);
+      }
+    }
+  }, [activeTab, activeHistoryTab]);
+
+  const handleReactivateClick = (user) => {
+    setSelectedUserForReactivation(user);
+    setReactivateForm({ reason: '' });
+    setShowReactivateModal(true);
+  };
+
+  const submitReactivationModal = async () => {
+    if (!selectedUserForReactivation) return;
+
+    try {
+      const result = await reactivateAccount(
+        selectedUserForReactivation.id,
+        reactivateForm.reason
+      );
+
+      if (result.success) {
+        setShowReactivateModal(false);
+        setSelectedUserForReactivation(null);
+        setReactivateForm({ reason: '' });
+      }
+    } catch (error) {
+      console.error('Error in reactivation modal:', error);
+    }
+  };
+
+  // Loading component
+  const LoadingSpinner = () => (
+    <div className="flex min-h-screen items-center justify-center bg-neutral-900">
+      <div className="text-center">
+        <div className="inline-block h-12 w-12 animate-spin rounded-full border-b-2 border-blue-600"></div>
+        <p className="mt-4 text-lg text-gray-400">
+          Loading Moderation Panel...
+        </p>
+        <p className="mt-2 text-sm text-gray-500">
+          Please wait while we load essential data
+        </p>
+      </div>
+    </div>
+  );
+
+  // Error component
+  const ErrorDisplay = ({ message, onRetry }) => (
+    <div className="flex min-h-screen items-center justify-center bg-neutral-900">
+      <div className="text-center">
+        <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-red-600/20">
+          <ExclamationTriangleIcon className="h-8 w-8 text-red-400" />
+        </div>
+        <h2 className="mt-4 text-xl font-semibold text-white">
+          Error Loading Data
+        </h2>
+        <p className="mt-2 text-gray-400">{message}</p>
+        <button
+          onClick={onRetry}
+          className="mt-4 rounded bg-blue-600 px-4 py-2 text-white transition-colors hover:bg-blue-700"
+        >
+          Retry
+        </button>
+      </div>
+    </div>
+  );
+
+  // Show loading spinner during initial load
+  if (isLoading) {
+    return <LoadingSpinner />;
+  }
+
+  // Show error if there's an error
+  if (error) {
+    return <ErrorDisplay message={error} onRetry={() => fetchAllData()} />;
+  }
+
   return (
     <>
       <Head>
         <title>CTFGuide Moderation Panel</title>
-        <meta name="description" content="Practice Problems" />
+        <meta name="description" content="Modern Moderation Panel" />
         <style>
-          @import url(&apos;https://fonts.googleapis.com/css2?family=Poppins&display=swap&apos;);
+          @import
+          url(&apos;https://fonts.googleapis.com/css2?family=Poppins&display=swap&apos;);
         </style>
       </Head>
-      <div className="flex min-h-screen flex-col">
+      <div className="flex min-h-screen flex-col bg-neutral-900">
         <StandardNav />
-        <main>
-          <div className='max-w-6xl mx-auto'>
-            <div className='flex mt-10'>
-              <div>
-                <h1 className='text-white text-3xl  font-semibold'>ADMIN CENTER</h1>
-                <p className='text-white text-xl'>ΥΠΕΡΑΣΠΙΣΗ ΤΟΥ CTFGUIDE ΑΠΟ ΤΟ OPS</p>
+        <main className="flex-1">
+          <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
+            {/* Header */}
+            <div className="mb-8 flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center">
+              <div className="flex-1">
+                <div className="flex items-center space-x-3">
+                  <div className="flex h-12 w-12 items-center justify-center bg-blue-600/20 text-blue-400">
+                    <i className="fas fa-shield-alt text-xl"></i>
+                  </div>
+                  <div>
+                    <h1 className="text-2xl font-bold text-white sm:text-3xl">
+                      Admin Center
+                    </h1>
+                    <p className="text-sm text-gray-400 sm:text-base">
+                      Platform Moderation & Management
+                    </p>
+                  </div>
+                </div>
               </div>
-              <div className='ml-auto '>
-                <i className='text-4xl fa fa-shield-alt text-white '></i>
-                <button className='hidden px-2 py-1  bg-green-600 text-white ml-4' onClick={handleApproveChallenge}>Quick Approve</button>
-                <button className='hidden  ml-4  px-2 py-1 bg-red-600 text-white'>Quick Deny</button>
+              <div className="flex items-center space-x-3">
+                <div className="bg-neutral-700 px-3 py-2">
+                  <div className="flex items-center space-x-2">
+                    <div
+                      className={`h-2 w-2 ${
+                        systemStatus === 'online'
+                          ? 'animate-pulse bg-green-400'
+                          : systemStatus === 'degraded'
+                          ? 'animate-pulse bg-yellow-400'
+                          : 'animate-pulse bg-red-400'
+                      }`}
+                    ></div>
+                    <span className="text-sm text-gray-300">
+                      System{' '}
+                      {systemStatus.charAt(0).toUpperCase() +
+                        systemStatus.slice(1)}
+                    </span>
+                    <span className="text-xs text-gray-500">
+                      {lastStatusCheck
+                        ? lastStatusCheck.toLocaleTimeString()
+                        : 'Checking...'}
+                    </span>
+                  </div>
+                </div>
               </div>
-            </div> 
-    
-
-            <br></br>
-            <div className='grid grid-cols-2 gap-x-5 border border-neutral-700 px-4 py-4'>
-
-<div>
-
-<h1 className='text-xl  text-white mb-2'>USER ACTIONS</h1>
-    <input type="text" placeholder='Enter USERNAME' className='mb-2 text-white bg-neutral-800 border-none w-full' id="usernameInput"></input>
-   <textarea placeholder='Reason' className='mb-2 text-white bg-neutral-800 border-none w-full' id="reasonInput"></textarea>
- <div className='grid grid-cols-3  gap-x-2'>
- <button className=' px-2 py-1 bg-red-600 hover:bg-red-500 duration-300 text-white mt-2'onClick={handleDisableAccount}>
-   <i className='fa fa-ban mr-2'></i>Disable Account
- </button>
-    <button className=' px-2 py-1 bg-green-600 hover:bg-green-500 duration-300 text-white mt-2'onClick={handleEnableAccount}>
-      <i className='fa fa-check mr-2'></i>Enable Account
-    </button>
-    <button className=' px-2 py-1 bg-yellow-600 hover:bg-yellow-500 duration-300 text-white mt-2' onClick={handleWarnUser}>
-      <i className='fa fa-exclamation-triangle mr-2'></i>Warn User
-    </button>
-    <button className=' px-2 py-1 bg-blue-600 hover:bg-blue-500 duration-300 text-white mt-2' onClick={handleResetPFP}>
-      <i className='fa fa-user-circle mr-2'></i>Reset PFP
-    </button>
-    <button className='px-2 py-1 bg-blue-600 hover:bg-blue-500 duration-300 text-white mt-2' onClick={handleResetBanner}>
-      <i className='fa fa-image mr-2'></i>Reset Banner
-    </button>
-    <button className=' px-2 py-1 bg-blue-600 hover:bg-blue-500 duration-300 text-white mt-2' onClick={handleResetBio}>
-      <i className='fa fa-info-circle mr-2'></i>Reset Bio
-    </button>
+            </div>
+
+            {/* Tab Navigation */}
+            <div className="mb-8">
+              {/* Mobile Dropdown */}
+              <div className="mobile-menu-container sm:hidden">
+                <div className="relative">
+                  <button
+                    onClick={() => setShowMobileMenu(!showMobileMenu)}
+                    className="flex w-full items-center justify-between border border-neutral-600 bg-neutral-800 px-4 py-3 text-left text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  >
+                    <div className="flex items-center space-x-3">
+                      {activeTab === 'overview' && (
+                        <ChartBarIcon className="h-5 w-5 text-blue-400" />
+                      )}
+                      {activeTab === 'activity' && (
+                        <ClockIcon className="h-5 w-5 text-blue-400" />
+                      )}
+                      {activeTab === 'users' && (
+                        <UserGroupIcon className="h-5 w-5 text-blue-400" />
+                      )}
+                      {activeTab === 'challenges' && (
+                        <DocumentTextIcon className="h-5 w-5 text-blue-400" />
+                      )}
+                      {activeTab === 'reports' && (
+                        <ExclamationTriangleIcon className="h-5 w-5 text-blue-400" />
+                      )}
+                      {activeTab === 'accounts' && (
+                        <UserGroupIcon className="h-5 w-5 text-blue-400" />
+                      )}
+                      {activeTab === 'warnings' && (
+                        <ExclamationTriangleIcon className="h-5 w-5 text-blue-400" />
+                      )}
+                      <span className="font-medium">
+                        {activeTab === 'overview' && 'Overview'}
+                        {activeTab === 'activity' && 'Recent Activity'}
+                        {activeTab === 'users' && `Users (${totalUsers})`}
+                        {activeTab === 'challenges' &&
+                          `Challenges (${pendingChallenges.length})`}
+                        {activeTab === 'reports' &&
+                          `Reports (${
+                            reportStats?.totalReports || reports.length
+                          })`}
+                        {activeTab === 'accounts' &&
+                          `Accounts (${
+                            totalSuspendedAccounts + pendingDeletions.length
+                          })`}
+                        {activeTab === 'warnings' &&
+                          `History (${historyTotalUsers})`}
+                      </span>
+                    </div>
+                    <ChevronDownIcon className="h-5 w-5 text-gray-400" />
+                  </button>
+                  {showMobileMenu && (
+                    <div className="absolute left-0 right-0 top-full z-50 border border-neutral-600 bg-neutral-800 shadow-lg">
+                      <div className="py-2">
+                        <button
+                          onClick={() => {
+                            setActiveTab('overview');
+                            fetchAllData();
+                            setShowMobileMenu(false);
+                          }}
+                          className="flex w-full items-center space-x-3 px-4 py-3 text-left text-white hover:bg-neutral-700 focus:bg-neutral-700 focus:outline-none"
+                        >
+                          <ChartBarIcon className="h-5 w-5 text-blue-400" />
+                          <span>Overview</span>
+                        </button>
+                        <button
+                          onClick={() => {
+                            setActiveTab('activity');
+                            fetchRecentActivity();
+                            setShowMobileMenu(false);
+                          }}
+                          className="flex w-full items-center space-x-3 px-4 py-3 text-left text-white hover:bg-neutral-700 focus:bg-neutral-700 focus:outline-none"
+                        >
+                          <ClockIcon className="h-5 w-5 text-gray-400" />
+                          <span>Recent Activity</span>
+                        </button>
+                        <button
+                          onClick={() => {
+                            setActiveTab('users');
+                            fetchUsers(currentUserPage, userSearchFilter);
+                            setShowMobileMenu(false);
+                          }}
+                          className="flex w-full items-center space-x-3 px-4 py-3 text-left text-white hover:bg-neutral-700 focus:bg-neutral-700 focus:outline-none"
+                        >
+                          <UserGroupIcon className="h-5 w-5 text-gray-400" />
+                          <span>Users ({totalUsers})</span>
+                        </button>
+                        <button
+                          onClick={() => {
+                            setActiveTab('challenges');
+                            fetchPendingChallenges();
+                            setShowMobileMenu(false);
+                          }}
+                          className="flex w-full items-center space-x-3 px-4 py-3 text-left text-white hover:bg-neutral-700 focus:bg-neutral-700 focus:outline-none"
+                        >
+                          <DocumentTextIcon className="h-5 w-5 text-gray-400" />
+                          <span>Challenges ({pendingChallenges.length})</span>
+                        </button>
+                        <button
+                          onClick={() => {
+                            setActiveTab('reports');
+                            fetchReports(reportFilters);
+                            fetchReportStats();
+                            setShowMobileMenu(false);
+                          }}
+                          className="flex w-full items-center space-x-3 px-4 py-3 text-left text-white hover:bg-neutral-700 focus:bg-neutral-700 focus:outline-none"
+                        >
+                          <ExclamationTriangleIcon className="h-5 w-5 text-gray-400" />
+                          <span>
+                            Reports (
+                            {reportStats?.totalReports || reports.length})
+                          </span>
+                        </button>
+                        <button
+                          onClick={() => {
+                            setActiveTab('accounts');
+                            // Fetch all accounts-related data
+                            fetchSuspendedAccounts(
+                              suspendedAccountsPage,
+                              suspendedSearchFilter
+                            );
+                            fetchPendingDeletions(deletionsSearchFilter);
+                            fetchDeletionStats();
+                            setShowMobileMenu(false);
+                          }}
+                          className="flex w-full items-center space-x-3 px-4 py-3 text-left text-white hover:bg-neutral-700 focus:bg-neutral-700 focus:outline-none"
+                        >
+                          <UserGroupIcon className="h-5 w-5 text-gray-400" />
+                          <span>
+                            Accounts (
+                            {totalSuspendedAccounts + pendingDeletions.length})
+                          </span>
+                        </button>
+                        <button
+                          onClick={() => {
+                            setActiveTab('warnings');
+                            // Fetch all history-related data
+                            fetchGroupedSuspensions(groupedSuspensionsPage);
+                            fetchGroupedWarnings(groupedWarningsPage);
+                            calculateHistoryTotalUsers();
+                            setShowMobileMenu(false);
+                          }}
+                          className="flex w-full items-center space-x-3 px-4 py-3 text-left text-white hover:bg-neutral-700 focus:bg-neutral-700 focus:outline-none"
+                        >
+                          <ExclamationTriangleIcon className="h-5 w-5 text-gray-400" />
+                          <span>History ({historyTotalUsers})</span>
+                        </button>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </div>
+              {/* Desktop Tabs */}
+              <div className="hidden sm:block">
+                <div className="border-b border-neutral-700">
+                  <nav className="flex space-x-8">
+                    <TabButton
+                      id="overview"
+                      label="Overview"
+                      icon={ChartBarIcon}
+                    />
+                    <TabButton
+                      id="activity"
+                      label="Recent Activity"
+                      icon={ClockIcon}
+                    />
+                    <TabButton
+                      id="users"
+                      label="Users"
+                      icon={UserGroupIcon}
+                      count={totalUsers}
+                    />
+                    <TabButton
+                      id="challenges"
+                      label="Challenges"
+                      icon={DocumentTextIcon}
+                      count={pendingChallenges.length}
+                    />
+                    <TabButton
+                      id="reports"
+                      label="Reports"
+                      icon={ExclamationTriangleIcon}
+                      count={reportStats?.totalReports || reports.length}
+                    />
+                    <TabButton
+                      id="accounts"
+                      label="Accounts"
+                      icon={UserGroupIcon}
+                      count={totalSuspendedAccounts + pendingDeletions.length}
+                    />
+                    <TabButton
+                      id="warnings"
+                      label="History"
+                      icon={ExclamationTriangleIcon}
+                      count={historyTotalUsers}
+                    />
+                  </nav>
+                </div>
+              </div>
+            </div>
+
+            {/* Tab Content */}
+            {activeTab === 'activity' && (
+              <div className="space-y-6">
+                {/* Activity Tab Navigation */}
+                <div className="border-b border-neutral-700">
+                  <nav className="flex flex-wrap space-x-2 sm:space-x-8">
+                    <button
+                      onClick={() => {
+                        setActiveActivityTab('comments');
+                        fetchRecentActivity();
+                      }}
+                      className={`border-b-2 px-1 py-2 text-xs font-medium transition-colors duration-200 sm:py-4 sm:text-sm ${
+                        activeActivityTab === 'comments'
+                          ? 'border-blue-500 text-blue-400'
+                          : 'border-transparent text-gray-400 hover:text-gray-300'
+                      }`}
+                    >
+                      Comments
+                      <span
+                        className={`ml-1 px-1 py-0.5 text-xs font-medium sm:ml-2 sm:px-2 sm:py-1 ${
+                          recentActivity.comments.length > 0
+                            ? 'bg-blue-600/20 text-blue-400'
+                            : 'bg-gray-600/20 text-gray-400'
+                        }`}
+                      >
+                        {recentActivity.comments.length || 0}
+                      </span>
+                    </button>
+                    <button
+                      onClick={() => {
+                        setActiveActivityTab('writeups');
+                        fetchRecentActivity();
+                      }}
+                      className={`border-b-2 px-1 py-2 text-xs font-medium transition-colors duration-200 sm:py-4 sm:text-sm ${
+                        activeActivityTab === 'writeups'
+                          ? 'border-green-500 text-green-400'
+                          : 'border-transparent text-gray-400 hover:text-gray-300'
+                      }`}
+                    >
+                      Writeups
+                      <span
+                        className={`ml-1 px-1 py-0.5 text-xs font-medium sm:ml-2 sm:px-2 sm:py-1 ${
+                          recentActivity.writeups.length > 0
+                            ? 'bg-green-600/20 text-green-400'
+                            : 'bg-gray-600/20 text-gray-400'
+                        }`}
+                      >
+                        {recentActivity.writeups.length || 0}
+                      </span>
+                    </button>
+                    <button
+                      onClick={() => {
+                        setActiveActivityTab('lessons');
+                        fetchRecentActivity();
+                      }}
+                      className={`border-b-2 px-1 py-2 text-xs font-medium transition-colors duration-200 sm:py-4 sm:text-sm ${
+                        activeActivityTab === 'lessons'
+                          ? 'border-purple-500 text-purple-400'
+                          : 'border-transparent text-gray-400 hover:text-gray-300'
+                      }`}
+                    >
+                      Lessons
+                      <span
+                        className={`ml-1 px-1 py-0.5 text-xs font-medium sm:ml-2 sm:px-2 sm:py-1 ${
+                          recentActivity.lessons.length > 0
+                            ? 'bg-purple-600/20 text-purple-400'
+                            : 'bg-gray-600/20 text-gray-400'
+                        }`}
+                      >
+                        {recentActivity.lessons.length || 0}
+                      </span>
+                    </button>
+                  </nav>
+                </div>
+
+                {/* Activity Content */}
+                <div className="border border-neutral-700/50 bg-neutral-800/80 p-4 backdrop-blur-sm sm:p-8">
+                  <div className="mb-6 flex items-center justify-between">
+                    <div>
+                      <h2 className="text-2xl font-bold text-white">
+                        Recent{' '}
+                        {activeActivityTab.charAt(0).toUpperCase() +
+                          activeActivityTab.slice(1)}
+                      </h2>
+                      <p className="text-sm text-gray-400">
+                        Latest {activeActivityTab} across the platform
+                      </p>
+                    </div>
+                    <button
+                      onClick={refreshActivity}
+                      className="flex items-center space-x-2 border border-blue-500/30 bg-blue-600/10 px-3 py-2 text-blue-400 transition-all duration-200 hover:border-blue-500/50 hover:bg-blue-600/20 sm:px-4"
+                    >
+                      <i className="fas fa-sync-alt text-sm"></i>
+                      <span className="hidden sm:inline">Refresh</span>
+                    </button>
+                  </div>
+
+                  {loadingActivity ? (
+                    <div className="flex justify-center py-12">
+                      <div className="text-gray-400">
+                        Loading recent {activeActivityTab}...
+                      </div>
+                    </div>
+                  ) : (
+                    <div className="space-y-4">
+                      {/* Comments Content */}
+                      {activeActivityTab === 'comments' && (
+                        <div>
+                          {recentActivity.comments.length === 0 ? (
+                            <div className="border border-neutral-600/50 bg-neutral-700/30 p-8 text-center">
+                              <i className="fas fa-comments mb-4 text-4xl text-gray-500"></i>
+                              <h3 className="text-lg font-medium text-white">
+                                No recent comments
+                              </h3>
+                              <p className="mt-2 text-gray-400">
+                                No comments have been posted recently.
+                              </p>
+                            </div>
+                          ) : (
+                            <div className="space-y-4">
+                              {recentActivity.comments.map((comment) => (
+                                <div
+                                  key={comment.id}
+                                  className="cursor-pointer border border-neutral-600/50 bg-neutral-700/30 p-4 transition-all duration-200 hover:border-blue-500/50"
+                                  onClick={() =>
+                                    window.open(
+                                      `/challenges/${
+                                        comment.challengeSlug ||
+                                        comment.challengeId ||
+                                        ''
+                                      }?tab=comments`,
+                                      '_blank'
+                                    )
+                                  }
+                                >
+                                  <div className="flex items-start space-x-3">
+                                    <img
+                                      className="h-10 w-10 rounded border border-neutral-600 bg-neutral-700 object-cover"
+                                      src={
+                                        comment.profilePicture
+                                          ? comment.profilePicture
+                                          : `https://robohash.org/${comment.username}.png?set=set1&size=150x150`
+                                      }
+                                      alt={comment.username}
+                                      onError={(e) => {
+                                        e.target.src = `https://robohash.org/${comment.username}.png?set=set1&size=150x150`;
+                                        e.target.onerror = null;
+                                      }}
+                                    />
+                                    <div className="min-w-0 flex-1">
+                                      <div className="mb-1 flex items-center space-x-2">
+                                        <span className="font-medium text-white hover:text-blue-400">
+                                          {comment.username}
+                                        </span>
+                                        <span className="text-sm text-gray-400">
+                                          {new Date(
+                                            comment.createdAt
+                                          ).toLocaleDateString()}{' '}
+                                          {new Date(
+                                            comment.createdAt
+                                          ).toLocaleTimeString([], {
+                                            hour: 'numeric',
+                                            minute: 'numeric',
+                                            hour12: true,
+                                          })}
+                                        </span>
+                                      </div>
+                                      <div className="mb-2 text-sm text-blue-400">
+                                        on {comment.challengeTitle}
+                                      </div>
+                                      <div className="text-gray-300">
+                                        {comment.content}
+                                      </div>
+                                    </div>
+                                  </div>
+                                </div>
+                              ))}
+                            </div>
+                          )}
+                        </div>
+                      )}
+
+                      {/* Writeups Content */}
+                      {activeActivityTab === 'writeups' && (
+                        <div>
+                          {recentActivity.writeups.length === 0 ? (
+                            <div className="border border-neutral-600/50 bg-neutral-700/30 p-8 text-center">
+                              <i className="fas fa-file-alt mb-4 text-4xl text-gray-500"></i>
+                              <h3 className="text-lg font-medium text-white">
+                                No recent writeups
+                              </h3>
+                              <p className="mt-2 text-gray-400">
+                                No writeups have been posted recently.
+                              </p>
+                            </div>
+                          ) : (
+                            <div className="space-y-4">
+                              {recentActivity.writeups.map((writeup) => (
+                                <div
+                                  key={writeup.id}
+                                  className="cursor-pointer border border-neutral-600/50 bg-neutral-700/30 p-4 transition-all duration-200 hover:border-green-500/50"
+                                  onClick={() =>
+                                    window.open(
+                                      `/challenges/${
+                                        writeup.challengeSlug ||
+                                        writeup.challengeId ||
+                                        ''
+                                      }?tab=writeups`,
+                                      '_blank'
+                                    )
+                                  }
+                                >
+                                  <div className="flex items-start space-x-3">
+                                    <img
+                                      className="h-10 w-10 rounded border border-neutral-600 bg-neutral-700 object-cover"
+                                      src={
+                                        writeup.profilePicture
+                                          ? writeup.profilePicture
+                                          : `https://robohash.org/${writeup.username}.png?set=set1&size=150x150`
+                                      }
+                                      alt={writeup.username}
+                                      onError={(e) => {
+                                        e.target.src = `https://robohash.org/${writeup.username}.png?set=set1&size=150x150`;
+                                        e.target.onerror = null;
+                                      }}
+                                    />
+                                    <div className="min-w-0 flex-1">
+                                      <div className="mb-1 flex items-center space-x-2">
+                                        <span className="font-medium text-white hover:text-green-400">
+                                          {writeup.username}
+                                        </span>
+                                        <span className="text-sm text-gray-400">
+                                          {new Date(
+                                            writeup.createdAt
+                                          ).toLocaleDateString()}{' '}
+                                          {new Date(
+                                            writeup.createdAt
+                                          ).toLocaleTimeString([], {
+                                            hour: 'numeric',
+                                            minute: 'numeric',
+                                            hour12: true,
+                                          })}
+                                        </span>
+                                      </div>
+                                      <div className="mb-2 text-sm text-green-400">
+                                        for {writeup.challengeTitle}
+                                      </div>
+                                      <div className="text-gray-300">
+                                        {writeup.content}
+                                      </div>
+                                    </div>
+                                  </div>
+                                </div>
+                              ))}
+                            </div>
+                          )}
+                        </div>
+                      )}
+
+                      {/* Lessons Content */}
+                      {activeActivityTab === 'lessons' && (
+                        <div>
+                          {recentActivity.lessons.length === 0 ? (
+                            <div className="border border-neutral-600/50 bg-neutral-700/30 p-8 text-center">
+                              <i className="fas fa-graduation-cap mb-4 text-4xl text-gray-500"></i>
+                              <h3 className="text-lg font-medium text-white">
+                                No recent lessons
+                              </h3>
+                              <p className="mt-2 text-gray-400">
+                                No lessons have been created recently.
+                              </p>
+                            </div>
+                          ) : (
+                            <div className="space-y-4">
+                              {recentActivity.lessons.map((lesson) => (
+                                <div
+                                  key={lesson.id}
+                                  className="cursor-pointer border border-neutral-600/50 bg-neutral-700/30 p-4 transition-all duration-200 hover:border-purple-500/50"
+                                  onClick={() =>
+                                    window.open(
+                                      `/learn/lessons/${lesson.id}`,
+                                      '_blank'
+                                    )
+                                  }
+                                >
+                                  <div className="flex items-start space-x-3">
+                                    <div className="flex h-10 w-10 items-center justify-center rounded bg-purple-600/20">
+                                      <i className="fas fa-graduation-cap text-purple-400"></i>
+                                    </div>
+                                    <div className="min-w-0 flex-1">
+                                      <div className="mb-1 flex items-center space-x-2">
+                                        <span className="font-medium text-white hover:text-purple-400">
+                                          {lesson.title}
+                                        </span>
+                                        <span className="text-sm text-gray-400">
+                                          {new Date(
+                                            lesson.createdAt
+                                          ).toLocaleDateString()}{' '}
+                                          {new Date(
+                                            lesson.createdAt
+                                          ).toLocaleTimeString([], {
+                                            hour: 'numeric',
+                                            minute: 'numeric',
+                                            hour12: true,
+                                          })}
+                                        </span>
+                                      </div>
+                                      <div className="mb-2 flex items-center space-x-2">
+                                        <span className="text-sm text-purple-400">
+                                          by {lesson.author}
+                                        </span>
+                                        <span
+                                          className={`border px-2 py-0.5 text-xs ${
+                                            lesson.status === 'PUBLISHED'
+                                              ? 'border-green-500/30 bg-green-600/10 text-green-400'
+                                              : lesson.status === 'DRAFT'
+                                              ? 'border-yellow-500/30 bg-yellow-600/10 text-yellow-400'
+                                              : 'border-gray-500/30 bg-gray-600/10 text-gray-400'
+                                          }`}
+                                        >
+                                          {lesson.status}
+                                        </span>
+                                      </div>
+                                      <div className="text-gray-300">
+                                        {lesson.description}
+                                      </div>
+                                    </div>
+                                  </div>
+                                </div>
+                              ))}
+                            </div>
+                          )}
+                        </div>
+                      )}
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
+
+            {activeTab === 'overview' && (
+              <div className="space-y-8">
+                {/* Enhanced Platform Statistics Dashboard */}
+                <div className="border border-neutral-700/50 bg-neutral-800/80 p-8 backdrop-blur-sm">
+                  <div className="mb-8 flex items-center justify-between">
+                    <div className="flex items-center space-x-4">
+                      <div>
+                        <h2 className="text-2xl font-bold text-white">
+                          Platform Analytics
+                        </h2>
+                        <p className="text-sm text-gray-400">
+                          Real-time platform statistics and insights
+                        </p>
+                      </div>
+                    </div>
+                    <div className="flex items-center space-x-2">
+                      <div className="flex h-3 w-3 animate-pulse bg-green-400"></div>
+                      <span className="text-sm font-medium text-green-400">
+                        Live
+                      </span>
+                    </div>
+                  </div>
+
+                  {stats ? (
+                    <>
+                      {/* Primary Stats Grid */}
+                      <div className="mb-8 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
+                        {/* Total Users */}
+                        <div className="group relative overflow-hidden border border-blue-500/20 bg-blue-600/10 p-6 transition-all duration-300 hover:border-blue-500/40">
+                          <div className="text-center">
+                            <p className="text-3xl font-bold text-white">
+                              {stats?.userCount?.toLocaleString() || '0'}
+                            </p>
+                            <p className="text-sm font-medium text-blue-400">
+                              Total Users
+                            </p>
+                          </div>
+                          <div className="mt-4 flex items-center space-x-2">
+                            <div className="h-1 w-full bg-blue-500/20">
+                              <div className="h-1 w-3/4 bg-blue-400"></div>
+                            </div>
+                          </div>
+                        </div>
+
+                        {/* New Joiners (24h) */}
+                        <div className="group relative overflow-hidden border border-green-500/20 bg-green-600/10 p-6 transition-all duration-300 hover:border-green-500/40">
+                          <div className="text-center">
+                            <p className="text-3xl font-bold text-white">
+                              {stats?.recentSignUpsCount24h || 0}
+                            </p>
+                            <p className="text-sm font-medium text-green-400">
+                              New Joiners (24h)
+                            </p>
+                          </div>
+                          <div className="mt-4 flex items-center justify-center">
+                            <div className="flex items-center space-x-1 text-xs text-green-400">
+                              <span>
+                                +
+                                {(
+                                  (stats?.recentSignUpsCount24h || 0) / 7
+                                ).toFixed(1)}
+                                % vs avg
+                              </span>
+                            </div>
+                          </div>
+                        </div>
+
+                        {/* Total Challenges */}
+                        <div className="group relative overflow-hidden border border-purple-500/20 bg-purple-600/10 p-6 transition-all duration-300 hover:border-purple-500/40">
+                          <div className="text-center">
+                            <p className="text-3xl font-bold text-white">
+                              {stats?.challengeCount?.toLocaleString() || '0'}
+                            </p>
+                            <p className="text-sm font-medium text-purple-400">
+                              Total Challenges
+                            </p>
+                          </div>
+                          <div className="mt-4 flex items-center space-x-2">
+                            <div className="h-1 w-full bg-purple-500/20">
+                              <div className="h-1 w-2/3 bg-purple-400"></div>
+                            </div>
+                          </div>
+                        </div>
+
+                        {/* Verified Challenges */}
+                        <div className="group relative overflow-hidden border border-emerald-500/20 bg-emerald-600/10 p-6 transition-all duration-300 hover:border-emerald-500/40">
+                          <div className="text-center">
+                            <p className="text-3xl font-bold text-white">
+                              {stats?.verifiedChallengeCount?.toLocaleString() ||
+                                '0'}
+                            </p>
+                            <p className="text-sm font-medium text-emerald-400">
+                              Verified Challenges
+                            </p>
+                          </div>
+                          <div className="mt-4 flex items-center justify-center">
+                            <div className="flex items-center space-x-1 text-xs text-emerald-400">
+                              <span>
+                                {(
+                                  ((stats?.verifiedChallengeCount || 0) /
+                                    (stats?.challengeCount || 1)) *
+                                  100
+                                ).toFixed(1)}
+                                % verified
+                              </span>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      {/* Secondary Stats Grid */}
+                      <div className="mb-8 grid grid-cols-2 gap-6 sm:grid-cols-4 lg:grid-cols-6">
+                        {/* Pending Challenges */}
+                        <div className="border border-yellow-500/20 bg-yellow-600/10 p-4 text-center transition-all duration-300 hover:border-yellow-500/40">
+                          <p className="text-xl font-bold text-white">
+                            {pendingChallenges.length}
+                          </p>
+                          <p className="text-xs font-medium text-yellow-400">
+                            Pending
+                          </p>
+                        </div>
+
+                        {/* Reports */}
+                        <div className="border border-red-500/20 bg-red-600/10 p-4 text-center transition-all duration-300 hover:border-red-500/40">
+                          <p className="text-xl font-bold text-white">
+                            {reportStats?.totalReports || reports.length}
+                          </p>
+                          <p className="text-xs font-medium text-red-400">
+                            Reports
+                          </p>
+                        </div>
+
+                        {/* Suspended Accounts */}
+                        <div className="border border-orange-500/20 bg-orange-600/10 p-4 text-center transition-all duration-300 hover:border-orange-500/40">
+                          <p className="text-xl font-bold text-white">
+                            {totalSuspendedAccounts}
+                          </p>
+                          <p className="text-xs font-medium text-orange-400">
+                            Suspended
+                          </p>
+                        </div>
+
+                        {/* Account Deletions */}
+                        <div className="border border-pink-500/20 bg-pink-600/10 p-4 text-center transition-all duration-300 hover:border-pink-500/40">
+                          <p className="text-xl font-bold text-white">
+                            {pendingDeletions.length}
+                          </p>
+                          <p className="text-xs font-medium text-pink-400">
+                            Deletions
+                          </p>
+                        </div>
+
+                        {/* Verification Rate */}
+                        <div className="border border-indigo-500/20 bg-indigo-600/10 p-4 text-center transition-all duration-300 hover:border-indigo-500/40">
+                          <p className="text-xl font-bold text-white">
+                            {(
+                              ((stats?.verifiedChallengeCount || 0) /
+                                (stats?.challengeCount || 1)) *
+                              100
+                            ).toFixed(0)}
+                            %
+                          </p>
+                          <p className="text-xs font-medium text-indigo-400">
+                            Verified
+                          </p>
+                        </div>
+
+                        {/* Weekly Projection */}
+                        <div className="border border-cyan-500/20 bg-cyan-600/10 p-4 text-center transition-all duration-300 hover:border-cyan-500/40">
+                          <p className="text-xl font-bold text-white">
+                            {(stats?.recentSignUpsCount24h || 0) * 7}
+                          </p>
+                          <p className="text-xs font-medium text-cyan-400">
+                            Weekly User Est.
+                          </p>
+                        </div>
+                      </div>
+
+                      {/* Recent Activity Section */}
+                      <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
+                        {/* Recent Joiners */}
+                        <div className="border border-neutral-600/50 bg-neutral-700/30 p-6 backdrop-blur-sm">
+                          <div className="mb-6 flex items-center justify-between">
+                            <div className="flex items-center space-x-3">
+                              <div className="flex h-10 w-10 items-center justify-center bg-green-500/20 text-green-400">
+                                <i className="fas fa-users text-lg"></i>
+                              </div>
+                              <div>
+                                <h3 className="text-lg font-semibold text-white">
+                                  Recent Joiners
+                                </h3>
+                                <p className="text-sm text-gray-400">
+                                  Latest members to join the platform
+                                </p>
+                              </div>
+                            </div>
+                            <div className="text-right">
+                              <p className="text-sm font-medium text-green-400">
+                                {stats?.recentSignUpsCount24h || 0} in last 24h
+                              </p>
+                              <p className="text-xs text-gray-500">
+                                Showing latest{' '}
+                                {Math.min(6, stats?.recentSignUps?.length || 0)}
+                              </p>
+                            </div>
+                          </div>
+
+                          {stats?.recentSignUps &&
+                          stats?.recentSignUps.length > 0 ? (
+                            <div className="grid grid-cols-2 gap-4 sm:grid-cols-3">
+                              {stats?.recentSignUps.slice(0, 6).map((user) => (
+                                <div
+                                  key={user.id}
+                                  className="group cursor-pointer border border-neutral-600/50 bg-neutral-600/30 p-4 transition-all duration-300 hover:scale-105 hover:border-green-500/50 hover:bg-neutral-600/50"
+                                  onClick={() =>
+                                    window.open(
+                                      `/users/${user.username}`,
+                                      '_blank'
+                                    )
+                                  }
+                                >
+                                  <div className="flex flex-col items-center text-center">
+                                    <div className="relative mb-3">
+                                      <img
+                                        src={
+                                          user.profileImage ||
+                                          'https://robohash.org/' +
+                                            user.username
+                                        }
+                                        alt={`${user.username}'s profile`}
+                                        className="h-12 w-12 border-2 border-green-500/30 transition-all duration-300 group-hover:border-green-500/60"
+                                      />
+                                      <div className="absolute -right-1 -top-1 h-4 w-4 bg-green-500 ring-2 ring-neutral-800"></div>
+                                    </div>
+                                    <div className="w-full min-w-0">
+                                      <p className="truncate text-sm font-medium text-white transition-colors group-hover:text-green-400">
+                                        {user.username}
+                                      </p>
+                                      <p className="text-xs text-gray-400">
+                                        {new Date(
+                                          user.createdAt
+                                        ).toLocaleDateString()}
+                                      </p>
+                                    </div>
+                                  </div>
+                                </div>
+                              ))}
+                            </div>
+                          ) : (
+                            <div className="py-8 text-center">
+                              <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center bg-neutral-600/50">
+                                <i className="fas fa-user-plus text-2xl text-gray-400"></i>
+                              </div>
+                              <p className="text-gray-400">
+                                No recent sign-ups
+                              </p>
+                            </div>
+                          )}
+                        </div>
+
+                        {/* Recent Logins */}
+                        <div className="border border-neutral-600/50 bg-neutral-700/30 p-6 backdrop-blur-sm">
+                          <div className="mb-6 flex items-center justify-between">
+                            <div className="flex items-center space-x-3">
+                              <div className="flex h-10 w-10 items-center justify-center bg-green-500/20 text-green-400">
+                                <i className="fas fa-sign-in-alt text-lg"></i>
+                              </div>
+                              <div>
+                                <h3 className="text-lg font-semibold text-white">
+                                  Recent Logins
+                                </h3>
+                                <p className="text-sm text-gray-400">
+                                  Users active in last 24h
+                                </p>
+                              </div>
+                            </div>
+                            <div className="flex items-center space-x-2">
+                              <span className="text-sm font-medium text-green-400">
+                                {stats?.recentLogins?.length || 0} users
+                              </span>
+                            </div>
+                          </div>
+
+                          {stats?.recentLogins?.length > 0 ? (
+                            <div className="grid grid-cols-2 gap-4">
+                              {stats?.recentLogins
+                                .slice(0, 4)
+                                .map((user, index) => (
+                                  <div
+                                    key={user.uid || index}
+                                    className="group cursor-pointer border border-neutral-600/50 bg-neutral-600/30 p-4 transition-all duration-300 hover:border-green-500/50 hover:bg-neutral-600/50"
+                                    onClick={() =>
+                                      window.open(
+                                        `/users/${user.username}`,
+                                        '_blank'
+                                      )
+                                    }
+                                  >
+                                    <div className="flex items-center space-x-3">
+                                      <div className="relative">
+                                        <img
+                                          src={
+                                            user.profileImage &&
+                                            user.profileImage !== ''
+                                              ? user.profileImage
+                                              : `https://robohash.org/${user.username}?set=set1&size=48x48`
+                                          }
+                                          alt={user.username}
+                                          className="h-12 w-12 border-2 border-green-500/30 object-cover transition-all duration-300 group-hover:border-green-500/60"
+                                          onError={(e) => {
+                                            e.target.src = `https://robohash.org/${user.username}?set=set1&size=48x48`;
+                                          }}
+                                        />
+                                        <div className="absolute -right-1 -top-1 h-3 w-3 bg-green-500 ring-1 ring-neutral-800"></div>
+                                      </div>
+                                      <div className="min-w-0 flex-1">
+                                        <p className="truncate text-sm font-medium text-white transition-colors group-hover:text-green-400">
+                                          {user.username}
+                                        </p>
+                                        <p className="text-xs text-gray-400">
+                                          {new Date(
+                                            user.lastLogin
+                                          ).toLocaleTimeString()}
+                                        </p>
+                                        {user.role === 'ADMIN' && (
+                                          <span className="mt-1 inline-block bg-red-600/20 px-1 py-0.5 text-xs font-medium text-red-400">
+                                            ADMIN
+                                          </span>
+                                        )}
+                                        {user.role === 'PRO' && (
+                                          <span className="mt-1 inline-block bg-yellow-600/20 px-1 py-0.5 text-xs font-medium text-yellow-400">
+                                            PRO
+                                          </span>
+                                        )}
+                                      </div>
+                                    </div>
+                                  </div>
+                                ))}
+                            </div>
+                          ) : (
+                            <div className="py-8 text-center">
+                              <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center bg-neutral-600/50">
+                                <i className="fas fa-sign-in-alt text-2xl text-gray-400"></i>
+                              </div>
+                              <p className="text-gray-400">No recent logins</p>
+                            </div>
+                          )}
+                        </div>
+                      </div>
+                    </>
+                  ) : (
+                    <div className="py-16 text-center">
+                      <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center bg-red-600/20">
+                        <i className="fas fa-exclamation-triangle text-2xl text-red-400"></i>
+                      </div>
+                      <h3 className="mb-2 text-lg font-medium text-white">
+                        Failed to load statistics
+                      </h3>
+                      <p className="mb-4 text-gray-400">
+                        Unable to fetch platform analytics data
+                      </p>
+                      <button
+                        onClick={fetchStats}
+                        className="bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors duration-200 hover:bg-blue-500"
+                      >
+                        <i className="fas fa-sync-alt mr-2"></i>
+                        Retry
+                      </button>
+                    </div>
+                  )}
+                </div>
+
+                {/* Quick Actions */}
+                <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
+                  {/* User Actions */}
+                  <div className="border border-neutral-700 bg-neutral-800 p-6 transition-all duration-200 hover:border-neutral-600">
+                    <div className="mb-6">
+                      <h3 className="text-xl text-white">User Management</h3>
+                    </div>
+
+                    <div className="space-y-4">
+                      <div className="relative">
+                        <input
+                          type="text"
+                          placeholder="Enter username to manage"
+                          className="w-full border-0 bg-neutral-700/80 px-4 py-3 text-white placeholder-gray-400 shadow-inner transition-all duration-200 focus:bg-neutral-700 focus:ring-2 focus:ring-blue-500/50 focus:ring-offset-0"
+                          id="username-input"
+                          value={userSearchQuery}
+                          onChange={handleUserInputChange}
+                          onFocus={() => {
+                            if (userSuggestions.length > 0) {
+                              setShowUserSuggestions(true);
+                            }
+                          }}
+                          onBlur={() => {
+                            // Delay hiding suggestions to allow clicking
+                            setTimeout(
+                              () => setShowUserSuggestions(false),
+                              200
+                            );
+                          }}
+                          autoComplete="off"
+                        />
+
+                        {/* User Suggestions Dropdown */}
+                        {showUserSuggestions && userSuggestions.length > 0 && (
+                          <div className="user-suggestions absolute left-0 right-0 top-full z-50 mt-1 max-h-64 overflow-y-auto border border-neutral-600 bg-neutral-800 shadow-lg">
+                            {userSuggestions.map((user) => (
+                              <div
+                                key={user.id}
+                                className="flex cursor-pointer items-center space-x-3 px-4 py-3 transition-colors duration-200 hover:bg-neutral-700"
+                                onClick={() => handleUserSelection(user)}
+                              >
+                                <img
+                                  src={
+                                    user.profileImage ||
+                                    'https://robohash.org/' + user.username
+                                  }
+                                  alt={`${user.username}'s profile`}
+                                  className="h-8 w-8"
+                                />
+                                <div className="flex-1">
+                                  <p className="font-medium text-white">
+                                    {user.username}
+                                  </p>
+                                  <p className="text-xs text-gray-400">{user.email || ''}</p>
+                                  <p className="text-xs text-gray-500">
+                                    {user.points || 0} points • Joined{' '}
+                                    {new Date(
+                                      user.createdAt
+                                    ).toLocaleDateString()}
+                                  </p>
+                                </div>
+                                {user.disabled && (
+                                  <span className="bg-red-600 px-2 py-1 text-xs text-white">
+                                    Disabled
+                                  </span>
+                                )}
+                              </div>
+                            ))}
+                          </div>
+                        )}
+                      </div>
+
+                      <div className="relative">
+                        <textarea
+                          placeholder="Reason for action (required for audit trail)"
+                          className="w-full border-0 bg-neutral-700/80 px-4 py-3 text-white placeholder-gray-400 shadow-inner transition-all duration-200 focus:bg-neutral-700 focus:ring-2 focus:ring-blue-500/50 focus:ring-offset-0"
+                          rows="3"
+                          id="reason-input"
+                        />
+                      </div>
+
+                      <div className="space-y-4">
+                        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+                          <button
+                            className="flex items-center justify-center space-x-2 border border-red-600/30 bg-red-600/10 px-4 py-3 text-sm font-medium text-red-400 transition-all duration-200 hover:border-red-500/50 hover:bg-red-600/20"
+                            onClick={handleDisableAccount}
+                          >
+                            <span>Disable Account</span>
+                          </button>
+
+                          <button
+                            className="flex items-center justify-center space-x-2 border border-green-600/30 bg-green-600/10 px-4 py-3 text-sm font-medium text-green-400 transition-all duration-200 hover:border-green-500/50 hover:bg-green-600/20"
+                            onClick={handleEnableAccount}
+                          >
+                            <span>Enable Account</span>
+                          </button>
+                        </div>
+
+                        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+                          <button
+                            className="flex items-center justify-center space-x-2 border border-yellow-600/30 bg-yellow-600/10 px-4 py-3 text-sm font-medium text-yellow-400 transition-all duration-200 hover:border-yellow-500/50 hover:bg-yellow-600/20"
+                            onClick={handleWarnUser}
+                          >
+                            <i className="fas fa-exclamation-triangle"></i>
+                            <span>Warn User</span>
+                          </button>
+
+                          <button
+                            className="flex items-center justify-center space-x-2 border border-neutral-600 bg-neutral-700 px-4 py-3 text-sm font-medium text-white transition-all duration-200 hover:border-neutral-500 hover:bg-neutral-600"
+                            onClick={handleResetPFP}
+                          >
+                            <span>Reset Avatar</span>
+                          </button>
+                        </div>
+
+                        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+                          <button
+                            className="flex items-center justify-center space-x-2 border border-neutral-600 bg-neutral-700 px-4 py-3 text-sm font-medium text-white transition-all duration-200 hover:border-neutral-500 hover:bg-neutral-600"
+                            onClick={handleResetBanner}
+                          >
+                            <span>Reset Banner</span>
+                          </button>
+
+                          <button
+                            className="flex items-center justify-center space-x-2 border border-neutral-600 bg-neutral-700 px-4 py-3 text-sm font-medium text-white transition-all duration-200 hover:border-neutral-500 hover:bg-neutral-600"
+                            onClick={handleResetBio}
+                          >
+                            <span>Reset Bio</span>
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Challenge Actions */}
+                  <div className="border border-neutral-700 bg-neutral-800 p-6 transition-all duration-200 hover:border-neutral-600">
+                    <div className="mb-6">
+                      <h3 className="text-xl text-white">
+                        Challenge Management
+                      </h3>
+                    </div>
+
+                    <div className="space-y-4">
+                      <div className="relative">
+                        <input
+                          type="text"
+                          placeholder="Enter challenge ID or search by title"
+                          className="w-full border-0 bg-neutral-700/80 px-4 py-3 text-white placeholder-gray-400 shadow-inner transition-all duration-200 focus:bg-neutral-700 focus:ring-2 focus:ring-emerald-500/50 focus:ring-offset-0"
+                          id="challenge-input"
+                          value={challengeSearchQuery}
+                          onChange={handleChallengeInputChange}
+                          onFocus={() => {
+                            if (challengeSuggestions.length > 0) {
+                              setShowChallengeSuggestions(true);
+                            }
+                          }}
+                          onBlur={() => {
+                            // Delay hiding suggestions to allow clicking
+                            setTimeout(
+                              () => setShowChallengeSuggestions(false),
+                              200
+                            );
+                          }}
+                          autoComplete="off"
+                        />
+
+                        {/* Challenge Suggestions Dropdown */}
+                        {showChallengeSuggestions &&
+                          challengeSuggestions.length > 0 && (
+                            <div className="challenge-suggestions absolute left-0 right-0 top-full z-50 mt-1 max-h-64 overflow-y-auto border border-neutral-600 bg-neutral-800 shadow-lg">
+                              {challengeSuggestions.map((challenge) => (
+                                <div
+                                  key={challenge.id}
+                                  className="cursor-pointer px-4 py-3 transition-colors duration-200 hover:bg-neutral-700"
+                                  onClick={() =>
+                                    handleChallengeSelection(challenge)
+                                  }
+                                >
+                                  <div className="flex items-center justify-between">
+                                    <div className="flex-1">
+                                      <p className="font-medium text-white">
+                                        {challenge.title}
+                                      </p>
+                                      <p className="text-sm text-gray-400">
+                                        ID: {challenge.id}
+                                      </p>
+                                      <p className="text-xs text-gray-500">
+                                        Created by{' '}
+                                        {challenge.creator ||
+                                          challenge.author ||
+                                          'Unknown'}{' '}
+                                        •{' '}
+                                        {new Date(
+                                          challenge.createdAt
+                                        ).toLocaleDateString()}
+                                      </p>
+                                    </div>
+                                    <div className="flex flex-col items-end space-y-1">
+                                      {challenge.verified ? (
+                                        <span className="bg-green-600 px-2 py-1 text-xs text-white">
+                                          Approved
+                                        </span>
+                                      ) : (
+                                        <span className="bg-yellow-600 px-2 py-1 text-xs text-white">
+                                          Pending
+                                        </span>
+                                      )}
+                                      {challenge.difficulty && (
+                                        <span className="bg-neutral-600 px-2 py-0.5 text-xs text-gray-300">
+                                          {challenge.difficulty}
+                                        </span>
+                                      )}
+                                    </div>
+                                  </div>
+                                </div>
+                              ))}
+                            </div>
+                          )}
+                      </div>
+
+                      <div className="relative">
+                        <textarea
+                          placeholder="Reason for action (required for audit trail)"
+                          className="w-full border-0 bg-neutral-700/80 px-4 py-3 text-white placeholder-gray-400 shadow-inner transition-all duration-200 focus:bg-neutral-700 focus:ring-2 focus:ring-emerald-500/50 focus:ring-offset-0"
+                          rows="3"
+                          id="challenge-reason-input"
+                        />
+                      </div>
+
+                      <div className="space-y-3">
+                        <button
+                          className="flex w-full items-center justify-center space-x-3 border border-red-600/30 bg-red-600/10 px-6 py-4 font-medium text-red-400 transition-all duration-200 hover:border-red-500/50 hover:bg-red-600/20"
+                          onClick={handleDeleteChallenge}
+                        >
+                          <i className="fas fa-exclamation-triangle"></i>
+                          <span>Delete Challenge</span>
+                          <div className="ml-auto bg-red-500/30 px-2 py-1 text-xs text-red-300">
+                            Permanent
+                          </div>
+                        </button>
+
+                        <button
+                          className="flex w-full items-center justify-center space-x-3 border border-yellow-600/30 bg-yellow-600/10 px-6 py-4 font-medium text-yellow-400 transition-all duration-200 hover:border-yellow-500/50 hover:bg-yellow-600/20"
+                          onClick={handleUnapproveChallenge}
+                        >
+                          <span>Unapprove Challenge</span>
+                          <div className="ml-auto bg-yellow-500/30 px-2 py-1 text-xs text-yellow-300">
+                            Reversible
+                          </div>
+                        </button>
+
+                        <button
+                          className="flex w-full items-center justify-center space-x-3 border border-blue-600/30 bg-blue-600/10 px-6 py-4 font-medium text-blue-400 transition-all duration-200 hover:border-blue-500/50 hover:bg-blue-600/20"
+                          onClick={handleResyncLeaderboard}
+                        >
+                          <span>Resync Leaderboard</span>
+                          <div className="ml-auto bg-blue-500/30 px-2 py-1 text-xs text-blue-300">
+                            System
+                          </div>
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {activeTab === 'users' && (
+              <div className="space-y-6">
+                {/* User Management Section */}
+                <div className="space-y-6 border border-neutral-700/50 bg-neutral-800/50 p-6">
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center space-x-3">
+                      <div className="bg-blue-600/20 p-2">
+                        <UserGroupIcon className="h-6 w-6 text-blue-400" />
+                      </div>
+                      <h2 className="text-xl font-semibold text-white">
+                        User Management
+                      </h2>
+                    </div>
+                    <button
+                      onClick={() =>
+                        fetchUsers(currentUserPage, userSearchFilter)
+                      }
+                      className="flex items-center space-x-2 border border-blue-500/30 bg-blue-600/10 px-3 py-2 text-blue-400 transition-all duration-200 hover:border-blue-500/50 hover:bg-blue-600/20 sm:px-4"
+                    >
+                      <i className="fas fa-sync-alt text-sm"></i>
+                      <span className="hidden sm:inline">Refresh</span>
+                    </button>
+                  </div>
+
+                  {/* Search Bar */}
+                  <div className="relative">
+                    <div className="absolute left-4 top-3">
+                      <MagnifyingGlassIcon className="h-5 w-5 text-gray-400" />
+                    </div>
+                    <input
+                      type="text"
+                      placeholder="Search users by username, email, or name..."
+                      className="w-full border-0 bg-neutral-700/80 py-3 pl-12 pr-4 text-white placeholder-gray-400 shadow-inner transition-all duration-200 focus:bg-neutral-700 focus:ring-2 focus:ring-blue-500/50 focus:ring-offset-0"
+                      value={userSearchFilter}
+                      onChange={(e) => {
+                        setUserSearchFilter(e.target.value);
+                        handleUserInputChange(e); // trigger suggestions
+                        clearTimeout(window.userSearchTimeout2);
+                        window.userSearchTimeout2 = setTimeout(() => {
+                          setCurrentUserPage(0);
+                          fetchUsers(0, e.target.value);
+                        }, 500);
+                      }}
+                      onFocus={() => {
+                        if (userSuggestions.length > 0) {
+                          setShowUserSuggestions(true);
+                        }
+                      }}
+                      onBlur={() => {
+                        setTimeout(() => setShowUserSuggestions(false), 200);
+                      }}
+                      autoComplete="off"
+                    />
+                    {/* User Suggestions Dropdown */}
+                    {showUserSuggestions && userSuggestions.length > 0 && (
+                      <div className="user-suggestions absolute left-0 right-0 top-full z-50 mt-1 max-h-64 overflow-y-auto border border-neutral-600 bg-neutral-800 shadow-lg">
+                        {userSuggestions.map((user) => (
+                          <div
+                            key={user.id}
+                            className="flex cursor-pointer items-center space-x-3 px-4 py-3 transition-colors duration-200 hover:bg-neutral-700"
+                            onClick={() => {
+                              setUserSearchFilter(user.username);
+                              setShowUserSuggestions(false);
+                              setUserSuggestions([]);
+                              setCurrentUserPage(0);
+                              fetchUsers(0, user.username);
+                            }}
+                          >
+                            <img
+                              src={
+                                user.profileImage ||
+                                'https://robohash.org/' + user.username
+                              }
+                              alt={`${user.username}'s profile`}
+                              className="h-8 w-8"
+                            />
+                            <div className="flex-1">
+                              <p className="font-medium text-white">
+                                {user.username}
+                              </p>
+                              <p className="text-xs text-gray-400">{user.email || ''}</p>
+                              <p className="text-xs text-gray-500">
+                                {user.points || 0} points • Joined{' '}
+                                {new Date(user.createdAt).toLocaleDateString()}
+                              </p>
+                            </div>
+                            {user.disabled && (
+                              <span className="bg-red-600 px-2 py-1 text-xs text-white">
+                                Disabled
+                              </span>
+                            )}
+                          </div>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+
+                  {/* Users Grid */}
+                  {users.length > 0 ? (
+                    <>
+                      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
+                        {users.map((user) => (
+                          <div
+                            key={user.id}
+                            className="group relative border border-neutral-700/50 bg-neutral-800/80 p-4 transition-all duration-200 hover:border-neutral-600 hover:bg-neutral-800"
+                          >
+                            {/* 3-dot menu - Always visible */}
+                            <button
+                              onClick={() => {
+                                setSelectedUserForManagement(user);
+                                setShowUserManagementPopup(true);
+                                // Pre-fill the username in the main input and focus on reason field
+                                setTimeout(() => {
+                                  const usernameInput =
+                                    document.getElementById('username-input');
+                                  const reasonInput =
+                                    document.getElementById('popupReasonInput');
+                                  if (usernameInput) {
+                                    usernameInput.value = user.username;
+                                  }
+                                  if (reasonInput) {
+                                    reasonInput.focus();
+                                  }
+                                }, 100);
+                              }}
+                              className="absolute right-2 top-2 p-1.5 text-gray-400 transition-all duration-200 hover:bg-neutral-700 hover:text-white"
+                              title="Manage User"
+                            >
+                              <EllipsisVerticalIcon className="h-4 w-4" />
+                            </button>
+
+                            <div className="flex flex-col items-center space-y-3">
+                              <img
+                                src={
+                                  user.profileImage ||
+                                  `https://robohash.org/${user.username}`
+                                }
+                                alt={`${user.username}'s profile`}
+                                className="h-12 w-12 border-2 border-neutral-600"
+                              />
+                              <div className="text-center">
+                                <h3 className="truncate text-sm font-medium text-white">
+                                  {user.username}
+                                </h3>
+                                <p className="truncate text-xs text-gray-400">
+                                  {user.points || 0} points
+                                </p>
+                                <p className="truncate text-xs text-gray-500">
+                                  {new Date(
+                                    user.createdAt
+                                  ).toLocaleDateString()}
+                                </p>
+                                {user.role && user.role !== 'USER' && (
+                                  <span
+                                    className={`mt-1 inline-block px-2 py-0.5 text-xs font-medium ${
+                                      user.role === 'ADMIN'
+                                        ? 'bg-red-600/20 text-red-400'
+                                        : user.role === 'PRO'
+                                        ? 'bg-purple-600/20 text-purple-400'
+                                        : 'bg-gray-600/20 text-gray-400'
+                                    }`}
+                                  >
+                                    {user.role}
+                                  </span>
+                                )}
+                                {user.status && user.status !== 'ACTIVE' && (
+                                  <span
+                                    className={`mt-1 inline-block px-2 py-0.5 text-xs font-medium ${
+                                      user.status === 'DISABLED'
+                                        ? 'bg-red-600/20 text-red-400'
+                                        : user.status === 'DELETED'
+                                        ? 'bg-gray-600/20 text-gray-400'
+                                        : user.status === 'SUSPENDED'
+                                        ? 'bg-orange-600/20 text-orange-400'
+                                        : 'bg-yellow-600/20 text-yellow-400'
+                                    }`}
+                                  >
+                                    {user.status}
+                                  </span>
+                                )}
+                              </div>
+                              <button
+                                onClick={() =>
+                                  window.open(
+                                    `/users/${user.username}`,
+                                    '_blank'
+                                  )
+                                }
+                                className="w-full border border-blue-600/30 bg-blue-600/10 px-3 py-1.5 text-xs font-medium text-blue-400 transition-all duration-200 hover:border-blue-500/50 hover:bg-blue-600/20"
+                              >
+                                View Profile
+                              </button>
+                            </div>
+                          </div>
+                        ))}
+                      </div>
+
+                      {/* Pagination Controls - Bottom */}
+                      <div className="border-t border-neutral-700 pt-4">
+                        <div className="flex items-center justify-between">
+                          {/* Pagination Info */}
+                          <div className="text-sm text-gray-400">
+                            Page {currentUserPage + 1} of {totalUserPages} (
+                            {totalUsers} total users)
+                          </div>
+
+                          {/* Pagination Controls */}
+                          {totalUserPages > 1 && (
+                            <div className="flex items-center space-x-2">
+                              <button
+                                onClick={() => {
+                                  setCurrentUserPage(0);
+                                  fetchUsers(0, userSearchFilter);
+                                }}
+                                disabled={currentUserPage === 0}
+                                className="border border-neutral-600 bg-neutral-700 px-3 py-2 text-sm text-white transition-all duration-200 hover:border-neutral-500 hover:bg-neutral-600 disabled:cursor-not-allowed disabled:opacity-50"
+                              >
+                                First
+                              </button>
+                              <button
+                                onClick={() => {
+                                  const newPage = Math.max(
+                                    0,
+                                    currentUserPage - 1
+                                  );
+                                  setCurrentUserPage(newPage);
+                                  fetchUsers(newPage, userSearchFilter);
+                                }}
+                                disabled={currentUserPage === 0}
+                                className="flex items-center space-x-1 border border-neutral-600 bg-neutral-700 px-3 py-2 text-sm text-white transition-all duration-200 hover:border-neutral-500 hover:bg-neutral-600 disabled:cursor-not-allowed disabled:opacity-50"
+                              >
+                                <ChevronLeftIcon className="h-4 w-4" />
+                                <span>Previous</span>
+                              </button>
+
+                              {/* Page numbers */}
+                              {Array.from(
+                                { length: Math.min(5, totalUserPages) },
+                                (_, i) => {
+                                  const pageStart = Math.max(
+                                    0,
+                                    Math.min(
+                                      currentUserPage - 2,
+                                      totalUserPages - 5
+                                    )
+                                  );
+                                  const pageNum = pageStart + i;
+                                  if (pageNum >= totalUserPages) return null;
+
+                                  return (
+                                    <button
+                                      key={pageNum}
+                                      onClick={() => {
+                                        setCurrentUserPage(pageNum);
+                                        fetchUsers(pageNum, userSearchFilter);
+                                      }}
+                                      className={`border px-3 py-2 text-sm transition-all duration-200 ${
+                                        pageNum === currentUserPage
+                                          ? 'border-blue-600/50 bg-blue-600/20 text-blue-400'
+                                          : 'border-neutral-600 bg-neutral-700 text-white hover:border-neutral-500 hover:bg-neutral-600'
+                                      }`}
+                                    >
+                                      {pageNum + 1}
+                                    </button>
+                                  );
+                                }
+                              )}
+
+                              <button
+                                onClick={() => {
+                                  const newPage = Math.min(
+                                    totalUserPages - 1,
+                                    currentUserPage + 1
+                                  );
+                                  setCurrentUserPage(newPage);
+                                  fetchUsers(newPage, userSearchFilter);
+                                }}
+                                disabled={currentUserPage >= totalUserPages - 1}
+                                className="flex items-center space-x-1 border border-neutral-600 bg-neutral-700 px-3 py-2 text-sm text-white transition-all duration-200 hover:border-neutral-500 hover:bg-neutral-600 disabled:cursor-not-allowed disabled:opacity-50"
+                              >
+                                <span>Next</span>
+                                <ChevronRightIcon className="h-4 w-4" />
+                              </button>
+                              <button
+                                onClick={() => {
+                                  const lastPage = totalUserPages - 1;
+                                  setCurrentUserPage(lastPage);
+                                  fetchUsers(lastPage, userSearchFilter);
+                                }}
+                                disabled={currentUserPage >= totalUserPages - 1}
+                                className="border border-neutral-600 bg-neutral-700 px-3 py-2 text-sm text-white transition-all duration-200 hover:border-neutral-500 hover:bg-neutral-600 disabled:cursor-not-allowed disabled:opacity-50"
+                              >
+                                Last
+                              </button>
+                            </div>
+                          )}
+                        </div>
+                      </div>
+                    </>
+                  ) : (
+                    <div className="border border-neutral-700/50 bg-neutral-800/30 p-8 text-center">
+                      <UserGroupIcon className="mx-auto h-12 w-12 text-gray-500" />
+                      <h3 className="mt-4 text-lg font-medium text-gray-400">
+                        No users found
+                      </h3>
+                      <p className="mt-2 text-sm text-gray-500">
+                        {userSearchFilter
+                          ? 'Try adjusting your search criteria.'
+                          : 'No users available to display.'}
+                      </p>
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
+
+            {activeTab === 'suspended' && (
+              <div className="space-y-6">
+                {/* Search and Controls */}
+                <div className="border border-neutral-700 bg-neutral-800 p-6">
+                  <div className="mb-4 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+                    <h2 className="text-xl font-semibold text-white">
+                      Suspended Accounts
+                    </h2>
+                    <div className="flex items-center space-x-4">
+                      <span className="text-sm text-gray-400">
+                        Page {suspendedAccountsPage + 1} of{' '}
+                        {suspendedAccountsPagination?.totalPages || 1} (
+                        {totalSuspendedAccounts} suspended accounts)
+                      </span>
+                    </div>
+                  </div>
+
+                  {/* Search Bar */}
+                  <div className="relative mb-4">
+                    <div className="absolute inset-y-0 left-0 flex items-center pl-3">
+                      <MagnifyingGlassIcon className="h-5 w-5 text-gray-400" />
+                    </div>
+                    <input
+                      type="text"
+                      placeholder="Search suspended accounts by username, email, or reason..."
+                      className="w-full border border-neutral-600 bg-neutral-700 py-3 pl-10 pr-4 text-white placeholder-gray-400 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+                      value={suspendedSearchFilter}
+                      onChange={(e) => {
+                        const value = e.target.value;
+                        setSuspendedSearchFilter(value);
+                        // Clear previous timeout
+                        clearTimeout(window.suspendedSearchFilterTimeout);
+                        // Debounce search
+                        window.suspendedSearchFilterTimeout = setTimeout(() => {
+                          fetchSuspendedAccounts(0, value);
+                        }, 500);
+                      }}
+                    />
+                  </div>
+
+                  {/* Pagination Controls */}
+                  <div className="flex items-center justify-between">
+                    <div className="flex space-x-2">
+                      <button
+                        onClick={() =>
+                          fetchSuspendedAccounts(
+                            Math.max(0, suspendedAccountsPage - 1),
+                            suspendedSearchFilter
+                          )
+                        }
+                        disabled={suspendedAccountsPage === 0}
+                        className="bg-neutral-700 p-2 text-white transition-colors duration-200 hover:bg-neutral-600 disabled:cursor-not-allowed disabled:opacity-50"
+                      >
+                        <ChevronLeftIcon className="h-4 w-4" />
+                      </button>
+                      <button
+                        onClick={() =>
+                          fetchSuspendedAccounts(
+                            suspendedAccountsPage + 1,
+                            suspendedSearchFilter
+                          )
+                        }
+                        disabled={
+                          suspendedAccountsPage >=
+                          (suspendedAccountsPagination?.totalPages || 1) - 1
+                        }
+                        className="bg-neutral-700 p-2 text-white transition-colors duration-200 hover:bg-neutral-600 disabled:cursor-not-allowed disabled:opacity-50"
+                      >
+                        <ChevronRightIcon className="h-4 w-4" />
+                      </button>
+                    </div>
+                    <button
+                      onClick={() =>
+                        fetchSuspendedAccounts(
+                          suspendedAccountsPage,
+                          suspendedSearchFilter
+                        )
+                      }
+                      className="bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors duration-200 hover:bg-blue-500"
+                    >
+                      Refresh
+                    </button>
+                  </div>
+                </div>
 
- </div>
+                {/* Suspended Accounts List */}
+                <div className="border border-neutral-700 bg-neutral-800 p-6">
+                  <div className="space-y-4">
+                    {suspendedAccounts && suspendedAccounts.length > 0 ? (
+                      suspendedAccounts.map((user) => (
+                        <div
+                          key={user.id}
+                          className="border border-orange-600/30 bg-orange-900/10 p-6 transition-all duration-200 hover:border-orange-500/50"
+                        >
+                          <div className="flex items-start justify-between">
+                            <div className="flex items-center space-x-4">
+                              <img
+                                src={
+                                  user.profilePicture
+                                    ? user.profilePicture
+                                    : `https://robohash.org/${user.username}.png?set=set1&size=150x150`
+                                }
+                                alt={`${user.username}'s profile`}
+                                className="h-16 w-16 object-cover"
+                                onError={(e) => {
+                                  e.target.src = `https://robohash.org/${user.username}.png?set=set1&size=150x150`;
+                                  e.target.onerror = null;
+                                }}
+                              />
+                              <div className="flex-1">
+                                <div className="flex items-center space-x-2">
+                                  <h3 className="text-lg font-semibold text-white">
+                                    {user.username}
+                                  </h3>
+                                  <span className="bg-orange-600/20 px-2 py-1 text-xs font-medium text-orange-400">
+                                    SUSPENDED
+                                  </span>
+                                  <span className="bg-blue-600/20 px-2 py-1 text-xs font-medium text-blue-400">
+                                    {user.accountType || 'USER'}
+                                  </span>
+                                </div>
+                                <p className="text-sm text-gray-400">
+                                  {user.firstName && user.lastName
+                                    ? `${user.firstName} ${user.lastName}`
+                                    : user.firstName ||
+                                      user.lastName ||
+                                      'No name provided'}{' '}
+                                  • {user.email}
+                                </p>
+                                <p className="text-xs text-gray-500">
+                                  Account created:{' '}
+                                  {user.createdAt
+                                    ? new Date(
+                                        user.createdAt
+                                      ).toLocaleDateString()
+                                    : 'Unknown'}
+                                </p>
+                                <p className="text-xs text-gray-500">
+                                  Suspended:{' '}
+                                  {user.suspensionInfo?.suspendedAt
+                                    ? new Date(
+                                        user.suspensionInfo.suspendedAt
+                                      ).toLocaleDateString()
+                                    : user.disableInfo?.disabledAt
+                                    ? new Date(
+                                        user.disableInfo.disabledAt
+                                      ).toLocaleDateString()
+                                    : user.updatedAt
+                                    ? new Date(
+                                        user.updatedAt
+                                      ).toLocaleDateString()
+                                    : 'Unknown'}
+                                </p>
+                                {user.suspensionInfo?.reason && (
+                                  <p className="mt-1 text-xs text-orange-400">
+                                    Reason: {user.suspensionInfo.reason}
+                                  </p>
+                                )}
+                                {!user.suspensionInfo?.reason &&
+                                  user.bio &&
+                                  user.bio.includes('[DISABLED:') && (
+                                    <p className="mt-1 text-xs text-orange-400">
+                                      Reason:{' '}
+                                      {user.bio.match(
+                                        /\[DISABLED:([^\]]+)\]/
+                                      )?.[1] || 'Not specified'}
+                                    </p>
+                                  )}
+                                {!user.suspensionInfo?.reason &&
+                                  (!user.bio ||
+                                    !user.bio.includes('[DISABLED:')) && (
+                                    <p className="mt-1 text-xs text-orange-400">
+                                      Reason: No reason provided
+                                    </p>
+                                  )}
+                              </div>
+                            </div>
+                            <div className="flex flex-col space-y-2">
+                              <button
+                                onClick={() =>
+                                  window.open(
+                                    `/users/${user.username}`,
+                                    '_blank'
+                                  )
+                                }
+                                className="border border-blue-600/30 bg-blue-600/10 px-3 py-2 text-sm font-medium text-blue-400 transition-colors hover:border-blue-500/50 hover:bg-blue-600/20"
+                              >
+                                View Profile
+                              </button>
+                              <button
+                                onClick={async () => {
+                                  const reason = prompt(
+                                    'Enter reason for reactivation (optional):'
+                                  );
+                                  if (reason !== null) {
+                                    const result = await reactivateAccount(
+                                      user.id,
+                                      reason
+                                    );
+                                    if (result.success) {
+                                      showNotification(
+                                        'Account reactivated successfully!',
+                                        'success'
+                                      );
+                                      fetchSuspendedAccounts(
+                                        suspendedAccountsPage,
+                                        suspendedSearchFilter
+                                      );
+                                    } else {
+                                      showNotification(
+                                        `Failed to reactivate account: ${result.error}`,
+                                        'error'
+                                      );
+                                    }
+                                  }
+                                }}
+                                className="border border-green-600/30 bg-green-600/10 px-3 py-2 text-sm font-medium text-green-400 transition-colors hover:border-green-500/50 hover:bg-green-600/20"
+                              >
+                                Reactivate
+                              </button>
+                              <button
+                                onClick={() => {
+                                  setSelectedUserForManagement(user);
+                                  setShowUserManagementPopup(true);
+                                }}
+                                className="border border-neutral-600 bg-neutral-700 px-3 py-2 text-sm font-medium text-white transition-colors hover:border-neutral-500 hover:bg-neutral-600"
+                              >
+                                Edit
+                              </button>
+                            </div>
+                          </div>
 
-</div>
+                          {user.disableInfo && (
+                            <div className="mt-4 border border-neutral-600 bg-neutral-700/50 p-4">
+                              <h4 className="mb-2 font-medium text-orange-400">
+                                Disable Information:
+                              </h4>
+                              <div className="space-y-2 text-sm">
+                                <p className="text-gray-300">
+                                  <strong>Reason:</strong>{' '}
+                                  {user.disableInfo.reason}
+                                </p>
+                                {user.disableInfo.disabledAt && (
+                                  <p className="text-gray-300">
+                                    <strong>Disabled At:</strong>{' '}
+                                    {new Date(
+                                      user.disableInfo.disabledAt
+                                    ).toLocaleString()}
+                                  </p>
+                                )}
+                                <p className="text-gray-300">
+                                  <strong>Self-disabled:</strong>{' '}
+                                  {user.disableInfo.disabled ? 'Yes' : 'No'}
+                                </p>
+                              </div>
+                            </div>
+                          )}
+                        </div>
+                      ))
+                    ) : (
+                      <div className="py-8 text-center">
+                        <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-orange-600/20">
+                          <i className="fas fa-user-slash text-2xl text-orange-400"></i>
+                        </div>
+                        <h3 className="text-lg font-medium text-white">
+                          {suspendedSearchFilter
+                            ? 'No suspended accounts found'
+                            : 'No suspended accounts'}
+                        </h3>
+                        <p className="mt-2 text-gray-400">
+                          {suspendedSearchFilter
+                            ? 'Try adjusting your search criteria.'
+                            : 'All accounts are currently active.'}
+                        </p>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </div>
+            )}
 
+            {activeTab === 'challenges' && (
+              <div className="border border-neutral-700 bg-neutral-800 p-6">
+                <div className="mb-6 flex items-center justify-between">
+                  <h2 className="text-xl font-semibold text-white">
+                    Pending Challenges
+                  </h2>
+                  <div className="flex items-center space-x-3">
+                    <button
+                      onClick={fetchPendingChallenges}
+                      className="flex items-center space-x-2 border border-blue-500/30 bg-blue-600/10 px-3 py-2 text-blue-400 transition-all duration-200 hover:border-blue-500/50 hover:bg-blue-600/20 sm:px-4"
+                    >
+                      <i className="fas fa-sync-alt text-sm"></i>
+                      <span className="hidden sm:inline">Refresh</span>
+                    </button>
+                    {selectedChallenges.length > 0 && (
+                      <button
+                        className="bg-red-600 px-4 py-2 text-white transition-colors duration-200 hover:bg-red-500"
+                        onClick={deleteBulk}
+                      >
+                        <i className="fa fa-trash mr-2"></i>Delete Selected (
+                        {selectedChallenges.length})
+                      </button>
+                    )}
+                  </div>
+                </div>
 
-<div>
-    <h1 className='text-xl  text-white mb-2'>CHALLENGE ACTIONS</h1>
-    <input type="text" placeholder='Enter CHALLENGE ID' className='mb-2 text-white bg-neutral-800 border-none w-full' id = "challengeIdInput"></input>
-   <textarea placeholder='Reason' className='mb-2 text-white bg-neutral-800 border-none w-full' id ="challengeReasonInput"></textarea>
-    <button className='ml-auto px-2 py-1 bg-red-600 text-white mt-2' onClick={handleDeleteChallenge}>Delete Challenge</button>
-    <button className='ml-2 px-2 py-1 bg-yellow-600 text-white mt-2' onClick={handleUnapproveChallenge}>Unapprove Challenge</button>
-    <button className='ml-2 px-2 py-1 bg-red-600 text-white mt-2' onClick={handleResyncLeaderboard}>Resync Leaderboard</button>
-    </div>
-  </div>
-            <div className='grid grid-cols-2 mt-4 gap-x-5 border border-neutral-700 px-4 py-4'>
-              <div className='text-white text-xl'>
-                <h1>Challenges Pending Approval</h1>
-                {selectedChallenges.length > 0 && <button className='ml-auto px-2 py-1 bg-red-600 text-sm text-white mt-2' onClick={deleteBulk}><i className='fa fa-trash mr-2'></i>Delete Selected</button>}
-                <div className='mt-2'>
+                <div className="space-y-3">
                   {pendingChallenges && pendingChallenges.length > 0 ? (
                     pendingChallenges.map((challenge) => (
-                      <div key={challenge.id} onClick={() => {setSelectedId(challenge.id); setChallengeIsOpen(true);}} className='bg-neutral-800 w-full mb-2 border focus:bg-blue-900 focus:border-blue-500 border-neutral-700 hover:bg-neutral-700/50 cursor-pointer px-2 py-1 flex items-center text-sm'>
-                        <input
-                          onClick={(e) => e.stopPropagation()} // Prevent click event propagation
-                          type="checkbox"
-                          checked={selectedChallenges.includes(challenge.id)}
-                          onChange={() => handleSelectChallenge(challenge.id)}
-                          className=""
-                        />
-                        <div className='flex-grow'>
-                          <h1 className='text-lg text-left ml-4'>{challenge.title}</h1>
-                        </div>  
-                        <div className='ml-auto text-right'>
-                          <p className='text-sm'>Submitted by <span className='font-bold'>{challenge.creator}</span></p>
-                          <p className='text-sm'>{new Date(challenge.createdAt).toLocaleString([], { hour: 'numeric', minute: 'numeric', hour12: true, month: 'short', day: 'numeric' })}</p>
+                      <div
+                        key={challenge.id}
+                        className="bg-neutral-700 p-4 transition-colors duration-200 hover:bg-neutral-600"
+                      >
+                        <div className="flex items-center space-x-3">
+                          <input
+                            onClick={(e) => e.stopPropagation()}
+                            type="checkbox"
+                            checked={selectedChallenges.includes(challenge.id)}
+                            onChange={() => handleSelectChallenge(challenge.id)}
+                            className="h-4 w-4 border-neutral-500 bg-neutral-600 text-blue-600 focus:ring-blue-500"
+                          />
+                          <div className="flex-1">
+                            <h3 className="font-semibold text-white">
+                              {challenge.title}
+                            </h3>
+                            <p className="text-sm text-gray-400">
+                              Submitted by{' '}
+                              <span className="font-medium">
+                                {challenge.creator}
+                              </span>
+                            </p>
+                          </div>
+                          <div className="flex items-center space-x-3">
+                            <div className="text-right">
+                              <p className="text-sm text-gray-400">
+                                {new Date(challenge.createdAt).toLocaleString(
+                                  [],
+                                  {
+                                    hour: 'numeric',
+                                    minute: 'numeric',
+                                    hour12: true,
+                                    month: 'short',
+                                    day: 'numeric',
+                                  }
+                                )}
+                              </p>
+                            </div>
+                            <button
+                              onClick={() => {
+                                setSelectedId(challenge.id);
+                                setChallengeIsOpen(true);
+                              }}
+                              className="border border-blue-600/30 bg-blue-600/10 px-3 py-2 text-sm font-medium text-blue-400 transition-colors hover:border-blue-500/50 hover:bg-blue-600/20"
+                            >
+                              Edit
+                            </button>
+                          </div>
                         </div>
                       </div>
                     ))
                   ) : (
-                    <p className='text-red-500'>Nothing to show</p>
+                    <div className="py-8 text-center">
+                      <p className="text-gray-400">No pending challenges</p>
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
+
+            {activeTab === 'reports' && (
+              <div className="space-y-6">
+                {/* Report Statistics */}
+                {reportStats && (
+                  <div className="border border-neutral-700 bg-neutral-800 p-6">
+                    <h2 className="mb-4 text-xl font-semibold text-white">
+                      Report Statistics
+                    </h2>
+                    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-5">
+                      <div className="bg-neutral-700 p-4 text-center">
+                        <p className="text-2xl font-bold text-white">
+                          {reportStats.totalReports || 0}
+                        </p>
+                        <p className="text-gray-400">Total Reports</p>
+                      </div>
+                      <div className="bg-neutral-700 p-4 text-center">
+                        <p className="text-2xl font-bold text-yellow-400">
+                          {reportStats.statusStats?.pending || 0}
+                        </p>
+                        <p className="text-gray-400">Pending</p>
+                      </div>
+                      <div className="bg-neutral-700 p-4 text-center">
+                        <p className="text-2xl font-bold text-blue-400">
+                          {reportStats.statusStats?.in_review || 0}
+                        </p>
+                        <p className="text-gray-400">In Review</p>
+                      </div>
+                      <div className="bg-neutral-700 p-4 text-center">
+                        <p className="text-2xl font-bold text-green-400">
+                          {reportStats.statusStats?.resolved || 0}
+                        </p>
+                        <p className="text-gray-400">Resolved</p>
+                      </div>
+                      <div className="bg-neutral-700 p-4 text-center">
+                        <p className="text-2xl font-bold text-white">
+                          {reportStats.recentCount || 0}
+                        </p>
+                        <p className="text-gray-400">This Week</p>
+                      </div>
+                    </div>
+                  </div>
+                )}
+
+                {/* Report Filters */}
+                <div className="border border-neutral-700 bg-neutral-800 p-6">
+                  <h3 className="mb-4 text-lg font-semibold text-white">
+                    Filter Reports
+                  </h3>
+                  <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
+                    <select
+                      value={reportFilters.type}
+                      onChange={(e) => {
+                        const newFilters = {
+                          ...reportFilters,
+                          type: e.target.value,
+                          page: 0,
+                        };
+                        setReportFilters(newFilters);
+                        fetchReports(newFilters);
+                      }}
+                      className="border border-neutral-600 bg-neutral-700 px-4 py-2 text-white focus:border-blue-500 focus:outline-none"
+                    >
+                      <option value="">All Types</option>
+                      <option value="USER">User Reports</option>
+                      <option value="CHALLENGE">Challenge Issues</option>
+                      <option value="COMMENT">Comment Reports</option>
+                      <option value="BUG">Bug Reports</option>
+                      <option value="FEATURE">Feature Requests</option>
+                    </select>
+
+                    <select
+                      value={reportFilters.status}
+                      onChange={(e) => {
+                        const newFilters = {
+                          ...reportFilters,
+                          status: e.target.value,
+                          page: 0,
+                        };
+                        setReportFilters(newFilters);
+                        fetchReports(newFilters);
+                      }}
+                      className="border border-neutral-600 bg-neutral-700 px-4 py-2 text-white focus:border-blue-500 focus:outline-none"
+                    >
+                      <option value="">All Statuses</option>
+                      <option value="PENDING">Pending</option>
+                      <option value="IN_REVIEW">In Review</option>
+                      <option value="RESOLVED">Resolved</option>
+                      <option value="REJECTED">Rejected</option>
+                    </select>
+
+                    <button
+                      onClick={() => fetchReports(reportFilters)}
+                      className="bg-blue-600 px-4 py-2 text-white transition-colors duration-200 hover:bg-blue-500"
+                    >
+                      <i className="fas fa-search mr-2"></i>
+                      Search
+                    </button>
+                  </div>
+                </div>
+
+                {/* All Reports */}
+                <div className="border border-neutral-700 bg-neutral-800 p-6">
+                  <div className="mb-6 flex items-center justify-between">
+                    <h2 className="text-xl font-semibold text-white">
+                      All Reports
+                    </h2>
+                    <button
+                      onClick={() => {
+                        if (activeHistoryTab === 'suspended') {
+                          fetchGroupedSuspensions(groupedSuspensionsPage, true); // forceRefresh = true
+                        } else if (activeHistoryTab === 'warnings') {
+                          fetchGroupedWarnings(groupedWarningsPage, true); // forceRefresh = true
+                        }
+                      }}
+                      disabled={groupedWarningsLoading || groupedSuspensionsLoading}
+                      className="flex items-center gap-2 bg-blue-600 px-4 py-2 text-white transition-colors hover:bg-blue-700 disabled:opacity-50"
+                    >
+                      <ArrowPathIcon className="h-4 w-4" />
+                      <span className="hidden sm:inline">Refresh</span>
+                    </button>
+                  </div>
+
+                  {reports.length > 0 ? (
+                    <div className="space-y-4">
+                      {reports.map((report) => {
+                        const getStatusColor = (status) => {
+                          switch (status) {
+                            case 'PENDING':
+                              return 'bg-yellow-900/20 text-yellow-400 border-yellow-600/20';
+                            case 'IN_REVIEW':
+                              return 'bg-blue-900/20 text-blue-400 border-blue-600/20';
+                            case 'RESOLVED':
+                              return 'bg-green-900/20 text-green-400 border-green-600/20';
+                            case 'REJECTED':
+                              return 'bg-red-900/20 text-red-400 border-red-600/20';
+                            default:
+                              return 'bg-gray-900/20 text-gray-400 border-gray-600/20';
+                          }
+                        };
+
+                        return (
+                          <div
+                            key={report.id}
+                            className="border border-neutral-600 bg-neutral-700/50 p-6"
+                          >
+                            <div className="flex items-start justify-between">
+                              <div className="flex-1">
+                                <div className="flex items-center space-x-3">
+                                  <span
+                                    className={`inline-flex border px-3 py-1 text-sm font-medium ${getStatusColor(
+                                      report.status
+                                    )}`}
+                                  >
+                                    {report.status}
+                                  </span>
+                                  <span className="text-sm text-gray-400">
+                                    {report.type} Report by{' '}
+                                    {report.user?.username || 'Unknown'}
+                                  </span>
+                                </div>
+
+                                <p className="mt-2 text-white">{report.desc}</p>
+
+                                {report.metadata &&
+                                  Object.keys(report.metadata).length > 0 && (
+                                    <div className="mt-3 text-sm text-gray-400">
+                                      {report.metadata.challengeId && (
+                                        <p>
+                                          Challenge ID:{' '}
+                                          {report.metadata.challengeId}
+                                        </p>
+                                      )}
+                                      {report.metadata.commentId && (
+                                        <p>
+                                          Comment ID:{' '}
+                                          {report.metadata.commentId}
+                                        </p>
+                                      )}
+                                      {report.metadata.reportedUserId && (
+                                        <p>
+                                          Reported User:{' '}
+                                          {report.metadata.reportedUserId}
+                                        </p>
+                                      )}
+                                    </div>
+                                  )}
+
+                                {report.resolution && (
+                                  <div className="mt-3 bg-neutral-600/30 p-3">
+                                    <p className="text-sm text-gray-300">
+                                      <strong>Resolution:</strong>{' '}
+                                      {report.resolution}
+                                    </p>
+                                  </div>
+                                )}
+                              </div>
+
+                              <div className="ml-4 flex flex-col space-y-2">
+                                {report.status === 'PENDING' && (
+                                  <>
+                                    <button
+                                      onClick={() =>
+                                        handleUpdateReportStatus(
+                                          report.id,
+                                          'IN_REVIEW'
+                                        )
+                                      }
+                                      className="bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors duration-200 hover:bg-blue-500"
+                                    >
+                                      Start Review
+                                    </button>
+                                    <button
+                                      onClick={() =>
+                                        handleUpdateReportStatus(
+                                          report.id,
+                                          'RESOLVED',
+                                          'Resolved by moderator'
+                                        )
+                                      }
+                                      className="bg-green-600 px-4 py-2 text-sm font-medium text-white transition-colors duration-200 hover:bg-green-500"
+                                    >
+                                      Mark Resolved
+                                    </button>
+                                    <button
+                                      onClick={() =>
+                                        handleUpdateReportStatus(
+                                          report.id,
+                                          'REJECTED',
+                                          'Invalid report'
+                                        )
+                                      }
+                                      className="bg-red-600 px-4 py-2 text-sm font-medium text-white transition-colors duration-200 hover:bg-red-500"
+                                    >
+                                      Reject
+                                    </button>
+                                  </>
+                                )}
+                                {report.status === 'IN_REVIEW' && (
+                                  <>
+                                    <button
+                                      onClick={() =>
+                                        handleUpdateReportStatus(
+                                          report.id,
+                                          'RESOLVED',
+                                          'Resolved after review'
+                                        )
+                                      }
+                                      className="bg-green-600 px-4 py-2 text-sm font-medium text-white transition-colors duration-200 hover:bg-green-500"
+                                    >
+                                      Mark Resolved
+                                    </button>
+                                    <button
+                                      onClick={() =>
+                                        handleUpdateReportStatus(
+                                          report.id,
+                                          'REJECTED',
+                                          'Rejected after review'
+                                        )
+                                      }
+                                      className="bg-red-600 px-4 py-2 text-sm font-medium text-white transition-colors duration-200 hover:bg-red-500"
+                                    >
+                                      Reject
+                                    </button>
+                                  </>
+                                )}
+                              </div>
+                            </div>
+
+                            <div className="mt-4 flex justify-between text-sm text-gray-400">
+                              <span>
+                                Submitted:{' '}
+                                {new Date(
+                                  report.createdAt
+                                ).toLocaleDateString()}
+                              </span>
+                              {report.resolvedAt && (
+                                <span>
+                                  Resolved:{' '}
+                                  {new Date(
+                                    report.resolvedAt
+                                  ).toLocaleDateString()}
+                                </span>
+                              )}
+                            </div>
+                          </div>
+                        );
+                      })}
+                    </div>
+                  ) : (
+                    <div className="py-8 text-center">
+                      <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-neutral-700">
+                        <i className="fas fa-inbox text-2xl text-gray-400"></i>
+                      </div>
+                      <h3 className="text-lg font-medium text-white">
+                        No reports found
+                      </h3>
+                      <p className="mt-2 text-gray-400">
+                        No reports match your current filters.
+                      </p>
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
+
+            {activeTab === 'deletions' && (
+              <div className="space-y-6">
+                {/* Deletion Statistics */}
+                {deletionStats && (
+                  <div className="border border-neutral-700 bg-neutral-800 p-6">
+                    <h2 className="mb-4 text-xl font-semibold text-white">
+                      Account Deletion Statistics
+                    </h2>
+                    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+                      <div className="bg-neutral-700 p-4 text-center">
+                        <p className="text-2xl font-bold text-white">
+                          {deletionStats.stats?.pending || 0}
+                        </p>
+                        <p className="text-gray-400">Pending</p>
+                      </div>
+                      <div className="bg-neutral-700 p-4 text-center">
+                        <p className="text-2xl font-bold text-white">
+                          {deletionStats.stats?.processing || 0}
+                        </p>
+                        <p className="text-gray-400">Processing</p>
+                      </div>
+                      <div className="bg-neutral-700 p-4 text-center">
+                        <p className="text-2xl font-bold text-white">
+                          {deletionStats.stats?.completed || 0}
+                        </p>
+                        <p className="text-gray-400">Completed</p>
+                      </div>
+                      <div className="bg-neutral-700 p-4 text-center">
+                        <p className="text-2xl font-bold text-white">
+                          {deletionStats.stats?.cancelled || 0}
+                        </p>
+                        <p className="text-gray-400">Cancelled</p>
+                      </div>
+                    </div>
+                  </div>
+                )}
+
+                {/* Search and Controls */}
+                <div className="border border-neutral-700 bg-neutral-800 p-6">
+                  <div className="mb-4 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+                    <h2 className="text-xl font-semibold text-white">
+                      Account Deletions
+                    </h2>
+                    <div className="flex items-center space-x-4">
+                      <span className="text-sm text-gray-400">
+                        {pendingDeletions.length} deletion requests
+                      </span>
+                    </div>
+                  </div>
+
+                  {/* Search Bar */}
+                  <div className="relative mb-4">
+                    <div className="absolute inset-y-0 left-0 flex items-center pl-3">
+                      <MagnifyingGlassIcon className="h-5 w-5 text-gray-400" />
+                    </div>
+                    <input
+                      type="text"
+                      placeholder="Search deletion requests by username, email, or reason..."
+                      className="w-full border border-neutral-600 bg-neutral-700 py-3 pl-10 pr-4 text-white placeholder-gray-400 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+                      value={deletionsSearchFilter}
+                      onChange={(e) => {
+                        const value = e.target.value;
+                        setDeletionsSearchFilter(value);
+                        // Clear previous timeout
+                        clearTimeout(window.deletionsSearchFilterTimeout);
+                        // Debounce search
+                        window.deletionsSearchFilterTimeout = setTimeout(() => {
+                          fetchPendingDeletions(value);
+                        }, 500);
+                      }}
+                    />
+                  </div>
+
+                  <div className="flex items-center justify-between">
+                    <button
+                      onClick={() =>
+                        fetchPendingDeletions(deletionsSearchFilter)
+                      }
+                      className="bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors duration-200 hover:bg-blue-500"
+                    >
+                      Refresh
+                    </button>
+                  </div>
+                </div>
+
+                {/* Pending Deletions */}
+                <div className="border border-neutral-700 bg-neutral-800 p-6">
+                  <h2 className="mb-6 text-xl font-semibold text-white">
+                    Deletion Requests
+                  </h2>
+
+                  {pendingDeletions.length > 0 ? (
+                    <div className="space-y-4">
+                      {pendingDeletions.map((deletion) => (
+                        <div
+                          key={deletion.id}
+                          className="border border-neutral-600 bg-neutral-700/50 p-6"
+                        >
+                          <div className="flex items-start justify-between">
+                            <div className="flex-1">
+                              <div className="flex items-center space-x-3">
+                                <div className="flex h-12 w-12 items-center justify-center bg-red-600/20">
+                                  <i className="fas fa-user-times text-xl text-red-400"></i>
+                                </div>
+                                <div>
+                                  <h3 className="font-semibold text-white">
+                                    {deletion.user?.username || 'Unknown User'}
+                                  </h3>
+                                  <p className="text-sm text-gray-400">
+                                    Account created:{' '}
+                                    {new Date(
+                                      deletion.user?.createdAt
+                                    ).toLocaleDateString()}
+                                  </p>
+                                </div>
+                              </div>
+
+                              <div className="mt-4">
+                                <h4 className="text-sm font-medium text-gray-300">
+                                  Reason for leaving:
+                                </h4>
+                                <p className="mt-1 text-white">
+                                  {deletion.reason}
+                                </p>
+                              </div>
+
+                              <div className="mt-4 grid grid-cols-2 gap-4 text-sm">
+                                <div>
+                                  <span className="text-gray-400">
+                                    Requested:
+                                  </span>
+                                  <span className="ml-2 text-white">
+                                    {new Date(
+                                      deletion.createdAt
+                                    ).toLocaleDateString()}
+                                  </span>
+                                </div>
+                                <div>
+                                  <span className="text-gray-400">
+                                    Scheduled for:
+                                  </span>
+                                  <span className="ml-2 text-white">
+                                    {deletion.scheduledFor
+                                      ? new Date(
+                                          deletion.scheduledFor
+                                        ).toLocaleDateString()
+                                      : 'Date unavailable'}
+                                  </span>
+                                </div>
+                              </div>
+                            </div>
+
+                            <div className="ml-4 flex flex-col space-y-2">
+                              <button
+                                onClick={() =>
+                                  handleProcessDeletion(deletion.id)
+                                }
+                                className="border border-red-600/30 bg-red-600/10 px-4 py-2 text-sm font-medium text-red-400 transition-colors duration-200 hover:border-red-500/50 hover:bg-red-600/20"
+                              >
+                                <i className="fas fa-trash mr-1"></i>
+                                Auto-Process Deletion
+                              </button>
+                              <button
+                                onClick={() =>
+                                  window.open(
+                                    `/users/${deletion.user?.username}`,
+                                    '_blank'
+                                  )
+                                }
+                                className="border border-neutral-600 bg-neutral-700 px-4 py-2 text-sm font-medium text-white transition-colors duration-200 hover:border-neutral-500 hover:bg-neutral-600"
+                              >
+                                <i className="fas fa-user mr-1"></i>
+                                View Profile
+                              </button>
+                              <button
+                                onClick={() =>
+                                  handleViewDeletionDetails(deletion)
+                                }
+                                className="border border-blue-600/30 bg-blue-600/10 px-4 py-2 text-sm font-medium text-blue-400 transition-colors duration-200 hover:border-blue-500/50 hover:bg-blue-600/20"
+                              >
+                                <i className="fas fa-info-circle mr-1"></i>
+                                View Details
+                              </button>
+                            </div>
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  ) : (
+                    <div className="py-8 text-center">
+                      <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center bg-neutral-700">
+                        <i className="fas fa-check-circle text-2xl text-green-400"></i>
+                      </div>
+                      <h3 className="text-lg font-medium text-white">
+                        No pending deletions
+                      </h3>
+                      <p className="mt-2 text-gray-400">
+                        All account deletion requests have been processed.
+                      </p>
+                    </div>
                   )}
                 </div>
               </div>
-              <div className='text-white text-xl'>
-                <h1>Submitted Reports</h1>
-
-              <div className='mt-2'>
-                {reports && reports.length > 0 ? (
-                  reports.map((report) => (
-                    <div 
-                      key={report.id} 
-                      className={`w-full mb-2 border focus:bg-blue-900 focus:border-blue-500 border-neutral-700 hover:bg-neutral-700/50 cursor-pointer px-2 py-1 flex items-center text-sm ${
-                        JSON.parse(report.metadata).severity === 'HIGH' ? 'bg-red-900/20' :
-                        JSON.parse(report.metadata).severity === 'MEDIUM' ? 'bg-yellow-900/20' :
-                        JSON.parse(report.metadata).severity === 'LOW' ? 'bg-blue-900/20' :
-                        'bg-neutral-800'
+            )}
+
+            {activeTab === 'accounts' && (
+              <div className="space-y-6">
+                {/* Accounts Tab Navigation */}
+                <div className="border-b border-neutral-700">
+                  <nav className="flex flex-wrap space-x-2 sm:space-x-8">
+                    <button
+                      onClick={() => {
+                        setActiveAccountsTab('suspended');
+                        fetchSuspendedAccounts(
+                          suspendedAccountsPage,
+                          suspendedSearchFilter
+                        );
+                      }}
+                      className={`border-b-2 px-1 py-2 text-xs font-medium transition-colors duration-200 sm:py-4 sm:text-sm ${
+                        activeAccountsTab === 'suspended'
+                          ? 'border-blue-500 text-blue-400'
+                          : 'border-transparent text-gray-400 hover:text-gray-300'
+                      }`}
+                    >
+                      Suspended
+                      <span
+                        className={`ml-1 px-1 py-0.5 text-xs font-medium sm:ml-2 sm:px-2 sm:py-1 ${
+                          totalSuspendedAccounts > 0
+                            ? 'bg-red-600/20 text-red-400'
+                            : 'bg-gray-600/20 text-gray-400'
+                        }`}
+                      >
+                        {totalSuspendedAccounts || 0}
+                      </span>
+                    </button>
+                    <button
+                      onClick={() => {
+                        setActiveAccountsTab('disabled');
+                        // No data to refresh for disabled tab currently
+                      }}
+                      className={`border-b-2 px-1 py-2 text-xs font-medium transition-colors duration-200 sm:py-4 sm:text-sm ${
+                        activeAccountsTab === 'disabled'
+                          ? 'border-blue-500 text-blue-400'
+                          : 'border-transparent text-gray-400 hover:text-gray-300'
                       }`}
+                    >
+                      Disabled
+                      <span className="ml-1 bg-gray-600/20 px-1 py-0.5 text-xs font-medium text-gray-400 sm:ml-2 sm:px-2 sm:py-1">
+                        0
+                      </span>
+                    </button>
+                    <button
                       onClick={() => {
-                        setSelectedReport(report);
-                        setReportIsOpen(true);
+                        setActiveAccountsTab('deleted');
+                        fetchPendingDeletions(deletionsSearchFilter);
                       }}
+                      className={`border-b-2 px-1 py-2 text-xs font-medium transition-colors duration-200 sm:py-4 sm:text-sm ${
+                        activeAccountsTab === 'deleted'
+                          ? 'border-blue-500 text-blue-400'
+                          : 'border-transparent text-gray-400 hover:text-gray-300'
+                      }`}
                     >
-                      <div className='flex-grow'>
-                        <h1 className='text-sm text-left ml-4'>
-                          {report.type} REPORT
-                          {report.metadata?.severity && (
-                            <span className={`ml-2 px-2 py-0.5 rounded text-xs ${
-                              report.metadata.severity === 'HIGH' ? 'bg-red-600 text-white' :
-                              report.metadata.severity === 'MEDIUM' ? 'bg-yellow-600 text-white' :
-                              report.metadata.severity === 'LOW' ? 'bg-blue-600 text-white' :
-                              'bg-neutral-600 text-white'
-                            }`}>
-                              {report.metadata.severity}
+                      Deletion Requests
+                      <span
+                        className={`ml-1 px-1 py-0.5 text-xs font-medium sm:ml-2 sm:px-2 sm:py-1 ${
+                          pendingDeletions.length > 0
+                            ? 'bg-orange-600/20 text-orange-400'
+                            : 'bg-gray-600/20 text-gray-400'
+                        }`}
+                      >
+                        {pendingDeletions.length || 0}
+                      </span>
+                    </button>
+                  </nav>
+                </div>
+
+                {/* Suspended Accounts Content */}
+                {activeAccountsTab === 'suspended' && (
+                  <div className="space-y-6">
+                    {/* Search and Controls */}
+                    <div className="border border-neutral-700 bg-neutral-800 p-6">
+                      <div className="mb-4 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+                        <h2 className="text-xl font-semibold text-white">
+                          Suspended Accounts
+                        </h2>
+                        <div className="flex items-center space-x-4">
+                          <span className="text-sm text-gray-400">
+                            Page {suspendedAccountsPage + 1} of{' '}
+                            {suspendedAccountsPagination?.totalPages || 1} (
+                            {totalSuspendedAccounts} suspended accounts)
+                          </span>
+                        </div>
+                      </div>
+
+                      {/* Search Bar */}
+                      <div className="relative mb-4">
+                        <div className="absolute inset-y-0 left-0 flex items-center pl-3">
+                          <MagnifyingGlassIcon className="h-5 w-5 text-gray-400" />
+                        </div>
+                        <input
+                          type="text"
+                          placeholder="Search suspended accounts by username, email, or reason..."
+                          className="w-full border border-neutral-600 bg-neutral-700 py-3 pl-10 pr-4 text-white placeholder-gray-400 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+                          value={suspendedSearchFilter}
+                          onChange={(e) => {
+                            const value = e.target.value;
+                            setSuspendedSearchFilter(value);
+                            // Clear previous timeout
+                            clearTimeout(window.suspendedSearchFilterTimeout);
+                            // Debounce search
+                            window.suspendedSearchFilterTimeout = setTimeout(
+                              () => {
+                                fetchSuspendedAccounts(0, value);
+                              },
+                              500
+                            );
+                          }}
+                        />
+                      </div>
+
+                      {/* Pagination */}
+                      {suspendedAccountsPagination &&
+                        suspendedAccountsPagination.totalPages > 1 && (
+                          <div className="flex items-center justify-between">
+                            <button
+                              onClick={() =>
+                                fetchSuspendedAccounts(
+                                  Math.max(0, suspendedAccountsPage - 1),
+                                  suspendedSearchFilter
+                                )
+                              }
+                              disabled={suspendedAccountsPage === 0}
+                              className="bg-neutral-700 px-4 py-2 text-sm text-white transition-colors duration-200 hover:bg-neutral-600 disabled:cursor-not-allowed disabled:opacity-50"
+                            >
+                              Previous
+                            </button>
+                            <span className="text-sm text-gray-400">
+                              Page {suspendedAccountsPage + 1} of{' '}
+                              {suspendedAccountsPagination.totalPages}
                             </span>
-                          )}
-                        </h1>
-                      </div>  
-                      <div className='ml-auto text-right'>
-                        <p className='text-sm'>Reported by <span className='font-bold'>{report.userId}</span></p>
-                        <p className='text-sm'>{new Date(report.createdAt).toLocaleString([], { hour: 'numeric', minute: 'numeric', hour12: true, month: 'short', day: 'numeric' })}</p>
+                            <button
+                              onClick={() =>
+                                fetchSuspendedAccounts(
+                                  Math.min(
+                                    suspendedAccountsPagination.totalPages - 1,
+                                    suspendedAccountsPage + 1
+                                  ),
+                                  suspendedSearchFilter
+                                )
+                              }
+                              disabled={
+                                suspendedAccountsPage >=
+                                suspendedAccountsPagination.totalPages - 1
+                              }
+                              className="bg-neutral-700 px-4 py-2 text-sm text-white transition-colors duration-200 hover:bg-neutral-600 disabled:cursor-not-allowed disabled:opacity-50"
+                            >
+                              Next
+                            </button>
+                          </div>
+                        )}
+                    </div>
+
+                    {/* Suspended Accounts List */}
+                    <div className="border border-neutral-700 bg-neutral-800 p-6">
+                      <h2 className="mb-6 text-xl font-semibold text-white">
+                        Suspended Users ({totalSuspendedAccounts})
+                      </h2>
+
+                      {suspendedAccounts.length > 0 ? (
+                        <div className="space-y-4">
+                          {suspendedAccounts.map((user) => (
+                            <div
+                              key={user.id}
+                              className="border border-orange-600/30 bg-orange-900/10 p-6 transition-all duration-200 hover:border-orange-500/50"
+                            >
+                              <div className="flex items-start justify-between">
+                                <div className="flex items-center space-x-4">
+                                  <div className="h-16 w-16 overflow-hidden">
+                                    {user.profileImage &&
+                                    user.profileImage.trim() !== '' ? (
+                                      <img
+                                        src={user.profileImage}
+                                        alt={`${user.username}'s profile`}
+                                        className="h-full w-full object-cover"
+                                        onError={(e) => {
+                                          e.target.style.display = 'none';
+                                          e.target.nextSibling.style.display =
+                                            'flex';
+                                        }}
+                                      />
+                                    ) : null}
+                                    <div
+                                      className={`flex h-full w-full items-center justify-center text-lg font-bold text-white ${
+                                        user.profileImage &&
+                                        user.profileImage.trim() !== ''
+                                          ? 'hidden'
+                                          : 'flex'
+                                      }`}
+                                      style={{
+                                        backgroundColor: '#ff6b35',
+                                        backgroundImage: `url(https://robohash.org/${user.username}.png?set=set1&size=150x150)`,
+                                        backgroundSize: 'cover',
+                                        backgroundPosition: 'center',
+                                      }}
+                                    >
+                                      {user.username
+                                        .substring(0, 2)
+                                        .toUpperCase()}
+                                    </div>
+                                  </div>
+                                  <div className="flex-1">
+                                    <div className="flex items-center space-x-2">
+                                      <h3 className="text-lg font-semibold text-white">
+                                        {user.username}
+                                      </h3>
+                                      <span className="bg-orange-600/20 px-2 py-1 text-xs font-medium text-orange-400">
+                                        SUSPENDED
+                                      </span>
+                                      <span className="bg-blue-600/20 px-2 py-1 text-xs font-medium text-blue-400">
+                                        {user.accountType || 'USER'}
+                                      </span>
+                                    </div>
+                                    <p className="text-sm text-gray-400">
+                                      {user.firstName && user.lastName
+                                        ? `${user.firstName} ${user.lastName}`
+                                        : user.firstName ||
+                                          user.lastName ||
+                                          'No name provided'}{' '}
+                                      • {user.email}
+                                    </p>
+                                    <p className="text-xs text-gray-500">
+                                      Account created:{' '}
+                                      {user.createdAt
+                                        ? new Date(
+                                            user.createdAt
+                                          ).toLocaleDateString()
+                                        : 'Unknown'}
+                                    </p>
+                                    <p className="text-xs text-gray-500">
+                                      Suspended:{' '}
+                                      {user.suspensionInfo?.suspendedAt
+                                        ? new Date(
+                                            user.suspensionInfo.suspendedAt
+                                          ).toLocaleDateString()
+                                        : user.disableInfo?.disabledAt
+                                        ? new Date(
+                                            user.disableInfo.disabledAt
+                                          ).toLocaleDateString()
+                                        : user.updatedAt
+                                        ? new Date(
+                                            user.updatedAt
+                                          ).toLocaleDateString()
+                                        : 'Unknown'}
+                                    </p>
+                                    {user.suspensionInfo?.reason && (
+                                      <p className="mt-1 text-xs text-orange-400">
+                                        Reason: {user.suspensionInfo.reason}
+                                      </p>
+                                    )}
+                                    {!user.suspensionInfo?.reason &&
+                                      user.bio &&
+                                      user.bio.includes('[DISABLED:') && (
+                                        <p className="mt-1 text-xs text-orange-400">
+                                          Reason:{' '}
+                                          {user.bio.match(
+                                            /\[DISABLED:([^\]]+)\]/
+                                          )?.[1] || 'Not specified'}
+                                        </p>
+                                      )}
+                                    {!user.suspensionInfo?.reason &&
+                                      (!user.bio ||
+                                        !user.bio.includes('[DISABLED:')) && (
+                                        <p className="mt-1 text-xs text-orange-400">
+                                          Reason: No reason provided
+                                        </p>
+                                      )}
+                                  </div>
+                                </div>
+                                <div className="flex flex-col space-y-2">
+                                  <button
+                                    onClick={() =>
+                                      window.open(
+                                        `/users/${user.username}`,
+                                        '_blank'
+                                      )
+                                    }
+                                    className="border border-blue-600/30 bg-blue-600/10 px-3 py-2 text-sm font-medium text-blue-400 transition-colors hover:border-blue-500/50 hover:bg-blue-600/20"
+                                  >
+                                    View Profile
+                                  </button>
+                                  <button
+                                    onClick={() => handleReactivateClick(user)}
+                                    className="border border-green-600/30 bg-green-600/10 px-3 py-2 text-sm font-medium text-green-400 transition-colors hover:border-green-500/50 hover:bg-green-600/20"
+                                  >
+                                    Reactivate
+                                  </button>
+                                  <button
+                                    onClick={() => {
+                                      setSelectedUserForManagement(user);
+                                      setShowUserManagementPopup(true);
+                                    }}
+                                    className="border border-neutral-600 bg-neutral-700 px-3 py-2 text-sm font-medium text-white transition-colors hover:border-neutral-500 hover:bg-neutral-600"
+                                  >
+                                    Edit
+                                  </button>
+                                </div>
+                              </div>
+
+                              {user.disableInfo && (
+                                <div className="mt-4 border border-neutral-600 bg-neutral-700/50 p-4">
+                                  <h4 className="mb-2 font-medium text-orange-400">
+                                    Disable Information:
+                                  </h4>
+                                  <div className="space-y-2 text-sm">
+                                    <p className="text-gray-300">
+                                      <strong>Reason:</strong>{' '}
+                                      {user.disableInfo.reason}
+                                    </p>
+                                    {user.disableInfo.disabledAt && (
+                                      <p className="text-gray-300">
+                                        <strong>Disabled At:</strong>{' '}
+                                        {new Date(
+                                          user.disableInfo.disabledAt
+                                        ).toLocaleString()}
+                                      </p>
+                                    )}
+                                    <p className="text-gray-300">
+                                      <strong>Self-disabled:</strong>{' '}
+                                      {user.disableInfo.disabled ? 'Yes' : 'No'}
+                                    </p>
+                                  </div>
+                                </div>
+                              )}
+                            </div>
+                          ))}
+                        </div>
+                      ) : (
+                        <div className="py-8 text-center">
+                          <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center bg-neutral-700">
+                            <i className="fas fa-user-check text-2xl text-green-400"></i>
+                          </div>
+                          <h3 className="text-lg font-medium text-white">
+                            No suspended accounts
+                          </h3>
+                          <p className="mt-2 text-gray-400">
+                            All user accounts are in good standing.
+                          </p>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                )}
+
+                {/* Disabled Accounts Content */}
+                {activeAccountsTab === 'disabled' && (
+                  <div className="space-y-6">
+                    <div className="border border-neutral-700 bg-neutral-800 p-6">
+                      <h2 className="mb-6 text-xl font-semibold text-white">
+                        Disabled Accounts
+                      </h2>
+                      <div className="py-8 text-center">
+                        <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center bg-neutral-700">
+                          <i className="fas fa-user-slash text-2xl text-gray-400"></i>
+                        </div>
+                        <h3 className="text-lg font-medium text-white">
+                          No disabled accounts
+                        </h3>
+                        <p className="mt-2 text-gray-400">
+                          This feature is not yet implemented.
+                        </p>
                       </div>
                     </div>
-                  ))
-                ) : (
-                  <p className='text-red-500'>No reports to show</p>
+                  </div>
                 )}
-              </div>
-              </div>
-            </div>
 
-            <div className='mt-4 grid  gap-x-5 border border-neutral-700 px-4 py-4'>
-                <h1 className='text-xl  text-white mb-2'>Platform Stats</h1>
-                {stats ? (
-                  <div className='text-white'>
-                    <div className='grid grid-cols-3 gap-4'>
-                      <div className='bg-neutral-800 p-4 rounded-lg text-center'>
-                        <p className='text-white text-xl font-bold'>{stats.userCount}</p>
-                        <p className='text-gray-400'>Total Users</p>
+                {/* Deletion Requests Content */}
+                {activeAccountsTab === 'deleted' && (
+                  <div className="space-y-6">
+                    {/* Deletion Statistics */}
+                    {deletionStats && (
+                      <div className="border border-neutral-700 bg-neutral-800 p-6">
+                        <h2 className="mb-4 text-xl font-semibold text-white">
+                          Account Deletion Statistics
+                        </h2>
+                        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+                          <div className="bg-neutral-700 p-4 text-center">
+                            <p className="text-2xl font-bold text-white">
+                              {deletionStats.stats?.pending || 0}
+                            </p>
+                            <p className="text-gray-400">Pending</p>
+                          </div>
+                          <div className="bg-neutral-700 p-4 text-center">
+                            <p className="text-2xl font-bold text-white">
+                              {deletionStats.stats?.processing || 0}
+                            </p>
+                            <p className="text-gray-400">Processing</p>
+                          </div>
+                          <div className="bg-neutral-700 p-4 text-center">
+                            <p className="text-2xl font-bold text-white">
+                              {deletionStats.stats?.completed || 0}
+                            </p>
+                            <p className="text-gray-400">Completed</p>
+                          </div>
+                          <div className="bg-neutral-700 p-4 text-center">
+                            <p className="text-2xl font-bold text-white">
+                              {deletionStats.stats?.cancelled || 0}
+                            </p>
+                            <p className="text-gray-400">Cancelled</p>
+                          </div>
+                        </div>
                       </div>
-                      <div className='bg-neutral-800 p-4 rounded-lg text-center'>
-                        <p className='text-white text-xl font-bold'>{stats.challengeCount}</p>
-                        <p className='text-gray-400'>Total Challenges</p>
+                    )}
+
+                    {/* Search and Controls */}
+                    <div className="border border-neutral-700 bg-neutral-800 p-6">
+                      <div className="mb-4 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+                        <h2 className="text-xl font-semibold text-white">
+                          Account Deletions
+                        </h2>
+                        <div className="flex items-center space-x-4">
+                          <span className="text-sm text-gray-400">
+                            {pendingDeletions.length} deletion requests
+                          </span>
+                        </div>
                       </div>
-                      <div className='bg-neutral-800 p-4 rounded-lg text-center'>
-                        <p className='text-white text-xl font-bold'>{stats.verifiedChallengeCount}</p>
-                        <p className='text-gray-400'>Verified Challenges</p>
+
+                      {/* Search Bar */}
+                      <div className="relative mb-4">
+                        <div className="absolute inset-y-0 left-0 flex items-center pl-3">
+                          <MagnifyingGlassIcon className="h-5 w-5 text-gray-400" />
+                        </div>
+                        <input
+                          type="text"
+                          placeholder="Search deletion requests by username, email, or reason..."
+                          className="w-full border border-neutral-600 bg-neutral-700 py-3 pl-10 pr-4 text-white placeholder-gray-400 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+                          value={deletionsSearchFilter}
+                          onChange={(e) => {
+                            const value = e.target.value;
+                            setDeletionsSearchFilter(value);
+                            // Clear previous timeout
+                            clearTimeout(window.deletionsSearchFilterTimeout);
+                            // Debounce search
+                            window.deletionsSearchFilterTimeout = setTimeout(
+                              () => {
+                                fetchPendingDeletions(value);
+                              },
+                              500
+                            );
+                          }}
+                        />
                       </div>
-                     
+
+                      <button
+                        onClick={() =>
+                          fetchPendingDeletions(deletionsSearchFilter)
+                        }
+                        className="bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors duration-200 hover:bg-blue-500"
+                      >
+                        Refresh
+                      </button>
                     </div>
-                    
-                    <h2 className='mt-4 text-white text-lg '>Recent Sign-Ups</h2>
-                    <div className='mt-2 grid grid-cols-3 gap-4'>
-                      {stats.recentSignUps.map((user) => (
-                        <div key={user.id} className='hover:bg-neutral-700 duration-100 bg-neutral-800  cursor-pointer p-4 rounded-lg flex items-center' onClick={() => window.open(`/users/${user.username}`, '_blank')}>
-                          <img src={user.profileImage || 'https://robohash.org/' + user.username} alt={`${user.username}'s profile`} className='w-12 h-12 rounded-full mr-4' />
-                          <div>
-                            <p className='text-white font-bold'>{user.username}</p>
-                            <p className='text-gray-400 text-sm'>{new Date(user.createdAt).toLocaleString()}</p>
+
+                    {/* Pending Deletions */}
+                    <div className="border border-neutral-700 bg-neutral-800 p-6">
+                      <h2 className="mb-6 text-xl font-semibold text-white">
+                        Deletion Requests
+                      </h2>
+
+                      {pendingDeletions.length > 0 ? (
+                        <div className="space-y-4">
+                          {pendingDeletions.map((deletion) => (
+                            <div
+                              key={deletion.id}
+                              className="border border-neutral-600 bg-neutral-700/50 p-6"
+                            >
+                              <div className="flex items-start justify-between">
+                                <div className="flex-1">
+                                  <div className="flex items-center space-x-3">
+                                    <div className="flex h-12 w-12 items-center justify-center bg-red-600/20">
+                                      <i className="fas fa-user-times text-xl text-red-400"></i>
+                                    </div>
+                                    <div>
+                                      <h3 className="font-semibold text-white">
+                                        {deletion.user?.username ||
+                                          'Unknown User'}
+                                      </h3>
+                                      <p className="text-sm text-gray-400">
+                                        Account created:{' '}
+                                        {new Date(
+                                          deletion.user?.createdAt
+                                        ).toLocaleDateString()}
+                                      </p>
+                                    </div>
+                                  </div>
+
+                                  <div className="mt-4">
+                                    <h4 className="text-sm font-medium text-gray-300">
+                                      Reason for leaving:
+                                    </h4>
+                                    <p className="mt-1 text-white">
+                                      {deletion.reason}
+                                    </p>
+                                  </div>
+
+                                  <div className="mt-4 grid grid-cols-2 gap-4 text-sm">
+                                    <div>
+                                      <span className="text-gray-400">
+                                        Requested:
+                                      </span>
+                                      <span className="ml-2 text-white">
+                                        {new Date(
+                                          deletion.createdAt
+                                        ).toLocaleDateString()}
+                                      </span>
+                                    </div>
+                                    <div>
+                                      <span className="text-gray-400">
+                                        Status:
+                                      </span>
+                                      <span className="ml-2 bg-yellow-600/20 px-2 py-1 text-xs text-yellow-400">
+                                        {deletion.status}
+                                      </span>
+                                    </div>
+                                  </div>
+                                </div>
+
+                                <div className="ml-4 flex flex-col space-y-2">
+                                  <button
+                                    onClick={() =>
+                                      handleProcessDeletion(deletion.id)
+                                    }
+                                    className="border border-red-600/30 bg-red-600/10 px-4 py-2 text-sm font-medium text-red-400 transition-colors duration-200 hover:border-red-500/50 hover:bg-red-600/20"
+                                  >
+                                    <i className="fas fa-trash mr-1"></i>
+                                    Auto-Process Deletion
+                                  </button>
+                                  <button
+                                    onClick={() =>
+                                      window.open(
+                                        `/users/${deletion.user?.username}`,
+                                        '_blank'
+                                      )
+                                    }
+                                    className="border border-neutral-600 bg-neutral-700 px-4 py-2 text-sm font-medium text-white transition-colors duration-200 hover:border-neutral-500 hover:bg-neutral-600"
+                                  >
+                                    <i className="fas fa-user mr-1"></i>
+                                    View Profile
+                                  </button>
+                                  <button
+                                    onClick={() => {
+                                      alert(
+                                        `Deletion requested by: ${
+                                          deletion.user?.username
+                                        }\nReason: ${
+                                          deletion.reason
+                                        }\nRequested: ${new Date(
+                                          deletion.createdAt
+                                        ).toLocaleString()}\nStatus: ${
+                                          deletion.status
+                                        }`
+                                      );
+                                    }}
+                                    className="border border-blue-600/30 bg-blue-600/10 px-4 py-2 text-sm font-medium text-blue-400 transition-colors duration-200 hover:border-blue-500/50 hover:bg-blue-600/20"
+                                  >
+                                    <i className="fas fa-info-circle mr-1"></i>
+                                    View Details
+                                  </button>
+                                </div>
+                              </div>
+                            </div>
+                          ))}
+                        </div>
+                      ) : (
+                        <div className="py-8 text-center">
+                          <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center bg-neutral-700">
+                            <i className="fas fa-check-circle text-2xl text-green-400"></i>
                           </div>
+                          <h3 className="text-lg font-medium text-white">
+                            No pending deletions
+                          </h3>
+                          <p className="mt-2 text-gray-400">
+                            All account deletion requests have been processed.
+                          </p>
                         </div>
-                      ))}
+                      )}
                     </div>
                   </div>
-                ) : (
-                  <p className='text-red-500'>Failed to load stats</p>
                 )}
-            </div>
-            <h1 className='mt-20 text-white hidden'>Selected Content ID's</h1>
-            <textarea value={selectedChallenges.join(", ") || "N/A"} className='hidden text-white bg-neutral-800 border-none w-full'>
-            </textarea>
 
+                {/* Suspension History Content */}
+                {activeAccountsTab === 'history' && (
+                  <div className="space-y-6">
+                    {/* Search and Filters */}
+                    <div className="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+                      <div className="flex flex-1 items-center space-x-4">
+                        <div className="relative max-w-md flex-1">
+                          <input
+                            type="text"
+                            placeholder="Search suspension history by username, email, or reason..."
+                            value={suspensionHistorySearchFilter}
+                            onChange={(e) =>
+                              setSuspensionHistorySearchFilter(e.target.value)
+                            }
+                            className="w-full border border-neutral-600 bg-neutral-700 px-4 py-2 pl-10 text-white placeholder-gray-400 focus:border-blue-500 focus:outline-none"
+                          />
+                          <MagnifyingGlassIcon className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
+                        </div>
+                        <select
+                          value={suspensionHistoryStatusFilter}
+                          onChange={(e) =>
+                            setSuspensionHistoryStatusFilter(e.target.value)
+                          }
+                          className="border border-neutral-600 bg-neutral-700 px-3 py-2 text-white focus:border-blue-500 focus:outline-none"
+                        >
+                          <option value="all">All Statuses</option>
+                          <option value="active">Active Suspensions</option>
+                          <option value="reactivated">Reactivated</option>
+                        </select>
+                      </div>
+                      {suspensionHistoryPagination && (
+                        <div className="text-sm text-gray-400">
+                          Page {suspensionHistoryPage + 1} of{' '}
+                          {suspensionHistoryPagination.totalPages} (
+                          {suspensionHistoryPagination.totalCount} total
+                          entries)
+                        </div>
+                      )}
+                    </div>
+
+                    {/* Suspension History Content */}
+                    <div className="space-y-4">
+                      <h3 className="text-lg font-medium text-white">
+                        Suspension History (
+                        {suspensionHistoryPagination?.totalCount || 0})
+                      </h3>
+
+                      {suspensionHistoryLoading ? (
+                        <div className="p-8 text-center">
+                          <div className="inline-block h-8 w-8 animate-spin rounded-full border-b-2 border-blue-600"></div>
+                          <p className="mt-2 text-gray-400">
+                            Loading suspension history...
+                          </p>
+                        </div>
+                      ) : suspensionHistory.length === 0 ? (
+                        <div className="p-8 text-center">
+                          <div className="text-lg text-gray-400">
+                            No suspension history found
+                          </div>
+                          <p className="mt-2 text-gray-400">
+                            {suspensionHistorySearchFilter ||
+                            suspensionHistoryStatusFilter !== 'all'
+                              ? 'Try adjusting your search criteria.'
+                              : 'No suspension history available.'}
+                          </p>
+                        </div>
+                      ) : (
+                        <>
+                          {/* Desktop Table View */}
+                          <div className="hidden md:block">
+                            <div className="overflow-x-auto">
+                              <table className="w-full">
+                                <thead>
+                                  <tr className="border-b border-gray-700">
+                                    <th className="p-4 text-left font-medium text-gray-300">
+                                      USER
+                                    </th>
+                                    <th className="p-4 text-left font-medium text-gray-300">
+                                      STATUS
+                                    </th>
+                                    <th className="p-4 text-left font-medium text-gray-300">
+                                      ACCOUNT TYPE
+                                    </th>
+                                    <th className="p-4 text-left font-medium text-gray-300">
+                                      EMAIL
+                                    </th>
+                                    <th className="p-4 text-left font-medium text-gray-300">
+                                      DATES
+                                    </th>
+                                    <th className="p-4 text-left font-medium text-gray-300">
+                                      REASON
+                                    </th>
+                                  </tr>
+                                </thead>
+                                <tbody>
+                                  {suspensionHistory.map((entry) => (
+                                    <tr
+                                      key={entry.id}
+                                      className="border-b border-gray-800 transition-colors hover:bg-gray-800/50"
+                                    >
+                                      <td className="p-4">
+                                        <div className="flex items-center space-x-3">
+                                          <div className="flex h-10 w-10 items-center justify-center">
+                                            <img
+                                              src={
+                                                entry.user?.profilePicture
+                                                  ? entry.user.profilePicture
+                                                  : `https://robohash.org/${
+                                                      entry.user?.username ||
+                                                      'user'
+                                                    }.png?set=set1&size=150x150`
+                                              }
+                                              alt={entry.user?.username || 'U'}
+                                              className="h-10 w-10 rounded object-cover"
+                                              onError={(e) => {
+                                                e.target.src = `https://robohash.org/${
+                                                  entry.user?.username || 'user'
+                                                }.png?set=set1&size=150x150`;
+                                                e.target.onerror = null;
+                                              }}
+                                            />
+                                          </div>
+                                          <div>
+                                            <div className="font-medium text-white">
+                                              {entry.user?.username ||
+                                                'Unknown'}
+                                            </div>
+                                            <div className="text-sm text-gray-400">
+                                              {entry.user?.firstName &&
+                                              entry.user?.lastName
+                                                ? `${entry.user.firstName} ${entry.user.lastName}`
+                                                : entry.user?.firstName ||
+                                                  entry.user?.lastName ||
+                                                  'No name provided'}
+                                            </div>
+                                          </div>
+                                        </div>
+                                      </td>
+                                      <td className="p-4">
+                                        <span
+                                          className={`px-2 py-1 text-xs font-medium ${
+                                            entry.user?.status === 'ACTIVE'
+                                              ? 'bg-green-600/20 text-green-400'
+                                              : 'bg-orange-600/20 text-orange-400'
+                                          }`}
+                                        >
+                                          {entry.user?.status === 'ACTIVE'
+                                            ? 'ACTIVE'
+                                            : 'SUSPENDED'}
+                                        </span>
+                                      </td>
+                                      <td className="p-4">
+                                        <span className="bg-blue-600/20 px-2 py-1 text-xs font-medium text-blue-400">
+                                          {entry.user?.accountType || 'USER'}
+                                        </span>
+                                      </td>
+                                      <td className="p-4 text-white">
+                                        {entry.user?.email || 'No email'}
+                                      </td>
+                                      <td className="p-4 text-gray-300">
+                                        <div>
+                                          Created:{' '}
+                                          {entry.user?.createdAt
+                                            ? new Date(
+                                                entry.user.createdAt
+                                              ).toLocaleDateString()
+                                            : 'Unknown'}
+                                        </div>
+                                        <div>
+                                          Suspended:{' '}
+                                          {entry.suspendedAt
+                                            ? new Date(
+                                                entry.suspendedAt
+                                              ).toLocaleDateString()
+                                            : 'Unknown'}
+                                        </div>
+                                        {entry.reactivatedAt && (
+                                          <div className="text-green-400">
+                                            Reactivated:{' '}
+                                            {new Date(
+                                              entry.reactivatedAt
+                                            ).toLocaleDateString()}
+                                          </div>
+                                        )}
+                                      </td>
+                                      <td className="p-4">
+                                        {entry.reason && (
+                                          <p className="whitespace-pre-wrap break-words text-white">
+                                            {entry.reason}
+                                          </p>
+                                        )}
+                                        {entry.reactivationReason && (
+                                          <p className="mt-1 text-sm text-green-400">
+                                            <span className="font-medium">
+                                              Reactivation reason:
+                                            </span>{' '}
+                                            {entry.reactivationReason}
+                                          </p>
+                                        )}
+                                      </td>
+                                    </tr>
+                                  ))}
+                                </tbody>
+                              </table>
+                            </div>
+                          </div>
+
+                          {/* Mobile Card View */}
+                          <div className="md:hidden">
+                            <div className="space-y-4 p-4">
+                              {suspensionHistory.map((entry) => (
+                                <div
+                                  key={entry.id}
+                                  className="rounded border border-gray-700 bg-gray-800 p-4"
+                                >
+                                  <div className="flex items-start space-x-3">
+                                    <div className="flex h-12 w-12 flex-shrink-0 items-center justify-center">
+                                      <img
+                                        src={
+                                          entry.user?.profilePicture
+                                            ? entry.user.profilePicture
+                                            : `https://robohash.org/${
+                                                entry.user?.username || 'user'
+                                              }.png?set=set1&size=150x150`
+                                        }
+                                        alt={entry.user?.username || 'U'}
+                                        className="h-12 w-12 rounded object-cover"
+                                        onError={(e) => {
+                                          e.target.src = `https://robohash.org/${
+                                            entry.user?.username || 'user'
+                                          }.png?set=set1&size=150x150`;
+                                          e.target.onerror = null;
+                                        }}
+                                      />
+                                    </div>
+                                    <div className="min-w-0 flex-1">
+                                      <div className="font-medium text-white">
+                                        {entry.user?.username || 'Unknown'}
+                                      </div>
+                                      <div className="text-sm text-gray-400">
+                                        {entry.user?.firstName &&
+                                        entry.user?.lastName
+                                          ? `${entry.user.firstName} ${entry.user.lastName}`
+                                          : entry.user?.firstName ||
+                                            entry.user?.lastName ||
+                                            'No name provided'}
+                                      </div>
+                                      <div className="mt-2 flex flex-wrap items-center gap-2">
+                                        <span
+                                          className={`px-2 py-1 text-xs font-medium ${
+                                            entry.user?.status === 'ACTIVE'
+                                              ? 'bg-green-600/20 text-green-400'
+                                              : 'bg-orange-600/20 text-orange-400'
+                                          }`}
+                                        >
+                                          {entry.user?.status === 'ACTIVE'
+                                            ? 'ACTIVE'
+                                            : 'SUSPENDED'}
+                                        </span>
+                                        <span className="bg-blue-600/20 px-2 py-1 text-xs font-medium text-blue-400">
+                                          {entry.user?.accountType || 'USER'}
+                                        </span>
+                                      </div>
+                                      <div className="mt-2 text-xs text-gray-400">
+                                        <div>
+                                          Created:{' '}
+                                          {entry.user?.createdAt
+                                            ? new Date(
+                                                entry.user.createdAt
+                                              ).toLocaleDateString()
+                                            : 'Unknown'}
+                                        </div>
+                                        <div>
+                                          Suspended:{' '}
+                                          {entry.suspendedAt
+                                            ? new Date(
+                                                entry.suspendedAt
+                                              ).toLocaleDateString()
+                                            : 'Unknown'}
+                                        </div>
+                                        {entry.reactivatedAt && (
+                                          <div className="text-green-400">
+                                            Reactivated:{' '}
+                                            {new Date(
+                                              entry.reactivatedAt
+                                            ).toLocaleDateString()}
+                                          </div>
+                                        )}
+                                      </div>
+                                      <div className="mt-2 text-white">
+                                        {entry.reason && (
+                                          <p className="whitespace-pre-wrap break-words text-white">
+                                            {entry.reason}
+                                          </p>
+                                        )}
+                                        {entry.reactivationReason && (
+                                          <p className="mt-1 text-sm text-green-400">
+                                            <span className="font-medium">
+                                              Reactivation reason:
+                                            </span>{' '}
+                                            {entry.reactivationReason}
+                                          </p>
+                                        )}
+                                      </div>
+                                      <div className="mt-2 text-xs text-gray-400">
+                                        <div>
+                                          By: {entry.suspendedBy || 'Unknown'}
+                                        </div>
+                                        {entry.reactivatedBy && (
+                                          <div>
+                                            Reactivated by:{' '}
+                                            {entry.reactivatedBy}
+                                          </div>
+                                        )}
+                                      </div>
+                                    </div>
+                                  </div>
+                                </div>
+                              ))}
+                            </div>
+                          </div>
+                        </>
+                      )}
+
+                      {/* Pagination */}
+                      {suspensionHistoryPagination &&
+                        suspensionHistoryPagination.totalPages > 1 && (
+                          <div className="flex items-center justify-between">
+                            <button
+                              onClick={() =>
+                                fetchSuspensionHistory(
+                                  Math.max(0, suspensionHistoryPage - 1),
+                                  suspensionHistorySearchFilter,
+                                  suspensionHistoryStatusFilter
+                                )
+                              }
+                              disabled={suspensionHistoryPage === 0}
+                              className="bg-neutral-700 px-4 py-2 text-sm text-white transition-colors duration-200 hover:bg-neutral-600 disabled:cursor-not-allowed disabled:opacity-50"
+                            >
+                              Previous
+                            </button>
+                            <span className="text-sm text-gray-400">
+                              Page {suspensionHistoryPage + 1} of{' '}
+                              {suspensionHistoryPagination.totalPages}
+                            </span>
+                            <button
+                              onClick={() =>
+                                fetchSuspensionHistory(
+                                  Math.min(
+                                    suspensionHistoryPagination.totalPages - 1,
+                                    suspensionHistoryPage + 1
+                                  ),
+                                  suspensionHistorySearchFilter,
+                                  suspensionHistoryStatusFilter
+                                )
+                              }
+                              disabled={
+                                suspensionHistoryPage >=
+                                suspensionHistoryPagination.totalPages - 1
+                              }
+                              className="bg-neutral-700 px-4 py-2 text-sm text-white transition-colors duration-200 hover:bg-neutral-600 disabled:cursor-not-allowed disabled:opacity-50"
+                            >
+                              Next
+                            </button>
+                          </div>
+                        )}
+                    </div>
+                  </div>
+                )}
+              </div>
+            )}
+
+            {activeTab === 'warnings' && (
+              <div className="space-y-6">
+                {/* History Section Header */}
+                <div className="border border-neutral-700 bg-neutral-800 p-6">
+                  <div className="mb-6 flex items-center justify-between">
+                    <h2 className="text-xl font-semibold text-white">
+                      History
+                    </h2>
+                    <button
+                      onClick={() => {
+                        if (activeHistoryTab === 'suspended') {
+                          fetchGroupedSuspensions(groupedSuspensionsPage, true); // forceRefresh = true
+                        } else if (activeHistoryTab === 'warnings') {
+                          fetchGroupedWarnings(groupedWarningsPage, true); // forceRefresh = true
+                        }
+                      }}
+                      disabled={groupedWarningsLoading || groupedSuspensionsLoading}
+                      className="flex items-center gap-2 bg-blue-600 px-4 py-2 text-white transition-colors hover:bg-blue-700 disabled:opacity-50"
+                    >
+                      <ArrowPathIcon className="h-4 w-4" />
+                      <span className="hidden sm:inline">Refresh</span>
+                    </button>
+                  </div>
+
+                  {/* History Sub-tabs */}
+                  <div className="mb-6 border-b border-neutral-600">
+                    <div className="flex space-x-8">
+                      <button
+                        onClick={() => {
+                          setActiveHistoryTab('suspended');
+                          fetchGroupedSuspensions(groupedSuspensionsPage);
+                        }}
+                        className={`border-b-2 px-1 py-2 text-sm font-medium transition-all duration-200 ${
+                          activeHistoryTab === 'suspended'
+                            ? 'border-orange-500 text-orange-400'
+                            : 'border-transparent text-gray-400 hover:border-gray-600 hover:text-gray-300'
+                        }`}
+                      >
+                        Suspended ({groupedSuspensionsTotal || 0})
+                      </button>
+                      <button
+                        onClick={() => {
+                          setActiveHistoryTab('warnings');
+                          fetchGroupedWarnings(groupedWarningsPage);
+                        }}
+                        className={`border-b-2 px-1 py-2 text-sm font-medium transition-all duration-200 ${
+                          activeHistoryTab === 'warnings'
+                            ? 'border-blue-500 text-blue-400'
+                            : 'border-transparent text-gray-400 hover:border-gray-600 hover:text-gray-300'
+                        }`}
+                      >
+                        Warnings ({groupedWarningsTotal || 0})
+                      </button>
+                    </div>
+                  </div>
+
+                  {/* Grouped Suspensions Tab */}
+                  {activeHistoryTab === 'suspended' && (
+                    <>
+                      {/* Smart Search Bar for Suspended */}
+                      <div className="relative mb-6 max-w-md">
+                        <div className="absolute left-3 top-2.5">
+                          <MagnifyingGlassIcon className="h-5 w-5 text-gray-400" />
+                        </div>
+                        <input
+                          type="text"
+                          placeholder="Search suspended users by username..."
+                          className="w-full border-0 bg-neutral-700/80 py-2 pl-10 pr-4 text-white placeholder-gray-400 shadow-inner transition-all duration-200 focus:bg-neutral-700 focus:ring-2 focus:ring-orange-500/50 focus:ring-offset-0"
+                          value={suspendedSearchFilter}
+                          onChange={(e) => {
+                            setSuspendedSearchFilter(e.target.value);
+                            handleUserInputChange(e); // trigger suggestions
+                            clearTimeout(window.suspendedSearchTimeout2);
+                            window.suspendedSearchTimeout2 = setTimeout(() => {
+                              fetchGroupedSuspensions(1, e.target.value);
+                            }, 500);
+                          }}
+                          onFocus={() => {
+                            if (userSuggestions.length > 0) {
+                              setShowUserSuggestions(true);
+                            }
+                          }}
+                          onBlur={() => {
+                            setTimeout(
+                              () => setShowUserSuggestions(false),
+                              200
+                            );
+                          }}
+                          autoComplete="off"
+                        />
+                        {/* User Suggestions Dropdown */}
+                        {showUserSuggestions && userSuggestions.length > 0 && (
+                          <div className="user-suggestions absolute left-0 right-0 top-full z-50 mt-1 max-h-64 overflow-y-auto border border-neutral-600 bg-neutral-800 shadow-lg">
+                            {userSuggestions.map((user) => (
+                              <div
+                                key={user.id}
+                                className="flex cursor-pointer items-center space-x-3 px-4 py-3 transition-colors duration-200 hover:bg-neutral-700"
+                                onClick={() => {
+                                  setSuspendedSearchFilter(user.username);
+                                  setShowUserSuggestions(false);
+                                  setUserSuggestions([]);
+                                  fetchGroupedSuspensions(1, user.username);
+                                }}
+                              >
+                                <img
+                                  src={
+                                    user.profileImage ||
+                                    'https://robohash.org/' + user.username
+                                  }
+                                  alt={`${user.username}'s profile`}
+                                  className="h-8 w-8"
+                                />
+                                <div className="flex-1">
+                                  <p className="font-medium text-white">
+                                    {user.username}
+                                  </p>
+                                  <p className="text-sm text-gray-400">
+                                    {user.points || 0} points • Joined{' '}
+                                    {new Date(
+                                      user.createdAt
+                                    ).toLocaleDateString()}
+                                  </p>
+                                </div>
+                                {user.disabled && (
+                                  <span className="bg-red-600 px-2 py-1 text-xs text-white">
+                                    Disabled
+                                  </span>
+                                )}
+                              </div>
+                            ))}
+                          </div>
+                        )}
+                      </div>
+                      {groupedSuspensionsLoading ? (
+                        <div className="p-8 text-center">
+                          <div className="inline-block h-8 w-8 animate-spin rounded-full border-b-2 border-blue-600"></div>
+                          <p className="mt-2 text-gray-400">
+                            Loading grouped suspensions...
+                          </p>
+                        </div>
+                      ) : groupedSuspensions.length === 0 ? (
+                        <div className="p-8 text-center">
+                          <div className="text-lg text-gray-400">
+                            No suspensions found
+                          </div>
+                        </div>
+                      ) : (
+                        <>
+                          {/* Desktop View */}
+                          <div className="hidden md:block">
+                            <div className="space-y-4">
+                              {groupedSuspensions.map((userSuspensions) => (
+                                <div
+                                  key={userSuspensions.userId}
+                                  className="border border-gray-700 bg-gray-800 p-4"
+                                >
+                                  {/* User Header */}
+                                  <div className="flex items-center justify-between">
+                                    <div className="flex items-center space-x-3">
+                                      <img
+                                        src={
+                                          userSuspensions.user?.profilePicture
+                                            ? userSuspensions.user
+                                                .profilePicture
+                                            : `https://robohash.org/${userSuspensions.username}.png?set=set1&size=150x150`
+                                        }
+                                        alt={userSuspensions.username}
+                                        className="h-12 w-12 rounded object-cover"
+                                        onError={(e) => {
+                                          e.target.src = `https://robohash.org/${userSuspensions.username}.png?set=set1&size=150x150`;
+                                          e.target.onerror = null;
+                                        }}
+                                      />
+                                      <div>
+                                        <div className="text-lg font-semibold text-white">
+                                          {userSuspensions.username}
+                                        </div>
+                                        <div className="text-sm text-gray-400">
+                                          {userSuspensions.user?.email ||
+                                            'No email'}
+                                        </div>
+                                        <div className="mt-1 flex space-x-2">
+                                          <span className="bg-orange-600/20 px-2 py-1 text-xs font-medium text-orange-400">
+                                            {userSuspensions.totalSuspensions}{' '}
+                                            Suspensions
+                                          </span>
+                                          <span
+                                            className={`px-2 py-1 text-xs font-medium ${
+                                              userSuspensions.user?.status ===
+                                              'ACTIVE'
+                                                ? 'bg-green-600/20 text-green-400'
+                                                : 'bg-red-600/20 text-red-400'
+                                            }`}
+                                          >
+                                            {userSuspensions.user?.status ===
+                                            'ACTIVE'
+                                              ? 'ACTIVE'
+                                              : 'SUSPENDED'}
+                                          </span>
+                                        </div>
+                                      </div>
+                                    </div>
+                                    <button
+                                      onClick={() =>
+                                        toggleSuspensionUserExpansion(
+                                          userSuspensions.userId
+                                        )
+                                      }
+                                      className="flex items-center space-x-2 bg-gray-700 px-3 py-2 text-white transition-colors hover:bg-gray-600"
+                                    >
+                                      <span>
+                                        {expandedSuspensionUsers.has(
+                                          userSuspensions.userId
+                                        )
+                                          ? 'Hide'
+                                          : 'Show'}{' '}
+                                        Details
+                                      </span>
+                                      <svg
+                                        className={`h-4 w-4 transition-transform ${
+                                          expandedSuspensionUsers.has(
+                                            userSuspensions.userId
+                                          )
+                                            ? 'rotate-180'
+                                            : ''
+                                        }`}
+                                        fill="none"
+                                        stroke="currentColor"
+                                        viewBox="0 0 24 24"
+                                      >
+                                        <path
+                                          strokeLinecap="round"
+                                          strokeLinejoin="round"
+                                          strokeWidth={2}
+                                          d="M19 9l-7 7-7-7"
+                                        />
+                                      </svg>
+                                    </button>
+                                  </div>
+
+                                  {/* Expanded Details */}
+                                  {expandedSuspensionUsers.has(
+                                    userSuspensions.userId
+                                  ) && (
+                                    <div className="mt-4 space-y-4">
+                                      {/* Suspensions */}
+                                      {userSuspensions.suspensions.length >
+                                        0 && (
+                                        <div>
+                                          <h4 className="mb-2 text-sm font-medium text-orange-400">
+                                            Suspensions (
+                                            {userSuspensions.suspensions.length}
+                                            )
+                                          </h4>
+                                          <div className="space-y-2">
+                                            {userSuspensions.suspensions.map(
+                                              (suspension) => (
+                                                <div
+                                                  key={suspension.id}
+                                                  className="border-l-2 border-orange-500 bg-gray-700/50 p-3"
+                                                >
+                                                  <div className="text-sm text-white">
+                                                    {suspension.reason}
+                                                  </div>
+                                                  <div className="mt-1 text-xs text-gray-400">
+                                                    {new Date(
+                                                      suspension.suspendedAt
+                                                    ).toLocaleDateString()}{' '}
+                                                    at{' '}
+                                                    {new Date(
+                                                      suspension.suspendedAt
+                                                    ).toLocaleTimeString()}{' '}
+                                                    by{' '}
+                                                    {suspension.suspendedBy ||
+                                                      'Unknown'}
+                                                  </div>
+                                                  {suspension.reactivatedAt && (
+                                                    <div className="mt-1 text-xs text-green-400">
+                                                      Reactivated:{' '}
+                                                      {new Date(
+                                                        suspension.reactivatedAt
+                                                      ).toLocaleDateString()}{' '}
+                                                      at{' '}
+                                                      {new Date(
+                                                        suspension.reactivatedAt
+                                                      ).toLocaleTimeString()}
+                                                    </div>
+                                                  )}
+                                                </div>
+                                              )
+                                            )}
+                                          </div>
+                                        </div>
+                                      )}
+                                    </div>
+                                  )}
+                                </div>
+                              ))}
+                            </div>
+                          </div>
+
+                          {/* Mobile View */}
+                          <div className="md:hidden">
+                            <div className="space-y-4">
+                              {groupedSuspensions.map((userSuspensions) => (
+                                <div
+                                  key={userSuspensions.userId}
+                                  className="border border-gray-700 bg-gray-800 p-4"
+                                >
+                                  {/* User Header */}
+                                  <div className="flex items-center justify-between">
+                                    <div className="flex items-center space-x-3">
+                                      <img
+                                        src={
+                                          userSuspensions.user?.profilePicture
+                                            ? userSuspensions.user
+                                                .profilePicture
+                                            : `https://robohash.org/${userSuspensions.username}.png?set=set1&size=150x150`
+                                        }
+                                        alt={userSuspensions.username}
+                                        className="h-10 w-10 rounded object-cover"
+                                        onError={(e) => {
+                                          e.target.src = `https://robohash.org/${userSuspensions.username}.png?set=set1&size=150x150`;
+                                          e.target.onerror = null;
+                                        }}
+                                      />
+                                      <div>
+                                        <div className="font-semibold text-white">
+                                          {userSuspensions.username}
+                                        </div>
+                                        <div className="text-sm text-gray-400">
+                                          {userSuspensions.user?.email ||
+                                            'No email'}
+                                        </div>
+                                        <div className="mt-1 flex space-x-2">
+                                          <span className="bg-orange-600/20 px-2 py-1 text-xs font-medium text-orange-400">
+                                            {userSuspensions.totalSuspensions}{' '}
+                                            Suspensions
+                                          </span>
+                                          <span
+                                            className={`px-2 py-1 text-xs font-medium ${
+                                              userSuspensions.user?.status ===
+                                              'ACTIVE'
+                                                ? 'bg-green-600/20 text-green-400'
+                                                : 'bg-red-600/20 text-red-400'
+                                            }`}
+                                          >
+                                            {userSuspensions.user?.status ===
+                                            'ACTIVE'
+                                              ? 'ACTIVE'
+                                              : 'SUSPENDED'}
+                                          </span>
+                                        </div>
+                                      </div>
+                                    </div>
+                                    <button
+                                      onClick={() =>
+                                        toggleSuspensionUserExpansion(
+                                          userSuspensions.userId
+                                        )
+                                      }
+                                      className="flex items-center space-x-1 bg-gray-700 px-2 py-1 text-xs text-white transition-colors hover:bg-gray-600"
+                                    >
+                                      <span>
+                                        {expandedSuspensionUsers.has(
+                                          userSuspensions.userId
+                                        )
+                                          ? 'Hide'
+                                          : 'Show'}
+                                      </span>
+                                      <svg
+                                        className={`h-3 w-3 transition-transform ${
+                                          expandedSuspensionUsers.has(
+                                            userSuspensions.userId
+                                          )
+                                            ? 'rotate-180'
+                                            : ''
+                                        }`}
+                                        fill="none"
+                                        stroke="currentColor"
+                                        viewBox="0 0 24 24"
+                                      >
+                                        <path
+                                          strokeLinecap="round"
+                                          strokeLinejoin="round"
+                                          strokeWidth={2}
+                                          d="M19 9l-7 7-7-7"
+                                        />
+                                      </svg>
+                                    </button>
+                                  </div>
+
+                                  {/* Expanded Details */}
+                                  {expandedSuspensionUsers.has(
+                                    userSuspensions.userId
+                                  ) && (
+                                    <div className="mt-4 space-y-3">
+                                      {/* Suspensions */}
+                                      {userSuspensions.suspensions.length >
+                                        0 && (
+                                        <div>
+                                          <h4 className="mb-2 text-sm font-medium text-orange-400">
+                                            Suspensions (
+                                            {userSuspensions.suspensions.length}
+                                            )
+                                          </h4>
+                                          <div className="space-y-2">
+                                            {userSuspensions.suspensions.map(
+                                              (suspension) => (
+                                                <div
+                                                  key={suspension.id}
+                                                  className="border-l-2 border-orange-500 bg-gray-700/50 p-2"
+                                                >
+                                                  <div className="text-sm text-white">
+                                                    {suspension.reason}
+                                                  </div>
+                                                  <div className="mt-1 text-xs text-gray-400">
+                                                    {new Date(
+                                                      suspension.suspendedAt
+                                                    ).toLocaleDateString()}{' '}
+                                                    at{' '}
+                                                    {new Date(
+                                                      suspension.suspendedAt
+                                                    ).toLocaleTimeString()}{' '}
+                                                    by{' '}
+                                                    {suspension.suspendedBy ||
+                                                      'Unknown'}
+                                                  </div>
+                                                  {suspension.reactivatedAt && (
+                                                    <div className="mt-1 text-xs text-green-400">
+                                                      Reactivated:{' '}
+                                                      {new Date(
+                                                        suspension.reactivatedAt
+                                                      ).toLocaleDateString()}{' '}
+                                                      at{' '}
+                                                      {new Date(
+                                                        suspension.reactivatedAt
+                                                      ).toLocaleTimeString()}
+                                                    </div>
+                                                  )}
+                                                </div>
+                                              )
+                                            )}
+                                          </div>
+                                        </div>
+                                      )}
+                                    </div>
+                                  )}
+                                </div>
+                              ))}
+                            </div>
+                          </div>
+
+                          {/* Pagination */}
+                          {groupedSuspensionsTotal >
+                            groupedSuspensionsPerPage && (
+                            <div className="flex items-center justify-between border-t border-gray-700 p-6">
+                              <div className="text-sm text-gray-400">
+                                Showing{' '}
+                                {(groupedSuspensionsPage - 1) *
+                                  groupedSuspensionsPerPage +
+                                  1}{' '}
+                                to{' '}
+                                {Math.min(
+                                  groupedSuspensionsPage *
+                                    groupedSuspensionsPerPage,
+                                  groupedSuspensionsTotal
+                                )}{' '}
+                                of {groupedSuspensionsTotal} users
+                              </div>
+                              <div className="flex items-center space-x-2">
+                                <button
+                                  onClick={() =>
+                                    fetchGroupedSuspensions(
+                                      groupedSuspensionsPage - 1
+                                    )
+                                  }
+                                  disabled={
+                                    groupedSuspensionsPage === 1 ||
+                                    groupedSuspensionsLoading
+                                  }
+                                  className="flex h-10 w-10 items-center justify-center bg-gray-800 text-white transition-colors hover:bg-gray-700 disabled:cursor-not-allowed disabled:opacity-50"
+                                >
+                                  <svg
+                                    className="h-5 w-5"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    viewBox="0 0 24 24"
+                                  >
+                                    <path
+                                      strokeLinecap="round"
+                                      strokeLinejoin="round"
+                                      strokeWidth={2}
+                                      d="M15 19l-7-7 7-7"
+                                    />
+                                  </svg>
+                                </button>
+                                <span className="px-3 py-2 font-medium text-white">
+                                  Page {groupedSuspensionsPage} of{' '}
+                                  {Math.ceil(
+                                    groupedSuspensionsTotal /
+                                      groupedSuspensionsPerPage
+                                  )}
+                                </span>
+                                <button
+                                  onClick={() =>
+                                    fetchGroupedSuspensions(
+                                      groupedSuspensionsPage + 1
+                                    )
+                                  }
+                                  disabled={
+                                    groupedSuspensionsPage >=
+                                      Math.ceil(
+                                        groupedSuspensionsTotal /
+                                          groupedSuspensionsPerPage
+                                      ) || groupedSuspensionsLoading
+                                  }
+                                  className="flex h-10 w-10 items-center justify-center bg-gray-800 text-white transition-colors hover:bg-gray-700 disabled:cursor-not-allowed disabled:opacity-50"
+                                >
+                                  <svg
+                                    className="h-5 w-5"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    viewBox="0 0 24 24"
+                                  >
+                                    <path
+                                      strokeLinecap="round"
+                                      strokeLinejoin="round"
+                                      strokeWidth={2}
+                                      d="M9 5l7 7-7 7"
+                                    />
+                                  </svg>
+                                </button>
+                              </div>
+                            </div>
+                          )}
+                        </>
+                      )}
+                    </>
+                  )}
+
+                  {/* Grouped Warnings Tab */}
+                  {activeHistoryTab === 'warnings' && (
+                    <>
+                      {/* Smart Search Bar for Warnings */}
+                      <div className="relative mb-6 max-w-md">
+                        <div className="absolute left-3 top-2.5">
+                          <MagnifyingGlassIcon className="h-5 w-5 text-gray-400" />
+                        </div>
+                        <input
+                          type="text"
+                          placeholder="Search warned users by username..."
+                          className="w-full border-0 bg-neutral-700/80 py-2 pl-10 pr-4 text-white placeholder-gray-400 shadow-inner transition-all duration-200 focus:bg-neutral-700 focus:ring-2 focus:ring-blue-500/50 focus:ring-offset-0"
+                          value={suspendedSearchFilter}
+                          onChange={(e) => {
+                            setSuspendedSearchFilter(e.target.value);
+                            handleUserInputChange(e); // trigger suggestions
+                            clearTimeout(window.warningsSearchTimeout2);
+                            window.warningsSearchTimeout2 = setTimeout(() => {
+                              fetchGroupedWarnings(1, e.target.value);
+                            }, 500);
+                          }}
+                          onFocus={() => {
+                            if (userSuggestions.length > 0) {
+                              setShowUserSuggestions(true);
+                            }
+                          }}
+                          onBlur={() => {
+                            setTimeout(
+                              () => setShowUserSuggestions(false),
+                              200
+                            );
+                          }}
+                          autoComplete="off"
+                        />
+                        {/* User Suggestions Dropdown */}
+                        {showUserSuggestions && userSuggestions.length > 0 && (
+                          <div className="user-suggestions absolute left-0 right-0 top-full z-50 mt-1 max-h-64 overflow-y-auto border border-neutral-600 bg-neutral-800 shadow-lg">
+                            {userSuggestions.map((user) => (
+                              <div
+                                key={user.id}
+                                className="flex cursor-pointer items-center space-x-3 px-4 py-3 transition-colors duration-200 hover:bg-neutral-700"
+                                onClick={() => {
+                                  setSuspendedSearchFilter(user.username);
+                                  setShowUserSuggestions(false);
+                                  setUserSuggestions([]);
+                                  fetchGroupedWarnings(1, user.username);
+                                }}
+                              >
+                                <img
+                                  src={
+                                    user.profileImage ||
+                                    'https://robohash.org/' + user.username
+                                  }
+                                  alt={`${user.username}'s profile`}
+                                  className="h-8 w-8"
+                                />
+                                <div className="flex-1">
+                                  <p className="font-medium text-white">
+                                    {user.username}
+                                  </p>
+                                  <p className="text-sm text-gray-400">
+                                    {user.points || 0} points • Joined{' '}
+                                    {new Date(
+                                      user.createdAt
+                                    ).toLocaleDateString()}
+                                  </p>
+                                </div>
+                                {user.disabled && (
+                                  <span className="bg-red-600 px-2 py-1 text-xs text-white">
+                                    Disabled
+                                  </span>
+                                )}
+                              </div>
+                            ))}
+                          </div>
+                        )}
+                      </div>
+                      {groupedWarningsLoading ? (
+                        <div className="p-8 text-center">
+                          <div className="inline-block h-8 w-8 animate-spin rounded-full border-b-2 border-blue-600"></div>
+                          <p className="mt-2 text-gray-400">
+                            Loading grouped warnings...
+                          </p>
+                        </div>
+                      ) : groupedWarnings.length === 0 ? (
+                        <div className="p-8 text-center">
+                          <div className="text-lg text-gray-400">
+                            No warnings found
+                          </div>
+                        </div>
+                      ) : (
+                        <>
+                          {/* Desktop View */}
+                          <div className="hidden md:block">
+                            <div className="space-y-4">
+                              {groupedWarnings.map((userWarnings) => (
+                                <div
+                                  key={userWarnings.userId}
+                                  className="border border-gray-700 bg-gray-800 p-4"
+                                >
+                                  {/* User Header */}
+                                  <div className="flex items-center justify-between">
+                                    <div className="flex items-center space-x-3">
+                                      <img
+                                        src={
+                                          userWarnings.user?.profilePicture
+                                            ? userWarnings.user.profilePicture
+                                            : `https://robohash.org/${userWarnings.username}.png?set=set1&size=150x150`
+                                        }
+                                        alt={userWarnings.username}
+                                        className="h-12 w-12 rounded object-cover"
+                                        onError={(e) => {
+                                          e.target.src = `https://robohash.org/${userWarnings.username}.png?set=set1&size=150x150`;
+                                          e.target.onerror = null;
+                                        }}
+                                      />
+                                      <div>
+                                        <div className="text-lg font-semibold text-white">
+                                          {userWarnings.username}
+                                        </div>
+                                        <div className="text-sm text-gray-400">
+                                          {userWarnings.user?.email ||
+                                            'No email'}
+                                        </div>
+                                        <div className="mt-1 flex space-x-2">
+                                          <span className="bg-blue-600/20 px-2 py-1 text-xs font-medium text-blue-400">
+                                            {userWarnings.totalWarnings}{' '}
+                                            Warnings
+                                          </span>
+                                        </div>
+                                      </div>
+                                    </div>
+                                    <button
+                                      onClick={() =>
+                                        toggleWarningUserExpansion(
+                                          userWarnings.userId
+                                        )
+                                      }
+                                      className="flex items-center space-x-2 bg-gray-700 px-3 py-2 text-white transition-colors hover:bg-gray-600"
+                                    >
+                                      <span>
+                                        {expandedWarningUsers.has(
+                                          userWarnings.userId
+                                        )
+                                          ? 'Hide'
+                                          : 'Show'}{' '}
+                                        Details
+                                      </span>
+                                      <svg
+                                        className={`h-4 w-4 transition-transform ${
+                                          expandedWarningUsers.has(
+                                            userWarnings.userId
+                                          )
+                                            ? 'rotate-180'
+                                            : ''
+                                        }`}
+                                        fill="none"
+                                        stroke="currentColor"
+                                        viewBox="0 0 24 24"
+                                      >
+                                        <path
+                                          strokeLinecap="round"
+                                          strokeLinejoin="round"
+                                          strokeWidth={2}
+                                          d="M19 9l-7 7-7-7"
+                                        />
+                                      </svg>
+                                    </button>
+                                  </div>
+
+                                  {/* Expanded Details */}
+                                  {expandedWarningUsers.has(
+                                    userWarnings.userId
+                                  ) && (
+                                    <div className="mt-4 space-y-4">
+                                      {/* Warnings */}
+                                      {userWarnings.warnings.length > 0 && (
+                                        <div>
+                                          <h4 className="mb-2 text-sm font-medium text-blue-400">
+                                            Warnings (
+                                            {userWarnings.warnings.length})
+                                          </h4>
+                                          <div className="space-y-2">
+                                            {userWarnings.warnings.map(
+                                              (warning) => (
+                                                <div
+                                                  key={warning.id}
+                                                  className="border-l-2 border-blue-500 bg-gray-700/50 p-3"
+                                                >
+                                                  <div className="text-sm text-white">
+                                                    {warning.reason}
+                                                  </div>
+                                                  <div className="mt-1 text-xs text-gray-400">
+                                                    {new Date(
+                                                      warning.createdAt
+                                                    ).toLocaleDateString()}{' '}
+                                                    at{' '}
+                                                    {new Date(
+                                                      warning.createdAt
+                                                    ).toLocaleTimeString()}{' '}
+                                                    by{' '}
+                                                    {warning.warnedBy
+                                                      ?.username || 'Unknown'}
+                                                  </div>
+                                                </div>
+                                              )
+                                            )}
+                                          </div>
+                                        </div>
+                                      )}
+                                    </div>
+                                  )}
+                                </div>
+                              ))}
+                            </div>
+                          </div>
+
+                          {/* Mobile View */}
+                          <div className="md:hidden">
+                            <div className="space-y-4">
+                              {groupedWarnings.map((userWarnings) => (
+                                <div
+                                  key={userWarnings.userId}
+                                  className="border border-gray-700 bg-gray-800 p-4"
+                                >
+                                  {/* User Header */}
+                                  <div className="flex items-center justify-between">
+                                    <div className="flex items-center space-x-3">
+                                      <img
+                                        src={
+                                          userWarnings.user?.profilePicture
+                                            ? userWarnings.user.profilePicture
+                                            : `https://robohash.org/${userWarnings.username}.png?set=set1&size=150x150`
+                                        }
+                                        alt={userWarnings.username}
+                                        className="h-10 w-10 rounded object-cover"
+                                        onError={(e) => {
+                                          e.target.src = `https://robohash.org/${userWarnings.username}.png?set=set1&size=150x150`;
+                                          e.target.onerror = null;
+                                        }}
+                                      />
+                                      <div>
+                                        <div className="font-semibold text-white">
+                                          {userWarnings.username}
+                                        </div>
+                                        <div className="text-sm text-gray-400">
+                                          {userWarnings.user?.email ||
+                                            'No email'}
+                                        </div>
+                                        <div className="mt-1 flex space-x-2">
+                                          <span className="bg-blue-600/20 px-2 py-1 text-xs font-medium text-blue-400">
+                                            {userWarnings.totalWarnings}{' '}
+                                            Warnings
+                                          </span>
+                                        </div>
+                                      </div>
+                                    </div>
+                                    <button
+                                      onClick={() =>
+                                        toggleWarningUserExpansion(
+                                          userWarnings.userId
+                                        )
+                                      }
+                                      className="flex items-center space-x-1 bg-gray-700 px-2 py-1 text-xs text-white transition-colors hover:bg-gray-600"
+                                    >
+                                      <span>
+                                        {expandedWarningUsers.has(
+                                          userWarnings.userId
+                                        )
+                                          ? 'Hide'
+                                          : 'Show'}
+                                      </span>
+                                      <svg
+                                        className={`h-3 w-3 transition-transform ${
+                                          expandedWarningUsers.has(
+                                            userWarnings.userId
+                                          )
+                                            ? 'rotate-180'
+                                            : ''
+                                        }`}
+                                        fill="none"
+                                        stroke="currentColor"
+                                        viewBox="0 0 24 24"
+                                      >
+                                        <path
+                                          strokeLinecap="round"
+                                          strokeLinejoin="round"
+                                          strokeWidth={2}
+                                          d="M19 9l-7 7-7-7"
+                                        />
+                                      </svg>
+                                    </button>
+                                  </div>
 
+                                  {/* Expanded Details */}
+                                  {expandedWarningUsers.has(
+                                    userWarnings.userId
+                                  ) && (
+                                    <div className="mt-4 space-y-3">
+                                      {/* Warnings */}
+                                      {userWarnings.warnings.length > 0 && (
+                                        <div>
+                                          <h4 className="mb-2 text-sm font-medium text-blue-400">
+                                            Warnings (
+                                            {userWarnings.warnings.length})
+                                          </h4>
+                                          <div className="space-y-2">
+                                            {userWarnings.warnings.map(
+                                              (warning) => (
+                                                <div
+                                                  key={warning.id}
+                                                  className="border-l-2 border-blue-500 bg-gray-700/50 p-2"
+                                                >
+                                                  <div className="text-sm text-white">
+                                                    {warning.reason}
+                                                  </div>
+                                                  <div className="mt-1 text-xs text-gray-400">
+                                                    {new Date(
+                                                      warning.createdAt
+                                                    ).toLocaleDateString()}{' '}
+                                                    at{' '}
+                                                    {new Date(
+                                                      warning.createdAt
+                                                    ).toLocaleTimeString()}{' '}
+                                                    by{' '}
+                                                    {warning.warnedBy
+                                                      ?.username || 'Unknown'}
+                                                  </div>
+                                                  {warning.reactivatedAt && (
+                                                    <div className="mt-1 text-xs text-green-400">
+                                                      Reactivated:{' '}
+                                                      {new Date(
+                                                        warning.reactivatedAt
+                                                      ).toLocaleDateString()}{' '}
+                                                      at{' '}
+                                                      {new Date(
+                                                        warning.reactivatedAt
+                                                      ).toLocaleTimeString()}
+                                                    </div>
+                                                  )}
+                                                </div>
+                                              )
+                                            )}
+                                          </div>
+                                        </div>
+                                      )}
+                                    </div>
+                                  )}
+                                </div>
+                              ))}
+                            </div>
+                          </div>
 
+                          {/* Pagination */}
+                          {groupedWarningsTotal > groupedWarningsPerPage && (
+                            <div className="flex items-center justify-between border-t border-gray-700 p-6">
+                              <div className="text-sm text-gray-400">
+                                Showing{' '}
+                                {(groupedWarningsPage - 1) *
+                                  groupedWarningsPerPage +
+                                  1}{' '}
+                                to{' '}
+                                {Math.min(
+                                  groupedWarningsPage * groupedWarningsPerPage,
+                                  groupedWarningsTotal
+                                )}{' '}
+                                of {groupedWarningsTotal} users
+                              </div>
+                              <div className="flex items-center space-x-2">
+                                <button
+                                  onClick={() =>
+                                    fetchGroupedWarnings(
+                                      groupedWarningsPage - 1
+                                    )
+                                  }
+                                  disabled={
+                                    groupedWarningsPage === 1 ||
+                                    groupedWarningsLoading
+                                  }
+                                  className="flex h-10 w-10 items-center justify-center bg-gray-800 text-white transition-colors hover:bg-gray-700 disabled:cursor-not-allowed disabled:opacity-50"
+                                >
+                                  <svg
+                                    className="h-5 w-5"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    viewBox="0 0 24 24"
+                                  >
+                                    <path
+                                      strokeLinecap="round"
+                                      strokeLinejoin="round"
+                                      strokeWidth={2}
+                                      d="M15 19l-7-7 7-7"
+                                    />
+                                  </svg>
+                                </button>
+                                <span className="px-3 py-2 font-medium text-white">
+                                  Page {groupedWarningsPage} of{' '}
+                                  {Math.ceil(
+                                    groupedWarningsTotal /
+                                      groupedWarningsPerPage
+                                  )}
+                                </span>
+                                <button
+                                  onClick={() =>
+                                    fetchGroupedWarnings(
+                                      groupedWarningsPage + 1
+                                    )
+                                  }
+                                  disabled={
+                                    groupedWarningsPage >=
+                                      Math.ceil(
+                                        groupedWarningsTotal /
+                                          groupedWarningsPerPage
+                                      ) || groupedWarningsLoading
+                                  }
+                                  className="flex h-10 w-10 items-center justify-center bg-gray-800 text-white transition-colors hover:bg-gray-700 disabled:cursor-not-allowed disabled:opacity-50"
+                                >
+                                  <svg
+                                    className="h-5 w-5"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    viewBox="0 0 24 24"
+                                  >
+                                    <path
+                                      strokeLinecap="round"
+                                      strokeLinejoin="round"
+                                      strokeWidth={2}
+                                      d="M9 5l7 7-7 7"
+                                    />
+                                  </svg>
+                                </button>
+                              </div>
+                            </div>
+                          )}
+                        </>
+                      )}
+                    </>
+                  )}
+                </div>
+              </div>
+            )}
           </div>
         </main>
-        <div className='flex w-full h-full grow basis-0'></div>
-        <ViewChallenge open={challengeIsOpen} setOpen={setChallengeIsOpen} selected={selectedId} />
-        <ViewReport open={reportIsOpen} setOpen={setReportIsOpen} report={selectedReport}  />
+
+        <ViewChallenge
+          open={challengeIsOpen}
+          setOpen={setChallengeIsOpen}
+          selected={selectedId}
+        />
+        <ViewReport
+          open={reportIsOpen}
+          setOpen={setReportIsOpen}
+          report={selectedReport}
+        />
         <Footer />
+
+        {/* Notification Modal */}
+        <NotificationModal />
+
+        {/* User Management Popup Modal */}
+        {showUserManagementPopup && selectedUserForManagement && (
+          <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
+            <div className="w-full max-w-md border border-neutral-700 bg-neutral-800 p-6">
+              <div className="mb-4 flex items-center justify-between">
+                <h3 className="text-lg font-medium text-white">
+                  Manage User: {selectedUserForManagement.username}
+                </h3>
+                <button
+                  onClick={() => {
+                    setShowUserManagementPopup(false);
+                    setSelectedUserForManagement(null);
+                  }}
+                  className="text-gray-400 hover:text-white"
+                >
+                  <i className="fas fa-times"></i>
+                </button>
+              </div>
+
+              <div className="space-y-4">
+                <div>
+                  <label className="mb-2 block text-sm font-medium text-neutral-300">
+                    Username
+                  </label>
+                  <input
+                    type="text"
+                    value={selectedUserForManagement.username}
+                    readOnly
+                    className="w-full border border-neutral-600 bg-neutral-700 px-3 py-2 text-white"
+                  />
+                </div>
+
+                <div>
+                  <label className="mb-2 block text-sm font-medium text-neutral-300">
+                    Reason for action (required for audit trail)
+                  </label>
+                  <textarea
+                    id="popupReasonInput"
+                    placeholder="Enter reason for action..."
+                    className="h-24 w-full resize-none border border-neutral-600 bg-neutral-700 p-3 text-white focus:border-blue-500 focus:outline-none"
+                    rows="3"
+                  />
+                </div>
+
+                <div className="grid grid-cols-2 gap-3">
+                  <button
+                    onClick={() => {
+                      handleDisableAccount(selectedUserForManagement.username);
+                      setShowUserManagementPopup(false);
+                      setSelectedUserForManagement(null);
+                    }}
+                    className="flex items-center justify-center space-x-2 border border-red-600/30 bg-red-600/10 px-4 py-2 text-sm font-medium text-red-400 transition-all duration-200 hover:border-red-500/50 hover:bg-red-600/20"
+                  >
+                    <span>Disable Account</span>
+                  </button>
+
+                  <button
+                    onClick={() => {
+                      handleEnableAccount(selectedUserForManagement.username);
+                      setShowUserManagementPopup(false);
+                      setSelectedUserForManagement(null);
+                    }}
+                    className="flex items-center justify-center space-x-2 border border-green-600/30 bg-green-600/10 px-4 py-2 text-sm font-medium text-green-400 transition-all duration-200 hover:border-green-500/50 hover:bg-green-600/20"
+                  >
+                    <span>Enable Account</span>
+                  </button>
+
+                  <button
+                    onClick={() => {
+                      handleWarnUser(selectedUserForManagement.username);
+                      setShowUserManagementPopup(false);
+                      setSelectedUserForManagement(null);
+                    }}
+                    className="flex items-center justify-center space-x-2 border border-yellow-600/30 bg-yellow-600/10 px-4 py-2 text-sm font-medium text-yellow-400 transition-all duration-200 hover:border-yellow-500/50 hover:bg-yellow-600/20"
+                  >
+                    <i className="fas fa-exclamation-triangle"></i>
+                    <span>Warn User</span>
+                  </button>
+
+                  <button
+                    onClick={() => {
+                      handleResetPFP(selectedUserForManagement.username);
+                      setShowUserManagementPopup(false);
+                      setSelectedUserForManagement(null);
+                    }}
+                    className="flex items-center justify-center space-x-2 border border-neutral-600 bg-neutral-700 px-4 py-2 text-sm font-medium text-white transition-all duration-200 hover:border-neutral-500 hover:bg-neutral-600"
+                  >
+                    <span>Reset Avatar</span>
+                  </button>
+
+                  <button
+                    onClick={() => {
+                      handleResetBanner(selectedUserForManagement.username);
+                      setShowUserManagementPopup(false);
+                      setSelectedUserForManagement(null);
+                    }}
+                    className="flex items-center justify-center space-x-2 border border-neutral-600 bg-neutral-700 px-4 py-2 text-sm font-medium text-white transition-all duration-200 hover:border-neutral-500 hover:bg-neutral-600"
+                  >
+                    <span>Reset Banner</span>
+                  </button>
+
+                  <button
+                    onClick={() => {
+                      handleResetBio(selectedUserForManagement.username);
+                      setShowUserManagementPopup(false);
+                      setSelectedUserForManagement(null);
+                    }}
+                    className="flex items-center justify-center space-x-2 border border-neutral-600 bg-neutral-700 px-4 py-2 text-sm font-medium text-white transition-all duration-200 hover:border-neutral-500 hover:bg-neutral-600"
+                  >
+                    <span>Reset Bio</span>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* User Action Modals - Suspend and Role only */}
+        <UserActionModals
+          showSuspendModal={showSuspendModal}
+          setShowSuspendModal={setShowSuspendModal}
+          suspendForm={suspendForm}
+          setSuspendForm={setSuspendForm}
+          submitSuspension={submitSuspension}
+          showRoleModal={showRoleModal}
+          setShowRoleModal={setShowRoleModal}
+          roleForm={roleForm}
+          setRoleForm={setRoleForm}
+          submitRoleChange={submitRoleChange}
+          selectedUserForAction={selectedUserForAction}
+        />
+
+        {/* Reactivation Modal */}
+        {showReactivateModal && (
+          <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
+            <div className="w-full max-w-md border border-neutral-700 bg-neutral-800 p-6">
+              <h3 className="mb-4 text-lg font-medium text-white">
+                Reactivate Account
+              </h3>
+              <p className="mb-4 text-neutral-300">
+                Reactivating account for:{' '}
+                <span className="font-medium">
+                  {selectedUserForReactivation?.username}
+                </span>
+              </p>
+
+              <div className="space-y-4">
+                <div>
+                  <label className="mb-2 block text-sm font-medium text-neutral-300">
+                    Reason for Reactivation (Optional)
+                  </label>
+                  <textarea
+                    value={reactivateForm.reason}
+                    onChange={(e) =>
+                      setReactivateForm({
+                        ...reactivateForm,
+                        reason: e.target.value,
+                      })
+                    }
+                    className="h-24 w-full resize-none border border-neutral-600 bg-neutral-700 p-3 text-white focus:border-green-500 focus:outline-none"
+                    placeholder="Enter reason for reactivation (optional)..."
+                  />
+                  <p className="mt-1 text-xs text-neutral-400">
+                    Leave empty for "Administrative reactivation"
+                  </p>
+                </div>
+              </div>
+
+              <div className="mt-6 flex space-x-3">
+                <button
+                  onClick={() => setShowReactivateModal(false)}
+                  className="flex-1 bg-neutral-600 px-4 py-2 text-white transition-colors duration-200 hover:bg-neutral-500"
+                >
+                  Cancel
+                </button>
+                <button
+                  onClick={submitReactivationModal}
+                  className="flex-1 bg-green-600 px-4 py-2 text-white transition-colors duration-200 hover:bg-green-500"
+                >
+                  Reactivate Account
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Details Modal */}
+        {showDetailsModal && selectedDetails && (
+          <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
+            <div className="w-full max-w-2xl border border-neutral-700 bg-neutral-800 p-6">
+              <div className="mb-4 flex items-center justify-between">
+                <h3 className="text-lg font-medium text-white">
+                  {selectedDetails.type === 'deletion'
+                    ? 'Deletion Request Details'
+                    : 'Details'}
+                </h3>
+                <button
+                  onClick={() => setShowDetailsModal(false)}
+                  className="text-gray-400 hover:text-white"
+                >
+                  <i className="fas fa-times"></i>
+                </button>
+              </div>
+
+              {selectedDetails.type === 'deletion' && (
+                <div className="space-y-4">
+                  <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                    <div>
+                      <label className="block text-sm font-medium text-neutral-300">
+                        User
+                      </label>
+                      <p className="mt-1 text-white">
+                        {selectedDetails.data.user?.username || 'Unknown User'}
+                      </p>
+                    </div>
+                    <div>
+                      <label className="block text-sm font-medium text-neutral-300">
+                        Status
+                      </label>
+                      <span className="mt-1 inline-block bg-yellow-600/20 px-2 py-1 text-xs text-yellow-400">
+                        {selectedDetails.data.status}
+                      </span>
+                    </div>
+                    <div>
+                      <label className="block text-sm font-medium text-neutral-300">
+                        Requested Date
+                      </label>
+                      <p className="mt-1 text-white">
+                        {new Date(
+                          selectedDetails.data.createdAt
+                        ).toLocaleString()}
+                      </p>
+                    </div>
+                    <div>
+                      <label className="block text-sm font-medium text-neutral-300">
+                        Account Created
+                      </label>
+                      <p className="mt-1 text-white">
+                        {selectedDetails.data.user?.createdAt
+                          ? new Date(
+                              selectedDetails.data.user.createdAt
+                            ).toLocaleDateString()
+                          : 'Unknown'}
+                      </p>
+                    </div>
+                  </div>
+
+                  <div>
+                    <label className="block text-sm font-medium text-neutral-300">
+                      Reason for Deletion
+                    </label>
+                    <div className="mt-2 rounded border border-neutral-600 bg-neutral-700 p-3">
+                      <p className="text-white">
+                        {selectedDetails.data.reason || 'No reason provided'}
+                      </p>
+                    </div>
+                  </div>
+
+                  {selectedDetails.data.scheduledFor && (
+                    <div>
+                      <label className="block text-sm font-medium text-neutral-300">
+                        Scheduled for Deletion
+                      </label>
+                      <p className="mt-1 text-white">
+                        {new Date(
+                          selectedDetails.data.scheduledFor
+                        ).toLocaleString()}
+                      </p>
+                    </div>
+                  )}
+                </div>
+              )}
+
+              <div className="mt-6 flex justify-end">
+                <button
+                  onClick={() => setShowDetailsModal(false)}
+                  className="bg-neutral-600 px-4 py-2 text-white transition-colors duration-200 hover:bg-neutral-500"
+                >
+                  Close
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
       </div>
     </>
   );
-}
\ No newline at end of file
+}
diff --git a/src/pages/report.jsx b/src/pages/report.jsx
index f8a8707f..597d56f4 100644
--- a/src/pages/report.jsx
+++ b/src/pages/report.jsx
@@ -1,19 +1,657 @@
+import React, { useState, useEffect } from 'react';
 import Head from 'next/head';
 import { StandardNav } from '@/components/StandardNav';
-import Report from '../components/dashboard/Report';
+import { Footer } from '@/components/Footer';
+import request from '@/utils/request';
+
+export default function ReportPage() {
+  const [activeTab, setActiveTab] = useState('create');
+  const [myReports, setMyReports] = useState([]);
+  const [stats, setStats] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [notification, setNotification] = useState(null);
+
+  // Form data for creating reports
+  const [formData, setFormData] = useState({
+    type: 'USER',
+    message: '',
+    userId: '',
+    challengeId: '',
+    commentId: '',
+    commentContent: '',
+    reason: 'inappropriate',
+    url: '',
+    severity: 'LOW',
+    featureType: 'ENHANCEMENT',
+  });
+
+  const reportTypes = [
+    {
+      id: 'USER',
+      label: 'User Report',
+      description: 'Report a user for suspicious or inappropriate behavior',
+      icon: 'fas fa-user-slash',
+      fields: [
+        {
+          name: 'userId',
+          label: 'User ID or Username',
+          type: 'text',
+          required: true,
+        },
+        {
+          name: 'message',
+          label: 'What did this user do?',
+          type: 'textarea',
+          required: true,
+        },
+      ],
+    },
+    {
+      id: 'CHALLENGE',
+      label: 'Challenge Issue',
+      description:
+        'Report issues with challenges, including incorrect flags or broken environments',
+      icon: 'fas fa-flag',
+      fields: [
+        {
+          name: 'challengeId',
+          label: 'Challenge ID',
+          type: 'text',
+          required: true,
+        },
+        {
+          name: 'message',
+          label: 'What is wrong with this challenge?',
+          type: 'textarea',
+          required: true,
+        },
+      ],
+    },
+    {
+      id: 'COMMENT',
+      label: 'Comment Report',
+      description: 'Report inappropriate or spam comments',
+      icon: 'fas fa-comment-slash',
+      fields: [
+        {
+          name: 'commentId',
+          label: 'Comment ID',
+          type: 'text',
+          required: true,
+        },
+        {
+          name: 'reason',
+          label: 'Reason',
+          type: 'select',
+          required: true,
+          options: [
+            { value: 'inappropriate', label: 'Inappropriate content' },
+            { value: 'spam', label: 'Spam' },
+            { value: 'harassment', label: 'Harassment' },
+            { value: 'offensive', label: 'Offensive language' },
+            { value: 'other', label: 'Other' },
+          ],
+        },
+        {
+          name: 'message',
+          label: 'Additional details',
+          type: 'textarea',
+          required: true,
+        },
+      ],
+    },
+    {
+      id: 'BUG',
+      label: 'Bug Report',
+      description: 'Report technical issues or bugs on the platform',
+      icon: 'fas fa-bug',
+      fields: [
+        {
+          name: 'url',
+          label: 'Where did you find this bug?',
+          type: 'text',
+          required: true,
+        },
+        {
+          name: 'severity',
+          label: 'Severity',
+          type: 'select',
+          required: true,
+          options: [
+            { value: 'LOW', label: 'Low - Minor inconvenience' },
+            { value: 'MEDIUM', label: 'Medium - Affects functionality' },
+            { value: 'HIGH', label: 'High - Critical issue' },
+          ],
+        },
+        {
+          name: 'message',
+          label: 'Describe the bug and steps to reproduce',
+          type: 'textarea',
+          required: true,
+        },
+      ],
+    },
+    {
+      id: 'FEATURE',
+      label: 'Feature Request',
+      description: 'Suggest new features or improvements',
+      icon: 'fas fa-lightbulb',
+      fields: [
+        {
+          name: 'featureType',
+          label: 'Type of Feature',
+          type: 'select',
+          required: true,
+          options: [
+            { value: 'ENHANCEMENT', label: 'Enhancement to existing feature' },
+            { value: 'NEW', label: 'New feature' },
+            { value: 'INTEGRATION', label: 'Third-party integration' },
+          ],
+        },
+        {
+          name: 'message',
+          label: 'Describe your feature request',
+          type: 'textarea',
+          required: true,
+        },
+      ],
+    },
+  ];
+
+  useEffect(() => {
+    if (activeTab === 'my-reports') {
+      fetchMyReports();
+    }
+  }, [activeTab]);
+
+  const showNotification = (message, type = 'info') => {
+    setNotification({ message, type });
+    setTimeout(() => setNotification(null), 5000);
+  };
+
+  const fetchMyReports = async () => {
+    try {
+      setLoading(true);
+      const response = await request(
+        `${process.env.NEXT_PUBLIC_API_URL}/reports/my`,
+        'GET'
+      );
+
+      if (Array.isArray(response)) {
+        setMyReports(response);
+      } else {
+        setMyReports([]);
+      }
+    } catch (error) {
+      console.error('Error fetching reports:', error);
+      setMyReports([]);
+      showNotification('Failed to load your reports', 'error');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setLoading(true);
+
+    try {
+      const currentType = reportTypes.find((type) => type.id === formData.type);
+
+      // Validate required fields
+      const requiredFields = currentType.fields.filter(
+        (field) => field.required
+      );
+      for (const field of requiredFields) {
+        if (!formData[field.name] || formData[field.name].trim() === '') {
+          throw new Error(`${field.label} is required`);
+        }
+      }
+
+      if (!formData.message || formData.message.trim() === '') {
+        throw new Error('Message is required');
+      }
+
+      const payload = Object.entries(formData).reduce((acc, [key, value]) => {
+        if (
+          value &&
+          (key === 'type' ||
+            key === 'message' ||
+            currentType.fields.some((field) => field.name === key))
+        ) {
+          acc[key] = value;
+        }
+        return acc;
+      }, {});
+
+      console.log('Submitting report with payload:', payload);
+
+      const response = await request(
+        `${process.env.NEXT_PUBLIC_API_URL}/report`,
+        'POST',
+        payload
+      );
+
+      console.log('Report submission response:', response);
+
+      if (response?.error) {
+        throw new Error(response.error);
+      }
+
+      if (!response?.success && !response?.message) {
+        throw new Error('Unexpected response from server');
+      }
+
+      showNotification('Report submitted successfully!', 'success');
+
+      // Reset form
+      setFormData((prev) => ({
+        ...prev,
+        message: '',
+        userId: '',
+        challengeId: '',
+        commentId: '',
+        commentContent: '',
+        url: '',
+      }));
+    } catch (error) {
+      console.error('Error submitting report:', error);
+      showNotification(error.message || 'Failed to submit report', 'error');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const getStatusColor = (status) => {
+    switch (status) {
+      case 'PENDING':
+        return 'bg-yellow-900/20 text-yellow-400 border-yellow-600/20';
+      case 'IN_REVIEW':
+        return 'bg-blue-900/20 text-blue-400 border-blue-600/20';
+      case 'RESOLVED':
+        return 'bg-green-900/20 text-green-400 border-green-600/20';
+      case 'REJECTED':
+        return 'bg-red-900/20 text-red-400 border-red-600/20';
+      default:
+        return 'bg-gray-900/20 text-gray-400 border-gray-600/20';
+    }
+  };
+
+  const currentReportType = reportTypes.find(
+    (type) => type.id === formData.type
+  );
+
+  // Notification component
+  const NotificationModal = () => {
+    if (!notification) return null;
+
+    const getIcon = () => {
+      switch (notification.type) {
+        case 'success':
+          return 'fas fa-check-circle';
+        case 'error':
+          return 'fas fa-exclamation-circle';
+        case 'warning':
+          return 'fas fa-exclamation-triangle';
+        default:
+          return 'fas fa-info-circle';
+      }
+    };
+
+    return (
+      <div className="fixed inset-0 z-50 flex items-center justify-center p-4 duration-300 animate-in fade-in-0">
+        <div
+          className="fixed inset-0 bg-black/50 backdrop-blur-sm"
+          onClick={() => setNotification(null)}
+        />
+        <div className="relative rounded-2xl border border-neutral-700 bg-neutral-800/95 p-8 shadow-2xl backdrop-blur-md">
+          <div className="flex items-center space-x-4">
+            <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-blue-600/20 text-blue-400">
+              <i className={`${getIcon()} text-xl`}></i>
+            </div>
+            <div className="flex-1">
+              <p className="text-lg font-medium text-white">
+                {notification.message}
+              </p>
+            </div>
+            <button
+              onClick={() => setNotification(null)}
+              className="flex h-8 w-8 items-center justify-center rounded-lg text-gray-400 transition-all duration-200 hover:bg-neutral-700/50 hover:text-white"
+            >
+              <i className="fas fa-times"></i>
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  };
 
-export default function ComingSoon() {
   return (
     <>
       <Head>
-        <title>Report a bug</title>
+        <title>Submit a Report - CTFGuide</title>
+        <meta
+          name="description"
+          content="Report issues, bugs, or inappropriate content on CTFGuide"
+        />
         <style>
           @import
           url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
         </style>
       </Head>
-      <StandardNav />
-      <Report />
+      <div className="flex min-h-screen flex-col bg-neutral-900">
+        <StandardNav />
+        <main className="flex-1">
+          <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
+            {/* Header */}
+            <div className="mb-8 text-center">
+              <h1 className="mb-4 text-3xl font-bold text-white">
+                Submit a Report
+              </h1>
+              <p className="text-lg text-gray-400">
+                Help us improve by reporting issues, bugs, or suspicious
+                activity
+              </p>
+            </div>
+
+            {/* Tab Navigation */}
+            <div className="mb-8 flex justify-center">
+              <div className="flex space-x-2 rounded-xl bg-neutral-800 p-2">
+                <button
+                  onClick={() => setActiveTab('create')}
+                  className={`rounded-lg px-6 py-2 font-medium transition-all duration-200 ${
+                    activeTab === 'create'
+                      ? 'bg-blue-600 text-white shadow-lg'
+                      : 'text-gray-300 hover:bg-neutral-700 hover:text-white'
+                  }`}
+                >
+                  <i className="fas fa-plus mr-2"></i>
+                  Create Report
+                </button>
+                <button
+                  onClick={() => setActiveTab('my-reports')}
+                  className={`rounded-lg px-6 py-2 font-medium transition-all duration-200 ${
+                    activeTab === 'my-reports'
+                      ? 'bg-blue-600 text-white shadow-lg'
+                      : 'text-gray-300 hover:bg-neutral-700 hover:text-white'
+                  }`}
+                >
+                  <i className="fas fa-list mr-2"></i>
+                  My Reports
+                </button>
+              </div>
+            </div>
+
+            {/* Tab Content */}
+            {activeTab === 'create' && (
+              <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
+                {/* Report Type Selection */}
+                <div className="rounded-xl border border-neutral-700 bg-neutral-800 p-6">
+                  <h3 className="mb-6 text-lg font-semibold text-white">
+                    Report Type
+                  </h3>
+
+                  <div className="space-y-3">
+                    {reportTypes.map((type) => (
+                      <div
+                        key={type.id}
+                        onClick={() =>
+                          setFormData({
+                            ...formData,
+                            type: type.id,
+                            message: '',
+                            userId: '',
+                            challengeId: '',
+                            commentId: '',
+                            url: '',
+                            severity: 'LOW',
+                            featureType: 'ENHANCEMENT',
+                            reason: 'inappropriate',
+                          })
+                        }
+                        className={`cursor-pointer rounded-lg border p-4 transition-all duration-200 ${
+                          formData.type === type.id
+                            ? 'border-blue-600 bg-blue-600/10'
+                            : 'border-neutral-600 bg-neutral-700/50 hover:border-neutral-500'
+                        }`}
+                      >
+                        <div className="flex items-center space-x-3">
+                          <div
+                            className={`flex h-10 w-10 items-center justify-center rounded-lg ${
+                              formData.type === type.id
+                                ? 'bg-blue-600/20 text-blue-400'
+                                : 'bg-neutral-600/50 text-gray-400'
+                            }`}
+                          >
+                            <i className={`${type.icon} text-lg`}></i>
+                          </div>
+                          <div className="flex-1">
+                            <h4 className="font-medium text-white">
+                              {type.label}
+                            </h4>
+                            <p className="text-sm text-gray-400">
+                              {type.description}
+                            </p>
+                          </div>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+
+                {/* Report Form */}
+                <div className="lg:col-span-2">
+                  <div className="rounded-xl border border-neutral-700 bg-neutral-800 p-8">
+                    <div className="mb-6 flex items-center space-x-3">
+                      <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-blue-600/20 text-blue-400">
+                        <i className={`${currentReportType.icon} text-xl`}></i>
+                      </div>
+                      <div>
+                        <h2 className="text-xl font-semibold text-white">
+                          {currentReportType.label}
+                        </h2>
+                        <p className="text-gray-400">
+                          {currentReportType.description}
+                        </p>
+                      </div>
+                    </div>
+
+                    <form onSubmit={handleSubmit} className="space-y-6">
+                      {currentReportType.fields.map((field) => (
+                        <div key={field.name}>
+                          <label className="mb-2 block text-sm font-medium text-gray-300">
+                            {field.label}{' '}
+                            {field.required && (
+                              <span className="text-red-400">*</span>
+                            )}
+                          </label>
+
+                          {field.type === 'select' ? (
+                            <select
+                              value={formData[field.name]}
+                              onChange={(e) =>
+                                setFormData({
+                                  ...formData,
+                                  [field.name]: e.target.value,
+                                })
+                              }
+                              className="w-full rounded-lg border border-neutral-600 bg-neutral-700 px-4 py-3 text-white focus:border-blue-500 focus:outline-none"
+                              required={field.required}
+                            >
+                              {field.options?.map((option) => (
+                                <option key={option.value} value={option.value}>
+                                  {option.label}
+                                </option>
+                              ))}
+                            </select>
+                          ) : field.type === 'textarea' ? (
+                            <textarea
+                              value={formData[field.name]}
+                              onChange={(e) =>
+                                setFormData({
+                                  ...formData,
+                                  [field.name]: e.target.value,
+                                })
+                              }
+                              className="w-full rounded-lg border border-neutral-600 bg-neutral-700 px-4 py-3 text-white placeholder-gray-400 focus:border-blue-500 focus:outline-none"
+                              placeholder={`Enter ${field.label.toLowerCase()}...`}
+                              rows={4}
+                              required={field.required}
+                            />
+                          ) : (
+                            <input
+                              type="text"
+                              value={formData[field.name]}
+                              onChange={(e) =>
+                                setFormData({
+                                  ...formData,
+                                  [field.name]: e.target.value,
+                                })
+                              }
+                              className="w-full rounded-lg border border-neutral-600 bg-neutral-700 px-4 py-3 text-white placeholder-gray-400 focus:border-blue-500 focus:outline-none"
+                              placeholder={`Enter ${field.label.toLowerCase()}...`}
+                              required={field.required}
+                            />
+                          )}
+                        </div>
+                      ))}
+
+                      <button
+                        type="submit"
+                        disabled={loading}
+                        className="w-full rounded-lg bg-blue-600 px-6 py-3 font-medium text-white transition-colors duration-200 hover:bg-blue-500 disabled:cursor-not-allowed disabled:opacity-50"
+                      >
+                        {loading ? 'Submitting...' : 'Submit Report'}
+                      </button>
+                    </form>
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {activeTab === 'my-reports' && (
+              <div className="rounded-xl border border-neutral-700 bg-neutral-800">
+                <div className="border-b border-neutral-700 p-6">
+                  <h2 className="text-xl font-semibold text-white">
+                    My Reports
+                  </h2>
+                  <p className="mt-2 text-gray-400">
+                    Track the status of your submitted reports
+                  </p>
+                </div>
+
+                <div className="p-6">
+                  {loading ? (
+                    <div className="py-8 text-center">
+                      <div className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-blue-500 border-t-transparent"></div>
+                      <p className="mt-4 text-gray-400">
+                        Loading your reports...
+                      </p>
+                    </div>
+                  ) : myReports.length > 0 ? (
+                    <div className="space-y-4">
+                      {myReports.map((report) => (
+                        <div
+                          key={report.id}
+                          className="rounded-lg border border-neutral-600 bg-neutral-700/50 p-6"
+                        >
+                          <div className="flex items-start justify-between">
+                            <div className="flex-1">
+                              <div className="flex items-center space-x-3">
+                                <span
+                                  className={`inline-flex rounded-full border px-3 py-1 text-sm font-medium ${getStatusColor(
+                                    report.status
+                                  )}`}
+                                >
+                                  {report.status}
+                                </span>
+                                <span className="text-sm text-gray-400">
+                                  {report.type} Report
+                                </span>
+                              </div>
+
+                              <p className="mt-2 text-white">{report.desc}</p>
+
+                              {report.metadata &&
+                                Object.keys(report.metadata).length > 0 && (
+                                  <div className="mt-3 text-sm text-gray-400">
+                                    {report.metadata.challengeId && (
+                                      <p>
+                                        Challenge ID:{' '}
+                                        {report.metadata.challengeId}
+                                      </p>
+                                    )}
+                                    {report.metadata.commentId && (
+                                      <p>
+                                        Comment ID: {report.metadata.commentId}
+                                      </p>
+                                    )}
+                                    {report.metadata.reportedUserId && (
+                                      <p>
+                                        Reported User:{' '}
+                                        {report.metadata.reportedUserId}
+                                      </p>
+                                    )}
+                                  </div>
+                                )}
+
+                              {report.resolution && (
+                                <div className="mt-3 rounded-lg bg-neutral-600/30 p-3">
+                                  <p className="text-sm text-gray-300">
+                                    <strong>Resolution:</strong>{' '}
+                                    {report.resolution}
+                                  </p>
+                                </div>
+                              )}
+                            </div>
+
+                            <div className="text-right text-sm text-gray-400">
+                              <p>Submitted</p>
+                              <p>
+                                {new Date(
+                                  report.createdAt
+                                ).toLocaleDateString()}
+                              </p>
+                              {report.resolvedAt && (
+                                <>
+                                  <p className="mt-2">Resolved</p>
+                                  <p>
+                                    {new Date(
+                                      report.resolvedAt
+                                    ).toLocaleDateString()}
+                                  </p>
+                                </>
+                              )}
+                            </div>
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  ) : (
+                    <div className="py-8 text-center">
+                      <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-neutral-700">
+                        <i className="fas fa-inbox text-2xl text-gray-400"></i>
+                      </div>
+                      <h3 className="text-lg font-medium text-white">
+                        No reports yet
+                      </h3>
+                      <p className="mt-2 text-gray-400">
+                        You haven't submitted any reports. Click "Create Report"
+                        to submit your first report.
+                      </p>
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
+        </main>
+        <Footer />
+        
+
+        {/* Notification Modal */}
+        <NotificationModal />
+      </div>
     </>
   );
 }
diff --git a/src/pages/settings/account-management.jsx b/src/pages/settings/account-management.jsx
new file mode 100644
index 00000000..e53e636e
--- /dev/null
+++ b/src/pages/settings/account-management.jsx
@@ -0,0 +1,1003 @@
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import Head from 'next/head';
+import { StandardNav } from '@/components/StandardNav';
+import { Footer } from '@/components/Footer';
+import Sidebar from '@/components/settingComponents/sidebar';
+import Dropdown from '@/components/settingComponents/dropdown';
+import request, { getCookie } from '@/utils/request';
+import { useRouter } from 'next/router';
+
+export default function AccountManagement() {
+  const [deletionStatus, setDeletionStatus] = useState(null);
+  const [userStatus, setUserStatus] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [showDisableModal, setShowDisableModal] = useState(false);
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const [disableConfirmationStep, setDisableConfirmationStep] = useState(1); // 1: info, 2: confirmation
+  const [disableReason, setDisableReason] = useState('');
+  const [deleteFormData, setDeleteFormData] = useState({
+    reason: '',
+    password: '',
+    confirmText: '',
+  });
+  const [deleteConfirmationStep, setDeleteConfirmationStep] = useState(1); // 1: form, 2: final confirmation
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [notification, setNotification] = useState(null);
+  const [isMobile, setIsMobile] = useState(false);
+  const router = useRouter();
+
+  // Optimized handlers to prevent re-renders
+  const handleDisableModalClose = useCallback(() => {
+    setShowDisableModal(false);
+    setDisableConfirmationStep(1);
+    setDisableReason('');
+  }, []);
+
+  const handleDeleteModalClose = useCallback(() => {
+    setShowDeleteModal(false);
+    setDeleteFormData({ reason: '', password: '', confirmText: '' });
+    setDeleteConfirmationStep(1);
+  }, []);
+
+  const handleDisableReasonChange = useCallback((e) => {
+    setDisableReason(e.target.value);
+  }, []);
+
+  const handleDeleteReasonChange = useCallback((e) => {
+    setDeleteFormData((prev) => ({
+      ...prev,
+      reason: e.target.value,
+    }));
+  }, []);
+
+  const handleDeletePasswordChange = useCallback((e) => {
+    setDeleteFormData((prev) => ({
+      ...prev,
+      password: e.target.value,
+    }));
+  }, []);
+
+  const handleDeleteConfirmTextChange = useCallback((e) => {
+    setDeleteFormData((prev) => ({
+      ...prev,
+      confirmText: e.target.value,
+    }));
+  }, []);
+
+  useEffect(() => {
+    fetchAccountData();
+  }, []);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth <= 768);
+    };
+
+    handleResize(); // Check on initial render
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+  const fetchAccountData = async () => {
+    try {
+      const [deletionResponse, accountResponse] = await Promise.all([
+        request(
+          `${process.env.NEXT_PUBLIC_API_URL}/account-deletion/status`,
+          'GET'
+        ),
+        request(`${process.env.NEXT_PUBLIC_API_URL}/account`, 'GET'),
+      ]);
+
+      // Only set deletion status if there's actually a pending deletion request
+      if (
+        deletionResponse.success &&
+        deletionResponse.data &&
+        deletionResponse.data.hasRequest
+      ) {
+        setDeletionStatus(deletionResponse.data);
+      } else {
+        setDeletionStatus(null); // Clear any existing deletion status
+      }
+
+      if (accountResponse) {
+        setUserStatus(accountResponse);
+      }
+    } catch (error) {
+      console.error('Error fetching account data:', error);
+      setDeletionStatus(null); // Clear deletion status on error
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const showNotification = (message, type = 'info') => {
+    setNotification({ message, type });
+    setTimeout(() => setNotification(null), 5000);
+  };
+
+  const handleDisableAccount = async () => {
+    setIsSubmitting(true);
+    try {
+      const response = await request(
+        `${process.env.NEXT_PUBLIC_API_URL}/account/disable`,
+        'POST',
+        { reason: disableReason }
+      );
+
+      if (response.success) {
+        showNotification(
+          'Account disabled successfully. You can reactivate by logging in again.',
+          'success'
+        );
+        setShowDisableModal(false);
+        setDisableConfirmationStep(1);
+        setDisableReason('');
+        // Redirect to login after a delay
+        setTimeout(() => {
+          router.push('/login');
+        }, 2000);
+      } else {
+        throw new Error(response.error || 'Failed to disable account');
+      }
+    } catch (error) {
+      showNotification(error.message || 'Failed to disable account.', 'error');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleDeleteAccount = async () => {
+    // Step 1: Validate inputs
+    if (deleteConfirmationStep === 1) {
+      if (deleteFormData.reason.trim().length < 10) {
+        showNotification(
+          'Please provide a reason of at least 10 characters.',
+          'error'
+        );
+        return;
+      }
+
+      // Only require password for EMAIL accounts
+      if (userStatus?.accountType === 'EMAIL' && !deleteFormData.password) {
+        showNotification('Please enter your password to confirm.', 'error');
+        return;
+      }
+
+      // Verify password for EMAIL accounts before proceeding
+      if (userStatus?.accountType === 'EMAIL') {
+        setIsSubmitting(true);
+        try {
+          // Custom fetch for password verification to avoid auto-logout on 401
+          const response = await fetch(
+            `${process.env.NEXT_PUBLIC_API_URL}/account/verify-password`,
+            {
+              method: 'POST',
+              headers: {
+                'Content-Type': 'application/json',
+                Authorization: `Bearer ${getCookie()}`,
+              },
+              credentials: 'include',
+              body: JSON.stringify({ password: deleteFormData.password }),
+            }
+          );
+
+          const testResponse = await response.json();
+
+          if (!response.ok || !testResponse.success) {
+            // Password verification failed - show error and stay in modal
+            showNotification(
+              'Incorrect password. Please enter your current account password.',
+              'error'
+            );
+            setIsSubmitting(false);
+            return; // Don't proceed to step 2
+          }
+
+          // Password is correct, proceed to confirmation step
+          setDeleteConfirmationStep(2);
+          setIsSubmitting(false);
+        } catch (error) {
+          // Network or other error during password verification
+          showNotification(
+            'Error verifying password. Please try again.',
+            'error'
+          );
+          setIsSubmitting(false);
+          return; // Don't proceed to step 2
+        }
+      } else {
+        // For Google accounts, go directly to confirmation
+        setDeleteConfirmationStep(2);
+      }
+      return; // Exit function after step 1
+    }
+
+    // Step 2: Final confirmation - create deletion request
+    if (deleteFormData.confirmText !== 'DELETE MY ACCOUNT') {
+      showNotification(
+        'Please type "DELETE MY ACCOUNT" exactly to confirm.',
+        'error'
+      );
+      return;
+    }
+
+    setIsSubmitting(true);
+    try {
+      const requestData = {
+        reason: deleteFormData.reason,
+      };
+
+      // Only include password for EMAIL accounts
+      if (userStatus?.accountType === 'EMAIL') {
+        requestData.password = deleteFormData.password;
+      }
+
+      const response = await request(
+        `${process.env.NEXT_PUBLIC_API_URL}/account-deletion/request`,
+        'POST',
+        requestData
+      );
+
+      if (response.success) {
+        showNotification(
+          'Account deletion scheduled for 7 days. Your account will be suspended and you will be logged out.',
+          'warning'
+        );
+        setShowDeleteModal(false);
+        setDeleteFormData({ reason: '', password: '', confirmText: '' });
+        setDeleteConfirmationStep(1);
+
+        // Only log out AFTER successful deletion request creation
+        setTimeout(() => {
+          localStorage.removeItem('token');
+          document.cookie =
+            'idToken=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/';
+          window.location.href = '/login';
+        }, 3000); // Give user time to read the message
+      } else {
+        // Deletion request failed - show error but don't log out
+        throw new Error(response.error || 'Failed to submit deletion request');
+      }
+    } catch (error) {
+      let errorMessage = 'Failed to submit deletion request.';
+
+      // Handle specific error cases for better UX
+      if (error.message) {
+        if (error.message.includes('Invalid password')) {
+          errorMessage =
+            'Incorrect password. Please go back and enter your current account password.';
+        } else if (
+          error.message.includes('Password verification is required')
+        ) {
+          errorMessage =
+            'Please enter your password to confirm account deletion.';
+        } else {
+          errorMessage = error.message;
+        }
+      }
+
+      showNotification(errorMessage, 'error');
+      // Don't log out on error - user stays in modal to try again
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleCancelDeletion = async () => {
+    try {
+      const response = await request(
+        `${process.env.NEXT_PUBLIC_API_URL}/account-deletion/cancel`,
+        'POST'
+      );
+
+      if (response.success) {
+        showNotification(
+          'Account deletion cancelled successfully. Your account will remain active.',
+          'success'
+        );
+        fetchAccountData();
+      } else {
+        throw new Error(response.error || 'Failed to cancel deletion request');
+      }
+    } catch (error) {
+      showNotification(
+        error.message || 'Failed to cancel deletion request.',
+        'error'
+      );
+    }
+  };
+
+  const NotificationModal = () => {
+    if (!notification) return null;
+
+    const getIcon = () => {
+      switch (notification.type) {
+        case 'success':
+          return 'fas fa-check-circle text-green-400';
+        case 'error':
+          return 'fas fa-exclamation-circle text-red-400';
+        case 'warning':
+          return 'fas fa-exclamation-triangle text-yellow-400';
+        default:
+          return 'fas fa-info-circle text-blue-400';
+      }
+    };
+
+    return (
+      <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+        <div
+          className="fixed inset-0 bg-black/50 backdrop-blur-sm"
+          onClick={() => setNotification(null)}
+        />
+        <div className="relative max-w-md rounded-2xl border border-neutral-700 bg-neutral-800/95 p-8 shadow-2xl backdrop-blur-md">
+          <div className="flex items-center space-x-4">
+            <i className={`${getIcon()} text-xl`}></i>
+            <div className="flex-1">
+              <p className="text-white">{notification.message}</p>
+            </div>
+            <button
+              onClick={() => setNotification(null)}
+              className="text-gray-400 transition-colors hover:text-white"
+            >
+              <i className="fas fa-times"></i>
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  const DisableAccountModal = useMemo(() => {
+    return (
+      <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+        <div
+          className="fixed inset-0 bg-black/60 backdrop-blur-sm"
+          onClick={(e) => {
+            if (e.target === e.currentTarget) {
+              handleDisableModalClose();
+            }
+          }}
+        />
+        <div
+          className="relative w-full max-w-lg rounded-lg border border-neutral-700 bg-neutral-800 p-6 shadow-xl sm:max-w-xl md:max-w-2xl md:p-8"
+          onClick={(e) => e.stopPropagation()}
+        >
+          {/* Header */}
+          <div className="mb-6 flex items-start justify-between">
+            <div className="flex items-center space-x-3">
+              <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-orange-500/20 md:h-12 md:w-12">
+                <i className="fas fa-pause-circle text-lg text-orange-400 md:text-xl"></i>
+              </div>
+              <div>
+                <h3 className="text-lg font-bold text-white md:text-xl">
+                  Disable Account
+                </h3>
+                <p className="mt-1 text-xs text-gray-400 md:text-sm">
+                  {disableConfirmationStep === 1
+                    ? 'Step 1: Information'
+                    : 'Step 2: Confirmation'}
+                </p>
+              </div>
+            </div>
+            <button
+              onClick={handleDisableModalClose}
+              className="rounded-lg p-2 text-gray-400 transition-colors hover:bg-neutral-700 hover:text-white"
+            >
+              <i className="fas fa-times text-sm md:text-base"></i>
+            </button>
+          </div>
+
+          {disableConfirmationStep === 1 ? (
+            // Step 1: Information and reason
+            <>
+              <div className="mb-6 space-y-4">
+                {/* Information Card */}
+                <div className="rounded-lg border border-orange-500/30 bg-orange-900/20 p-4">
+                  <h4 className="mb-3 flex items-center text-sm font-semibold text-orange-300 md:text-base">
+                    <i className="fas fa-info-circle mr-2 text-orange-400"></i>
+                    What happens when you disable your account:
+                  </h4>
+                  <div className="space-y-3">
+                    <div className="flex items-start space-x-3">
+                      <div className="mt-1.5 h-2 w-2 flex-shrink-0 rounded-full bg-orange-400"></div>
+                      <p className="text-xs leading-relaxed text-gray-200 md:text-sm">
+                        Your profile will be hidden from other users
+                      </p>
+                    </div>
+                    <div className="flex items-start space-x-3">
+                      <div className="mt-1.5 h-2 w-2 flex-shrink-0 rounded-full bg-orange-400"></div>
+                      <p className="text-xs leading-relaxed text-gray-200 md:text-sm">
+                        Your challenges and content will remain but be
+                        temporarily unavailable
+                      </p>
+                    </div>
+                    <div className="flex items-start space-x-3">
+                      <div className="mt-1.5 h-2 w-2 flex-shrink-0 rounded-full bg-orange-400"></div>
+                      <p className="text-xs leading-relaxed text-gray-200 md:text-sm">
+                        You can reactivate by logging in again
+                      </p>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Reason Input */}
+                <div className="space-y-3">
+                  <label className="flex items-center text-sm font-semibold text-white md:text-base">
+                    <i className="fas fa-comment-alt mr-2 text-orange-400"></i>
+                    Why are you disabling your account?
+                    <span className="ml-1 text-orange-400">*</span>
+                  </label>
+                  <div className="relative">
+                    <textarea
+                      value={disableReason}
+                      onChange={handleDisableReasonChange}
+                      placeholder="Let us know why you're taking a break from CTFGuide..."
+                      className="w-full resize-none rounded-lg border border-neutral-600 bg-neutral-700 px-3 py-3 text-sm text-white placeholder-gray-400 transition-colors focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500/20 md:px-4 md:py-4"
+                      rows="4"
+                      maxLength="500"
+                    />
+                    <div className="absolute bottom-2 right-2 text-xs text-gray-500 md:bottom-3 md:right-3">
+                      {disableReason.length}/500
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              {/* Action Buttons */}
+              <div className="flex flex-col space-y-3 sm:flex-row sm:space-x-3 sm:space-y-0">
+                <button
+                  onClick={handleDisableModalClose}
+                  className="flex-1 rounded-lg border border-neutral-600 bg-neutral-700 px-4 py-3 text-sm font-medium text-white transition-colors hover:bg-neutral-600 md:text-base"
+                >
+                  Cancel
+                </button>
+                <button
+                  onClick={() => {
+                    if (!disableReason.trim()) {
+                      showNotification(
+                        'Please provide a reason for disabling your account.',
+                        'error'
+                      );
+                      return;
+                    }
+                    setDisableConfirmationStep(2);
+                  }}
+                  className="flex-1 rounded-lg bg-orange-600 px-4 py-3 text-sm font-medium text-white transition-colors hover:bg-orange-500 md:text-base"
+                >
+                  Continue
+                </button>
+              </div>
+            </>
+          ) : (
+            // Step 2: Final confirmation
+            <>
+              <div className="mb-6 space-y-4">
+                {/* Warning Card */}
+                <div className="rounded-lg border border-red-500/40 bg-red-900/20 p-4">
+                  <h4 className="mb-3 flex items-center text-sm font-semibold text-red-300 md:text-base">
+                    <i className="fas fa-exclamation-triangle mr-2 text-red-400"></i>
+                    Final Confirmation
+                  </h4>
+                  <p className="mb-3 text-xs leading-relaxed text-red-100 md:text-sm">
+                    Are you sure you want to disable your account? This will log
+                    you out immediately and hide your profile from other users.
+                  </p>
+                  <div className="rounded-lg bg-neutral-800/60 p-3 backdrop-blur-sm">
+                    <p className="text-xs text-gray-300 md:text-sm">
+                      <span className="font-semibold text-white">Reason:</span>{' '}
+                      {disableReason}
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              {/* Action Buttons */}
+              <div className="flex flex-col space-y-3 sm:flex-row sm:space-x-3 sm:space-y-0">
+                <button
+                  onClick={() => setDisableConfirmationStep(1)}
+                  className="flex-1 rounded-lg border border-neutral-600 bg-neutral-700 px-4 py-3 text-sm font-medium text-white transition-colors hover:bg-neutral-600 md:text-base"
+                >
+                  <i className="fas fa-arrow-left mr-2"></i>
+                  Back
+                </button>
+                <button
+                  onClick={handleDisableAccount}
+                  disabled={isSubmitting}
+                  className="flex-1 rounded-lg bg-red-600 px-4 py-3 text-sm font-medium text-white transition-colors hover:bg-red-500 disabled:cursor-not-allowed disabled:opacity-60 md:text-base"
+                >
+                  {isSubmitting ? (
+                    <>
+                      <i className="fas fa-spinner fa-spin mr-2"></i>
+                      Disabling...
+                    </>
+                  ) : (
+                    <>
+                      <i className="fas fa-check mr-2"></i>
+                      Yes, Disable My Account
+                    </>
+                  )}
+                </button>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+    );
+  }, [
+    disableConfirmationStep,
+    disableReason,
+    isSubmitting,
+    handleDisableModalClose,
+    handleDisableReasonChange,
+  ]);
+
+  const DeleteAccountModal = useMemo(() => {
+    return (
+      <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+        <div
+          className="fixed inset-0 bg-black/70 backdrop-blur-sm"
+          onClick={(e) => {
+            if (e.target === e.currentTarget) {
+              handleDeleteModalClose();
+            }
+          }}
+        />
+        <div
+          className="relative w-full max-w-lg rounded-lg border border-neutral-700 bg-neutral-800 p-6 shadow-xl sm:max-w-xl md:max-w-2xl md:p-8"
+          onClick={(e) => e.stopPropagation()}
+        >
+          {/* Header */}
+          <div className="mb-6 flex items-start justify-between">
+            <div className="flex items-center space-x-3">
+              <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-red-500/20 md:h-12 md:w-12">
+                <i className="fas fa-trash-alt text-lg text-red-400 md:text-xl"></i>
+              </div>
+              <div>
+                <h3 className="text-lg font-bold text-white md:text-xl">
+                  {deleteConfirmationStep === 1
+                    ? 'Delete Account'
+                    : 'Confirm Account Deletion'}
+                </h3>
+                <p className="mt-1 text-xs text-gray-400 md:text-sm">
+                  {deleteConfirmationStep === 1
+                    ? 'Permanently delete your account'
+                    : 'Final confirmation required'}
+                </p>
+              </div>
+            </div>
+            <button
+              onClick={handleDeleteModalClose}
+              className="rounded-lg p-2 text-gray-400 transition-colors hover:bg-neutral-700 hover:text-white"
+            >
+              <i className="fas fa-times text-sm md:text-base"></i>
+            </button>
+          </div>
+
+          {deleteConfirmationStep === 1 ? (
+            // Step 1: Initial form with reason and password
+            <div className="mb-6 space-y-4">
+              <div className="rounded-lg border border-red-600/30 bg-red-900/20 p-4">
+                <h4 className="mb-2 text-sm font-medium text-red-400 md:text-base">
+                  What happens when you delete your account:
+                </h4>
+                <ul className="space-y-2 text-xs text-gray-300 md:text-sm">
+                  <li className="flex items-start">
+                    <span className="mr-2 mt-1 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-red-400"></span>
+                    Your account will be suspended for 7 days
+                  </li>
+                  <li className="flex items-start">
+                    <span className="mr-2 mt-1 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-green-400"></span>
+                    You can cancel by logging in during this time
+                  </li>
+                  <li className="flex items-start">
+                    <span className="mr-2 mt-1 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-red-400"></span>
+                    After 7 days, your account will be permanently deleted
+                  </li>
+                  <li className="flex items-start">
+                    <span className="mr-2 mt-1 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-red-400"></span>
+                    Your challenges will be transferred to CTFGuide
+                  </li>
+                </ul>
+              </div>
+
+              <div>
+                <label className="mb-2 block text-sm font-medium text-white">
+                  Why are you deleting your account?{' '}
+                  <span className="text-red-400">*</span>
+                </label>
+                <textarea
+                  value={deleteFormData.reason}
+                  onChange={handleDeleteReasonChange}
+                  placeholder="Please tell us why you're leaving (minimum 10 characters)..."
+                  className="w-full resize-none rounded-lg border border-neutral-600 bg-neutral-700 px-3 py-2 text-sm text-white placeholder-gray-400 transition-colors focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500/20"
+                  rows="3"
+                  maxLength="500"
+                />
+                <div className="mt-1 text-right text-xs text-gray-500">
+                  {deleteFormData.reason.length}/500
+                </div>
+              </div>
+
+              {/* Password field - only show for EMAIL accounts */}
+              {userStatus?.accountType === 'EMAIL' && (
+                <div>
+                  <label className="mb-2 block text-sm font-medium text-white">
+                    Confirm your password{' '}
+                    <span className="text-red-400">*</span>
+                  </label>
+                  <input
+                    type="password"
+                    value={deleteFormData.password}
+                    onChange={handleDeletePasswordChange}
+                    placeholder="Enter your current password"
+                    className="w-full rounded-lg border border-neutral-600 bg-neutral-700 px-3 py-2 text-sm text-white placeholder-gray-400 transition-colors focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500/20"
+                  />
+                </div>
+              )}
+
+              {/* Google Account Notice */}
+              {userStatus?.accountType === 'GOOGLE' && (
+                <div className="rounded-lg border border-blue-600/30 bg-blue-900/20 p-4">
+                  <div className="flex items-center space-x-3">
+                    <img
+                      src="../../google.png"
+                      alt="Google"
+                      className="h-5 w-5 md:h-6 md:w-6"
+                    />
+                    <div>
+                      <h4 className="text-sm font-medium text-blue-400 md:text-base">
+                        Google Account
+                      </h4>
+                      <p className="text-xs text-blue-200 md:text-sm">
+                        You are using a Google Account, no password confirmation
+                        is needed.
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+          ) : (
+            // Step 2: Final confirmation
+            <div className="mb-6 space-y-4">
+              <div className="rounded-lg border border-yellow-600/30 bg-yellow-900/20 p-4">
+                <h4 className="mb-3 text-sm font-medium text-yellow-400 md:text-base">
+                  ⚠️ Final Warning - Account Suspension
+                </h4>
+                <div className="space-y-2 text-xs text-gray-300 md:text-sm">
+                  <p>
+                    <strong>Your account will be suspended for 7 days.</strong>
+                  </p>
+                  <p>During this time:</p>
+                  <ul className="ml-4 mt-2 space-y-1">
+                    <li>• You won't be able to access your account</li>
+                    <li>• You can cancel deletion by logging in</li>
+                    <li>
+                      • After 7 days, your account will be permanently deleted
+                    </li>
+                  </ul>
+                </div>
+              </div>
+
+              <div className="rounded-lg border border-red-600/30 bg-red-900/20 p-4">
+                <h4 className="mb-2 text-sm font-medium text-red-400 md:text-base">
+                  Deletion reason:
+                </h4>
+                <p className="text-xs italic text-gray-300 md:text-sm">
+                  "{deleteFormData.reason}"
+                </p>
+              </div>
+
+              <div>
+                <label className="mb-2 block text-sm font-medium text-white">
+                  Type "DELETE MY ACCOUNT" to confirm{' '}
+                  <span className="text-red-400">*</span>
+                </label>
+                <input
+                  type="text"
+                  value={deleteFormData.confirmText}
+                  onChange={handleDeleteConfirmTextChange}
+                  placeholder="Type: DELETE MY ACCOUNT"
+                  className="w-full rounded-lg border border-neutral-600 bg-neutral-700 px-3 py-2 text-sm text-white placeholder-gray-400 transition-colors focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500/20"
+                />
+              </div>
+            </div>
+          )}
+
+          <div className="flex flex-col space-y-3 sm:flex-row sm:space-x-3 sm:space-y-0">
+            {deleteConfirmationStep === 1 ? (
+              <>
+                <button
+                  onClick={handleDeleteModalClose}
+                  className="flex-1 rounded-lg border border-neutral-600 bg-neutral-700 px-4 py-3 text-sm font-medium text-white transition-colors hover:bg-neutral-600 md:text-base"
+                >
+                  Cancel
+                </button>
+                <button
+                  onClick={handleDeleteAccount}
+                  disabled={isSubmitting}
+                  className="flex-1 rounded-lg bg-red-600 px-4 py-3 text-sm font-medium text-white transition-colors hover:bg-red-500 disabled:cursor-not-allowed disabled:opacity-50 md:text-base"
+                >
+                  {isSubmitting ? (
+                    <>
+                      <i className="fas fa-spinner fa-spin mr-2"></i>
+                      Verifying...
+                    </>
+                  ) : (
+                    'Continue'
+                  )}
+                </button>
+              </>
+            ) : (
+              <>
+                <button
+                  onClick={() => setDeleteConfirmationStep(1)}
+                  className="flex-1 rounded-lg border border-neutral-600 bg-neutral-700 px-4 py-3 text-sm font-medium text-white transition-colors hover:bg-neutral-600 md:text-base"
+                >
+                  Back
+                </button>
+                <button
+                  onClick={handleDeleteAccount}
+                  disabled={isSubmitting}
+                  className="flex-1 rounded-lg bg-red-600 px-4 py-3 text-sm font-medium text-white transition-colors hover:bg-red-500 disabled:cursor-not-allowed disabled:opacity-50 md:text-base"
+                >
+                  {isSubmitting ? (
+                    <>
+                      <i className="fas fa-spinner fa-spin mr-2"></i>
+                      Deleting Account...
+                    </>
+                  ) : (
+                    'Delete My Account'
+                  )}
+                </button>
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+    );
+  }, [
+    deleteFormData,
+    userStatus,
+    isSubmitting,
+    handleDeleteModalClose,
+    handleDeleteReasonChange,
+    handleDeletePasswordChange,
+    handleDeleteConfirmTextChange,
+    deleteConfirmationStep,
+  ]);
+
+  if (loading) {
+    return (
+      <>
+        <Head>
+          <title>Account Management - CTFGuide</title>
+        </Head>
+        <StandardNav />
+        <div className="min-h-screen bg-neutral-900">
+          <div className="flex animate-pulse items-center justify-center py-20">
+            <div className="text-white">Loading...</div>
+          </div>
+        </div>
+        <Footer />
+      </>
+    );
+  }
+
+  return (
+    <>
+      <Head>
+        <title>Account Management - CTFGuide</title>
+        <meta
+          name="description"
+          content="Manage your CTFGuide account settings and preferences"
+        />
+      </Head>
+
+      <StandardNav />
+
+      <div className="min-h-screen bg-neutral-900">
+        <div className="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8 lg:py-8">
+          <div className="flex flex-col gap-6 lg:flex-row lg:gap-8">
+            <div className="lg:w-64">
+              {isMobile ? (
+                <Dropdown tab="../settings/account-management" />
+              ) : (
+                <Sidebar />
+              )}
+            </div>
+
+            <div className="flex-1">
+              <div className="mb-6 lg:mb-8">
+                <h1 className="text-2xl font-bold text-white sm:text-3xl">
+                  Account Management
+                </h1>
+                <p className="mt-2 text-sm text-gray-400 sm:text-base">
+                  Manage dangerous account actions. These changes are permanent
+                  and cannot be undone.
+                </p>
+              </div>
+
+              {/* Current Account Status */}
+              {userStatus?.status === 'SUSPENDED' && (
+                <div className="mb-6 rounded-lg border border-orange-600/30 bg-orange-900/20 p-4 sm:p-6">
+                  <div className="flex items-start space-x-3">
+                    <i className="fas fa-pause-circle mt-1 text-orange-400"></i>
+                    <div className="flex-1">
+                      <h3 className="text-sm font-semibold text-orange-400 sm:text-base">
+                        Account Currently Disabled
+                      </h3>
+                      <p className="mt-1 text-sm text-orange-200 sm:text-base">
+                        Your account is temporarily disabled and hidden from
+                        other users.
+                      </p>
+                      <p className="mt-2 text-xs text-orange-300 sm:text-sm">
+                        You can reactivate your account at any time by clicking
+                        the button below.
+                      </p>
+                      <button
+                        onClick={async () => {
+                          try {
+                            const response = await request(
+                              `${process.env.NEXT_PUBLIC_API_URL}/account/enable`,
+                              'POST'
+                            );
+                            if (response.success) {
+                              showNotification(
+                                'Account reactivated successfully!',
+                                'success'
+                              );
+                              fetchAccountData();
+                            }
+                          } catch (error) {
+                            showNotification(
+                              'Failed to reactivate account.',
+                              'error'
+                            );
+                          }
+                        }}
+                        className="mt-4 rounded-lg bg-orange-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-orange-500"
+                      >
+                        Reactivate Account
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              {/* Current Deletion Status */}
+              {deletionStatus && deletionStatus.hasRequest && (
+                <div className="mb-6 rounded-lg border border-yellow-600/30 bg-yellow-900/20 p-4 sm:p-6">
+                  <div className="flex items-start space-x-3">
+                    <i className="fas fa-exclamation-triangle mt-1 text-yellow-400"></i>
+                    <div className="flex-1">
+                      <h3 className="text-sm font-semibold text-yellow-400 sm:text-base">
+                        Pending Account Deletion
+                      </h3>
+                      <p className="mt-1 text-sm text-yellow-200 sm:text-base">
+                        Your account deletion request is scheduled for{' '}
+                        {deletionStatus.scheduledFor
+                          ? new Date(
+                              deletionStatus.scheduledFor
+                            ).toLocaleDateString()
+                          : 'a date to be determined'}
+                      </p>
+                      <p className="mt-2 text-xs text-green-300 sm:text-sm">
+                        <strong>Good news:</strong> Simply logging in will
+                        automatically cancel this deletion request!
+                      </p>
+                      {deletionStatus.reason && (
+                        <p className="mt-2 text-xs text-yellow-300 sm:text-sm">
+                          <strong>Reason:</strong> {deletionStatus.reason}
+                        </p>
+                      )}
+                      {deletionStatus.canCancel && (
+                        <button
+                          onClick={handleCancelDeletion}
+                          className="mt-4 rounded-lg bg-green-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-green-500"
+                        >
+                          Cancel Deletion Request
+                        </button>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              {/* Account Actions */}
+              <div className="space-y-4 sm:space-y-6">
+                {/* Temporarily Disable Account */}
+                <div
+                  className="cursor-pointer rounded-lg border border-neutral-600 bg-neutral-700/50 p-4 transition-all hover:border-neutral-500 hover:bg-neutral-700/70 sm:p-6"
+                  onClick={() => setShowDisableModal(true)}
+                >
+                  <div className="flex items-start justify-between">
+                    <div className="flex-1">
+                      <h3 className="text-base font-semibold text-white sm:text-lg">
+                        Temporarily Disable Account
+                      </h3>
+                      <p className="mt-1 text-sm text-gray-400 sm:text-base">
+                        Temporarily disable your account. You can reactivate it
+                        anytime by logging back in.
+                      </p>
+                      <ul className="mt-3 space-y-2 text-xs text-gray-500 sm:text-sm">
+                        <li className="flex items-start">
+                          <span className="mr-2 mt-1 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-gray-400"></span>
+                          Your profile will be hidden from other users
+                        </li>
+                        <li className="flex items-start">
+                          <span className="mr-2 mt-1 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-gray-400"></span>
+                          Your challenges and content will remain but be
+                          temporarily unavailable
+                        </li>
+                        <li className="flex items-start">
+                          <span className="mr-2 mt-1 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-gray-400"></span>
+                          You can reactivate by logging in again
+                        </li>
+                      </ul>
+                    </div>
+                    <div className="ml-4 flex items-center">
+                      <i className="fas fa-chevron-right text-gray-400"></i>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Delete Account Permanently */}
+                <div
+                  className={`cursor-pointer rounded-lg border border-red-600/30 bg-red-900/20 p-4 transition-all hover:border-red-500/50 hover:bg-red-900/30 sm:p-6 ${
+                    deletionStatus ? 'cursor-not-allowed opacity-50' : ''
+                  }`}
+                  onClick={() => !deletionStatus && setShowDeleteModal(true)}
+                >
+                  <div className="flex items-start justify-between">
+                    <div className="flex-1">
+                      <h3 className="text-base font-semibold text-red-400 sm:text-lg">
+                        Delete Account Permanently
+                      </h3>
+                      <p className="mt-1 text-sm text-gray-400 sm:text-base">
+                        Permanently delete your account and all associated data.
+                        This action cannot be undone.
+                      </p>
+                      <ul className="mt-3 space-y-2 text-xs text-gray-500 sm:text-sm">
+                        <li className="flex items-start">
+                          <span className="mr-2 mt-1 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-gray-400"></span>
+                          All your challenges will be transferred to CTFGuide
+                        </li>
+                        <li className="flex items-start">
+                          <span className="mr-2 mt-1 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-gray-400"></span>
+                          Your profile, progress, and personal data will be
+                          deleted
+                        </li>
+                        <li className="flex items-start">
+                          <span className="mr-2 mt-1 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-gray-400"></span>
+                          This action cannot be reversed
+                        </li>
+                        <li className="flex items-start">
+                          <span className="mr-2 mt-1 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-gray-400"></span>
+                          You have a 7-day grace period to cancel
+                        </li>
+                      </ul>
+                    </div>
+                    <div className="ml-4 flex items-center">
+                      <i className="fas fa-chevron-right text-gray-400"></i>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <Footer />
+
+      {/* Modals */}
+      {showDisableModal && DisableAccountModal}
+      {showDeleteModal && DeleteAccountModal}
+      <NotificationModal />
+    </>
+  );
+}
diff --git a/src/utils/request.js b/src/utils/request.js
index d482b096..7f9f982e 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -1,74 +1,109 @@
 const request = async (url, req_method, body) => {
   try {
     let method = req_method.toUpperCase();
-    if(method === 'GET' || method === "DELETE") {
-
+    if (method === 'GET' || method === 'DELETE') {
       const requestOptions = {
         method: method,
-        headers: { 'Content-Type': 'application/json', 
-        Authorization: `Bearer ${getCookie()}`},
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${getCookie()}`,
+        },
         credentials: 'include',
-      }
+      };
 
       const response = await fetch(url, requestOptions);
       const data = await response.json();
 
-      if(response.status === 401 && data.error) {
+      if (response.status === 401 && data.error) {
         const url = new URL(window.location.href);
         const path = url.pathname;
-        const pathNames = ["/", "/login", "/careers", "/register", 
-          "/onboarding", "/forgot-password", "/education", "/userrs", 
-          "/privacy-policy","/404", "/terms-of-service", "/learn"];
-        
+        const pathNames = [
+          '/',
+          '/login',
+          '/careers',
+          '/register',
+          '/onboarding',
+          '/forgot-password',
+          '/education',
+          '/userrs',
+          '/privacy-policy',
+          '/404',
+          '/terms-of-service',
+          '/learn',
+        ];
+
         // Check if it's a challenge page (UUID format)
-        const challengePathRegex = /^\/challenges\/[a-f0-9]{8}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{12}/;
+        const challengePathRegex =
+          /^\/challenges\/[a-f0-9]{8}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{12}/;
         const isChallengePage = challengePathRegex.test(path);
-        
-        if(!pathNames.includes(path) && !path.startsWith("/forgot-password") && !isChallengePage) {
-          window.location.href = "/login";
+
+        if (
+          !pathNames.includes(path) &&
+          !path.startsWith('/forgot-password') &&
+          !isChallengePage
+        ) {
+          window.location.href = '/login';
         }
-        return null;
+        return { success: false, error: 'Authentication required' };
       }
 
       return data;
-    } else if(method === 'POST' || method === 'PUT') {
+    } else if (method === 'POST' || method === 'PUT') {
       const requestOptions = {
         method: method,
-        headers: { 'Content-Type': 'application/json',
-        Authorization: `Bearer ${getCookie()}`},
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${getCookie()}`,
+        },
         credentials: 'include',
-        body: JSON.stringify(body)
-      }
+        body: JSON.stringify(body),
+      };
 
       const response = await fetch(url, requestOptions);
       const data = await response.json();
 
-      if(response.status === 401 && data.error) {
+      if (response.status === 401 && data.error) {
         const url = new URL(window.location.href);
         const path = url.pathname;
-        const pathNames = ["/", "/login", "/careers", "/register", 
-          "/onboarding", "/forgot-password", "/education", "/userrs", 
-          "/privacy-policy","/404", "/terms-of-service", "/learn"];
-        
+        const pathNames = [
+          '/',
+          '/login',
+          '/careers',
+          '/register',
+          '/onboarding',
+          '/forgot-password',
+          '/education',
+          '/userrs',
+          '/privacy-policy',
+          '/404',
+          '/terms-of-service',
+          '/learn',
+        ];
+
         // Check if it's a challenge page (UUID format)
-        const challengePathRegex = /^\/challenges\/[a-f0-9]{8}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{12}/;
+        const challengePathRegex =
+          /^\/challenges\/[a-f0-9]{8}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{12}/;
         const isChallengePage = challengePathRegex.test(path);
-        
-        if(!pathNames.includes(path) && !path.startsWith("/forgot-password") && !isChallengePage) {
-          window.location.href = "/login";
+
+        if (
+          !pathNames.includes(path) &&
+          !path.startsWith('/forgot-password') &&
+          !isChallengePage
+        ) {
+          window.location.href = '/login';
         }
-        return null;
+        return { success: false, error: 'Authentication required' };
       }
 
       return data;
     } else {
-      return null;
+      return { success: false, error: 'Invalid request method' };
     }
   } catch (error) {
     console.log(error);
-    return null;
+    return { success: false, error: error.message || 'Network error occurred' };
   }
-}
+};
 
 export function getCookie() {
   try {
@@ -77,14 +112,12 @@ export function getCookie() {
     if (parts.length === 2) return parts.pop().split(';').shift();
   } catch (error) {
     console.log(error);
-    return "";
+    return '';
   }
 }
 
 export default request;
 
-
-
 /*
 
  * */
diff --git a/yarn.lock b/yarn.lock
index afc2d4f6..654382c8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -43,7 +43,7 @@
   resolved "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.26.8.tgz"
   integrity sha512-oH5UPLMWR3L2wEFLnFJ1TZXqHufiTKAiLfqw5zkhS4dKXLJ10yVztfil/twG8EDTA4F/tvVNw9nOl4ZMslB8rQ==
 
-"@babel/core@^7.11.1", "@babel/core@^7.22.9":
+"@babel/core@^7.0.0", "@babel/core@^7.0.0-0", "@babel/core@^7.0.0-0 || ^8.0.0-0 <8.0.0", "@babel/core@^7.11.1", "@babel/core@^7.12.0", "@babel/core@^7.13.0", "@babel/core@^7.22.9", "@babel/core@^7.4.0 || ^8.0.0-0 <8.0.0":
   version "7.26.10"
   resolved "https://registry.npmjs.org/@babel/core/-/core-7.26.10.tgz"
   integrity sha512-vMqyb7XCDMPvJFFOaT9kxtiRh42GwlZEg1/uIgtZshS5a/8OaduUfCi7kynKgc3Tw/6Uo2D+db9qBttghhmxwQ==
@@ -1128,7 +1128,7 @@
     "@codemirror/view" "^6.0.0"
     "@lezer/highlight" "^1.0.0"
 
-"@codemirror/view@^6.0.0", "@codemirror/view@^6.17.0", "@codemirror/view@^6.6.0":
+"@codemirror/view@^6.0.0", "@codemirror/view@^6.17.0", "@codemirror/view@^6.6.0", "@codemirror/view@>=6.0.0":
   version "6.36.5"
   resolved "https://registry.npmjs.org/@codemirror/view/-/view-6.36.5.tgz"
   integrity sha512-cd+FZEUlu3GQCYnguYm3EkhJ8KJVisqqUsCOKedBoAt/d9c76JUUap6U0UrpElln5k6VyrEOYliMuDAKIeDQLg==
@@ -1170,7 +1170,7 @@
   resolved "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.2.tgz"
   integrity sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==
 
-"@emotion/is-prop-valid@^1.2.1", "@emotion/is-prop-valid@1.2.2":
+"@emotion/is-prop-valid@*", "@emotion/is-prop-valid@^1.2.1", "@emotion/is-prop-valid@1.2.2":
   version "1.2.2"
   resolved "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz"
   integrity sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==
@@ -1187,7 +1187,7 @@
   resolved "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz"
   integrity sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==
 
-"@emotion/react@^11.13.3":
+"@emotion/react@^11.0.0-rc.0", "@emotion/react@^11.13.3", "@emotion/react@^11.4.1", "@emotion/react@^11.5.0", "@emotion/react@^11.9.0":
   version "11.14.0"
   resolved "https://registry.npmjs.org/@emotion/react/-/react-11.14.0.tgz"
   integrity sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA==
@@ -1217,7 +1217,7 @@
   resolved "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.4.0.tgz"
   integrity sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==
 
-"@emotion/styled@^11.11.0":
+"@emotion/styled@^11.11.0", "@emotion/styled@^11.3.0", "@emotion/styled@^11.8.1":
   version "11.11.0"
   resolved "https://registry.npmjs.org/@emotion/styled/-/styled-11.11.0.tgz"
   integrity sha512-hM5Nnvu9P3midq5aaXj4I+lnSfNi7Pmd4EWk1fOZ3pxookaQTNew6bp4JaCBYM4HVFZF9g7UjJmsUmC2JlxOng==
@@ -1269,6 +1269,397 @@
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
+"@firebase/ai@1.4.1":
+  version "1.4.1"
+  resolved "https://registry.npmjs.org/@firebase/ai/-/ai-1.4.1.tgz"
+  integrity sha512-bcusQfA/tHjUjBTnMx6jdoPMpDl3r8K15Z+snHz9wq0Foox0F/V+kNLXucEOHoTL2hTc9l+onZCyBJs2QoIC3g==
+  dependencies:
+    "@firebase/app-check-interop-types" "0.3.3"
+    "@firebase/component" "0.6.18"
+    "@firebase/logger" "0.4.4"
+    "@firebase/util" "1.12.1"
+    tslib "^2.1.0"
+
+"@firebase/analytics-compat@0.2.23":
+  version "0.2.23"
+  resolved "https://registry.npmjs.org/@firebase/analytics-compat/-/analytics-compat-0.2.23.tgz"
+  integrity sha512-3AdO10RN18G5AzREPoFgYhW6vWXr3u+OYQv6pl3CX6Fky8QRk0AHurZlY3Q1xkXO0TDxIsdhO3y65HF7PBOJDw==
+  dependencies:
+    "@firebase/analytics" "0.10.17"
+    "@firebase/analytics-types" "0.8.3"
+    "@firebase/component" "0.6.18"
+    "@firebase/util" "1.12.1"
+    tslib "^2.1.0"
+
+"@firebase/analytics-types@0.8.3":
+  version "0.8.3"
+  resolved "https://registry.npmjs.org/@firebase/analytics-types/-/analytics-types-0.8.3.tgz"
+  integrity sha512-VrIp/d8iq2g501qO46uGz3hjbDb8xzYMrbu8Tp0ovzIzrvJZ2fvmj649gTjge/b7cCCcjT0H37g1gVtlNhnkbg==
+
+"@firebase/analytics@0.10.17":
+  version "0.10.17"
+  resolved "https://registry.npmjs.org/@firebase/analytics/-/analytics-0.10.17.tgz"
+  integrity sha512-n5vfBbvzduMou/2cqsnKrIes4auaBjdhg8QNA2ZQZ59QgtO2QiwBaXQZQE4O4sgB0Ds1tvLgUUkY+pwzu6/xEg==
+  dependencies:
+    "@firebase/component" "0.6.18"
+    "@firebase/installations" "0.6.18"
+    "@firebase/logger" "0.4.4"
+    "@firebase/util" "1.12.1"
+    tslib "^2.1.0"
+
+"@firebase/app-check-compat@0.3.26":
+  version "0.3.26"
+  resolved "https://registry.npmjs.org/@firebase/app-check-compat/-/app-check-compat-0.3.26.tgz"
+  integrity sha512-PkX+XJMLDea6nmnopzFKlr+s2LMQGqdyT2DHdbx1v1dPSqOol2YzgpgymmhC67vitXVpNvS3m/AiWQWWhhRRPQ==
+  dependencies:
+    "@firebase/app-check" "0.10.1"
+    "@firebase/app-check-types" "0.5.3"
+    "@firebase/component" "0.6.18"
+    "@firebase/logger" "0.4.4"
+    "@firebase/util" "1.12.1"
+    tslib "^2.1.0"
+
+"@firebase/app-check-interop-types@0.3.3":
+  version "0.3.3"
+  resolved "https://registry.npmjs.org/@firebase/app-check-interop-types/-/app-check-interop-types-0.3.3.tgz"
+  integrity sha512-gAlxfPLT2j8bTI/qfe3ahl2I2YcBQ8cFIBdhAQA4I2f3TndcO+22YizyGYuttLHPQEpWkhmpFW60VCFEPg4g5A==
+
+"@firebase/app-check-types@0.5.3":
+  version "0.5.3"
+  resolved "https://registry.npmjs.org/@firebase/app-check-types/-/app-check-types-0.5.3.tgz"
+  integrity sha512-hyl5rKSj0QmwPdsAxrI5x1otDlByQ7bvNvVt8G/XPO2CSwE++rmSVf3VEhaeOR4J8ZFaF0Z0NDSmLejPweZ3ng==
+
+"@firebase/app-check@0.10.1":
+  version "0.10.1"
+  resolved "https://registry.npmjs.org/@firebase/app-check/-/app-check-0.10.1.tgz"
+  integrity sha512-MgNdlms9Qb0oSny87pwpjKush9qUwCJhfmTJHDfrcKo4neLGiSeVE4qJkzP7EQTIUFKp84pbTxobSAXkiuQVYQ==
+  dependencies:
+    "@firebase/component" "0.6.18"
+    "@firebase/logger" "0.4.4"
+    "@firebase/util" "1.12.1"
+    tslib "^2.1.0"
+
+"@firebase/app-compat@0.4.2", "@firebase/app-compat@0.x":
+  version "0.4.2"
+  resolved "https://registry.npmjs.org/@firebase/app-compat/-/app-compat-0.4.2.tgz"
+  integrity sha512-LssbyKHlwLeiV8GBATyOyjmHcMpX/tFjzRUCS1jnwGAew1VsBB4fJowyS5Ud5LdFbYpJeS+IQoC+RQxpK7eH3Q==
+  dependencies:
+    "@firebase/app" "0.13.2"
+    "@firebase/component" "0.6.18"
+    "@firebase/logger" "0.4.4"
+    "@firebase/util" "1.12.1"
+    tslib "^2.1.0"
+
+"@firebase/app-types@0.9.3", "@firebase/app-types@0.x":
+  version "0.9.3"
+  resolved "https://registry.npmjs.org/@firebase/app-types/-/app-types-0.9.3.tgz"
+  integrity sha512-kRVpIl4vVGJ4baogMDINbyrIOtOxqhkZQg4jTq3l8Lw6WSk0xfpEYzezFu+Kl4ve4fbPl79dvwRtaFqAC/ucCw==
+
+"@firebase/app@0.13.2", "@firebase/app@0.x":
+  version "0.13.2"
+  resolved "https://registry.npmjs.org/@firebase/app/-/app-0.13.2.tgz"
+  integrity sha512-jwtMmJa1BXXDCiDx1vC6SFN/+HfYG53UkfJa6qeN5ogvOunzbFDO3wISZy5n9xgYFUrEP6M7e8EG++riHNTv9w==
+  dependencies:
+    "@firebase/component" "0.6.18"
+    "@firebase/logger" "0.4.4"
+    "@firebase/util" "1.12.1"
+    idb "7.1.1"
+    tslib "^2.1.0"
+
+"@firebase/auth-compat@0.5.28":
+  version "0.5.28"
+  resolved "https://registry.npmjs.org/@firebase/auth-compat/-/auth-compat-0.5.28.tgz"
+  integrity sha512-HpMSo/cc6Y8IX7bkRIaPPqT//Jt83iWy5rmDWeThXQCAImstkdNo3giFLORJwrZw2ptiGkOij64EH1ztNJzc7Q==
+  dependencies:
+    "@firebase/auth" "1.10.8"
+    "@firebase/auth-types" "0.13.0"
+    "@firebase/component" "0.6.18"
+    "@firebase/util" "1.12.1"
+    tslib "^2.1.0"
+
+"@firebase/auth-interop-types@0.2.4":
+  version "0.2.4"
+  resolved "https://registry.npmjs.org/@firebase/auth-interop-types/-/auth-interop-types-0.2.4.tgz"
+  integrity sha512-JPgcXKCuO+CWqGDnigBtvo09HeBs5u/Ktc2GaFj2m01hLarbxthLNm7Fk8iOP1aqAtXV+fnnGj7U28xmk7IwVA==
+
+"@firebase/auth-types@0.13.0":
+  version "0.13.0"
+  resolved "https://registry.npmjs.org/@firebase/auth-types/-/auth-types-0.13.0.tgz"
+  integrity sha512-S/PuIjni0AQRLF+l9ck0YpsMOdE8GO2KU6ubmBB7P+7TJUCQDa3R1dlgYm9UzGbbePMZsp0xzB93f2b/CgxMOg==
+
+"@firebase/auth@1.10.8":
+  version "1.10.8"
+  resolved "https://registry.npmjs.org/@firebase/auth/-/auth-1.10.8.tgz"
+  integrity sha512-GpuTz5ap8zumr/ocnPY57ZanX02COsXloY6Y/2LYPAuXYiaJRf6BAGDEdRq1BMjP93kqQnKNuKZUTMZbQ8MNYA==
+  dependencies:
+    "@firebase/component" "0.6.18"
+    "@firebase/logger" "0.4.4"
+    "@firebase/util" "1.12.1"
+    tslib "^2.1.0"
+
+"@firebase/component@0.6.18":
+  version "0.6.18"
+  resolved "https://registry.npmjs.org/@firebase/component/-/component-0.6.18.tgz"
+  integrity sha512-n28kPCkE2dL2U28fSxZJjzPPVpKsQminJ6NrzcKXAI0E/lYC8YhfwpyllScqVEvAI3J2QgJZWYgrX+1qGI+SQQ==
+  dependencies:
+    "@firebase/util" "1.12.1"
+    tslib "^2.1.0"
+
+"@firebase/data-connect@0.3.10":
+  version "0.3.10"
+  resolved "https://registry.npmjs.org/@firebase/data-connect/-/data-connect-0.3.10.tgz"
+  integrity sha512-VMVk7zxIkgwlVQIWHOKFahmleIjiVFwFOjmakXPd/LDgaB/5vzwsB5DWIYo+3KhGxWpidQlR8geCIn39YflJIQ==
+  dependencies:
+    "@firebase/auth-interop-types" "0.2.4"
+    "@firebase/component" "0.6.18"
+    "@firebase/logger" "0.4.4"
+    "@firebase/util" "1.12.1"
+    tslib "^2.1.0"
+
+"@firebase/database-compat@2.0.11":
+  version "2.0.11"
+  resolved "https://registry.npmjs.org/@firebase/database-compat/-/database-compat-2.0.11.tgz"
+  integrity sha512-itEsHARSsYS95+udF/TtIzNeQ0Uhx4uIna0sk4E0wQJBUnLc/G1X6D7oRljoOuwwCezRLGvWBRyNrugv/esOEw==
+  dependencies:
+    "@firebase/component" "0.6.18"
+    "@firebase/database" "1.0.20"
+    "@firebase/database-types" "1.0.15"
+    "@firebase/logger" "0.4.4"
+    "@firebase/util" "1.12.1"
+    tslib "^2.1.0"
+
+"@firebase/database-types@1.0.15":
+  version "1.0.15"
+  resolved "https://registry.npmjs.org/@firebase/database-types/-/database-types-1.0.15.tgz"
+  integrity sha512-XWHJ0VUJ0k2E9HDMlKxlgy/ZuTa9EvHCGLjaKSUvrQnwhgZuRU5N3yX6SZ+ftf2hTzZmfRkv+b3QRvGg40bKNw==
+  dependencies:
+    "@firebase/app-types" "0.9.3"
+    "@firebase/util" "1.12.1"
+
+"@firebase/database@1.0.20":
+  version "1.0.20"
+  resolved "https://registry.npmjs.org/@firebase/database/-/database-1.0.20.tgz"
+  integrity sha512-H9Rpj1pQ1yc9+4HQOotFGLxqAXwOzCHsRSRjcQFNOr8lhUt6LeYjf0NSRL04sc4X0dWe8DsCvYKxMYvFG/iOJw==
+  dependencies:
+    "@firebase/app-check-interop-types" "0.3.3"
+    "@firebase/auth-interop-types" "0.2.4"
+    "@firebase/component" "0.6.18"
+    "@firebase/logger" "0.4.4"
+    "@firebase/util" "1.12.1"
+    faye-websocket "0.11.4"
+    tslib "^2.1.0"
+
+"@firebase/firestore-compat@0.3.53":
+  version "0.3.53"
+  resolved "https://registry.npmjs.org/@firebase/firestore-compat/-/firestore-compat-0.3.53.tgz"
+  integrity sha512-qI3yZL8ljwAYWrTousWYbemay2YZa+udLWugjdjju2KODWtLG94DfO4NALJgPLv8CVGcDHNFXoyQexdRA0Cz8Q==
+  dependencies:
+    "@firebase/component" "0.6.18"
+    "@firebase/firestore" "4.8.0"
+    "@firebase/firestore-types" "3.0.3"
+    "@firebase/util" "1.12.1"
+    tslib "^2.1.0"
+
+"@firebase/firestore-types@3.0.3":
+  version "3.0.3"
+  resolved "https://registry.npmjs.org/@firebase/firestore-types/-/firestore-types-3.0.3.tgz"
+  integrity sha512-hD2jGdiWRxB/eZWF89xcK9gF8wvENDJkzpVFb4aGkzfEaKxVRD1kjz1t1Wj8VZEp2LCB53Yx1zD8mrhQu87R6Q==
+
+"@firebase/firestore@4.8.0":
+  version "4.8.0"
+  resolved "https://registry.npmjs.org/@firebase/firestore/-/firestore-4.8.0.tgz"
+  integrity sha512-QSRk+Q1/CaabKyqn3C32KSFiOdZpSqI9rpLK5BHPcooElumOBooPFa6YkDdiT+/KhJtel36LdAacha9BptMj2A==
+  dependencies:
+    "@firebase/component" "0.6.18"
+    "@firebase/logger" "0.4.4"
+    "@firebase/util" "1.12.1"
+    "@firebase/webchannel-wrapper" "1.0.3"
+    "@grpc/grpc-js" "~1.9.0"
+    "@grpc/proto-loader" "^0.7.8"
+    tslib "^2.1.0"
+
+"@firebase/functions-compat@0.3.26":
+  version "0.3.26"
+  resolved "https://registry.npmjs.org/@firebase/functions-compat/-/functions-compat-0.3.26.tgz"
+  integrity sha512-A798/6ff5LcG2LTWqaGazbFYnjBW8zc65YfID/en83ALmkhu2b0G8ykvQnLtakbV9ajrMYPn7Yc/XcYsZIUsjA==
+  dependencies:
+    "@firebase/component" "0.6.18"
+    "@firebase/functions" "0.12.9"
+    "@firebase/functions-types" "0.6.3"
+    "@firebase/util" "1.12.1"
+    tslib "^2.1.0"
+
+"@firebase/functions-types@0.6.3":
+  version "0.6.3"
+  resolved "https://registry.npmjs.org/@firebase/functions-types/-/functions-types-0.6.3.tgz"
+  integrity sha512-EZoDKQLUHFKNx6VLipQwrSMh01A1SaL3Wg6Hpi//x6/fJ6Ee4hrAeswK99I5Ht8roiniKHw4iO0B1Oxj5I4plg==
+
+"@firebase/functions@0.12.9":
+  version "0.12.9"
+  resolved "https://registry.npmjs.org/@firebase/functions/-/functions-0.12.9.tgz"
+  integrity sha512-FG95w6vjbUXN84Ehezc2SDjGmGq225UYbHrb/ptkRT7OTuCiQRErOQuyt1jI1tvcDekdNog+anIObihNFz79Lg==
+  dependencies:
+    "@firebase/app-check-interop-types" "0.3.3"
+    "@firebase/auth-interop-types" "0.2.4"
+    "@firebase/component" "0.6.18"
+    "@firebase/messaging-interop-types" "0.2.3"
+    "@firebase/util" "1.12.1"
+    tslib "^2.1.0"
+
+"@firebase/installations-compat@0.2.18":
+  version "0.2.18"
+  resolved "https://registry.npmjs.org/@firebase/installations-compat/-/installations-compat-0.2.18.tgz"
+  integrity sha512-aLFohRpJO5kKBL/XYL4tN+GdwEB/Q6Vo9eZOM/6Kic7asSUgmSfGPpGUZO1OAaSRGwF4Lqnvi1f/f9VZnKzChw==
+  dependencies:
+    "@firebase/component" "0.6.18"
+    "@firebase/installations" "0.6.18"
+    "@firebase/installations-types" "0.5.3"
+    "@firebase/util" "1.12.1"
+    tslib "^2.1.0"
+
+"@firebase/installations-types@0.5.3":
+  version "0.5.3"
+  resolved "https://registry.npmjs.org/@firebase/installations-types/-/installations-types-0.5.3.tgz"
+  integrity sha512-2FJI7gkLqIE0iYsNQ1P751lO3hER+Umykel+TkLwHj6plzWVxqvfclPUZhcKFVQObqloEBTmpi2Ozn7EkCABAA==
+
+"@firebase/installations@0.6.18":
+  version "0.6.18"
+  resolved "https://registry.npmjs.org/@firebase/installations/-/installations-0.6.18.tgz"
+  integrity sha512-NQ86uGAcvO8nBRwVltRL9QQ4Reidc/3whdAasgeWCPIcrhOKDuNpAALa6eCVryLnK14ua2DqekCOX5uC9XbU/A==
+  dependencies:
+    "@firebase/component" "0.6.18"
+    "@firebase/util" "1.12.1"
+    idb "7.1.1"
+    tslib "^2.1.0"
+
+"@firebase/logger@0.4.4":
+  version "0.4.4"
+  resolved "https://registry.npmjs.org/@firebase/logger/-/logger-0.4.4.tgz"
+  integrity sha512-mH0PEh1zoXGnaR8gD1DeGeNZtWFKbnz9hDO91dIml3iou1gpOnLqXQ2dJfB71dj6dpmUjcQ6phY3ZZJbjErr9g==
+  dependencies:
+    tslib "^2.1.0"
+
+"@firebase/messaging-compat@0.2.22":
+  version "0.2.22"
+  resolved "https://registry.npmjs.org/@firebase/messaging-compat/-/messaging-compat-0.2.22.tgz"
+  integrity sha512-5ZHtRnj6YO6f/QPa/KU6gryjmX4Kg33Kn4gRpNU6M1K47Gm8kcQwPkX7erRUYEH1mIWptfvjvXMHWoZaWjkU7A==
+  dependencies:
+    "@firebase/component" "0.6.18"
+    "@firebase/messaging" "0.12.22"
+    "@firebase/util" "1.12.1"
+    tslib "^2.1.0"
+
+"@firebase/messaging-interop-types@0.2.3":
+  version "0.2.3"
+  resolved "https://registry.npmjs.org/@firebase/messaging-interop-types/-/messaging-interop-types-0.2.3.tgz"
+  integrity sha512-xfzFaJpzcmtDjycpDeCUj0Ge10ATFi/VHVIvEEjDNc3hodVBQADZ7BWQU7CuFpjSHE+eLuBI13z5F/9xOoGX8Q==
+
+"@firebase/messaging@0.12.22":
+  version "0.12.22"
+  resolved "https://registry.npmjs.org/@firebase/messaging/-/messaging-0.12.22.tgz"
+  integrity sha512-GJcrPLc+Hu7nk+XQ70Okt3M1u1eRr2ZvpMbzbc54oTPJZySHcX9ccZGVFcsZbSZ6o1uqumm8Oc7OFkD3Rn1/og==
+  dependencies:
+    "@firebase/component" "0.6.18"
+    "@firebase/installations" "0.6.18"
+    "@firebase/messaging-interop-types" "0.2.3"
+    "@firebase/util" "1.12.1"
+    idb "7.1.1"
+    tslib "^2.1.0"
+
+"@firebase/performance-compat@0.2.20":
+  version "0.2.20"
+  resolved "https://registry.npmjs.org/@firebase/performance-compat/-/performance-compat-0.2.20.tgz"
+  integrity sha512-XkFK5NmOKCBuqOKWeRgBUFZZGz9SzdTZp4OqeUg+5nyjapTiZ4XoiiUL8z7mB2q+63rPmBl7msv682J3rcDXIQ==
+  dependencies:
+    "@firebase/component" "0.6.18"
+    "@firebase/logger" "0.4.4"
+    "@firebase/performance" "0.7.7"
+    "@firebase/performance-types" "0.2.3"
+    "@firebase/util" "1.12.1"
+    tslib "^2.1.0"
+
+"@firebase/performance-types@0.2.3":
+  version "0.2.3"
+  resolved "https://registry.npmjs.org/@firebase/performance-types/-/performance-types-0.2.3.tgz"
+  integrity sha512-IgkyTz6QZVPAq8GSkLYJvwSLr3LS9+V6vNPQr0x4YozZJiLF5jYixj0amDtATf1X0EtYHqoPO48a9ija8GocxQ==
+
+"@firebase/performance@0.7.7":
+  version "0.7.7"
+  resolved "https://registry.npmjs.org/@firebase/performance/-/performance-0.7.7.tgz"
+  integrity sha512-JTlTQNZKAd4+Q5sodpw6CN+6NmwbY72av3Lb6wUKTsL7rb3cuBIhQSrslWbVz0SwK3x0ZNcqX24qtRbwKiv+6w==
+  dependencies:
+    "@firebase/component" "0.6.18"
+    "@firebase/installations" "0.6.18"
+    "@firebase/logger" "0.4.4"
+    "@firebase/util" "1.12.1"
+    tslib "^2.1.0"
+    web-vitals "^4.2.4"
+
+"@firebase/remote-config-compat@0.2.18":
+  version "0.2.18"
+  resolved "https://registry.npmjs.org/@firebase/remote-config-compat/-/remote-config-compat-0.2.18.tgz"
+  integrity sha512-YiETpldhDy7zUrnS8e+3l7cNs0sL7+tVAxvVYU0lu7O+qLHbmdtAxmgY+wJqWdW2c9nDvBFec7QiF58pEUu0qQ==
+  dependencies:
+    "@firebase/component" "0.6.18"
+    "@firebase/logger" "0.4.4"
+    "@firebase/remote-config" "0.6.5"
+    "@firebase/remote-config-types" "0.4.0"
+    "@firebase/util" "1.12.1"
+    tslib "^2.1.0"
+
+"@firebase/remote-config-types@0.4.0":
+  version "0.4.0"
+  resolved "https://registry.npmjs.org/@firebase/remote-config-types/-/remote-config-types-0.4.0.tgz"
+  integrity sha512-7p3mRE/ldCNYt8fmWMQ/MSGRmXYlJ15Rvs9Rk17t8p0WwZDbeK7eRmoI1tvCPaDzn9Oqh+yD6Lw+sGLsLg4kKg==
+
+"@firebase/remote-config@0.6.5":
+  version "0.6.5"
+  resolved "https://registry.npmjs.org/@firebase/remote-config/-/remote-config-0.6.5.tgz"
+  integrity sha512-fU0c8HY0vrVHwC+zQ/fpXSqHyDMuuuglV94VF6Yonhz8Fg2J+KOowPGANM0SZkLvVOYpTeWp3ZmM+F6NjwWLnw==
+  dependencies:
+    "@firebase/component" "0.6.18"
+    "@firebase/installations" "0.6.18"
+    "@firebase/logger" "0.4.4"
+    "@firebase/util" "1.12.1"
+    tslib "^2.1.0"
+
+"@firebase/storage-compat@0.3.24":
+  version "0.3.24"
+  resolved "https://registry.npmjs.org/@firebase/storage-compat/-/storage-compat-0.3.24.tgz"
+  integrity sha512-XHn2tLniiP7BFKJaPZ0P8YQXKiVJX+bMyE2j2YWjYfaddqiJnROJYqSomwW6L3Y+gZAga35ONXUJQju6MB6SOQ==
+  dependencies:
+    "@firebase/component" "0.6.18"
+    "@firebase/storage" "0.13.14"
+    "@firebase/storage-types" "0.8.3"
+    "@firebase/util" "1.12.1"
+    tslib "^2.1.0"
+
+"@firebase/storage-types@0.8.3":
+  version "0.8.3"
+  resolved "https://registry.npmjs.org/@firebase/storage-types/-/storage-types-0.8.3.tgz"
+  integrity sha512-+Muk7g9uwngTpd8xn9OdF/D48uiQ7I1Fae7ULsWPuKoCH3HU7bfFPhxtJYzyhjdniowhuDpQcfPmuNRAqZEfvg==
+
+"@firebase/storage@0.13.14":
+  version "0.13.14"
+  resolved "https://registry.npmjs.org/@firebase/storage/-/storage-0.13.14.tgz"
+  integrity sha512-xTq5ixxORzx+bfqCpsh+o3fxOsGoDjC1nO0Mq2+KsOcny3l7beyBhP/y1u5T6mgsFQwI1j6oAkbT5cWdDBx87g==
+  dependencies:
+    "@firebase/component" "0.6.18"
+    "@firebase/util" "1.12.1"
+    tslib "^2.1.0"
+
+"@firebase/util@1.12.1", "@firebase/util@1.x":
+  version "1.12.1"
+  resolved "https://registry.npmjs.org/@firebase/util/-/util-1.12.1.tgz"
+  integrity sha512-zGlBn/9Dnya5ta9bX/fgEoNC3Cp8s6h+uYPYaDieZsFOAdHP/ExzQ/eaDgxD3GOROdPkLKpvKY0iIzr9adle0w==
+  dependencies:
+    tslib "^2.1.0"
+
+"@firebase/webchannel-wrapper@1.0.3":
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/@firebase/webchannel-wrapper/-/webchannel-wrapper-1.0.3.tgz"
+  integrity sha512-2xCRM9q9FlzGZCdgDMJwc0gyUkWFtkosy7Xxr6sFgQwn+wMNIWd7xIvYNauU1r64B5L5rsGKy/n9TKJ0aAFeqQ==
+
 "@floating-ui/core@^1.6.0":
   version "1.6.9"
   resolved "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.9.tgz"
@@ -1301,7 +1692,7 @@
   resolved "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.0.tgz"
   integrity sha512-HNii132xfomg5QVZw0HwXXpN22s7VBHQBv9CeOu9tfJnhsWQNd2lmTNi8CSrnw5B+5YOmzu1UoPAyxaXsJ6RgQ==
 
-"@fortawesome/fontawesome-svg-core@^6.3.0":
+"@fortawesome/fontawesome-svg-core@^6.3.0", "@fortawesome/fontawesome-svg-core@~1 || ~6":
   version "6.4.0"
   resolved "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.4.0.tgz"
   integrity sha512-Bertv8xOiVELz5raB2FlXDPKt+m94MQ3JgDfsVbrqNpLU9+UE2E18GKjLKw+d3XbeYPqg1pzyQKGsrzbw+pPaw==
@@ -1339,6 +1730,24 @@
   resolved "https://registry.npmjs.org/@gilbarbara/deep-equal/-/deep-equal-0.3.1.tgz"
   integrity sha512-I7xWjLs2YSVMc5gGx1Z3ZG1lgFpITPndpi8Ku55GeEIKpACCPQNS/OTqQbxgTCfq0Ncvcc+CrFov96itVh6Qvw==
 
+"@grpc/grpc-js@~1.9.0":
+  version "1.9.15"
+  resolved "https://registry.npmjs.org/@grpc/grpc-js/-/grpc-js-1.9.15.tgz"
+  integrity sha512-nqE7Hc0AzI+euzUwDAy0aY5hCp10r734gMGRdU+qOPX0XSceI2ULrcXB5U2xSc5VkWwalCj4M7GzCAygZl2KoQ==
+  dependencies:
+    "@grpc/proto-loader" "^0.7.8"
+    "@types/node" ">=12.12.47"
+
+"@grpc/proto-loader@^0.7.8":
+  version "0.7.15"
+  resolved "https://registry.npmjs.org/@grpc/proto-loader/-/proto-loader-0.7.15.tgz"
+  integrity sha512-tMXdRCfYVixjuFK+Hk0Q1s38gV9zDiDJfWL3h1rv4Qc39oILCu1TRTDt7+fGUI8K4G1Fj125Hx/ru3azECWTyQ==
+  dependencies:
+    lodash.camelcase "^4.3.0"
+    long "^5.0.0"
+    protobufjs "^7.2.5"
+    yargs "^17.7.2"
+
 "@headlessui/react@^1.7.2":
   version "1.7.15"
   resolved "https://registry.npmjs.org/@headlessui/react/-/react-1.7.15.tgz"
@@ -1596,7 +2005,7 @@
   resolved "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.17.1.tgz"
   integrity sha512-OcZj+cs6EfUD39IoPBOgN61zf1XFVY+imsGoBDwXeSq2UHJZE3N59zzBOVjclck91Ne3e9gudONOeILvHCIhUA==
 
-"@mui/material@^5.0.0", "@mui/material@^5.15.2":
+"@mui/material@^5.0.0", "@mui/material@^5.15.2", "@mui/material@^5.4.1":
   version "5.17.1"
   resolved "https://registry.npmjs.org/@mui/material/-/material-5.17.1.tgz"
   integrity sha512-2B33kQf+GmPnrvXXweWAx+crbiUEsxCdCN979QDYnlH9ox4pd+0/IBriWLV+l6ORoBF60w39cWjFnJYGFdzXcw==
@@ -1633,7 +2042,7 @@
     csstype "^3.1.3"
     prop-types "^15.8.1"
 
-"@mui/system@^5.17.1":
+"@mui/system@^5.17.1", "@mui/system@^5.4.1":
   version "5.17.1"
   resolved "https://registry.npmjs.org/@mui/system/-/system-5.17.1.tgz"
   integrity sha512-aJrmGfQpyF0U4D4xYwA6ueVtQcEMebET43CUmKMP7e7iFh3sMIF3sBR0l8Urb4pqx1CBjHAaWgB0ojpND4Q3Jg==
@@ -1734,6 +2143,59 @@
   resolved "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz"
   integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
 
+"@protobufjs/aspromise@^1.1.1", "@protobufjs/aspromise@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.npmjs.org/@protobufjs/aspromise/-/aspromise-1.1.2.tgz"
+  integrity sha512-j+gKExEuLmKwvz3OgROXtrJ2UG2x8Ch2YZUxahh+s1F2HZ+wAceUNLkvy6zKCPVRkU++ZWQrdxsUeQXmcg4uoQ==
+
+"@protobufjs/base64@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.npmjs.org/@protobufjs/base64/-/base64-1.1.2.tgz"
+  integrity sha512-AZkcAA5vnN/v4PDqKyMR5lx7hZttPDgClv83E//FMNhR2TMcLUhfRUBHCmSl0oi9zMgDDqRUJkSxO3wm85+XLg==
+
+"@protobufjs/codegen@^2.0.4":
+  version "2.0.4"
+  resolved "https://registry.npmjs.org/@protobufjs/codegen/-/codegen-2.0.4.tgz"
+  integrity sha512-YyFaikqM5sH0ziFZCN3xDC7zeGaB/d0IUb9CATugHWbd1FRFwWwt4ld4OYMPWu5a3Xe01mGAULCdqhMlPl29Jg==
+
+"@protobufjs/eventemitter@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/@protobufjs/eventemitter/-/eventemitter-1.1.0.tgz"
+  integrity sha512-j9ednRT81vYJ9OfVuXG6ERSTdEL1xVsNgqpkxMsbIabzSo3goCjDIveeGv5d03om39ML71RdmrGNjG5SReBP/Q==
+
+"@protobufjs/fetch@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/@protobufjs/fetch/-/fetch-1.1.0.tgz"
+  integrity sha512-lljVXpqXebpsijW71PZaCYeIcE5on1w5DlQy5WH6GLbFryLUrBD4932W/E2BSpfRJWseIL4v/KPgBFxDOIdKpQ==
+  dependencies:
+    "@protobufjs/aspromise" "^1.1.1"
+    "@protobufjs/inquire" "^1.1.0"
+
+"@protobufjs/float@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/@protobufjs/float/-/float-1.0.2.tgz"
+  integrity sha512-Ddb+kVXlXst9d+R9PfTIxh1EdNkgoRe5tOX6t01f1lYWOvJnSPDBlG241QLzcyPdoNTsblLUdujGSE4RzrTZGQ==
+
+"@protobufjs/inquire@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/@protobufjs/inquire/-/inquire-1.1.0.tgz"
+  integrity sha512-kdSefcPdruJiFMVSbn801t4vFK7KB/5gd2fYvrxhuJYg8ILrmn9SKSX2tZdV6V+ksulWqS7aXjBcRXl3wHoD9Q==
+
+"@protobufjs/path@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.npmjs.org/@protobufjs/path/-/path-1.1.2.tgz"
+  integrity sha512-6JOcJ5Tm08dOHAbdR3GrvP+yUUfkjG5ePsHYczMFLq3ZmMkAD98cDgcT2iA1lJ9NVwFd4tH/iSSoe44YWkltEA==
+
+"@protobufjs/pool@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/@protobufjs/pool/-/pool-1.1.0.tgz"
+  integrity sha512-0kELaGSIDBKvcgS4zkjz1PeddatrjYcmMWOlAuAPwAeccUrPHdUqo/J6LiymHHEiJT5NrF1UVwxY14f+fy4WQw==
+
+"@protobufjs/utf8@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz"
+  integrity sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==
+
 "@puppeteer/browsers@2.3.0":
   version "2.3.0"
   resolved "https://registry.npmjs.org/@puppeteer/browsers/-/browsers-2.3.0.tgz"
@@ -2024,6 +2486,22 @@
   dependencies:
     "@types/ms" "*"
 
+"@types/eslint-scope@^3.7.7":
+  version "3.7.7"
+  resolved "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.7.tgz"
+  integrity sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==
+  dependencies:
+    "@types/eslint" "*"
+    "@types/estree" "*"
+
+"@types/eslint@*":
+  version "9.6.1"
+  resolved "https://registry.npmjs.org/@types/eslint/-/eslint-9.6.1.tgz"
+  integrity sha512-FXx2pKgId/WyYo2jXw63kk7/+TY7u7AziEJxJAnSFzHlqTAS3Ync6SvgYAN/k4/PQpnnVuzoMuVnByKK2qp0ag==
+  dependencies:
+    "@types/estree" "*"
+    "@types/json-schema" "*"
+
 "@types/estree-jsx@^1.0.0":
   version "1.0.5"
   resolved "https://registry.npmjs.org/@types/estree-jsx/-/estree-jsx-1.0.5.tgz"
@@ -2031,10 +2509,10 @@
   dependencies:
     "@types/estree" "*"
 
-"@types/estree@*", "@types/estree@^1.0.0":
-  version "1.0.7"
-  resolved "https://registry.npmjs.org/@types/estree/-/estree-1.0.7.tgz"
-  integrity sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==
+"@types/estree@*", "@types/estree@^1.0.0", "@types/estree@^1.0.8":
+  version "1.0.8"
+  resolved "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz"
+  integrity sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==
 
 "@types/estree@0.0.39":
   version "0.0.39"
@@ -2068,7 +2546,7 @@
   dependencies:
     "@types/unist" "*"
 
-"@types/hoist-non-react-statics@^3.3.0":
+"@types/hoist-non-react-statics@^3.3.0", "@types/hoist-non-react-statics@>= 3.3.1":
   version "3.3.6"
   resolved "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.6.tgz"
   integrity sha512-lPByRJUer/iN/xa4qpyL0qmL11DqNW81iU/IG1S3uvRUq4oKagz8VCxZjiWkumgt66YT3vOdDgZ0o32sGKtCEw==
@@ -2081,7 +2559,7 @@
   resolved "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-2.2.7.tgz"
   integrity sha512-aLkWa0C0vO5b4Sr798E26QgOkss68Un0bLjs7u9qxzPT5CG+8DuNTffWES58YzJs3hrVAOs1wonycqEBqNJubA==
 
-"@types/json-schema@^7.0.5", "@types/json-schema@^7.0.9":
+"@types/json-schema@*", "@types/json-schema@^7.0.15", "@types/json-schema@^7.0.5", "@types/json-schema@^7.0.9":
   version "7.0.15"
   resolved "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz"
   integrity sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==
@@ -2113,7 +2591,7 @@
   resolved "https://registry.npmjs.org/@types/ms/-/ms-2.1.0.tgz"
   integrity sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==
 
-"@types/node@*", "@types/node@>=8.1.0":
+"@types/node@*", "@types/node@>= 12", "@types/node@>=12.12.47", "@types/node@>=13.7.0", "@types/node@>=8.1.0":
   version "20.4.2"
   resolved "https://registry.npmjs.org/@types/node/-/node-20.4.2.tgz"
   integrity sha512-Dd0BYtWgnWJKwO1jkmTrzofjK2QXXcai0dmtzvIBhcA+RsG5h8R3xlyta0kGOZRNfL9GuRtb1knmPEhQrePCEw==
@@ -2148,7 +2626,7 @@
   resolved "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.12.tgz"
   integrity sha512-8TV6R3h2j7a91c+1DXdJi3Syo69zzIZbz7Lg5tORM5LEJG7X/E6a1V3drRyBRZq7/utz7A+c4OgYLiLcYGHG6w==
 
-"@types/react@*":
+"@types/react@*", "@types/react@^17.0.0 || ^18.0.0 || ^19.0.0", "@types/react@>= 16", "@types/react@>=0.0.0 <=99", "@types/react@>=18":
   version "18.2.15"
   resolved "https://registry.npmjs.org/@types/react/-/react-18.2.15.tgz"
   integrity sha512-oEjE7TQt1fFTFSbf8kkNuc798ahTUzn3Le67/PWjE8MAfYAD/qB7O8hSTcromLFqHCt9bcdOg5GXMokzTjJ5SA==
@@ -2348,6 +2826,127 @@
   resolved "https://registry.npmjs.org/@vercel/analytics/-/analytics-1.5.0.tgz"
   integrity sha512-MYsBzfPki4gthY5HnYN7jgInhAZ7Ac1cYDoRWFomwGHWEX7odTEzbtg9kf/QSo7XEsEAqlQugA6gJ2WS2DEa3g==
 
+"@webassemblyjs/ast@^1.14.1", "@webassemblyjs/ast@1.14.1":
+  version "1.14.1"
+  resolved "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.14.1.tgz"
+  integrity sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==
+  dependencies:
+    "@webassemblyjs/helper-numbers" "1.13.2"
+    "@webassemblyjs/helper-wasm-bytecode" "1.13.2"
+
+"@webassemblyjs/floating-point-hex-parser@1.13.2":
+  version "1.13.2"
+  resolved "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.13.2.tgz"
+  integrity sha512-6oXyTOzbKxGH4steLbLNOu71Oj+C8Lg34n6CqRvqfS2O71BxY6ByfMDRhBytzknj9yGUPVJ1qIKhRlAwO1AovA==
+
+"@webassemblyjs/helper-api-error@1.13.2":
+  version "1.13.2"
+  resolved "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.13.2.tgz"
+  integrity sha512-U56GMYxy4ZQCbDZd6JuvvNV/WFildOjsaWD3Tzzvmw/mas3cXzRJPMjP83JqEsgSbyrmaGjBfDtV7KDXV9UzFQ==
+
+"@webassemblyjs/helper-buffer@1.14.1":
+  version "1.14.1"
+  resolved "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.14.1.tgz"
+  integrity sha512-jyH7wtcHiKssDtFPRB+iQdxlDf96m0E39yb0k5uJVhFGleZFoNw1c4aeIcVUPPbXUVJ94wwnMOAqUHyzoEPVMA==
+
+"@webassemblyjs/helper-numbers@1.13.2":
+  version "1.13.2"
+  resolved "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.13.2.tgz"
+  integrity sha512-FE8aCmS5Q6eQYcV3gI35O4J789wlQA+7JrqTTpJqn5emA4U2hvwJmvFRC0HODS+3Ye6WioDklgd6scJ3+PLnEA==
+  dependencies:
+    "@webassemblyjs/floating-point-hex-parser" "1.13.2"
+    "@webassemblyjs/helper-api-error" "1.13.2"
+    "@xtuc/long" "4.2.2"
+
+"@webassemblyjs/helper-wasm-bytecode@1.13.2":
+  version "1.13.2"
+  resolved "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.13.2.tgz"
+  integrity sha512-3QbLKy93F0EAIXLh0ogEVR6rOubA9AoZ+WRYhNbFyuB70j3dRdwH9g+qXhLAO0kiYGlg3TxDV+I4rQTr/YNXkA==
+
+"@webassemblyjs/helper-wasm-section@1.14.1":
+  version "1.14.1"
+  resolved "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.14.1.tgz"
+  integrity sha512-ds5mXEqTJ6oxRoqjhWDU83OgzAYjwsCV8Lo/N+oRsNDmx/ZDpqalmrtgOMkHwxsG0iI//3BwWAErYRHtgn0dZw==
+  dependencies:
+    "@webassemblyjs/ast" "1.14.1"
+    "@webassemblyjs/helper-buffer" "1.14.1"
+    "@webassemblyjs/helper-wasm-bytecode" "1.13.2"
+    "@webassemblyjs/wasm-gen" "1.14.1"
+
+"@webassemblyjs/ieee754@1.13.2":
+  version "1.13.2"
+  resolved "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.13.2.tgz"
+  integrity sha512-4LtOzh58S/5lX4ITKxnAK2USuNEvpdVV9AlgGQb8rJDHaLeHciwG4zlGr0j/SNWlr7x3vO1lDEsuePvtcDNCkw==
+  dependencies:
+    "@xtuc/ieee754" "^1.2.0"
+
+"@webassemblyjs/leb128@1.13.2":
+  version "1.13.2"
+  resolved "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.13.2.tgz"
+  integrity sha512-Lde1oNoIdzVzdkNEAWZ1dZ5orIbff80YPdHx20mrHwHrVNNTjNr8E3xz9BdpcGqRQbAEa+fkrCb+fRFTl/6sQw==
+  dependencies:
+    "@xtuc/long" "4.2.2"
+
+"@webassemblyjs/utf8@1.13.2":
+  version "1.13.2"
+  resolved "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.13.2.tgz"
+  integrity sha512-3NQWGjKTASY1xV5m7Hr0iPeXD9+RDobLll3T9d2AO+g3my8xy5peVyjSag4I50mR1bBSN/Ct12lo+R9tJk0NZQ==
+
+"@webassemblyjs/wasm-edit@^1.14.1":
+  version "1.14.1"
+  resolved "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.14.1.tgz"
+  integrity sha512-RNJUIQH/J8iA/1NzlE4N7KtyZNHi3w7at7hDjvRNm5rcUXa00z1vRz3glZoULfJ5mpvYhLybmVcwcjGrC1pRrQ==
+  dependencies:
+    "@webassemblyjs/ast" "1.14.1"
+    "@webassemblyjs/helper-buffer" "1.14.1"
+    "@webassemblyjs/helper-wasm-bytecode" "1.13.2"
+    "@webassemblyjs/helper-wasm-section" "1.14.1"
+    "@webassemblyjs/wasm-gen" "1.14.1"
+    "@webassemblyjs/wasm-opt" "1.14.1"
+    "@webassemblyjs/wasm-parser" "1.14.1"
+    "@webassemblyjs/wast-printer" "1.14.1"
+
+"@webassemblyjs/wasm-gen@1.14.1":
+  version "1.14.1"
+  resolved "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.14.1.tgz"
+  integrity sha512-AmomSIjP8ZbfGQhumkNvgC33AY7qtMCXnN6bL2u2Js4gVCg8fp735aEiMSBbDR7UQIj90n4wKAFUSEd0QN2Ukg==
+  dependencies:
+    "@webassemblyjs/ast" "1.14.1"
+    "@webassemblyjs/helper-wasm-bytecode" "1.13.2"
+    "@webassemblyjs/ieee754" "1.13.2"
+    "@webassemblyjs/leb128" "1.13.2"
+    "@webassemblyjs/utf8" "1.13.2"
+
+"@webassemblyjs/wasm-opt@1.14.1":
+  version "1.14.1"
+  resolved "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.14.1.tgz"
+  integrity sha512-PTcKLUNvBqnY2U6E5bdOQcSM+oVP/PmrDY9NzowJjislEjwP/C4an2303MCVS2Mg9d3AJpIGdUFIQQWbPds0Sw==
+  dependencies:
+    "@webassemblyjs/ast" "1.14.1"
+    "@webassemblyjs/helper-buffer" "1.14.1"
+    "@webassemblyjs/wasm-gen" "1.14.1"
+    "@webassemblyjs/wasm-parser" "1.14.1"
+
+"@webassemblyjs/wasm-parser@^1.14.1", "@webassemblyjs/wasm-parser@1.14.1":
+  version "1.14.1"
+  resolved "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.14.1.tgz"
+  integrity sha512-JLBl+KZ0R5qB7mCnud/yyX08jWFw5MsoalJ1pQ4EdFlgj9VdXKGuENGsiCIjegI1W7p91rUlcB/LB5yRJKNTcQ==
+  dependencies:
+    "@webassemblyjs/ast" "1.14.1"
+    "@webassemblyjs/helper-api-error" "1.13.2"
+    "@webassemblyjs/helper-wasm-bytecode" "1.13.2"
+    "@webassemblyjs/ieee754" "1.13.2"
+    "@webassemblyjs/leb128" "1.13.2"
+    "@webassemblyjs/utf8" "1.13.2"
+
+"@webassemblyjs/wast-printer@1.14.1":
+  version "1.14.1"
+  resolved "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.14.1.tgz"
+  integrity sha512-kPSSXE6De1XOR820C90RIo2ogvZG+c3KiHzqUoO/F34Y2shGzesfqv7o57xrxovZJH/MetF5UjroJ/R/3isoiw==
+  dependencies:
+    "@webassemblyjs/ast" "1.14.1"
+    "@xtuc/long" "4.2.2"
+
 "@webcontainer/api@^1.5.1-internal.5":
   version "1.5.3"
   resolved "https://registry.npmjs.org/@webcontainer/api/-/api-1.5.3.tgz"
@@ -2358,20 +2957,35 @@
   resolved "https://registry.npmjs.org/@xobotyi/scrollbar-width/-/scrollbar-width-1.9.5.tgz"
   integrity sha512-N8tkAACJx2ww8vFMneJmaAgmjAG1tnVBZJRLRcx061tmsLRZHSEZSLuGWnwPtunsSLvSqXQ2wfp7Mgqg1I+2dQ==
 
+"@xtuc/ieee754@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz"
+  integrity sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==
+
+"@xtuc/long@4.2.2":
+  version "4.2.2"
+  resolved "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz"
+  integrity sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==
+
 accessor-fn@1:
   version "1.5.3"
   resolved "https://registry.npmjs.org/accessor-fn/-/accessor-fn-1.5.3.tgz"
   integrity sha512-rkAofCwe/FvYFUlMB0v0gWmhqtfAtV1IUkdPbfhTUyYniu5LrC0A0UJkTH0Jv3S8SvwkmfuAlY+mQIJATdocMA==
 
+acorn-import-phases@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/acorn-import-phases/-/acorn-import-phases-1.0.3.tgz"
+  integrity sha512-jtKLnfoOzm28PazuQ4dVBcE9Jeo6ha1GAJvq3N0LlNOszmTfx+wSycBehn+FN0RnyeR77IBxN/qVYMw0Rlj0Xw==
+
 acorn-jsx@^5.3.2:
   version "5.3.2"
   resolved "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz"
   integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
 
-acorn@^8.8.2, acorn@^8.9.0:
-  version "8.14.1"
-  resolved "https://registry.npmjs.org/acorn/-/acorn-8.14.1.tgz"
-  integrity sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==
+"acorn@^6.0.0 || ^7.0.0 || ^8.0.0", acorn@^8.14.0, acorn@^8.15.0, acorn@^8.8.2, acorn@^8.9.0:
+  version "8.15.0"
+  resolved "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz"
+  integrity sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==
 
 agent-base@^7.1.0, agent-base@^7.1.2:
   version "7.1.3"
@@ -2397,7 +3011,7 @@ ajv-keywords@^5.1.0:
   dependencies:
     fast-deep-equal "^3.1.3"
 
-ajv@^6.10.0, ajv@^6.12.4:
+ajv@^6.10.0, ajv@^6.12.4, ajv@^6.9.1:
   version "6.12.6"
   resolved "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz"
   integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
@@ -2417,7 +3031,7 @@ ajv@^8.0.0:
     json-schema-traverse "^1.0.0"
     require-from-string "^2.0.2"
 
-ajv@^8.6.0:
+ajv@^8.6.0, ajv@>=8:
   version "8.17.1"
   resolved "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz"
   integrity sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==
@@ -2427,7 +3041,7 @@ ajv@^8.6.0:
     json-schema-traverse "^1.0.0"
     require-from-string "^2.0.2"
 
-ajv@^8.9.0:
+ajv@^8.8.2, ajv@^8.9.0:
   version "8.17.1"
   resolved "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz"
   integrity sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==
@@ -2702,7 +3316,7 @@ balanced-match@^1.0.0:
   resolved "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz"
   integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
 
-bare-events@^2.2.0, bare-events@^2.5.4:
+bare-events@*, bare-events@^2.2.0, bare-events@^2.5.4:
   version "2.5.4"
   resolved "https://registry.npmjs.org/bare-events/-/bare-events-2.5.4.tgz"
   integrity sha512-+gFfDkR8pj4/TrWCGUGWmJIkBwuxPS5F+a5yWjOHQt2hHvNZd5YLzadjmDUtFmMM4y429bnKLa8bYBMHcYdnQA==
@@ -2787,7 +3401,7 @@ braces@^3.0.2, braces@~3.0.2:
   dependencies:
     fill-range "^7.0.1"
 
-browserslist@^4.21.5, browserslist@^4.24.0, browserslist@^4.24.4:
+browserslist@^4.21.5, browserslist@^4.24.0, browserslist@^4.24.4, "browserslist@>= 4.21.0":
   version "4.24.4"
   resolved "https://registry.npmjs.org/browserslist/-/browserslist-4.24.4.tgz"
   integrity sha512-KDi1Ny1gSePi1vm0q4oxSF8b4DR44GF4BbmS2YdhPLOEqd8pDviZOGH/GsmRwoWJ2+5Lr085X7naowMwKHDG1A==
@@ -2904,7 +3518,7 @@ character-reference-invalid@^2.0.0:
   resolved "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz"
   integrity sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==
 
-chart.js@^4.4.3:
+chart.js@^4.1.1, chart.js@^4.4.3:
   version "4.4.9"
   resolved "https://registry.npmjs.org/chart.js/-/chart.js-4.4.9.tgz"
   integrity sha512-EyZ9wWKgpAU0fLJ43YAEIF8sr5F2W3LqbS40ZJyHIner2lY14ufqv2VMp69MAiZ2rpwxEUxEhIH/0U3xyRynxg==
@@ -2926,6 +3540,11 @@ chokidar@^3.5.3:
   optionalDependencies:
     fsevents "~2.3.2"
 
+chrome-trace-event@^1.0.2:
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.4.tgz"
+  integrity sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==
+
 chromium-bidi@0.6.3:
   version "0.6.3"
   resolved "https://registry.npmjs.org/chromium-bidi/-/chromium-bidi-0.6.3.tgz"
@@ -3535,7 +4154,7 @@ devlop@^1.0.0, devlop@^1.1.0:
   dependencies:
     dequal "^2.0.0"
 
-devtools-protocol@0.0.1312386:
+devtools-protocol@*, devtools-protocol@0.0.1312386:
   version "0.0.1312386"
   resolved "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1312386.tgz"
   integrity sha512-DPnhUXvmvKT2dFA/j7B+riVLUt9Q6RKJlcppojL5CoRywJJKLDYnRlw0gTFKfgDPHP5E04UoB71SxoJlVZy8FA==
@@ -3612,7 +4231,7 @@ earcut@3:
   resolved "https://registry.npmjs.org/earcut/-/earcut-3.0.1.tgz"
   integrity sha512-0l1/0gOjESMeQyYaK5IDiPNvFeu93Z/cO0TjZh9eZ1vyCtZnA7KMZ8rQggpsJHIbGSdrqYq9OhuveadOVHCshw==
 
-easymde@^2.18.0:
+easymde@^2.18.0, "easymde@>= 2.0.0 < 3.0.0":
   version "2.18.0"
   resolved "https://registry.npmjs.org/easymde/-/easymde-2.18.0.tgz"
   integrity sha512-IxVVUxNWIoXLeqtBU4BLc+eS/ScYhT1Dcb6yF5Wchoj1iXAV+TIIDWx+NCaZhY7RcSHqDPKllbYq7nwGKILnoA==
@@ -3678,6 +4297,14 @@ engine.io-parser@~5.2.1:
   resolved "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.2.3.tgz"
   integrity sha512-HqD3yTBfnBxIrbnM1DoD6Pcq8NECnh8d4As1Qgh0z5Gg3jRRIqijury0CL3ghu/edArpUYiYqQiDUQBIs4np3Q==
 
+enhanced-resolve@^5.17.2:
+  version "5.18.2"
+  resolved "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.2.tgz"
+  integrity sha512-6Jw4sE1maoRJo3q8MsSIn2onJFbLTOjY9hlx4DZXmOKvLRd1Ok2kXmAGXaafL2+ijsJZ1ClYbl/pmqr9+k4iUQ==
+  dependencies:
+    graceful-fs "^4.2.4"
+    tapable "^2.2.0"
+
 entities@^4.5.0:
   version "4.5.0"
   resolved "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz"
@@ -3757,6 +4384,11 @@ es-errors@^1.3.0:
   resolved "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz"
   integrity sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==
 
+es-module-lexer@^1.2.1:
+  version "1.7.0"
+  resolved "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.7.0.tgz"
+  integrity sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==
+
 es-object-atoms@^1.0.0, es-object-atoms@^1.1.1:
   version "1.1.1"
   resolved "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz"
@@ -3863,7 +4495,7 @@ eslint-module-utils@^2.7.4:
   dependencies:
     debug "^3.2.7"
 
-eslint-plugin-import@^2.26.0:
+eslint-plugin-import@*, eslint-plugin-import@^2.26.0:
   version "2.27.5"
   resolved "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.27.5.tgz"
   integrity sha512-LmEt3GVofgiGuiE+ORpnvP+kAm3h6MLZJ4Q5HCyHADofsb4VzXFsRiWj3c0OFiV+3DWFh0qg3v9gcPlfc3zRow==
@@ -3940,6 +4572,14 @@ eslint-scope@^7.1.1:
     esrecurse "^4.3.0"
     estraverse "^5.2.0"
 
+eslint-scope@5.1.1:
+  version "5.1.1"
+  resolved "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz"
+  integrity sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==
+  dependencies:
+    esrecurse "^4.3.0"
+    estraverse "^4.1.1"
+
 eslint-utils@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/eslint-utils/-/eslint-utils-3.0.0.tgz"
@@ -3957,7 +4597,7 @@ eslint-visitor-keys@^3.3.0, eslint-visitor-keys@^3.4.1:
   resolved "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.1.tgz"
   integrity sha512-pZnmmLwYzf+kWaM/Qgrvpen51upAktaaiI01nsJD/Yr3lMOdNtq0cxkrrg16w64VtisN6okbs7Q8AfGqj4c9fA==
 
-eslint@8.26.0:
+eslint@*, "eslint@^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8", "eslint@^3 || ^4 || ^5 || ^6 || ^7 || ^8", "eslint@^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0", "eslint@^6.0.0 || ^7.0.0 || ^8.0.0", "eslint@^7.23.0 || ^8.0.0", eslint@>=5, eslint@>=7.0.0, eslint@8.26.0:
   version "8.26.0"
   resolved "https://registry.npmjs.org/eslint/-/eslint-8.26.0.tgz"
   integrity sha512-kzJkpaw1Bfwheq4VXUezFriD1GxszX6dUekM7Z3aC2o4hju+tsR/XyTC3RcoSD7jmy9VkPU3+N6YjVU2e96Oyg==
@@ -4030,6 +4670,11 @@ esrecurse@^4.3.0:
   dependencies:
     estraverse "^5.2.0"
 
+estraverse@^4.1.1:
+  version "4.3.0"
+  resolved "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz"
+  integrity sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==
+
 estraverse@^5.1.0, estraverse@^5.2.0, estraverse@^5.3.0:
   version "5.3.0"
   resolved "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz"
@@ -4055,6 +4700,11 @@ eventemitter3@^4.0.0, eventemitter3@^4.0.1:
   resolved "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz"
   integrity sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==
 
+events@^3.2.0:
+  version "3.3.0"
+  resolved "https://registry.npmjs.org/events/-/events-3.3.0.tgz"
+  integrity sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==
+
 extend@^3.0.0:
   version "3.0.2"
   resolved "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz"
@@ -4129,6 +4779,13 @@ fastq@^1.6.0:
   dependencies:
     reusify "^1.0.4"
 
+faye-websocket@0.11.4:
+  version "0.11.4"
+  resolved "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.4.tgz"
+  integrity sha512-CzbClwlXAuiRQAlUyfqPgvPoNKTckTPGfwZV4ZdAhVcP2lh9KUxJg2b5GkE7XbjKQ3YJnQ9z6D9ntLAlB+tP8g==
+  dependencies:
+    websocket-driver ">=0.5.1"
+
 fd-slicer@~1.1.0:
   version "1.1.0"
   resolved "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz"
@@ -4203,6 +4860,40 @@ find-up@^6.3.0:
     locate-path "^7.1.0"
     path-exists "^5.0.0"
 
+"firebase@>= 9.0.0":
+  version "11.10.0"
+  resolved "https://registry.npmjs.org/firebase/-/firebase-11.10.0.tgz"
+  integrity sha512-nKBXoDzF0DrXTBQJlZa+sbC5By99ysYU1D6PkMRYknm0nCW7rJly47q492Ht7Ndz5MeYSBuboKuhS1e6mFC03w==
+  dependencies:
+    "@firebase/ai" "1.4.1"
+    "@firebase/analytics" "0.10.17"
+    "@firebase/analytics-compat" "0.2.23"
+    "@firebase/app" "0.13.2"
+    "@firebase/app-check" "0.10.1"
+    "@firebase/app-check-compat" "0.3.26"
+    "@firebase/app-compat" "0.4.2"
+    "@firebase/app-types" "0.9.3"
+    "@firebase/auth" "1.10.8"
+    "@firebase/auth-compat" "0.5.28"
+    "@firebase/data-connect" "0.3.10"
+    "@firebase/database" "1.0.20"
+    "@firebase/database-compat" "2.0.11"
+    "@firebase/firestore" "4.8.0"
+    "@firebase/firestore-compat" "0.3.53"
+    "@firebase/functions" "0.12.9"
+    "@firebase/functions-compat" "0.3.26"
+    "@firebase/installations" "0.6.18"
+    "@firebase/installations-compat" "0.2.18"
+    "@firebase/messaging" "0.12.22"
+    "@firebase/messaging-compat" "0.2.22"
+    "@firebase/performance" "0.7.7"
+    "@firebase/performance-compat" "0.2.20"
+    "@firebase/remote-config" "0.6.5"
+    "@firebase/remote-config-compat" "0.2.18"
+    "@firebase/storage" "0.13.14"
+    "@firebase/storage-compat" "0.3.24"
+    "@firebase/util" "1.12.1"
+
 flat-cache@^3.0.4:
   version "3.0.4"
   resolved "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz"
@@ -4402,6 +5093,11 @@ glob-parent@^6.0.2:
   dependencies:
     is-glob "^4.0.3"
 
+glob-to-regexp@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz"
+  integrity sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==
+
 glob@^7.0.3, glob@^7.1.3, glob@^7.1.6, glob@^7.2.0:
   version "7.2.3"
   resolved "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz"
@@ -4497,7 +5193,7 @@ gopd@^1.0.1, gopd@^1.2.0:
   resolved "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz"
   integrity sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==
 
-graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.11:
+graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.11, graceful-fs@^4.2.4:
   version "4.2.11"
   resolved "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz"
   integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
@@ -4770,6 +5466,11 @@ html-void-elements@^3.0.0:
   resolved "https://registry.npmjs.org/html-void-elements/-/html-void-elements-3.0.0.tgz"
   integrity sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==
 
+http-parser-js@>=0.5.1:
+  version "0.5.10"
+  resolved "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.10.tgz"
+  integrity sha512-Pysuw9XpUq5dVc/2SMHpuTY01RFl8fttgcyunjL7eEMhGM3cI4eOmiCycJDVCo/7O7ClfQD3SaI6ftDzqOXYMA==
+
 http-proxy-agent@^7.0.0, http-proxy-agent@^7.0.1:
   version "7.0.2"
   resolved "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz"
@@ -4791,7 +5492,7 @@ hyphenate-style-name@^1.0.0, hyphenate-style-name@^1.0.3:
   resolved "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.1.0.tgz"
   integrity sha512-WDC/ui2VVRrz3jOVi+XtjqkDjiVjTtFaAGiW37k6b+ohyQ5wYDOGkvCZa8+H0nx3gyvv0+BST9xuOgIyGQ00gw==
 
-idb@^7.0.1:
+idb@^7.0.1, idb@7.1.1:
   version "7.1.1"
   resolved "https://registry.npmjs.org/idb/-/idb-7.1.1.tgz"
   integrity sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ==
@@ -5175,7 +5876,7 @@ jsesc@~3.0.2:
   resolved "https://registry.npmjs.org/jsesc/-/jsesc-3.0.2.tgz"
   integrity sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g==
 
-json-parse-even-better-errors@^2.3.0:
+json-parse-even-better-errors@^2.3.0, json-parse-even-better-errors@^2.3.1:
   version "2.3.1"
   resolved "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz"
   integrity sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==
@@ -5293,6 +5994,11 @@ lines-and-columns@^1.1.6:
   resolved "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz"
   integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
 
+loader-runner@^4.2.0:
+  version "4.3.0"
+  resolved "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz"
+  integrity sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==
+
 loader-utils@^2.0.4:
   version "2.0.4"
   resolved "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz"
@@ -5328,6 +6034,11 @@ lodash-es@4:
   resolved "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz"
   integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
 
+lodash.camelcase@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz"
+  integrity sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==
+
 lodash.debounce@^4.0.8, lodash.debounce@4.0.8:
   version "4.0.8"
   resolved "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz"
@@ -5348,6 +6059,11 @@ lodash@^4.17.20, lodash@^4.17.21:
   resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
+long@^5.0.0:
+  version "5.3.2"
+  resolved "https://registry.npmjs.org/long/-/long-5.3.2.tgz"
+  integrity sha512-mNAgZ1GmyNhD7AuqnTG3/VQ26o760+ZYBPKjPvugO8+nLbYfX6TVpJPseBvopbdY+qpZ/lKUnmEc1LeZYS3QAA==
+
 longest-streak@^3.0.0:
   version "3.1.0"
   resolved "https://registry.npmjs.org/longest-streak/-/longest-streak-3.1.0.tgz"
@@ -5921,7 +6637,7 @@ mime-db@1.52.0:
   resolved "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz"
   integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
 
-mime-types@^2.1.12:
+mime-types@^2.1.12, mime-types@^2.1.27:
   version "2.1.35"
   resolved "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz"
   integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
@@ -5957,6 +6673,11 @@ mitt@3.0.1:
   resolved "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz"
   integrity sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==
 
+"monaco-editor@>= 0.25.0 < 1":
+  version "0.52.2"
+  resolved "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.52.2.tgz"
+  integrity sha512-GEQWEZmfkOGLdd3XK8ryrfWz3AIP8YymVXiPHEdewrUq7mh0qrKrfHLNCXcbB6sTnMLnOZ3ztSiKcciFUkIJwQ==
+
 motion-dom@^11.18.1:
   version "11.18.1"
   resolved "https://registry.npmjs.org/motion-dom/-/motion-dom-11.18.1.tgz"
@@ -6017,6 +6738,11 @@ natural-compare@^1.4.0:
   resolved "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz"
   integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
 
+neo-async@^2.6.2:
+  version "2.6.2"
+  resolved "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz"
+  integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
+
 netmask@^2.0.2:
   version "2.0.2"
   resolved "https://registry.npmjs.org/netmask/-/netmask-2.0.2.tgz"
@@ -6043,7 +6769,7 @@ next-remove-imports@^1.0.12:
     babel-loader "^9.1.3"
     babel-plugin-transform-remove-imports "^1.7.0"
 
-next@^14.0.2:
+next@^14.0.2, "next@>= 13", next@>=9.0.0:
   version "14.2.28"
   resolved "https://registry.npmjs.org/next/-/next-14.2.28.tgz"
   integrity sha512-QLEIP/kYXynIxtcKB6vNjtWLVs3Y4Sb+EClTC/CSVzdLD1gIuItccpu/n1lhmduffI32iPGEK2cLLxxt28qgYA==
@@ -6476,7 +7202,7 @@ postcss-value-parser@^4.0.0, postcss-value-parser@^4.0.2, postcss-value-parser@^
   resolved "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
-postcss@^8.4.23, postcss@8.4.49:
+postcss@^8.0.0, postcss@^8.1.0, postcss@^8.2.14, postcss@^8.4, postcss@^8.4.21, postcss@^8.4.23, postcss@>=8.0.9, postcss@8.4.49:
   version "8.4.49"
   resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz"
   integrity sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==
@@ -6509,7 +7235,7 @@ prettier-plugin-tailwindcss@^0.1.13:
   resolved "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.1.13.tgz"
   integrity sha512-/EKQURUrxLu66CMUg4+1LwGdxnz8of7IDvrSLqEtDqhLH61SAlNNUSr90UTvZaemujgl3OH/VHg+fyGltrNixw==
 
-prettier@^2.7.1:
+prettier@^2.7.1, prettier@>=2.2.0:
   version "2.8.8"
   resolved "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz"
   integrity sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==
@@ -6552,6 +7278,24 @@ property-information@^7.0.0:
   resolved "https://registry.npmjs.org/property-information/-/property-information-7.0.0.tgz"
   integrity sha512-7D/qOz/+Y4X/rzSB6jKxKUsQnphO046ei8qxG59mtM3RG3DHgTK81HrxrmoDVINJb8NKT5ZsRbwHvQ6B68Iyhg==
 
+protobufjs@^7.2.5:
+  version "7.5.3"
+  resolved "https://registry.npmjs.org/protobufjs/-/protobufjs-7.5.3.tgz"
+  integrity sha512-sildjKwVqOI2kmFDiXQ6aEB0fjYTafpEvIBs8tOR8qI4spuL9OPROLVu2qZqi/xgCfsHIwVqlaF8JBjWFHnKbw==
+  dependencies:
+    "@protobufjs/aspromise" "^1.1.2"
+    "@protobufjs/base64" "^1.1.2"
+    "@protobufjs/codegen" "^2.0.4"
+    "@protobufjs/eventemitter" "^1.1.0"
+    "@protobufjs/fetch" "^1.1.0"
+    "@protobufjs/float" "^1.0.2"
+    "@protobufjs/inquire" "^1.1.0"
+    "@protobufjs/path" "^1.1.2"
+    "@protobufjs/pool" "^1.1.0"
+    "@protobufjs/utf8" "^1.1.0"
+    "@types/node" ">=13.7.0"
+    long "^5.0.0"
+
 proxy-agent@^6.4.0:
   version "6.5.0"
   resolved "https://registry.npmjs.org/proxy-agent/-/proxy-agent-6.5.0.tgz"
@@ -6703,7 +7447,7 @@ react-dnd@^16.0.1:
     fast-deep-equal "^3.1.3"
     hoist-non-react-statics "^3.3.2"
 
-react-dom@18.2.0:
+react-dom@*, "react-dom@^15.0.1 || ^16.0.1", "react-dom@^16 || ^17 || ^18", "react-dom@^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom@^16.3.0 || ^17.0.0-0 || ^18.0.0-0", "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom@^16.8.0 || 17.x || 18.x", "react-dom@^16.8.5 || ^17.0.0 || ^18.0.0", "react-dom@^17.0.0 || ^18.0.0", "react-dom@^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom@^18.0.0 || ^19.0.0", react-dom@^18.2.0, "react-dom@>= 16.3.0", "react-dom@>= 16.8.0", react-dom@>=16, react-dom@>=16.0.0, react-dom@>=16.14.0, react-dom@>=16.3.0, react-dom@>=16.4.0, react-dom@>=16.6.0, react-dom@>=16.8, react-dom@>=16.8.0, react-dom@>=16.8.2, react-dom@>=18, "react-dom@~15 || ~16 || ~17 || ~18", "react-dom@15 - 18", react-dom@18.2.0:
   version "18.2.0"
   resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz"
   integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
@@ -6799,6 +7543,11 @@ react-is@^16.7.0:
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+"react-is@^16.8 || ^17.0.0-0 || ^18.0.0-0", react-is@^18.3.1:
+  version "18.3.1"
+  resolved "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz"
+  integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==
+
 react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
@@ -6809,11 +7558,6 @@ react-is@^17.0.2:
   resolved "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
-react-is@^18.3.1:
-  version "18.3.1"
-  resolved "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz"
-  integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==
-
 react-is@^19.0.0:
   version "19.1.0"
   resolved "https://registry.npmjs.org/react-is/-/react-is-19.1.0.tgz"
@@ -7059,7 +7803,7 @@ react-visibility-sensor@^5.1.1:
   dependencies:
     prop-types "^15.7.2"
 
-react@18.2.0:
+react@*, "react@^0.14.9 || ^15.3.0 || ^16.0.0", "react@^15.0.1 || ^16.0.1", "react@^16 || ^17 || ^18", "react@^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react@^16.3.0 || ^17.0.0-0 || ^18.0.0-0", "react@^16.3.0 || ^17.0.1 || ^18.0.0 || ^19.0.0", "react@^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react@^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc", "react@^16.8.0 || 17.x || 18.x", "react@^16.8.3 || ^17 || ^18", "react@^16.8.3 || ^17 || ^18 || ^19.0.0 || ^19.0.0-rc", "react@^16.8.5 || ^17.0.0 || ^18.0.0", "react@^16.9.0 || ^17.0.0 || ^18.0.0", "react@^17.0.0 || ^18.0.0", "react@^17.0.0 || ^18.0.0 || ^19.0.0", "react@^18 || ^19 || ^19.0.0-rc", react@^18.0.0, "react@^18.0.0 || ^19.0.0", react@^18.2.0, "react@>= 16", "react@>= 16.14", "react@>= 16.3", "react@>= 16.3.0", "react@>= 16.8.0", "react@>= 16.8.0 || 17.x.x || ^18.0.0-0", "react@>=0.0.0 <=99", react@>=0.14.0, react@>=16, react@>=16.0.0, react@>=16.13.1, react@>=16.14.0, react@>=16.3, react@>=16.3.0, react@>=16.4.0, react@>=16.6.0, react@>=16.8, react@>=16.8.0, react@>=16.8.2, react@>=18, react@>=18.0.0, "react@~15 || ~16 || ~17 || ~18", "react@15 - 18", react@18.2.0:
   version "18.2.0"
   resolved "https://registry.npmjs.org/react/-/react-18.2.0.tgz"
   integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
@@ -7418,7 +8162,7 @@ rollup-plugin-terser@^7.0.0:
     serialize-javascript "^4.0.0"
     terser "^5.0.0"
 
-rollup@^2.43.1:
+"rollup@^1.20.0 || ^2.0.0", rollup@^1.20.0||^2.0.0, rollup@^2.0.0, rollup@^2.43.1:
   version "2.79.2"
   resolved "https://registry.npmjs.org/rollup/-/rollup-2.79.2.tgz"
   integrity sha512-fS6iqSPZDs3dr/y7Od6y5nha8dW1YnbgtsyotCVvoFGKbERG++CVRFv1meyGDE1SNItQA8BrnCw7ScdAhRJ3XQ==
@@ -7449,7 +8193,7 @@ safe-array-concat@^1.0.0:
     has-symbols "^1.0.3"
     isarray "^2.0.5"
 
-safe-buffer@^5.1.0:
+safe-buffer@^5.1.0, safe-buffer@>=5.1.0:
   version "5.2.1"
   resolved "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz"
   integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
@@ -7499,6 +8243,16 @@ schema-utils@^4.3.0:
     ajv-formats "^2.1.1"
     ajv-keywords "^5.1.0"
 
+schema-utils@^4.3.2:
+  version "4.3.2"
+  resolved "https://registry.npmjs.org/schema-utils/-/schema-utils-4.3.2.tgz"
+  integrity sha512-Gn/JaSk/Mt9gYubxTtSn/QCV4em9mpAPiR1rqy/Ocu19u/G9J5WWdNoUT4SiV6mFC3y6cxyFcFwdzPM3FgxGAQ==
+  dependencies:
+    "@types/json-schema" "^7.0.9"
+    ajv "^8.9.0"
+    ajv-formats "^2.1.1"
+    ajv-keywords "^5.1.0"
+
 screenfull@^5.1.0:
   version "5.2.0"
   resolved "https://registry.npmjs.org/screenfull/-/screenfull-5.2.0.tgz"
@@ -7560,7 +8314,7 @@ seroval-plugins@^1.1.0:
   resolved "https://registry.npmjs.org/seroval-plugins/-/seroval-plugins-1.2.1.tgz"
   integrity sha512-H5vs53+39+x4Udwp4J5rNZfgFuA+Lt+uU+09w1gYBVWomtAl98B+E9w7yC05Xc81/HgLvJdlyqJbU0fJCKCmdw==
 
-seroval@^1.1.0:
+seroval@^1.0, seroval@^1.1.0:
   version "1.2.1"
   resolved "https://registry.npmjs.org/seroval/-/seroval-1.2.1.tgz"
   integrity sha512-yBxFFs3zmkvKNmR0pFSU//rIsYjuX418TnlDmc2weaq5XFDqDIV/NOMPBoLrbxjLH42p4UzRuXHryXh9dYcKcw==
@@ -7930,7 +8684,7 @@ style-to-object@1.0.8:
   dependencies:
     inline-style-parser "0.2.4"
 
-styled-components@^6.1.13:
+"styled-components@^4.0.0 || ^5.0.0", styled-components@^6.1.13:
   version "6.1.17"
   resolved "https://registry.npmjs.org/styled-components/-/styled-components-6.1.17.tgz"
   integrity sha512-97D7DwWanI7nN24v0D4SvbfjLE9656umNSJZkBkDIWL37aZqG/wRQ+Y9pWtXyBIM/NSfcBzHLErEsqHmJNSVUg==
@@ -8009,7 +8763,7 @@ tailwindcss-animate@^1.0.7:
   resolved "https://registry.npmjs.org/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz"
   integrity sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==
 
-tailwindcss@^3.2.1:
+tailwindcss@^3.2.1, "tailwindcss@>=3.0.0 || >= 3.0.0-alpha.1", "tailwindcss@>=3.0.0 || insiders":
   version "3.3.3"
   resolved "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.3.tgz"
   integrity sha512-A0KgSkef7eE4Mf+nKJ83i75TMyq8HqY3qmFIJSWy8bNt0v1lG7jUcpGpoTFxAwYcWOphcTBLPPJg+bDfhDf52w==
@@ -8037,6 +8791,11 @@ tailwindcss@^3.2.1:
     resolve "^1.22.2"
     sucrase "^3.32.0"
 
+tapable@^2.1.1, tapable@^2.2.0:
+  version "2.2.2"
+  resolved "https://registry.npmjs.org/tapable/-/tapable-2.2.2.tgz"
+  integrity sha512-Re10+NauLTMCudc7T5WLFLAwDhQ0JWdrMK+9B2M8zR5hRExKmsRDCBA7/aV/pNJFltmBFO5BAMlQFi/vq3nKOg==
+
 tar-fs@^3.0.6:
   version "3.0.8"
   resolved "https://registry.npmjs.org/tar-fs/-/tar-fs-3.0.8.tgz"
@@ -8072,7 +8831,7 @@ tempy@^0.6.0:
     type-fest "^0.16.0"
     unique-string "^2.0.0"
 
-terser-webpack-plugin@^5.3.3:
+terser-webpack-plugin@^5.3.11, terser-webpack-plugin@^5.3.3:
   version "5.3.14"
   resolved "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.14.tgz"
   integrity sha512-vkZjpUjb6OMS7dhV+tILUW6BhpDR7P2L/aQSAv+Uwk+m8KATX9EccViHTJR2qDtACKPIYndLGCyl3FMo+r2LMw==
@@ -8184,7 +8943,7 @@ three-slippy-map-globe@1:
     d3-octree "^1.1"
     d3-scale "1 - 4"
 
-three@^0.175.0, "three@>=0.154 <1":
+three@^0.175.0, three@>=0.154, "three@>=0.154 <1", three@>=0.168, three@>=0.72.0:
   version "0.175.0"
   resolved "https://registry.npmjs.org/three/-/three-0.175.0.tgz"
   integrity sha512-nNE3pnTHxXN/Phw768u0Grr7W4+rumGg/H6PgeseNJojkJtmeHJfZWi41Gp2mpXl1pg1pf1zjwR4McM1jTqkpg==
@@ -8293,16 +9052,16 @@ tsconfig-paths@^3.14.1:
     minimist "^1.2.6"
     strip-bom "^3.0.0"
 
+tslib@*, tslib@^2.0.0, tslib@^2.0.1, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.4.0, tslib@2.6.2:
+  version "2.6.2"
+  resolved "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz"
+  integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
+
 tslib@^1.8.1:
   version "1.14.1"
   resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@^2.0.0, tslib@^2.0.1, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.4.0, tslib@2.6.2:
-  version "2.6.2"
-  resolved "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz"
-  integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
-
 tslib@^2.8.1:
   version "2.8.1"
   resolved "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz"
@@ -8381,6 +9140,11 @@ typed-array-length@^1.0.4:
     for-each "^0.3.3"
     is-typed-array "^1.1.9"
 
+"typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta", typescript@>=3.3.1, typescript@>=4.9.5:
+  version "5.8.3"
+  resolved "https://registry.npmjs.org/typescript/-/typescript-5.8.3.tgz"
+  integrity sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==
+
 typo-js@*:
   version "1.2.3"
   resolved "https://registry.npmjs.org/typo-js/-/typo-js-1.2.3.tgz"
@@ -8603,11 +9367,24 @@ w3c-keyname@^2.2.4:
   resolved "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz"
   integrity sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==
 
+watchpack@^2.4.1:
+  version "2.4.4"
+  resolved "https://registry.npmjs.org/watchpack/-/watchpack-2.4.4.tgz"
+  integrity sha512-c5EGNOiyxxV5qmTtAB7rbiXxi1ooX1pQKMLX/MIabJjRA0SJBQOjKF+KSVfHkr9U1cADPon0mRiVe/riyaiDUA==
+  dependencies:
+    glob-to-regexp "^0.4.1"
+    graceful-fs "^4.1.2"
+
 web-namespaces@^2.0.0:
   version "2.0.1"
   resolved "https://registry.npmjs.org/web-namespaces/-/web-namespaces-2.0.1.tgz"
   integrity sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==
 
+web-vitals@^4.2.4:
+  version "4.2.4"
+  resolved "https://registry.npmjs.org/web-vitals/-/web-vitals-4.2.4.tgz"
+  integrity sha512-r4DIlprAGwJ7YM11VZp4R884m0Vmgr6EAKe3P+kO0PPj3Unqyvv59rczf6UiGcb9Z8QxZVcqKNwv/g0WNdWwsw==
+
 webidl-conversions@^3.0.0:
   version "3.0.1"
   resolved "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz"
@@ -8626,6 +9403,56 @@ webpack-sources@^1.4.3:
     source-list-map "^2.0.0"
     source-map "~0.6.1"
 
+webpack-sources@^3.3.3:
+  version "3.3.3"
+  resolved "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.3.3.tgz"
+  integrity sha512-yd1RBzSGanHkitROoPFd6qsrxt+oFhg/129YzheDGqeustzX0vTZJZsSsQjVQC4yzBQ56K55XU8gaNCtIzOnTg==
+
+"webpack@^4.4.0 || ^5.9.0", webpack@^5.1.0, webpack@>=2, "webpack@>=4.0.0 <6.0.0", webpack@>=5:
+  version "5.100.1"
+  resolved "https://registry.npmjs.org/webpack/-/webpack-5.100.1.tgz"
+  integrity sha512-YJB/ESPUe2Locd0NKXmw72Dx8fZQk1gTzI6rc9TAT4+Sypbnhl8jd8RywB1bDsDF9Dy1RUR7gn3q/ZJTd0OZZg==
+  dependencies:
+    "@types/eslint-scope" "^3.7.7"
+    "@types/estree" "^1.0.8"
+    "@types/json-schema" "^7.0.15"
+    "@webassemblyjs/ast" "^1.14.1"
+    "@webassemblyjs/wasm-edit" "^1.14.1"
+    "@webassemblyjs/wasm-parser" "^1.14.1"
+    acorn "^8.15.0"
+    acorn-import-phases "^1.0.3"
+    browserslist "^4.24.0"
+    chrome-trace-event "^1.0.2"
+    enhanced-resolve "^5.17.2"
+    es-module-lexer "^1.2.1"
+    eslint-scope "5.1.1"
+    events "^3.2.0"
+    glob-to-regexp "^0.4.1"
+    graceful-fs "^4.2.11"
+    json-parse-even-better-errors "^2.3.1"
+    loader-runner "^4.2.0"
+    mime-types "^2.1.27"
+    neo-async "^2.6.2"
+    schema-utils "^4.3.2"
+    tapable "^2.1.1"
+    terser-webpack-plugin "^5.3.11"
+    watchpack "^2.4.1"
+    webpack-sources "^3.3.3"
+
+websocket-driver@>=0.5.1:
+  version "0.7.4"
+  resolved "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz"
+  integrity sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==
+  dependencies:
+    http-parser-js ">=0.5.1"
+    safe-buffer ">=5.1.0"
+    websocket-extensions ">=0.1.1"
+
+websocket-extensions@>=0.1.1:
+  version "0.1.4"
+  resolved "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.4.tgz"
+  integrity sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==
+
 whatwg-url@^5.0.0:
   version "5.0.0"
   resolved "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz"
@@ -8875,7 +9702,7 @@ xterm-addon-fit@^0.8.0:
   resolved "https://registry.npmjs.org/xterm-addon-fit/-/xterm-addon-fit-0.8.0.tgz"
   integrity sha512-yj3Np7XlvxxhYF/EJ7p3KHaMt6OdwQ+HDu573Vx1lRXsVxOcnVJs51RgjZOouIZOczTsskaS+CpXspK81/DLqw==
 
-xterm@^5.3.0:
+xterm@^5.0.0, xterm@^5.3.0:
   version "5.3.0"
   resolved "https://registry.npmjs.org/xterm/-/xterm-5.3.0.tgz"
   integrity sha512-8QqjlekLUFTrU6x7xck1MsPzPA571K5zNqWm0M0oroYEWVOptZ0+ubQSkQ3uxIEhcIHRujJy6emDWX4A7qyFzg==