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

@@ -61,6 +61,12 @@ export default function AssessmentPage() {
   const [selectedSubAspectId, setSelectedSubAspectId] = useState<string | null>(null);
   const [assessmentId, setAssessmentId] = useState<string | null>(null);
 
+  // Fetch aspects and sub-aspects
+  const aspectsQuery = useQuery({
+    queryKey: ["aspects"],
+    queryFn: fetchAspects,
+  });
+
   useEffect(() => {
     const id = getQueryParam("id");
 
@@ -70,7 +76,18 @@ export default function AssessmentPage() {
     } 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(
@@ -87,12 +104,6 @@ export default function AssessmentPage() {
     }));
   };
 
-  // Fetch aspects and sub-aspects
-  const aspectsQuery = useQuery({
-    queryKey: ["aspects"],
-    queryFn: fetchAspects,
-  });
-
   // Fetch average scores berdasarkan assessmentId yang diambil dari URL
   const averageScoreQuery = useQuery(
     getAverageScoreQueryOptions(assessmentId || "")
@@ -231,7 +242,13 @@ export default function AssessmentPage() {
           {/* Aspek dan Sub-Aspek */}
           <Flex direction="column" gap="xs" className="mr-4 w-52">
             <div className="space-y-4">
-              {aspectsQuery.data?.data.map((aspect) => (
+              {aspectsQuery.data?.data
+                .filter((aspect) =>
+                  aspect.subAspects.some((subAspect) =>
+                    data?.data.some((question) => question.subAspectId === subAspect.id)
+                  )
+                )
+                .map((aspect) => (
                   <div
                     key={aspect.id}
                     className="p-4 bg-gray-50 rounded-lg shadow-md"
@@ -252,7 +269,11 @@ export default function AssessmentPage() {
 
                     {openAspects[aspect.id] && (
                       <div className="mt-2 space-y-2">
-                      {aspect.subAspects.map((subAspect) => (
+                        {aspect.subAspects
+                          .filter((subAspect) =>
+                            data?.data.some((question) => question.subAspectId === subAspect.id)
+                          )
+                          .map((subAspect) => (
                             <div
                               key={subAspect.id}
                               className={`flex justify-between text-gray-600 cursor-pointer ${selectedSubAspectId === subAspect.id ? 'font-bold' : ''}`}