Merged in feature/ExamGenRework (pull request #125)

ENCOA-274

Approved-by: Tiago Ribeiro

src/components/ExamEditor/Exercises/Writing/index.tsx

@@ -20,6 +20,9 @@ interface Props {
 
 const Writing: React.FC<Props> = ({ sectionId, exercise, module, index }) => {
     const { currentModule, dispatch } = useExamEditorStore();
+    const { type, academic_url } = useExamEditorStore(
+        (state) => state.modules[currentModule]
+    );
     const { generating, genResult, state } = useExamEditorStore(
         (state) => state.modules[currentModule].sections.find((section) => section.sectionId === sectionId)!
     );
@@ -68,7 +71,7 @@ const Writing: React.FC<Props> = ({ sectionId, exercise, module, index }) => {
                 ...state,
                 isPractice: !local.isPractice
             };
-            setLocal((prev) => ({...prev, isPractice: !local.isPractice}))
+            setLocal((prev) => ({ ...prev, isPractice: !local.isPractice }))
             dispatch({ type: 'UPDATE_SECTION_STATE', payload: { sectionId, update: newState, module: currentModule } });
         }
     });
@@ -96,7 +99,7 @@ const Writing: React.FC<Props> = ({ sectionId, exercise, module, index }) => {
         <>
             <div className={clsx('relative', level ? "px-4 mt-2" : "pb-2")}>
                 <Header
-                    title={`${sectionId === 1 ? "Letter" : "Essay"} Instructions`}
+                    title={`${sectionId === 1 ? (type === "academic" ? "Visual Information" : "Letter") : "Essay"} Instructions`}
                     description='Generate or edit the instructions for the task'
                     editing={editing}
                     handleSave={handleSave}
@@ -112,25 +115,36 @@ const Writing: React.FC<Props> = ({ sectionId, exercise, module, index }) => {
             <div className={clsx(level ? "mt-2 px-4" : "mt-4")}>
                 {loading ?
                     <GenLoader module={currentModule} /> :
-                    (
+                    <>
-                        editing ? (
+                        {
-                            <div className="text-gray-600 p-4">
+                            editing ? (
-                                <AutoExpandingTextArea
+                                <div className="text-gray-600 p-4">
-                                    value={prompt}
+                                    <AutoExpandingTextArea
-                                    onChange={(text) => setPrompt(text)}
+                                        value={prompt}
-                                    placeholder="Instructions ..."
+                                        onChange={(text) => setPrompt(text)}
-                                />
+                                        placeholder="Instructions ..."
+                                    />
+                                </div>
+                            ) : (
+                                <p className={
+                                    clsx("w-full px-7 py-8 border-2 bg-white rounded-3xl whitespace-pre-line",
+                                        prompt === "" ? "text-gray-600/50" : "text-gray-600"
+                                    )
+                                }>
+                                    {prompt === "" ? "Instructions ..." : prompt}
+                                </p>
+                            )
+                        }
+                        {academic_url && sectionId == 1 && (
+                            <div className="flex items-center justify-center mt-8">
+                                <div className="max-w-lg self-center rounded-xl cursor-pointer">
+                                    {/* eslint-disable-next-line @next/next/no-img-element */}
+                                    <img src={academic_url} alt="Visual Information" />
+                                </div>
                             </div>
-                        ) : (
+                        )}
-                            <p className={
+                    </>
-                                clsx("w-full px-7 py-8 border-2 bg-white rounded-3xl whitespace-pre-line",
+                }
-                                    prompt === "" ? "text-gray-600/50" : "text-gray-600"
-                                )
-                            }>
-                                {prompt === "" ? "Instructions ..." : prompt}
-                            </p>
-                        )
-                    )}
             </div>
         </>
     );

src/components/ExamEditor/SettingsEditor/Shared/Generate.ts

@@ -8,6 +8,7 @@ import { Module } from "@/interfaces";
 interface GeneratorConfig {
     method: 'GET' | 'POST';
     queryParams?: Record<string, string>;
+    files?: Record<string, string>;
     body?: Record<string, any>;
 }
 
@@ -66,18 +67,60 @@ export function generate(
 
     const url = `/api/exam/generate/${module}/${sectionId}${queryString ? `?${queryString}` : ''}`;
 
-    const request = config.method === 'POST'
+    let body = null;
-        ? axios.post(url, config.body)
+    console.log(config.files);
-        : axios.get(url);
+    if (config.files && Object.keys(config.files).length > 0 && config.method === 'POST') {
+        const formData = new FormData();
 
-    request
+        const buildForm = async () => {
-        .then((result) => {
+            await Promise.all(
-            playSound("check");
+                Object.entries(config.files ?? {}).map(async ([key, blobUrl]) => {
-            setGeneratedResult(level ? levelSectionId! : sectionId, type, mapData(result.data), level);
+                    const response = await fetch(blobUrl);
-        })
+                    const blob = await response.blob();
-        .catch((error) => {
+                    const file = new File([blob], key, { type: blob.type });
-            setGenerating(sectionId, undefined, level, true);
+                    formData.append(key, file);
-            playSound("error");
+                })
-            toast.error("Something went wrong! Try to generate again.");
+            );
-        })
+
+            if (config.body) {
+                Object.entries(config.body).forEach(([key, value]) => {
+                    formData.append(key, value as string);
+                });
+            }
+            return formData;
+        };
+
+        buildForm().then(form => {
+            body = form;
+
+            const request = axios.post(url, body, { headers: { 'Content-Type': 'multipart/form-data' } });
+            request
+                .then((result) => {
+                    playSound("check");
+                    setGeneratedResult(level ? levelSectionId! : sectionId, type, mapData(result.data), level);
+                })
+                .catch((error) => {
+                    setGenerating(sectionId, undefined, level, true);
+                    playSound("error");
+                    toast.error("Something went wrong! Try to generate again.");
+                });
+        });
+    } else {
+        body = config.body;
+
+        const request = config.method === 'POST'
+            ? axios.post(url, body, { headers: { 'Content-Type': 'application/json' } })
+            : axios.get(url);
+
+        request
+            .then((result) => {
+                playSound("check");
+                setGeneratedResult(level ? levelSectionId! : sectionId, type, mapData(result.data), level);
+            })
+            .catch((error) => {
+                setGenerating(sectionId, undefined, level, true);
+                playSound("error");
+                toast.error("Something went wrong! Try to generate again.");
+            });
+    }
 }

src/components/ExamEditor/SettingsEditor/writing/components.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from "react";
+import React, { useCallback, useRef, useState } from "react";
 import Dropdown from "../Shared/SettingsDropdown";
 import Input from "@/components/Low/Input";
 import { generate } from "../Shared/Generate";
