From 82233c7d53b72de58a1211eb19eff043f4543e1a Mon Sep 17 00:00:00 2001
From: Tiago Ribeiro <tiago.ribeiro@ecrop.dev>
Date: Tue, 27 Aug 2024 09:42:14 +0100
Subject: [PATCH] ENCOA-111: Change Modules Assignment Display

---
 src/dashboards/AssignmentCreator.tsx | 955 +++++++++++----------------
 1 file changed, 392 insertions(+), 563 deletions(-)

diff --git a/src/dashboards/AssignmentCreator.tsx b/src/dashboards/AssignmentCreator.tsx
index 7859b068..445193d9 100644
--- a/src/dashboards/AssignmentCreator.tsx
+++ b/src/dashboards/AssignmentCreator.tsx
@@ -1,593 +1,422 @@
 import Input from "@/components/Low/Input";
 import Modal from "@/components/Modal";
-import { Module } from "@/interfaces";
+import {Module} from "@/interfaces";
 import clsx from "clsx";
-import { useEffect, useState } from "react";
-import {
-  BsBook,
-  BsCheckCircle,
-  BsClipboard,
-  BsHeadphones,
-  BsMegaphone,
-  BsPen,
-  BsXCircle,
-} from "react-icons/bs";
-import { generate } from "random-words";
-import { capitalize } from "lodash";
+import {useEffect, useState} from "react";
+import {BsBook, BsCheckCircle, BsClipboard, BsHeadphones, BsMegaphone, BsPen, BsXCircle} from "react-icons/bs";
+import {generate} from "random-words";
+import {capitalize} from "lodash";
 import useUsers from "@/hooks/useUsers";
-import { Group, User } from "@/interfaces/user";
+import {Group, User} from "@/interfaces/user";
 import ProgressBar from "@/components/Low/ProgressBar";
-import { calculateAverageLevel } from "@/utils/score";
+import {calculateAverageLevel} from "@/utils/score";
 import Button from "@/components/Low/Button";
 import ReactDatePicker from "react-datepicker";
 import moment from "moment";
 import axios from "axios";
-import { getExam } from "@/utils/exams";
-import { toast } from "react-toastify";
-import { Assignment } from "@/interfaces/results";
+import {getExam} from "@/utils/exams";
+import {toast} from "react-toastify";
+import {Assignment} from "@/interfaces/results";
 import Checkbox from "@/components/Low/Checkbox";
-import { InstructorGender, Variant } from "@/interfaces/exam";
+import {InstructorGender, Variant} from "@/interfaces/exam";
 import Select from "@/components/Low/Select";
 import useExams from "@/hooks/useExams";
 
 interface Props {
-  isCreating: boolean;
-  assigner: string;
-  users: User[];
-  groups: Group[];
-  assignment?: Assignment;
-  cancelCreation: () => void;
+	isCreating: boolean;
+	assigner: string;
+	users: User[];
+	groups: Group[];
+	assignment?: Assignment;
+	cancelCreation: () => void;
 }
 
