encoach_frontend/src/pages/(admin)/CorporateGradingSystem.tsx

import Button from "@/components/Low/Button";
import Input from "@/components/Low/Input";
import Select from "@/components/Low/Select";
import Separator from "@/components/Low/Separator";
import { Grading, Step } from "@/interfaces";
import { Entity } from "@/interfaces/entity";
import { User } from "@/interfaces/user";
import { CEFR_STEPS, GENERAL_STEPS, IELTS_STEPS, TOFEL_STEPS } from "@/resources/grading";
import { mapBy } from "@/utils";
import { checkAccess } from "@/utils/permissions";
import axios from "axios";
import clsx from "clsx";
import { Divider } from "primereact/divider";
import { useEffect, useState } from "react";
import { BsPlusCircle, BsTrash } from "react-icons/bs";
import { toast } from "react-toastify";

const areStepsOverlapped = (steps: Step[]) => {
	for (let i = 0; i < steps.length; i++) {
		if (i === 0) continue;

		const step = steps[i];
		const previous = steps[i - 1];

		if (previous.max >= step.min) return true;
	}

	return false;
};

interface Props {
	user: User;
	entitiesGrading: Grading[];
	entities: Entity[]
	mutate: () => void
}

export default function CorporateGradingSystem({ user, entitiesGrading = [], entities = [], mutate }: Props) {
	const [entity, setEntity] = useState(entitiesGrading[0]?.entity || undefined)
	const [isLoading, setIsLoading] = useState(false);
	const [steps, setSteps] = useState<Step[]>([]);
	const [otherEntities, setOtherEntities] = useState<string[]>([])

	useEffect(() => {
		if (entity) {
			const entitySteps = entitiesGrading.find(e => e.entity === entity)!.steps
			setSteps(entitySteps || [])
		}
	}, [entitiesGrading, entity])

	const saveGradingSystem = () => {
		if (!steps.every((x) => x.min < x.max)) return toast.error("One of your steps has a minimum threshold inferior to its superior threshold.");
		if (areStepsOverlapped(steps)) return toast.error("There seems to be an overlap in one of your steps.");
		if (
			steps.reduce((acc, curr) => {
				return acc - (curr.max - curr.min + 1);
			}, 100) > 0
		)
			return toast.error("There seems to be an open interval in your steps.");

		setIsLoading(true);
		axios
			.post("/api/grading", { user: user.id, entity, steps })
			.then(() => toast.success("Your grading system has been saved!"))
			.then(mutate)
			.catch(() => toast.error("Something went wrong, please try again later"))
			.finally(() => setIsLoading(false));
	};

	const applyToOtherEntities = () => {
		if (!steps.every((x) => x.min < x.max)) return toast.error("One of your steps has a minimum threshold inferior to its superior threshold.");
		if (areStepsOverlapped(steps)) return toast.error("There seems to be an overlap in one of your steps.");
		if (
			steps.reduce((acc, curr) => {
				return acc - (curr.max - curr.min + 1);
			}, 100) > 0
		)
			return toast.error("There seems to be an open interval in your steps.");

		if (otherEntities.length === 0) return toast.error("Select at least one entity")

		setIsLoading(true);
		axios
			.post("/api/grading/multiple", { user: user.id, entities: otherEntities, steps })
			.then(() => toast.success("Your grading system has been saved!"))
			.then(mutate)
			.catch(() => toast.error("Something went wrong, please try again later"))
			.finally(() => setIsLoading(false));
	};

	return (
		<div className="flex flex-col gap-4 border p-4 border-mti-gray-platinum rounded-xl">
			<label className="font-normal text-base text-mti-gray-dim">Grading System</label>
			<div className={clsx("flex flex-col gap-4")}>
				<label className="font-normal text-base text-mti-gray-dim">Entity</label>
				<Select
					defaultValue={{ value: (entities || [])[0]?.id, label: (entities || [])[0]?.label }}
					options={entities.map((e) => ({ value: e.id, label: e.label }))}
					onChange={(e) => setEntity(e?.value || undefined)}
					isClearable={checkAccess(user, ["admin", "developer"])}
				/>
			</div>

			{entities.length > 1 && (
				<>
					<Separator />
					<label className="font-normal text-base text-mti-gray-dim">Apply this grading system to other entities</label>
					<Select
						options={entities.map((e) => ({ value: e.id, label: e.label }))}
						onChange={(e) => !e ? setOtherEntities([]) : setOtherEntities(e.map(o => o.value!))}
						isMulti
					/>
					<Button onClick={applyToOtherEntities} isLoading={isLoading} disabled={isLoading || otherEntities.length === 0} variant="outline">
						Apply to {otherEntities.length} other entities
					</Button>
					<Separator />
				</>
			)}

			<label className="font-normal text-base text-mti-gray-dim">Preset Systems</label>
			<div className="grid grid-cols-4 gap-4">
				<Button variant="outline" onClick={() => setSteps(CEFR_STEPS)}>
					CEFR
				</Button>
				<Button variant="outline" onClick={() => setSteps(GENERAL_STEPS)}>
					General English
				</Button>
				<Button variant="outline" onClick={() => setSteps(IELTS_STEPS)}>
					IELTS
				</Button>
				<Button variant="outline" onClick={() => setSteps(TOFEL_STEPS)}>
					TOFEL iBT
				</Button>
			</div>

			{steps.map((step, index) => (
				<>
					<div className="flex items-center gap-4">
						<div className="grid grid-cols-3 gap-4 w-full" key={step.min}>
							<Input
								label="Min. Percentage"
								value={step.min}
								type="number"
								disabled={index === 0 || isLoading}
								onChange={(e) => setSteps((prev) => prev.map((x, i) => (i === index ? { ...x, min: parseInt(e) } : x)))}
								name="min"
							/>
							<Input
								label="Grade"
								value={step.label}
								type="text"
								disabled={isLoading}
								onChange={(e) => setSteps((prev) => prev.map((x, i) => (i === index ? { ...x, label: e } : x)))}
								name="min"
							/>
							<Input
								label="Max. Percentage"
								value={step.max}
								type="number"
								disabled={index === steps.length - 1 || isLoading}
								onChange={(e) => setSteps((prev) => prev.map((x, i) => (i === index ? { ...x, max: parseInt(e) } : x)))}
								name="max"
							/>
						</div>
						{index !== 0 && index !== steps.length - 1 && (
							<button
								disabled={isLoading}
								className="pt-9 text-xl group"
								onClick={() => setSteps((prev) => prev.filter((_, i) => i !== index))}>
								<div className="w-full h-full flex items-center justify-center group-hover:bg-neutral-200 rounded-full p-3 transition ease-in-out duration-300">
									<BsTrash />
								</div>
							</button>
						)}
					</div>

					{index < steps.length - 1 && (
						<Button
							className="w-full flex items-center justify-center"
							disabled={isLoading}
							onClick={() => {
								const item = { min: steps[index === 0 ? 0 : index - 1].max + 1, max: steps[index + 1].min - 1, label: "" };
								setSteps((prev) => [...prev.slice(0, index + 1), item, ...prev.slice(index + 1, steps.length)]);
							}}>
							<BsPlusCircle />
						</Button>
					)}
				</>
			))}

			<Button onClick={saveGradingSystem} isLoading={isLoading} disabled={isLoading} className="mt-8">
				Save Grading System
			</Button>
		</div>
	);
}