Improved the sorting and filtering for the Student Performance page

src/dashboards/MasterCorporate.tsx

@@ -21,6 +21,7 @@ import {
 	BsArrowRepeat,
 	BsPlus,
 	BsPersonFillGear,
+	BsFilter,
 } from "react-icons/bs";
 import UserCard from "@/components/UserCard";
 import useGroups from "@/hooks/useGroups";
@@ -44,10 +45,11 @@ import {createColumn, createColumnHelper} from "@tanstack/react-table";
 import List from "@/components/List";
 import {getUserCorporate} from "@/utils/groups";
 import {getCorporateUser, getUserCompanyName} from "@/resources/user";
-import {Switch} from "@headlessui/react";
 import Checkbox from "@/components/Low/Checkbox";
 import {uniq, uniqBy} from "lodash";
 import Select from "@/components/Low/Select";
+import {Menu, MenuButton, MenuItem, MenuItems} from "@headlessui/react";
+import {Popover, PopoverContent, PopoverTrigger} from "@/components/ui/popover";
 
 interface Props {
 	user: MasterCorporateUser;
@@ -62,8 +64,15 @@ const StudentPerformanceList = ({items, stats, users, groups}: {items: StudentPe
 			"id",
 		),
 	);
+	const [availableGroups] = useState(
+		uniqBy(
+			items.map((x) => x.group),
+			"id",
+		),
+	);
 
 	const [selectedCorporate, setSelectedCorporate] = useState<CorporateUser | null | undefined>(null);
+	const [selectedGroup, setSelectedGroup] = useState<Group | null | undefined>(null);
 
 	const columnHelper = createColumnHelper<StudentPerformanceItem>();
 
@@ -184,40 +193,80 @@ const StudentPerformanceList = ({items, stats, users, groups}: {items: StudentPe
 	const filterUsers = (data: StudentPerformanceItem[]) => {
 		console.log(data, selectedCorporate);
 		const filterByCorporate = (item: StudentPerformanceItem) => item.corporate?.id === selectedCorporate?.id;
+		const filterByGroup = (item: StudentPerformanceItem) => item.group?.id === selectedGroup?.id;
 
 		const filters: ((item: StudentPerformanceItem) => boolean)[] = [];
 		if (selectedCorporate !== null) filters.push(filterByCorporate);
+		if (selectedGroup !== null) filters.push(filterByGroup);
 
 		return filters.reduce((d, f) => d.filter(f), data);
 	};
 
 	return (
 		<div className="flex flex-col gap-4 w-full h-full">
-			<div className="w-full flex flex-col gap-4">
-				<Select
-					options={availableCorporates.map((x) => ({
-						value: x?.id || "N/A",
-						label: x?.corporateInformation?.companyInformation?.name || x?.name || "N/A",
-					}))}
-					isClearable
-					value={
-						selectedCorporate === null
-							? null
-							: {
-									value: selectedCorporate?.id || "N/A",
-									label: selectedCorporate?.corporateInformation?.companyInformation?.name || selectedCorporate?.name || "N/A",
-							  }
-					}
-					placeholder="Select a Corporate..."
-					onChange={(value) =>
-						!value
-							? setSelectedCorporate(null)
-							: setSelectedCorporate(value.value === "N/A" ? undefined : availableCorporates.find((x) => x?.id === value.value))
-					}
-				/>
+			<div className="w-full flex gap-4 justify-between items-center">
 				<Checkbox isChecked={isShowingAmount} onChange={setIsShowingAmount}>
 					Show Utilization
 				</Checkbox>
+				<Popover>
+					<PopoverTrigger>
+						<div className="flex items-center justify-center p-2 hover:bg-neutral-300/50 rounded-full transition ease-in-out duration-300">
+							<BsFilter size={20} />
+						</div>
+					</PopoverTrigger>
+					<PopoverContent className="w-96">
+						<div className="flex flex-col gap-4">
+							<span className="font-bold text-lg">Filters</span>
+							<Select
+								options={availableCorporates.map((x) => ({
+									value: x?.id || "N/A",
+									label: x?.corporateInformation?.companyInformation?.name || x?.name || "N/A",
+								}))}
+								isClearable
+								value={
+									selectedCorporate === null
+										? null
+										: {
+												value: selectedCorporate?.id || "N/A",
+												label:
+													selectedCorporate?.corporateInformation?.companyInformation?.name ||
+													selectedCorporate?.name ||
+													"N/A",
+										  }
+								}
+								placeholder="Select a Corporate..."
+								onChange={(value) =>
+									!value
+										? setSelectedCorporate(null)
+										: setSelectedCorporate(
+												value.value === "N/A" ? undefined : availableCorporates.find((x) => x?.id === value.value),
+										  )
+								}
+							/>
+							<Select
+								options={availableGroups.map((x) => ({
+									value: x?.id || "N/A",
+									label: x?.name || "N/A",
+								}))}
+								isClearable
+								value={
+									selectedGroup === null
+										? null
+										: {
+												value: selectedGroup?.id || "N/A",
+												label: selectedGroup?.name || "N/A",
+										  }
+								}
+								placeholder="Select a Group..."
+								onChange={(value) =>
+									!value
+										? setSelectedGroup(null)
+										: setSelectedGroup(value.value === "N/A" ? undefined : availableGroups.find((x) => x?.id === value.value))
+								}
+							/>
+						</div>
+					</PopoverContent>
+				</Popover>
 			</div>
 			<List<StudentPerformanceItem>
 				data={filterUsers(