Used main branch as base branch in the last time

src/exams/Finish.tsx

@@ -24,6 +24,8 @@ import {LevelScore} from "@/constants/ielts";
 import {getLevelScore} from "@/utils/score";
 import {capitalize} from "lodash";
 import Modal from "@/components/Modal";
+import { UserSolution } from "@/interfaces/exam";
+import ai_usage from "@/utils/ai.detection";
 
 interface Score {
 	module: Module;
@@ -40,15 +42,18 @@ interface Props {
 		timeSpent?: number;
 		inactivity?: number;
 	};
+	solutions: UserSolution[];
 	isLoading: boolean;
 	onViewResults: (moduleIndex?: number) => void;
 }
 
-export default function Finish({user, scores, modules, information, isLoading, onViewResults}: Props) {
+export default function Finish({user, scores, modules, information, solutions, isLoading, onViewResults}: Props) {
 	const [selectedModule, setSelectedModule] = useState(modules[0]);
 	const [selectedScore, setSelectedScore] = useState<Score>(scores.find((x) => x.module === modules[0])!);
 	const [isExtraInformationOpen, setIsExtraInformationOpen] = useState(false);
 
+	const aiUsage = Math.round(ai_usage(solutions) * 100);
+
 	const exams = useExamStore((state) => state.exams);
 
 	useEffect(() => setSelectedScore(scores.find((x) => x.module === selectedModule)!), [scores, selectedModule]);
@@ -125,7 +130,7 @@ export default function Finish({user, scores, modules, information, isLoading, o
 					minTimer={exams.find((x) => x.module === selectedModule)!.minTimer}
 					disableTimer
 				/>
-				<div className="flex gap-4 self-start">
+				<div className="flex gap-4 self-start w-full">
 					{modules.includes("reading") && (
 						<div
 							onClick={() => setSelectedModule("reading")}
@@ -149,6 +154,7 @@ export default function Finish({user, scores, modules, information, isLoading, o
 						</div>
 					)}
 					{modules.includes("writing") && (
+						<div className="flex w-full justify-between items-center">
 						<div
 							onClick={() => setSelectedModule("writing")}
 							className={clsx(
@@ -158,6 +164,18 @@ export default function Finish({user, scores, modules, information, isLoading, o
 							<BsPen className="h-6 w-6" />
 							<span className="font-semibold">Writing</span>
 						</div>
+						{aiUsage >= 50 && user.type !== "student" && (
+							<div className={clsx(
+								"flex items-center justify-center border px-3 h-full rounded",
+								{
+									'bg-orange-100 border-orange-400 text-orange-700': aiUsage < 80,
+									'bg-red-100 border-red-400 text-red-700': aiUsage >= 80,
+								}
+							)}>
+								<span className="text-xs">AI Usage</span>
+							</div>
+						)}
+						</div>
 					)}
 					{modules.includes("speaking") && (
 						<div