@@ -6,6 +6,8 @@ import GenerateBtn from "../Shared/GenerateBtn";
 import { LevelSectionSettings, WritingSectionSettings } from "@/stores/examEditor/types";
 import useExamEditorStore from "@/stores/examEditor";
 import { WritingExercise } from "@/interfaces/exam";
+import clsx from "clsx";
+import { FaFileUpload } from "react-icons/fa";
 
 
 interface Props {
@@ -15,69 +17,155 @@ interface Props {
     level?: boolean;
 }
 
-const WritingComponents: React.FC<Props> = ({localSettings, updateLocalAndScheduleGlobal, level}) => {
+const WritingComponents: React.FC<Props> = ({ localSettings, updateLocalAndScheduleGlobal, level }) => {
-    const { currentModule } = useExamEditorStore();
+    const { currentModule, dispatch } = useExamEditorStore();
     const {
         difficulty,
         focusedSection,
+        type,
+        academic_url
     } = useExamEditorStore((store) => store.modules["writing"]);
-
     const generatePassage = useCallback((sectionId: number) => {
-        generate(
+        if (type === "academic" && academic_url !== undefined && sectionId == 1) {
-            sectionId,
+            generate(
-            currentModule,
+                sectionId,
-            "writing",
+                currentModule,
-            {
+                "writing",
-                method: 'GET',
+                {
-                queryParams: {
+                    method: 'POST',
-                    difficulty,
+                    queryParams: {
-                    ...(localSettings.writingTopic && { topic: localSettings.writingTopic })
+                        difficulty,
-                }
+                        type: type!
-            },
+                    },
-            (data: any) => [{
+                    files: {
-                prompt: data.question
+                        file: academic_url!,
-            }]
+                    }
-        );
+                },
+                (data: any) => [{
+                    prompt: data.question
+                }]
+            )
+        } else {
+            generate(
+                sectionId,
+                currentModule,
+                "writing",
+                {
+                    method: 'GET',
+                    queryParams: {
+                        difficulty,
+                        type: type!,
+                        ...(localSettings.writingTopic && { topic: localSettings.writingTopic })
+                    }
+                },
+                (data: any) => [{
+                    prompt: data.question
+                }]
+            );
+        }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [localSettings.writingTopic, difficulty]);
+    }, [localSettings.writingTopic, difficulty, academic_url]);
 
     const onTopicChange = useCallback((writingTopic: string) => {
         updateLocalAndScheduleGlobal({ writingTopic });
     }, [updateLocalAndScheduleGlobal]);
 
+    const fileInputRef = useRef<HTMLInputElement>(null);
+
+    const triggerFileInput = () => {
+        fileInputRef.current?.click();
+    };
+
+    const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const file = event.target.files?.[0];
+        if (file) {
+            const blobUrl = URL.createObjectURL(file);
+            if (academic_url !== undefined) {
+                URL.revokeObjectURL(academic_url);
+            }
+            dispatch({ type: "UPDATE_MODULE", payload: { updates: { academic_url: blobUrl } } });
+        }
+    };
+
     return (
         <>
-            <Dropdown
+            {type === "academic" && focusedSection === 1 && <Dropdown
-                title="Generate Instructions"
+                title="Upload Image"
                 module={"writing"}
-                open={localSettings.isWritingTopicOpen}
+                open={localSettings.isImageUploadOpen}
-                setIsOpen={(isOpen: boolean) => updateLocalAndScheduleGlobal({ isWritingTopicOpen: isOpen }, false)}
+                setIsOpen={(isOpen: boolean) => updateLocalAndScheduleGlobal({ isImageUploadOpen: isOpen }, false)}
-                contentWrapperClassName={level ? `border border-ielts-writing`: ''}
+                contentWrapperClassName={level ? `border border-ielts-writing` : ''}
             >
-
                 <div className="flex flex-row gap-2 items-center px-2 pb-4">
-                    <div className="flex flex-col flex-grow gap-4 px-2">
+
-                        <label className="font-normal text-base text-mti-gray-dim">Topic (Optional)</label>
+                    <div className="flex flex-row p-2 gap-4">
-                        <Input
+                        <span className="bg-gray-100 px-3.5 py-2.5 rounded-lg border border-gray-300 text-mti-gray-dim">
+                            Upload a graph, chart or diagram
+                        </span>
+                        <input
+                            type="file"
+                            accept="image/png, image/jpeg"
+                            onChange={handleFileUpload}
+                            style={{ display: 'none' }}
+                            ref={fileInputRef}
+                        />
+                        <button
                             key={`section-${focusedSection}`}
-                            type="text"
+                            className={clsx(
-                            placeholder="Topic"
+                                "flex items-center w-[140px] px-4 py-2 text-white rounded-xl transition-colors duration-300 text-lg disabled:cursor-not-allowed",
-                            name="category"
+                                `bg-ielts-writing/70 border border-ielts-writing hover:bg-ielts-writing disabled:bg-ielts-writing/40`,
-                            onChange={onTopicChange}
+                            )}
-                            roundness="full"
+                            onClick={triggerFileInput}
-                            value={localSettings.writingTopic}
+                        >
-                        />
+                            <div className="flex flex-row">
-                    </div>
+                                <FaFileUpload className="mr-2" size={24} />
-                    <div className="flex self-end h-16 mb-1">
+                                <span>Upload</span>
-                        <GenerateBtn
+                            </div>
-                            genType="writing"
+                        </button>
-                            module={"writing"}
-                            sectionId={focusedSection}
-                            generateFnc={generatePassage}
-                        />
                     </div>
                 </div>
-            </Dropdown>
+            </Dropdown>}
+            {
+                (type !== "academic" || (type === "academic" && academic_url !== undefined)) && <Dropdown
+                    title="Generate Instructions"
+                    module={"writing"}
+                    open={localSettings.isWritingTopicOpen}
+                    setIsOpen={(isOpen: boolean) => updateLocalAndScheduleGlobal({ isWritingTopicOpen: isOpen }, false)}
+                    contentWrapperClassName={level ? `border border-ielts-writing` : ''}
+                >
+
+                    <div className="flex flex-row gap-2 items-center px-2 pb-4">
+                        {type !== "academic" ?
+                            <div className="flex flex-col flex-grow gap-4 px-2">
+                                <label className="font-normal text-base text-mti-gray-dim">Topic (Optional)</label>
+                                <Input
+                                    key={`section-${focusedSection}`}
+                                    type="text"
+                                    placeholder="Topic"
+                                    name="category"
+                                    onChange={onTopicChange}
+                                    roundness="full"
+                                    value={localSettings.writingTopic}
+                                />
+                            </div>
+                            :
+                            <div className="flex flex-col flex-grow gap-4 px-2">
+                                <span className="bg-gray-100 px-3.5 py-2.5 rounded-lg border border-gray-300 text-mti-gray-dim">
+                                    Generate instructions based on the uploaded image.
+                                </span>
+                            </div>
+                        }
+                        <div className="flex self-end h-16 mb-1">
+                            <GenerateBtn
+                                genType="writing"
+                                module={"writing"}
+                                sectionId={focusedSection}
+                                generateFnc={generatePassage}
+                            />
+                        </div>
+                    </div>
+                </Dropdown>
+            }
         </>
     );
 };

