update: file index.lazy for assessment

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,33 +69,36 @@ export default function AssessmentPage() {
     queryFn: fetchAspects,
   });
 
-  useEffect(() => {
-    const id = getQueryParam("id");
-
-    if (!id) {
-        // Handle if no ID found
-        setAssessmentId(null);
-    } else {
-        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 (firstSubAspect) {
-            setSelectedSubAspectId(firstSubAspect.id);
-        }
-    }
-  }, [aspectsQuery.data, selectedSubAspectId]);
-
   // Fetching questions data using useQuery
   const { data, isLoading, isError, error } = useQuery(
     getQuestionsAllQueryOptions(page, limit)
   );
 
+  useEffect(() => {
+    const id = getQueryParam("id");
+
+    if (!id) {
+      // Handle if no ID found
+      setAssessmentId(null);
+    } else {
+      setAssessmentId(id);
+    }
+
+    // Check if aspectsQuery.data and aspectsQuery.data.data are defined
+    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 (firstMatchingSubAspect) {
+          setSelectedSubAspectId(firstMatchingSubAspect.id);
+        }
+      }
+    }
+  }, [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,9 +395,8 @@ 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"
-                          } shadow-lg`}
+                          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}
                           onDrop={handleDrop}