apps/frontend/src/routes/_assessmentLayout/assessment/index.lazy.tsx

@@ -25,8 +25,8 @@ import {
 } from "@/modules/assessmentManagement/queries/assessmentQueries";
 import { TbFlagFilled, TbUpload, TbChevronRight, TbChevronUp } from "react-icons/tb";
 import FinishAssessmentModal from "@/modules/assessmentManagement/modals/ConfirmModal";
+import ValidationModal from "@/modules/assessmentManagement/modals/ValidationModal";
 import { useState, useRef, useEffect } from "react";
-import AppHeader from "@/components/AppHeader";
 
 const getQueryParam = (param: string) => {
   const urlParams = new URLSearchParams(window.location.search);
@@ -68,6 +68,8 @@ export default function AssessmentPage() {
   const [answers, setAnswers] = useState<{ [key: string]: string }>({});
   const [validationInformation, setValidationInformation] = useState<{ [key: string]: string }>({});
   const [uploadedFiles, setUploadedFiles] = useState<{ [key: string]: File | null }>({});
+  const [unansweredQuestions, setUnansweredQuestions] = useState(0);
+  const [validationModalOpen, setValidationModalOpen] = useState(false);
 
   // Fetch aspects and sub-aspects
   const aspectsQuery = useQuery({
@@ -80,10 +82,34 @@ export default function AssessmentPage() {
     getQuestionsAllQueryOptions(page, limit)
   );
 
-  const handleFinishClick = () => {
+  // const handleFinishClick = () => {
-    setModalOpen(true);
+  //   setModalOpen(true);
+  // };
+
+  // Fungsi untuk memeriksa pertanyaan yang belum dijawab
+  const checkUnansweredQuestions = () => {
+    // Misalkan data berisi pertanyaan dan jawaban
+    const unanswered = data?.data.filter(question => {
+        // Pastikan questionId tidak null dan tidak ada jawaban untuk questionId tersebut
+        return question.questionId !== null && !answers[question.questionId];
+    }) || []; // Ganti question.id dengan question.questionId dan tambahkan pengecekan null
+    setUnansweredQuestions(unanswered.length); // Aman, karena unanswered selalu array
+
+    // Jika ada pertanyaan yang belum dijawab, buka modal peringatan
+    if (unanswered.length > 0) {
+        setValidationModalOpen(true);
+    } else {
+        setModalOpen(true); // Jika tidak ada, buka modal konfirmasi selesai asesmen
+    }
   };
 
+  const handleFinishClick = () => {
+    // Memanggil fungsi untuk memeriksa pertanyaan yang belum dijawab
+    checkUnansweredQuestions();
+  };
+
+
+
   useEffect(() => {
     const id = getQueryParam("id");
   
@@ -133,15 +159,39 @@ export default function AssessmentPage() {
 
   const handleConfirmFinish = async (assessmentId: string) => {
     try {
+        // Cek pertanyaan yang belum dijawab
+        let unansweredCount = 0;
+
+        // Cek radio button
+        data?.data.forEach((question) => {
+            // Pastikan questionId tidak null sebelum memeriksa answers
+            if (question.questionId && !answers[question.questionId]) {
+                unansweredCount += 1;
+            }
+        });
+
+        // Cek textarea
+        Object.keys(validationInformation).forEach((key) => {
+            // Pastikan key tidak null dan tidak ada validasi informasi untuk key tersebut
+            if (key && !validationInformation[key]) {
+                unansweredCount += 1;
+            }
+        });
+
+        if (unansweredCount > 0) {
+            // Tampilkan modal validasi jika ada pertanyaan yang belum dijawab
+            setUnansweredQuestions(unansweredCount);
+            setValidationModalOpen(true);
+            return;
+        }
+
         // Memanggil mutation untuk mengubah status asesmen menjadi 'selesai' di backend
         const mutation = submitAssessmentMutationOptions(assessmentId);
-      
         const response = await mutation.mutationFn();
 
         // Setelah status diubah, navigasikan ke halaman hasil asesmen
         const newUrl = `/assessmentResult?id=${assessmentId}`;
         window.history.pushState({}, "", newUrl);
-      // Setelah mengubah URL, Anda bisa menjalankan logika lain jika diperlukan
         console.log("Navigated to:", newUrl);
         console.log(response.message);
     } catch (error) {
@@ -776,6 +826,13 @@ export default function AssessmentPage() {
                   onConfirm={handleConfirmFinish}
                   assessmentId={assessmentId}
                 />
+
+                {/* Modal untuk peringatan jika ada pertanyaan yang belum dijawab */}
+                  <ValidationModal
+                      opened={validationModalOpen}
+                      onClose={() => setValidationModalOpen(false)}
+                      unansweredQuestions={unansweredQuestions}
+                  />
               </Card>
             </div>
           </Flex>