From a14ea6d80519e55154f1cdb0260fdecb6a074c9b Mon Sep 17 00:00:00 2001
From: myeeli <myeeli@uab.edu>
Date: Fri, 17 Oct 2025 12:21:12 -0700
Subject: [PATCH 1/7] Impelemented PM educator view

---
 .../ProjectManagerEducatorView.jsx            | 165 ++++++++++++++++
 .../ProjectManagerEducatorView.module.css     | 183 ++++++++++++++++++
 src/routes.jsx                                |   2 +
 3 files changed, 350 insertions(+)
 create mode 100644 src/components/EductionPortal/ProjectManager/ProjectManagerEducatorView.jsx
 create mode 100644 src/components/EductionPortal/ProjectManager/ProjectManagerEducatorView.module.css

diff --git a/src/components/EductionPortal/ProjectManager/ProjectManagerEducatorView.jsx b/src/components/EductionPortal/ProjectManager/ProjectManagerEducatorView.jsx
new file mode 100644
index 0000000000..48b2a9c8d5
--- /dev/null
+++ b/src/components/EductionPortal/ProjectManager/ProjectManagerEducatorView.jsx
@@ -0,0 +1,165 @@
+import React from "react";
+import styles from "./ProjectManagerEducatorView.module.css";
+
+const mockEducators = [
+  {
+    id: "t-001",
+    name: "Alice Johnson",
+    subject: "Mathematics",
+    studentCount: 3,
+    students: [
+      { id: "s-101", name: "Jay", grade: "7", progress: 0.78 },
+      { id: "s-102", name: "Kate", grade: "7", progress: 0.62 },
+      { id: "s-103", name: "Sam", grade: "8", progress: 0.85 },
+    ],
+  },
+  {
+    id: "t-002",
+    name: "Brian Lee",
+    subject: "Science",
+    studentCount: 2,
+    students: [
+      { id: "s-201", name: "Alina Gupta", grade: "6", progress: 0.54 },
+      { id: "s-202", name: "Samir Khan", grade: "6", progress: 0.91 },
+    ],
+  },
+  {
+    id: "t-003",
+    name: "John Doe",
+    subject: "English",
+    studentCount: 1,
+    students: [{ id: "s-301", name: "Ryan", grade: "7", progress: 0.73 }],
+  },
+];
+
+async function fetchEducators() {
+  await new Promise((r) => setTimeout(r, 250));
+  return mockEducators.map(({ students, ...rest }) => rest);
+}
+
+async function fetchStudentsByEducator(educatorId) {
+  await new Promise((r) => setTimeout(r, 200));
+  const edu = mockEducators.find((e) => e.id === educatorId);
+  return edu ? edu.students : [];
+}
+
+function StudentCard({ s }) {
+  const pct = Math.round((s.progress ?? 0) * 100);
+  return (
+    <div className={styles.studentCard}>
+      <div className={styles.studentName}>{s.name}</div>
+      <div className={styles.meta}>Grade {s.grade}</div>
+      <div className={styles.progressWrap}>
+        <div className={styles.progressBar}>
+          <div className={styles.progressFill} style={{ width: `${pct}%` }} />
+        </div>
+        <div className={styles.progressPct}>{pct}%</div>
+      </div>
+    </div>
+  );
+}
+
+function EducatorRow({ educator }) {
+  const [open, setOpen] = React.useState(false);
+  const [loading, setLoading] = React.useState(false);
+  const [students, setStudents] = React.useState([]);
+
+  async function toggle() {
+    if (!open && students.length === 0) {
+      setLoading(true);
+      const data = await fetchStudentsByEducator(educator.id);
+      setStudents(data);
+      setLoading(false);
+    }
+    setOpen((v) => !v);
+  }
+
+  return (
+    <div className={styles.row}>
+      <button
+        type="button"
+        className={styles.rowHeader}
+        onClick={toggle}
+        aria-expanded={open}
+        aria-controls={`students-${educator.id}`}
+      >
+        <div className={styles.rowHeaderLeft}>
+          <div className={styles.rowTitle}>{educator.name}</div>
+          <div className={styles.meta}>{educator.subject}</div>
+        </div>
+        <div className={styles.rowHeaderRight}>
+          <span className={styles.badge}>{educator.studentCount} students</span>
+          <span className={styles.toggleText}>{open ? "Hide" : "View"}</span>
+        </div>
+      </button>
+
+      {open && (
+        <div id={`students-${educator.id}`} className={styles.studentsWrap}>
+          {loading ? (
+            <div className={styles.loadingText}>Loading students…</div>
+          ) : (
+            <div className={styles.students}>
+              {students.map((s) => (
+                <StudentCard key={s.id} s={s} />
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default function ProjectManagerEducatorView() {
+  const [educators, setEducators] = React.useState([]);
+  const [loading, setLoading] = React.useState(true);
+  const [error, setError] = React.useState(null);
+
+  React.useEffect(() => {
+    (async () => {
+      try {
+        const data = await fetchEducators();
+        setEducators(data);
+      } catch (e) {
+        setError("Failed to load educators");
+      } finally {
+        setLoading(false);
+      }
+    })();
+  }, []);
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.breadcrumb}>
+        <span>Home</span>
+        <span className={styles.sep}>/</span>
+        <span>Project Manager</span>
+      </div>
+      <div className={styles.header}>
+        <div>
+          <h1 className={styles.title}>Project Manager Dashboard</h1>
+          <p className={styles.subtitle}>View educators and their assigned students</p>
+        </div>
+      </div>
+      <section className={styles.card} aria-label="Educators">
+        <div className={styles.cardHeader}>
+          <h2 className={styles.cardTitle}>Educators</h2>
+        </div>
+        <div className={styles.cardBody}>
+          {loading && <div className={styles.loadingText}>Loading…</div>}
+          {error && <div className={styles.errorText}>{error}</div>}
+          {!loading && !error && educators.length === 0 && (
+            <div className={styles.emptyText}>No educators found.</div>
+          )}
+          {!loading && !error && educators.length > 0 && (
+            <div role="list" aria-label="Educator list">
+              {educators.map((e) => (
+                <EducatorRow key={e.id} educator={e} />
+              ))}
+            </div>
+          )}
+        </div>
+      </section>
+    </div>
+  );
+}
diff --git a/src/components/EductionPortal/ProjectManager/ProjectManagerEducatorView.module.css b/src/components/EductionPortal/ProjectManager/ProjectManagerEducatorView.module.css
new file mode 100644
index 0000000000..e959f974a3
--- /dev/null
+++ b/src/components/EductionPortal/ProjectManager/ProjectManagerEducatorView.module.css
@@ -0,0 +1,183 @@
+:root {
+  --bg: #f6f7fb;
+  --text: #111827;
+  --muted: #6b7280;
+  --card-bg: #ffffff;
+  --border: #e5e7eb;
+  --badge-bg: #eef2ff;
+  --badge-text: #3730a3;
+  --indigo: #4f46e5;
+  --progress-bg: #e5e7eb;
+  --error: #b91c1c;
+}
+
+.container {
+  max-width: 72rem; 
+  margin: 0 auto;
+  padding: 16px;
+  color: var(--text);
+}
+
+.breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--muted);
+  font-size: 0.9rem;
+  margin-bottom: 8px;
+}
+.sep {
+  opacity: 0.7;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+.title {
+  font-size: 1.875rem; 
+  line-height: 1.2;
+  font-weight: 600;
+  margin: 0;
+}
+.subtitle {
+  color: var(--muted);
+  font-size: 0.95rem;
+  margin-top: 4px;
+}
+
+.card {
+  background: var(--card-bg);
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.06);
+  overflow: hidden;
+}
+.cardHeader {
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.cardTitle {
+  font-size: 1rem;
+  font-weight: 600;
+  margin: 0;
+}
+.cardBody {
+  padding: 16px;
+}
+
+.row {
+  border-bottom: 1px solid var(--border);
+}
+.row:last-child {
+  border-bottom: none;
+}
+.rowHeader {
+  width: 100%;
+  background: transparent;
+  border: none;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  text-align: left;
+  padding: 12px 16px;
+  cursor: pointer;
+  transition: background 0.15s ease-in-out;
+}
+.rowHeader:hover {
+  background: #f9fafb;
+}
+.rowHeaderLeft {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.rowTitle {
+  font-weight: 600;
+  font-size: 1rem;
+}
+.rowHeaderRight {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.badge {
+  font-size: 0.75rem;
+  padding: 2px 8px;
+  border-radius: 999px;
+  background: var(--badge-bg);
+  color: var(--badge-text);
+}
+.toggleText {
+  font-size: 0.9rem;
+  color: var(--indigo);
+}
+
+.meta {
+  color: var(--muted);
+  font-size: 0.9rem;
+}
+
+.studentsWrap {
+  padding: 0 16px 16px 16px;
+}
+.students {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 12px;
+  margin-top: 8px;
+}
+@media (min-width: 640px) {
+  .students { grid-template-columns: repeat(2, 1fr); }
+}
+@media (min-width: 1024px) {
+  .students { grid-template-columns: repeat(3, 1fr); }
+}
+
+.studentCard {
+  background: #f9fafb;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 12px;
+}
+.studentName {
+  font-weight: 600;
+}
+.progressWrap {
+  margin-top: 8px;
+}
+.progressBar {
+  height: 8px;
+  width: 100%;
+  background: var(--progress-bg);
+  border-radius: 6px;
+  overflow: hidden;
+}
+.progressFill {
+  height: 8px;
+  background: var(--indigo);
+  border-radius: 6px;
+  width: 0%;
+  transition: width 0.3s ease;
+}
+.progressPct {
+  text-align: right;
+  font-size: 0.75rem;
+  margin-top: 4px;
+  color: var(--muted);
+}
+
+.loadingText,
+.emptyText {
+  color: var(--muted);
+  font-size: 0.95rem;
+}
+.errorText {
+  color: var(--error);
+  font-size: 0.95rem;
+}
diff --git a/src/routes.jsx b/src/routes.jsx
index f8327aaf38..dacd7c6054 100644
--- a/src/routes.jsx
+++ b/src/routes.jsx
@@ -239,6 +239,7 @@ const MonthsPledgedChart = lazy(() =>
 
 // PR Analytics Dashboard
 import ReviewsInsight from './components/PRAnalyticsDashboard/ReviewsInsight/ReviewsInsight';
+import ProjectManagerEducatorView from 'components/EductionPortal/ProjectManager/ProjectManagerEducatorView';
 
 const JobAnalyticsPage = lazy(() =>
   import('./components/Reports/HitsAndApplicationRatio/JobAnalyticsPage'),
@@ -735,6 +736,7 @@ export default (
         <EPProtectedRoute path="/educationportal" exact component={EPDashboard} />
         <Route path="/educationportal/login" component={EPLogin} />
         <EPProtectedRoute path="/educationportal/tasks/upload" exact component={WriteTaskUpload} />
+        <EPProtectedRoute path="/educationportal//pm/dashboard" exact component={ProjectManagerEducatorView} />
         {/* PR Analytics Dashboard */}
         <Route path="/pull-request-analytics/reviews-insight" component={ReviewsInsight} />
         <CPProtectedRoute

From 28235c205935bb29b72a4d91f52f6ec99ca10a0b Mon Sep 17 00:00:00 2001
From: myeeli <myeeli@uab.edu>
Date: Fri, 17 Oct 2025 17:50:01 -0700
Subject: [PATCH 2/7] Implementing PMNotification Component

---
 package-lock.json                             |  18 -
 package.json                                  |   1 -
 .../ProjectManagerEducatorView.jsx            |  76 +++-
 .../ProjectManagerEducatorView.module.css     |  80 +++-
 .../ProjectManagerNotification.jsx            | 120 ++++++
 .../ProjectManagerNotification.module.css     | 180 +++++++++
 src/routes.jsx                                |   4 +-
 yarn.lock                                     | 371 +++++++++++++++---
 8 files changed, 772 insertions(+), 78 deletions(-)
 create mode 100644 src/components/EductionPortal/ProjectManager/ProjectManagerNotification.jsx
 create mode 100644 src/components/EductionPortal/ProjectManager/ProjectManagerNotification.module.css

diff --git a/package-lock.json b/package-lock.json
index 7f9a1a3e06..1feefe04dd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -165,7 +165,6 @@
         "sass": "^1.86.3",
         "sass-loader": "^16.0.5",
         "stylelint": "^16.25.0",
-        "stylelint-config-prettier": "^9.0.5",
         "stylelint-config-standard": "^39.0.1",
         "typescript": "^4.8.4",
         "vite": "^6.3.5",
@@ -17761,23 +17760,6 @@
         "node": ">=18.12.0"
       }
     },
-    "node_modules/stylelint-config-prettier": {
-      "version": "9.0.5",
-      "resolved": "https://registry.npmjs.org/stylelint-config-prettier/-/stylelint-config-prettier-9.0.5.tgz",
-      "integrity": "sha512-U44lELgLZhbAD/xy/vncZ2Pq8sh2TnpiPvo38Ifg9+zeioR+LAkHu0i6YORIOxFafZoVg0xqQwex6e6F25S5XA==",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "stylelint-config-prettier": "bin/check.js",
-        "stylelint-config-prettier-check": "bin/check.js"
-      },
-      "engines": {
-        "node": ">= 12"
-      },
-      "peerDependencies": {
-        "stylelint": ">= 11.x < 15"
-      }
-    },
     "node_modules/stylelint-config-recommended": {
       "version": "17.0.0",
       "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-17.0.0.tgz",
diff --git a/package.json b/package.json
index 2d9f481a19..62de266bf8 100644
--- a/package.json
+++ b/package.json
@@ -187,7 +187,6 @@
     "sass": "^1.86.3",
     "sass-loader": "^16.0.5",
     "stylelint": "^16.25.0",
-    "stylelint-config-prettier": "^9.0.5",
     "stylelint-config-standard": "^39.0.1",
     "typescript": "^4.8.4",
     "vite": "^6.3.5",
diff --git a/src/components/EductionPortal/ProjectManager/ProjectManagerEducatorView.jsx b/src/components/EductionPortal/ProjectManager/ProjectManagerEducatorView.jsx
index 48b2a9c8d5..748d402068 100644
--- a/src/components/EductionPortal/ProjectManager/ProjectManagerEducatorView.jsx
+++ b/src/components/EductionPortal/ProjectManager/ProjectManagerEducatorView.jsx
@@ -1,5 +1,6 @@
 import React from "react";
 import styles from "./ProjectManagerEducatorView.module.css";
+import NotificationComposer from "./ProjectManagerNotification";
 
 const mockEducators = [
   {
@@ -112,6 +113,11 @@ function EducatorRow({ educator }) {
 
 export default function ProjectManagerEducatorView() {
   const [educators, setEducators] = React.useState([]);
+  const [filtered, setFiltered] = React.useState([]);
+  const [query, setQuery] = React.useState("");
+  const [showComposer, setShowComposer] = React.useState(false);
+  const [lastSentInfo, setLastSentInfo] = React.useState(null);
+
   const [loading, setLoading] = React.useState(true);
   const [error, setError] = React.useState(null);
 
@@ -120,6 +126,7 @@ export default function ProjectManagerEducatorView() {
       try {
         const data = await fetchEducators();
         setEducators(data);
+        setFiltered(data);
       } catch (e) {
         setError("Failed to load educators");
       } finally {
@@ -128,6 +135,35 @@ export default function ProjectManagerEducatorView() {
     })();
   }, []);
 
+  React.useEffect(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) {
+      setFiltered(educators);
+    } else {
+      setFiltered(
+        educators.filter(
+          (e) =>
+            e.name.toLowerCase().includes(q) ||
+            e.subject.toLowerCase().includes(q)
+        )
+      );
+    }
+  }, [query, educators]);
+
+  function handleOpenComposer() {
+    setShowComposer(true);
+  }
+  function handleCloseComposer() {
+    setShowComposer(false);
+  }
+  function handleSent(payload) {
+    setLastSentInfo({
+      educatorCount: payload.educatorIds.length,
+      timestamp: new Date().toISOString(),
+    });
+    setShowComposer(false);
+  }
+
   return (
     <div className={styles.container}>
       <div className={styles.breadcrumb}>
@@ -135,12 +171,34 @@ export default function ProjectManagerEducatorView() {
         <span className={styles.sep}>/</span>
         <span>Project Manager</span>
       </div>
+
       <div className={styles.header}>
         <div>
           <h1 className={styles.title}>Project Manager Dashboard</h1>
-          <p className={styles.subtitle}>View educators and their assigned students</p>
+        </div>
+        <div className={styles.toolbar}>
+          <input
+            type="text"
+            placeholder="Search educators by name or subject"
+            className={styles.searchInput}
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            aria-label="Search educators"
+          />
+          <button className={styles.primaryBtn} onClick={handleOpenComposer}>
+            New Announcement
+          </button>
         </div>
       </div>
+
+      {lastSentInfo && (
+        <div className={styles.successBanner} role="status">
+          Sent to {lastSentInfo.educatorCount} educator
+          {lastSentInfo.educatorCount === 1 ? "" : "s"} at{" "}
+          {new Date(lastSentInfo.timestamp).toLocaleTimeString()}
+        </div>
+      )}
+
       <section className={styles.card} aria-label="Educators">
         <div className={styles.cardHeader}>
           <h2 className={styles.cardTitle}>Educators</h2>
@@ -148,18 +206,26 @@ export default function ProjectManagerEducatorView() {
         <div className={styles.cardBody}>
           {loading && <div className={styles.loadingText}>Loading…</div>}
           {error && <div className={styles.errorText}>{error}</div>}
-          {!loading && !error && educators.length === 0 && (
-            <div className={styles.emptyText}>No educators found.</div>
+          {!loading && !error && filtered.length === 0 && (
+            <div className={styles.emptyText}>No educators match your search.</div>
           )}
-          {!loading && !error && educators.length > 0 && (
+          {!loading && !error && filtered.length > 0 && (
             <div role="list" aria-label="Educator list">
-              {educators.map((e) => (
+              {filtered.map((e) => (
                 <EducatorRow key={e.id} educator={e} />
               ))}
             </div>
           )}
         </div>
       </section>
+
+      {showComposer && (
+        <NotificationComposer
+          educators={educators}
+          onClose={handleCloseComposer}
+          onSent={handleSent}
+        />
+      )}
     </div>
   );
 }
diff --git a/src/components/EductionPortal/ProjectManager/ProjectManagerEducatorView.module.css b/src/components/EductionPortal/ProjectManager/ProjectManagerEducatorView.module.css
index e959f974a3..f54010f6f5 100644
--- a/src/components/EductionPortal/ProjectManager/ProjectManagerEducatorView.module.css
+++ b/src/components/EductionPortal/ProjectManager/ProjectManagerEducatorView.module.css
@@ -12,7 +12,7 @@
 }
 
 .container {
-  max-width: 72rem; 
+  max-width: 72rem;
   margin: 0 auto;
   padding: 16px;
   color: var(--text);
@@ -26,6 +26,7 @@
   font-size: 0.9rem;
   margin-bottom: 8px;
 }
+
 .sep {
   opacity: 0.7;
 }
@@ -36,12 +37,14 @@
   justify-content: space-between;
   margin-bottom: 16px;
 }
+
 .title {
-  font-size: 1.875rem; 
+  font-size: 1.875rem;
   line-height: 1.2;
   font-weight: 600;
   margin: 0;
 }
+
 .subtitle {
   color: var(--muted);
   font-size: 0.95rem;
@@ -55,6 +58,7 @@
   box-shadow: 0 1px 3px rgba(17, 24, 39, 0.06);
   overflow: hidden;
 }
+
 .cardHeader {
   padding: 12px 16px;
   border-bottom: 1px solid var(--border);
@@ -62,11 +66,13 @@
   align-items: center;
   justify-content: space-between;
 }
+
 .cardTitle {
   font-size: 1rem;
   font-weight: 600;
   margin: 0;
 }
+
 .cardBody {
   padding: 16px;
 }
@@ -74,9 +80,11 @@
 .row {
   border-bottom: 1px solid var(--border);
 }
+
 .row:last-child {
   border-bottom: none;
 }
+
 .rowHeader {
   width: 100%;
   background: transparent;
@@ -89,23 +97,28 @@
   cursor: pointer;
   transition: background 0.15s ease-in-out;
 }
+
 .rowHeader:hover {
   background: #f9fafb;
 }
+
 .rowHeaderLeft {
   display: flex;
   flex-direction: column;
   gap: 2px;
 }
+
 .rowTitle {
   font-weight: 600;
   font-size: 1rem;
 }
+
 .rowHeaderRight {
   display: flex;
   align-items: center;
   gap: 8px;
 }
+
 .badge {
   font-size: 0.75rem;
   padding: 2px 8px;
@@ -113,6 +126,7 @@
   background: var(--badge-bg);
   color: var(--badge-text);
 }
+
 .toggleText {
   font-size: 0.9rem;
   color: var(--indigo);
@@ -126,17 +140,24 @@
 .studentsWrap {
   padding: 0 16px 16px 16px;
 }
+
 .students {
   display: grid;
   grid-template-columns: 1fr;
   gap: 12px;
   margin-top: 8px;
 }
+
 @media (min-width: 640px) {
-  .students { grid-template-columns: repeat(2, 1fr); }
+  .students {
+    grid-template-columns: repeat(2, 1fr);
+  }
 }
+
 @media (min-width: 1024px) {
-  .students { grid-template-columns: repeat(3, 1fr); }
+  .students {
+    grid-template-columns: repeat(3, 1fr);
+  }
 }
 
 .studentCard {
@@ -145,12 +166,15 @@
   border-radius: 12px;
   padding: 12px;
 }
+
 .studentName {
   font-weight: 600;
 }
+
 .progressWrap {
   margin-top: 8px;
 }
+
 .progressBar {
   height: 8px;
   width: 100%;
@@ -158,6 +182,7 @@
   border-radius: 6px;
   overflow: hidden;
 }
+
 .progressFill {
   height: 8px;
   background: var(--indigo);
@@ -165,6 +190,7 @@
   width: 0%;
   transition: width 0.3s ease;
 }
+
 .progressPct {
   text-align: right;
   font-size: 0.75rem;
@@ -177,7 +203,53 @@
   color: var(--muted);
   font-size: 0.95rem;
 }
+
 .errorText {
   color: var(--error);
   font-size: 0.95rem;
 }
+
+.toolbar {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+
+.searchInput {
+  width: 320px;
+  max-width: 52vw;
+  border: 1px solid var(--border, #e5e7eb);
+  border-radius: 10px;
+  padding: 8px 10px;
+  font: inherit;
+  outline: none;
+}
+
+.searchInput:focus {
+  border-color: var(--primary, #4f46e5);
+  box-shadow: 0 0 0 3px var(--primary-100, #eef2ff);
+}
+
+.primaryBtn {
+  background: var(--primary, #4f46e5);
+  color: #fff;
+  border: none;
+  border-radius: 10px;
+  padding: 10px 14px;
+  cursor: pointer;
+  font-weight: 600;
+}
+
+.primaryBtn:hover {
+  filter: brightness(0.95);
+}
+
+.successBanner {
+  margin: 8px 0 12px;
+  padding: 10px 12px;
+  border: 1px solid #d1fae5;
+  background: #ecfdf5;
+  color: #065f46;
+  border-radius: 10px;
+  font-size: 0.95rem;
+}
\ No newline at end of file
diff --git a/src/components/EductionPortal/ProjectManager/ProjectManagerNotification.jsx b/src/components/EductionPortal/ProjectManager/ProjectManagerNotification.jsx
new file mode 100644
index 0000000000..14693b6fd4
--- /dev/null
+++ b/src/components/EductionPortal/ProjectManager/ProjectManagerNotification.jsx
@@ -0,0 +1,120 @@
+import React from "react";
+import styles from "./ProjectManagerNotification.module.css";
+
+async function sendNotification({ educatorIds, message }) {
+  await new Promise((r) => setTimeout(r, 550));
+  if (!educatorIds.length || !message.trim()) {
+    throw new Error("Select at least one educator and enter a message.");
+  }
+  return { ok: true };
+}
+
+export default function ProjectManagerNotification({ educators, onClose, onSent }) {
+  const [selected, setSelected] = React.useState([]);
+  const [message, setMessage] = React.useState("");
+  const [sending, setSending] = React.useState(false);
+  const [error, setError] = React.useState(null);
+
+  const allChecked = selected.length === educators.length && educators.length > 0;
+  const someChecked = selected.length > 0 && selected.length < educators.length;
+
+  function toggleAll() {
+    if (allChecked) {
+      setSelected([]);
+    } else {
+      setSelected(educators.map((e) => e.id));
+    }
+  }
+
+  function toggleOne(id) {
+    setSelected((prev) =>
+      prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]
+    );
+  }
+
+  async function handleSend() {
+    setSending(true);
+    setError(null);
+    try {
+      await sendNotification({ educatorIds: selected, message });
+      onSent({ educatorIds: selected, message });
+    } catch (e) {
+      setError(e.message || "Failed to send.");
+    } finally {
+      setSending(false);
+    }
+  }
+
+  return (
+    <div className={styles.overlay} role="dialog" aria-modal="true" aria-labelledby="composer-title">
+      <div className={styles.modal}>
+        <div className={styles.header}>
+          <h3 id="composer-title" className={styles.title}>New Announcement</h3>
+          <button className={styles.iconBtn} onClick={onClose} aria-label="Close">×</button>
+        </div>
+
+        <div className={styles.body}>
+          <div className={styles.section}>
+            <div className={styles.sectionLabel}>Recipients</div>
+
+            <label className={styles.checkAll}>
+              <input
+                type="checkbox"
+                checked={allChecked}
+                ref={(el) => {
+                  if (el) el.indeterminate = someChecked;
+                }}
+                onChange={toggleAll}
+              />
+              Select all
+            </label>
+
+            <div className={styles.list}>
+              {educators.map((e) => (
+                <label key={e.id} className={styles.item}>
+                  <input
+                    type="checkbox"
+                    checked={selected.includes(e.id)}
+                    onChange={() => toggleOne(e.id)}
+                  />
+                  <span className={styles.itemText}>
+                    <span className={styles.itemName}>{e.name}</span>
+                    <span className={styles.itemMeta}> • {e.subject}</span>
+                  </span>
+                </label>
+              ))}
+            </div>
+          </div>
+
+          <div className={styles.section}>
+            <div className={styles.sectionLabel}>Message</div>
+            <textarea
+              className={styles.textarea}
+              placeholder="Write your announcement to teachers…"
+              rows={6}
+              value={message}
+              onChange={(e) => setMessage(e.target.value)}
+              maxLength={1000}
+            />
+            <div className={styles.counter}>{message.length}/1000</div>
+          </div>
+
+          {error && <div className={styles.error}>{error}</div>}
+        </div>
+
+        <div className={styles.footer}>
+          <button className={styles.cancelBtnNotify} onClick={onClose} disabled={sending}>
+            Cancel
+          </button>
+          <button
+            className={styles.primaryBtn}
+            onClick={handleSend}
+            disabled={sending}
+          >
+            {sending ? "Sending…" : "Send Announcement"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/EductionPortal/ProjectManager/ProjectManagerNotification.module.css b/src/components/EductionPortal/ProjectManager/ProjectManagerNotification.module.css
new file mode 100644
index 0000000000..d089f411b0
--- /dev/null
+++ b/src/components/EductionPortal/ProjectManager/ProjectManagerNotification.module.css
@@ -0,0 +1,180 @@
+:root {
+  --bg: #fff;
+  --text: #111827;
+  --muted: #6b7280;
+  --border: #e5e7eb;
+  --primary: #4f46e5;
+  --primary-100: #eef2ff;
+  --error: #b91c1c;
+}
+
+.overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(17, 24, 39, 0.55);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 60;
+}
+
+.modal {
+  width: min(720px, 92vw);
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
+  overflow: hidden;
+  color: var(--text);
+}
+
+.header {
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.title {
+  margin: 0;
+  font-size: 1.125rem;
+  font-weight: 600;
+}
+
+.iconBtn {
+  border: none;
+  background: transparent;
+  font-size: 1.5rem;
+  line-height: 1;
+  cursor: pointer;
+  color: var(--muted);
+}
+
+.iconBtn:hover {
+  color: var(--text);
+}
+
+.body {
+  padding: 16px;
+}
+
+.section {
+  margin-bottom: 16px;
+}
+
+.sectionLabel {
+  font-size: 0.95rem;
+  color: var(--muted);
+  margin-bottom: 8px;
+}
+
+.checkAll {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 10px;
+  border: 1px dashed var(--border);
+  border-radius: 8px;
+  margin-bottom: 10px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.list {
+  max-height: 220px;
+  overflow: auto;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 6px;
+  background: #fafafa;
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px;
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+.item:hover {
+  background: #f3f4f6;
+}
+
+.itemText {
+  font-size: 0.95rem;
+}
+
+.itemName {
+  font-weight: 600;
+}
+
+.itemMeta {
+  color: var(--muted);
+}
+
+.textarea {
+  width: 100%;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 10px;
+  font: inherit;
+  outline: none;
+  resize: vertical;
+}
+
+.textarea:focus {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px var(--primary-100);
+}
+
+.counter {
+  text-align: right;
+  font-size: 0.8rem;
+  color: var(--muted);
+  margin-top: 6px;
+}
+
+.error {
+  margin-top: 4px;
+  color: var(--error);
+  font-size: 0.95rem;
+}
+
+.footer {
+  padding: 12px 16px;
+  border-top: 1px solid var(--border);
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+
+.primaryBtn {
+  background: var(--primary);
+  color: #fff;
+  border: none;
+  border-radius: 10px;
+  padding: 10px 14px;
+  cursor: pointer;
+  font-weight: 600;
+}
+
+.primaryBtn:disabled {
+  opacity: 0.7;
+  cursor: default;
+}
+
+.cancelBtnNotify {
+  background: transparent;
+  color: var(--text);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 10px 14px;
+  cursor: pointer;
+}
+
+.cancelBtnNotify:hover {
+  background: #f9fafb;
+}
\ No newline at end of file
diff --git a/src/routes.jsx b/src/routes.jsx
index dacd7c6054..425e7396b3 100644
--- a/src/routes.jsx
+++ b/src/routes.jsx
@@ -239,7 +239,7 @@ const MonthsPledgedChart = lazy(() =>
 
 // PR Analytics Dashboard
 import ReviewsInsight from './components/PRAnalyticsDashboard/ReviewsInsight/ReviewsInsight';
-import ProjectManagerEducatorView from 'components/EductionPortal/ProjectManager/ProjectManagerEducatorView';
+import ProjectManagerEducatorView from './components/EductionPortal/ProjectManager/ProjectManagerEducatorView';
 
 const JobAnalyticsPage = lazy(() =>
   import('./components/Reports/HitsAndApplicationRatio/JobAnalyticsPage'),
@@ -736,7 +736,7 @@ export default (
         <EPProtectedRoute path="/educationportal" exact component={EPDashboard} />
         <Route path="/educationportal/login" component={EPLogin} />
         <EPProtectedRoute path="/educationportal/tasks/upload" exact component={WriteTaskUpload} />
-        <EPProtectedRoute path="/educationportal//pm/dashboard" exact component={ProjectManagerEducatorView} />
+        <EPProtectedRoute path="/educationportal/pm/dashboard" exact component={ProjectManagerEducatorView} />
         {/* PR Analytics Dashboard */}
         <Route path="/pull-request-analytics/reviews-insight" component={ReviewsInsight} />
         <CPProtectedRoute
diff --git a/yarn.lock b/yarn.lock
index 0a06a19bae..d8ea7ccf15 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -110,7 +110,7 @@
   resolved "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.28.0.tgz"
   integrity sha512-60X7qkglvrap8mn1lh2ebxXdZYtUcpd7gsmy9kLaBJ4i/WdY8PqTSdxyA8qraikqKQK5C1KRBKXqznrVapyNaw==
 
-"@babel/core@^7.11.6", "@babel/core@^7.12.3", "@babel/core@^7.28.0":
+"@babel/core@^7.0.0", "@babel/core@^7.0.0 || ^8.0.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.0", "@babel/core@^7.11.6", "@babel/core@^7.12.0", "@babel/core@^7.12.3", "@babel/core@^7.13.0", "@babel/core@^7.28.0", "@babel/core@^7.4.0 || ^8.0.0-0 <8.0.0", "@babel/core@^7.8.0":
   version "7.28.0"
   resolved "https://registry.npmjs.org/@babel/core/-/core-7.28.0.tgz"
   integrity sha512-UlLAnTPrFdNGoFtbSXwcGFQBtQZJCNjaN6hQNP3UPvuNXT1i82N26KL3dZeIpNalWywr9IuQuncaAfUaS1g6sQ==
@@ -1242,7 +1242,7 @@
   resolved "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz"
   integrity sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==
 
-"@emotion/react@^11.8.1":
+"@emotion/react@^11.0.0-rc.0", "@emotion/react@^11.4.1", "@emotion/react@^11.5.0", "@emotion/react@^11.8.1", "@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==
@@ -1272,7 +1272,7 @@
   resolved "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.4.0.tgz"
   integrity sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==
 
-"@emotion/styled@^11.14.0":
+"@emotion/styled@^11.14.0", "@emotion/styled@^11.3.0", "@emotion/styled@^11.8.1":
   version "11.14.1"
   resolved "https://registry.npmjs.org/@emotion/styled/-/styled-11.14.1.tgz"
   integrity sha512-qEEJt42DuToa3gurlH4Qqc1kVpNq8wO8cJtDzU46TjlzWjDlsVyevtYCRijVq3SrHsROS+gVQ8Fnea108GnKzw==
@@ -1385,11 +1385,136 @@
     "@ephox/katamari" "^9.1.6"
     "@ephox/sand" "^6.0.10"
 
+"@esbuild/aix-ppc64@0.25.9":
+  version "0.25.9"
+  resolved "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.9.tgz"
+  integrity sha512-OaGtL73Jck6pBKjNIe24BnFE6agGl+6KxDtTfHhy1HmhthfKouEcOhqpSL64K4/0WCtbKFLOdzD/44cJ4k9opA==
+
+"@esbuild/android-arm@0.25.9":
+  version "0.25.9"
+  resolved "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.9.tgz"
+  integrity sha512-5WNI1DaMtxQ7t7B6xa572XMXpHAaI/9Hnhk8lcxF4zVN4xstUgTlvuGDorBguKEnZO70qwEcLpfifMLoxiPqHQ==
+
+"@esbuild/android-arm64@0.25.9":
+  version "0.25.9"
+  resolved "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.9.tgz"
+  integrity sha512-IDrddSmpSv51ftWslJMvl3Q2ZT98fUSL2/rlUXuVqRXHCs5EUF1/f+jbjF5+NG9UffUDMCiTyh8iec7u8RlTLg==
+
+"@esbuild/android-x64@0.25.9":
+  version "0.25.9"
+  resolved "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.9.tgz"
+  integrity sha512-I853iMZ1hWZdNllhVZKm34f4wErd4lMyeV7BLzEExGEIZYsOzqDWDf+y082izYUE8gtJnYHdeDpN/6tUdwvfiw==
+
 "@esbuild/darwin-arm64@0.25.9":
   version "0.25.9"
   resolved "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.9.tgz"
   integrity sha512-XIpIDMAjOELi/9PB30vEbVMs3GV1v2zkkPnuyRRURbhqjyzIINwj+nbQATh4H9GxUgH1kFsEyQMxwiLFKUS6Rg==
 
+"@esbuild/darwin-x64@0.25.9":
+  version "0.25.9"
+  resolved "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.9.tgz"
+  integrity sha512-jhHfBzjYTA1IQu8VyrjCX4ApJDnH+ez+IYVEoJHeqJm9VhG9Dh2BYaJritkYK3vMaXrf7Ogr/0MQ8/MeIefsPQ==
+
+"@esbuild/freebsd-arm64@0.25.9":
+  version "0.25.9"
+  resolved "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.9.tgz"
+  integrity sha512-z93DmbnY6fX9+KdD4Ue/H6sYs+bhFQJNCPZsi4XWJoYblUqT06MQUdBCpcSfuiN72AbqeBFu5LVQTjfXDE2A6Q==
+
+"@esbuild/freebsd-x64@0.25.9":
+  version "0.25.9"
+  resolved "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.9.tgz"
+  integrity sha512-mrKX6H/vOyo5v71YfXWJxLVxgy1kyt1MQaD8wZJgJfG4gq4DpQGpgTB74e5yBeQdyMTbgxp0YtNj7NuHN0PoZg==
+
+"@esbuild/linux-arm@0.25.9":
+  version "0.25.9"
+  resolved "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.9.tgz"
+  integrity sha512-HBU2Xv78SMgaydBmdor38lg8YDnFKSARg1Q6AT0/y2ezUAKiZvc211RDFHlEZRFNRVhcMamiToo7bDx3VEOYQw==
+
+"@esbuild/linux-arm64@0.25.9":
+  version "0.25.9"
+  resolved "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.9.tgz"
+  integrity sha512-BlB7bIcLT3G26urh5Dmse7fiLmLXnRlopw4s8DalgZ8ef79Jj4aUcYbk90g8iCa2467HX8SAIidbL7gsqXHdRw==
+
+"@esbuild/linux-ia32@0.25.9":
+  version "0.25.9"
+  resolved "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.9.tgz"
+  integrity sha512-e7S3MOJPZGp2QW6AK6+Ly81rC7oOSerQ+P8L0ta4FhVi+/j/v2yZzx5CqqDaWjtPFfYz21Vi1S0auHrap3Ma3A==
+
+"@esbuild/linux-loong64@0.25.9":
+  version "0.25.9"
+  resolved "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.9.tgz"
+  integrity sha512-Sbe10Bnn0oUAB2AalYztvGcK+o6YFFA/9829PhOCUS9vkJElXGdphz0A3DbMdP8gmKkqPmPcMJmJOrI3VYB1JQ==
+
+"@esbuild/linux-mips64el@0.25.9":
+  version "0.25.9"
+  resolved "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.9.tgz"
+  integrity sha512-YcM5br0mVyZw2jcQeLIkhWtKPeVfAerES5PvOzaDxVtIyZ2NUBZKNLjC5z3/fUlDgT6w89VsxP2qzNipOaaDyA==
+
+"@esbuild/linux-ppc64@0.25.9":
+  version "0.25.9"
+  resolved "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.9.tgz"
+  integrity sha512-++0HQvasdo20JytyDpFvQtNrEsAgNG2CY1CLMwGXfFTKGBGQT3bOeLSYE2l1fYdvML5KUuwn9Z8L1EWe2tzs1w==
+
+"@esbuild/linux-riscv64@0.25.9":
+  version "0.25.9"
+  resolved "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.9.tgz"
+  integrity sha512-uNIBa279Y3fkjV+2cUjx36xkx7eSjb8IvnL01eXUKXez/CBHNRw5ekCGMPM0BcmqBxBcdgUWuUXmVWwm4CH9kg==
+
+"@esbuild/linux-s390x@0.25.9":
+  version "0.25.9"
+  resolved "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.9.tgz"
+  integrity sha512-Mfiphvp3MjC/lctb+7D287Xw1DGzqJPb/J2aHHcHxflUo+8tmN/6d4k6I2yFR7BVo5/g7x2Monq4+Yew0EHRIA==
+
+"@esbuild/linux-x64@0.25.9":
+  version "0.25.9"
+  resolved "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.9.tgz"
+  integrity sha512-iSwByxzRe48YVkmpbgoxVzn76BXjlYFXC7NvLYq+b+kDjyyk30J0JY47DIn8z1MO3K0oSl9fZoRmZPQI4Hklzg==
+
+"@esbuild/netbsd-arm64@0.25.9":
+  version "0.25.9"
+  resolved "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.9.tgz"
+  integrity sha512-9jNJl6FqaUG+COdQMjSCGW4QiMHH88xWbvZ+kRVblZsWrkXlABuGdFJ1E9L7HK+T0Yqd4akKNa/lO0+jDxQD4Q==
+
+"@esbuild/netbsd-x64@0.25.9":
+  version "0.25.9"
+  resolved "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.9.tgz"
+  integrity sha512-RLLdkflmqRG8KanPGOU7Rpg829ZHu8nFy5Pqdi9U01VYtG9Y0zOG6Vr2z4/S+/3zIyOxiK6cCeYNWOFR9QP87g==
+
+"@esbuild/openbsd-arm64@0.25.9":
+  version "0.25.9"
+  resolved "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.9.tgz"
+  integrity sha512-YaFBlPGeDasft5IIM+CQAhJAqS3St3nJzDEgsgFixcfZeyGPCd6eJBWzke5piZuZ7CtL656eOSYKk4Ls2C0FRQ==
+
+"@esbuild/openbsd-x64@0.25.9":
+  version "0.25.9"
+  resolved "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.9.tgz"
+  integrity sha512-1MkgTCuvMGWuqVtAvkpkXFmtL8XhWy+j4jaSO2wxfJtilVCi0ZE37b8uOdMItIHz4I6z1bWWtEX4CJwcKYLcuA==
+
+"@esbuild/openharmony-arm64@0.25.9":
+  version "0.25.9"
+  resolved "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.25.9.tgz"
+  integrity sha512-4Xd0xNiMVXKh6Fa7HEJQbrpP3m3DDn43jKxMjxLLRjWnRsfxjORYJlXPO4JNcXtOyfajXorRKY9NkOpTHptErg==
+
+"@esbuild/sunos-x64@0.25.9":
+  version "0.25.9"
+  resolved "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.9.tgz"
+  integrity sha512-WjH4s6hzo00nNezhp3wFIAfmGZ8U7KtrJNlFMRKxiI9mxEK1scOMAaa9i4crUtu+tBr+0IN6JCuAcSBJZfnphw==
+
+"@esbuild/win32-arm64@0.25.9":
+  version "0.25.9"
+  resolved "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.9.tgz"
+  integrity sha512-mGFrVJHmZiRqmP8xFOc6b84/7xa5y5YvR1x8djzXpJBSv/UsNK6aqec+6JDjConTgvvQefdGhFDAs2DLAds6gQ==
+
+"@esbuild/win32-ia32@0.25.9":
+  version "0.25.9"
+  resolved "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.9.tgz"
+  integrity sha512-b33gLVU2k11nVx1OhX3C8QQP6UHQK4ZtN56oFWvVXvz2VkDoe6fbG8TOgHFxEvqeqohmRnIHe5A1+HADk4OQww==
+
+"@esbuild/win32-x64@0.25.9":
+  version "0.25.9"
+  resolved "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.9.tgz"
+  integrity sha512-PPOl1mi6lpLNQxnGoyAfschAodRFYXJ+9fs6WHXz7CSWKbOqiMZsubC+BQsVKuul+3vKLuwTHsS2c2y9EoKwxQ==
+
 "@eslint-community/eslint-utils@^4.2.0", "@eslint-community/eslint-utils@^4.4.0", "@eslint-community/eslint-utils@^4.7.0":
   version "4.7.0"
   resolved "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.7.0.tgz"
@@ -1505,7 +1630,7 @@
   resolved "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-7.0.1.tgz"
   integrity sha512-0VpNtO5cNe1/HQWMkl4OdncYK/mv9hnBte0Ew0n6DMzmo3Q3WzDFABHm6LeNTipt5zAyhQ6Ugjiu8aLaEjh1gg==
 
-"@fortawesome/fontawesome-svg-core@^6.7.2":
+"@fortawesome/fontawesome-svg-core@^6.7.2", "@fortawesome/fontawesome-svg-core@~1 || ~6 || ~7":
   version "6.7.2"
   resolved "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.7.2.tgz"
   integrity sha512-yxtOBWDrdi5DD5o1pmVdq3WMCvnobT0LU6R8RyyVXPvFRd2o79/0NCuQoCjNTeZz9EzA9xS3JxNWfv54RIHFEA==
@@ -1849,7 +1974,7 @@
     clsx "^2.1.1"
     prop-types "^15.8.1"
 
-"@mui/material@^7.1.0":
+"@mui/material@^5.15.14 || ^6.0.0 || ^7.0.0", "@mui/material@^7.1.0", "@mui/material@^7.3.1":
   version "7.3.1"
   resolved "https://registry.npmjs.org/@mui/material/-/material-7.3.1.tgz"
   integrity sha512-Xf6Shbo03YmcBedZMwSpEFOwpYDtU7tC+rhAHTrA9FHk0FpsDqiQ9jUa1j/9s3HLs7KWb5mDcGnlwdh9Q9KAag==
@@ -1888,7 +2013,7 @@
     csstype "^3.1.3"
     prop-types "^15.8.1"
 
-"@mui/system@^7.3.1":
+"@mui/system@^5.15.14 || ^6.0.0 || ^7.0.0", "@mui/system@^7.3.1":
   version "7.3.1"
   resolved "https://registry.npmjs.org/@mui/system/-/system-7.3.1.tgz"
   integrity sha512-mIidecvcNVpNJMdPDmCeoSL5zshKBbYPcphjuh6ZMjhybhqhZ4mX6k9zmIWh6XOXcqRQMg5KrcjnO0QstrNj3w==
@@ -1990,11 +2115,71 @@
   resolved "https://registry.npmjs.org/@open-draft/until/-/until-2.1.0.tgz"
   integrity sha512-U69T3ItWHvLwGg5eJ0n3I62nWuE6ilHlmz7zM0npLBRvPRd7e6NYmg54vvRtP5mZG7kZqZCFVdsTWo7BPtBujg==
 
+"@parcel/watcher-android-arm64@2.5.1":
+  version "2.5.1"
+  resolved "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.1.tgz"
+  integrity sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA==
+
 "@parcel/watcher-darwin-arm64@2.5.1":
   version "2.5.1"
   resolved "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.1.tgz"
   integrity sha512-eAzPv5osDmZyBhou8PoF4i6RQXAfeKL9tjb3QzYuccXFMQU0ruIc/POh30ePnaOyD1UXdlKguHBmsTs53tVoPw==
 
+"@parcel/watcher-darwin-x64@2.5.1":
+  version "2.5.1"
+  resolved "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.1.tgz"
+  integrity sha512-1ZXDthrnNmwv10A0/3AJNZ9JGlzrF82i3gNQcWOzd7nJ8aj+ILyW1MTxVk35Db0u91oD5Nlk9MBiujMlwmeXZg==
+
+"@parcel/watcher-freebsd-x64@2.5.1":
+  version "2.5.1"
+  resolved "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.1.tgz"
+  integrity sha512-SI4eljM7Flp9yPuKi8W0ird8TI/JK6CSxju3NojVI6BjHsTyK7zxA9urjVjEKJ5MBYC+bLmMcbAWlZ+rFkLpJQ==
+
+"@parcel/watcher-linux-arm-glibc@2.5.1":
+  version "2.5.1"
+  resolved "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.1.tgz"
+  integrity sha512-RCdZlEyTs8geyBkkcnPWvtXLY44BCeZKmGYRtSgtwwnHR4dxfHRG3gR99XdMEdQ7KeiDdasJwwvNSF5jKtDwdA==
+
+"@parcel/watcher-linux-arm-musl@2.5.1":
+  version "2.5.1"
+  resolved "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.1.tgz"
+  integrity sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==
+
+"@parcel/watcher-linux-arm64-glibc@2.5.1":
+  version "2.5.1"
+  resolved "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.1.tgz"
+  integrity sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==
+
+"@parcel/watcher-linux-arm64-musl@2.5.1":
+  version "2.5.1"
+  resolved "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.1.tgz"
+  integrity sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==
+
+"@parcel/watcher-linux-x64-glibc@2.5.1":
+  version "2.5.1"
+  resolved "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.1.tgz"
+  integrity sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==
+
+"@parcel/watcher-linux-x64-musl@2.5.1":
+  version "2.5.1"
+  resolved "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.1.tgz"
+  integrity sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==
+
+"@parcel/watcher-win32-arm64@2.5.1":
+  version "2.5.1"
+  resolved "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.1.tgz"
+  integrity sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==
+
+"@parcel/watcher-win32-ia32@2.5.1":
+  version "2.5.1"
+  resolved "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.1.tgz"
+  integrity sha512-c2KkcVN+NJmuA7CGlaGD1qJh1cLfDnQsHjE89E60vUEMlqduHGCdCLJCID5geFVM0dOtA3ZiIO8BoEQmzQVfpQ==
+
+"@parcel/watcher-win32-x64@2.5.1":
+  version "2.5.1"
+  resolved "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.1.tgz"
+  integrity sha512-9lHBdJITeNR++EvSQVUcaZoWupyHfXe1jZvGZ06O/5MflPcuPLtEphScIBL+AiCWBO46tDSHzWyD0uDmmZqsgA==
+
 "@parcel/watcher@^2.4.1":
   version "2.5.1"
   resolved "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.1.tgz"
@@ -2024,7 +2209,7 @@
   resolved "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.29.tgz"
   integrity sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==
 
-"@popperjs/core@^2.11.6", "@popperjs/core@^2.11.8":
+"@popperjs/core@^2.0.0", "@popperjs/core@^2.11.6", "@popperjs/core@^2.11.8":
   version "2.11.8"
   resolved "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz"
   integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
@@ -2144,11 +2329,106 @@
   resolved "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.27.tgz"
   integrity sha512-+d0F4MKMCbeVUJwG96uQ4SgAznZNSq93I3V+9NHA4OpvqG8mRCpGdKmK8l/dl02h2CCDHwW2FqilnTyDcAnqjA==
 
+"@rollup/rollup-android-arm-eabi@4.49.0":
+  version "4.49.0"
+  resolved "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.49.0.tgz"
+  integrity sha512-rlKIeL854Ed0e09QGYFlmDNbka6I3EQFw7iZuugQjMb11KMpJCLPFL4ZPbMfaEhLADEL1yx0oujGkBQ7+qW3eA==
+
+"@rollup/rollup-android-arm64@4.49.0":
+  version "4.49.0"
+  resolved "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.49.0.tgz"
+  integrity sha512-cqPpZdKUSQYRtLLr6R4X3sD4jCBO1zUmeo3qrWBCqYIeH8Q3KRL4F3V7XJ2Rm8/RJOQBZuqzQGWPjjvFUcYa/w==
+
 "@rollup/rollup-darwin-arm64@4.49.0":
   version "4.49.0"
   resolved "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.49.0.tgz"
   integrity sha512-99kMMSMQT7got6iYX3yyIiJfFndpojBmkHfTc1rIje8VbjhmqBXE+nb7ZZP3A5skLyujvT0eIUCUsxAe6NjWbw==
 
+"@rollup/rollup-darwin-x64@4.49.0":
+  version "4.49.0"
+  resolved "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.49.0.tgz"
+  integrity sha512-y8cXoD3wdWUDpjOLMKLx6l+NFz3NlkWKcBCBfttUn+VGSfgsQ5o/yDUGtzE9HvsodkP0+16N0P4Ty1VuhtRUGg==
+
+"@rollup/rollup-freebsd-arm64@4.49.0":
+  version "4.49.0"
+  resolved "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.49.0.tgz"
+  integrity sha512-3mY5Pr7qv4GS4ZvWoSP8zha8YoiqrU+e0ViPvB549jvliBbdNLrg2ywPGkgLC3cmvN8ya3za+Q2xVyT6z+vZqA==
+
+"@rollup/rollup-freebsd-x64@4.49.0":
+  version "4.49.0"
+  resolved "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.49.0.tgz"
+  integrity sha512-C9KzzOAQU5gU4kG8DTk+tjdKjpWhVWd5uVkinCwwFub2m7cDYLOdtXoMrExfeBmeRy9kBQMkiyJ+HULyF1yj9w==
+
+"@rollup/rollup-linux-arm-gnueabihf@4.49.0":
+  version "4.49.0"
+  resolved "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.49.0.tgz"
+  integrity sha512-OVSQgEZDVLnTbMq5NBs6xkmz3AADByCWI4RdKSFNlDsYXdFtlxS59J+w+LippJe8KcmeSSM3ba+GlsM9+WwC1w==
+
+"@rollup/rollup-linux-arm-musleabihf@4.49.0":
+  version "4.49.0"
+  resolved "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.49.0.tgz"
+  integrity sha512-ZnfSFA7fDUHNa4P3VwAcfaBLakCbYaxCk0jUnS3dTou9P95kwoOLAMlT3WmEJDBCSrOEFFV0Y1HXiwfLYJuLlA==
+
+"@rollup/rollup-linux-arm64-gnu@4.49.0":
+  version "4.49.0"
+  resolved "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.49.0.tgz"
+  integrity sha512-Z81u+gfrobVK2iV7GqZCBfEB1y6+I61AH466lNK+xy1jfqFLiQ9Qv716WUM5fxFrYxwC7ziVdZRU9qvGHkYIJg==
+
+"@rollup/rollup-linux-arm64-musl@4.49.0":
+  version "4.49.0"
+  resolved "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.49.0.tgz"
+  integrity sha512-zoAwS0KCXSnTp9NH/h9aamBAIve0DXeYpll85shf9NJ0URjSTzzS+Z9evmolN+ICfD3v8skKUPyk2PO0uGdFqg==
+
+"@rollup/rollup-linux-loongarch64-gnu@4.49.0":
+  version "4.49.0"
+  resolved "https://registry.npmjs.org/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.49.0.tgz"
+  integrity sha512-2QyUyQQ1ZtwZGiq0nvODL+vLJBtciItC3/5cYN8ncDQcv5avrt2MbKt1XU/vFAJlLta5KujqyHdYtdag4YEjYQ==
+
+"@rollup/rollup-linux-ppc64-gnu@4.49.0":
+  version "4.49.0"
+  resolved "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.49.0.tgz"
+  integrity sha512-k9aEmOWt+mrMuD3skjVJSSxHckJp+SiFzFG+v8JLXbc/xi9hv2icSkR3U7uQzqy+/QbbYY7iNB9eDTwrELo14g==
+
+"@rollup/rollup-linux-riscv64-gnu@4.49.0":
+  version "4.49.0"
+  resolved "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.49.0.tgz"
+  integrity sha512-rDKRFFIWJ/zJn6uk2IdYLc09Z7zkE5IFIOWqpuU0o6ZpHcdniAyWkwSUWE/Z25N/wNDmFHHMzin84qW7Wzkjsw==
+
+"@rollup/rollup-linux-riscv64-musl@4.49.0":
+  version "4.49.0"
+  resolved "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.49.0.tgz"
+  integrity sha512-FkkhIY/hYFVnOzz1WeV3S9Bd1h0hda/gRqvZCMpHWDHdiIHn6pqsY3b5eSbvGccWHMQ1uUzgZTKS4oGpykf8Tw==
+
+"@rollup/rollup-linux-s390x-gnu@4.49.0":
+  version "4.49.0"
+  resolved "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.49.0.tgz"
+  integrity sha512-gRf5c+A7QiOG3UwLyOOtyJMD31JJhMjBvpfhAitPAoqZFcOeK3Kc1Veg1z/trmt+2P6F/biT02fU19GGTS529A==
+
+"@rollup/rollup-linux-x64-gnu@4.49.0":
+  version "4.49.0"
+  resolved "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.49.0.tgz"
+  integrity sha512-BR7+blScdLW1h/2hB/2oXM+dhTmpW3rQt1DeSiCP9mc2NMMkqVgjIN3DDsNpKmezffGC9R8XKVOLmBkRUcK/sA==
+
+"@rollup/rollup-linux-x64-musl@4.49.0":
+  version "4.49.0"
+  resolved "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.49.0.tgz"
+  integrity sha512-hDMOAe+6nX3V5ei1I7Au3wcr9h3ktKzDvF2ne5ovX8RZiAHEtX1A5SNNk4zt1Qt77CmnbqT+upb/umzoPMWiPg==
+
+"@rollup/rollup-win32-arm64-msvc@4.49.0":
+  version "4.49.0"
+  resolved "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.49.0.tgz"
+  integrity sha512-wkNRzfiIGaElC9kXUT+HLx17z7D0jl+9tGYRKwd8r7cUqTL7GYAvgUY++U2hK6Ar7z5Z6IRRoWC8kQxpmM7TDA==
+
+"@rollup/rollup-win32-ia32-msvc@4.49.0":
+  version "4.49.0"
+  resolved "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.49.0.tgz"
+  integrity sha512-gq5aW/SyNpjp71AAzroH37DtINDcX1Qw2iv9Chyz49ZgdOP3NV8QCyKZUrGsYX9Yyggj5soFiRCgsL3HwD8TdA==
+
+"@rollup/rollup-win32-x64-msvc@4.49.0":
+  version "4.49.0"
+  resolved "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.49.0.tgz"
+  integrity sha512-gEtqFbzmZLFk2xKh7g0Rlo8xzho8KrEFEkzvHbfUGkrgXOpZ4XagQ6n+wIZFNh1nTb8UD16J4nFSFKXYgnbdBg==
+
 "@rtsao/scc@^1.1.0":
   version "1.1.0"
   resolved "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz"
@@ -2246,7 +2526,7 @@
   dependencies:
     "@tanstack/query-core" "5.90.3"
 
-"@testing-library/dom@^10.4.0":
+"@testing-library/dom@^10.4.0", "@testing-library/dom@>=7.21.4":
   version "10.4.1"
   resolved "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.1.tgz"
   integrity sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==
@@ -2531,7 +2811,7 @@
   resolved "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz"
   integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
 
-"@types/node@*":
+"@types/node@*", "@types/node@^18.0.0 || ^20.0.0 || >=22.0.0", "@types/node@>=18":
   version "24.3.0"
   resolved "https://registry.npmjs.org/@types/node/-/node-24.3.0.tgz"
   integrity sha512-aPTXCrfwnDLj4VvXrm+UUCQjNEvJgNA8s5F1cvwQU+3KNltTOkBm1j30uNLyqqPNe7gE3KFzImYoZEfLhp4Yow==
@@ -2605,7 +2885,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@>=16.14.8", "@types/react@>=16.9.11":
+"@types/react@*", "@types/react@^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "@types/react@^17.0.0 || ^18.0.0 || ^19.0.0", "@types/react@^18.2.25 || ^19", "@types/react@>=16.14.8", "@types/react@>=16.9.11":
   version "19.1.12"
   resolved "https://registry.npmjs.org/@types/react/-/react-19.1.12.tgz"
   integrity sha512-cMoR+FoAf/Jyq6+Df2/Z41jISvGZZ2eTlnsaJRptmZ76Caldwy1odD4xTr/gNV9VLj0AWgg/nmkevIyUfIIq5w==
@@ -3020,7 +3300,7 @@ acorn-jsx@^5.3.2:
   resolved "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz"
   integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
 
-acorn@^8.15.0, acorn@^8.9.0:
+"acorn@^6.0.0 || ^7.0.0 || ^8.0.0", acorn@^8.14.0, acorn@^8.15.0, 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==
@@ -3054,7 +3334,7 @@ ajv@^6.12.4:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
-ajv@^8.0.0, ajv@^8.0.1, ajv@^8.9.0:
+ajv@^8.0.0, ajv@^8.0.1, 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==
@@ -3378,7 +3658,7 @@ axios-mock-adapter@^1.22.0:
     fast-deep-equal "^3.1.3"
     is-buffer "^2.0.5"
 
-axios@^1.11.0:
+axios@^1.11.0, "axios@>= 0.17.0":
   version "1.11.0"
   resolved "https://registry.npmjs.org/axios/-/axios-1.11.0.tgz"
   integrity sha512-1Lx3WLFQWm3ooKDYZD1eXmoGO9fxYQjrycfHFC8P0sCfQVXyROp0p9PFWBehewBOdCwHc+f/b8I0fMto5eSfwA==
@@ -3638,7 +3918,7 @@ browserify-sign@^4.2.3:
     readable-stream "^2.3.8"
     safe-buffer "^5.2.1"
 
-browserslist@^4.24.0, browserslist@^4.24.5, browserslist@^4.25.3:
+browserslist@^4.24.0, browserslist@^4.24.5, browserslist@^4.25.3, "browserslist@>= 4.21.0":
   version "4.25.4"
   resolved "https://registry.npmjs.org/browserslist/-/browserslist-4.25.4.tgz"
   integrity sha512-4jYpcjabC606xJ3kw2QwGEZKX0Aw7sgQdZCvIK9dhVSPh76BKo+C+btT1RRofH7B+8iNpEbgGNVWiLki5q93yg==
@@ -3791,7 +4071,7 @@ chalk@^4.0.0, chalk@^4.1.0, chalk@^4.1.2:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
-chart.js@^4.5.0:
+chart.js@^4.1.1, chart.js@^4.5.0, chart.js@>=3.0.0:
   version "4.5.0"
   resolved "https://registry.npmjs.org/chart.js/-/chart.js-4.5.0.tgz"
   integrity sha512-aYeC/jDgSEx8SHWZvANYMioYMZ2KX02W6f6uVfyteuCGcadDLcYVHdfdygsTQkQ4TKn5lghoojAsPj5pu0SnvQ==
@@ -4488,14 +4768,14 @@ date-fns-tz@^2.0.1:
   resolved "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-2.0.1.tgz"
   integrity sha512-fJCG3Pwx8HUoLhkepdsP7Z5RsucUi+ZBOxyM5d0ZZ6c4SdYustq0VMmOu6Wf7bli+yS/Jwp91TOCqn9jMcVrUA==
 
-date-fns@^2.14.0, date-fns@^2.30.0:
+date-fns@^2.14.0, "date-fns@^2.25.0 || ^3.2.0 || ^4.0.0", "date-fns@^2.28.0 || ^3.0.0", date-fns@^2.30.0, "date-fns@>= 2.x", date-fns@2.x:
   version "2.30.0"
   resolved "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz"
   integrity sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==
   dependencies:
     "@babel/runtime" "^7.21.0"
 
-dayjs@^1.11.11, dayjs@^1.11.13:
+dayjs@^1.10.7, dayjs@^1.11.11, dayjs@^1.11.13, dayjs@^1.8.17, "dayjs@>= 1.x":
   version "1.11.18"
   resolved "https://registry.npmjs.org/dayjs/-/dayjs-1.11.18.tgz"
   integrity sha512-zFBQ7WFRvVRhKcWoUh+ZA1g2HVgUbsZm9sbddh8EC5iv93sui8DVVz1Npvz+r6meo9VKfa8NyLWBsQK1VvIKPA==
@@ -5174,7 +5454,7 @@ eslint-visitor-keys@^4.2.1:
   resolved "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz"
   integrity sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==
 
-eslint@^8.57.1:
+"eslint@^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8 || ^9", "eslint@^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9", "eslint@^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7", "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.5.0 || ^8.0.0 || ^9.0.0", eslint@^8.56.0, "eslint@^8.57.0 || ^9.0.0", eslint@^8.57.1, eslint@>=3.14.1, eslint@>=5.0.0:
   version "8.57.1"
   resolved "https://registry.npmjs.org/eslint/-/eslint-8.57.1.tgz"
   integrity sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==
@@ -6508,7 +6788,7 @@ jpeg-exif@^1.1.4:
   resolved "https://registry.npmjs.org/jpeg-exif/-/jpeg-exif-1.1.4.tgz"
   integrity sha512-a+bKEcCjtuW5WTdgeXFzswSrdqi0jk4XlEtZlx5A94wCoBpFjfFTbo/Tra5SpNCl/YFZPvcV1dJc+TAYeg6ROQ==
 
-jquery@^3.7.1:
+jquery@^3.7.1, "jquery@1.9.1 - 3":
   version "3.7.1"
   resolved "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz"
   integrity sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==
@@ -6533,7 +6813,7 @@ js-yaml@^4.1.0:
   dependencies:
     argparse "^2.0.1"
 
-jsdom@^26.1.0:
+jsdom@*, jsdom@^26.1.0:
   version "26.1.0"
   resolved "https://registry.npmjs.org/jsdom/-/jsdom-26.1.0.tgz"
   integrity sha512-Cvc9WUhxSMEo4McES3P7oK3QaXldCfNWp7pl2NNeiIFlCoLr3kfq9kb1fxftiwk1FLV7CvpvDfonxtzUDeSOPg==
@@ -6717,7 +6997,7 @@ leaflet.markercluster@^1.5.3:
   resolved "https://registry.npmjs.org/leaflet.markercluster/-/leaflet.markercluster-1.5.3.tgz"
   integrity sha512-vPTw/Bndq7eQHjLBVlWpnGeLa3t+3zGiuM7fJwCkiMFq+nmRuG3RI3f7f4N4TDX7T4NpbAXpR2+NTRSEGfCSeA==
 
-leaflet@^1.8.0, leaflet@^1.9.4:
+leaflet@^1.3.1, leaflet@^1.8.0, leaflet@^1.9.0, leaflet@^1.9.4:
   version "1.9.4"
   resolved "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz"
   integrity sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==
@@ -7016,7 +7296,7 @@ moment-timezone@^0.5.33:
   dependencies:
     moment "^2.29.4"
 
-moment@^2.29.4, moment@^2.30.1:
+moment@^2.29.4, moment@^2.30.1, "moment@>= 2.x":
   version "2.30.1"
   resolved "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz"
   integrity sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==
@@ -7031,7 +7311,7 @@ ms@^2.1.1, ms@^2.1.3:
   resolved "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz"
   integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
 
-msw@^2.10.4:
+msw@^2.10.4, msw@^2.4.9:
   version "2.11.0"
   resolved "https://registry.npmjs.org/msw/-/msw-2.11.0.tgz"
   integrity sha512-jEqa5J5B1OMD1jHu0gasCb5YriIDiWGdoS22Ie8CNNrl1iGRzCVfok3zuerdfb7GNFeIbYePXDA5c2bwRKMpBA==
@@ -7434,7 +7714,7 @@ picomatch@^2.0.4, picomatch@^2.2.3, picomatch@^2.3.1:
   resolved "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
 
-picomatch@^4.0.2:
+"picomatch@^3 || ^4", picomatch@^4.0.2:
   version "4.0.3"
   resolved "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz"
   integrity sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==
@@ -7474,7 +7754,7 @@ postcss-safe-parser@^7.0.1:
   resolved "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-7.0.1.tgz"
   integrity sha512-0AioNCJZ2DPYz5ABT6bddIqlhgwhpHZ/l65YAYo0BCIn0xiDpsnTHz0gnoTGk0OXZW0JRs+cDwL8u/teRdz+8A==
 
-postcss-selector-parser@^7.1.0:
+postcss-selector-parser@^7.0.0, postcss-selector-parser@^7.1.0:
   version "7.1.0"
   resolved "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz"
   integrity sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==
@@ -7487,7 +7767,7 @@ postcss-value-parser@^4.2.0:
   resolved "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
-postcss@^8.5.3, postcss@^8.5.6:
+postcss@^8.4.31, postcss@^8.5.3, postcss@^8.5.6:
   version "8.5.6"
   resolved "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz"
   integrity sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==
@@ -7508,7 +7788,7 @@ prettier-linter-helpers@^1.0.0:
   dependencies:
     fast-diff "^1.1.2"
 
-prettier@^1.19.1:
+prettier@^1.19.1, prettier@>=1.13.0:
   version "1.19.1"
   resolved "https://registry.npmjs.org/prettier/-/prettier-1.19.1.tgz"
   integrity sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==
@@ -7563,7 +7843,7 @@ prop-types-extra@^1.1.0:
     react-is "^16.3.2"
     warning "^4.0.0"
 
-prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@^15.0.0, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -8077,7 +8357,7 @@ react-day-picker@^8.10.1:
   resolved "https://registry.npmjs.org/react-day-picker/-/react-day-picker-8.10.1.tgz"
   integrity sha512-TMx7fNbhLk15eqcMt+7Z7S2KF7mfTId/XJDjKE8f+IUcFn0l08/kI4FiYTL/0yuOLmEcbR4Fwe3GJf/NiiMnPA==
 
-react-dom@^18.3.1:
+react-dom@*, "react-dom@^15.5.x || ^16.x || ^17.x || ^18.x", "react-dom@^16 || ^17 || ^18", "react-dom@^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom@^16.12.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0", "react-dom@^16.8.0 || ^17 || ^18", "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom@^16.9.0 || ^17 || ^18", "react-dom@^17.0.0 || ^18.0.0 || ^19.0.0", react-dom@^18.0.0, "react-dom@^18.0.0 || ^19.0.0", react-dom@^18.3.1, "react-dom@^19.0.0 || ^18.0.0 || ^17.0.1 || ^16.7.0", "react-dom@>= 16.8.0", react-dom@>=15, react-dom@>=15.0.0, react-dom@>=16, react-dom@>=16.0.0, react-dom@>=16.11.0, react-dom@>=16.3.0, react-dom@>=16.6.0, react-dom@>=16.8, react-dom@>=16.8.0, react-dom@>=16.9.0, "react-dom@~15 || ~16 || ~17 || ~18":
   version "18.3.1"
   resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz"
   integrity sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==
@@ -8219,7 +8499,7 @@ react-property@2.0.0:
   resolved "https://registry.npmjs.org/react-property/-/react-property-2.0.0.tgz"
   integrity sha512-kzmNjIgU32mO4mmH5+iUyrqlpFQhF8K2k7eZ4fdLSOPFrD1XgEuSBv9LDEgxRXTMBqMd8ppT0x6TIzqE5pdGdw==
 
-react-redux@^7.2.0:
+react-redux@^7.2.0, "react-redux@^7.2.1 || ^8.1.3 || ^9.0.0":
   version "7.2.9"
   resolved "https://registry.npmjs.org/react-redux/-/react-redux-7.2.9.tgz"
   integrity sha512-Gx4L3uM182jEEayZfRbI/G11ZpYdNAnBs70lFVMNdHJI76XYtR+7m0MN+eAs7UHBPhWXcnFPaS+9owSCJQHNpQ==
@@ -8244,7 +8524,7 @@ react-refresh@^0.17.0:
   resolved "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz"
   integrity sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==
 
-react-router-dom@^5.2.0:
+react-router-dom@^5.2.0, react-router-dom@>=4:
   version "5.3.4"
   resolved "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.4.tgz"
   integrity sha512-m4EqFMHv/Ih4kpcBCONHbkT68KoAeHN4p3lAGoNryfHi0dMy0kCzEZakiKRsvg5wHZ/JLrLW8o8KomWiz/qbYQ==
@@ -8384,7 +8664,7 @@ react-use-websocket@^3.0.0:
   resolved "https://registry.npmjs.org/react-use-websocket/-/react-use-websocket-3.0.0.tgz"
   integrity sha512-BInlbhXYrODBPKIplDAmI0J1VPM+1KhCLN09o+dzgQ8qMyrYs4t5kEYmCrTqyRuMTmpahylHFZWQXpfYyDkqOw==
 
-react@^18.3.1:
+react@*, "react@^15.5.x || ^16.x || ^17.x || ^18.x", "react@^16 || ^17 || ^18", "react@^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react@^16.12.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0", "react@^16.3 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react@^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react@^16.8.0 || ^17 || ^18", "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", "react@^16.8.3 || ^17 || ^18", "react@^16.8.3 || ^17.0.0-0 || ^18.0.0", "react@^16.9.0 || ^17 || ^18", "react@^16.9.0 || ^17.0.0 || ^18 || ^19", "react@^17.0.0 || ^18.0.0 || ^19.0.0", "react@^18 || ^19", "react@^18.0 || ^19", react@^18.0.0, "react@^18.0.0 || ^19.0.0", react@^18.3.1, "react@^19.0.0 || ^18.0.0 || ^17.0.1 || ^16.7.0", "react@>= 16.8.0", react@>=0.14.0, react@>=15, react@>=15.0.0, react@>=16, react@>=16.0.0, react@>=16.11.0, react@>=16.3.0, react@>=16.3.2, react@>=16.6.0, react@>=16.8, react@>=16.8.0, react@>=16.9.0, "react@~15 || ~16 || ~17 || ~18", "react@0.14 || 15 || 16 || 17 || 18", "react@0.14.x || ^15.0.0 || ^16.0.0 || ^17.0.0":
   version "18.3.1"
   resolved "https://registry.npmjs.org/react/-/react-18.3.1.tgz"
   integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==
@@ -8517,14 +8797,14 @@ redux-thunk@^3.1.0:
   resolved "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz"
   integrity sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==
 
-redux@^4.0.0, redux@^4.0.5:
+redux@*, redux@^4, redux@^4.0.0, redux@^4.0.5, redux@>3.0.0:
   version "4.2.1"
   resolved "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz"
   integrity sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==
   dependencies:
     "@babel/runtime" "^7.9.2"
 
-redux@^5.0.1:
+redux@^5.0.0, redux@^5.0.1:
   version "5.0.1"
   resolved "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz"
   integrity sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==
@@ -8806,7 +9086,7 @@ sass-loader@^16.0.5:
   dependencies:
     neo-async "^2.6.2"
 
-sass@^1.86.3:
+sass@*, sass@^1.3.0, sass@^1.86.3:
   version "1.91.0"
   resolved "https://registry.npmjs.org/sass/-/sass-1.91.0.tgz"
   integrity sha512-aFOZHGf+ur+bp1bCHZ+u8otKGh77ZtmFyXDo4tlYvT7PWql41Kwd8wdkPqhhT+h2879IVblcHFglIMofsFd1EA==
@@ -9286,11 +9566,6 @@ style-to-object@0.3.0:
   dependencies:
     inline-style-parser "0.1.1"
 
-stylelint-config-prettier@^9.0.5:
-  version "9.0.5"
-  resolved "https://registry.npmjs.org/stylelint-config-prettier/-/stylelint-config-prettier-9.0.5.tgz"
-  integrity sha512-U44lELgLZhbAD/xy/vncZ2Pq8sh2TnpiPvo38Ifg9+zeioR+LAkHu0i6YORIOxFafZoVg0xqQwex6e6F25S5XA==
-
 stylelint-config-recommended@^17.0.0:
   version "17.0.0"
   resolved "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-17.0.0.tgz"
@@ -9303,7 +9578,7 @@ stylelint-config-standard@^39.0.1:
   dependencies:
     stylelint-config-recommended "^17.0.0"
 
-stylelint@^16.25.0:
+stylelint@^16.23.0, stylelint@^16.25.0:
   version "16.25.0"
   resolved "https://registry.npmjs.org/stylelint/-/stylelint-16.25.0.tgz"
   integrity sha512-Li0avYWV4nfv1zPbdnxLYBGq4z8DVZxbRgx4Kn6V+Uftz1rMoF1qiEI3oL4kgWqyYgCgs7gT5maHNZ82Gk03vQ==
@@ -9433,7 +9708,7 @@ terser-webpack-plugin@^5.3.11:
     serialize-javascript "^6.0.2"
     terser "^5.31.1"
 
-terser@^5.31.1:
+terser@^5.16.0, terser@^5.31.1:
   version "5.44.0"
   resolved "https://registry.npmjs.org/terser/-/terser-5.44.0.tgz"
   integrity sha512-nIVck8DK+GM/0Frwd+nIhZ84pR/BX7rmXMfYwyg+Sri5oGVE99/E3KvXqpC2xHFxyqXyGHTKBSioxxplrO4I4w==
@@ -9502,7 +9777,7 @@ tinyglobby@^0.2.13, tinyglobby@^0.2.14:
     fdir "^6.4.4"
     picomatch "^4.0.2"
 
-tinymce@^7.2.0:
+tinymce@^7.2.0, "tinymce@^8.0.0 || ^7.0.0 || ^6.0.0 || ^5.5.1", tinymce@>=4.0.0:
   version "7.9.1"
   resolved "https://registry.npmjs.org/tinymce/-/tinymce-7.9.1.tgz"
   integrity sha512-zaOHwmiP1EqTeLRXAvVriDb00JYnfEjWGPdKEuac7MiZJ5aiDMZ4Unc98Gmajn+PBljOmO1GKV6G0KwWn3+k8A==
@@ -9710,7 +9985,7 @@ typed-styles@^0.0.7:
   resolved "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.7.tgz"
   integrity sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q==
 
-typescript@^4.8.4:
+typescript@^4.8.4, "typescript@>= 4.8.x", typescript@>=4.2.0, typescript@>=4.8.4, "typescript@>=4.8.4 <6.0.0", typescript@>=4.9.5:
   version "4.9.5"
   resolved "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz"
   integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==
@@ -9907,7 +10182,7 @@ vite-node@3.2.2:
     pathe "^2.0.3"
     vite "^5.0.0 || ^6.0.0 || ^7.0.0-0"
 
-"vite@^5.0.0 || ^6.0.0 || ^7.0.0-0", vite@^6.3.5:
+"vite@^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0", "vite@^5.0.0 || ^6.0.0 || ^7.0.0-0", vite@^6.3.5:
   version "6.3.5"
   resolved "https://registry.npmjs.org/vite/-/vite-6.3.5.tgz"
   integrity sha512-cZn6NDFE7wdTpINgs++ZJ4N49W2vRp8LCKrn3Ob1kYNtOo21vfDoaV5GzBfLU4MovSAB8uNRm4jgzVQZ+mBzPQ==
@@ -9921,7 +10196,7 @@ vite-node@3.2.2:
   optionalDependencies:
     fsevents "~2.3.3"
 
-vitest@^3.2.0:
+vitest@*, vitest@^3.2.0, vitest@3.2.2:
   version "3.2.2"
   resolved "https://registry.npmjs.org/vitest/-/vitest-3.2.2.tgz"
   integrity sha512-fyNn/Rp016Bt5qvY0OQvIUCwW2vnaEBLxP42PmKbNIoasSYjML+8xyeADOPvBe+Xfl/ubIw4og7Lt9jflRsCNw==
@@ -9989,7 +10264,7 @@ webpack-sources@^3.3.3:
   resolved "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.3.3.tgz"
   integrity sha512-yd1RBzSGanHkitROoPFd6qsrxt+oFhg/129YzheDGqeustzX0vTZJZsSsQjVQC4yzBQ56K55XU8gaNCtIzOnTg==
 
-webpack@^5.102.0:
+webpack@^5.0.0, webpack@^5.1.0, webpack@^5.102.0:
   version "5.102.0"
   resolved "https://registry.npmjs.org/webpack/-/webpack-5.102.0.tgz"
   integrity sha512-hUtqAR3ZLVEYDEABdBioQCIqSoguHbFn1K7WlPPWSuXmx0031BD73PSE35jKyftdSh4YLDoQNgK4pqBt5Q82MA==
@@ -10212,7 +10487,7 @@ yaml@^1.10.0:
   resolved "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz"
   integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
 
-yaml@^2.8.1:
+yaml@^2.4.2, yaml@^2.8.1:
   version "2.8.1"
   resolved "https://registry.npmjs.org/yaml/-/yaml-2.8.1.tgz"
   integrity sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==

From b488a2d9d9755549eb1c26c4f4edac8a99a05918 Mon Sep 17 00:00:00 2001
From: myeeli <myeeli@uab.edu>
Date: Sat, 18 Oct 2025 09:03:50 -0700
Subject: [PATCH 3/7] Enhanced filter and search

---
 .../ProjectManagerEducatorView.jsx            | 130 ++++++++++++++----
 .../ProjectManagerEducatorView.module.css     |  27 ++++
 .../ProjectManagerNotification.jsx            |  49 ++++---
 3 files changed, 161 insertions(+), 45 deletions(-)

diff --git a/src/components/EductionPortal/ProjectManager/ProjectManagerEducatorView.jsx b/src/components/EductionPortal/ProjectManager/ProjectManagerEducatorView.jsx
index 748d402068..42106e9547 100644
--- a/src/components/EductionPortal/ProjectManager/ProjectManagerEducatorView.jsx
+++ b/src/components/EductionPortal/ProjectManager/ProjectManagerEducatorView.jsx
@@ -37,7 +37,6 @@ async function fetchEducators() {
   await new Promise((r) => setTimeout(r, 250));
   return mockEducators.map(({ students, ...rest }) => rest);
 }
-
 async function fetchStudentsByEducator(educatorId) {
   await new Promise((r) => setTimeout(r, 200));
   const edu = mockEducators.find((e) => e.id === educatorId);
@@ -60,28 +59,45 @@ function StudentCard({ s }) {
   );
 }
 
-function EducatorRow({ educator }) {
-  const [open, setOpen] = React.useState(false);
+function EducatorRow({ educator, isExpanded, onToggle, studentQuery }) {
   const [loading, setLoading] = React.useState(false);
   const [students, setStudents] = React.useState([]);
+  const [loaded, setLoaded] = React.useState(false);
 
-  async function toggle() {
-    if (!open && students.length === 0) {
+  async function ensureLoaded() {
+    if (!loaded) {
       setLoading(true);
       const data = await fetchStudentsByEducator(educator.id);
       setStudents(data);
       setLoading(false);
+      setLoaded(true);
     }
-    setOpen((v) => !v);
   }
 
+  async function handleToggle() {
+    if (!isExpanded) await ensureLoaded();
+    onToggle(educator.id);
+  }
+
+  const filteredStudents = React.useMemo(() => {
+    const q = studentQuery.trim().toLowerCase();
+    if (!q) return students;
+    return students.filter((s) => s.name.toLowerCase().includes(q));
+  }, [studentQuery, students]);
+
   return (
     <div className={styles.row}>
       <button
         type="button"
         className={styles.rowHeader}
-        onClick={toggle}
-        aria-expanded={open}
+        onClick={handleToggle}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            handleToggle();
+          }
+        }}
+        aria-expanded={isExpanded}
         aria-controls={`students-${educator.id}`}
       >
         <div className={styles.rowHeaderLeft}>
@@ -90,17 +106,21 @@ function EducatorRow({ educator }) {
         </div>
         <div className={styles.rowHeaderRight}>
           <span className={styles.badge}>{educator.studentCount} students</span>
-          <span className={styles.toggleText}>{open ? "Hide" : "View"}</span>
+          <span className={styles.toggleText}>{isExpanded ? "Hide" : "View"}</span>
         </div>
       </button>
 
-      {open && (
+      {isExpanded && (
         <div id={`students-${educator.id}`} className={styles.studentsWrap}>
           {loading ? (
             <div className={styles.loadingText}>Loading students…</div>
+          ) : filteredStudents.length === 0 ? (
+            <div className={styles.emptyText}>
+              {studentQuery ? "No students match this search." : "No students found."}
+            </div>
           ) : (
             <div className={styles.students}>
-              {students.map((s) => (
+              {filteredStudents.map((s) => (
                 <StudentCard key={s.id} s={s} />
               ))}
             </div>
@@ -115,12 +135,21 @@ export default function ProjectManagerEducatorView() {
   const [educators, setEducators] = React.useState([]);
   const [filtered, setFiltered] = React.useState([]);
   const [query, setQuery] = React.useState("");
+  const [subject, setSubject] = React.useState("All");
+  const [studentQuery, setStudentQuery] = React.useState("");
+  const [expandedIds, setExpandedIds] = React.useState(new Set());
+
   const [showComposer, setShowComposer] = React.useState(false);
   const [lastSentInfo, setLastSentInfo] = React.useState(null);
 
   const [loading, setLoading] = React.useState(true);
   const [error, setError] = React.useState(null);
 
+  const subjects = React.useMemo(() => {
+    const s = new Set(mockEducators.map((e) => e.subject));
+    return ["All", ...Array.from(s).sort()];
+  }, []);
+
   React.useEffect(() => {
     (async () => {
       try {
@@ -137,18 +166,31 @@ export default function ProjectManagerEducatorView() {
 
   React.useEffect(() => {
     const q = query.trim().toLowerCase();
-    if (!q) {
-      setFiltered(educators);
-    } else {
-      setFiltered(
-        educators.filter(
-          (e) =>
-            e.name.toLowerCase().includes(q) ||
-            e.subject.toLowerCase().includes(q)
-        )
-      );
-    }
-  }, [query, educators]);
+    setFiltered(
+      educators.filter((e) => {
+        const matchText =
+          e.name.toLowerCase().includes(q) || e.subject.toLowerCase().includes(q);
+        const matchSubject = subject === "All" || e.subject === subject;
+        return matchText && matchSubject;
+      })
+    );
+  }, [query, subject, educators]);
+
+  function toggleExpanded(id) {
+    setExpandedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }
+
+  function expandAll() {
+    setExpandedIds(new Set(filtered.map((e) => e.id)));
+  }
+  function collapseAll() {
+    setExpandedIds(new Set());
+  }
 
   function handleOpenComposer() {
     setShowComposer(true);
@@ -175,16 +217,47 @@ export default function ProjectManagerEducatorView() {
       <div className={styles.header}>
         <div>
           <h1 className={styles.title}>Project Manager Dashboard</h1>
+          <p className={styles.subtitle}>View educators and their assigned students</p>
         </div>
+
         <div className={styles.toolbar}>
           <input
             type="text"
-            placeholder="Search educators by name or subject"
+            placeholder="Search educators (name/subject)"
             className={styles.searchInput}
             value={query}
             onChange={(e) => setQuery(e.target.value)}
             aria-label="Search educators"
           />
+
+          <select
+            className={styles.select}
+            value={subject}
+            onChange={(e) => setSubject(e.target.value)}
+            aria-label="Filter by subject"
+          >
+            {subjects.map((subj) => (
+              <option key={subj} value={subj}>
+                {subj}
+              </option>
+            ))}
+          </select>
+
+          <input
+            type="text"
+            placeholder="Search students inside rows"
+            className={styles.searchInput}
+            value={studentQuery}
+            onChange={(e) => setStudentQuery(e.target.value)}
+            aria-label="Search students"
+          />
+
+          <button className={styles.ghostBtn} onClick={expandAll}>
+            Expand all
+          </button>
+          <button className={styles.ghostBtn} onClick={collapseAll}>
+            Collapse all
+          </button>
           <button className={styles.primaryBtn} onClick={handleOpenComposer}>
             New Announcement
           </button>
@@ -199,6 +272,7 @@ export default function ProjectManagerEducatorView() {
         </div>
       )}
 
+      {/* List */}
       <section className={styles.card} aria-label="Educators">
         <div className={styles.cardHeader}>
           <h2 className={styles.cardTitle}>Educators</h2>
@@ -212,7 +286,13 @@ export default function ProjectManagerEducatorView() {
           {!loading && !error && filtered.length > 0 && (
             <div role="list" aria-label="Educator list">
               {filtered.map((e) => (
-                <EducatorRow key={e.id} educator={e} />
+                <EducatorRow
+                  key={e.id}
+                  educator={e}
+                  isExpanded={expandedIds.has(e.id)}
+                  onToggle={toggleExpanded}
+                  studentQuery={studentQuery}
+                />
               ))}
             </div>
           )}
diff --git a/src/components/EductionPortal/ProjectManager/ProjectManagerEducatorView.module.css b/src/components/EductionPortal/ProjectManager/ProjectManagerEducatorView.module.css
index f54010f6f5..1266d09ad6 100644
--- a/src/components/EductionPortal/ProjectManager/ProjectManagerEducatorView.module.css
+++ b/src/components/EductionPortal/ProjectManager/ProjectManagerEducatorView.module.css
@@ -252,4 +252,31 @@
   color: #065f46;
   border-radius: 10px;
   font-size: 0.95rem;
+}
+
+.select {
+  border: 1px solid var(--border, #e5e7eb);
+  border-radius: 10px;
+  padding: 8px 10px;
+  background: #fff;
+  font: inherit;
+  outline: none;
+}
+
+.select:focus {
+  border-color: var(--primary, #4f46e5);
+  box-shadow: 0 0 0 3px var(--primary-100, #eef2ff);
+}
+
+.ghostBtn {
+  background: transparent;
+  color: var(--text, #111827);
+  border: 1px solid var(--border, #e5e7eb);
+  border-radius: 10px;
+  padding: 8px 12px;
+  cursor: pointer;
+}
+
+.ghostBtn:hover {
+  background: #f9fafb;
 }
\ No newline at end of file
diff --git a/src/components/EductionPortal/ProjectManager/ProjectManagerNotification.jsx b/src/components/EductionPortal/ProjectManager/ProjectManagerNotification.jsx
index 14693b6fd4..57405c5df4 100644
--- a/src/components/EductionPortal/ProjectManager/ProjectManagerNotification.jsx
+++ b/src/components/EductionPortal/ProjectManager/ProjectManagerNotification.jsx
@@ -1,6 +1,8 @@
 import React from "react";
 import styles from "./ProjectManagerNotification.module.css";
 
+const DRAFT_KEY = "pm_notif_draft";
+
 async function sendNotification({ educatorIds, message }) {
   await new Promise((r) => setTimeout(r, 550));
   if (!educatorIds.length || !message.trim()) {
@@ -15,29 +17,42 @@ export default function ProjectManagerNotification({ educators, onClose, onSent
   const [sending, setSending] = React.useState(false);
   const [error, setError] = React.useState(null);
 
+  React.useEffect(() => {
+    const saved = localStorage.getItem(DRAFT_KEY);
+    if (saved) setMessage(saved);
+  }, []);
+
+  React.useEffect(() => {
+    localStorage.setItem(DRAFT_KEY, message);
+  }, [message]);
+
+  // Esc to close
+  React.useEffect(() => {
+    function onKey(e) {
+      if (e.key === "Escape") onClose();
+    }
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [onClose]);
+
   const allChecked = selected.length === educators.length && educators.length > 0;
   const someChecked = selected.length > 0 && selected.length < educators.length;
 
   function toggleAll() {
-    if (allChecked) {
-      setSelected([]);
-    } else {
-      setSelected(educators.map((e) => e.id));
-    }
+    setSelected(allChecked ? [] : educators.map((e) => e.id));
   }
-
   function toggleOne(id) {
-    setSelected((prev) =>
-      prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]
-    );
+    setSelected((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]));
   }
 
   async function handleSend() {
     setSending(true);
     setError(null);
     try {
-      await sendNotification({ educatorIds: selected, message });
-      onSent({ educatorIds: selected, message });
+      const trimmed = message.trim();
+      await sendNotification({ educatorIds: selected, message: trimmed });
+      localStorage.removeItem(DRAFT_KEY);
+      onSent({ educatorIds: selected, message: trimmed });
     } catch (e) {
       setError(e.message || "Failed to send.");
     } finally {
@@ -56,14 +71,11 @@ export default function ProjectManagerNotification({ educators, onClose, onSent
         <div className={styles.body}>
           <div className={styles.section}>
             <div className={styles.sectionLabel}>Recipients</div>
-
             <label className={styles.checkAll}>
               <input
                 type="checkbox"
                 checked={allChecked}
-                ref={(el) => {
-                  if (el) el.indeterminate = someChecked;
-                }}
+                ref={(el) => el && (el.indeterminate = someChecked)}
                 onChange={toggleAll}
               />
               Select all
@@ -95,6 +107,7 @@ export default function ProjectManagerNotification({ educators, onClose, onSent
               value={message}
               onChange={(e) => setMessage(e.target.value)}
               maxLength={1000}
+              autoFocus
             />
             <div className={styles.counter}>{message.length}/1000</div>
           </div>
@@ -106,11 +119,7 @@ export default function ProjectManagerNotification({ educators, onClose, onSent
           <button className={styles.cancelBtnNotify} onClick={onClose} disabled={sending}>
             Cancel
           </button>
-          <button
-            className={styles.primaryBtn}
-            onClick={handleSend}
-            disabled={sending}
-          >
+          <button className={styles.primaryBtn} onClick={handleSend} disabled={sending}>
             {sending ? "Sending…" : "Send Announcement"}
           </button>
         </div>

From 72154484282db97f5c9c4b154822bc805e9ff1b8 Mon Sep 17 00:00:00 2001
From: myeeli <myeeli@uab.edu>
Date: Fri, 24 Oct 2025 09:32:24 -0700
Subject: [PATCH 4/7] Integrated API's

---
 .../ProjectManagerEducatorView.jsx            | 59 +++++++++++++++----
 .../ProjectManagerNotification.jsx            | 33 ++++++++---
 2 files changed, 73 insertions(+), 19 deletions(-)

diff --git a/src/components/EductionPortal/ProjectManager/ProjectManagerEducatorView.jsx b/src/components/EductionPortal/ProjectManager/ProjectManagerEducatorView.jsx
index 42106e9547..162ee4598c 100644
--- a/src/components/EductionPortal/ProjectManager/ProjectManagerEducatorView.jsx
+++ b/src/components/EductionPortal/ProjectManager/ProjectManagerEducatorView.jsx
@@ -1,4 +1,5 @@
 import React from "react";
+import axios from "axios";
 import styles from "./ProjectManagerEducatorView.module.css";
 import NotificationComposer from "./ProjectManagerNotification";
 
@@ -33,14 +34,54 @@ const mockEducators = [
   },
 ];
 
+const api = axios.create({
+  baseURL: process.env.REACT_APP_APIENDPOINT || "",
+  withCredentials: true,
+});
+
+function getToken() {
+  return localStorage.getItem("token");
+}
+
+async function fetchEducatorsAPI() {
+  const token = getToken();
+  const res = await api.get("/pm/educators", {
+    headers: token ? { Authorization: token } : {},
+  });
+  const list = Array.isArray(res?.data?.data) ? res.data.data : [];
+  return list.map((e) => ({
+    id: e.id,
+    name: e.name,
+    subject: e.subject,
+    studentCount: Number(e.studentCount ?? 0),
+  }));
+}
+
+async function fetchStudentsAPI(educatorId) {
+  const token = getToken();
+  const res = await api.get(`/pm/educators/${encodeURIComponent(educatorId)}/students`, {
+    headers: token ? { Authorization: token } : {},
+  });
+  return Array.isArray(res?.data?.data) ? res.data.data : [];
+}
+
 async function fetchEducators() {
-  await new Promise((r) => setTimeout(r, 250));
-  return mockEducators.map(({ students, ...rest }) => rest);
+  try {
+    return await fetchEducatorsAPI();
+  } catch {
+    await new Promise((r) => setTimeout(r, 200));
+    return mockEducators.map(({ students, ...rest }) => rest);
+  }
 }
+
 async function fetchStudentsByEducator(educatorId) {
-  await new Promise((r) => setTimeout(r, 200));
-  const edu = mockEducators.find((e) => e.id === educatorId);
-  return edu ? edu.students : [];
+  try {
+    return await fetchStudentsAPI(educatorId);
+  } catch {
+    await new Promise((r) => setTimeout(r, 150));
+    const edu = mockEducators.find((e) => e.id === educatorId);
+    return edu ? edu.students : [];
+  }
 }
 
 function StudentCard({ s }) {
@@ -138,10 +179,8 @@ export default function ProjectManagerEducatorView() {
   const [subject, setSubject] = React.useState("All");
   const [studentQuery, setStudentQuery] = React.useState("");
   const [expandedIds, setExpandedIds] = React.useState(new Set());
-
   const [showComposer, setShowComposer] = React.useState(false);
   const [lastSentInfo, setLastSentInfo] = React.useState(null);
-
   const [loading, setLoading] = React.useState(true);
   const [error, setError] = React.useState(null);
 
@@ -156,7 +195,7 @@ export default function ProjectManagerEducatorView() {
         const data = await fetchEducators();
         setEducators(data);
         setFiltered(data);
-      } catch (e) {
+      } catch {
         setError("Failed to load educators");
       } finally {
         setLoading(false);
@@ -229,7 +268,6 @@ export default function ProjectManagerEducatorView() {
             onChange={(e) => setQuery(e.target.value)}
             aria-label="Search educators"
           />
-
           <select
             className={styles.select}
             value={subject}
@@ -242,7 +280,6 @@ export default function ProjectManagerEducatorView() {
               </option>
             ))}
           </select>
-
           <input
             type="text"
             placeholder="Search students inside rows"
@@ -251,7 +288,6 @@ export default function ProjectManagerEducatorView() {
             onChange={(e) => setStudentQuery(e.target.value)}
             aria-label="Search students"
           />
-
           <button className={styles.ghostBtn} onClick={expandAll}>
             Expand all
           </button>
@@ -272,7 +308,6 @@ export default function ProjectManagerEducatorView() {
         </div>
       )}
 
-      {/* List */}
       <section className={styles.card} aria-label="Educators">
         <div className={styles.cardHeader}>
           <h2 className={styles.cardTitle}>Educators</h2>
diff --git a/src/components/EductionPortal/ProjectManager/ProjectManagerNotification.jsx b/src/components/EductionPortal/ProjectManager/ProjectManagerNotification.jsx
index 57405c5df4..5d78ec182b 100644
--- a/src/components/EductionPortal/ProjectManager/ProjectManagerNotification.jsx
+++ b/src/components/EductionPortal/ProjectManager/ProjectManagerNotification.jsx
@@ -1,14 +1,34 @@
 import React from "react";
+import axios from "axios";
 import styles from "./ProjectManagerNotification.module.css";
 
 const DRAFT_KEY = "pm_notif_draft";
 
+const api = axios.create({
+  baseURL: process.env.REACT_APP_APIENDPOINT || "",
+  withCredentials: true,
+});
+
+function getToken() {
+  return localStorage.getItem("token");
+}
+
 async function sendNotification({ educatorIds, message }) {
-  await new Promise((r) => setTimeout(r, 550));
-  if (!educatorIds.length || !message.trim()) {
-    throw new Error("Select at least one educator and enter a message.");
+  try {
+    const token = getToken();
+    const res = await api.post(
+      "/pm/notifications",
+      { educatorIds, message },
+      { headers: token ? { Authorization: token } : {} }
+    );
+    return res?.data ?? { ok: true };
+  } catch {
+    await new Promise((r) => setTimeout(r, 350));
+    if (!educatorIds.length || !message.trim()) {
+      throw new Error("Select at least one educator and enter a message.");
+    }
+    return { ok: true, fallback: true };
   }
-  return { ok: true };
 }
 
 export default function ProjectManagerNotification({ educators, onClose, onSent }) {
@@ -26,7 +46,6 @@ export default function ProjectManagerNotification({ educators, onClose, onSent
     localStorage.setItem(DRAFT_KEY, message);
   }, [message]);
 
-  // Esc to close
   React.useEffect(() => {
     function onKey(e) {
       if (e.key === "Escape") onClose();
@@ -50,9 +69,9 @@ export default function ProjectManagerNotification({ educators, onClose, onSent
     setError(null);
     try {
       const trimmed = message.trim();
-      await sendNotification({ educatorIds: selected, message: trimmed });
+      const resp = await sendNotification({ educatorIds: selected, message: trimmed });
       localStorage.removeItem(DRAFT_KEY);
-      onSent({ educatorIds: selected, message: trimmed });
+      onSent({ educatorIds: selected, message: trimmed, resp });
     } catch (e) {
       setError(e.message || "Failed to send.");
     } finally {

From 75b6f6656ff28208bbb6fddd1d0cea9306d65d35 Mon Sep 17 00:00:00 2001
From: myeeli <myeeli@uab.edu>
Date: Fri, 31 Oct 2025 18:17:16 -0700
Subject: [PATCH 5/7] Made css changes and implemented darkmode

---
 .../ProjectManagerEducatorView.jsx            | 146 +++------
 .../ProjectManagerEducatorView.module.css     | 279 +++++++++++-------
 .../ProjectManagerNotification.jsx            |  24 +-
 .../ProjectManagerNotification.module.css     | 143 ++++++---
 4 files changed, 318 insertions(+), 274 deletions(-)

diff --git a/src/components/EductionPortal/ProjectManager/ProjectManagerEducatorView.jsx b/src/components/EductionPortal/ProjectManager/ProjectManagerEducatorView.jsx
index 162ee4598c..bea56d0192 100644
--- a/src/components/EductionPortal/ProjectManager/ProjectManagerEducatorView.jsx
+++ b/src/components/EductionPortal/ProjectManager/ProjectManagerEducatorView.jsx
@@ -1,36 +1,27 @@
 import React from "react";
+import { useSelector } from "react-redux";
 import axios from "axios";
 import styles from "./ProjectManagerEducatorView.module.css";
 import NotificationComposer from "./ProjectManagerNotification";
 
 const mockEducators = [
   {
-    id: "t-001",
-    name: "Alice Johnson",
-    subject: "Mathematics",
-    studentCount: 3,
-    students: [
+    id: "t-001", name: "Alice Johnson", subject: "Mathematics", studentCount: 3, students: [
       { id: "s-101", name: "Jay", grade: "7", progress: 0.78 },
       { id: "s-102", name: "Kate", grade: "7", progress: 0.62 },
       { id: "s-103", name: "Sam", grade: "8", progress: 0.85 },
-    ],
+    ]
   },
   {
-    id: "t-002",
-    name: "Brian Lee",
-    subject: "Science",
-    studentCount: 2,
-    students: [
+    id: "t-002", name: "Brian Lee", subject: "Science", studentCount: 2, students: [
       { id: "s-201", name: "Alina Gupta", grade: "6", progress: 0.54 },
       { id: "s-202", name: "Samir Khan", grade: "6", progress: 0.91 },
-    ],
+    ]
   },
   {
-    id: "t-003",
-    name: "John Doe",
-    subject: "English",
-    studentCount: 1,
-    students: [{ id: "s-301", name: "Ryan", grade: "7", progress: 0.73 }],
+    id: "t-003", name: "John Doe", subject: "English", studentCount: 1, students: [
+      { id: "s-301", name: "Ryan", grade: "7", progress: 0.73 },
+    ]
   },
 ];
 
@@ -66,22 +57,13 @@ async function fetchStudentsAPI(educatorId) {
 }
 
 async function fetchEducators() {
-  try {
-    return await fetchEducatorsAPI();
-  } catch {
-    await new Promise((r) => setTimeout(r, 200));
-    return mockEducators.map(({ students, ...rest }) => rest);
-  }
+  try { return await fetchEducatorsAPI(); }
+  catch { await new Promise((r) => setTimeout(r, 200)); return mockEducators.map(({ students, ...rest }) => rest); }
 }
 
 async function fetchStudentsByEducator(educatorId) {
-  try {
-    return await fetchStudentsAPI(educatorId);
-  } catch {
-    await new Promise((r) => setTimeout(r, 150));
-    const edu = mockEducators.find((e) => e.id === educatorId);
-    return edu ? edu.students : [];
-  }
+  try { return await fetchStudentsAPI(educatorId); }
+  catch { await new Promise((r) => setTimeout(r, 150)); const edu = mockEducators.find((e) => e.id === educatorId); return edu ? edu.students : []; }
 }
 
 function StudentCard({ s }) {
@@ -132,12 +114,7 @@ function EducatorRow({ educator, isExpanded, onToggle, studentQuery }) {
         type="button"
         className={styles.rowHeader}
         onClick={handleToggle}
-        onKeyDown={(e) => {
-          if (e.key === "Enter" || e.key === " ") {
-            e.preventDefault();
-            handleToggle();
-          }
-        }}
+        onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); handleToggle(); } }}
         aria-expanded={isExpanded}
         aria-controls={`students-${educator.id}`}
       >
@@ -156,14 +133,10 @@ function EducatorRow({ educator, isExpanded, onToggle, studentQuery }) {
           {loading ? (
             <div className={styles.loadingText}>Loading students…</div>
           ) : filteredStudents.length === 0 ? (
-            <div className={styles.emptyText}>
-              {studentQuery ? "No students match this search." : "No students found."}
-            </div>
+            <div className={styles.emptyText}>{studentQuery ? "No students match this search." : "No students found."}</div>
           ) : (
             <div className={styles.students}>
-              {filteredStudents.map((s) => (
-                <StudentCard key={s.id} s={s} />
-              ))}
+              {filteredStudents.map((s) => <StudentCard key={s.id} s={s} />)}
             </div>
           )}
         </div>
@@ -173,6 +146,7 @@ function EducatorRow({ educator, isExpanded, onToggle, studentQuery }) {
 }
 
 export default function ProjectManagerEducatorView() {
+  const darkMode = useSelector((state) => state.theme?.darkMode);
   const [educators, setEducators] = React.useState([]);
   const [filtered, setFiltered] = React.useState([]);
   const [query, setQuery] = React.useState("");
@@ -191,70 +165,46 @@ export default function ProjectManagerEducatorView() {
 
   React.useEffect(() => {
     (async () => {
-      try {
-        const data = await fetchEducators();
-        setEducators(data);
-        setFiltered(data);
-      } catch {
-        setError("Failed to load educators");
-      } finally {
-        setLoading(false);
-      }
+      try { const data = await fetchEducators(); setEducators(data); setFiltered(data); }
+      catch { setError("Failed to load educators"); }
+      finally { setLoading(false); }
     })();
   }, []);
 
   React.useEffect(() => {
     const q = query.trim().toLowerCase();
-    setFiltered(
-      educators.filter((e) => {
-        const matchText =
-          e.name.toLowerCase().includes(q) || e.subject.toLowerCase().includes(q);
-        const matchSubject = subject === "All" || e.subject === subject;
-        return matchText && matchSubject;
-      })
-    );
+    setFiltered(educators.filter((e) => {
+      const matchText = e.name.toLowerCase().includes(q) || e.subject.toLowerCase().includes(q);
+      const matchSubject = subject === "All" || e.subject === subject;
+      return matchText && matchSubject;
+    }));
   }, [query, subject, educators]);
 
   function toggleExpanded(id) {
     setExpandedIds((prev) => {
       const next = new Set(prev);
-      if (next.has(id)) next.delete(id);
-      else next.add(id);
+      if (next.has(id)) next.delete(id); else next.add(id);
       return next;
     });
   }
 
-  function expandAll() {
-    setExpandedIds(new Set(filtered.map((e) => e.id)));
-  }
-  function collapseAll() {
-    setExpandedIds(new Set());
-  }
-
-  function handleOpenComposer() {
-    setShowComposer(true);
-  }
-  function handleCloseComposer() {
-    setShowComposer(false);
-  }
+  function expandAll() { setExpandedIds(new Set(filtered.map((e) => e.id))); }
+  function collapseAll() { setExpandedIds(new Set()); }
+  function handleOpenComposer() { setShowComposer(true); }
+  function handleCloseComposer() { setShowComposer(false); }
   function handleSent(payload) {
-    setLastSentInfo({
-      educatorCount: payload.educatorIds.length,
-      timestamp: new Date().toISOString(),
-    });
+    setLastSentInfo({ educatorCount: payload.educatorIds.length, timestamp: new Date().toISOString() });
     setShowComposer(false);
   }
 
   return (
-    <div className={styles.container}>
+    <div className={`${styles.container} ${darkMode ? styles.dark : ""}`}>
       <div className={styles.breadcrumb}>
-        <span>Home</span>
-        <span className={styles.sep}>/</span>
-        <span>Project Manager</span>
+        <span>Home</span><span className={styles.sep}>/</span><span>Project Manager</span>
       </div>
 
       <div className={styles.header}>
-        <div>
+        <div className={styles.titleBlock}>
           <h1 className={styles.title}>Project Manager Dashboard</h1>
           <p className={styles.subtitle}>View educators and their assigned students</p>
         </div>
@@ -274,11 +224,7 @@ export default function ProjectManagerEducatorView() {
             onChange={(e) => setSubject(e.target.value)}
             aria-label="Filter by subject"
           >
-            {subjects.map((subj) => (
-              <option key={subj} value={subj}>
-                {subj}
-              </option>
-            ))}
+            {subjects.map((subj) => <option key={subj} value={subj}>{subj}</option>)}
           </select>
           <input
             type="text"
@@ -288,36 +234,24 @@ export default function ProjectManagerEducatorView() {
             onChange={(e) => setStudentQuery(e.target.value)}
             aria-label="Search students"
           />
-          <button className={styles.ghostBtn} onClick={expandAll}>
-            Expand all
-          </button>
-          <button className={styles.ghostBtn} onClick={collapseAll}>
-            Collapse all
-          </button>
-          <button className={styles.primaryBtn} onClick={handleOpenComposer}>
-            New Announcement
-          </button>
+          <button className={styles.ghostBtn} onClick={expandAll}>Expand all</button>
+          <button className={styles.ghostBtn} onClick={collapseAll}>Collapse all</button>
+          <button className={`${styles.primaryBtn} ${styles.pushRight}`} onClick={handleOpenComposer}>New Announcement</button>
         </div>
       </div>
 
       {lastSentInfo && (
         <div className={styles.successBanner} role="status">
-          Sent to {lastSentInfo.educatorCount} educator
-          {lastSentInfo.educatorCount === 1 ? "" : "s"} at{" "}
-          {new Date(lastSentInfo.timestamp).toLocaleTimeString()}
+          Sent to {lastSentInfo.educatorCount} educator{lastSentInfo.educatorCount === 1 ? "" : "s"} at {new Date(lastSentInfo.timestamp).toLocaleTimeString()}
         </div>
       )}
 
       <section className={styles.card} aria-label="Educators">
-        <div className={styles.cardHeader}>
-          <h2 className={styles.cardTitle}>Educators</h2>
-        </div>
+        <div className={styles.cardHeader}><h2 className={styles.cardTitle}>Educators</h2></div>
         <div className={styles.cardBody}>
           {loading && <div className={styles.loadingText}>Loading…</div>}
           {error && <div className={styles.errorText}>{error}</div>}
-          {!loading && !error && filtered.length === 0 && (
-            <div className={styles.emptyText}>No educators match your search.</div>
-          )}
+          {!loading && !error && filtered.length === 0 && <div className={styles.emptyText}>No educators match your search.</div>}
           {!loading && !error && filtered.length > 0 && (
             <div role="list" aria-label="Educator list">
               {filtered.map((e) => (
diff --git a/src/components/EductionPortal/ProjectManager/ProjectManagerEducatorView.module.css b/src/components/EductionPortal/ProjectManager/ProjectManagerEducatorView.module.css
index 1266d09ad6..c8a207fa29 100644
--- a/src/components/EductionPortal/ProjectManager/ProjectManagerEducatorView.module.css
+++ b/src/components/EductionPortal/ProjectManager/ProjectManagerEducatorView.module.css
@@ -6,16 +6,32 @@
   --border: #e5e7eb;
   --badge-bg: #eef2ff;
   --badge-text: #3730a3;
-  --indigo: #4f46e5;
+  --primary: #4f46e5;
+  --primary-100: #eef2ff;
   --progress-bg: #e5e7eb;
   --error: #b91c1c;
 }
 
+/* Dark theme overrides */
+.dark {
+  --bg: #0e1626;
+  --text: #e5e7eb;
+  --muted: #94a3b8;
+  --card-bg: #1B2A41;
+  --border: #334155;
+  --badge-bg: #27314a;
+  --badge-text: #c7d2fe;
+  --primary: #4f46e5;
+  --primary-100: rgba(79, 70, 229, 0.25);
+  --progress-bg: #27324a;
+}
+
 .container {
   max-width: 72rem;
   margin: 0 auto;
-  padding: 16px;
+  padding: 24px;
   color: var(--text);
+  background: var(--bg)
 }
 
 .breadcrumb {
@@ -23,40 +39,140 @@
   align-items: center;
   gap: 8px;
   color: var(--muted);
-  font-size: 0.9rem;
-  margin-bottom: 8px;
+  font-size: .9rem;
+  margin: 0 0 8px 0
 }
 
 .sep {
-  opacity: 0.7;
+  opacity: .7
 }
 
 .header {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: space-between;
-  margin-bottom: 16px;
+  gap: 16px;
+  margin-bottom: 16px
+}
+
+.titleBlock {
+  min-width: 320px
 }
 
 .title {
-  font-size: 1.875rem;
-  line-height: 1.2;
-  font-weight: 600;
+  font-size: 2.25rem;
+  line-height: 1.15;
+  font-weight: 700;
   margin: 0;
+  color: var(--text)
 }
 
 .subtitle {
   color: var(--muted);
-  font-size: 0.95rem;
-  margin-top: 4px;
+  font-size: 1rem;
+  margin: .35rem 0 0 0
+}
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  min-width: 420px
+}
+
+.searchInput,
+.select,
+.ghostBtn,
+.primaryBtn {
+  height: 40px;
+  padding: 0 12px;
+  display: inline-flex;
+  align-items: center;
+  border-radius: 10px;
+  font: inherit;
+}
+
+.searchInput {
+  width: 320px;
+  max-width: 52vw;
+  border: 1px solid var(--border);
+  outline: none;
+  background: #fff;
+  color: #111827;
+}
+
+.dark .searchInput {
+  background: #0f172a;
+  color: var(--text);
+  border-color: var(--border)
+}
+
+.searchInput:focus {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px var(--primary-100)
+}
+
+.select {
+  border: 1px solid var(--border);
+  background: #fff;
+  outline: none;
+  color: #111827;
+}
+
+.dark .select {
+  background: #0f172a;
+  color: var(--text);
+  border-color: var(--border)
+}
+
+.select:focus {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px var(--primary-100)
+}
+
+.ghostBtn {
+  background: transparent;
+  color: var(--text);
+  border: 1px solid var(--border);
+  cursor: pointer;
+}
+
+.ghostBtn:hover {
+  background: #f9fafb
+}
+
+.dark .ghostBtn:hover {
+  background: #152036
+}
+
+.primaryBtn {
+  background: var(--primary);
+  color: #fff;
+  border: 0;
+  cursor: pointer;
+  font-weight: 600;
+}
+
+.primaryBtn:hover {
+  filter: brightness(.96)
+}
+
+.primaryBtn:focus-visible {
+  outline: 0;
+  box-shadow: 0 0 0 3px var(--primary-100)
+}
+
+.pushRight {
+  margin-left: auto
 }
 
 .card {
   background: var(--card-bg);
   border: 1px solid var(--border);
   border-radius: 16px;
-  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.06);
-  overflow: hidden;
+  box-shadow: 0 1px 3px rgba(17, 24, 39, .06);
+  overflow: hidden
 }
 
 .cardHeader {
@@ -64,25 +180,26 @@
   border-bottom: 1px solid var(--border);
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: space-between
 }
 
 .cardTitle {
   font-size: 1rem;
   font-weight: 600;
   margin: 0;
+  color: var(--text)
 }
 
 .cardBody {
-  padding: 16px;
+  padding: 16px
 }
 
 .row {
-  border-bottom: 1px solid var(--border);
+  border-bottom: 1px solid var(--border)
 }
 
 .row:last-child {
-  border-bottom: none;
+  border-bottom: none
 }
 
 .rowHeader {
@@ -95,68 +212,74 @@
   text-align: left;
   padding: 12px 16px;
   cursor: pointer;
-  transition: background 0.15s ease-in-out;
+  transition: background .15s ease-in-out;
+  color: var(--text);
 }
 
 .rowHeader:hover {
-  background: #f9fafb;
+  background: #f9fafb
+}
+
+.dark .rowHeader:hover {
+  background: #152036
 }
 
 .rowHeaderLeft {
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: 2px
 }
 
 .rowTitle {
   font-weight: 600;
   font-size: 1rem;
+  color: var(--text)
 }
 
 .rowHeaderRight {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 8px
 }
 
 .badge {
-  font-size: 0.75rem;
+  font-size: .75rem;
   padding: 2px 8px;
   border-radius: 999px;
   background: var(--badge-bg);
-  color: var(--badge-text);
+  color: var(--badge-text)
 }
 
 .toggleText {
-  font-size: 0.9rem;
-  color: var(--indigo);
+  font-size: .9rem;
+  color: var(--primary)
 }
 
 .meta {
   color: var(--muted);
-  font-size: 0.9rem;
+  font-size: .9rem
 }
 
 .studentsWrap {
-  padding: 0 16px 16px 16px;
+  padding: 0 16px 16px 16px
 }
 
 .students {
   display: grid;
   grid-template-columns: 1fr;
   gap: 12px;
-  margin-top: 8px;
+  margin-top: 8px
 }
 
-@media (min-width: 640px) {
+@media (min-width:640px) {
   .students {
-    grid-template-columns: repeat(2, 1fr);
+    grid-template-columns: repeat(2, 1fr)
   }
 }
 
-@media (min-width: 1024px) {
+@media (min-width:1024px) {
   .students {
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: repeat(3, 1fr)
   }
 }
 
@@ -164,15 +287,21 @@
   background: #f9fafb;
   border: 1px solid var(--border);
   border-radius: 12px;
-  padding: 12px;
+  padding: 12px
+}
+
+.dark .studentCard {
+  background: #22314d;
+  border-color: var(--border)
 }
 
 .studentName {
   font-weight: 600;
+  color: var(--text)
 }
 
 .progressWrap {
-  margin-top: 8px;
+  margin-top: 8px
 }
 
 .progressBar {
@@ -180,68 +309,33 @@
   width: 100%;
   background: var(--progress-bg);
   border-radius: 6px;
-  overflow: hidden;
+  overflow: hidden
 }
 
 .progressFill {
   height: 8px;
-  background: var(--indigo);
+  background: var(--primary);
   border-radius: 6px;
   width: 0%;
-  transition: width 0.3s ease;
+  transition: width .3s ease
 }
 
 .progressPct {
   text-align: right;
-  font-size: 0.75rem;
+  font-size: .75rem;
   margin-top: 4px;
-  color: var(--muted);
+  color: var(--muted)
 }
 
 .loadingText,
 .emptyText {
   color: var(--muted);
-  font-size: 0.95rem;
+  font-size: .95rem
 }
 
 .errorText {
   color: var(--error);
-  font-size: 0.95rem;
-}
-
-.toolbar {
-  display: flex;
-  gap: 10px;
-  align-items: center;
-}
-
-.searchInput {
-  width: 320px;
-  max-width: 52vw;
-  border: 1px solid var(--border, #e5e7eb);
-  border-radius: 10px;
-  padding: 8px 10px;
-  font: inherit;
-  outline: none;
-}
-
-.searchInput:focus {
-  border-color: var(--primary, #4f46e5);
-  box-shadow: 0 0 0 3px var(--primary-100, #eef2ff);
-}
-
-.primaryBtn {
-  background: var(--primary, #4f46e5);
-  color: #fff;
-  border: none;
-  border-radius: 10px;
-  padding: 10px 14px;
-  cursor: pointer;
-  font-weight: 600;
-}
-
-.primaryBtn:hover {
-  filter: brightness(0.95);
+  font-size: .95rem
 }
 
 .successBanner {
@@ -251,32 +345,11 @@
   background: #ecfdf5;
   color: #065f46;
   border-radius: 10px;
-  font-size: 0.95rem;
+  font-size: .95rem;
 }
 
-.select {
-  border: 1px solid var(--border, #e5e7eb);
-  border-radius: 10px;
-  padding: 8px 10px;
-  background: #fff;
-  font: inherit;
-  outline: none;
-}
-
-.select:focus {
-  border-color: var(--primary, #4f46e5);
-  box-shadow: 0 0 0 3px var(--primary-100, #eef2ff);
-}
-
-.ghostBtn {
-  background: transparent;
-  color: var(--text, #111827);
-  border: 1px solid var(--border, #e5e7eb);
-  border-radius: 10px;
-  padding: 8px 12px;
-  cursor: pointer;
-}
-
-.ghostBtn:hover {
-  background: #f9fafb;
+.dark .successBanner {
+  background: #083d2f;
+  border-color: #0f6e57;
+  color: #d1fae5
 }
\ No newline at end of file
diff --git a/src/components/EductionPortal/ProjectManager/ProjectManagerNotification.jsx b/src/components/EductionPortal/ProjectManager/ProjectManagerNotification.jsx
index 5d78ec182b..18243cd1c1 100644
--- a/src/components/EductionPortal/ProjectManager/ProjectManagerNotification.jsx
+++ b/src/components/EductionPortal/ProjectManager/ProjectManagerNotification.jsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { useSelector } from "react-redux";
 import axios from "axios";
 import styles from "./ProjectManagerNotification.module.css";
 
@@ -32,6 +33,7 @@ async function sendNotification({ educatorIds, message }) {
 }
 
 export default function ProjectManagerNotification({ educators, onClose, onSent }) {
+  const darkMode = useSelector((state) => state.theme?.darkMode);
   const [selected, setSelected] = React.useState([]);
   const [message, setMessage] = React.useState("");
   const [sending, setSending] = React.useState(false);
@@ -47,9 +49,7 @@ export default function ProjectManagerNotification({ educators, onClose, onSent
   }, [message]);
 
   React.useEffect(() => {
-    function onKey(e) {
-      if (e.key === "Escape") onClose();
-    }
+    function onKey(e) { if (e.key === "Escape") onClose(); }
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, [onClose]);
@@ -57,12 +57,8 @@ export default function ProjectManagerNotification({ educators, onClose, onSent
   const allChecked = selected.length === educators.length && educators.length > 0;
   const someChecked = selected.length > 0 && selected.length < educators.length;
 
-  function toggleAll() {
-    setSelected(allChecked ? [] : educators.map((e) => e.id));
-  }
-  function toggleOne(id) {
-    setSelected((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]));
-  }
+  function toggleAll() { setSelected(allChecked ? [] : educators.map((e) => e.id)); }
+  function toggleOne(id) { setSelected((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id])); }
 
   async function handleSend() {
     setSending(true);
@@ -80,7 +76,7 @@ export default function ProjectManagerNotification({ educators, onClose, onSent
   }
 
   return (
-    <div className={styles.overlay} role="dialog" aria-modal="true" aria-labelledby="composer-title">
+    <div className={`${styles.overlay} ${darkMode ? styles.dark : ""}`} role="dialog" aria-modal="true" aria-labelledby="composer-title">
       <div className={styles.modal}>
         <div className={styles.header}>
           <h3 id="composer-title" className={styles.title}>New Announcement</h3>
@@ -135,12 +131,8 @@ export default function ProjectManagerNotification({ educators, onClose, onSent
         </div>
 
         <div className={styles.footer}>
-          <button className={styles.cancelBtnNotify} onClick={onClose} disabled={sending}>
-            Cancel
-          </button>
-          <button className={styles.primaryBtn} onClick={handleSend} disabled={sending}>
-            {sending ? "Sending…" : "Send Announcement"}
-          </button>
+          <button className={styles.cancelBtnNotify} onClick={onClose} disabled={sending}>Cancel</button>
+          <button className={styles.primaryBtn} onClick={handleSend} disabled={sending}>{sending ? "Sending…" : "Send Announcement"}</button>
         </div>
       </div>
     </div>
diff --git a/src/components/EductionPortal/ProjectManager/ProjectManagerNotification.module.css b/src/components/EductionPortal/ProjectManager/ProjectManagerNotification.module.css
index d089f411b0..6c8a48ad0b 100644
--- a/src/components/EductionPortal/ProjectManager/ProjectManagerNotification.module.css
+++ b/src/components/EductionPortal/ProjectManager/ProjectManagerNotification.module.css
@@ -1,31 +1,46 @@
 :root {
-  --bg: #fff;
-  --text: #111827;
-  --muted: #6b7280;
+  --bg: #ffffff;
+  --text: #0f172a;
+  --muted: #64748b;
   --border: #e5e7eb;
   --primary: #4f46e5;
   --primary-100: #eef2ff;
   --error: #b91c1c;
 }
 
+.dark {
+  --bg: #1B2A41;
+  --text: #e5e7eb;
+  --muted: #94a3b8;
+  --border: #334155;
+  --primary: #4f46e5;
+  --primary-100: rgba(79, 70, 229, 0.25);
+}
+
 .overlay {
   position: fixed;
   inset: 0;
-  background: rgba(17, 24, 39, 0.55);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 60;
+  background: rgba(15, 23, 42, 0.45);
+  display: grid;
+  place-items: center;
+  padding: 16px;
+  z-index: 60
+}
+
+.dark.overlay {
+  background: rgba(2, 6, 23, 0.6)
 }
 
 .modal {
-  width: min(720px, 92vw);
+  width: min(760px, 100%);
   background: var(--bg);
   border: 1px solid var(--border);
   border-radius: 14px;
-  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
-  overflow: hidden;
+  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.25);
   color: var(--text);
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  max-height: min(84vh, 820px)
 }
 
 .header {
@@ -33,40 +48,42 @@
   border-bottom: 1px solid var(--border);
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: space-between
 }
 
 .title {
   margin: 0;
-  font-size: 1.125rem;
-  font-weight: 600;
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--text)
 }
 
 .iconBtn {
   border: none;
   background: transparent;
-  font-size: 1.5rem;
+  font-size: 22px;
   line-height: 1;
   cursor: pointer;
-  color: var(--muted);
+  color: var(--muted)
 }
 
 .iconBtn:hover {
-  color: var(--text);
+  color: var(--text)
 }
 
 .body {
   padding: 16px;
+  overflow: auto
 }
 
 .section {
-  margin-bottom: 16px;
+  margin-bottom: 16px
 }
 
 .sectionLabel {
-  font-size: 0.95rem;
+  font-size: 14px;
   color: var(--muted);
-  margin-bottom: 8px;
+  margin-bottom: 8px
 }
 
 .checkAll {
@@ -76,43 +93,52 @@
   padding: 8px 10px;
   border: 1px dashed var(--border);
   border-radius: 8px;
-  margin-bottom: 10px;
+  margin-bottom: 12px;
   cursor: pointer;
-  user-select: none;
+  user-select: none
 }
 
 .list {
-  max-height: 220px;
+  max-height: 240px;
   overflow: auto;
   border: 1px solid var(--border);
-  border-radius: 8px;
+  border-radius: 10px;
   padding: 6px;
-  background: #fafafa;
+  background: #fafafa
+}
+
+.dark .list {
+  background: #0f172a
 }
 
 .item {
   display: flex;
   align-items: center;
   gap: 10px;
-  padding: 8px;
+  padding: 10px;
   border-radius: 8px;
   cursor: pointer;
+  color: var(--text)
 }
 
 .item:hover {
-  background: #f3f4f6;
+  background: #f3f4f6
+}
+
+.dark .item:hover {
+  background: #152036
 }
 
 .itemText {
-  font-size: 0.95rem;
+  font-size: 14px
 }
 
 .itemName {
-  font-weight: 600;
+  font-weight: 700
 }
 
 .itemMeta {
-  color: var(--muted);
+  color: var(--muted)
 }
 
 .textarea {
@@ -123,24 +149,32 @@
   font: inherit;
   outline: none;
   resize: vertical;
+  min-height: 120px;
+  background: #fff;
+  color: #0f172a
+}
+
+.dark .textarea {
+  background: #0f172a;
+  color: var(--text)
 }
 
 .textarea:focus {
   border-color: var(--primary);
-  box-shadow: 0 0 0 3px var(--primary-100);
+  box-shadow: 0 0 0 3px var(--primary-100)
 }
 
 .counter {
   text-align: right;
-  font-size: 0.8rem;
+  font-size: 12px;
   color: var(--muted);
-  margin-top: 6px;
+  margin-top: 6px
 }
 
 .error {
-  margin-top: 4px;
+  margin-top: 6px;
   color: var(--error);
-  font-size: 0.95rem;
+  font-size: 14px
 }
 
 .footer {
@@ -148,33 +182,44 @@
   border-top: 1px solid var(--border);
   display: flex;
   justify-content: flex-end;
-  gap: 10px;
+  gap: 10px
 }
 
-.primaryBtn {
-  background: var(--primary);
-  color: #fff;
-  border: none;
+.primaryBtn,
+.cancelBtnNotify {
   border-radius: 10px;
   padding: 10px 14px;
+  font-weight: 700;
   cursor: pointer;
-  font-weight: 600;
+  border: 1px solid transparent
+}
+
+.primaryBtn {
+  background: var(--primary);
+  color: #fff
 }
 
 .primaryBtn:disabled {
-  opacity: 0.7;
-  cursor: default;
+  opacity: .7;
+  cursor: default
 }
 
 .cancelBtnNotify {
-  background: transparent;
+  background: #fff;
   color: var(--text);
-  border: 1px solid var(--border);
-  border-radius: 10px;
-  padding: 10px 14px;
-  cursor: pointer;
+  border-color: var(--border)
+}
+
+.dark .cancelBtnNotify {
+  background: #0f172a;
+  color: var(--text);
+  border-color: var(--border)
 }
 
 .cancelBtnNotify:hover {
-  background: #f9fafb;
+  background: #f9fafb
+}
+
+.dark .cancelBtnNotify:hover {
+  background: #152036
 }
\ No newline at end of file

From 0acb4608a5cb0ce47658f710bb6b6e006ee73a34 Mon Sep 17 00:00:00 2001
From: myeeli <myeeli@uab.edu>
Date: Sat, 1 Nov 2025 10:00:44 -0700
Subject: [PATCH 6/7] Fixed 401 issue

---
 .../ProjectManagerEducatorView.jsx            | 93 +++++++------------
 .../ProjectManagerNotification.jsx            | 61 ++++++------
 src/utils/URL.js                              | 30 +++---
 3 files changed, 79 insertions(+), 105 deletions(-)

diff --git a/src/components/EductionPortal/ProjectManager/ProjectManagerEducatorView.jsx b/src/components/EductionPortal/ProjectManager/ProjectManagerEducatorView.jsx
index bea56d0192..44ed42feac 100644
--- a/src/components/EductionPortal/ProjectManager/ProjectManagerEducatorView.jsx
+++ b/src/components/EductionPortal/ProjectManager/ProjectManagerEducatorView.jsx
@@ -5,40 +5,45 @@ import styles from "./ProjectManagerEducatorView.module.css";
 import NotificationComposer from "./ProjectManagerNotification";
 
 const mockEducators = [
-  {
-    id: "t-001", name: "Alice Johnson", subject: "Mathematics", studentCount: 3, students: [
-      { id: "s-101", name: "Jay", grade: "7", progress: 0.78 },
-      { id: "s-102", name: "Kate", grade: "7", progress: 0.62 },
-      { id: "s-103", name: "Sam", grade: "8", progress: 0.85 },
-    ]
-  },
-  {
-    id: "t-002", name: "Brian Lee", subject: "Science", studentCount: 2, students: [
-      { id: "s-201", name: "Alina Gupta", grade: "6", progress: 0.54 },
-      { id: "s-202", name: "Samir Khan", grade: "6", progress: 0.91 },
-    ]
-  },
-  {
-    id: "t-003", name: "John Doe", subject: "English", studentCount: 1, students: [
-      { id: "s-301", name: "Ryan", grade: "7", progress: 0.73 },
-    ]
-  },
+  { id: "t-001", name: "Alice Johnson", subject: "Mathematics", studentCount: 3, students: [
+    { id: "s-101", name: "Jay", grade: "7", progress: 0.78 },
+    { id: "s-102", name: "Kate", grade: "7", progress: 0.62 },
+    { id: "s-103", name: "Sam", grade: "8", progress: 0.85 },
+  ]},
+  { id: "t-002", name: "Brian Lee", subject: "Science", studentCount: 2, students: [
+    { id: "s-201", name: "Alina Gupta", grade: "6", progress: 0.54 },
+    { id: "s-202", name: "Samir Khan", grade: "6", progress: 0.91 },
+  ]},
+  { id: "t-003", name: "John Doe", subject: "English", studentCount: 1, students: [
+    { id: "s-301", name: "Ryan", grade: "7", progress: 0.73 },
+  ]},
 ];
 
 const api = axios.create({
   baseURL: process.env.REACT_APP_APIENDPOINT || "",
-  withCredentials: true,
 });
 
 function getToken() {
-  return localStorage.getItem("token");
+  const raw = localStorage.getItem("token") || "";
+  return String(raw).replace(/^"(.*)"$/, "$1").trim();
 }
 
-async function fetchEducatorsAPI() {
+async function GET(url, { useQueryFallback = true } = {}) {
   const token = getToken();
-  const res = await api.get("/pm/educators", {
-    headers: token ? { Authorization: token } : {},
-  });
+  try {
+    const res = await api.get(url, { headers: token ? { Authorization: token } : {} });
+    return res;
+  } catch (err) {
+    if (useQueryFallback && err?.response?.status === 401 && token) {
+      const sep = url.includes("?") ? "&" : "?";
+      return api.get(`${url}${sep}token=${encodeURIComponent(token)}`);
+    }
+    throw err;
+  }
+}
+
+async function fetchEducatorsAPI() {
+  const res = await GET("/pm/educators");
   const list = Array.isArray(res?.data?.data) ? res.data.data : [];
   return list.map((e) => ({
     id: e.id,
@@ -49,10 +54,7 @@ async function fetchEducatorsAPI() {
 }
 
 async function fetchStudentsAPI(educatorId) {
-  const token = getToken();
-  const res = await api.get(`/pm/educators/${encodeURIComponent(educatorId)}/students`, {
-    headers: token ? { Authorization: token } : {},
-  });
+  const res = await GET(`/pm/educators/${encodeURIComponent(educatorId)}/students`);
   return Array.isArray(res?.data?.data) ? res.data.data : [];
 }
 
@@ -73,9 +75,7 @@ function StudentCard({ s }) {
       <div className={styles.studentName}>{s.name}</div>
       <div className={styles.meta}>Grade {s.grade}</div>
       <div className={styles.progressWrap}>
-        <div className={styles.progressBar}>
-          <div className={styles.progressFill} style={{ width: `${pct}%` }} />
-        </div>
+        <div className={styles.progressBar}><div className={styles.progressFill} style={{ width: `${pct}%` }} /></div>
         <div className={styles.progressPct}>{pct}%</div>
       </div>
     </div>
@@ -114,7 +114,7 @@ function EducatorRow({ educator, isExpanded, onToggle, studentQuery }) {
         type="button"
         className={styles.rowHeader}
         onClick={handleToggle}
-        onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); handleToggle(); } }}
+        onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); handleToggle(); }}}
         aria-expanded={isExpanded}
         aria-controls={`students-${educator.id}`}
       >
@@ -199,9 +199,7 @@ export default function ProjectManagerEducatorView() {
 
   return (
     <div className={`${styles.container} ${darkMode ? styles.dark : ""}`}>
-      <div className={styles.breadcrumb}>
-        <span>Home</span><span className={styles.sep}>/</span><span>Project Manager</span>
-      </div>
+      <div className={styles.breadcrumb}><span>Home</span><span className={styles.sep}>/</span><span>Project Manager</span></div>
 
       <div className={styles.header}>
         <div className={styles.titleBlock}>
@@ -210,30 +208,11 @@ export default function ProjectManagerEducatorView() {
         </div>
 
         <div className={styles.toolbar}>
-          <input
-            type="text"
-            placeholder="Search educators (name/subject)"
-            className={styles.searchInput}
-            value={query}
-            onChange={(e) => setQuery(e.target.value)}
-            aria-label="Search educators"
-          />
-          <select
-            className={styles.select}
-            value={subject}
-            onChange={(e) => setSubject(e.target.value)}
-            aria-label="Filter by subject"
-          >
+          <input type="text" placeholder="Search educators (name/subject)" className={styles.searchInput} value={query} onChange={(e) => setQuery(e.target.value)} aria-label="Search educators" />
+          <select className={styles.select} value={subject} onChange={(e) => setSubject(e.target.value)} aria-label="Filter by subject">
             {subjects.map((subj) => <option key={subj} value={subj}>{subj}</option>)}
           </select>
-          <input
-            type="text"
-            placeholder="Search students inside rows"
-            className={styles.searchInput}
-            value={studentQuery}
-            onChange={(e) => setStudentQuery(e.target.value)}
-            aria-label="Search students"
-          />
+          <input type="text" placeholder="Search students inside rows" className={styles.searchInput} value={studentQuery} onChange={(e) => setStudentQuery(e.target.value)} aria-label="Search students" />
           <button className={styles.ghostBtn} onClick={expandAll}>Expand all</button>
           <button className={styles.ghostBtn} onClick={collapseAll}>Collapse all</button>
           <button className={`${styles.primaryBtn} ${styles.pushRight}`} onClick={handleOpenComposer}>New Announcement</button>
diff --git a/src/components/EductionPortal/ProjectManager/ProjectManagerNotification.jsx b/src/components/EductionPortal/ProjectManager/ProjectManagerNotification.jsx
index 18243cd1c1..1b7dca5d92 100644
--- a/src/components/EductionPortal/ProjectManager/ProjectManagerNotification.jsx
+++ b/src/components/EductionPortal/ProjectManager/ProjectManagerNotification.jsx
@@ -7,31 +7,38 @@ const DRAFT_KEY = "pm_notif_draft";
 
 const api = axios.create({
   baseURL: process.env.REACT_APP_APIENDPOINT || "",
-  withCredentials: true,
 });
 
 function getToken() {
-  return localStorage.getItem("token");
+  const raw = localStorage.getItem("token") || "";
+  return String(raw).replace(/^"(.*)"$/, "$1").trim();
 }
 
-async function sendNotification({ educatorIds, message }) {
+async function POST(url, data) {
+  const token = getToken();
   try {
-    const token = getToken();
-    const res = await api.post(
-      "/pm/notifications",
-      { educatorIds, message },
-      { headers: token ? { Authorization: token } : {} }
-    );
-    return res?.data ?? { ok: true };
-  } catch {
-    await new Promise((r) => setTimeout(r, 350));
-    if (!educatorIds.length || !message.trim()) {
-      throw new Error("Select at least one educator and enter a message.");
+    const res = await api.post(url, data, { headers: token ? { Authorization: token } : {} });
+    return res;
+  } catch (err) {
+    if (err?.response?.status === 401) {
+      const body = new URLSearchParams();
+      Object.entries(data || {}).forEach(([k, v]) => {
+        if (Array.isArray(v)) v.forEach((x) => body.append(`${k}[]`, x));
+        else body.append(k, v);
+      });
+      if (token) body.set("token", token);
+      return api.post(url, body);
     }
-    return { ok: true, fallback: true };
+    throw err;
   }
 }
 
+async function sendNotification({ educatorIds, message }) {
+  const payload = { educatorIds, message };
+  const res = await POST("/pm/notifications", payload);
+  return res?.data ?? { ok: true };
+}
+
 export default function ProjectManagerNotification({ educators, onClose, onSent }) {
   const darkMode = useSelector((state) => state.theme?.darkMode);
   const [selected, setSelected] = React.useState([]);
@@ -65,6 +72,7 @@ export default function ProjectManagerNotification({ educators, onClose, onSent
     setError(null);
     try {
       const trimmed = message.trim();
+      if (!selected.length || !trimmed) throw new Error("Select at least one educator and enter a message.");
       const resp = await sendNotification({ educatorIds: selected, message: trimmed });
       localStorage.removeItem(DRAFT_KEY);
       onSent({ educatorIds: selected, message: trimmed, resp });
@@ -87,23 +95,14 @@ export default function ProjectManagerNotification({ educators, onClose, onSent
           <div className={styles.section}>
             <div className={styles.sectionLabel}>Recipients</div>
             <label className={styles.checkAll}>
-              <input
-                type="checkbox"
-                checked={allChecked}
-                ref={(el) => el && (el.indeterminate = someChecked)}
-                onChange={toggleAll}
-              />
+              <input type="checkbox" checked={allChecked} ref={(el) => el && (el.indeterminate = someChecked)} onChange={toggleAll} />
               Select all
             </label>
 
             <div className={styles.list}>
               {educators.map((e) => (
                 <label key={e.id} className={styles.item}>
-                  <input
-                    type="checkbox"
-                    checked={selected.includes(e.id)}
-                    onChange={() => toggleOne(e.id)}
-                  />
+                  <input type="checkbox" checked={selected.includes(e.id)} onChange={() => toggleOne(e.id)} />
                   <span className={styles.itemText}>
                     <span className={styles.itemName}>{e.name}</span>
                     <span className={styles.itemMeta}> • {e.subject}</span>
@@ -115,15 +114,7 @@ export default function ProjectManagerNotification({ educators, onClose, onSent
 
           <div className={styles.section}>
             <div className={styles.sectionLabel}>Message</div>
-            <textarea
-              className={styles.textarea}
-              placeholder="Write your announcement to teachers…"
-              rows={6}
-              value={message}
-              onChange={(e) => setMessage(e.target.value)}
-              maxLength={1000}
-              autoFocus
-            />
+            <textarea className={styles.textarea} placeholder="Write your announcement to teachers…" rows={6} value={message} onChange={(e) => setMessage(e.target.value)} maxLength={1000} autoFocus />
             <div className={styles.counter}>{message.length}/1000</div>
           </div>
 
diff --git a/src/utils/URL.js b/src/utils/URL.js
index 7e9b348169..1a75e75def 100644
--- a/src/utils/URL.js
+++ b/src/utils/URL.js
@@ -18,7 +18,7 @@ export const ENDPOINTS = {
 
   MODIFY_BLUE_SQUARE: (userId, blueSquareId) =>
     `${APIEndpoint}/userprofile/${userId}/infringements/${blueSquareId}`,
-  
+
   // Blue Square Email Triggers
   BLUE_SQUARE_RESEND_INFRINGEMENT_EMAILS: () => `${APIEndpoint}/blueSquare/resend-infringement-emails-only`,
   BLUE_SQUARE_RESEND_WEEKLY_SUMMARY_EMAILS: () => `${APIEndpoint}/blueSquare/resend-weekly-summary-emails`,
@@ -144,18 +144,18 @@ export const ENDPOINTS = {
     `${ENDPOINTS.APIEndpoint()}/task/${taskId}/tasknotification`,
   DELETE_TASK_NOTIFICATION: taskNotificationId =>
     `${APIEndpoint}/tasknotification/${taskNotificationId}`,
-  
-POPULARITY: (range, roles, start, end) => {
-  let url = `${APIEndpoint}/popularity?`;
-  if (range) url += `range=${range}&`;
-  if (roles && roles.length > 0) {
-    url += `roles=${encodeURIComponent(JSON.stringify(roles))}&`;
-  }
-  if (start) url += `start=${encodeURIComponent(start)}&`;
-  if (end) url += `end=${encodeURIComponent(end)}&`;
-  return url.slice(0, -1); 
-},
-POPULARITY_ROLES: `${APIEndpoint}/popularity/roles`,
+
+  POPULARITY: (range, roles, start, end) => {
+    let url = `${APIEndpoint}/popularity?`;
+    if (range) url += `range=${range}&`;
+    if (roles && roles.length > 0) {
+      url += `roles=${encodeURIComponent(JSON.stringify(roles))}&`;
+    }
+    if (start) url += `start=${encodeURIComponent(start)}&`;
+    if (end) url += `end=${encodeURIComponent(end)}&`;
+    return url.slice(0, -1);
+  },
+  POPULARITY_ROLES: `${APIEndpoint}/popularity/roles`,
 
 
   // titles endpoints
@@ -439,6 +439,10 @@ POPULARITY_ROLES: `${APIEndpoint}/popularity/roles`,
   //pull requests analysis
   PR_REVIEWS_INSIGHTS: `${APIEndpoint}/analytics/pr-review-insights`,
 
+  PM_EDUCATORS: () => `${APIEndpoint}/pm/educators`,
+  PM_EDUCATOR_STUDENTS: (educatorId) => `${APIEndpoint}/pm/educators/${encodeURIComponent(educatorId)}/students`,
+  PM_NOTIFICATIONS: () => `${APIEndpoint}/pm/notifications`,
+
 };
 
 export const ApiEndpoint = APIEndpoint;

From 538ec62e1f4a9e26018446a333eb64213a140f17 Mon Sep 17 00:00:00 2001
From: myeeli <myeeli@uab.edu>
Date: Thu, 6 Nov 2025 12:49:57 -0800
Subject: [PATCH 7/7] Fixed Sned Notification issues

---
 .../ProjectManagerNotification.jsx            | 82 +++++++++++++++----
 1 file changed, 66 insertions(+), 16 deletions(-)

diff --git a/src/components/EductionPortal/ProjectManager/ProjectManagerNotification.jsx b/src/components/EductionPortal/ProjectManager/ProjectManagerNotification.jsx
index 1b7dca5d92..74639ada56 100644
--- a/src/components/EductionPortal/ProjectManager/ProjectManagerNotification.jsx
+++ b/src/components/EductionPortal/ProjectManager/ProjectManagerNotification.jsx
@@ -16,9 +16,9 @@ function getToken() {
 
 async function POST(url, data) {
   const token = getToken();
+  const headers = token ? { Authorization: token } : {};
   try {
-    const res = await api.post(url, data, { headers: token ? { Authorization: token } : {} });
-    return res;
+    return await api.post(url, data, { headers });
   } catch (err) {
     if (err?.response?.status === 401) {
       const body = new URLSearchParams();
@@ -33,30 +33,36 @@ async function POST(url, data) {
   }
 }
 
-async function sendNotification({ educatorIds, message }) {
-  const payload = { educatorIds, message };
+async function previewNotification(payload) {
+  const res = await POST("/pm/notifications/preview", payload);
+  return res?.data;
+}
+
+async function sendNotification(payload) {
   const res = await POST("/pm/notifications", payload);
   return res?.data ?? { ok: true };
 }
 
 export default function ProjectManagerNotification({ educators, onClose, onSent }) {
-  const darkMode = useSelector((state) => state.theme?.darkMode);
+  const darkMode = useSelector((s) => s.theme?.darkMode);
+
   const [selected, setSelected] = React.useState([]);
   const [message, setMessage] = React.useState("");
   const [sending, setSending] = React.useState(false);
   const [error, setError] = React.useState(null);
 
+
   React.useEffect(() => {
     const saved = localStorage.getItem(DRAFT_KEY);
     if (saved) setMessage(saved);
   }, []);
-
   React.useEffect(() => {
     localStorage.setItem(DRAFT_KEY, message);
   }, [message]);
 
+
   React.useEffect(() => {
-    function onKey(e) { if (e.key === "Escape") onClose(); }
+    const onKey = (e) => e.key === "Escape" && onClose();
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, [onClose]);
@@ -64,15 +70,32 @@ export default function ProjectManagerNotification({ educators, onClose, onSent
   const allChecked = selected.length === educators.length && educators.length > 0;
   const someChecked = selected.length > 0 && selected.length < educators.length;
 
-  function toggleAll() { setSelected(allChecked ? [] : educators.map((e) => e.id)); }
-  function toggleOne(id) { setSelected((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id])); }
+  const toggleAll = () => setSelected(allChecked ? [] : educators.map((e) => e.id));
+  const toggleOne = (id) =>
+    setSelected((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]));
 
   async function handleSend() {
     setSending(true);
     setError(null);
     try {
       const trimmed = message.trim();
-      if (!selected.length || !trimmed) throw new Error("Select at least one educator and enter a message.");
+      if (!trimmed) throw new Error("Enter a message.");
+      if (selected.length === 0) throw new Error("Select at least one educator.");
+
+      const preview = await previewNotification({ educatorIds: selected, message: trimmed });
+      const mode = preview?.mode;
+      const validLen = preview?.summary?.willSendTo ?? preview?.summary?.validIds?.length ?? 0;
+      const allFlag = !!preview?.summary?.all;
+
+      if (mode === "real" && validLen === 0 && !allFlag) {
+        const unknown = preview?.summary?.unknownIds || [];
+        throw new Error(
+          unknown.length
+            ? `No valid recipients. Unknown IDs: ${unknown.join(", ")}`
+            : "No valid recipients."
+        );
+      }
+
       const resp = await sendNotification({ educatorIds: selected, message: trimmed });
       localStorage.removeItem(DRAFT_KEY);
       onSent({ educatorIds: selected, message: trimmed, resp });
@@ -84,7 +107,12 @@ export default function ProjectManagerNotification({ educators, onClose, onSent
   }
 
   return (
-    <div className={`${styles.overlay} ${darkMode ? styles.dark : ""}`} role="dialog" aria-modal="true" aria-labelledby="composer-title">
+    <div
+      className={`${styles.overlay} ${darkMode ? styles.dark : ""}`}
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="composer-title"
+    >
       <div className={styles.modal}>
         <div className={styles.header}>
           <h3 id="composer-title" className={styles.title}>New Announcement</h3>
@@ -94,15 +122,25 @@ export default function ProjectManagerNotification({ educators, onClose, onSent
         <div className={styles.body}>
           <div className={styles.section}>
             <div className={styles.sectionLabel}>Recipients</div>
+
             <label className={styles.checkAll}>
-              <input type="checkbox" checked={allChecked} ref={(el) => el && (el.indeterminate = someChecked)} onChange={toggleAll} />
+              <input
+                type="checkbox"
+                checked={allChecked}
+                ref={(el) => el && (el.indeterminate = someChecked)}
+                onChange={toggleAll}
+              />
               Select all
             </label>
 
             <div className={styles.list}>
               {educators.map((e) => (
                 <label key={e.id} className={styles.item}>
-                  <input type="checkbox" checked={selected.includes(e.id)} onChange={() => toggleOne(e.id)} />
+                  <input
+                    type="checkbox"
+                    checked={selected.includes(e.id)}
+                    onChange={() => toggleOne(e.id)}
+                  />
                   <span className={styles.itemText}>
                     <span className={styles.itemName}>{e.name}</span>
                     <span className={styles.itemMeta}> • {e.subject}</span>
@@ -114,7 +152,15 @@ export default function ProjectManagerNotification({ educators, onClose, onSent
 
           <div className={styles.section}>
             <div className={styles.sectionLabel}>Message</div>
-            <textarea className={styles.textarea} placeholder="Write your announcement to teachers…" rows={6} value={message} onChange={(e) => setMessage(e.target.value)} maxLength={1000} autoFocus />
+            <textarea
+              className={styles.textarea}
+              placeholder="Write your announcement to teachers…"
+              rows={6}
+              value={message}
+              onChange={(e) => setMessage(e.target.value)}
+              maxLength={1000}
+              autoFocus
+            />
             <div className={styles.counter}>{message.length}/1000</div>
           </div>
 
@@ -122,8 +168,12 @@ export default function ProjectManagerNotification({ educators, onClose, onSent
         </div>
 
         <div className={styles.footer}>
-          <button className={styles.cancelBtnNotify} onClick={onClose} disabled={sending}>Cancel</button>
-          <button className={styles.primaryBtn} onClick={handleSend} disabled={sending}>{sending ? "Sending…" : "Send Announcement"}</button>
+          <button className={styles.cancelBtnNotify} onClick={onClose} disabled={sending}>
+            Cancel
+          </button>
+          <button className={styles.primaryBtn} onClick={handleSend} disabled={sending}>
+            {sending ? "Sending…" : "Send Announcement"}
+          </button>
         </div>
       </div>
     </div>