-export default function AssignmentCreator({
-  isCreating,
-  assignment,
-  assigner,
-  groups,
-  users,
-  cancelCreation,
-}: Props) {
-  const [selectedModules, setSelectedModules] = useState<Module[]>(
-    assignment?.exams.map((e) => e.module) || []
-  );
-  const [assignees, setAssignees] = useState<string[]>(
-    assignment?.assignees || []
-  );
-  const [name, setName] = useState(
-    assignment?.name ||
-      generate({
-        minLength: 6,
-        maxLength: 8,
-        min: 2,
-        max: 3,
-        join: " ",
-        formatter: capitalize,
-      })
-  );
-  const [isLoading, setIsLoading] = useState(false);
-  const [startDate, setStartDate] = useState<Date | null>(
-    assignment ? moment(assignment.startDate).toDate() : new Date()
-  );
-  const [endDate, setEndDate] = useState<Date | null>(
-    assignment
-      ? moment(assignment.endDate).toDate()
-      : moment().hours(23).minutes(59).add(8, "day").toDate()
-  );
-  const [variant, setVariant] = useState<Variant>("full");
-  const [instructorGender, setInstructorGender] = useState<InstructorGender>(
-    assignment?.instructorGender || "varied"
-  );
-  // creates a new exam for each assignee or just one exam for all assignees
-  const [generateMultiple, setGenerateMultiple] = useState<boolean>(false);
-  const [useRandomExams, setUseRandomExams] = useState(true);
-  const [examIDs, setExamIDs] = useState<{ id: string; module: Module }[]>([]);
+export default function AssignmentCreator({isCreating, assignment, assigner, groups, users, cancelCreation}: Props) {
+	const [selectedModules, setSelectedModules] = useState<Module[]>(assignment?.exams.map((e) => e.module) || []);
+	const [assignees, setAssignees] = useState<string[]>(assignment?.assignees || []);
+	const [name, setName] = useState(
+		assignment?.name ||
+			generate({
+				minLength: 6,
+				maxLength: 8,
+				min: 2,
+				max: 3,
+				join: " ",
+				formatter: capitalize,
+			}),
+	);
+	const [isLoading, setIsLoading] = useState(false);
+	const [startDate, setStartDate] = useState<Date | null>(assignment ? moment(assignment.startDate).toDate() : new Date());
+	const [endDate, setEndDate] = useState<Date | null>(
+		assignment ? moment(assignment.endDate).toDate() : moment().hours(23).minutes(59).add(8, "day").toDate(),
+	);
+	const [variant, setVariant] = useState<Variant>("full");
+	const [instructorGender, setInstructorGender] = useState<InstructorGender>(assignment?.instructorGender || "varied");
+	// creates a new exam for each assignee or just one exam for all assignees
+	const [generateMultiple, setGenerateMultiple] = useState<boolean>(false);
+	const [useRandomExams, setUseRandomExams] = useState(true);
+	const [examIDs, setExamIDs] = useState<{id: string; module: Module}[]>([]);
 
-  const { exams } = useExams();
+	const {exams} = useExams();
 
-  useEffect(() => {
-    setExamIDs((prev) =>
-      prev.filter((x) => selectedModules.includes(x.module))
-    );
-  }, [selectedModules]);
+	useEffect(() => {
+		setExamIDs((prev) => prev.filter((x) => selectedModules.includes(x.module)));
+	}, [selectedModules]);
 
-  const toggleModule = (module: Module) => {
-    const modules = selectedModules.filter((x) => x !== module);
-    setSelectedModules((prev) =>
-      prev.includes(module) ? modules : [...modules, module]
-    );
-  };
+	const toggleModule = (module: Module) => {
+		const modules = selectedModules.filter((x) => x !== module);
+		setSelectedModules((prev) => (prev.includes(module) ? modules : [...modules, module]));
+	};
 
-  const toggleAssignee = (user: User) => {
-    setAssignees((prev) =>
-      prev.includes(user.id)
-        ? prev.filter((a) => a !== user.id)
-        : [...prev, user.id]
-    );
-  };
+	const toggleAssignee = (user: User) => {
+		setAssignees((prev) => (prev.includes(user.id) ? prev.filter((a) => a !== user.id) : [...prev, user.id]));
+	};
 
-  const createAssignment = () => {
-    setIsLoading(true);
+	const createAssignment = () => {
+		setIsLoading(true);
 
-    (assignment ? axios.patch : axios.post)(
-      `/api/assignments${assignment ? `/${assignment.id}` : ""}`,
-      {
-        assignees,
-        name,
-        startDate,
-        examIDs: !useRandomExams ? examIDs : undefined,
-        endDate,
-        selectedModules,
-        generateMultiple,
-        variant,
-        instructorGender,
-      }
-    )
-      .then(() => {
-        toast.success(
-          `The assignment "${name}" has been ${
-            assignment ? "updated" : "created"
-          } successfully!`
-        );
-        cancelCreation();
-      })
-      .catch((e) => {
-        console.log(e);
-        toast.error("Something went wrong, please try again later!");
-      })
-      .finally(() => setIsLoading(false));
-  };
-
-  const deleteAssignment = () => {
-    if (assignment) {
-      setIsLoading(true);
-
-      if (
-        !confirm(
-          `Are you sure you want to delete the "${assignment.name}" assignment?`
-        )
-      )
-        return;
-      axios
-        .delete(`api/assignments/${assignment.id}`)
-        .then(() => {
-          toast.success(
-            `The assignment "${name}" has been deleted successfully!`
-          );
-          cancelCreation();
-        })
-        .catch((e) => {
-          console.log(e);
-          toast.error("Something went wrong, please try again later!");
-        })
-        .finally(() => setIsLoading(false));
-    }
-  };
-
-  const startAssignment = () => {
-	if (assignment) {
-	  setIsLoading(true);
-
-	  axios
-		.post(`/api/assignments/${assignment.id}/start`)
-		.then(() => {
-		  toast.success(
-			`The assignment "${name}" has been started successfully!`
-		  );
-		  cancelCreation();
+		(assignment ? axios.patch : axios.post)(`/api/assignments${assignment ? `/${assignment.id}` : ""}`, {
+			assignees,
+			name,
+			startDate,
+			examIDs: !useRandomExams ? examIDs : undefined,
+			endDate,
+			selectedModules,
+			generateMultiple,
+			variant,
+			instructorGender,
 		})
-		.catch((e) => {
-		  console.log(e);
-		  toast.error("Something went wrong, please try again later!");
-		})
-		.finally(() => setIsLoading(false));
-	}
-  }
+			.then(() => {
+				toast.success(`The assignment "${name}" has been ${assignment ? "updated" : "created"} successfully!`);
+				cancelCreation();
+			})
+			.catch((e) => {
+				console.log(e);
+				toast.error("Something went wrong, please try again later!");
+			})
+			.finally(() => setIsLoading(false));
+	};
 
-  return (
-    <Modal isOpen={isCreating} onClose={cancelCreation} title="New Assignment">
-      <div className="w-full flex flex-col gap-4">
-        <section className="w-full grid -md:grid-cols-1 md:grid-cols-2 place-items-center lg:grid-cols-6 -md:flex-col -md:items-center -md:gap-12 justify-between gap-8 mt-8 px-8">
-          <div
-            onClick={
-              !selectedModules.includes("level")
-                ? () => toggleModule("reading")
-                : undefined
-            }
-            className={clsx(
-              "w-52 relative max-w-xs flex items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-8 cursor-pointer",
-              "lg:col-span-2",
-              selectedModules.includes("reading")
-                ? "border-mti-purple-light"
-                : "border-mti-gray-platinum"
-            )}
-          >
-            <div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-reading top-1/2 -translate-y-1/2 left-0 -translate-x-1/2">
-              <BsBook className="text-white w-7 h-7" />
-            </div>
-            <span className="ml-8 font-semibold">Reading</span>
-            {!selectedModules.includes("reading") &&
-              !selectedModules.includes("level") && (
-                <div className="border border-mti-gray-platinum w-8 h-8 rounded-full" />
-              )}
-            {selectedModules.includes("level") && (
-              <BsXCircle className="text-mti-red-light w-8 h-8" />
-            )}
-            {selectedModules.includes("reading") && (
-              <BsCheckCircle className="text-mti-purple-light w-8 h-8" />
-            )}
-          </div>
-          <div
-            onClick={
-              !selectedModules.includes("level")
-                ? () => toggleModule("listening")
-                : undefined
-            }
-            className={clsx(
-              "w-52 relative max-w-xs flex items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-8 cursor-pointer",
-              "lg:col-span-2",
-              selectedModules.includes("listening")
-                ? "border-mti-purple-light"
-                : "border-mti-gray-platinum"
-            )}
-          >
-            <div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-listening top-1/2 -translate-y-1/2 left-0 -translate-x-1/2">
-              <BsHeadphones className="text-white w-7 h-7" />
-            </div>
-            <span className="ml-8 font-semibold">Listening</span>
-            {!selectedModules.includes("listening") &&
-              !selectedModules.includes("level") && (
-                <div className="border border-mti-gray-platinum w-8 h-8 rounded-full" />
-              )}
-            {selectedModules.includes("level") && (
-              <BsXCircle className="text-mti-red-light w-8 h-8" />
-            )}
-            {selectedModules.includes("listening") && (
-              <BsCheckCircle className="text-mti-purple-light w-8 h-8" />
-            )}
-          </div>
-          <div
-            onClick={
-              !selectedModules.includes("level")
-                ? () => toggleModule("writing")
-                : undefined
-            }
-            className={clsx(
-              "w-52 relative max-w-xs flex items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-8 cursor-pointer",
-              "lg:col-span-2",
-              selectedModules.includes("writing")
-                ? "border-mti-purple-light"
-                : "border-mti-gray-platinum"
-            )}
-          >
-            <div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-writing top-1/2 -translate-y-1/2 left-0 -translate-x-1/2">
-              <BsPen className="text-white w-7 h-7" />
-            </div>
-            <span className="ml-8 font-semibold">Writing</span>
-            {!selectedModules.includes("writing") &&
-              !selectedModules.includes("level") && (
-                <div className="border border-mti-gray-platinum w-8 h-8 rounded-full" />
-              )}
-            {selectedModules.includes("level") && (
-              <BsXCircle className="text-mti-red-light w-8 h-8" />
-            )}
-            {selectedModules.includes("writing") && (
-              <BsCheckCircle className="text-mti-purple-light w-8 h-8" />
-            )}
-          </div>
-          <div
-            onClick={
-              !selectedModules.includes("level")
-                ? () => toggleModule("speaking")
-                : undefined
-            }
-            className={clsx(
-              "w-52 relative max-w-xs flex items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-8 cursor-pointer",
-              "lg:col-span-3",
-              selectedModules.includes("speaking")
-                ? "border-mti-purple-light"
-                : "border-mti-gray-platinum"
-            )}
-          >
-            <div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-speaking top-1/2 -translate-y-1/2 left-0 -translate-x-1/2">
-              <BsMegaphone className="text-white w-7 h-7" />
-            </div>
-            <span className="ml-8 font-semibold">Speaking</span>
-            {!selectedModules.includes("speaking") &&
-              !selectedModules.includes("level") && (
-                <div className="border border-mti-gray-platinum w-8 h-8 rounded-full" />
-              )}
-            {selectedModules.includes("level") && (
-              <BsXCircle className="text-mti-red-light w-8 h-8" />
-            )}
-            {selectedModules.includes("speaking") && (
-              <BsCheckCircle className="text-mti-purple-light w-8 h-8" />
-            )}
-          </div>
-          <div
-            onClick={
-              (!selectedModules.includes("level") &&
-                selectedModules.length === 0) ||
-              selectedModules.includes("level")
-                ? () => toggleModule("level")
-                : undefined
-            }
-            className={clsx(
-              "w-52 relative max-w-xs flex items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-8 cursor-pointer",
-              "lg:col-span-3",
-              selectedModules.includes("level")
-                ? "border-mti-purple-light"
-                : "border-mti-gray-platinum"
-            )}
-          >
-            <div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-level top-1/2 -translate-y-1/2 left-0 -translate-x-1/2">
-              <BsClipboard className="text-white w-7 h-7" />
-            </div>
-            <span className="ml-8 font-semibold">Level</span>
-            {!selectedModules.includes("level") &&
-              selectedModules.length === 0 && (
-                <div className="border border-mti-gray-platinum w-8 h-8 rounded-full" />
-              )}
-            {!selectedModules.includes("level") &&
-              selectedModules.length > 0 && (
-                <BsXCircle className="text-mti-red-light w-8 h-8" />
-              )}
-            {selectedModules.includes("level") && (
-              <BsCheckCircle className="text-mti-purple-light w-8 h-8" />
-            )}
-          </div>
-        </section>
+	const deleteAssignment = () => {
+		if (assignment) {
+			setIsLoading(true);
 
-        <Input
-          type="text"
-          name="name"
-          onChange={(e) => setName(e)}
-          defaultValue={name}
-          label="Assignment Name"
-          required
-        />
+			if (!confirm(`Are you sure you want to delete the "${assignment.name}" assignment?`)) return;
+			axios
+				.delete(`api/assignments/${assignment.id}`)
+				.then(() => {
+					toast.success(`The assignment "${name}" has been deleted successfully!`);
+					cancelCreation();
+				})
+				.catch((e) => {
+					console.log(e);
+					toast.error("Something went wrong, please try again later!");
+				})
+				.finally(() => setIsLoading(false));
+		}
+	};
 
-        <div className="w-full grid -md:grid-cols-1 md:grid-cols-2 gap-8">
-          <div className="flex flex-col gap-2">
-            <label className="font-normal text-base text-mti-gray-dim">
-              Start Date *
-            </label>
-            <ReactDatePicker
-              className={clsx(
-                "p-6 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
-                "hover:border-mti-purple tooltip z-10",
-                "transition duration-300 ease-in-out"
-              )}
-              popperClassName="!z-20"
-              filterTime={(date) => moment(date).isSameOrAfter(new Date())}
-              dateFormat="dd/MM/yyyy HH:mm"
-              selected={startDate}
-              showTimeSelect
-              onChange={(date) => setStartDate(date)}
-            />
-          </div>
-          <div className="flex flex-col gap-2">
-            <label className="font-normal text-base text-mti-gray-dim">
-              End Date *
-            </label>
-            <ReactDatePicker
-              className={clsx(
-                "p-6 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
-                "hover:border-mti-purple tooltip z-10",
-                "transition duration-300 ease-in-out"
-              )}
-              popperClassName="!z-20"
-              filterTime={(date) => moment(date).isAfter(startDate)}
-              dateFormat="dd/MM/yyyy HH:mm"
-              selected={endDate}
-              showTimeSelect
-              onChange={(date) => setEndDate(date)}
-            />
-          </div>
-        </div>
+	const startAssignment = () => {
+		if (assignment) {
+			setIsLoading(true);
 
-        {selectedModules.includes("speaking") && (
-          <div className="flex flex-col gap-3 w-full">
-            <label className="font-normal text-base text-mti-gray-dim">
-              Speaking Instructor&apos;s Gender
-            </label>
-            <Select
-              value={{
-                value: instructorGender,
-                label: capitalize(instructorGender),
-              }}
-              onChange={(value) =>
-                value
-                  ? setInstructorGender(value.value as InstructorGender)
-                  : null
-              }
-              disabled={!selectedModules.includes("speaking") || !!assignment}
-              options={[
-                { value: "male", label: "Male" },
-                { value: "female", label: "Female" },
-                { value: "varied", label: "Varied" },
-              ]}
-            />
-          </div>
-        )}
+			axios
+				.post(`/api/assignments/${assignment.id}/start`)
+				.then(() => {
+					toast.success(`The assignment "${name}" has been started successfully!`);
+					cancelCreation();
+				})
+				.catch((e) => {
+					console.log(e);
+					toast.error("Something went wrong, please try again later!");
+				})
+				.finally(() => setIsLoading(false));
+		}
+	};
 
-        {selectedModules.length > 0 && (
-          <div className="flex flex-col gap-3 w-full">
-            <Checkbox isChecked={useRandomExams} onChange={setUseRandomExams}>
-              Random Exams
-            </Checkbox>
-            {!useRandomExams && (
-              <div className="grid md:grid-cols-2 w-full gap-4">
-                {selectedModules.map((module) => (
-                  <div key={module} className="flex flex-col gap-3 w-full">
-                    <label className="font-normal text-base text-mti-gray-dim">
-                      {capitalize(module)} Exam
-                    </label>
-                    <Select
-                      value={{
-                        value:
-                          examIDs.find((e) => e.module === module)?.id || null,
-                        label:
-                          examIDs.find((e) => e.module === module)?.id || "",
-                      }}
-                      onChange={(value) =>
-                        value
-                          ? setExamIDs((prev) => [
-                              ...prev.filter((x) => x.module !== module),
-                              { id: value.value!, module },
-                            ])
-                          : setExamIDs((prev) =>
-                              prev.filter((x) => x.module !== module)
-                            )
-                      }
-                      options={exams
-                        .filter((x) => !x.isDiagnostic && x.module === module)
-                        .map((x) => ({ value: x.id, label: x.id }))}
-                    />
-                  </div>
-                ))}
-              </div>
-            )}
-          </div>
-        )}
+	return (
+		<Modal isOpen={isCreating} onClose={cancelCreation} title="New Assignment">
+			<div className="w-full flex flex-col gap-4">
+				<section className="w-full grid -md:grid-cols-1 md:grid-cols-3 place-items-center -md:flex-col -md:items-center -md:gap-12 justify-between gap-8 mt-8 px-8">
+					<div
+						onClick={!selectedModules.includes("level") ? () => toggleModule("reading") : undefined}
+						className={clsx(
+							"w-52 relative max-w-xs flex items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-8 cursor-pointer",
+							selectedModules.includes("reading") ? "border-mti-purple-light" : "border-mti-gray-platinum",
+						)}>
+						<div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-reading top-1/2 -translate-y-1/2 left-0 -translate-x-1/2">
+							<BsBook className="text-white w-7 h-7" />
+						</div>
+						<span className="ml-8 font-semibold">Reading</span>
+						{!selectedModules.includes("reading") && !selectedModules.includes("level") && (
+							<div className="border border-mti-gray-platinum w-8 h-8 rounded-full" />
+						)}
+						{selectedModules.includes("level") && <BsXCircle className="text-mti-red-light w-8 h-8" />}
+						{selectedModules.includes("reading") && <BsCheckCircle className="text-mti-purple-light w-8 h-8" />}
+					</div>
+					<div
+						onClick={!selectedModules.includes("level") ? () => toggleModule("listening") : undefined}
+						className={clsx(
+							"w-52 relative max-w-xs flex items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-8 cursor-pointer",
+							selectedModules.includes("listening") ? "border-mti-purple-light" : "border-mti-gray-platinum",
+						)}>
+						<div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-listening top-1/2 -translate-y-1/2 left-0 -translate-x-1/2">
+							<BsHeadphones className="text-white w-7 h-7" />
+						</div>
+						<span className="ml-8 font-semibold">Listening</span>
+						{!selectedModules.includes("listening") && !selectedModules.includes("level") && (
+							<div className="border border-mti-gray-platinum w-8 h-8 rounded-full" />
+						)}
+						{selectedModules.includes("level") && <BsXCircle className="text-mti-red-light w-8 h-8" />}
+						{selectedModules.includes("listening") && <BsCheckCircle className="text-mti-purple-light w-8 h-8" />}
+					</div>
+					<div
+						onClick={
+							(!selectedModules.includes("level") && selectedModules.length === 0) || selectedModules.includes("level")
+								? () => toggleModule("level")
+								: undefined
+						}
+						className={clsx(
+							"w-52 relative max-w-xs flex items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-8 cursor-pointer",
+							selectedModules.includes("level") ? "border-mti-purple-light" : "border-mti-gray-platinum",
+						)}>
+						<div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-level top-1/2 -translate-y-1/2 left-0 -translate-x-1/2">
+							<BsClipboard className="text-white w-7 h-7" />
+						</div>
+						<span className="ml-8 font-semibold">Level</span>
+						{!selectedModules.includes("level") && selectedModules.length === 0 && (
+							<div className="border border-mti-gray-platinum w-8 h-8 rounded-full" />
+						)}
+						{!selectedModules.includes("level") && selectedModules.length > 0 && <BsXCircle className="text-mti-red-light w-8 h-8" />}
+						{selectedModules.includes("level") && <BsCheckCircle className="text-mti-purple-light w-8 h-8" />}
+					</div>
+					<div
+						onClick={!selectedModules.includes("level") ? () => toggleModule("writing") : undefined}
+						className={clsx(
+							"w-52 relative max-w-xs flex items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-8 cursor-pointer",
+							selectedModules.includes("writing") ? "border-mti-purple-light" : "border-mti-gray-platinum",
+						)}>
+						<div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-writing top-1/2 -translate-y-1/2 left-0 -translate-x-1/2">
+							<BsPen className="text-white w-7 h-7" />
+						</div>
+						<span className="ml-8 font-semibold">Writing</span>
+						{!selectedModules.includes("writing") && !selectedModules.includes("level") && (
+							<div className="border border-mti-gray-platinum w-8 h-8 rounded-full" />
+						)}
+						{selectedModules.includes("level") && <BsXCircle className="text-mti-red-light w-8 h-8" />}
+						{selectedModules.includes("writing") && <BsCheckCircle className="text-mti-purple-light w-8 h-8" />}
+					</div>
+					<div
+						onClick={!selectedModules.includes("level") ? () => toggleModule("speaking") : undefined}
+						className={clsx(
+							"w-52 relative max-w-xs flex items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-8 cursor-pointer",
+							selectedModules.includes("speaking") ? "border-mti-purple-light" : "border-mti-gray-platinum",
+						)}>
+						<div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-speaking top-1/2 -translate-y-1/2 left-0 -translate-x-1/2">
+							<BsMegaphone className="text-white w-7 h-7" />
+						</div>
+						<span className="ml-8 font-semibold">Speaking</span>
+						{!selectedModules.includes("speaking") && !selectedModules.includes("level") && (
+							<div className="border border-mti-gray-platinum w-8 h-8 rounded-full" />
+						)}
+						{selectedModules.includes("level") && <BsXCircle className="text-mti-red-light w-8 h-8" />}
+						{selectedModules.includes("speaking") && <BsCheckCircle className="text-mti-purple-light w-8 h-8" />}
+					</div>
+				</section>
 
-        <section className="w-full flex flex-col gap-3">
-          <span className="font-semibold">
-            Assignees ({assignees.length} selected)
-          </span>
-          <div className="flex gap-4 overflow-x-scroll scrollbar-hide">
-            {groups.map((g) => (
-              <button
-                key={g.id}
-                onClick={() => {
-                  const groupStudentIds = users
-                    .filter((u) => g.participants.includes(u.id))
-                    .map((u) => u.id);
-                  if (groupStudentIds.every((u) => assignees.includes(u))) {
-                    setAssignees((prev) =>
-                      prev.filter((a) => !groupStudentIds.includes(a))
-                    );
-                  } else {
-                    setAssignees((prev) => [
-                      ...prev.filter((a) => !groupStudentIds.includes(a)),
-                      ...groupStudentIds,
-                    ]);
-                  }
-                }}
-                className={clsx(
-                  "bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light",
-                  "transition duration-300 ease-in-out",
-                  users
-                    .filter((u) => g.participants.includes(u.id))
-                    .every((u) => assignees.includes(u.id)) &&
-                    "!bg-mti-purple-light !text-white"
-                )}
-              >
-                {g.name}
-              </button>
-            ))}
-          </div>
-          <div className="flex flex-wrap -md:justify-center gap-4">
-            {users.map((user) => (
-              <div
-                onClick={() => toggleAssignee(user)}
-                className={clsx(
-                  "p-4 flex flex-col gap-2 rounded-xl border cursor-pointer w-72",
-                  "transition ease-in-out duration-300",
-                  assignees.includes(user.id)
-                    ? "border-mti-purple"
-                    : "border-mti-gray-platinum"
-                )}
-                key={user.id}
-              >
-                <span className="flex flex-col gap-0 justify-center">
-                  <span className="font-semibold">{user.name}</span>
-                  <span className="text-sm opacity-80">{user.email}</span>
-                </span>
-                <ProgressBar
-                  color="purple"
-                  textClassName="!text-mti-black/80"
-                  label={`Level ${calculateAverageLevel(user.levels)}`}
-                  percentage={(calculateAverageLevel(user.levels) / 9) * 100}
-                  className="h-6"
-                />
-                <span className="text-mti-black/80 text-sm whitespace-pre-wrap mt-2">
-                  Groups:{" "}
-                  {groups
-                    .filter((g) => g.participants.includes(user.id))
-                    .map((g) => g.name)
-                    .join(", ")}
-                </span>
-              </div>
-            ))}
-          </div>
-        </section>
-        <div className="flex flex-col gap-4 w-full items-end">
-          <Checkbox
-            isChecked={variant === "full"}
-            onChange={() =>
-              setVariant((prev) => (prev === "full" ? "partial" : "full"))
-            }
-          >
-            Full length exams
-          </Checkbox>
-          <Checkbox
-            isChecked={generateMultiple}
-            onChange={() => setGenerateMultiple((d) => !d)}
-          >
-            Generate different exams
-          </Checkbox>
-        </div>
-        <div className="flex gap-4 w-full justify-end">
-          <Button
-            className="w-full max-w-[200px]"
-            variant="outline"
-            onClick={cancelCreation}
-            disabled={isLoading}
-            isLoading={isLoading}
-          >
-            Cancel
-          </Button>
-          {assignment && (
-            <>
-              <Button
-                className="w-full max-w-[200px]"
-                color="green"
-                variant="outline"
-                onClick={startAssignment}
-                disabled={isLoading || moment().isAfter(startDate)}
-                isLoading={isLoading}
-              >
-                Start
-              </Button>
-              <Button
-                className="w-full max-w-[200px]"
-                color="red"
-                variant="outline"
-                onClick={deleteAssignment}
-                disabled={isLoading}
-                isLoading={isLoading}
-              >
-                Delete
-              </Button>
-            </>
-          )}
-          <Button
-            disabled={
-              selectedModules.length === 0 ||
-              !name ||
-              !startDate ||
-              !endDate ||
-              assignees.length === 0 ||
-              (!useRandomExams && examIDs.length < selectedModules.length)
-            }
-            className="w-full max-w-[200px]"
-            onClick={createAssignment}
-            isLoading={isLoading}
-          >
-            {assignment ? "Update" : "Create"}
-          </Button>
-        </div>
-      </div>
-    </Modal>
-  );
+				<Input type="text" name="name" onChange={(e) => setName(e)} defaultValue={name} label="Assignment Name" required />
+
+				<div className="w-full grid -md:grid-cols-1 md:grid-cols-2 gap-8">
+					<div className="flex flex-col gap-2">
+						<label className="font-normal text-base text-mti-gray-dim">Start Date *</label>
+						<ReactDatePicker
+							className={clsx(
+								"p-6 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+								"hover:border-mti-purple tooltip z-10",
+								"transition duration-300 ease-in-out",
+							)}
+							popperClassName="!z-20"
+							filterTime={(date) => moment(date).isSameOrAfter(new Date())}
+							dateFormat="dd/MM/yyyy HH:mm"
+							selected={startDate}
+							showTimeSelect
+							onChange={(date) => setStartDate(date)}
+						/>
+					</div>
+					<div className="flex flex-col gap-2">
+						<label className="font-normal text-base text-mti-gray-dim">End Date *</label>
+						<ReactDatePicker
+							className={clsx(
+								"p-6 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+								"hover:border-mti-purple tooltip z-10",
+								"transition duration-300 ease-in-out",
+							)}
+							popperClassName="!z-20"
+							filterTime={(date) => moment(date).isAfter(startDate)}
+							dateFormat="dd/MM/yyyy HH:mm"
+							selected={endDate}
+							showTimeSelect
+							onChange={(date) => setEndDate(date)}
+						/>
+					</div>
+				</div>
+
+				{selectedModules.includes("speaking") && (
+					<div className="flex flex-col gap-3 w-full">
+						<label className="font-normal text-base text-mti-gray-dim">Speaking Instructor&apos;s Gender</label>
+						<Select
+							value={{
+								value: instructorGender,
+								label: capitalize(instructorGender),
+							}}
+							onChange={(value) => (value ? setInstructorGender(value.value as InstructorGender) : null)}
+							disabled={!selectedModules.includes("speaking") || !!assignment}
+							options={[
+								{value: "male", label: "Male"},
+								{value: "female", label: "Female"},
+								{value: "varied", label: "Varied"},
+							]}
+						/>
+					</div>
+				)}
+
+				{selectedModules.length > 0 && (
+					<div className="flex flex-col gap-3 w-full">
+						<Checkbox isChecked={useRandomExams} onChange={setUseRandomExams}>
+							Random Exams
+						</Checkbox>
+						{!useRandomExams && (
+							<div className="grid md:grid-cols-2 w-full gap-4">
+								{selectedModules.map((module) => (
+									<div key={module} className="flex flex-col gap-3 w-full">
+										<label className="font-normal text-base text-mti-gray-dim">{capitalize(module)} Exam</label>
+										<Select
+											value={{
+												value: examIDs.find((e) => e.module === module)?.id || null,
+												label: examIDs.find((e) => e.module === module)?.id || "",
+											}}
+											onChange={(value) =>
+												value
+													? setExamIDs((prev) => [...prev.filter((x) => x.module !== module), {id: value.value!, module}])
+													: setExamIDs((prev) => prev.filter((x) => x.module !== module))
+											}
+											options={exams
+												.filter((x) => !x.isDiagnostic && x.module === module)
+												.map((x) => ({value: x.id, label: x.id}))}
+										/>
+									</div>
+								))}
+							</div>
+						)}
+					</div>
+				)}
+
+				<section className="w-full flex flex-col gap-3">
+					<span className="font-semibold">Assignees ({assignees.length} selected)</span>
+					<div className="flex gap-4 overflow-x-scroll scrollbar-hide">
+						{groups.map((g) => (
+							<button
+								key={g.id}
+								onClick={() => {
+									const groupStudentIds = users.filter((u) => g.participants.includes(u.id)).map((u) => u.id);
+									if (groupStudentIds.every((u) => assignees.includes(u))) {
+										setAssignees((prev) => prev.filter((a) => !groupStudentIds.includes(a)));
+									} else {
+										setAssignees((prev) => [...prev.filter((a) => !groupStudentIds.includes(a)), ...groupStudentIds]);
+									}
+								}}
+								className={clsx(
+									"bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light",
+									"transition duration-300 ease-in-out",
+									users.filter((u) => g.participants.includes(u.id)).every((u) => assignees.includes(u.id)) &&
+										"!bg-mti-purple-light !text-white",
+								)}>
+								{g.name}
+							</button>
+						))}
+					</div>
+					<div className="flex flex-wrap -md:justify-center gap-4">
+						{users.map((user) => (
+							<div
+								onClick={() => toggleAssignee(user)}
+								className={clsx(
+									"p-4 flex flex-col gap-2 rounded-xl border cursor-pointer w-72",
+									"transition ease-in-out duration-300",
+									assignees.includes(user.id) ? "border-mti-purple" : "border-mti-gray-platinum",
+								)}
+								key={user.id}>
+								<span className="flex flex-col gap-0 justify-center">
+									<span className="font-semibold">{user.name}</span>
+									<span className="text-sm opacity-80">{user.email}</span>
+								</span>
+								<ProgressBar
+									color="purple"
+									textClassName="!text-mti-black/80"
+									label={`Level ${calculateAverageLevel(user.levels)}`}
+									percentage={(calculateAverageLevel(user.levels) / 9) * 100}
+									className="h-6"
+								/>
+								<span className="text-mti-black/80 text-sm whitespace-pre-wrap mt-2">
+									Groups:{" "}
+									{groups
+										.filter((g) => g.participants.includes(user.id))
+										.map((g) => g.name)
+										.join(", ")}
+								</span>
+							</div>
+						))}
+					</div>
+				</section>
+				<div className="flex flex-col gap-4 w-full items-end">
+					<Checkbox isChecked={variant === "full"} onChange={() => setVariant((prev) => (prev === "full" ? "partial" : "full"))}>
+						Full length exams
+					</Checkbox>
+					<Checkbox isChecked={generateMultiple} onChange={() => setGenerateMultiple((d) => !d)}>
+						Generate different exams
+					</Checkbox>
+				</div>
+				<div className="flex gap-4 w-full justify-end">
+					<Button className="w-full max-w-[200px]" variant="outline" onClick={cancelCreation} disabled={isLoading} isLoading={isLoading}>
+						Cancel
+					</Button>
+					{assignment && (
+						<>
+							<Button
+								className="w-full max-w-[200px]"
+								color="green"
+								variant="outline"
+								onClick={startAssignment}
+								disabled={isLoading || moment().isAfter(startDate)}
+								isLoading={isLoading}>
+								Start
+							</Button>
+							<Button
+								className="w-full max-w-[200px]"
+								color="red"
+								variant="outline"
+								onClick={deleteAssignment}
+								disabled={isLoading}
+								isLoading={isLoading}>
+								Delete
+							</Button>
+						</>
+					)}
+					<Button
+						disabled={
+							selectedModules.length === 0 ||
+							!name ||
+							!startDate ||
+							!endDate ||
+							assignees.length === 0 ||
+							(!useRandomExams && examIDs.length < selectedModules.length)
+						}
+						className="w-full max-w-[200px]"
+						onClick={createAssignment}
+						isLoading={isLoading}>
+						{assignment ? "Update" : "Create"}
+					</Button>
+				</div>
+			</div>
+		</Modal>
+	);
 }