Sophia/158 fixes

server/mongodb/actions/Chapter.ts

@@ -13,6 +13,11 @@ import { ObjectId, PipelineStage, Promise } from "mongoose";
 import Chapter from "../models/Chapter";
 import User from "../models/User";
 
+export const getChapters = async (): Promise<IChapter[] | null> => {
+  const chapters = await Chapter.find<IChapter>();
+  return chapters;
+};
+
 export const getChapterByName = async (
   name: string,
 ): Promise<IChapter | null> => {

src/app/api/chapter/get-chapters/route.ts

@@ -0,0 +1,14 @@
+import { getChapters } from "@server/mongodb/actions/Chapter";
+import APIWrapper from "@server/utils/APIWrapper";
+
+export const GET = APIWrapper({
+  config: {
+    requireToken: true,
+    requireAdmin: true,
+  },
+  handler: async () => {
+    const chapters = await getChapters();
+
+    return chapters;
+  },
+});

src/app/auth/information/page.tsx

@@ -1,21 +1,27 @@
 "use client";
 
-import React, { FormEvent, MouseEvent, useState } from "react";
+import React, {
+  FormEvent,
+  MouseEvent,
+  useState,
+  useEffect,
+  useCallback,
+} from "react";
 import { Error as ErrorIcon } from "@mui/icons-material";
 import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
 import { Country, State, City } from "country-state-city";
 import { useRouter } from "next/navigation";
 import LoadingBox from "@src/components/LoadingBox/LoadingBox";
 import Modal from "@src/components/Modal/Modal";
 
-import { IUser, HttpMethod, Role } from "@/common_utils/types";
+import { IUser, HttpMethod, Role, IChapter } from "@/common_utils/types";
 
 import InputField from "@src/components/InputField/InputField";
 import { internalRequest } from "@src/utils/requests";
 import AuthDropdown from "@src/components/Dropdown/AuthDropdown/AuthDropdown";
 import { formatPhoneNumber } from "@src/utils/utils";
 
-import CHAPTERS from "@src/utils/chapters";
+import { DropdownOption } from "@src/components/Dropdown/Dropdown";
 import styles from "./page.module.css";
 
 export default function Page() {
@@ -38,6 +44,8 @@ export default function Page() {
   const [chapterError, setChapterError] = useState("");
   const [showGeneralError, setShowGeneralError] = useState(false);
 
+  const [chapters, setChapters] = useState<DropdownOption<string>[]>([]);
+
   const [loading, setLoading] = useState(false);
 
   const router = useRouter();
@@ -155,6 +163,28 @@ export default function Page() {
     }
   };
 
+  const loadChapters = useCallback(() => {
+    setLoading(true);
+    internalRequest<IChapter[] | null>({
+      url: "/api/chapter/get-chapters",
+      method: HttpMethod.GET,
+      body: {},
+    }).then((res) => {
+      const chapterDropdown = res
+        ? res.map((chapterVal) => ({
+            value: chapterVal.name,
+            displayValue: chapterVal.name,
+          }))
+        : [];
+      setChapters(chapterDropdown);
+      setLoading(false);
+    });
+  }, []);
+
+  useEffect(() => {
+    loadChapters();
+  }, [loadChapters]);
+
   return (
     <div>
       <title>Personal Information | Brain Exercise Initiative</title>
@@ -285,7 +315,7 @@ export default function Page() {
               title="Chapter"
               required={true}
               placeholder="Select Your Chaper"
-              options={CHAPTERS}
+              options={chapters}
               value={chapter}
               onChange={(e) => {
                 setChapter(e.target.value);

src/components/Dashboard/MathScreen/MathScreen.tsx

@@ -63,7 +63,7 @@ const MathScreen = ({
             title="Average Math Accuracy"
             hoverable={true}
             percentageChange={true}
-            info="Vidushi"
+            info="Number correct on first attempt divided by total"
             data={accuracyData}
             fullWidth
             yLabel=""
@@ -76,23 +76,23 @@ const MathScreen = ({
             title="Average Math Difficulty"
             hoverable={true}
             percentageChange={true}
-            info="Vidushi"
+            info=""
             data={difficultyData}
             fullWidth
             gridLines
           />
           <BarChart
             width={325}
             height={175}
-            title="Average Questions Answered per Session sdsdsdsdshdajsdhj asj djas dhj "
+            title="Average Questions Answered per Session"
             data={numQuestionData}
             hoverable
             percentageChange
             yLabel=""
             // yLabel="Questions"
             fullWidth
             gridLines
-            info="test"
+            info=""
           />
           <BarChart
             width={325}
@@ -103,7 +103,7 @@ const MathScreen = ({
             percentageChange
             fullWidth
             gridLines
-            info="Test"
+            info="In seconds"
           />
         </div>
         <div className={styles.textStatsWithHeader}>

src/components/Dashboard/OverallDashboard/OverallDashboard.module.scss

@@ -20,6 +20,12 @@
       font-size: 29.705px;
       font-style: normal;
     }
+
+    .infoBox {
+      font-family: var(--font-poppins);
+      font-size: 12px;
+      font-style: normal;
+    }
   }
 
   .bottomContainer {

src/components/Dashboard/OverallDashboard/OverallDashboard.tsx

@@ -10,12 +10,13 @@ import {
   QuestionIcon as QI,
   BarChartIcon,
 } from "@src/app/icons";
-import { CSSProperties } from "react";
+import { CSSProperties, useState, useRef, useEffect } from "react";
 import { DateRangeEnum, Days } from "@/common_utils/types";
 import { D3Data } from "@src/utils/types";
 import Chip from "@src/components/Chip/Chip";
 import ActiveIndicatorBox from "@src/components/ActiveIndicatorBox/ActiveIndicatorBox";
 import DateSelector from "@src/components/DateSelector/DateSelector";
+import PopupModal from "@src/components/Graphs/PopupModal/PopupModal";
 import { BarChart, SmallDataBox, WeeklyProgress } from "../../Graphs";
 import styles from "./OverallDashboard.module.scss";
 
@@ -54,6 +55,26 @@ function formatDate(date: Date) {
 }
 
 export default function OverallDashboard(params: Params) {
+  const [infoPopup, setInfoPopup] = useState(false);
+  const infoButtonRef = useRef(null);
+  const [popupX, setPopupX] = useState<number | null>(null);
+  const [popupY, setPopupY] = useState<number | null>(null);
+
+  useEffect(() => {
+    const onScroll = () => setInfoPopup(false);
+    // clean up code
+    window.removeEventListener("scroll", onScroll);
+    window.addEventListener("scroll", onScroll, { passive: true });
+
+    if (infoButtonRef.current) {
+      const rect: Element = infoButtonRef.current;
+      const newTop = rect.getBoundingClientRect().y + 30;
+      setPopupY(newTop);
+      const left = rect.getBoundingClientRect().x;
+      setPopupX(left);
+    }
+  }, [setPopupX, setPopupY, setInfoPopup]);
+
   return (
     <div className={styles.OverallDashboard} style={params.style}>
       <div className={styles.titleRow}>
@@ -74,7 +95,31 @@ export default function OverallDashboard(params: Params) {
           active={params.active}
           style={{ marginLeft: "17px", marginRight: "10px" }}
         />
-        <IGI />
+        <div
+          className={styles.infoBox}
+          onMouseEnter={() => {
+            setInfoPopup(true);
+          }}
+          onMouseLeave={() => {
+            setInfoPopup(false);
+          }}
+          ref={infoButtonRef}
+          style={{ position: "relative" }}
+        >
+          <IGI />
+          <PopupModal
+            show={infoPopup}
+            info={
+              "Active means a user has completed at least two sessions each week for the past two weeks."
+            }
+            style={{
+              position: "fixed",
+              top: `${popupY}px`,
+              zIndex: 500,
+              left: `${popupX}px`,
+            }}
+          />
+        </div>
         <div className={styles.dateSelector}>
           <DateSelector
             selectedValue={params.menuState[0]}

src/components/Dashboard/ReadingScreen/ReadingScreen.tsx

@@ -96,10 +96,10 @@ export default function ReadingScreen({
           <LineChart
             width={325}
             height={185}
-            title="Average Reading Rate (Words/Min)"
+            title="Average Reading Rate"
             hoverable={true}
             percentageChange={true}
-            info="Vidushi"
+            info="Words/Min"
             data={readingRate}
             fullWidth
             gridLines
@@ -113,7 +113,7 @@ export default function ReadingScreen({
             percentageChange
             fullWidth
             gridLines
-            info="Hey this is just some info I thought you will find interesting."
+            info="In seconds"
           />
         </div>
         <div className={styles.textStats}>

src/components/Dashboard/TriviaScreen/TriviaScreen.tsx

@@ -71,7 +71,7 @@ export default function TriviaScreen({
             title="Average Trivia Accuracy"
             hoverable={true}
             percentageChange={true}
-            info="Vidushi"
+            info="Number of self-reported correct answers"
             data={accuracyData}
             fullWidth
             gridLines
@@ -80,6 +80,7 @@ export default function TriviaScreen({
             width={325}
             height={175}
             title="Average Time Spent per Question"
+            info="In seconds"
             data={timeData}
             hoverable
             percentageChange

src/components/Dashboard/WritingScreen/WritingScreen.tsx

@@ -61,7 +61,6 @@ export default function WritingScreen({
             //   { text: "sessions completed without writing", color: "#FF9FB3" },
             //   { text: "sessions completed with writing", color: "#008AFC" },
             // ]}
-            info="Some really extremely interesting information about stacked bar chart."
             hoverable
             percentageChange
             fullWidth
@@ -76,14 +75,13 @@ export default function WritingScreen({
             percentageChange
             fullWidth
             gridLines
-            info="Some info for testing purposes in bar chart"
           />
           <BarChart
             width={325}
             height={185}
             title="Average Time Spent Per Prompt"
             data={avgTime}
-            info="Some info for testing purposes in bar chart"
+            info="In seconds"
             hoverable
             percentageChange
             fullWidth

src/components/DateSelector/DateSelector.tsx

@@ -34,6 +34,7 @@ function DateSelector({
         border: "none",
         width: "130px",
         textAlign: "center",
+        backgroundColor: "white",
       }}
       sx={{
         "&.MuiOutlinedInput-root": {
@@ -48,6 +49,7 @@ function DateSelector({
         fontSize: "12px",
         fontFamily: poppins500.style.fontFamily,
       }}
+      defaultBackgroundColor="#ffffff"
     />
   );
 }

src/components/GroupDashboard/GroupMathScreen/GroupMathScreen.tsx

@@ -65,7 +65,7 @@ const GroupMathScreen = ({
             title="Average Math Accuracy"
             hoverable={true}
             percentageChange={true}
-            info="Vidushi"
+            info="Number correct on first attempt divided by total"
             data={accuracyData}
             fullWidth
             gridLines
@@ -76,7 +76,7 @@ const GroupMathScreen = ({
             title="Average Math Difficulty"
             hoverable={true}
             percentageChange={true}
-            info="Vidushi"
+            info=""
             data={difficultyData}
             fullWidth
             gridLines
@@ -96,6 +96,7 @@ const GroupMathScreen = ({
             width={325}
             height={175}
             title="Average Time Spent per Question"
+            info="In seconds"
             data={timeData}
             hoverable
             percentageChange

src/components/GroupDashboard/GroupReadingScreen/GroupReadingScreen.tsx

@@ -80,10 +80,10 @@ export default function GroupReadingScreen({
           <LineChart
             width={325}
             height={185}
-            title="Average Reading Rate (Words/Min)"
+            title="Average Reading Rate"
             hoverable={true}
             percentageChange={true}
-            info="Vidushi"
+            info="Words/Min"
             data={readingRate}
             fullWidth
             gridLines
@@ -97,7 +97,7 @@ export default function GroupReadingScreen({
             percentageChange
             fullWidth
             gridLines
-            info="Hey this is just some info I thought you will find interesting."
+            info="In seconds"
           />
         </div>
         <div className={styles.textStats}>

src/components/GroupDashboard/GroupTriviaScreen/GroupTriviaScreen.tsx

@@ -72,7 +72,7 @@ export default function GroupTriviaScreen({
             title="Average Trivia Accuracy"
             hoverable={true}
             percentageChange={true}
-            info="Vidushi"
+            info="Number of self-reported correct answers"
             data={accuracyData}
             fullWidth
             gridLines
@@ -81,6 +81,7 @@ export default function GroupTriviaScreen({
             width={325}
             height={175}
             title="Average Time Spent per Question"
+            info="In seconds"
             data={timeData}
             hoverable
             percentageChange

src/components/GroupDashboard/GroupWritingScreen/GroupWritingScreen.tsx

@@ -57,14 +57,13 @@ export default function GroupWritingScreen({
             percentageChange
             fullWidth
             gridLines
-            info="Some info for testing purposes in bar chart"
           />
           <BarChart
             width={325}
             height={185}
             title="Average Time Spent Per Prompt"
             data={avgTimeData}
-            info="Some info for testing purposes in bar chart"
+            info="In seconds"
             hoverable
             percentageChange
             fullWidth