Added the ability to filter by month, week and day on the record

src/pages/record.tsx

@@ -1,35 +1,23 @@
 /* eslint-disable @next/next/no-img-element */
 import Head from "next/head";
-import SingleDatasetChart from "@/components/UserResultChart";
-import Navbar from "@/components/Navbar";
-import ProfileCard from "@/components/ProfileCard";
 import {withIronSessionSsr} from "iron-session/next";
 import {sessionOptions} from "@/lib/session";
 import {Stat, User} from "@/interfaces/user";
 import {useEffect, useState} from "react";
 import useStats from "@/hooks/useStats";
-import {averageScore, convertToUserSolutions, formatModuleTotalStats, groupByDate, groupBySession, totalExams} from "@/utils/stats";
+import {convertToUserSolutions, groupByDate} from "@/utils/stats";
-import {Divider} from "primereact/divider";
-import useUser from "@/hooks/useUser";
-import {Timeline} from "primereact/timeline";
 import moment from "moment";
-import {AutoComplete} from "primereact/autocomplete";
 import useUsers from "@/hooks/useUsers";
-import {Dropdown} from "primereact/dropdown";
 import useExamStore from "@/stores/examStore";
-import {Exam, ListeningExam, ReadingExam, SpeakingExam, WritingExam} from "@/interfaces/exam";
 import {Module} from "@/interfaces";
-import axios from "axios";
+import {ToastContainer} from "react-toastify";
-import {toast, ToastContainer} from "react-toastify";
 import {useRouter} from "next/router";
-import Icon from "@mdi/react";
-import {mdiArrowRight, mdiChevronRight} from "@mdi/js";
 import {uniqBy} from "lodash";
 import {getExamById} from "@/utils/exams";
 import {sortByModule} from "@/utils/moduleUtils";
 import Layout from "@/components/High/Layout";
 import clsx from "clsx";
-import {calculateAverageLevel, calculateBandScore} from "@/utils/score";
+import {calculateBandScore} from "@/utils/score";
 import {BsBook, BsHeadphones, BsMegaphone, BsPen} from "react-icons/bs";
 
 export const getServerSideProps = withIronSessionSsr(({req, res}) => {
@@ -54,6 +42,7 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 export default function History({user}: {user: User}) {
 	const [selectedUser, setSelectedUser] = useState<User>(user);
 	const [groupedStats, setGroupedStats] = useState<{[key: string]: Stat[]}>();
+	const [filter, setFilter] = useState<"months" | "weeks" | "days">();
 
 	const {users, isLoading: isUsersLoading} = useUsers();
 	const {stats, isLoading: isStatsLoading} = useStats(selectedUser?.id);
@@ -71,6 +60,27 @@ export default function History({user}: {user: User}) {
 		}
 	}, [stats, isStatsLoading]);
 
+	const toggleFilter = (value: "months" | "weeks" | "days") => {
+		setFilter((prev) => (prev === value ? undefined : value));
+	};
+
+	const filterStatsByDate = (stats: {[key: string]: Stat[]}) => {
+		if (filter) {
+			const filterDate = moment()
+				.subtract({[filter as string]: 1})
+				.format("x");
+			const filteredStats: {[key: string]: Stat[]} = {};
+
+			Object.keys(stats).forEach((timestamp) => {
+				if (timestamp >= filterDate) filteredStats[timestamp] = stats[timestamp];
+			});
+
+			return filteredStats;
+		}
+
+		return stats;
+	};
+
 	const formatTimestamp = (timestamp: string) => {
 		const date = moment(parseInt(timestamp));
 		const formatter = "YYYY/MM/DD - HH:mm";
@@ -207,24 +217,55 @@ export default function History({user}: {user: User}) {
 			<ToastContainer />
 			{user && (
 				<Layout user={user}>
-					<div className="w-fit">
+					<div className="w-full flex justify-between items-center">
-						{!isUsersLoading && user.type !== "student" && (
+						<div className="w-fit">
-							<>
+							{!isUsersLoading && user.type !== "student" && (
-								<select
+								<>
-									className="select w-full max-w-xs bg-white border border-mti-gray-platinum outline-none font-normal text-base"
+									<select
-									onChange={(e) => setSelectedUser(users.find((x) => x.id === e.target.value)!)}>
+										className="select w-full max-w-xs bg-white border border-mti-gray-platinum outline-none font-normal text-base"
-									{users.map((x) => (
+										onChange={(e) => setSelectedUser(users.find((x) => x.id === e.target.value)!)}>
-										<option key={x.id} selected={selectedUser.id === x.id} value={x.id}>
+										{users.map((x) => (
-											{x.name}
+											<option key={x.id} selected={selectedUser.id === x.id} value={x.id}>
-										</option>
+												{x.name}
-									))}
+											</option>
-								</select>
+										))}
-							</>
+									</select>
-						)}
+								</>
+							)}
+						</div>
+						<div className="flex gap-4">
+							<button
+								className={clsx(
+									"bg-mti-green-ultralight text-mti-green px-4 py-2 rounded-full hover:text-white hover:bg-mti-green-light",
+									"transition duration-300 ease-in-out",
+									filter === "months" && "!bg-mti-green-light !text-white",
+								)}
+								onClick={() => toggleFilter("months")}>
+								Last month
+							</button>
+							<button
+								className={clsx(
+									"bg-mti-green-ultralight text-mti-green px-4 py-2 rounded-full hover:text-white hover:bg-mti-green-light",
+									"transition duration-300 ease-in-out",
+									filter === "weeks" && "!bg-mti-green-light !text-white",
+								)}
+								onClick={() => toggleFilter("weeks")}>
+								Last week
+							</button>
+							<button
+								className={clsx(
+									"bg-mti-green-ultralight text-mti-green px-4 py-2 rounded-full hover:text-white hover:bg-mti-green-light",
+									"transition duration-300 ease-in-out",
+									filter === "days" && "!bg-mti-green-light !text-white",
+								)}
+								onClick={() => toggleFilter("days")}>
+								Last day
+							</button>
+						</div>
 					</div>
 					{groupedStats && Object.keys(groupedStats).length > 0 && !isStatsLoading && (
 						<div className="grid grid-cols-3 w-full gap-6">
-							{Object.keys(groupedStats)
+							{Object.keys(filterStatsByDate(groupedStats))
 								.sort((a, b) => parseInt(b) - parseInt(a))
 								.map(customContent)}
 						</div>