devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improved the overall stability and speed of the app

Browse Source
This commit is contained in:
Tiago Ribeiro
2024-08-29 23:21:20 +01:00
parent b57e11bec4
commit 39710aaea1
17 changed files with 315 additions and 280 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/pages/(admin)/BatchCodeGenerator.tsx
View File

@@ -55,7 +55,14 @@ const USER_TYPE_PERMISSIONS: {
},
};
export default function BatchCodeGenerator({user, onFinish}: {user: User; onFinish: () => void}) {
interface Props {
user: User;
users: User[];
permissions: PermissionType[];
onFinish: () => void;
}
export default function BatchCodeGenerator({user, users, permissions, onFinish}: Props) {
const [infos, setInfos] = useState<{email: string; name: string; passport_id: string}[]>([]);
const [isLoading, setIsLoading] = useState(false);
const [expiryDate, setExpiryDate] = useState<Date | null>(
@@ -65,9 +72,6 @@ export default function BatchCodeGenerator({user, onFinish}: {user: User; onFini
const [type, setType] = useState<Type>("student");
const [showHelp, setShowHelp] = useState(false);
const {users} = useUsers();
const {permissions} = usePermissions(user?.id || "");
const {openFilePicker, filesContent, clear} = useFilePicker({
accept: ".xlsx",
multiple: false,

12
src/pages/(admin)/BatchCreateUser.tsx
View File

@@ -61,7 +61,14 @@ const USER_TYPE_PERMISSIONS: {
},
};
export default function BatchCreateUser({user, onFinish}: {user: User; onFinish: () => void}) {
interface Props {
user: User;
users: User[];
permissions: PermissionType[];
onFinish: () => void;
}
export default function BatchCreateUser({user, users, permissions, onFinish}: Props) {
const [infos, setInfos] = useState<
{
email: string;
@@ -83,9 +90,6 @@ export default function BatchCreateUser({user, onFinish}: {user: User; onFinish:
const [type, setType] = useState<Type>("student");
const [showHelp, setShowHelp] = useState(false);
const {users} = useUsers();
const {permissions} = usePermissions(user?.id || "");
const {openFilePicker, filesContent, clear} = useFilePicker({
accept: ".xlsx",
multiple: false,

9
src/pages/(admin)/CodeGenerator.tsx
View File

@@ -48,14 +48,19 @@ const USER_TYPE_PERMISSIONS: {
},
};
export default function CodeGenerator({user, onFinish}: {user: User; onFinish: () => void}) {
interface Props {
user: User;
permissions: PermissionType[];
onFinish: () => void;
}
export default function CodeGenerator({user, permissions, onFinish}: Props) {
const [generatedCode, setGeneratedCode] = useState<string>();
const [expiryDate, setExpiryDate] = useState<Date | null>(
user?.subscriptionExpirationDate ? moment(user.subscriptionExpirationDate).toDate() : null,
);
const [isExpiryDateEnabled, setIsExpiryDateEnabled] = useState(true);
const [type, setType] = useState<Type>("student");
const {permissions} = usePermissions(user?.id || "");
useEffect(() => {
if (!isExpiryDateEnabled) setExpiryDate(null);

9
src/pages/(admin)/Lists/index.tsx
View File

@@ -9,10 +9,15 @@ import PackageList from "./PackageList";
import UserList from "./UserList";
import {checkAccess} from "@/utils/permissions";
import usePermissions from "@/hooks/usePermissions";
import {PermissionType} from "@/interfaces/permissions";
export default function Lists({user}: {user: User}) {
const {permissions} = usePermissions(user?.id || "");
interface Props {
user: User;
users: User[];
permissions: PermissionType[];
}
export default function Lists({user, users, permissions}: Props) {
return (
<TabGroup>
<TabList className="flex space-x-1 rounded-xl bg-mti-purple-ultralight/40 p-1">

11
src/pages/(admin)/UserCreator.tsx
View File

@@ -54,7 +54,14 @@ const USER_TYPE_PERMISSIONS: {
},
};
export default function UserCreator({user, onFinish}: {user: User; onFinish: () => void}) {
interface Props {
user: User;
users: User[];
permissions: PermissionType[];
onFinish: () => void;
}
export default function UserCreator({user, users, permissions, onFinish}: Props) {
const [name, setName] = useState<string>();
const [email, setEmail] = useState<string>();
const [phone, setPhone] = useState<string>();
@@ -74,9 +81,7 @@ export default function UserCreator({user, onFinish}: {user: User; onFinish: ()
const [type, setType] = useState<Type>("student");
const [position, setPosition] = useState<string>();
const {permissions} = usePermissions(user?.id || "");
const {groups} = useGroups({admin: ["developer", "admin"].includes(user?.type) ? undefined : user?.id, userType: user?.type});
const {users} = useUsers();
useEffect(() => {
if (!isExpiryDateEnabled) setExpiryDate(null);

6
src/pages/(exam)/ExamPage.tsx
View File

@@ -13,7 +13,7 @@ import Speaking from "@/exams/Speaking";
import Writing from "@/exams/Writing";
import useUser from "@/hooks/useUser";
import {Exam, LevelExam, UserSolution, Variant} from "@/interfaces/exam";
import {Stat} from "@/interfaces/user";
import {Stat, User} from "@/interfaces/user";
import useExamStore from "@/stores/examStore";
import {evaluateSpeakingAnswer, evaluateWritingAnswer} from "@/utils/evaluation";
import {defaultExamUserSolutions, getExam} from "@/utils/exams";
@@ -28,9 +28,10 @@ import useGradingSystem from "@/hooks/useGrading";
interface Props {
page: "exams" | "exercises";
user: User;
}
export default function ExamPage({page}: Props) {
export default function ExamPage({page, user}: Props) {
const [variant, setVariant] = useState<Variant>("full");
const [avoidRepeated, setAvoidRepeated] = useState(false);
const [hasBeenUploaded, setHasBeenUploaded] = useState(false);
@@ -59,7 +60,6 @@ export default function ExamPage({page}: Props) {
const {bgColor, setBgColor} = useExamStore((state) => state);
const setShuffleMaps = useExamStore((state) => state.setShuffles);
const {user} = useUser({redirectTo: "/login"});
const router = useRouter();
// eslint-disable-next-line react-hooks/exhaustive-deps

13
src/pages/exam.tsx
View File

@@ -5,6 +5,7 @@ import {sessionOptions} from "@/lib/session";
import {shouldRedirectHome} from "@/utils/navigation.disabled";
import ExamPage from "./(exam)/ExamPage";
import Head from "next/head";
import {User} from "@/interfaces/user";
export const getServerSideProps = withIronSessionSsr(({req, res}) => {
const user = req.session.user;
@@ -14,7 +15,7 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
redirect: {
destination: "/login",
permanent: false,
}
},
};
}
@@ -23,7 +24,7 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
redirect: {
destination: "/",
permanent: false,
}
},
};
}
@@ -32,7 +33,11 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
};
}, sessionOptions);
export default function Page() {
interface Props {
user: User;
}
export default function Page({user}: Props) {
return (
<>
<Head>
@@ -44,7 +49,7 @@ export default function Page() {
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
</Head>
<ExamPage page="exams" />
<ExamPage page="exams" user={user} />
</>
);
}

13
src/pages/exercises.tsx
View File

@@ -5,6 +5,7 @@ import {sessionOptions} from "@/lib/session";
import {shouldRedirectHome} from "@/utils/navigation.disabled";
import ExamPage from "./(exam)/ExamPage";
import Head from "next/head";
import {User} from "@/interfaces/user";
export const getServerSideProps = withIronSessionSsr(({req, res}) => {
const user = req.session.user;
@@ -14,7 +15,7 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
redirect: {
destination: "/login",
permanent: false,
}
},
};
}
@@ -23,7 +24,7 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
redirect: {
destination: "/",
permanent: false,
}
},
};
}
@@ -32,7 +33,11 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
};
}, sessionOptions);
export default function Page() {
interface Props {
user: User;
}
export default function Page({user}: Props) {
return (
<>
<Head>
@@ -44,7 +49,7 @@ export default function Page() {
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
</Head>
<ExamPage page="exercises" />
<ExamPage page="exercises" user={user} />
</>
);
}

9
src/pages/generation.tsx
View File

@@ -22,6 +22,7 @@ import WritingGeneration from "./(generation)/WritingGeneration";
import LevelGeneration from "./(generation)/LevelGeneration";
import SpeakingGeneration from "./(generation)/SpeakingGeneration";
import {checkAccess} from "@/utils/permissions";
import {User} from "@/interfaces/user";
export const getServerSideProps = withIronSessionSsr(({req, res}) => {
const user = req.session.user;
@@ -49,10 +50,12 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
};
}, sessionOptions);
export default function Generation() {
const [module, setModule] = useState<Module>("reading");
interface Props {
user: User;
}
const {user} = useUser({redirectTo: "/login"});
export default function Generation({user}: Props) {
const [module, setModule] = useState<Module>("reading");
const [title, setTitle] = useState<string>("");
return (

26
src/pages/groups.tsx
View File

@@ -29,7 +29,7 @@ import MasterCorporateDashboard from "@/dashboards/MasterCorporate";
import PaymentDue from "./(status)/PaymentDue";
import {useRouter} from "next/router";
import {PayPalScriptProvider} from "@paypal/react-paypal-js";
import {CorporateUser, MasterCorporateUser, Type, User, userTypes} from "@/interfaces/user";
import {CorporateUser, Group, MasterCorporateUser, Type, User, userTypes} from "@/interfaces/user";
import Select from "react-select";
import {USER_TYPE_LABELS} from "@/resources/user";
import {checkAccess, getTypesOfUser} from "@/utils/permissions";
@@ -37,8 +37,10 @@ import {shouldRedirectHome} from "@/utils/navigation.disabled";
import useGroups from "@/hooks/useGroups";
import useUsers from "@/hooks/useUsers";
import {getUserName} from "@/utils/users";
import {getParticipantGroups, getUserGroups} from "@/utils/groups.be";
import {getUsers} from "@/utils/users.be";
export const getServerSideProps = withIronSessionSsr(({req, res}) => {
export const getServerSideProps = withIronSessionSsr(async ({req, res}) => {
const user = req.session.user;
if (!user || !user.isVerified) {
@@ -59,26 +61,20 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
};
}
const groups = await getParticipantGroups(user.id);
const users = await getUsers();
return {
props: {user: req.session.user},
props: {user, groups, users},
};
}, sessionOptions);
interface Props {
user: User;
envVariables: {[key: string]: string};
groups: Group[];
users: User[];
}
export default function Home(props: Props) {
const {user, mutateUser} = useUser({redirectTo: "/login"});
const {groups} = useGroups({});
const {users} = useUsers();
const router = useRouter();
useEffect(() => {
console.log(groups);
}, [groups]);
export default function Home({user, groups, users}: Props) {
return (
<>
<Head>

32
src/pages/profile.tsx
View File

@@ -12,7 +12,16 @@ import Link from "next/link";
import axios from "axios";
import {ErrorMessage} from "@/constants/errors";
import clsx from "clsx";
import {CorporateUser, EmploymentStatus, EMPLOYMENT_STATUS, Gender, User, DemographicInformation, MasterCorporateUser} from "@/interfaces/user";
import {
CorporateUser,
EmploymentStatus,
EMPLOYMENT_STATUS,
Gender,
User,
DemographicInformation,
MasterCorporateUser,
Group,
} from "@/interfaces/user";
import CountrySelect from "@/components/Low/CountrySelect";
import {shouldRedirectHome} from "@/utils/navigation.disabled";
import moment from "moment";
@@ -34,8 +43,9 @@ import {capitalize} from "lodash";
import TopicModal from "@/components/Medium/TopicModal";
import {v4} from "uuid";
import {checkAccess, getTypesOfUser} from "@/utils/permissions";
import {getUserCorporate} from "@/utils/groups.be";
import {getParticipantGroups, getUserCorporate} from "@/utils/groups.be";
import {InferGetServerSidePropsType} from "next";
import {getUsers} from "@/utils/users.be";
export const getServerSideProps = withIronSessionSsr(async ({req, res}) => {
const user = req.session.user;
@@ -59,19 +69,26 @@ export const getServerSideProps = withIronSessionSsr(async ({req, res}) => {
}
return {
props: {user, linkedCorporate: (await getUserCorporate(user.id)) || null},
props: {
user,
linkedCorporate: (await getUserCorporate(user.id)) || null,
groups: await getParticipantGroups(user.id),
users: await getUsers(),
},
};
}, sessionOptions);
interface Props {
user: User;
groups: Group[];
users: User[];
mutateUser: Function;
linkedCorporate?: CorporateUser | MasterCorporateUser;
}
const DoubleColumnRow = ({children}: {children: ReactNode}) => <div className="flex flex-col lg:flex-row gap-8 w-full">{children}</div>;
function UserProfile({user, mutateUser, linkedCorporate}: Props) {
function UserProfile({user, mutateUser, linkedCorporate, groups, users}: Props) {
const [bio, setBio] = useState(user.bio || "");
const [name, setName] = useState(user.name || "");
const [email, setEmail] = useState(user.email || "");
@@ -114,9 +131,6 @@ function UserProfile({user, mutateUser, linkedCorporate}: Props) {
const [isPreferredTopicsOpen, setIsPreferredTopicsOpen] = useState(false);
const {groups} = useGroups({});
const {users} = useUsers();
const profilePictureInput = useRef(null);
const expirationDateColor = (date: Date) => {
const momentDate = moment(date);
@@ -643,7 +657,7 @@ function UserProfile({user, mutateUser, linkedCorporate}: Props) {
);
}
export default function Home({linkedCorporate}: {linkedCorporate?: CorporateUser | MasterCorporateUser}) {
export default function Home(props: {linkedCorporate?: CorporateUser | MasterCorporateUser; groups: Group[]; users: User[]}) {
const {user, mutateUser} = useUser({redirectTo: "/login"});
return (
@@ -658,7 +672,7 @@ export default function Home({linkedCorporate}: {linkedCorporate?: CorporateUser
<link rel="icon" href="/favicon.ico" />
</Head>
<ToastContainer />
{user && <UserProfile linkedCorporate={linkedCorporate} user={user} mutateUser={mutateUser} />}
{user && <UserProfile user={user} mutateUser={mutateUser} {...props} />}
</>
);
}

55
src/pages/record.tsx
View File

@@ -1,28 +1,31 @@
/* eslint-disable @next/next/no-img-element */
import Head from "next/head";
import { withIronSessionSsr } from "iron-session/next";
import { sessionOptions } from "@/lib/session";
import { Stat, User } from "@/interfaces/user";
import { useEffect, useRef, useState } from "react";
import {withIronSessionSsr} from "iron-session/next";
import {sessionOptions} from "@/lib/session";
import {Stat, User} from "@/interfaces/user";
import {useEffect, useRef, useState} from "react";
import useFilterRecordsByUser from "@/hooks/useFilterRecordsByUser";
import { groupByDate } from "@/utils/stats";
import {groupByDate} from "@/utils/stats";
import moment from "moment";
import useUsers from "@/hooks/useUsers";
import useExamStore from "@/stores/examStore";
import { ToastContainer } from "react-toastify";
import {ToastContainer} from "react-toastify";
import Layout from "@/components/High/Layout";
import clsx from "clsx";
import { shouldRedirectHome } from "@/utils/navigation.disabled";
import {shouldRedirectHome} from "@/utils/navigation.disabled";
import useAssignments from "@/hooks/useAssignments";
import { uuidv4 } from "@firebase/util";
import { usePDFDownload } from "@/hooks/usePDFDownload";
import {uuidv4} from "@firebase/util";
import {usePDFDownload} from "@/hooks/usePDFDownload";
import useRecordStore from "@/stores/recordStore";
import StatsGridItem from "@/components/Medium/StatGridItem";
import RecordFilter from "@/components/Medium/RecordFilter";
import { useRouter } from "next/router";
import {useRouter} from "next/router";
import useTrainingContentStore from "@/stores/trainingContentStore";
import {Assignment} from "@/interfaces/results";
import {getUsers} from "@/utils/users.be";
import {getAssignments, getAssignmentsByAssigner} from "@/utils/assignments.be";
export const getServerSideProps = withIronSessionSsr(({ req, res }) => {
export const getServerSideProps = withIronSessionSsr(async ({req, res}) => {
const user = req.session.user;
if (!user || !user.isVerified) {
@@ -43,14 +46,23 @@ export const getServerSideProps = withIronSessionSsr(({ req, res }) => {
};
}
const users = await getUsers();
const assignments = await getAssignments();
return {
props: { user: req.session.user },
props: {user, users, assignments},
};
}, sessionOptions);
type Filter = "months" | "weeks" | "days" | "assignments" | undefined;
export default function History({ user }: { user: User }) {
interface Props {
user: User;
users: User[];
assignments: Assignment[];
}
export default function History({user, users, assignments}: Props) {
const router = useRouter();
const [statsUserId, setStatsUserId, training, setTraining] = useRecordStore((state) => [
state.selectedUser,
@@ -60,12 +72,10 @@ export default function History({ user }: { user: User }) {
]);
// const [statsUserId, setStatsUserId] = useState<string | undefined>(user.id);
const [groupedStats, setGroupedStats] = useState<{ [key: string]: Stat[] }>();
const [groupedStats, setGroupedStats] = useState<{[key: string]: Stat[]}>();
const [filter, setFilter] = useState<Filter>();
const { assignments } = useAssignments({});
const { users } = useUsers();
const { data: stats, isLoading: isStatsLoading } = useFilterRecordsByUser<Stat[]>(statsUserId || user?.id);
const {data: stats, isLoading: isStatsLoading} = useFilterRecordsByUser<Stat[]>(statsUserId || user?.id);
const setExams = useExamStore((state) => state.setExams);
const setShowSolutions = useExamStore((state) => state.setShowSolutions);
@@ -100,12 +110,12 @@ export default function History({ user }: { user: User }) {
// if (!statsUserId) setStatsUserId(user.id);
// }, []);
const filterStatsByDate = (stats: { [key: string]: Stat[] }) => {
const filterStatsByDate = (stats: {[key: string]: Stat[]}) => {
if (filter && filter !== "assignments") {
const filterDate = moment()
.subtract({ [filter as string]: 1 })
.subtract({[filter as string]: 1})
.format("x");
const filteredStats: { [key: string]: Stat[] } = {};
const filteredStats: {[key: string]: Stat[]} = {};
Object.keys(stats).forEach((timestamp) => {
if (timestamp >= filterDate) filteredStats[timestamp] = stats[timestamp];
@@ -114,7 +124,7 @@ export default function History({ user }: { user: User }) {
}
if (filter && filter === "assignments") {
const filteredStats: { [key: string]: Stat[] } = {};
const filteredStats: {[key: string]: Stat[]} = {};
Object.keys(stats).forEach((timestamp) => {
if (stats[timestamp].map((s) => s.assignment === undefined).includes(false))
@@ -127,7 +137,6 @@ export default function History({ user }: { user: User }) {
return stats;
};
const MAX_TRAINING_EXAMS = 10;
const [selectedTrainingExams, setSelectedTrainingExams] = useState<string[]>([]);
const setTrainingStats = useTrainingContentStore((state) => state.setStats);
@@ -200,7 +209,7 @@ export default function History({ user }: { user: User }) {
<ToastContainer />
{user && (
<Layout user={user}>
<RecordFilter user={user} filterState={{ filter: filter, setFilter: setFilter }} >
<RecordFilter user={user} filterState={{filter: filter, setFilter: setFilter}}>
{training && (
<div className="flex flex-row">
<div className="font-semibold text-2xl mr-4">

159
src/pages/settings.tsx
View File

@@ -24,8 +24,12 @@ import UserCreator from "./(admin)/UserCreator";
import CorporateGradingSystem from "./(admin)/CorporateGradingSystem";
import useGradingSystem from "@/hooks/useGrading";
import {CEFR_STEPS} from "@/resources/grading";
import {User} from "@/interfaces/user";
import {getUserPermissions} from "@/utils/permissions.be";
import {Permission, PermissionType} from "@/interfaces/permissions";
import {getUsers} from "@/utils/users.be";
export const getServerSideProps = withIronSessionSsr(({req, res}) => {
export const getServerSideProps = withIronSessionSsr(async ({req, res}) => {
const user = req.session.user;
if (!user || !user.isVerified) {
return {
@@ -45,14 +49,21 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
};
}
const permissions = await getUserPermissions(user.id);
const users = await getUsers();
return {
props: {user: req.session.user},
props: {user, permissions, users},
};
}, sessionOptions);
export default function Admin() {
const {user} = useUser({redirectTo: "/login"});
const {permissions} = usePermissions(user?.id || "");
interface Props {
user: User;
users: User[];
permissions: PermissionType[];
}
export default function Admin({user, users, permissions}: Props) {
const {gradingSystem, mutate} = useGradingSystem();
const [modalOpen, setModalOpen] = useState<string>();
@@ -69,80 +80,78 @@ export default function Admin() {
<link rel="icon" href="/favicon.ico" />
</Head>
<ToastContainer />
{user && (
<Layout user={user} className="gap-6">
<Modal isOpen={modalOpen === "batchCreateUser"} onClose={() => setModalOpen(undefined)}>
<BatchCreateUser user={user} onFinish={() => setModalOpen(undefined)} />
</Modal>
<Modal isOpen={modalOpen === "batchCreateCode"} onClose={() => setModalOpen(undefined)}>
<BatchCodeGenerator user={user} onFinish={() => setModalOpen(undefined)} />
</Modal>
<Modal isOpen={modalOpen === "createCode"} onClose={() => setModalOpen(undefined)}>
<CodeGenerator user={user} onFinish={() => setModalOpen(undefined)} />
</Modal>
<Modal isOpen={modalOpen === "createUser"} onClose={() => setModalOpen(undefined)}>
<UserCreator user={user} onFinish={() => setModalOpen(undefined)} />
</Modal>
<Modal isOpen={modalOpen === "gradingSystem"} onClose={() => setModalOpen(undefined)}>
<CorporateGradingSystem
user={user}
defaultSteps={gradingSystem?.steps || CEFR_STEPS}
mutate={(steps) => {
mutate({user: user.id, steps});
setModalOpen(undefined);
}}
/>
</Modal>
<Layout user={user} className="gap-6">
<Modal isOpen={modalOpen === "batchCreateUser"} onClose={() => setModalOpen(undefined)}>
<BatchCreateUser user={user} users={users} permissions={permissions} onFinish={() => setModalOpen(undefined)} />
</Modal>
<Modal isOpen={modalOpen === "batchCreateCode"} onClose={() => setModalOpen(undefined)}>
<BatchCodeGenerator user={user} users={users} permissions={permissions} onFinish={() => setModalOpen(undefined)} />
</Modal>
<Modal isOpen={modalOpen === "createCode"} onClose={() => setModalOpen(undefined)}>
<CodeGenerator user={user} permissions={permissions} onFinish={() => setModalOpen(undefined)} />
</Modal>
<Modal isOpen={modalOpen === "createUser"} onClose={() => setModalOpen(undefined)}>
<UserCreator user={user} users={users} permissions={permissions} onFinish={() => setModalOpen(undefined)} />
</Modal>
<Modal isOpen={modalOpen === "gradingSystem"} onClose={() => setModalOpen(undefined)}>
<CorporateGradingSystem
user={user}
defaultSteps={gradingSystem?.steps || CEFR_STEPS}
mutate={(steps) => {
mutate({user: user.id, steps});
setModalOpen(undefined);
}}
/>
</Modal>
<section className="w-full grid grid-cols-2 -md:grid-cols-1 gap-8">
<ExamLoader />
{checkAccess(user, getTypesOfUser(["teacher"]), permissions, "viewCodes") && (
<div className="w-full grid grid-cols-2 gap-4">
<section className="w-full grid grid-cols-2 -md:grid-cols-1 gap-8">
<ExamLoader />
{checkAccess(user, getTypesOfUser(["teacher"]), permissions, "viewCodes") && (
<div className="w-full grid grid-cols-2 gap-4">
<IconCard
Icon={BsCode}
label="Generate Single Code"
color="purple"
className="w-full h-full"
onClick={() => setModalOpen("createCode")}
/>
<IconCard
Icon={BsCodeSquare}
label="Generate Codes in Batch"
color="purple"
className="w-full h-full"
onClick={() => setModalOpen("batchCreateCode")}
/>
<IconCard
Icon={BsPersonFill}
label="Create Single User"
color="purple"
className="w-full h-full"
onClick={() => setModalOpen("createUser")}
/>
<IconCard
Icon={BsPeopleFill}
label="Create Users in Batch"
color="purple"
className="w-full h-full"
onClick={() => setModalOpen("batchCreateUser")}
/>
{checkAccess(user, ["admin", "corporate", "developer", "mastercorporate"]) && (
<IconCard
Icon={BsCode}
label="Generate Single Code"
Icon={BsGearFill}
label="Grading System"
color="purple"
className="w-full h-full"
onClick={() => setModalOpen("createCode")}
className="w-full h-full col-span-2"
onClick={() => setModalOpen("gradingSystem")}
/>
<IconCard
Icon={BsCodeSquare}
label="Generate Codes in Batch"
color="purple"
className="w-full h-full"
onClick={() => setModalOpen("batchCreateCode")}
/>
<IconCard
Icon={BsPersonFill}
label="Create Single User"
color="purple"
className="w-full h-full"
onClick={() => setModalOpen("createUser")}
/>
<IconCard
Icon={BsPeopleFill}
label="Create Users in Batch"
color="purple"
className="w-full h-full"
onClick={() => setModalOpen("batchCreateUser")}
/>
{checkAccess(user, ["admin", "corporate", "developer", "mastercorporate"]) && (
<IconCard
Icon={BsGearFill}
label="Grading System"
color="purple"
className="w-full h-full col-span-2"
onClick={() => setModalOpen("gradingSystem")}
/>
)}
</div>
)}
</section>
<section className="w-full">
<Lists user={user} />
</section>
</Layout>
)}
)}
</div>
)}
</section>
<section className="w-full">
<Lists user={user} users={users} permissions={permissions} />
</section>
</Layout>
</>
);
}