boolean-uk · moueedAli · Sep 3, 2025 · Sep 3, 2025 · Sep 3, 2025 · Sep 3, 2025
diff --git a/.gitignore b/.gitignore
@@ -23,4 +23,6 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-.vscode
+.vscode
+.idea
+
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,3 @@
+
+src/*
+src/
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,8 +10,10 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-modal": "^3.16.1",
+    "react-password-checklist": "^1.8.1",
     "react-router-dom": "^6.8.0",
     "react-scripts": "5.0.1",
+    "reactjs-popup": "^2.0.6",
     "web-vitals": "^3.1.1"
   },
   "scripts": {
@@ -43,7 +45,7 @@
   },
   "devDependencies": {
     "eslint": "^8.57.1",
-    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-prettier": "^9.1.2",
     "eslint-config-standard": "^17.1.0",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-n": "^16.6.2",

diff --git a/public/faviconsvg.svg b/public/faviconsvg.svg
diff --git a/public/favicontransparent.ico b/public/favicontransparent.ico
diff --git a/public/faviconwhite.ico b/public/faviconwhite.ico
diff --git a/public/index.html b/public/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="%PUBLIC_URL%/favicontransparent.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Cohort Manager</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/public/microsoft-azure-logo.svg b/public/microsoft-azure-logo.svg
diff --git a/src/App.css b/src/App.css
@@ -14,3 +14,8 @@
 .ReactModal__Html--open {
   overflow: hidden;
 }
+
+.border-line {
+  border-bottom: 1px solid var(--color-blue5);
+  padding: 20px 10px;
+}
diff --git a/src/App.js b/src/App.js
@@ -8,18 +8,21 @@ import Verification from './pages/verification';
 import { AuthProvider, ProtectedRoute } from './context/auth';
 import { ModalProvider } from './context/modal';
 import Welcome from './pages/welcome';
+import { FormProvider } from './context/form';
+import Cohort from './pages/cohort';
+
 
 const App = () => {
   return (
     <>
       <AuthProvider>
+        <FormProvider>
         <ModalProvider>
           <Routes>
             <Route path="login" element={<Login />} />
             <Route path="register" element={<Register />} />
             <Route path="loading" element={<Loading />} />
             <Route path="verification" element={<Verification />} />
-
             <Route
               index
               element={
@@ -36,8 +39,17 @@ const App = () => {
                 </ProtectedRoute>
               }
             />
+            <Route
+              path="cohorts"
+              element={
+                <ProtectedRoute>
+                  <Cohort />
+                </ProtectedRoute>
+              }
+            />
           </Routes>
         </ModalProvider>
+        </FormProvider>
       </AuthProvider>
     </>
   );

diff --git a/src/components/card/style.css b/src/components/card/style.css
@@ -2,7 +2,7 @@
   background: white;
   padding: 24px;
   border-radius: 8px;
-  width: 100%;
+  width: 100% !important;
   margin-bottom: 25px;
   border: 1px #e6ebf5 solid;
 }

diff --git a/src/components/dropdown/index.js b/src/components/dropdown/index.js
@@ -0,0 +1,75 @@
+import React, { useState, useRef, useEffect } from "react";
+
+function DropdownMenu({
+  label,
+  options = [],
+  value,
+  onChange,
+  placeholder = "Select an option",
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef(null);
+
+  const toggleDropdown = () => setIsOpen((prev) => !prev);
+
+  const handleOptionClick = (optionValue) => {
+    onChange(optionValue);
+    setIsOpen(false);
+  };
+
+  const handleClickOutside = (event) => {
+    if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+      setIsOpen(false);
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  const normalizedOptions = Array.isArray(options)
+    ? options.map((opt) =>
+        typeof opt === "object"
+          ? { label: opt.label, value: opt.value }
+          : { label: opt, value: opt }
+      )
+    : [];
+
+  const selectedOption = normalizedOptions.find((opt) => opt.value === value);
+
+  return (
+    <div className="inputwrapper" ref={dropdownRef} style={{ position: "relative" }}>
+      {label && <label>{label}</label>}
+      <button
+        type="button"
+        onClick={toggleDropdown}
+        className="dropbtn"
+      >
+        {selectedOption?.label || placeholder}
+      </button>
+
+      {isOpen && (
+        <ul
+          className="dropdown-menu"
+        >
+          {normalizedOptions.map((option) => (
+            <li
+              key={option.value}
+              onClick={() => handleOptionClick(option.value)}
+              style={{
+                padding: "0.5rem 1rem",
+                cursor: "pointer",
+                backgroundColor: value === option.value ? "#f0f0f0" : "#fff",
+              }}
+            >
+              {option.label}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}
+
+export default DropdownMenu;
-Original file line number
+Diff line change
@@ Expand Up / @@ -23,4 +23,6 @@ npm-debug.log* @@
     yarn-debug.log*
     yarn-error.log*
-    .vscode
+    .vscode
+    .idea