Created a new system for the Groups that will persist after having entities

src/components/Low/Checkbox.tsx

@@ -5,7 +5,7 @@ import {BsCheck} from "react-icons/bs";
 interface Props {
 	isChecked: boolean;
 	onChange: (isChecked: boolean) => void;
-	children: ReactNode;
+	children?: ReactNode;
 	disabled?: boolean;
 }
 

src/components/Low/Separator.tsx

@@ -0,0 +1,3 @@
+const Separator = () => <div className="w-full h-[1px] bg-mti-gray-platinum rounded-full" />;
+
+export default Separator;

src/components/Low/Tooltip.tsx

@@ -0,0 +1,17 @@
+import clsx from "clsx";
+import {ReactNode} from "react";
+
+interface Props {
+	tooltip: string;
+	disabled?: boolean;
+	className?: string;
+	children: ReactNode;
+}
+
+export default function Tooltip({tooltip, disabled = false, className, children}: Props) {
+	return (
+		<div className={clsx(!disabled && "tooltip", className)} data-tip={tooltip}>
+			{children}
+		</div>
+	);
+}

src/components/Sidebar.tsx

@@ -57,7 +57,7 @@ const Nav = ({Icon, label, path, keyPath, disabled = false, isMinimized = false,
 				"flex items-center gap-4 rounded-full p-4 text-gray-500 hover:text-white",
 				"transition-all duration-300 ease-in-out relative",
 				disabled ? "hover:bg-mti-gray-dim cursor-not-allowed" : "hover:bg-mti-purple-light cursor-pointer",
-				path === keyPath && "bg-mti-purple-light text-white",
+				(keyPath === "/" ? path === keyPath : path.startsWith(keyPath)) && "bg-mti-purple-light text-white",
 				isMinimized ? "w-fit" : "w-full min-w-[200px] px-8 2xl:min-w-[220px]",
 			)}>
 			<Icon size={24} />
@@ -110,7 +110,7 @@ export default function Sidebar({path, navDisabled = false, focusMode = false, u
 				{checkAccess(user, getTypesOfUser(["agent"]), permissions, "viewStats") && (
 					<Nav disabled={disableNavigation} Icon={BsGraphUp} label="Stats" path={path} keyPath="/stats" isMinimized={isMinimized} />
 				)}
-				{checkAccess(user, ["developer", "admin", "teacher", "student"], permissions) && (
+				{checkAccess(user, ["developer", "admin", "mastercorporate", "corporate", "teacher", "student"], permissions) && (
 					<Nav disabled={disableNavigation} Icon={BsPeople} label="Groups" path={path} keyPath="/groups" isMinimized={isMinimized} />
 				)}
 				{checkAccess(user, getTypesOfUser(["agent"]), permissions, "viewRecords") && (