From 24d613e9cd7b48dace399c41b6384202d2afd7af Mon Sep 17 00:00:00 2001
From: Tiago Ribeiro <tiago.ribeiro@ecrop.dev>
Date: Mon, 2 Dec 2024 10:00:38 +0000
Subject: [PATCH] ENCOA-249

---
 src/components/Sidebar.tsx | 378 ++++++++++++++++++-------------------
 1 file changed, 189 insertions(+), 189 deletions(-)

diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 5e44ad75..a420c558 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -2,17 +2,17 @@ import clsx from "clsx";
 import { IconType } from "react-icons";
 import { MdSpaceDashboard } from "react-icons/md";
 import {
-  BsFileEarmarkText,
-  BsClockHistory,
-  BsPencil,
-  BsGraphUp,
-  BsChevronBarRight,
-  BsChevronBarLeft,
-  BsShieldFill,
-  BsCloudFill,
-  BsCurrencyDollar,
-  BsClipboardData,
-  BsPeople,
+	BsFileEarmarkText,
+	BsClockHistory,
+	BsPencil,
+	BsGraphUp,
+	BsChevronBarRight,
+	BsChevronBarLeft,
+	BsShieldFill,
+	BsCloudFill,
+	BsCurrencyDollar,
+	BsClipboardData,
+	BsPeople,
 } from "react-icons/bs";
 import { CiDumbbell } from "react-icons/ci";
 import { RiLogoutBoxFill } from "react-icons/ri";
