Started working on the assignments page

src/components/List.tsx

@@ -1,13 +1,26 @@
+import {useListSearch} from "@/hooks/useListSearch";
+import usePagination from "@/hooks/usePagination";
 import {Column, flexRender, getCoreRowModel, getSortedRowModel, useReactTable} from "@tanstack/react-table";
+import clsx from "clsx";
 import {useMemo, useState} from "react";
 import Button from "./Low/Button";
 
 const SIZE = 25;
 
-export default function List<T>({data, columns}: {data: T[]; columns: any[]}) {
-	const [page, setPage] = useState(0);
+export default function List<T>({
+	data,
+	columns,
+	searchFields = [],
+	pageSize = SIZE,
+}: {
+	data: T[];
+	columns: any[];
+	searchFields?: string[][];
+	pageSize?: number;
+}) {
+	const {rows, renderSearch} = useListSearch(searchFields, data);
 
-	const items = useMemo(() => data.slice(page * SIZE, (page + 1) * SIZE > data.length ? data.length : (page + 1) * SIZE), [data, page]);
+	const {items, page, renderMinimal} = usePagination(rows, pageSize);
 
 	const table = useReactTable({
 		data: items,
@@ -17,19 +30,10 @@ export default function List<T>({data, columns}: {data: T[]; columns: any[]}) {
 	});
 
 	return (
-		<div className="w-full h-full flex flex-col gap-2">
-			<div className="w-full flex gap-2 justify-between">
-				<Button className="w-full max-w-[200px]" disabled={page === 0} onClick={() => setPage((prev) => prev - 1)}>
-					Previous Page
-				</Button>
-				<div className="flex items-center gap-4 w-fit">
-					<span className="opacity-80">
-						{page * SIZE + 1} - {(page + 1) * SIZE > data.length ? data.length : (page + 1) * SIZE} / {data.length}
-					</span>
-					<Button className="w-[200px]" disabled={(page + 1) * SIZE >= data.length} onClick={() => setPage((prev) => prev + 1)}>
-						Next Page
-					</Button>
-				</div>
+		<div className="w-full h-full flex flex-col gap-6">
+			<div className={clsx("w-full flex items-center gap-4", searchFields.length === 0 && "justify-end")}>
+				{searchFields.length > 0 && renderSearch()}
+				{renderMinimal()}
 			</div>
 
 			<table className="rounded-xl bg-mti-purple-ultralight/40 w-full">

src/components/Low/Select.tsx

@@ -18,9 +18,10 @@ interface Props {
 	isClearable?: boolean;
 	styles?: StylesConfig<Option, boolean, GroupBase<Option>>;
 	className?: string;
+	label?: string;
 }
 
-export default function Select({value, defaultValue, options, placeholder, disabled, onChange, styles, isClearable, className}: Props) {
+export default function Select({value, defaultValue, options, placeholder, disabled, onChange, styles, isClearable, label, className}: Props) {
 	const [target, setTarget] = useState<HTMLElement>();
 
 	useEffect(() => {
@@ -28,43 +29,46 @@ export default function Select({value, defaultValue, options, placeholder, disab
 	}, []);
 
 	return (
-		<ReactSelect
-			className={
-				styles
-					? undefined
-					: clsx(
-							"placeholder:text-mti-gray-cool border-mti-gray-platinum w-full rounded-full border bg-white px-4 py-4 text-sm font-normal focus:outline-none",
-							disabled && "!bg-mti-gray-platinum/40 !text-mti-gray-dim cursor-not-allowed",
-							className,
-					  )
-			}
-			options={options}
-			value={value}
-			onChange={onChange as any}
-			placeholder={placeholder}
-			menuPortalTarget={target}
-			defaultValue={defaultValue}
-			styles={
-				styles || {
-					menuPortal: (base) => ({...base, zIndex: 9999}),
-					control: (styles) => ({
-						...styles,
-						paddingLeft: "4px",
-						border: "none",
-						outline: "none",
-						":focus": {
-							outline: "none",
-						},
-					}),
-					option: (styles, state) => ({
-						...styles,
-						backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
-						color: state.isFocused ? "black" : styles.color,
-					}),
+		<div className="w-full flex flex-col gap-3">
+			{label && <label className="font-normal text-base text-mti-gray-dim">{label}</label>}
+			<ReactSelect
+				className={
+					styles
+						? undefined
+						: clsx(
+								"placeholder:text-mti-gray-cool border-mti-gray-platinum w-full rounded-full border bg-white px-4 py-4 text-sm font-normal focus:outline-none",
+								disabled && "!bg-mti-gray-platinum/40 !text-mti-gray-dim cursor-not-allowed",
+								className,
+						  )
 				}
-			}
-			isDisabled={disabled}
-			isClearable={isClearable}
-		/>
+				options={options}
+				value={value}
+				onChange={onChange as any}
+				placeholder={placeholder}
+				menuPortalTarget={target}
+				defaultValue={defaultValue}
+				styles={
+					styles || {
+						menuPortal: (base) => ({...base, zIndex: 9999}),
+						control: (styles) => ({
+							...styles,
+							paddingLeft: "4px",
+							border: "none",
+							outline: "none",
+							":focus": {
+								outline: "none",
+							},
+						}),
+						option: (styles, state) => ({
+							...styles,
+							backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
+							color: state.isFocused ? "black" : styles.color,
+						}),
+					}
+				}
+				isDisabled={disabled}
+				isClearable={isClearable}
+			/>
+		</div>
 	);
 }

src/components/Sidebar.tsx

@@ -111,7 +111,14 @@ export default function Sidebar({path, navDisabled = false, focusMode = false, u
 					<Nav disabled={disableNavigation} Icon={BsGraphUp} label="Stats" path={path} keyPath="/stats" isMinimized={isMinimized} />
 				)}
 				{checkAccess(user, ["developer", "admin", "mastercorporate", "corporate", "teacher", "student"], permissions) && (
-					<Nav disabled={disableNavigation} Icon={BsPeople} label="Groups" path={path} keyPath="/groups" isMinimized={isMinimized} />
+					<Nav
+						disabled={disableNavigation}
+						Icon={BsPeople}
+						label="Classrooms"
+						path={path}
+						keyPath="/classrooms"
+						isMinimized={isMinimized}
+					/>
 				)}
 				{checkAccess(user, getTypesOfUser(["agent"]), permissions, "viewRecords") && (
 					<Nav disabled={disableNavigation} Icon={BsClockHistory} label="Record" path={path} keyPath="/record" isMinimized={isMinimized} />