encoach_frontend/src/pages/(admin)/Lists/index.tsx

import {User} from "@/interfaces/user";
import {Tab, TabGroup, TabList, TabPanel, TabPanels} from "@headlessui/react";
import clsx from "clsx";
import CodeList from "./CodeList";
import DiscountList from "./DiscountList";
import ExamList from "./ExamList";
import GroupList from "./GroupList";
import PackageList from "./PackageList";
import UserList from "./UserList";
import {checkAccess} from "@/utils/permissions";
import usePermissions from "@/hooks/usePermissions";

export default function Lists({user}: {user: User}) {
	const {permissions} = usePermissions(user?.id || "");

	return (
		<TabGroup>
			<TabList className="flex space-x-1 rounded-xl bg-mti-purple-ultralight/40 p-1">
				<Tab
					className={({selected}) =>
						clsx(
							"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-mti-purple-light",
							"ring-white ring-opacity-60 ring-offset-2 ring-offset-mti-purple-light focus:outline-none focus:ring-2",
							"transition duration-300 ease-in-out",
							selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark",
						)
					}>
					User List
				</Tab>
				{checkAccess(user, ["developer", "admin", "corporate", "mastercorporate", "teacher"]) && (
					<Tab
						className={({selected}) =>
							clsx(
								"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-mti-purple-light",
								"ring-white ring-opacity-60 ring-offset-2 ring-offset-mti-purple-light focus:outline-none focus:ring-2",
								"transition duration-300 ease-in-out",
								selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark",
							)
						}>
						Exam List
					</Tab>
				)}
				<Tab
					className={({selected}) =>
						clsx(
							"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-mti-purple-light",
							"ring-white ring-opacity-60 ring-offset-2 ring-offset-mti-purple-light focus:outline-none focus:ring-2",
							"transition duration-300 ease-in-out",
							selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark",
						)
					}>
					Group List
				</Tab>
				{checkAccess(user, ["developer", "admin", "corporate"]) && (
					<Tab
						className={({selected}) =>
							clsx(
								"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-mti-purple-light",
								"ring-white ring-opacity-60 ring-offset-2 ring-offset-mti-purple-light focus:outline-none focus:ring-2",
								"transition duration-300 ease-in-out",
								selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark",
							)
						}>
						Code List
					</Tab>
				)}
				{checkAccess(user, ["developer", "admin"]) && (
					<Tab
						className={({selected}) =>
							clsx(
								"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-mti-purple-light",
								"ring-white ring-opacity-60 ring-offset-2 ring-offset-mti-purple-light focus:outline-none focus:ring-2",
								"transition duration-300 ease-in-out",
								selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark",
							)
						}>
						Package List
					</Tab>
				)}
				{checkAccess(user, ["developer", "admin"]) && (
					<Tab
						className={({selected}) =>
							clsx(
								"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-mti-purple-light",
								"ring-white ring-opacity-60 ring-offset-2 ring-offset-mti-purple-light focus:outline-none focus:ring-2",
								"transition duration-300 ease-in-out",
								selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark",
							)
						}>
						Discount List
					</Tab>
				)}
			</TabList>
			<TabPanels className="mt-2">
				<TabPanel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
					<UserList user={user} />
				</TabPanel>
				{checkAccess(user, ["developer", "admin", "corporate", "mastercorporate", "teacher"]) && (
					<TabPanel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
						<ExamList user={user} />
					</TabPanel>
				)}
				<TabPanel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
					<GroupList user={user} />
				</TabPanel>
				{checkAccess(user, ["developer", "admin", "corporate", "mastercorporate"], permissions, "viewCodes") && (
					<TabPanel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
						<CodeList user={user} />
					</TabPanel>
				)}
				{checkAccess(user, ["developer", "admin"]) && (
					<TabPanel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
						<PackageList user={user} />
					</TabPanel>
				)}
				{checkAccess(user, ["developer", "admin"]) && (
					<TabPanel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
						<DiscountList user={user} />
					</TabPanel>
				)}
			</TabPanels>
		</TabGroup>
	);
}