125 lines
4.9 KiB
TypeScript
125 lines
4.9 KiB
TypeScript
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 PackageList from "./PackageList";
|
|
import UserList from "./UserList";
|
|
import { checkAccess } from "@/utils/permissions";
|
|
import { PermissionType } from "@/interfaces/permissions";
|
|
import { EntityWithRoles } from "@/interfaces/entity";
|
|
import { useAllowedEntities, useAllowedEntitiesSomePermissions } from "@/hooks/useEntityPermissions";
|
|
import { useMemo } from "react";
|
|
|
|
interface Props {
|
|
user: User;
|
|
entities: EntityWithRoles[]
|
|
permissions: PermissionType[];
|
|
}
|
|
|
|
export default function Lists({ user, entities = [], permissions }: Props) {
|
|
const entitiesViewCodes = useAllowedEntities(user, entities, 'view_code_list')
|
|
const entitiesDeleteCodes = useAllowedEntities(user, entities, 'delete_code')
|
|
const entitiesViewExams = useAllowedEntitiesSomePermissions(user, entities, [
|
|
'view_reading', 'view_listening', 'view_writing', 'view_speaking', 'view_level'
|
|
])
|
|
|
|
const canViewExams = useMemo(() => entitiesViewExams.length > 0, [entitiesViewExams])
|
|
|
|
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>
|
|
{canViewExams && (
|
|
<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>
|
|
)}
|
|
{checkAccess(user, ["developer", "admin", "corporate", "mastercorporate"]) && entitiesViewCodes.length > 0 && (
|
|
<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>
|
|
{canViewExams && (
|
|
<TabPanel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
|
|
<ExamList user={user} entities={entities} />
|
|
</TabPanel>
|
|
)}
|
|
{checkAccess(user, ["developer", "admin", "corporate", "mastercorporate"]) && entitiesViewCodes.length > 0 && (
|
|
<TabPanel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
|
|
<CodeList user={user} entities={entitiesViewCodes} canDeleteCodes={entitiesDeleteCodes.length > 0} />
|
|
</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>
|
|
);
|
|
}
|