src/components/ExamEditor/SettingsEditor/writing/index.tsx

@@ -8,7 +8,6 @@ import { useRouter } from "next/router";
 import { usePersistentExamStore } from "@/stores/exam";
 import openDetachedTab from "@/utils/popout";
 import { WritingExam, WritingExercise } from "@/interfaces/exam";
-import { v4 } from "uuid";
 import axios from "axios";
 import { playSound } from "@/utils/sound";
 import { toast } from "react-toastify";
@@ -25,7 +24,8 @@ const WritingSettings: React.FC = () => {
         isPrivate,
         sections,
         focusedSection,
-        type
+        type,
+        academic_url
     } = useExamEditorStore((store) => store.modules["writing"]);
 
     const states = sections.flatMap((s) => s.state) as WritingExercise[];
@@ -58,8 +58,16 @@ const WritingSettings: React.FC = () => {
 
     const openTab = () => {
         setExam({
-            exercises: sections.map((s) => {
+            exercises: sections.map((s, index) => {
                 const exercise = s.state as WritingExercise;
+                if (type === "academic" && index == 0 && academic_url) {
+                    console.log("Added the URL");
+                    exercise["attachment"] = {
+                        url: academic_url,
+                        description: "Visual Information"
+                    }
+                }
+
                 return {
                     ...exercise,
                     intro: s.settings.currentIntro,
@@ -79,36 +87,66 @@ const WritingSettings: React.FC = () => {
         openDetachedTab("popout?type=Exam&module=writing", router)
     }
 
-    const submitWriting = () => {
+    const submitWriting = async () => {
-        const exam: WritingExam = {
+        if (title === "") {
-            exercises: sections.map((s) => {
+            toast.error("Enter a title for the exam!");
-                const exercise = s.state as WritingExercise;
+            return;
-                return {
+        }
-                    ...exercise,
+        try {
-                    intro: localSettings.currentIntro,
+            let firebase_url: string | undefined = undefined;
-                    category: localSettings.category
+            if (type === "academic" && academic_url) {
-                };
+                const formData = new FormData();
-            }),
+                const fetchedBlob = await fetch(academic_url);
-            minTimer,
+                const blob = await fetchedBlob.blob();
-            module: "writing",
+                formData.append('file', blob);
-            id: title,
-            isDiagnostic: false,
-            variant: undefined,
-            difficulty,
-            private: isPrivate,
-            type: type!
-        };
 
-        axios
+                const response = await axios.post('/api/storage', formData, {
-            .post(`/api/exam/reading`, exam)
+                    params: {
-            .then((result) => {
+                        directory: 'writing_attachments'
-                playSound("sent");
+                    },
-                toast.success(`Submitted Exam ID: ${result.data.id}`);
+                    headers: {
-            })
+                        'Content-Type': 'multipart/form-data'
-            .catch((error) => {
+                    }
-                console.log(error);
+                });
-                toast.error(error.response.data.error || "Something went wrong while submitting, please try again later.");
+                firebase_url = response.data.urls[0];
-            })
+            }
+
+            const exam: WritingExam = {
+                exercises: sections.map((s, index) => {
+                    const exercise = s.state as WritingExercise;
+                    if (index == 0 && firebase_url) {
+                        exercise["attachment"] = {
+                            url: firebase_url,
+                            description: "Visual Information"
+                        }
+                    }
+
+                    return {
+                        ...exercise,
+                        intro: localSettings.currentIntro,
+                        category: localSettings.category
+                    };
+                }),
+                minTimer,
+                module: "writing",
+                id: title,
+                isDiagnostic: false,
+                variant: undefined,
+                difficulty,
+                private: isPrivate,
+                type: type!
+            };
+
+            const result = await axios.post(`/api/exam/writing`, exam)
+            playSound("sent");
+            toast.success(`Submitted Exam ID: ${result.data.id}`);
+
+        } catch (error: any) {
+            console.error('Error submitting exam:', error);
+            toast.error(
+                "Something went wrong while submitting, please try again later."
+            );
+        }
     }
 
     return (

src/components/UserImportSummary/ExcelError.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { FiAlertCircle } from "react-icons/fi";
+import Dropdown from '../Dropdown';
+import { errorsByRows, ExcelError } from '@/utils/excel.errors';
+
+const ParseExcelErrors: React.FC<{ errors: ExcelError[] }> = (props) => {
+    const errorsByRow = errorsByRows(props.errors);
+
+    const ErrorTitle = (row: string) => (
+        <div className="flex gap-2 items-center w-full">
+            <FiAlertCircle className="text-red-500 h-5 w-5" />
+            <h3 className="text-sm font-medium text-red-800">
+                Errors found in row {row}
+            </h3>
+        </div>
+    );
+
+    return (
+        <div className="space-y-4">
+            {Object.entries(errorsByRow).map(([row, rowErrors]) => (
+                <div key={`row-${row}`} className="bg-red-50 rounded-lg">
+                    <Dropdown
+                        customTitle={ErrorTitle(row)}
+                        className="w-full text-left font-semibold flex justify-between items-center p-4"
+                        contentWrapperClassName="px-4 pb-4"
+                    >
+                        <div className="space-y-3">
+                            {rowErrors.required.length > 0 && (
+                                <div className="bg-white/50 rounded border border-red-200 p-2 text-sm text-red-700 hover:bg-white transition-colors">
+                                    <div className="font-medium">
+                                        Missing values:
+                                    </div>
+                                    <div className="text-red-600 mt-1 ml-2">
+                                        <span>
+                                            On columns:&nbsp;
+                                        </span>
+                                        <span className="font-mono bg-red-100/50 px-1 rounded">
+                                            {rowErrors.required.join(', ')}
+                                        </span>
+                                    </div>
+                                </div>
+                            )}
+
+                            {rowErrors.other.length > 0 && (
+                                <div className="space-y-2">
+                                    {rowErrors.other.map((error, index) => (
+                                        <div
+                                            key={`validation-${index}`}
+                                            className="bg-white/50 rounded border border-red-200 p-2 text-sm text-red-700 hover:bg-white transition-colors"
+                                        >
+                                            <div className="font-medium">
+                                                {error.error}:
+                                            </div>
+                                            <div className="text-red-600 mt-1 ml-2">
+                                                Value
+                                                <span className="font-mono bg-red-100/50 px-1 mx-2 rounded">
+                                                    {error.value}
+                                                </span>
+                                                in column
+                                                <span className="font-mono bg-red-100/50 px-1 mx-2 rounded">
+                                                    {error.column}
+                                                </span>
+                                                is invalid!
+                                            </div>
+                                        </div>
+                                    ))}
+                                </div>
+                            )}
+                        </div>
+                    </Dropdown>
+                </div>
+            ))}
+        </div>
+    );
+};
+
+export default ParseExcelErrors;

src/components/UserImportSummary/index.tsx

@@ -0,0 +1,298 @@
+import React, { useState, useMemo } from 'react';
+import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
+import {
+    FaCheckCircle,
+    FaTimesCircle,
+    FaExclamationCircle,
+    FaInfoCircle,
+    FaUsers,
+    FaExclamationTriangle
+} from 'react-icons/fa';
+import { UserImport } from '@/interfaces/IUserImport';
+import Modal from '../Modal';
+import ParseExcelErrors from './ExcelError';
+import { errorsByRows, ExcelError } from '@/utils/excel.errors';
+import UserTable from '../UserTable';
+
+interface Props {
+    parsedExcel: { rows?: any[]; errors?: any[] },
+    newUsers: UserImport[],
+    enlistedUsers: UserImport[],
+    duplicateRows?: { duplicates: DuplicatesMap, count: number }
+}
+
+export interface DuplicatesMap {
+    studentID: Map<string, number[]>;
+    email: Map<string, number[]>;
+    passport_id: Map<string, number[]>;
+    phone: Map<string, number[]>;
+}
+
+interface ClassroomCounts {
+    [key: string]: number;
+}
+
+
+const UserImportSummary: React.FC<Props> = ({ parsedExcel, newUsers, enlistedUsers, duplicateRows }) => {
+    const [showErrorsModal, setShowErrorsModal] = useState(false);
+    const [showDuplicatesModal, setShowDuplicatesModal] = useState(false);
+    const [showEnlistedModal, setShowEnlistedModal] = useState(false);
+    const [showClassroomModal, setShowClassromModal] = useState(false);
+
+    const classroomCounts = useMemo(() => {
+        return newUsers.reduce((acc: ClassroomCounts, user) => {
+            const group = user.groupName;
+            acc[group] = (acc[group] || 0) + 1;
+            return acc;
+        }, {});
+    }, [newUsers]);
+
+    const errorCount = Object.entries(errorsByRows(parsedExcel.errors as ExcelError[])).length || 0;
+
+    const fieldMapper = {
+        "studentID": "Student ID",
+        "passport_id": "Passport/National ID",
+        "phone": "Phone Number",
+        "email": "E-mail"
+    }
+
+    return (
+        <>
+            <Card>
+                <CardHeader>
+                    <CardTitle className='flex justify-center font-semibold text-xl'>Import Summary</CardTitle>
+                </CardHeader>
+                <CardContent>
+                    <div className="space-y-4">
+                        <div className="flex items-center gap-2">
+                            <FaInfoCircle className="h-5 w-5 text-blue-500" />
+                            <span>
+                                {`${parsedExcel.rows?.length} total spreadsheet rows`}
+                                {parsedExcel.rows && parsedExcel.rows.filter(row => row === null).length > 0 && (
+                                    <span className="text-gray-500">
+                                        {` (${parsedExcel.rows.filter(row => row === null).length} empty)`}
+                                    </span>
+                                )}
+                            </span>
+                        </div>
+                        <div className="flex items-center justify-between">
+                            <div className="flex items-center gap-2">
+                                {newUsers.length > 0 ? (
+                                    <FaCheckCircle className="h-5 w-5 text-green-500" />
+                                ) : (
+                                    <FaTimesCircle className="h-5 w-5 text-red-500" />
+                                )}
+                                <span>{`${newUsers.length} new user${newUsers.length > 1 ? "s" : ''} to import`}</span>
+                            </div>
+                            {newUsers.length > 0 && (
+                                <button
+                                    onClick={() => setShowClassromModal(true)}
+                                    className="inline-flex items-center justify-center px-3 py-1.5 text-sm font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-md transition-colors"
+                                >
+                                    View by classroom
+                                </button>
+                            )}
+                        </div>
+
+                        {enlistedUsers.length > 0 && (
+                            <div className="flex items-center justify-between">
+                                <div className="flex items-center gap-2">
+                                    <FaUsers className="h-5 w-5 text-blue-500" />
+                                    <span>{`${enlistedUsers.length} already registered user${enlistedUsers.length > 1 ? "s" : ''}`}</span>
+                                </div>
+                                <button
+                                    onClick={() => setShowEnlistedModal(true)}
+                                    className="inline-flex items-center justify-center px-3 py-1.5 text-sm font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-md transition-colors"
+                                >
+                                    View details
+                                </button>
+                            </div>
+                        )}
+
+                        {(duplicateRows && duplicateRows.count > 0) && (
+                            <div className="flex items-center justify-between">
+                                <div className="flex items-center gap-2">
+                                    <FaExclamationCircle className="h-5 w-5 text-yellow-500" />
+                                    <span>{duplicateRows.count} duplicate entries in file</span>
+                                </div>
+                                <button
+                                    onClick={() => setShowDuplicatesModal(true)}
+                                    className="inline-flex items-center justify-center px-3 py-1.5 text-sm font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-md transition-colors"
+                                >
+                                    View duplicates
+                                </button>
+                            </div>
+                        )}
+
+                        {errorCount > 0 && (
+                            <div className="flex items-center justify-between">
+                                <div className="flex items-center gap-2">
+                                    <FaTimesCircle className="h-5 w-5 text-red-500" />
+                                    <span>{errorCount} invalid rows</span>
+                                </div>
+                                <button
+                                    onClick={() => setShowErrorsModal(true)}
+                                    className="inline-flex items-center justify-center px-3 py-1.5 text-sm font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-md transition-colors"
+                                >
+                                    View errors
+                                </button>
+                            </div>
+                        )}
+                    </div>
+                    {(enlistedUsers.length > 0 || (duplicateRows && duplicateRows.count > 0) || errorCount > 0) && (
+                        <div className="mt-6 rounded-lg border border-red-100 bg-white p-6">
+                            <div className="flex items-start gap-4">
+                                <div className="mt-1">
+                                    <FaExclamationTriangle className="h-5 w-5 text-red-400" />
+                                </div>
+                                <div className="flex-1 space-y-3">
+                                    <p className="font-medium text-gray-900">
+                                        The following will be excluded from import:
+                                    </p>
+                                    <ul className="space-y-4">
+                                        {duplicateRows && duplicateRows.count > 0 && (
+                                            <li>
+                                                <div className="text-gray-700">
+                                                    <span className="font-medium">{duplicateRows.count}</span> rows with duplicate values
+                                                </div>
+                                                <div className="mt-2 space-y-1.5">
+                                                    {(Object.keys(duplicateRows.duplicates) as Array<keyof DuplicatesMap>).map(field => {
+                                                        const duplicates = Array.from(duplicateRows.duplicates[field].entries())
+                                                            .filter((entry) => entry[1].length > 1);
+                                                        if (duplicates.length === 0) return null;
+                                                        return (
+                                                            <div key={field} className="ml-4 text-sm text-gray-600">
+                                                                <span className="text-gray-500">{field}:</span> rows {
+                                                                    duplicates.map(([_, rows]) => rows.join(', ')).join('; ')
+                                                                }
+                                                            </div>
+                                                        );
+                                                    })}
+                                                </div>
+                                            </li>
+                                        )}
+                                        {errorCount > 0 && (
+                                            <li>
+                                                <div className="text-gray-700">
+                                                    <span className="font-medium">{errorCount}</span> rows with invalid or missing information
+                                                </div>
+                                                <div className="mt-1 ml-4 text-sm text-gray-600">
+                                                    Rows: {Object.keys(errorsByRows(parsedExcel.errors || [])).join(', ')}
+                                                </div>
+                                            </li>
+                                        )}
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                    )}
+                </CardContent>
+            </Card>
+
+            <Modal isOpen={showErrorsModal} onClose={() => setShowErrorsModal(false)}>
+                <>
+                    <div className="flex items-center gap-2 mb-6">
+                        <FaTimesCircle className="w-5 h-5 text-red-500" />
+                        <h2 className="text-lg font-semibold text-gray-900">Validation Errors</h2>
+                    </div>
+                    <ParseExcelErrors errors={parsedExcel.errors!} />
+                </>
+            </Modal>
+
+            <Modal isOpen={showEnlistedModal} onClose={() => setShowEnlistedModal(false)}>
+                <>
+                    <div className="flex items-center gap-2 mb-6">
+                        <FaUsers className="w-5 h-5 text-blue-500" />
+                        <h2 className="text-lg font-semibold text-gray-900">Already Registered Users</h2>
+                    </div>
+                    <div className="flex w-full flex-col gap-4">
+                        <UserTable users={enlistedUsers} />
+                    </div>
+                </>
+            </Modal>
+
+            <Modal isOpen={showDuplicatesModal} onClose={() => setShowDuplicatesModal(false)}>
+                <>
+                    <div className="flex items-center gap-2 mb-6">
+                        <FaExclamationCircle className="w-5 h-5 text-amber-500" />
+                        <h2 className="text-lg font-semibold text-gray-900">Duplicate Entries</h2>
+                    </div>
+                    {duplicateRows &&
+                        < div className="space-y-6">
+                            {(Object.keys(duplicateRows.duplicates) as Array<keyof DuplicatesMap>).map(field => {
+                                const duplicates = Array.from(duplicateRows!.duplicates[field].entries())
+                                    .filter((entry): entry is [string, number[]] => entry[1].length > 1);
+
+                                if (duplicates.length === 0) return null;
+
+                                return (
+                                    <div key={field} className="relative">
+                                        <div className="flex items-center gap-2 mb-3">
+                                            <h2 className="text-md font-medium text-gray-700">
+                                                {fieldMapper[field]} duplicates
+                                            </h2>
+                                            <span className="text-xs text-gray-500 ml-auto">
+                                                {duplicates.length} {duplicates.length === 1 ? 'duplicate' : 'duplicates'}
+                                            </span>
+                                        </div>
+
+                                        <div className="space-y-2">
+                                            {duplicates.map(([value, rows]) => (
+                                                <div
+                                                    key={value}
+                                                    className="group relative rounded-lg border border-gray-200 bg-gray-50 p-3 hover:bg-gray-100 transition-colors"
+                                                >
+                                                    <div className="flex items-start justify-between">
+                                                        <div>
+                                                            <span className="font-medium text-gray-900">{value}</span>
+                                                            <div className="mt-1 text-sm text-gray-600">
+                                                                Appears in rows:
+                                                                <span className="ml-1 text-blue-600 font-medium">
+                                                                    {rows.join(', ')}
+                                                                </span>
+                                                            </div>
+                                                        </div>
+                                                        <span className="text-xs text-gray-500">
+                                                            {rows.length} occurrences
+                                                        </span>
+                                                    </div>
+                                                </div>
+                                            ))}
+                                        </div>
+                                    </div>
+                                );
+                            })}
+                        </div>
+                    }
+                </>
+            </Modal >
+
+            <Modal isOpen={showClassroomModal} onClose={() => setShowClassromModal(false)}>
+                <>
+                    <div className="flex items-center gap-2 mb-6">
+                        <FaCheckCircle className="w-5 h-5 text-green-500" />
+                        <h2 className="text-lg font-semibold text-gray-900">Students by Classroom</h2>
+                    </div>
+                    <div className="space-y-3">
+                        {Object.entries(classroomCounts).map(([classroom, count]) => (
+                            <div
+                                key={classroom}
+                                className="flex justify-between items-center rounded-lg border border-gray-200 bg-gray-50 p-3 hover:bg-gray-100 transition-colors"
+                            >
+                                <div className="flex items-center gap-2">
+                                    <span className="text-gray-700">{classroom}</span>
+                                </div>
+                                <div className="flex items-center gap-1">
+                                    <span className="text-sm font-medium text-gray-900">{count}</span>
+                                    <span className="text-sm text-gray-500">students</span>
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                </>
+            </Modal>
+        </>
+    );
+};
+
+export default UserImportSummary;

src/pages/(admin)/Lists/BatchCreateUser.tsx

@@ -6,14 +6,13 @@ import { toast } from "react-toastify";
 import { useFilePicker } from "use-file-picker";
 import readXlsxFile from "read-excel-file";
 import Modal from "@/components/Modal";
-import { BsQuestionCircleFill } from "react-icons/bs";
 import { PermissionType } from "@/interfaces/permissions";
 import moment from "moment";
 import { checkAccess, getTypesOfUser } from "@/utils/permissions";
 import Checkbox from "@/components/Low/Checkbox";
 import ReactDatePicker from "react-datepicker";
 import clsx from "clsx";
-import countryCodes from "country-codes-list";
+import countryCodes, { CountryData } from "country-codes-list";
 import { User, Type as UserType } from "@/interfaces/user";
 import { Type, UserImport } from "../../../interfaces/IUserImport";
 import UserTable from "../../../components/UserTable";
@@ -22,6 +21,7 @@ import Select from "@/components/Low/Select";
 import { IoInformationCircleOutline } from "react-icons/io5";
 import { FaFileDownload } from "react-icons/fa";
 import { HiOutlineDocumentText } from "react-icons/hi";
+import UserImportSummary, { DuplicatesMap } from "@/components/UserImportSummary";
 
 const EMAIL_REGEX = new RegExp(/^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$/);
 
@@ -71,11 +71,14 @@ interface Props {
 	onFinish: () => void;
 }
 
+
 export default function BatchCreateUser({ user, entities = [], permissions, onFinish }: Props) {
 	const [infos, setInfos] = useState<UserImport[]>([]);
+	const [parsedExcel, setParsedExcel] = useState<{ rows?: any[]; errors?: any[] }>({ rows: undefined, errors: undefined });
 
 	const [duplicatedUsers, setDuplicatedUsers] = useState<UserImport[]>([]);
 	const [newUsers, setNewUsers] = useState<UserImport[]>([]);
+	const [duplicatedRows, setDuplicatedRows] = useState<{ duplicates: DuplicatesMap, count: number }>();
 
 	const [isLoading, setIsLoading] = useState(false);
 	const [expiryDate, setExpiryDate] = useState<Date | null>(
@@ -96,61 +99,187 @@ export default function BatchCreateUser({ user, entities = [], permissions, onFi
 		if (!isExpiryDateEnabled) setExpiryDate(null);
 	}, [isExpiryDateEnabled]);
 
+	const schema = {
+		'First Name': {
+			prop: 'firstName',
+			type: String,
+			required: true,
+			validate: (value: string) => {
+				if (!value || value.trim() === '') {
+					throw new Error('First Name cannot be empty')
+				}
+				return true
+			}
+		},
+		'Last Name': {
+			prop: 'lastName',
+			type: String,
+			required: true,
+			validate: (value: string) => {
+				if (!value || value.trim() === '') {
+					throw new Error('Last Name cannot be empty')
+				}
+				return true
+			}
+		},
+		'Student ID': {
+			prop: 'studentID',
+			type: String,
+			required: true,
+			validate: (value: string) => {
+				if (!value || value.trim() === '') {
+					throw new Error('Student ID cannot be empty')
+				}
+				return true
+			}
+		},
+		'Passport/National ID': {
+			prop: 'passport_id',
+			type: String,
+			required: true,
+			validate: (value: string) => {
+				if (!value || value.trim() === '') {
+					throw new Error('Passport/National ID cannot be empty')
+				}
+				return true
+			}
+		},
+		'E-mail': {
+			prop: 'email',
+			required: true,
+			type: (value: any) => {
+				if (!value || value.trim() === '') {
+					throw new Error('Email cannot be empty')
+				}
+				if (!EMAIL_REGEX.test(value.trim())) {
+					throw new Error('Invalid Email')
+				}
+				return value
+			}
+		},
+		'Phone Number': {
+			prop: 'phone',
+			type: Number,
+			required: true,
+			validate: (value: number) => {
+				if (value === null || value === undefined || String(value).trim() === '') {
+					throw new Error('Phone Number cannot be empty')
+				}
+				return true
+			}
+		},
+		'Classroom Name': {
+			prop: 'group',
+			type: String,
+			required: true,
+			validate: (value: string) => {
+				if (!value || value.trim() === '') {
+					throw new Error('Classroom Name cannot be empty')
+				}
+				return true
+			}
+		},
+		'Country': {
+			prop: 'country',
+			type: (value: any) => {
+				if (!value || value.trim() === '') {
+					throw new Error('Country cannot be empty')
+				}
+				const validCountry = countryCodes.findOne("countryCode" as any, value.toUpperCase()) ||
+					countryCodes.all().find((x) => x.countryNameEn.toLowerCase() === value.toLowerCase());
+				if (!validCountry) {
+					throw new Error('Invalid Country/Country Code')
+				}
+				return validCountry;
+			},
+			required: true
+		}
+	}
+
 	useEffect(() => {
 		if (filesContent.length > 0) {
 			const file = filesContent[0];
-			readXlsxFile(file.content).then((rows) => {
+			readXlsxFile(
-				try {
+				file.content, { schema, ignoreEmptyRows: false })
-					const information = uniqBy(
+				.then((data) => {
-						rows
+					setParsedExcel(data)
-							.map((row) => {
+				});
-								const [firstName, lastName, studentID, passport_id, email, phone, group, country] = row as string[];
-								const countryItem =
-									countryCodes.findOne("countryCode" as any, country.toUpperCase()) ||
-									countryCodes.all().find((x) => x.countryNameEn.toLowerCase() === country.toLowerCase());
-
-								return EMAIL_REGEX.test(email.toString().trim())
-									? {
-										email: email.toString().trim().toLowerCase(),
-										name: `${firstName ?? ""} ${lastName ?? ""}`.trim(),
-										type: type,
-										passport_id: passport_id?.toString().trim() || undefined,
-										groupName: group,
-										studentID,
-										entity,
-										demographicInformation: {
-											country: countryItem?.countryCode,
-											passport_id: passport_id?.toString().trim() || undefined,
-											phone: phone.toString(),
-										},
-									}
-									: undefined;
-							})
-							.filter((x) => !!x) as typeof infos,
-						(x) => x.email,
-					);
-
-					if (information.length === 0) {
-						toast.error(
-							"Please upload an Excel file containing user information, one per line! All already registered e-mails have also been ignored!",
-						);
-						return clear();
-					}
-
-					setInfos(information);
-				} catch (e) {
-					console.log(e)
-
-					toast.error(
-						"Please upload an Excel file containing user information, one per line! All already registered e-mails have also been ignored!",
-					);
-					return clear();
-				}
-			});
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [filesContent]);
 
+	useEffect(() => {
+		if (parsedExcel.rows) {
+			const duplicates: DuplicatesMap = {
+				studentID: new Map(),
+				email: new Map(),
+				passport_id: new Map(),
+				phone: new Map()
+			};
+			const duplicateValues = new Set<string>();
+			const duplicateRowIndices = new Set<number>();
+
+			const errorRowIndices = new Set(
+				parsedExcel.errors?.map(error => error.row) || []
+			);
+
+			parsedExcel.rows.forEach((row, index) => {
+				if (!errorRowIndices.has(index + 2)) {
+					(Object.keys(duplicates) as Array<keyof DuplicatesMap>).forEach(field => {
+						if (row !== null) {
+							const value = row[field];
+							if (value) {
+								if (!duplicates[field].has(value)) {
+									duplicates[field].set(value, [index + 2]);
+								} else {
+									const existingRows = duplicates[field].get(value);
+									if (existingRows) {
+										existingRows.push(index + 2);
+										duplicateValues.add(value);
+										existingRows.forEach(rowNum => duplicateRowIndices.add(rowNum));
+									}
+								}
+							}
+						}
+					});
+				}
+			});
+
+			const infos = parsedExcel.rows
+				.map((row, index) => {
+					if (errorRowIndices.has(index + 2) || duplicateRowIndices.has(index + 2) || row === null) {
+						return undefined;
+					}
+					const { firstName, lastName, studentID, passport_id, email, phone, group, country } = row;
+					if (!email || !EMAIL_REGEX.test(email.toString().trim())) {
+						return undefined;
+					}
+
+					return {
+						email: email.toString().trim().toLowerCase(),
+						name: `${firstName ?? ""} ${lastName ?? ""}`.trim(),
+						type: type,
+						passport_id: passport_id?.toString().trim() || undefined,
+						groupName: group,
+						studentID,
+						entity,
+						demographicInformation: {
+							country: country?.countryCode,
+							passport_id: passport_id?.toString().trim() || undefined,
+							phone: phone.toString(),
+						},
+					} as UserImport;
+				})
+				.filter((item): item is UserImport => item !== undefined);
+
+			setDuplicatedRows({ duplicates, count: duplicateRowIndices.size });
+			setInfos(infos);
+			setNewUsers([]);
+			setDuplicatedUsers([]);
+		}
+	}, [entity, parsedExcel, type]);
+
+
 	useEffect(() => {
 		const crossReferenceEmails = async () => {
 			try {
@@ -185,12 +314,12 @@ export default function BatchCreateUser({ user, entities = [], permissions, onFi
 		if (!confirm(`You are about to ${[newUsersSentence, existingUsersSentence].filter((x) => !!x).join(" and ")}, are you sure you want to continue?`))
 			return;
 
-		/*Promise.all(duplicatedUsers.map(async (u) => await axios.post(`/api/invites`, {to: u.id, entity, from: user.id})))
+		Promise.all(newUsers.map(async (u) => await axios.post(`/api/invites`, { to: u.id, entity, from: user.id })))
-			.then(() => toast.success(`Successfully invited ${duplicatedUsers.length} registered student(s)!`))
+			.then(() => toast.success(`Successfully invited ${newUsers.length} registered student(s)!`))
 			.finally(() => {
 				if (newUsers.length === 0) setIsLoading(false);
 			});
-		*/
+
 		if (newUsers.length > 0) {
 			setIsLoading(true);
 
@@ -246,7 +375,7 @@ export default function BatchCreateUser({ user, entities = [], permissions, onFi
 									be an Excel .xlsx document.
 								</li>
 								<li className="text-gray-700 list-disc">
-									only have a single spreadsheet with only the following 8 columns in the <b>same order</b>:
+									only have a single spreadsheet with the following <b>exact same name</b> columns:
 									<div className="py-4 pr-4">
 										<table className="w-full bg-white">
 											<thead>
@@ -281,7 +410,7 @@ export default function BatchCreateUser({ user, entities = [], permissions, onFi
 									all already registered e-mails will be ignored.
 								</li>
 								<li className="text-gray-700 list-disc">
-									the spreadsheet may have a header row with the format above, however, it is not necessary as long the columns are in the <b>right order</b>.
+									all rows which contain duplicate values in the columns: &quot;Student ID&quot;, &quot;Passport/National ID&quot;, &quot;E-mail&quot;, will be ignored.
 								</li>
 								<li className="text-gray-700 list-disc">
 									all of the e-mails in the file will receive an e-mail to join EnCoach with the role selected below.
@@ -380,20 +509,16 @@ export default function BatchCreateUser({ user, entities = [], permissions, onFi
 							))}
 					</select>
 				)}
+				{parsedExcel.rows !== undefined && <UserImportSummary parsedExcel={parsedExcel} newUsers={newUsers} enlistedUsers={duplicatedUsers} duplicateRows={duplicatedRows} />}
 				{newUsers.length !== 0 && (
 					<div className="flex w-full flex-col gap-4">
 						<span className="text-mti-gray-dim text-base font-normal">New Users:</span>
 						<UserTable users={newUsers} />
 					</div>
 				)}
-				{duplicatedUsers.length !== 0 && (
+				{(duplicatedUsers.length !== 0 && newUsers.length === 0) && <span className="text-red-500 font-bold">The imported .csv only contains duplicated users!</span>}
-					<div className="flex w-full flex-col gap-4">
-						<span className="text-mti-gray-dim text-base font-normal">Duplicated Users:</span>
-						<UserTable users={duplicatedUsers} />
-					</div>
-				)}
 				<Button className="my-auto mt-4" onClick={makeUsers} disabled={newUsers.length === 0}>
-					Create {newUsers.length !== 0 ? `${newUsers.length} New Users` : ''}
+					Create {newUsers.length !== 0 ? `${newUsers.length} new user${newUsers.length > 1 ? 's' : ''}` : ''}
 				</Button>
 			</div>
 		</>

src/pages/(exam)/ExamPage.tsx

@@ -11,7 +11,7 @@ import Reading from "@/exams/Reading";
 import Selection from "@/exams/Selection";
 import Speaking from "@/exams/Speaking";
 import Writing from "@/exams/Writing";
-import { Exam, LevelExam, UserSolution, Variant } from "@/interfaces/exam";
+import { Exam, LevelExam, UserSolution, Variant, WritingExam } from "@/interfaces/exam";
 import { User } from "@/interfaces/user";
 import { evaluateSpeakingAnswer, evaluateWritingAnswer } from "@/utils/evaluation";
 import { getExam } from "@/utils/exams";
@@ -127,7 +127,7 @@ export default function ExamPage({ page, user, destination = "/", hideSidebar =
 					await Promise.all(
 						exam.exercises.map(async (exercise, index) => {
 							if (exercise.type === "writing")
-								await evaluateWritingAnswer(user.id, sessionId, exercise, index + 1, userSolutions.find((x) => x.exercise === exercise.id)!);
+								await evaluateWritingAnswer(user.id, sessionId, exercise, index + 1, userSolutions.find((x) => x.exercise === exercise.id)!, exercise.attachment?.url);
 
 							if (exercise.type === "interactiveSpeaking" || exercise.type === "speaking") {
 								await evaluateSpeakingAnswer(

src/pages/api/exam/[module]/index.ts

@@ -65,7 +65,8 @@ async function POST(req: NextApiRequest, res: NextApiResponse) {
 			// Check whether the id of the exam matches another exam with different
 			// owners, throw exception if there is, else allow editing
 			const ownersSet = new Set(docSnap?.owners || []);
-			if (docSnap?.owners?.length === exam.owners.lenght && exam.owners.every((e: string) => ownersSet.has(e))) {
+
+			if (docSnap !== null && docSnap?.owners?.length === exam.owners.lenght && exam.owners.every((e: string) => ownersSet.has(e))) {
 				throw new Error("Name already exists");
 			}
 

src/pages/api/exam/generate/[...module].ts

@@ -31,6 +31,7 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
 	if (!req.session.user) return res.status(401).json({ ok: false });
 
 	const queryParams = queryToURLSearchParams(req);
+
 	let endpoint = queryParams.getAll('module').join("/");
 	
 	if (endpoint.startsWith("level")) {
@@ -41,12 +42,27 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
 		endpoint = "reading/"
 	}
 
-	const result = await axios.post(`${process.env.BACKEND_URL}/${endpoint}`,
+	queryParams.delete('module');
-		req.body,
+	const queryString = queryParams.toString();
-		{
-			headers: { Authorization: `Bearer ${process.env.BACKEND_JWT}` },
-		},
-	);
 
-	res.status(200).json(result.data);
+	const hasFiles = req.headers['content-type']?.startsWith('multipart/form-data');
+
+    // https://github.com/vercel/next.js/discussions/36153#discussioncomment-3029675
+	// This just proxies the request
+
+	const { data } = await axios.post(
+		`${process.env.BACKEND_URL}/${endpoint}${hasFiles ? '/attachment' : ''}${queryString.length > 0 ? `?${queryString}` : ''}`, req, {
+		responseType: "stream",
+		headers: {
+			"Content-Type": req.headers["content-type"],
+			Authorization: `Bearer ${process.env.BACKEND_JWT}`,
+		},
+	});
+	data.pipe(res);
 }
+
+export const config = {
+	api: {
+		bodyParser: false,
+	},
+};

src/pages/generation.tsx

@@ -93,6 +93,11 @@ export default function Generation({ id, user, exam, examModule, permissions }:
 	useEffect(() => {
 		return () => {
 			const state = modules;
+
+			if (state.writing.academic_url) {
+				URL.revokeObjectURL(state.writing.academic_url);
+			}
+
 			state.listening.sections.forEach(section => {
 				const listeningPart = section.state as ListeningPart;
 				if (listeningPart.audio?.source) {

src/stores/examEditor/defaults.ts

@@ -23,7 +23,8 @@ export const defaultSettings = (module: Module) => {
             return {
                 ...baseSettings,
                 writingTopic: '',
-                isWritingTopicOpen: false
+                isWritingTopicOpen: false,
+                isImageUploadOpen: false,
             }
         case 'reading':
             return {
@@ -57,6 +58,7 @@ export const defaultSettings = (module: Module) => {
                 isListeningDropdownOpen: false,
 
                 isWritingTopicOpen: false,
+                isImageUploadOpen: false,
                 writingTopic: '',
 
                 isPassageOpen: false,

src/stores/examEditor/types.ts

@@ -1,7 +1,6 @@
 import { Difficulty, InteractiveSpeakingExercise, LevelPart, ListeningPart, ReadingPart, SpeakingExercise, WritingExercise } from "@/interfaces/exam";
 import { Module } from "@/interfaces";
 import Option from "@/interfaces/option";
-import { ExerciseConfig } from "@/components/ExamEditor/ExercisePicker/ExerciseWizard";
 
 export interface GeneratedExercises {
     exercises: Record<string, string>[];
@@ -42,6 +41,7 @@ export interface ListeningSectionSettings extends SectionSettings {
 export interface WritingSectionSettings extends SectionSettings {
     isWritingTopicOpen: boolean;
     writingTopic: string;
+    isImageUploadOpen: boolean;
 }
 
 export interface LevelSectionSettings extends SectionSettings {
@@ -55,6 +55,7 @@ export interface LevelSectionSettings extends SectionSettings {
 
     // writing
     isWritingTopicOpen: boolean;
+    isImageUploadOpen: boolean;
     writingTopic: string;
 
     // reading
@@ -116,6 +117,7 @@ export interface ModuleState {
     importing: boolean;
     edit: number[];
     type?: "general" | "academic";
+    academic_url?: string | undefined;
 }
 
 export interface Avatar {

src/utils/evaluation.ts

@@ -12,14 +12,16 @@ export const evaluateWritingAnswer = async (
 	exercise: WritingExercise,
 	task: number,
 	solution: UserSolution,
+	attachment?: string,
 ): Promise<void> => {
 	await axios.post("/api/evaluate/writing", {
-		question: `${exercise.prompt} ${exercise.attachment ? exercise.attachment.description : ""}`.replaceAll("\n", ""),
+		question: `${exercise.prompt}`.replaceAll("\n", ""),
 		answer: solution.solutions[0].solution.trim().replaceAll("\n", " "),
 		task,
 		userId,
 		sessionId,
-		exerciseId: exercise.id
+		exerciseId: exercise.id,
+		attachment,
 	});
 };
 

src/utils/excel.errors.ts

@@ -0,0 +1,27 @@
+export interface ExcelError {
+    type: string;
+    value: any;
+    error: string;
+    reason: string;
+    row: number;
+    column: string;
+}
+
+export const errorsByRows = (errors: ExcelError[] ) => {
+    return errors.reduce((acc, error) => {
+        if (!acc[error.row]) {
+            acc[error.row] = {
+                required: [],
+                other: []
+            };
+        }
+
+        if (error.error === 'required') {
+            acc[error.row].required.push(error.column);
+        } else {
+            acc[error.row].other.push(error);
+        }
+
+        return acc;
+    }, {} as Record<number, { required: string[], other: ExcelError[] }>);
+}