Merge branch 'develop' of https://bitbucket.org/ecropdev/ielts-ui into feature/level-file-upload

src/components/High/TicketDisplay.tsx

@@ -1,255 +1,179 @@
 import useUsers from "@/hooks/useUsers";
-import {
-  Ticket,
-  TicketStatus,
-  TicketStatusLabel,
-  TicketType,
-  TicketTypeLabel,
-} from "@/interfaces/ticket";
-import { User } from "@/interfaces/user";
-import { USER_TYPE_LABELS } from "@/resources/user";
+import {Ticket, TicketStatus, TicketStatusLabel, TicketType, TicketTypeLabel} from "@/interfaces/ticket";
+import {User} from "@/interfaces/user";
+import {USER_TYPE_LABELS} from "@/resources/user";
 import axios from "axios";
 import moment from "moment";
-import { useState } from "react";
-import { toast } from "react-toastify";
+import {useState} from "react";
+import {toast} from "react-toastify";
 import ShortUniqueId from "short-unique-id";
 import Button from "../Low/Button";
 import Input from "../Low/Input";
 import Select from "../Low/Select";
-import { checkAccess } from "@/utils/permissions";
+import {checkAccess} from "@/utils/permissions";
 
 interface Props {
-  user: User;
-  ticket: Ticket;
-  onClose: () => void;
+	user: User;
+	ticket: Ticket;
+	onClose: () => void;
 }
 