@@ -31,50 +31,50 @@ import { useAllowedEntitiesSomePermissions } from "@/hooks/useEntityPermissions"
 import { useMemo } from "react";
 
 interface Props {
-  path: string;
-  navDisabled?: boolean;
-  focusMode?: boolean;
-  onFocusLayerMouseEnter?: () => void;
-  className?: string;
-  user: User;
-  entities?: EntityWithRoles[]
+	path: string;
+	navDisabled?: boolean;
+	focusMode?: boolean;
+	onFocusLayerMouseEnter?: () => void;
+	className?: string;
+	user: User;
+	entities?: EntityWithRoles[]
 }
 
 interface NavProps {
-  Icon: IconType;
-  label: string;
-  path: string;
-  keyPath: string;
-  disabled?: boolean;
-  isMinimized?: boolean;
-  badge?: number;
+	Icon: IconType;
+	label: string;
+	path: string;
+	keyPath: string;
+	disabled?: boolean;
+	isMinimized?: boolean;
+	badge?: number;
 }
 
 const Nav = ({ Icon, label, path, keyPath, disabled = false, isMinimized = false, badge }: NavProps) => {
-  return (
-    <Link
-      href={!disabled ? keyPath : ""}
-      className={clsx(
-        "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.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} />
-      {!isMinimized && <span className="text-lg font-semibold">{label}</span>}
-      {!!badge && badge > 0 && (
-        <div
-          className={clsx(
-            "bg-mti-purple-light h-5 w-5 text-xs rounded-full flex items-center justify-center text-white",
-            "transition ease-in-out duration-300",
-            isMinimized && "absolute right-0 top-0",
-          )}>
-          {badge}
-        </div>
-      )}
-    </Link>
-  );
+	return (
+		<Link
+			href={!disabled ? keyPath : ""}
+			className={clsx(
+				"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.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} />
+			{!isMinimized && <span className="text-lg font-semibold">{label}</span>}
+			{!!badge && badge > 0 && (
+				<div
+					className={clsx(
+						"bg-mti-purple-light h-5 w-5 text-xs rounded-full flex items-center justify-center text-white",
+						"transition ease-in-out duration-300",
+						isMinimized && "absolute right-0 top-0",
+					)}>
+					{badge}
+				</div>
+			)}
+		</Link>
+	);
 };
 
 export default function Sidebar({
@@ -86,152 +86,152 @@ export default function Sidebar({
 	onFocusLayerMouseEnter,
 	className
 }: Props) {
-  const router = useRouter();
+	const router = useRouter();
 
-  const isAdmin = useMemo(() => ['developer', 'admin'].includes(user?.type), [user?.type])
+	const isAdmin = useMemo(() => ['developer', 'admin'].includes(user?.type), [user?.type])
 
-  const [isMinimized, toggleMinimize] = usePreferencesStore((state) => [state.isSidebarMinimized, state.toggleSidebarMinimized]);
+	const [isMinimized, toggleMinimize] = usePreferencesStore((state) => [state.isSidebarMinimized, state.toggleSidebarMinimized]);
 
-  const { totalAssignedTickets } = useTicketsListener(user.id);
-  const { permissions } = usePermissions(user.id);
+	const { totalAssignedTickets } = useTicketsListener(user.id);
+	const { permissions } = usePermissions(user.id);
 
-  const entitiesAllowGeneration = useAllowedEntitiesSomePermissions(user, entities, [
-  	"generate_reading", "generate_listening", "generate_writing", "generate_speaking", "generate_level"
-  ])
+	const entitiesAllowGeneration = useAllowedEntitiesSomePermissions(user, entities, [
+		"generate_reading", "generate_listening", "generate_writing", "generate_speaking", "generate_level"
+	])
 
-  const logout = async () => {
-    axios.post("/api/logout").finally(() => {
-      setTimeout(() => router.reload(), 500);
-    });
-  };
+	const logout = async () => {
+		axios.post("/api/logout").finally(() => {
+			setTimeout(() => router.reload(), 500);
+		});
+	};
 
-  const disableNavigation = preventNavigation(navDisabled, focusMode);
+	const disableNavigation = preventNavigation(navDisabled, focusMode);
 
-  return (
-    <section
-      className={clsx(
-        "relative flex h-full flex-col justify-between bg-transparent px-4 py-4 pb-8",
-        isMinimized ? "w-fit" : "-xl:w-fit w-1/6",
-        className,
-      )}>
-      <div className="-xl:hidden flex-col gap-3 xl:flex">
-        <Nav disabled={disableNavigation} Icon={MdSpaceDashboard} label="Dashboard" path={path} keyPath="/dashboard" isMinimized={isMinimized} />
-        {checkAccess(user, ["student", "teacher", "developer"], permissions, "viewExams") && (
-          <Nav disabled={disableNavigation} Icon={BsFileEarmarkText} label="Exams" path={path} keyPath="/exam" isMinimized={isMinimized} />
-        )}
-        {checkAccess(user, getTypesOfUser(["agent"]), permissions, "viewStats") && (
-          <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="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} />
-        )}
-        {checkAccess(user, getTypesOfUser(["agent"]), permissions, "viewRecords") && (
-          <Nav disabled={disableNavigation} Icon={CiDumbbell} label="Training" path={path} keyPath="/training" isMinimized={isMinimized} />
-        )}
-        {checkAccess(user, ["admin", "developer", "agent", "corporate", "mastercorporate"], permissions, "viewPaymentRecords") && (
-          <Nav
-            disabled={disableNavigation}
-            Icon={BsCurrencyDollar}
-            label="Payment Record"
-            path={path}
-            keyPath="/payment-record"
-            isMinimized={isMinimized}
-          />
-        )}
-        {checkAccess(user, ["admin", "developer", "corporate", "teacher", "mastercorporate"]) && (
-          <Nav
-            disabled={disableNavigation}
-            Icon={BsShieldFill}
-            label="Settings"
-            path={path}
-            keyPath="/settings"
-            isMinimized={isMinimized}
-          />
-        )}
-        {checkAccess(user, ["admin", "developer", "agent"], permissions, "viewTickets") && (
-          <Nav
-            disabled={disableNavigation}
-            Icon={BsClipboardData}
-            label="Tickets"
-            path={path}
-            keyPath="/tickets"
-            isMinimized={isMinimized}
-            badge={totalAssignedTickets}
-          />
-        )}
-        {(entitiesAllowGeneration.length > 0 || isAdmin) && (
-          <Nav
-            disabled={disableNavigation}
-            Icon={BsCloudFill}
-            label="Generation"
-            path={path}
-            keyPath="/generation"
-            isMinimized={isMinimized}
-          />
-        )}
-      </div>
-      <div className="-xl:flex flex-col gap-3 xl:hidden">
-        <Nav disabled={disableNavigation} Icon={MdSpaceDashboard} label="Dashboard" path={path} keyPath="/" isMinimized />
-        <Nav disabled={disableNavigation} Icon={BsFileEarmarkText} label="Exams" path={path} keyPath="/exam" isMinimized />
-        {checkAccess(user, getTypesOfUser(["agent"]), permissions, "viewStats") && (
-          <Nav disabled={disableNavigation} Icon={BsGraphUp} label="Stats" path={path} keyPath="/stats" isMinimized />
-        )}
-        {checkAccess(user, getTypesOfUser(["agent"]), permissions, "viewRecords") && (
-          <Nav disabled={disableNavigation} Icon={BsClockHistory} label="Record" path={path} keyPath="/record" isMinimized />
-        )}
-        {checkAccess(user, getTypesOfUser(["agent"]), permissions, "viewRecords") && (
-          <Nav disabled={disableNavigation} Icon={CiDumbbell} label="Training" path={path} keyPath="/training" isMinimized />
-        )}
-        {checkAccess(user, getTypesOfUser(["student"])) && (
-          <Nav disabled={disableNavigation} Icon={BsShieldFill} label="Settings" path={path} keyPath="/settings" isMinimized />
-        )}
-        {entitiesAllowGeneration.length > 0 && (
-          <Nav
-            disabled={disableNavigation}
-            Icon={BsCloudFill}
-            label="Generation"
-            path={path}
-            keyPath="/generation"
-            isMinimized
-          />
-        )}
-      </div>
+	return (
+		<section
+			className={clsx(
+				"relative flex h-full flex-col justify-between bg-transparent px-4 py-4 pb-8",
+				isMinimized ? "w-fit" : "-xl:w-fit w-1/6",
+				className,
+			)}>
+			<div className="-xl:hidden flex-col gap-3 xl:flex">
+				<Nav disabled={disableNavigation} Icon={MdSpaceDashboard} label="Dashboard" path={path} keyPath="/dashboard" isMinimized={isMinimized} />
+				{checkAccess(user, ["student", "teacher", "developer"], permissions, "viewExams") && (
+					<Nav disabled={disableNavigation} Icon={BsFileEarmarkText} label="Practice" path={path} keyPath="/exam" isMinimized={isMinimized} />
+				)}
+				{checkAccess(user, getTypesOfUser(["agent"]), permissions, "viewStats") && (
+					<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="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} />
+				)}
+				{checkAccess(user, getTypesOfUser(["agent"]), permissions, "viewRecords") && (
+					<Nav disabled={disableNavigation} Icon={CiDumbbell} label="Training" path={path} keyPath="/training" isMinimized={isMinimized} />
+				)}
+				{checkAccess(user, ["admin", "developer", "agent", "corporate", "mastercorporate"], permissions, "viewPaymentRecords") && (
+					<Nav
+						disabled={disableNavigation}
+						Icon={BsCurrencyDollar}
+						label="Payment Record"
+						path={path}
+						keyPath="/payment-record"
+						isMinimized={isMinimized}
+					/>
+				)}
+				{checkAccess(user, ["admin", "developer", "corporate", "teacher", "mastercorporate"]) && (
+					<Nav
+						disabled={disableNavigation}
+						Icon={BsShieldFill}
+						label="Settings"
+						path={path}
+						keyPath="/settings"
+						isMinimized={isMinimized}
+					/>
+				)}
+				{checkAccess(user, ["admin", "developer", "agent"], permissions, "viewTickets") && (
+					<Nav
+						disabled={disableNavigation}
+						Icon={BsClipboardData}
+						label="Tickets"
+						path={path}
+						keyPath="/tickets"
+						isMinimized={isMinimized}
+						badge={totalAssignedTickets}
+					/>
+				)}
+				{(entitiesAllowGeneration.length > 0 || isAdmin) && (
+					<Nav
+						disabled={disableNavigation}
+						Icon={BsCloudFill}
+						label="Generation"
+						path={path}
+						keyPath="/generation"
+						isMinimized={isMinimized}
+					/>
+				)}
+			</div>
+			<div className="-xl:flex flex-col gap-3 xl:hidden">
+				<Nav disabled={disableNavigation} Icon={MdSpaceDashboard} label="Dashboard" path={path} keyPath="/" isMinimized />
+				<Nav disabled={disableNavigation} Icon={BsFileEarmarkText} label="Exams" path={path} keyPath="/exam" isMinimized />
+				{checkAccess(user, getTypesOfUser(["agent"]), permissions, "viewStats") && (
+					<Nav disabled={disableNavigation} Icon={BsGraphUp} label="Stats" path={path} keyPath="/stats" isMinimized />
+				)}
+				{checkAccess(user, getTypesOfUser(["agent"]), permissions, "viewRecords") && (
+					<Nav disabled={disableNavigation} Icon={BsClockHistory} label="Record" path={path} keyPath="/record" isMinimized />
+				)}
+				{checkAccess(user, getTypesOfUser(["agent"]), permissions, "viewRecords") && (
+					<Nav disabled={disableNavigation} Icon={CiDumbbell} label="Training" path={path} keyPath="/training" isMinimized />
+				)}
+				{checkAccess(user, getTypesOfUser(["student"])) && (
+					<Nav disabled={disableNavigation} Icon={BsShieldFill} label="Settings" path={path} keyPath="/settings" isMinimized />
+				)}
+				{entitiesAllowGeneration.length > 0 && (
+					<Nav
+						disabled={disableNavigation}
+						Icon={BsCloudFill}
+						label="Generation"
+						path={path}
+						keyPath="/generation"
+						isMinimized
+					/>
+				)}
+			</div>
 
-      <div className="2xl:fixed bottom-12 flex flex-col gap-0 -2xl:mt-8">
-        <div
-          role="button"
-          tabIndex={1}
-          onClick={toggleMinimize}
-          className={clsx(
-            "hover:text-mti-rose -xl:hidden flex cursor-pointer items-center gap-4 rounded-full p-4 text-black transition duration-300 ease-in-out",
-            isMinimized ? "w-fit" : "w-full min-w-[250px] px-8",
-          )}>
-          {isMinimized ? <BsChevronBarRight size={24} /> : <BsChevronBarLeft size={24} />}
-          {!isMinimized && <span className="text-lg font-medium">Minimize</span>}
-        </div>
-        <div
-          role="button"
-          tabIndex={1}
-          onClick={focusMode ? () => { } : logout}
-          className={clsx(
-            "hover:text-mti-rose flex cursor-pointer items-center gap-4 rounded-full p-4 text-black transition duration-300 ease-in-out",
-            isMinimized ? "w-fit" : "w-full min-w-[250px] px-8",
-          )}>
-          <RiLogoutBoxFill size={24} />
-          {!isMinimized && <span className="-xl:hidden text-lg font-medium">Log Out</span>}
-        </div>
-      </div>
-      {focusMode && <FocusLayer onFocusLayerMouseEnter={onFocusLayerMouseEnter} />}
-    </section>
-  );
+			<div className="2xl:fixed bottom-12 flex flex-col gap-0 -2xl:mt-8">
+				<div
+					role="button"
+					tabIndex={1}
+					onClick={toggleMinimize}
+					className={clsx(
+						"hover:text-mti-rose -xl:hidden flex cursor-pointer items-center gap-4 rounded-full p-4 text-black transition duration-300 ease-in-out",
+						isMinimized ? "w-fit" : "w-full min-w-[250px] px-8",
+					)}>
+					{isMinimized ? <BsChevronBarRight size={24} /> : <BsChevronBarLeft size={24} />}
+					{!isMinimized && <span className="text-lg font-medium">Minimize</span>}
+				</div>
+				<div
+					role="button"
+					tabIndex={1}
+					onClick={focusMode ? () => { } : logout}
+					className={clsx(
+						"hover:text-mti-rose flex cursor-pointer items-center gap-4 rounded-full p-4 text-black transition duration-300 ease-in-out",
+						isMinimized ? "w-fit" : "w-full min-w-[250px] px-8",
+					)}>
+					<RiLogoutBoxFill size={24} />
+					{!isMinimized && <span className="-xl:hidden text-lg font-medium">Log Out</span>}
+				</div>
+			</div>
+			{focusMode && <FocusLayer onFocusLayerMouseEnter={onFocusLayerMouseEnter} />}
+		</section>
+	);
 }