ENCOA-90: Creating the ability for a corporate/master corporate to edit their grading system

src/pages/settings.tsx

@@ -19,8 +19,11 @@ import usePermissions from "@/hooks/usePermissions";
 import {useState} from "react";
 import Modal from "@/components/Modal";
 import IconCard from "@/dashboards/IconCard";
-import {BsCode, BsCodeSquare, BsPeopleFill, BsPersonFill} from "react-icons/bs";
+import {BsCode, BsCodeSquare, BsGearFill, BsPeopleFill, BsPersonFill} from "react-icons/bs";
 import UserCreator from "./(admin)/UserCreator";
+import CorporateGradingSystem from "./(admin)/CorporateGradingSystem";
+import useGradingSystem from "@/hooks/useGrading";
+import {CEFR_STEPS} from "@/resources/grading";
 
 export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 	const user = req.session.user;
@@ -50,6 +53,7 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 export default function Admin() {
 	const {user} = useUser({redirectTo: "/login"});
 	const {permissions} = usePermissions(user?.id || "");
+	const {gradingSystem, mutate} = useGradingSystem();
 
 	const [modalOpen, setModalOpen] = useState<string>();
 
@@ -79,6 +83,13 @@ export default function Admin() {
 					<Modal isOpen={modalOpen === "createUser"} onClose={() => setModalOpen(undefined)}>
 						<UserCreator user={user} />
 					</Modal>
+					<Modal isOpen={modalOpen === "gradingSystem"} onClose={() => setModalOpen(undefined)}>
+						<CorporateGradingSystem
+							user={user}
+							defaultSteps={gradingSystem?.steps || CEFR_STEPS}
+							mutate={(steps) => mutate({user: user.id, steps})}
+						/>
+					</Modal>
 
 					<section className="w-full grid grid-cols-2 -md:grid-cols-1 gap-8">
 						<ExamLoader />
@@ -112,6 +123,15 @@ export default function Admin() {
 									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>