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

@@ -14,6 +14,7 @@ import {
 } from "@mantine/core";
 import { useQuery, useMutation } from "@tanstack/react-query";
 import {
+  getAnswersQueryOptions,
   getAverageScoreSubAspectQueryOptions,
   getAverageScoreQueryOptions,
   fetchAspects,
@@ -21,7 +22,7 @@ import {
   getQuestionsAllQueryOptions,
   toggleFlagAnswer,
 } from "@/modules/assessmentManagement/queries/assessmentQueries";
-import { TbFlag, TbUpload, TbChevronRight, TbChevronUp } from "react-icons/tb";
+import { TbFlagFilled, TbUpload, TbChevronRight, TbChevronUp } from "react-icons/tb";
 import { useState, useRef, useEffect } from "react";
 
 const getQueryParam = (param: string) => {
@@ -60,6 +61,7 @@ export default function AssessmentPage() {
 
   const [selectedSubAspectId, setSelectedSubAspectId] = useState<string | null>(null);
   const [assessmentId, setAssessmentId] = useState<string | null>(null);
+  const [answers, setAnswers] = useState<{ [key: string]: string }>({});
 
   // Fetch aspects and sub-aspects
   const aspectsQuery = useQuery({
@@ -67,6 +69,11 @@ export default function AssessmentPage() {
     queryFn: fetchAspects,
   });
 
+  // Fetching questions data using useQuery
+  const { data, isLoading, isError, error } = useQuery(
+    getQuestionsAllQueryOptions(page, limit)
+  );
+
   useEffect(() => {
     const id = getQueryParam("id");
 
@@ -77,22 +84,20 @@ export default function AssessmentPage() {
       setAssessmentId(id);
     }
 
-    // Setel sub-aspek pertama sebagai default saat pertama kali halaman dimuat
     // Check if aspectsQuery.data and aspectsQuery.data.data are defined
-    if (aspectsQuery.data?.data && aspectsQuery.data.data.length > 0 && selectedSubAspectId === null) {
-        const firstAspect = aspectsQuery.data.data[0];
-        const firstSubAspect = firstAspect?.subAspects?.[0];
+    if (aspectsQuery.data?.data && aspectsQuery.data.data.length > 0) {
+      // If no sub-aspect is selected, find a suitable default
+      if (selectedSubAspectId === null) {
+        const firstMatchingSubAspect = aspectsQuery.data.data
+          .flatMap(aspect => aspect.subAspects) // Get all sub-aspects
+          .find(subAspect => data?.data.some(question => question.subAspectId === subAspect.id)); // Filter based on available questions
 
-        if (firstSubAspect) {
-            setSelectedSubAspectId(firstSubAspect.id);
+        if (firstMatchingSubAspect) {
+          setSelectedSubAspectId(firstMatchingSubAspect.id);
         }
       }
-  }, [aspectsQuery.data, selectedSubAspectId]);
-
-  // Fetching questions data using useQuery
-  const { data, isLoading, isError, error } = useQuery(
-    getQuestionsAllQueryOptions(page, limit)
-  );
+    }
+  }, [aspectsQuery.data, selectedSubAspectId, data?.data]);
 
   // Tambahkan state untuk aspek yang terbuka
   const [openAspects, setOpenAspects] = useState<{ [key: string]: boolean }>({});
@@ -331,11 +336,20 @@ export default function AssessmentPage() {
                             toggleFlagMutation.mutate(questionId);
                           }}
                           title="Tandai"
-                          color={flaggedQuestions[questionId] ? "red" : "gray"}
+                          color={flaggedQuestions[questionId] ? "red" : "white"}
+                          style={{
+                            border: "1px gray solid ",
+                            borderRadius: "4px",
+                            backgroundColor: flaggedQuestions[questionId] ? "red" : "white",
+                          }}
                         >
-                          <TbFlag
-                            size={24}
-                            color={flaggedQuestions[questionId] ? "black" : "inherit"}
+                          <TbFlagFilled
+                            size={20}
+                            color={flaggedQuestions[questionId] ? "white" : "black"}
+                            style={{
+                              padding: "2px",
+                            }}
+
                           />
                         </ActionIcon>
                       </Flex>
@@ -381,8 +395,7 @@ export default function AssessmentPage() {
                       {/* File Upload */}
                       {question.needFile === true && (
                         <div
-                          className={`pt-5 pb-5 pr-5 pl-2 border-2 border-dashed ${
-                            dragActive ? "bg-gray-100" : "bg-transparent"
+                          className={`pt-5 pb-5 pr-5 pl-2 border-2 border-dashed ${dragActive ? "bg-gray-100" : "bg-transparent"
                             } shadow-lg`}
                           onDragOver={handleDragOver}
                           onDragLeave={handleDragLeave}