-export default function TicketDisplay({ user, ticket, onClose }: Props) {
-  const [subject] = useState(ticket.subject);
-  const [type, setType] = useState<TicketType>(ticket.type);
-  const [description] = useState(ticket.description);
-  const [reporter] = useState(ticket.reporter);
-  const [reportedFrom] = useState(ticket.reportedFrom);
-  const [status, setStatus] = useState(ticket.status);
-  const [assignedTo, setAssignedTo] = useState<string | null>(
-    ticket.assignedTo || null,
-  );
-  const [isLoading, setIsLoading] = useState(false);
+export default function TicketDisplay({user, ticket, onClose}: Props) {
+	const [subject] = useState(ticket.subject);
+	const [type, setType] = useState<TicketType>(ticket.type);
+	const [description] = useState(ticket.description);
+	const [reporter] = useState(ticket.reporter);
+	const [reportedFrom] = useState(ticket.reportedFrom);
+	const [status, setStatus] = useState(ticket.status);
+	const [assignedTo, setAssignedTo] = useState<string | null>(ticket.assignedTo || null);
+	const [isLoading, setIsLoading] = useState(false);
 
-  const { users } = useUsers();
+	const {users} = useUsers();
 
-  const submit = () => {
-    if (!type)
-      return toast.error("Please choose a type!", { toastId: "missing-type" });
+	const submit = () => {
+		if (!type) return toast.error("Please choose a type!", {toastId: "missing-type"});
 
-    setIsLoading(true);
-    axios
-      .patch(`/api/tickets/${ticket.id}`, {
-        subject,
-        type,
-        description,
-        reporter,
-        reportedFrom,
-        status,
-        assignedTo,
-      })
-      .then(() => {
-        toast.success(`The ticket has been updated!`, { toastId: "submitted" });
-        onClose();
-      })
-      .catch((e) => {
-        console.error(e);
-        toast.error("Something went wrong, please try again later!", {
-          toastId: "error",
-        });
-      })
-      .finally(() => setIsLoading(false));
-  };
+		setIsLoading(true);
+		axios
+			.patch(`/api/tickets/${ticket.id}`, {
+				subject,
+				type,
+				description,
+				reporter,
+				reportedFrom,
+				status,
+				assignedTo,
+			})
+			.then(() => {
+				toast.success(`The ticket has been updated!`, {toastId: "submitted"});
+				onClose();
+			})
+			.catch((e) => {
+				console.error(e);
+				toast.error("Something went wrong, please try again later!", {
+					toastId: "error",
+				});
+			})
+			.finally(() => setIsLoading(false));
+	};
 
-  const del = () => {
-    if (!confirm("Are you sure you want to delete this ticket?")) return;
+	const del = () => {
+		if (!confirm("Are you sure you want to delete this ticket?")) return;
 
-    setIsLoading(true);
-    axios
-      .delete(`/api/tickets/${ticket.id}`)
-      .then(() => {
-        toast.success(`The ticket has been deleted!`, { toastId: "submitted" });
-        onClose();
-      })
-      .catch((e) => {
-        console.error(e);
-        toast.error("Something went wrong, please try again later!", {
-          toastId: "error",
-        });
-      })
-      .finally(() => setIsLoading(false));
-  };
+		setIsLoading(true);
+		axios
+			.delete(`/api/tickets/${ticket.id}`)
+			.then(() => {
+				toast.success(`The ticket has been deleted!`, {toastId: "submitted"});
+				onClose();
+			})
+			.catch((e) => {
+				console.error(e);
+				toast.error("Something went wrong, please try again later!", {
+					toastId: "error",
+				});
+			})
+			.finally(() => setIsLoading(false));
+	};
 
-  return (
-    <form className="flex flex-col gap-4 pt-8">
-      <Input
-        label="Subject"
-        type="text"
-        name="subject"
-        placeholder="Subject..."
-        value={subject}
-        onChange={(e) => null}
-        disabled
-      />
+	return (
+		<form className="flex flex-col gap-4 pt-8">
+			<Input label="Subject" type="text" name="subject" placeholder="Subject..." value={subject} onChange={(e) => null} disabled />
 
-      <div className="-md:flex-col flex w-full items-center gap-4">
-        <div className="flex w-full flex-col gap-3">
-          <label className="text-mti-gray-dim text-base font-normal">
-            Status
-          </label>
-          <Select
-            options={Object.keys(TicketStatusLabel).map((x) => ({
-              value: x,
-              label: TicketStatusLabel[x as keyof typeof TicketStatusLabel],
-            }))}
-            value={{ value: status, label: TicketStatusLabel[status] }}
-            onChange={(value) =>
-              setStatus((value?.value as TicketStatus) ?? undefined)
-            }
-            placeholder="Status..."
-          />
-        </div>
-        <div className="flex w-full flex-col gap-3">
-          <label className="text-mti-gray-dim text-base font-normal">
-            Type
-          </label>
-          <Select
-            options={Object.keys(TicketTypeLabel).map((x) => ({
-              value: x,
-              label: TicketTypeLabel[x as keyof typeof TicketTypeLabel],
-            }))}
-            value={{ value: type, label: TicketTypeLabel[type] }}
-            onChange={(value) => setType(value!.value as TicketType)}
-            placeholder="Type..."
-          />
-        </div>
-      </div>
+			<div className="-md:flex-col flex w-full items-center gap-4">
+				<div className="flex w-full flex-col gap-3">
+					<label className="text-mti-gray-dim text-base font-normal">Status</label>
+					<Select
+						options={Object.keys(TicketStatusLabel).map((x) => ({
+							value: x,
+							label: TicketStatusLabel[x as keyof typeof TicketStatusLabel],
+						}))}
+						value={{value: status, label: TicketStatusLabel[status]}}
+						onChange={(value) => setStatus((value?.value as TicketStatus) ?? undefined)}
+						placeholder="Status..."
+					/>
+				</div>
+				<div className="flex w-full flex-col gap-3">
+					<label className="text-mti-gray-dim text-base font-normal">Type</label>
+					<Select
+						options={Object.keys(TicketTypeLabel).map((x) => ({
+							value: x,
+							label: TicketTypeLabel[x as keyof typeof TicketTypeLabel],
+						}))}
+						value={{value: type, label: TicketTypeLabel[type]}}
+						onChange={(value) => setType(value!.value as TicketType)}
+						placeholder="Type..."
+					/>
+				</div>
+			</div>
 
-      <div className="flex w-full flex-col gap-3">
-        <label className="text-mti-gray-dim text-base font-normal">
-          Assignee
-        </label>
-        <Select
-          options={[
-            { value: "me", label: "Assign to me" },
-            ...users
-              .filter((x) => checkAccess(x, ["admin", "developer", "agent"]))
-              .map((u) => ({
-                value: u.id,
-                label: `${u.name} - ${u.email}`,
-              })),
-          ]}
-          disabled={checkAccess(user, ["agent"])}
-          value={
-            assignedTo
-              ? {
-                  value: assignedTo,
-                  label: `${users.find((u) => u.id === assignedTo)?.name} - ${users.find((u) => u.id === assignedTo)?.email}`,
-                }
-              : null
-          }
-          onChange={(value) =>
-            value
-              ? setAssignedTo(value.value === "me" ? user.id : value.value)
-              : setAssignedTo(null)
-          }
-          placeholder="Assignee..."
-          isClearable
-        />
-      </div>
+			<div className="flex w-full flex-col gap-3">
+				<label className="text-mti-gray-dim text-base font-normal">Assignee</label>
+				<Select
+					options={[
+						{value: "me", label: "Assign to me"},
+						...users
+							.filter((x) => checkAccess(x, ["admin", "developer", "agent"]))
+							.map((u) => ({
+								value: u.id,
+								label: `${u.name} - ${u.email}`,
+							})),
+					]}
+					disabled={checkAccess(user, ["agent"])}
+					value={
+						assignedTo
+							? {
+									value: assignedTo,
+									label: `${users.find((u) => u.id === assignedTo)?.name} - ${users.find((u) => u.id === assignedTo)?.email}`,
+							  }
+							: null
+					}
+					onChange={(value) => (value ? setAssignedTo(value.value === "me" ? user.id : value.value) : setAssignedTo(null))}
+					placeholder="Assignee..."
+					isClearable
+				/>
+			</div>
 
-      <div className="-md:flex-col flex w-full items-center gap-4">
-        <Input
-          label="Reported From"
-          type="text"
-          name="reportedFrom"
-          onChange={() => null}
-          value={reportedFrom}
-          disabled
-        />
-        <Input
-          label="Date"
-          type="text"
-          name="date"
-          onChange={() => null}
-          value={moment(ticket.date).format("DD/MM/YYYY - HH:mm")}
-          disabled
-        />
-      </div>
+			<div className="-md:flex-col flex w-full items-center gap-4">
+				<Input label="Reported From" type="text" name="reportedFrom" onChange={() => null} value={reportedFrom} disabled />
+				<Input label="Date" type="text" name="date" onChange={() => null} value={moment(ticket.date).format("DD/MM/YYYY - HH:mm")} disabled />
+			</div>
 
-      <div className="-md:flex-col flex w-full items-center gap-4">
-        <Input
-          label="Reporter's Name"
-          type="text"
-          name="reporter"
-          onChange={() => null}
-          value={reporter.name}
-          disabled
-        />
-        <Input
-          label="Reporter's E-mail"
-          type="text"
-          name="reporter"
-          onChange={() => null}
-          value={reporter.email}
-          disabled
-        />
-        <Input
-          label="Reporter's Type"
-          type="text"
-          name="reporterType"
-          onChange={() => null}
-          value={USER_TYPE_LABELS[reporter.type]}
-          disabled
-        />
-      </div>
+			<div className="-md:flex-col flex w-full items-center gap-4">
+				<Input label="Reporter's Name" type="text" name="reporter" onChange={() => null} value={reporter.name} disabled />
+				<Input label="Reporter's E-mail" type="text" name="reporter" onChange={() => null} value={reporter.email} disabled />
+				<Input
+					label="Reporter's Type"
+					type="text"
+					name="reporterType"
+					onChange={() => null}
+					value={USER_TYPE_LABELS[reporter.type]}
+					disabled
+				/>
+			</div>
 
-      <textarea
-        className="input border-mti-gray-platinum h-full min-h-[300px] w-full cursor-text rounded-3xl border bg-white px-7 py-8"
-        placeholder="Write your ticket's description here..."
-        contentEditable={false}
-        value={description}
-        spellCheck
-      />
+			<textarea
+				className="input border-mti-gray-platinum h-full min-h-[300px] w-full cursor-text rounded-3xl border bg-white px-7 py-8"
+				placeholder="Write your ticket's description here..."
+				contentEditable={false}
+				value={description}
+				spellCheck
+			/>
 
-      <div className="-md:flex-col-reverse mt-2 flex w-full items-center justify-between gap-4">
-        <Button
-          type="button"
-          color="red"
-          className="w-full md:max-w-[200px]"
-          variant="outline"
-          onClick={del}
-          isLoading={isLoading}
-        >
-          Delete
-        </Button>
+			<div className="-md:flex-col-reverse mt-2 flex w-full items-center justify-between gap-4">
+				<Button type="button" color="red" className="w-full md:max-w-[200px]" variant="outline" onClick={del} isLoading={isLoading}>
+					Delete
+				</Button>
 
-        <div className="-md:flex-col-reverse flex w-full items-center justify-end gap-4">
-          <Button
-            type="button"
-            color="red"
-            className="w-full md:max-w-[200px]"
-            variant="outline"
-            onClick={onClose}
-            isLoading={isLoading}
-          >
-            Cancel
-          </Button>
-          <Button
-            type="button"
-            className="w-full md:max-w-[200px]"
-            isLoading={isLoading}
-            onClick={submit}
-          >
-            Update
-          </Button>
-        </div>
-      </div>
-    </form>
-  );
+				<div className="-md:flex-col-reverse flex w-full items-center justify-end gap-4">
+					<Button type="button" color="red" className="w-full md:max-w-[200px]" variant="outline" onClick={onClose} isLoading={isLoading}>
+						Cancel
+					</Button>
+					<Button type="button" className="w-full md:max-w-[200px]" isLoading={isLoading} onClick={submit}>
+						Update
+					</Button>
+				</div>
+			</div>
+		</form>
+	);
 }

src/components/List.tsx

@@ -0,0 +1,36 @@
+import {Column, flexRender, getCoreRowModel, useReactTable} from "@tanstack/react-table";
+
+export default function List<T>({data, columns}: {data: T[]; columns: any[]}) {
+	const table = useReactTable({
+		data,
+		columns: columns,
+		getCoreRowModel: getCoreRowModel(),
+	});
+
+	return (
+		<table className="rounded-xl bg-mti-purple-ultralight/40 w-full">
+			<thead>
+				{table.getHeaderGroups().map((headerGroup) => (
+					<tr key={headerGroup.id}>
+						{headerGroup.headers.map((header) => (
+							<th className="p-4 text-left" key={header.id}>
+								{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+							</th>
+						))}
+					</tr>
+				))}
+			</thead>
+			<tbody className="px-2">
+				{table.getRowModel().rows.map((row) => (
+					<tr className="odd:bg-white even:bg-mti-purple-ultralight/40 rounded-lg py-2" key={row.id}>
+						{row.getVisibleCells().map((cell) => (
+							<td className="px-4 py-2" key={cell.id}>
+								{flexRender(cell.column.columnDef.cell, cell.getContext())}
+							</td>
+						))}
+					</tr>
+				))}
+			</tbody>
+		</table>
+	);
+}

src/components/PermissionList.tsx

@@ -1,62 +1,105 @@
-import {Permission} from "@/interfaces/permissions";
-import {createColumnHelper, flexRender, getCoreRowModel, useReactTable} from "@tanstack/react-table";
+import React from "react";
+import { Permission } from "@/interfaces/permissions";
+import {
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+  Row,
+} from "@tanstack/react-table";
 import Link from "next/link";
-import {convertCamelCaseToReadable} from "@/utils/string";
+import { convertCamelCaseToReadable } from "@/utils/string";
 
 interface Props {
-	permissions: Permission[];
+  permissions: Permission[];
 }
 
 const columnHelper = createColumnHelper<Permission>();
 
 const defaultColumns = [
-	columnHelper.accessor("type", {
-		header: () => <span>Type</span>,
-		cell: ({row, getValue}) => (
-			<Link
-				href={`/permissions/${row.original.id}`}
-				key={row.id}
-				className="underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer">
-				{convertCamelCaseToReadable(getValue() as string)}
-			</Link>
-		),
-	}),
+  columnHelper.accessor("type", {
+    header: () => <span>Type</span>,
+    cell: ({ row, getValue }) => (
+      <Link
+        href={`/permissions/${row.original.id}`}
+        key={row.id}
+        className="underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer"
+      >
+        {convertCamelCaseToReadable(getValue() as string)}
+      </Link>
+    ),
+  }),
 ];
 
-export default function PermissionList({permissions}: Props) {
-	const table = useReactTable({
-		data: permissions,
-		columns: defaultColumns,
-		getCoreRowModel: getCoreRowModel(),
-	});
-	return (
-		<div className="w-full">
-			<div className="w-full flex flex-col gap-2">
-				<table className="rounded-xl bg-mti-purple-ultralight/40 w-full">
-					<thead>
-						{table.getHeaderGroups().map((headerGroup) => (
-							<tr key={headerGroup.id}>
-								{headerGroup.headers.map((header) => (
-									<th className="py-4 px-4 text-left" key={header.id}>
-										{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
-									</th>
-								))}
-							</tr>
-						))}
-					</thead>
-					<tbody className="px-2">
-						{table.getRowModel().rows.map((row) => (
-							<tr className="odd:bg-white even:bg-mti-purple-ultralight/40 rounded-lg py-2" key={row.id}>
-								{row.getVisibleCells().map((cell) => (
-									<td className="px-4 py-2 items-center w-fit" key={cell.id}>
-										{flexRender(cell.column.columnDef.cell, cell.getContext())}
-									</td>
-								))}
-							</tr>
-						))}
-					</tbody>
-				</table>
-			</div>
-		</div>
-	);
+export default function PermissionList({ permissions }: Props) {
+  const table = useReactTable({
+    data: permissions,
+    columns: defaultColumns,
+    getCoreRowModel: getCoreRowModel(),
+  });
+
+  const groupedData: { [key: string]: Row<Permission>[] } = table
+    .getRowModel()
+    .rows.reduce((groups: { [key: string]: Row<Permission>[] }, row) => {
+      const parent = row.original.topic;
+      if (!groups[parent]) {
+        groups[parent] = [];
+      }
+      groups[parent].push(row);
+      return groups;
+    }, {});
+
+  return (
+    <div className="w-full">
+      <div className="w-full flex flex-col gap-2">
+        <table className="rounded-xl bg-mti-purple-ultralight/40 w-full">
+          <thead>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <tr key={headerGroup.id}>
+                {headerGroup.headers.map((header) => (
+                  <th className="py-4 px-4 text-left" key={header.id}>
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(
+                          header.column.columnDef.header,
+                          header.getContext()
+                        )}
+                  </th>
+                ))}
+              </tr>
+            ))}
+          </thead>
+          <tbody className="px-2">
+            {Object.keys(groupedData).map((parent) => (
+              <React.Fragment key={parent}>
+                <tr>
+                  <td className="px-2 py-2 items-center w-fit">
+                    <strong>{parent}</strong>
+                  </td>
+                </tr>
+                {groupedData[parent].map((row, i) => (
+                  <tr
+                    className="odd:bg-white even:bg-mti-purple-ultralight/40 rounded-lg py-2"
+                    key={row.id}
+                  >
+                    {row.getVisibleCells().map((cell) => (
+                      <td
+                        className="px-4 py-2 items-center w-fit"
+                        key={cell.id}
+                      >
+                        {flexRender(
+                          cell.column.columnDef.cell,
+                          cell.getContext()
+                        )}
+                      </td>
+                    ))}
+                  </tr>
+                ))}
+              </React.Fragment>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
 }

src/components/Sidebar.tsx

@@ -13,8 +13,9 @@ import {
 	BsCurrencyDollar,
 	BsClipboardData,
 	BsFileLock,
+	BsPeople,
 } from "react-icons/bs";
-import { CiDumbbell } from "react-icons/ci";
+import {CiDumbbell} from "react-icons/ci";
 import {RiLogoutBoxFill} from "react-icons/ri";
 import {SlPencil} from "react-icons/sl";
 import {FaAward} from "react-icons/fa";
@@ -28,6 +29,7 @@ import usePreferencesStore from "@/stores/preferencesStore";
 import {User} from "@/interfaces/user";
 import useTicketsListener from "@/hooks/useTicketsListener";
 import {checkAccess, getTypesOfUser} from "@/utils/permissions";
+import usePermissions from "@/hooks/usePermissions";
 interface Props {
 	path: string;
 	navDisabled?: boolean;
@@ -80,6 +82,7 @@ export default function Sidebar({path, navDisabled = false, focusMode = false, u
 	const [isMinimized, toggleMinimize] = usePreferencesStore((state) => [state.isSidebarMinimized, state.toggleSidebarMinimized]);
 
 	const {totalAssignedTickets} = useTicketsListener(user.id);
+	const {permissions} = usePermissions(user.id);
 
 	const logout = async () => {
 		axios.post("/api/logout").finally(() => {
@@ -98,22 +101,25 @@ export default function Sidebar({path, navDisabled = false, focusMode = false, u
 			)}>
 			<div className="-xl:hidden flex-col gap-3 xl:flex">
 				<Nav disabled={disableNavigation} Icon={MdSpaceDashboard} label="Dashboard" path={path} keyPath="/" isMinimized={isMinimized} />
-				{checkAccess(user, ["student", "teacher", "developer"], "viewExams") && (
+				{checkAccess(user, ["student", "teacher", "developer"], permissions, "viewExams") && (
 					<Nav disabled={disableNavigation} Icon={BsFileEarmarkText} label="Exams" path={path} keyPath="/exam" isMinimized={isMinimized} />
 				)}
-				{checkAccess(user, ["student", "teacher", "developer"], "viewExercises") && (
+				{checkAccess(user, ["student", "teacher", "developer"], permissions, "viewExercises") && (
 					<Nav disabled={disableNavigation} Icon={BsPencil} label="Exercises" path={path} keyPath="/exercises" isMinimized={isMinimized} />
 				)}
-				{checkAccess(user, getTypesOfUser(["agent"]), "viewStats") && (
+				{checkAccess(user, getTypesOfUser(["agent"]), permissions, "viewStats") && (
 					<Nav disabled={disableNavigation} Icon={BsGraphUp} label="Stats" path={path} keyPath="/stats" isMinimized={isMinimized} />
 				)}
-				{checkAccess(user, getTypesOfUser(["agent"]), "viewRecords") && (
+				{checkAccess(user, ["developer", "admin", "teacher", "student"], permissions) && (
+					<Nav disabled={disableNavigation} Icon={BsPeople} label="Groups" path={path} keyPath="/groups" 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"]), "viewRecords") && (
+				{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"], "viewPaymentRecords") && (
+				{checkAccess(user, ["admin", "developer", "agent", "corporate", "mastercorporate"], permissions, "viewPaymentRecords") && (
 					<Nav
 						disabled={disableNavigation}
 						Icon={BsCurrencyDollar}
@@ -133,7 +139,7 @@ export default function Sidebar({path, navDisabled = false, focusMode = false, u
 						isMinimized={isMinimized}
 					/>
 				)}
-				{checkAccess(user, ["admin", "developer", "agent"], "viewTickets") && (
+				{checkAccess(user, ["admin", "developer", "agent"], permissions, "viewTickets") && (
 					<Nav
 						disabled={disableNavigation}
 						Icon={BsClipboardData}
@@ -144,38 +150,38 @@ export default function Sidebar({path, navDisabled = false, focusMode = false, u
 						badge={totalAssignedTickets}
 					/>
 				)}
-				{checkAccess(user, ["developer", "admin"]) && (
-					<>
-						<Nav
-							disabled={disableNavigation}
-							Icon={BsCloudFill}
-							label="Generation"
-							path={path}
-							keyPath="/generation"
-							isMinimized={isMinimized}
-						/>
-						<Nav
-							disabled={disableNavigation}
-							Icon={BsFileLock}
-							label="Permissions"
-							path={path}
-							keyPath="/permissions"
-							isMinimized={isMinimized}
-						/>
-					</>
+				{checkAccess(user, ["developer", "admin", "corporate", "mastercorporate"]) && (
+					<Nav
+						disabled={disableNavigation}
+						Icon={BsCloudFill}
+						label="Generation"
+						path={path}
+						keyPath="/generation"
+						isMinimized={isMinimized}
+					/>
+				)}
+				{checkAccess(user, ["developer", "admin", "corporate", "mastercorporate", "agent"]) && (
+					<Nav
+						disabled={disableNavigation}
+						Icon={BsFileLock}
+						label="Permissions"
+						path={path}
+						keyPath="/permissions"
+						isMinimized={isMinimized}
+					/>
 				)}
 			</div>
 			<div className="-xl:flex flex-col gap-3 xl:hidden">
 				<Nav disabled={disableNavigation} Icon={MdSpaceDashboard} label="Dashboard" path={path} keyPath="/" isMinimized={true} />
 				<Nav disabled={disableNavigation} Icon={BsFileEarmarkText} label="Exams" path={path} keyPath="/exam" isMinimized={true} />
 				<Nav disabled={disableNavigation} Icon={BsPencil} label="Exercises" path={path} keyPath="/exercises" isMinimized={true} />
-				{checkAccess(user, getTypesOfUser(["agent"]), "viewStats") && (
+				{checkAccess(user, getTypesOfUser(["agent"]), permissions, "viewStats") && (
 					<Nav disabled={disableNavigation} Icon={BsGraphUp} label="Stats" path={path} keyPath="/stats" isMinimized={true} />
 				)}
-				{checkAccess(user, getTypesOfUser(["agent"]), "viewRecords") && (
+				{checkAccess(user, getTypesOfUser(["agent"]), permissions, "viewRecords") && (
 					<Nav disabled={disableNavigation} Icon={BsClockHistory} label="Record" path={path} keyPath="/record" isMinimized={true} />
 				)}
-				{checkAccess(user, getTypesOfUser(["agent"]), "viewRecords") && (
+				{checkAccess(user, getTypesOfUser(["agent"]), permissions, "viewRecords") && (
 					<Nav disabled={disableNavigation} Icon={CiDumbbell} label="Training" path={path} keyPath="/training" isMinimized={true} />
 				)}
 				{checkAccess(user, getTypesOfUser(["student"])) && (